@forgedevstack/bear 1.0.5 → 1.0.7

package/dist/components/TimePicker/TimePicker.js

@@ -1,146 +1,112 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { useState as E, useRef as z, useEffect as x } from "react";
-import { DateTimePicker as F } from "../DateTimePicker/DateTimePicker.js";
-import { cn as l } from "../../utils/cn.js";
-import { formatTime as W } from "./TimePicker.utils.js";
-import { TIMEPICKER_HOURS_12H as q, TIMEPICKER_HOURS_24H as G, TIMEPICKER_MINUTES_DIVISOR as J, TIMEPICKER_LABEL_CLASSES as Q, variantClasses as X, sizeClasses as Y, TIMEPICKER_BUTTON_CLASSES as Z, TIMEPICKER_ERROR_CLASSES as $, TIMEPICKER_HELPER_CLASSES as g, TIMEPICKER_DROPDOWN_CLASSES as ee, TIMEPICKER_COLUMN_HEADER_CLASSES as u, TIMEPICKER_COLUMN_CLASSES as y, TIMEPICKER_OPTION_ACTIVE_CLASSES as N, TIMEPICKER_OPTION_INACTIVE_CLASSES as f, TIMEPICKER_OPTION_CLASSES as R, TIMEPICKER_FOOTER_CLASSES as te, TIMEPICKER_CLEAR_BUTTON_CLASSES as re, TIMEPICKER_CONFIRM_BUTTON_CLASSES as se, TIMEPICKER_ROOT_CLASSES as ie } from "./TimePicker.constants.js";
-const Ee = ({
-  mode: H = "time",
-  value: m,
-  onChange: s,
-  disabled: n = !1,
-  placeholder: T = "Select time",
-  label: S,
-  error: c,
-  helperText: I,
-  format: o = "12h",
-  minuteStep: _ = 5,
-  clearable: M = !0,
-  className: P,
-  size: b = "md",
-  variant: O = "default",
-  ...U
-}) => {
-  if (H === "datetime")
-    return /* @__PURE__ */ t(
-      F,
-      {
-        value: m instanceof Date ? m : null,
-        onChange: (e) => s == null ? void 0 : s(e),
-        disabled: n,
-        placeholder: T,
-        label: S,
-        error: c,
-        helperText: I,
-        timeFormat: o,
-        minuteStep: _,
-        clearable: M,
-        className: P,
-        size: b,
-        variant: O,
-        ...U
-      }
-    );
-  const a = m, [A, d] = E(!1), [L, p] = E(12), [h, v] = E(0), [k, K] = E("AM"), C = z(null);
-  x(() => {
-    if (a && typeof a == "string") {
-      const [e, r] = a.split(" "), [V, j] = e.split(":").map(Number);
-      p(V), v(j), r && K(r);
+import { jsx as a, jsxs as U } from "react/jsx-runtime";
+import { useState as u, useRef as g, useEffect as z, useCallback as _, useMemo as ee } from "react";
+import { cn as B } from "../../utils/cn.js";
+import { useMediaQuery as te } from "../../hooks/useMediaQuery.js";
+import { formatTime as re } from "./TimePicker.utils.js";
+import { TIMEPICKER_DEFAULT_BREAKPOINT as ae, TIMEPICKER_VARIANT_COLUMNS as R, TIMEPICKER_FORMAT_12H as E, TIMEPICKER_HOURS_12H as oe, TIMEPICKER_HOURS_24H as ne, TIMEPICKER_MINUTES_DIVISOR as se, TIMEPICKER_VARIANT_DIAL as S, TIMEPICKER_LABEL_CLASSES as le, variantClasses as de, sizeClasses as ie, TIMEPICKER_BUTTON_CLASSES as ce, TIMEPICKER_ERROR_CLASSES as me, TIMEPICKER_HELPER_CLASSES as ue, TIMEPICKER_ROOT_CLASSES as Ee, TIMEPICKER_FORMAT_24H as fe, TIMEPICKER_VARIANT_AUTO as Ie } from "./TimePicker.constants.js";
+import { TimePickerColumnsDropdown as pe } from "./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js";
+import { TimePickerDialDropdown as Ce } from "./components/TimePickerDialDropdown/TimePickerDialDropdown.js";
+const Te = /* @__PURE__ */ a("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), ke = (e) => {
+  const F = {
+    value: e.value,
+    onChange: e.onChange,
+    disabled: e.disabled ?? !1,
+    placeholder: e.placeholder ?? "Select time",
+    label: e.label,
+    error: e.error,
+    helperText: e.helperText,
+    format: e.format ?? E,
+    minuteStep: e.minuteStep ?? 5,
+    clearable: e.clearable ?? !0,
+    className: e.className,
+    size: e.size ?? "md",
+    variant: e.variant ?? "default",
+    dropdownVariant: e.dropdownVariant ?? R,
+    dropdownVariantBreakpoint: e.dropdownVariantBreakpoint ?? ae,
+    icon: e.icon,
+    translations: e.translations
+  }, {
+    value: P,
+    onChange: n,
+    disabled: f,
+    placeholder: j,
+    label: b,
+    error: l,
+    helperText: h,
+    format: s,
+    minuteStep: I,
+    clearable: M,
+    className: W,
+    size: Q,
+    variant: $,
+    dropdownVariant: A,
+    dropdownVariantBreakpoint: q,
+    icon: G,
+    translations: N
+  } = F, J = te(`(min-width: ${q}px)`), k = A === Ie ? J ? S : R : A, v = k === S && s === fe ? R : k, r = P, [p, d] = u(!1), [i, w] = u(12), [c, L] = u(0), [m, O] = u("AM"), C = g(null);
+  z(() => {
+    if (r && typeof r == "string") {
+      const [o, t] = r.split(" "), [Y, Z] = o.split(":").map(Number);
+      w(Y), L(Z), t && O(t);
     }
-  }, [a]), x(() => {
-    const e = (r) => {
-      C.current && !C.current.contains(r.target) && d(!1);
+  }, [r]), z(() => {
+    const o = (t) => {
+      C.current && !C.current.contains(t.target) && d(!1);
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
   }, []);
-  const w = () => {
-    s == null || s(W(L, h, k, o)), d(!1);
-  }, D = o === "12h" ? Array.from({ length: q }, (e, r) => r + 1) : Array.from({ length: G }, (e, r) => r), B = Array.from(
-    { length: J / _ },
-    (e, r) => r * _
-  );
-  return /* @__PURE__ */ i("div", { ref: C, className: l(ie, P), children: [
-    S && /* @__PURE__ */ t("label", { className: Q, children: S }),
-    /* @__PURE__ */ i(
+  const K = _(() => {
+    n == null || n(re(i, c, m, s ?? E)), d(!1);
+  }, [n, i, c, m, s]), x = s === E ? Array.from({ length: oe }, (o, t) => t + 1) : Array.from({ length: ne }, (o, t) => t), V = Array.from(
+    { length: se / (I ?? 5) },
+    (o, t) => t * (I ?? 5)
+  ), y = _(() => d(!1), []), H = s ?? E, D = I ?? 5, T = ee(
+    () => ({
+      selectedHour: i,
+      setSelectedHour: w,
+      selectedMinute: c,
+      setSelectedMinute: L,
+      period: m,
+      setPeriod: O,
+      format: H,
+      hours: x,
+      minutes: V,
+      timeValue: r,
+      clearable: M ?? !0,
+      onChange: n,
+      onConfirm: K,
+      onClose: y,
+      translations: N
+    }),
+    [i, c, m, H, x, V, r, M, n, K, y, N]
+  ), X = _(() => p ? v === S ? /* @__PURE__ */ a(Ce, { ...T, minuteStep: D }) : /* @__PURE__ */ a(pe, { ...T }) : null, [p, v, T, D]);
+  return /* @__PURE__ */ U("div", { ref: C, className: B(Ee, W), children: [
+    b && /* @__PURE__ */ a("label", { className: le, children: b }),
+    /* @__PURE__ */ U(
       "button",
       {
         type: "button",
-        onClick: () => !n && d(!A),
-        disabled: n,
-        className: l(
-          Z,
-          Y[b],
-          X[O],
-          c ? "bear-border-red-500" : "focus:bear-border-pink-500",
-          n && "bear-opacity-50 bear-cursor-not-allowed",
-          a ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-400 dark:bear-text-zinc-500"
+        onClick: () => !f && d(!p),
+        disabled: f,
+        className: B(
+          ce,
+          ie[Q ?? "md"],
+          de[$ ?? "default"],
+          l ? "bear-border-red-500" : "focus:bear-border-pink-500",
+          f && "bear-opacity-50 bear-cursor-not-allowed",
+          r ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-400 dark:bear-text-zinc-500"
         ),
         children: [
-          /* @__PURE__ */ t("span", { children: a || T }),
-          /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-gray-400 dark:bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) })
+          /* @__PURE__ */ a("span", { children: r || j }),
+          G ?? Te
         ]
       }
     ),
-    c && /* @__PURE__ */ t("p", { className: $, children: c }),
-    I && !c && /* @__PURE__ */ t("p", { className: g, children: I }),
-    A && /* @__PURE__ */ i("div", { className: ee, children: [
-      /* @__PURE__ */ i("div", { className: "bear-flex bear-gap-2 bear-mb-3", children: [
-        /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ t("div", { className: u, children: "Hour" }),
-          /* @__PURE__ */ t("div", { className: y, children: D.map((e) => /* @__PURE__ */ t(
-            "button",
-            {
-              onClick: () => p(e),
-              className: l(
-                R,
-                L === e ? N : f
-              ),
-              children: e.toString().padStart(2, "0")
-            },
-            e
-          )) })
-        ] }),
-        /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ t("div", { className: u, children: "Minute" }),
-          /* @__PURE__ */ t("div", { className: y, children: B.map((e) => /* @__PURE__ */ t(
-            "button",
-            {
-              onClick: () => v(e),
-              className: l(
-                R,
-                h === e ? N : f
-              ),
-              children: e.toString().padStart(2, "0")
-            },
-            e
-          )) })
-        ] }),
-        o === "12h" && /* @__PURE__ */ i("div", { className: "bear-flex-1", children: [
-          /* @__PURE__ */ t("div", { className: u, children: "Period" }),
-          /* @__PURE__ */ t("div", { className: "bear-space-y-1", children: ["AM", "PM"].map((e) => /* @__PURE__ */ t(
-            "button",
-            {
-              onClick: () => K(e),
-              className: l(
-                R,
-                "bear-py-2",
-                k === e ? N : f
-              ),
-              children: e
-            },
-            e
-          )) })
-        ] })
-      ] }),
-      /* @__PURE__ */ i("div", { className: te, children: [
-        M && a && /* @__PURE__ */ t("button", { onClick: () => {
-          s == null || s(""), d(!1);
-        }, className: re, children: "Clear" }),
-        /* @__PURE__ */ t("button", { onClick: w, className: se, children: "Confirm" })
-      ] })
-    ] })
+    l && /* @__PURE__ */ a("p", { className: me, children: l }),
+    h && !l && /* @__PURE__ */ a("p", { className: ue, children: h }),
+    X()
   ] });
 };
 export {
-  Ee as TimePicker
+  ke as TimePicker
 };

package/dist/components/TimePicker/TimePicker.types.d.ts

@@ -1,15 +1,48 @@
+/** Dropdown variant: columns (scrollable lists), dial (clock face), auto (responsive). */
+export type TimePickerDropdownVariant = 'columns' | 'dial' | 'auto';
+/** Time format: 12-hour with AM/PM or 24-hour. */
+export type TimePickerFormat = '12h' | '24h';
+/** Translation keys for replaceable strings. */
+export interface TimePickerTranslations {
+    selectTime?: string;
+    hour?: string;
+    minute?: string;
+    period?: string;
+    cancel?: string;
+    ok?: string;
+}
+/** Props for TimePickerColumnsDropdown sub-component. */
+export interface TimePickerColumnsProps {
+    selectedHour: number;
+    setSelectedHour: (h: number) => void;
+    selectedMinute: number;
+    setSelectedMinute: (m: number) => void;
+    period: 'AM' | 'PM';
+    setPeriod: (p: 'AM' | 'PM') => void;
+    format: TimePickerFormat;
+    hours: number[];
+    minutes: number[];
+    timeValue?: string;
+    clearable: boolean;
+    onChange?: (time: string | null) => void;
+    onConfirm: () => void;
+    onClose: () => void;
+    translations?: TimePickerTranslations;
+}
+/** Props for TimePickerDialDropdown sub-component. */
+export interface TimePickerDialProps extends TimePickerColumnsProps {
+    minuteStep: number;
+}
 export interface TimePickerProps {
-    /** Time-only (string) or date+time (Date). When 'datetime', uses Calendar + time. */
-    mode?: 'time' | 'datetime';
-    /** Time string (e.g. "02:30 PM") when mode='time'; Date when mode='datetime' */
-    value?: string | Date | null;
-    onChange?: (time: string | Date | null) => void;
+    /** Time string (e.g. "02:30 PM") */
+    value?: string | null;
+    onChange?: (time: string | null) => void;
     disabled?: boolean;
     placeholder?: string;
     label?: string;
     error?: string;
     helperText?: string;
-    format?: '12h' | '24h';
+    format?: TimePickerFormat;
     minuteStep?: number;
     minTime?: string;
     maxTime?: string;
@@ -17,4 +50,12 @@ export interface TimePickerProps {
     className?: string;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'default' | 'filled' | 'outline';
+    /** Dropdown variant: columns (scrollable lists), dial (clock face), auto (responsive by breakpoint). */
+    dropdownVariant?: TimePickerDropdownVariant;
+    /** Breakpoint (px) for auto: use dial above, columns below. Default 768. */
+    dropdownVariantBreakpoint?: number;
+    /** Custom icon to replace the default clock icon (ReactNode). */
+    icon?: React.ReactNode;
+    /** Translation overrides for selectTime, hour, minute, period, cancel, ok. */
+    translations?: TimePickerTranslations;
 }

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("../../../../utils/cn.cjs"),e=require("../../TimePicker.constants.cjs"),O=({selectedHour:I,setSelectedHour:_,selectedMinute:r,setSelectedMinute:a,period:l,setPeriod:C,format:T,hours:n,minutes:N,timeValue:P,clearable:d,onChange:S,onConfirm:t,onClose:m,translations:A})=>{const c={...e.TIMEPICKER_DEFAULT_TRANSLATIONS,...A};return s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"Bear-TimePicker__columns bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.hour}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:n.map(E=>s.jsx("button",{onClick:()=>_(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,I===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.minute}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:N.map(E=>s.jsx("button",{onClick:()=>a(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,r===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E.toString().padStart(2,"0")},E))})]}),T==="12h"&&s.jsxs("div",{className:"Bear-TimePicker__column bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:c.period}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(E=>s.jsx("button",{onClick:()=>C(E),className:i.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",l===E?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:E},E))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[d&&P&&s.jsx("button",{onClick:()=>{S==null||S(null),m()},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:c.cancel}),s.jsx("button",{onClick:t,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:c.ok})]})]})};exports.TimePickerColumnsDropdown=O;

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TimePickerColumnsProps } from '../../TimePicker.types';
+export declare const TimePickerColumnsDropdown: FC<TimePickerColumnsProps>;

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.js

@@ -0,0 +1,81 @@
+import { jsxs as a, jsx as c } from "react/jsx-runtime";
+import { cn as r } from "../../../../utils/cn.js";
+import { TIMEPICKER_DROPDOWN_CLASSES as u, TIMEPICKER_DEFAULT_TRANSLATIONS as L, TIMEPICKER_COLUMN_HEADER_CLASSES as s, TIMEPICKER_COLUMN_CLASSES as d, TIMEPICKER_OPTION_ACTIVE_CLASSES as E, TIMEPICKER_OPTION_INACTIVE_CLASSES as m, TIMEPICKER_OPTION_CLASSES as n, TIMEPICKER_FOOTER_CLASSES as h, TIMEPICKER_CLEAR_BUTTON_CLASSES as v, TIMEPICKER_CONFIRM_BUTTON_CLASSES as k } from "../../TimePicker.constants.js";
+const x = ({
+  selectedHour: S,
+  setSelectedHour: _,
+  selectedMinute: N,
+  setSelectedMinute: I,
+  period: T,
+  setPeriod: o,
+  format: t,
+  hours: C,
+  minutes: P,
+  timeValue: A,
+  clearable: O,
+  onChange: l,
+  onConfirm: R,
+  onClose: M,
+  translations: b
+}) => {
+  const i = { ...L, ...b };
+  return /* @__PURE__ */ a("div", { className: u, children: [
+    /* @__PURE__ */ a("div", { className: "Bear-TimePicker__columns bear-flex bear-gap-2 bear-mb-3", children: [
+      /* @__PURE__ */ a("div", { className: "Bear-TimePicker__column bear-flex-1", children: [
+        /* @__PURE__ */ c("div", { className: s, children: i.hour }),
+        /* @__PURE__ */ c("div", { className: d, children: C.map((e) => /* @__PURE__ */ c(
+          "button",
+          {
+            onClick: () => _(e),
+            className: r(
+              n,
+              S === e ? E : m
+            ),
+            children: e.toString().padStart(2, "0")
+          },
+          e
+        )) })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "Bear-TimePicker__column bear-flex-1", children: [
+        /* @__PURE__ */ c("div", { className: s, children: i.minute }),
+        /* @__PURE__ */ c("div", { className: d, children: P.map((e) => /* @__PURE__ */ c(
+          "button",
+          {
+            onClick: () => I(e),
+            className: r(
+              n,
+              N === e ? E : m
+            ),
+            children: e.toString().padStart(2, "0")
+          },
+          e
+        )) })
+      ] }),
+      t === "12h" && /* @__PURE__ */ a("div", { className: "Bear-TimePicker__column bear-flex-1", children: [
+        /* @__PURE__ */ c("div", { className: s, children: i.period }),
+        /* @__PURE__ */ c("div", { className: "bear-space-y-1", children: ["AM", "PM"].map((e) => /* @__PURE__ */ c(
+          "button",
+          {
+            onClick: () => o(e),
+            className: r(
+              n,
+              "bear-py-2",
+              T === e ? E : m
+            ),
+            children: e
+          },
+          e
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: h, children: [
+      O && A && /* @__PURE__ */ c("button", { onClick: () => {
+        l == null || l(null), M();
+      }, className: v, children: i.cancel }),
+      /* @__PURE__ */ c("button", { onClick: R, className: k, children: i.ok })
+    ] })
+  ] });
+};
+export {
+  x as TimePickerColumnsDropdown
+};

package/dist/components/TimePicker/components/TimePickerColumnsDropdown/index.d.ts

@@ -0,0 +1 @@
+export { TimePickerColumnsDropdown } from './TimePickerColumnsDropdown';

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),M=require("react"),b=require("../../../../utils/cn.cjs"),a=require("../../TimePicker.constants.cjs"),B=require("../../helpers/ClockFaceSvg.cjs"),R=({selectedHour:i,setSelectedHour:d,selectedMinute:n,setSelectedMinute:m,period:x,setPeriod:u,format:t,hours:k,minutes:_,timeValue:h,clearable:T,onChange:s,onConfirm:p,onClose:S,translations:j})=>{const[N,l]=M.useState("hour"),c={...a.TIMEPICKER_DEFAULT_TRANSLATIONS,...j},P=t==="12h"?i===12?12:i%12:i,v=n,g=`${P.toString().padStart(2,"0")}:${v.toString().padStart(2,"0")}`,y=t==="12h"?[...a.CLOCK_HOURS_12]:k,o=N==="hour",C=o?y:_,E=o?r=>d(t==="12h"&&r===0?12:r):m;return e.jsxs("div",{className:b.cn(a.TIMEPICKER_DROPDOWN_CLASSES,"Bear-TimePicker__dial bear-w-72"),children:[e.jsx("div",{className:"Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2",children:c.selectTime}),e.jsxs("div",{className:"Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-3 bear-mb-4",children:[e.jsx("span",{className:"Bear-TimePicker__dial-time bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white",children:g}),t==="12h"&&e.jsx("div",{className:"Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5",children:["AM","PM"].map(r=>e.jsx("button",{onClick:()=>u(r),className:b.cn("Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",x===r?"bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium":"bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"),children:r},r))})]}),e.jsxs("div",{className:"Bear-TimePicker__dial-mode bear-flex bear-items-center bear-justify-center bear-gap-2 bear-mb-2",children:[e.jsx("button",{type:"button",onClick:()=>l("hour"),className:"Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700","aria-label":"Hour mode",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),e.jsx("button",{type:"button",onClick:()=>l("minute"),className:"Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700","aria-label":"Minute mode",children:e.jsx("svg",{className:"bear-w-4 bear-h-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]}),e.jsx("div",{className:"Bear-TimePicker__dial-face bear-relative bear-w-48 bear-h-48 bear-mx-auto bear-mb-4",children:e.jsx(B.ClockFaceSvg,{values:C,isHourMode:o,format:t,selectedHour:i,selectedMinute:n,onSelect:E})}),e.jsxs("div",{className:a.TIMEPICKER_FOOTER_CLASSES,children:[T&&h&&e.jsx("button",{onClick:()=>{s==null||s(null),S()},className:a.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:c.cancel}),e.jsx("button",{onClick:p,className:a.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:c.ok})]})]})};exports.TimePickerDialDropdown=R;

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TimePickerDialProps } from '../../TimePicker.types';
+export declare const TimePickerDialDropdown: FC<TimePickerDialProps>;

package/dist/components/TimePicker/components/TimePickerDialDropdown/TimePickerDialDropdown.js

@@ -0,0 +1,84 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as M } from "react";
+import { cn as s } from "../../../../utils/cn.js";
+import { TIMEPICKER_DEFAULT_TRANSLATIONS as f, CLOCK_HOURS_12 as I, TIMEPICKER_FOOTER_CLASSES as L, TIMEPICKER_CLEAR_BUTTON_CLASSES as R, TIMEPICKER_CONFIRM_BUTTON_CLASSES as O, TIMEPICKER_DROPDOWN_CLASSES as A } from "../../TimePicker.constants.js";
+import { ClockFaceSvg as w } from "../../helpers/ClockFaceSvg.js";
+const U = ({
+  selectedHour: t,
+  setSelectedHour: d,
+  selectedMinute: b,
+  setSelectedMinute: m,
+  period: k,
+  setPeriod: _,
+  format: a,
+  hours: u,
+  minutes: h,
+  timeValue: p,
+  clearable: x,
+  onChange: o,
+  onConfirm: T,
+  onClose: S,
+  translations: N
+}) => {
+  const [v, n] = M("hour"), c = { ...f, ...N }, C = a === "12h" ? t === 12 ? 12 : t % 12 : t, P = b, y = `${C.toString().padStart(2, "0")}:${P.toString().padStart(2, "0")}`, E = a === "12h" ? [...I] : u, l = v === "hour", g = l ? E : h, B = l ? (r) => d(a === "12h" && r === 0 ? 12 : r) : m;
+  return /* @__PURE__ */ i("div", { className: s(A, "Bear-TimePicker__dial bear-w-72"), children: [
+    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-title bear-text-center bear-uppercase bear-text-xs bear-text-gray-500 dark:bear-text-zinc-400 bear-mb-2", children: c.selectTime }),
+    /* @__PURE__ */ i("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-3 bear-mb-4", children: [
+      /* @__PURE__ */ e("span", { className: "Bear-TimePicker__dial-time bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white", children: y }),
+      a === "12h" && /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5", children: ["AM", "PM"].map((r) => /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => _(r),
+          className: s(
+            "Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",
+            k === r ? "bear-text-blue-600 dark:bear-text-blue-400 bear-font-medium" : "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-400"
+          ),
+          children: r
+        },
+        r
+      )) })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "Bear-TimePicker__dial-mode bear-flex bear-items-center bear-justify-center bear-gap-2 bear-mb-2", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => n("hour"),
+          className: "Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
+          "aria-label": "Hour mode",
+          children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => n("minute"),
+          className: "Bear-TimePicker__dial-mode-btn bear-p-1 bear-rounded bear-text-gray-500 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
+          "aria-label": "Minute mode",
+          children: /* @__PURE__ */ e("svg", { className: "bear-w-4 bear-h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-face bear-relative bear-w-48 bear-h-48 bear-mx-auto bear-mb-4", children: /* @__PURE__ */ e(
+      w,
+      {
+        values: g,
+        isHourMode: l,
+        format: a,
+        selectedHour: t,
+        selectedMinute: b,
+        onSelect: B
+      }
+    ) }),
+    /* @__PURE__ */ i("div", { className: L, children: [
+      x && p && /* @__PURE__ */ e("button", { onClick: () => {
+        o == null || o(null), S();
+      }, className: R, children: c.cancel }),
+      /* @__PURE__ */ e("button", { onClick: T, className: O, children: c.ok })
+    ] })
+  ] });
+};
+export {
+  U as TimePickerDialDropdown
+};

package/dist/components/TimePicker/components/TimePickerDialDropdown/index.d.ts

@@ -0,0 +1 @@
+export { TimePickerDialDropdown } from './TimePickerDialDropdown';

package/dist/components/TimePicker/helpers/ClockFaceSvg.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs"),e=require("../TimePicker.constants.cjs"),E=({values:t,isHourMode:n,format:i,selectedHour:a,selectedMinute:l,onSelect:b,className:h})=>{const f=c=>n?(c*30-90)*(Math.PI/180):(c*(360/t.length)-90)*(Math.PI/180),s=(n?(i==="12h"?a===12?0:a%12:a)*30-90:l*6-90)*Math.PI/180;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",h),children:[r.jsx("circle",{cx:e.CLOCK_CENTER,cy:e.CLOCK_CENTER,r:e.CLOCK_RADIUS,className:"Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"}),t.map((c,x)=>{const C=f(x),o=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.cos(C),_=e.CLOCK_CENTER+e.CLOCK_RADIUS*.85*Math.sin(C),k=n?i==="12h"?c===12?a===12:a%12===c:a===c:l===c;return r.jsxs("g",{onClick:()=>b(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[k&&r.jsx("circle",{cx:o,cy:_,r:14,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),r.jsx("text",{x:o,y:_,textAnchor:"middle",dominantBaseline:"middle",className:m.cn("Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",k?"bear-fill-white":"bear-fill-gray-700 dark:bear-fill-zinc-300"),children:typeof c=="number"?c.toString().padStart(2,"0"):c})]},c)}),r.jsx("line",{x1:e.CLOCK_CENTER,y1:e.CLOCK_CENTER,x2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.cos(s),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*.6*Math.sin(s),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=E;

package/dist/components/TimePicker/helpers/ClockFaceSvg.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+export interface ClockFaceSvgProps {
+    /** Clock face values (hours or minutes) */
+    values: readonly number[] | number[];
+    /** Whether in hour mode (different angle calc) */
+    isHourMode: boolean;
+    /** Format: 12h or 24h */
+    format: '12h' | '24h';
+    /** Current selected hour (for hour mode) */
+    selectedHour: number;
+    /** Current selected minute (for minute mode) */
+    selectedMinute: number;
+    /** Callback when value is clicked */
+    onSelect: (v: number) => void;
+    /** Optional class name */
+    className?: string;
+}
+export declare const ClockFaceSvg: FC<ClockFaceSvgProps>;

package/dist/components/TimePicker/helpers/ClockFaceSvg.js

@@ -0,0 +1,67 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { cn as _ } from "../../../utils/cn.js";
+import { CLOCK_RADIUS as c, CLOCK_CENTER as a } from "../TimePicker.constants.js";
+const N = ({
+  values: i,
+  isHourMode: t,
+  format: l,
+  selectedHour: r,
+  selectedMinute: o,
+  onSelect: g,
+  className: x
+}) => {
+  const d = (e) => t ? (e * 30 - 90) * (Math.PI / 180) : (e * (360 / i.length) - 90) * (Math.PI / 180), s = (t ? (l === "12h" ? r === 12 ? 0 : r % 12 : r) * 30 - 90 : o * 6 - 90) * Math.PI / 180;
+  return /* @__PURE__ */ f("svg", { viewBox: "0 0 200 200", className: _("Bear-TimePicker__clock-face bear-w-full bear-h-full", x), children: [
+    /* @__PURE__ */ n(
+      "circle",
+      {
+        cx: a,
+        cy: a,
+        r: c,
+        className: "Bear-TimePicker__clock-face-circle bear-fill-none bear-stroke-gray-200 dark:bear-stroke-zinc-700 bear-stroke-2"
+      }
+    ),
+    i.map((e, p) => {
+      const m = d(p), k = a + c * 0.85 * Math.cos(m), h = a + c * 0.85 * Math.sin(m), b = t ? l === "12h" ? e === 12 ? r === 12 : r % 12 === e : r === e : o === e;
+      return /* @__PURE__ */ f(
+        "g",
+        {
+          onClick: () => g(e),
+          className: "Bear-TimePicker__clock-face-item bear-cursor-pointer",
+          children: [
+            b && /* @__PURE__ */ n("circle", { cx: k, cy: h, r: 14, className: "Bear-TimePicker__clock-face-dot bear-fill-blue-500" }),
+            /* @__PURE__ */ n(
+              "text",
+              {
+                x: k,
+                y: h,
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                className: _(
+                  "Bear-TimePicker__clock-face-text bear-text-sm bear-font-medium bear-pointer-events-none",
+                  b ? "bear-fill-white" : "bear-fill-gray-700 dark:bear-fill-zinc-300"
+                ),
+                children: typeof e == "number" ? e.toString().padStart(2, "0") : e
+              }
+            )
+          ]
+        },
+        e
+      );
+    }),
+    /* @__PURE__ */ n(
+      "line",
+      {
+        x1: a,
+        y1: a,
+        x2: a + c * 0.6 * Math.cos(s),
+        y2: a + c * 0.6 * Math.sin(s),
+        className: "Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+};
+export {
+  N as ClockFaceSvg
+};

package/dist/components/TimePicker/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export { ClockFaceSvg } from './ClockFaceSvg';
+export type { ClockFaceSvgProps } from './ClockFaceSvg';

package/dist/components/TimePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { TimePicker } from './TimePicker';
-export type { TimePickerProps } from './TimePicker.types';
+export type { TimePickerProps, TimePickerColumnsProps, TimePickerDialProps, TimePickerTranslations, TimePickerFormat, TimePickerDropdownVariant, } from './TimePicker.types';

package/dist/components/VirtualList/VirtualList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),$=require("../../utils/cn.cjs");function g({items:l,itemHeight:t,overscan:f=3,height:e,renderItem:d,keyExtractor:x=(u,i)=>i,className:p}){const[u,i]=s.useState(0),[v,y]=s.useState(typeof e=="number"?e:300),o=s.useRef(null),S=l.length*t,b=Math.max(0,Math.floor(u/t)-f),h=Math.min(l.length-1,Math.ceil((u+v)/t)+f),j=l.slice(b,h+1),m=b*t,R=s.useCallback(()=>{o.current&&i(o.current.scrollTop)},[]);return s.useEffect(()=>{const r=o.current;if(r&&typeof e=="string"){const n=new ResizeObserver(a=>{for(const M of a)y(M.contentRect.height)});return n.observe(r),()=>n.disconnect()}},[e]),c.jsx("div",{ref:o,className:$.cn("Bear-VirtualList bear-overflow-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-lg",p),style:{height:typeof e=="number"?`${e}px`:e},onScroll:R,children:c.jsx("div",{className:"bear-relative",style:{height:`${S}px`},children:c.jsx("div",{className:"bear-absolute bear-inset-x-0 bear-top-0",style:{transform:`translateY(${m}px)`},children:j.map((r,n)=>{const a=b+n;return c.jsx("div",{className:"bear-absolute bear-inset-x-0 bear-top-0",style:{height:`${t}px`,transform:`translateY(${n*t}px)`},children:d(r,a)},x(r,a))})})})})}exports.VirtualList=g;

package/dist/components/VirtualList/VirtualList.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { VirtualListProps } from './VirtualList.types';
+export declare function VirtualList<T>({ items, itemHeight, overscan, height, renderItem, keyExtractor, className, }: VirtualListProps<T>): ReactElement;