@tcn/ui 0.12.5 → 0.12.6

package/dist/inputs/color_input/color_input.js

@@ -1,9 +1,9 @@
-import { jsxs as n, Fragment as I, jsx as o } from "react/jsx-runtime";
+import { jsxs as n, Fragment as C, jsx as o } from "react/jsx-runtime";
 import { Box as m } from "../../stacks/box/box.js";
 import { HStack as $ } from "../../stacks/h_stack.js";
-import { Spacer as p } from "../../stacks/spacer.js";
+import { Spacer as s } from "../../stacks/spacer.js";
 import { clsx as h } from "clsx";
-import { useState as C, useRef as A, useLayoutEffect as N } from "react";
+import { useState as I, useRef as A, useLayoutEffect as N } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
@@ -12,21 +12,21 @@ import "../../actions/toggle/toggle.js";
 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 { ControlSet as j } from "../control_set/control_set.js";
 import '../../color_input.css';const z = "_checker-board_2cc94a9", K = "_color-input-select_abe3066", f = { "checker-board": z, "color-input-select": K };
 function v({
   value: c = "#000",
   onChange: i,
   onError: O,
-  disabled: s,
+  disabled: p,
   width: x = "100%",
   maxWidth: g,
   minWidth: b,
   hierarchy: k = "secondary",
   ...E
 }) {
-  const [e, a] = C(null), y = e != null, d = A(null);
-  function w(t) {
+  const [e, a] = I(null), y = e != null, d = A(null);
+  function S(t) {
     a(t.currentTarget);
   }
   function u() {
@@ -37,15 +37,15 @@ function v({
       e != null && d.current && d.current.focus();
     });
   }, [e]);
-  function R(t) {
+  function w(t) {
     t.key === "Escape" && u();
   }
-  function S(t) {
+  function R(t) {
     const r = t.rgb;
     let l = t.hex;
     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(I, { children: [
+  return /* @__PURE__ */ n(C, { children: [
     /* @__PURE__ */ n(
       j,
       {
@@ -60,7 +60,7 @@ function v({
             B,
             {
               width: "flex",
-              disabled: s,
+              disabled: p,
               value: c,
               style: {
                 borderEndEndRadius: 0,
@@ -75,9 +75,9 @@ function v({
           /* @__PURE__ */ n(
             P,
             {
-              disabled: s,
+              disabled: p,
               hierarchy: k,
-              onClick: w,
+              onClick: S,
               width: "70px",
               maxWidth: "70px",
               className: h(
@@ -92,7 +92,7 @@ function v({
               },
               children: [
                 /* @__PURE__ */ n($, { height: "14px", gap: "4px", hAlign: "start", children: [
-                  /* @__PURE__ */ o(p, { width: "4px" }),
+                  /* @__PURE__ */ o(s, { width: "4px" }),
                   /* @__PURE__ */ o(
                     m,
                     {
@@ -109,9 +109,9 @@ function v({
                       )
                     }
                   ),
-                  /* @__PURE__ */ o(p, {})
+                  /* @__PURE__ */ o(s, {})
                 ] }),
-                /* @__PURE__ */ o(p, { width: "4px" })
+                /* @__PURE__ */ o(s, { width: "4px" })
               ]
             }
           )
@@ -131,8 +131,8 @@ function v({
           _,
           {
             color: c,
-            onKeyDown: R,
-            onColorChange: S
+            onKeyDown: w,
+            onColorChange: R
           }
         )
       }

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

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

package/dist/inputs/control/control.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { VStackProps } from '../../stacks/v_stack.js';
+import { HStackProps } from '../../stacks/h_stack.js';
+export interface ControlProps extends VStackProps {
+}
+export declare const Control: React.ForwardRefExoticComponent<ControlProps & React.RefAttributes<HTMLDivElement>>;
+export interface ControlRowProps extends HStackProps {
+}
+export declare const ControlRow: React.ForwardRefExoticComponent<ControlRowProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../../src/inputs/control/control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,WAAW,YAAa,SAAQ,WAAW;CAAG;AAEpD,eAAO,MAAM,OAAO,qFASlB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD,eAAO,MAAM,UAAU,wFAWtB,CAAC"}

package/dist/inputs/control/control.js

@@ -0,0 +1,17 @@
+import { jsx as f } from "react/jsx-runtime";
+import { clsx as m } from "clsx";
+import a from "react";
+import { VStack as e } from "../../stacks/v_stack.js";
+import { HStack as i } from "../../stacks/h_stack.js";
+const R = a.forwardRef(function({ as: o = "div", className: r, children: t, ...n }, c) {
+  return /* @__PURE__ */ f(e, { ref: c, as: o, className: m(r, "tcn-control"), ...n, children: t });
+}), C = a.forwardRef(
+  function({ as: o = "div", className: r, children: t, ...n }, c) {
+    return /* @__PURE__ */ f(i, { ref: c, as: o, className: m(r, "tcn-control-row"), ...n, children: t });
+  }
+);
+export {
+  R as Control,
+  C as ControlRow
+};
+//# sourceMappingURL=control.js.map

package/dist/inputs/control/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sources":["../../../src/inputs/control/control.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\n\nexport interface ControlProps extends VStackProps {}\n\nexport const Control = React.forwardRef<HTMLDivElement, ControlProps>(function Control(\n  { as = 'div', className, children, ...props }: ControlProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  return (\n    <VStack ref={ref} as={as} className={clsx(className, 'tcn-control')} {...props}>\n      {children}\n    </VStack>\n  );\n});\n\nexport interface ControlRowProps extends HStackProps {}\n\nexport const ControlRow = React.forwardRef<HTMLDivElement, ControlRowProps>(\n  function ControlRow(\n    { as = 'div', className, children, ...props }: ControlRowProps,\n    ref: React.Ref<HTMLDivElement>\n  ) {\n    return (\n      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-row')} {...props}>\n        {children}\n      </HStack>\n    );\n  }\n);\n"],"names":["Control","React","as","className","children","props","ref","jsx","VStack","clsx","ControlRow","HStack"],"mappings":";;;;;AAOO,MAAMA,IAAUC,EAAM,WAAyC,SACpE,EAAE,IAAAC,IAAK,OAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACtCC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,IAAAJ,GAAQ,WAAWO,EAAKN,GAAW,aAAa,GAAI,GAAGE,GACtE,UAAAD,EAAA,CACH;AAEJ,CAAC,GAIYM,IAAaT,EAAM;AAAA,EAC9B,SACE,EAAE,IAAAC,IAAK,OAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GACtCC,GACA;AACA,WACE,gBAAAC,EAACI,GAAA,EAAO,KAAAL,GAAU,IAAAJ,GAAQ,WAAWO,EAAKN,GAAW,iBAAiB,GAAI,GAAGE,GAC1E,UAAAD,EAAA,CACH;AAAA,EAEJ;AACF;"}

package/dist/inputs/control_set/control_set.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { HStackProps } from '../../stacks/h_stack.js';
+export type ControlSetProps = HStackProps;
+export declare const ControlSet: React.ForwardRefExoticComponent<ControlSetProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=control_set.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control_set.d.ts","sourceRoot":"","sources":["../../../src/inputs/control_set/control_set.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC;AAE1C,eAAO,MAAM,UAAU,qFAmBtB,CAAC"}

package/dist/inputs/control_set/control_set.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+import t from "react";
+import { clsx as r } from "clsx";
+import { HStack as p } from "../../stacks/h_stack.js";
+const C = t.forwardRef(
+  function({ children: e, as: n = "div", className: m, ...s }, a) {
+    const c = t.Children.map(
+      e,
+      (o) => t.isValidElement(o) ? t.cloneElement(o, {
+        ...o.props,
+        className: r(o.props.className, "tcn-control-set-item")
+      }) : o
+    );
+    return /* @__PURE__ */ l(p, { ref: a, as: n, className: r(m, "tcn-control-set"), ...s, children: c });
+  }
+);
+export {
+  C as ControlSet
+};
+//# sourceMappingURL=control_set.js.map

package/dist/inputs/{input_group/input_group.js.map → control_set/control_set.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input_group.js","sources":["../../../src/inputs/input_group/input_group.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\n\nexport type InputGroupProps = HStackProps;\n\nexport const InputGroup = React.forwardRef<HTMLElement, InputGroupProps>(\n  function InputGroup(\n    { children, as = 'div', className, ...props }: InputGroupProps,\n    ref\n  ) {\n    const clonedChildren = React.Children.map(children, child =>\n      React.isValidElement(child)\n        ? React.cloneElement(child, {\n            ...child.props,\n            className: clsx(child.props.className, 'tcn-input-group-slot'),\n          })\n        : child\n    );\n    return (\n      <HStack ref={ref} as={as} className={clsx(className, 'tcn-input-group')} {...props}>\n        {clonedChildren}\n      </HStack>\n    );\n  }\n);\n"],"names":["InputGroup","React","children","as","className","props","ref","clonedChildren","child","clsx","jsx","HStack"],"mappings":";;;;AAMO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,IAAAC,IAAK,OAAO,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,UAAMC,IAAiBN,EAAM,SAAS;AAAA,MAAIC;AAAA,MAAU,OAClDD,EAAM,eAAeO,CAAK,IACtBP,EAAM,aAAaO,GAAO;AAAA,QACxB,GAAGA,EAAM;AAAA,QACT,WAAWC,EAAKD,EAAM,MAAM,WAAW,sBAAsB;AAAA,MAAA,CAC9D,IACDA;AAAA,IAAA;AAEN,WACE,gBAAAE,EAACC,GAAA,EAAO,KAAAL,GAAU,IAAAH,GAAQ,WAAWM,EAAKL,GAAW,iBAAiB,GAAI,GAAGC,GAC1E,UAAAE,EAAA,CACH;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"control_set.js","sources":["../../../src/inputs/control_set/control_set.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\n\nexport type ControlSetProps = HStackProps;\n\nexport const ControlSet = React.forwardRef<HTMLElement, ControlSetProps>(\n  function InputGroup(\n    { children, as = 'div', className, ...props }: ControlSetProps,\n    ref\n  ) {\n    const clonedChildren = React.Children.map(children, child =>\n      React.isValidElement(child)\n        ? React.cloneElement(child, {\n            ...child.props,\n            className: clsx(child.props.className, 'tcn-control-set-item'),\n          })\n        : child\n    );\n    return (\n      <HStack ref={ref} as={as} className={clsx(className, 'tcn-control-set')} {...props}>\n        {clonedChildren}\n      </HStack>\n    );\n  }\n);\n"],"names":["ControlSet","React","children","as","className","props","ref","clonedChildren","child","clsx","jsx","HStack"],"mappings":";;;;AAMO,MAAMA,IAAaC,EAAM;AAAA,EAC9B,SACE,EAAE,UAAAC,GAAU,IAAAC,IAAK,OAAO,WAAAC,GAAW,GAAGC,EAAA,GACtCC,GACA;AACA,UAAMC,IAAiBN,EAAM,SAAS;AAAA,MAAIC;AAAA,MAAU,OAClDD,EAAM,eAAeO,CAAK,IACtBP,EAAM,aAAaO,GAAO;AAAA,QACxB,GAAGA,EAAM;AAAA,QACT,WAAWC,EAAKD,EAAM,MAAM,WAAW,sBAAsB;AAAA,MAAA,CAC9D,IACDA;AAAA,IAAA;AAEN,WACE,gBAAAE,EAACC,GAAA,EAAO,KAAAL,GAAU,IAAAH,GAAQ,WAAWM,EAAKL,GAAW,iBAAiB,GAAI,GAAGC,GAC1E,UAAAE,EAAA,CACH;AAAA,EAEJ;AACF;"}

package/dist/inputs/date_picker/date_picker_input.js

@@ -1,8 +1,8 @@
-import { jsxs as m, Fragment as q, jsx as o } from "react/jsx-runtime";
+import { jsxs as u, Fragment as q, jsx as r } from "react/jsx-runtime";
 import B, { useState as L, useRef as M, useCallback as V, useMemo as W, useLayoutEffect as Z } from "react";
 import { ZStack as G } from "../../stacks/z_stack.js";
 import { Popper as H } from "../../overlay/popper/legacy/popper.js";
-import { clsx as u } from "clsx";
+import { clsx as m } from "clsx";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
@@ -26,7 +26,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     width: y = "100%",
     maxWidth: D,
     minWidth: Y,
-    showTime: r = !1,
+    showTime: n = !1,
     timeIntervalInMinutes: x = 15,
     hierarchy: A = "secondary",
     disabledDates: E,
@@ -36,14 +36,14 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     onTimeSelected: w,
     ..._
   }, b) => {
-    const [n, a] = L(null), v = n != null, i = M(null), p = V((t) => t.closest(".tcn-suggestion-list") != null, []), C = W(() => {
+    const [o, a] = L(null), v = o != null, i = M(null), p = V((t) => t.closest(".tcn-suggestion-list") != null, []), C = W(() => {
       const t = {
         year: "numeric",
         month: "short",
         day: "numeric"
       };
-      return r && (t.hour = "numeric", t.minute = "2-digit", t.hour12 = !0), new Intl.DateTimeFormat(s, t);
-    }, [s, r]), F = c != null ? C.format(c) : R;
+      return n && (t.hour = "numeric", t.minute = "2-digit", t.hour12 = !0), new Intl.DateTimeFormat(s, t);
+    }, [s, n]), F = c != null ? C.format(c) : R;
     function P(t) {
       a(t.currentTarget);
     }
@@ -52,9 +52,9 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     }
     Z(() => {
       requestAnimationFrame(() => {
-        n != null && i.current && i.current.focus();
+        o != null && i.current && i.current.focus();
       });
-    }, [n]);
+    }, [o]);
     function O(t) {
       t.key === "Escape" && e();
     }
@@ -63,17 +63,17 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
       t?.focus();
     }
     function N(t) {
-      d?.(t), !r && e();
+      d?.(t), !n && e();
     }
     function j(t, z, K) {
       w?.(t, z, K), e();
     }
-    return /* @__PURE__ */ m(q, { children: [
-      /* @__PURE__ */ o(
+    return /* @__PURE__ */ u(q, { children: [
+      /* @__PURE__ */ r(
         J,
         {
           ref: b,
-          className: u(f.button, "tcn-select"),
+          className: m(f.button, "tcn-entry", "tcn-date-picker-input"),
           hAlign: "start",
           disabled: l,
           hierarchy: A,
@@ -81,13 +81,13 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           width: y,
           maxWidth: D,
           ..._,
-          children: /* @__PURE__ */ o("span", { className: "ellipsis", children: F })
+          children: /* @__PURE__ */ r("span", { className: "ellipsis", children: F })
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ r(
         H,
         {
-          anchorElement: n,
+          anchorElement: o,
           disableClickAway: !0,
           veil: !0,
           onVeilClick: e,
@@ -100,14 +100,14 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           isClickAwayException: p,
           isScrollAwayException: p,
           restoreFocus: !0,
-          children: /* @__PURE__ */ m(
+          children: /* @__PURE__ */ u(
             G,
             {
               padding: "8px",
-              className: u(f.popover, "tcn-date-picker-popover"),
+              className: m(f.popover, "tcn-date-picker-popover"),
               onKeyDown: O,
               children: [
-                /* @__PURE__ */ o(
+                /* @__PURE__ */ r(
                   Q,
                   {
                     ref: i,
@@ -115,7 +115,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
                     onChange: N,
                     min: k,
                     max: g,
-                    showTime: r,
+                    showTime: n,
                     onError: h,
                     disabled: l,
                     disabledDates: E,
@@ -125,7 +125,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
                     timeIntervalInMinutes: x
                   }
                 ),
-                /* @__PURE__ */ o(T, { onRedirect: I })
+                /* @__PURE__ */ r(T, { onRedirect: I })
               ]
             }
           )

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_input.js","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Hierarchy } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { clsx } from 'clsx';\nimport { HTMLAttributes } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { DatePicker } from './date_picker.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { FocusRedirect } from '../../utils/index.js';\nimport styles from './date_picker_input.module.css';\n\nexport interface DatePickerInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: Date | null;\n  disabled?: boolean;\n  onChange?: (date: Date | null) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  showTime?: boolean;\n  timeIntervalInMinutes?: number;\n  disabledDates?: Date[] | undefined;\n  countryCode?: string;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n  min?: Date;\n  max?: Date;\n  hierarchy?: Hierarchy;\n  selectDateMessage?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n}\n\nexport const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(\n  (\n    {\n      value = new Date(),\n      onChange,\n      onError,\n      min = new Date('01/01/1924'),\n      max = new Date('01/01/2124'),\n      disabled,\n      width = '100%',\n      maxWidth,\n      minWidth,\n      showTime = false,\n      timeIntervalInMinutes = 15,\n      hierarchy = 'secondary',\n      disabledDates,\n      selectDateMessage = 'Select Date',\n      countryCode,\n      renderActions,\n      onTimeSelected,\n      ...props\n    }: DatePickerInputProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n    const isOpen = anchorElement != null;\n    const pickerRef = useRef<HTMLDivElement | null>(null);\n\n    const isException = useCallback((target: HTMLElement) => {\n      return target.closest('.tcn-suggestion-list') != null;\n    }, []);\n\n    const formatter = useMemo(() => {\n      const formatOptions: Intl.DateTimeFormatOptions = {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n      };\n\n      if (showTime) {\n        formatOptions.hour = 'numeric';\n        formatOptions.minute = '2-digit';\n        formatOptions.hour12 = true;\n      }\n\n      return new Intl.DateTimeFormat(countryCode, formatOptions);\n    }, [countryCode, showTime]);\n\n    const formattedDate = value != null ? formatter.format(value) : selectDateMessage;\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 handleRedirect() {\n      const picker = pickerRef.current;\n\n      if (picker != null) {\n        picker.focus();\n      }\n    }\n\n    function dateSelected(date: Date | null) {\n      onChange?.(date);\n      !showTime && closePicker();\n    }\n\n    function timeSelected(hour: number, minutes: number, seconds: number) {\n      onTimeSelected?.(hour, minutes, seconds);\n      closePicker();\n    }\n\n    return (\n      <>\n        <Button\n          ref={ref}\n          className={clsx(styles.button, 'tcn-select')}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </Button>\n        <Popper\n          anchorElement={anchorElement}\n          disableClickAway\n          veil\n          onVeilClick={closePicker}\n          onClose={closePicker}\n          verticalAnchor=\"bottom\"\n          horizontalAnchor=\"start\"\n          verticalOrigin=\"top\"\n          horizontalOrigin=\"start\"\n          open={isOpen}\n          isClickAwayException={isException}\n          isScrollAwayException={isException}\n          restoreFocus\n        >\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles.popover, 'tcn-date-picker-popover')}\n            onKeyDown={processKeyInput}\n          >\n            <DatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              showTime={showTime}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              onTimeSelected={timeSelected}\n              timeIntervalInMinutes={timeIntervalInMinutes}\n            />\n            <FocusRedirect onRedirect={handleRedirect} />\n          </ZStack>\n        </Popper>\n      </>\n    );\n  }\n);\n"],"names":["DatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","countryCode","renderActions","onTimeSelected","props","ref","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","isException","useCallback","target","formatter","useMemo","formatOptions","formattedDate","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","handleRedirect","picker","dateSelected","date","timeSelected","hour","minutes","seconds","jsxs","Fragment","jsx","Button","clsx","styles","Popper","ZStack","DatePicker","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"date_picker_input.js","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Hierarchy } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { clsx } from 'clsx';\nimport { HTMLAttributes } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { DatePicker } from './date_picker.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { FocusRedirect } from '../../utils/index.js';\nimport styles from './date_picker_input.module.css';\n\nexport interface DatePickerInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: Date | null;\n  disabled?: boolean;\n  onChange?: (date: Date | null) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  showTime?: boolean;\n  timeIntervalInMinutes?: number;\n  disabledDates?: Date[] | undefined;\n  countryCode?: string;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n  min?: Date;\n  max?: Date;\n  hierarchy?: Hierarchy;\n  selectDateMessage?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n}\n\nexport const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(\n  (\n    {\n      value = new Date(),\n      onChange,\n      onError,\n      min = new Date('01/01/1924'),\n      max = new Date('01/01/2124'),\n      disabled,\n      width = '100%',\n      maxWidth,\n      minWidth,\n      showTime = false,\n      timeIntervalInMinutes = 15,\n      hierarchy = 'secondary',\n      disabledDates,\n      selectDateMessage = 'Select Date',\n      countryCode,\n      renderActions,\n      onTimeSelected,\n      ...props\n    }: DatePickerInputProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n    const isOpen = anchorElement != null;\n    const pickerRef = useRef<HTMLDivElement | null>(null);\n\n    const isException = useCallback((target: HTMLElement) => {\n      return target.closest('.tcn-suggestion-list') != null;\n    }, []);\n\n    const formatter = useMemo(() => {\n      const formatOptions: Intl.DateTimeFormatOptions = {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n      };\n\n      if (showTime) {\n        formatOptions.hour = 'numeric';\n        formatOptions.minute = '2-digit';\n        formatOptions.hour12 = true;\n      }\n\n      return new Intl.DateTimeFormat(countryCode, formatOptions);\n    }, [countryCode, showTime]);\n\n    const formattedDate = value != null ? formatter.format(value) : selectDateMessage;\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 handleRedirect() {\n      const picker = pickerRef.current;\n\n      if (picker != null) {\n        picker.focus();\n      }\n    }\n\n    function dateSelected(date: Date | null) {\n      onChange?.(date);\n      !showTime && closePicker();\n    }\n\n    function timeSelected(hour: number, minutes: number, seconds: number) {\n      onTimeSelected?.(hour, minutes, seconds);\n      closePicker();\n    }\n\n    return (\n      <>\n        <Button\n          ref={ref}\n          className={clsx(styles.button, 'tcn-entry', 'tcn-date-picker-input')}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </Button>\n        <Popper\n          anchorElement={anchorElement}\n          disableClickAway\n          veil\n          onVeilClick={closePicker}\n          onClose={closePicker}\n          verticalAnchor=\"bottom\"\n          horizontalAnchor=\"start\"\n          verticalOrigin=\"top\"\n          horizontalOrigin=\"start\"\n          open={isOpen}\n          isClickAwayException={isException}\n          isScrollAwayException={isException}\n          restoreFocus\n        >\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles.popover, 'tcn-date-picker-popover')}\n            onKeyDown={processKeyInput}\n          >\n            <DatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              showTime={showTime}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              onTimeSelected={timeSelected}\n              timeIntervalInMinutes={timeIntervalInMinutes}\n            />\n            <FocusRedirect onRedirect={handleRedirect} />\n          </ZStack>\n        </Popper>\n      </>\n    );\n  }\n);\n"],"names":["DatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","countryCode","renderActions","onTimeSelected","props","ref","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","isException","useCallback","target","formatter","useMemo","formatOptions","formattedDate","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","handleRedirect","picker","dateSelected","date","timeSelected","hour","minutes","seconds","jsxs","Fragment","jsx","Button","clsx","styles","Popper","ZStack","DatePicker","FocusRedirect"],"mappings":"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"}

package/dist/inputs/index.d.ts

@@ -39,7 +39,8 @@ export * from './suggestions/suggestion_list.js';
 export * from './switch/switch.js';
 export * from './textarea/textarea.js';
 export * from './unit_input/unit_input.js';
-export * from './input_group/input_group.js';
+export * from './control_set/control_set.js';
+export * from './control/control.js';
 export { SelectGroup, type SelectGroupProps, } from '../inputs/select_group/select_group.js';
 export { SingleSelectGroup, type SingleSelectGroupProps, } from '../inputs/select_group/single_select_group.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,0BAA0B,CAAC;AAEzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AAEjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,sCAAsC,CAAC;AAErD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AAEpD,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAE3D,cAAc,kBAAkB,CAAC;AAEjC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,oBAAoB,CAAC;AAEnC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,4BAA4B,CAAC;AAE3C,cAAc,8BAA8B,CAAC;AAE7C,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,GACtB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,+CAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAE9C,cAAc,0BAA0B,CAAC;AAEzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AAEvD,cAAc,kBAAkB,CAAC;AAEjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AACnD,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,sCAAsC,CAAC;AAErD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qCAAqC,CAAC;AAEpD,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AAEpC,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAE3D,cAAc,kBAAkB,CAAC;AAEjC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,oBAAoB,CAAC;AAEnC,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AAEjD,cAAc,oBAAoB,CAAC;AAEnC,cAAc,wBAAwB,CAAC;AAEvC,cAAc,4BAA4B,CAAC;AAE3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AAErC,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,GACtB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,+CAA+C,CAAC"}

package/dist/inputs/index.js

@@ -1,21 +1,21 @@
-import { Checkbox as o } from "./checkbox/checkbox.js";
+import { Checkbox as e } from "./checkbox/checkbox.js";
 import { ColorInput as p } from "./color_input/color_input.js";
 import { ColorPicker as x } from "./color_input/color_picker.js";
 import { ComboBox as f } from "./combo_box/combo_box.js";
 import { DatePicker as n } from "./date_picker/date_picker.js";
-import { DatePickerDay as c } from "./date_picker/date_picker_day.js";
+import { DatePickerDay as l } from "./date_picker/date_picker_day.js";
 import { DatePickerBody as s } from "./date_picker/date_picker_body.js";
 import { DatePickerDate as k } from "./date_picker/date_picker_date.js";
 import { DatePickerInput as P } from "./date_picker/date_picker_input.js";
 import { DatePickerHeader as D } from "./date_picker/date_picker_header.js";
-import { DatePickerPresenter as S } from "./date_picker/date_picker_presenter.js";
+import { DatePickerPresenter as g } from "./date_picker/date_picker_presenter.js";
 import { Input as b } from "./input/input.js";
 import { AlphaCharacter as A } from "./mask_input/alpha_character.js";
 import { AlphaNumericCharacter as B } from "./mask_input/alpha_numeric_character.js";
-import { Character as N } from "./mask_input/character.js";
+import { Character as O } from "./mask_input/character.js";
 import { ConstantCharacter as V } from "./mask_input/constant_character.js";
-import { KeyCaptureInput as R } from "./mask_input/key_capture_input.js";
-import { LanguageCharacter as w } from "./mask_input/language_character.js";
+import { KeyCaptureInput as G } from "./mask_input/key_capture_input.js";
+import { LanguageCharacter as v } from "./mask_input/language_character.js";
 import { Mask as K } from "./mask_input/mask.js";
 import { MaskInput as U } from "./mask_input/mask_input.js";
 import { MaskPresenter as q } from "./mask_input/mask_presenter.js";
@@ -25,41 +25,44 @@ import { MultiComboBox as W } from "./multi_combo_box/multi_combo_box.js";
 import { Multiselect as Y } from "./multiselect/multiselect.js";
 import { MultiselectInlineValues as _ } from "./multiselect/multiselect_inline_values.js";
 import { MultiselectValues as rr } from "./multiselect/multiselect_values.js";
-import { makeAvailableOptions as or, makeValuesAsOptions as tr } from "./options/utils.js";
+import { makeAvailableOptions as er, makeValuesAsOptions as tr } from "./options/utils.js";
 import { Option as mr } from "./options/option.js";
 import { countriesPhoneInformation as ar, defaultCountries as fr } from "./phone_number_input/countries_phone_information.js";
 import { PhoneNumberInput as nr } from "./phone_number_input/phone_number_input.js";
-import { Radio as cr } from "./radio/radio.js";
+import { Radio as lr } from "./radio/radio.js";
 import { Select as sr } from "./select/select.js";
 import { Slider as kr } from "./slider/slider.js";
 import { SuggestionItem as Pr } from "./suggestions/suggestion_item.js";
 import { SuggestionList as Dr } from "./suggestions/suggestion_list.js";
-import { Switch as Sr } from "./switch/switch.js";
+import { Switch as gr } from "./switch/switch.js";
 import { Textarea as br } from "./textarea/textarea.js";
 import { UnitInput as Ar } from "./unit_input/unit_input.js";
-import { InputGroup as Br } from "./input_group/input_group.js";
-import { SelectGroup as Nr } from "./select_group/select_group.js";
-import { SingleSelectGroup as Vr } from "./select_group/single_select_group.js";
+import { ControlSet as Br } from "./control_set/control_set.js";
+import { Control as Or, ControlRow as Rr } from "./control/control.js";
+import { SelectGroup as wr } from "./select_group/select_group.js";
+import { SingleSelectGroup as Lr } from "./select_group/single_select_group.js";
 export {
   A as AlphaCharacter,
   B as AlphaNumericCharacter,
-  N as Character,
-  o as Checkbox,
+  O as Character,
+  e as Checkbox,
   p as ColorInput,
   x as ColorPicker,
   f as ComboBox,
   V as ConstantCharacter,
+  Or as Control,
+  Rr as ControlRow,
+  Br as ControlSet,
   n as DatePicker,
   s as DatePickerBody,
   k as DatePickerDate,
-  c as DatePickerDay,
+  l as DatePickerDay,
   D as DatePickerHeader,
   P as DatePickerInput,
-  S as DatePickerPresenter,
+  g as DatePickerPresenter,
   b as Input,
-  Br as InputGroup,
-  R as KeyCaptureInput,
-  w as LanguageCharacter,
+  G as KeyCaptureInput,
+  v as LanguageCharacter,
   K as Mask,
   U as MaskInput,
   q as MaskPresenter,
@@ -70,20 +73,20 @@ export {
   E as NumericCharacter,
   mr as Option,
   nr as PhoneNumberInput,
-  cr as Radio,
+  lr as Radio,
   J as RegexCharacter,
   sr as Select,
-  Nr as SelectGroup,
-  Vr as SingleSelectGroup,
+  wr as SelectGroup,
+  Lr as SingleSelectGroup,
   kr as Slider,
   Pr as SuggestionItem,
   Dr as SuggestionList,
-  Sr as Switch,
+  gr as Switch,
   br as Textarea,
   Ar as UnitInput,
   ar as countriesPhoneInformation,
   fr as defaultCountries,
-  or as makeAvailableOptions,
+  er as makeAvailableOptions,
   tr as makeValuesAsOptions
 };
 //# sourceMappingURL=index.js.map

package/dist/inputs/index.js.map

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

package/dist/inputs/input/input.js

@@ -1,13 +1,13 @@
-import { jsx as u } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { clsx as c } from "clsx";
-import d from "react";
-import '../../input.css';const f = "_input_a16553f", m = { input: f }, y = d.forwardRef(function({ type: n = "text", style: i, className: s, width: r, height: l, onChange: a, ...t }, o) {
-  return /* @__PURE__ */ u(
+import f from "react";
+import '../../input.css';const o = "_input_a16553f", m = { input: o }, y = f.forwardRef(function({ type: n = "text", style: i, className: s, width: r, height: l, onChange: a, ...t }, u) {
+  return /* @__PURE__ */ d(
     "input",
     {
-      className: c(m.input, s, "tcn-input", "tcn-control"),
+      className: c(m.input, s, "tcn-input", "tcn-entry"),
       type: n,
-      ref: o,
+      ref: u,
       "data-is-disabled": t.disabled || !1,
       "aria-disabled": t.disabled || !1,
       onChange: (e) => {

package/dist/inputs/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { InputHTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  type?: React.HTMLInputTypeAttribute;\n  width?: string;\n  height?: string;\n  value?: string;\n  disabled?: boolean;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Input = React.forwardRef(function Input(\n  { type = 'text', style, className, width, height, onChange, ...props }: InputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      className={clsx(styles.input, className, 'tcn-input', 'tcn-control')}\n      type={type}\n      ref={ref}\n      data-is-disabled={props.disabled || false}\n      aria-disabled={props.disabled || false}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Input","React","type","style","className","width","height","onChange","props","ref","jsx","clsx","styles"],"mappings":";;;8CAkBaA,IAAQC,EAAM,WAAW,SACpC,EAAE,MAAAC,IAAO,QAAQ,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAC/DC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,OAAOR,GAAW,aAAa,aAAa;AAAA,MACnE,MAAAF;AAAA,MACA,KAAAO;AAAA,MACA,oBAAkBD,EAAM,YAAY;AAAA,MACpC,iBAAeA,EAAM,YAAY;AAAA,MACjC,UAAU,CAAA,MAAK;AACb,QAAAD,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,OAAO,EAAE,OAAAH,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}
+{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { InputHTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  type?: React.HTMLInputTypeAttribute;\n  width?: string;\n  height?: string;\n  value?: string;\n  disabled?: boolean;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Input = React.forwardRef(function Input(\n  { type = 'text', style, className, width, height, onChange, ...props }: InputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      className={clsx(styles.input, className, 'tcn-input', 'tcn-entry')}\n      type={type}\n      ref={ref}\n      data-is-disabled={props.disabled || false}\n      aria-disabled={props.disabled || false}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Input","React","type","style","className","width","height","onChange","props","ref","jsx","clsx","styles"],"mappings":";;;8CAkBaA,IAAQC,EAAM,WAAW,SACpC,EAAE,MAAAC,IAAO,QAAQ,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAC/DC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,OAAOR,GAAW,aAAa,WAAW;AAAA,MACjE,MAAAF;AAAA,MACA,KAAAO;AAAA,MACA,oBAAkBD,EAAM,YAAY;AAAA,MACpC,iBAAeA,EAAM,YAAY;AAAA,MACjC,UAAU,CAAA,MAAK;AACb,QAAAD,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,OAAO,EAAE,OAAAH,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}