@forgedevstack/bear 1.1.3 → 1.1.8

package/dist/components/Spotlight/Spotlight.js

@@ -1,100 +1,89 @@
-import { jsxs as b, jsx as t, Fragment as G } from "react/jsx-runtime";
-import { useState as w, useRef as E, useCallback as D, useEffect as v, useMemo as T } from "react";
-import { cn as m } from "../../utils/cn.js";
-import { DEFAULT_PLACEHOLDER as P, DEFAULT_SHORTCUT_KEY as Y, DEFAULT_NOTHING_FOUND as z, DEFAULT_LIMIT as Q, FOCUS_DELAY as V, SPOTLIGHT_Z_INDEX as W } from "./Spotlight.const.js";
-const X = (l, s) => {
-  var o, u;
-  const i = s.toLowerCase();
-  return !!(l.label.toLowerCase().includes(i) || (o = l.description) != null && o.toLowerCase().includes(i) || (u = l.keywords) != null && u.some((y) => y.toLowerCase().includes(i)));
-}, I = (l, s) => {
-  if (!s) return l;
-  const i = l.toLowerCase().indexOf(s.toLowerCase());
-  return i === -1 ? l : /* @__PURE__ */ b(G, { children: [
-    l.slice(0, i),
-    /* @__PURE__ */ t("mark", { className: "Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5", children: l.slice(i, i + s.length) }),
-    l.slice(i + s.length)
-  ] });
-}, ee = (l) => {
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as u, useRef as B, useCallback as E, useEffect as f, useMemo as D } from "react";
+import { cn as h } from "../../utils/cn.js";
+import { DEFAULT_PLACEHOLDER as q, DEFAULT_SHORTCUT_KEY as G, DEFAULT_NOTHING_FOUND as P, DEFAULT_LIMIT as Y, FOCUS_DELAY as z, SPOTLIGHT_Z_INDEX as Q } from "./Spotlight.const.js";
+import { matchAction as V, highlightText as T } from "./Spotlight.utils.js";
+const ee = (I) => {
   const {
-    actions: s,
-    open: i,
-    onOpenChange: o,
-    placeholder: u = P,
-    shortcutKey: y = Y,
-    shortcutMod: N = !0,
-    nothingFoundMessage: A = z,
-    highlightMatches: S = !0,
-    limit: x = Q,
-    filter: f,
+    actions: c,
+    open: L,
+    onOpenChange: g,
+    placeholder: A = q,
+    shortcutKey: k = G,
+    shortcutMod: _ = !0,
+    nothingFoundMessage: C = P,
+    highlightMatches: v = !0,
+    limit: p = Y,
+    filter: y,
     className: O,
     style: M,
-    testId: F
-  } = l, [U, K] = w(!1), [n, L] = w(""), [p, h] = w(0), B = E(null), C = E(null), g = i ?? U, d = D(
+    testId: U
+  } = I, [F, K] = u(!1), [l, w] = u(""), [n, d] = u(0), N = B(null), S = B(null), o = L ?? F, s = E(
     (e) => {
-      K(e), o == null || o(e), e || (L(""), h(0));
+      K(e), g == null || g(e), e || (w(""), d(0));
     },
-    [o]
+    [g]
   );
-  v(() => {
+  f(() => {
     const e = (r) => {
-      (N ? r.metaKey || r.ctrlKey : !0) && r.key.toLowerCase() === y.toLowerCase() && (r.preventDefault(), d(!g)), r.key === "Escape" && g && d(!1);
+      (_ ? r.metaKey || r.ctrlKey : !0) && r.key.toLowerCase() === k.toLowerCase() && (r.preventDefault(), s(!o)), r.key === "Escape" && o && s(!1);
     };
     return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-  }, [y, N, g, d]), v(() => {
-    g && setTimeout(() => {
+  }, [k, _, o, s]), f(() => {
+    o && setTimeout(() => {
       var e;
-      return (e = B.current) == null ? void 0 : e.focus();
-    }, V);
-  }, [g]);
-  const c = T(() => f ? f(n, s).slice(0, x) : n ? s.filter((e) => X(e, n)).slice(0, x) : s.slice(0, x), [s, n, f, x]), R = T(() => {
+      return (e = N.current) == null ? void 0 : e.focus();
+    }, z);
+  }, [o]);
+  const i = D(() => y ? y(l, c).slice(0, p) : l ? c.filter((e) => V(e, l)).slice(0, p) : c.slice(0, p), [c, l, y, p]), R = D(() => {
     const e = /* @__PURE__ */ new Map();
-    return c.forEach((r) => {
+    return i.forEach((r) => {
       const a = r.group || "";
       e.has(a) || e.set(a, []), e.get(a).push(r);
     }), e;
-  }, [c]), H = D(
+  }, [i]), H = E(
     (e) => {
       if (e.key === "ArrowDown")
-        e.preventDefault(), h((r) => Math.min(r + 1, c.length - 1));
+        e.preventDefault(), d((r) => Math.min(r + 1, i.length - 1));
       else if (e.key === "ArrowUp")
-        e.preventDefault(), h((r) => Math.max(r - 1, 0));
-      else if (e.key === "Enter" && c[p]) {
+        e.preventDefault(), d((r) => Math.max(r - 1, 0));
+      else if (e.key === "Enter" && i[n]) {
         e.preventDefault();
-        const r = c[p];
-        r.disabled || (r.onTrigger(), d(!1));
+        const r = i[n];
+        r.disabled || (r.onTrigger(), s(!1));
       }
     },
-    [c, p, d]
+    [i, n, s]
   );
-  if (v(() => {
-    const e = C.current;
+  if (f(() => {
+    const e = S.current;
     if (!e) return;
     const r = e.querySelector('[data-active="true"]');
     r == null || r.scrollIntoView({ block: "nearest" });
-  }, [p]), !g) return null;
-  let k = -1;
+  }, [n]), !o) return null;
+  let x = -1;
   return /* @__PURE__ */ b(
     "div",
     {
-      className: m(
+      className: h(
         "Bear-Spotlight",
         "bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]"
       ),
-      style: { zIndex: W },
-      "data-testid": F,
+      style: { zIndex: Q },
+      "data-testid": U,
       children: [
         /* @__PURE__ */ t(
           "div",
           {
             className: "Bear-Spotlight__backdrop bear-absolute bear-inset-0 bear-bg-black/50 dark:bear-bg-black/70 bear-backdrop-blur-sm",
-            onClick: () => d(!1),
+            onClick: () => s(!1),
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ b(
           "div",
           {
-            className: m(
+            className: h(
               "Bear-Spotlight__dialog",
               "bear-relative bear-w-full bear-max-w-[560px] bear-mx-4",
               "bear-bg-white dark:bear-bg-gray-900",
@@ -127,15 +116,15 @@ const X = (l, s) => {
                 /* @__PURE__ */ t(
                   "input",
                   {
-                    ref: B,
+                    ref: N,
                     type: "text",
-                    value: n,
+                    value: l,
                     onChange: (e) => {
-                      L(e.target.value), h(0);
+                      w(e.target.value), d(0);
                     },
                     onKeyDown: H,
-                    placeholder: u,
-                    className: m(
+                    placeholder: A,
+                    className: h(
                       "Bear-Spotlight__input",
                       "bear-flex-1 bear-bg-transparent bear-outline-none bear-text-base",
                       "bear-text-gray-900 dark:bear-text-white",
@@ -150,39 +139,39 @@ const X = (l, s) => {
               /* @__PURE__ */ b(
                 "div",
                 {
-                  ref: C,
+                  ref: S,
                   className: "Bear-Spotlight__results bear-max-h-[400px] bear-overflow-y-auto bear-py-2",
                   role: "listbox",
                   children: [
-                    c.length === 0 && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm", children: A }),
+                    i.length === 0 && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__empty bear-px-4 bear-py-8 bear-text-center bear-text-gray-500 dark:bear-text-gray-400 bear-text-sm", children: C }),
                     Array.from(R.entries()).map(([e, r]) => /* @__PURE__ */ b("div", { className: "Bear-Spotlight__group", children: [
                       e && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__group-title bear-px-4 bear-py-1.5 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
                       r.map((a) => {
-                        k++;
-                        const _ = k === p, j = k;
+                        x++;
+                        const m = x === n, j = x;
                         return /* @__PURE__ */ b(
                           "button",
                           {
-                            className: m(
+                            className: h(
                               "Bear-Spotlight__action",
                               "bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-cursor-pointer",
                               "bear-transition-colors bear-duration-100",
-                              _ ? "bear-bg-gray-100 dark:bear-bg-gray-800" : "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",
+                              m ? "bear-bg-gray-100 dark:bear-bg-gray-800" : "hover:bear-bg-gray-50 dark:hover:bear-bg-gray-800/50",
                               a.disabled && "bear-opacity-50 bear-cursor-not-allowed"
                             ),
-                            "data-active": _,
-                            onMouseEnter: () => h(j),
+                            "data-active": m,
+                            onMouseEnter: () => d(j),
                             onClick: () => {
-                              a.disabled || (a.onTrigger(), d(!1));
+                              a.disabled || (a.onTrigger(), s(!1));
                             },
                             role: "option",
-                            "aria-selected": _,
+                            "aria-selected": m,
                             "aria-disabled": a.disabled,
                             children: [
                               a.icon && /* @__PURE__ */ t("span", { className: "Bear-Spotlight__action-icon bear-text-gray-500 dark:bear-text-gray-400 bear-shrink-0", children: a.icon }),
                               /* @__PURE__ */ b("div", { className: "Bear-Spotlight__action-body bear-flex-1 bear-min-w-0", children: [
-                                /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate", children: S ? I(a.label, n) : a.label }),
-                                a.description && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: S ? I(a.description, n) : a.description })
+                                /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-label bear-text-sm bear-font-medium bear-text-gray-900 dark:bear-text-white bear-truncate", children: v ? T(a.label, l) : a.label }),
+                                a.description && /* @__PURE__ */ t("div", { className: "Bear-Spotlight__action-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: v ? T(a.description, l) : a.description })
                               ] }),
                               a.rightSection && /* @__PURE__ */ t("span", { className: "Bear-Spotlight__action-right bear-shrink-0", children: a.rightSection })
                             ]

package/dist/components/Spotlight/Spotlight.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=(e,t)=>{var s,o;const r=t.toLowerCase();return!!(e.label.toLowerCase().includes(r)||(s=e.description)!=null&&s.toLowerCase().includes(r)||(o=e.keywords)!=null&&o.some(n=>n.toLowerCase().includes(r)))},a=(e,t)=>{if(!t)return e;const r=e.toLowerCase().indexOf(t.toLowerCase());return r===-1?e:i.jsxs(i.Fragment,{children:[e.slice(0,r),i.jsx("mark",{className:"Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5",children:e.slice(r,r+t.length)}),e.slice(r+t.length)]})};exports.highlightText=a;exports.matchAction=l;

package/dist/components/Spotlight/Spotlight.utils.d.ts

@@ -0,0 +1,3 @@
+import { SpotlightAction } from './Spotlight.types';
+export declare const matchAction: (action: SpotlightAction, query: string) => boolean;
+export declare const highlightText: (text: string, query: string) => React.ReactNode;

package/dist/components/Spotlight/Spotlight.utils.js

@@ -0,0 +1,18 @@
+import { jsxs as n, Fragment as l, jsx as a } from "react/jsx-runtime";
+const h = (e, s) => {
+  var o, i;
+  const r = s.toLowerCase();
+  return !!(e.label.toLowerCase().includes(r) || (o = e.description) != null && o.toLowerCase().includes(r) || (i = e.keywords) != null && i.some((t) => t.toLowerCase().includes(r)));
+}, d = (e, s) => {
+  if (!s) return e;
+  const r = e.toLowerCase().indexOf(s.toLowerCase());
+  return r === -1 ? e : /* @__PURE__ */ n(l, { children: [
+    e.slice(0, r),
+    /* @__PURE__ */ a("mark", { className: "Bear-Spotlight__highlight bear-bg-yellow-200 dark:bear-bg-yellow-800 bear-text-inherit bear-rounded-sm bear-px-0.5", children: e.slice(r, r + s.length) }),
+    e.slice(r + s.length)
+  ] });
+};
+export {
+  d as highlightText,
+  h as matchAction
+};

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),n=require("../../utils/cn.cjs"),d=i.createContext(null),v=({children:a,value:t,defaultTab:r,variant:e="line",onChange:b,className:l,testId:x})=>{const[T,s]=i.useState(r),c=t!==void 0,g=c?t:T,y=u=>{c||s(u),b==null||b(u)};return o.jsx(d.Provider,{value:{activeTab:g,setActiveTab:y,variant:e},children:o.jsx("div",{className:n.cn("Bear-Tabs",l),"data-testid":x,children:a})})},h=({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 o.jsx("div",{role:"tablist",className:n.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})},p=({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:T}=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",g={line:n.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:n.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:n.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 o.jsxs("button",{role:"tab","aria-selected":s,disabled:r,onClick:()=>!r&&x(a),className:n.cn("Bear-Tabs__tab",s&&"Bear-Tabs__tab--active",c,g[T],r&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),children:[e&&o.jsx("span",{className:"Bear-Tabs__tab-icon",children:e}),o.jsx("span",{className:"Bear-Tabs__tab-label",children:t})]})},k=({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:o.jsx("div",{role:"tabpanel",className:n.cn("Bear-Tabs__panel bear-py-4",r),children:t})};exports.Tab=p;exports.TabList=h;exports.TabPanel=k;exports.Tabs=v;

package/dist/components/Tabs/Tabs.js

@@ -1,27 +1,28 @@
-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 = p(null), k = ({
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { createContext as v, useContext as T, useState as h } from "react";
+import { cn as o } from "../../utils/cn.js";
+const d = v(null), _ = ({
   children: a,
-  defaultTab: t,
-  variant: e = "line",
-  onChange: r,
-  className: o,
+  value: t,
+  defaultTab: e,
+  variant: r = "line",
+  onChange: b,
+  className: l,
   testId: c
 }) => {
-  const [l, x] = m(t), b = (i) => {
-    x(i), r == null || r(i);
+  const [x, s] = h(e), i = t !== void 0, g = i ? t : x, p = (y) => {
+    i || s(y), b == null || b(y);
   };
-  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);
+  return /* @__PURE__ */ n(d.Provider, { value: { activeTab: g, setActiveTab: p, variant: r }, children: /* @__PURE__ */ n("div", { className: o("Bear-Tabs", l), "data-testid": c, children: a }) });
+}, f = ({ children: a, className: t }) => {
+  const e = T(d);
   if (!e) throw new Error("TabList must be used within Tabs");
   const { variant: r } = e;
   return /* @__PURE__ */ n(
     "div",
     {
       role: "tablist",
-      className: s(
+      className: o(
         "Bear-Tabs__list",
         `Bear-Tabs__list--${r}`,
         "bear-flex bear-gap-1",
@@ -33,35 +34,35 @@ const d = p(null), k = ({
       children: a
     }
   );
-}, _ = ({ 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(
+}, B = ({ id: a, children: t, disabled: e = !1, icon: r }) => {
+  const b = T(d);
+  if (!b) throw new Error("Tab must be used within Tabs");
+  const { activeTab: l, setActiveTab: c, variant: x } = b, s = l === 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", g = {
+    line: o(
       "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"
+      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: s(
+    pills: o(
       "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"
+      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: s(
+    enclosed: o(
       "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"
+      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 /* @__PURE__ */ T(
+  return /* @__PURE__ */ m(
     "button",
     {
       role: "tab",
-      "aria-selected": b,
+      "aria-selected": s,
       disabled: e,
-      onClick: () => !e && l(a),
-      className: s(
+      onClick: () => !e && c(a),
+      className: o(
         "Bear-Tabs__tab",
-        b && "Bear-Tabs__tab--active",
+        s && "Bear-Tabs__tab--active",
         i,
-        y[x],
+        g[x],
         e && "Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"
       ),
       children: [
@@ -70,15 +71,15 @@ const d = p(null), k = ({
       ]
     }
   );
-}, f = ({ tabId: a, children: t, className: e }) => {
-  const r = g(d);
+}, N = ({ tabId: a, children: t, className: e }) => {
+  const r = T(d);
   if (!r) throw new Error("TabPanel must be used within Tabs");
-  const { activeTab: o } = r;
-  return o !== a ? null : /* @__PURE__ */ n("div", { role: "tabpanel", className: s("Bear-Tabs__panel bear-py-4", e), children: t });
+  const { activeTab: b } = r;
+  return b !== a ? null : /* @__PURE__ */ n("div", { role: "tabpanel", className: o("Bear-Tabs__panel bear-py-4", e), children: t });
 };
 export {
-  _ as Tab,
-  w as TabList,
-  f as TabPanel,
-  k as Tabs
+  B as Tab,
+  f as TabList,
+  N as TabPanel,
+  _ as Tabs
 };

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

@@ -7,7 +7,9 @@ export interface TabsContextValue {
 export interface TabsProps {
     /** Tab panels */
     children: ReactNode;
-    /** Default active tab */
+    /** Controlled active tab (when set, defaultTab is ignored) */
+    value?: string;
+    /** Default active tab (uncontrolled) */
     defaultTab: string;
     /** Visual variant */
     variant?: 'line' | 'pills' | 'enclosed';

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

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),n=require("../../../../utils/cn.cjs"),i=require("../../TimePicker.constants.cjs"),v=require("../../helpers/ClockFaceSvg.cjs"),m="bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blue-50 dark:bear-bg-blue-900/30 bear-rounded bear-px-1",_="bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1",D=({selectedHour:c,setSelectedHour:o,selectedMinute:d,setSelectedMinute:x,period:k,setPeriod:T,format:a,hours:S,minutes:h,timeValue:p,clearable:E,onChange:l,onConfirm:C,onClose:N,translations:P})=>{const[I,s]=u.useState("hour"),b={...i.TIMEPICKER_DEFAULT_TRANSLATIONS,...P},j=a==="12h"?c===12?12:c%12:c,y=d,g=j.toString().padStart(2,"0"),A=y.toString().padStart(2,"0"),M=a==="12h"?[...i.CLOCK_HOURS_12]:S,t=I==="hour",O=t?M:h,R=u.useCallback(r=>{t?(o(a==="12h"&&r===0?12:r),s("minute")):x(r)},[t,a,o,x]);return e.jsxs("div",{className:n.cn(i.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:b.selectTime}),e.jsxs("div",{className:"Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4",children:[e.jsx("button",{type:"button",onClick:()=>s("hour"),className:n.cn("Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?m:_),"aria-label":b.hour,children:g}),e.jsx("span",{className:"bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white",children:":"}),e.jsx("button",{type:"button",onClick:()=>s("minute"),className:n.cn("Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",t?_:m),"aria-label":b.minute,children:A}),a==="12h"&&e.jsx("div",{className:"Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2",children:["AM","PM"].map(r=>e.jsx("button",{onClick:()=>T(r),className:n.cn("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))})]}),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(v.ClockFaceSvg,{values:O,isHourMode:t,format:a,selectedHour:c,selectedMinute:d,onSelect:R})}),e.jsxs("div",{className:i.TIMEPICKER_FOOTER_CLASSES,children:[E&&p&&e.jsx("button",{onClick:()=>{l==null||l(null),N()},className:i.TIMEPICKER_CLEAR_BUTTON_CLASSES,children:b.cancel}),e.jsx("button",{onClick:C,className:i.TIMEPICKER_CONFIRM_BUTTON_CLASSES,children:b.ok})]})]})};exports.TimePickerDialDropdown=D;

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

@@ -1,84 +1,90 @@
-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,
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as R, useCallback as v } from "react";
+import { cn as o } from "../../../../utils/cn.js";
+import { TIMEPICKER_DEFAULT_TRANSLATIONS as B, CLOCK_HOURS_12 as L, TIMEPICKER_FOOTER_CLASSES as D, TIMEPICKER_CLEAR_BUTTON_CLASSES as K, TIMEPICKER_CONFIRM_BUTTON_CLASSES as z, TIMEPICKER_DROPDOWN_CLASSES as w } from "../../TimePicker.constants.js";
+import { ClockFaceSvg as F } from "../../helpers/ClockFaceSvg.js";
+const x = "bear-text-blue-600 dark:bear-text-blue-400 bear-font-bold bear-bg-blue-50 dark:bear-bg-blue-900/30 bear-rounded bear-px-1", _ = "bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-zinc-300 bear-cursor-pointer bear-px-1", G = ({
+  selectedHour: i,
+  setSelectedHour: s,
+  selectedMinute: d,
   setSelectedMinute: m,
-  period: k,
-  setPeriod: _,
+  period: u,
+  setPeriod: k,
   format: a,
-  hours: u,
+  hours: p,
   minutes: h,
-  timeValue: p,
-  clearable: x,
-  onChange: o,
-  onConfirm: T,
-  onClose: S,
+  timeValue: T,
+  clearable: S,
+  onChange: l,
+  onConfirm: E,
+  onClose: C,
   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: [
+  const [I, c] = R("hour"), b = { ...B, ...N }, P = a === "12h" ? i === 12 ? 12 : i % 12 : i, y = d, A = P.toString().padStart(2, "0"), M = y.toString().padStart(2, "0"), O = a === "12h" ? [...L] : p, t = I === "hour", f = t ? O : h, g = v((r) => {
+    t ? (s(a === "12h" && r === 0 ? 12 : r), c("minute")) : m(r);
+  }, [t, a, s, m]);
+  return /* @__PURE__ */ n("div", { className: o(w, "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: b.selectTime }),
+    /* @__PURE__ */ n("div", { className: "Bear-TimePicker__dial-display bear-flex bear-items-center bear-justify-center bear-gap-1 bear-mb-4", 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" }) })
+          onClick: () => c("hour"),
+          className: o(
+            "Bear-TimePicker__dial-hour-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
+            t ? x : _
+          ),
+          "aria-label": b.hour,
+          children: A
         }
       ),
+      /* @__PURE__ */ e("span", { className: "bear-text-2xl bear-font-bold bear-text-gray-900 dark:bear-text-white", children: ":" }),
       /* @__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" }) })
+          onClick: () => c("minute"),
+          className: o(
+            "Bear-TimePicker__dial-minute-btn bear-text-2xl bear-font-bold bear-transition-colors bear-border-none bear-bg-transparent",
+            t ? _ : x
+          ),
+          "aria-label": b.minute,
+          children: M
         }
-      )
+      ),
+      a === "12h" && /* @__PURE__ */ e("div", { className: "Bear-TimePicker__dial-period bear-flex bear-flex-col bear-gap-0.5 bear-ml-2", children: ["AM", "PM"].map((r) => /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => k(r),
+          className: o(
+            "Bear-TimePicker__dial-period-btn bear-px-2 bear-py-0.5 bear-rounded bear-text-sm bear-transition-colors",
+            u === 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__ */ 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,
+      F,
       {
-        values: g,
-        isHourMode: l,
+        values: f,
+        isHourMode: t,
         format: a,
-        selectedHour: t,
-        selectedMinute: b,
-        onSelect: B
+        selectedHour: i,
+        selectedMinute: d,
+        onSelect: g
       }
     ) }),
-    /* @__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 })
+    /* @__PURE__ */ n("div", { className: D, children: [
+      S && T && /* @__PURE__ */ e("button", { onClick: () => {
+        l == null || l(null), C();
+      }, className: K, children: b.cancel }),
+      /* @__PURE__ */ e("button", { onClick: E, className: z, children: b.ok })
     ] })
   ] });
 };
 export {
-  U as TimePickerDialDropdown
+  G as TimePickerDialDropdown
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),E=({values:t,isHourMode:n,format:i,selectedHour:r,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"?r===12?0:r%12:r)*30-90:l*6-90)*Math.PI/180;return a.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",h),children:[a.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?r===12:r%12===c:r===c:l===c;return a.jsxs("g",{onClick:()=>b(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[k&&a.jsx("circle",{cx:o,cy:_,r:14,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),a.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)}),a.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("../../../utils/cn.cjs");require("react");const e=require("../TimePicker.constants.cjs"),x=16,S=14,O=.85,R=.6,b=30,n=90,l=Math.PI/180,f=({values:o,isHourMode:t,format:_,selectedHour:a,selectedMinute:C,onSelect:A,className:L})=>{const N=c=>t?(c*b-n)*l:(c*(360/o.length)-n)*l,E=(t?(_==="12h"?a===12?0:a%12:a)*b-n:C*6-n)*l;return r.jsxs("svg",{viewBox:"0 0 200 200",className:m.cn("Bear-TimePicker__clock-face bear-w-full bear-h-full",L),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"}),o.map((c,h)=>{const T=N(h),s=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.cos(T),i=e.CLOCK_CENTER+e.CLOCK_RADIUS*O*Math.sin(T),k=t?_==="12h"?c===12?a===12:a%12===c:a===c:C===c;return r.jsxs("g",{onClick:()=>A(c),className:"Bear-TimePicker__clock-face-item bear-cursor-pointer",children:[r.jsx("circle",{cx:s,cy:i,r:x,fill:"transparent"}),k&&r.jsx("circle",{cx:s,cy:i,r:S,className:"Bear-TimePicker__clock-face-dot bear-fill-blue-500"}),r.jsx("text",{x:s,y:i,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*R*Math.cos(E),y2:e.CLOCK_CENTER+e.CLOCK_RADIUS*R*Math.sin(E),className:"Bear-TimePicker__clock-face-hand bear-stroke-blue-500 bear-stroke-2",strokeLinecap:"round"})]})};exports.ClockFaceSvg=f;

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

@@ -1,18 +1,11 @@
 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>;