@tcn/ui 0.9.0 → 0.11.0

package/dist/bar.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._bar_8fa8c58){width:100%;height:auto;min-height:0}}

package/dist/body.css

@@ -1 +1 @@
-@layer tcn-system{._body_42a1eac{min-height:0;flex-grow:1;width:100%;height:100%}:where(._tcn-main_5114d87){height:auto}}
+@layer tcn-system{._body_42a1eac{min-height:0;min-width:0;flex-grow:1;flex-shrink:unset}._h-body_cda9f1f{overflow-x:auto}._v-body_a12af62{overflow-y:auto}}

package/dist/body.module-BbFZ7KNP.js

@@ -0,0 +1,5 @@
+import './body.css';const o = "_body_42a1eac", d = "_h-body_cda9f1f", y = "_v-body_a12af62", s = { body: o, "h-body": d, "v-body": y };
+export {
+  s
+};
+//# sourceMappingURL=body.module-BbFZ7KNP.js.map

package/dist/body.module-BbFZ7KNP.js.map

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

package/dist/divider.css

@@ -1 +1 @@
-@layer tcn-system{:where(._divider_af0a0c6){display:flex;align-items:center;justify-content:center}:where(._divider-line_cae0189){background:var(--material-line, #aaa);border-radius:calc(4px * var(--scalar, 1))}:where(._divider-line_cae0189[data-emphasis=strong]){background:color-mix(in srgb,#aaa,black 20%)}:where(._divider-line_cae0189[data-emphasis=normal]){background:#aaa}:where(._divider-line_cae0189[data-emphasis=light]){background:color-mix(in srgb,#aaa,white 20%)}:where(._divider_af0a0c6[data-orientation=horizontal]){width:100%;height:auto}:where(._divider-line_cae0189[data-orientation=horizontal]){width:var(--divider-width, 100%);height:calc(var(--divider-height, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=sm]){height:calc(var(--divider-height, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=md]){height:calc(var(--divider-height, 2px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=lg]){height:calc(var(--divider-height, 3px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=full]){width:var(--divider-width, 100%)}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=sm]){width:calc(var(--divider-width, 16px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=md]){width:calc(var(--divider-width, 20px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=lg]){width:calc(var(--divider-width, 24px) * var(--scalar, 1))}:where(._divider_af0a0c6[data-orientation=vertical]){height:100%;width:auto}:where(._divider-line_cae0189[data-orientation=vertical]){width:calc(var(--divider-width, 1px) * var(--scalar, 1));height:var(--divider-height, 100%)}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=sm]){min-width:calc(var(--divider-width, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=md]){min-width:calc(var(--divider-width, 2px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=lg]){min-width:calc(var(--divider-width, 3px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=full]){height:var(--divider-height, 100%)}:where(._divider-line_cae0189[data-orientation=vertical][data-length=sm]){height:calc(var(--divider-height, 16px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=md]){height:calc(var(--divider-height, 20px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=lg]){height:calc(var(--divider-height, 24px) * var(--scalar, 1))}}
+@layer tcn-system{:where(._divider_af0a0c6){display:flex;align-items:center;justify-content:center}:where(._divider-line_cae0189){background:var(--material-line, #aaa);border-radius:calc(4px * var(--scalar, 1))}:where(._divider-line_cae0189[data-emphasis=strong]){background:color-mix(in srgb,#aaa,black 20%)}:where(._divider-line_cae0189[data-emphasis=normal]){background:#aaa}:where(._divider-line_cae0189[data-emphasis=faint]){background:color-mix(in srgb,#aaa,white 20%)}:where(._divider_af0a0c6[data-orientation=horizontal]){width:100%;height:auto}:where(._divider-line_cae0189[data-orientation=horizontal]){width:var(--divider-width, 100%);height:calc(var(--divider-height, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=sm]){height:calc(var(--divider-height, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=md]){height:calc(var(--divider-height, 2px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-thickness=lg]){height:calc(var(--divider-height, 3px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=full]){width:var(--divider-width, 100%)}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=sm]){width:calc(var(--divider-width, 16px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=md]){width:calc(var(--divider-width, 20px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=horizontal][data-length=lg]){width:calc(var(--divider-width, 24px) * var(--scalar, 1))}:where(._divider_af0a0c6[data-orientation=vertical]){height:100%;width:auto}:where(._divider-line_cae0189[data-orientation=vertical]){width:calc(var(--divider-width, 1px) * var(--scalar, 1));height:var(--divider-height, 100%)}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=sm]){min-width:calc(var(--divider-width, 1px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=md]){min-width:calc(var(--divider-width, 2px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-thickness=lg]){min-width:calc(var(--divider-width, 3px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=full]){height:var(--divider-height, 100%)}:where(._divider-line_cae0189[data-orientation=vertical][data-length=sm]){height:calc(var(--divider-height, 16px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=md]){height:calc(var(--divider-height, 20px) * var(--scalar, 1))}:where(._divider-line_cae0189[data-orientation=vertical][data-length=lg]){height:calc(var(--divider-height, 24px) * var(--scalar, 1))}}

package/dist/footer.css

@@ -1 +1 @@
-@layer tcn-system{:where(._footer_4a43c3e){width:100%;min-height:0;padding:var(--padding) var(--padding-large);gap:var(--gap)}:where(._footer_4a43c3e[data-kind=app]){position:relative}:where(._footer_4a43c3e[data-kind=nav]){position:relative}:where(._footer_4a43c3e[data-kind=toolbar]){position:relative}:where(._footer_4a43c3e[data-kind=window]){position:relative}:where(._footer_4a43c3e[data-kind=status]){position:relative}}
+@layer tcn-system{:where(._footer_4a43c3e){min-height:0}:where(._footer_4a43c3e[data-kind=app]){position:relative}:where(._footer_4a43c3e[data-kind=nav]){position:relative}:where(._footer_4a43c3e[data-kind=toolbar]){position:relative}:where(._footer_4a43c3e[data-kind=window]){position:relative}:where(._footer_4a43c3e[data-kind=status]){position:relative}}

package/dist/form/field/h_field/h_field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/h_field/h_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAGxF,eAAO,MAAM,MAAM,iGAmDjB,CAAC"}
+{"version":3,"file":"h_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/h_field/h_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKrD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AACD,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAGxF,eAAO,MAAM,MAAM,iGA+CjB,CAAC"}

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

@@ -1,60 +1,58 @@
-import { jsxs as F, jsx as r } from "react/jsx-runtime";
-import { HStack as I } from "../../../stacks/h_stack.js";
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { HStack as F } from "../../../stacks/h_stack.js";
 import { clsx as H } from "clsx";
 import _, { useState as g } from "react";
-import { FieldHeader as y } from "../common/field_header.js";
+import { FieldHeader as I } from "../common/field_header.js";
 import { FieldControl as S } from "../common/field_control/field_control.js";
-import { FieldStatusInput as $ } from "../common/status_input/status_input.js";
-import '../../../h_field.css';const j = "_h-field_845b93f", v = { "h-field": j };
-let w = 0;
-const B = _.forwardRef(function({
-  label: o,
-  description: s,
-  errorMessage: d,
-  children: n,
-  labelWidth: l = "40%",
+import { FieldStatusInput as j } from "../common/status_input/status_input.js";
+import '../../../h_field.css';const v = "_h-field_845b93f", w = { "h-field": v };
+let A = 0;
+const q = _.forwardRef(function({
+  label: l,
+  description: a,
+  errorMessage: i,
+  children: f,
+  labelWidth: d = "40%",
   locked: t = !1,
   loading: e = !1,
-  className: f,
-  id: c,
-  required: m,
-  ...h
-}, p) {
-  const [i] = g(() => c || `h-field-${w++}`), u = `${i}-label`, b = `${i}-description`, a = !!d, x = t ? "locked" : e ? "loading" : a ? "error" : "default";
-  return /* @__PURE__ */ F(
-    I,
+  className: s,
+  id: n,
+  required: c,
+  ...m
+}, h) {
+  const [p] = g(() => n || `h-field-${A++}`), o = !!i, u = t ? "locked" : e ? "loading" : o ? "error" : "default";
+  return /* @__PURE__ */ x(
+    F,
     {
-      ref: p,
+      ref: h,
       as: "div",
-      "aria-labelledby": u,
-      "aria-describedby": b,
       "data-locked": t,
-      "data-error": a,
+      "data-error": o,
       "data-loading": e,
-      className: H("tcn-base-field", v["h-field"], "tcn-h-field", f),
+      className: H("tcn-base-field", w["h-field"], "tcn-h-field", s),
       vAlign: "start",
       hAlign: "start",
       height: "auto",
       gap: "4px",
-      ...h,
+      ...m,
       children: [
         /* @__PURE__ */ r(
-          y,
+          I,
           {
-            minWidth: l,
-            width: l,
-            id: i,
-            label: o,
-            description: s,
-            required: m
+            minWidth: d,
+            width: d,
+            id: p,
+            label: l,
+            description: a,
+            required: c
           }
         ),
-        /* @__PURE__ */ r(S, { errorMessage: d, loading: e, locked: t, children: /* @__PURE__ */ r($, { state: x, children: n }) })
+        /* @__PURE__ */ r(S, { errorMessage: i, loading: e, locked: t, children: /* @__PURE__ */ r(j, { state: u, children: f }) })
       ]
     }
   );
 });
 export {
-  B as HField
+  q as HField
 };
 //# sourceMappingURL=h_field.js.map

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 { 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('tcn-base-field', styles['h-field'], 'tcn-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,kBAAkBC,EAAO,SAAS,GAAG,eAAed,CAAS;AAAA,MAC7E,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 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      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={clsx('tcn-base-field', styles['h-field'], 'tcn-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","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,IAAW,EAAAZ,GACXa,IAAQV,IAAS,WAAWC,IAAU,YAAYQ,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,IAAG;AAAA,MACH,eAAaN;AAAA,MACb,cAAYS;AAAA,MACZ,gBAAcR;AAAA,MACd,WAAWY,EAAK,kBAAkBC,EAAO,SAAS,GAAG,eAAeZ,CAAS;AAAA,MAC7E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAUjB;AAAA,YACV,OAAOA;AAAA,YACP,IAAIQ;AAAA,YACJ,OAAAZ;AAAA,YACA,aAAAC;AAAA,YACA,UAAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAW,EAACE,KAAa,cAAApB,GAA4B,SAAAI,GAAkB,QAAAD,GAC1D,UAAA,gBAAAe,EAACG,GAAA,EAAiB,OAAAR,GAAe,UAAAZ,EAAA,CAAQ,EAAA,CAC3C;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/form/field/v_field/v_field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"v_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/v_field/v_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAExF,eAAO,MAAM,MAAM,iGAwDjB,CAAC"}
+{"version":3,"file":"v_field.d.ts","sourceRoot":"","sources":["../../../../src/form/field/v_field/v_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,qBAAqB,CAAC,cAAc,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAExF,eAAO,MAAM,MAAM,iGAqDjB,CAAC"}

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

@@ -1,61 +1,59 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { VStack as g } from "../../../stacks/v_stack.js";
-import { clsx as v } from "clsx";
-import F, { useState as I } from "react";
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { VStack as x } from "../../../stacks/v_stack.js";
+import { clsx as g } from "clsx";
+import v, { useState as F } from "react";
 import { FieldControl as A } from "../common/field_control/field_control.js";
-import { FieldHeader as y } from "../common/field_header.js";
+import { FieldHeader as I } from "../common/field_header.js";
 import { FieldStatusInput as S } from "../common/status_input/status_input.js";
 import '../../../v_field.css';const V = {};
-let $ = 0;
-const q = F.forwardRef(function({
-  label: d,
-  description: o,
-  errorMessage: a,
-  children: s,
+let j = 0;
+const N = v.forwardRef(function({
+  label: l,
+  description: d,
+  errorMessage: i,
+  children: o,
   locked: t = !1,
-  loading: e = !1,
-  maxWidth: R,
-  minWidth: W,
-  className: n,
-  id: c,
+  loading: r = !1,
+  maxWidth: W,
+  minWidth: _,
+  className: s,
+  id: n,
   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";
-  return /* @__PURE__ */ x(
-    g,
+}, c) {
+  const [h] = F(() => n || `v-field-${j++}`), a = !!i, p = t ? "locked" : r ? "loading" : a ? "error" : "default";
+  return /* @__PURE__ */ u(
+    x,
     {
-      ref: p,
+      ref: c,
       as: "div",
-      "aria-labelledby": h,
-      "aria-describedby": u,
       "data-locked": t,
-      "data-error": l,
-      "data-loading": e,
-      className: v("tcn-base-field", V["v-field"], "tcn-v-field", n),
+      "data-error": a,
+      "data-loading": r,
+      className: g("tcn-base-field", V["v-field"], "tcn-v-field", s),
       vAlign: "start",
       hAlign: "start",
       height: "auto",
       gap: "4px",
       ...m,
       children: [
-        /* @__PURE__ */ i(
-          y,
+        /* @__PURE__ */ e(
+          I,
           {
-            id: r,
-            label: d,
-            description: o,
+            id: h,
+            label: l,
+            description: d,
             required: f
           }
         ),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ e(
           A,
           {
-            errorMessage: a,
-            loading: e,
+            errorMessage: i,
+            loading: r,
             locked: t,
             hAlign: "start",
-            children: /* @__PURE__ */ i(S, { state: b, hAlign: "start", children: s })
+            children: /* @__PURE__ */ e(S, { state: p, hAlign: "start", children: o })
           }
         )
       ]
@@ -63,6 +61,6 @@ const q = F.forwardRef(function({
   );
 });
 export {
-  q as VField
+  N as VField
 };
 //# sourceMappingURL=v_field.js.map

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 { 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('tcn-base-field', styles['v-field'], 'tcn-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,kBAAkBC,EAAO,SAAS,GAAG,eAAed,CAAS;AAAA,MAC7E,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 state = locked ? 'locked' : loading ? 'loading' : hasError ? 'error' : 'default';\n\n  return (\n    <VStack\n      ref={ref}\n      as=\"div\"\n      data-locked={locked}\n      data-error={hasError}\n      data-loading={loading}\n      className={clsx('tcn-base-field', styles['v-field'], 'tcn-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","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,IAAQZ,IAAS,WAAWC,IAAU,YAAYU,IAAW,UAAU;AAE7E,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,IAAG;AAAA,MACH,eAAaR;AAAA,MACb,cAAYW;AAAA,MACZ,gBAAcV;AAAA,MACd,WAAWc,EAAK,kBAAkBC,EAAO,SAAS,GAAG,eAAeZ,CAAS;AAAA,MAC7E,QAAO;AAAA,MACP,QAAO;AAAA,MACP,QAAO;AAAA,MACP,KAAI;AAAA,MACH,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAIT;AAAA,YACJ,OAAAb;AAAA,YACA,aAAAC;AAAA,YACA,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAW;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,cAAArB;AAAA,YACA,SAAAG;AAAA,YACA,QAAAD;AAAA,YACA,QAAO;AAAA,YAEP,UAAA,gBAAAiB,EAACG,GAAA,EAAiB,OAAAR,GAAc,QAAO,SACpC,UAAAb,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/frame.css

@@ -1 +1 @@
-@layer tcn-system{:where(._frame_ce82001){padding:0;border:none;background:none}}
+@layer tcn-system{:where(._frame-dialog_2a77c1d){overflow:hidden}}

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":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAUvC,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,40 +1,40 @@
-import { jsxs as n, Fragment as C, jsx as r } from "react/jsx-runtime";
+import { jsxs as n, Fragment as I, jsx as o } from "react/jsx-runtime";
 import { Box as m } from "../../stacks/box/box.js";
-import { HStack as h } from "../../stacks/h_stack.js";
+import { HStack as $ } from "../../stacks/h_stack.js";
 import { Spacer as p } from "../../stacks/spacer.js";
-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 { clsx as h } from "clsx";
+import { useState as C, useRef as A, useLayoutEffect as N } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
-import { Button as _ } from "../../actions/button/button/button.js";
+import { Button as P } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import "../../actions/toggle/toggle.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", x = { "checker-board": z, "color-input-select": K };
+import { ColorPicker as _ } from "./color_picker.js";
+import { Input as B } from "../input/input.js";
+import { Popper as F } from "../../overlay/popper/legacy/popper.js";
+import { InputGroup as j } from "../input_group/input_group.js";
+import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", f = { "checker-board": z, "color-input-select": K };
 function or({
   value: c = "#000",
   onChange: i,
   onError: O,
   disabled: s,
-  width: g = "100%",
-  maxWidth: b,
-  minWidth: k,
-  hierarchy: E = "secondary",
-  ...y
+  width: x = "100%",
+  maxWidth: g,
+  minWidth: b,
+  hierarchy: k = "secondary",
+  ...E
 }) {
-  const [e, a] = A(null), S = e != null, d = N(null);
+  const [e, a] = C(null), y = e != null, d = A(null);
   function w(t) {
     a(t.currentTarget);
   }
   function u() {
     a(null);
   }
-  P(() => {
+  N(() => {
     requestAnimationFrame(() => {
       e != null && d.current && d.current.focus();
     });
@@ -42,25 +42,26 @@ function or({
   function R(t) {
     t.key === "Escape" && u();
   }
-  function $(t) {
-    const o = t.rgb;
+  function S(t) {
+    const r = 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);
+    r.a != null ? l = `rgba(${r.r},${r.g},${r.b},${r.a})` : l = `rgb(${r.r},${r.g},${r.b})`, i && i(l);
   }
-  return /* @__PURE__ */ n(C, { children: [
+  return /* @__PURE__ */ n(I, { children: [
     /* @__PURE__ */ n(
-      h,
+      j,
       {
         height: "auto",
-        width: g,
-        minWidth: k,
-        maxWidth: b,
+        width: x,
+        minWidth: b,
+        maxWidth: g,
         className: "tcn-color-input-wrapper",
-        ...y,
+        ...E,
         children: [
-          /* @__PURE__ */ r(I, { width: "flex", children: /* @__PURE__ */ r(
-            F,
+          /* @__PURE__ */ o(
+            B,
             {
+              width: "flex",
               disabled: s,
               value: c,
               style: {
@@ -72,17 +73,17 @@ function or({
               className: "tcn-color-input",
               onChange: i
             }
-          ) }),
+          ),
           /* @__PURE__ */ n(
-            _,
+            P,
             {
               disabled: s,
-              hierarchy: E,
+              hierarchy: k,
               onClick: w,
               width: "70px",
               maxWidth: "70px",
-              className: f(
-                x["color-input-select"],
+              className: h(
+                f["color-input-select"],
                 "tcn-color-input-select",
                 "tcn-select"
               ),
@@ -92,16 +93,16 @@ function or({
                 paddingInlineEnd: 0
               },
               children: [
-                /* @__PURE__ */ n(h, { height: "14px", gap: "4px", hAlign: "start", children: [
-                  /* @__PURE__ */ r(p, { width: "4px" }),
-                  /* @__PURE__ */ r(
+                /* @__PURE__ */ n($, { height: "14px", gap: "4px", hAlign: "start", children: [
+                  /* @__PURE__ */ o(p, { width: "4px" }),
+                  /* @__PURE__ */ o(
                     m,
                     {
                       width: "flex",
                       height: "30px",
-                      className: f(x["checker-board"], "tcn-checker-board"),
+                      className: h(f["checker-board"], "tcn-checker-board"),
                       style: { borderRadius: "2px", overflow: "hidden" },
-                      children: /* @__PURE__ */ r(
+                      children: /* @__PURE__ */ o(
                         m,
                         {
                           height: "100%",
@@ -110,30 +111,30 @@ function or({
                       )
                     }
                   ),
-                  /* @__PURE__ */ r(p, {})
+                  /* @__PURE__ */ o(p, {})
                 ] }),
-                /* @__PURE__ */ r(p, { width: "4px" })
+                /* @__PURE__ */ o(p, { width: "4px" })
               ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ r(
-      j,
+    /* @__PURE__ */ o(
+      F,
       {
         anchorElement: e,
         onClose: u,
-        open: S,
+        open: y,
         restoreFocus: !0,
         horizontalAnchor: "end",
         horizontalOrigin: "end",
-        children: /* @__PURE__ */ r(
-          B,
+        children: /* @__PURE__ */ o(
+          _,
           {
             color: c,
             onKeyDown: R,
-            onColorChange: $
+            onColorChange: S
           }
         )
       }

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=\"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":"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"}
+{"version":3,"file":"color_input.js","sources":["../../../src/inputs/color_input/color_input.tsx"],"sourcesContent":["import { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { HTMLAttributes } from 'react';\nimport { ColorState } from 'react-color';\nimport { Button } from '../../actions/index.js';\nimport { ColorPicker } from './color_picker.js';\nimport { Input } from '../input/input.js';\nimport styles from './color_input.module.css';\n\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { InputGroup } from '../input_group/input_group.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      <InputGroup\n        height=\"auto\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        className=\"tcn-color-input-wrapper\"\n        {...props}\n      >\n        <Input\n          width=\"flex\"\n          disabled={disabled}\n          value={value}\n          style={{\n            borderEndEndRadius: 0,\n            borderStartEndRadius: 0,\n            textAlign: 'start',\n            paddingInlineEnd: '8px',\n          }}\n          className=\"tcn-color-input\"\n          onChange={onChange}\n        />\n\n        <Button\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width=\"70px\"\n          maxWidth=\"70px\"\n          className={clsx(\n            styles['color-input-select'],\n            'tcn-color-input-select',\n            'tcn-select'\n          )}\n          style={{\n            borderStartStartRadius: 0,\n            borderEndStartRadius: 0,\n            paddingInlineEnd: 0,\n          }}\n        >\n          <HStack height=\"14px\" gap=\"4px\" hAlign=\"start\">\n            <Spacer width=\"4px\" />\n            <Box\n              width=\"flex\"\n              height=\"30px\"\n              className={clsx(styles['checker-board'], 'tcn-checker-board')}\n              style={{ borderRadius: '2px', overflow: 'hidden' }}\n            >\n              <Box\n                height=\"100%\"\n                style={{ backgroundColor: value, borderRadius: '2px' }}\n              ></Box>\n            </Box>\n            <Spacer />\n          </HStack>\n          <Spacer width=\"4px\" />\n        </Button>\n      </InputGroup>\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","InputGroup","jsx","Input","Button","clsx","styles","HStack","Spacer","Box","Popper","ColorPicker"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"combo_box.d.ts","sourceRoot":"","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,wFA0InB,CAAC"}
+{"version":3,"file":"combo_box.d.ts","sourceRoot":"","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAS,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,wFA8InB,CAAC"}