lucent-ui 0.41.0 → 0.42.0

package/dist/devtools.cjs

@@ -1,4 +1,4 @@
-"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-DluNb5H9.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>
+"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-CIiTlQ5E.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>
   {children}
 </LucentProvider>`:`<LucentProvider tokens={{
 ${Object.entries(t).map(([o,l])=>`    ${o}: '${l}'`).join(`,

package/dist/devtools.js

@@ -1,7 +1,7 @@
 import { jsxs as c, jsx as t, Fragment as fe } from "react/jsx-runtime";
 import { useState as z, useRef as ue, useCallback as L, useEffect as W, useMemo as be, createContext as ve } from "react";
 import { createPortal as xe } from "react-dom";
-import { _ as ye, $ as S, T as y, C as P, B as F, e as j, I as ge, a0 as Se, a1 as ke, z as we, K as Ce, M as ze, m as Be, F as Fe, u as Te, Y as Me, x as Re, a as M, g as De, a2 as Oe, S as Le, d as ae, p as Pe, h as Ee, f as Ie, b as Ae } from "./LucentProvider-lGSitrJV.js";
+import { $ as ye, a0 as S, T as y, C as P, B as F, e as _, I as ge, a1 as Se, a2 as ke, A as we, M as Ce, N as ze, m as Be, G as Fe, v as Te, Z as Me, y as Re, a as M, g as De, a3 as Oe, S as Le, d as ae, p as Pe, h as Ee, f as Ie, b as Ae } from "./LucentProvider-tSCR4lQw.js";
 function Ge() {
   const { tokens: e } = ye(), [n, a] = z({}), l = ue(n);
   l.current = n;
@@ -174,14 +174,14 @@ ${Object.entries(e).map(([a, l]) => `    ${a}: '${l}'`).join(`,
   {children}
 </LucentProvider>`;
 }
-async function _e(e) {
+async function je(e) {
   try {
     return await navigator.clipboard.writeText(e), !0;
   } catch {
     return !1;
   }
 }
-function je({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
+function _e({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
   return /* @__PURE__ */ c("div", { style: Ne, children: [
     /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
@@ -216,11 +216,11 @@ function We({
   onReset: d
 }) {
   const b = parseFloat(n) || 0;
-  return /* @__PURE__ */ c("div", { style: Ke, children: [
+  return /* @__PURE__ */ c("div", { style: Ue, children: [
     /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       /* @__PURE__ */ t(
-        j,
+        _,
         {
           min: l,
           max: s,
@@ -236,14 +236,14 @@ function We({
     ] })
   ] });
 }
-const Ke = {
+const Ue = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-function Ue({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
+function Ke({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
   return /* @__PURE__ */ c("div", { style: Je, children: [
     /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
@@ -596,8 +596,8 @@ function yt({ state: e, theme: n }) {
       fontFamilyBase: o.fontFamily
     };
     N(o.fontFamily), requestAnimationFrame(() => {
-      for (const [G, U] of Object.entries(A))
-        e.setOverride(G, U);
+      for (const [G, K] of Object.entries(A))
+        e.setOverride(G, K);
     });
   }, [e, n]), B = ue(n);
   W(() => {
@@ -612,8 +612,8 @@ function yt({ state: e, theme: n }) {
       ...q(C.border, n),
       ...V(g, n)
     };
-    for (const [G, U] of Object.entries(A))
-      e.setOverride(G, U);
+    for (const [G, K] of Object.entries(A))
+      e.setOverride(G, K);
   }, [n, d, g, e]);
   const R = (o) => {
     O(), l(o), x(re(o));
@@ -627,7 +627,7 @@ function yt({ state: e, theme: n }) {
     O(), e.setOverride("navigation", o);
   }, w = (o) => {
     O(), /^#[0-9a-f]{6}$/i.test(o) ? x(H(o, n)) : e.setOverride("bgBase", o);
-  }, K = (o) => {
+  }, U = (o) => {
     O(), /^#[0-9a-f]{6}$/i.test(o) ? x(X(o, n)) : e.setOverride("surface", o);
   }, he = (o) => {
     O(), /^#[0-9a-f]{6}$/i.test(o) ? x(q(o, n)) : e.setOverride("borderDefault", o);
@@ -680,7 +680,7 @@ function yt({ state: e, theme: n }) {
         /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: ee })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ t(P, { value: te, onChange: K, size: "sm", presetGroups: ft }),
+        /* @__PURE__ */ t(P, { value: te, onChange: U, size: "sm", presetGroups: ft }),
         /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Surface" }),
         /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: te })
       ] }),
@@ -693,7 +693,7 @@ function yt({ state: e, theme: n }) {
     /* @__PURE__ */ c($, { label: "Density", children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ t(y, { size: "xs", family: "mono", color: "secondary", style: { width: 54, flexShrink: 0 }, children: "Compact" }),
-        /* @__PURE__ */ t(j, { min: 0.7, max: 1.35, step: 0.01, value: a, onChange: (o) => R(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(_, { min: 0.7, max: 1.35, step: 0.01, value: a, onChange: (o) => R(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
         /* @__PURE__ */ t(y, { size: "xs", family: "mono", color: "secondary", style: { width: 54, textAlign: "right", flexShrink: 0 }, children: "Spacious" })
       ] }),
       /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ c(y, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: [
@@ -706,7 +706,7 @@ function yt({ state: e, theme: n }) {
     /* @__PURE__ */ c($, { label: "Roundness", children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ t(y, { size: "xs", family: "mono", color: "secondary", style: { width: 36, flexShrink: 0 }, children: "Sharp" }),
-        /* @__PURE__ */ t(j, { min: 0, max: 1, step: 0.01, value: s, onChange: (o) => T(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(_, { min: 0, max: 1, step: 0.01, value: s, onChange: (o) => T(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
         /* @__PURE__ */ t(y, { size: "xs", family: "mono", color: "secondary", style: { width: 24, textAlign: "right", flexShrink: 0 }, children: "Pill" })
       ] }),
       /* @__PURE__ */ t("div", { style: { display: "flex", gap: 8, marginTop: 8, justifyContent: "center" }, children: [0, 0.25, 0.5, 0.75, 1].map((o) => /* @__PURE__ */ t("div", { style: {
@@ -782,7 +782,7 @@ function gt({ state: e, theme: n }) {
     f(r), B(Z(s, r));
   }, I = d === "all" ? E : E.filter((r) => r.category === d);
   return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
-    /* @__PURE__ */ c(_, { label: "Font Family", children: [
+    /* @__PURE__ */ c(j, { label: "Font Family", children: [
       /* @__PURE__ */ t("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ t(
         Le,
         {
@@ -836,7 +836,7 @@ function gt({ state: e, theme: n }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(_, { label: "Code & Display Fonts", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ t(j, { label: "Code & Display Fonts", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Monospace" }),
         /* @__PURE__ */ t(
@@ -872,11 +872,11 @@ function gt({ state: e, theme: n }) {
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ t(_, { label: "Type Scale", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ t(j, { label: "Type Scale", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Base Size" }),
         /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ t(j, { min: 0.75, max: 1.5, step: 0.0625, value: s, onChange: (r) => R(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ t(_, { min: 0.75, max: 1.5, step: 0.0625, value: s, onChange: (r) => R(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
           /* @__PURE__ */ c(y, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: [
             s,
             "rem"
@@ -886,7 +886,7 @@ function gt({ state: e, theme: n }) {
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Scale Ratio" }),
         /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ t(j, { min: 1, max: 1.618, step: 1e-3, value: g, onChange: (r) => T(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ t(_, { min: 1, max: 1.618, step: 1e-3, value: g, onChange: (r) => T(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
           /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: g.toFixed(3) })
         ] }),
         /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6 }, children: qe.map((r) => /* @__PURE__ */ t(
@@ -901,21 +901,21 @@ function gt({ state: e, theme: n }) {
         )) })
       ] })
     ] }) }),
-    /* @__PURE__ */ t(_, { label: "Text Colors", children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: ht.map(({ key: r, label: h }) => {
+    /* @__PURE__ */ t(j, { label: "Text Colors", children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: ht.map(({ key: r, label: h }) => {
       const w = e.overrides[r] ?? e.tokens[r];
       return /* @__PURE__ */ t(
         P,
         {
           label: h,
           value: w,
-          onChange: (K) => e.setOverride(r, K),
+          onChange: (U) => e.setOverride(r, U),
           size: "sm",
           inline: !0
         },
         r
       );
     }) }) }),
-    /* @__PURE__ */ t(_, { label: "Preview", children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(j, { label: "Preview", children: /* @__PURE__ */ t(
       pt,
       {
         family: v,
@@ -934,7 +934,7 @@ const ht = [
   { key: "textDisabled", label: "Disabled" },
   { key: "textInverse", label: "Inverse" }
 ];
-function _({ label: e, children: n }) {
+function j({ label: e, children: n }) {
   return /* @__PURE__ */ c("div", { style: {
     background: "var(--lucent-surface)",
     borderRadius: "var(--lucent-radius-lg)",
@@ -1011,7 +1011,7 @@ function vt({ state: e, theme: n, position: a, mode: l, onModeChange: s, onTheme
     D((w) => ({ ...w, [h]: !w[h] }));
   }, I = async () => {
     const h = $e(e.overrides);
-    await _e(h) && (R(!0), setTimeout(() => R(!1), 2e3));
+    await je(h) && (R(!0), setTimeout(() => R(!1), 2e3));
   }, r = b.toLowerCase();
   return /* @__PURE__ */ t(bt, { children: /* @__PURE__ */ c("div", { style: {
     ...St,
@@ -1141,7 +1141,7 @@ function de({ meta: e, state: n }) {
   switch (e.controlType) {
     case "color":
       return /* @__PURE__ */ t(
-        je,
+        _e,
         {
           label: e.key,
           value: a,
@@ -1167,7 +1167,7 @@ function de({ meta: e, state: n }) {
       );
     case "text":
       return /* @__PURE__ */ t(
-        Ue,
+        Ke,
         {
           label: e.key,
           value: a,