@tcn/ui 0.16.0 → 0.18.0

package/dist/inputs/multiselect/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n  extends Omit<\n    SelectProps,\n    'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n  > {\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n  {\n    value: values = [],\n    disabled = false,\n    children,\n    className,\n    onChange,\n    inline = false,\n    width = '100%',\n    minWidth,\n    maxWidth,\n    ...props\n  }: MultiselectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n  const selectRef = useForkRef(ref, internalSelectRef);\n  const lastValue = values[values.length - 1] || null;\n  const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n  useLayoutEffect(() => {\n    const valuesElement = valuesContainerRef.current;\n    const shouldFocus = lastValue != null && valuesElement != null;\n    if (shouldFocus) {\n      (\n        valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n      )?.focus();\n\n      // Safari doesn't respect the first focus if its called too quickly\n      requestAnimationFrame(() => {\n        internalSelectRef.current && internalSelectRef.current.focus();\n      });\n    }\n  }, [lastValue]);\n\n  function addValue(value: string) {\n    if (!values.includes(value)) {\n      onChange && onChange([...values, value]);\n    }\n  }\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  if (inline) {\n    return (\n      <>\n        <Select\n          ref={selectRef}\n          disabled={disabled}\n          onChange={addValue}\n          width=\"auto\"\n          value={null}\n          placeholder=\"Select to Add\"\n          {...props}\n        >\n          {availableOptions}\n        </Select>\n        <Spacer width=\"8px\" />\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          onRemove={removeValue}\n          disabled={disabled}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n    >\n      <Select\n        ref={ref}\n        disabled={disabled}\n        onChange={addValue}\n        value={null}\n        placeholder=\"Select to Add\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        {...props}\n      >\n        {availableOptions}\n      </Select>\n      <MultiselectValues\n        disabled={disabled}\n        values={valuesAsOptions}\n        onRemove={removeValue}\n      />\n    </VStack>\n  );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n  extends Omit<\n    SelectProps,\n    'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n  > {\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n  {\n    value: values = [],\n    disabled = false,\n    children,\n    className,\n    onChange,\n    inline = false,\n    width = '100%',\n    minWidth,\n    maxWidth,\n    ...props\n  }: MultiselectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n  const selectRef = useForkRef(ref, internalSelectRef);\n  const lastValue = values[values.length - 1] || null;\n  const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n  useLayoutEffect(() => {\n    const valuesElement = valuesContainerRef.current;\n    const shouldFocus = lastValue != null && valuesElement != null;\n    if (shouldFocus) {\n      (\n        valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n      )?.focus();\n\n      // Safari doesn't respect the first focus if its called too quickly\n      requestAnimationFrame(() => {\n        internalSelectRef.current && internalSelectRef.current.focus();\n      });\n    }\n  }, [lastValue]);\n\n  function addValue(value: string) {\n    if (!values.includes(value)) {\n      onChange && onChange([...values, value]);\n    }\n  }\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  if (inline) {\n    return (\n      <>\n        <Select\n          ref={selectRef}\n          disabled={disabled}\n          onChange={addValue}\n          width=\"auto\"\n          value={null}\n          placeholder=\"Select to Add\"\n          {...props}\n        >\n          {availableOptions}\n        </Select>\n        <Spacer width=\"8px\" />\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          onRemove={removeValue}\n          disabled={disabled}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n    >\n      <Select\n        ref={ref}\n        disabled={disabled}\n        onChange={addValue}\n        value={null}\n        placeholder=\"Select to Add\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        {...props}\n      >\n        {availableOptions}\n      </Select>\n      <MultiselectValues\n        disabled={disabled}\n        values={valuesAsOptions}\n        onRemove={removeValue}\n      />\n    </VStack>\n  );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDA+B9B"}
+{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDAgC9B"}

package/dist/inputs/multiselect/multiselect_inline_values.js

@@ -1,50 +1,50 @@
-import { jsxs as n, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { jsxs as p, jsx as t, Fragment as c } from "react/jsx-runtime";
 import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
 import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as h } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { Chip as u } from "../../tokens/chip/chip.js";
 import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
-import m from "clsx";
+import o from "clsx";
 import "../../stacks/h_stack.js";
 import "../../value.module-DFaCouFD.js";
 import "../../tokens/term/term.js";
 function A({
-  values: o,
+  values: m,
   disabled: s,
-  onRemove: p
+  onRemove: l
 }) {
-  const t = o.map((i, l) => /* @__PURE__ */ n(
+  const r = m.map((i, n) => /* @__PURE__ */ p(
     u,
     {
       hAlign: "start",
-      className: m(e.chip, "tcn-multiselect-chip"),
+      className: o(e.chip, "tcn-multiselect-chip"),
       paddingInlineStart: "8px",
       width: "auto",
       children: [
-        /* @__PURE__ */ r("span", { children: i.props.label }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t("span", { children: i.props.label }),
+        /* @__PURE__ */ t(
           h,
           {
+            utility: !0,
             disabled: s,
             size: "sm",
             hierarchy: "tertiary",
-            className: m(e.remove, "tcn-multiselect-chip-remove"),
+            className: o(e.remove, "tcn-multiselect-chip-remove"),
             onClick: () => {
-              p(i);
+              l(i);
             },
-            children: /* @__PURE__ */ r(a, { size: "xs" })
+            children: /* @__PURE__ */ t(a, { size: "xs" })
           }
         )
       ]
     },
-    l
+    n
   ));
-  return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
+  return r.length === 0 ? null : /* @__PURE__ */ t(c, { children: r });
 }
 export {
   A as MultiselectInlineValues

package/dist/inputs/multiselect/multiselect_inline_values.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
+{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { Button } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <Button\n          utility\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </Button>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAhBKP;AAAA,EAAA,CAmBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}

package/dist/inputs/multiselect/multiselect_values.js

@@ -1,13 +1,12 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { clsx as r } from "clsx";
-import { s as i } from "../../multiselect_values.module-BMJOyYHe.js";
+import { clsx as i } from "clsx";
+import { s as r } from "../../multiselect_values.module-BMJOyYHe.js";
 import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as u } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
-import { Chip as u } from "../../tokens/chip/chip.js";
+import { Chip as h } from "../../tokens/chip/chip.js";
 import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
 import "../../stacks/h_stack.js";
@@ -19,24 +18,24 @@ function B({
   className: l,
   onRemove: n
 }) {
-  const o = s.map((m, c) => /* @__PURE__ */ p(
-    u,
+  const m = s.map((o, c) => /* @__PURE__ */ p(
+    h,
     {
       hAlign: "start",
-      color: "rgb(57, 85, 120)",
-      className: r(i.chip, "tcn-multiselect-chip"),
+      className: i(r.chip, "tcn-multiselect-chip"),
       paddingInlineStart: "8px",
       children: [
-        /* @__PURE__ */ t("span", { children: m.props.label }),
+        /* @__PURE__ */ t("span", { children: o.props.label }),
         /* @__PURE__ */ t(
-          h,
+          u,
           {
+            utility: !0,
             disabled: e,
             size: "sm",
             hierarchy: "tertiary",
-            className: r(i.remove, "tcn-multiselect-chip-remove"),
+            className: i(r.remove, "tcn-multiselect-chip-remove"),
             onClick: () => {
-              n(m);
+              n(o);
             },
             children: /* @__PURE__ */ t(a, { size: "xs" })
           }
@@ -45,16 +44,16 @@ function B({
     },
     c
   ));
-  return o.length === 0 ? null : /* @__PURE__ */ t(
+  return m.length === 0 ? null : /* @__PURE__ */ t(
     "div",
     {
-      className: r(
-        i["item-container"],
+      className: i(
+        r["item-container"],
         l,
         "tcn-multiselect-values-container"
       ),
       "data-is-disabled": e,
-      children: o
+      children: m
     }
   );
 }

package/dist/inputs/multiselect/multiselect_values.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles['item-container'],\n        className,\n        'tcn-multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <Button\n          utility\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </Button>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles['item-container'],\n        className,\n        'tcn-multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","Button","CrossIcon"],"mappings":";;;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/inputs/phone_number_input/phone_number_context.js

@@ -1,15 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
 import i from "react";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import { makeContextHook as m } from "../../utils/hooks/make_context_hook.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-const o = i.createContext(void 0), h = m(o, "PhoneBookContext");
-function s({
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
+const o = i.createContext(void 0), B = m(o, "PhoneBookContext");
+function _({
   children: t,
   value: r
 }) {
@@ -17,7 +21,7 @@ function s({
 }
 export {
   o as PhoneBookContext,
-  s as PhoneBookProvider,
-  h as usePhoneContext
+  _ as PhoneBookProvider,
+  B as usePhoneContext
 };
 //# sourceMappingURL=phone_number_context.js.map

package/dist/inputs/phone_number_input/phone_number_context.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_context.js","sources":["../../../src/inputs/phone_number_input/phone_number_context.tsx"],"sourcesContent":["import React from 'react';\nimport { makeContextHook } from '../../utils/index.js';\nimport { OptionProps } from '../options/option.js';\nimport type { CountryCode } from 'libphonenumber-js';\n\nexport interface PhoneContext {\n  allowSip: boolean;\n  phoneBook: React.ReactElement<OptionProps>[];\n  ariaPhoneBookButtonLabel?: string;\n  ariaSelectLabel?: string;\n  value: string;\n  setValue: (value: string) => void;\n  setCountry: (country: CountryCode) => void;\n  sipAddress: string;\n  setSipAddress: (address: string) => void;\n  disabled?: boolean;\n  focusNumberInput: boolean;\n  setFocusNumberInput: (focus: boolean) => void;\n}\n\nexport const PhoneBookContext = React.createContext<PhoneContext | undefined>(undefined);\nexport const usePhoneContext = makeContextHook(PhoneBookContext, 'PhoneBookContext');\n\nexport function PhoneBookProvider({\n  children,\n  value,\n}: {\n  value: PhoneContext;\n  children: React.ReactNode;\n}) {\n  return <PhoneBookContext.Provider value={value}>{children}</PhoneBookContext.Provider>;\n}\n"],"names":["PhoneBookContext","React","usePhoneContext","makeContextHook","PhoneBookProvider","children","value","jsx"],"mappings":";;;;;;;;;;AAoBO,MAAMA,IAAmBC,EAAM,cAAwC,MAAS,GAC1EC,IAAkBC,EAAgBH,GAAkB,kBAAkB;AAE5E,SAASI,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACP,EAAiB,UAAjB,EAA0B,OAAAM,GAAe,UAAAD,EAAA,CAAS;AAC5D;"}
+{"version":3,"file":"phone_number_context.js","sources":["../../../src/inputs/phone_number_input/phone_number_context.tsx"],"sourcesContent":["import React from 'react';\nimport { makeContextHook } from '../../utils/index.js';\nimport { OptionProps } from '../options/option.js';\nimport type { CountryCode } from 'libphonenumber-js';\n\nexport interface PhoneContext {\n  allowSip: boolean;\n  phoneBook: React.ReactElement<OptionProps>[];\n  ariaPhoneBookButtonLabel?: string;\n  ariaSelectLabel?: string;\n  value: string;\n  setValue: (value: string) => void;\n  setCountry: (country: CountryCode) => void;\n  sipAddress: string;\n  setSipAddress: (address: string) => void;\n  disabled?: boolean;\n  focusNumberInput: boolean;\n  setFocusNumberInput: (focus: boolean) => void;\n}\n\nexport const PhoneBookContext = React.createContext<PhoneContext | undefined>(undefined);\nexport const usePhoneContext = makeContextHook(PhoneBookContext, 'PhoneBookContext');\n\nexport function PhoneBookProvider({\n  children,\n  value,\n}: {\n  value: PhoneContext;\n  children: React.ReactNode;\n}) {\n  return <PhoneBookContext.Provider value={value}>{children}</PhoneBookContext.Provider>;\n}\n"],"names":["PhoneBookContext","React","usePhoneContext","makeContextHook","PhoneBookProvider","children","value","jsx"],"mappings":";;;;;;;;;;;;;;AAoBO,MAAMA,IAAmBC,EAAM,cAAwC,MAAS,GAC1EC,IAAkBC,EAAgBH,GAAkB,kBAAkB;AAE5E,SAASI,EAAkB;AAAA,EAChC,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACP,EAAiB,UAAjB,EAA0B,OAAAM,GAAe,UAAAD,EAAA,CAAS;AAC5D;"}

package/dist/inputs/phone_number_input/phone_number_input_adapter.js

@@ -4,7 +4,6 @@ import f from "clsx";
 import { forwardRef as F, useState as R, useRef as y, useCallback as z, useLayoutEffect as E } 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 L } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { SuggestionList as w } from "../suggestions/suggestion_list.js";
@@ -12,7 +11,7 @@ import { usePhoneContext as j } from "./phone_number_context.js";
 import { getCountryFromValue as T } from "./phone_number_country_select_adapter.js";
 import { Input as V } from "../input/input.js";
 import { useForkRef as q } from "../../utils/hooks/use_fork_ref.js";
-const to = F(function({ onChange: n, value: t = "", className: a, ...h }, g) {
+const oo = F(function({ onChange: n, value: t = "", className: a, ...h }, g) {
   t = t.toString();
   const [s, r] = R(
     null
@@ -93,6 +92,6 @@ const to = F(function({ onChange: n, value: t = "", className: a, ...h }, g) {
   ] });
 });
 export {
-  to as PhoneNumberInputAdapter
+  oo as PhoneNumberInputAdapter
 };
 //# sourceMappingURL=phone_number_input_adapter.js.map

package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n  value = value.toString();\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    ariaPhoneBookButtonLabel,\n    disabled,\n    setFocusNumberInput,\n    focusNumberInput,\n  } = usePhoneContext();\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    closePhoneBook();\n    setFocusNumberInput(true);\n    setValue(value);\n  }\n\n  const handleChange = useCallback(\n    (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return;\n      const e =\n        event ??\n        ({\n          target: { value },\n          currentTarget: { value },\n        } as React.ChangeEvent<HTMLInputElement>);\n      onChange(e);\n    },\n    [onChange]\n  );\n\n  if (value.startsWith('+')) {\n    const country = getCountryFromValue(value);\n    const prefixLength = country?.prefix?.length || 0;\n    value = value.substring(prefixLength);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef?.current;\n\n    if (input == null || !focusNumberInput) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (input.value.length > 0) {\n        input.select();\n      } else {\n        input.focus();\n      }\n    });\n  }, [focusNumberInput]);\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        value={value}\n        {...(rest as any)}\n        className={clsx(className, 'tcn-control-set-item')}\n        onChange={handleChange}\n      />\n      {showPhoneBook && (\n        <Button\n          disabled={disabled}\n          className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}\n          aria-label={ariaPhoneBookButtonLabel}\n          onClick={togglePhoneBook}\n          size=\"md\"\n        >\n          <NotebookIcon size=\"md\" />\n        </Button>\n      )}\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n        width=\"300px\"\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        noSuggestionMessage=\"No phone numbers found\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;;AAcO,MAAMA,KAA0BC,EAGrC,SAAsB,EAAE,UAAAC,GAAU,OAAAC,IAAQ,IAAI,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACzE,EAAAH,IAAQA,EAAM,SAAA;AACd,QAAM,CAACI,GAAkBC,CAAmB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEIC,IAAkBH,KAAoB,MACtCI,IAAmBC,EAAgC,IAAI,GACvDC,IAAYC,EAAWR,GAAKK,CAAgB,GAE5C;AAAA,IACJ,WAAWI;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBP,EAAiB,SAAS;AAEhD,WAASQ,EAAgBC,GAAwC;AAC/D,IACEhB,EADEE,IACkB,OAEAc,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAjB,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASkB,EAA4BvB,GAAe;AAClD,IAAAsB,EAAA,GACAN,EAAoB,EAAI,GACxBH,EAASb,CAAK;AAAA,EAChB;AAEA,QAAMwB,IAAeC;AAAA,IACnB,CAACzB,GAAe0B,MAAgD;AAC9D,UAAI,CAAC3B,EAAU;AAOf,MAAAA,EALE2B,KACC;AAAA,QACC,QAAQ,EAAE,OAAA1B,EAAAA;AAAAA,QACV,eAAe,EAAE,OAAAA,EAAAA;AAAAA,MAAM,CAEjB;AAAA,IACZ;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,MAAIC,EAAM,WAAW,GAAG,GAAG;AAEzB,UAAM2B,IADUC,EAAoB5B,CAAK,GACX,QAAQ,UAAU;AAChD,IAAAA,IAAQA,EAAM,UAAU2B,CAAY;AAAA,EACtC;AAEA,SAAAE,EAAgB,MAAM;AACpB,UAAMC,IAAQtB,GAAkB;AAEhC,IAAIsB,KAAS,QAAQ,CAACb,KAItB,sBAAsB,MAAM;AAC1B,MAAIa,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACb,CAAgB,CAAC,GAGnB,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,OAAAV;AAAA,QACC,GAAIE;AAAA,QACL,WAAWiC,EAAKlC,GAAW,sBAAsB;AAAA,QACjD,UAAUuB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXL,KACC,gBAAAc;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,WAAWoB,EAAK,wBAAwB,6BAA6B;AAAA,QACrE,cAAYrB;AAAA,QACZ,SAASM;AAAA,QACT,MAAK;AAAA,QAEL,UAAA,gBAAAa,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5B,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAM/B;AAAA,QACN,eAAeH;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,gBAAgBmB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"phone_number_input_adapter.js","sources":["../../../src/inputs/phone_number_input/phone_number_input_adapter.tsx"],"sourcesContent":["import { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport clsx from 'clsx';\nimport { forwardRef, useState, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { usePhoneContext } from './phone_number_context.js';\nimport { getCountryFromValue } from './phone_number_country_select_adapter.js';\nimport { Input } from '../input/input.js';\nimport { useForkRef } from '../../utils/hooks/use_fork_ref.js';\n\n/**\n * Bridges `@tcn/ui/inputs` Input (onChange: (value, event?) => void)\n * with react-phone-number-input's expectation (onChange: (event) => void).\n */\nexport const PhoneNumberInputAdapter = forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement>\n>(function InputAdapter({ onChange, value = '', className, ...rest }, ref) {\n  value = value.toString();\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, internalInputRef);\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    ariaPhoneBookButtonLabel,\n    disabled,\n    setFocusNumberInput,\n    focusNumberInput,\n  } = usePhoneContext();\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    closePhoneBook();\n    setFocusNumberInput(true);\n    setValue(value);\n  }\n\n  const handleChange = useCallback(\n    (value: string, event?: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return;\n      const e =\n        event ??\n        ({\n          target: { value },\n          currentTarget: { value },\n        } as React.ChangeEvent<HTMLInputElement>);\n      onChange(e);\n    },\n    [onChange]\n  );\n\n  if (value.startsWith('+')) {\n    const country = getCountryFromValue(value);\n    const prefixLength = country?.prefix?.length || 0;\n    value = value.substring(prefixLength);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef?.current;\n\n    if (input == null || !focusNumberInput) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (input.value.length > 0) {\n        input.select();\n      } else {\n        input.focus();\n      }\n    });\n  }, [focusNumberInput]);\n\n  return (\n    <>\n      <Input\n        ref={forkedRef}\n        value={value}\n        {...(rest as any)}\n        className={clsx(className, 'tcn-control-set-item')}\n        onChange={handleChange}\n      />\n      {showPhoneBook && (\n        <Button\n          disabled={disabled}\n          className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}\n          aria-label={ariaPhoneBookButtonLabel}\n          onClick={togglePhoneBook}\n          size=\"md\"\n        >\n          <NotebookIcon size=\"md\" />\n        </Button>\n      )}\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n        width=\"300px\"\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        noSuggestionMessage=\"No phone numbers found\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["PhoneNumberInputAdapter","forwardRef","onChange","value","className","rest","ref","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","internalInputRef","useRef","forkedRef","useForkRef","phoneBookOptions","setValue","ariaPhoneBookButtonLabel","disabled","setFocusNumberInput","focusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","handleChange","useCallback","event","prefixLength","getCountryFromValue","useLayoutEffect","input","jsxs","Fragment","jsx","Input","clsx","Button","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;AAcO,MAAMA,KAA0BC,EAGrC,SAAsB,EAAE,UAAAC,GAAU,OAAAC,IAAQ,IAAI,WAAAC,GAAW,GAAGC,EAAA,GAAQC,GAAK;AACzE,EAAAH,IAAQA,EAAM,SAAA;AACd,QAAM,CAACI,GAAkBC,CAAmB,IAAIC;AAAA,IAC9C;AAAA,EAAA,GAEIC,IAAkBH,KAAoB,MACtCI,IAAmBC,EAAgC,IAAI,GACvDC,IAAYC,EAAWR,GAAKK,CAAgB,GAE5C;AAAA,IACJ,WAAWI;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,UAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBP,EAAiB,SAAS;AAEhD,WAASQ,EAAgBC,GAAwC;AAC/D,IACEhB,EADEE,IACkB,OAEAc,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAjB,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASkB,EAA4BvB,GAAe;AAClD,IAAAsB,EAAA,GACAN,EAAoB,EAAI,GACxBH,EAASb,CAAK;AAAA,EAChB;AAEA,QAAMwB,IAAeC;AAAA,IACnB,CAACzB,GAAe0B,MAAgD;AAC9D,UAAI,CAAC3B,EAAU;AAOf,MAAAA,EALE2B,KACC;AAAA,QACC,QAAQ,EAAE,OAAA1B,EAAAA;AAAAA,QACV,eAAe,EAAE,OAAAA,EAAAA;AAAAA,MAAM,CAEjB;AAAA,IACZ;AAAA,IACA,CAACD,CAAQ;AAAA,EAAA;AAGX,MAAIC,EAAM,WAAW,GAAG,GAAG;AAEzB,UAAM2B,IADUC,EAAoB5B,CAAK,GACX,QAAQ,UAAU;AAChD,IAAAA,IAAQA,EAAM,UAAU2B,CAAY;AAAA,EACtC;AAEA,SAAAE,EAAgB,MAAM;AACpB,UAAMC,IAAQtB,GAAkB;AAEhC,IAAIsB,KAAS,QAAQ,CAACb,KAItB,sBAAsB,MAAM;AAC1B,MAAIa,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACb,CAAgB,CAAC,GAGnB,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKxB;AAAA,QACL,OAAAV;AAAA,QACC,GAAIE;AAAA,QACL,WAAWiC,EAAKlC,GAAW,sBAAsB;AAAA,QACjD,UAAUuB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEXL,KACC,gBAAAc;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,WAAWoB,EAAK,wBAAwB,6BAA6B;AAAA,QACrE,cAAYrB;AAAA,QACZ,SAASM;AAAA,QACT,MAAK;AAAA,QAEL,UAAA,gBAAAa,EAACI,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5B,gBAAAJ;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,MAAM/B;AAAA,QACN,eAAeH;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QACf,OAAM;AAAA,QACN,gBAAgBmB;AAAA,QAChB,SAASD;AAAA,QACT,qBAAoB;AAAA,QAEnB,UAAAV;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/inputs/phone_number_input/sip_input.js

@@ -4,7 +4,6 @@ import { NotebookIcon as L } from "@tcn/icons/notebook_icon.js";
 import { Input as R } from "../input/input.js";
 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 j } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { ControlSet as w } from "../control_set/control_set.js";
@@ -12,7 +11,7 @@ import y from "clsx";
 import { usePhoneContext as V } from "./phone_number_context.js";
 import { PhoneNumberCountrySelectAdapter as _ } from "./phone_number_country_select_adapter.js";
 import { SuggestionList as q } from "../suggestions/suggestion_list.js";
-function oo({
+function Z({
   disabled: n,
   countries: d,
   name: k,
@@ -27,8 +26,8 @@ function oo({
     setCountry: C,
     ariaPhoneBookButtonLabel: I,
     sipAddress: p,
-    setSipAddress: m,
-    focusNumberInput: c,
+    setSipAddress: c,
+    focusNumberInput: m,
     setFocusNumberInput: a
   } = V(), x = s.length > 0;
   function A(o) {
@@ -45,17 +44,17 @@ function oo({
     label: o
   })) || [];
   function v(o) {
-    o !== "SIP" && (m(p), a(!0), r(""), C(o || "US"));
+    o !== "SIP" && (c(p), a(!0), r(""), C(o || "US"));
   }
   function z(o) {
-    m(o), r(`sip:${o}`);
+    c(o), r(`sip:${o}`);
   }
   return F(() => {
     const o = i.current;
-    o == null || !c || requestAnimationFrame(() => {
+    o == null || !m || requestAnimationFrame(() => {
       o.value.length > 0 ? o.select() : o.focus();
     });
-  }, [c]), /* @__PURE__ */ f(E, { children: [
+  }, [m]), /* @__PURE__ */ f(E, { children: [
     /* @__PURE__ */ f(w, { children: [
       /* @__PURE__ */ e(
         _,
@@ -111,6 +110,6 @@ function oo({
   ] });
 }
 export {
-  oo as SipInput
+  Z as SipInput
 };
 //# sourceMappingURL=sip_input.js.map

package/dist/inputs/phone_number_input/sip_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sip_input.js","sources":["../../../src/inputs/phone_number_input/sip_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Input } from '../input/input.js';\nimport { Button } from '../../actions/index.js';\nimport { ControlSet } from '../control_set/control_set.js';\nimport clsx from 'clsx';\nimport { usePhoneContext } from './phone_number_context.js';\nimport type { CountryCode } from 'libphonenumber-js';\nimport {\n  PhoneNumberCountrySelectAdapter,\n  type CountryOption,\n} from './phone_number_country_select_adapter.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\n\nexport interface SipInputProps {\n  onChange: (value: string) => void;\n  sipAutoComplete?: string;\n  countries?: CountryCode[];\n  disabled?: boolean;\n  name?: string;\n  'aria-label'?: string;\n  autoFocus?: boolean;\n  placeholder?: string;\n}\n\nexport function SipInput({\n  disabled,\n  countries,\n  name,\n  'aria-label': ariaLabel,\n  autoFocus,\n  placeholder,\n  sipAutoComplete = 'on',\n}: SipInputProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [phoneBookElement, setPhoneBookElement] =\n    React.useState<HTMLButtonElement | null>(null);\n  const isPhoneBookOpen = phoneBookElement != null;\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    setCountry,\n    ariaPhoneBookButtonLabel,\n    sipAddress,\n    setSipAddress,\n    focusNumberInput,\n    setFocusNumberInput,\n  } = usePhoneContext();\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    closePhoneBook();\n    setFocusNumberInput(true);\n    setValue(value);\n  }\n\n  const options: CountryOption[] =\n    countries?.map(country => ({\n      value: country,\n      label: country,\n    })) || [];\n\n  function selectCountry(countryCode?: string) {\n    if (countryCode !== 'SIP') {\n      setSipAddress(sipAddress);\n      setFocusNumberInput(true);\n      setValue('');\n      setCountry((countryCode as CountryCode) || 'US');\n    }\n  }\n\n  function updateSipValue(value: string) {\n    setSipAddress(value);\n    setValue(`sip:${value}`);\n  }\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    if (input == null || !focusNumberInput) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (input.value.length > 0) {\n        input.select();\n      } else {\n        input.focus();\n      }\n    });\n  }, [focusNumberInput]);\n\n  return (\n    <>\n      <ControlSet>\n        <PhoneNumberCountrySelectAdapter\n          value=\"SIP\"\n          onChange={selectCountry}\n          options={options}\n          disabled={disabled}\n        />\n        <Input\n          ref={inputRef}\n          value={sipAddress}\n          disabled={disabled}\n          onChange={updateSipValue}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          autoComplete={sipAutoComplete}\n        />\n        {showPhoneBook && (\n          <Button\n            disabled={disabled}\n            className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}\n            aria-label={ariaPhoneBookButtonLabel}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </Button>\n        )}\n      </ControlSet>\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        width=\"300px\"\n        noSuggestionMessage=\"No phone numbers found\"\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n}\n"],"names":["SipInput","disabled","countries","name","ariaLabel","autoFocus","placeholder","sipAutoComplete","inputRef","React","phoneBookElement","setPhoneBookElement","isPhoneBookOpen","phoneBookOptions","setValue","setCountry","ariaPhoneBookButtonLabel","sipAddress","setSipAddress","focusNumberInput","setFocusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","value","options","country","selectCountry","countryCode","updateSipValue","useLayoutEffect","input","jsxs","Fragment","ControlSet","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"sip_input.js","sources":["../../../src/inputs/phone_number_input/sip_input.tsx"],"sourcesContent":["import React, { useLayoutEffect } from 'react';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Input } from '../input/input.js';\nimport { Button } from '../../actions/index.js';\nimport { ControlSet } from '../control_set/control_set.js';\nimport clsx from 'clsx';\nimport { usePhoneContext } from './phone_number_context.js';\nimport type { CountryCode } from 'libphonenumber-js';\nimport {\n  PhoneNumberCountrySelectAdapter,\n  type CountryOption,\n} from './phone_number_country_select_adapter.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\n\nexport interface SipInputProps {\n  onChange: (value: string) => void;\n  sipAutoComplete?: string;\n  countries?: CountryCode[];\n  disabled?: boolean;\n  name?: string;\n  'aria-label'?: string;\n  autoFocus?: boolean;\n  placeholder?: string;\n}\n\nexport function SipInput({\n  disabled,\n  countries,\n  name,\n  'aria-label': ariaLabel,\n  autoFocus,\n  placeholder,\n  sipAutoComplete = 'on',\n}: SipInputProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [phoneBookElement, setPhoneBookElement] =\n    React.useState<HTMLButtonElement | null>(null);\n  const isPhoneBookOpen = phoneBookElement != null;\n\n  const {\n    phoneBook: phoneBookOptions,\n    setValue,\n    setCountry,\n    ariaPhoneBookButtonLabel,\n    sipAddress,\n    setSipAddress,\n    focusNumberInput,\n    setFocusNumberInput,\n  } = usePhoneContext();\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    closePhoneBook();\n    setFocusNumberInput(true);\n    setValue(value);\n  }\n\n  const options: CountryOption[] =\n    countries?.map(country => ({\n      value: country,\n      label: country,\n    })) || [];\n\n  function selectCountry(countryCode?: string) {\n    if (countryCode !== 'SIP') {\n      setSipAddress(sipAddress);\n      setFocusNumberInput(true);\n      setValue('');\n      setCountry((countryCode as CountryCode) || 'US');\n    }\n  }\n\n  function updateSipValue(value: string) {\n    setSipAddress(value);\n    setValue(`sip:${value}`);\n  }\n\n  useLayoutEffect(() => {\n    const input = inputRef.current;\n\n    if (input == null || !focusNumberInput) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (input.value.length > 0) {\n        input.select();\n      } else {\n        input.focus();\n      }\n    });\n  }, [focusNumberInput]);\n\n  return (\n    <>\n      <ControlSet>\n        <PhoneNumberCountrySelectAdapter\n          value=\"SIP\"\n          onChange={selectCountry}\n          options={options}\n          disabled={disabled}\n        />\n        <Input\n          ref={inputRef}\n          value={sipAddress}\n          disabled={disabled}\n          onChange={updateSipValue}\n          name={name}\n          aria-label={ariaLabel}\n          autoFocus={autoFocus}\n          placeholder={placeholder}\n          autoComplete={sipAutoComplete}\n        />\n        {showPhoneBook && (\n          <Button\n            disabled={disabled}\n            className={clsx('tcn-control-set-item', 'tcn-phone-number-phone-book')}\n            aria-label={ariaPhoneBookButtonLabel}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </Button>\n        )}\n      </ControlSet>\n      <SuggestionList\n        open={isPhoneBookOpen}\n        anchorElement={phoneBookElement}\n        onOptionSelect={handlePhoneBookOptionSelect}\n        onClose={closePhoneBook}\n        width=\"300px\"\n        noSuggestionMessage=\"No phone numbers found\"\n        horizontalAnchor=\"end\"\n        horizontalOrigin=\"end\"\n        verticalAnchor=\"top\"\n        verticalOrigin=\"top\"\n      >\n        {phoneBookOptions}\n      </SuggestionList>\n    </>\n  );\n}\n"],"names":["SipInput","disabled","countries","name","ariaLabel","autoFocus","placeholder","sipAutoComplete","inputRef","React","phoneBookElement","setPhoneBookElement","isPhoneBookOpen","phoneBookOptions","setValue","setCountry","ariaPhoneBookButtonLabel","sipAddress","setSipAddress","focusNumberInput","setFocusNumberInput","usePhoneContext","showPhoneBook","togglePhoneBook","e","closePhoneBook","handlePhoneBookOptionSelect","value","options","country","selectCountry","countryCode","updateSipValue","useLayoutEffect","input","jsxs","Fragment","ControlSet","jsx","PhoneNumberCountrySelectAdapter","Input","Button","clsx","NotebookIcon","SuggestionList"],"mappings":";;;;;;;;;;;;;AAyBO,SAASA,EAAS;AAAA,EACvB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC,IAAkB;AACpB,GAAkB;AAChB,QAAMC,IAAWC,EAAM,OAAyB,IAAI,GAC9C,CAACC,GAAkBC,CAAmB,IAC1CF,EAAM,SAAmC,IAAI,GACzCG,IAAkBF,KAAoB,MAEtC;AAAA,IACJ,WAAWG;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,0BAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAgBT,EAAiB,SAAS;AAEhD,WAASU,EAAgBC,GAAwC;AAC/D,IACEb,EADEC,IACkB,OAEAY,EAAE,aAFE;AAAA,EAI5B;AAEA,WAASC,IAAiB;AACxB,IAAAd,EAAoB,IAAI;AAAA,EAC1B;AAEA,WAASe,EAA4BC,GAAe;AAClD,IAAAF,EAAA,GACAL,EAAoB,EAAI,GACxBN,EAASa,CAAK;AAAA,EAChB;AAEA,QAAMC,IACJ1B,GAAW,IAAI,CAAA2B,OAAY;AAAA,IACzB,OAAOA;AAAA,IACP,OAAOA;AAAA,EAAA,EACP,KAAK,CAAA;AAET,WAASC,EAAcC,GAAsB;AAC3C,IAAIA,MAAgB,UAClBb,EAAcD,CAAU,GACxBG,EAAoB,EAAI,GACxBN,EAAS,EAAE,GACXC,EAAYgB,KAA+B,IAAI;AAAA,EAEnD;AAEA,WAASC,EAAeL,GAAe;AACrC,IAAAT,EAAcS,CAAK,GACnBb,EAAS,OAAOa,CAAK,EAAE;AAAA,EACzB;AAEA,SAAAM,EAAgB,MAAM;AACpB,UAAMC,IAAQ1B,EAAS;AAEvB,IAAI0B,KAAS,QAAQ,CAACf,KAItB,sBAAsB,MAAM;AAC1B,MAAIe,EAAM,MAAM,SAAS,IACvBA,EAAM,OAAA,IAENA,EAAM,MAAA;AAAA,IAEV,CAAC;AAAA,EACH,GAAG,CAACf,CAAgB,CAAC,GAGnB,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAUT;AAAA,UACV,SAAAF;AAAA,UACA,UAAA3B;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAqC;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKhC;AAAA,UACL,OAAOS;AAAA,UACP,UAAAhB;AAAA,UACA,UAAU+B;AAAA,UACV,MAAA7B;AAAA,UACA,cAAYC;AAAA,UACZ,WAAAC;AAAA,UACA,aAAAC;AAAA,UACA,cAAcC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEfe,KACC,gBAAAgB;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,UAAAxC;AAAA,UACA,WAAWyC,EAAK,wBAAwB,6BAA6B;AAAA,UACrE,cAAY1B;AAAA,UACZ,SAASO;AAAA,UACT,MAAK;AAAA,UAEL,UAAA,gBAAAe,EAACK,GAAA,EAAa,MAAK,KAAA,CAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1B,GAEJ;AAAA,IACA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAMhC;AAAA,QACN,eAAeF;AAAA,QACf,gBAAgBgB;AAAA,QAChB,SAASD;AAAA,QACT,OAAM;AAAA,QACN,qBAAoB;AAAA,QACpB,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,gBAAe;AAAA,QAEd,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/inputs/select/select.js

@@ -1,24 +1,27 @@
 import { jsxs as G, Fragment as H, jsx as u } from "react/jsx-runtime";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import F, { useRef as c, useState as w } from "react";
 import { useForkRef as J } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as L } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { SuggestionList as Q } from "../suggestions/suggestion_list.js";
 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 W } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import '../../select.css';const X = "_select_aabe288", Y = "_selectedLabel_b92ff3e", O = { select: X, selectedLabel: Y };
 function Z(a, t) {
   return a.find((n) => n.props.value === t);
 }
-const de = F.forwardRef(function({
+const ye = F.forwardRef(function({
   children: t = [],
   onKeyDown: n,
   onKeyUp: f,
@@ -104,6 +107,6 @@ const de = F.forwardRef(function({
   ] });
 });
 export {
-  de as Select
+  ye as Select
 };
 //# sourceMappingURL=select.js.map

package/dist/inputs/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.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 { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={''}\n        scrollToValue={value || ''}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.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 { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'tcn-select', 'tcn-entry', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>\n          {selectedLabel}\n        </span>\n      </Button>\n      <SuggestionList\n        open={isSuggestionsOpen}\n        anchorElement={anchorElement}\n        onClose={handleClose}\n        value={''}\n        scrollToValue={value || ''}\n        trimCustomInput={trimCustomInput}\n        onOptionSelect={handleSelection}\n        noSuggestionMessage={noOptionMatchedMessage}\n      >\n        {children}\n      </SuggestionList>\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}

package/dist/inputs/slider/slider.js

@@ -1,44 +1,48 @@
-import { jsx as p } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { clsx as m } from "clsx";
 import g, { useRef as v, useLayoutEffect as y } from "react";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
-import "../../draggable.module-BgelQsuJ.js";
-import '../../slider.css';const S = "_slider_eb84151", _ = { slider: S }, $ = g.forwardRef(function({ style: l, className: a, width: u, min: t = 0, max: r = 100, onChange: o, ...n }, c) {
-  const i = v(null), d = R(c, i);
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
+import '../../slider.css';const S = "_slider_eb84151", _ = { slider: S }, B = g.forwardRef(function({ style: l, className: a, width: p, min: e = 0, max: r = 100, onChange: s, ...i }, u) {
+  const n = v(null), c = R(u, n);
   return y(() => {
-    const e = i.current;
-    if (e == null) return;
-    const s = () => {
-      const f = (parseFloat(e.value) - t) / (r - t) * 100;
-      e.style.setProperty("--progress", `${f}%`);
+    const t = n.current;
+    if (t == null) return;
+    const o = () => {
+      const d = (parseFloat(t.value) - e) / (r - e) * 100;
+      t.style.setProperty("--progress", `${d}%`);
     };
-    return e.addEventListener("input", s), s(), () => {
-      e.removeEventListener("input", s);
+    return t.addEventListener("input", o), o(), () => {
+      t.removeEventListener("input", o);
     };
-  }, [t, r]), /* @__PURE__ */ p(
+  }, [e, r]), /* @__PURE__ */ f(
     "input",
     {
       type: "range",
       className: m(a, _.slider, "tcn-slider"),
-      "data-is-disabled": n.disabled || !1,
-      ref: d,
-      onChange: (e) => {
-        o && o(e.currentTarget.value, e);
+      "data-is-disabled": i.disabled || !1,
+      ref: c,
+      onChange: (t) => {
+        s && s(t.currentTarget.value, t);
       },
-      ...n,
-      min: String(t),
+      ...i,
+      min: String(e),
       max: String(r),
       "data-width": "100%",
-      style: { width: u, ...l }
+      style: { width: p, ...l }
     }
   );
 });
 export {
-  $ as Slider
+  B as Slider
 };
 //# sourceMappingURL=slider.js.map

package/dist/inputs/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'tcn-slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles"],"mappings":";;;;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,YAAY;AAAA,MACtD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}
+{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'tcn-slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles","e"],"mappings":";;;;;;;;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,YAAY;AAAA,MACtD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAAS,MAAK;AACb,QAAAd,KAAYA,EAASc,EAAE,cAAc,OAAOA,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGb;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}