@tcn/ui 0.16.0 → 0.18.0

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_time_selector.js","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"sourcesContent":["import { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport styles from './date_picker_time_selector.module.css';\nimport { BodyText } from '../../typography/index.js';\nimport { ClockIcon } from '@tcn/icons/clock_icon.js';\n\nexport interface DatePickerTimeSelectorProps {\n  origin: Date | null;\n  intervalInMinutes: number;\n  max: Date | null;\n  min: Date | null;\n  minVisibleTimeInMilliseconds: number;\n  maxVisibleTimeInMilliseconds: number;\n  onSelect: (hours: number, minutes: number, seconds: number) => void;\n  disabled?: boolean;\n  height?: string;\n}\n\nexport function DatePickerTimeSelector({\n  origin,\n  intervalInMinutes,\n  max,\n  min,\n  minVisibleTimeInMilliseconds,\n  maxVisibleTimeInMilliseconds,\n  onSelect,\n  disabled,\n  height,\n}: DatePickerTimeSelectorProps) {\n  const stepInMilliseconds = intervalInMinutes * 1000 * 60;\n  const amountOfSteps = (24 * 1000 * 60 * 60) / stepInMilliseconds;\n  const normalizedDate = new Date(origin || new Date());\n  const options: React.ReactElement[] = [];\n  const minTime = min?.getTime() ?? -Infinity;\n  const maxTime = max?.getTime() ?? Infinity;\n\n  normalizedDate.setHours(0, 0, 0, 0);\n  let offset = normalizedDate.getTime();\n  let offsetFromZero = 0;\n\n  for (let x = 0; x < amountOfSteps; x++) {\n    const date = new Date(offset);\n\n    let hour = date.getHours() % 12;\n    const minute = date.getMinutes();\n    const meridiem = date.getHours() >= 12 ? 'PM' : 'AM';\n    hour = hour === 0 ? 12 : hour;\n\n    const isSelected =\n      origin != null &&\n      date.getHours() === origin.getHours() &&\n      date.getMinutes() === origin.getMinutes() &&\n      date.getSeconds() === origin.getSeconds();\n\n    const time = date.getTime();\n    const isOutOfRange = time < minTime || time > maxTime;\n\n    const button = (\n      <Button\n        key={x}\n        width=\"flex\"\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-selected-time', isSelected && styles['selected-time'])}\n        disabled={origin == null || disabled || isOutOfRange}\n        onClick={() => {\n          onSelect(date.getHours(), date.getMinutes(), date.getSeconds());\n        }}\n      >{`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`}</Button>\n    );\n\n    if (\n      offsetFromZero >= minVisibleTimeInMilliseconds &&\n      offsetFromZero <= maxVisibleTimeInMilliseconds\n    ) {\n      options.push(button);\n    }\n\n    offset += stepInMilliseconds;\n    offsetFromZero += stepInMilliseconds;\n  }\n\n  return (\n    <VStack\n      width=\"auto\"\n      height={height}\n      data-is-disabled={disabled || origin == null}\n      className={clsx(styles['time-box'], 'tcn-time-box')}\n    >\n      <ZStack\n        className={clsx(\n          styles['time-box-title-container'],\n          'tcn-time-box-title-container'\n        )}\n      >\n        <BodyText className={clsx(styles['time-box-title'], 'tcn-time-box-title')}>\n          <ClockIcon size=\"lg\" />\n        </BodyText>\n      </ZStack>\n      <VStack\n        width=\"auto\"\n        height=\"flex\"\n        overflowY=\"auto\"\n        style={{ paddingInline: '4px' }}\n      >\n        {options}\n      </VStack>\n    </VStack>\n  );\n}\n"],"names":["DatePickerTimeSelector","origin","intervalInMinutes","max","min","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","onSelect","disabled","height","stepInMilliseconds","amountOfSteps","normalizedDate","options","minTime","maxTime","offset","offsetFromZero","x","date","hour","minute","meridiem","isSelected","time","isOutOfRange","button","jsx","Button","clsx","styles","jsxs","VStack","ZStack","BodyText","ClockIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAqBO,SAASA,GAAuB;AAAA,EACrC,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAqBR,IAAoB,MAAO,IAChDS,IAAiB,KAAK,MAAO,KAAK,KAAMD,GACxCE,IAAiB,IAAI,KAAKX,KAAU,oBAAI,MAAM,GAC9CY,IAAgC,CAAA,GAChCC,IAAUV,GAAK,QAAA,KAAa,QAC5BW,IAAUZ,GAAK,QAAA,KAAa;AAElC,EAAAS,EAAe,SAAS,GAAG,GAAG,GAAG,CAAC;AAClC,MAAII,IAASJ,EAAe,QAAA,GACxBK,IAAiB;AAErB,WAASC,IAAI,GAAGA,IAAIP,GAAeO,KAAK;AACtC,UAAMC,IAAO,IAAI,KAAKH,CAAM;AAE5B,QAAII,IAAOD,EAAK,SAAA,IAAa;AAC7B,UAAME,IAASF,EAAK,WAAA,GACdG,IAAWH,EAAK,SAAA,KAAc,KAAK,OAAO;AAChD,IAAAC,IAAOA,MAAS,IAAI,KAAKA;AAEzB,UAAMG,IACJtB,KAAU,QACVkB,EAAK,SAAA,MAAelB,EAAO,SAAA,KAC3BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,KAC7BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,GAEzBuB,IAAOL,EAAK,QAAA,GACZM,IAAeD,IAAOV,KAAWU,IAAOT,GAExCW,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,WAAWC,EAAK,qBAAqBN,KAAcO,EAAO,eAAe,CAAC;AAAA,QAC1E,UAAU7B,KAAU,QAAQO,KAAYiB;AAAA,QACxC,SAAS,MAAM;AACb,UAAAlB,EAASY,EAAK,YAAYA,EAAK,cAAcA,EAAK,YAAY;AAAA,QAChE;AAAA,QACA,aAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EAAO,WAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,CAAQ;AAAA,MAAA;AAAA,MARhFJ;AAAA,IAAA;AAWT,IACED,KAAkBZ,KAClBY,KAAkBX,KAElBO,EAAQ,KAAKa,CAAM,GAGrBV,KAAUN,GACVO,KAAkBP;AAAA,EACpB;AAEA,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAAvB;AAAA,MACA,oBAAkBD,KAAYP,KAAU;AAAA,MACxC,WAAW4B,EAAKC,EAAO,UAAU,GAAG,cAAc;AAAA,MAElD,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACTC,EAAO,0BAA0B;AAAA,cACjC;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAH,EAACO,GAAA,EAAS,WAAWL,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB,GACtE,UAAA,gBAAAH,EAACQ,GAAA,EAAU,MAAK,MAAK,EAAA,CACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAR;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,MAAA;AAAA,YAEvB,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"date_picker_time_selector.js","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"sourcesContent":["import { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport { Button } from '../../actions/index.js';\nimport styles from './date_picker_time_selector.module.css';\nimport { BodyText } from '../../typography/index.js';\nimport { ClockIcon } from '@tcn/icons/clock_icon.js';\n\nexport interface DatePickerTimeSelectorProps {\n  origin: Date | null;\n  intervalInMinutes: number;\n  max: Date | null;\n  min: Date | null;\n  minVisibleTimeInMilliseconds: number;\n  maxVisibleTimeInMilliseconds: number;\n  onSelect: (hours: number, minutes: number, seconds: number) => void;\n  disabled?: boolean;\n  height?: string;\n}\n\nexport function DatePickerTimeSelector({\n  origin,\n  intervalInMinutes,\n  max,\n  min,\n  minVisibleTimeInMilliseconds,\n  maxVisibleTimeInMilliseconds,\n  onSelect,\n  disabled,\n  height,\n}: DatePickerTimeSelectorProps) {\n  const stepInMilliseconds = intervalInMinutes * 1000 * 60;\n  const amountOfSteps = (24 * 1000 * 60 * 60) / stepInMilliseconds;\n  const normalizedDate = new Date(origin || new Date());\n  const options: React.ReactElement[] = [];\n  const minTime = min?.getTime() ?? -Infinity;\n  const maxTime = max?.getTime() ?? Infinity;\n\n  normalizedDate.setHours(0, 0, 0, 0);\n  let offset = normalizedDate.getTime();\n  let offsetFromZero = 0;\n\n  for (let x = 0; x < amountOfSteps; x++) {\n    const date = new Date(offset);\n\n    let hour = date.getHours() % 12;\n    const minute = date.getMinutes();\n    const meridiem = date.getHours() >= 12 ? 'PM' : 'AM';\n    hour = hour === 0 ? 12 : hour;\n\n    const isSelected =\n      origin != null &&\n      date.getHours() === origin.getHours() &&\n      date.getMinutes() === origin.getMinutes() &&\n      date.getSeconds() === origin.getSeconds();\n\n    const time = date.getTime();\n    const isOutOfRange = time < minTime || time > maxTime;\n\n    const button = (\n      <Button\n        key={x}\n        width=\"flex\"\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-selected-time', isSelected && styles['selected-time'])}\n        disabled={origin == null || disabled || isOutOfRange}\n        onClick={() => {\n          onSelect(date.getHours(), date.getMinutes(), date.getSeconds());\n        }}\n      >{`${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')} ${meridiem}`}</Button>\n    );\n\n    if (\n      offsetFromZero >= minVisibleTimeInMilliseconds &&\n      offsetFromZero <= maxVisibleTimeInMilliseconds\n    ) {\n      options.push(button);\n    }\n\n    offset += stepInMilliseconds;\n    offsetFromZero += stepInMilliseconds;\n  }\n\n  return (\n    <VStack\n      width=\"auto\"\n      height={height}\n      data-is-disabled={disabled || origin == null}\n      className={clsx(styles['time-box'], 'tcn-time-box')}\n    >\n      <ZStack\n        className={clsx(\n          styles['time-box-title-container'],\n          'tcn-time-box-title-container'\n        )}\n      >\n        <BodyText className={clsx(styles['time-box-title'], 'tcn-time-box-title')}>\n          <ClockIcon size=\"lg\" />\n        </BodyText>\n      </ZStack>\n      <VStack\n        width=\"auto\"\n        height=\"flex\"\n        overflowY=\"auto\"\n        style={{ paddingInline: '4px' }}\n      >\n        {options}\n      </VStack>\n    </VStack>\n  );\n}\n"],"names":["DatePickerTimeSelector","origin","intervalInMinutes","max","min","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","onSelect","disabled","height","stepInMilliseconds","amountOfSteps","normalizedDate","options","minTime","maxTime","offset","offsetFromZero","x","date","hour","minute","meridiem","isSelected","time","isOutOfRange","button","jsx","Button","clsx","styles","jsxs","VStack","ZStack","BodyText","ClockIcon"],"mappings":";;;;;;;;;;;;;;;;;AAqBO,SAASA,GAAuB;AAAA,EACrC,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,GAAgC;AAC9B,QAAMC,IAAqBR,IAAoB,MAAO,IAChDS,IAAiB,KAAK,MAAO,KAAK,KAAMD,GACxCE,IAAiB,IAAI,KAAKX,KAAU,oBAAI,MAAM,GAC9CY,IAAgC,CAAA,GAChCC,IAAUV,GAAK,QAAA,KAAa,QAC5BW,IAAUZ,GAAK,QAAA,KAAa;AAElC,EAAAS,EAAe,SAAS,GAAG,GAAG,GAAG,CAAC;AAClC,MAAII,IAASJ,EAAe,QAAA,GACxBK,IAAiB;AAErB,WAASC,IAAI,GAAGA,IAAIP,GAAeO,KAAK;AACtC,UAAMC,IAAO,IAAI,KAAKH,CAAM;AAE5B,QAAII,IAAOD,EAAK,SAAA,IAAa;AAC7B,UAAME,IAASF,EAAK,WAAA,GACdG,IAAWH,EAAK,SAAA,KAAc,KAAK,OAAO;AAChD,IAAAC,IAAOA,MAAS,IAAI,KAAKA;AAEzB,UAAMG,IACJtB,KAAU,QACVkB,EAAK,SAAA,MAAelB,EAAO,SAAA,KAC3BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,KAC7BkB,EAAK,WAAA,MAAiBlB,EAAO,WAAA,GAEzBuB,IAAOL,EAAK,QAAA,GACZM,IAAeD,IAAOV,KAAWU,IAAOT,GAExCW,IACJ,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,WAAU;AAAA,QACV,WAAWC,EAAK,qBAAqBN,KAAcO,EAAO,eAAe,CAAC;AAAA,QAC1E,UAAU7B,KAAU,QAAQO,KAAYiB;AAAA,QACxC,SAAS,MAAM;AACb,UAAAlB,EAASY,EAAK,YAAYA,EAAK,cAAcA,EAAK,YAAY;AAAA,QAChE;AAAA,QACA,aAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EAAO,WAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,CAAQ;AAAA,MAAA;AAAA,MARhFJ;AAAA,IAAA;AAWT,IACED,KAAkBZ,KAClBY,KAAkBX,KAElBO,EAAQ,KAAKa,CAAM,GAGrBV,KAAUN,GACVO,KAAkBP;AAAA,EACpB;AAEA,SACE,gBAAAqB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAAvB;AAAA,MACA,oBAAkBD,KAAYP,KAAU;AAAA,MACxC,WAAW4B,EAAKC,EAAO,UAAU,GAAG,cAAc;AAAA,MAElD,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWJ;AAAA,cACTC,EAAO,0BAA0B;AAAA,cACjC;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAH,EAACO,GAAA,EAAS,WAAWL,EAAKC,EAAO,gBAAgB,GAAG,oBAAoB,GACtE,UAAA,gBAAAH,EAACQ,GAAA,EAAU,MAAK,MAAK,EAAA,CACvB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAR;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YACV,OAAO,EAAE,eAAe,MAAA;AAAA,YAEvB,UAAAnB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/inputs/date_picker/date_picker_year_input.js

@@ -1,7 +1,6 @@
 import { jsxs as u, Fragment as f, jsx as e } from "react/jsx-runtime";
 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 h } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { clsx as d } from "clsx";
@@ -10,7 +9,7 @@ import { Popper as y } from "../../overlay/popper/legacy/popper.js";
 import { DatePickerYearSelector as g } from "./date_picker_year_selector.js";
 import { useSignalValue as b } from "@tcn/state";
 import '../../date_picker_year_input.css';const k = "_year-select_eb568a7", s = { "year-select": k };
-function F({ presenter: t }) {
+function D({ presenter: t }) {
   const { visibleYear: c } = b(t.stateBroadcast), [a, i] = n(null), [l, r] = n(!1);
   function o() {
     r(!1);
@@ -45,6 +44,6 @@ function F({ presenter: t }) {
   ] });
 }
 export {
-  F as DatePickerYearInput
+  D as DatePickerYearInput
 };
 //# sourceMappingURL=date_picker_year_input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerYearSelector } from './date_picker_year_selector.js';\nimport { useSignalValue } from '@tcn/state';\n\nexport interface DatePickerYearInputProps {\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {\n  const { visibleYear } = useSignalValue(presenter.stateBroadcast);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function close() {\n    setIsOpen(false);\n  }\n\n  function open(event: React.MouseEvent<HTMLButtonElement>) {\n    setButtonRef(event.currentTarget);\n    setIsOpen(true);\n  }\n\n  return (\n    <>\n      <Button\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-date-picker-year-select', styles['year-select'])}\n        width=\"auto\"\n        hAlign=\"start\"\n        onClick={open}\n      >\n        <span className={styles.selectedLabel}>{visibleYear}</span>\n      </Button>\n      <Popper\n        anchorElement={buttonRef}\n        horizontalAnchor=\"center\"\n        horizontalOrigin=\"center\"\n        onClose={close}\n        open={isOpen}\n        restoreFocus\n      >\n        <DatePickerYearSelector presenter={presenter} onClose={close} />\n      </Popper>\n    </>\n  );\n}\n"],"names":["DatePickerYearInput","presenter","visibleYear","useSignalValue","buttonRef","setButtonRef","useState","isOpen","setIsOpen","close","open","event","jsxs","Fragment","jsx","Button","clsx","styles","Popper","DatePickerYearSelector"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAoB,EAAE,WAAAC,KAAuC;AAC3E,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAeF,EAAU,cAAc,GACzD,CAACG,GAAWC,CAAY,IAAIC,EAAmC,IAAI,GACnE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAQ;AACf,IAAAD,EAAU,EAAK;AAAA,EACjB;AAEA,WAASE,EAAKC,GAA4C;AACxD,IAAAN,EAAaM,EAAM,aAAa,GAChCH,EAAU,EAAI;AAAA,EAChB;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAWC,EAAK,+BAA+BC,EAAO,aAAa,CAAC;AAAA,QACpE,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASP;AAAA,QAET,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWG,EAAO,eAAgB,UAAAf,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,gBAAAY;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAed;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,SAASK;AAAA,QACT,MAAMF;AAAA,QACN,cAAY;AAAA,QAEZ,UAAA,gBAAAO,EAACK,GAAA,EAAuB,WAAAlB,GAAsB,SAASQ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE,GACF;AAEJ;"}
+{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerYearSelector } from './date_picker_year_selector.js';\nimport { useSignalValue } from '@tcn/state';\n\nexport interface DatePickerYearInputProps {\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {\n  const { visibleYear } = useSignalValue(presenter.stateBroadcast);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function close() {\n    setIsOpen(false);\n  }\n\n  function open(event: React.MouseEvent<HTMLButtonElement>) {\n    setButtonRef(event.currentTarget);\n    setIsOpen(true);\n  }\n\n  return (\n    <>\n      <Button\n        hierarchy=\"tertiary\"\n        className={clsx('tcn-date-picker-year-select', styles['year-select'])}\n        width=\"auto\"\n        hAlign=\"start\"\n        onClick={open}\n      >\n        <span className={styles.selectedLabel}>{visibleYear}</span>\n      </Button>\n      <Popper\n        anchorElement={buttonRef}\n        horizontalAnchor=\"center\"\n        horizontalOrigin=\"center\"\n        onClose={close}\n        open={isOpen}\n        restoreFocus\n      >\n        <DatePickerYearSelector presenter={presenter} onClose={close} />\n      </Popper>\n    </>\n  );\n}\n"],"names":["DatePickerYearInput","presenter","visibleYear","useSignalValue","buttonRef","setButtonRef","useState","isOpen","setIsOpen","close","open","event","jsxs","Fragment","jsx","Button","clsx","styles","Popper","DatePickerYearSelector"],"mappings":";;;;;;;;;;;AAaO,SAASA,EAAoB,EAAE,WAAAC,KAAuC;AAC3E,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAeF,EAAU,cAAc,GACzD,CAACG,GAAWC,CAAY,IAAIC,EAAmC,IAAI,GACnE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK;AAE1C,WAASG,IAAQ;AACf,IAAAD,EAAU,EAAK;AAAA,EACjB;AAEA,WAASE,EAAKC,GAA4C;AACxD,IAAAN,EAAaM,EAAM,aAAa,GAChCH,EAAU,EAAI;AAAA,EAChB;AAEA,SACE,gBAAAI,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,WAAWC,EAAK,+BAA+BC,EAAO,aAAa,CAAC;AAAA,QACpE,OAAM;AAAA,QACN,QAAO;AAAA,QACP,SAASP;AAAA,QAET,UAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWG,EAAO,eAAgB,UAAAf,EAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,gBAAAY;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,eAAed;AAAA,QACf,kBAAiB;AAAA,QACjB,kBAAiB;AAAA,QACjB,SAASK;AAAA,QACT,MAAMF;AAAA,QACN,cAAY;AAAA,QAEZ,UAAA,gBAAAO,EAACK,GAAA,EAAuB,WAAAlB,GAAsB,SAASQ,EAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAChE,GACF;AAEJ;"}

package/dist/inputs/date_picker/date_picker_year_selector.js

@@ -5,11 +5,10 @@ import { ChevronRightIcon as O } from "@tcn/icons/chevron_right_icon.js";
 import { useSignalValue as $ } from "@tcn/state";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as g } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as y } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { HStack as t } from "../../stacks/h_stack.js";
-import { Spacer as x } from "../../stacks/spacer.js";
+import { Spacer as g } from "../../stacks/spacer.js";
 import { VStack as E } from "../../stacks/v_stack.js";
 import { BodyText as L } from "../../typography/body_text/body_text.js";
 import "../../typography/callout/callout.js";
@@ -18,26 +17,30 @@ import "../../typography/footnote/footnote.js";
 import { Headline as M } from "../../typography/headline/headline.js";
 import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
-import "../../utils/click_away_listener.js";
-import { FocusRedirect as T } from "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import { FocusRedirect as T } from "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
-import { clsx as y } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import { clsx as x } from "clsx";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import '../../date_picker_year_selector.css';const q = "_date-picker-year-selector_ab05e1f", A = "_date-picker-year-button_fded757", Y = { "date-picker-year-selector": q, "date-picker-year-button": A };
-function Ye({
+function Re({
   presenter: s,
   onClose: k
 }) {
   const { min: p, max: m, visibleYear: o, visibleMonth: b } = $(
     s.stateBroadcast
-  ), [a, f] = z(0), c = D(null), R = p == null ? -1 / 0 : p.getFullYear(), S = m == null ? 1 / 0 : m.getFullYear(), r = [], d = o % 20;
-  let u = o - d + a, F = u + 19;
+  ), [a, f] = z(0), c = D(null), R = p == null ? -1 / 0 : p.getFullYear(), F = m == null ? 1 / 0 : m.getFullYear(), r = [], u = o % 20;
+  let d = o - u + a, S = d + 19;
   for (let n = 0; n < 20; n++) {
     let l = !1;
     const i = new Date(o, b, 1);
-    i.setFullYear(o - d + n + a), (i.getFullYear() > S || i.getFullYear() < R) && (l = !0);
+    i.setFullYear(o - u + n + a), (i.getFullYear() > F || i.getFullYear() < R) && (l = !0);
     const j = t;
     r.push(
       /* @__PURE__ */ e(
@@ -46,7 +49,7 @@ function Ye({
           as: "button",
           width: "flex",
           disabled: l,
-          className: y(Y["date-picker-year-button"], "tcn-date-picker-year-button"),
+          className: x(Y["date-picker-year-button"], "tcn-date-picker-year-button"),
           "data-is-disabled": String(l),
           "data-is-selected": String(i.getFullYear() === o),
           onClick: () => {
@@ -77,26 +80,26 @@ function Ye({
       ref: c,
       tabIndex: 0,
       padding: "8px",
-      className: y(
+      className: x(
         Y["date-picker-year-selector"],
         "tcn-date-picker-year-selector"
       ),
       gap: "4px",
       children: [
         /* @__PURE__ */ h(t, { gap: "4px", children: [
-          /* @__PURE__ */ e(g, { onClick: P, hierarchy: "tertiary", children: /* @__PURE__ */ e(N, { flipOnRtl: !0, size: "md" }) }),
-          /* @__PURE__ */ e(x, {}),
+          /* @__PURE__ */ e(y, { utility: !0, onClick: P, hierarchy: "tertiary", children: /* @__PURE__ */ e(N, { flipOnRtl: !0, size: "md" }) }),
+          /* @__PURE__ */ e(g, {}),
           /* @__PURE__ */ e(
             M,
             {
               selectable: !1,
               emphasis: "faint",
               hierarchy: "tertiary",
-              children: `${u}-${F}`
+              children: `${d}-${S}`
             }
           ),
-          /* @__PURE__ */ e(x, {}),
-          /* @__PURE__ */ e(g, { hierarchy: "tertiary", onClick: V, children: /* @__PURE__ */ e(O, { size: "md" }) })
+          /* @__PURE__ */ e(g, {}),
+          /* @__PURE__ */ e(y, { utility: !0, hierarchy: "tertiary", onClick: V, children: /* @__PURE__ */ e(O, { size: "md" }) })
         ] }),
         /* @__PURE__ */ e(t, { gap: "4px", children: v }),
         /* @__PURE__ */ e(t, { gap: "4px", children: B }),
@@ -109,6 +112,6 @@ function Ye({
   );
 }
 export {
-  Ye as DatePickerYearSelector
+  Re as DatePickerYearSelector
 };
 //# sourceMappingURL=date_picker_year_selector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { SlimButton } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n  presenter,\n  onClose,\n}: DatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  let firstYear = visibleYear - remainder + offset;\n  let lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    let disabled = false;\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n      disabled = true;\n    }\n\n    const Button: any = HStack;\n\n    years.push(\n      <Button\n        as=\"button\"\n        key={x}\n        width=\"flex\"\n        disabled={disabled}\n        className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </Button>\n    );\n  }\n\n  function focus() {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }\n\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }, []);\n\n  const firstRow = years.slice(0, 4);\n  const secondRow = years.slice(4, 8);\n  const thirdRow = years.slice(8, 12);\n  const fourthRow = years.slice(12, 16);\n  const fifthRow = years.slice(16, 20);\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      className={clsx(\n        styles['date-picker-year-selector'],\n        'tcn-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <SlimButton onClick={prev} hierarchy=\"tertiary\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </SlimButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <SlimButton hierarchy=\"tertiary\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </SlimButton>\n      </HStack>\n      <HStack gap=\"4px\">{firstRow}</HStack>\n      <HStack gap=\"4px\">{secondRow}</HStack>\n      <HStack gap=\"4px\">{thirdRow}</HStack>\n      <HStack gap=\"4px\">{fourthRow}</HStack>\n      <HStack gap=\"4px\">{fifthRow}</HStack>\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","SlimButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { Button } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n  presenter,\n  onClose,\n}: DatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  let firstYear = visibleYear - remainder + offset;\n  let lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    let disabled = false;\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n      disabled = true;\n    }\n\n    const Button: any = HStack;\n\n    years.push(\n      <Button\n        as=\"button\"\n        key={x}\n        width=\"flex\"\n        disabled={disabled}\n        className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </Button>\n    );\n  }\n\n  function focus() {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }\n\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }, []);\n\n  const firstRow = years.slice(0, 4);\n  const secondRow = years.slice(4, 8);\n  const thirdRow = years.slice(8, 12);\n  const fourthRow = years.slice(12, 16);\n  const fifthRow = years.slice(16, 20);\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      className={clsx(\n        styles['date-picker-year-selector'],\n        'tcn-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <Button utility onClick={prev} hierarchy=\"tertiary\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </Button>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <Button utility hierarchy=\"tertiary\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </Button>\n      </HStack>\n      <HStack gap=\"4px\">{firstRow}</HStack>\n      <HStack gap=\"4px\">{secondRow}</HStack>\n      <HStack gap=\"4px\">{thirdRow}</HStack>\n      <HStack gap=\"4px\">{fourthRow}</HStack>\n      <HStack gap=\"4px\">{fifthRow}</HStack>\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}

package/dist/inputs/mask_input/key_capture_input.js

@@ -1,82 +1,86 @@
 import { jsx as L } 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 _, { useRef as e } 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";
-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 { Input as B } from "../input/input.js";
-const T = _.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: p, ...E }, v) {
-  const d = e(0), c = e(0), r = e(0), u = e(0), x = e(0), o = e(0), s = e(null), P = j(v, s);
-  function g(f) {
+const X = _.forwardRef(function({ onKeyCapture: n, onKeyDown: a, onInput: p, ...E }, v) {
+  const d = e(0), o = e(0), r = e(0), i = e(0), x = e(0), c = e(0), s = e(null), P = j(v, s);
+  function g(m) {
     const t = s.current;
-    t != null && (d.current = t.value.length, c.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, o.current = r.current, u.current = Math.min(
-      c.current,
+    t != null && (d.current = t.value.length, o.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, c.current = r.current, i.current = Math.min(
+      o.current,
       r.current
     ), x.current = Math.max(
-      c.current,
+      o.current,
       r.current
-    ), m && m(f));
+    ), a && a(m));
   }
-  function I(f) {
+  function I(m) {
     const t = s.current;
     if (t == null)
       return;
-    const M = t.value.length, k = c.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, a = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, a), h = Math.max(R, a), l = a;
+    const M = t.value.length, k = o.current !== r.current, R = t.selectionStart == null ? 0 : t.selectionStart, f = t.selectionEnd == null ? 0 : t.selectionEnd, w = Math.min(R, f), h = Math.max(R, f), u = f;
     if (k) {
       const S = t.value.slice(
-        u.current,
+        i.current,
         h
-      ), i = {
-        start: c.current,
+      ), l = {
+        start: o.current,
         end: r.current
       };
       n && n(
         S,
         "",
-        i,
-        o.current,
         l,
+        c.current,
+        u,
         t
       );
     } else if (d.current > M)
-      u.current === w ? n && n(
+      i.current === w ? n && n(
         "",
         "Delete",
         null,
-        o.current,
-        l,
+        c.current,
+        u,
         t
       ) : n && n(
         "",
         "Backspace",
         null,
-        o.current,
-        l,
+        c.current,
+        u,
         t
       );
     else {
-      const i = t.value.slice(
-        u.current,
+      const l = t.value.slice(
+        i.current,
         h
       );
       n && n(
-        i,
+        l,
         "",
         null,
-        o.current,
-        l,
+        c.current,
+        u,
         t
       );
     }
-    p && p(f);
+    p && p(m);
   }
   return /* @__PURE__ */ L(B, { ref: P, onKeyDown: g, onInput: I, ...E });
 });
 export {
-  T as KeyCaptureInput
+  X as KeyCaptureInput
 };
 //# sourceMappingURL=key_capture_input.js.map

package/dist/inputs/mask_input/key_capture_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n  start: number;\n  end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n  onKeyCapture?: (\n    input: string,\n    key: string,\n    selection: Range | null,\n    cursorPosition: number,\n    finalCursorPosition: number,\n    inputElement: HTMLInputElement\n  ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n  { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n  ref\n) {\n  const valueLengthRef = useRef(0);\n  const selectionStartRef = useRef(0);\n  const selectionEndRef = useRef(0);\n  const minCursorPositionRef = useRef(0);\n  const maxCursorPositionRef = useRef(0);\n  const cursorPositionRef = useRef(0);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, inputRef);\n\n  function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const inputElement = inputRef.current;\n\n    if (inputElement == null) {\n      return;\n    }\n\n    valueLengthRef.current = inputElement.value.length;\n    selectionStartRef.current =\n      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n    selectionEndRef.current =\n      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n    cursorPositionRef.current = selectionEndRef.current;\n    minCursorPositionRef.current = Math.min(\n      selectionStartRef.current,\n      selectionEndRef.current\n    );\n\n    maxCursorPositionRef.current = Math.max(\n      selectionStartRef.current,\n      selectionEndRef.current\n    );\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n    const inputElement = inputRef.current;\n\n    if (inputElement == null) {\n      return;\n    }\n\n    const valueLength = inputElement.value.length;\n    const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n    const inputSelectionStart =\n      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n    const inputSelectionEnd =\n      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n    const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n    const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n    const cursorPosition = inputSelectionEnd;\n\n    if (hadSelection) {\n      const input = inputElement.value.slice(\n        minCursorPositionRef.current,\n        maxCursorPosition\n      );\n      const selection = {\n        start: selectionStartRef.current,\n        end: selectionEndRef.current,\n      };\n      onKeyCapture &&\n        onKeyCapture(\n          input,\n          '',\n          selection,\n          cursorPositionRef.current,\n          cursorPosition,\n          inputElement\n        );\n    } else {\n      const collapsed = valueLengthRef.current > valueLength;\n      if (collapsed) {\n        const deleted = minCursorPositionRef.current === minCursorPosition;\n\n        if (deleted) {\n          onKeyCapture &&\n            onKeyCapture(\n              '',\n              'Delete',\n              null,\n              cursorPositionRef.current,\n              cursorPosition,\n              inputElement\n            );\n        } else {\n          onKeyCapture &&\n            onKeyCapture(\n              '',\n              'Backspace',\n              null,\n              cursorPositionRef.current,\n              cursorPosition,\n              inputElement\n            );\n        }\n      } else {\n        const input = inputElement.value.slice(\n          minCursorPositionRef.current,\n          maxCursorPosition\n        );\n        onKeyCapture &&\n          onKeyCapture(\n            input,\n            '',\n            null,\n            cursorPositionRef.current,\n            cursorPosition,\n            inputElement\n          );\n      }\n    }\n    onInput && onInput(event);\n  }\n\n  return (\n    <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n  );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":";;;;;;;;;;;AAqBO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvCC,GACA;AACA,QAAMC,IAAiBC,EAAO,CAAC,GACzBC,IAAoBD,EAAO,CAAC,GAC5BE,IAAkBF,EAAO,CAAC,GAC1BG,IAAuBH,EAAO,CAAC,GAC/BI,IAAuBJ,EAAO,CAAC,GAC/BK,IAAoBL,EAAO,CAAC,GAC5BM,IAAWN,EAAgC,IAAI,GAC/CO,IAAYC,EAAWV,GAAKQ,CAAQ;AAE1C,WAASG,EAAcC,GAA8C;AACnE,UAAMC,IAAeL,EAAS;AAE9B,IAAIK,KAAgB,SAIpBZ,EAAe,UAAUY,EAAa,MAAM,QAC5CV,EAAkB,UAChBU,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACzDT,EAAgB,UACdS,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACvDN,EAAkB,UAAUH,EAAgB,SAC5CC,EAAqB,UAAU,KAAK;AAAA,MAClCF,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBE,EAAqB,UAAU,KAAK;AAAA,MAClCH,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBP,KAAaA,EAAUe,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA4C;AAC/D,UAAMC,IAAeL,EAAS;AAE9B,QAAIK,KAAgB;AAClB;AAGF,UAAME,IAAcF,EAAa,MAAM,QACjCG,IAAeb,EAAkB,YAAYC,EAAgB,SAC7Da,IACJJ,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACnDK,IACJL,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACjDM,IAAoB,KAAK,IAAIF,GAAqBC,CAAiB,GACnEE,IAAoB,KAAK,IAAIH,GAAqBC,CAAiB,GACnEG,IAAiBH;AAEvB,QAAIF,GAAc;AAChB,YAAMM,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA,GAEIG,IAAY;AAAA,QAChB,OAAOpB,EAAkB;AAAA,QACzB,KAAKC,EAAgB;AAAA,MAAA;AAEvB,MAAAR,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACAC;AAAA,QACAhB,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN,WACoBZ,EAAe,UAAUc;AAIzC,MAFgBV,EAAqB,YAAYc,IAG/CvB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA,IAGJjB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,SAGD;AACL,YAAMS,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA;AAEF,MAAAxB,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN;AAEF,IAAAf,KAAWA,EAAQc,CAAK;AAAA,EAC1B;AAEA,SACE,gBAAAY,EAACC,KAAM,KAAKhB,GAAW,WAAWE,GAAe,SAASG,GAAc,GAAGf,EAAA,CAAO;AAEtF,CAAC;"}
+{"version":3,"file":"key_capture_input.js","sources":["../../../src/inputs/mask_input/key_capture_input.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React from 'react';\nimport { useRef } from 'react';\nimport { Input, InputProps } from '../input/input.js';\n\nexport interface Range {\n  start: number;\n  end: number;\n}\n\nexport interface KeyCaptureInputProps extends InputProps {\n  onKeyCapture?: (\n    input: string,\n    key: string,\n    selection: Range | null,\n    cursorPosition: number,\n    finalCursorPosition: number,\n    inputElement: HTMLInputElement\n  ) => void;\n}\n\nexport const KeyCaptureInput = React.forwardRef(function InputCapture(\n  { onKeyCapture, onKeyDown, onInput, ...props }: KeyCaptureInputProps,\n  ref\n) {\n  const valueLengthRef = useRef(0);\n  const selectionStartRef = useRef(0);\n  const selectionEndRef = useRef(0);\n  const minCursorPositionRef = useRef(0);\n  const maxCursorPositionRef = useRef(0);\n  const cursorPositionRef = useRef(0);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const forkedRef = useForkRef(ref, inputRef);\n\n  function handleKeydown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const inputElement = inputRef.current;\n\n    if (inputElement == null) {\n      return;\n    }\n\n    valueLengthRef.current = inputElement.value.length;\n    selectionStartRef.current =\n      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n    selectionEndRef.current =\n      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n    cursorPositionRef.current = selectionEndRef.current;\n    minCursorPositionRef.current = Math.min(\n      selectionStartRef.current,\n      selectionEndRef.current\n    );\n\n    maxCursorPositionRef.current = Math.max(\n      selectionStartRef.current,\n      selectionEndRef.current\n    );\n\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleInput(event: React.ChangeEvent<HTMLInputElement>) {\n    const inputElement = inputRef.current;\n\n    if (inputElement == null) {\n      return;\n    }\n\n    const valueLength = inputElement.value.length;\n    const hadSelection = selectionStartRef.current !== selectionEndRef.current;\n    const inputSelectionStart =\n      inputElement.selectionStart == null ? 0 : inputElement.selectionStart;\n    const inputSelectionEnd =\n      inputElement.selectionEnd == null ? 0 : inputElement.selectionEnd;\n    const minCursorPosition = Math.min(inputSelectionStart, inputSelectionEnd);\n    const maxCursorPosition = Math.max(inputSelectionStart, inputSelectionEnd);\n    const cursorPosition = inputSelectionEnd;\n\n    if (hadSelection) {\n      const input = inputElement.value.slice(\n        minCursorPositionRef.current,\n        maxCursorPosition\n      );\n      const selection = {\n        start: selectionStartRef.current,\n        end: selectionEndRef.current,\n      };\n      onKeyCapture &&\n        onKeyCapture(\n          input,\n          '',\n          selection,\n          cursorPositionRef.current,\n          cursorPosition,\n          inputElement\n        );\n    } else {\n      const collapsed = valueLengthRef.current > valueLength;\n      if (collapsed) {\n        const deleted = minCursorPositionRef.current === minCursorPosition;\n\n        if (deleted) {\n          onKeyCapture &&\n            onKeyCapture(\n              '',\n              'Delete',\n              null,\n              cursorPositionRef.current,\n              cursorPosition,\n              inputElement\n            );\n        } else {\n          onKeyCapture &&\n            onKeyCapture(\n              '',\n              'Backspace',\n              null,\n              cursorPositionRef.current,\n              cursorPosition,\n              inputElement\n            );\n        }\n      } else {\n        const input = inputElement.value.slice(\n          minCursorPositionRef.current,\n          maxCursorPosition\n        );\n        onKeyCapture &&\n          onKeyCapture(\n            input,\n            '',\n            null,\n            cursorPositionRef.current,\n            cursorPosition,\n            inputElement\n          );\n      }\n    }\n    onInput && onInput(event);\n  }\n\n  return (\n    <Input ref={forkedRef} onKeyDown={handleKeydown} onInput={handleInput} {...props} />\n  );\n});\n"],"names":["KeyCaptureInput","React","onKeyCapture","onKeyDown","onInput","props","ref","valueLengthRef","useRef","selectionStartRef","selectionEndRef","minCursorPositionRef","maxCursorPositionRef","cursorPositionRef","inputRef","forkedRef","useForkRef","handleKeydown","event","inputElement","handleInput","valueLength","hadSelection","inputSelectionStart","inputSelectionEnd","minCursorPosition","maxCursorPosition","cursorPosition","input","selection","jsx","Input"],"mappings":";;;;;;;;;;;;;;;AAqBO,MAAMA,IAAkBC,EAAM,WAAW,SAC9C,EAAE,cAAAC,GAAc,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvCC,GACA;AACA,QAAMC,IAAiBC,EAAO,CAAC,GACzBC,IAAoBD,EAAO,CAAC,GAC5BE,IAAkBF,EAAO,CAAC,GAC1BG,IAAuBH,EAAO,CAAC,GAC/BI,IAAuBJ,EAAO,CAAC,GAC/BK,IAAoBL,EAAO,CAAC,GAC5BM,IAAWN,EAAgC,IAAI,GAC/CO,IAAYC,EAAWV,GAAKQ,CAAQ;AAE1C,WAASG,EAAcC,GAA8C;AACnE,UAAMC,IAAeL,EAAS;AAE9B,IAAIK,KAAgB,SAIpBZ,EAAe,UAAUY,EAAa,MAAM,QAC5CV,EAAkB,UAChBU,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACzDT,EAAgB,UACdS,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACvDN,EAAkB,UAAUH,EAAgB,SAC5CC,EAAqB,UAAU,KAAK;AAAA,MAClCF,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBE,EAAqB,UAAU,KAAK;AAAA,MAClCH,EAAkB;AAAA,MAClBC,EAAgB;AAAA,IAAA,GAGlBP,KAAaA,EAAUe,CAAK;AAAA,EAC9B;AAEA,WAASE,EAAYF,GAA4C;AAC/D,UAAMC,IAAeL,EAAS;AAE9B,QAAIK,KAAgB;AAClB;AAGF,UAAME,IAAcF,EAAa,MAAM,QACjCG,IAAeb,EAAkB,YAAYC,EAAgB,SAC7Da,IACJJ,EAAa,kBAAkB,OAAO,IAAIA,EAAa,gBACnDK,IACJL,EAAa,gBAAgB,OAAO,IAAIA,EAAa,cACjDM,IAAoB,KAAK,IAAIF,GAAqBC,CAAiB,GACnEE,IAAoB,KAAK,IAAIH,GAAqBC,CAAiB,GACnEG,IAAiBH;AAEvB,QAAIF,GAAc;AAChB,YAAMM,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA,GAEIG,IAAY;AAAA,QAChB,OAAOpB,EAAkB;AAAA,QACzB,KAAKC,EAAgB;AAAA,MAAA;AAEvB,MAAAR,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACAC;AAAA,QACAhB,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN,WACoBZ,EAAe,UAAUc;AAIzC,MAFgBV,EAAqB,YAAYc,IAG/CvB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA,IAGJjB,KACEA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACAW,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,SAGD;AACL,YAAMS,IAAQT,EAAa,MAAM;AAAA,QAC/BR,EAAqB;AAAA,QACrBe;AAAA,MAAA;AAEF,MAAAxB,KACEA;AAAA,QACE0B;AAAA,QACA;AAAA,QACA;AAAA,QACAf,EAAkB;AAAA,QAClBc;AAAA,QACAR;AAAA,MAAA;AAAA,IAEN;AAEF,IAAAf,KAAWA,EAAQc,CAAK;AAAA,EAC1B;AAEA,SACE,gBAAAY,EAACC,KAAM,KAAKhB,GAAW,WAAWE,GAAe,SAASG,GAAc,GAAGf,EAAA,CAAO;AAEtF,CAAC;"}

package/dist/inputs/mask_input/mask_input.js

@@ -1,19 +1,23 @@
 import { jsx as V } from "react/jsx-runtime";
 import { useSignalValue as B } from "@tcn/state";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
-import A, { useRef as I, useState as j, useLayoutEffect as f } from "react";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
+import A, { useRef as I, useState as j, useLayoutEffect as m } from "react";
 import { useForkRef as K } 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";
-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 { KeyCaptureInput as _ } from "./key_capture_input.js";
 import { MaskPresenter as F } from "./mask_presenter.js";
-const ee = A.forwardRef(
+const se = A.forwardRef(
   function({
-    value: m = "",
+    value: f = "",
     onChange: d,
     mask: c,
     onPaste: g,
@@ -37,14 +41,14 @@ const ee = A.forwardRef(
       const a = e.valueBroadcast.get(), u = e.cursorPositionBroadcast.get();
       r.value = a, r.setSelectionRange(u, u), d && d(a, e.isComplete());
     }
-    f(() => {
+    m(() => {
       const t = Array.isArray(c) ? c : [c], s = t.map((o) => o.mask).join("|"), n = e.maskConfigsBroadcast.get().map((o) => o.mask).join("|");
       s !== n && e.setMaskConfigs(t);
-    }, [e, c]), f(() => {
-      e.setValue(m);
+    }, [e, c]), m(() => {
+      e.setValue(f);
       const t = e.selectionBroadcast.get(), s = e.cursorPositionBroadcast.get(), n = p.current;
       n != null && (t != null ? n.setSelectionRange(t.start, t.end) : n.setSelectionRange(s, s));
-    }, [e, m]);
+    }, [e, f]);
     function M(t) {
       const s = t.currentTarget, n = s.selectionStart, o = s.selectionEnd;
       n != null && o != null && n !== o ? e.setSelection(n, o) : e.moveCursorTo(n || 0), e.insertText(w(t.clipboardData.getData("text/plain")));
@@ -71,7 +75,7 @@ const ee = A.forwardRef(
       }
       t.preventDefault(), v && v(t);
     }
-    return f(() => {
+    return m(() => {
       let t = "unknown";
       if (p.current == null)
         return;
@@ -120,6 +124,6 @@ const ee = A.forwardRef(
   }
 );
 export {
-  ee as MaskInput
+  se as MaskInput
 };
 //# sourceMappingURL=mask_input.js.map

package/dist/inputs/mask_input/mask_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n  value?: string;\n  mask: MaskConfig | MaskConfig[];\n  onChange?: (value: string, isComplete: boolean) => void;\n  preparePasteValue?: (value: string) => string;\n  prepareCutValue?: (value: string) => string;\n  prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n  function MaskInput(\n    {\n      value = '',\n      onChange,\n      mask,\n      onPaste,\n      onCut,\n      onCopy,\n      preparePasteValue = s => s,\n      prepareCutValue = s => s,\n      prepareCopyValue = s => s,\n      ...props\n    }: MaskInputProps,\n    ref\n  ) {\n    // Fix copy on input, its not working\n    const masks = Array.isArray(mask) ? mask : [mask];\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const forkedRef = useForkRef(ref, inputRef);\n\n    const [presenter] = useState(() => {\n      const presenter = new MaskPresenter(masks);\n      return presenter;\n    });\n\n    const internalValue = useSignalValue(presenter.valueBroadcast);\n    useSignalValue(presenter.maskConfigsBroadcast);\n\n    function handleInput(\n      input: string,\n      key: string,\n      selection: Range | null,\n      cursorPosition: number,\n      _: number,\n      inputElement: HTMLInputElement\n    ) {\n      if (selection != null) {\n        presenter.setSelection(selection.start, selection.end);\n      } else {\n        presenter.forceMoveCursorTo(cursorPosition);\n      }\n\n      switch (key) {\n        case 'Delete': {\n          presenter.delete();\n        }\n        case 'Backspace': {\n          presenter.backspace();\n        }\n      }\n\n      presenter.insertText(input);\n\n      const value = presenter.valueBroadcast.get();\n      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n      inputElement.value = value;\n      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n      onChange && onChange(value, presenter.isComplete());\n    }\n\n    useLayoutEffect(() => {\n      const masks = Array.isArray(mask) ? mask : [mask];\n\n      const oldMaskString = masks.map(m => m.mask).join('|');\n      const newMaskString = presenter.maskConfigsBroadcast\n        .get()\n        .map(m => m.mask)\n        .join('|');\n\n      if (oldMaskString !== newMaskString) {\n        presenter.setMaskConfigs(masks);\n      }\n    }, [presenter, mask]);\n\n    useLayoutEffect(() => {\n      presenter.setValue(value);\n      const selection = presenter.selectionBroadcast.get();\n      const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n      const input = inputRef.current;\n\n      if (input != null) {\n        const hasSelection = selection != null;\n\n        if (hasSelection) {\n          input.setSelectionRange(selection.start, selection.end);\n        } else {\n          input.setSelectionRange(cursorPosition, cursorPosition);\n        }\n      }\n    }, [presenter, value]);\n\n    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n      const inputElement = event.currentTarget;\n      const start = inputElement.selectionStart;\n      const end = inputElement.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n      } else {\n        presenter.moveCursorTo(start || 0);\n      }\n\n      presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n      inputElement.value = presenter.valueBroadcast.get();\n      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n      event.preventDefault();\n      onPaste && onPaste(event);\n      onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n    }\n\n    function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n      const inputElement = event.currentTarget;\n      const start = inputElement.selectionStart;\n      const end = inputElement.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n        const value = prepareCutValue(presenter.getSelectedValue());\n        presenter.clearRange(start, end);\n        const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n        event.clipboardData.setData('text/plain', value);\n        inputElement.value = presenter.valueBroadcast.get();\n        inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n      }\n\n      event.preventDefault();\n      onCut && onCut(event);\n    }\n\n    function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n      const input = event.currentTarget;\n      const start = input.selectionStart;\n      const end = input.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n        const value = prepareCopyValue(presenter.getSelectedValue());\n\n        event.clipboardData.setData('text/plain', value);\n      }\n\n      event.preventDefault();\n      onCopy && onCopy(event);\n    }\n\n    useLayoutEffect(() => {\n      let mode = 'unknown';\n\n      const input = inputRef.current;\n\n      if (input == null) {\n        return;\n      }\n\n      function handleMouseDown() {\n        mode = 'mouse';\n      }\n\n      function handleKeyDown() {\n        mode = 'keyboard';\n      }\n\n      function handleSelection() {\n        const input = inputRef.current;\n\n        if (input == null) {\n          return;\n        }\n\n        const start = input.selectionStart;\n        const end = input.selectionEnd;\n        const hasSelection = start != null && end != null && start !== end;\n        if (input !== document.activeElement || mode === 'keyboard') {\n          mode = 'unknown';\n          return;\n        }\n\n        const value = presenter.filledValueBroadcast.get();\n\n        if (hasSelection && value.length === 0) {\n          presenter.moveCursorTo(0);\n          input.setSelectionRange(0, 0);\n          mode = 'unknown';\n          return;\n        }\n\n        if (!hasSelection) {\n          presenter.moveCursorTo(end || 0);\n          const cursorPosition = presenter.cursorPositionBroadcast.get();\n          input.setSelectionRange(cursorPosition, cursorPosition);\n        }\n\n        mode = 'unknown';\n      }\n\n      document.addEventListener('selectionchange', handleSelection);\n      document.addEventListener('mousedown', handleMouseDown);\n      document.addEventListener('keydown', handleKeyDown);\n      return () => {\n        document.removeEventListener('selectionchange', handleSelection);\n        document.removeEventListener('mousedown', handleMouseDown);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [presenter]);\n\n    return (\n      <KeyCaptureInput\n        value={internalValue}\n        ref={forkedRef}\n        onCopy={handleCopy}\n        onPaste={handlePaste}\n        onCut={handleCut}\n        onKeyCapture={handleInput}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":";;;;;;;;;;;;;AAiBO,MAAMA,KAAYC,EAAM;AAAA,EAC7B,SACE;AAAA,IACE,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC,IAAoB,CAAAC,MAAKA;AAAA,IACzB,iBAAAC,IAAkB,CAAAD,MAAKA;AAAA,IACvB,kBAAAE,IAAmB,CAAAF,MAAKA;AAAA,IACxB,GAAGG;AAAA,EAAA,GAELC,GACA;AAEA,UAAMC,IAAQ,MAAM,QAAQV,CAAI,IAAIA,IAAO,CAACA,CAAI,GAC1CW,IAAWC,EAAgC,IAAI,GAC/CC,IAAYC,EAAWL,GAAKE,CAAQ,GAEpC,CAACI,CAAS,IAAIC,EAAS,MACT,IAAIC,EAAcP,CAAK,CAE1C,GAEKQ,IAAgBC,EAAeJ,EAAU,cAAc;AAC7D,IAAAI,EAAeJ,EAAU,oBAAoB;AAE7C,aAASK,EACPC,GACAC,GACAC,GACAC,GACAC,GACAC,GACA;AAOA,cANIH,KAAa,OACfR,EAAU,aAAaQ,EAAU,OAAOA,EAAU,GAAG,IAErDR,EAAU,kBAAkBS,CAAc,GAGpCF,GAAA;AAAA,QACN,KAAK;AACH,UAAAP,EAAU,OAAA;AAAA,QAEZ,KAAK;AACH,UAAAA,EAAU,UAAA;AAAA,MACZ;AAGF,MAAAA,EAAU,WAAWM,CAAK;AAE1B,YAAMvB,IAAQiB,EAAU,eAAe,IAAA,GACjCY,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,MAAAW,EAAa,QAAQ5B,GACrB4B,EAAa,kBAAkBC,GAAwBA,CAAsB,GAE7E5B,KAAYA,EAASD,GAAOiB,EAAU,WAAA,CAAY;AAAA,IACpD;AAEA,IAAAa,EAAgB,MAAM;AACpB,YAAMlB,IAAQ,MAAM,QAAQV,CAAI,IAAIA,IAAO,CAACA,CAAI,GAE1C6B,IAAgBnB,EAAM,IAAI,CAAAoB,MAAKA,EAAE,IAAI,EAAE,KAAK,GAAG,GAC/CC,IAAgBhB,EAAU,qBAC7B,IAAA,EACA,IAAI,CAAAe,MAAKA,EAAE,IAAI,EACf,KAAK,GAAG;AAEX,MAAID,MAAkBE,KACpBhB,EAAU,eAAeL,CAAK;AAAA,IAElC,GAAG,CAACK,GAAWf,CAAI,CAAC,GAEpB4B,EAAgB,MAAM;AACpB,MAAAb,EAAU,SAASjB,CAAK;AACxB,YAAMyB,IAAYR,EAAU,mBAAmB,IAAA,GACzCS,IAAiBT,EAAU,wBAAwB,IAAA,GAEnDM,IAAQV,EAAS;AAEvB,MAAIU,KAAS,SACUE,KAAa,OAGhCF,EAAM,kBAAkBE,EAAU,OAAOA,EAAU,GAAG,IAEtDF,EAAM,kBAAkBG,GAAgBA,CAAc;AAAA,IAG5D,GAAG,CAACT,GAAWjB,CAAK,CAAC;AAErB,aAASkC,EAAYC,GAA+C;AAClE,YAAMP,IAAeO,EAAM,eACrBC,IAAQR,EAAa,gBACrBS,IAAMT,EAAa;AAGzB,MAFqBQ,KAAS,QAAQC,KAAO,QAAQD,MAAUC,IAG7DpB,EAAU,aAAamB,GAAOC,CAAG,IAEjCpB,EAAU,aAAamB,KAAS,CAAC,GAGnCnB,EAAU,WAAWX,EAAkB6B,EAAM,cAAc,QAAQ,YAAY,CAAC,CAAC;AACjF,YAAMN,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,MAAAW,EAAa,QAAQX,EAAU,eAAe,IAAA,GAC9CW,EAAa,kBAAkBC,GAAwBA,CAAsB,GAE7EM,EAAM,eAAA,GACNhC,KAAWA,EAAQgC,CAAK,GACxBlC,KAAYA,EAASgB,EAAU,eAAe,OAAOA,EAAU,YAAY;AAAA,IAC7E;AAEA,aAASqB,EAAUH,GAA+C;AAChE,YAAMP,IAAeO,EAAM,eACrBC,IAAQR,EAAa,gBACrBS,IAAMT,EAAa;AAGzB,UAFqBQ,KAAS,QAAQC,KAAO,QAAQD,MAAUC,GAE7C;AAChB,QAAApB,EAAU,aAAamB,GAAOC,CAAG;AACjC,cAAMrC,IAAQQ,EAAgBS,EAAU,iBAAA,CAAkB;AAC1D,QAAAA,EAAU,WAAWmB,GAAOC,CAAG;AAC/B,cAAMR,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,QAAAkB,EAAM,cAAc,QAAQ,cAAcnC,CAAK,GAC/C4B,EAAa,QAAQX,EAAU,eAAe,IAAA,GAC9CW,EAAa,kBAAkBC,GAAwBA,CAAsB;AAAA,MAC/E;AAEA,MAAAM,EAAM,eAAA,GACN/B,KAASA,EAAM+B,CAAK;AAAA,IACtB;AAEA,aAASI,EAAWJ,GAA+C;AACjE,YAAMZ,IAAQY,EAAM,eACdC,IAAQb,EAAM,gBACdc,IAAMd,EAAM;AAGlB,UAFqBa,KAAS,QAAQC,KAAO,QAAQD,MAAUC,GAE7C;AAChB,QAAApB,EAAU,aAAamB,GAAOC,CAAG;AACjC,cAAMrC,IAAQS,EAAiBQ,EAAU,iBAAA,CAAkB;AAE3D,QAAAkB,EAAM,cAAc,QAAQ,cAAcnC,CAAK;AAAA,MACjD;AAEA,MAAAmC,EAAM,eAAA,GACN9B,KAAUA,EAAO8B,CAAK;AAAA,IACxB;AAEA,WAAAL,EAAgB,MAAM;AACpB,UAAIU,IAAO;AAIX,UAFc3B,EAAS,WAEV;AACX;AAGF,eAAS4B,IAAkB;AACzB,QAAAD,IAAO;AAAA,MACT;AAEA,eAASE,IAAgB;AACvB,QAAAF,IAAO;AAAA,MACT;AAEA,eAASG,IAAkB;AACzB,cAAMpB,IAAQV,EAAS;AAEvB,YAAIU,KAAS;AACX;AAGF,cAAMa,IAAQb,EAAM,gBACdc,IAAMd,EAAM,cACZqB,IAAeR,KAAS,QAAQC,KAAO,QAAQD,MAAUC;AAC/D,YAAId,MAAU,SAAS,iBAAiBiB,MAAS,YAAY;AAC3D,UAAAA,IAAO;AACP;AAAA,QACF;AAEA,cAAMxC,IAAQiB,EAAU,qBAAqB,IAAA;AAE7C,YAAI2B,KAAgB5C,EAAM,WAAW,GAAG;AACtC,UAAAiB,EAAU,aAAa,CAAC,GACxBM,EAAM,kBAAkB,GAAG,CAAC,GAC5BiB,IAAO;AACP;AAAA,QACF;AAEA,YAAI,CAACI,GAAc;AACjB,UAAA3B,EAAU,aAAaoB,KAAO,CAAC;AAC/B,gBAAMX,IAAiBT,EAAU,wBAAwB,IAAA;AACzDM,UAAAA,EAAM,kBAAkBG,GAAgBA,CAAc;AAAA,QACxD;AAEA,QAAAc,IAAO;AAAA,MACT;AAEA,sBAAS,iBAAiB,mBAAmBG,CAAe,GAC5D,SAAS,iBAAiB,aAAaF,CAAe,GACtD,SAAS,iBAAiB,WAAWC,CAAa,GAC3C,MAAM;AACX,iBAAS,oBAAoB,mBAAmBC,CAAe,GAC/D,SAAS,oBAAoB,aAAaF,CAAe,GACzD,SAAS,oBAAoB,WAAWC,CAAa;AAAA,MACvD;AAAA,IACF,GAAG,CAACzB,CAAS,CAAC,GAGZ,gBAAA4B;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO1B;AAAA,QACP,KAAKL;AAAA,QACL,QAAQwB;AAAA,QACR,SAASL;AAAA,QACT,OAAOI;AAAA,QACP,cAAchB;AAAA,QACb,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"mask_input.js","sources":["../../../src/inputs/mask_input/mask_input.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { useForkRef } from '../../utils/index.js';\nimport React, { useRef, useState, useLayoutEffect } from 'react';\nimport { InputProps } from '../input/input.js';\nimport { KeyCaptureInput, Range } from './key_capture_input.js';\nimport { MaskConfig } from './mask_config.js';\nimport { MaskPresenter } from './mask_presenter.js';\n\nexport interface MaskInputProps extends Omit<InputProps, 'onChange' | 'placeholder'> {\n  value?: string;\n  mask: MaskConfig | MaskConfig[];\n  onChange?: (value: string, isComplete: boolean) => void;\n  preparePasteValue?: (value: string) => string;\n  prepareCutValue?: (value: string) => string;\n  prepareCopyValue?: (value: string) => string;\n}\n\nexport const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(\n  function MaskInput(\n    {\n      value = '',\n      onChange,\n      mask,\n      onPaste,\n      onCut,\n      onCopy,\n      preparePasteValue = s => s,\n      prepareCutValue = s => s,\n      prepareCopyValue = s => s,\n      ...props\n    }: MaskInputProps,\n    ref\n  ) {\n    // Fix copy on input, its not working\n    const masks = Array.isArray(mask) ? mask : [mask];\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const forkedRef = useForkRef(ref, inputRef);\n\n    const [presenter] = useState(() => {\n      const presenter = new MaskPresenter(masks);\n      return presenter;\n    });\n\n    const internalValue = useSignalValue(presenter.valueBroadcast);\n    useSignalValue(presenter.maskConfigsBroadcast);\n\n    function handleInput(\n      input: string,\n      key: string,\n      selection: Range | null,\n      cursorPosition: number,\n      _: number,\n      inputElement: HTMLInputElement\n    ) {\n      if (selection != null) {\n        presenter.setSelection(selection.start, selection.end);\n      } else {\n        presenter.forceMoveCursorTo(cursorPosition);\n      }\n\n      switch (key) {\n        case 'Delete': {\n          presenter.delete();\n        }\n        case 'Backspace': {\n          presenter.backspace();\n        }\n      }\n\n      presenter.insertText(input);\n\n      const value = presenter.valueBroadcast.get();\n      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n      inputElement.value = value;\n      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n      onChange && onChange(value, presenter.isComplete());\n    }\n\n    useLayoutEffect(() => {\n      const masks = Array.isArray(mask) ? mask : [mask];\n\n      const oldMaskString = masks.map(m => m.mask).join('|');\n      const newMaskString = presenter.maskConfigsBroadcast\n        .get()\n        .map(m => m.mask)\n        .join('|');\n\n      if (oldMaskString !== newMaskString) {\n        presenter.setMaskConfigs(masks);\n      }\n    }, [presenter, mask]);\n\n    useLayoutEffect(() => {\n      presenter.setValue(value);\n      const selection = presenter.selectionBroadcast.get();\n      const cursorPosition = presenter.cursorPositionBroadcast.get();\n\n      const input = inputRef.current;\n\n      if (input != null) {\n        const hasSelection = selection != null;\n\n        if (hasSelection) {\n          input.setSelectionRange(selection.start, selection.end);\n        } else {\n          input.setSelectionRange(cursorPosition, cursorPosition);\n        }\n      }\n    }, [presenter, value]);\n\n    function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {\n      const inputElement = event.currentTarget;\n      const start = inputElement.selectionStart;\n      const end = inputElement.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n      } else {\n        presenter.moveCursorTo(start || 0);\n      }\n\n      presenter.insertText(preparePasteValue(event.clipboardData.getData('text/plain')));\n      const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n      inputElement.value = presenter.valueBroadcast.get();\n      inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n\n      event.preventDefault();\n      onPaste && onPaste(event);\n      onChange && onChange(presenter.valueBroadcast.get(), presenter.isComplete());\n    }\n\n    function handleCut(event: React.ClipboardEvent<HTMLInputElement>) {\n      const inputElement = event.currentTarget;\n      const start = inputElement.selectionStart;\n      const end = inputElement.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n        const value = prepareCutValue(presenter.getSelectedValue());\n        presenter.clearRange(start, end);\n        const resolvedCursorPosition = presenter.cursorPositionBroadcast.get();\n\n        event.clipboardData.setData('text/plain', value);\n        inputElement.value = presenter.valueBroadcast.get();\n        inputElement.setSelectionRange(resolvedCursorPosition, resolvedCursorPosition);\n      }\n\n      event.preventDefault();\n      onCut && onCut(event);\n    }\n\n    function handleCopy(event: React.ClipboardEvent<HTMLInputElement>) {\n      const input = event.currentTarget;\n      const start = input.selectionStart;\n      const end = input.selectionEnd;\n      const hasSelection = start != null && end != null && start !== end;\n\n      if (hasSelection) {\n        presenter.setSelection(start, end);\n        const value = prepareCopyValue(presenter.getSelectedValue());\n\n        event.clipboardData.setData('text/plain', value);\n      }\n\n      event.preventDefault();\n      onCopy && onCopy(event);\n    }\n\n    useLayoutEffect(() => {\n      let mode = 'unknown';\n\n      const input = inputRef.current;\n\n      if (input == null) {\n        return;\n      }\n\n      function handleMouseDown() {\n        mode = 'mouse';\n      }\n\n      function handleKeyDown() {\n        mode = 'keyboard';\n      }\n\n      function handleSelection() {\n        const input = inputRef.current;\n\n        if (input == null) {\n          return;\n        }\n\n        const start = input.selectionStart;\n        const end = input.selectionEnd;\n        const hasSelection = start != null && end != null && start !== end;\n        if (input !== document.activeElement || mode === 'keyboard') {\n          mode = 'unknown';\n          return;\n        }\n\n        const value = presenter.filledValueBroadcast.get();\n\n        if (hasSelection && value.length === 0) {\n          presenter.moveCursorTo(0);\n          input.setSelectionRange(0, 0);\n          mode = 'unknown';\n          return;\n        }\n\n        if (!hasSelection) {\n          presenter.moveCursorTo(end || 0);\n          const cursorPosition = presenter.cursorPositionBroadcast.get();\n          input.setSelectionRange(cursorPosition, cursorPosition);\n        }\n\n        mode = 'unknown';\n      }\n\n      document.addEventListener('selectionchange', handleSelection);\n      document.addEventListener('mousedown', handleMouseDown);\n      document.addEventListener('keydown', handleKeyDown);\n      return () => {\n        document.removeEventListener('selectionchange', handleSelection);\n        document.removeEventListener('mousedown', handleMouseDown);\n        document.removeEventListener('keydown', handleKeyDown);\n      };\n    }, [presenter]);\n\n    return (\n      <KeyCaptureInput\n        value={internalValue}\n        ref={forkedRef}\n        onCopy={handleCopy}\n        onPaste={handlePaste}\n        onCut={handleCut}\n        onKeyCapture={handleInput}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["MaskInput","React","value","onChange","mask","onPaste","onCut","onCopy","preparePasteValue","s","prepareCutValue","prepareCopyValue","props","ref","masks","inputRef","useRef","forkedRef","useForkRef","presenter","useState","MaskPresenter","internalValue","useSignalValue","handleInput","input","key","selection","cursorPosition","_","inputElement","resolvedCursorPosition","useLayoutEffect","oldMaskString","m","newMaskString","handlePaste","event","start","end","handleCut","handleCopy","mode","handleMouseDown","handleKeyDown","handleSelection","hasSelection","jsx","KeyCaptureInput"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,MAAMA,KAAYC,EAAM;AAAA,EAC7B,SACE;AAAA,IACE,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC,IAAoB,CAAAC,MAAKA;AAAA,IACzB,iBAAAC,IAAkB,CAAAD,MAAKA;AAAA,IACvB,kBAAAE,IAAmB,CAAAF,MAAKA;AAAA,IACxB,GAAGG;AAAA,EAAA,GAELC,GACA;AAEA,UAAMC,IAAQ,MAAM,QAAQV,CAAI,IAAIA,IAAO,CAACA,CAAI,GAC1CW,IAAWC,EAAgC,IAAI,GAC/CC,IAAYC,EAAWL,GAAKE,CAAQ,GAEpC,CAACI,CAAS,IAAIC,EAAS,MACT,IAAIC,EAAcP,CAAK,CAE1C,GAEKQ,IAAgBC,EAAeJ,EAAU,cAAc;AAC7D,IAAAI,EAAeJ,EAAU,oBAAoB;AAE7C,aAASK,EACPC,GACAC,GACAC,GACAC,GACAC,GACAC,GACA;AAOA,cANIH,KAAa,OACfR,EAAU,aAAaQ,EAAU,OAAOA,EAAU,GAAG,IAErDR,EAAU,kBAAkBS,CAAc,GAGpCF,GAAA;AAAA,QACN,KAAK;AACH,UAAAP,EAAU,OAAA;AAAA,QAEZ,KAAK;AACH,UAAAA,EAAU,UAAA;AAAA,MACZ;AAGF,MAAAA,EAAU,WAAWM,CAAK;AAE1B,YAAMvB,IAAQiB,EAAU,eAAe,IAAA,GACjCY,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,MAAAW,EAAa,QAAQ5B,GACrB4B,EAAa,kBAAkBC,GAAwBA,CAAsB,GAE7E5B,KAAYA,EAASD,GAAOiB,EAAU,WAAA,CAAY;AAAA,IACpD;AAEA,IAAAa,EAAgB,MAAM;AACpB,YAAMlB,IAAQ,MAAM,QAAQV,CAAI,IAAIA,IAAO,CAACA,CAAI,GAE1C6B,IAAgBnB,EAAM,IAAI,CAAAoB,MAAKA,EAAE,IAAI,EAAE,KAAK,GAAG,GAC/CC,IAAgBhB,EAAU,qBAC7B,IAAA,EACA,IAAI,CAAAe,MAAKA,EAAE,IAAI,EACf,KAAK,GAAG;AAEX,MAAID,MAAkBE,KACpBhB,EAAU,eAAeL,CAAK;AAAA,IAElC,GAAG,CAACK,GAAWf,CAAI,CAAC,GAEpB4B,EAAgB,MAAM;AACpB,MAAAb,EAAU,SAASjB,CAAK;AACxB,YAAMyB,IAAYR,EAAU,mBAAmB,IAAA,GACzCS,IAAiBT,EAAU,wBAAwB,IAAA,GAEnDM,IAAQV,EAAS;AAEvB,MAAIU,KAAS,SACUE,KAAa,OAGhCF,EAAM,kBAAkBE,EAAU,OAAOA,EAAU,GAAG,IAEtDF,EAAM,kBAAkBG,GAAgBA,CAAc;AAAA,IAG5D,GAAG,CAACT,GAAWjB,CAAK,CAAC;AAErB,aAASkC,EAAYC,GAA+C;AAClE,YAAMP,IAAeO,EAAM,eACrBC,IAAQR,EAAa,gBACrBS,IAAMT,EAAa;AAGzB,MAFqBQ,KAAS,QAAQC,KAAO,QAAQD,MAAUC,IAG7DpB,EAAU,aAAamB,GAAOC,CAAG,IAEjCpB,EAAU,aAAamB,KAAS,CAAC,GAGnCnB,EAAU,WAAWX,EAAkB6B,EAAM,cAAc,QAAQ,YAAY,CAAC,CAAC;AACjF,YAAMN,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,MAAAW,EAAa,QAAQX,EAAU,eAAe,IAAA,GAC9CW,EAAa,kBAAkBC,GAAwBA,CAAsB,GAE7EM,EAAM,eAAA,GACNhC,KAAWA,EAAQgC,CAAK,GACxBlC,KAAYA,EAASgB,EAAU,eAAe,OAAOA,EAAU,YAAY;AAAA,IAC7E;AAEA,aAASqB,EAAUH,GAA+C;AAChE,YAAMP,IAAeO,EAAM,eACrBC,IAAQR,EAAa,gBACrBS,IAAMT,EAAa;AAGzB,UAFqBQ,KAAS,QAAQC,KAAO,QAAQD,MAAUC,GAE7C;AAChB,QAAApB,EAAU,aAAamB,GAAOC,CAAG;AACjC,cAAMrC,IAAQQ,EAAgBS,EAAU,iBAAA,CAAkB;AAC1D,QAAAA,EAAU,WAAWmB,GAAOC,CAAG;AAC/B,cAAMR,IAAyBZ,EAAU,wBAAwB,IAAA;AAEjE,QAAAkB,EAAM,cAAc,QAAQ,cAAcnC,CAAK,GAC/C4B,EAAa,QAAQX,EAAU,eAAe,IAAA,GAC9CW,EAAa,kBAAkBC,GAAwBA,CAAsB;AAAA,MAC/E;AAEA,MAAAM,EAAM,eAAA,GACN/B,KAASA,EAAM+B,CAAK;AAAA,IACtB;AAEA,aAASI,EAAWJ,GAA+C;AACjE,YAAMZ,IAAQY,EAAM,eACdC,IAAQb,EAAM,gBACdc,IAAMd,EAAM;AAGlB,UAFqBa,KAAS,QAAQC,KAAO,QAAQD,MAAUC,GAE7C;AAChB,QAAApB,EAAU,aAAamB,GAAOC,CAAG;AACjC,cAAMrC,IAAQS,EAAiBQ,EAAU,iBAAA,CAAkB;AAE3D,QAAAkB,EAAM,cAAc,QAAQ,cAAcnC,CAAK;AAAA,MACjD;AAEA,MAAAmC,EAAM,eAAA,GACN9B,KAAUA,EAAO8B,CAAK;AAAA,IACxB;AAEA,WAAAL,EAAgB,MAAM;AACpB,UAAIU,IAAO;AAIX,UAFc3B,EAAS,WAEV;AACX;AAGF,eAAS4B,IAAkB;AACzB,QAAAD,IAAO;AAAA,MACT;AAEA,eAASE,IAAgB;AACvB,QAAAF,IAAO;AAAA,MACT;AAEA,eAASG,IAAkB;AACzB,cAAMpB,IAAQV,EAAS;AAEvB,YAAIU,KAAS;AACX;AAGF,cAAMa,IAAQb,EAAM,gBACdc,IAAMd,EAAM,cACZqB,IAAeR,KAAS,QAAQC,KAAO,QAAQD,MAAUC;AAC/D,YAAId,MAAU,SAAS,iBAAiBiB,MAAS,YAAY;AAC3D,UAAAA,IAAO;AACP;AAAA,QACF;AAEA,cAAMxC,IAAQiB,EAAU,qBAAqB,IAAA;AAE7C,YAAI2B,KAAgB5C,EAAM,WAAW,GAAG;AACtC,UAAAiB,EAAU,aAAa,CAAC,GACxBM,EAAM,kBAAkB,GAAG,CAAC,GAC5BiB,IAAO;AACP;AAAA,QACF;AAEA,YAAI,CAACI,GAAc;AACjB,UAAA3B,EAAU,aAAaoB,KAAO,CAAC;AAC/B,gBAAMX,IAAiBT,EAAU,wBAAwB,IAAA;AACzDM,UAAAA,EAAM,kBAAkBG,GAAgBA,CAAc;AAAA,QACxD;AAEA,QAAAc,IAAO;AAAA,MACT;AAEA,sBAAS,iBAAiB,mBAAmBG,CAAe,GAC5D,SAAS,iBAAiB,aAAaF,CAAe,GACtD,SAAS,iBAAiB,WAAWC,CAAa,GAC3C,MAAM;AACX,iBAAS,oBAAoB,mBAAmBC,CAAe,GAC/D,SAAS,oBAAoB,aAAaF,CAAe,GACzD,SAAS,oBAAoB,WAAWC,CAAa;AAAA,MACvD;AAAA,IACF,GAAG,CAACzB,CAAS,CAAC,GAGZ,gBAAA4B;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO1B;AAAA,QACP,KAAKL;AAAA,QACL,QAAQwB;AAAA,QACR,SAASL;AAAA,QACT,OAAOI;AAAA,QACP,cAAchB;AAAA,QACb,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/inputs/multiselect/multiselect.js

@@ -1,4 +1,4 @@
-import { jsxs as v, Fragment as w, jsx as l } from "react/jsx-runtime";
+import { jsxs as v, Fragment as w, jsx as o } from "react/jsx-runtime";
 import A, { useRef as V, useLayoutEffect as j } from "react";
 import { Spacer as q } from "../../stacks/spacer.js";
 import { VStack as C } from "../../stacks/v_stack.js";
@@ -6,23 +6,27 @@ import { MultiselectInlineValues as E } from "./multiselect_inline_values.js";
 import { MultiselectValues as N } from "./multiselect_values.js";
 import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
 import { Select as x } from "../select/select.js";
-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 L } 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 $ from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
-import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, re = A.forwardRef(function({
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
+import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, se = A.forwardRef(function({
   value: e = [],
-  disabled: o = !1,
+  disabled: l = !1,
   children: S,
   className: G,
   onChange: r,
   inline: y = !1,
-  width: s = "100%",
-  minWidth: i,
+  width: i = "100%",
+  minWidth: s,
   maxWidth: u,
   ...a
 }, m) {
@@ -45,11 +49,11 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
     }
   }
   return y ? /* @__PURE__ */ v(w, { children: [
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ o(
       x,
       {
         ref: F,
-        disabled: o,
+        disabled: l,
         onChange: h,
         width: "auto",
         value: null,
@@ -58,42 +62,42 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
         children: p
       }
     ),
-    /* @__PURE__ */ l(q, { width: "8px" }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ o(q, { width: "8px" }),
+    /* @__PURE__ */ o(
       E,
       {
         values: d,
         onRemove: R,
-        disabled: o
+        disabled: l
       }
     )
   ] }) : /* @__PURE__ */ v(
     C,
     {
-      width: s,
-      minWidth: i,
+      width: i,
+      minWidth: s,
       maxWidth: u,
       className: $(B["multiselect-container"], "tcn-multiselect-container"),
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           x,
           {
             ref: m,
-            disabled: o,
+            disabled: l,
             onChange: h,
             value: null,
             placeholder: "Select to Add",
-            width: s,
-            minWidth: i,
+            width: i,
+            minWidth: s,
             maxWidth: u,
             ...a,
             children: p
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ o(
           N,
           {
-            disabled: o,
+            disabled: l,
             values: d,
             onRemove: R
           }
@@ -103,6 +107,6 @@ import '../../multiselect.css';const z = "_multiselect-container_009951a", B = {
   );
 });
 export {
-  re as Multiselect
+  se as Multiselect
 };
 //# sourceMappingURL=multiselect.js.map