@infinityfx/fluid
Version:
React UI library, using zero-runtime CSS-in-JS.
4 lines (3 loc) • 2.4 kB
JavaScript
"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useId as t,useState as o,Fragment as n}from"react";import a from"../layout/scrollarea.js";import c from"../input/toggle.js";import{createStyles as i}from"../../core/style.js";import{combineClasses as l,classes as d}from"../../core/utils.js";import{Icon as m}from"../../core/icons.js";const s=i("code",{".wrapper":{fontSize:"var(--f-font-size-sml)",borderRadius:"var(--f-radius-med)",overflow:"hidden",position:"relative",display:"flex",flexDirection:"column",color:"var(--f-clr-text-100)"},".header":{backgroundColor:"var(--f-clr-primary-400)",padding:".8em 1em",fontWeight:500},".body":{backgroundColor:"var(--f-clr-fg-100)",flexGrow:1},".code":{display:"flex",paddingInline:"1em",minHeight:"100%"},".numbers":{userSelect:"none",textAlign:"right",color:"var(--f-clr-grey-500)",paddingBlock:"1em",paddingRight:".5em",borderRight:"solid 1px var(--f-clr-fg-200)"},".tab":{display:"inline-block",minWidth:"2em"},".content":{width:"max-content",paddingBlock:"1em"},'.content[data-numbered="true"]':{paddingLeft:"1em"},".button__align":{position:"absolute",zIndex:"99",right:"1em",bottom:0,display:"flex",alignItems:"center",maxHeight:"100%"},".wrapper .toggle":{marginBlock:"1em"},'.wrapper .toggle[data-checked="false"]':{background:"var(--f-clr-bg-100)"}});function g({children:i,cc:g={},title:p,lineNumbers:h=!0,dangerouslyInject:f,...u}){const b=l(s,g),y=t(),[v,x]=o(!1);return e("div",{...u,className:d(b.wrapper,u.className),children:[p&&r("div",{className:b.header,children:p}),r(a,{className:b.body,children:e("code",{className:b.code,children:[h&&r("div",{className:b.numbers,children:i.split(/\n/).map(((t,o)=>e(n,{children:[o+1," ",r("br",{})]},o)))}),r(a,{horizontal:!0,behavior:"shift",children:r("pre",{id:y,className:b.content,"data-numbered":h,dangerouslySetInnerHTML:f?{__html:i}:void 0,children:f?void 0:i})})]})}),r("div",{className:b.button__align,children:r(c,{compact:!0,checkedContent:r(m,{type:"check"}),checked:v,cc:{...g,toggle:b.toggle},"aria-label":"Copy code",onClick:()=>{const e=document.createRange(),r=document.getElementById(y);e.selectNodeContents(r),document.getSelection()?.addRange(e);try{navigator.clipboard.writeText(r.innerText)}catch(e){document.execCommand("copy")}x(!0),setTimeout((()=>x(!1)),2e3)},children:r(m,{type:"copy"})})})]})}export{g as default};
//# sourceMappingURL=code.js.map