lucent-ui 0.34.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{LucentProvider-BoiXYqA4.js → LucentProvider-F0EN_7TD.js} +292 -269
- package/dist/LucentProvider-LqNc0AxD.cjs +109 -0
- package/dist/devtools.cjs +3 -3
- package/dist/devtools.js +423 -405
- package/dist/index.cjs +34 -32
- package/dist/index.d.ts +16 -13
- package/dist/index.js +947 -922
- package/dist-cli/cli/entry.js +0 -0
- package/dist-cli/cli/index.js +0 -0
- package/dist-server/server/index.js +0 -0
- package/dist-server/src/components/atoms/CodeBlock/CodeBlock.manifest.js +14 -0
- package/dist-server/src/components/molecules/Card/Card.manifest.js +1 -1
- package/dist-server/src/components/molecules/PageLayout/PageLayout.manifest.js +6 -5
- package/package.json +13 -15
- package/dist/LucentProvider-we0nRXn-.cjs +0 -109
- package/dist-server/server/recipe-registry.js +0 -18
- package/dist-server/src/manifest/recipes/action-bar.recipe.js +0 -91
- package/dist-server/src/manifest/recipes/collapsible-card.recipe.js +0 -100
- package/dist-server/src/manifest/recipes/empty-state-card.recipe.js +0 -72
- package/dist-server/src/manifest/recipes/form-layout.recipe.js +0 -98
- package/dist-server/src/manifest/recipes/index.js +0 -8
- package/dist-server/src/manifest/recipes/profile-card.recipe.js +0 -101
- package/dist-server/src/manifest/recipes/search-filter-bar.recipe.js +0 -122
- package/dist-server/src/manifest/recipes/settings-panel.recipe.js +0 -167
- package/dist-server/src/manifest/recipes/stats-row.recipe.js +0 -106
- package/dist-server/src/manifest/validate.test.js +0 -28
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";const l=require("react/jsx-runtime"),b=require("react"),$t=require("react-dom"),Lt={primary:{background:"var(--lucent-accent-default)",color:"var(--lucent-accent-fg)",border:"1px solid transparent"},secondary:{background:"color-mix(in srgb, var(--lucent-accent-default) 16%, transparent)",color:"var(--lucent-text-primary)",border:"1px solid transparent"},outline:{background:"transparent",color:"var(--lucent-text-primary)",border:"1px solid color-mix(in srgb, var(--lucent-accent-default) 35%, var(--lucent-border-default))"},ghost:{background:"transparent",color:"var(--lucent-text-primary)",border:"1px solid transparent"},danger:{background:"var(--lucent-danger-default)",color:"#ffffff",border:"1px solid var(--lucent-danger-default)"},"danger-outline":{background:"transparent",color:"var(--lucent-danger-text)",border:"1px solid var(--lucent-danger-default)"},"danger-ghost":{background:"transparent",color:"var(--lucent-danger-text)",border:"1px solid transparent"}},Pt={"2xs":{height:"22px",padding:"0 var(--lucent-space-2)",fontSize:"var(--lucent-font-size-xs)",borderRadius:"var(--lucent-radius-md)"},xs:{height:"26px",padding:"0 var(--lucent-space-3)",fontSize:"var(--lucent-font-size-xs)"},sm:{height:"calc(var(--lucent-space-8) * 0.5 + 18px)",padding:"0 var(--lucent-space-4)",fontSize:"var(--lucent-font-size-sm)"},md:{height:"calc(var(--lucent-space-10) * 0.5 + 22px)",padding:"0 var(--lucent-space-5)",fontSize:"var(--lucent-font-size-md)"},lg:{height:"calc(var(--lucent-space-12) * 0.5 + 26px)",padding:"0 var(--lucent-space-6)",fontSize:"var(--lucent-font-size-lg)"}},Te=b.forwardRef(({variant:e="primary",size:t="md",loading:s=!1,fullWidth:a=!1,spread:n=!1,leftIcon:r,rightIcon:o,chevron:i=!1,disableHoverStyles:d=!1,bordered:u=!0,children:f,disabled:g,style:v,...p},S)=>{const M=g??s,k=!f&&!s&&(!!r||!!o);return l.jsxs("button",{ref:S,disabled:M,"aria-busy":s,style:{display:"inline-flex",alignItems:"center",justifyContent:n?"space-between":"center",gap:"var(--lucent-space-2)",fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,letterSpacing:"0.01em",borderRadius:"var(--lucent-radius-lg)",cursor:M?"not-allowed":"pointer",width:a?"100%":void 0,transition:"background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",whiteSpace:"nowrap",boxSizing:"border-box",outline:"none",margin:0,...Pt[t],...k&&{padding:0,aspectRatio:"1"},...Lt[e],...v,...M&&{background:"color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",color:"var(--lucent-text-disabled)",borderColor:"transparent"},...u===!1&&{border:"none"}},onMouseEnter:y=>{var x;!M&&!d&&Ft(y.currentTarget,e,u),(x=p.onMouseEnter)==null||x.call(p,y)},onMouseLeave:y=>{var x;!M&&!d&&Wt(y.currentTarget,e,u),(x=p.onMouseLeave)==null||x.call(p,y)},onMouseDown:y=>{var x;if(!M){const D=e==="danger"||e==="danger-outline"||e==="danger-ghost"?"color-mix(in srgb, var(--lucent-danger-default) 40%, transparent)":"color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)";y.currentTarget.style.transform="translateY(1px)",y.currentTarget.style.boxShadow=`0 0 0 4px ${D}`,y.currentTarget.dataset.pressed="1"}(x=p.onMouseDown)==null||x.call(p,y)},onMouseUp:y=>{var x;y.currentTarget.style.transform="",y.currentTarget.style.boxShadow="",delete y.currentTarget.dataset.pressed,(x=p.onMouseUp)==null||x.call(p,y)},onFocus:y=>{var x;y.currentTarget.dataset.pressed||(y.currentTarget.style.boxShadow="0 0 0 3px var(--lucent-accent-subtle)"),(x=p.onFocus)==null||x.call(p,y)},onBlur:y=>{var x;y.currentTarget.style.boxShadow="",(x=p.onBlur)==null||x.call(p,y)},...p,children:[r,s?l.jsx(Nt,{}):f,!s&&o,!s&&i&&l.jsx(Et,{size:t})]})});Te.displayName="Button";const Ct={primary:"0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 25%, transparent)",secondary:"0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",outline:"0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",ghost:"0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 15%, transparent)",danger:"0 4px 14px -2px color-mix(in srgb, var(--lucent-danger-default) 25%, transparent)","danger-outline":"0 4px 14px -2px color-mix(in srgb, var(--lucent-danger-default) 20%, transparent)","danger-ghost":"0 4px 14px -2px color-mix(in srgb, var(--lucent-danger-default) 15%, transparent)"};function Ft(e,t,s){e.style.transform="translateY(-1px)",e.style.boxShadow=Ct[t],t==="primary"?e.style.background="var(--lucent-accent-hover)":t==="secondary"?e.style.background="color-mix(in srgb, var(--lucent-accent-default) 22%, transparent)":t==="outline"?e.style.background="color-mix(in srgb, var(--lucent-accent-default) 10%, transparent)":t==="ghost"?e.style.background="color-mix(in srgb, var(--lucent-accent-default) 8%, transparent)":t==="danger"?(e.style.background="var(--lucent-danger-hover)",s!==!1&&(e.style.borderColor="var(--lucent-danger-hover)")):t==="danger-outline"?(e.style.background="color-mix(in srgb, var(--lucent-danger-default) 10%, var(--lucent-surface))",s!==!1&&(e.style.borderColor="var(--lucent-danger-hover)")):t==="danger-ghost"&&(e.style.background="color-mix(in srgb, var(--lucent-danger-default) 8%, var(--lucent-surface))")}function Wt(e,t,s){e.style.transform="",e.style.boxShadow="",t==="primary"?e.style.background="var(--lucent-accent-default)":t==="secondary"?e.style.background="color-mix(in srgb, var(--lucent-accent-default) 16%, transparent)":t==="outline"||t==="ghost"?e.style.background="transparent":t==="danger"?(e.style.background="var(--lucent-danger-default)",s!==!1&&(e.style.borderColor="var(--lucent-danger-default)")):t==="danger-outline"?(e.style.background="transparent",s!==!1&&(e.style.borderColor="var(--lucent-danger-default)")):t==="danger-ghost"&&(e.style.background="transparent")}const Ht={"2xs":8,xs:10,sm:12,md:14,lg:16};function Et({size:e}){const t=Ht[e];return l.jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,style:{flexShrink:0,marginLeft:-2},children:l.jsx("polyline",{points:"6 9 12 15 18 9"})})}function Nt(){return l.jsxs("svg",{width:14,height:14,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2.5,strokeLinecap:"round","aria-hidden":!0,style:{animation:"lucent-spin 0.7s linear infinite",flexShrink:0},children:[l.jsx("style",{children:"@keyframes lucent-spin { to { transform: rotate(360deg); } }"}),l.jsx("path",{d:"M12 2a10 10 0 0 1 10 10"})]})}const At={sm:"calc(var(--lucent-space-8) * 0.5 + 16px)",md:"calc(var(--lucent-space-10) * 0.5 + 20px)",lg:"calc(var(--lucent-space-12) * 0.5 + 24px)"},Ge={sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-md)",lg:"var(--lucent-font-size-md)"},we={sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-sm)",lg:"var(--lucent-font-size-md)"},Q={sm:"var(--lucent-space-3)",md:"var(--lucent-space-4)",lg:"var(--lucent-space-4)"},Ve={sm:"calc(var(--lucent-space-3) + 14px + var(--lucent-space-2))",md:"calc(var(--lucent-space-4) + 18px + var(--lucent-space-2))",lg:"calc(var(--lucent-space-4) + 20px + var(--lucent-space-3))"},K=b.forwardRef(({size:e="md",label:t,helperText:s,errorText:a,leftElement:n,rightElement:r,prefix:o,suffix:i,id:d,style:u,...f},g)=>{const v=d??`lucent-input-${Math.random().toString(36).slice(2,7)}`,p=!!a,S=!!f.disabled,[M,k]=b.useState(!1),[y,x]=b.useState(!1),m=S?"transparent":p?"var(--lucent-danger-default)":M?"var(--lucent-accent-border)":y?"var(--lucent-border-strong)":"var(--lucent-border-default)",D=M?`0 0 0 3px ${p?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`:"none",$={display:"flex",alignItems:"center",color:S?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",fontSize:Ge[e],fontFamily:"var(--lucent-font-family-base)",whiteSpace:"nowrap",userSelect:"none",flexShrink:0},A={...$,paddingLeft:Q[e],paddingRight:"2px"},N={...$,paddingLeft:"2px",paddingRight:Q[e]};return l.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%",...u},children:[t&&l.jsx("label",{htmlFor:v,style:{fontSize:we[e],fontWeight:"var(--lucent-font-weight-medium)",color:S?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:t}),l.jsxs("div",{style:{display:"flex",alignItems:"stretch",height:At[e],border:`1px solid ${m}`,borderRadius:"var(--lucent-radius-lg)",boxShadow:D,background:S?"color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)":"var(--lucent-surface)",overflow:"hidden",cursor:S?"not-allowed":void 0,transition:["border-color var(--lucent-duration-fast) var(--lucent-easing-default)","box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"].join(", ")},onMouseEnter:()=>{S||x(!0)},onMouseLeave:()=>x(!1),children:[o&&l.jsx("span",{style:A,children:o}),l.jsxs("div",{style:{position:"relative",flex:1,display:"flex",alignItems:"center",minWidth:0},children:[n&&l.jsx("span",{style:{position:"absolute",left:Q[e],color:S?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center",pointerEvents:"none"},children:n}),l.jsx("input",{ref:g,id:v,"aria-invalid":p,"aria-describedby":p?`${v}-error`:s?`${v}-helper`:void 0,style:{width:"100%",height:"100%",paddingLeft:n?Ve[e]:Q[e],paddingRight:r?Ve[e]:Q[e],fontSize:Ge[e],fontFamily:"var(--lucent-font-family-base)",color:S?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",background:"transparent",border:"none",outline:"none",cursor:S?"not-allowed":void 0,boxSizing:"border-box"},...f,onFocus:E=>{var W;k(!0),(W=f.onFocus)==null||W.call(f,E)},onBlur:E=>{var W;k(!1),(W=f.onBlur)==null||W.call(f,E)}}),r&&l.jsx("span",{style:{position:"absolute",right:Q[e],color:S?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center"},children:r})]}),i&&l.jsx("span",{style:N,children:i})]}),p&&l.jsx("span",{id:`${v}-error`,role:"alert",style:{fontSize:we[e],color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:a}),!p&&s&&l.jsx("span",{id:`${v}-helper`,style:{fontSize:we[e],color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:s})]})});K.displayName="Input";const Ot={neutral:{bg:"var(--lucent-surface-secondary)",color:"var(--lucent-text-secondary)",border:"var(--lucent-border-default)"},accent:{bg:"var(--lucent-accent-default)",color:"var(--lucent-accent-fg)",border:"var(--lucent-accent-default)"},success:{bg:"var(--lucent-success-subtle)",color:"var(--lucent-success-text)",border:"var(--lucent-success-subtle)"},warning:{bg:"var(--lucent-warning-subtle)",color:"var(--lucent-warning-text)",border:"var(--lucent-warning-subtle)"},danger:{bg:"var(--lucent-danger-subtle)",color:"var(--lucent-danger-text)",border:"var(--lucent-danger-subtle)"},info:{bg:"var(--lucent-info-subtle)",color:"var(--lucent-info-text)",border:"var(--lucent-info-subtle)"}},Xt={sm:{fontSize:"var(--lucent-font-size-xs)",padding:"0 var(--lucent-space-2)",height:"18px"},md:{fontSize:"var(--lucent-font-size-sm)",padding:"0 var(--lucent-space-2)",height:"22px"}};function qt({variant:e="neutral",size:t="md",dot:s=!1,children:a,style:n}){const r=Ot[e],o=Xt[t];return l.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:"var(--lucent-space-1)",height:o.height,padding:o.padding,fontSize:o.fontSize,fontFamily:"var(--lucent-font-family-base)",fontWeight:"var(--lucent-font-weight-medium)",lineHeight:1,borderRadius:"var(--lucent-radius-full)",background:r.bg,color:r.color,border:`1px solid ${r.border}`,whiteSpace:"nowrap",boxSizing:"border-box",...n},children:[s&&l.jsx("span",{style:{width:6,height:6,borderRadius:"var(--lucent-radius-full)",background:"currentColor",flexShrink:0}}),a]})}const Ut={sm:"calc(var(--lucent-space-8) * 0.5 + 16px)",md:"calc(var(--lucent-space-10) * 0.5 + 20px)",lg:"calc(var(--lucent-space-12) * 0.5 + 24px)"},Gt={sm:{track:[28,16],thumb:12},md:{track:[36,20],thumb:16},lg:{track:[44,24],thumb:20}},_e="cubic-bezier(0.34, 1.56, 0.64, 1)",Vt=`
|
|
2
|
+
@keyframes lucent-toggle-pop {
|
|
3
|
+
0% { transform: scale(1); }
|
|
4
|
+
35% { transform: scale(0.94); }
|
|
5
|
+
70% { transform: scale(1.06); }
|
|
6
|
+
100% { transform: scale(1); }
|
|
7
|
+
}
|
|
8
|
+
`;function _t({label:e,size:t="md",checked:s,defaultChecked:a,contained:n=!1,helperText:r,align:o="left",disabled:i,id:d,onChange:u,style:f,...g}){const v=d??`lucent-toggle-${Math.random().toString(36).slice(2,7)}`,p=s!==void 0,[S,M]=b.useState(a??!1),k=p?!!s:S,y=b.useRef(k),[x,m]=b.useState(0),[D,$]=b.useState(!1);b.useEffect(()=>{if(!i&&y.current!==k){y.current=k,m(q=>q+1),$(!0);const H=setTimeout(()=>$(!1),150);return()=>clearTimeout(H)}},[k,i]);const{track:[A,N],thumb:E}=Gt[t],W=k?A-E-2:2,Y=H=>{p||M(H.target.checked),u==null||u(H)},V=l.jsxs("span",{"aria-hidden":!0,style:{position:"relative",width:A,height:N,borderRadius:N/2,flexShrink:0},children:[l.jsx("span",{style:{position:"absolute",inset:0,borderRadius:"inherit",background:i?"var(--lucent-surface-secondary)":k?"var(--lucent-accent-default)":"color-mix(in srgb, var(--lucent-text-primary) 12%, transparent)",transition:"background var(--lucent-duration-fast) var(--lucent-easing-default)",animation:x>0?`lucent-toggle-pop 240ms ${_e} forwards`:void 0}},x),l.jsx("span",{style:{position:"absolute",top:2,left:W,width:D?E*1.3:E,height:E,borderRadius:E,background:"#ffffff",boxShadow:"0 1px 3px rgb(0 0 0 / 0.2)",transition:`left 260ms ${_e}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`}})]}),B=l.jsxs("label",{style:{display:o==="right"?"flex":"inline-flex",alignItems:r?"flex-start":"center",gap:"var(--lucent-space-2)",...o==="right"?{width:"100%"}:{},cursor:i?"not-allowed":"pointer",fontFamily:"var(--lucent-font-family-base)",fontSize:t==="sm"?"var(--lucent-font-size-sm)":"var(--lucent-font-size-md)",color:i?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",userSelect:"none",...n?{}:f},children:[l.jsx("input",{type:"checkbox",role:"switch",id:v,checked:p?s:S,disabled:i,onChange:Y,"aria-checked":k,style:{position:"absolute",opacity:0,width:0,height:0,margin:0,pointerEvents:"none"},...g}),o==="left"&&V,e||r?l.jsxs("span",{style:{display:"flex",flexDirection:"column",flex:o==="right"?1:void 0},children:[e&&l.jsx("span",{style:{fontWeight:r?"var(--lucent-font-weight-medium)":"var(--lucent-font-weight-regular)",lineHeight:r?1.3:1},children:e}),r&&l.jsx("span",{style:{fontSize:"var(--lucent-font-size-xs)",color:i?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",marginTop:"2px"},children:r})]}):null,o==="right"&&V]});return l.jsxs(l.Fragment,{children:[l.jsx("style",{children:Vt}),n?l.jsx("div",{style:{border:"1px solid var(--lucent-border-strong)",borderRadius:"var(--lucent-radius-lg)",...r?{padding:"var(--lucent-space-3)"}:{minHeight:Ut[t],padding:"0 var(--lucent-space-3)",display:"flex",alignItems:"center"},background:k&&!i?"color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)":"transparent",transition:"border-color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)",cursor:i?"not-allowed":"pointer",...f},onClick:H=>{if(!i&&H.target===H.currentTarget){const q=H.currentTarget.querySelector("input");q==null||q.click()}},children:B}):B]})}const Kt={sm:"calc(var(--lucent-space-8) * 0.5 + 16px)",md:"calc(var(--lucent-space-10) * 0.5 + 20px)",lg:"calc(var(--lucent-space-12) * 0.5 + 24px)"},Yt={sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-md)",lg:"var(--lucent-font-size-md)"},Se={sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-sm)",lg:"var(--lucent-font-size-md)"},Ke={sm:"var(--lucent-space-2)",md:"var(--lucent-space-3)",lg:"var(--lucent-space-3)"},Ie=b.forwardRef(({options:e,size:t="md",label:s,helperText:a,errorText:n,placeholder:r,disabled:o,id:i,style:d,...u},f)=>{const g=i??`lucent-select-${Math.random().toString(36).slice(2,7)}`,v=!!n,p=!!o,[S,M]=b.useState(!1),[k,y]=b.useState(!1),x=p?"transparent":v?"var(--lucent-danger-default)":S?"var(--lucent-accent-border)":k?"var(--lucent-border-strong)":"var(--lucent-border-default)",m=S?`0 0 0 3px ${v?"var(--lucent-danger-subtle)":"var(--lucent-accent-subtle)"}`:"none";return l.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%",...d},children:[s&&l.jsx("label",{htmlFor:g,style:{fontSize:Se[t],fontWeight:"var(--lucent-font-weight-medium)",color:p?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:s}),l.jsxs("div",{style:{position:"relative",display:"flex",alignItems:"center",height:Kt[t],border:`1px solid ${x}`,borderRadius:"var(--lucent-radius-lg)",boxShadow:m,background:p?"color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)":"var(--lucent-surface)",cursor:p?"not-allowed":"pointer",transition:["border-color var(--lucent-duration-fast) var(--lucent-easing-default)","box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"].join(", ")},onMouseEnter:()=>{p||y(!0)},onMouseLeave:()=>y(!1),children:[l.jsxs("select",{ref:f,id:g,disabled:o,"aria-invalid":v,"aria-describedby":v?`${g}-error`:a?`${g}-helper`:void 0,style:{width:"100%",height:"100%",padding:`0 var(--lucent-space-8) 0 ${Ke[t]}`,fontSize:Yt[t],fontFamily:"var(--lucent-font-family-base)",color:p?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",background:"transparent",border:"none",borderRadius:"var(--lucent-radius-lg)",outline:"none",appearance:"none",cursor:p?"not-allowed":"pointer",boxSizing:"border-box"},onFocus:D=>{var $;p||M(!0),($=u.onFocus)==null||$.call(u,D)},onBlur:D=>{var $;M(!1),($=u.onBlur)==null||$.call(u,D)},onMouseDown:()=>{p||M(!0)},...u,children:[r&&l.jsx("option",{value:"",disabled:!0,children:r}),e.map(D=>l.jsx("option",{value:D.value,disabled:D.disabled,children:D.label},D.value))]}),l.jsx("span",{"aria-hidden":!0,style:{position:"absolute",right:Ke[t],pointerEvents:"none",color:p?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",display:"flex",alignItems:"center"},children:l.jsx("svg",{width:14,height:14,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:l.jsx("polyline",{points:"6 9 12 15 18 9"})})})]}),v&&l.jsx("span",{id:`${g}-error`,role:"alert",style:{fontSize:Se[t],color:"var(--lucent-danger-text)",fontFamily:"var(--lucent-font-family-base)"},children:n}),!v&&a&&l.jsx("span",{id:`${g}-helper`,style:{fontSize:Se[t],color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:a})]})});Ie.displayName="Select";const Zt={primary:"var(--lucent-text-primary)",secondary:"var(--lucent-text-secondary)",disabled:"var(--lucent-text-disabled)",inverse:"var(--lucent-text-inverse)",onAccent:"var(--lucent-accent-fg)",success:"var(--lucent-success-text)",warning:"var(--lucent-warning-text)",danger:"var(--lucent-danger-text)",info:"var(--lucent-info-text)"},Jt={xs:"var(--lucent-font-size-xs)",sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-md)",lg:"var(--lucent-font-size-lg)",xl:"var(--lucent-font-size-xl)","2xl":"var(--lucent-font-size-2xl)","3xl":"var(--lucent-font-size-3xl)"},Qt={regular:"var(--lucent-font-weight-regular)",medium:"var(--lucent-font-weight-medium)",semibold:"var(--lucent-font-weight-semibold)",bold:"var(--lucent-font-weight-bold)"},ea={tight:"var(--lucent-line-height-tight)",base:"var(--lucent-line-height-base)",relaxed:"var(--lucent-line-height-relaxed)"},ta={base:"var(--lucent-font-family-base)",mono:"var(--lucent-font-family-mono)",display:"var(--lucent-font-family-display)"};function aa({as:e="p",size:t="md",weight:s="regular",color:a="primary",align:n,lineHeight:r="base",family:o="base",truncate:i=!1,children:d,style:u,...f}){const g={fontSize:Jt[t],fontWeight:Qt[s],color:Zt[a],...n!==void 0&&{textAlign:n},lineHeight:ea[r],fontFamily:ta[o],margin:0,...i&&{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},...u},v=e;return l.jsx(v,{style:g,...f,children:d})}const na={sm:"3px",md:"4px",lg:"5px"},ra={sm:"14px",md:"18px",lg:"22px"},sa=`
|
|
9
|
+
.lucent-slider {
|
|
10
|
+
-webkit-appearance: none;
|
|
11
|
+
appearance: none;
|
|
12
|
+
width: 100%;
|
|
13
|
+
background: transparent;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
outline: none;
|
|
16
|
+
margin: 0;
|
|
17
|
+
padding: 6px 0;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
.lucent-slider:disabled { cursor: not-allowed; }
|
|
21
|
+
|
|
22
|
+
/* WebKit track */
|
|
23
|
+
.lucent-slider::-webkit-slider-runnable-track {
|
|
24
|
+
height: var(--ls-track-h);
|
|
25
|
+
border-radius: 999px;
|
|
26
|
+
background: linear-gradient(
|
|
27
|
+
to right,
|
|
28
|
+
var(--lucent-accent-default) 0%,
|
|
29
|
+
var(--lucent-accent-default) var(--ls-fill),
|
|
30
|
+
color-mix(in srgb, var(--lucent-text-primary) 10%, transparent) var(--ls-fill),
|
|
31
|
+
color-mix(in srgb, var(--lucent-text-primary) 10%, transparent) 100%
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
.lucent-slider:disabled::-webkit-slider-runnable-track {
|
|
35
|
+
background: color-mix(in srgb, var(--lucent-text-primary) 10%, transparent);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* WebKit thumb */
|
|
39
|
+
.lucent-slider::-webkit-slider-thumb {
|
|
40
|
+
-webkit-appearance: none;
|
|
41
|
+
appearance: none;
|
|
42
|
+
width: var(--ls-thumb);
|
|
43
|
+
height: var(--ls-thumb);
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
background: var(--lucent-accent-default);
|
|
46
|
+
border: 2px solid var(--lucent-surface);
|
|
47
|
+
box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
|
|
48
|
+
margin-top: calc((var(--ls-thumb) - var(--ls-track-h)) / -2);
|
|
49
|
+
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
.lucent-slider:not(:disabled):hover::-webkit-slider-thumb {
|
|
53
|
+
transform: scale(1.15);
|
|
54
|
+
}
|
|
55
|
+
.lucent-slider:focus-visible::-webkit-slider-thumb {
|
|
56
|
+
box-shadow: 0 0 0 3px var(--lucent-accent-subtle);
|
|
57
|
+
}
|
|
58
|
+
.lucent-slider:disabled::-webkit-slider-thumb {
|
|
59
|
+
background: color-mix(in srgb, var(--lucent-text-primary) 12%, transparent);
|
|
60
|
+
border-color: color-mix(in srgb, var(--lucent-text-primary) 10%, transparent);
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Firefox track */
|
|
65
|
+
.lucent-slider::-moz-range-track {
|
|
66
|
+
height: var(--ls-track-h);
|
|
67
|
+
border-radius: 999px;
|
|
68
|
+
background: color-mix(in srgb, var(--lucent-text-primary) 10%, transparent);
|
|
69
|
+
}
|
|
70
|
+
.lucent-slider::-moz-range-progress {
|
|
71
|
+
height: var(--ls-track-h);
|
|
72
|
+
border-radius: 999px;
|
|
73
|
+
background: var(--lucent-accent-default);
|
|
74
|
+
}
|
|
75
|
+
.lucent-slider:disabled::-moz-range-progress {
|
|
76
|
+
background: transparent;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Firefox thumb */
|
|
80
|
+
.lucent-slider::-moz-range-thumb {
|
|
81
|
+
width: var(--ls-thumb);
|
|
82
|
+
height: var(--ls-thumb);
|
|
83
|
+
border-radius: 50%;
|
|
84
|
+
background: var(--lucent-accent-default);
|
|
85
|
+
border: 2px solid var(--lucent-surface);
|
|
86
|
+
box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
transition: transform 120ms ease, box-shadow 120ms ease;
|
|
89
|
+
}
|
|
90
|
+
.lucent-slider:not(:disabled):hover::-moz-range-thumb {
|
|
91
|
+
transform: scale(1.15);
|
|
92
|
+
}
|
|
93
|
+
.lucent-slider:focus-visible::-moz-range-thumb {
|
|
94
|
+
box-shadow: 0 0 0 3px var(--lucent-accent-subtle);
|
|
95
|
+
}
|
|
96
|
+
.lucent-slider:disabled::-moz-range-thumb {
|
|
97
|
+
background: color-mix(in srgb, var(--lucent-text-primary) 12%, transparent);
|
|
98
|
+
border-color: color-mix(in srgb, var(--lucent-text-primary) 10%, transparent);
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
}
|
|
101
|
+
`;function oa({label:e,showValue:t=!1,size:s="md",min:a=0,max:n=100,step:r=1,value:o,defaultValue:i,disabled:d,id:u,onChange:f,style:g,...v}){const p=u??`lucent-slider-${Math.random().toString(36).slice(2,7)}`,S=o!==void 0,[M,k]=b.useState(i??Math.round((a+n)/2)),y=S?o:M,x=`${(y-a)/(n-a)*100}%`,m=D=>{S||k(Number(D.target.value)),f==null||f(D)};return l.jsxs(l.Fragment,{children:[l.jsx("style",{children:sa}),l.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"var(--lucent-space-1)",width:"100%",fontFamily:"var(--lucent-font-family-base)",...g},children:[(e||t)&&l.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"baseline"},children:[e&&l.jsx("label",{htmlFor:p,style:{fontSize:"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:d?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",cursor:d?"not-allowed":"default"},children:e}),t&&l.jsx("span",{style:{fontSize:"var(--lucent-font-size-sm)",color:d?"var(--lucent-text-disabled)":"var(--lucent-text-secondary)",fontVariantNumeric:"tabular-nums"},children:y})]}),l.jsx("input",{type:"range",id:p,className:"lucent-slider",min:a,max:n,step:r,disabled:d,value:S?o:M,onChange:m,style:{"--ls-track-h":na[s],"--ls-thumb":ra[s],"--ls-fill":x},...v})]})]})}const Ye={sm:"calc(var(--lucent-space-8) * 0.5 + 18px)",md:"calc(var(--lucent-space-10) * 0.5 + 22px)",lg:"calc(var(--lucent-space-12) * 0.5 + 26px)"},la={sm:"var(--lucent-font-size-sm)",md:"var(--lucent-font-size-md)",lg:"var(--lucent-font-size-lg)"},ca={sm:"var(--lucent-space-3)",md:"var(--lucent-space-4)",lg:"var(--lucent-space-5)"};function Be({options:e,value:t,defaultValue:s,onChange:a,size:n="md",disabled:r=!1,fullWidth:o=!0,id:i,style:d}){var y;const[u,f]=b.useState(s??((y=e[0])==null?void 0:y.value)??""),g=t!==void 0?t:u,v=b.useRef(null),[p,S]=b.useState(null),M=b.useRef(!1);b.useLayoutEffect(()=>{const x=v.current;if(!x)return;const m=()=>{const $=x.querySelector(`[data-sc-value="${g}"]`);$&&(S({left:$.offsetLeft,width:$.offsetWidth,animate:M.current}),M.current=!0)};m();const D=new ResizeObserver(m);return D.observe(x),()=>D.disconnect()},[g,e]);const k=x=>{r||x.disabled||(t===void 0&&f(x.value),a==null||a(x.value))};return l.jsxs("div",{id:i,ref:v,role:"group",style:{position:"relative",display:"flex",alignItems:"center",width:o?"100%":"fit-content",height:Ye[n],background:"color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",borderRadius:"var(--lucent-radius-lg)",padding:0,gap:0,opacity:r?.5:1,...d},children:[p&&l.jsx("span",{"aria-hidden":!0,style:{position:"absolute",top:3,left:p.left+3,width:p.width-6,height:"calc(100% - 6px)",background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",boxShadow:"var(--lucent-shadow-sm)",transition:p.animate?"left var(--lucent-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1), width var(--lucent-duration-base) cubic-bezier(0.22, 1, 0.36, 1)":"none",zIndex:0,pointerEvents:"none"}}),e.map(x=>{const m=x.value===g,D=r||!!x.disabled;return l.jsx("button",{"data-sc-value":x.value,type:"button",role:"radio","aria-checked":m,disabled:D,onClick:()=>k(x),style:{position:"relative",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--lucent-space-1)",flex:1,height:Ye[n],padding:`0 ${ca[n]}`,fontSize:la[n],fontFamily:"var(--lucent-font-family-base)",fontWeight:m?"var(--lucent-font-weight-medium)":"var(--lucent-font-weight-regular)",color:D?"var(--lucent-text-disabled)":m?"var(--lucent-text-primary)":"var(--lucent-text-secondary)",background:"transparent",border:"none",borderRadius:"var(--lucent-radius-lg)",cursor:D?"not-allowed":"pointer",outline:"none",whiteSpace:"nowrap",transition:["color var(--lucent-duration-fast) var(--lucent-easing-default)","font-weight var(--lucent-duration-fast) var(--lucent-easing-default)"].join(", ")},onFocus:$=>{$.currentTarget.matches(":focus-visible")&&($.currentTarget.style.boxShadow="0 0 0 2px var(--lucent-accent-subtle)")},onBlur:$=>{$.currentTarget.style.boxShadow=""},children:x.label},x.value)})]})}Be.displayName="SegmentedControl";const ia={xs:12,sm:16,md:22,lg:28,xl:36,"2xl":48},ua={xs:"var(--lucent-radius-sm)",sm:"var(--lucent-radius-sm)",md:"var(--lucent-radius-md)",lg:"var(--lucent-radius-md)",xl:"var(--lucent-radius-lg)","2xl":"var(--lucent-radius-lg)"},Ze="inset 0 0 0 1px rgba(0,0,0,0.2)",Je="inset 0 0 0 2px rgba(0,0,0,0.5)",da="inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";function fa(e){return{backgroundImage:[`linear-gradient(${e}, ${e})`,"linear-gradient(45deg, #e5e5e5 25%, transparent 25%)","linear-gradient(-45deg, #e5e5e5 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #e5e5e5 75%)","linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)"].join(", "),backgroundSize:"auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px",backgroundPosition:"0 0, 0 0, 0 4px, 4px -4px, -4px 0",backgroundColor:"#fff"}}const ne=b.forwardRef(({color:e,size:t="md",shape:s="circle",showCheckerboard:a=!1,selected:n=!1,disabled:r=!1,style:o,onFocus:i,onBlur:d,onClick:u,...f},g)=>{const v=ia[t],p=s==="circle"?"50%":ua[t];return l.jsx("button",{ref:g,type:"button",disabled:r,onClick:u,style:{width:v,height:v,flexShrink:0,...a?fa(e):{background:e},border:"none",borderRadius:p,cursor:r?"not-allowed":u?"pointer":"default",padding:0,outline:"none",opacity:r?.4:1,boxShadow:n?Je:Ze,transition:"box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",...o},onFocus:S=>{r||(S.currentTarget.style.boxShadow=da),i==null||i(S)},onBlur:S=>{S.currentTarget.style.boxShadow=n?Je:Ze,d==null||d(S)},...f})});ne.displayName="ColorSwatch";function be(e,t,s){return Math.max(t,Math.min(s,e))}function pa(e,t,s){const a=t/100,n=s/100,r=n*a,o=r*(1-Math.abs(e/60%2-1)),i=n-r;let d=0,u=0,f=0;return e<60?(d=r,u=o):e<120?(d=o,u=r):e<180?(u=r,f=o):e<240?(u=o,f=r):e<300?(d=o,f=r):(d=r,f=o),{r:Math.round((d+i)*255),g:Math.round((u+i)*255),b:Math.round((f+i)*255)}}function ga(e,t,s){const a=e/255,n=t/255,r=s/255,o=Math.max(a,n,r),i=Math.min(a,n,r),d=o-i,u=o,f=o===0?0:d/o;let g=0;return d!==0&&(o===a?g=((n-r)/d+(n<r?6:0))/6:o===n?g=((r-a)/d+2)/6:g=((a-n)/d+4)/6),{h:Math.round(g*360),s:Math.round(f*100),v:Math.round(u*100)}}function ba(e,t,s){const a=e/255,n=t/255,r=s/255,o=Math.max(a,n,r),i=Math.min(a,n,r),d=(o+i)/2;if(o===i)return{h:0,s:0,l:Math.round(d*100)};const u=o-i,f=d>.5?u/(2-o-i):u/(o+i);let g=0;return o===a?g=((n-r)/u+(n<r?6:0))/6:o===n?g=((r-a)/u+2)/6:g=((a-n)/u+4)/6,{h:Math.round(g*360),s:Math.round(f*100),l:Math.round(d*100)}}function ge(e,t,s){const a=t/100,n=s/100,r=(1-Math.abs(2*n-1))*a,o=r*(1-Math.abs(e/60%2-1)),i=n-r/2;let d=0,u=0,f=0;return e<60?(d=r,u=o):e<120?(d=o,u=r):e<180?(u=r,f=o):e<240?(u=o,f=r):e<300?(d=o,f=r):(d=r,f=o),{r:Math.round((d+i)*255),g:Math.round((u+i)*255),b:Math.round((f+i)*255)}}function Re(e){const t=e.replace("#","");return t.length===3?`#${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}`:t.length===6||t.length===8?`#${t}`:"#000000"}function st(e){const t=Re(e);return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:t.length===9?+(parseInt(t.slice(7,9),16)/255).toFixed(2):1}}function je({r:e,g:t,b:s,a}){const n=o=>be(Math.round(o),0,255).toString(16).padStart(2,"0"),r=`#${n(e)}${n(t)}${n(s)}`;return a<1?`${r}${n(Math.round(a*255))}`:r}function ot({h:e,s:t,v:s,a}){return{...pa(e,t,s),a}}function X({r:e,g:t,b:s,a}){return{...ga(e,t,s),a}}function ue(e){return je(ot(e))}function de(e){const t=e.trim();if(t.startsWith("#")){const n=Re(t);return/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(n)?st(n):null}const s=t.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/);if(s){const n=+(s[1]??"0"),r=+(s[2]??"0"),o=+(s[3]??"0"),i=s[4]!==void 0?+s[4]:1;return[n,r,o].every(d=>d<=255)&&i>=0&&i<=1?{r:n,g:r,b:o,a:i}:null}const a=t.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/);if(a){const n=+(a[1]??"0"),r=+(a[2]??"0"),o=+(a[3]??"0");return n<=360&&r<=100&&o<=100?{...ge(n,r,o),a:1}:null}return null}const xa=[{label:"Presets",colors:["#000000","#2563eb","#16a34a","#ca8a04","#dc2626","#0ea5e9","#9333ea","#4f46e5","#e11d48"]}],ha=["linear-gradient(45deg, #c0c0c0 25%, transparent 25%)","linear-gradient(-45deg, #c0c0c0 25%, transparent 25%)","linear-gradient(45deg, transparent 75%, #c0c0c0 75%)","linear-gradient(-45deg, transparent 75%, #c0c0c0 75%)"].join(", ");function Qe({value:e,min:t,max:s,onChange:a,trackStyle:n,formatTooltip:r}){const o=b.useRef(null),[i,d]=b.useState(!1),u=b.useCallback(g=>{const v=o.current.getBoundingClientRect(),p=be((g.clientX-v.left)/v.width,0,1);a(t+p*(s-t))},[t,s,a]),f=(e-t)/(s-t)*100;return l.jsx("div",{ref:o,style:{position:"relative",height:12,borderRadius:6,cursor:"crosshair",userSelect:"none",...n},onPointerDown:g=>{g.currentTarget.setPointerCapture(g.pointerId),d(!0),u(g)},onPointerMove:g=>{g.buttons>0&&u(g)},onPointerUp:()=>d(!1),onPointerCancel:()=>d(!1),children:l.jsx("div",{style:{position:"absolute",left:`${f}%`,top:"50%",transform:"translate(-50%, -50%)",width:14,height:14,borderRadius:"50%",background:"white",border:"2px solid rgba(0,0,0,0.22)",boxShadow:"0 1px 4px rgba(0,0,0,0.3)",zIndex:1,pointerEvents:"none"},children:i&&r&&l.jsx("div",{style:{position:"absolute",bottom:"100%",left:"50%",transform:"translateX(-50%)",marginBottom:6,background:"rgba(0,0,0,0.75)",color:"#fff",fontSize:11,fontFamily:"var(--lucent-font-family-base)",fontWeight:500,borderRadius:4,padding:"2px 6px",whiteSpace:"nowrap",pointerEvents:"none"},children:r(e)})})})}function ma(){return l.jsxs("svg",{width:14,height:14,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[l.jsx("path",{d:"M2 22l1-1h3l9-9"}),l.jsx("path",{d:"M3 21v-3l9-9"}),l.jsx("path",{d:"M15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z"})]})}function lt({value:e,onChange:t,label:s,size:a="md",inline:n=!1,disabled:r=!1,presetGroups:o=xa,portalContainer:i,id:d,style:u}){var z,L;const f=a==="sm"?24:40,g=b.useId(),v=d??g,[p,S]=b.useState(!1),[M,k]=b.useState("hex"),[y,x]=b.useState(0),[m,D]=b.useState(()=>{const c=e?de(e)??{r:0,g:0,b:0,a:1}:{r:0,g:0,b:0,a:1};return X(c)}),[$,A]=b.useState(()=>ue(m).slice(1).toUpperCase()),N=b.useRef(null),E=b.useRef(null),W=b.useRef(null),[Y,V]=b.useState({top:0,left:0});b.useLayoutEffect(()=>{if(!p||!N.current)return;const c=N.current.getBoundingClientRect();let h=c.left;const T=c.bottom+8;if(W.current){const I=W.current.offsetWidth;h+I>window.innerWidth&&(h=c.right-I)}V({top:T,left:h})},[p]),b.useEffect(()=>{if(!e)return;const c=de(e);c&&(D(X(c)),A(je(c).slice(1).toUpperCase()))},[e]),b.useEffect(()=>{if(!p)return;const c=h=>{var I,F;const T=h.target;(I=N.current)!=null&&I.contains(T)||(F=W.current)!=null&&F.contains(T)||S(!1)};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[p]);const B=b.useCallback(c=>{D(c);const h=ue(c);A(h.slice(1).toUpperCase()),t==null||t(h)},[t]),H=b.useCallback(c=>{const h=E.current.getBoundingClientRect(),T=Math.round(be((c.clientX-h.left)/h.width,0,1)*100),I=Math.round((1-be((c.clientY-h.top)/h.height,0,1))*100);B({...m,s:T,v:I})},[m,B]),q=b.useCallback(async()=>{if("EyeDropper"in window)try{const c=await new window.EyeDropper().open(),h=de(c.sRGBHex);h&&B(X(h))}catch{}},[B]),C=ot(m),O=ba(C.r,C.g,C.b),ae=ue(m),ye=ue({...m,a:1}),_=Math.round(m.a*100),w=[{id:"hex",label:"Hex"},{id:"rgb",label:"RGB"},{id:"hsl",label:"HSL"},{id:"hsb",label:"HSB"}],R=typeof window<"u"&&"EyeDropper"in window;return l.jsxs("div",{ref:N,style:{display:"inline-flex",flexDirection:n?"row":"column",alignItems:n?"center":void 0,gap:"var(--lucent-space-1)",position:"relative",...u},children:[l.jsx("style",{children:`
|
|
102
|
+
.lucent-cp-field::-webkit-outer-spin-button,
|
|
103
|
+
.lucent-cp-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
104
|
+
.lucent-cp-field { -moz-appearance: textfield; }
|
|
105
|
+
`}),s&&!n&&l.jsx("label",{htmlFor:`${v}-swatch`,style:{fontSize:a==="sm"?"var(--lucent-font-size-xs)":"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:r?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)"},children:s}),l.jsx(ne,{id:`${v}-swatch`,color:`rgba(${C.r},${C.g},${C.b},${m.a})`,shape:"square",showCheckerboard:!0,disabled:r,onClick:()=>S(c=>!c),"aria-expanded":p,"aria-haspopup":"dialog",style:{width:f,height:f,borderRadius:a==="sm"?"var(--lucent-radius-md)":"var(--lucent-radius-lg)",boxShadow:p?"inset 0 0 0 2px var(--lucent-accent-border), 0 0 0 3px var(--lucent-accent-subtle)":"inset 0 0 0 1px rgba(0,0,0,0.2)"}}),s&&n&&l.jsx("label",{htmlFor:`${v}-swatch`,style:{fontSize:a==="sm"?"var(--lucent-font-size-xs)":"var(--lucent-font-size-sm)",fontWeight:"var(--lucent-font-weight-medium)",color:r?"var(--lucent-text-disabled)":"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)",cursor:"pointer"},children:s}),p&&$t.createPortal(l.jsxs("div",{ref:W,role:"dialog","aria-label":"Color picker",style:{position:"fixed",top:Y.top,left:Y.left,zIndex:999999,background:"color-mix(in srgb, var(--lucent-surface-overlay) 85%, transparent)",backdropFilter:"blur(6px)",WebkitBackdropFilter:"blur(6px)",border:"1px solid color-mix(in srgb, var(--lucent-accent-default) 15%, var(--lucent-border-default))",borderRadius:"var(--lucent-radius-xl)",boxShadow:"0 0 24px -4px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), var(--lucent-shadow-md)",width:280,overflow:"hidden",display:"flex",flexDirection:"column"},children:[l.jsxs("div",{ref:E,style:{position:"relative",height:160,background:`hsl(${m.h}, 100%, 50%)`,cursor:"crosshair",userSelect:"none",flexShrink:0},onPointerDown:c=>{c.currentTarget.setPointerCapture(c.pointerId),H(c)},onPointerMove:c=>{c.buttons>0&&H(c)},children:[l.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to right, #fff, transparent)"}}),l.jsx("div",{style:{position:"absolute",inset:0,background:"linear-gradient(to bottom, transparent, #000)"}}),l.jsx("div",{style:{position:"absolute",left:`${m.s}%`,top:`${100-m.v}%`,transform:"translate(-50%, -50%)",width:14,height:14,borderRadius:"50%",border:"2px solid #fff",boxShadow:"0 0 0 1px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.35)",pointerEvents:"none"}})]}),l.jsxs("div",{style:{padding:12,display:"flex",flexDirection:"column",gap:10},children:[l.jsxs("div",{style:{display:"flex",gap:10,alignItems:"center"},children:[l.jsx(ne,{color:`rgba(${C.r},${C.g},${C.b},${m.a})`,shape:"square",showCheckerboard:!0,style:{width:44,height:44,borderRadius:8}}),l.jsxs("div",{style:{flex:1,display:"flex",flexDirection:"column",gap:8},children:[l.jsx(Qe,{value:m.h,min:0,max:360,onChange:c=>B({...m,h:Math.round(c)}),trackStyle:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"},formatTooltip:c=>`${Math.round(c)}°`}),l.jsxs("div",{style:{position:"relative",borderRadius:6,overflow:"hidden"},children:[l.jsx("div",{style:{position:"absolute",inset:0,backgroundImage:ha,backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0",backgroundColor:"#fff"}}),l.jsx("div",{style:{position:"absolute",inset:0,background:`linear-gradient(to right, transparent, ${ye})`}}),l.jsx(Qe,{value:m.a,min:0,max:1,onChange:c=>B({...m,a:Math.round(c*100)/100}),trackStyle:{background:"transparent",position:"relative",zIndex:1},formatTooltip:c=>`${Math.round(c*100)}%`})]})]})]}),l.jsx(Be,{size:"sm",value:M,onChange:c=>k(c),options:w.map(({id:c,label:h})=>({value:c,label:h}))}),M==="hex"&&l.jsxs("div",{style:{display:"flex",gap:6,alignItems:"center"},children:[l.jsx(Te,{variant:"secondary",size:"sm",onClick:q,disabled:!R,title:R?"Pick color from screen":"Not supported in this browser",leftIcon:l.jsx(ma,{}),style:{flexShrink:0,paddingLeft:8,paddingRight:8}}),l.jsx(K,{size:"sm",prefix:"#",value:$,onChange:c=>{const h=c.target.value.replace(/[^0-9a-fA-F]/g,"");if(A(h.toUpperCase()),/^[0-9a-f]{6}$/i.test(h)||/^[0-9a-f]{8}$/i.test(h)){const T=de(`#${h}`);if(T){const I=X(T);D(I),t==null||t(je(T))}}},spellCheck:!1,placeholder:"000000",maxLength:8,style:{flex:1}}),l.jsx(K,{size:"sm",type:"number",suffix:"%",value:_,min:0,max:100,onChange:c=>{const h=+c.target.value;!isNaN(h)&&h>=0&&h<=100&&B({...m,a:h/100})},className:"lucent-cp-field",style:{width:68,flexShrink:0}})]}),M==="rgb"&&l.jsx("div",{style:{display:"flex",gap:6},children:[{label:"R",val:C.r,max:255,fn:c=>B(X({...C,r:c}))},{label:"G",val:C.g,max:255,fn:c=>B(X({...C,g:c}))},{label:"B",val:C.b,max:255,fn:c=>B(X({...C,b:c}))},{label:"A",val:_,max:100,fn:c=>B({...m,a:c/100})}].map(({label:c,val:h,max:T,fn:I})=>l.jsx(K,{size:"sm",type:"number",prefix:c,value:h,min:0,max:T,onChange:F=>{const P=+F.target.value;!isNaN(P)&&P>=0&&P<=T&&I(P)},className:"lucent-cp-field",style:{flex:1}},c))}),M==="hsl"&&l.jsx("div",{style:{display:"flex",gap:6},children:[{label:"H",val:O.h,max:360,fn:c=>{const{r:h,g:T,b:I}=ge(c,O.s,O.l);B(X({r:h,g:T,b:I,a:m.a}))}},{label:"S",val:O.s,max:100,fn:c=>{const{r:h,g:T,b:I}=ge(O.h,c,O.l);B(X({r:h,g:T,b:I,a:m.a}))}},{label:"L",val:O.l,max:100,fn:c=>{const{r:h,g:T,b:I}=ge(O.h,O.s,c);B(X({r:h,g:T,b:I,a:m.a}))}},{label:"A",val:_,max:100,fn:c=>B({...m,a:c/100})}].map(({label:c,val:h,max:T,fn:I})=>l.jsx(K,{size:"sm",type:"number",prefix:c,value:h,min:0,max:T,onChange:F=>{const P=+F.target.value;!isNaN(P)&&P>=0&&P<=T&&I(P)},className:"lucent-cp-field",style:{flex:1}},c))}),M==="hsb"&&l.jsx("div",{style:{display:"flex",gap:6},children:[{label:"H",val:m.h,max:360,fn:c=>B({...m,h:c})},{label:"S",val:m.s,max:100,fn:c=>B({...m,s:c})},{label:"B",val:m.v,max:100,fn:c=>B({...m,v:c})},{label:"A",val:_,max:100,fn:c=>B({...m,a:c/100})}].map(({label:c,val:h,max:T,fn:I})=>l.jsx(K,{size:"sm",type:"number",prefix:c,value:h,min:0,max:T,onChange:F=>{const P=+F.target.value;!isNaN(P)&&P>=0&&P<=T&&I(P)},className:"lucent-cp-field",style:{flex:1}},c))}),o.length>0&&l.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[o.length>1&&l.jsx(Ie,{size:"sm",value:String(y),onChange:c=>x(Number(c.target.value)),options:o.map((c,h)=>({value:String(h),label:c.label}))}),o.length===1&&l.jsx("span",{style:{fontSize:"var(--lucent-font-size-xs)",fontWeight:"var(--lucent-font-weight-medium)",color:"var(--lucent-text-secondary)",fontFamily:"var(--lucent-font-family-base)"},children:(z=o[0])==null?void 0:z.label}),l.jsx("div",{style:{display:"flex",gap:6,flexWrap:"wrap"},children:(((L=o[y])==null?void 0:L.colors)??[]).map(c=>{const h=Re(c).toLowerCase()===ae.slice(0,7).toLowerCase();return l.jsx(ne,{color:c,selected:h,onClick:()=>B(X(st(c)))},c)})})]})]})]}),i??document.body)]})}lt.displayName="ColorPicker";function va({tabs:e,defaultValue:t,value:s,onChange:a,variant:n="underline",style:r}){var _;const o=s!==void 0,[i,d]=b.useState(t??((_=e[0])==null?void 0:_.value)??""),u=o?s:i,[f,g]=b.useState(null),v=b.useRef([]),[p,S]=b.useState(null),M=b.useRef(!1),k=n==="pills",y=b.useRef(null),x=b.useRef(null),m=b.useRef(null),[D,$]=b.useState(e.length),[A,N]=b.useState(!1),[E,W]=b.useState(!1),[Y,V]=b.useState(null),B=e.slice(0,D),H=e.slice(D),q=H.length>0,C=H.some(w=>w.value===u),O=()=>{if(C){S(null);return}const w=e.findIndex((z,L)=>L<D&&z.value===u),R=v.current[w];if(R){if(k){const z=R.querySelector("span");if(!z)return;S({left:z.offsetLeft+R.offsetLeft,width:z.offsetWidth,animate:M.current})}else S({left:R.offsetLeft,width:R.offsetWidth,animate:M.current});M.current=!0}};b.useLayoutEffect(()=>{O(),document.fonts.ready.then(O)},[u,D,k]),b.useEffect(()=>{const w=y.current;if(!w)return;const R=()=>{const h=w.clientWidth,T=70;let I=0,F=0;for(let P=0;P<e.length;P++){const Z=v.current[P];if(!Z){F++;continue}const J=Z.offsetWidth;if(P<e.length-1){if(I+J+T>h)break}else if(I+J>h)break;I+=J,F++}if(F>=e.length-1&&F<e.length){let P=0;for(let Z=0;Z<e.length;Z++){const J=v.current[Z];J&&(P+=J.offsetWidth)}P<=h&&(F=e.length)}$(F<1?1:F)};let z;(()=>{z=requestAnimationFrame(()=>{z=requestAnimationFrame(R)})})();const c=new ResizeObserver(R);return c.observe(w),()=>{c.disconnect(),cancelAnimationFrame(z)}},[e]),b.useEffect(()=>{if(!A)return;const w=R=>{m.current&&!m.current.contains(R.target)&&x.current&&!x.current.contains(R.target)&&(N(!1),V(null))};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[A]);const ae=w=>{o||d(w),a==null||a(w)},ye=(w,R)=>{var h;const z=B.map((T,I)=>T.disabled?-1:I).filter(T=>T!==-1),L=z.indexOf(R);let c=-1;w.key==="ArrowRight"&&(c=z[(L+1)%z.length]??-1),w.key==="ArrowLeft"&&(c=z[(L-1+z.length)%z.length]??-1),w.key==="Home"&&(c=z[0]??-1),w.key==="End"&&(c=z[z.length-1]??-1),c!==-1&&(w.preventDefault(),(h=v.current[c])==null||h.focus(),ae(B[c].value))};return l.jsxs("div",{style:{display:"flex",flexDirection:"column",position:"relative",...r},children:[l.jsxs("div",{ref:y,role:"tablist",style:{position:"relative",display:"flex",overflow:"hidden",...k?{padding:"var(--lucent-space-1)"}:{borderBottom:"1px solid var(--lucent-border-default)"}},children:[e.map((w,R)=>{const z=R<D,L=w.value===u,c=w.disabled??!1;return l.jsxs("button",{ref:h=>{v.current[R]=h},role:"tab","aria-selected":L,"aria-controls":`lucent-tabpanel-${w.value}`,id:`lucent-tab-${w.value}`,disabled:c,tabIndex:L&&z?0:-1,onClick:()=>{c||ae(w.value)},onKeyDown:h=>ye(h,R),onMouseEnter:()=>{!c&&z&&g(R)},onMouseLeave:()=>g(null),style:{padding:k?"var(--lucent-space-1) var(--lucent-space-2)":"var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",background:"none",border:"none",cursor:c?"not-allowed":"pointer",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-md)",fontWeight:L?"var(--lucent-font-weight-medium)":"var(--lucent-font-weight-regular)",color:c?"var(--lucent-text-disabled)":k&&L?"var(--lucent-accent-fg)":L?"var(--lucent-text-primary)":"var(--lucent-text-secondary)",transition:"color var(--lucent-duration-fast) var(--lucent-easing-default)",whiteSpace:"nowrap",outline:"none",position:z?"relative":"absolute",zIndex:L?1:0,...z?{}:{visibility:"hidden",pointerEvents:"none",left:-9999}},children:[l.jsx("span",{style:{display:"block",padding:"var(--lucent-space-1) var(--lucent-space-3)",borderRadius:"var(--lucent-radius-md)",background:!k&&f===R&&!L&&!c?"var(--lucent-surface-secondary)":"transparent",transition:"background var(--lucent-duration-fast) var(--lucent-easing-default)"},children:w.label}),k&&f===R&&!L&&!c&&z&&l.jsx("span",{"aria-hidden":!0,style:{position:"absolute",top:0,bottom:0,left:0,right:0,borderRadius:"var(--lucent-radius-md)",background:"var(--lucent-surface-secondary)",zIndex:-1,transition:"background var(--lucent-duration-fast) var(--lucent-easing-default)"}})]},w.value)}),q&&l.jsx("button",{ref:x,onClick:()=>N(w=>!w),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),style:{padding:k?"var(--lucent-space-1) var(--lucent-space-2)":"var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",background:"none",border:"none",cursor:"pointer",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-md)",fontWeight:C?"var(--lucent-font-weight-medium)":"var(--lucent-font-weight-regular)",color:C?"var(--lucent-text-primary)":"var(--lucent-text-secondary)",whiteSpace:"nowrap",outline:"none",position:"relative",flexShrink:0},children:l.jsx("span",{style:{display:"block",padding:"var(--lucent-space-1) var(--lucent-space-3)",borderRadius:"var(--lucent-radius-md)",background:E?"var(--lucent-surface-secondary)":"transparent",transition:"background var(--lucent-duration-fast) var(--lucent-easing-default)"},children:"More…"})}),p!=null&&l.jsx("span",{"aria-hidden":!0,style:k?{position:"absolute",top:"var(--lucent-space-1)",bottom:"var(--lucent-space-1)",left:p.left,width:p.width,background:"var(--lucent-accent-default)",borderRadius:"var(--lucent-radius-md)",transition:p.animate?"left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)":"none"}:{position:"absolute",bottom:0,left:p.left,width:p.width,height:2,background:"var(--lucent-accent-default)",borderRadius:"var(--lucent-radius-sm)",transition:p.animate?"left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)":"none"}})]}),q&&A&&l.jsx("div",{ref:m,style:{position:"absolute",top:"100%",right:0,zIndex:50,marginTop:"var(--lucent-space-1)",background:"var(--lucent-surface-primary)",border:"1px solid var(--lucent-border-default)",borderRadius:"var(--lucent-radius-md)",boxShadow:"var(--lucent-shadow-md)",padding:"var(--lucent-space-1) 0",minWidth:140},children:H.map((w,R)=>{const z=w.value===u,L=w.disabled??!1,c=Y===R;return l.jsx("button",{disabled:L,onClick:()=>{L||(ae(w.value),N(!1))},onMouseEnter:()=>{L||V(R)},onMouseLeave:()=>V(null),style:{display:"block",width:"100%",padding:"var(--lucent-space-2) var(--lucent-space-4)",background:z||c?"var(--lucent-surface-secondary)":"none",border:"none",cursor:L?"not-allowed":"pointer",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-md)",fontWeight:z?"var(--lucent-font-weight-medium)":"var(--lucent-font-weight-regular)",color:L?"var(--lucent-text-disabled)":z||c?"var(--lucent-text-primary)":"var(--lucent-text-secondary)",textAlign:"left",outline:"none",transition:"background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)"},children:w.label},w.value)})}),e.some(w=>w.content!=null)&&e.map(w=>l.jsx("div",{role:"tabpanel",id:`lucent-tabpanel-${w.value}`,"aria-labelledby":`lucent-tab-${w.value}`,hidden:w.value!==u,style:{padding:"var(--lucent-space-4) 0",outline:"none"},tabIndex:0,children:w.content},w.value))]})}const ya={fontFamilyBase:'"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontFamilyMono:'"DM Mono", "Fira Code", "Cascadia Code", monospace',fontFamilyDisplay:'"Georama", "DM Sans", sans-serif',fontSizeXs:"0.79rem",fontSizeSm:"0.889rem",fontSizeMd:"1rem",fontSizeLg:"1.125rem",fontSizeXl:"1.266rem",fontSize2xl:"1.424rem",fontSize3xl:"1.602rem",fontWeightRegular:"400",fontWeightMedium:"500",fontWeightSemibold:"600",fontWeightBold:"700",lineHeightTight:"1.25",lineHeightBase:"1.5",lineHeightRelaxed:"1.75",letterSpacingTight:"-0.02em",letterSpacingBase:"0em",letterSpacingWide:"0.04em"},wa={space0:"0px",space1:"0.25rem",space2:"0.5rem",space3:"0.75rem",space4:"1rem",space5:"1.25rem",space6:"1.5rem",space8:"2rem",space10:"2.5rem",space12:"3rem",space16:"4rem",space20:"5rem",space24:"6rem"},Sa={radiusNone:"0px",radiusSm:"0.25rem",radiusMd:"0.375rem",radiusLg:"0.5rem",radiusXl:"0.75rem",radiusFull:"9999px"},ka={durationFast:"100ms",durationBase:"200ms",durationSlow:"350ms",easingDefault:"cubic-bezier(0.4, 0, 0.2, 1)",easingEmphasized:"cubic-bezier(0.2, 0, 0, 1)",easingDecelerate:"cubic-bezier(0, 0, 0.2, 1)"},ct={shadowNone:"none",shadowSm:"0 1px 2px rgb(0 0 0 / 0.12)",shadowMd:"0 2px 4px rgb(0 0 0 / 0.18)",shadowLg:"0 3px 8px rgb(0 0 0 / 0.18)",shadowXl:"0 5px 14px rgb(0 0 0 / 0.2)"},it={shadowNone:"none",shadowSm:"inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4)",shadowMd:"inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 4px rgba(0, 0, 0, 0.45)",shadowLg:"inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45)",shadowXl:"inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.5)"},re={...ya,...wa,...Sa,...ka,...ct,navigation:"#f4f6f8",bgBase:"#ffffff",bgSubtle:"#fafafa",bgOverlay:"rgb(0 0 0 / 0.4)",surface:"#ffffff",surfaceSecondary:"#f5f5f5",surfaceRaised:"#ffffff",surfaceOverlay:"#ffffff",surfaceTint:"#f5f5f5",borderDefault:"#e5e7eb",borderSubtle:"#f3f4f6",borderStrong:"#979faf",controlTrack:"#d1d5db",textPrimary:"#111827",textSecondary:"#6b7280",textDisabled:"#d1d5db",textInverse:"#ffffff",accentDefault:"#111827",accentHover:"#192339",accentSubtle:"#f1f3f9",accentBorder:"#000000",accentFg:"#f0f1f5",successDefault:"#16a34a",successSubtle:"#f0fdf4",successText:"#15803d",warningDefault:"#d97706",warningSubtle:"#fffbeb",warningText:"#b45309",dangerDefault:"#dc2626",dangerHover:"#b91c1c",dangerSubtle:"#fef2f2",dangerText:"#b91c1c",infoDefault:"#2563eb",infoSubtle:"#eff6ff",infoText:"#1d4ed8"};function Da(e){const t=parseInt(e.slice(1,3),16),s=parseInt(e.slice(3,5),16),a=parseInt(e.slice(5,7),16);return{r:t,g:s,b:a}}function Ma({r:e,g:t,b:s}){const a=n=>n.toString(16).padStart(2,"0");return`#${a(e)}${a(t)}${a(s)}`}function G(e){const{r:t,g:s,b:a}=Da(e),n=t/255,r=s/255,o=a/255,i=Math.max(n,r,o),d=Math.min(n,r,o);let u=0,f=0;const g=(i+d)/2;if(i!==d){const v=i-d;switch(f=g>.5?v/(2-i-d):v/(i+d),i){case n:u=(r-o)/v+(r<o?6:0);break;case r:u=(o-n)/v+2;break;case o:u=(n-r)/v+4;break}u/=6}return[u*360,f,g]}function U(e,t,s){e=(e%360+360)%360,t=Math.min(1,Math.max(0,t)),s=Math.min(1,Math.max(0,s));const a=(1-Math.abs(2*s-1))*t,n=a*(1-Math.abs(e/60%2-1)),r=s-a/2;let o=0,i=0,d=0;return e<60?(o=a,i=n):e<120?(o=n,i=a):e<180?(i=a,d=n):e<240?(i=n,d=a):e<300?(o=n,d=a):(o=a,d=n),Ma({r:Math.round((o+r)*255),g:Math.round((i+r)*255),b:Math.round((d+r)*255)})}function j(e,t){const[s,a,n]=G(e);return U(s,a,Math.min(1,Math.max(0,n+t)))}const ja=222,za=.12;function ut(e,t){return t<.04?[ja,za]:[e,t]}function et(e){const[t,s,a]=G(e),[n,r]=ut(t,s);return U(n,r,Math.max(.04,Math.min(.2,.07+(1-a))))}function ke(e){const[t,s,a]=G(e),[n,r]=ut(t,s);return U(n,r,Math.max(.06,Math.min(.5,(1-a)*.6+.06)))}function De(e){const[t,s,a]=G(e);return U(t,s,Math.max(.04,Math.min(.97,1-a+.04)))}function Me(e){const[t,s,a]=G(e);return U(t,s,Math.max(.02,Math.min(.98,1-a)))}function dt(e){const t=et(e.navigation),s=et(e.bgBase),[a,n,r]=G(s),o=i=>U(a,n,Math.min(.25,r+i));return{...e,...it,navigation:t,bgBase:s,bgSubtle:o(.02),bgOverlay:"rgb(0 0 0 / 0.6)",surface:o(.02),surfaceSecondary:o(.05),surfaceRaised:o(.08),surfaceOverlay:o(.08),surfaceTint:o(.03),borderDefault:ke(e.borderDefault),borderSubtle:ke(e.borderSubtle),borderStrong:ke(e.borderStrong),controlTrack:o(.1),textPrimary:De(e.textPrimary),textSecondary:De(e.textSecondary),textDisabled:De(e.textDisabled),textInverse:s,accentDefault:Me(e.accentDefault),accentHover:Me(e.accentHover),accentSubtle:Me(e.accentSubtle),accentBorder:e.accentBorder,accentFg:e.accentFg,successDefault:j(e.successDefault,.1),successSubtle:j(e.successDefault,-.25),successText:j(e.successText,.15),warningDefault:j(e.warningDefault,.1),warningSubtle:j(e.warningDefault,-.25),warningText:j(e.warningText,.15),dangerDefault:j(e.dangerDefault,.1),dangerHover:j(e.dangerHover,.1),dangerSubtle:j(e.dangerDefault,-.25),dangerText:j(e.dangerText,.15),infoDefault:j(e.infoDefault,.1),infoSubtle:j(e.infoDefault,-.25),infoText:j(e.infoText,.15)}}const $e=dt(re);function ft(e){return"--lucent-"+e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`).replace(/([a-z])(\d)/g,(t,s,a)=>`${s}-${a}`)}function pt(e,t=":root"){const s=Object.entries(e).map(([a,n])=>` ${ft(a)}: ${n};`).join(`
|
|
106
|
+
`);return`${t} {
|
|
107
|
+
${s}
|
|
108
|
+
}`}function Ta(e){const t=parseInt(e.slice(1,3),16)/255,s=parseInt(e.slice(3,5),16)/255,a=parseInt(e.slice(5,7),16)/255,n=r=>r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4);return .2126*n(t)+.7152*n(s)+.0722*n(a)}const Ia=.2126729,Ba=.7151522,Ra=.072175,$a=.56,La=.57,Pa=.65,Ca=.62,tt=.022,Fa=1.414,Wa=1.14,Ha=1.14,at=.027,nt=.027;function rt(e){const t=parseInt(e.slice(1,3),16)/255,s=parseInt(e.slice(3,5),16)/255,a=parseInt(e.slice(5,7),16)/255,n=Math.pow(t,2.4),r=Math.pow(s,2.4),o=Math.pow(a,2.4);let i=Ia*n+Ba*r+Ra*o;return i<0&&(i=0),i<tt?i+Math.pow(tt-i,Fa):i}function xe(e,t){const s=rt(e),a=rt(t);let n;if(s>a){const r=(Math.pow(s,$a)-Math.pow(a,La))*Wa;n=r<at?0:r-at}else{const r=(Math.pow(s,Pa)-Math.pow(a,Ca))*Ha;n=r>-nt?0:r+nt}return n*100}function gt(e){const t=Math.abs(xe(e,"#ffffff")),s=Math.abs(xe(e,"#000000"));return t>=s?"#ffffff":"#000000"}function Le(e){const t=parseInt(e.slice(1,3),16)/255,s=parseInt(e.slice(3,5),16)/255,a=parseInt(e.slice(5,7),16)/255,n=Math.max(t,s,a),r=Math.min(t,s,a);let o=0,i=0;if(n!==r){const u=n-r;i=(n+r)/2>.5?u/(2-n-r):u/(n+r),n===t?o=((s-a)/u+(s<a?6:0))/6:n===s?o=((a-t)/u+2)/6:o=((t-s)/u+4)/6}return gt(e)==="#000000"?ze(o,Math.min(i,.6),.12):ze(o,Math.min(i,.2),.95)}function bt(e,t,s=60){if(Math.abs(xe(e,t))>=s)return e;const a=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,o=Math.max(a,n,r),i=Math.min(a,n,r);let d=0,u=0,f=(o+i)/2;if(o!==i){const p=o-i;u=f>.5?p/(2-o-i):p/(o+i),o===a?d=((n-r)/p+(n<r?6:0))/6:o===n?d=((r-a)/p+2)/6:d=((a-n)/p+4)/6}const v=Ta(t)>.5?-.005:.005;for(let p=0;p<100;p++){f=Math.min(1,Math.max(0,f+v));const S=ze(d,u,f);if(Math.abs(xe(S,t))>=s)return S}return e}function ze(e,t,s){const a=(d,u,f)=>(f<0&&(f+=1),f>1&&(f-=1),f<.16666666666666666?d+(u-d)*6*f:f<.5?u:f<.6666666666666666?d+(u-d)*(.6666666666666666-f)*6:d);let n,r,o;if(t===0)n=r=o=s;else{const d=s<.5?s*(1+t):s+t-s*t,u=2*s-d;n=a(u,d,e+1/3),r=a(u,d,e),o=a(u,d,e-1/3)}const i=d=>Math.round(d*255).toString(16).padStart(2,"0");return`#${i(n)}${i(r)}${i(o)}`}function Ea(e,t){const[s,a,n]=G(e);return t?U(s,a*.3,Math.min(1,n+(1-n)*.85)):U(s,a,Math.min(.25,n+.04))}const he={subtle:{light:.95,dark:.12},text:{light:.28,dark:.78}};function fe(e,t){const[s,a]=G(e);return U(s,a*.5,t?he.subtle.light:he.subtle.dark)}function pe(e,t){const[s,a]=G(e);return U(s,a,t?he.text.light:he.text.dark)}function Pe(e,t,s){const a={},n=s==="light";if("borderDefault"in e&&("borderSubtle"in e||(a.borderSubtle=j(t.borderDefault,n?.05:-.02)),"borderStrong"in e||(a.borderStrong=j(t.borderDefault,n?-.27:.19))),"bgBase"in e&&("bgSubtle"in e||(a.bgSubtle=j(t.bgBase,n?-.02:.02)),"surfaceTint"in e||(a.surfaceTint=j(t.bgBase,n?-.04:.03)),!("surface"in e))){const r=Ea(t.bgBase,n);a.surface=r,"surfaceSecondary"in e||(a.surfaceSecondary=j(r,n?-.04:.03)),"surfaceRaised"in e||(a.surfaceRaised=j(r,n?0:.06)),"surfaceOverlay"in e||(a.surfaceOverlay=j(r,n?0:.06))}return"surface"in e&&("surfaceSecondary"in e||(a.surfaceSecondary=j(t.surface,n?-.04:.03)),"surfaceRaised"in e||(a.surfaceRaised=j(t.surface,n?0:.06)),"surfaceOverlay"in e||(a.surfaceOverlay=j(t.surface,n?0:.06))),"textPrimary"in e&&("textSecondary"in e||(a.textSecondary=j(t.textPrimary,n?.2:-.15)),"textDisabled"in e||(a.textDisabled=j(t.textPrimary,n?.58:-.62))),"accentDefault"in e&&("accentHover"in e||(a.accentHover=j(t.accentDefault,n?.05:-.07)),"accentSubtle"in e||(a.accentSubtle=j(t.accentDefault,n?.85:-.6))),"successDefault"in e&&("successSubtle"in e||(a.successSubtle=fe(t.successDefault,n)),"successText"in e||(a.successText=pe(t.successDefault,n))),"warningDefault"in e&&("warningSubtle"in e||(a.warningSubtle=fe(t.warningDefault,n)),"warningText"in e||(a.warningText=pe(t.warningDefault,n))),"dangerDefault"in e&&("dangerHover"in e||(a.dangerHover=j(t.dangerDefault,n?.05:-.07)),"dangerSubtle"in e||(a.dangerSubtle=fe(t.dangerDefault,n)),"dangerText"in e||(a.dangerText=pe(t.dangerDefault,n))),"infoDefault"in e&&("infoSubtle"in e||(a.infoSubtle=fe(t.infoDefault,n)),"infoText"in e||(a.infoText=pe(t.infoDefault,n))),a}function Ce(e,t="light"){const a={...t==="dark"?$e:re,...e},n=Pe(e,a,t),r=t==="light"?j(a.accentDefault,-.15):j(a.accentDefault,.15);return{...a,...n,accentFg:Le(a.accentDefault),accentBorder:r}}const Fe={name:"default",light:{navigation:"#f4f6f8",bgBase:"#ffffff",surface:"#ffffff",borderDefault:"#e5e7eb",accentDefault:"#111827",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#0b0c12",bgBase:"#12131a",surface:"#181a20",borderDefault:"#2e3039",accentDefault:"#f9fafb",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},xt={name:"brand",light:{navigation:"#fffefb",bgBase:"#f2f0e8",surface:"#fffdf7",borderDefault:"#e8e3d6",accentDefault:"#e9c96b",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#0c0b08",bgBase:"#151310",surface:"#1c1a15",borderDefault:"#33302a",accentDefault:"#e9c96b",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},se={name:"indigo",light:{navigation:"#ffffff",bgBase:"#faf9fb",surface:"#faf9fe",borderDefault:"#e0dde9",accentDefault:"#6366f1",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#09081a",bgBase:"#100e24",surface:"#191820",borderDefault:"#2e2d3a",accentDefault:"#818cf8",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},ht={name:"violet",light:{navigation:"#f8f4ff",bgBase:"#eee8fa",surface:"#faf8fd",borderDefault:"#e2dce9",accentDefault:"#8b5cf6",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#0a0818",bgBase:"#120e22",surface:"#1a1822",borderDefault:"#302d3b",accentDefault:"#a78bfa",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},We={name:"emerald",light:{navigation:"#f4fcf9",bgBase:"#e9f6f1",surface:"#f7fcf9",borderDefault:"#dbe8df",accentDefault:"#10b981",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#061008",bgBase:"#0c1a16",surface:"#151c18",borderDefault:"#263330",accentDefault:"#34d399",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},Na={name:"teal",light:{navigation:"#f9fbfc",bgBase:"#eef2f5",surface:"#f6fcfa",borderDefault:"#d4e5e0",accentDefault:"#0d9488",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#060e0c",bgBase:"#0c1816",surface:"#161d1c",borderDefault:"#283836",accentDefault:"#2dd4bf",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},He={name:"rose",light:{navigation:"#fff4f6",bgBase:"#f5e8ec",surface:"#fef9fa",borderDefault:"#ecdde1",accentDefault:"#f43f5e",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#10060a",bgBase:"#1a1016",surface:"#1d1518",borderDefault:"#3a282e",accentDefault:"#fb7185",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},mt={name:"coral",light:{navigation:"#fff9f7",bgBase:"#f2ece8",surface:"#fef9f7",borderDefault:"#e9ddd8",accentDefault:"#e8624a",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#b91c1c",infoDefault:"#2563eb"},dark:{navigation:"#0e0806",bgBase:"#1a1210",surface:"#1e1816",borderDefault:"#3b312c",accentDefault:"#f38b76",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},Aa={name:"amber",light:{navigation:"#fffdf6",bgBase:"#f2f0e6",surface:"#fefcf6",borderDefault:"#e8e1d0",accentDefault:"#d97706",successDefault:"#16a34a",warningDefault:"#b45309",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#0c0a06",bgBase:"#151310",surface:"#1e1a15",borderDefault:"#3a3329",accentDefault:"#f59e0b",successDefault:"#22c55e",warningDefault:"#d97706",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},Ee={name:"ocean",light:{navigation:"#ebf1ff",bgBase:"#f1f4ff",surface:"#f6fafd",borderDefault:"#d9e4ec",accentDefault:"#0ea5e9",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#060b14",bgBase:"#0e1522",surface:"#141a20",borderDefault:"#243038",accentDefault:"#38bdf8",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},vt={name:"slate",light:{navigation:"#f7f8fa",bgBase:"#eceef2",surface:"#f7f8fa",borderDefault:"#dde1e6",accentDefault:"#475569",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#080a10",bgBase:"#0e1118",surface:"#161920",borderDefault:"#2b3040",accentDefault:"#94a3b8",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},Oa={name:"sage",light:{navigation:"#f4f8f4",bgBase:"#e8efe8",surface:"#f5f7f5",borderDefault:"#d8ddd6",accentDefault:"#5f8c6e",successDefault:"#16a34a",warningDefault:"#d97706",dangerDefault:"#dc2626",infoDefault:"#2563eb"},dark:{navigation:"#060a06",bgBase:"#0e140e",surface:"#171c17",borderDefault:"#2c372c",accentDefault:"#86b394",successDefault:"#22c55e",warningDefault:"#f59e0b",dangerDefault:"#ef4444",infoDefault:"#3b82f6"}},oe={name:"sharp",tokens:{radiusNone:"0px",radiusSm:"0.125rem",radiusMd:"0.1875rem",radiusLg:"0.25rem",radiusXl:"0.375rem",radiusFull:"9999px"}},ee={name:"rounded",tokens:{radiusNone:"0px",radiusSm:"0.25rem",radiusMd:"0.375rem",radiusLg:"0.5rem",radiusXl:"0.75rem",radiusFull:"9999px"}},le={name:"pill",tokens:{radiusNone:"0px",radiusSm:"0.5rem",radiusMd:"0.75rem",radiusLg:"1rem",radiusXl:"1.5rem",radiusFull:"9999px"}},ce={name:"compact",tokens:{space0:"0px",space1:"0.1rem",space2:"0.25rem",space3:"0.6rem",space4:"0.8rem",space5:"1rem",space6:"1.2rem",space8:"1.6rem",space10:"2rem",space12:"2.4rem",space16:"3.2rem",space20:"4rem",space24:"4.8rem"}},te={name:"default",tokens:{space0:"0px",space1:"0.25rem",space2:"0.5rem",space3:"0.75rem",space4:"1rem",space5:"1.25rem",space6:"1.5rem",space8:"2rem",space10:"2.5rem",space12:"3rem",space16:"4rem",space20:"5rem",space24:"6rem"}},ie={name:"spacious",tokens:{space0:"0px",space1:"0.375rem",space2:"0.75rem",space3:"1.125rem",space4:"1.25rem",space5:"1.5625rem",space6:"1.875rem",space8:"2.5rem",space10:"3.125rem",space12:"3.75rem",space16:"5rem",space20:"6.25rem",space24:"7.5rem"}},me={name:"flat",light:{shadowNone:"none",shadowSm:"none",shadowMd:"none",shadowLg:"none",shadowXl:"none"},dark:{shadowNone:"none",shadowSm:"none",shadowMd:"none",shadowLg:"none",shadowXl:"none"}},Ne={name:"subtle",light:{shadowNone:"none",shadowSm:"rgba(17, 17, 26, 0.04) 0px 2px 8px, rgba(17, 17, 26, 0.02) 0px 4px 16px",shadowMd:"rgba(17, 17, 26, 0.06) 0px 4px 16px, rgba(17, 17, 26, 0.03) 0px 8px 32px",shadowLg:"rgba(17, 17, 26, 0.06) 0px 8px 24px, rgba(17, 17, 26, 0.04) 0px 16px 48px",shadowXl:"rgba(17, 17, 26, 0.08) 0px 12px 32px, rgba(17, 17, 26, 0.05) 0px 24px 64px"},dark:{shadowNone:"none",shadowSm:"0 0 20px color-mix(in srgb, var(--lucent-accent-default) 5%, transparent)",shadowMd:"0 0 30px color-mix(in srgb, var(--lucent-accent-default) 7%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.04)",shadowLg:"0 0 40px color-mix(in srgb, var(--lucent-accent-default) 9%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)",shadowXl:"0 0 56px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.06)"}},Ae={name:"elevated",light:{shadowNone:"none",shadowSm:"0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)",shadowMd:"0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08)",shadowLg:"0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08)",shadowXl:"0 16px 40px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.1)"},dark:{shadowNone:"none",shadowSm:"inset 0 1px 0 0 rgba(255, 255, 255, 0.06), inset 0 0 12px rgba(255, 255, 255, 0.02)",shadowMd:"inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.03), 0 0 1px rgba(255, 255, 255, 0.06)",shadowLg:"inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 0 28px rgba(255, 255, 255, 0.04), 0 0 1px rgba(255, 255, 255, 0.08)",shadowXl:"inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 36px rgba(255, 255, 255, 0.05), 0 0 1px rgba(255, 255, 255, 0.1)"}},Oe={name:"liquidGlass",light:{shadowNone:"none",shadowSm:"0 4px 30px rgba(0, 0, 0, 0.04)",shadowMd:"0 8px 50px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.02)",shadowLg:"0 12px 60px rgba(0, 0, 0, 0.06), 0 4px 20px rgba(0, 0, 0, 0.03)",shadowXl:"0 20px 80px rgba(0, 0, 0, 0.08), 0 8px 30px rgba(0, 0, 0, 0.04)"},dark:{shadowNone:"none",shadowSm:"inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 0 30px rgba(255, 255, 255, 0.02)",shadowMd:"inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.02), 0 0 40px rgba(255, 255, 255, 0.03)",shadowLg:"inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 0 30px rgba(255, 255, 255, 0.03), 0 0 50px rgba(255, 255, 255, 0.04)",shadowXl:"inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 40px rgba(255, 255, 255, 0.04), 0 0 70px rgba(255, 255, 255, 0.05)"}},Xe={name:"brutalist",light:{shadowNone:"none",shadowSm:"0 0 0 2px var(--lucent-text-primary), 3px 3px 0 0 color-mix(in srgb, var(--lucent-accent-default) 50%, transparent)",shadowMd:"0 0 0 2px var(--lucent-text-primary), 5px 5px 0 0 color-mix(in srgb, var(--lucent-accent-default) 60%, transparent)",shadowLg:"0 0 0 3px var(--lucent-text-primary), 6px 6px 0 0 color-mix(in srgb, var(--lucent-accent-default) 70%, transparent)",shadowXl:"0 0 0 3px var(--lucent-text-primary), 8px 8px 0 0 color-mix(in srgb, var(--lucent-accent-default) 80%, transparent)"},dark:{shadowNone:"none",shadowSm:"0 0 0 2px color-mix(in srgb, var(--lucent-accent-default) 60%, transparent), 3px 3px 0 0 color-mix(in srgb, var(--lucent-accent-default) 30%, transparent)",shadowMd:"0 0 0 2px color-mix(in srgb, var(--lucent-accent-default) 65%, transparent), 5px 5px 0 0 color-mix(in srgb, var(--lucent-accent-default) 35%, transparent)",shadowLg:"0 0 0 3px color-mix(in srgb, var(--lucent-accent-default) 70%, transparent), 6px 6px 0 0 color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)",shadowXl:"0 0 0 3px color-mix(in srgb, var(--lucent-accent-default) 75%, transparent), 8px 8px 0 0 color-mix(in srgb, var(--lucent-accent-default) 45%, transparent)"}},qe={name:"neumorphic",light:{shadowNone:"none",shadowSm:"0 8px 16px rgba(0, 0, 0, 0.12)",shadowMd:"0 12px 24px rgba(0, 0, 0, 0.16)",shadowLg:"0 20px 30px rgba(0, 0, 0, 0.2)",shadowXl:"0 28px 40px rgba(0, 0, 0, 0.24)"},dark:{shadowNone:"none",shadowSm:"0 8px 16px rgba(0, 0, 0, 0.4)",shadowMd:"0 12px 24px rgba(0, 0, 0, 0.45)",shadowLg:"0 20px 30px rgba(0, 0, 0, 0.5)",shadowXl:"0 28px 40px rgba(0, 0, 0, 0.55)"}},Ue={name:"natural",light:{shadowNone:"none",shadowSm:"rgba(17, 17, 26, 0.05) 0px 2px 8px, rgba(17, 17, 26, 0.03) 0px 4px 16px",shadowMd:"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",shadowLg:"rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.08) 0px 16px 48px",shadowXl:"rgba(17, 17, 26, 0.12) 0px 12px 32px, rgba(17, 17, 26, 0.1) 0px 24px 64px"},dark:{shadowNone:"none",shadowSm:"inset 0 1px 0 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.03)",shadowMd:"inset 0 1px 0 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.15)",shadowLg:"inset 0 1px 0 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 16px rgba(255, 255, 255, 0.02), 0 2px 6px rgba(0, 0, 0, 0.15)",shadowXl:"inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 24px rgba(255, 255, 255, 0.03), 0 4px 10px rgba(0, 0, 0, 0.15)"}},ve={name:"glow",light:{shadowNone:"none",shadowSm:"0 1px 3px rgba(0, 0, 0, 0.06), 0 0 12px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent)",shadowMd:"0 2px 6px rgba(0, 0, 0, 0.06), 0 0 20px color-mix(in srgb, var(--lucent-accent-default) 16%, transparent)",shadowLg:"0 4px 10px rgba(0, 0, 0, 0.06), 0 0 30px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",shadowXl:"0 6px 14px rgba(0, 0, 0, 0.06), 0 0 44px color-mix(in srgb, var(--lucent-accent-default) 25%, transparent)"},dark:{shadowNone:"none",shadowSm:"0 0 16px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",shadowMd:"0 0 24px color-mix(in srgb, var(--lucent-accent-default) 28%, transparent)",shadowLg:"0 0 36px color-mix(in srgb, var(--lucent-accent-default) 35%, transparent)",shadowXl:"0 0 50px color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)"}},yt={name:"modern",palette:se,shape:ee,density:te,shadow:Ne},wt={name:"enterprise",palette:Fe,shape:oe,density:ce,shadow:me},St={name:"playful",palette:He,shape:le,density:ie,shadow:Ae},kt={name:"liquidGlass",palette:Ee,shape:le,density:ie,shadow:Oe},Dt={name:"bento",palette:se,shape:ee,density:te,shadow:Ue},Mt={name:"brutalist",palette:mt,shape:oe,density:ce,shadow:Xe},jt={name:"terminal",palette:We,shape:oe,density:ce,shadow:ve},zt={name:"softUI",palette:ht,shape:le,density:te,shadow:qe},Tt={name:"bloom",palette:se,shape:ee,density:ie,shadow:ve},It={name:"minimal",palette:vt,shape:ee,density:te,shadow:me},Xa={default:Fe,brand:xt,indigo:se,violet:ht,emerald:We,teal:Na,rose:He,coral:mt,amber:Aa,ocean:Ee,slate:vt,sage:Oa},qa={sharp:oe,rounded:ee,pill:le},Ua={compact:ce,default:te,spacious:ie},Ga={flat:me,subtle:Ne,elevated:Ae,liquidGlass:Oe,brutalist:Xe,neumorphic:qe,natural:Ue,glow:ve},Va={modern:yt,enterprise:wt,playful:St,liquidGlass:kt,bento:Dt,brutalist:Mt,terminal:jt,softUI:zt,bloom:Tt,minimal:It};function _a(e){return typeof e=="string"?Xa[e]:e}function Ka(e){return typeof e=="string"?qa[e]:e}function Ya(e){return typeof e=="string"?Ua[e]:e}function Za(e){return typeof e=="string"?Ga[e]:e}function Bt(e,t){let s,a,n,r;if(typeof e=="string"){const i=Va[e];if(!i)return{};s=i.palette,a=i.shape,n=i.density,r=i.shadow}else e.palette!==void 0&&(s=_a(e.palette)),e.shape!==void 0&&(a=Ka(e.shape)),e.density!==void 0&&(n=Ya(e.density)),e.shadow!==void 0&&(r=Za(e.shadow));const o={};if(s){const i=Ce(s[t],t);Object.assign(o,i)}return a&&Object.assign(o,a.tokens),n&&Object.assign(o,n.tokens),r&&Object.assign(o,r[t]),o}const Rt=b.createContext({theme:"light",tokens:re});function Ja({theme:e="light",preset:t,tokens:s,anchors:a,children:n}){const r=b.useId().replace(/:/g,""),o=t?Bt(t,e):void 0,i=(()=>{if(a){const k=Ce(a,e);if(o){const y={};for(const[x,m]of Object.entries(o))(x.startsWith("space")||x.startsWith("radius")||x.startsWith("shadow")||x.startsWith("duration")||x.startsWith("easing"))&&(y[x]=m);return{...k,...y}}return k}const u=e==="dark"?$e:re,f=o?{...o,...s}:s,g=f?{...u,...f}:u,v=f?Pe(f,g,e):{},p=(f==null?void 0:f.accentBorder)??(e==="light"?j(g.accentDefault,-.15):j(g.accentDefault,.15)),S=(f==null?void 0:f.accentFg)??Le(g.accentDefault),M=bt(g.accentDefault,S);return{...g,...v,accentDefault:M,accentFg:S,accentBorder:p}})(),d=`html { font-size: 14px; }
|
|
109
|
+
`+pt(i,":root");return b.useLayoutEffect(()=>{let u=document.getElementById(`lucent-tokens-${r}`);return u||(u=document.createElement("style"),u.id=`lucent-tokens-${r}`,document.head.appendChild(u)),u.textContent=d,()=>{var f;(f=document.getElementById(`lucent-tokens-${r}`))==null||f.remove()}},[r,d]),l.jsx(Rt.Provider,{value:{theme:e,tokens:i},children:n})}function Qa(){return b.useContext(Rt)}exports.Badge=qt;exports.Button=Te;exports.ColorPicker=lt;exports.ColorSwatch=ne;exports.Input=K;exports.LucentProvider=Ja;exports.SegmentedControl=Be;exports.Select=Ie;exports.Slider=oa;exports.Tabs=va;exports.Text=aa;exports.Toggle=_t;exports.adjustLightness=j;exports.bentoPreset=Dt;exports.bloomPreset=Tt;exports.brandPalette=xt;exports.brutalistPreset=Mt;exports.brutalistShadow=Xe;exports.compactDensity=ce;exports.createTheme=Ce;exports.darkShadowTokens=it;exports.darkTokens=$e;exports.defaultDensity=te;exports.defaultPalette=Fe;exports.deriveDarkFromLight=dt;exports.deriveTokens=Pe;exports.elevatedShadow=Ae;exports.emeraldPalette=We;exports.ensureContrast=bt;exports.enterprisePreset=wt;exports.flatShadow=me;exports.getAccentFg=Le;exports.getContrastText=gt;exports.glowShadow=ve;exports.indigoPalette=se;exports.lightShadowTokens=ct;exports.lightTokens=re;exports.liquidGlassPreset=kt;exports.liquidGlassShadow=Oe;exports.makeLibraryCSS=pt;exports.minimalPreset=It;exports.modernPreset=yt;exports.naturalShadow=Ue;exports.neumorphicShadow=qe;exports.oceanPalette=Ee;exports.pillShape=le;exports.playfulPreset=St;exports.resolvePreset=Bt;exports.rosePalette=He;exports.roundedShape=ee;exports.sharpShape=oe;exports.softUIPreset=zt;exports.spaciousDensity=ie;exports.subtleShadow=Ne;exports.terminalPreset=jt;exports.tokenToCssVar=ft;exports.useLucent=Qa;
|
package/dist/devtools.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),ae=require("react-dom"),n=require("./LucentProvider-LqNc0AxD.cjs");function re(){const{tokens:t}=n.useLucent(),[s,o]=g.useState({}),l=g.useRef(s);l.current=s;const c=g.useCallback((f,d)=>{document.documentElement.style.setProperty(n.tokenToCssVar(f),d),o(m=>({...m,[f]:d}))},[]),i=g.useCallback(f=>{document.documentElement.style.removeProperty(n.tokenToCssVar(f)),o(d=>{const m={...d};return delete m[f],m})},[]),y=g.useCallback(()=>{for(const f of Object.keys(l.current))document.documentElement.style.removeProperty(n.tokenToCssVar(f));o({})},[]);return{tokens:t,overrides:s,overrideCount:Object.keys(s).length,setOverride:c,removeOverride:i,resetAll:y}}function u(t){return{key:t,controlType:"color"}}function p(t,s,o,l,c){return{key:t,controlType:"slider",sliderConfig:{min:s,max:o,step:l,unit:c}}}function x(t){return{key:t,controlType:"text"}}const H=[{label:"Colors",defaultExpanded:!0,subgroups:[{label:"Navigation",tokens:[u("navigation")]},{label:"Background",tokens:[u("bgBase"),u("bgSubtle"),u("bgOverlay")]},{label:"Surface",tokens:[u("surface"),u("surfaceSecondary"),u("surfaceRaised"),u("surfaceOverlay"),u("surfaceTint")]},{label:"Border",tokens:[u("borderDefault"),u("borderSubtle"),u("borderStrong"),u("controlTrack")]},{label:"Text",tokens:[u("textPrimary"),u("textSecondary"),u("textDisabled"),u("textInverse")]},{label:"Accent",tokens:[u("accentDefault"),u("accentHover"),u("accentSubtle"),u("accentBorder"),u("accentFg")]},{label:"Success",tokens:[u("successDefault"),u("successSubtle"),u("successText")]},{label:"Warning",tokens:[u("warningDefault"),u("warningSubtle"),u("warningText")]},{label:"Danger",tokens:[u("dangerDefault"),u("dangerHover"),u("dangerSubtle"),u("dangerText")]},{label:"Info",tokens:[u("infoDefault"),u("infoSubtle"),u("infoText")]}]},{label:"Typography",tokens:[x("fontFamilyBase"),x("fontFamilyMono"),x("fontFamilyDisplay"),p("fontSizeXs",.5,2,.0625,"rem"),p("fontSizeSm",.5,2,.0625,"rem"),p("fontSizeMd",.5,2,.0625,"rem"),p("fontSizeLg",.5,3,.0625,"rem"),p("fontSizeXl",.5,3,.0625,"rem"),p("fontSize2xl",.5,4,.0625,"rem"),p("fontSize3xl",.5,4,.0625,"rem"),x("fontWeightRegular"),x("fontWeightMedium"),x("fontWeightSemibold"),x("fontWeightBold"),x("lineHeightTight"),x("lineHeightBase"),x("lineHeightRelaxed"),x("letterSpacingTight"),x("letterSpacingBase"),x("letterSpacingWide")]},{label:"Spacing",tokens:[p("space0",0,6,.125,"rem"),p("space1",0,6,.125,"rem"),p("space2",0,6,.125,"rem"),p("space3",0,6,.125,"rem"),p("space4",0,6,.125,"rem"),p("space5",0,6,.125,"rem"),p("space6",0,6,.125,"rem"),p("space8",0,6,.125,"rem"),p("space10",0,6,.125,"rem"),p("space12",0,8,.125,"rem"),p("space16",0,10,.125,"rem"),p("space20",0,12,.125,"rem"),p("space24",0,12,.125,"rem")]},{label:"Radius",tokens:[x("radiusNone"),p("radiusSm",0,2,.0625,"rem"),p("radiusMd",0,2,.0625,"rem"),p("radiusLg",0,2,.0625,"rem"),p("radiusXl",0,3,.0625,"rem"),x("radiusFull")]},{label:"Shadows",tokens:[x("shadowNone"),x("shadowSm"),x("shadowMd"),x("shadowLg"),x("shadowXl")]},{label:"Motion",tokens:[x("durationFast"),x("durationBase"),x("durationSlow"),x("easingDefault"),x("easingEmphasized"),x("easingDecelerate")]}];function le(t){return Object.keys(t).length===0?`<LucentProvider>
|
|
2
2
|
{children}
|
|
3
3
|
</LucentProvider>`:`<LucentProvider tokens={{
|
|
4
|
-
${Object.entries(t).map(([o,
|
|
4
|
+
${Object.entries(t).map(([o,l])=>` ${o}: '${l}'`).join(`,
|
|
5
5
|
`)}
|
|
6
6
|
}}>
|
|
7
7
|
{children}
|
|
8
|
-
</LucentProvider>`}async function ae(t){try{return await navigator.clipboard.writeText(t),!0}catch{return!1}}function le({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:ie,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.ColorPicker,{value:n,onChange:i,size:"sm"}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ie={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function ce({label:t,value:n,isOverridden:o,min:i,max:c,step:l,unit:u,onChange:f,onReset:d}){const m=parseFloat(n)||0;return e.jsxs("div",{style:de,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Slider,{min:i,max:c,step:l,value:m,onChange:b=>f(`${b}${u}`),size:"sm",style:{width:80}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"onAccent",style:{width:52,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:n}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:d,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const de={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function fe({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:ue,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Input,{size:"sm",value:n,onChange:l=>i(l.target.value),style:{width:140,fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ue={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function A(t,n){const o=s.getAccentFg(t),i=s.ensureContrast(t,o),c=n==="light",l=s.adjustLightness(i,c?.05:-.07),u=s.adjustLightness(i,c?.85:-.6),f=s.adjustLightness(i,c?-.15:.15);return{accentDefault:i,accentFg:o,accentHover:l,accentSubtle:u,accentBorder:f}}function G(t,n){const o=n==="light",i=s.adjustLightness(t,o?-.02:.02),c=s.adjustLightness(t,o?-.04:.03),[l,u,f]=s.hexToHsl(t),d=o?s.hslToHex(l,u*.3,Math.min(1,f+(1-f)*.85)):s.hslToHex(l,u,Math.min(.25,f+.04)),m=s.adjustLightness(d,o?-.04:.03),b=s.adjustLightness(d,o?0:.06),v=s.adjustLightness(d,o?0:.06);return{bgBase:t,bgSubtle:i,surfaceTint:c,surface:d,surfaceSecondary:m,surfaceRaised:b,surfaceOverlay:v}}function $(t,n){const o=n==="light";return{borderDefault:t,borderSubtle:s.adjustLightness(t,o?.05:-.02),borderStrong:s.adjustLightness(t,o?-.27:.19)}}function _(t,n){const o=n==="light";return{surface:t,surfaceSecondary:s.adjustLightness(t,o?-.04:.03),surfaceRaised:s.adjustLightness(t,o?0:.06),surfaceOverlay:s.adjustLightness(t,o?0:.06)}}const ye=[{key:"fontSizeXs",step:-2},{key:"fontSizeSm",step:-1},{key:"fontSizeMd",step:0},{key:"fontSizeLg",step:1},{key:"fontSizeXl",step:2},{key:"fontSize2xl",step:3},{key:"fontSize3xl",step:4}];function N(t,n){const o={};for(const{key:i,step:c}of ye){const l=t*Math.pow(n,c),u=Math.round(l*1e3)/1e3;o[i]=`${u}rem`}return o}const he=[{label:"Minor Second",ratio:1.067},{label:"Major Second",ratio:1.125},{label:"Minor Third",ratio:1.2},{label:"Major Third",ratio:1.25},{label:"Perfect Fourth",ratio:1.333},{label:"Golden Ratio",ratio:1.618}],xe=[{key:"space0",rem:0},{key:"space1",rem:.25},{key:"space2",rem:.5},{key:"space3",rem:.75},{key:"space4",rem:1},{key:"space5",rem:1.25},{key:"space6",rem:1.5},{key:"space8",rem:2},{key:"space10",rem:2.5},{key:"space12",rem:3},{key:"space16",rem:4},{key:"space20",rem:5},{key:"space24",rem:6}];function q(t){const n={};for(const{key:o,rem:i}of xe){if(i===0){n[o]="0px";continue}const c=Math.round(i*t*1e3)/1e3;n[o]=`${c}rem`}return n}const ge=[{key:"radiusSm",sharp:0,rounded:.25,pill:.5},{key:"radiusMd",sharp:0,rounded:.375,pill:.75},{key:"radiusLg",sharp:0,rounded:.5,pill:1},{key:"radiusXl",sharp:0,rounded:.75,pill:1.5}];function X(t){const n={};for(const{key:o,sharp:i,rounded:c,pill:l}of ge){let u;if(t<=.5){const d=t/.5;u=i+(c-i)*d}else{const d=(t-.5)/.5;u=c+(l-c)*d}const f=Math.round(u*1e3)/1e3;n[o]=`${f}rem`}return n}const pe={flat:s.flatShadow,subtle:s.subtleShadow,elevated:s.elevatedShadow,liquidGlass:s.liquidGlassShadow,brutalist:s.brutalistShadow,neumorphic:s.neumorphicShadow,natural:s.naturalShadow,glow:s.glowShadow},me=[{value:"flat",label:"Flat"},{value:"default",label:"Default"},{value:"subtle",label:"Subtle"},{value:"elevated",label:"Elevated"},{value:"natural",label:"Natural"},{value:"liquidGlass",label:"Liquid Glass"},{value:"neumorphic",label:"Neumorphic"},{value:"brutalist",label:"Brutalist"},{value:"glow",label:"Glow"}];function V(t,n){if(t==="default")return n==="dark"?s.darkShadowTokens:s.lightShadowTokens;const o=pe[t];return n==="dark"?o.dark:o.light}const Y=new Set,be={Inter:"Inter:wght@300;400;500;600;700",Geist:"Geist:wght@300;400;500;600;700","Plus Jakarta Sans":"Plus+Jakarta+Sans:wght@300;400;500;600;700",Outfit:"Outfit:wght@300;400;500;600;700",Sora:"Sora:wght@300;400;500;600;700","Space Grotesk":"Space+Grotesk:wght@400;500;600;700",Lora:"Lora:wght@400;500;600;700",Merriweather:"Merriweather:wght@300;400;700","Playfair Display":"Playfair+Display:wght@400;500;600;700","JetBrains Mono":"JetBrains+Mono:wght@400;500;600;700","Fira Code":"Fira+Code:wght@400;500;600;700","DM Sans":"DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700","DM Mono":"DM+Mono:wght@400;500",Georama:"Georama:wght@400;500;600;700"};function P(t){var l;const n=t.match(/"([^"]+)"/),o=n?n[1]:(l=t.split(",")[0])==null?void 0:l.trim();if(!o||Y.has(o))return;const i=be[o];if(!i)return;Y.add(o);const c=document.createElement("link");c.rel="stylesheet",c.href=`https://fonts.googleapis.com/css2?family=${i}&display=swap`,document.head.appendChild(c)}const ve='"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',Se='"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',ke='"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',je='"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',we='"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',Z='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',Ce='"Outfit", -apple-system, BlinkMacSystemFont, sans-serif',Te='"Sora", -apple-system, BlinkMacSystemFont, sans-serif',Be='"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif',Q=[{name:"Default",roundness:.5,density:1,shadow:"default",typeBase:1,typeRatio:1.125,fontFamily:ve,colors:{light:{accent:"#111827",bg:"#f7f8f9",surface:"#ffffff",border:"#e5e7eb"},dark:{accent:"#f9fafb",bg:"#0c0d12",surface:"#1c1e28",border:"#2e3039"}}},{name:"Modern",roundness:.5,density:1,shadow:"subtle",typeBase:1,typeRatio:1.2,fontFamily:Se,colors:{light:{accent:"#6366f1",bg:"#f8f7fc",surface:"#ffffff",border:"#e0dde9"},dark:{accent:"#818cf8",bg:"#0d0c18",surface:"#1e1c30",border:"#302e42"}}},{name:"Liquid Glass",roundness:1,density:.9,shadow:"liquidGlass",typeBase:1.0625,typeRatio:1.2,fontFamily:Z,colors:{light:{accent:"#0ea5e9",bg:"#f5f9fc",surface:"#ffffff",border:"#d9e4ec"},dark:{accent:"#38bdf8",bg:"#0a0e16",surface:"#16202e",border:"#243240"}}},{name:"Bento",roundness:.75,density:1,shadow:"natural",typeBase:.9375,typeRatio:1.2,fontFamily:ke,colors:{light:{accent:"#0d9488",bg:"#f5faf8",surface:"#ffffff",border:"#d4e5e0"},dark:{accent:"#2dd4bf",bg:"#0a110f",surface:"#162824",border:"#263e38"}}},{name:"Brutalist",roundness:0,density:.8,shadow:"brutalist",typeBase:1.125,typeRatio:1.25,fontFamily:we,colors:{light:{accent:"#ef4444",bg:"#faf6f5",surface:"#ffffff",border:"#e9ddd8"},dark:{accent:"#f87171",bg:"#140c0a",surface:"#2c1e1a",border:"#42322c"}}},{name:"Terminal",roundness:0,density:.8,shadow:"glow",typeBase:.9375,typeRatio:1.125,fontFamily:je,colors:{light:{accent:"#10b981",bg:"#f5faf7",surface:"#ffffff",border:"#dbe8df"},dark:{accent:"#34d399",bg:"#0a120c",surface:"#16281e",border:"#263e30"}}},{name:"Soft UI",roundness:1,density:1.25,shadow:"neumorphic",typeBase:1,typeRatio:1.2,fontFamily:Ce,colors:{light:{accent:"#8b5cf6",bg:"#f8f6fc",surface:"#ffffff",border:"#e2dce9"},dark:{accent:"#a78bfa",bg:"#100c1a",surface:"#221e34",border:"#362e48"}}},{name:"Bloom",roundness:.875,density:1.25,shadow:"glow",typeBase:1.0625,typeRatio:1.25,fontFamily:Te,colors:{light:{accent:"#e879f9",bg:"#faf6f8",surface:"#ffffff",border:"#ecdde1"},dark:{accent:"#f0abfc",bg:"#140a10",surface:"#2c1a24",border:"#422a36"}}},{name:"Minimal",roundness:.25,density:1,shadow:"flat",typeBase:1,typeRatio:1.125,fontFamily:Be,colors:{light:{accent:"#475569",bg:"#f4f5f7",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#94a3b8",bg:"#0c0e12",surface:"#1c2028",border:"#2e3440"}}},{name:"Enterprise",roundness:0,density:.75,shadow:"flat",typeBase:.9375,typeRatio:1.125,fontFamily:Z,colors:{light:{accent:"#475569",bg:"#f4f5f7",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#94a3b8",bg:"#0c0e12",surface:"#1c2028",border:"#2e3440"}}}],ze=[{label:"Brand",colors:["#111827","#e9c96b","#6366f1","#8b5cf6","#10b981","#0d9488","#f43f5e","#e8624a","#d97706","#0ea5e9","#475569","#5f8c6e"]},{label:"Vibrant",colors:["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#3b82f6","#a855f7","#ec4899","#14b8a6","#f59e0b"]}],Me=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f4","#fef7ee","#faf5ff","#f0f9ff","#f0fdf4","#fefce8","#fff1f2"]},{label:"Dark",colors:["#09090b","#0a0a0a","#0c0c0e","#111827","#18181b","#1c1917","#1a1a2e","#0f172a","#171717","#0d1117"]}],Fe=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f5","#f3f4f6","#f1f5f9","#fef3c7","#fce7f3","#dbeafe","#dcfce7"]},{label:"Dark",colors:["#111111","#141414","#1a1a1a","#1e1e2e","#1f2937","#1e293b","#18181b","#16213e","#1c1c1c","#0f172a"]}],Re=[{label:"Light",colors:["#e5e7eb","#d1d5db","#e2e8f0","#f3f4f6","#d4d4d8","#cbd5e1","#e7e5e4","#fde68a","#c7d2fe","#bbf7d0"]},{label:"Dark",colors:["#27272a","#374151","#334155","#3f3f46","#1e293b","#404040","#44403c","#1c1f2a","#2d2d3f","#1f2937"]}];function Le({state:t,theme:n}){const[o,i]=h.useState(1),[c,l]=h.useState(.5),[u,f]=h.useState("default"),[d,m]=h.useState(null),b=t.overrides.accentDefault??t.tokens.accentDefault,v=h.useCallback(a=>{for(const[j,R]of Object.entries(a))t.setOverride(j,R)},[t]),B=h.useCallback(a=>{t.resetAll(),m(a.name),i(a.density),l(a.roundness),f(a.shadow);const j=a.colors[n],R={...A(j.accent,n),...G(j.bg,n),..._(j.surface,n),...$(j.border,n),...N(a.typeBase,a.typeRatio),...q(a.density),...X(a.roundness),...V(a.shadow,n),fontFamilyBase:a.fontFamily};P(a.fontFamily),requestAnimationFrame(()=>{for(const[L,I]of Object.entries(R))t.setOverride(L,I)})},[t,n]),w=h.useRef(n);h.useEffect(()=>{if(w.current===n||(w.current=n,!d))return;const a=Q.find(L=>L.name===d);if(!a)return;const j=a.colors[n],R={...A(j.accent,n),...G(j.bg,n),..._(j.surface,n),...$(j.border,n),...V(u,n)};for(const[L,I]of Object.entries(R))t.setOverride(L,I)},[n,d,u,t]);const T=a=>{z(),i(a),v(q(a))},C=a=>{z(),l(a),v(X(a))},F=a=>{z(),f(a),v(V(a,n))},r=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(A(a,n)):t.setOverride("accentDefault",a)},x=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(G(a,n)):t.setOverride("bgBase",a)},S=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(_(a,n)):t.setOverride("surface",a)},E=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v($(a,n)):t.setOverride("borderDefault",a)},U=t.overrides.bgBase??t.tokens.bgBase,K=t.overrides.surface??t.tokens.surface,H=t.overrides.borderDefault??t.tokens.borderDefault,te=c<.2?"Sharp":c<.4?"Subtle":c<.6?"Rounded":c<.8?"Soft":"Pill",se=o<.85?"Compact":o<.95?"Snug":o<1.05?"Default":o<1.15?"Relaxed":"Spacious",z=()=>m(null);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsx(D,{label:"Presets",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:6},children:Q.map(a=>e.jsxs(s.Button,{variant:d===a.name?"secondary":"ghost",onClick:()=>B(a),style:{padding:"8px 4px 6px",display:"flex",flexDirection:"column",alignItems:"center",gap:5,height:"auto"},children:[e.jsx("div",{style:{width:24,height:24,borderRadius:a.roundness<.3?3:a.roundness<.7?6:12,background:a.colors[n].accent,border:"1px solid rgba(255,255,255,0.1)"}}),e.jsx(s.Text,{size:"xs",...d!==a.name&&{color:"secondary"},weight:d===a.name?"semibold":"regular",style:{fontSize:9,whiteSpace:"nowrap"},children:a.name})]},a.name))})}),e.jsx(D,{label:"Colors",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:b,onChange:r,size:"sm",presetGroups:ze}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Accent"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:b})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:U,onChange:x,size:"sm",presetGroups:Me}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Background"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:U})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:K,onChange:S,size:"sm",presetGroups:Fe}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Surface"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:K})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:H,onChange:E,size:"sm",presetGroups:Re}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Border"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:H})]})]})}),e.jsxs(D,{label:"Density",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,flexShrink:0},children:"Compact"}),e.jsx(s.Slider,{min:.7,max:1.35,step:.01,value:o,onChange:a=>T(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,textAlign:"right",flexShrink:0},children:"Spacious"})]}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsxs(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:[se," (",o.toFixed(2),"x)"]})})]}),e.jsxs(D,{label:"Roundness",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:36,flexShrink:0},children:"Sharp"}),e.jsx(s.Slider,{min:0,max:1,step:.01,value:c,onChange:a=>C(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:24,textAlign:"right",flexShrink:0},children:"Pill"})]}),e.jsx("div",{style:{display:"flex",gap:8,marginTop:8,justifyContent:"center"},children:[0,.25,.5,.75,1].map(a=>e.jsx("div",{style:{width:32,height:32,background:"var(--lucent-surface-secondary)",border:`1.5px solid ${Math.abs(c-a)<.05?"var(--lucent-accent-default)":"var(--lucent-border-default)"}`,borderRadius:a===0?2:a<.5?4:a<.8?8:16,cursor:"pointer",transition:"border-color 150ms"},onClick:()=>C(a)},a))}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsx(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:te})})]}),e.jsx(D,{label:"Shadow Style",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:4},children:me.map(({value:a,label:j})=>e.jsx(s.Button,{variant:u===a?"secondary":"ghost",size:"2xs",onClick:()=>F(a),style:{justifyContent:"center"},children:j},a))})})]})}function D({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}const M=[{label:"DM Sans",family:'"DM Sans", sans-serif',category:"sans"},{label:"Inter",family:'"Inter", sans-serif',category:"sans"},{label:"System UI",family:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',category:"sans"},{label:"Geist",family:'"Geist", sans-serif',category:"sans"},{label:"Plus Jakarta",family:'"Plus Jakarta Sans", sans-serif',category:"sans"},{label:"Outfit",family:'"Outfit", sans-serif',category:"sans"},{label:"Lora",family:'"Lora", serif',category:"serif"},{label:"Merriweather",family:'"Merriweather", serif',category:"serif"},{label:"Playfair",family:'"Playfair Display", serif',category:"serif"},{label:"JetBrains Mono",family:'"JetBrains Mono", monospace',category:"mono"},{label:"Fira Code",family:'"Fira Code", monospace',category:"mono"},{label:"Space Grotesk",family:'"Space Grotesk", sans-serif',category:"display"},{label:"Sora",family:'"Sora", sans-serif',category:"display"},{label:"Georama",family:'"Georama", sans-serif',category:"display"}];function De({state:t,theme:n}){const o=t.overrides.fontSizeMd??t.tokens.fontSizeMd,i=parseFloat(o)||1,[c,l]=h.useState(i),[u,f]=h.useState(()=>{const r=t.overrides.fontSizeLg??t.tokens.fontSizeLg,x=parseFloat(r)||1.125,S=parseFloat(o)||1;return S>0?Math.round(x/S*1e3)/1e3:1.125});h.useEffect(()=>{const r=parseFloat(t.overrides.fontSizeMd??t.tokens.fontSizeMd)||1,x=parseFloat(t.overrides.fontSizeLg??t.tokens.fontSizeLg)||1.125;l(r),r>0&&f(Math.round(x/r*1e3)/1e3)},[t.overrides.fontSizeMd,t.overrides.fontSizeLg,t.tokens.fontSizeMd,t.tokens.fontSizeLg]);const[d,m]=h.useState("all"),b=t.overrides.fontFamilyBase??t.tokens.fontFamilyBase,v=t.overrides.fontFamilyMono??t.tokens.fontFamilyMono,B=t.overrides.fontFamilyDisplay??t.tokens.fontFamilyDisplay,w=h.useCallback(r=>{for(const[x,S]of Object.entries(r))t.setOverride(x,S)},[t]),T=r=>{l(r),w(N(r,u))},C=r=>{f(r),w(N(c,r))},F=d==="all"?M:M.filter(r=>r.category===d);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs(O,{label:"Font Family",children:[e.jsx("div",{style:{marginBottom:8},children:e.jsx(s.SegmentedControl,{value:d,onChange:r=>m(r),options:[{value:"all",label:"All"},{value:"sans",label:"Sans"},{value:"serif",label:"Serif"},{value:"mono",label:"Mono"},{value:"display",label:"Display"}],size:"sm",fullWidth:!0})}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:2},children:F.map(r=>{const x=b.includes(r.label)||r.family===b;return e.jsxs(s.Button,{variant:x?"secondary":"ghost",onClick:()=>{P(r.family),t.setOverride("fontFamilyBase",r.family)},style:{width:"100%",justifyContent:"space-between",height:"auto",padding:"8px 10px"},children:[e.jsx("span",{style:{fontFamily:r.family,fontSize:14},children:r.label}),e.jsx(s.Text,{as:"span",size:"xs",color:"secondary",style:{textTransform:"capitalize"},children:r.category})]},r.label)})}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Custom"}),e.jsx(s.Input,{size:"sm",value:b,onChange:r=>t.setOverride("fontFamilyBase",r.target.value),style:{width:"100%",fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1})]})]}),e.jsx(O,{label:"Code & Display Fonts",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Monospace"}),e.jsx(s.Select,{size:"sm",value:v,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyMono",r.target.value)},options:[...M.filter(r=>r.category==="mono").map(r=>({value:r.family,label:r.label})),...M.some(r=>r.family===v)?[]:[{value:v,label:"Custom"}]]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Display"}),e.jsx(s.Select,{size:"sm",value:B,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyDisplay",r.target.value)},options:[...M.filter(r=>r.category==="display"||r.category==="sans").map(r=>({value:r.family,label:r.label})),...M.some(r=>r.family===B)?[]:[{value:B,label:"Custom"}]]})]})]})}),e.jsx(O,{label:"Type Scale",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Base Size"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:.75,max:1.5,step:.0625,value:c,onChange:r=>T(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsxs(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:[c,"rem"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Scale Ratio"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:1,max:1.618,step:.001,value:u,onChange:r=>C(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:u.toFixed(3)})]}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginTop:6},children:he.map(r=>e.jsx(s.Button,{variant:Math.abs(u-r.ratio)<.005?"secondary":"ghost",size:"2xs",onClick:()=>C(r.ratio),children:r.label},r.label))})]})]})}),e.jsx(O,{label:"Text Colors",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:Oe.map(({key:r,label:x})=>{const S=t.overrides[r]??t.tokens[r];return e.jsx(s.ColorPicker,{label:x,value:S,onChange:E=>t.setOverride(r,E),size:"sm",inline:!0},r)})})}),e.jsx(O,{label:"Preview",children:e.jsx(Pe,{family:b,baseSize:c,ratio:u,textPrimary:t.overrides.textPrimary??t.tokens.textPrimary,textSecondary:t.overrides.textSecondary??t.tokens.textSecondary,bgBase:t.overrides.bgBase??t.tokens.bgBase})})]})}const Oe=[{key:"textPrimary",label:"Primary"},{key:"textSecondary",label:"Secondary"},{key:"textDisabled",label:"Disabled"},{key:"textInverse",label:"Inverse"}];function O({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}function Pe({family:t,baseSize:n,ratio:o,textPrimary:i,textSecondary:c,bgBase:l}){const u=n*Math.pow(o,4),f=n*Math.pow(o,2),d=n,m=n*Math.pow(o,-1);return e.jsxs("div",{style:{background:l,borderRadius:6,padding:"14px 12px",fontFamily:t,border:"1px solid var(--lucent-border-default)"},children:[e.jsx("div",{style:{fontSize:`${u}rem`,fontWeight:700,color:i,lineHeight:1.2,marginBottom:6},children:"Heading"}),e.jsx("div",{style:{fontSize:`${f}rem`,fontWeight:600,color:i,lineHeight:1.3,marginBottom:8},children:"Subheading text"}),e.jsx("div",{style:{fontSize:`${d}rem`,color:i,lineHeight:1.5,marginBottom:6},children:"Body text looks like this. It should be comfortable to read at any size with good line height and spacing."}),e.jsx("div",{style:{fontSize:`${m}rem`,color:c,lineHeight:1.5},children:"Secondary caption — smaller, muted for supplemental information."})]})}const k={bg:"#0a0a0a",surface:"#141414",text:"#f0ead6",textMuted:"#8a8473",accent:"#e9c96b",border:"rgba(233, 201, 107, 0.1)",inputBg:"rgba(255, 255, 255, 0.05)"},Ee=h.createContext(null);function Ie({children:t}){const[n,o]=h.useState(null),i=h.useCallback(l=>{l&&o(l)},[]),c=h.useMemo(()=>{const l={};for(const[u,f]of Object.entries(s.darkTokens))l[s.tokenToCssVar(u)]=f;return l[s.tokenToCssVar("bgBase")]=k.bg,l[s.tokenToCssVar("surface")]=k.surface,l[s.tokenToCssVar("surfaceSecondary")]=k.inputBg,l[s.tokenToCssVar("borderDefault")]=k.border,l[s.tokenToCssVar("borderSubtle")]=k.border,l[s.tokenToCssVar("textPrimary")]=k.text,l[s.tokenToCssVar("textSecondary")]=k.textMuted,l[s.tokenToCssVar("accentDefault")]=k.accent,l[s.tokenToCssVar("accentFg")]="#0a0a0a",l[s.tokenToCssVar("accentSubtle")]="rgba(233, 201, 107, 0.12)",l[s.tokenToCssVar("accentHover")]="#d4b55a",l[s.tokenToCssVar("accentBorder")]=k.accent,l},[]);return e.jsx("div",{ref:i,style:c,children:e.jsx(Ee.Provider,{value:n,children:t})})}function Ae({state:t,theme:n,position:o,mode:i,onModeChange:c,onThemeChange:l,onClose:u}){const[f,d]=h.useState("design"),[m,b]=h.useState(""),[v,B]=h.useState(()=>{const x={};for(const S of J)x[S.label]=S.defaultExpanded??!1;return x}),[w,T]=h.useState(!1),C=x=>{B(S=>({...S,[x]:!S[x]}))},F=async()=>{const x=re(t.overrides);await ae(x)&&(T(!0),setTimeout(()=>T(!1),2e3))},r=m.toLowerCase();return e.jsx(Ie,{children:e.jsxs("div",{style:{...$e,[o]:0,borderLeft:o==="right"?`1px solid ${k.border}`:void 0,borderRight:o==="left"?`1px solid ${k.border}`:void 0},children:[e.jsxs("div",{style:_e,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]}),e.jsx(s.Text,{size:"sm",weight:"semibold",children:"Lucent DevTools"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[l&&e.jsx(s.Toggle,{checked:n==="dark",onChange:()=>l(n==="light"?"dark":"light"),size:"sm"}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:()=>c(i==="overlay"?"push":"overlay"),"aria-label":i==="overlay"?"Push content":"Overlay",title:i==="overlay"?"Push content":"Overlay",children:i==="overlay"?e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor",opacity:"0.5"})]}):e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor"})]})}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:u,"aria-label":"Close",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2 2l10 10M12 2L2 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]}),e.jsx("div",{style:{flexShrink:0},children:e.jsx(s.Tabs,{value:f,onChange:x=>d(x),tabs:[{value:"design",label:"Design"},{value:"type",label:"Typography"},{value:"tokens",label:"Tokens"}]})}),f==="tokens"&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"8px 12px"},children:e.jsx("input",{type:"text",placeholder:"Filter tokens...",value:m,onChange:x=>b(x.target.value),style:Ve,spellCheck:!1})}),e.jsx("div",{style:W,children:J.map(x=>e.jsx(Ge,{group:x,state:t,filter:r,expanded:v[x.label]??!1,onToggle:()=>C(x.label)},x.label))})]}),f==="design"&&e.jsx("div",{style:W,children:e.jsx(Le,{state:t,theme:n})}),f==="type"&&e.jsx("div",{style:W,children:e.jsx(De,{state:t,theme:n})}),e.jsxs("div",{style:Ue,children:[e.jsxs("div",{style:{display:"flex",gap:6,flex:1},children:[e.jsx(s.Button,{size:"xs",onClick:F,children:w?"Copied!":"Copy Config"}),t.overrideCount>0&&e.jsx(s.Button,{variant:"outline",size:"xs",onClick:t.resetAll,children:"Reset All"})]}),t.overrideCount>0&&e.jsxs(s.Badge,{variant:"accent",size:"sm",children:[t.overrideCount," override",t.overrideCount!==1?"s":""]})]})]})})}function Ge({group:t,state:n,filter:o,expanded:i,onToggle:c}){const l=t.subgroups?t.subgroups.flatMap(d=>d.tokens):t.tokens??[];if(!(o===""||l.some(d=>d.key.toLowerCase().includes(o))))return null;const f=i||o!=="";return e.jsxs("div",{style:{borderBottom:`1px solid ${k.border}`},children:[e.jsxs("button",{onClick:c,style:We,children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",style:{transform:f?"rotate(90deg)":"none",transition:"transform 150ms"},children:e.jsx("path",{d:"M3 1l4 4-4 4",stroke:k.textMuted,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),e.jsx(s.Text,{size:"xs",weight:"semibold",children:t.label}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginLeft:"auto"},children:l.length})]}),f&&e.jsx("div",{style:{padding:"0 12px 8px"},children:t.subgroups?t.subgroups.map(d=>{const m=o?d.tokens.filter(b=>b.key.toLowerCase().includes(o)):d.tokens;return m.length===0?null:e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("div",{style:Ne,children:d.label}),m.map(b=>e.jsx(ee,{meta:b,state:n},b.key))]},d.label)}):(t.tokens??[]).filter(d=>!o||d.key.toLowerCase().includes(o)).map(d=>e.jsx(ee,{meta:d,state:n},d.key))})]})}function ee({meta:t,state:n}){const o=n.overrides[t.key]??n.tokens[t.key],i=t.key in n.overrides,c=u=>n.setOverride(t.key,u),l=()=>n.removeOverride(t.key);switch(t.controlType){case"color":return e.jsx(le,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:l});case"slider":return e.jsx(ce,{label:t.key,value:o,isOverridden:i,min:t.sliderConfig.min,max:t.sliderConfig.max,step:t.sliderConfig.step,unit:t.sliderConfig.unit,onChange:c,onReset:l});case"text":return e.jsx(fe,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:l})}}const $e={position:"fixed",top:0,bottom:0,width:320,background:"var(--lucent-bg-base)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-sm)",display:"flex",flexDirection:"column",zIndex:99999,boxShadow:"-4px 0 24px rgba(0, 0, 0, 0.3)"},_e={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",flexShrink:0},Ve={width:"100%",background:"var(--lucent-surface-secondary)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)",borderRadius:"var(--lucent-radius-md)",padding:"6px 10px",fontSize:"var(--lucent-font-size-xs)",outline:"none",fontFamily:"inherit",boxSizing:"border-box"},W={flex:1,overflowY:"auto",minHeight:0},We={display:"flex",alignItems:"center",gap:8,width:"100%",padding:"10px 12px",background:"none",border:"none",cursor:"pointer",color:"inherit",fontFamily:"inherit",textAlign:"left"},Ne={fontSize:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--lucent-text-secondary)",marginBottom:4,marginTop:4},Ue={display:"flex",alignItems:"center",gap:8,padding:"10px 12px",borderTop:"1px solid var(--lucent-border-default)",flexShrink:0};function Ke(t){const n=t.toLowerCase().split("+");return{ctrl:n.includes("ctrl"),meta:n.includes("meta")||n.includes("cmd"),shift:n.includes("shift"),alt:n.includes("alt"),key:n[n.length-1]??""}}function He(t,n){const o=navigator.platform.toUpperCase().includes("MAC");return(n.meta||n.ctrl?o?t.metaKey:t.ctrlKey:!t.ctrlKey&&!t.metaKey)&&n.shift===t.shiftKey&&n.alt===t.altKey&&t.key.toLowerCase()===n.key}function Je({shortcut:t="meta+shift+d",position:n="right",defaultOpen:o=!1,onThemeChange:i,zIndex:c=99999}){const[l,u]=h.useState(o),[f,d]=h.useState("overlay"),{theme:m}=s.useLucent(),b=oe(),v=h.useCallback(()=>u(w=>!w),[]);return h.useEffect(()=>{if(!l||f!=="push"){document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition");return}return document.body.style.transition="margin 200ms ease",document.body.style[n==="right"?"marginRight":"marginLeft"]="320px",()=>{document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition")}},[l,f,n]),h.useEffect(()=>{const w=Ke(t),T=C=>{He(C,w)&&(C.preventDefault(),v())};return document.addEventListener("keydown",T),()=>document.removeEventListener("keydown",T)},[t,v]),ne.createPortal(e.jsxs(e.Fragment,{children:[!l&&e.jsx("button",{onClick:v,style:{...qe,[n]:16,zIndex:c},title:"Open Lucent DevTools",children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]})}),l&&e.jsx("div",{style:{zIndex:c},children:e.jsx(Ae,{state:b,theme:m,position:n,mode:f,onModeChange:d,...i!==void 0&&{onThemeChange:i},onClose:v})})]}),document.body)}const qe={position:"fixed",bottom:16,width:40,height:40,borderRadius:"50%",background:k.bg,border:`1px solid ${k.border}`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.4)",transition:"transform 150ms ease, box-shadow 150ms ease"};exports.LucentDevTools=Je;
|
|
8
|
+
</LucentProvider>`}async function ie(t){try{return await navigator.clipboard.writeText(t),!0}catch{return!1}}function ce({label:t,value:s,isOverridden:o,onChange:l,onReset:c}){return e.jsxs("div",{style:de,children:[e.jsx(n.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(n.ColorPicker,{value:s,onChange:l,size:"sm"}),o&&e.jsx(n.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const de={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function fe({label:t,value:s,isOverridden:o,min:l,max:c,step:i,unit:y,onChange:f,onReset:d}){const m=parseFloat(s)||0;return e.jsxs("div",{style:ue,children:[e.jsx(n.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(n.Slider,{min:l,max:c,step:i,value:m,onChange:b=>f(`${b}${y}`),size:"sm",style:{width:80}}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",color:"onAccent",style:{width:52,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:s}),o&&e.jsx(n.Button,{variant:"ghost",size:"2xs",onClick:d,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ue={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function ye({label:t,value:s,isOverridden:o,onChange:l,onReset:c}){return e.jsxs("div",{style:ge,children:[e.jsx(n.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(n.Input,{size:"sm",value:s,onChange:i=>l(i.target.value),style:{width:140,fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1}),o&&e.jsx(n.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ge={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function A(t,s){const o=n.getAccentFg(t),l=n.ensureContrast(t,o),c=s==="light",i=n.adjustLightness(l,c?.05:-.07),y=n.adjustLightness(l,c?.85:-.6),f=n.adjustLightness(l,c?-.15:.15);return{accentDefault:l,accentFg:o,accentHover:i,accentSubtle:y,accentBorder:f}}function G(t,s){const o=s==="light",l=n.adjustLightness(t,o?-.02:.02),c=n.adjustLightness(t,o?-.04:.03);return{bgBase:t,bgSubtle:l,surfaceTint:c}}function $(t,s){const o=s==="light";return{borderDefault:t,borderSubtle:n.adjustLightness(t,o?.05:-.02),borderStrong:n.adjustLightness(t,o?-.27:.19)}}function _(t,s){const o=s==="light";return{surface:t,surfaceSecondary:n.adjustLightness(t,o?-.04:.03),surfaceRaised:n.adjustLightness(t,o?0:.06),surfaceOverlay:n.adjustLightness(t,o?0:.06)}}const he=[{key:"fontSizeXs",step:-2},{key:"fontSizeSm",step:-1},{key:"fontSizeMd",step:0},{key:"fontSizeLg",step:1},{key:"fontSizeXl",step:2},{key:"fontSize2xl",step:3},{key:"fontSize3xl",step:4}];function W(t,s){const o={};for(const{key:l,step:c}of he){const i=t*Math.pow(s,c),y=Math.round(i*1e3)/1e3;o[l]=`${y}rem`}return o}const xe=[{label:"Minor Second",ratio:1.067},{label:"Major Second",ratio:1.125},{label:"Minor Third",ratio:1.2},{label:"Major Third",ratio:1.25},{label:"Perfect Fourth",ratio:1.333},{label:"Golden Ratio",ratio:1.618}],pe=[{key:"space0",rem:0},{key:"space1",rem:.25},{key:"space2",rem:.5},{key:"space3",rem:.75},{key:"space4",rem:1},{key:"space5",rem:1.25},{key:"space6",rem:1.5},{key:"space8",rem:2},{key:"space10",rem:2.5},{key:"space12",rem:3},{key:"space16",rem:4},{key:"space20",rem:5},{key:"space24",rem:6}];function X(t){const s={};for(const{key:o,rem:l}of pe){if(l===0){s[o]="0px";continue}const c=Math.round(l*t*1e3)/1e3;s[o]=`${c}rem`}return s}const me=[{key:"radiusSm",sharp:0,rounded:.25,pill:.5},{key:"radiusMd",sharp:0,rounded:.375,pill:.75},{key:"radiusLg",sharp:0,rounded:.5,pill:1},{key:"radiusXl",sharp:0,rounded:.75,pill:1.5}];function Y(t){const s={};for(const{key:o,sharp:l,rounded:c,pill:i}of me){let y;if(t<=.5){const d=t/.5;y=l+(c-l)*d}else{const d=(t-.5)/.5;y=c+(i-c)*d}const f=Math.round(y*1e3)/1e3;s[o]=`${f}rem`}return s}const be={flat:n.flatShadow,subtle:n.subtleShadow,elevated:n.elevatedShadow,liquidGlass:n.liquidGlassShadow,brutalist:n.brutalistShadow,neumorphic:n.neumorphicShadow,natural:n.naturalShadow,glow:n.glowShadow},ve=[{value:"flat",label:"Flat"},{value:"default",label:"Default"},{value:"subtle",label:"Subtle"},{value:"elevated",label:"Elevated"},{value:"natural",label:"Natural"},{value:"liquidGlass",label:"Liquid Glass"},{value:"neumorphic",label:"Neumorphic"},{value:"brutalist",label:"Brutalist"},{value:"glow",label:"Glow"}];function N(t,s){if(t==="default")return s==="dark"?n.darkShadowTokens:n.lightShadowTokens;const o=be[t];return s==="dark"?o.dark:o.light}const Z=new Set,Se={Inter:"Inter:wght@300;400;500;600;700",Geist:"Geist:wght@300;400;500;600;700","Plus Jakarta Sans":"Plus+Jakarta+Sans:wght@300;400;500;600;700",Outfit:"Outfit:wght@300;400;500;600;700",Sora:"Sora:wght@300;400;500;600;700","Space Grotesk":"Space+Grotesk:wght@400;500;600;700",Lora:"Lora:wght@400;500;600;700",Merriweather:"Merriweather:wght@300;400;700","Playfair Display":"Playfair+Display:wght@400;500;600;700","JetBrains Mono":"JetBrains+Mono:wght@400;500;600;700","Fira Code":"Fira+Code:wght@400;500;600;700","DM Sans":"DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700","DM Mono":"DM+Mono:wght@400;500",Georama:"Georama:wght@400;500;600;700"};function P(t){var i;const s=t.match(/"([^"]+)"/),o=s?s[1]:(i=t.split(",")[0])==null?void 0:i.trim();if(!o||Z.has(o))return;const l=Se[o];if(!l)return;Z.add(o);const c=document.createElement("link");c.rel="stylesheet",c.href=`https://fonts.googleapis.com/css2?family=${l}&display=swap`,document.head.appendChild(c)}const ke='"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',je='"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',we='"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',Ce='"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',Te='"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',Q='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',ze='"Outfit", -apple-system, BlinkMacSystemFont, sans-serif',Be='"Sora", -apple-system, BlinkMacSystemFont, sans-serif',Fe='"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif',ee=[{name:"Default",roundness:.5,density:1,shadow:"default",typeBase:1,typeRatio:1.125,fontFamily:ke,colors:{light:{accent:"#111827",navigation:"#f4f6f8",bg:"#ffffff",surface:"#ffffff",border:"#e5e7eb"},dark:{accent:"#f9fafb",navigation:"#0e1015",bg:"#111318",surface:"#191c22",border:"#252830"}}},{name:"Modern",roundness:.75,density:.99,shadow:"liquidGlass",typeBase:1,typeRatio:1.25,fontFamily:je,colors:{light:{accent:"#978AE7",navigation:"#dbd8e9",bg:"#FFFFFF",surface:"#f7f7f7",border:"#e0e0e0"},dark:{accent:"#b8aef0",navigation:"#110f1c",bg:"#131118",surface:"#1c1a24",border:"#2a2834"}}},{name:"Liquid Glass",roundness:1,density:.9,shadow:"liquidGlass",typeBase:1.0625,typeRatio:1.2,fontFamily:Q,colors:{light:{accent:"#0c8fca",navigation:"#ebf1ff",bg:"#f1f4ff",surface:"#ffffff",border:"#d9e4ec"},dark:{accent:"#38bdf8",navigation:"#0a0e16",bg:"#0e1420",surface:"#16202c",border:"#1e2c38"}}},{name:"Bento",roundness:.75,density:1,shadow:"natural",typeBase:.9375,typeRatio:1.2,fontFamily:we,colors:{light:{accent:"#0d9488",navigation:"#f9fbfc",bg:"#eef2f5",surface:"#ffffff",border:"#d4e5e0"},dark:{accent:"#2dd4bf",navigation:"#0c1210",bg:"#101a16",surface:"#182822",border:"#263e36"}}},{name:"Brutalist",roundness:0,density:.8,shadow:"brutalist",typeBase:1.125,typeRatio:1.25,fontFamily:Te,colors:{light:{accent:"#ef4444",navigation:"#fff9f7",bg:"#f0ebe8",surface:"#ffffff",border:"#e9ddd8"},dark:{accent:"#f87171",navigation:"#14100e",bg:"#1a1512",surface:"#26201c",border:"#3a302a"}}},{name:"Terminal",roundness:0,density:.8,shadow:"flat",typeBase:.875,typeRatio:1.125,fontFamily:Ce,colors:{light:{accent:"#12d091",navigation:"#f8f8fa",bg:"#ffffff",surface:"#ffffff",border:"#dbe8df"},dark:{accent:"#34d399",navigation:"#0e1012",bg:"#111318",surface:"#191c22",border:"#1e2e24"}}},{name:"Soft UI",roundness:1,density:1.25,shadow:"neumorphic",typeBase:1,typeRatio:1.2,fontFamily:ze,colors:{light:{accent:"#8b5cf6",navigation:"#eee8fa",bg:"#f8f4ff",surface:"#ffffff",border:"#e2dce9"},dark:{accent:"#a78bfa",navigation:"#120e1a",bg:"#141020",surface:"#1e1a2c",border:"#302a3e"}}},{name:"Bloom",roundness:.875,density:1.25,shadow:"glow",typeBase:1.0625,typeRatio:1.25,fontFamily:Be,colors:{light:{accent:"#e879f9",navigation:"#f5e8f0",bg:"#fff4f9",surface:"#ffffff",border:"#ecdde1"},dark:{accent:"#f0abfc",navigation:"#160e14",bg:"#1a1018",surface:"#261c24",border:"#3a2c34"}}},{name:"Minimal",roundness:.25,density:1,shadow:"flat",typeBase:1,typeRatio:1.125,fontFamily:Fe,colors:{light:{accent:"#475569",navigation:"#eceef2",bg:"#f7f8fa",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#94a3b8",navigation:"#0e1016",bg:"#11141a",surface:"#191e26",border:"#262c36"}}},{name:"Enterprise",roundness:0,density:.75,shadow:"flat",typeBase:.9375,typeRatio:1.125,fontFamily:Q,colors:{light:{accent:"#4182eb",navigation:"#ffffff",bg:"#f6f8fa",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#6da6f0",navigation:"#0e1015",bg:"#111418",surface:"#181e26",border:"#262c36"}}}],Me=[{label:"Brand",colors:["#111827","#e9c96b","#6366f1","#8b5cf6","#10b981","#0d9488","#f43f5e","#e8624a","#d97706","#0ea5e9","#475569","#5f8c6e"]},{label:"Vibrant",colors:["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#3b82f6","#a855f7","#ec4899","#14b8a6","#f59e0b"]}],Re=[{label:"Light",colors:["#ffffff","#fdfcff","#fbfdff","#fbfefc","#fffcfb","#fafbfd","#fffbfd","#fdfbff","#fafafa","#f9fafb"]},{label:"Dark",colors:["#08090e","#090814","#060a12","#060d0b","#100806","#060e08","#0c0816","#10060c","#080a0e","#0a0a0a"]}],De=[{label:"Light",colors:["#f7f8f9","#f9fafb","#f8f7fc","#f5f9fc","#f5faf8","#faf6f5","#f5faf7","#f8f6fc","#f4f5f7","#fafafa"]},{label:"Dark",colors:["#0c0d12","#0d0c18","#0a0e16","#0a110f","#140c0a","#0a120c","#100c1a","#140a10","#0c0e12","#0d1117"]}],Le=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f5","#f3f4f6","#f1f5f9","#fef3c7","#fce7f3","#dbeafe","#dcfce7"]},{label:"Dark",colors:["#111111","#141414","#1a1a1a","#1e1e2e","#1f2937","#1e293b","#18181b","#16213e","#1c1c1c","#0f172a"]}],Oe=[{label:"Light",colors:["#e5e7eb","#d1d5db","#e2e8f0","#f3f4f6","#d4d4d8","#cbd5e1","#e7e5e4","#fde68a","#c7d2fe","#bbf7d0"]},{label:"Dark",colors:["#27272a","#374151","#334155","#3f3f46","#1e293b","#404040","#44403c","#1c1f2a","#2d2d3f","#1f2937"]}];function Pe({state:t,theme:s}){const[o,l]=g.useState(1),[c,i]=g.useState(.5),[y,f]=g.useState("default"),[d,m]=g.useState(null),b=t.overrides.accentDefault??t.tokens.accentDefault,v=g.useCallback(a=>{for(const[j,R]of Object.entries(a))t.setOverride(j,R)},[t]),z=g.useCallback(a=>{t.resetAll(),m(a.name),l(a.density),i(a.roundness),f(a.shadow);const j=a.colors[s],R={navigation:j.navigation,...A(j.accent,s),...G(j.bg,s),..._(j.surface,s),...$(j.border,s),...W(a.typeBase,a.typeRatio),...X(a.density),...Y(a.roundness),...N(a.shadow,s),fontFamilyBase:a.fontFamily};P(a.fontFamily),requestAnimationFrame(()=>{for(const[D,I]of Object.entries(R))t.setOverride(D,I)})},[t,s]),w=g.useRef(s);g.useEffect(()=>{if(w.current===s||(w.current=s,t.resetAll(),!d))return;const a=ee.find(D=>D.name===d);if(!a)return;const j=a.colors[s],R={navigation:j.navigation,...A(j.accent,s),...G(j.bg,s),..._(j.surface,s),...$(j.border,s),...N(y,s)};for(const[D,I]of Object.entries(R))t.setOverride(D,I)},[s,d,y,t]);const T=a=>{B(),l(a),v(X(a))},C=a=>{B(),i(a),v(Y(a))},M=a=>{B(),f(a),v(N(a,s))},r=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(A(a,s)):t.setOverride("accentDefault",a)},h=a=>{B(),t.setOverride("navigation",a)},k=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(G(a,s)):t.setOverride("bgBase",a)},E=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(_(a,s)):t.setOverride("surface",a)},se=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v($(a,s)):t.setOverride("borderDefault",a)},U=t.overrides.navigation??t.tokens.navigation,K=t.overrides.bgBase??t.tokens.bgBase,q=t.overrides.surface??t.tokens.surface,J=t.overrides.borderDefault??t.tokens.borderDefault,ne=c<.2?"Sharp":c<.4?"Subtle":c<.6?"Rounded":c<.8?"Soft":"Pill",oe=o<.85?"Compact":o<.95?"Snug":o<1.05?"Default":o<1.15?"Relaxed":"Spacious",B=()=>m(null);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsx(L,{label:"Presets",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:6},children:ee.map(a=>e.jsxs(n.Button,{variant:d===a.name?"secondary":"ghost",onClick:()=>z(a),style:{padding:"8px 4px 6px",display:"flex",flexDirection:"column",alignItems:"center",gap:5,height:"auto"},children:[e.jsx("div",{style:{width:24,height:24,borderRadius:a.roundness<.3?3:a.roundness<.7?6:12,background:a.colors[s].accent,border:"1px solid rgba(255,255,255,0.1)"}}),e.jsx(n.Text,{size:"xs",...d!==a.name&&{color:"secondary"},weight:d===a.name?"semibold":"regular",style:{fontSize:9,whiteSpace:"nowrap"},children:a.name})]},a.name))})}),e.jsx(L,{label:"Colors",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(n.ColorPicker,{value:b,onChange:r,size:"sm",presetGroups:Me}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Accent"}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:b})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(n.ColorPicker,{value:U,onChange:h,size:"sm",presetGroups:Re}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Navigation"}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:U})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(n.ColorPicker,{value:K,onChange:k,size:"sm",presetGroups:De}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Background"}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:K})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(n.ColorPicker,{value:q,onChange:E,size:"sm",presetGroups:Le}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Surface"}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:q})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(n.ColorPicker,{value:J,onChange:se,size:"sm",presetGroups:Oe}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Border"}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:J})]})]})}),e.jsxs(L,{label:"Density",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(n.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,flexShrink:0},children:"Compact"}),e.jsx(n.Slider,{min:.7,max:1.35,step:.01,value:o,onChange:a=>T(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(n.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,textAlign:"right",flexShrink:0},children:"Spacious"})]}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsxs(n.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:[oe," (",o.toFixed(2),"x)"]})})]}),e.jsxs(L,{label:"Roundness",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(n.Text,{size:"xs",family:"mono",color:"secondary",style:{width:36,flexShrink:0},children:"Sharp"}),e.jsx(n.Slider,{min:0,max:1,step:.01,value:c,onChange:a=>C(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(n.Text,{size:"xs",family:"mono",color:"secondary",style:{width:24,textAlign:"right",flexShrink:0},children:"Pill"})]}),e.jsx("div",{style:{display:"flex",gap:8,marginTop:8,justifyContent:"center"},children:[0,.25,.5,.75,1].map(a=>e.jsx("div",{style:{width:32,height:32,background:"var(--lucent-surface-secondary)",border:`1.5px solid ${Math.abs(c-a)<.05?"var(--lucent-accent-default)":"var(--lucent-border-default)"}`,borderRadius:a===0?2:a<.5?4:a<.8?8:16,cursor:"pointer",transition:"border-color 150ms"},onClick:()=>C(a)},a))}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsx(n.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:ne})})]}),e.jsx(L,{label:"Shadow Style",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:4},children:ve.map(({value:a,label:j})=>e.jsx(n.Button,{variant:y===a?"secondary":"ghost",size:"2xs",onClick:()=>M(a),style:{justifyContent:"center"},children:j},a))})})]})}function L({label:t,children:s}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(n.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),s]})}const F=[{label:"DM Sans",family:'"DM Sans", sans-serif',category:"sans"},{label:"Inter",family:'"Inter", sans-serif',category:"sans"},{label:"System UI",family:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',category:"sans"},{label:"Geist",family:'"Geist", sans-serif',category:"sans"},{label:"Plus Jakarta",family:'"Plus Jakarta Sans", sans-serif',category:"sans"},{label:"Outfit",family:'"Outfit", sans-serif',category:"sans"},{label:"Lora",family:'"Lora", serif',category:"serif"},{label:"Merriweather",family:'"Merriweather", serif',category:"serif"},{label:"Playfair",family:'"Playfair Display", serif',category:"serif"},{label:"JetBrains Mono",family:'"JetBrains Mono", monospace',category:"mono"},{label:"Fira Code",family:'"Fira Code", monospace',category:"mono"},{label:"Space Grotesk",family:'"Space Grotesk", sans-serif',category:"display"},{label:"Sora",family:'"Sora", sans-serif',category:"display"},{label:"Georama",family:'"Georama", sans-serif',category:"display"}];function Ee({state:t,theme:s}){const o=t.overrides.fontSizeMd??t.tokens.fontSizeMd,l=parseFloat(o)||1,[c,i]=g.useState(l),[y,f]=g.useState(()=>{const r=t.overrides.fontSizeLg??t.tokens.fontSizeLg,h=parseFloat(r)||1.125,k=parseFloat(o)||1;return k>0?Math.round(h/k*1e3)/1e3:1.125});g.useEffect(()=>{const r=parseFloat(t.overrides.fontSizeMd??t.tokens.fontSizeMd)||1,h=parseFloat(t.overrides.fontSizeLg??t.tokens.fontSizeLg)||1.125;i(r),r>0&&f(Math.round(h/r*1e3)/1e3)},[t.overrides.fontSizeMd,t.overrides.fontSizeLg,t.tokens.fontSizeMd,t.tokens.fontSizeLg]);const[d,m]=g.useState("all"),b=t.overrides.fontFamilyBase??t.tokens.fontFamilyBase,v=t.overrides.fontFamilyMono??t.tokens.fontFamilyMono,z=t.overrides.fontFamilyDisplay??t.tokens.fontFamilyDisplay,w=g.useCallback(r=>{for(const[h,k]of Object.entries(r))t.setOverride(h,k)},[t]),T=r=>{i(r),w(W(r,y))},C=r=>{f(r),w(W(c,r))},M=d==="all"?F:F.filter(r=>r.category===d);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs(O,{label:"Font Family",children:[e.jsx("div",{style:{marginBottom:8},children:e.jsx(n.SegmentedControl,{value:d,onChange:r=>m(r),options:[{value:"all",label:"All"},{value:"sans",label:"Sans"},{value:"serif",label:"Serif"},{value:"mono",label:"Mono"},{value:"display",label:"Display"}],size:"sm",fullWidth:!0})}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:2},children:M.map(r=>{const h=b.includes(r.label)||r.family===b;return e.jsxs(n.Button,{variant:h?"secondary":"ghost",onClick:()=>{P(r.family),t.setOverride("fontFamilyBase",r.family)},style:{width:"100%",justifyContent:"space-between",height:"auto",padding:"8px 10px"},children:[e.jsx("span",{style:{fontFamily:r.family,fontSize:14},children:r.label}),e.jsx(n.Text,{as:"span",size:"xs",color:"secondary",style:{textTransform:"capitalize"},children:r.category})]},r.label)})}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Custom"}),e.jsx(n.Input,{size:"sm",value:b,onChange:r=>t.setOverride("fontFamilyBase",r.target.value),style:{width:"100%",fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1})]})]}),e.jsx(O,{label:"Code & Display Fonts",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{children:[e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Monospace"}),e.jsx(n.Select,{size:"sm",value:v,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyMono",r.target.value)},options:[...F.filter(r=>r.category==="mono").map(r=>({value:r.family,label:r.label})),...F.some(r=>r.family===v)?[]:[{value:v,label:"Custom"}]]})]}),e.jsxs("div",{children:[e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Display"}),e.jsx(n.Select,{size:"sm",value:z,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyDisplay",r.target.value)},options:[...F.filter(r=>r.category==="display"||r.category==="sans").map(r=>({value:r.family,label:r.label})),...F.some(r=>r.family===z)?[]:[{value:z,label:"Custom"}]]})]})]})}),e.jsx(O,{label:"Type Scale",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsxs("div",{children:[e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Base Size"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(n.Slider,{min:.75,max:1.5,step:.0625,value:c,onChange:r=>T(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsxs(n.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:[c,"rem"]})]})]}),e.jsxs("div",{children:[e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Scale Ratio"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(n.Slider,{min:1,max:1.618,step:.001,value:y,onChange:r=>C(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsx(n.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:y.toFixed(3)})]}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginTop:6},children:xe.map(r=>e.jsx(n.Button,{variant:Math.abs(y-r.ratio)<.005?"secondary":"ghost",size:"2xs",onClick:()=>C(r.ratio),children:r.label},r.label))})]})]})}),e.jsx(O,{label:"Text Colors",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:Ie.map(({key:r,label:h})=>{const k=t.overrides[r]??t.tokens[r];return e.jsx(n.ColorPicker,{label:h,value:k,onChange:E=>t.setOverride(r,E),size:"sm",inline:!0},r)})})}),e.jsx(O,{label:"Preview",children:e.jsx(Ae,{family:b,baseSize:c,ratio:y,textPrimary:t.overrides.textPrimary??t.tokens.textPrimary,textSecondary:t.overrides.textSecondary??t.tokens.textSecondary,bgBase:t.overrides.bgBase??t.tokens.bgBase})})]})}const Ie=[{key:"textPrimary",label:"Primary"},{key:"textSecondary",label:"Secondary"},{key:"textDisabled",label:"Disabled"},{key:"textInverse",label:"Inverse"}];function O({label:t,children:s}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(n.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),s]})}function Ae({family:t,baseSize:s,ratio:o,textPrimary:l,textSecondary:c,bgBase:i}){const y=s*Math.pow(o,4),f=s*Math.pow(o,2),d=s,m=s*Math.pow(o,-1);return e.jsxs("div",{style:{background:i,borderRadius:6,padding:"14px 12px",fontFamily:t,border:"1px solid var(--lucent-border-default)"},children:[e.jsx("div",{style:{fontSize:`${y}rem`,fontWeight:700,color:l,lineHeight:1.2,marginBottom:6},children:"Heading"}),e.jsx("div",{style:{fontSize:`${f}rem`,fontWeight:600,color:l,lineHeight:1.3,marginBottom:8},children:"Subheading text"}),e.jsx("div",{style:{fontSize:`${d}rem`,color:l,lineHeight:1.5,marginBottom:6},children:"Body text looks like this. It should be comfortable to read at any size with good line height and spacing."}),e.jsx("div",{style:{fontSize:`${m}rem`,color:c,lineHeight:1.5},children:"Secondary caption — smaller, muted for supplemental information."})]})}const S={bg:"#0a0a0a",surface:"#141414",text:"#f0ead6",textMuted:"#8a8473",accent:"#e9c96b",border:"rgba(233, 201, 107, 0.1)",inputBg:"rgba(255, 255, 255, 0.05)"},Ge=g.createContext(null);function $e({children:t}){const[s,o]=g.useState(null),l=g.useCallback(i=>{i&&o(i)},[]),c=g.useMemo(()=>{const i={};for(const[y,f]of Object.entries(n.darkTokens))i[n.tokenToCssVar(y)]=f;return i[n.tokenToCssVar("navigation")]=S.bg,i[n.tokenToCssVar("bgBase")]=S.bg,i[n.tokenToCssVar("surface")]=S.surface,i[n.tokenToCssVar("surfaceSecondary")]=S.inputBg,i[n.tokenToCssVar("borderDefault")]=S.border,i[n.tokenToCssVar("borderSubtle")]=S.border,i[n.tokenToCssVar("textPrimary")]=S.text,i[n.tokenToCssVar("textSecondary")]=S.textMuted,i[n.tokenToCssVar("accentDefault")]=S.accent,i[n.tokenToCssVar("accentFg")]="#0a0a0a",i[n.tokenToCssVar("accentSubtle")]="rgba(233, 201, 107, 0.12)",i[n.tokenToCssVar("accentHover")]="#d4b55a",i[n.tokenToCssVar("accentBorder")]=S.accent,i},[]);return e.jsx("div",{ref:l,style:c,children:e.jsx(Ge.Provider,{value:s,children:t})})}function _e({state:t,theme:s,position:o,mode:l,onModeChange:c,onThemeChange:i,onClose:y}){const[f,d]=g.useState("design"),[m,b]=g.useState(""),[v,z]=g.useState(()=>{const h={};for(const k of H)h[k.label]=k.defaultExpanded??!1;return h}),[w,T]=g.useState(!1),C=h=>{z(k=>({...k,[h]:!k[h]}))},M=async()=>{const h=le(t.overrides);await ie(h)&&(T(!0),setTimeout(()=>T(!1),2e3))},r=m.toLowerCase();return e.jsx($e,{children:e.jsxs("div",{style:{...Ve,[o]:0,borderLeft:o==="right"?`1px solid ${S.border}`:void 0,borderRight:o==="left"?`1px solid ${S.border}`:void 0},children:[e.jsxs("div",{style:We,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]}),e.jsx(n.Text,{size:"sm",weight:"semibold",children:"Lucent DevTools"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[i&&e.jsx(n.Toggle,{checked:s==="dark",onChange:()=>i(s==="light"?"dark":"light"),size:"sm"}),e.jsx(n.Button,{variant:"ghost",size:"2xs",onClick:()=>c(l==="overlay"?"push":"overlay"),"aria-label":l==="overlay"?"Push content":"Overlay",title:l==="overlay"?"Push content":"Overlay",children:l==="overlay"?e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor",opacity:"0.5"})]}):e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor"})]})}),e.jsx(n.Button,{variant:"ghost",size:"2xs",onClick:y,"aria-label":"Close",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2 2l10 10M12 2L2 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]}),e.jsx("div",{style:{flexShrink:0},children:e.jsx(n.Tabs,{value:f,onChange:h=>d(h),tabs:[{value:"design",label:"Design"},{value:"type",label:"Typography"},{value:"tokens",label:"Tokens"}]})}),f==="tokens"&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"8px 12px"},children:e.jsx("input",{type:"text",placeholder:"Filter tokens...",value:m,onChange:h=>b(h.target.value),style:Ue,spellCheck:!1})}),e.jsx("div",{style:V,children:H.map(h=>e.jsx(Ne,{group:h,state:t,filter:r,expanded:v[h.label]??!1,onToggle:()=>C(h.label)},h.label))})]}),f==="design"&&e.jsx("div",{style:V,children:e.jsx(Pe,{state:t,theme:s})}),f==="type"&&e.jsx("div",{style:V,children:e.jsx(Ee,{state:t,theme:s})}),e.jsxs("div",{style:Je,children:[e.jsxs("div",{style:{display:"flex",gap:6,flex:1},children:[e.jsx(n.Button,{size:"xs",onClick:M,children:w?"Copied!":"Copy Config"}),t.overrideCount>0&&e.jsx(n.Button,{variant:"outline",size:"xs",onClick:t.resetAll,children:"Reset All"})]}),t.overrideCount>0&&e.jsxs(n.Badge,{variant:"accent",size:"sm",children:[t.overrideCount," override",t.overrideCount!==1?"s":""]})]})]})})}function Ne({group:t,state:s,filter:o,expanded:l,onToggle:c}){const i=t.subgroups?t.subgroups.flatMap(d=>d.tokens):t.tokens??[];if(!(o===""||i.some(d=>d.key.toLowerCase().includes(o))))return null;const f=l||o!=="";return e.jsxs("div",{style:{borderBottom:`1px solid ${S.border}`},children:[e.jsxs("button",{onClick:c,style:Ke,children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",style:{transform:f?"rotate(90deg)":"none",transition:"transform 150ms"},children:e.jsx("path",{d:"M3 1l4 4-4 4",stroke:S.textMuted,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),e.jsx(n.Text,{size:"xs",weight:"semibold",children:t.label}),e.jsx(n.Text,{size:"xs",color:"secondary",style:{marginLeft:"auto"},children:i.length})]}),f&&e.jsx("div",{style:{padding:"0 12px 8px"},children:t.subgroups?t.subgroups.map(d=>{const m=o?d.tokens.filter(b=>b.key.toLowerCase().includes(o)):d.tokens;return m.length===0?null:e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("div",{style:qe,children:d.label}),m.map(b=>e.jsx(te,{meta:b,state:s},b.key))]},d.label)}):(t.tokens??[]).filter(d=>!o||d.key.toLowerCase().includes(o)).map(d=>e.jsx(te,{meta:d,state:s},d.key))})]})}function te({meta:t,state:s}){const o=s.overrides[t.key]??s.tokens[t.key],l=t.key in s.overrides,c=y=>s.setOverride(t.key,y),i=()=>s.removeOverride(t.key);switch(t.controlType){case"color":return e.jsx(ce,{label:t.key,value:o,isOverridden:l,onChange:c,onReset:i});case"slider":return e.jsx(fe,{label:t.key,value:o,isOverridden:l,min:t.sliderConfig.min,max:t.sliderConfig.max,step:t.sliderConfig.step,unit:t.sliderConfig.unit,onChange:c,onReset:i});case"text":return e.jsx(ye,{label:t.key,value:o,isOverridden:l,onChange:c,onReset:i})}}const Ve={position:"fixed",top:0,bottom:0,width:320,background:"var(--lucent-bg-base)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-sm)",display:"flex",flexDirection:"column",zIndex:99999,boxShadow:"-4px 0 24px rgba(0, 0, 0, 0.3)"},We={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",flexShrink:0},Ue={width:"100%",background:"var(--lucent-surface-secondary)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)",borderRadius:"var(--lucent-radius-md)",padding:"6px 10px",fontSize:"var(--lucent-font-size-xs)",outline:"none",fontFamily:"inherit",boxSizing:"border-box"},V={flex:1,overflowY:"auto",minHeight:0},Ke={display:"flex",alignItems:"center",gap:8,width:"100%",padding:"10px 12px",background:"none",border:"none",cursor:"pointer",color:"inherit",fontFamily:"inherit",textAlign:"left"},qe={fontSize:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--lucent-text-secondary)",marginBottom:4,marginTop:4},Je={display:"flex",alignItems:"center",gap:8,padding:"10px 12px",borderTop:"1px solid var(--lucent-border-default)",flexShrink:0};function He(t){const s=t.toLowerCase().split("+");return{ctrl:s.includes("ctrl"),meta:s.includes("meta")||s.includes("cmd"),shift:s.includes("shift"),alt:s.includes("alt"),key:s[s.length-1]??""}}function Xe(t,s){const o=navigator.platform.toUpperCase().includes("MAC");return(s.meta||s.ctrl?o?t.metaKey:t.ctrlKey:!t.ctrlKey&&!t.metaKey)&&s.shift===t.shiftKey&&s.alt===t.altKey&&t.key.toLowerCase()===s.key}function Ye({shortcut:t="meta+shift+d",position:s="right",defaultOpen:o=!1,onThemeChange:l,zIndex:c=99999}){const[i,y]=g.useState(o),[f,d]=g.useState("overlay"),{theme:m}=n.useLucent(),b=re(),v=g.useCallback(()=>y(w=>!w),[]);return g.useEffect(()=>{if(!i||f!=="push"){document.body.style.removeProperty(`margin-${s}`),document.body.style.removeProperty("transition");return}return document.body.style.transition="margin 200ms ease",document.body.style[s==="right"?"marginRight":"marginLeft"]="320px",()=>{document.body.style.removeProperty(`margin-${s}`),document.body.style.removeProperty("transition")}},[i,f,s]),g.useEffect(()=>{const w=He(t),T=C=>{Xe(C,w)&&(C.preventDefault(),v())};return document.addEventListener("keydown",T),()=>document.removeEventListener("keydown",T)},[t,v]),ae.createPortal(e.jsxs(e.Fragment,{children:[!i&&e.jsx("button",{onClick:v,style:{...Ze,[s]:16,zIndex:c},title:"Open Lucent DevTools",children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]})}),i&&e.jsx("div",{style:{zIndex:c},children:e.jsx(_e,{state:b,theme:m,position:s,mode:f,onModeChange:d,...l!==void 0&&{onThemeChange:l},onClose:v})})]}),document.body)}const Ze={position:"fixed",bottom:16,width:40,height:40,borderRadius:"50%",background:S.bg,border:`1px solid ${S.border}`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.4)",transition:"transform 150ms ease, box-shadow 150ms ease"};exports.LucentDevTools=Ye;
|