@forgedevstack/bear 1.0.4 → 1.0.6

package/dist/components/TimePicker/TimePicker.constants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,a=60,b={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},E={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},t="Bear-TimePicker bear-relative",_="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",S="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",I="Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",C="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",T="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",o="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",i="bear-bg-pink-500 bear-text-white",n="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",R="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",c="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",P="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600",s="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",d="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.TIMEPICKER_BUTTON_CLASSES=S;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=c;exports.TIMEPICKER_COLUMN_CLASSES=T;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=C;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=P;exports.TIMEPICKER_DROPDOWN_CLASSES=I;exports.TIMEPICKER_ERROR_CLASSES=s;exports.TIMEPICKER_FOOTER_CLASSES=R;exports.TIMEPICKER_HELPER_CLASSES=d;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=_;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=i;exports.TIMEPICKER_OPTION_CLASSES=o;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=n;exports.TIMEPICKER_ROOT_CLASSES=t;exports.sizeClasses=b;exports.variantClasses=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=12,r=24,a=60,E=768,_="12h",I="24h",b="auto",t="dial",T="columns",C=80,S=100,R=[12,1,2,3,4,5,6,7,8,9,10,11],o={selectTime:"SELECT TIME",hour:"Hour",minute:"Minute",period:"Period",cancel:"CANCEL",ok:"OK"},n={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4",lg:"bear-py-2.5 bear-px-5 bear-text-lg"},P={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",filled:"bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"},i="Bear-TimePicker bear-relative",c="Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",A="Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",s="Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",O="Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center",M="Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1",L="Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",K="bear-bg-pink-500 bear-text-white",d="bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",l="Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700",N="Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600",x="Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600",g="Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500",m="Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";exports.CLOCK_CENTER=S;exports.CLOCK_HOURS_12=R;exports.CLOCK_RADIUS=C;exports.TIMEPICKER_BUTTON_CLASSES=A;exports.TIMEPICKER_CLEAR_BUTTON_CLASSES=N;exports.TIMEPICKER_COLUMN_CLASSES=M;exports.TIMEPICKER_COLUMN_HEADER_CLASSES=O;exports.TIMEPICKER_CONFIRM_BUTTON_CLASSES=x;exports.TIMEPICKER_DEFAULT_BREAKPOINT=E;exports.TIMEPICKER_DEFAULT_TRANSLATIONS=o;exports.TIMEPICKER_DROPDOWN_CLASSES=s;exports.TIMEPICKER_ERROR_CLASSES=g;exports.TIMEPICKER_FOOTER_CLASSES=l;exports.TIMEPICKER_FORMAT_12H=_;exports.TIMEPICKER_FORMAT_24H=I;exports.TIMEPICKER_HELPER_CLASSES=m;exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_LABEL_CLASSES=c;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.TIMEPICKER_OPTION_ACTIVE_CLASSES=K;exports.TIMEPICKER_OPTION_CLASSES=L;exports.TIMEPICKER_OPTION_INACTIVE_CLASSES=d;exports.TIMEPICKER_ROOT_CLASSES=i;exports.TIMEPICKER_VARIANT_AUTO=b;exports.TIMEPICKER_VARIANT_COLUMNS=T;exports.TIMEPICKER_VARIANT_DIAL=t;exports.sizeClasses=n;exports.variantClasses=P;

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

@@ -1,12 +1,33 @@
 export declare const TIMEPICKER_HOURS_12H = 12;
 export declare const TIMEPICKER_HOURS_24H = 24;
 export declare const TIMEPICKER_MINUTES_DIVISOR = 60;
+export declare const TIMEPICKER_DEFAULT_BREAKPOINT = 768;
+/** Format constants */
+export declare const TIMEPICKER_FORMAT_12H = "12h";
+export declare const TIMEPICKER_FORMAT_24H = "24h";
+/** Dropdown variant constants */
+export declare const TIMEPICKER_VARIANT_AUTO = "auto";
+export declare const TIMEPICKER_VARIANT_DIAL = "dial";
+export declare const TIMEPICKER_VARIANT_COLUMNS = "columns";
+/** Clock face constants */
+export declare const CLOCK_RADIUS = 80;
+export declare const CLOCK_CENTER = 100;
+export declare const CLOCK_HOURS_12: readonly [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+/** Default translation strings */
+export declare const TIMEPICKER_DEFAULT_TRANSLATIONS: {
+    readonly selectTime: "SELECT TIME";
+    readonly hour: "Hour";
+    readonly minute: "Minute";
+    readonly period: "Period";
+    readonly cancel: "CANCEL";
+    readonly ok: "OK";
+};
 export declare const sizeClasses: Record<'sm' | 'md' | 'lg', string>;
 export declare const variantClasses: Record<'default' | 'filled' | 'outline', string>;
 export declare const TIMEPICKER_ROOT_CLASSES = "Bear-TimePicker bear-relative";
 export declare const TIMEPICKER_LABEL_CLASSES = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
 export declare const TIMEPICKER_BUTTON_CLASSES = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors";
-export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
+export declare const TIMEPICKER_DROPDOWN_CLASSES = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64";
 export declare const TIMEPICKER_COLUMN_HEADER_CLASSES = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center";
 export declare const TIMEPICKER_COLUMN_CLASSES = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1";
 export declare const TIMEPICKER_OPTION_CLASSES = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors";

package/dist/components/TimePicker/TimePicker.constants.js

@@ -1,30 +1,47 @@
-const e = 12, r = 24, a = 60, b = {
+const e = 12, r = 24, a = 60, b = 768, t = "12h", o = "24h", E = "auto", _ = "dial", n = "columns", c = 80, i = 100, I = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], T = {
+  selectTime: "SELECT TIME",
+  hour: "Hour",
+  minute: "Minute",
+  period: "Period",
+  cancel: "CANCEL",
+  ok: "OK"
+}, s = {
   sm: "bear-py-1.5 bear-px-3 bear-text-sm",
   md: "bear-py-2 bear-px-4",
   lg: "bear-py-2.5 bear-px-5 bear-text-lg"
-}, t = {
+}, C = {
   default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-gray-300 dark:bear-border-zinc-600",
   filled: "bear-bg-gray-100 dark:bear-bg-zinc-700 bear-border-transparent",
   outline: "bear-bg-transparent bear-border-gray-400 dark:bear-border-zinc-500"
-}, o = "Bear-TimePicker bear-relative", i = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", _ = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", n = "Bear-TimePicker__dropdown bear-absolute bear-z-50 bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", E = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", c = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", d = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", s = "bear-bg-pink-500 bear-text-white", S = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", I = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", T = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", C = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600", x = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", P = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
+}, d = "Bear-TimePicker bear-relative", S = "Bear-TimePicker__label bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", R = "Bear-TimePicker__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors", P = "Bear-TimePicker__dropdown bear-absolute bear-z-[9999] bear-mt-1 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64", x = "Bear-TimePicker__column-header bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mb-1 bear-text-center", l = "Bear-TimePicker__column bear-h-32 bear-overflow-y-auto bear-space-y-1", A = "Bear-TimePicker__option bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors", m = "bear-bg-pink-500 bear-text-white", M = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700", O = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700", g = "Bear-TimePicker__clear bear-flex-1 bear-py-1.5 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-white bear-rounded bear-border bear-border-gray-300 dark:bear-border-zinc-600", k = "Bear-TimePicker__confirm bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600", L = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500", K = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";
 export {
-  _ as TIMEPICKER_BUTTON_CLASSES,
-  T as TIMEPICKER_CLEAR_BUTTON_CLASSES,
-  c as TIMEPICKER_COLUMN_CLASSES,
-  E as TIMEPICKER_COLUMN_HEADER_CLASSES,
-  C as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
-  n as TIMEPICKER_DROPDOWN_CLASSES,
-  x as TIMEPICKER_ERROR_CLASSES,
-  I as TIMEPICKER_FOOTER_CLASSES,
-  P as TIMEPICKER_HELPER_CLASSES,
+  i as CLOCK_CENTER,
+  I as CLOCK_HOURS_12,
+  c as CLOCK_RADIUS,
+  R as TIMEPICKER_BUTTON_CLASSES,
+  g as TIMEPICKER_CLEAR_BUTTON_CLASSES,
+  l as TIMEPICKER_COLUMN_CLASSES,
+  x as TIMEPICKER_COLUMN_HEADER_CLASSES,
+  k as TIMEPICKER_CONFIRM_BUTTON_CLASSES,
+  b as TIMEPICKER_DEFAULT_BREAKPOINT,
+  T as TIMEPICKER_DEFAULT_TRANSLATIONS,
+  P as TIMEPICKER_DROPDOWN_CLASSES,
+  L as TIMEPICKER_ERROR_CLASSES,
+  O as TIMEPICKER_FOOTER_CLASSES,
+  t as TIMEPICKER_FORMAT_12H,
+  o as TIMEPICKER_FORMAT_24H,
+  K as TIMEPICKER_HELPER_CLASSES,
   e as TIMEPICKER_HOURS_12H,
   r as TIMEPICKER_HOURS_24H,
-  i as TIMEPICKER_LABEL_CLASSES,
+  S as TIMEPICKER_LABEL_CLASSES,
   a as TIMEPICKER_MINUTES_DIVISOR,
-  s as TIMEPICKER_OPTION_ACTIVE_CLASSES,
-  d as TIMEPICKER_OPTION_CLASSES,
-  S as TIMEPICKER_OPTION_INACTIVE_CLASSES,
-  o as TIMEPICKER_ROOT_CLASSES,
-  b as sizeClasses,
-  t as variantClasses
+  m as TIMEPICKER_OPTION_ACTIVE_CLASSES,
+  A as TIMEPICKER_OPTION_CLASSES,
+  M as TIMEPICKER_OPTION_INACTIVE_CLASSES,
+  d as TIMEPICKER_ROOT_CLASSES,
+  E as TIMEPICKER_VARIANT_AUTO,
+  n as TIMEPICKER_VARIANT_COLUMNS,
+  _ as TIMEPICKER_VARIANT_DIAL,
+  s as sizeClasses,
+  C as variantClasses
 };

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>;