@forgedevstack/bear 1.0.3 → 1.0.4-alpha

package/dist/components/Switch/Switch.js

@@ -1,81 +1,108 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { cn as s } from "../../utils/cn.js";
-const n = {
+import { jsxs as o, jsx as r, Fragment as p } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+const C = "Bear-Switch bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer", g = "bear-opacity-50 bear-cursor-not-allowed", E = "Bear-Switch__track bear-relative bear-inline-flex bear-items-center bear-shrink-0 bear-rounded-full bear-transition-colors bear-duration-200 focus-within:bear-ring-2 focus-within:bear-ring-pink-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-white dark:focus-within:bear-ring-offset-zinc-900", A = "bear-bg-pink-500", y = "bear-bg-gray-300 dark:bear-bg-gray-600", T = "Bear-Switch__thumb bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white bear-shadow bear-transition-transform bear-duration-200 bear-flex bear-items-center bear-justify-center", H = "Bear-Switch__label bear-text-sm bear-text-gray-700 dark:bear-text-gray-300", l = "Bear-Switch__icon bear-flex bear-items-center bear-justify-center", L = {
   sm: {
     track: "bear-w-8 bear-h-4",
     thumb: "bear-w-3 bear-h-3",
-    translate: "bear-translate-x-4"
+    translate: "bear-translate-x-4",
+    iconSize: 8
   },
   md: {
     track: "bear-w-11 bear-h-6",
     thumb: "bear-w-5 bear-h-5",
-    translate: "bear-translate-x-5"
+    translate: "bear-translate-x-5",
+    iconSize: 12
   },
   lg: {
     track: "bear-w-14 bear-h-7",
     thumb: "bear-w-6 bear-h-6",
-    translate: "bear-translate-x-7"
+    translate: "bear-translate-x-7",
+    iconSize: 16
   }
-}, h = ({
-  label: i,
-  checked: r = !1,
-  onCheckedChange: e,
-  size: t = "md",
-  disabled: b = !1,
-  className: l,
-  ...o
+}, d = ({
+  label: S,
+  checked: a = !1,
+  onCheckedChange: t,
+  size: _ = "md",
+  disabled: s = !1,
+  uncheckedIcon: b,
+  checkedIcon: n,
+  showIconsInThumb: c = !1,
+  className: m,
+  testId: u,
+  id: w,
+  ...x
 }) => {
-  const f = () => {
-    b || e == null || e(!r);
-  };
-  return /* @__PURE__ */ m(
+  const h = () => {
+    s || t == null || t(!a);
+  }, i = L[_], f = b || n;
+  return /* @__PURE__ */ o(
     "label",
     {
-      className: s(
-        "bear-inline-flex bear-items-center bear-gap-3 bear-cursor-pointer",
-        b && "bear-opacity-50 bear-cursor-not-allowed",
-        l
+      id: w,
+      "data-testid": u,
+      className: e(
+        C,
+        s && g,
+        m
       ),
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
-            checked: r,
-            onChange: f,
-            disabled: b,
+            checked: a,
+            onChange: h,
+            disabled: s,
             className: "bear-sr-only",
-            ...o
+            ...x
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "span",
           {
-            className: s(
-              "bear-relative bear-inline-flex bear-shrink-0 bear-rounded-full",
-              "bear-transition-colors bear-duration-200",
-              "focus-within:bear-ring-2 focus-within:bear-ring-bear-500 focus-within:bear-ring-offset-2 focus-within:bear-ring-offset-gray-900",
-              r ? "bear-bg-bear-500" : "bear-bg-gray-600",
-              n[t].track
+            className: e(
+              E,
+              a ? A : y,
+              i.track
             ),
-            children: /* @__PURE__ */ a(
-              "span",
-              {
-                className: s(
-                  "bear-absolute bear-top-0.5 bear-left-0.5 bear-rounded-full bear-bg-white",
-                  "bear-shadow bear-transition-transform bear-duration-200",
-                  r && n[t].translate,
-                  n[t].thumb
-                )
-              }
-            )
+            children: [
+              f && !c && /* @__PURE__ */ o(p, { children: [
+                /* @__PURE__ */ r("span", { className: e(
+                  l,
+                  "bear-absolute bear-left-1",
+                  a ? "bear-text-white" : "bear-text-transparent",
+                  "bear-transition-colors bear-duration-200"
+                ), children: n }),
+                /* @__PURE__ */ r("span", { className: e(
+                  l,
+                  "bear-absolute bear-right-1",
+                  a ? "bear-text-transparent" : "bear-text-gray-600 dark:bear-text-gray-400",
+                  "bear-transition-colors bear-duration-200"
+                ), children: b })
+              ] }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: e(
+                    T,
+                    a && i.translate,
+                    i.thumb
+                  ),
+                  children: f && c && /* @__PURE__ */ r("span", { className: e(
+                    l,
+                    a ? "bear-text-pink-500" : "bear-text-gray-400"
+                  ), children: a ? n : b })
+                }
+              )
+            ]
           }
         ),
-        i && /* @__PURE__ */ a("span", { className: "bear-text-sm bear-text-gray-300", children: i })
+        S && /* @__PURE__ */ r("span", { className: H, children: S })
       ]
     }
   );
 };
 export {
-  h as Switch
+  d as Switch
 };

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     /** Switch label */
     label?: string;
@@ -8,6 +8,16 @@ export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     onCheckedChange?: (checked: boolean) => void;
     /** Switch size */
     size?: 'sm' | 'md' | 'lg';
+    /** Icon to show when unchecked (on left side) */
+    uncheckedIcon?: ReactNode;
+    /** Icon to show when checked (on right side) */
+    checkedIcon?: ReactNode;
+    /** Show icons inside thumb */
+    showIconsInThumb?: boolean;
     /** Additional class names */
     className?: string;
+    /** Test ID for testing */
+    testId?: string;
+    /** Element ID */
+    id?: string;
 }

package/dist/components/Tabs/Tabs.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),o=require("../../utils/cn.cjs"),d=i.createContext(null),y=({children:a,defaultTab:t,variant:r="line",onChange:e,className:b,testId:l})=>{const[x,g]=i.useState(t),s=c=>{g(c),e==null||e(c)};return n.jsx(d.Provider,{value:{activeTab:x,setActiveTab:s,variant:r},children:n.jsx("div",{className:b,"data-testid":l,children:a})})},v=({children:a,className:t})=>{const r=i.useContext(d);if(!r)throw new Error("TabList must be used within Tabs");const{variant:e}=r;return n.jsx("div",{role:"tablist",className:o.cn("bear-flex bear-gap-1",e==="line"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",e==="pills"&&"bear-bg-gray-100 dark:bear-bg-gray-800 bear-p-1 bear-rounded-lg",e==="enclosed"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",t),children:a})},T=({id:a,children:t,disabled:r=!1,icon:e})=>{const b=i.useContext(d);if(!b)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:x,variant:g}=b,s=l===a,c="bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors",u={line:o.cn("bear-border-b-2 bear--mb-px",s?"bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400":"bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"),pills:o.cn("bear-rounded-md",s?"bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"),enclosed:o.cn("bear-rounded-t-lg bear-border bear-border-transparent",s?"bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white")};return n.jsxs("button",{role:"tab","aria-selected":s,disabled:r,onClick:()=>!r&&x(a),className:o.cn(c,u[g],r&&"bear-opacity-50 bear-cursor-not-allowed"),children:[e,t]})},h=({tabId:a,children:t,className:r})=>{const e=i.useContext(d);if(!e)throw new Error("TabPanel must be used within Tabs");const{activeTab:b}=e;return b!==a?null:n.jsx("div",{role:"tabpanel",className:o.cn("bear-py-4",r),children:t})};exports.Tab=T;exports.TabList=v;exports.TabPanel=h;exports.Tabs=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),s=require("../../utils/cn.cjs"),d=i.createContext(null),T=({children:a,defaultTab:t,variant:r="line",onChange:e,className:o,testId:l})=>{const[x,g]=i.useState(t),b=c=>{g(c),e==null||e(c)};return n.jsx(d.Provider,{value:{activeTab:x,setActiveTab:b,variant:r},children:n.jsx("div",{className:s.cn("Bear-Tabs",o),"data-testid":l,children:a})})},y=({children:a,className:t})=>{const r=i.useContext(d);if(!r)throw new Error("TabList must be used within Tabs");const{variant:e}=r;return n.jsx("div",{role:"tablist",className:s.cn("Bear-Tabs__list",`Bear-Tabs__list--${e}`,"bear-flex bear-gap-1",e==="line"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",e==="pills"&&"bear-bg-gray-100 dark:bear-bg-gray-800 bear-p-1 bear-rounded-lg",e==="enclosed"&&"bear-border-b bear-border-gray-200 dark:bear-border-gray-700",t),children:a})},v=({id:a,children:t,disabled:r=!1,icon:e})=>{const o=i.useContext(d);if(!o)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:x,variant:g}=o,b=l===a,c="bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors",u={line:s.cn("bear-border-b-2 bear--mb-px",b?"bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400":"bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"),pills:s.cn("bear-rounded-md",b?"bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"),enclosed:s.cn("bear-rounded-t-lg bear-border bear-border-transparent",b?"bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white":"bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white")};return n.jsxs("button",{role:"tab","aria-selected":b,disabled:r,onClick:()=>!r&&x(a),className:s.cn("Bear-Tabs__tab",b&&"Bear-Tabs__tab--active",c,u[g],r&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),children:[e&&n.jsx("span",{className:"Bear-Tabs__tab-icon",children:e}),n.jsx("span",{className:"Bear-Tabs__tab-label",children:t})]})},h=({tabId:a,children:t,className:r})=>{const e=i.useContext(d);if(!e)throw new Error("TabPanel must be used within Tabs");const{activeTab:o}=e;return o!==a?null:n.jsx("div",{role:"tabpanel",className:s.cn("Bear-Tabs__panel bear-py-4",r),children:t})};exports.Tab=v;exports.TabList=y;exports.TabPanel=h;exports.Tabs=T;

package/dist/components/Tabs/Tabs.js

@@ -1,27 +1,29 @@
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
-import { createContext as v, useContext as g, useState as p } from "react";
+import { jsxs as T, jsx as n } from "react/jsx-runtime";
+import { createContext as p, useContext as g, useState as m } from "react";
 import { cn as s } from "../../utils/cn.js";
-const d = v(null), w = ({
+const d = p(null), k = ({
   children: a,
   defaultTab: t,
   variant: e = "line",
   onChange: r,
-  className: b,
+  className: o,
   testId: c
 }) => {
-  const [l, x] = p(t), o = (n) => {
-    x(n), r == null || r(n);
+  const [l, x] = m(t), b = (i) => {
+    x(i), r == null || r(i);
   };
-  return /* @__PURE__ */ i(d.Provider, { value: { activeTab: l, setActiveTab: o, variant: e }, children: /* @__PURE__ */ i("div", { className: b, "data-testid": c, children: a }) });
-}, T = ({ children: a, className: t }) => {
+  return /* @__PURE__ */ n(d.Provider, { value: { activeTab: l, setActiveTab: b, variant: e }, children: /* @__PURE__ */ n("div", { className: s("Bear-Tabs", o), "data-testid": c, children: a }) });
+}, w = ({ children: a, className: t }) => {
   const e = g(d);
   if (!e) throw new Error("TabList must be used within Tabs");
   const { variant: r } = e;
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
       role: "tablist",
       className: s(
+        "Bear-Tabs__list",
+        `Bear-Tabs__list--${r}`,
         "bear-flex bear-gap-1",
         r === "line" && "bear-border-b bear-border-gray-200 dark:bear-border-gray-700",
         r === "pills" && "bear-bg-gray-100 dark:bear-bg-gray-800 bear-p-1 bear-rounded-lg",
@@ -31,50 +33,52 @@ const d = v(null), w = ({
       children: a
     }
   );
-}, f = ({ id: a, children: t, disabled: e = !1, icon: r }) => {
-  const b = g(d);
-  if (!b) throw new Error("Tab must be used within Tabs");
-  const { activeTab: c, setActiveTab: l, variant: x } = b, o = c === a, n = "bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors", y = {
+}, _ = ({ id: a, children: t, disabled: e = !1, icon: r }) => {
+  const o = g(d);
+  if (!o) throw new Error("Tab must be used within Tabs");
+  const { activeTab: c, setActiveTab: l, variant: x } = o, b = c === a, i = "bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors", y = {
     line: s(
       "bear-border-b-2 bear--mb-px",
-      o ? "bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400" : "bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"
+      b ? "bear-border-pink-500 bear-text-pink-600 dark:bear-text-pink-400" : "bear-border-transparent bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white hover:bear-border-gray-300"
     ),
     pills: s(
       "bear-rounded-md",
-      o ? "bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
+      b ? "bear-bg-white dark:bear-bg-gray-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
     ),
     enclosed: s(
       "bear-rounded-t-lg bear-border bear-border-transparent",
-      o ? "bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
+      b ? "bear-bg-white dark:bear-bg-gray-900 bear-border-gray-200 dark:bear-border-gray-700 bear-border-b-white dark:bear-border-b-gray-900 bear--mb-px bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-600 dark:bear-text-gray-400 hover:bear-text-gray-900 dark:hover:bear-text-white"
     )
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ T(
     "button",
     {
       role: "tab",
-      "aria-selected": o,
+      "aria-selected": b,
       disabled: e,
       onClick: () => !e && l(a),
       className: s(
-        n,
+        "Bear-Tabs__tab",
+        b && "Bear-Tabs__tab--active",
+        i,
         y[x],
-        e && "bear-opacity-50 bear-cursor-not-allowed"
+        e && "Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"
       ),
       children: [
-        r,
-        t
+        r && /* @__PURE__ */ n("span", { className: "Bear-Tabs__tab-icon", children: r }),
+        /* @__PURE__ */ n("span", { className: "Bear-Tabs__tab-label", children: t })
       ]
     }
   );
-}, A = ({ tabId: a, children: t, className: e }) => {
+}, f = ({ tabId: a, children: t, className: e }) => {
   const r = g(d);
   if (!r) throw new Error("TabPanel must be used within Tabs");
-  const { activeTab: b } = r;
-  return b !== a ? null : /* @__PURE__ */ i("div", { role: "tabpanel", className: s("bear-py-4", e), children: t });
+  const { activeTab: o } = r;
+  return o !== a ? null : /* @__PURE__ */ n("div", { role: "tabpanel", className: s("Bear-Tabs__panel bear-py-4", e), children: t });
 };
 export {
-  f as Tab,
-  T as TabList,
-  A as TabPanel,
-  w as Tabs
+  _ as Tab,
+  w as TabList,
+  f as TabPanel,
+  k as Tabs
 };

package/dist/components/TimePicker/TimePicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),q=require("../DateTimePicker/DateTimePicker.cjs"),c=require("../../utils/cn.cjs"),A=require("./TimePicker.utils.cjs"),n=require("./TimePicker.constants.cjs"),D=({mode:_="time",value:x,onChange:a,disabled:l=!1,placeholder:p="Select time",label:m,error:i,helperText:u,format:o="12h",minuteStep:f=5,clearable:j=!0,className:v,size:k="md",variant:N="default",...g})=>{if(_==="datetime")return e.jsx(q.DateTimePicker,{value:x instanceof Date?x:null,onChange:r=>a==null?void 0:a(r),disabled:l,placeholder:p,label:m,error:i,helperText:u,timeFormat:o,minuteStep:f,clearable:j,className:v,size:k,variant:N,...g});const s=x,[w,d]=b.useState(!1),[z,y]=b.useState(12),[S,P]=b.useState(0),[M,E]=b.useState("AM"),h=b.useRef(null);b.useEffect(()=>{if(s&&typeof s=="string"){const[r,t]=s.split(" "),[H,O]=r.split(":").map(Number);y(H),P(O),t&&E(t)}},[s]),b.useEffect(()=>{const r=t=>{h.current&&!h.current.contains(t.target)&&d(!1)};return document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[]);const I=()=>{a==null||a(A.formatTime(z,S,M,o)),d(!1)},R=o==="12h"?Array.from({length:n.TIMEPICKER_HOURS_12H},(r,t)=>t+1):Array.from({length:n.TIMEPICKER_HOURS_24H},(r,t)=>t),T=Array.from({length:n.TIMEPICKER_MINUTES_DIVISOR/f},(r,t)=>t*f);return e.jsxs("div",{ref:h,className:c.cn("bear-relative",v),children:[m&&e.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-zinc-300 bear-mb-1.5",children:m}),e.jsxs("button",{type:"button",onClick:()=>!l&&d(!w),disabled:l,className:c.cn("bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",n.sizeClasses[k],n.variantClasses[N],i?"bear-border-red-500":"focus:bear-border-pink-500",l&&"bear-opacity-50 bear-cursor-not-allowed",s?"bear-text-white":"bear-text-zinc-500"),children:[e.jsx("span",{children:s||p}),e.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})})]}),i&&e.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-red-400",children:i}),u&&!i&&e.jsx("p",{className:"bear-mt-1 bear-text-xs bear-text-zinc-500",children:u}),w&&e.jsxs("div",{className:"bear-absolute bear-z-50 bear-mt-1 bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3 bear-w-64",children:[e.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[e.jsxs("div",{className:"bear-flex-1",children:[e.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Hour"}),e.jsx("div",{className:"bear-h-32 bear-overflow-y-auto bear-space-y-1 bear-scrollbar-thin",children:R.map(r=>e.jsx("button",{onClick:()=>y(r),className:c.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",z===r?"bear-bg-pink-500 bear-text-white":"bear-text-zinc-300 hover:bear-bg-zinc-700"),children:r.toString().padStart(2,"0")},r))})]}),e.jsxs("div",{className:"bear-flex-1",children:[e.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Minute"}),e.jsx("div",{className:"bear-h-32 bear-overflow-y-auto bear-space-y-1 bear-scrollbar-thin",children:T.map(r=>e.jsx("button",{onClick:()=>P(r),className:c.cn("bear-w-full bear-py-1 bear-rounded bear-text-sm bear-transition-colors",S===r?"bear-bg-pink-500 bear-text-white":"bear-text-zinc-300 hover:bear-bg-zinc-700"),children:r.toString().padStart(2,"0")},r))})]}),o==="12h"&&e.jsxs("div",{className:"bear-flex-1",children:[e.jsx("div",{className:"bear-text-xs bear-text-zinc-500 bear-mb-1 bear-text-center",children:"Period"}),e.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(r=>e.jsx("button",{onClick:()=>E(r),className:c.cn("bear-w-full bear-py-2 bear-rounded bear-text-sm bear-transition-colors",M===r?"bear-bg-pink-500 bear-text-white":"bear-text-zinc-300 hover:bear-bg-zinc-700"),children:r},r))})]})]}),e.jsxs("div",{className:"bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-zinc-700",children:[j&&s&&e.jsx("button",{onClick:()=>{a==null||a(""),d(!1)},className:"bear-flex-1 bear-py-1.5 bear-text-sm bear-text-zinc-400 hover:bear-text-white bear-rounded bear-border bear-border-zinc-600",children:"Clear"}),e.jsx("button",{onClick:I,className:"bear-flex-1 bear-py-1.5 bear-text-sm bear-bg-pink-500 bear-text-white bear-rounded hover:bear-bg-pink-600",children:"Confirm"})]})]})]})};exports.TimePicker=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),E=require("react"),H=require("../DateTimePicker/DateTimePicker.cjs"),n=require("../../utils/cn.cjs"),U=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),D=({mode:b="time",value:_,onChange:c,disabled:S=!1,placeholder:m="Select time",label:d,error:a,helperText:C,format:l="12h",minuteStep:o=5,clearable:u=!0,className:P,size:N="md",variant:R="default",...K})=>{if(b==="datetime")return s.jsx(H.DateTimePicker,{value:_ instanceof Date?_:null,onChange:t=>c==null?void 0:c(t),disabled:S,placeholder:m,label:d,error:a,helperText:C,timeFormat:l,minuteStep:o,clearable:u,className:P,size:N,variant:R,...K});const i=_,[M,I]=E.useState(!1),[O,A]=E.useState(12),[x,L]=E.useState(0),[f,j]=E.useState("AM"),T=E.useRef(null);E.useEffect(()=>{if(i&&typeof i=="string"){const[t,r]=i.split(" "),[p,y]=t.split(":").map(Number);A(p),L(y),r&&j(r)}},[i]),E.useEffect(()=>{const t=r=>{T.current&&!T.current.contains(r.target)&&I(!1)};return document.addEventListener("mousedown",t),()=>document.removeEventListener("mousedown",t)},[]);const k=()=>{c==null||c(U.formatTime(O,x,f,l)),I(!1)},h=l==="12h"?Array.from({length:e.TIMEPICKER_HOURS_12H},(t,r)=>r+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(t,r)=>r),v=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/o},(t,r)=>r*o);return s.jsxs("div",{ref:T,className:n.cn(e.TIMEPICKER_ROOT_CLASSES,P),children:[d&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:d}),s.jsxs("button",{type:"button",onClick:()=>!S&&I(!M),disabled:S,className:n.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[N],e.variantClasses[R],a?"bear-border-red-500":"focus:bear-border-pink-500",S&&"bear-opacity-50 bear-cursor-not-allowed",i?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:i||m}),s.jsx("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:s.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})})]}),a&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:a}),C&&!a&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:C}),M&&s.jsxs("div",{className:e.TIMEPICKER_DROPDOWN_CLASSES,children:[s.jsxs("div",{className:"bear-flex bear-gap-2 bear-mb-3",children:[s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Hour"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:h.map(t=>s.jsx("button",{onClick:()=>A(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,O===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Minute"}),s.jsx("div",{className:e.TIMEPICKER_COLUMN_CLASSES,children:v.map(t=>s.jsx("button",{onClick:()=>L(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,x===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t.toString().padStart(2,"0")},t))})]}),l==="12h"&&s.jsxs("div",{className:"bear-flex-1",children:[s.jsx("div",{className:e.TIMEPICKER_COLUMN_HEADER_CLASSES,children:"Period"}),s.jsx("div",{className:"bear-space-y-1",children:["AM","PM"].map(t=>s.jsx("button",{onClick:()=>j(t),className:n.cn(e.TIMEPICKER_OPTION_CLASSES,"bear-py-2",f===t?e.TIMEPICKER_OPTION_ACTIVE_CLASSES:e.TIMEPICKER_OPTION_INACTIVE_CLASSES),children:t},t))})]})]}),s.jsxs("div",{className:e.TIMEPICKER_FOOTER_CLASSES,children:[u&&i&&s.jsx("button",{onClick:()=>{c==null||c(""),I(!1)},className:e.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:"Clear"}),s.jsx("button",{onClick:k,className:e.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:"Confirm"})]})]})]})};exports.TimePicker=D;

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,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={default:"bear-bg-zinc-800 bear-border-zinc-600",filled:"bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-500"};exports.TIMEPICKER_HOURS_12H=e;exports.TIMEPICKER_HOURS_24H=r;exports.TIMEPICKER_MINUTES_DIVISOR=a;exports.sizeClasses=s;exports.variantClasses=t;
+"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;

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

@@ -3,3 +3,17 @@ export declare const TIMEPICKER_HOURS_24H = 24;
 export declare const TIMEPICKER_MINUTES_DIVISOR = 60;
 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_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";
+export declare const TIMEPICKER_OPTION_ACTIVE_CLASSES = "bear-bg-pink-500 bear-text-white";
+export declare const TIMEPICKER_OPTION_INACTIVE_CLASSES = "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700";
+export declare const TIMEPICKER_FOOTER_CLASSES = "Bear-TimePicker__footer bear-flex bear-gap-2 bear-pt-2 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
+export declare const TIMEPICKER_CLEAR_BUTTON_CLASSES = "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";
+export declare const TIMEPICKER_CONFIRM_BUTTON_CLASSES = "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";
+export declare const TIMEPICKER_ERROR_CLASSES = "Bear-TimePicker__error bear-mt-1 bear-text-xs bear-text-red-500";
+export declare const TIMEPICKER_HELPER_CLASSES = "Bear-TimePicker__helper bear-mt-1 bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500";

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

@@ -3,14 +3,28 @@ const e = 12, r = 24, a = 60, b = {
   md: "bear-py-2 bear-px-4",
   lg: "bear-py-2.5 bear-px-5 bear-text-lg"
 }, t = {
-  default: "bear-bg-zinc-800 bear-border-zinc-600",
-  filled: "bear-bg-zinc-700 bear-border-transparent",
-  outline: "bear-bg-transparent bear-border-zinc-500"
-};
+  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";
 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,
   e as TIMEPICKER_HOURS_12H,
   r as TIMEPICKER_HOURS_24H,
+  i 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
 };