@tcn/ui 0.0.3 → 0.0.4

package/dist/inputs/date_picker/date_picker_date.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { jsx as n, jsxs as w } from "react/jsx-runtime";
 import { useSignalValue as u } from "@tcn/state";
 import { BodyText as b } from "../../typography/body_text/body_text.js";
-import f from "classnames";
+import { clsx as f } from "clsx";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
@@ -13,27 +13,27 @@ import '../../date_picker_date.css';const B = "_date-picker-date_38d540e", _ = "
 function C({ presenter: i, date: t }) {
   const {
     visibleMonth: S,
-    disabledDates: T,
-    min: m,
-    max: d
+    disabledDates: x,
+    min: d,
+    max: m
   } = u(i.stateBroadcast), o = u(i.valueBroadcast);
   let r = -1 / 0, c = 1 / 0;
-  if (m != null) {
-    let e = new Date(m);
-    e.setHours(0, 0, 0, 0), r = e.getTime();
-  }
   if (d != null) {
     let e = new Date(d);
+    e.setHours(0, 0, 0, 0), r = e.getTime();
+  }
+  if (m != null) {
+    let e = new Date(m);
     e.setHours(23, 59, 59, 999), c = e.getTime();
   }
   const s = /* @__PURE__ */ new Date(), g = new Date(
     t.year,
     t.month,
     t.date
-  ).getTime(), l = S === t.month, a = o?.getMonth() === t.month && o.getFullYear() === t.year && o.getDate() === t.date, h = T.some(
+  ).getTime(), l = S === t.month, a = o?.getMonth() === t.month && o.getFullYear() === t.year && o.getDate() === t.date, h = x.some(
     (e) => e.getMonth() === t.month && e.getFullYear() === t.year && e.getDate() === t.date
   ), p = g >= r && g < c, y = s.getMonth() === t.month && s.getFullYear() === t.year && s.getDate() === t.date;
-  function w() {
+  function T() {
     const e = new Date(t.year, t.month, t.date);
     if (a && i.stateBroadcast.get().showTime) {
       i.clear();
@@ -46,13 +46,13 @@ function C({ presenter: i, date: t }) {
     {
       disabled: !l || h || !p,
       className: f(k["date-picker-date"], "date-picker-date"),
-      onClick: w,
+      onClick: T,
       "data-is-within-month": String(l),
       "data-is-selected": String(a),
       "data-is-disabled": String(h),
       "data-is-within-range": String(p),
       "data-is-today": String(y),
-      children: /* @__PURE__ */ x(M, { height: "100%", children: [
+      children: /* @__PURE__ */ w(M, { height: "100%", children: [
         /* @__PURE__ */ n(b, { children: String(t.date) }),
         y && /* @__PURE__ */ n(
           "div",

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_date.js","sources":["../../../src/inputs/date_picker/date_picker_date.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { BodyText } from '../../typography/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport type { CalendarDate } from '../../utils/calendar/calendar_date.js';\nimport type { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_date.module.css';\nimport classNames from 'classnames';\n\nexport interface DatePickerDateProps {\n  date: CalendarDate;\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerDate({ presenter, date: calendarDate }: DatePickerDateProps) {\n  const {\n    visibleMonth,\n    disabledDates,\n    min: minDate,\n    max: maxDate,\n  } = useSignalValue(presenter.stateBroadcast);\n  const selectedDate = useSignalValue(presenter.valueBroadcast);\n\n  let minTime = -Infinity;\n  let maxTime = Infinity;\n\n  if (minDate != null) {\n    let normalizedMinDate = new Date(minDate);\n    normalizedMinDate.setHours(0, 0, 0, 0);\n    minTime = normalizedMinDate.getTime();\n  }\n\n  if (maxDate != null) {\n    let normalizedMaxDate = new Date(maxDate);\n    normalizedMaxDate.setHours(23, 59, 59, 999);\n    maxTime = normalizedMaxDate.getTime();\n  }\n\n  const date = new Date();\n\n  const time = new Date(\n    calendarDate.year,\n    calendarDate.month,\n    calendarDate.date\n  ).getTime();\n\n  const isWithinMonth = visibleMonth === calendarDate.month;\n\n  const isSelected =\n    selectedDate?.getMonth() === calendarDate.month &&\n    selectedDate.getFullYear() === calendarDate.year &&\n    selectedDate.getDate() === calendarDate.date;\n\n  const isDisabled = disabledDates.some(\n    d =>\n      d.getMonth() === calendarDate.month &&\n      d.getFullYear() === calendarDate.year &&\n      d.getDate() === calendarDate.date\n  );\n\n  const isWithinRange = time >= minTime && time < maxTime;\n  const isToday =\n    date.getMonth() === calendarDate.month &&\n    date.getFullYear() === calendarDate.year &&\n    date.getDate() === calendarDate.date;\n\n  function select() {\n    const date = new Date(calendarDate.year, calendarDate.month, calendarDate.date);\n\n    if (isSelected && presenter.stateBroadcast.get().showTime) {\n      presenter.clear();\n      return;\n    }\n\n    presenter.selectDate(date);\n  }\n\n  return (\n    <button\n      disabled={!isWithinMonth || isDisabled || !isWithinRange}\n      className={classNames(styles['date-picker-date'], 'date-picker-date')}\n      onClick={select}\n      data-is-within-month={String(isWithinMonth)}\n      data-is-selected={String(isSelected)}\n      data-is-disabled={String(isDisabled)}\n      data-is-within-range={String(isWithinRange)}\n      data-is-today={String(isToday)}\n    >\n      <ZStack height=\"100%\">\n        <BodyText>{String(calendarDate.date)}</BodyText>\n        {isToday && (\n          <div\n            className={classNames(styles['date-picker-today'], 'date-picker-today')}\n            data-is-selected={String(isSelected)}\n          ></div>\n        )}\n      </ZStack>\n    </button>\n  );\n}\n"],"names":["DatePickerDate","presenter","calendarDate","visibleMonth","disabledDates","minDate","maxDate","useSignalValue","selectedDate","minTime","maxTime","normalizedMinDate","normalizedMaxDate","date","time","isWithinMonth","isSelected","isDisabled","d","isWithinRange","isToday","select","jsx","classNames","styles","jsxs","ZStack","BodyText"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAe,EAAE,WAAAC,GAAW,MAAMC,KAAqC;AACrF,QAAM;AAAA,IACJ,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,KAAKC;AAAA,IACL,KAAKC;AAAA,EAAA,IACHC,EAAeN,EAAU,cAAc,GACrCO,IAAeD,EAAeN,EAAU,cAAc;AAE5D,MAAIQ,IAAU,QACVC,IAAU;AAEd,MAAIL,KAAW,MAAM;AACnB,QAAIM,IAAoB,IAAI,KAAKN,CAAO;AACxC,IAAAM,EAAkB,SAAS,GAAG,GAAG,GAAG,CAAC,GACrCF,IAAUE,EAAkB,QAAA;AAAA,EAC9B;AAEA,MAAIL,KAAW,MAAM;AACnB,QAAIM,IAAoB,IAAI,KAAKN,CAAO;AACxC,IAAAM,EAAkB,SAAS,IAAI,IAAI,IAAI,GAAG,GAC1CF,IAAUE,EAAkB,QAAA;AAAA,EAC9B;AAEA,QAAMC,wBAAW,KAAA,GAEXC,IAAO,IAAI;AAAA,IACfZ,EAAa;AAAA,IACbA,EAAa;AAAA,IACbA,EAAa;AAAA,EAAA,EACb,QAAA,GAEIa,IAAgBZ,MAAiBD,EAAa,OAE9Cc,IACJR,GAAc,SAAA,MAAeN,EAAa,SAC1CM,EAAa,YAAA,MAAkBN,EAAa,QAC5CM,EAAa,QAAA,MAAcN,EAAa,MAEpCe,IAAab,EAAc;AAAA,IAC/B,CAAAc,MACEA,EAAE,SAAA,MAAehB,EAAa,SAC9BgB,EAAE,YAAA,MAAkBhB,EAAa,QACjCgB,EAAE,QAAA,MAAchB,EAAa;AAAA,EAAA,GAG3BiB,IAAgBL,KAAQL,KAAWK,IAAOJ,GAC1CU,IACJP,EAAK,SAAA,MAAeX,EAAa,SACjCW,EAAK,YAAA,MAAkBX,EAAa,QACpCW,EAAK,QAAA,MAAcX,EAAa;AAElC,WAASmB,IAAS;AAChB,UAAMR,IAAO,IAAI,KAAKX,EAAa,MAAMA,EAAa,OAAOA,EAAa,IAAI;AAE9E,QAAIc,KAAcf,EAAU,eAAe,IAAA,EAAM,UAAU;AACzD,MAAAA,EAAU,MAAA;AACV;AAAA,IACF;AAEA,IAAAA,EAAU,WAAWY,CAAI;AAAA,EAC3B;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,CAACP,KAAiBE,KAAc,CAACE;AAAA,MAC3C,WAAWI,EAAWC,EAAO,kBAAkB,GAAG,kBAAkB;AAAA,MACpE,SAASH;AAAA,MACT,wBAAsB,OAAON,CAAa;AAAA,MAC1C,oBAAkB,OAAOC,CAAU;AAAA,MACnC,oBAAkB,OAAOC,CAAU;AAAA,MACnC,wBAAsB,OAAOE,CAAa;AAAA,MAC1C,iBAAe,OAAOC,CAAO;AAAA,MAE7B,UAAA,gBAAAK,EAACC,GAAA,EAAO,QAAO,QACb,UAAA;AAAA,QAAA,gBAAAJ,EAACK,GAAA,EAAU,UAAA,OAAOzB,EAAa,IAAI,GAAE;AAAA,QACpCkB,KACC,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAWC,EAAO,mBAAmB,GAAG,mBAAmB;AAAA,YACtE,oBAAkB,OAAOR,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAEL;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"date_picker_date.js","sources":["../../../src/inputs/date_picker/date_picker_date.tsx"],"sourcesContent":["import { useSignalValue } from '@tcn/state';\nimport { BodyText } from '../../typography/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport type { CalendarDate } from '../../utils/calendar/calendar_date.js';\nimport type { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_date.module.css';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerDateProps {\n  date: CalendarDate;\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerDate({ presenter, date: calendarDate }: DatePickerDateProps) {\n  const {\n    visibleMonth,\n    disabledDates,\n    min: minDate,\n    max: maxDate,\n  } = useSignalValue(presenter.stateBroadcast);\n  const selectedDate = useSignalValue(presenter.valueBroadcast);\n\n  let minTime = -Infinity;\n  let maxTime = Infinity;\n\n  if (minDate != null) {\n    let normalizedMinDate = new Date(minDate);\n    normalizedMinDate.setHours(0, 0, 0, 0);\n    minTime = normalizedMinDate.getTime();\n  }\n\n  if (maxDate != null) {\n    let normalizedMaxDate = new Date(maxDate);\n    normalizedMaxDate.setHours(23, 59, 59, 999);\n    maxTime = normalizedMaxDate.getTime();\n  }\n\n  const date = new Date();\n\n  const time = new Date(\n    calendarDate.year,\n    calendarDate.month,\n    calendarDate.date\n  ).getTime();\n\n  const isWithinMonth = visibleMonth === calendarDate.month;\n\n  const isSelected =\n    selectedDate?.getMonth() === calendarDate.month &&\n    selectedDate.getFullYear() === calendarDate.year &&\n    selectedDate.getDate() === calendarDate.date;\n\n  const isDisabled = disabledDates.some(\n    d =>\n      d.getMonth() === calendarDate.month &&\n      d.getFullYear() === calendarDate.year &&\n      d.getDate() === calendarDate.date\n  );\n\n  const isWithinRange = time >= minTime && time < maxTime;\n  const isToday =\n    date.getMonth() === calendarDate.month &&\n    date.getFullYear() === calendarDate.year &&\n    date.getDate() === calendarDate.date;\n\n  function select() {\n    const date = new Date(calendarDate.year, calendarDate.month, calendarDate.date);\n\n    if (isSelected && presenter.stateBroadcast.get().showTime) {\n      presenter.clear();\n      return;\n    }\n\n    presenter.selectDate(date);\n  }\n\n  return (\n    <button\n      disabled={!isWithinMonth || isDisabled || !isWithinRange}\n      className={clsx(styles['date-picker-date'], 'date-picker-date')}\n      onClick={select}\n      data-is-within-month={String(isWithinMonth)}\n      data-is-selected={String(isSelected)}\n      data-is-disabled={String(isDisabled)}\n      data-is-within-range={String(isWithinRange)}\n      data-is-today={String(isToday)}\n    >\n      <ZStack height=\"100%\">\n        <BodyText>{String(calendarDate.date)}</BodyText>\n        {isToday && (\n          <div\n            className={clsx(styles['date-picker-today'], 'date-picker-today')}\n            data-is-selected={String(isSelected)}\n          ></div>\n        )}\n      </ZStack>\n    </button>\n  );\n}\n"],"names":["DatePickerDate","presenter","calendarDate","visibleMonth","disabledDates","minDate","maxDate","useSignalValue","selectedDate","minTime","maxTime","normalizedMinDate","normalizedMaxDate","date","time","isWithinMonth","isSelected","isDisabled","d","isWithinRange","isToday","select","jsx","clsx","styles","jsxs","ZStack","BodyText"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAe,EAAE,WAAAC,GAAW,MAAMC,KAAqC;AACrF,QAAM;AAAA,IACJ,cAAAC;AAAA,IACA,eAAAC;AAAA,IACA,KAAKC;AAAA,IACL,KAAKC;AAAA,EAAA,IACHC,EAAeN,EAAU,cAAc,GACrCO,IAAeD,EAAeN,EAAU,cAAc;AAE5D,MAAIQ,IAAU,QACVC,IAAU;AAEd,MAAIL,KAAW,MAAM;AACnB,QAAIM,IAAoB,IAAI,KAAKN,CAAO;AACxC,IAAAM,EAAkB,SAAS,GAAG,GAAG,GAAG,CAAC,GACrCF,IAAUE,EAAkB,QAAA;AAAA,EAC9B;AAEA,MAAIL,KAAW,MAAM;AACnB,QAAIM,IAAoB,IAAI,KAAKN,CAAO;AACxC,IAAAM,EAAkB,SAAS,IAAI,IAAI,IAAI,GAAG,GAC1CF,IAAUE,EAAkB,QAAA;AAAA,EAC9B;AAEA,QAAMC,wBAAW,KAAA,GAEXC,IAAO,IAAI;AAAA,IACfZ,EAAa;AAAA,IACbA,EAAa;AAAA,IACbA,EAAa;AAAA,EAAA,EACb,QAAA,GAEIa,IAAgBZ,MAAiBD,EAAa,OAE9Cc,IACJR,GAAc,SAAA,MAAeN,EAAa,SAC1CM,EAAa,YAAA,MAAkBN,EAAa,QAC5CM,EAAa,QAAA,MAAcN,EAAa,MAEpCe,IAAab,EAAc;AAAA,IAC/B,CAAAc,MACEA,EAAE,SAAA,MAAehB,EAAa,SAC9BgB,EAAE,YAAA,MAAkBhB,EAAa,QACjCgB,EAAE,QAAA,MAAchB,EAAa;AAAA,EAAA,GAG3BiB,IAAgBL,KAAQL,KAAWK,IAAOJ,GAC1CU,IACJP,EAAK,SAAA,MAAeX,EAAa,SACjCW,EAAK,YAAA,MAAkBX,EAAa,QACpCW,EAAK,QAAA,MAAcX,EAAa;AAElC,WAASmB,IAAS;AAChB,UAAMR,IAAO,IAAI,KAAKX,EAAa,MAAMA,EAAa,OAAOA,EAAa,IAAI;AAE9E,QAAIc,KAAcf,EAAU,eAAe,IAAA,EAAM,UAAU;AACzD,MAAAA,EAAU,MAAA;AACV;AAAA,IACF;AAEA,IAAAA,EAAU,WAAWY,CAAI;AAAA,EAC3B;AAEA,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,CAACP,KAAiBE,KAAc,CAACE;AAAA,MAC3C,WAAWI,EAAKC,EAAO,kBAAkB,GAAG,kBAAkB;AAAA,MAC9D,SAASH;AAAA,MACT,wBAAsB,OAAON,CAAa;AAAA,MAC1C,oBAAkB,OAAOC,CAAU;AAAA,MACnC,oBAAkB,OAAOC,CAAU;AAAA,MACnC,wBAAsB,OAAOE,CAAa;AAAA,MAC1C,iBAAe,OAAOC,CAAO;AAAA,MAE7B,UAAA,gBAAAK,EAACC,GAAA,EAAO,QAAO,QACb,UAAA;AAAA,QAAA,gBAAAJ,EAACK,GAAA,EAAU,UAAA,OAAOzB,EAAa,IAAI,GAAE;AAAA,QACpCkB,KACC,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAKC,EAAO,mBAAmB,GAAG,mBAAmB;AAAA,YAChE,oBAAkB,OAAOR,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAEL;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/inputs/date_picker/date_picker_day.js

@@ -1,5 +1,5 @@
 import { jsx as a } from "react/jsx-runtime";
-import "classnames";
+import "clsx";
 import "../../body_text.module-h4XQE2pC.js";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";

package/dist/inputs/date_picker/date_picker_header.js

@@ -1,4 +1,4 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import { useSignalValue as g, useSignalValueEffect as v } from "@tcn/state";
 import { HStack as l } from "../../stacks/h_stack.js";
 import { Spacer as h } from "../../stacks/spacer.js";
@@ -14,17 +14,17 @@ 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 N from "classnames";
-import { DatePickerYearInput as O } from "./date_picker_year_input.js";
-import '../../date_picker_header.css';const B = "_date-picker-header_696681a", R = { "date-picker-header": B };
+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((a, r) => /* @__PURE__ */ e(y, { value: String(r), label: a, keywords: [a], children: i[r] }, r));
+  const o = u(t, "short"), e = u(t, "long");
+  return o.map((n, r) => /* @__PURE__ */ i(y, { value: String(r), label: n, keywords: [n], children: e[r] }, r));
 }
 function J({ presenter: t, countryCode: o }) {
-  const i = g(t.stateBroadcast), a = M(null);
-  function r(n) {
-    t.setVisibleMonth(Number(n));
+  const e = g(t.stateBroadcast), n = M(null);
+  function r(a) {
+    t.setVisibleMonth(Number(a));
   }
   function p() {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth - 1);
@@ -33,48 +33,48 @@ function J({ presenter: t, countryCode: o }) {
     return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth + 1);
   }
   const f = b(() => V(o), [o]);
-  return v((n) => {
-    const s = a.current;
-    s && s.value !== String(n.visibleYear) && (s.value = String(n.visibleYear));
+  return v((a) => {
+    const s = n.current;
+    s && s.value !== String(a.visibleYear) && (s.value = String(a.visibleYear));
   }, t.stateBroadcast), /* @__PURE__ */ c(
     l,
     {
-      className: N(R["date-picker-header"], "date-picker-header"),
+      className: O(R["date-picker-header"], "date-picker-header"),
       minWidth: "35px",
       width: "100%",
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           m,
           {
-            disabled: !i.canNavigateToPreviousMonth,
+            disabled: !e.canNavigateToPreviousMonth,
             hierarchy: "tertiary",
             onClick: p,
-            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
+            children: /* @__PURE__ */ i(S, { flipOnRtl: !0, size: "md" })
           }
         ),
-        /* @__PURE__ */ e(h, {}),
+        /* @__PURE__ */ i(h, {}),
         /* @__PURE__ */ c(l, { hAlign: "center", gap: "4px", width: "auto", children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ i(
             k,
             {
               hierarchy: "tertiary",
               width: "auto",
               maxWidth: "150px",
-              value: String(i.visibleMonth),
+              value: String(e.visibleMonth),
               onChange: r,
               children: f
             }
           ),
-          /* @__PURE__ */ e(O, { presenter: t })
+          /* @__PURE__ */ i(B, { presenter: t })
         ] }),
-        /* @__PURE__ */ e(h, {}),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(h, {}),
+        /* @__PURE__ */ i(
           m,
           {
-            disabled: !i.canNavigateToNextMonth,
+            disabled: !e.canNavigateToNextMonth,
             hierarchy: "tertiary",
             onClick: d,
-            children: /* @__PURE__ */ e(x, { flipOnRtl: !0, size: "md" })
+            children: /* @__PURE__ */ i(x, { flipOnRtl: !0, size: "md" })
           }
         )
       ]

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 classNames from 'classnames';\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={classNames(styles['date-picker-header'], '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","classNames","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,EAAWC,EAAO,oBAAoB,GAAG,oBAAoB;AAAA,MACxE,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 { 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'], '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,oBAAoB;AAAA,MAClE,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;"}

package/dist/inputs/date_picker/date_picker_input.js

@@ -1,8 +1,8 @@
-import { jsxs as p, Fragment as q, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, Fragment as q, jsx as o } 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/popper.js";
-import u from "classnames";
+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";
@@ -26,8 +26,8 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     maxWidth: D,
     minWidth: Y,
     showTime: r = !1,
-    timeIntervalInMinutes: A = 15,
-    hierarchy: x = "secondary",
+    timeIntervalInMinutes: x = 15,
+    hierarchy: A = "secondary",
     disabledDates: E,
     selectDateMessage: R = "Select Date",
     countryCode: s,
@@ -35,7 +35,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     onTimeSelected: w,
     ...b
   }, v) => {
-    const [n, a] = L(null), C = n != null, i = M(null), m = V((t) => t.closest(".suggestion-list") != null, []), F = W(() => {
+    const [n, a] = L(null), C = n != null, i = M(null), p = V((t) => t.closest(".suggestion-list") != null, []), F = W(() => {
       const t = {
         year: "numeric",
         month: "short",
@@ -43,7 +43,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
       };
       return r && (t.hour = "numeric", t.minute = "2-digit", t.hour12 = !0), new Intl.DateTimeFormat(s, t);
     }, [s, r]), P = c != null ? F.format(c) : R;
-    function N(t) {
+    function O(t) {
       a(t.currentTarget);
     }
     function e() {
@@ -54,20 +54,20 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
         n != null && i.current && i.current.focus();
       });
     }, [n]);
-    function O(t) {
+    function _(t) {
       t.key === "Escape" && e();
     }
-    function _() {
+    function I() {
       const t = i.current;
       t?.focus();
     }
-    function I(t) {
+    function N(t) {
       d?.(t), !r && e();
     }
     function j(t, z, K) {
       w?.(t, z, K), e();
     }
-    return /* @__PURE__ */ p(q, { children: [
+    return /* @__PURE__ */ m(q, { children: [
       /* @__PURE__ */ o(
         J,
         {
@@ -75,8 +75,8 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           className: u(f.button, "select"),
           hAlign: "start",
           disabled: l,
-          hierarchy: x,
-          onClick: N,
+          hierarchy: A,
+          onClick: O,
           width: y,
           maxWidth: D,
           ...b,
@@ -96,22 +96,22 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           verticalOrigin: "top",
           horizontalOrigin: "start",
           open: C,
-          isClickAwayException: m,
-          isScrollAwayException: m,
+          isClickAwayException: p,
+          isScrollAwayException: p,
           restoreFocus: !0,
-          children: /* @__PURE__ */ p(
+          children: /* @__PURE__ */ m(
             G,
             {
               padding: "8px",
               className: u(f.popover, "date-picker-popover"),
-              onKeyDown: O,
+              onKeyDown: _,
               children: [
                 /* @__PURE__ */ o(
                   Q,
                   {
                     ref: i,
                     value: c,
-                    onChange: I,
+                    onChange: N,
                     min: k,
                     max: g,
                     showTime: r,
@@ -121,10 +121,10 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
                     countryCode: s,
                     renderActions: S,
                     onTimeSelected: j,
-                    timeIntervalInMinutes: A
+                    timeIntervalInMinutes: x
                   }
                 ),
-                /* @__PURE__ */ o(T, { onRedirect: _ })
+                /* @__PURE__ */ o(T, { onRedirect: I })
               ]
             }
           )

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/popper.js';\nimport classNames from 'classnames';\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('.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={classNames(styles.button, 'select')}\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={classNames(styles.popover, '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","classNames","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/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('.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, 'select')}\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, '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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_time_selector.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,4BAA4B,EAAE,MAAM,CAAC;IACrC,4BAA4B,EAAE,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,iBAAiB,EACjB,GAAG,EACH,GAAG,EACH,4BAA4B,EAC5B,4BAA4B,EAC5B,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CAgF7B"}
+{"version":3,"file":"date_picker_time_selector.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_time_selector.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,4BAA4B,EAAE,MAAM,CAAC;IACrC,4BAA4B,EAAE,MAAM,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,iBAAiB,EACjB,GAAG,EACH,GAAG,EACH,4BAA4B,EAC5B,4BAA4B,EAC5B,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CA6E7B"}

package/dist/inputs/date_picker/date_picker_time_selector.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as N } from "react/jsx-runtime";
 import { VStack as x } from "../../stacks/v_stack.js";
 import { ZStack as C } from "../../stacks/z_stack.js";
-import s from "classnames";
+import { clsx as m } 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";
@@ -16,7 +16,7 @@ import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
 import "../../title.module-B16de2jd.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", m = { "time-box": z, "time-box-title": P, "time-box-title-container": Z, "selected-time": v };
+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 it({
   origin: e,
   intervalInMinutes: f,
@@ -41,7 +41,7 @@ function it({
       {
         width: "flex",
         hierarchy: "tertiary",
-        className: s("selected-time", B && m["selected-time"]),
+        className: m("selected-time", B && s["selected-time"]),
         disabled: e == null || l || D,
         onClick: () => {
           T(t.getHours(), t.getMinutes(), t.getSeconds());
@@ -58,16 +58,13 @@ function it({
       width: "auto",
       height: _,
       "data-is-disabled": l || e == null,
-      className: s(m["time-box"], "time-box"),
+      className: m(s["time-box"], "time-box"),
       children: [
         /* @__PURE__ */ o(
           C,
           {
-            className: s(
-              m["time-box-title-container"],
-              "time-box-title-container"
-            ),
-            children: /* @__PURE__ */ o($, { className: s(m["time-box-title"], "time-box-title"), children: /* @__PURE__ */ o(j, { size: "lg" }) })
+            className: m(s["time-box-title-container"], "time-box-title-container"),
+            children: /* @__PURE__ */ o($, { className: m(s["time-box-title"], "time-box-title"), children: /* @__PURE__ */ o(j, { size: "lg" }) })
           }
         ),
         /* @__PURE__ */ o(

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

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

package/dist/inputs/date_picker/date_picker_year_input.js

@@ -5,13 +5,13 @@ import "../../actions/button/slim_button/slim_button.js";
 import { Button as h } from "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
-import d from "classnames";
+import { clsx as d } from "clsx";
 import { useState as n } from "react";
 import { Popper as y } from "../../overlay/popper/popper.js";
 import { DatePickerYearSelector as g } from "./date_picker_year_selector.js";
 import { useSignalValue as b } from "@tcn/state";
 import '../../date_picker_year_input.css';const k = "_year-select_eb568a7", s = { "year-select": k };
-function F({ presenter: t }) {
+function I({ presenter: t }) {
   const { visibleYear: a } = b(t.stateBroadcast), [c, i] = n(null), [l, r] = n(!1);
   function o() {
     r(!1);
@@ -46,6 +46,6 @@ function F({ presenter: t }) {
   ] });
 }
 export {
-  F as DatePickerYearInput
+  I as DatePickerYearInput
 };
 //# sourceMappingURL=date_picker_year_input.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_selector.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKjE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,mBAAmB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAO,GACR,EAAE,2BAA2B,2CA2G7B"}
+{"version":3,"file":"date_picker_year_selector.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKjE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,mBAAmB,CAAC;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,OAAO,GACR,EAAE,2BAA2B,2CAqG7B"}