@tidy-ui/code/dist/index.esm.js

The Code component elegantly displays preformatted text, such as JavaScript code, on your webpage while maintaining its original format. With a convenient copy-to-clipboard button and seamless theming, sharing and styling code has never been smoother.

import n from"react";import{css as r,styled as e,Icon as t,hsla as o,color as i,applyStandardOverrideStyles as a,createFontStyle as l}from"@tidy-ui/commons";var s=function(){return s=Object.assign||function(n){for(var r,e=1,t=arguments.length;e<t;e++)for(var o in r=arguments[e])Object.prototype.hasOwnProperty.call(r,o)&&(n[o]=r[o]);return n},s.apply(this,arguments)};function c(n,r){return Object.defineProperty?Object.defineProperty(n,"raw",{value:r}):n.raw=r,n}var u,p,d,b,f,m,v,h,g,y,w,x,k,O=r(u||(u=c(["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  height: 1.8rem;\n  width: 1.8rem;\n  padding: 0.25rem;\n  border-radius: 4px;\n"],["\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  height: 1.8rem;\n  width: 1.8rem;\n  padding: 0.25rem;\n  border-radius: 4px;\n"]))),C=e(t.CopyAll)(d||(d=c(["\n  visibility: hidden;\n  cursor: pointer;\n  ","\n  ","\n"],["\n  visibility: hidden;\n  cursor: pointer;\n  ","\n  ","\n"])),function(n){var e=n.theme.isDark;return r(p||(p=c(["\n    color: ",";\n    border: 1px solid ",";\n    background-color: ",";\n  "],["\n    color: ",";\n    border: 1px solid ",";\n    background-color: ",";\n  "])),o(e?i.slate[300]:i.slate[600]),o(e?i.slate[600]:i.slate[400]),o(e?i.slate[700]:i.slate[300]))},O),E=e(t.CheckCircle)(f||(f=c(["\n  ","\n  ","\n"],["\n  ","\n  ","\n"])),function(n){var e=n.theme,t=e.palette,a=e.isDark;return r(b||(b=c(["\n    color: ",";\n    border: 1px solid ",";\n    background-color: ",";\n  "],["\n    color: ",";\n    border: 1px solid ",";\n    background-color: ",";\n  "])),t.success[600],t.success[600],o(a?i.slate[700]:i.slate[300]))},O),j=e.div(m||(m=c(["\n  overflow: auto;\n  position: relative;\n  &:hover "," {\n    visibility: visible;\n  }\n  ","\n"],["\n  overflow: auto;\n  position: relative;\n  &:hover "," {\n    visibility: visible;\n  }\n  ","\n"])),C,a),P=e.pre(h||(h=c(["\n  overflow: auto;\n  padding: 1rem;\n  line-height: 1.45;\n  ","\n"],["\n  overflow: auto;\n  padding: 1rem;\n  line-height: 1.45;\n  ","\n"])),function(n){var e=n.theme,t=e.font,a=e.layout,l=e.isDark;return r(v||(v=c(["\n    font-family: ",";\n    font-size: ",";\n    border-radius: ",";\n    background-color: ",";\n  "],["\n    font-family: ",";\n    font-size: ",";\n    border-radius: ",";\n    background-color: ",";\n  "])),t.mono,t.size,a.radius,o(l?i.slate[700]:i.slate[200]))}),D=e.div(w||(w=c(["\n  position: absolute;\n  top: 0.8rem;\n  right: 2.6rem;\n  font-size: 0.6rem;\n  border-radius: 5px;\n  padding: 6px 8px;\n  transition: opacity 0.3s;\n  ","\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    margin-top: -5px;\n    border-width: 5px;\n    border-style: solid;\n    ","\n  }\n"],["\n  position: absolute;\n  top: 0.8rem;\n  right: 2.6rem;\n  font-size: 0.6rem;\n  border-radius: 5px;\n  padding: 6px 8px;\n  transition: opacity 0.3s;\n  ","\n  &::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    margin-top: -5px;\n    border-width: 5px;\n    border-style: solid;\n    ","\n  }\n"])),function(n){var e=n.theme,t=e.isDark,o=e.palette,i=n.visible;return r(g||(g=c(["\n    opacity: ",";\n    color: ",";\n    background-color: ",";\n  "],["\n    opacity: ",";\n    color: ",";\n    background-color: ",";\n  "])),i?"1":"0",o.neutral[200],t?o.neutral[500]:o.neutral[800])},function(n){var e=n.theme,t=e.isDark,o=e.palette;return r(y||(y=c(["\n      border-color: transparent transparent transparent ",";\n    "],["\n      border-color: transparent transparent transparent ",";\n    "])),t?o.neutral[500]:o.neutral[800])}),z=e.div(k||(k=c(["\n  position: absolute;\n  top: 0;\n  width: 100%;\n  padding: 0.25rem 1rem;\n  ","\n  ","\n"],["\n  position: absolute;\n  top: 0;\n  width: 100%;\n  padding: 0.25rem 1rem;\n  ","\n  ","\n"])),l("caption"),function(n){var e=n.theme.isDark;return r(x||(x=c(["\n    background-color: ",";\n    color: ",";\n  "],["\n    background-color: ",";\n    color: ",";\n  "])),o(e?i.amber[700]:i.amber[500],.9),o(e?i.amber[400]:i.amber[950]))}),S=n.forwardRef(function(r,e){var t=r.children,o=r.canCopy,i=function(n,r){var e={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&r.indexOf(t)<0&&(e[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)r.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(e[t[o]]=n[t[o]])}return e}(r,["children","canCopy"]),a=n.useRef(null),l=n.useState(!1),c=l[0],u=l[1],p=n.useState(),d=p[0],b=p[1];n.useEffect(function(){return function(){u(!1),b(void 0)}},[]);var f=n.useCallback(function(){navigator.permissions.query({name:"clipboard-write"}).then(function(n){var r;"granted"===n.state?navigator.clipboard.writeText("".concat(null===(r=a.current)||void 0===r?void 0:r.innerText)).then(function(){u(!0)}).catch(function(n){u(!1),b(n)}):b("Please grant 'clipboard-write' permission for this site on your browser")}).catch(function(n){u(!1),b(n)}),setTimeout(function(){return u(!1)},2e3),setTimeout(function(){return b(void 0)},5e3)},[a]);return n.createElement(j,s({ref:e,role:"contentinfo"},i),n.createElement(P,{ref:a},t),o&&n.createElement(n.Fragment,null,n.createElement(D,{visible:c,role:"tooltip"},"Copied"),c?n.createElement(E,{onClick:f,role:"status"}):n.createElement(C,{onClick:f,role:"button"})),d&&n.createElement(z,null,"".concat(d)))});S.defaultProps={canCopy:!0},S.displayName="Code";export{S as Code};