@tcn/ui 0.2.0 → 0.3.1

package/dist/actions/button/select_group/select_group.js

@@ -1,42 +1,42 @@
 import { jsx as i } from "react/jsx-runtime";
-import { HStack as v } from "../../../stacks/h_stack.js";
+import { HStack as _ } from "../../../stacks/h_stack.js";
 import { clsx as l } from "clsx";
 import n from "react";
-import { Button as x } from "../button/button.js";
-import '../../../select_group.css';const y = "_select-group_c24986f", _ = "_select-group-option_28f4dfd", b = "_select-group-divider_b5b865b", a = { "select-group": y, "select-group-option": _, "select-group-divider": b }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: s = !1, ...f }, m) {
+import { Button as v } from "../button/button.js";
+import '../../../select_group.css';const x = "_select-group_c24986f", y = "_select-group-option_28f4dfd", b = "_select-group-divider_b5b865b", a = { "select-group": x, "select-group-option": y, "select-group-divider": b }, C = n.forwardRef(function({ children: o, value: c, className: u, onChange: d, disabled: t = !1, ...f }, m) {
   const g = Array.isArray(o) ? o : [o], h = (e, p) => {
-    if (s) return;
+    if (t) return;
     const r = [...c];
     if (p) {
-      const t = c.indexOf(e);
-      t > -1 && r.splice(t, 1);
+      const s = c.indexOf(e);
+      s > -1 && r.splice(s, 1);
     } else
       r.push(e);
     d?.(r);
   };
   return /* @__PURE__ */ i(
-    v,
+    _,
     {
       ref: m,
       as: "div",
       inline: !0,
       width: "auto",
       height: "auto",
-      "data-is-disabled": s,
+      "data-is-disabled": t,
       className: l(a["select-group"], "select-group", u),
       ...f,
       children: g.map((e, p) => {
-        const r = c.includes(e.props.value), t = () => {
+        const r = c.includes(e.props.value), s = () => {
           h(e.props.value, r);
         };
         return /* @__PURE__ */ i(n.Fragment, { children: /* @__PURE__ */ i(
-          x,
+          v,
           {
-            disabled: s || e.props.disabled,
-            "data-is-disabled": s || e.props.disabled,
+            disabled: t || e.props.disabled,
+            "data-is-disabled": t || e.props.disabled,
             className: l(a["select-group-option"], "select-group-option"),
             hierarchy: r ? "primary" : "secondary",
-            onClick: t,
+            onClick: s,
             value: e.props.value,
             children: e.props.children
           }

package/dist/actions/button/select_group/single_select_group.js

@@ -1,14 +1,14 @@
 import { jsx as p } from "react/jsx-runtime";
 import h from "react";
 import { SelectGroup as m } from "./select_group.js";
-const G = h.forwardRef(function({
+const s = h.forwardRef(function({
   children: t,
   value: n,
   className: o,
   onChange: r,
   disabled: l = !1,
-  ...c
-}, f) {
+  ...f
+}, c) {
   const g = (e) => {
     if (e.length === 0)
       return;
@@ -18,17 +18,17 @@ const G = h.forwardRef(function({
   return /* @__PURE__ */ p(
     m,
     {
-      ref: f,
+      ref: c,
       value: n != null ? [n] : [],
       onChange: g,
       disabled: l,
       className: o,
-      ...c,
+      ...f,
       children: t
     }
   );
 });
 export {
-  G as SingleSelectGroup
+  s as SingleSelectGroup
 };
 //# sourceMappingURL=single_select_group.js.map

package/dist/actions/button/slim_button/slim_button.js

@@ -2,12 +2,12 @@ import { jsx as r } from "react/jsx-runtime";
 import n from "react";
 import { Button as i } from "../button/button.js";
 import { clsx as l } from "clsx";
-import '../../../slim_button.css';const c = "_slim-button_188fdc3", u = { "slim-button": c }, b = n.forwardRef(
+import '../../../slim_button.css';const u = "_slim-button_188fdc3", c = { "slim-button": u }, b = n.forwardRef(
   ({ children: t, className: o, ...m }, s) => /* @__PURE__ */ r(
     i,
     {
       ref: s,
-      className: l(u["slim-button"], "tcn-slim-button", o),
+      className: l(c["slim-button"], "tcn-slim-button", o),
       ...m,
       children: t
     }

package/dist/actions/types.d.ts

@@ -0,0 +1,2 @@
+export type ActionSeverity = 'dangerous' | 'cautious' | 'neutral' | 'suggested' | 'encouraged';
+//# sourceMappingURL=types.d.ts.map

package/dist/actions/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/actions/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GACtB,WAAW,GACX,UAAU,GACV,SAAS,GACT,WAAW,GACX,YAAY,CAAC"}

package/dist/actions/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/actions/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/divider.module-FptFV0PX.js

@@ -0,0 +1,5 @@
+import './divider.css';const i = "_divider_af0a0c6", e = "_divider-line_cae0189", d = { divider: i, "divider-line": e };
+export {
+  d as s
+};
+//# sourceMappingURL=divider.module-FptFV0PX.js.map

package/dist/divider.module-FptFV0PX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.module-FptFV0PX.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/feedback/loading/loading.js

@@ -1,34 +1,34 @@
 import { jsx as c } from "react/jsx-runtime";
 import M from "react";
-import '../../loading.css';const p = "_loading-line_e364229", y = "_linePulse_bde300c", f = { "loading-line": p, linePulse: y }, I = M.forwardRef(
+import '../../loading.css';const f = "_loading-line_e364229", p = "_linePulse_bde300c", u = { "loading-line": f, linePulse: p }, I = M.forwardRef(
   ({
-    size: e = "1em",
+    size: s = "1em",
     color: l = "var(--accent-color)",
-    lineCount: a = 12,
+    lineCount: n = 12,
     animationDuration: t = 1200,
     className: r,
     style: h
-  }, v) => {
-    const d = Array.from({ length: a }), g = 360 / a;
+  }, d) => {
+    const v = Array.from({ length: n }), g = 360 / n;
     return /* @__PURE__ */ c(
       "svg",
       {
-        ref: v,
+        ref: d,
         width: 50,
         height: 50,
         viewBox: "0 0 50 50",
         className: r,
         xmlns: "http://www.w3.org/2000/svg",
-        style: { height: e, width: e, ...h },
+        style: { height: s, width: s, ...h },
         fill: "none",
-        children: d.map((x, s) => {
-          const n = g * s, i = 50 / 4.5, o = 50 / 2.25, m = 50 / 2 + i * Math.cos(n * Math.PI / 180), S = 50 / 2 + i * Math.sin(n * Math.PI / 180), z = 50 / 2 + o * Math.cos(n * Math.PI / 180), w = 50 / 2 + o * Math.sin(n * Math.PI / 180);
+        children: v.map((_, e) => {
+          const a = g * e, i = 50 / 4.5, o = 50 / 2.25, m = 50 / 2 + i * Math.cos(a * Math.PI / 180), S = 50 / 2 + i * Math.sin(a * Math.PI / 180), z = 50 / 2 + o * Math.cos(a * Math.PI / 180), w = 50 / 2 + o * Math.sin(a * Math.PI / 180);
           return /* @__PURE__ */ c(
             "line",
             {
-              className: f["loading-line"],
+              className: u["loading-line"],
               style: {
-                animationDelay: `${s * t / a}ms`,
+                animationDelay: `${e * t / n}ms`,
                 animationDuration: `${t}ms`
               },
               x1: m,
@@ -39,7 +39,7 @@ import '../../loading.css';const p = "_loading-line_e364229", y = "_linePulse_bd
               strokeWidth: 3,
               strokeLinecap: "round"
             },
-            s
+            e
           );
         })
       }

package/dist/feedback/loading/loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading.js","sources":["../../../src/feedback/loading/loading.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './loading.module.css';\n\nexport interface LoadingProps {\n  size?: string;\n  color?: string;\n  lineCount?: number;\n  animationDuration?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const Loading = React.forwardRef(\n  (\n    {\n      size = '1em',\n      color = 'var(--accent-color)',\n      lineCount = 12,\n      animationDuration = 1200,\n      className,\n      style,\n    }: LoadingProps,\n    ref: React.Ref<SVGSVGElement>\n  ) => {\n    const canvasSize = 50;\n    const lines = Array.from({ length: lineCount });\n    const angleStep = 360 / lineCount;\n\n    return (\n      <svg\n        ref={ref}\n        width={canvasSize}\n        height={canvasSize}\n        viewBox={`0 0 ${canvasSize} ${canvasSize}`}\n        className={className}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ height: size, width: size, ...style }}\n        fill=\"none\"\n      >\n        {lines.map((_, i) => {\n          const angle = angleStep * i;\n          const innerRadius = canvasSize / 4.5;\n          const outerRadius = canvasSize / 2.25;\n\n          const x1 = canvasSize / 2 + innerRadius * Math.cos((angle * Math.PI) / 180);\n          const y1 = canvasSize / 2 + innerRadius * Math.sin((angle * Math.PI) / 180);\n          const x2 = canvasSize / 2 + outerRadius * Math.cos((angle * Math.PI) / 180);\n          const y2 = canvasSize / 2 + outerRadius * Math.sin((angle * Math.PI) / 180);\n\n          return (\n            <line\n              className={styles['loading-line']}\n              style={{\n                animationDelay: `${(i * animationDuration) / lineCount}ms`,\n                animationDuration: `${animationDuration}ms`,\n              }}\n              key={i}\n              x1={x1}\n              y1={y1}\n              x2={x2}\n              y2={y2}\n              stroke={color}\n              strokeWidth={3}\n              strokeLinecap=\"round\"\n            />\n          );\n        })}\n      </svg>\n    );\n  }\n);\n"],"names":["Loading","React","size","color","lineCount","animationDuration","className","style","ref","lines","angleStep","jsx","_","i","angle","innerRadius","outerRadius","x1","y1","x2","y2","styles"],"mappings":";;sGAYaA,IAAUC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,WAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEFC,MACG;AAEH,UAAMC,IAAQ,MAAM,KAAK,EAAE,QAAQL,GAAW,GACxCM,IAAY,MAAMN;AAExB,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAO,EAAE,QAAQJ,GAAM,OAAOA,GAAM,GAAGK,EAAA;AAAA,QACvC,MAAK;AAAA,QAEJ,UAAAE,EAAM,IAAI,CAACG,GAAGC,MAAM;AACnB,gBAAMC,IAAQJ,IAAYG,GACpBE,IAAc,KAAa,KAC3BC,IAAc,KAAa,MAE3BC,IAAK,KAAa,IAAIF,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEI,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEK,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG,GACpEM,IAAK,KAAa,IAAIJ,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG;AAE1E,iBACE,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWU,EAAO,cAAc;AAAA,cAChC,OAAO;AAAA,gBACL,gBAAgB,GAAIR,IAAIR,IAAqBD,CAAS;AAAA,gBACtD,mBAAmB,GAAGC,CAAiB;AAAA,cAAA;AAAA,cAGzC,IAAAY;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,QAAQjB;AAAA,cACR,aAAa;AAAA,cACb,eAAc;AAAA,YAAA;AAAA,YAPTU;AAAA,UAAA;AAAA,QAUX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"loading.js","sources":["../../../src/feedback/loading/loading.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './loading.module.css';\n\nexport interface LoadingProps {\n  size?: string;\n  color?: string;\n  lineCount?: number;\n  animationDuration?: number;\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport const Loading = React.forwardRef(\n  (\n    {\n      size = '1em',\n      color = 'var(--accent-color)',\n      lineCount = 12,\n      animationDuration = 1200,\n      className,\n      style,\n    }: LoadingProps,\n    ref: React.Ref<SVGSVGElement>\n  ) => {\n    const canvasSize = 50;\n    const lines = Array.from({ length: lineCount });\n    const angleStep = 360 / lineCount;\n\n    return (\n      <svg\n        ref={ref}\n        width={canvasSize}\n        height={canvasSize}\n        viewBox={`0 0 ${canvasSize} ${canvasSize}`}\n        className={className}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ height: size, width: size, ...style }}\n        fill=\"none\"\n      >\n        {lines.map((_, i) => {\n          const angle = angleStep * i;\n          const innerRadius = canvasSize / 4.5;\n          const outerRadius = canvasSize / 2.25;\n\n          const x1 = canvasSize / 2 + innerRadius * Math.cos((angle * Math.PI) / 180);\n          const y1 = canvasSize / 2 + innerRadius * Math.sin((angle * Math.PI) / 180);\n          const x2 = canvasSize / 2 + outerRadius * Math.cos((angle * Math.PI) / 180);\n          const y2 = canvasSize / 2 + outerRadius * Math.sin((angle * Math.PI) / 180);\n\n          return (\n            <line\n              className={styles['loading-line']}\n              style={{\n                animationDelay: `${(i * animationDuration) / lineCount}ms`,\n                animationDuration: `${animationDuration}ms`,\n              }}\n              key={i}\n              x1={x1}\n              y1={y1}\n              x2={x2}\n              y2={y2}\n              stroke={color}\n              strokeWidth={3}\n              strokeLinecap=\"round\"\n            />\n          );\n        })}\n      </svg>\n    );\n  }\n);\n"],"names":["Loading","React","size","color","lineCount","animationDuration","className","style","ref","lines","angleStep","jsx","i","angle","innerRadius","outerRadius","x1","y1","x2","y2","styles"],"mappings":";;sGAYaA,IAAUC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,mBAAAC,IAAoB;AAAA,IACpB,WAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,GAEFC,MACG;AAEH,UAAMC,IAAQ,MAAM,KAAK,EAAE,QAAQL,GAAW,GACxCM,IAAY,MAAMN;AAExB,WACE,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,WAAAF;AAAA,QACA,OAAM;AAAA,QACN,OAAO,EAAE,QAAQJ,GAAM,OAAOA,GAAM,GAAGK,EAAA;AAAA,QACvC,MAAK;AAAA,QAEJ,UAAAE,EAAM,IAAI,CAAC,GAAGG,MAAM;AACnB,gBAAMC,IAAQH,IAAYE,GACpBE,IAAc,KAAa,KAC3BC,IAAc,KAAa,MAE3BC,IAAK,KAAa,IAAIF,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEI,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKD,IAAQ,KAAK,KAAM,GAAG,GACpEK,IAAK,KAAa,IAAIH,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG,GACpEM,IAAK,KAAa,IAAIJ,IAAc,KAAK,IAAKF,IAAQ,KAAK,KAAM,GAAG;AAE1E,iBACE,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWS,EAAO,cAAc;AAAA,cAChC,OAAO;AAAA,gBACL,gBAAgB,GAAIR,IAAIP,IAAqBD,CAAS;AAAA,gBACtD,mBAAmB,GAAGC,CAAiB;AAAA,cAAA;AAAA,cAGzC,IAAAW;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,IAAAC;AAAA,cACA,QAAQhB;AAAA,cACR,aAAa;AAAA,cACb,eAAc;AAAA,YAAA;AAAA,YAPTS;AAAA,UAAA;AAAA,QAUX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/feedback/progress/progress_bar.js

@@ -12,7 +12,7 @@ import { HStack as l } from "../../stacks/h_stack.js";
 import { Spacer as a } from "../../stacks/spacer.js";
 import { VStack as d } from "../../stacks/v_stack.js";
 import { ZStack as b } from "../../stacks/z_stack.js";
-import '../../progress_bar.css';const f = "_progress-bar-container_014b4d9", h = "_progress-bar-background_9176cc0", _ = "_progress-bar_057c33d", k = "_progress-bar-fill_00854f0", x = "_moveStripes_d219e85", s = { "progress-bar-container": f, "progress-bar-background": h, "progress-bar": _, "progress-bar-fill": k, moveStripes: x }, H = m.forwardRef(function({ message: i, value: p, ...c }, n) {
+import '../../progress_bar.css';const f = "_progress-bar-container_014b4d9", h = "_progress-bar-background_9176cc0", _ = "_progress-bar_057c33d", k = "_progress-bar-fill_00854f0", u = "_moveStripes_d219e85", s = { "progress-bar-container": f, "progress-bar-background": h, "progress-bar": _, "progress-bar-fill": k, moveStripes: u }, H = m.forwardRef(function({ message: i, value: p, ...c }, n) {
   const o = `${(p * 100).toFixed(0)}%`, g = { "--progress-percentage": o };
   return /* @__PURE__ */ e(d, { ref: n, className: s["progress-bar-container"], ...c, children: [
     /* @__PURE__ */ e(l, { height: "auto", vAlign: "end", children: [

package/dist/form/field/common/field_control/field_control.js

@@ -1,20 +1,20 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import c from "react";
-import { VStack as f } from "../../../../stacks/v_stack.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import f from "react";
+import { VStack as c } from "../../../../stacks/v_stack.js";
 import { clsx as s } from "clsx";
 import { FieldErrorMessage as m } from "../field_error.js";
-import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_field-control_ca50e63", x = { "field-error": h, "field-control": p }, k = c.forwardRef(function({
+import '../../../../field_control.css';const h = "_field-error_44124ee", p = "_field-control_ca50e63", x = { "field-error": h, "field-control": p }, k = f.forwardRef(function({
   children: o,
   errorMessage: r,
   locked: e = !1,
   loading: l = !1,
   className: t,
   ...i
-}, n) {
-  return /* @__PURE__ */ d(
-    f,
+}, d) {
+  return /* @__PURE__ */ n(
+    c,
     {
-      ref: n,
+      ref: d,
       "data-locked": e,
       "data-loading": l,
       "data-error": !!r,

package/dist/form/field/common/status_input/status_input.js

@@ -8,14 +8,14 @@ import "../../../../feedback/progress/progress_bar.js";
 import "@tcn/state";
 import "../../../../stacks/v_stack.js";
 import { clsx as o } from "clsx";
-import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": x }, h = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), k = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), I = () => /* @__PURE__ */ r(u, { className: o(n["field-error"], "field-error"), size: "lg" }), w = ({ state: e }) => {
+import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_field-status-input_c30d6fb", n = { "field-error": A, "field-status-input": x }, _ = () => /* @__PURE__ */ r(f, { className: "field-lock", size: "lg" }), h = () => /* @__PURE__ */ r(g, { size: "20px", className: "field-loader" }), k = () => /* @__PURE__ */ r(u, { className: o(n["field-error"], "field-error"), size: "lg" }), I = ({ state: e }) => {
   switch (e) {
     case "locked":
-      return /* @__PURE__ */ r(h, {});
+      return /* @__PURE__ */ r(_, {});
     case "loading":
-      return /* @__PURE__ */ r(k, {});
+      return /* @__PURE__ */ r(h, {});
     case "error":
-      return /* @__PURE__ */ r(I, {});
+      return /* @__PURE__ */ r(k, {});
     default:
       return null;
   }
@@ -38,13 +38,13 @@ import '../../../../status_input.css';const A = "_field-error_6d015c9", x = "_fi
       ...l,
       children: [
         a && i,
-        /* @__PURE__ */ r(w, { state: t })
+        /* @__PURE__ */ r(I, { state: t })
       ]
     }
   );
 });
 export {
-  w as AdornmentMap,
+  I as AdornmentMap,
   v as FieldStatusInput
 };
 //# sourceMappingURL=status_input.js.map

package/dist/form/field/field.js

@@ -2,18 +2,18 @@ import { jsx as r, Fragment as a } from "react/jsx-runtime";
 import c, { useState as u } from "react";
 import { HField as F } from "./h_field/h_field.js";
 import { VField as R } from "./v_field/v_field.js";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as l } from "../../utils/hooks/use_fork_ref.js";
 import { useResizeObserver as p } from "../../utils/hooks/use_resize_observer.js";
-const H = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, m) {
-  const [f, n] = u(!0), s = p((d) => {
+const z = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, f) {
+  const [m, n] = u(!0), s = p((d) => {
     n(d >= i);
-  }), o = l(m, s);
-  return /* @__PURE__ */ r(a, { children: f ? /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(R, { ...e, ref: o, ...e, children: t }) });
+  }), o = l(f, s);
+  return /* @__PURE__ */ r(a, { children: m ? /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(R, { ...e, ref: o, ...e, children: t }) });
 });
 export {
-  H as Field
+  z as Field
 };
 //# sourceMappingURL=field.js.map

package/dist/form/field/h_field/h_field.js

@@ -1,13 +1,13 @@
 import { jsxs as F, jsx as r } from "react/jsx-runtime";
 import { HStack as I } from "../../../stacks/h_stack.js";
 import { clsx as H } from "clsx";
-import g, { useState as y } from "react";
-import { FieldHeader as S } from "../common/field_header.js";
-import { FieldControl as $ } from "../common/field_control/field_control.js";
-import { FieldStatusInput as j } from "../common/status_input/status_input.js";
-import '../../../h_field.css';const v = "_h-field_845b93f", w = { "h-field": v };
-let A = 0;
-const B = g.forwardRef(function({
+import _, { useState as g } from "react";
+import { FieldHeader as y } from "../common/field_header.js";
+import { FieldControl as S } from "../common/field_control/field_control.js";
+import { FieldStatusInput as $ } from "../common/status_input/status_input.js";
+import '../../../h_field.css';const j = "_h-field_845b93f", v = { "h-field": j };
+let w = 0;
+const B = _.forwardRef(function({
   label: o,
   description: s,
   errorMessage: d,
@@ -20,7 +20,7 @@ const B = g.forwardRef(function({
   required: m,
   ...h
 }, p) {
-  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
+  const [i] = g(() => c || `h-field-${w++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
   return /* @__PURE__ */ F(
     I,
     {
@@ -31,7 +31,7 @@ const B = g.forwardRef(function({
       "data-locked": t,
       "data-error": a,
       "data-loading": e,
-      className: H("base-field", w["h-field"], "h-field", f),
+      className: H("base-field", v["h-field"], "h-field", f),
       vAlign: "start",
       hAlign: "start",
       height: "auto",
@@ -39,7 +39,7 @@ const B = g.forwardRef(function({
       ...h,
       children: [
         /* @__PURE__ */ r(
-          S,
+          y,
           {
             minWidth: l,
             width: l,
@@ -49,7 +49,7 @@ const B = g.forwardRef(function({
             required: m
           }
         ),
-        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: x, children: n }) })
+        /* @__PURE__ */ r(S, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r($, { state: x, children: n }) })
       ]
     }
   );

package/dist/form/field/v_field/v_field.js

@@ -7,21 +7,21 @@ import { FieldHeader as y } from "../common/field_header.js";
 import { FieldStatusInput as S } from "../common/status_input/status_input.js";
 import '../../../v_field.css';const V = {};
 let $ = 0;
-const z = F.forwardRef(function({
+const q = F.forwardRef(function({
   label: d,
   description: o,
   errorMessage: a,
   children: s,
   locked: t = !1,
-  loading: r = !1,
+  loading: e = !1,
   maxWidth: R,
   minWidth: W,
   className: n,
-  id: c,
-  required: f,
+  id: f,
+  required: c,
   ...m
 }, p) {
-  const [e] = I(() => c || `v-field-${$++}`), l = !!a, h = `${e}-label`, u = `${e}-description`, b = t ? "locked" : r ? "loading" : l ? "error" : "default";
+  const [r] = I(() => f || `v-field-${$++}`), l = !!a, h = `${r}-label`, u = `${r}-description`, b = t ? "locked" : e ? "loading" : l ? "error" : "default";
   return /* @__PURE__ */ x(
     g,
     {
@@ -31,7 +31,7 @@ const z = F.forwardRef(function({
       "aria-describedby": u,
       "data-locked": t,
       "data-error": l,
-      "data-loading": r,
+      "data-loading": e,
       className: v("base-field", V["v-field"], "v-field", n),
       vAlign: "start",
       hAlign: "start",
@@ -42,17 +42,17 @@ const z = F.forwardRef(function({
         /* @__PURE__ */ i(
           y,
           {
-            id: e,
+            id: r,
             label: d,
             description: o,
-            required: f
+            required: c
           }
         ),
         /* @__PURE__ */ i(
           A,
           {
             errorMessage: a,
-            loading: r,
+            loading: e,
             locked: t,
             hAlign: "start",
             children: /* @__PURE__ */ i(S, { state: b, hAlign: "start", children: s })
@@ -63,6 +63,6 @@ const z = F.forwardRef(function({
   );
 });
 export {
-  z as VField
+  q as VField
 };
 //# sourceMappingURL=v_field.js.map

package/dist/form/field_set/field_set.js

@@ -11,8 +11,8 @@ import { HStack as b } from "../../stacks/h_stack.js";
 import { Spacer as f } from "../../stacks/spacer.js";
 import { VStack as m } from "../../stacks/v_stack.js";
 import y, { useMemo as S } from "react";
-import '../../field_set.css';const x = "_field-set_8e981d9", g = "_field-set-body_4cd3139", c = { "field-set": x, "field-set-body": g };
-let u = 0;
+import '../../field_set.css';const u = "_field-set_8e981d9", x = "_field-set-body_4cd3139", c = { "field-set": u, "field-set-body": x };
+let _ = 0;
 const q = y.forwardRef(function({
   legend: l,
   startAdornments: d,
@@ -21,7 +21,7 @@ const q = y.forwardRef(function({
   children: n,
   ...t
 }, p) {
-  const s = `field-set-${S(() => u++, [])}`;
+  const s = `field-set-${S(() => _++, [])}`;
   return /* @__PURE__ */ r(
     m,
     {

package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js

@@ -0,0 +1,6 @@
+import { _ as a, d as i, r as m } from "./showcase-WfP6kBEb.js";
+var t = a(m(), 1), f = (0, t.default)(2)(async (e, r) => e === !1 ? r : i(r));
+export {
+  f as formatter
+};
+//# sourceMappingURL=formatter-QJ4M4OGQ-DaIl2Wi_.js.map

package/dist/formatter-QJ4M4OGQ-DaIl2Wi_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatter-QJ4M4OGQ-DaIl2Wi_.js","sources":["../../../node_modules/.pnpm/storybook@10.1.11_@testing-library+dom@10.4.1_prettier@2.8.8_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/storybook/dist/_browser-chunks/formatter-QJ4M4OGQ.js"],"sourcesContent":["import {\n  require_memoizerific\n} from \"./chunk-WJYERY3R.js\";\nimport {\n  dedent\n} from \"./chunk-JP7NCOJX.js\";\nimport {\n  __toESM\n} from \"./chunk-A242L54C.js\";\n\n// src/components/components/syntaxhighlighter/formatter.ts\nvar import_memoizerific = __toESM(require_memoizerific(), 1);\nvar formatter = (0, import_memoizerific.default)(2)(async (type, source) => type === !1 ? source : dedent(source));\nexport {\n  formatter\n};\n"],"names":["import_memoizerific","__toESM","require_memoizerific","formatter","type","source","dedent"],"mappings":";AAWA,IAAIA,IAAsBC,EAAQC,EAAoB,GAAI,CAAC,GACvDC,QAAgBH,EAAoB,SAAS,CAAC,EAAE,OAAOI,GAAMC,MAAWD,MAAS,KAAKC,IAASC,EAAOD,CAAM,CAAC;","x_google_ignoreList":[0]}

package/dist/frame.css

@@ -0,0 +1 @@
+._frame_ce82001{padding:0;border:none;background:none}

package/dist/gallery.css

@@ -0,0 +1 @@
+._container_932284e{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min-column-width),1fr));gap:20px;max-width:var(--max-gallery-width)}

package/dist/inputs/checkbox/checkbox.js

@@ -1,34 +1,34 @@
 import { jsx as x } from "react/jsx-runtime";
-import { clsx as i } from "clsx";
-import d from "react";
-import '../../checkbox.css';const f = "_checkbox_cb77818", h = { checkbox: f }, y = d.forwardRef(function({
+import { clsx as d } from "clsx";
+import f from "react";
+import '../../checkbox.css';const i = "_checkbox_cb77818", l = { checkbox: i }, _ = f.forwardRef(function({
   style: a,
   className: r,
   width: s,
   height: b,
-  checked: c,
-  inputRef: l,
-  onChange: e,
+  checked: e,
+  inputRef: k,
+  onChange: c,
   ...o
 }, n) {
   return /* @__PURE__ */ x(
     "input",
     {
       ref: n,
-      "data-checked": c,
+      "data-checked": e,
       "data-is-disabled": o.disabled || !1,
-      checked: c,
+      checked: e,
       type: "checkbox",
       onChange: (t) => {
-        e && e(!!t.currentTarget.checked, t);
+        c && c(!!t.currentTarget.checked, t);
       },
       ...o,
-      className: i(r, h.checkbox, "checkbox"),
+      className: d(r, l.checkbox, "checkbox"),
       style: { width: s, height: b, ...a }
     }
   );
 });
 export {
-  y as Checkbox
+  _ as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/inputs/color_input/color_input.js

@@ -13,7 +13,7 @@ import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import { ColorPicker as B } from "./color_picker.js";
 import { Input as F } from "../input/input.js";
-import { Popper as j } from "../../overlay/popper/popper.js";
+import { Popper as j } from "../../overlay/popper/legacy/popper.js";
 import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", f = { "checker-board": z, "color-input-select": K };
 function rr({
   value: c = "#000",

package/dist/inputs/color_input/color_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color_input.js","sources":["../../../src/inputs/color_input/color_input.tsx"],"sourcesContent":["import { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { HTMLAttributes } from 'react';\nimport { ColorState } from 'react-color';\nimport { Button } from '../../actions/index.js';\nimport { ColorPicker } from './color_picker.js';\nimport { Input } from '../input/input.js';\nimport styles from './color_input.module.css';\n\nimport { Popper } from '../../overlay/popper/popper.js';\n\nexport interface ColorInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: string;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  hierarchy?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function ColorInput({\n  value = '#000',\n  onChange,\n  onError,\n  disabled,\n  width = '100%',\n  maxWidth,\n  minWidth,\n  hierarchy = 'secondary',\n  ...props\n}: ColorInputProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = anchorElement != null;\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n\n  function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(e.currentTarget);\n  }\n\n  function closePicker() {\n    setAnchorElement(null);\n  }\n\n  useLayoutEffect(() => {\n    requestAnimationFrame(() => {\n      if (anchorElement != null) {\n        pickerRef.current && pickerRef.current.focus();\n      }\n    });\n  }, [anchorElement]);\n\n  function processKeyInput(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closePicker();\n    }\n  }\n\n  function updateColor(value: ColorState) {\n    const rgb = value.rgb;\n    let color = value.hex;\n\n    if (rgb.a != null) {\n      color = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;\n    } else {\n      color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n    }\n\n    onChange && onChange(color);\n  }\n\n  return (\n    <>\n      <HStack\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"color-input-wrapper\"\n        {...props}\n      >\n        <ZStack width=\"flex\">\n          <Input\n            disabled={disabled}\n            value={value}\n            style={{\n              borderEndEndRadius: 0,\n              borderStartEndRadius: 0,\n              textAlign: 'start',\n              paddingInlineEnd: '8px',\n            }}\n            className=\"color-input\"\n            onChange={onChange}\n          />\n        </ZStack>\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(styles['color-input-select'], 'color-input-select', 'select')}\n          style={{\n            borderStartStartRadius: 0,\n            borderEndStartRadius: 0,\n            paddingInlineEnd: 0,\n          }}\n        >\n          <HStack height=\"14px\" gap=\"4px\" hAlign=\"start\">\n            <Spacer width=\"4px\" />\n            <Box\n              width=\"flex\"\n              height=\"30px\"\n              className={styles['checker-board']}\n              style={{ borderRadius: '2px', overflow: 'hidden' }}\n            >\n              <Box\n                height=\"100%\"\n                style={{ backgroundColor: value, borderRadius: '2px' }}\n              ></Box>\n            </Box>\n            <Spacer />\n          </HStack>\n          <Spacer width=\"4px\" />\n        </Button>\n      </HStack>\n      <Popper\n        anchorElement={anchorElement}\n        onClose={closePicker}\n        open={isOpen}\n        restoreFocus\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n      >\n        <ColorPicker\n          color={value}\n          onKeyDown={processKeyInput}\n          onColorChange={updateColor}\n        />\n      </Popper>\n    </>\n  );\n}\n"],"names":["ColorInput","value","onChange","onError","disabled","width","maxWidth","minWidth","hierarchy","props","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","updateColor","rgb","color","jsxs","Fragment","HStack","jsx","ZStack","Input","Button","clsx","styles","Spacer","Box","Popper","ColorPicker"],"mappings":"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"}
+{"version":3,"file":"color_input.js","sources":["../../../src/inputs/color_input/color_input.tsx"],"sourcesContent":["import { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { HTMLAttributes } from 'react';\nimport { ColorState } from 'react-color';\nimport { Button } from '../../actions/index.js';\nimport { ColorPicker } from './color_picker.js';\nimport { Input } from '../input/input.js';\nimport styles from './color_input.module.css';\n\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nexport interface ColorInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: string;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  hierarchy?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function ColorInput({\n  value = '#000',\n  onChange,\n  onError,\n  disabled,\n  width = '100%',\n  maxWidth,\n  minWidth,\n  hierarchy = 'secondary',\n  ...props\n}: ColorInputProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = anchorElement != null;\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n\n  function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(e.currentTarget);\n  }\n\n  function closePicker() {\n    setAnchorElement(null);\n  }\n\n  useLayoutEffect(() => {\n    requestAnimationFrame(() => {\n      if (anchorElement != null) {\n        pickerRef.current && pickerRef.current.focus();\n      }\n    });\n  }, [anchorElement]);\n\n  function processKeyInput(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closePicker();\n    }\n  }\n\n  function updateColor(value: ColorState) {\n    const rgb = value.rgb;\n    let color = value.hex;\n\n    if (rgb.a != null) {\n      color = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;\n    } else {\n      color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n    }\n\n    onChange && onChange(color);\n  }\n\n  return (\n    <>\n      <HStack\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"color-input-wrapper\"\n        {...props}\n      >\n        <ZStack width=\"flex\">\n          <Input\n            disabled={disabled}\n            value={value}\n            style={{\n              borderEndEndRadius: 0,\n              borderStartEndRadius: 0,\n              textAlign: 'start',\n              paddingInlineEnd: '8px',\n            }}\n            className=\"color-input\"\n            onChange={onChange}\n          />\n        </ZStack>\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(styles['color-input-select'], 'color-input-select', 'select')}\n          style={{\n            borderStartStartRadius: 0,\n            borderEndStartRadius: 0,\n            paddingInlineEnd: 0,\n          }}\n        >\n          <HStack height=\"14px\" gap=\"4px\" hAlign=\"start\">\n            <Spacer width=\"4px\" />\n            <Box\n              width=\"flex\"\n              height=\"30px\"\n              className={styles['checker-board']}\n              style={{ borderRadius: '2px', overflow: 'hidden' }}\n            >\n              <Box\n                height=\"100%\"\n                style={{ backgroundColor: value, borderRadius: '2px' }}\n              ></Box>\n            </Box>\n            <Spacer />\n          </HStack>\n          <Spacer width=\"4px\" />\n        </Button>\n      </HStack>\n      <Popper\n        anchorElement={anchorElement}\n        onClose={closePicker}\n        open={isOpen}\n        restoreFocus\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n      >\n        <ColorPicker\n          color={value}\n          onKeyDown={processKeyInput}\n          onColorChange={updateColor}\n        />\n      </Popper>\n    </>\n  );\n}\n"],"names":["ColorInput","value","onChange","onError","disabled","width","maxWidth","minWidth","hierarchy","props","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","updateColor","rgb","color","jsxs","Fragment","HStack","jsx","ZStack","Input","Button","clsx","styles","Spacer","Box","Popper","ColorPicker"],"mappings":"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"}

package/dist/inputs/color_input/color_picker.js

@@ -1,29 +1,29 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import s, { useRef as n, useLayoutEffect as a } from "react";
 import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import { ZStack as l } from "../../stacks/z_stack.js";
 import { clsx as u } from "clsx";
-import { ChromePicker as h } from "react-color";
-import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", e = { "color-picker": d, "chrome-picker": R }, F = s.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, p) {
-  const r = n(null), f = k(r, p);
+import { ChromePicker as d } from "react-color";
+import '../../color_picker.css';const h = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", e = { "color-picker": h, "chrome-picker": R }, F = s.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, f) {
+  const r = n(null), p = k(r, f);
   return a(() => {
     r.current && r.current.focus();
   }, []), /* @__PURE__ */ o(
     l,
     {
       tabIndex: 0,
-      ref: f,
+      ref: p,
       padding: "8px",
       height: "auto",
       width: "auto",
       className: u(e["color-picker"], i),
       ...m,
       children: /* @__PURE__ */ o(
-        h,
+        d,
         {
           className: e["chrome-picker"],
           color: c,