@tcn/ui 0.0.3 → 0.1.1

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

@@ -1,6 +1,6 @@
-import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { jsxs as F, jsx as r } from "react/jsx-runtime";
 import { HStack as I } from "../../../stacks/h_stack.js";
-import H from "classnames";
+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";
@@ -12,7 +12,7 @@ const B = g.forwardRef(function({
   description: s,
   errorMessage: d,
   children: n,
-  labelWidth: a = "40%",
+  labelWidth: l = "40%",
   locked: t = !1,
   loading: e = !1,
   className: f,
@@ -20,8 +20,8 @@ const B = g.forwardRef(function({
   required: m,
   ...h
 }, p) {
-  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, l = !!d, F = t ? "locked" : e ? "loading" : l ? "error" : "default";
-  return /* @__PURE__ */ x(
+  const [i] = y(() => c || `h-field-${A++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
+  return /* @__PURE__ */ F(
     I,
     {
       ref: p,
@@ -29,7 +29,7 @@ const B = g.forwardRef(function({
       "aria-labelledby": u,
       "aria-describedby": b,
       "data-locked": t,
-      "data-error": l,
+      "data-error": a,
       "data-loading": e,
       className: H("base-field", w["h-field"], "h-field", f),
       vAlign: "start",
@@ -41,15 +41,15 @@ const B = g.forwardRef(function({
         /* @__PURE__ */ r(
           S,
           {
-            minWidth: a,
-            width: a,
+            minWidth: l,
+            width: l,
             id: i,
             label: o,
             description: s,
             required: m
           }
         ),
-        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: F, children: n }) })
+        /* @__PURE__ */ r($, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: x, children: n }) })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"h_field.js","sources":["../../../../src/form/field/h_field/h_field.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React, { useState } from 'react';\nimport styles from './h_field.module.css';\nimport type { FieldInput } from '../common/types.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\n\nexport interface HFieldOwnProps extends FieldInput {\n  labelWidth?: string;\n  children: React.ReactNode;\n}\nexport type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;\n\nlet idIndex = 0;\nexport const HField = React.forwardRef(function HField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    labelWidth = '40%',\n    locked = false,\n    loading = false,\n    className,\n    id,\n    required,\n    ...props\n  }: HFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `h-field-${idIndex++}`);\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const hasError = errorMessage ? true : false;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={classNames('base-field', styles['h-field'], 'h-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        minWidth={labelWidth}\n        width={labelWidth}\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>\n        <FieldStatusInput state={state}>{Control}</FieldStatusInput>\n      </FieldControl>\n    </HStack>\n  );\n});\n"],"names":["idIndex","HField","React","label","description","errorMessage","Control","labelWidth","locked","loading","className","id","required","props","ref","finalId","useState","labelId","descriptionId","hasError","state","jsxs","HStack","classNames","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAiBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWX,GAAS,EAAE,GACvDiB,IAAU,GAAGF,CAAO,UACpBG,IAAgB,GAAGH,CAAO,gBAC1BI,IAAW,EAAAd,GACXe,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBG;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAaV;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAW,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MAC3E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUnB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa,EAACE,KAAa,cAAAtB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAd,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"h_field.js","sources":["../../../../src/form/field/h_field/h_field.tsx"],"sourcesContent":["import { HStack } from '../../../stacks/h_stack.js';\nimport type { HStackOwnProps } from '../../../stacks/h_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React, { useState } from 'react';\nimport styles from './h_field.module.css';\nimport type { FieldInput } from '../common/types.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\n\nexport interface HFieldOwnProps extends FieldInput {\n  labelWidth?: string;\n  children: React.ReactNode;\n}\nexport type HFieldProps = WithDetailedHTMLProps<HFieldOwnProps, 'div'> & HStackOwnProps;\n\nlet idIndex = 0;\nexport const HField = React.forwardRef(function HField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    labelWidth = '40%',\n    locked = false,\n    loading = false,\n    className,\n    id,\n    required,\n    ...props\n  }: HFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `h-field-${idIndex++}`);\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const hasError = errorMessage ? true : false;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <HStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={clsx('base-field', styles['h-field'], 'h-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        minWidth={labelWidth}\n        width={labelWidth}\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl errorMessage={errorMessage} loading={loading} locked={locked}>\n        <FieldStatusInput state={state}>{Control}</FieldStatusInput>\n      </FieldControl>\n    </HStack>\n  );\n});\n"],"names":["idIndex","HField","React","label","description","errorMessage","Control","labelWidth","locked","loading","className","id","required","props","ref","finalId","useState","labelId","descriptionId","hasError","state","jsxs","HStack","clsx","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAiBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWX,GAAS,EAAE,GACvDiB,IAAU,GAAGF,CAAO,UACpBG,IAAgB,GAAGH,CAAO,gBAC1BI,IAAW,EAAAd,GACXe,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBG;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAaV;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAK,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MACrE,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUnB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa,EAACE,KAAa,cAAAtB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAd,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -1,6 +1,6 @@
 import { jsxs as x, jsx as i } from "react/jsx-runtime";
 import { VStack as g } from "../../../stacks/v_stack.js";
-import v from "classnames";
+import { clsx as v } from "clsx";
 import F, { useState as I } from "react";
 import { FieldControl as A } from "../common/field_control/field_control.js";
 import { FieldHeader as y } from "../common/field_header.js";
@@ -13,15 +13,15 @@ const z = F.forwardRef(function({
   errorMessage: a,
   children: s,
   locked: t = !1,
-  loading: e = !1,
-  maxWidth: N,
-  minWidth: R,
+  loading: r = !1,
+  maxWidth: R,
+  minWidth: W,
   className: n,
   id: c,
   required: f,
   ...m
 }, p) {
-  const [r] = I(() => c || `v-field-${$++}`), l = !!a, h = `${r}-label`, u = `${r}-description`, b = t ? "locked" : e ? "loading" : l ? "error" : "default";
+  const [e] = I(() => c || `v-field-${$++}`), l = !!a, h = `${e}-label`, u = `${e}-description`, b = t ? "locked" : r ? "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": e,
+      "data-loading": r,
       className: v("base-field", V["v-field"], "v-field", n),
       vAlign: "start",
       hAlign: "start",
@@ -42,7 +42,7 @@ const z = F.forwardRef(function({
         /* @__PURE__ */ i(
           y,
           {
-            id: r,
+            id: e,
             label: d,
             description: o,
             required: f
@@ -52,7 +52,7 @@ const z = F.forwardRef(function({
           A,
           {
             errorMessage: a,
-            loading: e,
+            loading: r,
             locked: t,
             hAlign: "start",
             children: /* @__PURE__ */ i(S, { state: b, hAlign: "start", children: s })

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

@@ -1 +1 @@
-{"version":3,"file":"v_field.js","sources":["../../../../src/form/field/v_field/v_field.tsx"],"sourcesContent":["import { VStack } from '../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport classNames from 'classnames';\nimport React, { useState } from 'react';\nimport styles from './v_field.module.css';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\nimport type { FieldInput } from '../common/types.js';\n\nexport interface VFieldOwnProps extends FieldInput {\n  children: React.ReactNode;\n}\n\nexport type VFieldProps = WithDetailedHTMLProps<VFieldOwnProps, 'div'> & VStackOwnProps;\nlet idIndex = 0;\nexport const VField = React.forwardRef(function VField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    locked = false,\n    loading = false,\n    maxWidth,\n    minWidth,\n    className,\n    id,\n    required,\n    ...props\n  }: VFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `v-field-${idIndex++}`);\n  const hasError = errorMessage ? true : false;\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n  return (\n    <VStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={classNames('base-field', styles['v-field'], 'v-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl\n        errorMessage={errorMessage}\n        loading={loading}\n        locked={locked}\n        hAlign=\"start\"\n      >\n        <FieldStatusInput state={state} hAlign=\"start\">\n          {Control}\n        </FieldStatusInput>\n      </FieldControl>\n    </VStack>\n  );\n});\n"],"names":["idIndex","VField","React","label","description","errorMessage","Control","locked","loading","maxWidth","minWidth","className","id","required","props","ref","finalId","useState","hasError","labelId","descriptionId","state","jsxs","VStack","classNames","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAgBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWZ,GAAS,EAAE,GACvDkB,IAAW,EAAAb,GACXc,IAAU,GAAGH,CAAO,UACpBI,IAAgB,GAAGJ,CAAO,gBAC1BK,IAAQd,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAC7E,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAab;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWgB,EAAW,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MAC3E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIX;AAAA,YACJ,OAAAb;AAAA,YACA,aAAAC;AAAA,YACA,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,cAAAvB;AAAA,YACA,SAAAG;AAAA,YACA,QAAAD;AAAA,YACA,QAAO;AAAA,YAEP,UAAA,gBAAAmB,EAACG,GAAA,EAAiB,OAAAR,GAAc,QAAO,SACpC,UAAAf,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"v_field.js","sources":["../../../../src/form/field/v_field/v_field.tsx"],"sourcesContent":["import { VStack } from '../../../stacks/v_stack.js';\nimport type { VStackOwnProps } from '../../../stacks/v_stack.js';\nimport type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';\nimport { clsx } from 'clsx';\nimport React, { useState } from 'react';\nimport styles from './v_field.module.css';\nimport { FieldControl } from '../common/field_control/field_control.js';\nimport { FieldHeader } from '../common/field_header.js';\nimport { FieldStatusInput } from '../common/status_input/status_input.js';\nimport type { FieldInput } from '../common/types.js';\n\nexport interface VFieldOwnProps extends FieldInput {\n  children: React.ReactNode;\n}\n\nexport type VFieldProps = WithDetailedHTMLProps<VFieldOwnProps, 'div'> & VStackOwnProps;\nlet idIndex = 0;\nexport const VField = React.forwardRef(function VField(\n  {\n    label,\n    description,\n    errorMessage,\n    children: Control,\n    locked = false,\n    loading = false,\n    maxWidth,\n    minWidth,\n    className,\n    id,\n    required,\n    ...props\n  }: VFieldProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [finalId] = useState(() => id || `v-field-${idIndex++}`);\n  const hasError = errorMessage ? true : false;\n  const labelId = `${finalId}-label`;\n  const descriptionId = `${finalId}-description`;\n  const state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n  return (\n    <VStack\n      ref={ref}\n      as=\"div\"\n      aria-labelledby={labelId}\n      aria-describedby={descriptionId}\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={clsx('base-field', styles['v-field'], 'v-field', className)}\n      vAlign=\"start\"\n      hAlign=\"start\"\n      height=\"auto\"\n      gap=\"4px\"\n      {...props}\n    >\n      <FieldHeader\n        id={finalId}\n        label={label}\n        description={description}\n        required={required}\n      />\n      <FieldControl\n        errorMessage={errorMessage}\n        loading={loading}\n        locked={locked}\n        hAlign=\"start\"\n      >\n        <FieldStatusInput state={state} hAlign=\"start\">\n          {Control}\n        </FieldStatusInput>\n      </FieldControl>\n    </VStack>\n  );\n});\n"],"names":["idIndex","VField","React","label","description","errorMessage","Control","locked","loading","maxWidth","minWidth","className","id","required","props","ref","finalId","useState","hasError","labelId","descriptionId","state","jsxs","VStack","clsx","styles","jsx","FieldHeader","FieldControl","FieldStatusInput"],"mappings":";;;;;;;;AAgBA,IAAIA,IAAU;AACP,MAAMC,IAASC,EAAM,WAAW,SACrC;AAAA,EACE,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAUC;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,CAAO,IAAIC,EAAS,MAAML,KAAM,WAAWZ,GAAS,EAAE,GACvDkB,IAAW,EAAAb,GACXc,IAAU,GAAGH,CAAO,UACpBI,IAAgB,GAAGJ,CAAO,gBAC1BK,IAAQd,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAC7E,SACE,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,IAAG;AAAA,MACH,mBAAiBI;AAAA,MACjB,oBAAkBC;AAAA,MAClB,eAAab;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWgB,EAAK,cAAcC,EAAO,SAAS,GAAG,WAAWd,CAAS;AAAA,MACrE,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIX;AAAA,YACJ,OAAAb;AAAA,YACA,aAAAC;AAAA,YACA,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,cAAAvB;AAAA,YACA,SAAAG;AAAA,YACA,QAAAD;AAAA,YACA,QAAO;AAAA,YAEP,UAAA,gBAAAmB,EAACG,GAAA,EAAiB,OAAAR,GAAc,QAAO,SACpC,UAAAf,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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;6CAkD/B,CAAC"}
+{"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;6CA+C/B,CAAC"}

package/dist/form/field_set/field_set.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import i from "classnames";
+import { clsx as i } from "clsx";
 import "../../body_text.module-h4XQE2pC.js";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
@@ -11,30 +11,30 @@ 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 g = "_field-set_8e981d9", u = "_field-set-body_4cd3139", a = { "field-set": g, "field-set-body": u };
-let x = 0;
+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;
 const q = y.forwardRef(function({
   legend: l,
   startAdornments: d,
-  endAdornments: s,
-  className: c,
+  endAdornments: o,
+  className: a,
   children: n,
   ...t
 }, p) {
-  const o = `field-set-${S(() => x++, [])}`;
+  const s = `field-set-${S(() => u++, [])}`;
   return /* @__PURE__ */ r(
     m,
     {
       as: "fieldset",
-      "aria-labelledby": o,
+      "aria-labelledby": s,
       ref: p,
-      className: i(a["field-set"], c, "field-set"),
+      className: i(c["field-set"], a, "field-set"),
       ...t,
       children: [
         l && /* @__PURE__ */ r(
           b,
           {
-            id: o,
+            id: s,
             className: i("legend", "field-set-legend"),
             hAlign: "start",
             height: t.height,
@@ -42,19 +42,12 @@ const q = y.forwardRef(function({
               d,
               d && /* @__PURE__ */ e(f, { width: "8px" }),
               /* @__PURE__ */ e(h, { className: "field-set-legend-text", children: l }),
-              s && /* @__PURE__ */ e(f, {}),
-              s
+              o && /* @__PURE__ */ e(f, {}),
+              o
             ]
           }
         ),
-        /* @__PURE__ */ e(
-          m,
-          {
-            className: i("field-set-body", a["field-set-body"]),
-            ...t,
-            children: n
-          }
-        )
+        /* @__PURE__ */ e(m, { className: i("field-set-body", c["field-set-body"]), ...t, children: n })
       ]
     }
   );

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 { Title } 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 classnames from 'classnames';\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={classnames(styles['field-set'], className, 'field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={classnames('legend', 'field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <Title className=\"field-set-legend-text\">{legend}</Title>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack\n        className={classnames('field-set-body', styles['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","classnames","styles","HStack","jsx","Spacer","Title"],"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,EAAWC,EAAO,WAAW,GAAGT,GAAW,WAAW;AAAA,MAChE,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAW,UAAU,kBAAkB;AAAA,YAClD,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,cACxC,gBAAAD,EAACE,GAAA,EAAM,WAAU,yBAAyB,UAAAhB,GAAO;AAAA,cAChDE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY;AAAA,UAACJ;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,kBAAkBC,EAAO,gBAAgB,CAAC;AAAA,YAC/D,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 { Title } 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, 'field-set')}\n      {...props}\n    >\n      {legend && (\n        <HStack\n          id={labelId}\n          className={clsx('legend', 'field-set-legend')}\n          hAlign=\"start\"\n          height={props.height}\n        >\n          {startAdornments}\n          {startAdornments && <Spacer width=\"8px\" />}\n          <Title className=\"field-set-legend-text\">{legend}</Title>\n          {endAdornments && <Spacer />}\n          {endAdornments}\n        </HStack>\n      )}\n      <VStack className={clsx('field-set-body', styles['field-set-body'])} {...props}>\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","Title"],"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,WAAW;AAAA,MAC1D,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAL,KACC,gBAAAS;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,IAAIN;AAAA,YACJ,WAAWI,EAAK,UAAU,kBAAkB;AAAA,YAC5C,QAAO;AAAA,YACP,QAAQN,EAAM;AAAA,YAEb,UAAA;AAAA,cAAAJ;AAAA,cACAA,KAAmB,gBAAAa,EAACC,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,cACxC,gBAAAD,EAACE,GAAA,EAAM,WAAU,yBAAyB,UAAAhB,GAAO;AAAA,cAChDE,uBAAkBa,GAAA,EAAO;AAAA,cACzBb;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAY,EAACJ,GAAA,EAAO,WAAWC,EAAK,kBAAkBC,EAAO,gBAAgB,CAAC,GAAI,GAAGP,GACtE,UAAAD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/checkbox/checkbox.js

@@ -1,30 +1,30 @@
-import { jsx as i } from "react/jsx-runtime";
-import x from "classnames";
+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({
   style: a,
-  className: s,
-  width: r,
+  className: r,
+  width: s,
   height: b,
-  checked: e,
+  checked: c,
   inputRef: l,
-  onChange: c,
+  onChange: e,
   ...o
 }, n) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ x(
     "input",
     {
       ref: n,
-      "data-checked": e,
+      "data-checked": c,
       "data-is-disabled": o.disabled || !1,
-      checked: e,
+      checked: c,
       type: "checkbox",
       onChange: (t) => {
-        c && c(!!t.currentTarget.checked, t);
+        e && e(!!t.currentTarget.checked, t);
       },
       ...o,
-      className: x(s, h.checkbox, "checkbox"),
-      style: { width: r, height: b, ...a }
+      className: i(r, h.checkbox, "checkbox"),
+      style: { width: s, height: b, ...a }
     }
   );
 });

package/dist/inputs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './checkbox.module.css';\n\nexport interface CheckboxProps\n  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  height?: string;\n  checked?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Checkbox = React.forwardRef(function Checkbox(\n  {\n    style,\n    className,\n    width,\n    height,\n    checked,\n    inputRef,\n    onChange,\n    ...props\n  }: CheckboxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      ref={ref}\n      data-checked={checked}\n      data-is-disabled={props.disabled || false}\n      checked={checked}\n      type=\"checkbox\"\n      onChange={e => {\n        onChange && onChange(Boolean(e.currentTarget.checked), e);\n      }}\n      {...props}\n      className={classnames(className, styles.checkbox, 'checkbox')}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Checkbox","React","style","className","width","height","checked","inputRef","onChange","props","ref","jsx","e","classnames","styles"],"mappings":";;;oDAcaA,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,gBAAcJ;AAAA,MACd,oBAAkBG,EAAM,YAAY;AAAA,MACpC,SAAAH;AAAA,MACA,MAAK;AAAA,MACL,UAAU,CAAAM,MAAK;AACb,QAAAJ,KAAYA,EAAS,EAAQI,EAAE,cAAc,SAAUA,CAAC;AAAA,MAC1D;AAAA,MACC,GAAGH;AAAA,MACJ,WAAWI,EAAWV,GAAWW,EAAO,UAAU,UAAU;AAAA,MAC5D,OAAO,EAAE,OAAAV,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { HTMLAttributes } from 'react';\nimport styles from './checkbox.module.css';\n\nexport interface CheckboxProps\n  extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  height?: string;\n  checked?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  onChange?: (value: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Checkbox = React.forwardRef(function Checkbox(\n  {\n    style,\n    className,\n    width,\n    height,\n    checked,\n    inputRef,\n    onChange,\n    ...props\n  }: CheckboxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      ref={ref}\n      data-checked={checked}\n      data-is-disabled={props.disabled || false}\n      checked={checked}\n      type=\"checkbox\"\n      onChange={e => {\n        onChange && onChange(Boolean(e.currentTarget.checked), e);\n      }}\n      {...props}\n      className={clsx(className, styles.checkbox, 'checkbox')}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Checkbox","React","style","className","width","height","checked","inputRef","onChange","props","ref","jsx","e","clsx","styles"],"mappings":";;;oDAcaA,IAAWC,EAAM,WAAW,SACvC;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,gBAAcJ;AAAA,MACd,oBAAkBG,EAAM,YAAY;AAAA,MACpC,SAAAH;AAAA,MACA,MAAK;AAAA,MACL,UAAU,CAAAM,MAAK;AACb,QAAAJ,KAAYA,EAAS,EAAQI,EAAE,cAAc,SAAUA,CAAC;AAAA,MAC1D;AAAA,MACC,GAAGH;AAAA,MACJ,WAAWI,EAAKV,GAAWW,EAAO,UAAU,UAAU;AAAA,MACtD,OAAO,EAAE,OAAAV,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}

package/dist/inputs/color_input/color_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/color_input/color_input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAClD;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAc,EACd,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAc,EACd,QAAQ,EACR,QAAQ,EACR,SAAuB,EACvB,GAAG,KAAK,EACT,EAAE,eAAe,2CAmHjB"}
+{"version":3,"file":"color_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/color_input/color_input.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAClD;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAc,EACd,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAc,EACd,QAAQ,EACR,QAAQ,EACR,SAAuB,EACvB,GAAG,KAAK,EACT,EAAE,eAAe,2CA+GjB"}

package/dist/inputs/color_input/color_input.js

@@ -3,7 +3,7 @@ import { Box as m } from "../../stacks/box/box.js";
 import { HStack as h } from "../../stacks/h_stack.js";
 import { Spacer as s } from "../../stacks/spacer.js";
 import { ZStack as C } from "../../stacks/z_stack.js";
-import I from "classnames";
+import { clsx as I } from "clsx";
 import { useState as A, useRef as N, useLayoutEffect as P } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
@@ -26,24 +26,24 @@ function rr({
   hierarchy: k = "secondary",
   ...E
 }) {
-  const [t, a] = A(null), y = t != null, d = N(null);
-  function S(e) {
-    a(e.currentTarget);
+  const [e, a] = A(null), y = e != null, d = N(null);
+  function S(t) {
+    a(t.currentTarget);
   }
   function u() {
     a(null);
   }
   P(() => {
     requestAnimationFrame(() => {
-      t != null && d.current && d.current.focus();
+      e != null && d.current && d.current.focus();
     });
-  }, [t]);
-  function w(e) {
-    e.key === "Escape" && u();
+  }, [e]);
+  function w(t) {
+    t.key === "Escape" && u();
   }
-  function R(e) {
-    const o = e.rgb;
-    let l = e.hex;
+  function R(t) {
+    const o = t.rgb;
+    let l = t.hex;
     o.a != null ? l = `rgba(${o.r},${o.g},${o.b},${o.a})` : l = `rgb(${o.r},${o.g},${o.b})`, i && i(l);
   }
   return /* @__PURE__ */ n($, { children: [
@@ -80,11 +80,7 @@ function rr({
               onClick: S,
               width: "70px",
               maxWidth: "70px",
-              className: I(
-                f["color-input-select"],
-                "color-input-select",
-                "select"
-              ),
+              className: I(f["color-input-select"], "color-input-select", "select"),
               style: {
                 borderStartStartRadius: 0,
                 borderEndStartRadius: 0,
@@ -121,7 +117,7 @@ function rr({
     /* @__PURE__ */ r(
       j,
       {
-        anchorElement: t,
+        anchorElement: e,
         onClose: u,
         open: y,
         restoreFocus: !0,

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 classNames from 'classnames';\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={classNames(\n            styles['color-input-select'],\n            'color-input-select',\n            '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={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","closePicker","useLayoutEffect","processKeyInput","event","updateColor","rgb","color","jsxs","Fragment","HStack","jsx","ZStack","Input","Button","classNames","styles","Spacer","Box","Popper","ColorPicker"],"mappings":";;;;;;;;;;;;;;;;;AA2BO,SAASA,GAAW;AAAA,EACzB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAoB;AAClB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmC,IAAI,GAC3EC,IAASH,KAAiB,MAC1BI,IAAYC,EAA8B,IAAI;AAEpD,WAASC,EAAW,GAAwC;AAC1D,IAAAL,EAAiB,EAAE,aAAa;AAAA,EAClC;AAEA,WAASM,IAAc;AACrB,IAAAN,EAAiB,IAAI;AAAA,EACvB;AAEA,EAAAO,EAAgB,MAAM;AACpB,0BAAsB,MAAM;AAC1B,MAAIR,KAAiB,QACnBI,EAAU,WAAWA,EAAU,QAAQ,MAAA;AAAA,IAE3C,CAAC;AAAA,EACH,GAAG,CAACJ,CAAa,CAAC;AAElB,WAASS,EAAgBC,GAA4B;AACnD,IAAIA,EAAM,QAAQ,YAChBH,EAAA;AAAA,EAEJ;AAEA,WAASI,EAAYpB,GAAmB;AACtC,UAAMqB,IAAMrB,EAAM;AAClB,QAAIsB,IAAQtB,EAAM;AAElB,IAAIqB,EAAI,KAAK,OACXC,IAAQ,QAAQD,EAAI,CAAC,IAAIA,EAAI,CAAC,IAAIA,EAAI,CAAC,IAAIA,EAAI,CAAC,MAEhDC,IAAQ,OAAOD,EAAI,CAAC,IAAIA,EAAI,CAAC,IAAIA,EAAI,CAAC,KAGxCpB,KAAYA,EAASqB,CAAK;AAAA,EAC5B;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAArB;AAAA,QACA,UAAAE;AAAA,QACA,UAAAD;AAAA,QACA,WAAU;AAAA,QACT,GAAGG;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAkB,EAACC,GAAA,EAAO,OAAM,QACZ,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,UAAAzB;AAAA,cACA,OAAAH;AAAA,cACA,OAAO;AAAA,gBACL,oBAAoB;AAAA,gBACpB,sBAAsB;AAAA,gBACtB,WAAW;AAAA,gBACX,kBAAkB;AAAA,cAAA;AAAA,cAEpB,WAAU;AAAA,cACV,UAAAC;AAAA,YAAA;AAAA,UAAA,GAEJ;AAAA,UACA,gBAAAsB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,UAAA1B;AAAA,cACA,WAAAI;AAAA,cACA,SAASQ;AAAA,cACT,OAAM;AAAA,cACN,UAAS;AAAA,cACT,WAAWe;AAAA,gBACTC,EAAO,oBAAoB;AAAA,gBAC3B;AAAA,gBACA;AAAA,cAAA;AAAA,cAEF,OAAO;AAAA,gBACL,wBAAwB;AAAA,gBACxB,sBAAsB;AAAA,gBACtB,kBAAkB;AAAA,cAAA;AAAA,cAGpB,UAAA;AAAA,gBAAA,gBAAAR,EAACE,KAAO,QAAO,QAAO,KAAI,OAAM,QAAO,SACrC,UAAA;AAAA,kBAAA,gBAAAC,EAACM,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,kBACpB,gBAAAN;AAAA,oBAACO;AAAA,oBAAA;AAAA,sBACC,OAAM;AAAA,sBACN,QAAO;AAAA,sBACP,WAAWF,EAAO,eAAe;AAAA,sBACjC,OAAO,EAAE,cAAc,OAAO,UAAU,SAAA;AAAA,sBAExC,UAAA,gBAAAL;AAAA,wBAACO;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,OAAO,EAAE,iBAAiBjC,GAAO,cAAc,MAAA;AAAA,wBAAM;AAAA,sBAAA;AAAA,oBACtD;AAAA,kBAAA;AAAA,oCAEFgC,GAAA,CAAA,CAAO;AAAA,gBAAA,GACV;AAAA,gBACA,gBAAAN,EAACM,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAN;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,eAAAzB;AAAA,QACA,SAASO;AAAA,QACT,MAAMJ;AAAA,QACN,cAAY;AAAA,QACZ,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QAEjB,UAAA,gBAAAc;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,OAAOnC;AAAA,YACP,WAAWkB;AAAA,YACX,eAAeE;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"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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"}

package/dist/inputs/color_input/color_picker.js

@@ -2,21 +2,21 @@ import { jsx as o } from "react/jsx-runtime";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
-import f, { useRef as a, useLayoutEffect as n } from "react";
+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 u from "classnames";
+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 = f.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, p) {
-  const r = a(null), s = k(r, p);
-  return n(() => {
+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);
+  return a(() => {
     r.current && r.current.focus();
   }, []), /* @__PURE__ */ o(
     l,
     {
       tabIndex: 0,
-      ref: s,
+      ref: f,
       padding: "8px",
       height: "auto",
       width: "auto",

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 classNames from 'classnames';\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={classNames(styles['color-picker'], className)}\n      {...props}\n    >\n      <ChromePicker\n        className={styles['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","classNames","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,EAAWC,EAAO,cAAc,GAAGX,CAAS;AAAA,MACtD,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWD,EAAO,eAAe;AAAA,UACjC,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'], className)}\n      {...props}\n    >\n      <ChromePicker\n        className={styles['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,GAAGX,CAAS;AAAA,MAChD,GAAGC;AAAA,MAEJ,UAAA,gBAAAO;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAWD,EAAO,eAAe;AAAA,UACjC,OAAAb;AAAA,UACA,UAAUC;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/combo_box/combo_box.js

@@ -1,16 +1,16 @@
-import { jsxs as w, Fragment as D, jsx as S } from "react/jsx-runtime";
+import { jsxs as D, Fragment as L, jsx as S } from "react/jsx-runtime";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
-import L, { useRef as u, useState as C } from "react";
+import N, { useRef as s, useState as x } from "react";
 import { useForkRef as V } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import z from "classnames";
+import { clsx as z } from "clsx";
 import { SuggestionList as G } from "../suggestions/suggestion_list.js";
 import { Input as H } from "../input/input.js";
-const ee = L.forwardRef(function({
+const ee = N.forwardRef(function({
   onOptionSelect: a,
-  children: x = [],
+  children: C = [],
   onKeyDown: o,
   onKeyUp: m,
   value: c,
@@ -21,18 +21,18 @@ const ee = L.forwardRef(function({
   onMouseUp: g,
   ...i
 }, y) {
-  const A = u(!1), d = u(c), n = u(!1), [E, F] = C(null), f = u(null), [h, R] = C(!1), T = V(y, f);
+  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = V(y, f);
   function l() {
     R(!0);
   }
   function r() {
     n.current = !1, R(!1);
   }
-  function I(e, t, q) {
+  function I(e, t, w) {
     n.current = !0;
-    const s = f.current;
+    const u = f.current;
     requestAnimationFrame(() => {
-      s != null && (s.value = e, s.focus(), s.setSelectionRange(t, q));
+      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, w));
     }), i.onChange && i.onChange(e), r();
   }
   function M(e) {
@@ -50,13 +50,13 @@ const ee = L.forwardRef(function({
   function B(e) {
     e.key === "Enter" && (h ? r() : (l(), e.preventDefault())), d.current !== e.currentTarget.value && l(), m && m(e);
   }
-  function N(e) {
+  function U(e) {
     F(e.currentTarget), A.current = document.activeElement === e.currentTarget, p && p(e);
   }
-  function U(e) {
+  function q(e) {
     n.current && (n.current = !1, r()), l(), g && g(e);
   }
-  return /* @__PURE__ */ w(D, { children: [
+  return /* @__PURE__ */ D(L, { children: [
     /* @__PURE__ */ S(
       H,
       {
@@ -66,8 +66,8 @@ const ee = L.forwardRef(function({
         value: c,
         onKeyDown: j,
         onKeyUp: B,
-        onMouseDown: N,
-        onMouseUp: U
+        onMouseDown: U,
+        onMouseUp: q
       }
     ),
     h && /* @__PURE__ */ S(
@@ -80,7 +80,7 @@ const ee = L.forwardRef(function({
         onOptionSelect: M,
         noSuggestionMessage: k,
         haveValueAsOption: !0,
-        children: x
+        children: C
       }
     )
   ] });

package/dist/inputs/combo_box/combo_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={classNames(className, 'combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={value}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n          haveValueAsOption={true}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","valueRef","isClosingRef","anchorElement","setAnchorElement","useState","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","classNames","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={clsx(className, 'combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={value}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n          haveValueAsOption={true}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","valueRef","isClosingRef","anchorElement","setAnchorElement","useState","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","clsx","SuggestionList"],"mappings":";;;;;;;;;;AAcO,MAAMA,KAAWC,EAAM,WAAW,SACvC;AAAA,EACE,gBAAgBC;AAAA,EAChB,UAAAC,IAAW,CAAA;AAAA,EACX,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAsBC,EAAO,EAAK,GAClCC,IAAWD,EAAOT,CAAK,GACvBW,IAAeF,EAAO,EAAK,GAC3B,CAACG,GAAeC,CAAgB,IAAIC,EAAkC,IAAI,GAC1EC,IAAmBN,EAAgC,IAAI,GACvD,CAACO,GAAmBC,CAAoB,IAAIH,EAAS,EAAK,GAC1DI,IAAYC,EAAWZ,GAAKQ,CAAgB;AAElD,WAASK,IAAkB;AACzB,IAAAH,EAAqB,EAAI;AAAA,EAC3B;AAEA,WAASI,IAAmB;AAC1B,IAAAV,EAAa,UAAU,IACvBM,EAAqB,EAAK;AAAA,EAC5B;AAEA,WAASK,EACPtB,GACAuB,GACAC,GACA;AACA,IAAAb,EAAa,UAAU;AACvB,UAAMc,IAAQV,EAAiB;AAE/B,0BAAsB,MAAM;AAC1B,MAAIU,KAAS,SACXA,EAAM,QAAQzB,GACdyB,EAAM,MAAA,GACNA,EAAM,kBAAkBF,GAAgBC,CAAY;AAAA,IAExD,CAAC,GACDlB,EAAM,YAAYA,EAAM,SAASN,CAAK,GACtCqB,EAAA;AAAA,EACF;AAEA,WAASK,EAAgB1B,GAAe;AACtC,IAAAW,EAAa,UAAU;AACvB,UAAMc,IAAQV,EAAiB;AAE/B,IACEU,GAAM,MAAA,GAGRJ,EAAA,GACAzB,KAAsBA,EAAmBI,CAAK;AAAA,EAChD;AAEA,WAAS2B,EAAcC,GAA8C;AAGnE,QAFAlB,EAAS,UAAUkB,EAAM,cAAc,OAEnCjB,EAAa,SAAS;AACxB,MAAAA,EAAa,UAAU,IACvBb,KAAaA,EAAU8B,CAAK;AAC5B;AAAA,IACF;AAEA,IAAA9B,KAAaA,EAAU8B,CAAK;AAAA,EAC9B;AAEA,WAASC,EAAYD,GAA8C;AAGjE,IAFYA,EAAM,QAEN,YACNZ,IACFK,EAAA,KAEAD,EAAA,GACAQ,EAAM,eAAA,KAINlB,EAAS,YAAYkB,EAAM,cAAc,SAC3CR,EAAA,GAGFrB,KAAWA,EAAQ6B,CAAK;AAAA,EAC1B;AAEA,WAASE,EAAeF,GAA2C;AACjE,IAAAf,EAAiBe,EAAM,aAAa,GACpCpB,EAAoB,UAAU,SAAS,kBAAkBoB,EAAM,eAC/DxB,KAAeA,EAAYwB,CAAK;AAAA,EAClC;AAEA,WAASG,EAAcH,GAA2C;AAChE,IAAIjB,EAAa,YACfA,EAAa,UAAU,IACvBU,EAAA,IAGFD,EAAA,GACAf,KAAaA,EAAUuB,CAAK;AAAA,EAC9B;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKjB;AAAA,QACL,WAAWkB,EAAKjC,GAAW,iBAAiB;AAAA,QAC3C,GAAGG;AAAA,QACJ,OAAAN;AAAA,QACA,WAAW2B;AAAA,QACX,SAASE;AAAA,QACT,aAAaC;AAAA,QACb,WAAWC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZf,KACC,gBAAAkB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,eAAAzB;AAAA,QACA,SAASU;AAAA,QACT,OAAAtB;AAAA,QACA,iBAAAE;AAAA,QACA,gBAAgBwB;AAAA,QAChB,qBAAqBzB;AAAA,QACrB,mBAAmB;AAAA,QAElB,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ,CAAC;"}