@tcn/ui 0.16.0 → 0.18.0

package/dist/actions/index.d.ts

@@ -1,6 +1,5 @@
 export { BaseButton, type BaseButtonProps, } from './button/base_button/base_button.js';
 export { ButtonGroup, type ButtonGroupProps, } from './button/button_group/button_group.js';
-export { SlimButton } from './button/slim_button/slim_button.js';
 export { Button, type ButtonProps } from './button/button/button.js';
 export { Toggle, type ToggleProps } from './toggle/toggle.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,GACtB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,GACtB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/actions/index.js

@@ -1,13 +1,11 @@
 import { BaseButton as r } from "./button/base_button/base_button.js";
-import { ButtonGroup as m } from "./button/button_group/button_group.js";
-import { SlimButton as f } from "./button/slim_button/slim_button.js";
-import { Button as x } from "./button/button/button.js";
-import { Toggle as n } from "./toggle/toggle.js";
+import { ButtonGroup as p } from "./button/button_group/button_group.js";
+import { Button as m } from "./button/button/button.js";
+import { Toggle as x } from "./toggle/toggle.js";
 export {
   r as BaseButton,
-  x as Button,
-  m as ButtonGroup,
-  f as SlimButton,
-  n as Toggle
+  m as Button,
+  p as ButtonGroup,
+  x as Toggle
 };
 //# sourceMappingURL=index.js.map

package/dist/actions/index.js.map

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

package/dist/card.css

@@ -0,0 +1 @@
+@layer tcn-system{._card_a3c9492{height:auto}}

package/dist/column.css

@@ -1 +1 @@
-@layer tcn-system{:where(._column_f14ce93){height:100%;min-height:100%;width:auto;min-width:0;flex-grow:0}:where(._column_f14ce93[data-width=fill]){flex-grow:1;width:0}}
+@layer tcn-system{:where(._column_f14ce93){height:100%;min-height:100%;width:var(--columns-width, auto);min-width:var(--columns-min-width, 0);max-width:var(--columns-max-width, none);flex-grow:0}:where(._column_f14ce93[data-width=fill]){flex-grow:1;width:0}}

package/dist/containers.css

@@ -1 +1 @@
-@layer tcn-system{:where(._scaffold_7e9ff51){max-height:100%;width:100%;height:auto}:where(._rail_9474c96){max-width:100%;height:100%;width:auto}:where(._container_336e83e)>:where(._container-stack_0d2e80a){width:100%;height:100%}:where(._scaffold_7e9ff51)>:where(._scaffold-stack_3a72ba8){overflow-y:auto}:where(._scaffold_7e9ff51)>:where(._scaffold-stack_3a72ba8)>:where(._rail_9474c96){width:100%}:where(._rail_9474c96)>:where(._rail-stack_2e4d934)>:where(._scaffold_7e9ff51){height:100%}:where(._rail_9474c96)>:where(._rail-stack_2e4d934){overflow-x:auto}:where(._container-stack_0d2e80a)>:where(._container_336e83e){flex-grow:1}:where(._container-stack_0d2e80a)>:where(._scaffold_7e9ff51){min-height:0;overflow-y:auto}:where(._container-stack_0d2e80a)>:where(._rail_9474c96){min-width:0;overflow-x:auto}}
+@layer tcn-system{:where(._scaffold_7e9ff51){height:100%;width:100%;max-height:100%;overflow:auto}:where(._rail_9474c96){max-width:100%;height:100%;width:100%;overflow:auto}:where(._container_336e83e)>._container_336e83e{flex-grow:1;flex-shrink:unset}:where(._container_336e83e)>._scaffold_7e9ff51{overflow-y:auto;min-height:0}:where(._scaffold_7e9ff51)>._scaffold_7e9ff51{height:auto}:where(._container_336e83e)>._rail_9474c96{overflow-x:auto;min-width:0}:where(._rail_9474c96)>._rail_9474c96{width:auto}:where(._rail_9474c96)>._container_336e83e{height:100%}:where(._scaffold_7e9ff51)>._container_336e83e{width:100%}}

package/dist/containers.module-BmICKsOK.js

@@ -0,0 +1,5 @@
+import './containers.css';const s = "_scaffold_7e9ff51", c = "_rail_9474c96", o = "_container_336e83e", n = { scaffold: s, rail: c, container: o };
+export {
+  n as s
+};
+//# sourceMappingURL=containers.module-BmICKsOK.js.map

package/dist/containers.module-BmICKsOK.js.map

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

package/dist/draggable.css

@@ -1 +1 @@
-@layer tcn-system{:where(._draggable_db40376){position:relative}:where(._draggable_db40376[data-is-draggable=true]){left:var(--position-x);top:var(--position-y)}}
+@layer tcn-system{:where(._draggable_7fb032d){position:relative}:where(._draggable_7fb032d[data-is-draggable=true]){left:var(--position-x);top:var(--position-y)}}

package/dist/draggable.module-DFYR5n3n.js

@@ -0,0 +1,5 @@
+import './draggable.css';const s = "_draggable_7fb032d", a = { draggable: s };
+export {
+  a as s
+};
+//# sourceMappingURL=draggable.module-DFYR5n3n.js.map

package/dist/draggable.module-DFYR5n3n.js.map

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

package/dist/field_set.css

@@ -1 +1 @@
-@layer tcn-system{:where(._field-set_8e981d9){position:relative;border-radius:4px}:where(._field-set_8e981d9){gap:4px}:where(._field-set_8e981d9>._field-set-body_4cd3139){background:#fff;width:100%;max-width:100%;border-radius:4px;gap:8px;padding:8px}}
+@layer tcn-system{:where(._field-set_8e981d9){position:relative}}

package/dist/field_set.module-BpJTFCi4.js

@@ -0,0 +1,5 @@
+import './field_set.css';const e = "_field-set_8e981d9", s = { "field-set": e };
+export {
+  s
+};
+//# sourceMappingURL=field_set.module-BpJTFCi4.js.map

package/dist/field_set.module-BpJTFCi4.js.map

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

package/dist/form/field/field.js

@@ -1,22 +1,26 @@
-import { jsx as r, Fragment as a } from "react/jsx-runtime";
-import c, { useState as p } from "react";
+import { jsx as t, Fragment as d } from "react/jsx-runtime";
+import a, { useState as c } from "react";
 import { HField as u } from "./h_field/h_field.js";
 import { VField as F } from "./v_field/v_field.js";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import { useResizeObserver as l } from "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-const O = c.forwardRef(function({ children: t, breakpointPixels: i = 500, ...e }, m) {
-  const [f, n] = p(!0), s = l((d) => {
-    n(d >= i);
-  }), o = R(m, s);
-  return /* @__PURE__ */ r(a, { children: f ? /* @__PURE__ */ r(u, { ...e, ref: o, ...e, children: t }) : /* @__PURE__ */ r(F, { ...e, ref: o, ...e, children: t }) });
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
+const q = a.forwardRef(function({ children: e, breakpointPixels: i = 500, ...r }, m) {
+  const [f, n] = c(!0), p = l((s) => {
+    n(s >= i);
+  }), o = R(m, p);
+  return /* @__PURE__ */ t(d, { children: f ? /* @__PURE__ */ t(u, { ...r, ref: o, ...r, children: e }) : /* @__PURE__ */ t(F, { ...r, ref: o, ...r, children: e }) });
 });
 export {
-  O as Field
+  q as Field
 };
 //# sourceMappingURL=field.js.map

package/dist/form/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sources":["../../../src/form/field/field.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { FieldInput } from './common/types.js';\nimport { HField } from './h_field/h_field.js';\nimport { VField } from './v_field/v_field.js';\nimport { useForkRef, useResizeObserver } from '../../utils/index.js';\nimport type { StackStyleProps } from '../../stacks/types/styles.js';\n\nexport interface FieldProps extends FieldInput, StackStyleProps {\n  children: React.ReactNode;\n  breakpointPixels?: number;\n  labelWidth?: string;\n}\n\nexport const Field = React.forwardRef(function Field(\n  { children, breakpointPixels = 500, ...props }: FieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [isWideContainer, setIsWideContainer] = useState(true);\n  const containerRef = useResizeObserver(newWidth => {\n    setIsWideContainer(newWidth >= breakpointPixels);\n  });\n  const forkedRef = useForkRef(ref, containerRef);\n\n  return (\n    <>\n      {isWideContainer ? (\n        <HField {...props} ref={forkedRef} {...props}>\n          {children}\n        </HField>\n      ) : (\n        <VField {...props} ref={forkedRef} {...props}>\n          {children}\n        </VField>\n      )}\n    </>\n  );\n});\n"],"names":["Field","React","children","breakpointPixels","props","ref","isWideContainer","setIsWideContainer","useState","containerRef","useResizeObserver","newWidth","forkedRef","useForkRef","jsx","Fragment","HField","VField"],"mappings":";;;;;;;;;;;;AAaO,MAAMA,IAAQC,EAAM,WAAW,SACpC,EAAE,UAAAC,GAAU,kBAAAC,IAAmB,KAAK,GAAGC,EAAA,GACvCC,GACA;AACA,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAI,GACrDC,IAAeC,EAAkB,CAAAC,MAAY;AACjD,IAAAJ,EAAmBI,KAAYR,CAAgB;AAAA,EACjD,CAAC,GACKS,IAAYC,EAAWR,GAAKI,CAAY;AAE9C,SACE,gBAAAK,EAAAC,GAAA,EACG,cACC,gBAAAD,EAACE,GAAA,EAAQ,GAAGZ,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,GACH,IAEA,gBAAAY,EAACG,KAAQ,GAAGb,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"field.js","sources":["../../../src/form/field/field.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { FieldInput } from './common/types.js';\nimport { HField } from './h_field/h_field.js';\nimport { VField } from './v_field/v_field.js';\nimport { useForkRef, useResizeObserver } from '../../utils/index.js';\nimport type { StackStyleProps } from '../../stacks/types/styles.js';\n\nexport interface FieldProps extends FieldInput, StackStyleProps {\n  children: React.ReactNode;\n  breakpointPixels?: number;\n  labelWidth?: string;\n}\n\nexport const Field = React.forwardRef(function Field(\n  { children, breakpointPixels = 500, ...props }: FieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [isWideContainer, setIsWideContainer] = useState(true);\n  const containerRef = useResizeObserver(newWidth => {\n    setIsWideContainer(newWidth >= breakpointPixels);\n  });\n  const forkedRef = useForkRef(ref, containerRef);\n\n  return (\n    <>\n      {isWideContainer ? (\n        <HField {...props} ref={forkedRef} {...props}>\n          {children}\n        </HField>\n      ) : (\n        <VField {...props} ref={forkedRef} {...props}>\n          {children}\n        </VField>\n      )}\n    </>\n  );\n});\n"],"names":["Field","React","children","breakpointPixels","props","ref","isWideContainer","setIsWideContainer","useState","containerRef","useResizeObserver","newWidth","forkedRef","useForkRef","jsx","Fragment","HField","VField"],"mappings":";;;;;;;;;;;;;;;;AAaO,MAAMA,IAAQC,EAAM,WAAW,SACpC,EAAE,UAAAC,GAAU,kBAAAC,IAAmB,KAAK,GAAGC,EAAA,GACvCC,GACA;AACA,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAS,EAAI,GACrDC,IAAeC,EAAkB,CAAAC,MAAY;AACjD,IAAAJ,EAAmBI,KAAYR,CAAgB;AAAA,EACjD,CAAC,GACKS,IAAYC,EAAWR,GAAKI,CAAY;AAE9C,SACE,gBAAAK,EAAAC,GAAA,EACG,cACC,gBAAAD,EAACE,GAAA,EAAQ,GAAGZ,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,GACH,IAEA,gBAAAY,EAACG,KAAQ,GAAGb,GAAO,KAAKQ,GAAY,GAAGR,GACpC,UAAAF,EAAA,CACH,EAAA,CAEJ;AAEJ,CAAC;"}

package/dist/form/field_set/field_set.d.ts

@@ -1,13 +1,9 @@
 import { VStackProps } from '../../stacks/v_stack.js';
-import { default as React } from 'react';
-export type FieldSetProps = VStackProps<HTMLFieldSetElement> & {
-    legend?: string;
-    startAdornments?: React.ReactNode;
-    endAdornments?: React.ReactNode;
+import { default as React, FieldsetHTMLAttributes } from 'react';
+export type FieldSetOwnProps = {
+    disabled?: boolean;
+    name?: string;
 };
-export declare const FieldSet: React.ForwardRefExoticComponent<VStackProps<HTMLFieldSetElement> & {
-    legend?: string;
-    startAdornments?: React.ReactNode;
-    endAdornments?: React.ReactNode;
-} & React.RefAttributes<HTMLFieldSetElement>>;
+export type FieldSetProps = VStackProps<HTMLFieldSetElement> & FieldSetOwnProps & FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare const FieldSet: React.ForwardRefExoticComponent<VStackProps<HTMLFieldSetElement> & FieldSetOwnProps & React.FieldsetHTMLAttributes<HTMLFieldSetElement> & React.RefAttributes<HTMLFieldSetElement>>;
 //# sourceMappingURL=field_set.d.ts.map

package/dist/form/field_set/field_set.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field_set.d.ts","sourceRoot":"","sources":["../../../src/form/field_set/field_set.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,mBAAmB,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,QAAQ;aALV,MAAM;sBACG,KAAK,CAAC,SAAS;oBACjB,KAAK,CAAC,SAAS;6CAoD/B,CAAC"}
+{"version":3,"file":"field_set.d.ts","sourceRoot":"","sources":["../../../src/form/field_set/field_set.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,KAAK,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAK3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,WAAW,CAAC,mBAAmB,CAAC,GAC1D,gBAAgB,GAChB,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAE9C,eAAO,MAAM,QAAQ,qLAmCpB,CAAC"}

package/dist/form/field_set/field_set.js

@@ -1,65 +1,37 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { BodyText as h } from "../../typography/body_text/body_text.js";
-import "../../typography/callout/callout.js";
-import "../../typography/caption/caption.js";
-import "../../typography/footnote/footnote.js";
-import "../../typography/headline/headline.js";
-import "../../typography/subheadline/subheadline.js";
-import "../../typography/title/title.js";
-import { HStack as y } from "../../stacks/h_stack.js";
-import { Spacer as c } from "../../stacks/spacer.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { VStack as f } from "../../stacks/v_stack.js";
-import { clsx as i } from "clsx";
-import b, { useMemo as x } from "react";
-import '../../field_set.css';const S = "_field-set_8e981d9", g = "_field-set-body_4cd3139", m = { "field-set": S, "field-set-body": g };
-let u = 0;
-const $ = b.forwardRef(function({
-  legend: l,
-  startAdornments: d,
-  endAdornments: o,
-  className: a,
-  children: n,
-  ...t
-}, p) {
-  const s = `field-set-${x(() => u++, [])}`;
-  return /* @__PURE__ */ r(
-    f,
-    {
-      as: "fieldset",
-      "aria-labelledby": s,
-      ref: p,
-      className: i(m["field-set"], a, "tcn-field-set"),
-      ...t,
-      children: [
-        l && /* @__PURE__ */ r(
-          y,
-          {
-            id: s,
-            className: i("tcn-legend", "tcn-field-set-legend"),
-            hAlign: "start",
-            height: t.height,
-            children: [
-              d,
-              d && /* @__PURE__ */ e(c, { width: "8px" }),
-              /* @__PURE__ */ e(h, { className: "tcn-field-set-legend-text", size: "lg", children: l }),
-              o && /* @__PURE__ */ e(c, {}),
-              o
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          f,
-          {
-            className: i("tcn-field-set-body", m["tcn-field-set-body"]),
-            ...t,
-            children: n
-          }
-        )
-      ]
-    }
-  );
-});
+import { clsx as m } from "clsx";
+import b from "react";
+import { useLabelledById as c, LabelledByContext as n } from "../../utils/hooks/labelled_by_context.js";
+import { s as u } from "../../field_set.module-BpJTFCi4.js";
+const B = b.forwardRef(
+  function({
+    className: r,
+    id: e,
+    children: d,
+    "aria-labelledby": s,
+    ...l
+  }, i) {
+    const { labelId: t } = c(e, s);
+    return /* @__PURE__ */ a(n.Provider, { value: { labelId: t }, children: /* @__PURE__ */ o(
+      f,
+      {
+        as: "fieldset",
+        "aria-labelledby": t,
+        ref: i,
+        id: e,
+        "data-is-disabled": l.disabled ? "true" : "false",
+        className: m(u["field-set"], r, "tcn-field-set"),
+        ...l,
+        children: [
+          d,
+          /* @__PURE__ */ a("fieldset", { disabled: !0 })
+        ]
+      }
+    ) });
+  }
+);
 export {
-  $ as FieldSet
+  B as FieldSet
 };
 //# sourceMappingURL=field_set.js.map

package/dist/form/field_set/field_set.js.map

@@ -1 +1 @@
-{"version":3,"file":"field_set.js","sources":["../../../src/form/field_set/field_set.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useMemo } from 'react';\nimport styles from './field_set.module.css';\n\nlet fieldsetIdCount = 0;\n\nexport type FieldSetProps = VStackProps<HTMLFieldSetElement> & {\n  legend?: string;\n  startAdornments?: React.ReactNode;\n  endAdornments?: React.ReactNode;\n};\n\nexport const FieldSet = React.forwardRef(function FieldSet(\n  {\n    legend,\n    startAdornments,\n    endAdornments,\n    className,\n    children,\n    ...props\n  }: FieldSetProps,\n  ref: React.Ref<HTMLFieldSetElement>\n) {\n  const id = useMemo(() => {\n    return fieldsetIdCount++;\n  }, []);\n\n  const labelId = `field-set-${id}`;\n\n  return (\n    <VStack\n      as=\"fieldset\"\n      aria-labelledby={labelId}\n      ref={ref}\n      className={clsx(styles['field-set'], className, 'tcn-field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={clsx('tcn-legend', 'tcn-field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <BodyText className=\"tcn-field-set-legend-text\" size=\"lg\">\n            {legend}\n          </BodyText>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack\n        className={clsx('tcn-field-set-body', styles['tcn-field-set-body'])}\n        {...props}\n      >\n        {children}\n      </VStack>\n    </VStack>\n  );\n});\n"],"names":["fieldsetIdCount","FieldSet","React","legend","startAdornments","endAdornments","className","children","props","ref","labelId","useMemo","jsxs","VStack","clsx","styles","HStack","jsx","Spacer","BodyText"],"mappings":";;;;;;;;;;;;;;AASA,IAAIA,IAAkB;AAQf,MAAMC,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AAKA,QAAMC,IAAU,aAJLC,EAAQ,MACVX,KACN,CAAA,CAAE,CAE0B;AAE/B,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,mBAAiBH;AAAA,MACjB,KAAAD;AAAA,MACA,WAAWK,EAAKC,EAAO,WAAW,GAAGT,GAAW,eAAe;AAAA,MAC9D,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAK,cAAc,sBAAsB;AAAA,YACpD,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,gCACvCC,GAAA,EAAS,WAAU,6BAA4B,MAAK,MAClD,UAAAhB,GACH;AAAA,cACCE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,WAAWC,EAAK,sBAAsBC,EAAO,oBAAoB,CAAC;AAAA,YACjE,GAAGP;AAAA,YAEH,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"field_set.js","sources":["../../../src/form/field_set/field_set.tsx"],"sourcesContent":["import { VStack } from '../../stacks/v_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { type FieldsetHTMLAttributes } from 'react';\nimport { LabelledByContext } from '../../utils/hooks/labelled_by_context.js';\nimport { useLabelledById } from '../../utils/hooks/labelled_by_context.js';\nimport styles from './field_set.module.css';\n\nexport type FieldSetOwnProps = {\n  disabled?: boolean;\n  name?: string;\n};\n\nexport type FieldSetProps = VStackProps<HTMLFieldSetElement> &\n  FieldSetOwnProps &\n  FieldsetHTMLAttributes<HTMLFieldSetElement>;\n\nexport const FieldSet = React.forwardRef<HTMLFieldSetElement, FieldSetProps>(\n  function FieldSet(\n    {\n      className,\n      id,\n      children,\n      'aria-labelledby': ariaLabelledBy,\n      ...props\n    }: FieldSetProps,\n    ref\n  ) {\n    const { labelId } = useLabelledById(id, ariaLabelledBy);\n\n    return (\n      <LabelledByContext.Provider value={{ labelId }}>\n        <VStack\n          as=\"fieldset\"\n          aria-labelledby={labelId}\n          ref={ref}\n          id={id}\n          data-is-disabled={props.disabled ? 'true' : 'false'}\n          className={clsx(styles['field-set'], className, 'tcn-field-set')}\n          {...props}\n        >\n          {/* TODO: may want to ensure Legend is rendered before rest of children.\n        Search over children if a match is found for legend would pop it off the children array\n        and manually render it in the correct slot. \n        Before doing this however, may want to build Slot and Slottable util to generalize the problem/solution for re-useability. \n        */}\n          {children}\n          <fieldset disabled></fieldset>\n        </VStack>\n      </LabelledByContext.Provider>\n    );\n  }\n);\n"],"names":["FieldSet","React","className","id","children","ariaLabelledBy","props","ref","labelId","useLabelledById","LabelledByContext","jsxs","VStack","clsx","styles","jsx"],"mappings":";;;;;;AAiBO,MAAMA,IAAWC,EAAM;AAAA,EAC5B,SACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,SAAAC,EAAA,IAAYC,EAAgBN,GAAIE,CAAc;AAEtD,6BACGK,EAAkB,UAAlB,EAA2B,OAAO,EAAE,SAAAF,KACnC,UAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,mBAAiBJ;AAAA,QACjB,KAAAD;AAAA,QACA,IAAAJ;AAAA,QACA,oBAAkBG,EAAM,WAAW,SAAS;AAAA,QAC5C,WAAWO,EAAKC,EAAO,WAAW,GAAGZ,GAAW,eAAe;AAAA,QAC9D,GAAGI;AAAA,QAOH,UAAA;AAAA,UAAAF;AAAA,UACD,gBAAAW,EAAC,YAAA,EAAS,UAAQ,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEvB;AAAA,EAEJ;AACF;"}

package/dist/form/field_set/legend.d.ts

@@ -0,0 +1,20 @@
+import { HStackProps } from '../../stacks/h_stack.js';
+export interface LegendOwnProps extends HStackProps {
+    id?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * Composable legend for FieldSet. Renders as a div (HStack) with
+ * aria-labelledby wiring handled automatically via context.
+ *
+ * String children are automatically wrapped in BodyText with the
+ * `tcn-field-set-legend-text` class for consistent theme styling.
+ * Non-string children (e.g. icons, custom typography) render as-is.
+ *
+ * If a custom `id` is provided, it takes precedence over the context value.
+ * When overriding `id`, also provide a matching `aria-labelledby` to the
+ * parent FieldSet so the association remains correct.
+ */
+export declare const Legend: ({ id, children, className, ...props }: LegendOwnProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=legend.d.ts.map

package/dist/form/field_set/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../src/form/field_set/legend.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKnE,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,GAAI,uCAAuC,cAAc,4CAmB3E,CAAC"}

package/dist/form/field_set/legend.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { clsx as l } from "clsx";
+import { HStack as p } from "../../stacks/h_stack.js";
+import { BodyText as d } from "../../typography/body_text/body_text.js";
+import "../../typography/callout/callout.js";
+import "../../typography/caption/caption.js";
+import "../../typography/footnote/footnote.js";
+import "../../typography/headline/headline.js";
+import "../../typography/subheadline/subheadline.js";
+import "../../typography/title/title.js";
+import { useLabelledBy as n } from "../../utils/hooks/labelled_by_context.js";
+import { s as c } from "../../field_set.module-BpJTFCi4.js";
+const k = ({ id: o, children: t, className: r, ...m }) => {
+  const s = n(), i = o ?? s?.labelId;
+  return /* @__PURE__ */ e(
+    p,
+    {
+      id: i,
+      className: l(r, c.legend, "tcn-legend", "tcn-field-set-legend"),
+      ...m,
+      children: typeof t == "string" ? /* @__PURE__ */ e(d, { className: "tcn-field-set-legend-text", size: "lg", children: t }) : t
+    }
+  );
+};
+export {
+  k as Legend
+};
+//# sourceMappingURL=legend.js.map

package/dist/form/field_set/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sources":["../../../src/form/field_set/legend.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { BodyText } from '../../typography/index.js';\nimport { useLabelledBy } from '../../utils/hooks/labelled_by_context.js';\nimport styles from './field_set.module.css';\n\nexport interface LegendOwnProps extends HStackProps {\n  id?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * Composable legend for FieldSet. Renders as a div (HStack) with\n * aria-labelledby wiring handled automatically via context.\n *\n * String children are automatically wrapped in BodyText with the\n * `tcn-field-set-legend-text` class for consistent theme styling.\n * Non-string children (e.g. icons, custom typography) render as-is.\n *\n * If a custom `id` is provided, it takes precedence over the context value.\n * When overriding `id`, also provide a matching `aria-labelledby` to the\n * parent FieldSet so the association remains correct.\n */\nexport const Legend = ({ id, children, className, ...props }: LegendOwnProps) => {\n  const ctx = useLabelledBy();\n  const resolvedId = id ?? ctx?.labelId;\n\n  return (\n    <HStack\n      id={resolvedId}\n      className={clsx(className, styles.legend, 'tcn-legend', 'tcn-field-set-legend')}\n      {...props}\n    >\n      {typeof children === 'string' ? (\n        <BodyText className=\"tcn-field-set-legend-text\" size=\"lg\">\n          {children}\n        </BodyText>\n      ) : (\n        children\n      )}\n    </HStack>\n  );\n};\n"],"names":["Legend","id","children","className","props","ctx","useLabelledBy","resolvedId","jsx","HStack","clsx","styles","BodyText"],"mappings":";;;;;;;;;;;;AAwBO,MAAMA,IAAS,CAAC,EAAE,IAAAC,GAAI,UAAAC,GAAU,WAAAC,GAAW,GAAGC,QAA4B;AAC/E,QAAMC,IAAMC,EAAA,GACNC,IAAaN,KAAMI,GAAK;AAE9B,SACE,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAIF;AAAA,MACJ,WAAWG,EAAKP,GAAWQ,EAAO,QAAQ,cAAc,sBAAsB;AAAA,MAC7E,GAAGP;AAAA,MAEH,UAAA,OAAOF,KAAa,WACnB,gBAAAM,EAACI,GAAA,EAAS,WAAU,6BAA4B,MAAK,MAClD,UAAAV,EAAA,CACH,IAEAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/form/index.d.ts

@@ -10,6 +10,7 @@ export { VField, type VFieldProps, type VFieldOwnProps, } from './field/v_field/
 export { Field, type FieldProps } from './field/field.js';
 export { FieldPresenter, type FieldState, type FieldOptions, } from './field_presenters/field_presenter.js';
 export { OptionsFieldPresenter, type OptionsFieldState, type OptionsFieldOptions, } from './field_presenters/options_field_presenter.js';
-export { FieldSet, type FieldSetProps } from './field_set/field_set.js';
+export { FieldSet, type FieldSetProps, type FieldSetOwnProps, } from './field_set/field_set.js';
+export { Legend, type LegendOwnProps } from './field_set/legend.js';
 export { FormField } from './form_field.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,YAAY,GACb,MAAM,+CAA+C,CAAC;AACvD,OAAO,EACL,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,gBAAgB,GACjB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,KAAK,wBAAwB,GAC9B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,KAAK,yBAAyB,EAC9B,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACpF,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,cAAc,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,cAAc,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACL,qBAAqB,EACrB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,YAAY,GACb,MAAM,+CAA+C,CAAC;AACvD,OAAO,EACL,YAAY,EACZ,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,gBAAgB,GACjB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,gBAAgB,EAChB,KAAK,wBAAwB,GAC9B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EACL,KAAK,yBAAyB,EAC9B,iBAAiB,GAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACpF,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,cAAc,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,cAAc,GACpB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EACL,cAAc,EACd,KAAK,UAAU,EACf,KAAK,YAAY,GAClB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACL,qBAAqB,EACrB,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,+CAA+C,CAAC;AACvD,OAAO,EACL,QAAQ,EACR,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/form/index.js

@@ -1,30 +1,32 @@
 import { FieldControl as o } from "./field/common/field_control/field_control.js";
-import { AdornmentMap as p, FieldStatusInput as i } from "./field/common/status_input/status_input.js";
-import { FieldDescription as l } from "./field/common/field_description.js";
-import { FieldErrorMessage as F } from "./field/common/field_error.js";
-import { FieldHeader as x } from "./field/common/field_header.js";
+import { AdornmentMap as p, FieldStatusInput as d } from "./field/common/status_input/status_input.js";
+import { FieldDescription as m } from "./field/common/field_description.js";
+import { FieldErrorMessage as f } from "./field/common/field_error.js";
+import { FieldHeader as F } from "./field/common/field_header.js";
 import { FieldLabel as s } from "./field/common/field_label.js";
-import { HField as u } from "./field/h_field/h_field.js";
-import { VField as M } from "./field/v_field/v_field.js";
-import { Field as S } from "./field/field.js";
-import { FieldPresenter as c } from "./field_presenters/field_presenter.js";
-import { OptionsFieldPresenter as A } from "./field_presenters/options_field_presenter.js";
-import { FieldSet as D } from "./field_set/field_set.js";
-import { FormField as I } from "./form_field.js";
+import { HField as g } from "./field/h_field/h_field.js";
+import { VField as H } from "./field/v_field/v_field.js";
+import { Field as M } from "./field/field.js";
+import { FieldPresenter as S } from "./field_presenters/field_presenter.js";
+import { OptionsFieldPresenter as c } from "./field_presenters/options_field_presenter.js";
+import { FieldSet as C } from "./field_set/field_set.js";
+import { Legend as E } from "./field_set/legend.js";
+import { FormField as O } from "./form_field.js";
 export {
   p as AdornmentMap,
-  S as Field,
+  M as Field,
   o as FieldControl,
-  l as FieldDescription,
-  F as FieldErrorMessage,
-  x as FieldHeader,
+  m as FieldDescription,
+  f as FieldErrorMessage,
+  F as FieldHeader,
   s as FieldLabel,
-  c as FieldPresenter,
-  D as FieldSet,
-  i as FieldStatusInput,
-  I as FormField,
-  u as HField,
-  A as OptionsFieldPresenter,
-  M as VField
+  S as FieldPresenter,
+  C as FieldSet,
+  d as FieldStatusInput,
+  O as FormField,
+  g as HField,
+  E as Legend,
+  c as OptionsFieldPresenter,
+  H as VField
 };
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

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

package/dist/inputs/color_input/color_input.js

@@ -6,7 +6,6 @@ import { clsx as h } from "clsx";
 import { useState as I, useRef as A, useLayoutEffect as N } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as P } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { ColorPicker as _ } from "./color_picker.js";
@@ -14,7 +13,7 @@ import { Input as B } from "../input/input.js";
 import { Popper as F } from "../../overlay/popper/legacy/popper.js";
 import { ControlSet as j } from "../control_set/control_set.js";
 import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", f = { "checker-board": z, "color-input-select": K };
-function v({
+function Z({
   value: c = "#000",
   onChange: i,
   onError: O,
@@ -140,6 +139,6 @@ function v({
   ] });
 }
 export {
-  v as ColorInput
+  Z as ColorInput
 };
 //# sourceMappingURL=color_input.js.map

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 { 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';\nimport { ControlSet } from '../control_set/control_set.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      <ControlSet\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"tcn-color-input-wrapper\"\n        {...props}\n      >\n        <Input\n          width=\"flex\"\n          disabled={disabled}\n          value={value}\n          style={{\n            borderEndEndRadius: 0,\n            borderStartEndRadius: 0,\n            textAlign: 'start',\n            paddingInlineEnd: '8px',\n          }}\n          className=\"tcn-color-input\"\n          onChange={onChange}\n        />\n\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(\n            styles['color-input-select'],\n            'tcn-color-input-select',\n            'tcn-select'\n          )}\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={clsx(styles['checker-board'], 'tcn-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      </ControlSet>\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","ControlSet","jsx","Input","Button","clsx","styles","HStack","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 { 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';\nimport { ControlSet } from '../control_set/control_set.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      <ControlSet\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"tcn-color-input-wrapper\"\n        {...props}\n      >\n        <Input\n          width=\"flex\"\n          disabled={disabled}\n          value={value}\n          style={{\n            borderEndEndRadius: 0,\n            borderStartEndRadius: 0,\n            textAlign: 'start',\n            paddingInlineEnd: '8px',\n          }}\n          className=\"tcn-color-input\"\n          onChange={onChange}\n        />\n\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(\n            styles['color-input-select'],\n            'tcn-color-input-select',\n            'tcn-select'\n          )}\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={clsx(styles['checker-board'], 'tcn-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      </ControlSet>\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","ControlSet","jsx","Input","Button","clsx","styles","HStack","Spacer","Box","Popper","ColorPicker"],"mappings":"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"}

package/dist/inputs/color_input/color_picker.js

@@ -1,16 +1,20 @@
 import { jsx as o } from "react/jsx-runtime";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import s, { useRef as a, useLayoutEffect as k } from "react";
 import { useForkRef as l } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as e } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { ZStack as u } from "../../stacks/z_stack.js";
 import { ChromePicker as h } from "react-color";
-import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", c = { "color-picker": d, "chrome-picker": R }, L = s.forwardRef(function({ color: t, onColorChange: i, className: m, ...p }, f) {
+import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", c = { "color-picker": d, "chrome-picker": R }, v = s.forwardRef(function({ color: t, onColorChange: i, className: m, ...p }, f) {
   const r = a(null), n = l(r, f);
   return k(() => {
     r.current && r.current.focus();
@@ -36,6 +40,6 @@ import '../../color_picker.css';const d = "_color-picker_4757d5a", R = "_chrome-
   );
 });
 export {
-  L as ColorPicker
+  v as ColorPicker
 };
 //# sourceMappingURL=color_picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color_picker.js","sources":["../../../src/inputs/color_input/color_picker.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';\nimport { ChromePicker, Color, type ColorResult } from 'react-color';\nimport styles from './color_picker.module.css';\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  color: Color;\n  onColorChange: (color: ColorResult) => void;\n}\n\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  { color, onColorChange, className, ...props }: ColorPickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const padRef = useRef<HTMLDivElement | null>(null);\n  const forkedRef = useForkRef(padRef, ref);\n\n  useLayoutEffect(() => {\n    padRef.current && padRef.current.focus();\n  }, []);\n\n  return (\n    <ZStack\n      tabIndex={0}\n      ref={forkedRef}\n      padding=\"8px\"\n      height=\"auto\"\n      width=\"auto\"\n      className={clsx(styles['color-picker'], 'tcn-color-picker', className)}\n      {...props}\n    >\n      <ChromePicker\n        className={clsx(styles['chrome-picker'], 'tcn-chrome-picker')}\n        color={color}\n        onChange={onColorChange}\n      />\n    </ZStack>\n  );\n});\n"],"names":["ColorPicker","React","color","onColorChange","className","props","ref","padRef","useRef","forkedRef","useForkRef","useLayoutEffect","jsx","ZStack","clsx","styles","ChromePicker"],"mappings":";;;;;;;;;;;;gHAYaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,eAAAC,GAAe,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,QAAMC,IAASC,EAA8B,IAAI,GAC3CC,IAAYC,EAAWH,GAAQD,CAAG;AAExC,SAAAK,EAAgB,MAAM;AACpB,IAAAJ,EAAO,WAAWA,EAAO,QAAQ,MAAA;AAAA,EACnC,GAAG,CAAA,CAAE,GAGH,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKJ;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWK,EAAKC,EAAO,cAAc,GAAG,oBAAoBX,CAAS;AAAA,MACpE,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWF,EAAKC,EAAO,eAAe,GAAG,mBAAmB;AAAA,UAC5D,OAAAb;AAAA,UACA,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"color_picker.js","sources":["../../../src/inputs/color_input/color_picker.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { HTMLAttributes, useLayoutEffect, useRef } from 'react';\nimport { ChromePicker, Color, type ColorResult } from 'react-color';\nimport styles from './color_picker.module.css';\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  color: Color;\n  onColorChange: (color: ColorResult) => void;\n}\n\nexport const ColorPicker = React.forwardRef(function ColorPicker(\n  { color, onColorChange, className, ...props }: ColorPickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const padRef = useRef<HTMLDivElement | null>(null);\n  const forkedRef = useForkRef(padRef, ref);\n\n  useLayoutEffect(() => {\n    padRef.current && padRef.current.focus();\n  }, []);\n\n  return (\n    <ZStack\n      tabIndex={0}\n      ref={forkedRef}\n      padding=\"8px\"\n      height=\"auto\"\n      width=\"auto\"\n      className={clsx(styles['color-picker'], 'tcn-color-picker', className)}\n      {...props}\n    >\n      <ChromePicker\n        className={clsx(styles['chrome-picker'], 'tcn-chrome-picker')}\n        color={color}\n        onChange={onColorChange}\n      />\n    </ZStack>\n  );\n});\n"],"names":["ColorPicker","React","color","onColorChange","className","props","ref","padRef","useRef","forkedRef","useForkRef","useLayoutEffect","jsx","ZStack","clsx","styles","ChromePicker"],"mappings":";;;;;;;;;;;;;;;;gHAYaA,IAAcC,EAAM,WAAW,SAC1C,EAAE,OAAAC,GAAO,eAAAC,GAAe,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,QAAMC,IAASC,EAA8B,IAAI,GAC3CC,IAAYC,EAAWH,GAAQD,CAAG;AAExC,SAAAK,EAAgB,MAAM;AACpB,IAAAJ,EAAO,WAAWA,EAAO,QAAQ,MAAA;AAAA,EACnC,GAAG,CAAA,CAAE,GAGH,gBAAAK;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKJ;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWK,EAAKC,EAAO,cAAc,GAAG,oBAAoBX,CAAS;AAAA,MACpE,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWF,EAAKC,EAAO,eAAe,GAAG,mBAAmB;AAAA,UAC5D,OAAAb;AAAA,UACA,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}