@tcn/ui 0.10.0 → 0.12.0

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"}

package/dist/inputs/combo_box/combo_box.js

@@ -1,93 +1,96 @@
-import { jsxs as w, Fragment as D, jsx as S } from "react/jsx-runtime";
+import { jsxs as D, Fragment as L, jsx as C } from "react/jsx-runtime";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import L, { useRef as s, useState as x } from "react";
-import { useForkRef as N } from "../../utils/hooks/use_fork_ref.js";
+import N, { useRef as c, useState as f } from "react";
+import { useForkRef as z } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
-import { clsx as V } from "clsx";
+import { clsx as G } from "clsx";
 import "../../draggable.module-BgelQsuJ.js";
-import { SuggestionList as z } from "../suggestions/suggestion_list.js";
-import { Input as G } from "../input/input.js";
-const te = L.forwardRef(function({
-  onOptionSelect: a,
-  children: C = [],
-  onKeyDown: o,
-  onKeyUp: m,
-  value: c,
-  noOptionMatchedMessage: k,
-  trimCustomInput: O = !1,
-  className: b,
-  onMouseDown: p,
-  onMouseUp: g,
+import { SuggestionList as H } from "../suggestions/suggestion_list.js";
+import { Input as J } from "../input/input.js";
+const oe = N.forwardRef(function({
+  onOptionSelect: m,
+  children: O = [],
+  onKeyDown: r,
+  onKeyUp: p,
+  value: o,
+  noOptionMatchedMessage: T,
+  trimCustomInput: b = !1,
+  className: k,
+  onMouseDown: g,
+  onMouseUp: h,
   ...i
-}, y) {
-  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = N(y, f);
+}, A) {
+  const E = c(!1), [F, d] = f(o), S = c(o), n = c(!1), [V, y] = f(null), a = c(null), [R, x] = f(!1), I = z(A, a);
   function l() {
-    R(!0);
+    x(!0);
   }
-  function r() {
-    n.current = !1, R(!1);
+  function u() {
+    n.current = !1, d(""), x(!1);
   }
-  function I(e, t, q) {
+  function M(e, t, w) {
     n.current = !0;
-    const u = f.current;
+    const s = a.current;
     requestAnimationFrame(() => {
-      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, q));
-    }), i.onChange && i.onChange(e), r();
+      s != null && (s.value = e, s.focus(), s.setSelectionRange(t, w));
+    }), i.onChange && i.onChange(e), u();
   }
-  function M(e) {
+  function j(e) {
     n.current = !0;
-    const t = f.current;
-    t?.focus(), r(), a && a(e);
+    const t = a.current;
+    t?.focus(), u(), m && m(e);
   }
-  function j(e) {
-    if (d.current = e.currentTarget.value, n.current) {
-      n.current = !1, o && o(e);
+  function B(e) {
+    if (S.current = e.currentTarget.value, n.current) {
+      n.current = !1, r && r(e);
       return;
     }
-    o && o(e);
-  }
-  function B(e) {
-    e.key === "Enter" && (h ? r() : (l(), e.preventDefault())), d.current !== e.currentTarget.value && l(), m && m(e);
+    r && r(e);
   }
   function U(e) {
-    F(e.currentTarget), A.current = document.activeElement === e.currentTarget, p && p(e);
+    const t = e.key;
+    d(e.currentTarget.value), t === "Enter" && (R ? u() : (l(), e.preventDefault())), S.current !== e.currentTarget.value && l(), p && p(e);
   }
   function _(e) {
-    n.current && (n.current = !1, r()), l(), g && g(e);
+    y(e.currentTarget), E.current = document.activeElement === e.currentTarget, g && g(e);
+  }
+  function q(e) {
+    n.current && (n.current = !1, u()), l(), h && h(e);
   }
-  return /* @__PURE__ */ w(D, { children: [
-    /* @__PURE__ */ S(
-      G,
+  return /* @__PURE__ */ D(L, { children: [
+    /* @__PURE__ */ C(
+      J,
       {
-        ref: T,
-        className: V(b, "tcn-combo-box-input"),
+        ref: I,
+        className: G(k, "tcn-combo-box-input"),
         ...i,
-        value: c,
-        onKeyDown: j,
-        onKeyUp: B,
-        onMouseDown: U,
-        onMouseUp: _
+        value: o,
+        onKeyDown: B,
+        onKeyUp: U,
+        onMouseDown: _,
+        onMouseUp: q
       }
     ),
-    h && /* @__PURE__ */ S(
-      z,
+    /* @__PURE__ */ C(
+      H,
       {
-        anchorElement: E,
-        onClose: I,
-        value: c,
-        trimCustomInput: O,
-        onOptionSelect: M,
-        noSuggestionMessage: k,
+        open: R,
+        anchorElement: V,
+        onClose: M,
+        value: o,
+        initialSearchValue: F,
+        trimCustomInput: b,
+        onOptionSelect: j,
+        noSuggestionMessage: T,
         haveValueAsOption: !0,
-        children: C
+        children: O
       }
     )
   ] });
 });
 export {
-  te as ComboBox
+  oe as ComboBox
 };
 //# sourceMappingURL=combo_box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={clsx(className, 'tcn-combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={value}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n          haveValueAsOption={true}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","valueRef","isClosingRef","anchorElement","setAnchorElement","useState","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","clsx","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"combo_box.js","sources":["../../../src/inputs/combo_box/combo_box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { Input, InputProps } from '../input/input.js';\nimport { OptionProps } from '../options/option.js';\n\nexport interface ComboBoxProps extends InputProps {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onOptionSelect?: (value: string) => void;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const ComboBox = React.forwardRef(function ComboBox(\n  {\n    onOptionSelect: onSuggestionSelect,\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    ...props\n  }: ComboBoxProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const isAlreadyFocusedRef = useRef(false);\n  const [searchValue, setSearchValue] = useState(value);\n  const valueRef = useRef(value);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLInputElement | null>(null);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    isClosingRef.current = false;\n    setSearchValue('');\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose(\n    value: string,\n    selectionStart: number | null,\n    selectionEnd: number | null\n  ) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    requestAnimationFrame(() => {\n      if (input != null) {\n        input.value = value;\n        input.focus();\n        input.setSelectionRange(selectionStart, selectionEnd);\n      }\n    });\n    props.onChange && props.onChange(value);\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string) {\n    isClosingRef.current = true;\n    const input = internalInputRef.current;\n\n    if (input != null) {\n      input.focus();\n    }\n\n    closeSuggestions();\n    onSuggestionSelect && onSuggestionSelect(value);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    valueRef.current = event.currentTarget.value;\n\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      onKeyDown && onKeyDown(event);\n      return;\n    }\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n\n    setSearchValue(event.currentTarget.value);\n\n    if (key === 'Enter') {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n        event.preventDefault();\n      }\n    }\n\n    if (valueRef.current !== event.currentTarget.value) {\n      openSuggestions();\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLInputElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLInputElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        className={clsx(className, 'tcn-combo-box-input')}\n        {...props}\n        value={value}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      />\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={value}\n        initialSearchValue={searchValue}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n        haveValueAsOption={true}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["ComboBox","React","onSuggestionSelect","children","onKeyDown","onKeyUp","value","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","props","ref","isAlreadyFocusedRef","useRef","searchValue","setSearchValue","useState","valueRef","isClosingRef","anchorElement","setAnchorElement","internalInputRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","openSuggestions","closeSuggestions","handleClose","selectionStart","selectionEnd","input","handleSelection","handleKeyDown","event","handleKeyUp","key","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Input","clsx","SuggestionList"],"mappings":"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"}

package/dist/inputs/index.d.ts

@@ -39,4 +39,5 @@ 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';
 //# 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"}
+{"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"}

package/dist/inputs/index.js

@@ -3,23 +3,23 @@ import { ColorInput as p } from "./color_input/color_input.js";
 import { ColorPicker as a } 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 u } from "./date_picker/date_picker_day.js";
+import { DatePickerDay as c } from "./date_picker/date_picker_day.js";
 import { DatePickerBody as s } from "./date_picker/date_picker_body.js";
-import { DatePickerDate as C } from "./date_picker/date_picker_date.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 M } from "./date_picker/date_picker_presenter.js";
-import { Input as S } from "./input/input.js";
+import { Input as d } 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 O } from "./mask_input/character.js";
 import { ConstantCharacter as L } from "./mask_input/constant_character.js";
 import { KeyCaptureInput as v } from "./mask_input/key_capture_input.js";
-import { LanguageCharacter as H } from "./mask_input/language_character.js";
-import { Mask as T } from "./mask_input/mask.js";
-import { MaskInput as j } from "./mask_input/mask_input.js";
-import { MaskPresenter as z } from "./mask_input/mask_presenter.js";
-import { NumericCharacter as F } from "./mask_input/numeric_character.js";
+import { LanguageCharacter as G } 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";
+import { NumericCharacter as E } from "./mask_input/numeric_character.js";
 import { RegexCharacter as J } from "./mask_input/regex_character.js";
 import { MultiComboBox as W } from "./multi_combo_box/multi_combo_box.js";
 import { Multiselect as Y } from "./multiselect/multiselect.js";
@@ -27,16 +27,17 @@ import { MultiselectInlineValues as _ } from "./multiselect/multiselect_inline_v
 import { MultiselectValues as rr } from "./multiselect/multiselect_values.js";
 import { makeAvailableOptions as or, makeValuesAsOptions as tr } from "./options/utils.js";
 import { Option as mr } from "./options/option.js";
-import { countriesPhoneInformation as xr } from "./phone_number_input/countries_phone_information.js";
-import { PhoneNumberInput as ir } from "./phone_number_input/phone_number_input.js";
+import { countriesPhoneInformation as xr, 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 { Select as lr } from "./select/select.js";
+import { Select as sr } from "./select/select.js";
 import { Slider as kr } from "./slider/slider.js";
-import { SuggestionItem as hr } from "./suggestions/suggestion_item.js";
-import { SuggestionList as Ir } from "./suggestions/suggestion_list.js";
-import { Switch as gr } from "./switch/switch.js";
-import { Textarea as br } from "./textarea/textarea.js";
-import { UnitInput as dr } from "./unit_input/unit_input.js";
+import { SuggestionItem as Pr } from "./suggestions/suggestion_item.js";
+import { SuggestionList as Dr } from "./suggestions/suggestion_list.js";
+import { Switch as Mr } from "./switch/switch.js";
+import { Textarea as dr } from "./textarea/textarea.js";
+import { UnitInput as Ar } from "./unit_input/unit_input.js";
+import { InputGroup as Br } from "./input_group/input_group.js";
 export {
   A as AlphaCharacter,
   B as AlphaNumericCharacter,
@@ -48,34 +49,36 @@ export {
   L as ConstantCharacter,
   n as DatePicker,
   s as DatePickerBody,
-  C as DatePickerDate,
-  u as DatePickerDay,
+  k as DatePickerDate,
+  c as DatePickerDay,
   D as DatePickerHeader,
   P as DatePickerInput,
   M as DatePickerPresenter,
-  S as Input,
+  d as Input,
+  Br as InputGroup,
   v as KeyCaptureInput,
-  H as LanguageCharacter,
-  T as Mask,
-  j as MaskInput,
-  z as MaskPresenter,
+  G as LanguageCharacter,
+  K as Mask,
+  U as MaskInput,
+  q as MaskPresenter,
   W as MultiComboBox,
   Y as Multiselect,
   _ as MultiselectInlineValues,
   rr as MultiselectValues,
-  F as NumericCharacter,
+  E as NumericCharacter,
   mr as Option,
-  ir as PhoneNumberInput,
+  nr as PhoneNumberInput,
   cr as Radio,
   J as RegexCharacter,
-  lr as Select,
+  sr as Select,
   kr as Slider,
-  hr as SuggestionItem,
-  Ir as SuggestionList,
-  gr as Switch,
-  br as Textarea,
-  dr as UnitInput,
+  Pr as SuggestionItem,
+  Dr as SuggestionList,
+  Mr as Switch,
+  dr as Textarea,
+  Ar as UnitInput,
   xr as countriesPhoneInformation,
+  fr as defaultCountries,
   or as makeAvailableOptions,
   tr as makeValuesAsOptions
 };

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

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')}\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,WAAW;AAAA,MACpD,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-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;"}

package/dist/inputs/input_group/input_group.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input_group.d.ts","sourceRoot":"","sources":["../../../src/inputs/input_group/input_group.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/input_group/input_group.js

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