@tcn/ui 0.3.1 → 0.3.3

package/dist/h_panel.css

@@ -1 +1 @@
-._panel-stack_f1896f3{width:100%;height:100%;overflow:auto}
+@layer tcn-system{:where(._panel-stack_f1896f3){width:100%;height:100%;overflow:auto}}

package/dist/header.css

@@ -1 +1 @@
-._header_3155fa4{width:100%;min-height:0;padding:var(--padding) var(--padding-large);gap:var(--gap)}
+@layer tcn-system{:where(._header_3155fa4){width:100%;min-height:0;padding:var(--padding) var(--padding-large);gap:var(--gap)}}

package/dist/headline.css

@@ -1 +1 @@
-._headline_9a99308{margin:0;padding:0;line-height:1.2;letter-spacing:-.01em}._headline_9a99308[data-selectable=true]{-webkit-user-select:auto;user-select:auto}._headline_9a99308[data-selectable=false]{-webkit-user-select:none;user-select:none}._headline_9a99308[data-size=sm]{font-size:calc(14px * var(--scalar, 1));line-height:1.3}._headline_9a99308[data-size=md]{font-size:calc(16px * var(--scalar, 1));line-height:1.25}._headline_9a99308[data-size=lg]{font-size:calc(20px * var(--scalar, 1));line-height:1.2}._headline_9a99308[data-hierarchy=primary]{opacity:1}._headline_9a99308[data-hierarchy=secondary]{opacity:.85}._headline_9a99308[data-hierarchy=tertiary]{opacity:.7}._headline_9a99308[data-emphasis=strong]{font-weight:700}._headline_9a99308[data-emphasis=normal]{font-weight:600}._headline_9a99308[data-emphasis=light]{font-weight:400}
+@layer tcn-system{:where(._headline_9a99308){margin:0;padding:0;line-height:1.2;letter-spacing:-.01em}:where(._headline_9a99308[data-selectable=true]){-webkit-user-select:auto;user-select:auto}:where(._headline_9a99308[data-selectable=false]){-webkit-user-select:none;user-select:none}:where(._headline_9a99308[data-size=sm]){font-size:calc(14px * var(--scalar, 1));line-height:1.3}:where(._headline_9a99308[data-size=md]){font-size:calc(16px * var(--scalar, 1));line-height:1.25}:where(._headline_9a99308[data-size=lg]){font-size:calc(20px * var(--scalar, 1));line-height:1.2}:where(._headline_9a99308[data-hierarchy=primary]){opacity:1}:where(._headline_9a99308[data-hierarchy=secondary]){opacity:.85}:where(._headline_9a99308[data-hierarchy=tertiary]){opacity:.7}:where(._headline_9a99308[data-emphasis=strong]){font-weight:700}:where(._headline_9a99308[data-emphasis=normal]){font-weight:600}:where(._headline_9a99308[data-emphasis=light]){font-weight:400}}

package/dist/input.css

@@ -1 +1 @@
-:root{--disabled-input-color: var(--status-disabled, rgba(0, 0, 0, .3));--disabled-input-background-color: rgba(0, 0, 0, .05)}._input_a16553f{font-size:calc(14px * var(--scalar, 1));height:calc(26px * var(--scalar, 1));width:100%;background-color:#fff;color:var(--font-color);border:1px solid #aaa;border-radius:4px;padding:0;padding-inline:4px;box-sizing:border-box;font-family:Lato,Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}._input_a16553f[data-is-disabled=false]:hover{border:1px solid var(--accent-color)}._input_a16553f:focus{outline:none;border:1px solid var(--accent-color)}._input_a16553f:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-color) 40%,transparent)}._input_a16553f[data-is-disabled=true]{cursor:not-allowed;color:var(--disabled-input-color);background-color:var(--disabled-input-background-color);border-color:var(--status-disabled)}._input_a16553f[data-is-disabled=true]::placeholder{color:var(--disabled-input-color)}.small-text ._input_a16553f{font-size:12px;height:22px}.medium-small-text ._input_a16553f{font-size:14px;height:24px}.medium-text ._input_a16553f{font-size:16px;height:26px}.medium-large-text ._input_a16553f{font-size:18px;height:28px}.large-text ._input_a16553f{font-size:20px;height:30px}._input_a16553f[type=color]{cursor:pointer;padding-block:4px;font-size:12px}._input_a16553f[type=file]{cursor:pointer;padding-block:3px;font-size:12px}
+@layer tcn-system{:root{--disabled-input-color: var(--status-disabled, rgba(0, 0, 0, .3));--disabled-input-background-color: rgba(0, 0, 0, .05)}:where(._input_a16553f){font-size:calc(14px * var(--scalar, 1));height:calc(26px * var(--scalar, 1));width:100%;background-color:#fff;color:var(--font-color);border:1px solid #aaa;border-radius:4px;padding:0;padding-inline:4px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:where(._input_a16553f[data-is-disabled=false]:hover){border:1px solid var(--accent-color)}:where(._input_a16553f:focus){outline:none;border:1px solid var(--accent-color)}:where(._input_a16553f:focus-visible){outline:3px solid color-mix(in srgb,var(--accent-color) 40%,transparent)}:where(._input_a16553f[data-is-disabled=true]){cursor:not-allowed;color:var(--disabled-input-color);background-color:var(--disabled-input-background-color);border-color:var(--status-disabled)}:where(._input_a16553f[data-is-disabled=true]::placeholder){color:var(--disabled-input-color)}:where(._input_a16553f[type=color]){cursor:pointer;padding-block:4px;font-size:12px}:where(._input_a16553f[type=file]){cursor:pointer;padding-block:3px;font-size:12px}}

package/dist/inputs/checkbox/checkbox.js

@@ -5,26 +5,26 @@ import '../../checkbox.css';const i = "_checkbox_cb77818", l = { checkbox: i },
   style: a,
   className: r,
   width: s,
-  height: b,
-  checked: e,
+  height: n,
+  checked: c,
   inputRef: k,
-  onChange: c,
-  ...o
-}, n) {
+  onChange: e,
+  ...t
+}, b) {
   return /* @__PURE__ */ x(
     "input",
     {
-      ref: n,
-      "data-checked": e,
-      "data-is-disabled": o.disabled || !1,
-      checked: e,
+      ref: b,
+      "data-checked": c,
+      "data-is-disabled": t.disabled || !1,
+      checked: c,
       type: "checkbox",
-      onChange: (t) => {
-        c && c(!!t.currentTarget.checked, t);
+      onChange: (o) => {
+        e && e(!!o.currentTarget.checked, o);
       },
-      ...o,
-      className: d(r, l.checkbox, "checkbox"),
-      style: { width: s, height: b, ...a }
+      ...t,
+      className: d(r, l.checkbox, "tcn-checkbox"),
+      style: { width: s, height: n, ...a }
     }
   );
 });

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

@@ -1 +1 @@
-{"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;"}
+{"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, 'tcn-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,cAAc;AAAA,MAC1D,OAAO,EAAE,OAAAV,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}

package/dist/inputs/checkbox/checkbox_row.d.ts

@@ -4,5 +4,5 @@ export interface CheckboxRowProps extends Omit<CheckboxProps, 'onChange' | 'chec
     presenter?: FieldPresenter<boolean>;
     id: string;
 }
-export declare function CheckboxRow({ presenter, id, ...props }: CheckboxRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxRow({ presenter, id, className, ...props }: CheckboxRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=checkbox_row.d.ts.map

package/dist/inputs/checkbox/checkbox_row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox_row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAGhF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC;IACnF,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAiBxE"}
+{"version":3,"file":"checkbox_row.d.ts","sourceRoot":"","sources":["../../../src/inputs/checkbox/checkbox_row.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gDAAgD,CAAC;AAIhF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,SAAS,CAAC;IACnF,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAuBnF"}

package/dist/inputs/checkbox/checkbox_row.js

@@ -1,16 +1,27 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { useSignalValue as c } from "@tcn/state";
-import { Checkbox as f } from "./checkbox.js";
-import { FieldPresenter as u } from "../../form/field_presenters/field_presenter.js";
-import { HField as p } from "../../form/field/h_field/h_field.js";
-function C({ presenter: e, id: t, ...n }) {
-  const [r] = m(() => e ?? new u("Label", !1)), { label: i, value: a, description: l, error: s } = c(
+import { useSignalValue as f } from "@tcn/state";
+import { Checkbox as u } from "./checkbox.js";
+import { FieldPresenter as p } from "../../form/field_presenters/field_presenter.js";
+import { HField as d } from "../../form/field/h_field/h_field.js";
+import h from "clsx";
+function P({ presenter: e, id: t, className: n, ...a }) {
+  const [r] = m(() => e ?? new p("Label", !1)), { label: i, value: l, description: s, error: c } = f(
     r.stateBroadcast
   );
-  return /* @__PURE__ */ o(p, { id: t, label: i, description: l, errorMessage: s, children: /* @__PURE__ */ o(f, { ...n, checked: a, onChange: r.setValue }) });
+  return /* @__PURE__ */ o(
+    d,
+    {
+      id: t,
+      label: i,
+      className: h("tcn-checkbox-row", n),
+      description: s,
+      errorMessage: c,
+      children: /* @__PURE__ */ o(u, { ...a, checked: l, onChange: r.setValue })
+    }
+  );
 }
 export {
-  C as CheckboxRow
+  P as CheckboxRow
 };
 //# sourceMappingURL=checkbox_row.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox_row.js","sources":["../../../src/inputs/checkbox/checkbox_row.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { Checkbox, CheckboxProps } from './checkbox.js';\nimport { FieldPresenter } from '../../form/field_presenters/field_presenter.js';\nimport { HField } from '../../form/field/h_field/h_field.js';\n\nexport interface CheckboxRowProps extends Omit<CheckboxProps, 'onChange' | 'checked'> {\n  presenter?: FieldPresenter<boolean>;\n  id: string;\n}\n\nexport function CheckboxRow({ presenter, id, ...props }: CheckboxRowProps) {\n  const [finalPresenter] = useState(() => {\n    if (presenter == null) {\n      return new FieldPresenter<boolean>('Label', false);\n    }\n    return presenter;\n  });\n\n  const { label, value, description, error } = useSignalValue(\n    finalPresenter.stateBroadcast\n  );\n\n  return (\n    <HField id={id} label={label} description={description} errorMessage={error}>\n      <Checkbox {...props} checked={value} onChange={finalPresenter.setValue} />\n    </HField>\n  );\n}\n"],"names":["CheckboxRow","presenter","id","props","finalPresenter","useState","FieldPresenter","label","value","description","error","useSignalValue","HField","jsx","Checkbox"],"mappings":";;;;;;AAWO,SAASA,EAAY,EAAE,WAAAC,GAAW,IAAAC,GAAI,GAAGC,KAA2B;AACzE,QAAM,CAACC,CAAc,IAAIC,EAAS,MAC5BJ,KACK,IAAIK,EAAwB,SAAS,EAAK,CAGpD,GAEK,EAAE,OAAAC,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUC;AAAA,IAC3CP,EAAe;AAAA,EAAA;AAGjB,2BACGQ,GAAA,EAAO,IAAAV,GAAQ,OAAAK,GAAc,aAAAE,GAA0B,cAAcC,GACpE,UAAA,gBAAAG,EAACC,GAAA,EAAU,GAAGX,GAAO,SAASK,GAAO,UAAUJ,EAAe,UAAU,GAC1E;AAEJ;"}
+{"version":3,"file":"checkbox_row.js","sources":["../../../src/inputs/checkbox/checkbox_row.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { Checkbox, CheckboxProps } from './checkbox.js';\nimport { FieldPresenter } from '../../form/field_presenters/field_presenter.js';\nimport { HField } from '../../form/field/h_field/h_field.js';\nimport clsx from 'clsx';\n\nexport interface CheckboxRowProps extends Omit<CheckboxProps, 'onChange' | 'checked'> {\n  presenter?: FieldPresenter<boolean>;\n  id: string;\n}\n\nexport function CheckboxRow({ presenter, id, className, ...props }: CheckboxRowProps) {\n  const [finalPresenter] = useState(() => {\n    if (presenter == null) {\n      return new FieldPresenter<boolean>('Label', false);\n    }\n    return presenter;\n  });\n\n  const { label, value, description, error } = useSignalValue(\n    finalPresenter.stateBroadcast\n  );\n\n  return (\n    <HField\n      id={id}\n      label={label}\n      className={clsx('tcn-checkbox-row', className)}\n      description={description}\n      errorMessage={error}\n    >\n      <Checkbox {...props} checked={value} onChange={finalPresenter.setValue} />\n    </HField>\n  );\n}\n"],"names":["CheckboxRow","presenter","id","className","props","finalPresenter","useState","FieldPresenter","label","value","description","error","useSignalValue","jsx","HField","clsx","Checkbox"],"mappings":";;;;;;;AAYO,SAASA,EAAY,EAAE,WAAAC,GAAW,IAAAC,GAAI,WAAAC,GAAW,GAAGC,KAA2B;AACpF,QAAM,CAACC,CAAc,IAAIC,EAAS,MAC5BL,KACK,IAAIM,EAAwB,SAAS,EAAK,CAGpD,GAEK,EAAE,OAAAC,GAAO,OAAAC,GAAO,aAAAC,GAAa,OAAAC,MAAUC;AAAA,IAC3CP,EAAe;AAAA,EAAA;AAGjB,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAAZ;AAAA,MACA,OAAAM;AAAA,MACA,WAAWO,EAAK,oBAAoBZ,CAAS;AAAA,MAC7C,aAAAO;AAAA,MACA,cAAcC;AAAA,MAEd,UAAA,gBAAAE,EAACG,KAAU,GAAGZ,GAAO,SAASK,GAAO,UAAUJ,EAAe,SAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAG9E;"}

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,2CA+GjB"}
+{"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"}

package/dist/inputs/color_input/color_input.js

@@ -1,9 +1,9 @@
-import { jsxs as n, Fragment as $, jsx as r } from "react/jsx-runtime";
+import { jsxs as n, Fragment as C, jsx as r } from "react/jsx-runtime";
 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 { clsx as I } from "clsx";
+import { ZStack as I } from "../../stacks/z_stack.js";
+import { clsx as f } 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";
@@ -14,20 +14,20 @@ import "../../actions/button/select_group/single_select_group.js";
 import { ColorPicker as B } from "./color_picker.js";
 import { Input as F } from "../input/input.js";
 import { Popper as j } from "../../overlay/popper/legacy/popper.js";
-import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", f = { "checker-board": z, "color-input-select": K };
+import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", x = { "checker-board": z, "color-input-select": K };
 function rr({
   value: c = "#000",
   onChange: i,
   onError: O,
   disabled: p,
-  width: x = "100%",
-  maxWidth: g,
-  minWidth: b,
-  hierarchy: k = "secondary",
-  ...E
+  width: g = "100%",
+  maxWidth: b,
+  minWidth: k,
+  hierarchy: E = "secondary",
+  ...y
 }) {
-  const [e, a] = A(null), y = e != null, d = N(null);
-  function S(t) {
+  const [e, a] = A(null), S = e != null, d = N(null);
+  function w(t) {
     a(t.currentTarget);
   }
   function u() {
@@ -38,26 +38,26 @@ function rr({
       e != null && d.current && d.current.focus();
     });
   }, [e]);
-  function w(t) {
+  function R(t) {
     t.key === "Escape" && u();
   }
-  function R(t) {
+  function $(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: [
+  return /* @__PURE__ */ n(C, { children: [
     /* @__PURE__ */ n(
       h,
       {
         height: "auto",
-        width: x,
-        minWidth: b,
-        maxWidth: g,
-        className: "color-input-wrapper",
-        ...E,
+        width: g,
+        minWidth: k,
+        maxWidth: b,
+        className: "tcn-color-input-wrapper",
+        ...y,
         children: [
-          /* @__PURE__ */ r(C, { width: "flex", children: /* @__PURE__ */ r(
+          /* @__PURE__ */ r(I, { width: "flex", children: /* @__PURE__ */ r(
             F,
             {
               disabled: p,
@@ -68,7 +68,7 @@ function rr({
                 textAlign: "start",
                 paddingInlineEnd: "8px"
               },
-              className: "color-input",
+              className: "tcn-color-input",
               onChange: i
             }
           ) }),
@@ -76,11 +76,15 @@ function rr({
             _,
             {
               disabled: p,
-              hierarchy: k,
-              onClick: S,
+              hierarchy: E,
+              onClick: w,
               width: "70px",
               maxWidth: "70px",
-              className: I(f["color-input-select"], "color-input-select", "select"),
+              className: f(
+                x["color-input-select"],
+                "tcn-color-input-select",
+                "tcn-select"
+              ),
               style: {
                 borderStartStartRadius: 0,
                 borderEndStartRadius: 0,
@@ -94,7 +98,7 @@ function rr({
                     {
                       width: "flex",
                       height: "30px",
-                      className: f["checker-board"],
+                      className: f(x["checker-board"], "tcn-checker-board"),
                       style: { borderRadius: "2px", overflow: "hidden" },
                       children: /* @__PURE__ */ r(
                         m,
@@ -119,7 +123,7 @@ function rr({
       {
         anchorElement: e,
         onClose: u,
-        open: y,
+        open: S,
         restoreFocus: !0,
         horizontalAnchor: "end",
         horizontalOrigin: "end",
@@ -127,8 +131,8 @@ function rr({
           B,
           {
             color: c,
-            onKeyDown: w,
-            onColorChange: R
+            onKeyDown: R,
+            onColorChange: $
           }
         )
       }

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

@@ -1 +1 @@
-{"version":3,"file":"color_input.js","sources":["../../../src/inputs/color_input/color_input.tsx"],"sourcesContent":["import { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { HTMLAttributes } from 'react';\nimport { ColorState } from 'react-color';\nimport { Button } from '../../actions/index.js';\nimport { ColorPicker } from './color_picker.js';\nimport { Input } from '../input/input.js';\nimport styles from './color_input.module.css';\n\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nexport interface ColorInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: string;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  hierarchy?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function ColorInput({\n  value = '#000',\n  onChange,\n  onError,\n  disabled,\n  width = '100%',\n  maxWidth,\n  minWidth,\n  hierarchy = 'secondary',\n  ...props\n}: ColorInputProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = anchorElement != null;\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n\n  function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(e.currentTarget);\n  }\n\n  function closePicker() {\n    setAnchorElement(null);\n  }\n\n  useLayoutEffect(() => {\n    requestAnimationFrame(() => {\n      if (anchorElement != null) {\n        pickerRef.current && pickerRef.current.focus();\n      }\n    });\n  }, [anchorElement]);\n\n  function processKeyInput(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closePicker();\n    }\n  }\n\n  function updateColor(value: ColorState) {\n    const rgb = value.rgb;\n    let color = value.hex;\n\n    if (rgb.a != null) {\n      color = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;\n    } else {\n      color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n    }\n\n    onChange && onChange(color);\n  }\n\n  return (\n    <>\n      <HStack\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"color-input-wrapper\"\n        {...props}\n      >\n        <ZStack width=\"flex\">\n          <Input\n            disabled={disabled}\n            value={value}\n            style={{\n              borderEndEndRadius: 0,\n              borderStartEndRadius: 0,\n              textAlign: 'start',\n              paddingInlineEnd: '8px',\n            }}\n            className=\"color-input\"\n            onChange={onChange}\n          />\n        </ZStack>\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(styles['color-input-select'], 'color-input-select', 'select')}\n          style={{\n            borderStartStartRadius: 0,\n            borderEndStartRadius: 0,\n            paddingInlineEnd: 0,\n          }}\n        >\n          <HStack height=\"14px\" gap=\"4px\" hAlign=\"start\">\n            <Spacer width=\"4px\" />\n            <Box\n              width=\"flex\"\n              height=\"30px\"\n              className={styles['checker-board']}\n              style={{ borderRadius: '2px', overflow: 'hidden' }}\n            >\n              <Box\n                height=\"100%\"\n                style={{ backgroundColor: value, borderRadius: '2px' }}\n              ></Box>\n            </Box>\n            <Spacer />\n          </HStack>\n          <Spacer width=\"4px\" />\n        </Button>\n      </HStack>\n      <Popper\n        anchorElement={anchorElement}\n        onClose={closePicker}\n        open={isOpen}\n        restoreFocus\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n      >\n        <ColorPicker\n          color={value}\n          onKeyDown={processKeyInput}\n          onColorChange={updateColor}\n        />\n      </Popper>\n    </>\n  );\n}\n"],"names":["ColorInput","value","onChange","onError","disabled","width","maxWidth","minWidth","hierarchy","props","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","updateColor","rgb","color","jsxs","Fragment","HStack","jsx","ZStack","Input","Button","clsx","styles","Spacer","Box","Popper","ColorPicker"],"mappings":"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"}
+{"version":3,"file":"color_input.js","sources":["../../../src/inputs/color_input/color_input.tsx"],"sourcesContent":["import { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { HTMLAttributes } from 'react';\nimport { ColorState } from 'react-color';\nimport { Button } from '../../actions/index.js';\nimport { ColorPicker } from './color_picker.js';\nimport { Input } from '../input/input.js';\nimport styles from './color_input.module.css';\n\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nexport interface ColorInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: string;\n  disabled?: boolean;\n  onChange?: (color: string) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  hierarchy?: 'primary' | 'secondary' | 'tertiary';\n}\n\nexport function ColorInput({\n  value = '#000',\n  onChange,\n  onError,\n  disabled,\n  width = '100%',\n  maxWidth,\n  minWidth,\n  hierarchy = 'secondary',\n  ...props\n}: ColorInputProps) {\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const isOpen = anchorElement != null;\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n\n  function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(e.currentTarget);\n  }\n\n  function closePicker() {\n    setAnchorElement(null);\n  }\n\n  useLayoutEffect(() => {\n    requestAnimationFrame(() => {\n      if (anchorElement != null) {\n        pickerRef.current && pickerRef.current.focus();\n      }\n    });\n  }, [anchorElement]);\n\n  function processKeyInput(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closePicker();\n    }\n  }\n\n  function updateColor(value: ColorState) {\n    const rgb = value.rgb;\n    let color = value.hex;\n\n    if (rgb.a != null) {\n      color = `rgba(${rgb.r},${rgb.g},${rgb.b},${rgb.a})`;\n    } else {\n      color = `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n    }\n\n    onChange && onChange(color);\n  }\n\n  return (\n    <>\n      <HStack\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"tcn-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=\"tcn-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(\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      </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":";;;;;;;;;;;;;;;;;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,EAAWC,GAAwC;AAC1D,IAAAN,EAAiBM,EAAE,aAAa;AAAA,EAClC;AAEA,WAASC,IAAc;AACrB,IAAAP,EAAiB,IAAI;AAAA,EACvB;AAEA,EAAAQ,EAAgB,MAAM;AACpB,0BAAsB,MAAM;AAC1B,MAAIT,KAAiB,QACnBI,EAAU,WAAWA,EAAU,QAAQ,MAAA;AAAA,IAE3C,CAAC;AAAA,EACH,GAAG,CAACJ,CAAa,CAAC;AAElB,WAASU,EAAgBC,GAA4B;AACnD,IAAIA,EAAM,QAAQ,YAChBH,EAAA;AAAA,EAEJ;AAEA,WAASI,EAAYrB,GAAmB;AACtC,UAAMsB,IAAMtB,EAAM;AAClB,QAAIuB,IAAQvB,EAAM;AAElB,IAAIsB,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,KAGxCrB,KAAYA,EAASsB,CAAK;AAAA,EAC5B;AAEA,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAAtB;AAAA,QACA,UAAAE;AAAA,QACA,UAAAD;AAAA,QACA,WAAU;AAAA,QACT,GAAGG;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAmB,EAACC,GAAA,EAAO,OAAM,QACZ,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,UAAA1B;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,gBAAAuB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,UAAA3B;AAAA,cACA,WAAAI;AAAA,cACA,SAASQ;AAAA,cACT,OAAM;AAAA,cACN,UAAS;AAAA,cACT,WAAWgB;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,WAAWH,EAAKC,EAAO,eAAe,GAAG,mBAAmB;AAAA,sBAC5D,OAAO,EAAE,cAAc,OAAO,UAAU,SAAA;AAAA,sBAExC,UAAA,gBAAAL;AAAA,wBAACO;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,OAAO,EAAE,iBAAiBlC,GAAO,cAAc,MAAA;AAAA,wBAAM;AAAA,sBAAA;AAAA,oBACtD;AAAA,kBAAA;AAAA,oCAEFiC,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,eAAA1B;AAAA,QACA,SAASQ;AAAA,QACT,MAAML;AAAA,QACN,cAAY;AAAA,QACZ,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QAEjB,UAAA,gBAAAe;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,OAAOpC;AAAA,YACP,WAAWmB;AAAA,YACX,eAAeE;AAAA,UAAA;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/inputs/color_input/color_picker.js

@@ -2,32 +2,32 @@ 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 s, { useRef as n, useLayoutEffect as a } from "react";
-import { useForkRef as k } from "../../utils/hooks/use_fork_ref.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 { ZStack as l } from "../../stacks/z_stack.js";
-import { clsx as u } from "clsx";
-import { ChromePicker as d } from "react-color";
-import '../../color_picker.css';const h = "_color-picker_4757d5a", R = "_chrome-picker_2f64060", e = { "color-picker": h, "chrome-picker": R }, F = s.forwardRef(function({ color: c, onColorChange: t, className: i, ...m }, f) {
-  const r = n(null), p = k(r, f);
-  return a(() => {
+import { ZStack as u } from "../../stacks/z_stack.js";
+import { clsx as e } from "clsx";
+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 }, F = 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();
   }, []), /* @__PURE__ */ o(
-    l,
+    u,
     {
       tabIndex: 0,
-      ref: p,
+      ref: n,
       padding: "8px",
       height: "auto",
       width: "auto",
-      className: u(e["color-picker"], i),
-      ...m,
+      className: e(c["color-picker"], "tcn-color-picker", m),
+      ...p,
       children: /* @__PURE__ */ o(
-        d,
+        h,
         {
-          className: e["chrome-picker"],
-          color: c,
-          onChange: t
+          className: e(c["chrome-picker"], "tcn-chrome-picker"),
+          color: t,
+          onChange: i
         }
       )
     }

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'], 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;"}
+{"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;"}

package/dist/inputs/combo_box/combo_box.js

@@ -61,7 +61,7 @@ const ee = L.forwardRef(function({
       G,
       {
         ref: T,
-        className: V(b, "combo-box-input"),
+        className: V(b, "tcn-combo-box-input"),
         ...i,
         value: c,
         onKeyDown: j,

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 { 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":"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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, 'tcn-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":"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"}

package/dist/inputs/date_picker/date_picker.js

@@ -18,7 +18,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   disabled: h,
   onChange: k,
   onError: x,
-  showTime: s = !1,
+  showTime: c = !1,
   min: g = null,
   max: b = null,
   minVisibleTimeInMilliseconds: m,
@@ -32,8 +32,8 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   const [F, I] = B(0), M = L(!1), j = O((t, o) => {
     I(o);
   }), [e] = B(() => {
-    const t = /* @__PURE__ */ new Date(), o = i == null ? t.getFullYear() : i.getFullYear(), c = i == null ? t.getMonth() : i.getMonth();
-    return new E(i, o, c, s);
+    const t = /* @__PURE__ */ new Date(), o = i == null ? t.getFullYear() : i.getFullYear(), s = i == null ? t.getMonth() : i.getMonth();
+    return new E(i, o, s, c);
   }), a = y(e.stateBroadcast), z = y(e.valueBroadcast), N = a.error;
   return _((t) => {
     N !== t && x && x(t);
@@ -42,8 +42,8 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   }, e.valueBroadcast), r(() => {
     e.initialize();
   }, [e]), r(() => {
-    e.setShowTime(s);
-  }, [e, s]), r(() => {
+    e.setShowTime(c);
+  }, [e, c]), r(() => {
     e.setMinDate(g);
   }, [e, g]), r(() => {
     e.setMaxDate(b);
@@ -63,7 +63,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
       ref: H,
       width: "auto",
       height: "auto",
-      className: V(w["date-picker"], "date-picker"),
+      className: V(w["date-picker"], "tcn-date-picker"),
       tabIndex: 0,
       children: [
         /* @__PURE__ */ l(
@@ -73,7 +73,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
             inline: !0,
             height: "auto",
             width: "auto",
-            className: V(w["date-picker-box"], "date-picker-box"),
+            className: V(w["date-picker-box"], "tcn-date-picker-box"),
             "data-is-disabled": h,
             children: [
               /* @__PURE__ */ l(u, { height: "auto", children: [
@@ -85,7 +85,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
             ]
           }
         ),
-        s && /* @__PURE__ */ l(T, { children: [
+        c && /* @__PURE__ */ l(T, { children: [
           /* @__PURE__ */ n(R, { width: "8px" }),
           /* @__PURE__ */ n(
             G,
@@ -98,8 +98,8 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
               maxVisibleTimeInMilliseconds: a.maxVisibleTimeInMilliseconds,
               intervalInMinutes: a.timeIntervalInMinutes,
               disabled: h,
-              onSelect: (t, o, c) => {
-                e.setTime(t, o, c), S && S(t, o, c);
+              onSelect: (t, o, s) => {
+                e.setTime(t, o, s), S && S(t, o, s);
               }
             }
           )

package/dist/inputs/date_picker/date_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":"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"}
+{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'tcn-date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":"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"}

package/dist/inputs/date_picker/date_picker_body.js

@@ -11,7 +11,7 @@ function j({ presenter: o, countryCode: p }) {
   const { visibleDates: i } = n(o.stateBroadcast), a = [];
   for (let t = 0; t < i.length; t += 7)
     a.push(i.slice(t, t + 7));
-  return /* @__PURE__ */ h(d, { height: "auto", width: "auto", className: "date-picker-body", children: [
+  return /* @__PURE__ */ h(d, { height: "auto", width: "auto", className: "tcn-date-picker-body", children: [
     /* @__PURE__ */ r(m, { height: "auto", width: "auto", children: new Array(7).fill(0).map((t, e) => /* @__PURE__ */ r(k, { countryCode: p, dayOfTheWeek: e }, e)) }),
     /* @__PURE__ */ r(c, { height: "2px" }),
     a.map((t, e) => /* @__PURE__ */ h(f.Fragment, { children: [

package/dist/inputs/date_picker/date_picker_body.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_body.js","sources":["../../../src/inputs/date_picker/date_picker_body.tsx"],"sourcesContent":["import React from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { CalendarDate } from '../../utils/calendar/calendar_date.js';\nimport { DatePickerDate } from './date_picker_date.js';\nimport { DatePickerDay } from './date_picker_day.js';\nimport type { DatePickerPresenter } from './date_picker_presenter.js';\n\nexport interface DatePickerBodyProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps) {\n  const { visibleDates } = useSignalValue(presenter.stateBroadcast);\n  const rows: CalendarDate[][] = [];\n\n  for (let i = 0; i < visibleDates.length; i += 7) {\n    rows.push(visibleDates.slice(i, i + 7));\n  }\n\n  return (\n    <VStack height=\"auto\" width=\"auto\" className=\"date-picker-body\">\n      <HStack height=\"auto\" width=\"auto\">\n        {new Array(7).fill(0).map((_, index) => {\n          return (\n            <DatePickerDay key={index} countryCode={countryCode} dayOfTheWeek={index} />\n          );\n        })}\n      </HStack>\n      <Spacer height=\"2px\" />\n      {rows.map((dates, index) => {\n        return (\n          <React.Fragment key={index}>\n            <HStack key={index} height=\"auto\" width=\"auto\">\n              {dates.map((date, index) => {\n                return (\n                  <Box width=\"flex\" key={index} height=\"auto\">\n                    <DatePickerDate date={date} presenter={presenter} />\n                  </Box>\n                );\n              })}\n            </HStack>\n            <Spacer height=\"1px\" />\n          </React.Fragment>\n        );\n      })}\n    </VStack>\n  );\n}\n"],"names":["DatePickerBody","presenter","countryCode","visibleDates","useSignalValue","rows","i","VStack","jsx","HStack","_","index","DatePickerDay","Spacer","dates","jsxs","React","date","Box","DatePickerDate"],"mappings":";;;;;;;;;AAgBO,SAASA,EAAe,EAAE,WAAAC,GAAW,aAAAC,KAAoC;AAC9E,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAeH,EAAU,cAAc,GAC1DI,IAAyB,CAAA;AAE/B,WAASC,IAAI,GAAGA,IAAIH,EAAa,QAAQG,KAAK;AAC5C,IAAAD,EAAK,KAAKF,EAAa,MAAMG,GAAGA,IAAI,CAAC,CAAC;AAGxC,2BACGC,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,WAAU,oBAC3C,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAM,QACzB,UAAA,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,GAAGC,MAE1B,gBAAAH,EAACI,GAAA,EAA0B,aAAAV,GAA0B,cAAcS,KAA/CA,CAAsD,CAE7E,EAAA,CACH;AAAA,IACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IACpBR,EAAK,IAAI,CAACS,GAAOH,MAEd,gBAAAI,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAAR,EAACC,GAAA,EAAmB,QAAO,QAAO,OAAM,QACrC,UAAAK,EAAM,IAAI,CAACG,GAAMN,MAEd,gBAAAH,EAACU,GAAA,EAAI,OAAM,QAAmB,QAAO,QACnC,UAAA,gBAAAV,EAACW,GAAA,EAAe,MAAAF,GAAY,WAAAhB,EAAA,CAAsB,EAAA,GAD7BU,CAEvB,CAEH,KAPUA,CAQb;AAAA,MACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IAAA,EAAA,GAVFF,CAWrB,CAEH;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"date_picker_body.js","sources":["../../../src/inputs/date_picker/date_picker_body.tsx"],"sourcesContent":["import React from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { CalendarDate } from '../../utils/calendar/calendar_date.js';\nimport { DatePickerDate } from './date_picker_date.js';\nimport { DatePickerDay } from './date_picker_day.js';\nimport type { DatePickerPresenter } from './date_picker_presenter.js';\n\nexport interface DatePickerBodyProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps) {\n  const { visibleDates } = useSignalValue(presenter.stateBroadcast);\n  const rows: CalendarDate[][] = [];\n\n  for (let i = 0; i < visibleDates.length; i += 7) {\n    rows.push(visibleDates.slice(i, i + 7));\n  }\n\n  return (\n    <VStack height=\"auto\" width=\"auto\" className=\"tcn-date-picker-body\">\n      <HStack height=\"auto\" width=\"auto\">\n        {new Array(7).fill(0).map((_, index) => {\n          return (\n            <DatePickerDay key={index} countryCode={countryCode} dayOfTheWeek={index} />\n          );\n        })}\n      </HStack>\n      <Spacer height=\"2px\" />\n      {rows.map((dates, index) => {\n        return (\n          <React.Fragment key={index}>\n            <HStack key={index} height=\"auto\" width=\"auto\">\n              {dates.map((date, index) => {\n                return (\n                  <Box width=\"flex\" key={index} height=\"auto\">\n                    <DatePickerDate date={date} presenter={presenter} />\n                  </Box>\n                );\n              })}\n            </HStack>\n            <Spacer height=\"1px\" />\n          </React.Fragment>\n        );\n      })}\n    </VStack>\n  );\n}\n"],"names":["DatePickerBody","presenter","countryCode","visibleDates","useSignalValue","rows","i","VStack","jsx","HStack","_","index","DatePickerDay","Spacer","dates","jsxs","React","date","Box","DatePickerDate"],"mappings":";;;;;;;;;AAgBO,SAASA,EAAe,EAAE,WAAAC,GAAW,aAAAC,KAAoC;AAC9E,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAeH,EAAU,cAAc,GAC1DI,IAAyB,CAAA;AAE/B,WAASC,IAAI,GAAGA,IAAIH,EAAa,QAAQG,KAAK;AAC5C,IAAAD,EAAK,KAAKF,EAAa,MAAMG,GAAGA,IAAI,CAAC,CAAC;AAGxC,2BACGC,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,WAAU,wBAC3C,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAM,QACzB,UAAA,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,GAAGC,MAE1B,gBAAAH,EAACI,GAAA,EAA0B,aAAAV,GAA0B,cAAcS,KAA/CA,CAAsD,CAE7E,EAAA,CACH;AAAA,IACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IACpBR,EAAK,IAAI,CAACS,GAAOH,MAEd,gBAAAI,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAAR,EAACC,GAAA,EAAmB,QAAO,QAAO,OAAM,QACrC,UAAAK,EAAM,IAAI,CAACG,GAAMN,MAEd,gBAAAH,EAACU,GAAA,EAAI,OAAM,QAAmB,QAAO,QACnC,UAAA,gBAAAV,EAACW,GAAA,EAAe,MAAAF,GAAY,WAAAhB,EAAA,CAAsB,EAAA,GAD7BU,CAEvB,CAEH,KAPUA,CAQb;AAAA,MACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IAAA,EAAA,GAVFF,CAWrB,CAEH;AAAA,EAAA,GACH;AAEJ;"}

package/dist/inputs/date_picker/date_picker_date.js

@@ -45,7 +45,7 @@ function C({ presenter: i, date: t }) {
     "button",
     {
       disabled: !l || h || !p,
-      className: f(k["date-picker-date"], "date-picker-date"),
+      className: f(k["date-picker-date"], "tcn-date-picker-date"),
       onClick: T,
       "data-is-within-month": String(l),
       "data-is-selected": String(a),
@@ -57,7 +57,7 @@ function C({ presenter: i, date: t }) {
         y && /* @__PURE__ */ n(
           "div",
           {
-            className: f(k["date-picker-today"], "date-picker-today"),
+            className: f(k["date-picker-today"], "tcn-date-picker-today"),
             "data-is-selected": String(a)
           }
         )