@tcn/ui 0.0.1

package/dist/inputs/date_picker/date_picker.js

@@ -0,0 +1,114 @@
+import { jsxs as l, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { useSignalValue as y, useSignalValueEffect as B } from "@tcn/state";
+import "../../utils/focus_redirect.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/scroll_away_listener.js";
+import Y, { useState as R, useRef as L, useLayoutEffect as r } from "react";
+import { useResizeObserver as O } from "../../utils/hooks/use_resize_observer.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";
+import _ from "classnames";
+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 }, le = Y.forwardRef(function({
+  value: i,
+  disabled: h,
+  onChange: k,
+  onError: x,
+  showTime: s = !1,
+  min: g = null,
+  max: b = null,
+  minVisibleTimeInMilliseconds: m,
+  maxVisibleTimeInMilliseconds: p,
+  disabledDates: f,
+  countryCode: D = "en-US",
+  renderActions: P,
+  onTimeSelected: S,
+  timeIntervalInMinutes: d
+}, H) {
+  const [F, I] = R(0), M = L(!1), N = O((t, o) => {
+    I(o);
+  }), [e] = R(() => {
+    const t = /* @__PURE__ */ new Date(), o = i == null ? t.getFullYear() : i.getFullYear(), c = i == null ? t.getMonth() : i.getMonth();
+    return new E(i, o, c, s);
+  }), a = y(e.stateBroadcast), j = y(e.valueBroadcast), z = a.error;
+  return B((t) => {
+    z !== t && x && x(t);
+  }, e.errorBroadcast), B((t) => {
+    M.current ? k && k(t) : M.current = !0;
+  }, e.valueBroadcast), r(() => {
+    e.initialize();
+  }, [e]), r(() => {
+    e.setShowTime(s);
+  }, [e, s]), r(() => {
+    e.setMinDate(g);
+  }, [e, g]), r(() => {
+    e.setMaxDate(b);
+  }, [e, b]), r(() => {
+    f == null ? e.setDisabledDates([]) : e.setDisabledDates(f);
+  }, [e, f]), r(() => {
+    typeof m == "number" && e.setMinVisibleTime(m);
+  }, [e, m]), 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(
+    U,
+    {
+      ref: H,
+      width: "auto",
+      height: "auto",
+      className: _(w["date-picker"], "date-picker"),
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ l(
+          u,
+          {
+            ref: N,
+            inline: !0,
+            height: "auto",
+            width: "auto",
+            className: _(w["date-picker-box"], "date-picker-box"),
+            "data-is-disabled": h,
+            children: [
+              /* @__PURE__ */ l(u, { height: "auto", children: [
+                /* @__PURE__ */ n(q, { countryCode: D, presenter: e }),
+                /* @__PURE__ */ n($, { countryCode: D, presenter: e })
+              ] }),
+              P && /* @__PURE__ */ n(u, { paddingInline: "8px", children: P(e) }),
+              /* @__PURE__ */ n(V, { height: "8px" })
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ l(T, { children: [
+          /* @__PURE__ */ n(V, { width: "8px" }),
+          /* @__PURE__ */ n(
+            G,
+            {
+              height: `${F}px`,
+              origin: j,
+              max: a.max,
+              min: a.min,
+              minVisibleTimeInMilliseconds: a.minVisibleTimeInMilliseconds,
+              maxVisibleTimeInMilliseconds: a.maxVisibleTimeInMilliseconds,
+              intervalInMinutes: a.timeIntervalInMinutes,
+              disabled: h,
+              onSelect: (t, o, c) => {
+                e.setTime(t, o, c), S && S(t, o, c);
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+export {
+  le as DatePicker
+};
+//# sourceMappingURL=date_picker.js.map

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

@@ -0,0 +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 classNames from 'classnames';\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={classNames(styles['date-picker'], 'date-picker')}\n      tabIndex={0}\n    >\n      <VStack\n        ref={calendarRef}\n        inline\n        height=\"auto\"\n        width=\"auto\"\n        className={classNames(styles['date-picker-box'], '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","classNames","styles","VStack","jsx","DatePickerHeader","DatePickerBody","Spacer","Fragment","DatePickerTimeSelector","hour","minutes","seconds"],"mappings":"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"}

package/dist/inputs/date_picker/date_picker_body.d.ts

@@ -0,0 +1,7 @@
+import { DatePickerPresenter } from './date_picker_presenter.js';
+export interface DatePickerBodyProps {
+    presenter: DatePickerPresenter;
+    countryCode: string;
+}
+export declare function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date_picker_body.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_body.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_body.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,mBAAmB,CAAC;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAoC7E"}

package/dist/inputs/date_picker/date_picker_body.js

@@ -0,0 +1,26 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import f from "react";
+import { useSignalValue as n } from "@tcn/state";
+import { Box as s } from "../../stacks/box/box.js";
+import { HStack as m } from "../../stacks/h_stack.js";
+import { Spacer as c } from "../../stacks/spacer.js";
+import { VStack as d } from "../../stacks/v_stack.js";
+import { DatePickerDate as g } from "./date_picker_date.js";
+import { DatePickerDay as k } from "./date_picker_day.js";
+function V({ presenter: o, countryCode: p }) {
+  const { visibleDates: i } = n(o.stateBroadcast), a = [];
+  for (let t = 0; t < i.length; t += 7)
+    a.push(i.slice(t, t + 7));
+  return /* @__PURE__ */ h(d, { height: "auto", width: "auto", className: "date-picker-body", children: [
+    /* @__PURE__ */ r(m, { height: "auto", width: "auto", children: new Array(7).fill(0).map((t, e) => /* @__PURE__ */ r(k, { countryCode: p, dayOfTheWeek: e }, e)) }),
+    /* @__PURE__ */ r(c, { height: "2px" }),
+    a.map((t, e) => /* @__PURE__ */ h(f.Fragment, { children: [
+      /* @__PURE__ */ r(m, { height: "auto", width: "auto", children: t.map((l, u) => /* @__PURE__ */ r(s, { width: "flex", height: "auto", children: /* @__PURE__ */ r(g, { date: l, presenter: o }) }, u)) }, e),
+      /* @__PURE__ */ r(c, { height: "1px" })
+    ] }, e))
+  ] });
+}
+export {
+  V as DatePickerBody
+};
+//# sourceMappingURL=date_picker_body.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_body.js","sources":["../../../src/inputs/date_picker/date_picker_body.tsx"],"sourcesContent":["import React from 'react';\nimport { useSignalValue } from '@tcn/state';\nimport { Box } from '../../stacks/box/box.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { CalendarDate } from '../../utils/calendar/calendar_date.js';\nimport { DatePickerDate } from './date_picker_date.js';\nimport { DatePickerDay } from './date_picker_day.js';\nimport type { DatePickerPresenter } from './date_picker_presenter.js';\n\nexport interface DatePickerBodyProps {\n  presenter: DatePickerPresenter;\n  countryCode: string;\n}\n\nexport function DatePickerBody({ presenter, countryCode }: DatePickerBodyProps) {\n  const { visibleDates } = useSignalValue(presenter.stateBroadcast);\n  const rows: CalendarDate[][] = [];\n\n  for (let i = 0; i < visibleDates.length; i += 7) {\n    rows.push(visibleDates.slice(i, i + 7));\n  }\n\n  return (\n    <VStack height=\"auto\" width=\"auto\" className=\"date-picker-body\">\n      <HStack height=\"auto\" width=\"auto\">\n        {new Array(7).fill(0).map((_, index) => {\n          return (\n            <DatePickerDay key={index} countryCode={countryCode} dayOfTheWeek={index} />\n          );\n        })}\n      </HStack>\n      <Spacer height=\"2px\" />\n      {rows.map((dates, index) => {\n        return (\n          <React.Fragment key={index}>\n            <HStack key={index} height=\"auto\" width=\"auto\">\n              {dates.map((date, index) => {\n                return (\n                  <Box width=\"flex\" key={index} height=\"auto\">\n                    <DatePickerDate date={date} presenter={presenter} />\n                  </Box>\n                );\n              })}\n            </HStack>\n            <Spacer height=\"1px\" />\n          </React.Fragment>\n        );\n      })}\n    </VStack>\n  );\n}\n"],"names":["DatePickerBody","presenter","countryCode","visibleDates","useSignalValue","rows","i","VStack","jsx","HStack","_","index","DatePickerDay","Spacer","dates","jsxs","React","date","Box","DatePickerDate"],"mappings":";;;;;;;;;AAgBO,SAASA,EAAe,EAAE,WAAAC,GAAW,aAAAC,KAAoC;AAC9E,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAeH,EAAU,cAAc,GAC1DI,IAAyB,CAAA;AAE/B,WAASC,IAAI,GAAGA,IAAIH,EAAa,QAAQG,KAAK;AAC5C,IAAAD,EAAK,KAAKF,EAAa,MAAMG,GAAGA,IAAI,CAAC,CAAC;AAGxC,2BACGC,GAAA,EAAO,QAAO,QAAO,OAAM,QAAO,WAAU,oBAC3C,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,QAAO,QAAO,OAAM,QACzB,UAAA,IAAI,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACC,GAAGC,MAE1B,gBAAAH,EAACI,GAAA,EAA0B,aAAAV,GAA0B,cAAcS,KAA/CA,CAAsD,CAE7E,EAAA,CACH;AAAA,IACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IACpBR,EAAK,IAAI,CAACS,GAAOH,MAEd,gBAAAI,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAAR,EAACC,GAAA,EAAmB,QAAO,QAAO,OAAM,QACrC,UAAAK,EAAM,IAAI,CAACG,GAAMN,MAEd,gBAAAH,EAACU,GAAA,EAAI,OAAM,QAAmB,QAAO,QACnC,UAAA,gBAAAV,EAACW,GAAA,EAAe,MAAAF,GAAY,WAAAhB,EAAA,CAAsB,EAAA,GAD7BU,CAEvB,CAEH,KAPUA,CAQb;AAAA,MACA,gBAAAH,EAACK,GAAA,EAAO,QAAO,MAAA,CAAM;AAAA,IAAA,EAAA,GAVFF,CAWrB,CAEH;AAAA,EAAA,GACH;AAEJ;"}

package/dist/inputs/date_picker/date_picker_date.d.ts

@@ -0,0 +1,8 @@
+import { CalendarDate } from '../../utils/calendar/calendar_date.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+export interface DatePickerDateProps {
+    date: CalendarDate;
+    presenter: DatePickerPresenter;
+}
+export declare function DatePickerDate({ presenter, date: calendarDate }: DatePickerDateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date_picker_date.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_date.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_date.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAItE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,mBAAmB,2CAqFpF"}

package/dist/inputs/date_picker/date_picker_date.js

@@ -0,0 +1,71 @@
+import { jsx as n, jsxs as x } 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 "../../callout.module-D8ECmxpO.js";
+import "../../caption.module-DDq0H4xZ.js";
+import "../../footnote.module-DEyFuqOr.js";
+import "../../headline.module-BiwHBtGf.js";
+import "../../subheadline.module-C-v7zMkQ.js";
+import "../../title.module-B16de2jd.js";
+import { ZStack as M } from "../../stacks/z_stack.js";
+import '../../date_picker_date.css';const B = "_date-picker-date_38d540e", _ = "_date-picker-today_af9d1ab", k = { "date-picker-date": B, "date-picker-today": _ };
+function C({ presenter: i, date: t }) {
+  const {
+    visibleMonth: S,
+    disabledDates: T,
+    min: m,
+    max: d
+  } = 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(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(
+    (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() {
+    const e = new Date(t.year, t.month, t.date);
+    if (a && i.stateBroadcast.get().showTime) {
+      i.clear();
+      return;
+    }
+    i.selectDate(e);
+  }
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      disabled: !l || h || !p,
+      className: f(k["date-picker-date"], "date-picker-date"),
+      onClick: w,
+      "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: [
+        /* @__PURE__ */ n(b, { children: String(t.date) }),
+        y && /* @__PURE__ */ n(
+          "div",
+          {
+            className: f(k["date-picker-today"], "date-picker-today"),
+            "data-is-selected": String(a)
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  C as DatePickerDate
+};
+//# sourceMappingURL=date_picker_date.js.map

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

@@ -0,0 +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;"}

package/dist/inputs/date_picker/date_picker_day.d.ts

@@ -0,0 +1,6 @@
+export interface DatePickerDayProps {
+    dayOfTheWeek: number;
+    countryCode: string;
+}
+export declare function DatePickerDay({ dayOfTheWeek, countryCode }: DatePickerDayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date_picker_day.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_day.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_day.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,kBAAkB,2CAkB9E"}

package/dist/inputs/date_picker/date_picker_day.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import "classnames";
+import "../../body_text.module-h4XQE2pC.js";
+import "../../callout.module-D8ECmxpO.js";
+import "../../caption.module-DDq0H4xZ.js";
+import "../../footnote.module-DEyFuqOr.js";
+import { Headline as m } from "../../typography/headline/headline.js";
+import "../../subheadline.module-C-v7zMkQ.js";
+import "../../title.module-B16de2jd.js";
+import { ZStack as p } from "../../stacks/z_stack.js";
+import { useMemo as s } from "react";
+import '../../date_picker_day.css';const c = "_date-picker-day_2945845", r = { "date-picker-day": c };
+function g({ dayOfTheWeek: i, countryCode: t }) {
+  const e = /* @__PURE__ */ new Date();
+  e.setDate(e.getDate() - e.getDay() + i);
+  const o = s(
+    () => new Intl.DateTimeFormat(t, { weekday: "short" }).format(e).toLocaleUpperCase(),
+    [t, e]
+  );
+  return /* @__PURE__ */ a(p, { className: r["date-picker-day"], children: /* @__PURE__ */ a(m, { size: "sm", emphasis: "faint", className: r["date-picker-day-text"], children: o[0] }) });
+}
+export {
+  g as DatePickerDay
+};
+//# sourceMappingURL=date_picker_day.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_day.js","sources":["../../../src/inputs/date_picker/date_picker_day.tsx"],"sourcesContent":["import { Headline } from '../../typography/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { useMemo } from 'react';\nimport styles from './date_picker_day.module.css';\n\nexport interface DatePickerDayProps {\n  dayOfTheWeek: number;\n  countryCode: string;\n}\n\nexport function DatePickerDay({ dayOfTheWeek, countryCode }: DatePickerDayProps) {\n  const date = new Date();\n  date.setDate(date.getDate() - date.getDay() + dayOfTheWeek);\n  const weekdayName = useMemo(\n    () =>\n      new Intl.DateTimeFormat(countryCode, { weekday: 'short' })\n        .format(date)\n        .toLocaleUpperCase(),\n    [countryCode, date]\n  );\n\n  return (\n    <ZStack className={styles['date-picker-day']}>\n      <Headline size=\"sm\" emphasis=\"faint\" className={styles['date-picker-day-text']}>\n        {weekdayName[0]}\n      </Headline>\n    </ZStack>\n  );\n}\n"],"names":["DatePickerDay","dayOfTheWeek","countryCode","date","weekdayName","useMemo","ZStack","styles","Headline"],"mappings":";;;;;;;;;;;;AAUO,SAASA,EAAc,EAAE,cAAAC,GAAc,aAAAC,KAAmC;AAC/E,QAAMC,wBAAW,KAAA;AACjB,EAAAA,EAAK,QAAQA,EAAK,QAAA,IAAYA,EAAK,OAAA,IAAWF,CAAY;AAC1D,QAAMG,IAAcC;AAAA,IAClB,MACE,IAAI,KAAK,eAAeH,GAAa,EAAE,SAAS,QAAA,CAAS,EACtD,OAAOC,CAAI,EACX,kBAAA;AAAA,IACL,CAACD,GAAaC,CAAI;AAAA,EAAA;AAGpB,2BACGG,GAAA,EAAO,WAAWC,EAAO,iBAAiB,GACzC,4BAACC,GAAA,EAAS,MAAK,MAAK,UAAS,SAAQ,WAAWD,EAAO,sBAAsB,GAC1E,UAAAH,EAAY,CAAC,GAChB,GACF;AAEJ;"}

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

@@ -0,0 +1,7 @@
+import { DatePickerPresenter } from './date_picker_presenter.js';
+export interface DatePickerHeaderProps {
+    presenter: DatePickerPresenter;
+    countryCode: string;
+}
+export declare function DatePickerHeader({ presenter, countryCode }: DatePickerHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date_picker_header.d.ts.map

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

@@ -0,0 +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"}

package/dist/inputs/date_picker/date_picker_header.js

@@ -0,0 +1,87 @@
+import { jsxs as c, jsx as e } 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";
+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 "../../actions/button/select_group/select_group.js";
+import "../../actions/button/select_group/single_select_group.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 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 };
+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));
+}
+function J({ presenter: t, countryCode: o }) {
+  const i = g(t.stateBroadcast), a = M(null);
+  function r(n) {
+    t.setVisibleMonth(Number(n));
+  }
+  function p() {
+    return t.setVisibleMonth(t.stateBroadcast.get().visibleMonth - 1);
+  }
+  function d() {
+    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));
+  }, t.stateBroadcast), /* @__PURE__ */ c(
+    l,
+    {
+      className: N(R["date-picker-header"], "date-picker-header"),
+      minWidth: "35px",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ e(
+          m,
+          {
+            disabled: !i.canNavigateToPreviousMonth,
+            hierarchy: "tertiary",
+            onClick: p,
+            children: /* @__PURE__ */ e(S, { flipOnRtl: !0, size: "md" })
+          }
+        ),
+        /* @__PURE__ */ e(h, {}),
+        /* @__PURE__ */ c(l, { hAlign: "center", gap: "4px", width: "auto", children: [
+          /* @__PURE__ */ e(
+            k,
+            {
+              hierarchy: "tertiary",
+              width: "auto",
+              maxWidth: "150px",
+              value: String(i.visibleMonth),
+              onChange: r,
+              children: f
+            }
+          ),
+          /* @__PURE__ */ e(O, { presenter: t })
+        ] }),
+        /* @__PURE__ */ e(h, {}),
+        /* @__PURE__ */ e(
+          m,
+          {
+            disabled: !i.canNavigateToNextMonth,
+            hierarchy: "tertiary",
+            onClick: d,
+            children: /* @__PURE__ */ e(x, { flipOnRtl: !0, size: "md" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  J as DatePickerHeader
+};
+//# sourceMappingURL=date_picker_header.js.map

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

@@ -0,0 +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;"}

package/dist/inputs/date_picker/date_picker_input.d.ts

@@ -0,0 +1,24 @@
+import { default as React, HTMLAttributes } from 'react';
+import { Hierarchy } from '../../utils/index.js';
+import { DatePickerPresenter } from './date_picker_presenter.js';
+export interface DatePickerInputProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {
+    value?: Date | null;
+    disabled?: boolean;
+    onChange?: (date: Date | null) => void;
+    onError?: (error: string | null) => void;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    showTime?: boolean;
+    timeIntervalInMinutes?: number;
+    disabledDates?: Date[] | undefined;
+    countryCode?: string;
+    renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;
+    min?: Date;
+    max?: Date;
+    hierarchy?: Hierarchy;
+    selectDateMessage?: string;
+    onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;
+}
+export declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=date_picker_input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date_picker_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIjD,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAIjE,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IACvE,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3E;AAED,eAAO,MAAM,eAAe,gGAkJ3B,CAAC"}

package/dist/inputs/date_picker/date_picker_input.js

@@ -0,0 +1,139 @@
+import { jsxs as p, 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 "../../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/button/select_group/select_group.js";
+import "../../actions/button/select_group/single_select_group.js";
+import { DatePicker as Q } from "./date_picker.js";
+import { FocusRedirect as T } from "../../utils/focus_redirect.js";
+import "../../utils/click_away_listener.js";
+import "../../utils/scroll_away_listener.js";
+import "../../utils/hooks/use_resize_observer.js";
+import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_708f951", f = { button: U, popover: X }, ht = B.forwardRef(
+  ({
+    value: c = /* @__PURE__ */ new Date(),
+    onChange: d,
+    onError: h,
+    min: k = /* @__PURE__ */ new Date("01/01/1924"),
+    max: g = /* @__PURE__ */ new Date("01/01/2124"),
+    disabled: l,
+    width: y = "100%",
+    maxWidth: D,
+    minWidth: Y,
+    showTime: r = !1,
+    timeIntervalInMinutes: A = 15,
+    hierarchy: x = "secondary",
+    disabledDates: E,
+    selectDateMessage: R = "Select Date",
+    countryCode: s,
+    renderActions: S,
+    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 t = {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      };
+      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) {
+      a(t.currentTarget);
+    }
+    function e() {
+      a(null);
+    }
+    Z(() => {
+      requestAnimationFrame(() => {
+        n != null && i.current && i.current.focus();
+      });
+    }, [n]);
+    function O(t) {
+      t.key === "Escape" && e();
+    }
+    function _() {
+      const t = i.current;
+      t?.focus();
+    }
+    function I(t) {
+      d?.(t), !r && e();
+    }
+    function j(t, z, K) {
+      w?.(t, z, K), e();
+    }
+    return /* @__PURE__ */ p(q, { children: [
+      /* @__PURE__ */ o(
+        J,
+        {
+          ref: v,
+          className: u(f.button, "select"),
+          hAlign: "start",
+          disabled: l,
+          hierarchy: x,
+          onClick: N,
+          width: y,
+          maxWidth: D,
+          ...b,
+          children: /* @__PURE__ */ o("span", { className: "ellipsis", children: P })
+        }
+      ),
+      /* @__PURE__ */ o(
+        H,
+        {
+          anchorElement: n,
+          disableClickAway: !0,
+          veil: !0,
+          onVeilClick: e,
+          onClose: e,
+          verticalAnchor: "bottom",
+          horizontalAnchor: "start",
+          verticalOrigin: "top",
+          horizontalOrigin: "start",
+          open: C,
+          isClickAwayException: m,
+          isScrollAwayException: m,
+          restoreFocus: !0,
+          children: /* @__PURE__ */ p(
+            G,
+            {
+              padding: "8px",
+              className: u(f.popover, "date-picker-popover"),
+              onKeyDown: O,
+              children: [
+                /* @__PURE__ */ o(
+                  Q,
+                  {
+                    ref: i,
+                    value: c,
+                    onChange: I,
+                    min: k,
+                    max: g,
+                    showTime: r,
+                    onError: h,
+                    disabled: l,
+                    disabledDates: E,
+                    countryCode: s,
+                    renderActions: S,
+                    onTimeSelected: j,
+                    timeIntervalInMinutes: A
+                  }
+                ),
+                /* @__PURE__ */ o(T, { onRedirect: _ })
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  ht as DatePickerInput
+};
+//# sourceMappingURL=date_picker_input.js.map