@tcn/ui 0.2.0 → 0.3.1

package/dist/inputs/combo_box/combo_box.js

@@ -1,14 +1,14 @@
-import { jsxs as D, Fragment as L, jsx as S } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
+import { jsxs as w, Fragment as D, jsx as S } from "react/jsx-runtime";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import N, { useRef as s, useState as x } from "react";
-import { useForkRef as V } from "../../utils/hooks/use_fork_ref.js";
+import L, { useRef as s, useState as x } from "react";
+import { useForkRef as N } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { clsx as z } from "clsx";
-import { SuggestionList as G } from "../suggestions/suggestion_list.js";
-import { Input as H } from "../input/input.js";
-const ee = N.forwardRef(function({
+import { clsx as V } from "clsx";
+import { SuggestionList as z } from "../suggestions/suggestion_list.js";
+import { Input as G } from "../input/input.js";
+const ee = L.forwardRef(function({
   onOptionSelect: a,
   children: C = [],
   onKeyDown: o,
@@ -21,18 +21,18 @@ const ee = N.forwardRef(function({
   onMouseUp: g,
   ...i
 }, y) {
-  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = V(y, f);
+  const A = s(!1), d = s(c), n = s(!1), [E, F] = x(null), f = s(null), [h, R] = x(!1), T = N(y, f);
   function l() {
     R(!0);
   }
   function r() {
     n.current = !1, R(!1);
   }
-  function I(e, t, w) {
+  function I(e, t, q) {
     n.current = !0;
     const u = f.current;
     requestAnimationFrame(() => {
-      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, w));
+      u != null && (u.value = e, u.focus(), u.setSelectionRange(t, q));
     }), i.onChange && i.onChange(e), r();
   }
   function M(e) {
@@ -53,25 +53,25 @@ const ee = N.forwardRef(function({
   function U(e) {
     F(e.currentTarget), A.current = document.activeElement === e.currentTarget, p && p(e);
   }
-  function q(e) {
+  function _(e) {
     n.current && (n.current = !1, r()), l(), g && g(e);
   }
-  return /* @__PURE__ */ D(L, { children: [
+  return /* @__PURE__ */ w(D, { children: [
     /* @__PURE__ */ S(
-      H,
+      G,
       {
         ref: T,
-        className: z(b, "combo-box-input"),
+        className: V(b, "combo-box-input"),
         ...i,
         value: c,
         onKeyDown: j,
         onKeyUp: B,
         onMouseDown: U,
-        onMouseUp: q
+        onMouseUp: _
       }
     ),
     h && /* @__PURE__ */ S(
-      G,
+      z,
       {
         anchorElement: E,
         onClose: I,

package/dist/inputs/date_picker/date_picker.js

@@ -1,14 +1,14 @@
 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 { useSignalValue as y, useSignalValueEffect as _ } from "@tcn/state";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import Y, { useState as R, useRef as L, useLayoutEffect as r } from "react";
+import Y, { useState as B, useRef as L, useLayoutEffect as r } from "react";
 import { useResizeObserver as O } from "../../utils/hooks/use_resize_observer.js";
 import { HStack as U } from "../../stacks/h_stack.js";
-import { Spacer as V } from "../../stacks/spacer.js";
+import { Spacer as R } from "../../stacks/spacer.js";
 import { VStack as u } from "../../stacks/v_stack.js";
-import { clsx as _ } from "clsx";
+import { clsx as V } from "clsx";
 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";
@@ -22,22 +22,22 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   min: g = null,
   max: b = null,
   minVisibleTimeInMilliseconds: m,
-  maxVisibleTimeInMilliseconds: p,
-  disabledDates: f,
+  maxVisibleTimeInMilliseconds: f,
+  disabledDates: p,
   countryCode: D = "en-US",
   renderActions: P,
   onTimeSelected: S,
   timeIntervalInMinutes: d
 }, H) {
-  const [F, I] = R(0), M = L(!1), j = O((t, o) => {
+  const [F, I] = B(0), M = L(!1), j = O((t, o) => {
     I(o);
-  }), [e] = R(() => {
+  }), [e] = B(() => {
     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), z = y(e.valueBroadcast), N = a.error;
-  return B((t) => {
+  return _((t) => {
     N !== t && x && x(t);
-  }, e.errorBroadcast), B((t) => {
+  }, e.errorBroadcast), _((t) => {
     M.current ? k && k(t) : M.current = !0;
   }, e.valueBroadcast), r(() => {
     e.initialize();
@@ -48,12 +48,12 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
   }, [e, g]), r(() => {
     e.setMaxDate(b);
   }, [e, b]), r(() => {
-    f == null ? e.setDisabledDates([]) : e.setDisabledDates(f);
-  }, [e, f]), r(() => {
+    p == null ? e.setDisabledDates([]) : e.setDisabledDates(p);
+  }, [e, p]), r(() => {
     typeof m == "number" && e.setMinVisibleTime(m);
   }, [e, m]), r(() => {
-    typeof p == "number" && e.setMaxVisibleTime(p);
-  }, [e, p]), r(() => {
+    typeof f == "number" && e.setMaxVisibleTime(f);
+  }, [e, f]), r(() => {
     typeof d == "number" && e.setTimeIntervalInMinutes(d);
   }, [e, d]), r(() => {
     e.selectDate(i);
@@ -63,7 +63,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
       ref: H,
       width: "auto",
       height: "auto",
-      className: _(w["date-picker"], "date-picker"),
+      className: V(w["date-picker"], "date-picker"),
       tabIndex: 0,
       children: [
         /* @__PURE__ */ l(
@@ -73,7 +73,7 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
             inline: !0,
             height: "auto",
             width: "auto",
-            className: _(w["date-picker-box"], "date-picker-box"),
+            className: V(w["date-picker-box"], "date-picker-box"),
             "data-is-disabled": h,
             children: [
               /* @__PURE__ */ l(u, { height: "auto", children: [
@@ -81,12 +81,12 @@ import '../../date_picker.css';const J = "_date-picker_0a0d8e4", K = "_date-pick
                 /* @__PURE__ */ n($, { countryCode: D, presenter: e })
               ] }),
               P && /* @__PURE__ */ n(u, { paddingInline: "8px", children: P(e) }),
-              /* @__PURE__ */ n(V, { height: "8px" })
+              /* @__PURE__ */ n(R, { height: "8px" })
             ]
           }
         ),
         s && /* @__PURE__ */ l(T, { children: [
-          /* @__PURE__ */ n(V, { width: "8px" }),
+          /* @__PURE__ */ n(R, { width: "8px" }),
           /* @__PURE__ */ n(
             G,
             {

package/dist/inputs/date_picker/date_picker_body.js

@@ -7,7 +7,7 @@ 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 }) {
+function j({ 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));
@@ -21,6 +21,6 @@ function V({ presenter: o, countryCode: p }) {
   ] });
 }
 export {
-  V as DatePickerBody
+  j as DatePickerBody
 };
 //# sourceMappingURL=date_picker_body.js.map

package/dist/inputs/date_picker/date_picker_input.js

@@ -1,8 +1,8 @@
-import { jsxs as m, Fragment as q, jsx as o } from "react/jsx-runtime";
+import { jsxs as u, 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 { clsx as u } from "clsx";
+import { Popper as H } from "../../overlay/popper/legacy/popper.js";
+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";
@@ -10,8 +10,8 @@ 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 { FocusRedirect as T } from "../../utils/focus_redirect.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(
@@ -33,17 +33,17 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     countryCode: s,
     renderActions: S,
     onTimeSelected: w,
-    ...b
-  }, v) => {
-    const [n, a] = L(null), C = n != null, i = M(null), p = V((t) => t.closest(".suggestion-list") != null, []), F = W(() => {
+    ..._
+  }, b) => {
+    const [n, a] = L(null), v = n != null, i = M(null), p = V((t) => t.closest(".suggestion-list") != null, []), C = 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 O(t) {
+    }, [s, r]), F = c != null ? C.format(c) : R;
+    function P(t) {
       a(t.currentTarget);
     }
     function e() {
@@ -54,7 +54,7 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
         n != null && i.current && i.current.focus();
       });
     }, [n]);
-    function _(t) {
+    function O(t) {
       t.key === "Escape" && e();
     }
     function I() {
@@ -67,20 +67,20 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
     function j(t, z, K) {
       w?.(t, z, K), e();
     }
-    return /* @__PURE__ */ m(q, { children: [
+    return /* @__PURE__ */ u(q, { children: [
       /* @__PURE__ */ o(
         J,
         {
-          ref: v,
-          className: u(f.button, "select"),
+          ref: b,
+          className: m(f.button, "select"),
           hAlign: "start",
           disabled: l,
           hierarchy: A,
-          onClick: O,
+          onClick: P,
           width: y,
           maxWidth: D,
-          ...b,
-          children: /* @__PURE__ */ o("span", { className: "ellipsis", children: P })
+          ..._,
+          children: /* @__PURE__ */ o("span", { className: "ellipsis", children: F })
         }
       ),
       /* @__PURE__ */ o(
@@ -95,16 +95,16 @@ import '../../date_picker_input.css';const U = "_button_f404820", X = "_popover_
           horizontalAnchor: "start",
           verticalOrigin: "top",
           horizontalOrigin: "start",
-          open: C,
+          open: v,
           isClickAwayException: p,
           isScrollAwayException: p,
           restoreFocus: !0,
-          children: /* @__PURE__ */ m(
+          children: /* @__PURE__ */ u(
             G,
             {
               padding: "8px",
-              className: u(f.popover, "date-picker-popover"),
-              onKeyDown: _,
+              className: m(f.popover, "date-picker-popover"),
+              onKeyDown: O,
               children: [
                 /* @__PURE__ */ o(
                   Q,

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 { 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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"}
+{"version":3,"file":"date_picker_input.js","sources":["../../../src/inputs/date_picker/date_picker_input.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { Hierarchy } from '../../utils/index.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { clsx } from 'clsx';\nimport { HTMLAttributes } from 'react';\nimport { Button } from '../../actions/index.js';\nimport { DatePicker } from './date_picker.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { FocusRedirect } from '../../utils/index.js';\nimport styles from './date_picker_input.module.css';\n\nexport interface DatePickerInputProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange' | 'onError'> {\n  value?: Date | null;\n  disabled?: boolean;\n  onChange?: (date: Date | null) => void;\n  onError?: (error: string | null) => void;\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  showTime?: boolean;\n  timeIntervalInMinutes?: number;\n  disabledDates?: Date[] | undefined;\n  countryCode?: string;\n  renderActions?: (datePickerPresenter: DatePickerPresenter) => React.ReactNode;\n  min?: Date;\n  max?: Date;\n  hierarchy?: Hierarchy;\n  selectDateMessage?: string;\n  onTimeSelected?: (hour: number, minutes: number, seconds: number) => void;\n}\n\nexport const DatePickerInput = React.forwardRef<HTMLButtonElement, DatePickerInputProps>(\n  (\n    {\n      value = new Date(),\n      onChange,\n      onError,\n      min = new Date('01/01/1924'),\n      max = new Date('01/01/2124'),\n      disabled,\n      width = '100%',\n      maxWidth,\n      minWidth,\n      showTime = false,\n      timeIntervalInMinutes = 15,\n      hierarchy = 'secondary',\n      disabledDates,\n      selectDateMessage = 'Select Date',\n      countryCode,\n      renderActions,\n      onTimeSelected,\n      ...props\n    }: DatePickerInputProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n    const isOpen = anchorElement != null;\n    const pickerRef = useRef<HTMLDivElement | null>(null);\n\n    const isException = useCallback((target: HTMLElement) => {\n      return target.closest('.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_year_input.js

@@ -7,7 +7,7 @@ import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import { clsx as d } from "clsx";
 import { useState as n } from "react";
-import { Popper as y } from "../../overlay/popper/popper.js";
+import { Popper as y } from "../../overlay/popper/legacy/popper.js";
 import { DatePickerYearSelector as g } from "./date_picker_year_selector.js";
 import { useSignalValue as b } from "@tcn/state";
 import '../../date_picker_year_input.css';const k = "_year-select_eb568a7", s = { "year-select": k };

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

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/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;"}
+{"version":3,"file":"date_picker_year_input.js","sources":["../../../src/inputs/date_picker/date_picker_year_input.tsx"],"sourcesContent":["import { Button } from '../../actions/index.js';\nimport { clsx } from 'clsx';\nimport styles from './date_picker_year_input.module.css';\nimport { useState } from 'react';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport { DatePickerYearSelector } from './date_picker_year_selector.js';\nimport { useSignalValue } from '@tcn/state';\n\nexport interface DatePickerYearInputProps {\n  presenter: DatePickerPresenter;\n}\n\nexport function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {\n  const { visibleYear } = useSignalValue(presenter.stateBroadcast);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  function close() {\n    setIsOpen(false);\n  }\n\n  function open(event: React.MouseEvent<HTMLButtonElement>) {\n    setButtonRef(event.currentTarget);\n    setIsOpen(true);\n  }\n\n  return (\n    <>\n      <Button\n        hierarchy=\"tertiary\"\n        className={clsx('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.js

@@ -20,8 +20,8 @@ import "../../footnote.module-DEyFuqOr.js";
 import { Headline as M } from "../../typography/headline/headline.js";
 import "../../subheadline.module-C-v7zMkQ.js";
 import "../../typography/title/title.js";
-import { FocusRedirect as T } from "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import { FocusRedirect as T } from "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import '../../date_picker_year_selector.css';const q = "_date-picker-year-selector_ab05e1f", A = "_date-picker-year-button_fded757", Y = { "date-picker-year-selector": q, "date-picker-year-button": A };

package/dist/inputs/input/input.js

@@ -1,11 +1,11 @@
 import { jsx as d } from "react/jsx-runtime";
-import { clsx as o } from "clsx";
-import f from "react";
-import '../../input.css';const c = "_input_a16553f", m = { input: c }, I = f.forwardRef(function({ type: i = "text", style: s, className: n, width: r, height: l, onChange: a, ...t }, u) {
+import { clsx as f } from "clsx";
+import o from "react";
+import '../../input.css';const c = "_input_a16553f", m = { input: c }, y = o.forwardRef(function({ type: i = "text", style: s, className: n, width: r, height: l, onChange: a, ...t }, u) {
   return /* @__PURE__ */ d(
     "input",
     {
-      className: o(m.input, n, "input"),
+      className: f(m.input, n, "input"),
       type: i,
       ref: u,
       "data-is-disabled": t.disabled || !1,
@@ -19,6 +19,6 @@ import '../../input.css';const c = "_input_a16553f", m = { input: c }, I = f.for
   );
 });
 export {
-  I as Input
+  y as Input
 };
 //# sourceMappingURL=input.js.map

package/dist/inputs/mask_input/key_capture_input.js

@@ -1,13 +1,13 @@
 import { jsx as L } from "react/jsx-runtime";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import j, { useRef as e } from "react";
-import { useForkRef as B } from "../../utils/hooks/use_fork_ref.js";
+import _, { useRef as e } from "react";
+import { useForkRef as j } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { Input as D } from "../input/input.js";
-const O = j.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: d, ...E }, v) {
-  const p = e(0), c = e(0), r = e(0), u = e(0), x = e(0), o = e(0), i = e(null), P = B(v, i);
+import { Input as B } from "../input/input.js";
+const N = _.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: d, ...E }, v) {
+  const p = e(0), c = e(0), r = e(0), u = e(0), x = e(0), o = e(0), i = e(null), P = j(v, i);
   function g(f) {
     const t = i.current;
     t != null && (p.current = t.value.length, c.current = t.selectionStart == null ? 0 : t.selectionStart, r.current = t.selectionEnd == null ? 0 : t.selectionEnd, o.current = r.current, u.current = Math.min(
@@ -71,9 +71,9 @@ const O = j.forwardRef(function({ onKeyCapture: n, onKeyDown: m, onInput: d, ...
     }
     d && d(f);
   }
-  return /* @__PURE__ */ L(D, { ref: P, onKeyDown: g, onInput: I, ...E });
+  return /* @__PURE__ */ L(B, { ref: P, onKeyDown: g, onInput: I, ...E });
 });
 export {
-  O as KeyCaptureInput
+  N as KeyCaptureInput
 };
 //# sourceMappingURL=key_capture_input.js.map

package/dist/inputs/mask_input/mask_input.js

@@ -1,13 +1,13 @@
 import { jsx as V } from "react/jsx-runtime";
 import { useSignalValue as B } from "@tcn/state";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import A, { useRef as I, useState as j, useLayoutEffect as p } from "react";
 import { useForkRef as K } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { KeyCaptureInput as F } from "./key_capture_input.js";
-import { MaskPresenter as _ } from "./mask_presenter.js";
+import { KeyCaptureInput as _ } from "./key_capture_input.js";
+import { MaskPresenter as F } from "./mask_presenter.js";
 const Y = A.forwardRef(
   function({
     value: m = "",
@@ -21,7 +21,7 @@ const Y = A.forwardRef(
     prepareCopyValue: y = (i) => i,
     ...C
   }, E) {
-    const i = Array.isArray(c) ? c : [c], f = I(null), D = K(E, f), [e] = j(() => new _(i)), P = B(e.valueBroadcast);
+    const i = Array.isArray(c) ? c : [c], f = I(null), D = K(E, f), [e] = j(() => new F(i)), P = B(e.valueBroadcast);
     B(e.maskConfigsBroadcast);
     function T(t, s, n, o, l, r) {
       switch (n != null ? e.setSelection(n.start, n.end) : e.forceMoveCursorTo(o), s) {
@@ -103,7 +103,7 @@ const Y = A.forwardRef(
         document.removeEventListener("selectionchange", l), document.removeEventListener("mousedown", n), document.removeEventListener("keydown", o);
       };
     }, [e]), /* @__PURE__ */ V(
-      F,
+      _,
       {
         value: P,
         ref: D,

package/dist/inputs/multi_combo_box/multi_combo_box.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as h, Fragment as C } from "react/jsx-runtime";
-import O, { useState as N } from "react";
+import O, { useState as _ } from "react";
 import { ComboBox as v } from "../combo_box/combo_box.js";
-import { MultiselectInlineValues as R } from "../multiselect/multiselect_inline_values.js";
-import { MultiselectValues as T } from "../multiselect/multiselect_values.js";
-import { makeAvailableOptions as g } from "../options/utils.js";
-import { Option as j } from "../options/option.js";
-import { clsx as k } from "clsx";
-import { VStack as _ } from "../../stacks/v_stack.js";
+import { MultiselectInlineValues as N } from "../multiselect/multiselect_inline_values.js";
+import { MultiselectValues as R } from "../multiselect/multiselect_values.js";
+import { makeAvailableOptions as T } from "../options/utils.js";
+import { Option as g } from "../options/option.js";
+import { clsx as j } from "clsx";
+import { VStack as k } from "../../stacks/v_stack.js";
 import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3", F = { "multi-combo-box-container": E }, P = O.forwardRef(function({
   value: e = [],
   children: M,
@@ -19,11 +19,11 @@ import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3
   inputProps: m,
   ...y
 }, S) {
-  const [f, l] = N(""), p = O.Children.toArray(
+  const [f, l] = _(""), u = O.Children.toArray(
     M
-  ), u = g(p, e), d = e.map((o) => {
-    const i = p.find((a) => a.props.value === o);
-    return i ?? /* @__PURE__ */ t(j, { value: o, label: o, children: o });
+  ), p = T(u, e), d = e.map((o) => {
+    const i = u.find((a) => a.props.value === o);
+    return i ?? /* @__PURE__ */ t(g, { value: o, label: o, children: o });
   });
   function x(o) {
     if (e.indexOf(o.props.value) > -1) {
@@ -49,11 +49,11 @@ import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3
         noOptionMatchedMessage: "Press Enter To Add",
         placeholder: "Type to Add",
         ...m,
-        children: u
+        children: p
       }
     ),
     /* @__PURE__ */ t(
-      R,
+      N,
       {
         values: d,
         disabled: n,
@@ -61,11 +61,11 @@ import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3
       }
     )
   ] }) : /* @__PURE__ */ h(
-    _,
+    k,
     {
       ref: S,
       ...y,
-      className: k(F["multi-combo-box-container"], A),
+      className: j(F["multi-combo-box-container"], A),
       children: [
         /* @__PURE__ */ t(
           v,
@@ -79,11 +79,11 @@ import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3
             noOptionMatchedMessage: "No Options Matched",
             placeholder: "Type to Search or Add",
             ...m,
-            children: u
+            children: p
           }
         ),
         /* @__PURE__ */ t(
-          T,
+          R,
           {
             values: d,
             onRemove: x,

package/dist/inputs/multiselect/multiselect.js

@@ -1,13 +1,13 @@
-import { jsxs as v, Fragment as j, jsx as l } from "react/jsx-runtime";
-import A, { useRef as V, useLayoutEffect as q } from "react";
-import { Spacer as C } from "../../stacks/spacer.js";
-import { VStack as E } from "../../stacks/v_stack.js";
-import { MultiselectInlineValues as N } from "./multiselect_inline_values.js";
-import { MultiselectValues as _ } from "./multiselect_values.js";
+import { jsxs as v, Fragment as w, jsx as l } from "react/jsx-runtime";
+import A, { useRef as V, useLayoutEffect as j } from "react";
+import { Spacer as q } from "../../stacks/spacer.js";
+import { VStack as C } from "../../stacks/v_stack.js";
+import { MultiselectInlineValues as E } from "./multiselect_inline_values.js";
+import { MultiselectValues as N } from "./multiselect_values.js";
 import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
 import { Select as S } from "../select/select.js";
-import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
+import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
@@ -26,7 +26,7 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   const r = V(null), F = L(m, r), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
     x
   ), p = g(f, e), d = I(f, e);
-  q(() => {
+  j(() => {
     const t = O.current;
     c != null && t != null && (t.querySelector(`[data-value='${c}']`)?.focus(), requestAnimationFrame(() => {
       r.current && r.current.focus();
@@ -37,11 +37,11 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   }
   function R(t) {
     if (e.indexOf(t.props.value) > -1) {
-      const M = e.filter((w) => w !== t.props.value);
+      const M = e.filter((_) => _ !== t.props.value);
       n && n(M);
     }
   }
-  return y ? /* @__PURE__ */ v(j, { children: [
+  return y ? /* @__PURE__ */ v(w, { children: [
     /* @__PURE__ */ l(
       S,
       {
@@ -55,9 +55,9 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
         children: p
       }
     ),
-    /* @__PURE__ */ l(C, { width: "8px" }),
+    /* @__PURE__ */ l(q, { width: "8px" }),
     /* @__PURE__ */ l(
-      N,
+      E,
       {
         values: d,
         onRemove: R,
@@ -65,7 +65,7 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
       }
     )
   ] }) : /* @__PURE__ */ v(
-    E,
+    C,
     {
       width: s,
       minWidth: i,
@@ -88,7 +88,7 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
           }
         ),
         /* @__PURE__ */ l(
-          _,
+          N,
           {
             disabled: o,
             values: d,