@tcn/ui 0.16.0 → 0.18.0

package/dist/inputs/combo_box/combo_box.js

@@ -1,16 +1,20 @@
 import { jsxs as D, Fragment as L, jsx as C } from "react/jsx-runtime";
-import "../../utils/click_away_listener.js";
-import "../../utils/focus_redirect.js";
-import "../../utils/scroll_away_listener.js";
+import "../../utils/listeners/click_away_listener.js";
+import "../../utils/listeners/focus_redirect.js";
+import "../../utils/listeners/scroll_away_listener.js";
 import N, { useRef as c, useState as f } from "react";
 import { useForkRef as z } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import "../../utils/dnd/context.js";
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
 import { clsx as G } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { SuggestionList as H } from "../suggestions/suggestion_list.js";
 import { Input as J } from "../input/input.js";
-const oe = N.forwardRef(function({
+const ie = N.forwardRef(function({
   onOptionSelect: m,
   children: O = [],
   onKeyDown: r,
@@ -23,41 +27,41 @@ const oe = N.forwardRef(function({
   onMouseUp: h,
   ...i
 }, A) {
-  const E = c(!1), [F, d] = f(o), S = c(o), n = c(!1), [V, y] = f(null), a = c(null), [R, x] = f(!1), I = z(A, a);
+  const E = c(!1), [F, d] = f(o), S = c(o), t = c(!1), [V, y] = f(null), a = c(null), [R, x] = f(!1), I = z(A, a);
   function l() {
     x(!0);
   }
   function u() {
-    n.current = !1, d(""), x(!1);
+    t.current = !1, d(""), x(!1);
   }
-  function M(e, t, w) {
-    n.current = !0;
+  function M(e, n, w) {
+    t.current = !0;
     const s = a.current;
     requestAnimationFrame(() => {
-      s != null && (s.value = e, s.focus(), s.setSelectionRange(t, w));
+      s != null && (s.value = e, s.focus(), s.setSelectionRange(n, w));
     }), i.onChange && i.onChange(e), u();
   }
   function j(e) {
-    n.current = !0;
-    const t = a.current;
-    t?.focus(), u(), m && m(e);
+    t.current = !0;
+    const n = a.current;
+    n?.focus(), u(), m && m(e);
   }
   function B(e) {
-    if (S.current = e.currentTarget.value, n.current) {
-      n.current = !1, r && r(e);
+    if (S.current = e.currentTarget.value, t.current) {
+      t.current = !1, r && r(e);
       return;
     }
     r && r(e);
   }
   function U(e) {
-    const t = e.key;
-    d(e.currentTarget.value), t === "Enter" && (R ? u() : (l(), e.preventDefault())), S.current !== e.currentTarget.value && l(), p && p(e);
+    const n = e.key;
+    d(e.currentTarget.value), n === "Enter" && (R ? u() : (l(), e.preventDefault())), S.current !== e.currentTarget.value && l(), p && p(e);
   }
   function _(e) {
     y(e.currentTarget), E.current = document.activeElement === e.currentTarget, g && g(e);
   }
   function q(e) {
-    n.current && (n.current = !1, u()), l(), h && h(e);
+    t.current && (t.current = !1, u()), l(), h && h(e);
   }
   return /* @__PURE__ */ D(L, { children: [
     /* @__PURE__ */ C(
@@ -91,6 +95,6 @@ const oe = N.forwardRef(function({
   ] });
 });
 export {
-  oe as ComboBox
+  ie as ComboBox
 };
 //# sourceMappingURL=combo_box.js.map

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

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

package/dist/inputs/date_picker/date_picker.js

@@ -1,13 +1,17 @@
-import { jsxs as l, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { jsxs as m, jsx as n, Fragment as T } from "react/jsx-runtime";
 import { useSignalValue as y, useSignalValueEffect as _ } from "@tcn/state";
-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 Y, { useState as B, useRef as L, useLayoutEffect as r } from "react";
 import { useResizeObserver as O } from "../../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 R } from "clsx";
-import "../../draggable.module-BgelQsuJ.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
 import { HStack as U } from "../../stacks/h_stack.js";
 import { Spacer as V } from "../../stacks/spacer.js";
 import { VStack as u } from "../../stacks/v_stack.js";
@@ -15,7 +19,7 @@ import { DatePickerBody as $ } from "./date_picker_body.js";
 import { DatePickerHeader as q } from "./date_picker_header.js";
 import { DatePickerPresenter as E } from "./date_picker_presenter.js";
 import { DatePickerTimeSelector as G } from "./date_picker_time_selector.js";
-import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-picker-box_4da3776", w = { "date-picker": J, "date-picker-box": K }, pe = Y.forwardRef(function({
+import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-picker-box_4da3776", w = { "date-picker": J, "date-picker-box": K }, he = Y.forwardRef(function({
   value: i,
   disabled: h,
   onChange: k,
@@ -23,7 +27,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   showTime: c = !1,
   min: g = null,
   max: b = null,
-  minVisibleTimeInMilliseconds: m,
+  minVisibleTimeInMilliseconds: l,
   maxVisibleTimeInMilliseconds: p,
   disabledDates: f,
   countryCode: D = "en-US",
@@ -52,14 +56,14 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   }, [e, b]), r(() => {
     f == null ? e.setDisabledDates([]) : e.setDisabledDates(f);
   }, [e, f]), r(() => {
-    typeof m == "number" && e.setMinVisibleTime(m);
-  }, [e, m]), r(() => {
+    typeof l == "number" && e.setMinVisibleTime(l);
+  }, [e, l]), r(() => {
     typeof p == "number" && e.setMaxVisibleTime(p);
   }, [e, p]), r(() => {
     typeof d == "number" && e.setTimeIntervalInMinutes(d);
   }, [e, d]), r(() => {
     e.selectDate(i);
-  }, [e, i]), /* @__PURE__ */ l(
+  }, [e, i]), /* @__PURE__ */ m(
     U,
     {
       ref: H,
@@ -68,7 +72,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
       className: R(w["date-picker"], "tcn-date-picker"),
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ m(
           u,
           {
             ref: j,
@@ -78,7 +82,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
             className: R(w["date-picker-box"], "tcn-date-picker-box"),
             "data-is-disabled": h,
             children: [
-              /* @__PURE__ */ l(u, { height: "auto", children: [
+              /* @__PURE__ */ m(u, { height: "auto", children: [
                 /* @__PURE__ */ n(q, { countryCode: D, presenter: e }),
                 /* @__PURE__ */ n($, { countryCode: D, presenter: e })
               ] }),
@@ -87,7 +91,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
             ]
           }
         ),
-        c && /* @__PURE__ */ l(T, { children: [
+        c && /* @__PURE__ */ m(T, { children: [
           /* @__PURE__ */ n(V, { width: "8px" }),
           /* @__PURE__ */ n(
             G,
@@ -111,6 +115,6 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   );
 });
 export {
-  pe as DatePicker
+  he as DatePicker
 };
 //# sourceMappingURL=date_picker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'tcn-date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":"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"}
+{"version":3,"file":"date_picker.js","sources":["../../../src/inputs/date_picker/date_picker.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { useResizeObserver } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { DatePickerBody } from './date_picker_body.js';\nimport { DatePickerHeader } from './date_picker_header.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerTimeSelector } from './date_picker_time_selector.js';\nimport styles from './date_picker.module.css';\n\nexport interface DatePickerProps {\n  value: Date | null;\n  disabled?: boolean;\n  onChange?: (value: Date | null) => void;\n  onError?: (error: string | null) => void;\n  showTime?: boolean;\n  min?: Date | null;\n  max?: Date | null;\n  minVisibleTimeInMilliseconds?: number;\n  maxVisibleTimeInMilliseconds?: number;\n  disabledDates?: Date[];\n  countryCode?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n  timeIntervalInMinutes?: number;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(\n  {\n    value,\n    disabled,\n    onChange,\n    onError,\n    showTime = false,\n    min: minDate = null,\n    max: maxDate = null,\n    minVisibleTimeInMilliseconds,\n    maxVisibleTimeInMilliseconds,\n    disabledDates,\n    countryCode = 'en-US',\n    renderActions,\n    onTimeSelected,\n    timeIntervalInMinutes,\n  }: DatePickerProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [calendarHeight, setCalendarHeight] = useState(0);\n  const isMountedRef = useRef(false);\n  const calendarRef = useResizeObserver((_, height) => {\n    setCalendarHeight(height);\n  });\n  const [presenter] = useState(() => {\n    const today = new Date();\n\n    const year = value == null ? today.getFullYear() : value.getFullYear();\n    const month = value == null ? today.getMonth() : value.getMonth();\n\n    return new DatePickerPresenter(value, year, month, showTime);\n  });\n\n  const state = useSignalValue(presenter.stateBroadcast);\n  const innerValue = useSignalValue(presenter.valueBroadcast);\n  const error = state.error;\n\n  useSignalValueEffect<string | null>(innerError => {\n    error !== innerError && onError && onError(innerError);\n  }, presenter.errorBroadcast);\n\n  useSignalValueEffect<Date | null>(value => {\n    if (isMountedRef.current) {\n      onChange && onChange(value);\n    } else {\n      isMountedRef.current = true;\n    }\n  }, presenter.valueBroadcast);\n\n  useLayoutEffect(() => {\n    presenter.initialize();\n  }, [presenter]);\n\n  useLayoutEffect(() => {\n    presenter.setShowTime(showTime);\n  }, [presenter, showTime]);\n\n  useLayoutEffect(() => {\n    presenter.setMinDate(minDate);\n  }, [presenter, minDate]);\n\n  useLayoutEffect(() => {\n    presenter.setMaxDate(maxDate);\n  }, [presenter, maxDate]);\n\n  useLayoutEffect(() => {\n    if (disabledDates == null) {\n      presenter.setDisabledDates([]);\n    } else {\n      presenter.setDisabledDates(disabledDates);\n    }\n  }, [presenter, disabledDates]);\n\n  useLayoutEffect(() => {\n    if (typeof minVisibleTimeInMilliseconds === 'number') {\n      presenter.setMinVisibleTime(minVisibleTimeInMilliseconds);\n    }\n  }, [presenter, minVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof maxVisibleTimeInMilliseconds === 'number') {\n      presenter.setMaxVisibleTime(maxVisibleTimeInMilliseconds);\n    }\n  }, [presenter, maxVisibleTimeInMilliseconds]);\n\n  useLayoutEffect(() => {\n    if (typeof timeIntervalInMinutes === 'number') {\n      presenter.setTimeIntervalInMinutes(timeIntervalInMinutes);\n    }\n  }, [presenter, timeIntervalInMinutes]);\n\n  useLayoutEffect(() => {\n    presenter.selectDate(value);\n  }, [presenter, value]);\n\n  return (\n    <HStack\n      ref={ref}\n      width=\"auto\"\n      height=\"auto\"\n      className={clsx(styles['date-picker'], 'tcn-date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={clsx(styles['date-picker-box'], 'tcn-date-picker-box')}\n        data-is-disabled={disabled}\n      >\n        <VStack height=\"auto\">\n          <DatePickerHeader countryCode={countryCode} presenter={presenter} />\n          <DatePickerBody countryCode={countryCode} presenter={presenter} />\n        </VStack>\n        {renderActions && <VStack paddingInline=\"8px\">{renderActions(presenter)}</VStack>}\n        <Spacer height=\"8px\" />\n      </VStack>\n      {showTime && (\n        <>\n          <Spacer width=\"8px\" />\n          <DatePickerTimeSelector\n            height={`${calendarHeight}px`}\n            origin={innerValue}\n            max={state.max}\n            min={state.min}\n            minVisibleTimeInMilliseconds={state.minVisibleTimeInMilliseconds}\n            maxVisibleTimeInMilliseconds={state.maxVisibleTimeInMilliseconds}\n            intervalInMinutes={state.timeIntervalInMinutes}\n            disabled={disabled}\n            onSelect={(hour, minutes, seconds) => {\n              presenter.setTime(hour, minutes, seconds);\n              onTimeSelected && onTimeSelected(hour, minutes, seconds);\n            }}\n          />\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["DatePicker","React","value","disabled","onChange","onError","showTime","minDate","maxDate","minVisibleTimeInMilliseconds","maxVisibleTimeInMilliseconds","disabledDates","countryCode","renderActions","onTimeSelected","timeIntervalInMinutes","ref","calendarHeight","setCalendarHeight","useState","isMountedRef","useRef","calendarRef","useResizeObserver","_","height","presenter","today","year","month","DatePickerPresenter","state","useSignalValue","innerValue","error","useSignalValueEffect","innerError","useLayoutEffect","jsxs","HStack","clsx","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":";;;;;;;;;;;;;;;;;;;;;kHA8BaA,KAAaC,EAAM,WAAW,SACzC;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,KAAKC,IAAU;AAAA,EACf,KAAKC,IAAU;AAAA,EACf,8BAAAC;AAAA,EACA,8BAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,uBAAAC;AACF,GACAC,GACA;AACA,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,CAAC,GAChDC,IAAeC,EAAO,EAAK,GAC3BC,IAAcC,EAAkB,CAACC,GAAGC,MAAW;AACnD,IAAAP,EAAkBO,CAAM;AAAA,EAC1B,CAAC,GACK,CAACC,CAAS,IAAIP,EAAS,MAAM;AACjC,UAAMQ,wBAAY,KAAA,GAEZC,IAAO1B,KAAS,OAAOyB,EAAM,YAAA,IAAgBzB,EAAM,YAAA,GACnD2B,IAAQ3B,KAAS,OAAOyB,EAAM,SAAA,IAAazB,EAAM,SAAA;AAEvD,WAAO,IAAI4B,EAAoB5B,GAAO0B,GAAMC,GAAOvB,CAAQ;AAAA,EAC7D,CAAC,GAEKyB,IAAQC,EAAeN,EAAU,cAAc,GAC/CO,IAAaD,EAAeN,EAAU,cAAc,GACpDQ,IAAQH,EAAM;AAEpB,SAAAI,EAAoC,CAAAC,MAAc;AAChD,IAAAF,MAAUE,KAAc/B,KAAWA,EAAQ+B,CAAU;AAAA,EACvD,GAAGV,EAAU,cAAc,GAE3BS,EAAkC,CAAAjC,MAAS;AACzC,IAAIkB,EAAa,UACfhB,KAAYA,EAASF,CAAK,IAE1BkB,EAAa,UAAU;AAAA,EAE3B,GAAGM,EAAU,cAAc,GAE3BW,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAA;AAAA,EACZ,GAAG,CAACA,CAAS,CAAC,GAEdW,EAAgB,MAAM;AACpB,IAAAX,EAAU,YAAYpB,CAAQ;AAAA,EAChC,GAAG,CAACoB,GAAWpB,CAAQ,CAAC,GAExB+B,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWnB,CAAO;AAAA,EAC9B,GAAG,CAACmB,GAAWnB,CAAO,CAAC,GAEvB8B,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWlB,CAAO;AAAA,EAC9B,GAAG,CAACkB,GAAWlB,CAAO,CAAC,GAEvB6B,EAAgB,MAAM;AACpB,IAAI1B,KAAiB,OACnBe,EAAU,iBAAiB,EAAE,IAE7BA,EAAU,iBAAiBf,CAAa;AAAA,EAE5C,GAAG,CAACe,GAAWf,CAAa,CAAC,GAE7B0B,EAAgB,MAAM;AACpB,IAAI,OAAO5B,KAAiC,YAC1CiB,EAAU,kBAAkBjB,CAA4B;AAAA,EAE5D,GAAG,CAACiB,GAAWjB,CAA4B,CAAC,GAE5C4B,EAAgB,MAAM;AACpB,IAAI,OAAO3B,KAAiC,YAC1CgB,EAAU,kBAAkBhB,CAA4B;AAAA,EAE5D,GAAG,CAACgB,GAAWhB,CAA4B,CAAC,GAE5C2B,EAAgB,MAAM;AACpB,IAAI,OAAOtB,KAA0B,YACnCW,EAAU,yBAAyBX,CAAqB;AAAA,EAE5D,GAAG,CAACW,GAAWX,CAAqB,CAAC,GAErCsB,EAAgB,MAAM;AACpB,IAAAX,EAAU,WAAWxB,CAAK;AAAA,EAC5B,GAAG,CAACwB,GAAWxB,CAAK,CAAC,GAGnB,gBAAAoC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAvB;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,WAAWwB,EAAKC,EAAO,aAAa,GAAG,iBAAiB;AAAA,MACxD,UAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,KAAKpB;AAAA,YACL,QAAM;AAAA,YACN,QAAO;AAAA,YACP,OAAM;AAAA,YACN,WAAWkB,EAAKC,EAAO,iBAAiB,GAAG,qBAAqB;AAAA,YAChE,oBAAkBtC;AAAA,YAElB,UAAA;AAAA,cAAA,gBAAAmC,EAACI,GAAA,EAAO,QAAO,QACb,UAAA;AAAA,gBAAA,gBAAAC,EAACC,GAAA,EAAiB,aAAAhC,GAA0B,WAAAc,EAAA,CAAsB;AAAA,gBAClE,gBAAAiB,EAACE,GAAA,EAAe,aAAAjC,GAA0B,WAAAc,EAAA,CAAsB;AAAA,cAAA,GAClE;AAAA,cACCb,KAAiB,gBAAA8B,EAACD,GAAA,EAAO,eAAc,OAAO,UAAA7B,EAAca,CAAS,GAAE;AAAA,cACxE,gBAAAiB,EAACG,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEtBxC,KACC,gBAAAgC,EAAAS,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAJ,EAACG,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,UACpB,gBAAAH;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,QAAQ,GAAG/B,CAAc;AAAA,cACzB,QAAQgB;AAAA,cACR,KAAKF,EAAM;AAAA,cACX,KAAKA,EAAM;AAAA,cACX,8BAA8BA,EAAM;AAAA,cACpC,8BAA8BA,EAAM;AAAA,cACpC,mBAAmBA,EAAM;AAAA,cACzB,UAAA5B;AAAA,cACA,UAAU,CAAC8C,GAAMC,GAASC,MAAY;AACpC,gBAAAzB,EAAU,QAAQuB,GAAMC,GAASC,CAAO,GACxCrC,KAAkBA,EAAemC,GAAMC,GAASC,CAAO;AAAA,cACzD;AAAA,YAAA;AAAA,UAAA;AAAA,QACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/inputs/date_picker/date_picker_header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_header.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAuBjE,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CA+DjF"}
+{"version":3,"file":"date_picker_header.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAuBjE,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CAiEjF"}

package/dist/inputs/date_picker/date_picker_header.js

@@ -5,30 +5,29 @@ import { Spacer as h } from "../../stacks/spacer.js";
 import { useRef as M, useMemo as b } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as m } from "../../actions/button/slim_button/slim_button.js";
-import "../../actions/button/button/button.js";
+import { Button as m } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { getMonthsOfYear as u } from "../../utils/calendar/get_months_of_year.js";
 import { Select as k } from "../select/select.js";
-import { ChevronLeftIcon as S } from "@tcn/icons/chevron_left_icon.js";
-import { ChevronRightIcon as x } from "@tcn/icons/chevron_right_icon.js";
-import { Option as y } from "../options/option.js";
+import { ChevronLeftIcon as y } from "@tcn/icons/chevron_left_icon.js";
+import { ChevronRightIcon as S } from "@tcn/icons/chevron_right_icon.js";
+import { Option as x } from "../options/option.js";
 import { clsx as O } from "clsx";
 import { DatePickerYearInput as B } from "./date_picker_year_input.js";
 import '../../date_picker_header.css';const N = "_date-picker-header_696681a", R = { "date-picker-header": N };
 function V(t) {
   const o = u(t, "short"), i = u(t, "long");
-  return o.map((n, r) => /* @__PURE__ */ e(y, { value: String(r), label: n, keywords: [n], children: i[r] }, r));
+  return o.map((n, r) => /* @__PURE__ */ e(x, { value: String(r), label: n, keywords: [n], children: i[r] }, r));
 }
-function G({ presenter: t, countryCode: o }) {
+function F({ presenter: t, countryCode: o }) {
   const i = g(t.stateBroadcast), n = M(null);
   function r(a) {
     t.setVisibleMonth(Number(a));
   }
-  function p() {
+  function d() {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth - 1);
   }
-  function d() {
+  function p() {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth + 1);
   }
   const f = b(() => V(o), [o]);
@@ -45,10 +44,11 @@ function G({ presenter: t, countryCode: o }) {
         /* @__PURE__ */ e(
           m,
           {
+            utility: !0,
             disabled: !i.canNavigateToPreviousMonth,
             hierarchy: "tertiary",
-            onClick: p,
-            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
+            onClick: d,
+            children: /* @__PURE__ */ e(y, { flipOnRtl: !0, size: "md" })
           }
         ),
         /* @__PURE__ */ e(h, {}),
@@ -70,10 +70,11 @@ function G({ presenter: t, countryCode: o }) {
         /* @__PURE__ */ e(
           m,
           {
+            utility: !0,
             disabled: !i.canNavigateToNextMonth,
             hierarchy: "tertiary",
-            onClick: d,
-            children: /* @__PURE__ */ e(x, { flipOnRtl: !0, size: "md" })
+            onClick: p,
+            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
           }
         )
       ]
@@ -81,6 +82,6 @@ function G({ presenter: t, countryCode: o }) {
   );
 }
 export {
-  G as DatePickerHeader
+  F as DatePickerHeader
 };
 //# sourceMappingURL=date_picker_header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_header.js","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport React, { useMemo, useRef } from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { Select } from '../select/select.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { DatePickerState } from './date_picker_presenter.js';\nimport styles from './date_picker_header.module.css';\nimport { clsx } from 'clsx';\nimport { DatePickerYearInput } from './date_picker_year_input.js';\n\nfunction makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {\n  const shortMonths = getMonthsOfYear(countryCode, 'short');\n  const longMonths = getMonthsOfYear(countryCode, 'long');\n\n  return shortMonths.map((m, index) => {\n    return (\n      <Option key={index} value={String(index)} label={m} keywords={[m]}>\n        {longMonths[index]}\n      </Option>\n    );\n  });\n}\n\nexport interface DatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const yearInputRef = useRef<HTMLInputElement>(null);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth - 1);\n  }\n\n  function next() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth + 1);\n  }\n\n  const monthsOptions = useMemo(() => {\n    return makeMonthsOptions(countryCode);\n  }, [countryCode]);\n\n  useSignalValueEffect((state: DatePickerState) => {\n    const input = yearInputRef.current;\n    if (input && input.value !== String(state.visibleYear)) {\n      input.value = String(state.visibleYear);\n    }\n  }, presenter.stateBroadcast);\n\n  return (\n    <HStack\n      className={clsx(styles['date-picker-header'], 'tcn-date-picker-header')}\n      minWidth=\"35px\"\n      width=\"100%\"\n    >\n      <SlimButton\n        disabled={!state.canNavigateToPreviousMonth}\n        hierarchy=\"tertiary\"\n        onClick={previous}\n      >\n        <ChevronLeftIcon flipOnRtl size=\"md\" />\n      </SlimButton>\n      <Spacer />\n      <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n        <Select\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          maxWidth=\"150px\"\n          value={String(state.visibleMonth)}\n          onChange={selectMonth}\n        >\n          {monthsOptions}\n        </Select>\n        <DatePickerYearInput presenter={presenter} />\n      </HStack>\n      <Spacer />\n      <SlimButton\n        disabled={!state.canNavigateToNextMonth}\n        hierarchy=\"tertiary\"\n        onClick={next}\n      >\n        <ChevronRightIcon flipOnRtl size=\"md\" />\n      </SlimButton>\n    </HStack>\n  );\n}\n"],"names":["makeMonthsOptions","countryCode","shortMonths","getMonthsOfYear","longMonths","m","index","jsx","Option","DatePickerHeader","presenter","state","useSignalValue","yearInputRef","useRef","selectMonth","value","previous","next","monthsOptions","useMemo","useSignalValueEffect","input","jsxs","HStack","clsx","styles","SlimButton","ChevronLeftIcon","Spacer","Select","DatePickerYearInput","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,SAASA,EAAkBC,GAAwD;AACjF,QAAMC,IAAcC,EAAgBF,GAAa,OAAO,GAClDG,IAAaD,EAAgBF,GAAa,MAAM;AAEtD,SAAOC,EAAY,IAAI,CAACG,GAAGC,MAEvB,gBAAAC,EAACC,GAAA,EAAmB,OAAO,OAAOF,CAAK,GAAG,OAAOD,GAAG,UAAU,CAACA,CAAC,GAC7D,UAAAD,EAAWE,CAAK,KADNA,CAEb,CAEH;AACH;AAOO,SAASG,EAAiB,EAAE,WAAAC,GAAW,aAAAT,KAAsC;AAClF,QAAMU,IAAQC,EAAeF,EAAU,cAAc,GAC/CG,IAAeC,EAAyB,IAAI;AAElD,WAASC,EAAYC,GAAe;AAClC,IAAAN,EAAU,gBAAgB,OAAOM,CAAK,CAAC;AAAA,EACzC;AAEA,WAASC,IAAW;AAClB,WAAOP,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,WAASQ,IAAO;AACd,WAAOR,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,QAAMS,IAAgBC,EAAQ,MACrBpB,EAAkBC,CAAW,GACnC,CAACA,CAAW,CAAC;AAEhB,SAAAoB,EAAqB,CAACV,MAA2B;AAC/C,UAAMW,IAAQT,EAAa;AAC3B,IAAIS,KAASA,EAAM,UAAU,OAAOX,EAAM,WAAW,MACnDW,EAAM,QAAQ,OAAOX,EAAM,WAAW;AAAA,EAE1C,GAAGD,EAAU,cAAc,GAGzB,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,UAAS;AAAA,MACT,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAnB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASM;AAAA,YAET,UAAA,gBAAAV,EAACqB,GAAA,EAAgB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEtCC,GAAA,EAAO;AAAA,0BACPL,GAAA,EAAO,QAAO,UAAS,KAAI,OAAM,OAAM,QACtC,UAAA;AAAA,UAAA,gBAAAjB;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,UAAS;AAAA,cACT,OAAO,OAAOnB,EAAM,YAAY;AAAA,cAChC,UAAUI;AAAA,cAET,UAAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAZ,EAACwB,KAAoB,WAAArB,EAAA,CAAsB;AAAA,QAAA,GAC7C;AAAA,0BACCmB,GAAA,EAAO;AAAA,QACR,gBAAAtB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASO;AAAA,YAET,UAAA,gBAAAX,EAACyB,GAAA,EAAiB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"date_picker_header.js","sources":["../../../src/inputs/date_picker/date_picker_header.tsx"],"sourcesContent":["import { useSignalValue, useSignalValueEffect } from '@tcn/state';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport React, { useMemo, useRef } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { getMonthsOfYear } from '../../utils/calendar/get_months_of_year.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { Select } from '../select/select.js';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { DatePickerState } from './date_picker_presenter.js';\nimport styles from './date_picker_header.module.css';\nimport { clsx } from 'clsx';\nimport { DatePickerYearInput } from './date_picker_year_input.js';\n\nfunction makeMonthsOptions(countryCode: string): React.ReactElement<OptionProps>[] {\n  const shortMonths = getMonthsOfYear(countryCode, 'short');\n  const longMonths = getMonthsOfYear(countryCode, 'long');\n\n  return shortMonths.map((m, index) => {\n    return (\n      <Option key={index} value={String(index)} label={m} keywords={[m]}>\n        {longMonths[index]}\n      </Option>\n    );\n  });\n}\n\nexport interface DatePickerHeaderProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps) {\n  const state = useSignalValue(presenter.stateBroadcast);\n  const yearInputRef = useRef<HTMLInputElement>(null);\n\n  function selectMonth(value: string) {\n    presenter.setVisibleMonth(Number(value));\n  }\n\n  function previous() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth - 1);\n  }\n\n  function next() {\n    return presenter.setVisibleMonth(presenter.stateBroadcast.get().visibleMonth + 1);\n  }\n\n  const monthsOptions = useMemo(() => {\n    return makeMonthsOptions(countryCode);\n  }, [countryCode]);\n\n  useSignalValueEffect((state: DatePickerState) => {\n    const input = yearInputRef.current;\n    if (input && input.value !== String(state.visibleYear)) {\n      input.value = String(state.visibleYear);\n    }\n  }, presenter.stateBroadcast);\n\n  return (\n    <HStack\n      className={clsx(styles['date-picker-header'], 'tcn-date-picker-header')}\n      minWidth=\"35px\"\n      width=\"100%\"\n    >\n      <Button\n        utility\n        disabled={!state.canNavigateToPreviousMonth}\n        hierarchy=\"tertiary\"\n        onClick={previous}\n      >\n        <ChevronLeftIcon flipOnRtl size=\"md\" />\n      </Button>\n      <Spacer />\n      <HStack hAlign=\"center\" gap=\"4px\" width=\"auto\">\n        <Select\n          hierarchy=\"tertiary\"\n          width=\"auto\"\n          maxWidth=\"150px\"\n          value={String(state.visibleMonth)}\n          onChange={selectMonth}\n        >\n          {monthsOptions}\n        </Select>\n        <DatePickerYearInput presenter={presenter} />\n      </HStack>\n      <Spacer />\n      <Button\n        utility\n        disabled={!state.canNavigateToNextMonth}\n        hierarchy=\"tertiary\"\n        onClick={next}\n      >\n        <ChevronRightIcon flipOnRtl size=\"md\" />\n      </Button>\n    </HStack>\n  );\n}\n"],"names":["makeMonthsOptions","countryCode","shortMonths","getMonthsOfYear","longMonths","m","index","jsx","Option","DatePickerHeader","presenter","state","useSignalValue","yearInputRef","useRef","selectMonth","value","previous","next","monthsOptions","useMemo","useSignalValueEffect","input","jsxs","HStack","clsx","styles","Button","ChevronLeftIcon","Spacer","Select","DatePickerYearInput","ChevronRightIcon"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAASA,EAAkBC,GAAwD;AACjF,QAAMC,IAAcC,EAAgBF,GAAa,OAAO,GAClDG,IAAaD,EAAgBF,GAAa,MAAM;AAEtD,SAAOC,EAAY,IAAI,CAACG,GAAGC,MAEvB,gBAAAC,EAACC,GAAA,EAAmB,OAAO,OAAOF,CAAK,GAAG,OAAOD,GAAG,UAAU,CAACA,CAAC,GAC7D,UAAAD,EAAWE,CAAK,KADNA,CAEb,CAEH;AACH;AAOO,SAASG,EAAiB,EAAE,WAAAC,GAAW,aAAAT,KAAsC;AAClF,QAAMU,IAAQC,EAAeF,EAAU,cAAc,GAC/CG,IAAeC,EAAyB,IAAI;AAElD,WAASC,EAAYC,GAAe;AAClC,IAAAN,EAAU,gBAAgB,OAAOM,CAAK,CAAC;AAAA,EACzC;AAEA,WAASC,IAAW;AAClB,WAAOP,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,WAASQ,IAAO;AACd,WAAOR,EAAU,gBAAgBA,EAAU,eAAe,IAAA,EAAM,eAAe,CAAC;AAAA,EAClF;AAEA,QAAMS,IAAgBC,EAAQ,MACrBpB,EAAkBC,CAAW,GACnC,CAACA,CAAW,CAAC;AAEhB,SAAAoB,EAAqB,CAACV,MAA2B;AAC/C,UAAMW,IAAQT,EAAa;AAC3B,IAAIS,KAASA,EAAM,UAAU,OAAOX,EAAM,WAAW,MACnDW,EAAM,QAAQ,OAAOX,EAAM,WAAW;AAAA,EAE1C,GAAGD,EAAU,cAAc,GAGzB,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,oBAAoB,GAAG,wBAAwB;AAAA,MACtE,UAAS;AAAA,MACT,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAnB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASM;AAAA,YAET,UAAA,gBAAAV,EAACqB,GAAA,EAAgB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEtCC,GAAA,EAAO;AAAA,0BACPL,GAAA,EAAO,QAAO,UAAS,KAAI,OAAM,OAAM,QACtC,UAAA;AAAA,UAAA,gBAAAjB;AAAA,YAACuB;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cACN,UAAS;AAAA,cACT,OAAO,OAAOnB,EAAM,YAAY;AAAA,cAChC,UAAUI;AAAA,cAET,UAAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAZ,EAACwB,KAAoB,WAAArB,EAAA,CAAsB;AAAA,QAAA,GAC7C;AAAA,0BACCmB,GAAA,EAAO;AAAA,QACR,gBAAAtB;AAAA,UAACoB;AAAA,UAAA;AAAA,YACC,SAAO;AAAA,YACP,UAAU,CAAChB,EAAM;AAAA,YACjB,WAAU;AAAA,YACV,SAASO;AAAA,YAET,UAAA,gBAAAX,EAACyB,GAAA,EAAiB,WAAS,IAAC,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/inputs/date_picker/date_picker_input.js

@@ -1,21 +1,24 @@
-import { jsxs as u, Fragment as q, jsx as r } from "react/jsx-runtime";
+import { jsxs as m, Fragment as q, jsx as r } from "react/jsx-runtime";
 import B, { useState as L, useRef as M, useCallback as V, useMemo as W, useLayoutEffect as Z } from "react";
 import { ZStack as G } from "../../stacks/z_stack.js";
 import { Popper as H } from "../../overlay/popper/legacy/popper.js";
-import { clsx as m } from "clsx";
+import { clsx as u } from "clsx";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as J } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { DatePicker as Q } from "./date_picker.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 "../../draggable.module-BgelQsuJ.js";
-import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_708f951", f = { button: U, popover: X }, kt = B.forwardRef(
+import "../../utils/hooks/labelled_by_context.js";
+import "../../utils/decorators/draggable/context.js";
+import "../../draggable.module-DFYR5n3n.js";
+import "../../utils/decorators/resizable/context.js";
+import "../../resizable.module-ur5FBfxo.js";
+import "../../utils/decorators/resizable/resize_handle.js";
+import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_708f951", f = { button: U, popover: X }, Dt = B.forwardRef(
   ({
     value: c = /* @__PURE__ */ new Date(),
     onChange: d,
@@ -26,7 +29,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     width: y = "100%",
     maxWidth: D,
     minWidth: Y,
-    showTime: n = !1,
+    showTime: o = !1,
     timeIntervalInMinutes: x = 15,
     hierarchy: A = "secondary",
     disabledDates: E,
@@ -36,14 +39,14 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     onTimeSelected: w,
     ..._
   }, b) => {
-    const [o, a] = L(null), v = o != null, i = M(null), p = V((t) => t.closest(".tcn-suggestion-list") != null, []), C = W(() => {
+    const [n, a] = L(null), v = n != null, i = M(null), p = V((t) => t.closest(".tcn-suggestion-list") != null, []), C = W(() => {
       const t = {
         year: "numeric",
         month: "short",
         day: "numeric"
       };
-      return n && (t.hour = "numeric", t.minute = "2-digit", t.hour12 = !0), new Intl.DateTimeFormat(s, t);
-    }, [s, n]), F = c != null ? C.format(c) : R;
+      return o && (t.hour = "numeric", t.minute = "2-digit", t.hour12 = !0), new Intl.DateTimeFormat(s, t);
+    }, [s, o]), F = c != null ? C.format(c) : R;
     function P(t) {
       a(t.currentTarget);
     }
@@ -52,9 +55,9 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     }
     Z(() => {
       requestAnimationFrame(() => {
-        o != null && i.current && i.current.focus();
+        n != null && i.current && i.current.focus();
       });
-    }, [o]);
+    }, [n]);
     function O(t) {
       t.key === "Escape" && e();
     }
@@ -63,17 +66,17 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
       t?.focus();
     }
     function N(t) {
-      d?.(t), !n && e();
+      d?.(t), !o && e();
     }
     function j(t, z, K) {
       w?.(t, z, K), e();
     }
-    return /* @__PURE__ */ u(q, { children: [
+    return /* @__PURE__ */ m(q, { children: [
       /* @__PURE__ */ r(
         J,
         {
           ref: b,
-          className: m(f.button, "tcn-entry", "tcn-date-picker-input"),
+          className: u(f.button, "tcn-entry", "tcn-date-picker-input"),
           hAlign: "start",
           disabled: l,
           hierarchy: A,
@@ -87,7 +90,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
       /* @__PURE__ */ r(
         H,
         {
-          anchorElement: o,
+          anchorElement: n,
           disableClickAway: !0,
           veil: !0,
           onVeilClick: e,
@@ -100,11 +103,11 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           isClickAwayException: p,
           isScrollAwayException: p,
           restoreFocus: !0,
-          children: /* @__PURE__ */ u(
+          children: /* @__PURE__ */ m(
             G,
             {
               padding: "8px",
-              className: m(f.popover, "tcn-date-picker-popover"),
+              className: u(f.popover, "tcn-date-picker-popover"),
               onKeyDown: O,
               children: [
                 /* @__PURE__ */ r(
@@ -115,7 +118,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
                     onChange: N,
                     min: k,
                     max: g,
-                    showTime: n,
+                    showTime: o,
                     onError: h,
                     disabled: l,
                     disabledDates: E,
@@ -135,6 +138,6 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
   }
 );
 export {
-  kt as DatePickerInput
+  Dt as DatePickerInput
 };
 //# sourceMappingURL=date_picker_input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_input.js","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Hierarchy } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { clsx } from 'clsx';\nimport { HTMLAttributes } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { DatePicker } from './date_picker.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { FocusRedirect } from '../../utils/index.js';\nimport styles from './date_picker_input.module.css';\n\nexport interface DatePickerInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: Date | null;\n  disabled?: boolean;\n  onChange?: (date: Date | null) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  showTime?: boolean;\n  timeIntervalInMinutes?: number;\n  disabledDates?: Date[] | undefined;\n  countryCode?: string;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n  min?: Date;\n  max?: Date;\n  hierarchy?: Hierarchy;\n  selectDateMessage?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n}\n\nexport const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(\n  (\n    {\n      value = new Date(),\n      onChange,\n      onError,\n      min = new Date('01/01/1924'),\n      max = new Date('01/01/2124'),\n      disabled,\n      width = '100%',\n      maxWidth,\n      minWidth,\n      showTime = false,\n      timeIntervalInMinutes = 15,\n      hierarchy = 'secondary',\n      disabledDates,\n      selectDateMessage = 'Select Date',\n      countryCode,\n      renderActions,\n      onTimeSelected,\n      ...props\n    }: DatePickerInputProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n    const isOpen = anchorElement != null;\n    const pickerRef = useRef<HTMLDivElement | null>(null);\n\n    const isException = useCallback((target: HTMLElement) => {\n      return target.closest('.tcn-suggestion-list') != null;\n    }, []);\n\n    const formatter = useMemo(() => {\n      const formatOptions: Intl.DateTimeFormatOptions = {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n      };\n\n      if (showTime) {\n        formatOptions.hour = 'numeric';\n        formatOptions.minute = '2-digit';\n        formatOptions.hour12 = true;\n      }\n\n      return new Intl.DateTimeFormat(countryCode, formatOptions);\n    }, [countryCode, showTime]);\n\n    const formattedDate = value != null ? formatter.format(value) : selectDateMessage;\n\n    function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n      setAnchorElement(e.currentTarget);\n    }\n\n    function closePicker() {\n      setAnchorElement(null);\n    }\n\n    useLayoutEffect(() => {\n      requestAnimationFrame(() => {\n        if (anchorElement != null) {\n          pickerRef.current && pickerRef.current.focus();\n        }\n      });\n    }, [anchorElement]);\n\n    function processKeyInput(event: React.KeyboardEvent) {\n      if (event.key === 'Escape') {\n        closePicker();\n      }\n    }\n\n    function handleRedirect() {\n      const picker = pickerRef.current;\n\n      if (picker != null) {\n        picker.focus();\n      }\n    }\n\n    function dateSelected(date: Date | null) {\n      onChange?.(date);\n      !showTime && closePicker();\n    }\n\n    function timeSelected(hour: number, minutes: number, seconds: number) {\n      onTimeSelected?.(hour, minutes, seconds);\n      closePicker();\n    }\n\n    return (\n      <>\n        <Button\n          ref={ref}\n          className={clsx(styles.button, 'tcn-entry', 'tcn-date-picker-input')}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </Button>\n        <Popper\n          anchorElement={anchorElement}\n          disableClickAway\n          veil\n          onVeilClick={closePicker}\n          onClose={closePicker}\n          verticalAnchor=\"bottom\"\n          horizontalAnchor=\"start\"\n          verticalOrigin=\"top\"\n          horizontalOrigin=\"start\"\n          open={isOpen}\n          isClickAwayException={isException}\n          isScrollAwayException={isException}\n          restoreFocus\n        >\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles.popover, 'tcn-date-picker-popover')}\n            onKeyDown={processKeyInput}\n          >\n            <DatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              showTime={showTime}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              onTimeSelected={timeSelected}\n              timeIntervalInMinutes={timeIntervalInMinutes}\n            />\n            <FocusRedirect onRedirect={handleRedirect} />\n          </ZStack>\n        </Popper>\n      </>\n    );\n  }\n);\n"],"names":["DatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","countryCode","renderActions","onTimeSelected","props","ref","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","isException","useCallback","target","formatter","useMemo","formatOptions","formattedDate","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","handleRedirect","picker","dateSelected","date","timeSelected","hour","minutes","seconds","jsxs","Fragment","jsx","Button","clsx","styles","Popper","ZStack","DatePicker","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"date_picker_input.js","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Hierarchy } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { clsx } from 'clsx';\nimport { HTMLAttributes } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { DatePicker } from './date_picker.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { FocusRedirect } from '../../utils/index.js';\nimport styles from './date_picker_input.module.css';\n\nexport interface DatePickerInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: Date | null;\n  disabled?: boolean;\n  onChange?: (date: Date | null) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  showTime?: boolean;\n  timeIntervalInMinutes?: number;\n  disabledDates?: Date[] | undefined;\n  countryCode?: string;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n  min?: Date;\n  max?: Date;\n  hierarchy?: Hierarchy;\n  selectDateMessage?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n}\n\nexport const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(\n  (\n    {\n      value = new Date(),\n      onChange,\n      onError,\n      min = new Date('01/01/1924'),\n      max = new Date('01/01/2124'),\n      disabled,\n      width = '100%',\n      maxWidth,\n      minWidth,\n      showTime = false,\n      timeIntervalInMinutes = 15,\n      hierarchy = 'secondary',\n      disabledDates,\n      selectDateMessage = 'Select Date',\n      countryCode,\n      renderActions,\n      onTimeSelected,\n      ...props\n    }: DatePickerInputProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n    const isOpen = anchorElement != null;\n    const pickerRef = useRef<HTMLDivElement | null>(null);\n\n    const isException = useCallback((target: HTMLElement) => {\n      return target.closest('.tcn-suggestion-list') != null;\n    }, []);\n\n    const formatter = useMemo(() => {\n      const formatOptions: Intl.DateTimeFormatOptions = {\n        year: 'numeric',\n        month: 'short',\n        day: 'numeric',\n      };\n\n      if (showTime) {\n        formatOptions.hour = 'numeric';\n        formatOptions.minute = '2-digit';\n        formatOptions.hour12 = true;\n      }\n\n      return new Intl.DateTimeFormat(countryCode, formatOptions);\n    }, [countryCode, showTime]);\n\n    const formattedDate = value != null ? formatter.format(value) : selectDateMessage;\n\n    function openPicker(e: React.MouseEvent<HTMLButtonElement>) {\n      setAnchorElement(e.currentTarget);\n    }\n\n    function closePicker() {\n      setAnchorElement(null);\n    }\n\n    useLayoutEffect(() => {\n      requestAnimationFrame(() => {\n        if (anchorElement != null) {\n          pickerRef.current && pickerRef.current.focus();\n        }\n      });\n    }, [anchorElement]);\n\n    function processKeyInput(event: React.KeyboardEvent) {\n      if (event.key === 'Escape') {\n        closePicker();\n      }\n    }\n\n    function handleRedirect() {\n      const picker = pickerRef.current;\n\n      if (picker != null) {\n        picker.focus();\n      }\n    }\n\n    function dateSelected(date: Date | null) {\n      onChange?.(date);\n      !showTime && closePicker();\n    }\n\n    function timeSelected(hour: number, minutes: number, seconds: number) {\n      onTimeSelected?.(hour, minutes, seconds);\n      closePicker();\n    }\n\n    return (\n      <>\n        <Button\n          ref={ref}\n          className={clsx(styles.button, 'tcn-entry', 'tcn-date-picker-input')}\n          hAlign=\"start\"\n          disabled={disabled}\n          hierarchy={hierarchy}\n          onClick={openPicker}\n          width={width}\n          maxWidth={maxWidth}\n          {...props}\n        >\n          <span className=\"ellipsis\">{formattedDate}</span>\n        </Button>\n        <Popper\n          anchorElement={anchorElement}\n          disableClickAway\n          veil\n          onVeilClick={closePicker}\n          onClose={closePicker}\n          verticalAnchor=\"bottom\"\n          horizontalAnchor=\"start\"\n          verticalOrigin=\"top\"\n          horizontalOrigin=\"start\"\n          open={isOpen}\n          isClickAwayException={isException}\n          isScrollAwayException={isException}\n          restoreFocus\n        >\n          <ZStack\n            padding=\"8px\"\n            className={clsx(styles.popover, 'tcn-date-picker-popover')}\n            onKeyDown={processKeyInput}\n          >\n            <DatePicker\n              ref={pickerRef}\n              value={value}\n              onChange={dateSelected}\n              min={min}\n              max={max}\n              showTime={showTime}\n              onError={onError}\n              disabled={disabled}\n              disabledDates={disabledDates}\n              countryCode={countryCode}\n              renderActions={renderActions}\n              onTimeSelected={timeSelected}\n              timeIntervalInMinutes={timeIntervalInMinutes}\n            />\n            <FocusRedirect onRedirect={handleRedirect} />\n          </ZStack>\n        </Popper>\n      </>\n    );\n  }\n);\n"],"names":["DatePickerInput","React","value","onChange","onError","min","max","disabled","width","maxWidth","minWidth","showTime","timeIntervalInMinutes","hierarchy","disabledDates","selectDateMessage","countryCode","renderActions","onTimeSelected","props","ref","anchorElement","setAnchorElement","useState","isOpen","pickerRef","useRef","isException","useCallback","target","formatter","useMemo","formatOptions","formattedDate","openPicker","e","closePicker","useLayoutEffect","processKeyInput","event","handleRedirect","picker","dateSelected","date","timeSelected","hour","minutes","seconds","jsxs","Fragment","jsx","Button","clsx","styles","Popper","ZStack","DatePicker","FocusRedirect"],"mappings":";;;;;;;;;;;;;;;;;;;;oFAiCaA,KAAkBC,EAAM;AAAA,EACnC,CACE;AAAA,IACE,OAAAC,wBAAY,KAAA;AAAA,IACZ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,KAAAC,IAAM,oBAAI,KAAK,YAAY;AAAA,IAC3B,KAAAC,IAAM,oBAAI,KAAK,YAAY;AAAA,IAC3B,UAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,uBAAAC,IAAwB;AAAA,IACxB,WAAAC,IAAY;AAAA,IACZ,eAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmC,IAAI,GAC3EC,IAASH,KAAiB,MAC1BI,IAAYC,EAA8B,IAAI,GAE9CC,IAAcC,EAAY,CAACC,MACxBA,EAAO,QAAQ,sBAAsB,KAAK,MAChD,CAAA,CAAE,GAECC,IAAYC,EAAQ,MAAM;AAC9B,YAAMC,IAA4C;AAAA,QAChD,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAGP,aAAIrB,MACFqB,EAAc,OAAO,WACrBA,EAAc,SAAS,WACvBA,EAAc,SAAS,KAGlB,IAAI,KAAK,eAAehB,GAAagB,CAAa;AAAA,IAC3D,GAAG,CAAChB,GAAaL,CAAQ,CAAC,GAEpBsB,IAAgB/B,KAAS,OAAO4B,EAAU,OAAO5B,CAAK,IAAIa;AAEhE,aAASmB,EAAWC,GAAwC;AAC1D,MAAAb,EAAiBa,EAAE,aAAa;AAAA,IAClC;AAEA,aAASC,IAAc;AACrB,MAAAd,EAAiB,IAAI;AAAA,IACvB;AAEA,IAAAe,EAAgB,MAAM;AACpB,4BAAsB,MAAM;AAC1B,QAAIhB,KAAiB,QACnBI,EAAU,WAAWA,EAAU,QAAQ,MAAA;AAAA,MAE3C,CAAC;AAAA,IACH,GAAG,CAACJ,CAAa,CAAC;AAElB,aAASiB,EAAgBC,GAA4B;AACnD,MAAIA,EAAM,QAAQ,YAChBH,EAAA;AAAA,IAEJ;AAEA,aAASI,IAAiB;AACxB,YAAMC,IAAShB,EAAU;AAEzB,MACEgB,GAAO,MAAA;AAAA,IAEX;AAEA,aAASC,EAAaC,GAAmB;AACvC,MAAAxC,IAAWwC,CAAI,GACf,CAAChC,KAAYyB,EAAA;AAAA,IACf;AAEA,aAASQ,EAAaC,GAAcC,GAAiBC,GAAiB;AACpE,MAAA7B,IAAiB2B,GAAMC,GAASC,CAAO,GACvCX,EAAA;AAAA,IACF;AAEA,WACE,gBAAAY,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAA/B;AAAA,UACA,WAAWgC,EAAKC,EAAO,QAAQ,aAAa,uBAAuB;AAAA,UACnE,QAAO;AAAA,UACP,UAAA9C;AAAA,UACA,WAAAM;AAAA,UACA,SAASqB;AAAA,UACT,OAAA1B;AAAA,UACA,UAAAC;AAAA,UACC,GAAGU;AAAA,UAEJ,UAAA,gBAAA+B,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAjB,EAAA,CAAc;AAAA,QAAA;AAAA,MAAA;AAAA,MAE5C,gBAAAiB;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,eAAAjC;AAAA,UACA,kBAAgB;AAAA,UAChB,MAAI;AAAA,UACJ,aAAae;AAAA,UACb,SAASA;AAAA,UACT,gBAAe;AAAA,UACf,kBAAiB;AAAA,UACjB,gBAAe;AAAA,UACf,kBAAiB;AAAA,UACjB,MAAMZ;AAAA,UACN,sBAAsBG;AAAA,UACtB,uBAAuBA;AAAA,UACvB,cAAY;AAAA,UAEZ,UAAA,gBAAAqB;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAWH,EAAKC,EAAO,SAAS,yBAAyB;AAAA,cACzD,WAAWf;AAAA,cAEX,UAAA;AAAA,gBAAA,gBAAAY;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACC,KAAK/B;AAAA,oBACL,OAAAvB;AAAA,oBACA,UAAUwC;AAAA,oBACV,KAAArC;AAAA,oBACA,KAAAC;AAAA,oBACA,UAAAK;AAAA,oBACA,SAAAP;AAAA,oBACA,UAAAG;AAAA,oBACA,eAAAO;AAAA,oBACA,aAAAE;AAAA,oBACA,eAAAC;AAAA,oBACA,gBAAgB2B;AAAA,oBAChB,uBAAAhC;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,gBAAAsC,EAACO,GAAA,EAAc,YAAYjB,EAAA,CAAgB;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAC7C;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;"}

package/dist/inputs/date_picker/date_picker_time_selector.js

@@ -4,7 +4,6 @@ import { ZStack as C } from "../../stacks/z_stack.js";
 import { clsx as n } from "clsx";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import "../../actions/button/slim_button/slim_button.js";
 import { Button as O } from "../../actions/button/button/button.js";
 import "../../actions/toggle/toggle.js";
 import { BodyText as $ } from "../../typography/body_text/body_text.js";
@@ -16,7 +15,7 @@ import "../../typography/subheadline/subheadline.js";
 import "../../typography/title/title.js";
 import { ClockIcon as j } from "@tcn/icons/clock_icon.js";
 import '../../date_picker_time_selector.css';const z = "_time-box_f3145be", P = "_time-box-title_6cc801b", Z = "_time-box-title-container_22add52", v = "_selected-time_33e3aa3", s = { "time-box": z, "time-box-title": P, "time-box-title-container": Z, "selected-time": v };
-function ot({
+function et({
   origin: e,
   intervalInMinutes: f,
   max: b,
@@ -84,6 +83,6 @@ function ot({
   );
 }
 export {
-  ot as DatePickerTimeSelector
+  et as DatePickerTimeSelector
 };
 //# sourceMappingURL=date_picker_time_selector.js.map