@tcn/ui 0.17.0 → 0.18.0

package/dist/mobile/inputs/date_picker/mobile_date_picker_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_input.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { ButtonGroup } from '../../../actions/button/button_group/button_group.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileDatePicker } from './mobile_date_picker.js';\nimport { MobileDatePickerTimeSelector } from './mobile_date_picker_time_selector.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { DatePickerInputProps } from '../../../inputs/date_picker/date_picker_input.js';\nimport styles from './mobile_date_picker_input.module.css';\n\nexport interface MobileDatePickerInputProps extends DatePickerInputProps {\n  selectTimeMessage?: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport const MobileDatePickerInput = React.forwardRef<\n  HTMLButtonElement,\n  MobileDatePickerInputProps\n>(function MobileDatePickerInput(\n  {\n    value = new Date(),\n    onChange,\n    onError,\n    min = new Date('01/01/1924'),\n    max = new Date('01/01/2124'),\n    disabled,\n    width = '100%',\n    maxWidth,\n    minWidth,\n    showTime = false,\n    timeIntervalInMinutes = 15,\n    hierarchy = 'secondary',\n    disabledDates,\n    selectDateMessage = 'Select Date',\n    selectTimeMessage = 'Select Time',\n    selectMonthMessage,\n    selectYearMessage,\n    countryCode,\n    renderActions,\n    onTimeSelected,\n    ...props\n  },\n  ref\n) {\n  const [dateOpen, setDateOpen] = useState(false);\n  const [timeOpen, setTimeOpen] = useState(false);\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n  const timeRef = useRef<HTMLDivElement | null>(null);\n  const dateButtonRef = useRef<HTMLButtonElement | null>(null);\n  const timeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setDateButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      dateButtonRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n\n  const dateFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  }, [countryCode]);\n\n  const timeFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  }, [countryCode]);\n\n  const formattedDate = value != null ? dateFormatter.format(value) : selectDateMessage;\n  const formattedTime = value != null ? timeFormatter.format(value) : selectTimeMessage;\n\n  function openDatePicker() {\n    setDateOpen(true);\n  }\n\n  function closeDatePicker() {\n    setDateOpen(false);\n    requestAnimationFrame(() => dateButtonRef.current?.focus());\n  }\n\n  function openTimePicker() {\n    setTimeOpen(true);\n  }\n\n  function closeTimePicker() {\n    setTimeOpen(false);\n    requestAnimationFrame(() => timeButtonRef.current?.focus());\n  }\n\n  useLayoutEffect(() => {\n    if (dateOpen) {\n      requestAnimationFrame(() => pickerRef.current?.focus());\n    }\n  }, [dateOpen]);\n\n  useLayoutEffect(() => {\n    if (timeOpen) {\n      requestAnimationFrame(() => timeRef.current?.focus());\n    }\n  }, [timeOpen]);\n\n  function handleDateEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeDatePicker();\n    }\n  }\n\n  function handleTimeEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeTimePicker();\n    }\n  }\n\n  function handleDateRedirect() {\n    pickerRef.current?.focus();\n  }\n\n  function handleTimeRedirect() {\n    timeRef.current?.focus();\n  }\n\n  function dateSelected(date: Date | null) {\n    onChange?.(date);\n    closeDatePicker();\n  }\n\n  function timeSelected(hour: number, minutes: number, seconds: number) {\n    if (value != null) {\n      const updated = new Date(value);\n      updated.setHours(hour, minutes, seconds);\n      onChange?.(updated);\n    }\n    onTimeSelected?.(hour, minutes, seconds);\n    closeTimePicker();\n  }\n\n  return (\n    <>\n      {showTime ? (\n        <ButtonGroup hierarchy={hierarchy} width={width}>\n          <MobileButton\n            ref={setDateButtonRef}\n            hAlign=\"start\"\n            disabled={disabled}\n            onClick={openDatePicker}\n            width=\"flex\"\n            {...props}\n          >\n            <span className=\"ellipsis\">{formattedDate}</span>\n          </MobileButton>\n          <MobileButton\n            ref={timeButtonRef}\n            hAlign=\"start\"\n            disabled={disabled || value == null}\n            onClick={openTimePicker}\n            width=\"auto\"\n          >\n            <span className=\"ellipsis\">{formattedTime}</span>\n          </MobileButton>\n        </ButtonGroup>\n      ) : (\n        <MobileButton\n          ref={setDateButtonRef}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openDatePicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </MobileButton>\n      )}\n\n      {dateOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleDateEscape}\n          >\n            <MobileOverlayHeader title={selectDateMessage} onClose={closeDatePicker} />\n            <MobileDatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              selectMonthMessage={selectMonthMessage}\n              selectYearMessage={selectYearMessage}\n            />\n            <FocusRedirect onRedirect={handleDateRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {timeOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-time-picker-overlay']}\n            onKeyDown={handleTimeEscape}\n          >\n            <MobileOverlayHeader title={selectTimeMessage} onClose={closeTimePicker} />\n            <MobileDatePickerTimeSelector\n              ref={timeRef}\n              origin={value}\n              min={min}\n              max={max}\n              intervalInMinutes={timeIntervalInMinutes}\n              disabled={disabled}\n              onSelect={(hour, minutes, seconds) => {\n                timeSelected(hour, minutes, seconds);\n              }}\n            />\n            <FocusRedirect onRedirect={handleTimeRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n});\n"],"names":["MobileDatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","selectTimeMessage","selectMonthMessage","selectYearMessage","countryCode","renderActions","onTimeSelected","props","ref","dateOpen","setDateOpen","useState","timeOpen","setTimeOpen","pickerRef","useRef","timeRef","dateButtonRef","timeButtonRef","setDateButtonRef","useCallback","node","dateFormatter","useMemo","timeFormatter","formattedDate","formattedTime","openDatePicker","closeDatePicker","openTimePicker","closeTimePicker","useLayoutEffect","handleDateEscape","event","handleTimeEscape","handleDateRedirect","handleTimeRedirect","dateSelected","date","timeSelected","hour","minutes","seconds","updated","jsxs","Fragment","ButtonGroup","jsx","MobileButton","MobilePortal","VStack","styles","MobileOverlayHeader","MobileDatePicker","FocusRedirect","MobileDatePickerTimeSelector"],"mappings":"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"}
+{"version":3,"file":"mobile_date_picker_input.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { MobileButton } from '../../actions/button/mobile_button.js';\nimport { ButtonGroup } from '../../../actions/button/button_group/button_group.js';\nimport { MobilePortal } from '../../portal/mobile_portal.js';\nimport { MobileDatePicker } from './mobile_date_picker.js';\nimport { MobileDatePickerTimeSelector } from './mobile_date_picker_time_selector.js';\nimport { MobileOverlayHeader } from './mobile_overlay_header.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { VStack } from '../../../stacks/v_stack.js';\nimport type { DatePickerInputProps } from '../../../inputs/date_picker/date_picker_input.js';\nimport styles from './mobile_date_picker_input.module.css';\n\nexport interface MobileDatePickerInputProps extends DatePickerInputProps {\n  selectTimeMessage?: string;\n  selectMonthMessage?: string;\n  selectYearMessage?: string;\n}\n\nexport const MobileDatePickerInput = React.forwardRef<\n  HTMLButtonElement,\n  MobileDatePickerInputProps\n>(function MobileDatePickerInput(\n  {\n    value = new Date(),\n    onChange,\n    onError,\n    min = new Date('01/01/1924'),\n    max = new Date('01/01/2124'),\n    disabled,\n    width = '100%',\n    maxWidth,\n    minWidth,\n    showTime = false,\n    timeIntervalInMinutes = 15,\n    hierarchy = 'secondary',\n    disabledDates,\n    selectDateMessage = 'Select Date',\n    selectTimeMessage = 'Select Time',\n    selectMonthMessage,\n    selectYearMessage,\n    countryCode,\n    renderActions,\n    onTimeSelected,\n    ...props\n  },\n  ref\n) {\n  const [dateOpen, setDateOpen] = useState(false);\n  const [timeOpen, setTimeOpen] = useState(false);\n  const pickerRef = useRef<HTMLDivElement | null>(null);\n  const timeRef = useRef<HTMLDivElement | null>(null);\n  const dateButtonRef = useRef<HTMLButtonElement | null>(null);\n  const timeButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const setDateButtonRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      dateButtonRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;\n      }\n    },\n    [ref]\n  );\n\n  const dateFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      year: 'numeric',\n      month: 'short',\n      day: 'numeric',\n    });\n  }, [countryCode]);\n\n  const timeFormatter = useMemo(() => {\n    return new Intl.DateTimeFormat(countryCode, {\n      hour: 'numeric',\n      minute: '2-digit',\n      hour12: true,\n    });\n  }, [countryCode]);\n\n  const formattedDate = value != null ? dateFormatter.format(value) : selectDateMessage;\n  const formattedTime = value != null ? timeFormatter.format(value) : selectTimeMessage;\n\n  function openDatePicker() {\n    setDateOpen(true);\n  }\n\n  function closeDatePicker() {\n    setDateOpen(false);\n    requestAnimationFrame(() => dateButtonRef.current?.focus());\n  }\n\n  function openTimePicker() {\n    setTimeOpen(true);\n  }\n\n  function closeTimePicker() {\n    setTimeOpen(false);\n    requestAnimationFrame(() => timeButtonRef.current?.focus());\n  }\n\n  useLayoutEffect(() => {\n    if (dateOpen) {\n      requestAnimationFrame(() => pickerRef.current?.focus());\n    }\n  }, [dateOpen]);\n\n  useLayoutEffect(() => {\n    if (timeOpen) {\n      requestAnimationFrame(() => timeRef.current?.focus());\n    }\n  }, [timeOpen]);\n\n  function handleDateEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeDatePicker();\n    }\n  }\n\n  function handleTimeEscape(event: React.KeyboardEvent) {\n    if (event.key === 'Escape') {\n      closeTimePicker();\n    }\n  }\n\n  function handleDateRedirect() {\n    pickerRef.current?.focus();\n  }\n\n  function handleTimeRedirect() {\n    timeRef.current?.focus();\n  }\n\n  function dateSelected(date: Date | null) {\n    onChange?.(date);\n    closeDatePicker();\n  }\n\n  function timeSelected(hour: number, minutes: number, seconds: number) {\n    if (value != null) {\n      const updated = new Date(value);\n      updated.setHours(hour, minutes, seconds);\n      onChange?.(updated);\n    }\n    onTimeSelected?.(hour, minutes, seconds);\n    closeTimePicker();\n  }\n\n  return (\n    <>\n      {showTime ? (\n        <ButtonGroup hierarchy={hierarchy} width={width}>\n          <MobileButton\n            ref={setDateButtonRef}\n            hAlign=\"start\"\n            disabled={disabled}\n            onClick={openDatePicker}\n            width=\"flex\"\n            {...props}\n          >\n            <span className=\"ellipsis\">{formattedDate}</span>\n          </MobileButton>\n          <MobileButton\n            ref={timeButtonRef}\n            hAlign=\"start\"\n            disabled={disabled || value == null}\n            onClick={openTimePicker}\n            width=\"auto\"\n          >\n            <span className=\"ellipsis\">{formattedTime}</span>\n          </MobileButton>\n        </ButtonGroup>\n      ) : (\n        <MobileButton\n          ref={setDateButtonRef}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openDatePicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </MobileButton>\n      )}\n\n      {dateOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-date-picker-overlay']}\n            onKeyDown={handleDateEscape}\n          >\n            <MobileOverlayHeader title={selectDateMessage} onClose={closeDatePicker} />\n            <MobileDatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              selectMonthMessage={selectMonthMessage}\n              selectYearMessage={selectYearMessage}\n            />\n            <FocusRedirect onRedirect={handleDateRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n\n      {timeOpen && (\n        <MobilePortal>\n          <VStack\n            className={styles['mobile-time-picker-overlay']}\n            onKeyDown={handleTimeEscape}\n          >\n            <MobileOverlayHeader title={selectTimeMessage} onClose={closeTimePicker} />\n            <MobileDatePickerTimeSelector\n              ref={timeRef}\n              origin={value}\n              min={min}\n              max={max}\n              intervalInMinutes={timeIntervalInMinutes}\n              disabled={disabled}\n              onSelect={(hour, minutes, seconds) => {\n                timeSelected(hour, minutes, seconds);\n              }}\n            />\n            <FocusRedirect onRedirect={handleTimeRedirect} />\n          </VStack>\n        </MobilePortal>\n      )}\n    </>\n  );\n});\n"],"names":["MobileDatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","selectTimeMessage","selectMonthMessage","selectYearMessage","countryCode","renderActions","onTimeSelected","props","ref","dateOpen","setDateOpen","useState","timeOpen","setTimeOpen","pickerRef","useRef","timeRef","dateButtonRef","timeButtonRef","setDateButtonRef","useCallback","node","dateFormatter","useMemo","timeFormatter","formattedDate","formattedTime","openDatePicker","closeDatePicker","openTimePicker","closeTimePicker","useLayoutEffect","handleDateEscape","event","handleTimeEscape","handleDateRedirect","handleTimeRedirect","dateSelected","date","timeSelected","hour","minutes","seconds","updated","jsxs","Fragment","ButtonGroup","jsx","MobileButton","MobilePortal","VStack","styles","MobileOverlayHeader","MobileDatePicker","FocusRedirect","MobileDatePickerTimeSelector"],"mappings":";;;;;;;;;;;;;;;;;;;;0KAkBaA,KAAwBC,GAAM,WAGzC,SACA;AAAA,EACE,OAAAC,wBAAY,KAAA;AAAA,EACZ,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC,IAAM,oBAAI,KAAK,YAAY;AAAA,EAC3B,KAAAC,IAAM,oBAAI,KAAK,YAAY;AAAA,EAC3B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,uBAAAC,IAAwB;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,eAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxCG,IAAYC,EAA8B,IAAI,GAC9CC,IAAUD,EAA8B,IAAI,GAC5CE,IAAgBF,EAAiC,IAAI,GACrDG,IAAgBH,EAAiC,IAAI,GAErDI,IAAmBC;AAAA,IACvB,CAACC,MAAmC;AAClC,MAAAJ,EAAc,UAAUI,GACpB,OAAOb,KAAQ,aACjBA,EAAIa,CAAI,IACCb,KAAO,SACfA,EAAyD,UAAUa;AAAA,IAExE;AAAA,IACA,CAACb,CAAG;AAAA,EAAA,GAGAc,IAAgBC,EAAQ,MACrB,IAAI,KAAK,eAAenB,GAAa;AAAA,IAC1C,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,EAAA,CACN,GACA,CAACA,CAAW,CAAC,GAEVoB,IAAgBD,EAAQ,MACrB,IAAI,KAAK,eAAenB,GAAa;AAAA,IAC1C,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACT,GACA,CAACA,CAAW,CAAC,GAEVqB,IAAgBtC,KAAS,OAAOmC,EAAc,OAAOnC,CAAK,IAAIa,GAC9D0B,IAAgBvC,KAAS,OAAOqC,EAAc,OAAOrC,CAAK,IAAIc;AAEpE,WAAS0B,IAAiB;AACxB,IAAAjB,EAAY,EAAI;AAAA,EAClB;AAEA,WAASkB,IAAkB;AACzB,IAAAlB,EAAY,EAAK,GACjB,sBAAsB,MAAMO,EAAc,SAAS,MAAA,CAAO;AAAA,EAC5D;AAEA,WAASY,IAAiB;AACxB,IAAAhB,EAAY,EAAI;AAAA,EAClB;AAEA,WAASiB,IAAkB;AACzB,IAAAjB,EAAY,EAAK,GACjB,sBAAsB,MAAMK,EAAc,SAAS,MAAA,CAAO;AAAA,EAC5D;AAEA,EAAAa,EAAgB,MAAM;AACpB,IAAItB,KACF,sBAAsB,MAAMK,EAAU,SAAS,MAAA,CAAO;AAAA,EAE1D,GAAG,CAACL,CAAQ,CAAC,GAEbsB,EAAgB,MAAM;AACpB,IAAInB,KACF,sBAAsB,MAAMI,EAAQ,SAAS,MAAA,CAAO;AAAA,EAExD,GAAG,CAACJ,CAAQ,CAAC;AAEb,WAASoB,GAAiBC,GAA4B;AACpD,IAAIA,EAAM,QAAQ,YAChBL,EAAA;AAAA,EAEJ;AAEA,WAASM,GAAiBD,GAA4B;AACpD,IAAIA,EAAM,QAAQ,YAChBH,EAAA;AAAA,EAEJ;AAEA,WAASK,KAAqB;AAC5B,IAAArB,EAAU,SAAS,MAAA;AAAA,EACrB;AAEA,WAASsB,KAAqB;AAC5B,IAAApB,EAAQ,SAAS,MAAA;AAAA,EACnB;AAEA,WAASqB,GAAaC,GAAmB;AACvC,IAAAlD,IAAWkD,CAAI,GACfV,EAAA;AAAA,EACF;AAEA,WAASW,GAAaC,GAAcC,GAAiBC,GAAiB;AACpE,QAAIvD,KAAS,MAAM;AACjB,YAAMwD,IAAU,IAAI,KAAKxD,CAAK;AAC9B,MAAAwD,EAAQ,SAASH,GAAMC,GAASC,CAAO,GACvCtD,IAAWuD,CAAO;AAAA,IACpB;AACA,IAAArC,IAAiBkC,GAAMC,GAASC,CAAO,GACvCZ,EAAA;AAAA,EACF;AAEA,SACE,gBAAAc,EAAAC,IAAA,EACG,UAAA;AAAA,IAAAjD,IACC,gBAAAgD,EAACE,IAAA,EAAY,WAAAhD,GAAsB,OAAAL,GACjC,UAAA;AAAA,MAAA,gBAAAsD;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAK7B;AAAA,UACL,QAAO;AAAA,UACP,UAAA3B;AAAA,UACA,SAASmC;AAAA,UACT,OAAM;AAAA,UACL,GAAGpB;AAAA,UAEJ,UAAA,gBAAAwC,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAtB,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,MAE5C,gBAAAsB;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAK9B;AAAA,UACL,QAAO;AAAA,UACP,UAAU1B,KAAYL,KAAS;AAAA,UAC/B,SAAS0C;AAAA,UACT,OAAM;AAAA,UAEN,UAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,YAAY,UAAArB,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5C,EAAA,CACF,IAEA,gBAAAqB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAK7B;AAAA,QACL,QAAO;AAAA,QACP,UAAA3B;AAAA,QACA,WAAAM;AAAA,QACA,SAAS6B;AAAA,QACT,OAAAlC;AAAA,QACA,UAAAC;AAAA,QACC,GAAGa;AAAA,QAEJ,UAAA,gBAAAwC,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAtB,EAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,IAI7ChB,uBACEwC,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO,4BAA4B;AAAA,QAC9C,WAAWnB;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAe,EAACK,GAAA,EAAoB,OAAOpD,GAAmB,SAAS4B,GAAiB;AAAA,UACzE,gBAAAmB;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,KAAKvC;AAAA,cACL,OAAA3B;AAAA,cACA,UAAUkD;AAAA,cACV,KAAA/C;AAAA,cACA,KAAAC;AAAA,cACA,SAAAF;AAAA,cACA,UAAAG;AAAA,cACA,eAAAO;AAAA,cACA,aAAAK;AAAA,cACA,eAAAC;AAAA,cACA,oBAAAH;AAAA,cACA,mBAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,gBAAA4C,EAACO,GAAA,EAAc,YAAYnB,GAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,IAGDvB,uBACEqC,GAAA,EACC,UAAA,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO,4BAA4B;AAAA,QAC9C,WAAWjB;AAAA,QAEX,UAAA;AAAA,UAAA,gBAAAa,EAACK,GAAA,EAAoB,OAAOnD,GAAmB,SAAS6B,GAAiB;AAAA,UACzE,gBAAAiB;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,KAAKvC;AAAA,cACL,QAAQ7B;AAAA,cACR,KAAAG;AAAA,cACA,KAAAC;AAAA,cACA,mBAAmBM;AAAA,cACnB,UAAAL;AAAA,cACA,UAAU,CAACgD,GAAMC,GAASC,MAAY;AACpC,gBAAAH,GAAaC,GAAMC,GAASC,CAAO;AAAA,cACrC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,gBAAAK,EAACO,GAAA,EAAc,YAAYlB,GAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACjD,CACF;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js

@@ -14,18 +14,19 @@ import "../../../typography/footnote/footnote.js";
 import { Headline as N } from "../../../typography/headline/headline.js";
 import "../../../typography/subheadline/subheadline.js";
 import "../../../typography/title/title.js";
-import "../../../utils/click_away_listener.js";
-import { FocusRedirect as O } from "../../../utils/focus_redirect.js";
-import "../../../utils/scroll_away_listener.js";
+import "../../../utils/listeners/click_away_listener.js";
+import { FocusRedirect as O } 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 "../../../utils/hooks/labelled_by_context.js";
+import "../../../utils/decorators/draggable/context.js";
 import { clsx as Y } from "clsx";
-import "../../../draggable.module-BgelQsuJ.js";
-import "../../../utils/resize/context.js";
-import "../../../resizable.module-I6iyBAvM.js";
-import "../../../utils/resize/resize_handle.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 '../../../mobile_date_picker_year_selector.css';const $ = "_mobile-year-selector_31f3a58", E = "_mobile-year-button_494c1af", g = { "mobile-year-selector": $, "mobile-year-button": E };
-function ue({
+function de({
   presenter: n,
   onClose: x
 }) {
@@ -107,6 +108,6 @@ function ue({
   );
 }
 export {
-  ue as MobileDatePickerYearSelector
+  de as MobileDatePickerYearSelector
 };
 //# sourceMappingURL=mobile_date_picker_year_selector.js.map

package/dist/mobile/inputs/date_picker/mobile_date_picker_year_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_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 { MobileButton } from '../../actions/button/mobile_button.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 '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\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  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-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    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\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      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"mobile_date_picker_year_selector.js","sources":["../../../../src/mobile/inputs/date_picker/mobile_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 { MobileButton } from '../../actions/button/mobile_button.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 '../../../inputs/date_picker/date_picker_presenter.js';\nimport { FocusRedirect } from '../../../utils/index.js';\nimport { clsx } from 'clsx';\nimport styles from './mobile_date_picker_year_selector.module.css';\n\nexport interface MobileDatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function MobileDatePickerYearSelector({\n  presenter,\n  onClose,\n}: MobileDatePickerYearSelectorProps) {\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  const firstYear = visibleYear - remainder + offset;\n  const lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    const disabled = date.getFullYear() > maxYear || date.getFullYear() < minYear;\n\n    years.push(\n      <button\n        key={x}\n        disabled={disabled}\n        className={clsx(styles['mobile-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    containerRef.current?.focus();\n  }\n\n  useEffect(() => {\n    containerRef.current?.focus();\n  }, []);\n\n  const rows = [\n    years.slice(0, 4),\n    years.slice(4, 8),\n    years.slice(8, 12),\n    years.slice(12, 16),\n    years.slice(16, 20),\n  ];\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      width=\"100%\"\n      className={clsx(\n        styles['mobile-year-selector'],\n        'tcn-mobile-date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <MobileButton onClick={prev} hierarchy=\"tertiary\" width=\"auto\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </MobileButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <MobileButton hierarchy=\"tertiary\" width=\"auto\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </MobileButton>\n      </HStack>\n      {rows.map((row, index) => (\n        <HStack key={index} gap=\"4px\" width=\"100%\">\n          {row}\n        </HStack>\n      ))}\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["MobileDatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","date","disabled","jsx","clsx","styles","BodyText","focus","useEffect","rows","prev","next","jsxs","VStack","HStack","MobileButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","row","index","FocusRedirect"],"mappings":"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"}

package/dist/multiselect_values.css

@@ -1 +1 @@
-@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}
+@layer tcn-system{:where(._chip_ab2e86b){margin-block:2px;margin-inline-end:4px;padding:4px 8px 4px 12px}:where(._remove_e42285d),:where(._remove_e42285d:focus),:where(._remove_e42285d:active){outline-width:1px}:where(._item-container_2592c83){box-sizing:border-box;background-color:#fff;border-radius:4px;padding:4px;max-height:150px;min-width:100%;overflow:auto;border:1px solid #aaa}:where(._item-container_2592c83[data-is-disabled=true]){background-color:#0000000d;cursor:not-allowed}:where(._item-container_2592c83[data-is-disabled=true]>._chip_ab2e86b){opacity:.5;cursor:not-allowed}}

package/dist/navigation/tabs/state/link/tab_link.js

@@ -1,20 +1,21 @@
 import { jsx as k } from "react/jsx-runtime";
 import { forwardRef as x, useCallback as W } from "react";
 import { TabItem as l } from "../../primitives/tabs_list.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 I } 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 "../../../../utils/resize/context.js";
-import "../../../../resizable.module-I6iyBAvM.js";
-import "../../../../utils/resize/resize_handle.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 { useTabs as T } from "../context.js";
 import { useTabLink as C } from "./use_tab_link.js";
-const H = x(
+const J = x(
   ({ children: m, value: t, onClick: o, minWidth: n, maxWidth: p, id: M, ...e }, a) => {
     const { ref: s, isMatch: r } = C(t), i = T(), c = I(s, a), d = W(
       (b) => {
@@ -40,6 +41,6 @@ const H = x(
   }
 );
 export {
-  H as TabLink
+  J as TabLink
 };
 //# sourceMappingURL=tab_link.js.map

package/dist/navigation/tabs/state/link/tab_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"tab_link.js","sources":["../../../../../src/navigation/tabs/state/link/tab_link.tsx"],"sourcesContent":["import { forwardRef, useCallback, type PropsWithChildren } from 'react';\nimport { TabItem, type TabItemProps } from '../../primitives/tabs_list.js';\nimport { useForkRef } from '../../../../utils/index.js';\nimport { useTabs } from '../context.js';\nimport { useTabLink } from './use_tab_link.js';\n\nexport interface TabLinkOwnProps {\n  value: string;\n}\n\nexport interface TabLinkProps\n  extends Omit<TabItemProps, 'selected' | 'value'>,\n    TabLinkOwnProps {}\n\nexport const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(\n  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {\n    const { ref: internalRef, isMatch } = useTabLink(value);\n    const state = useTabs();\n    const ref = useForkRef(internalRef, forwardedRef);\n\n    const handleClick = useCallback(\n      (event: React.MouseEvent<HTMLButtonElement>) => {\n        state.onChange?.(value);\n        onClick?.(event);\n      },\n      [state, value, onClick]\n    );\n\n    const pickMinWidth = state.minItemWidth ?? minWidth;\n    const pickMaxWidth = state.maxItemWidth ?? maxWidth;\n\n    return (\n      <TabItem\n        ref={ref}\n        selected={isMatch}\n        onClick={handleClick}\n        minWidth={pickMinWidth}\n        maxWidth={pickMaxWidth}\n        id={`tab-${value}`}\n        aria-controls={`tabpanel-${value}`}\n        tabIndex={isMatch ? 0 : -1}\n        {...props}\n      >\n        {children}\n      </TabItem>\n    );\n  }\n);\n"],"names":["TabLink","forwardRef","children","value","onClick","minWidth","maxWidth","id","props","forwardedRef","internalRef","isMatch","useTabLink","state","useTabs","ref","useForkRef","handleClick","useCallback","event","pickMinWidth","pickMaxWidth","jsx","TabItem"],"mappings":";;;;;;;;;;;;;;;;;AAcO,MAAMA,IAAUC;AAAA,EACrB,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,GAAU,IAAAC,GAAI,GAAGC,EAAA,GAASC,MAAiB;AAChF,UAAM,EAAE,KAAKC,GAAa,SAAAC,EAAA,IAAYC,EAAWT,CAAK,GAChDU,IAAQC,EAAA,GACRC,IAAMC,EAAWN,GAAaD,CAAY,GAE1CQ,IAAcC;AAAA,MAClB,CAACC,MAA+C;AAC9C,QAAAN,EAAM,WAAWV,CAAK,GACtBC,IAAUe,CAAK;AAAA,MACjB;AAAA,MACA,CAACN,GAAOV,GAAOC,CAAO;AAAA,IAAA,GAGlBgB,IAAeP,EAAM,gBAAgBR,GACrCgB,IAAeR,EAAM,gBAAgBP;AAE3C,WACE,gBAAAgB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAR;AAAA,QACA,UAAUJ;AAAA,QACV,SAASM;AAAA,QACT,UAAUG;AAAA,QACV,UAAUC;AAAA,QACV,IAAI,OAAOlB,CAAK;AAAA,QAChB,iBAAe,YAAYA,CAAK;AAAA,QAChC,UAAUQ,IAAU,IAAI;AAAA,QACvB,GAAGH;AAAA,QAEH,UAAAN;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}

package/dist/overlay/frame/frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAO/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,eAAO,MAAM,KAAK,2GAyChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFAkEvB,CAAC"}
+{"version":3,"file":"frame.d.ts","sourceRoot":"","sources":["../../../src/overlay/frame/frame.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAGL,KAAK,QAAQ,EAGd,MAAM,uBAAuB,CAAC;AAS/B,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,eAAO,MAAM,KAAK,2GA6ChB,CAAC;AACH,UAAU,gBAAiB,SAAQ,QAAQ;CAAG;AAE9C,eAAO,MAAM,WAAW,sFA4GvB,CAAC"}

package/dist/overlay/frame/frame.js

@@ -1,101 +1,142 @@
-import { jsx as i } from "react/jsx-runtime";
-import { clsx as F } from "clsx";
-import R, { useCallback as _ } from "react";
-import { flushSync as p } from "react-dom";
-import { Box as k } from "../../stacks/box/box.js";
+import { jsx as n, jsxs as B } from "react/jsx-runtime";
+import { clsx as N } from "clsx";
+import v, { useRef as C, useCallback as W } from "react";
+import { flushSync as E } from "react-dom";
+import { Box as _ } from "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
 import "../../stacks/spacer.js";
 import "../../stacks/v_collapsible_box.js";
 import "../../stacks/v_stack.js";
-import { ZStack as w } from "../../stacks/z_stack.js";
-import { useDragContainer as z } from "../../utils/dnd/context.js";
-import { Draggable as C } from "../../utils/dnd/draggable/draggable.js";
-import { Portal as P } from "../portal/portal.js";
-import '../../frame.css';const S = "_frame-dialog_2a77c1d", B = { "frame-dialog": S }, J = R.forwardRef(function({
+import { ZStack as L } from "../../stacks/z_stack.js";
+import { useDragContainer as T } from "../../utils/decorators/draggable/context.js";
+import { Draggable as Z } from "../../utils/decorators/draggable/draggable.js";
+import { Resizable as q } from "../../utils/decorators/resizable/resizable.js";
+import { ResizeHandle as i } from "../../utils/decorators/resizable/resize_handle.js";
+import { Portal as A } from "../portal/portal.js";
+const ot = v.forwardRef(function({
   children: a,
-  isOpen: c = !1,
-  draggable: o = !0,
-  veil: l = !1,
-  resizable: t = !0,
-  className: s,
-  enableResizeOnTop: m = !0,
-  enableResizeOnBottom: u = !0,
-  enableResizeOnStart: h = !0,
-  enableResizeOnEnd: r = !0,
-  enableResizeOnLeft: d = !1,
-  enableResizeOnRight: g = !1,
-  ...e
-}, n) {
-  return c ? /* @__PURE__ */ i(P, { children: /* @__PURE__ */ i(w, { width: "100%", height: "100%", "data-is-veil": l, className: "tcn-frame-veil", children: /* @__PURE__ */ i(C, { draggable: o, children: /* @__PURE__ */ i(
-    N,
+  isOpen: h = !1,
+  draggable: m = !0,
+  veil: R = !1,
+  resizable: e = !0,
+  className: o,
+  enableResizeOnTop: s = !0,
+  enableResizeOnBottom: p = !0,
+  enableResizeOnStart: d = !0,
+  enableResizeOnEnd: g = !0,
+  enableResizeOnLeft: x = !1,
+  enableResizeOnRight: D = !1,
+  minWidth: O = 1,
+  minHeight: w = 1,
+  ...z
+}, F) {
+  return h ? /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(L, { width: "100%", height: "100%", "data-is-veil": R, className: "tcn-frame-veil", children: /* @__PURE__ */ n(Z, { draggable: m, children: /* @__PURE__ */ n(
+    G,
     {
-      className: s,
-      ref: n,
-      enableResizeOnStart: t && h,
-      enableResizeOnEnd: t && r,
-      enableResizeOnTop: t && m,
-      enableResizeOnBottom: t && u,
-      enableResizeOnRight: t && g,
-      enableResizeOnLeft: t && d,
-      draggable: o,
-      ...e,
+      className: o,
+      ref: F,
+      enableResizeOnStart: e && d,
+      enableResizeOnEnd: e && g,
+      enableResizeOnTop: e && s,
+      enableResizeOnBottom: e && p,
+      enableResizeOnRight: e && D,
+      enableResizeOnLeft: e && x,
+      draggable: m,
+      minWidth: O,
+      minHeight: w,
+      ...z,
       children: a
     }
   ) }) }) }) : null;
-}), N = R.forwardRef(
+}), G = v.forwardRef(
   function({
     as: a = "div",
-    role: c = "dialog",
-    children: o,
-    className: l,
-    draggable: t,
-    onWidthResize: s,
-    onHeightResize: m,
-    ...u
-  }, h) {
-    const r = z(), d = R.useCallback(
-      (e) => {
-        if (!t || e.currentDelta === 0) return;
-        const n = e.origin === "right" ? 1 : -1, x = e.currentDelta / 2 * n;
-        p(() => {
-          r.setPosition((f) => ({
-            x: f.x + x,
-            y: f.y
+    role: h = "dialog",
+    children: m,
+    className: R,
+    draggable: e,
+    onWidthResize: o,
+    onHeightResize: s,
+    onWidthResizeEnd: p,
+    onHeightResizeEnd: d,
+    enableResizeOnTop: g,
+    enableResizeOnBottom: x,
+    enableResizeOnStart: D,
+    enableResizeOnEnd: O,
+    enableResizeOnLeft: w,
+    enableResizeOnRight: z,
+    ...F
+  }, P) {
+    const u = T(), l = C(null), f = C(null), S = v.useCallback(
+      (t) => {
+        const r = l.current !== null ? t.width - l.current : t.currentDelta;
+        if (l.current = t.width, !e || r === 0) {
+          o?.(t);
+          return;
+        }
+        const b = t.origin === "end" ? 1 : -1, k = r / 2 * b;
+        E(() => {
+          u.setPosition((c) => ({
+            x: c.x + k,
+            y: c.y
           }));
-        }), s?.(e);
+        }), o?.(t);
       },
-      [s, r, t]
-    ), g = _(
-      (e) => {
-        if (!t || e.currentDelta === 0) return;
-        const n = e.origin === "bottom" ? 1 : -1, f = e.currentDelta / 2 * n;
-        p(() => {
-          r.setPosition((D) => ({
-            x: D.x,
-            y: D.y + f
+      [o, u, e]
+    ), j = W(
+      (t) => {
+        const r = f.current !== null ? t.height - f.current : t.currentDelta;
+        if (f.current = t.height, !e || r === 0) {
+          s?.(t);
+          return;
+        }
+        const b = t.origin === "bottom" ? 1 : -1, k = r / 2 * b;
+        E(() => {
+          u.setPosition((c) => ({
+            x: c.x,
+            y: c.y + k
           }));
-        }), m?.(e);
+        }), s?.(t);
       },
-      [m, r, t]
+      [s, u, e]
     );
-    return /* @__PURE__ */ i(
-      k,
+    return /* @__PURE__ */ B(
+      q,
       {
-        className: F(B["frame-dialog"], "tcn-frame-dialog", l),
-        ref: h,
-        onWidthResize: d,
-        onHeightResize: g,
-        as: a,
-        role: c,
-        ...u,
-        children: o
+        onWidthResize: S,
+        onHeightResize: j,
+        onWidthResizeEnd: (t, r) => {
+          l.current = null, p?.(t, r);
+        },
+        onHeightResizeEnd: (t, r) => {
+          f.current = null, d?.(t, r);
+        },
+        children: [
+          /* @__PURE__ */ n(
+            _,
+            {
+              className: N("tcn-frame", "tcn-frame-dialog", R),
+              ref: P,
+              as: a,
+              role: h,
+              ...F,
+              children: m
+            }
+          ),
+          g && /* @__PURE__ */ n(i, { position: "top" }),
+          x && /* @__PURE__ */ n(i, { position: "bottom" }),
+          D && /* @__PURE__ */ n(i, { position: "start" }),
+          O && /* @__PURE__ */ n(i, { position: "end" }),
+          w && /* @__PURE__ */ n(i, { position: "start" }),
+          z && /* @__PURE__ */ n(i, { position: "end" })
+        ]
       }
     );
   }
 );
 export {
-  J as Frame,
-  N as FrameDialog
+  ot as Frame,
+  G as FrameDialog
 };
 //# sourceMappingURL=frame.js.map

package/dist/overlay/frame/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/dnd/context.js';\nimport { Draggable } from '../../utils/dnd/draggable/draggable.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './frame.module.css';\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = BoxProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    enableResizeOnTop = true,\n    enableResizeOnBottom = true,\n    enableResizeOnStart = true,\n    enableResizeOnEnd = true,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnStart={resizable && enableResizeOnStart}\n            enableResizeOnEnd={resizable && enableResizeOnEnd}\n            enableResizeOnTop={resizable && enableResizeOnTop}\n            enableResizeOnBottom={resizable && enableResizeOnBottom}\n            enableResizeOnRight={resizable && enableResizeOnRight}\n            enableResizeOnLeft={resizable && enableResizeOnLeft}\n            draggable={draggable}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'right' ? 1 : -1;\n        const dx = (payload.currentDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        if (!draggable) return;\n        if (payload.currentDelta === 0) return;\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const half = payload.currentDelta / 2;\n        const dy = half * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Box\n        className={clsx(styles['frame-dialog'], 'tcn-frame-dialog', className)}\n        ref={ref}\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        as={as}\n        role={role}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","enableResizeOnTop","enableResizeOnBottom","enableResizeOnStart","enableResizeOnEnd","enableResizeOnLeft","enableResizeOnRight","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","drag","useDragContainer","handleWidthResize","payload","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","Box","clsx","styles"],"mappings":";;;;;;;;;;;;;;8DAyBaA,IAAQC,EAAM,WAAoC,SAC7D;AAAA,EACE,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,sBAAAC,IAAuB;AAAA,EACvB,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC,IAAoB;AAAA,EACpB,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,GAAGC;AACL,GACAC,GACA;AACA,SAAKZ,IAEH,gBAAAa,EAACC,GAAA,EACC,UAAA,gBAAAD,EAACE,GAAA,EAAO,OAAM,QAAO,QAAO,QAAO,gBAAcb,GAAM,WAAU,kBAC/D,UAAA,gBAAAW,EAACG,KAAU,WAAAf,GACT,UAAA,gBAAAY;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,WAAAb;AAAA,MACA,KAAAQ;AAAA,MACA,qBAAqBT,KAAaI;AAAA,MAClC,mBAAmBJ,KAAaK;AAAA,MAChC,mBAAmBL,KAAaE;AAAA,MAChC,sBAAsBF,KAAaG;AAAA,MACnC,qBAAqBH,KAAaO;AAAA,MAClC,oBAAoBP,KAAaM;AAAA,MACjC,WAAAR;AAAA,MACC,GAAGU;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA,EACH,CACF,GACF,GACF,IArBkB;AAuBtB,CAAC,GAGYkB,IAAcnB,EAAM;AAAA,EAC/B,SACE;AAAA,IACE,IAAAoB,IAAK;AAAA,IACL,MAAAC,IAAO;AAAA,IACP,UAAApB;AAAA,IACA,WAAAK;AAAA,IACA,WAAAH;AAAA,IACA,eAAAmB;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGV;AAAA,EAAA,GAELC,GACA;AACA,UAAMU,IAAOC,EAAA,GAEPC,IAAoB1B,EAAM;AAAA,MAC9B,CAAC2B,MAAkC;AAEjC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,UAAU,IAAI,IACxCE,IAAMF,EAAQ,eAAe,IAAKC;AACxC,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK,IAAIF;AAAA,YACZ,GAAGE,EAAK;AAAA,UAAA,EACR;AAAA,QACJ,CAAC,GAEDT,IAAgBK,CAAO;AAAA,MACzB;AAAA,MACA,CAACL,GAAeE,GAAMrB,CAAS;AAAA,IAAA,GAG3B6B,IAAqBC;AAAA,MACzB,CAACN,MAAmC;AAElC,YADI,CAACxB,KACDwB,EAAQ,iBAAiB,EAAG;AAChC,cAAMC,IAAOD,EAAQ,WAAW,WAAW,IAAI,IAEzCO,IADOP,EAAQ,eAAe,IAClBC;AAClB,QAAAE,EAAU,MAAM;AACd,UAAAN,EAAK,YAAY,CAAAO,OAAS;AAAA,YACxB,GAAGA,EAAK;AAAA,YACR,GAAGA,EAAK,IAAIG;AAAA,UAAA,EACZ;AAAA,QACJ,CAAC,GACDX,IAAiBI,CAAO;AAAA,MAC1B;AAAA,MACA,CAACJ,GAAgBC,GAAMrB,CAAS;AAAA,IAAA;AAGlC,WACE,gBAAAY;AAAA,MAACoB;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,cAAc,GAAG,oBAAoB/B,CAAS;AAAA,QACrE,KAAAQ;AAAA,QACA,eAAeY;AAAA,QACf,gBAAgBM;AAAA,QAChB,IAAAZ;AAAA,QACA,MAAAC;AAAA,QACC,GAAGR;AAAA,QAEH,UAAAZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"frame.js","sources":["../../../src/overlay/frame/frame.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useCallback, useRef } from 'react';\nimport { flushSync } from 'react-dom';\nimport {\n  Box,\n  ZStack,\n  type BoxProps,\n  type OnHeightResizePayload,\n  type OnWidthResizePayload,\n} from '../../stacks/index.js';\nimport { useDragContainer } from '../../utils/decorators/draggable/context.js';\nimport { Draggable } from '../../utils/decorators/draggable/draggable.js';\nimport { Resizable } from '../../utils/decorators/resizable/resizable.js';\nimport { ResizeHandle } from '../../utils/decorators/resizable/resize_handle.js';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\n\nexport interface FrameOwnProps {\n  isOpen?: boolean;\n  draggable?: boolean;\n  veil?: boolean;\n  resizable?: boolean;\n}\n\nexport type FrameProps = BoxProps & FrameOwnProps;\n\nexport const Frame = React.forwardRef<HTMLElement, FrameProps>(function Frame(\n  {\n    children,\n    isOpen = false,\n    draggable = true,\n    veil = false,\n    resizable = true,\n    className,\n    enableResizeOnTop = true,\n    enableResizeOnBottom = true,\n    enableResizeOnStart = true,\n    enableResizeOnEnd = true,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    minWidth = 1,\n    minHeight = 1,\n    ...rest\n  }: FrameProps,\n  ref\n) {\n  if (!isOpen) return null;\n  return (\n    <Portal>\n      <ZStack width=\"100%\" height=\"100%\" data-is-veil={veil} className=\"tcn-frame-veil\">\n        <Draggable draggable={draggable}>\n          <FrameDialog\n            className={className}\n            ref={ref}\n            enableResizeOnStart={resizable && enableResizeOnStart}\n            enableResizeOnEnd={resizable && enableResizeOnEnd}\n            enableResizeOnTop={resizable && enableResizeOnTop}\n            enableResizeOnBottom={resizable && enableResizeOnBottom}\n            enableResizeOnRight={resizable && enableResizeOnRight}\n            enableResizeOnLeft={resizable && enableResizeOnLeft}\n            draggable={draggable}\n            minWidth={minWidth}\n            minHeight={minHeight}\n            {...rest}\n          >\n            {children}\n          </FrameDialog>\n        </Draggable>\n      </ZStack>\n    </Portal>\n  );\n});\ninterface FrameDialogProps extends BoxProps {}\n\nexport const FrameDialog = React.forwardRef<HTMLElement, FrameDialogProps>(\n  function FrameDialog(\n    {\n      as = 'div',\n      role = 'dialog',\n      children,\n      className,\n      draggable,\n      onWidthResize,\n      onHeightResize,\n      onWidthResizeEnd,\n      onHeightResizeEnd,\n      enableResizeOnTop,\n      enableResizeOnBottom,\n      enableResizeOnStart,\n      enableResizeOnEnd,\n      enableResizeOnLeft,\n      enableResizeOnRight,\n      ...rest\n    }: FrameDialogProps,\n    ref: React.Ref<HTMLElement>\n  ) {\n    const drag = useDragContainer();\n    const prevWidthRef = useRef<number | null>(null);\n    const prevHeightRef = useRef<number | null>(null);\n\n    const handleWidthResize = React.useCallback(\n      (payload: OnWidthResizePayload) => {\n        const actualDelta =\n          prevWidthRef.current !== null\n            ? payload.width - prevWidthRef.current\n            : payload.currentDelta;\n        prevWidthRef.current = payload.width;\n\n        if (!draggable || actualDelta === 0) {\n          onWidthResize?.(payload);\n          return;\n        }\n        const sign = payload.origin === 'end' ? 1 : -1;\n        const dx = (actualDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x + dx,\n            y: prev.y,\n          }));\n        });\n\n        onWidthResize?.(payload);\n      },\n      [onWidthResize, drag, draggable]\n    );\n\n    const handleHeightResize = useCallback(\n      (payload: OnHeightResizePayload) => {\n        const actualDelta =\n          prevHeightRef.current !== null\n            ? payload.height - prevHeightRef.current\n            : payload.currentDelta;\n        prevHeightRef.current = payload.height;\n\n        if (!draggable || actualDelta === 0) {\n          onHeightResize?.(payload);\n          return;\n        }\n        const sign = payload.origin === 'bottom' ? 1 : -1;\n        const dy = (actualDelta / 2) * sign;\n        flushSync(() => {\n          drag.setPosition(prev => ({\n            x: prev.x,\n            y: prev.y + dy,\n          }));\n        });\n        onHeightResize?.(payload);\n      },\n      [onHeightResize, drag, draggable]\n    );\n\n    return (\n      <Resizable\n        onWidthResize={handleWidthResize}\n        onHeightResize={handleHeightResize}\n        onWidthResizeEnd={(width, origin) => {\n          prevWidthRef.current = null;\n          onWidthResizeEnd?.(width, origin);\n        }}\n        onHeightResizeEnd={(height, origin) => {\n          prevHeightRef.current = null;\n          onHeightResizeEnd?.(height, origin);\n        }}\n      >\n        <Box\n          className={clsx('tcn-frame', 'tcn-frame-dialog', className)}\n          ref={ref}\n          as={as}\n          role={role}\n          {...rest}\n        >\n          {children}\n        </Box>\n        {enableResizeOnTop && <ResizeHandle position=\"top\" />}\n        {enableResizeOnBottom && <ResizeHandle position=\"bottom\" />}\n        {enableResizeOnStart && <ResizeHandle position=\"start\" />}\n        {enableResizeOnEnd && <ResizeHandle position=\"end\" />}\n        {enableResizeOnLeft && <ResizeHandle position=\"start\" />}\n        {enableResizeOnRight && <ResizeHandle position=\"end\" />}\n      </Resizable>\n    );\n  }\n);\n"],"names":["Frame","React","children","isOpen","draggable","veil","resizable","className","enableResizeOnTop","enableResizeOnBottom","enableResizeOnStart","enableResizeOnEnd","enableResizeOnLeft","enableResizeOnRight","minWidth","minHeight","rest","ref","jsx","Portal","ZStack","Draggable","FrameDialog","as","role","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","drag","useDragContainer","prevWidthRef","useRef","prevHeightRef","handleWidthResize","payload","actualDelta","sign","dx","flushSync","prev","handleHeightResize","useCallback","dy","jsxs","Resizable","width","origin","height","Box","clsx","ResizeHandle"],"mappings":"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"}

package/dist/overlay/menu/menu.js

@@ -1,17 +1,18 @@
 import { jsx as g, jsxs as W, Fragment as q } from "react/jsx-runtime";
 import { BodyText as O } from "../../typography/body_text/body_text.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 f, { useState as F, useLayoutEffect as V, useRef as M } from "react";
 import { useForkRef as T } 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 "../../utils/resize/context.js";
-import "../../resizable.module-I6iyBAvM.js";
-import "../../utils/resize/resize_handle.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 { HStack as G } from "../../stacks/h_stack.js";
 import { VStack as J } from "../../stacks/v_stack.js";
 import { Popper as K } from "../popper/legacy/popper.js";
@@ -33,7 +34,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
   className: E,
   ...b
 }, I) {
-  const [z, r] = F(-1), l = f.Children.toArray(_).map((t, m) => {
+  const [z, n] = F(-1), l = f.Children.toArray(_).map((t, m) => {
     if (!f.isValidElement(t))
       return t;
     if (t.type !== D)
@@ -57,13 +58,13 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
         t.props.children == null && x && x(), t.props.onClick && t.props.onClick(o);
       },
       onMouseEnter: (o) => {
-        r(m), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(o);
+        n(m), c && c(!0), t.props.onMouseEnter && t.props.onMouseEnter(o);
       }
     };
     return t.type === D && (k.open = z === m), f.cloneElement(t, k);
   });
   return a === "up" && l.reverse(), V(() => {
-    y || (r(-1), c && c(!1));
+    y || (n(-1), c && c(!1));
   }, [y, c]), /* @__PURE__ */ g(
     K,
     {
@@ -96,28 +97,28 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
   open: s = !1,
   ...c
 }, _) {
-  const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, r] = F(!1), l = M(null), t = T(_, l), m = i != null && i.length > 0;
+  const E = M(!1), b = M({ x: -1, y: -1 }), I = M({ x: -1, y: -1 }), [z, n] = F(!1), l = M(null), t = T(_, l), m = i != null && i.length > 0;
   function k() {
-    r(!1);
+    n(!1);
   }
   return V(() => {
     const o = l.current;
     if (o && m && s) {
-      const u = window.getComputedStyle(o).direction, e = b.current, p = I.current, B = (n) => {
-        e.x === -1 && (e.x = n.clientX, e.y = n.clientY);
-        const P = n.clientX - e.x, w = n.clientY - e.y;
+      const u = window.getComputedStyle(o).direction, e = b.current, p = I.current, B = (r) => {
+        e.x === -1 && (e.x = r.clientX, e.y = r.clientY);
+        const P = r.clientX - e.x, w = r.clientY - e.y;
         if (p.x = Math.max(Math.abs(P), 1e-3), p.y = Math.max(Math.abs(w), 1e-3), (P < 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "ltr" || (P > 0 || u === "down" && w < 0 || u === "up" && w > 0) && u === "rtl") {
-          e.x = n.clientX, e.y = n.clientY, r(!1);
+          e.x = r.clientX, e.y = r.clientY, n(!1);
           return;
         }
         const H = Math.sqrt(p.x ** 2 + p.y ** 2);
         if (E.current) {
-          e.x = n.clientX, e.y = n.clientY, r(!1);
+          e.x = r.clientX, e.y = r.clientY, n(!1);
           return;
         }
         if (H > 5) {
           const N = p.x / p.y > 0.2;
-          r(!!N), e.x = n.clientX, e.y = n.clientY;
+          n(!!N), e.x = r.clientX, e.y = r.clientY;
         }
       };
       return window.addEventListener("mousemove", B), () => {
@@ -125,7 +126,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j =
       };
     }
   }, [m, s]), V(() => {
-    r(s);
+    n(s);
   }, [s]), /* @__PURE__ */ W(q, { children: [
     /* @__PURE__ */ g(
       G,