@forgedevstack/bear 1.0.4 → 1.0.6

package/dist/components/Sidebar/Sidebar.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=256,r=64,a=16,b=12,S=14,E=18,t={default:"bear-bg-white dark:bear-bg-zinc-900 bear-border-zinc-200 dark:bear-border-zinc-700",bordered:"bear-bg-white dark:bear-bg-zinc-900 bear-border-2 bear-border-zinc-300 dark:bear-border-zinc-600 bear-rounded-xl bear-m-2",floating:"bear-bg-white/95 dark:bear-bg-zinc-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"},_="bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer",A="bear-bg-pink-500 bear-text-white bear-shadow-md",I="bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100",n="bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",o="bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500",c="bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between",D="bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto",i="bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";exports.SIDEBAR_COLLAPSED_WIDTH=r;exports.SIDEBAR_DEPTH_INDENT=b;exports.SIDEBAR_FOOTER_CLASSES=D;exports.SIDEBAR_GROUP_TITLE_CLASSES=o;exports.SIDEBAR_HEADER_CLASSES=c;exports.SIDEBAR_ICON_SIZE=S;exports.SIDEBAR_ITEM_ACTIVE_CLASSES=A;exports.SIDEBAR_ITEM_BASE_CLASSES=_;exports.SIDEBAR_ITEM_DISABLED_CLASSES=n;exports.SIDEBAR_ITEM_INACTIVE_CLASSES=I;exports.SIDEBAR_PADDING_BASE=a;exports.SIDEBAR_TOGGLE_CLASSES=i;exports.SIDEBAR_TOGGLE_ICON_SIZE=E;exports.SIDEBAR_VARIANT_STYLES=t;exports.SIDEBAR_WIDTH=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=256,E=64,t=16,S=12,I=14,_=18,o={default:"bear-bg-white dark:bear-bg-zinc-900 bear-border-zinc-200 dark:bear-border-zinc-700",bordered:"bear-bg-white dark:bear-bg-zinc-900 bear-border-2 bear-border-zinc-300 dark:bear-border-zinc-600 bear-rounded-xl bear-m-2",floating:"bear-bg-white/95 dark:bear-bg-zinc-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"},A="bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer",e="bear-bg-bear-500 bear-text-white bear-shadow-md",r="bear-bg-bear-50 dark:bear-bg-bear-900/30 bear-text-bear-700 dark:bear-text-bear-200 bear-border-l-2 bear-border-bear-500 -bear-ml-px bear-pl-[11px]",b="bear-relative bear-bg-bear-100 dark:bear-bg-bear-900/40 bear-text-bear-700 dark:bear-text-bear-200 before:bear-content-[''] before:bear-absolute before:bear-left-0 before:bear-top-1/2 before:-bear-translate-y-1/2 before:bear-w-1 before:bear-h-6 before:bear-rounded-full before:bear-bg-bear-500",n={fill:e,border:r,indicator:b},D="bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100",c="bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",d="bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500",i="bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between",R="bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto",T="bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";exports.SIDEBAR_COLLAPSED_WIDTH=E;exports.SIDEBAR_DEPTH_INDENT=S;exports.SIDEBAR_FOOTER_CLASSES=R;exports.SIDEBAR_GROUP_TITLE_CLASSES=d;exports.SIDEBAR_HEADER_CLASSES=i;exports.SIDEBAR_ICON_SIZE=I;exports.SIDEBAR_ITEM_ACTIVE_BORDER=r;exports.SIDEBAR_ITEM_ACTIVE_BY_VARIANT=n;exports.SIDEBAR_ITEM_ACTIVE_FILL=e;exports.SIDEBAR_ITEM_ACTIVE_INDICATOR=b;exports.SIDEBAR_ITEM_BASE_CLASSES=A;exports.SIDEBAR_ITEM_DISABLED_CLASSES=c;exports.SIDEBAR_ITEM_INACTIVE_CLASSES=D;exports.SIDEBAR_PADDING_BASE=t;exports.SIDEBAR_TOGGLE_CLASSES=T;exports.SIDEBAR_TOGGLE_ICON_SIZE=_;exports.SIDEBAR_VARIANT_STYLES=o;exports.SIDEBAR_WIDTH=a;

package/dist/components/Sidebar/Sidebar.const.d.ts

@@ -1,4 +1,4 @@
-import { SidebarVariant } from './Sidebar.types';
+import { SidebarVariant, SidebarActiveVariant } from './Sidebar.types';
 export declare const SIDEBAR_WIDTH = 256;
 export declare const SIDEBAR_COLLAPSED_WIDTH = 64;
 export declare const SIDEBAR_PADDING_BASE = 16;
@@ -7,7 +7,11 @@ export declare const SIDEBAR_ICON_SIZE = 14;
 export declare const SIDEBAR_TOGGLE_ICON_SIZE = 18;
 export declare const SIDEBAR_VARIANT_STYLES: Record<SidebarVariant, string>;
 export declare const SIDEBAR_ITEM_BASE_CLASSES = "bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer";
-export declare const SIDEBAR_ITEM_ACTIVE_CLASSES = "bear-bg-pink-500 bear-text-white bear-shadow-md";
+export declare const SIDEBAR_ITEM_ACTIVE_FILL = "bear-bg-bear-500 bear-text-white bear-shadow-md";
+export declare const SIDEBAR_ITEM_ACTIVE_BORDER = "bear-bg-bear-50 dark:bear-bg-bear-900/30 bear-text-bear-700 dark:bear-text-bear-200 bear-border-l-2 bear-border-bear-500 -bear-ml-px bear-pl-[11px]";
+export declare const SIDEBAR_ITEM_ACTIVE_INDICATOR = "bear-relative bear-bg-bear-100 dark:bear-bg-bear-900/40 bear-text-bear-700 dark:bear-text-bear-200 before:bear-content-[''] before:bear-absolute before:bear-left-0 before:bear-top-1/2 before:-bear-translate-y-1/2 before:bear-w-1 before:bear-h-6 before:bear-rounded-full before:bear-bg-bear-500";
+export declare const SIDEBAR_ITEM_ACTIVE_CLASSES = "bear-bg-bear-500 bear-text-white bear-shadow-md";
+export declare const SIDEBAR_ITEM_ACTIVE_BY_VARIANT: Record<SidebarActiveVariant, string>;
 export declare const SIDEBAR_ITEM_INACTIVE_CLASSES = "bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100";
 export declare const SIDEBAR_ITEM_DISABLED_CLASSES = "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none";
 export declare const SIDEBAR_GROUP_TITLE_CLASSES = "bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500";

package/dist/components/Sidebar/Sidebar.const.js

@@ -1,22 +1,29 @@
-const e = 256, r = 64, a = 16, b = 12, t = 14, n = 18, o = {
+const a = 256, t = 64, o = 16, n = 12, c = 14, d = 18, E = {
   default: "bear-bg-white dark:bear-bg-zinc-900 bear-border-zinc-200 dark:bear-border-zinc-700",
   bordered: "bear-bg-white dark:bear-bg-zinc-900 bear-border-2 bear-border-zinc-300 dark:bear-border-zinc-600 bear-rounded-xl bear-m-2",
   floating: "bear-bg-white/95 dark:bear-bg-zinc-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"
-}, c = "bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer", S = "bear-bg-pink-500 bear-text-white bear-shadow-md", i = "bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100", d = "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none", E = "bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500", _ = "bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between", A = "bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto", I = "bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";
+}, i = "bear-flex bear-items-center bear-gap-3 bear-py-2.5 bear-px-3 bear-rounded-lg bear-text-sm bear-transition-all bear-duration-200 bear-cursor-pointer", e = "bear-bg-bear-500 bear-text-white bear-shadow-md", r = "bear-bg-bear-50 dark:bear-bg-bear-900/30 bear-text-bear-700 dark:bear-text-bear-200 bear-border-l-2 bear-border-bear-500 -bear-ml-px bear-pl-[11px]", b = "bear-relative bear-bg-bear-100 dark:bear-bg-bear-900/40 bear-text-bear-700 dark:bear-text-bear-200 before:bear-content-[''] before:bear-absolute before:bear-left-0 before:bear-top-1/2 before:-bear-translate-y-1/2 before:bear-w-1 before:bear-h-6 before:bear-rounded-full before:bear-bg-bear-500", S = {
+  fill: e,
+  border: r,
+  indicator: b
+}, I = "bear-text-zinc-600 dark:bear-text-zinc-400 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-900 dark:hover:bear-text-zinc-100", _ = "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none", A = "bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-zinc-400 dark:bear-text-zinc-500", s = "bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 dark:bear-border-zinc-800 bear-flex bear-items-center bear-justify-between", x = "bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 dark:bear-border-zinc-800 bear-mt-auto", D = "bear-p-1.5 bear-rounded-lg bear-text-zinc-400 dark:bear-text-zinc-500 hover:bear-bg-zinc-100 dark:hover:bear-bg-zinc-800 hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300 bear-transition-colors";
 export {
-  r as SIDEBAR_COLLAPSED_WIDTH,
-  b as SIDEBAR_DEPTH_INDENT,
-  A as SIDEBAR_FOOTER_CLASSES,
-  E as SIDEBAR_GROUP_TITLE_CLASSES,
-  _ as SIDEBAR_HEADER_CLASSES,
-  t as SIDEBAR_ICON_SIZE,
-  S as SIDEBAR_ITEM_ACTIVE_CLASSES,
-  c as SIDEBAR_ITEM_BASE_CLASSES,
-  d as SIDEBAR_ITEM_DISABLED_CLASSES,
-  i as SIDEBAR_ITEM_INACTIVE_CLASSES,
-  a as SIDEBAR_PADDING_BASE,
-  I as SIDEBAR_TOGGLE_CLASSES,
-  n as SIDEBAR_TOGGLE_ICON_SIZE,
-  o as SIDEBAR_VARIANT_STYLES,
-  e as SIDEBAR_WIDTH
+  t as SIDEBAR_COLLAPSED_WIDTH,
+  n as SIDEBAR_DEPTH_INDENT,
+  x as SIDEBAR_FOOTER_CLASSES,
+  A as SIDEBAR_GROUP_TITLE_CLASSES,
+  s as SIDEBAR_HEADER_CLASSES,
+  c as SIDEBAR_ICON_SIZE,
+  r as SIDEBAR_ITEM_ACTIVE_BORDER,
+  S as SIDEBAR_ITEM_ACTIVE_BY_VARIANT,
+  e as SIDEBAR_ITEM_ACTIVE_FILL,
+  b as SIDEBAR_ITEM_ACTIVE_INDICATOR,
+  i as SIDEBAR_ITEM_BASE_CLASSES,
+  _ as SIDEBAR_ITEM_DISABLED_CLASSES,
+  I as SIDEBAR_ITEM_INACTIVE_CLASSES,
+  o as SIDEBAR_PADDING_BASE,
+  D as SIDEBAR_TOGGLE_CLASSES,
+  d as SIDEBAR_TOGGLE_ICON_SIZE,
+  E as SIDEBAR_VARIANT_STYLES,
+  a as SIDEBAR_WIDTH
 };

package/dist/components/Sidebar/Sidebar.js

@@ -1,70 +1,75 @@
-import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
 import { cn as r } from "../../utils/cn.js";
-import { ChevronRightIcon as b, ChevronLeftIcon as c } from "../Icon/index.js";
-import { SidebarItem as u } from "./components/SidebarItem/SidebarItem.js";
-import { SIDEBAR_WIDTH as v, SIDEBAR_COLLAPSED_WIDTH as L, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as x, SIDEBAR_HEADER_CLASSES as N, SIDEBAR_FOOTER_CLASSES as T, SIDEBAR_VARIANT_STYLES as y } from "./Sidebar.const.js";
-const k = (_) => {
+import { ChevronRightIcon as c, ChevronLeftIcon as S } from "../Icon/index.js";
+import { SidebarItem as N } from "./components/SidebarItem/SidebarItem.js";
+import { SIDEBAR_WIDTH as T, SIDEBAR_COLLAPSED_WIDTH as y, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as H, SIDEBAR_HEADER_CLASSES as O, SIDEBAR_FOOTER_CLASSES as g, SIDEBAR_VARIANT_STYLES as w } from "./Sidebar.const.js";
+const V = (f) => {
   const {
-    items: f,
+    items: _,
     collapsed: e = !1,
     onCollapsedChange: d,
-    width: m = v,
-    collapsedWidth: E = L,
+    width: h = T,
+    collapsedWidth: m = y,
     header: s,
     footer: n,
+    showHeader: E = !0,
     activeItemId: I,
     onItemClick: p,
-    variant: t = "default",
-    position: l = "left",
-    className: h,
-    style: A,
-    testId: B,
-    id: C
-  } = _, D = e ? E : m, R = l === "left" ? "bear-border-r" : "bear-border-l";
-  return /* @__PURE__ */ S(
+    activeVariant: A = "fill",
+    fullHeight: B = !1,
+    variant: l = "default",
+    position: t = "left",
+    className: u,
+    style: C,
+    testId: v,
+    id: D
+  } = f, R = e ? m : h, L = t === "left" ? "bear-border-r" : "bear-border-l", x = E && s;
+  return /* @__PURE__ */ b(
     "aside",
     {
-      id: C,
-      "data-testid": B,
+      id: D,
+      "data-testid": v,
       className: r(
         "Bear-Sidebar",
-        `Bear-Sidebar--${t}`,
+        `Bear-Sidebar--${l}`,
         e && "Bear-Sidebar--collapsed",
         "bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",
-        t === "default" && R,
-        y[t],
-        h
+        B && "bear-min-h-full",
+        l === "default" && L,
+        w[l],
+        u
       ),
-      style: { width: D, ...A },
+      style: { width: R, ...C },
       children: [
-        s && /* @__PURE__ */ S("div", { className: r("Bear-Sidebar__header", N), children: [
+        x && /* @__PURE__ */ b("div", { className: r("Bear-Sidebar__header", O), children: [
           !e && s,
           d && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               onClick: () => d(!e),
-              className: r("Bear-Sidebar__toggle", x),
+              className: r("Bear-Sidebar__toggle", H),
               "aria-label": e ? "Expand sidebar" : "Collapse sidebar",
-              children: e ? l === "left" ? /* @__PURE__ */ a(b, { size: i }) : /* @__PURE__ */ a(c, { size: i }) : l === "left" ? /* @__PURE__ */ a(c, { size: i }) : /* @__PURE__ */ a(b, { size: i })
+              children: e ? t === "left" ? /* @__PURE__ */ a(c, { size: i }) : /* @__PURE__ */ a(S, { size: i }) : t === "left" ? /* @__PURE__ */ a(S, { size: i }) : /* @__PURE__ */ a(c, { size: i })
             }
           )
         ] }),
-        /* @__PURE__ */ a("nav", { className: "Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1", children: f.map((o) => /* @__PURE__ */ a(
-          u,
+        /* @__PURE__ */ a("nav", { className: "Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0", children: _.map((o) => /* @__PURE__ */ a(
+          N,
           {
             item: o,
             isActive: o.id === I,
             collapsed: e,
-            onClick: p
+            onClick: p,
+            activeVariant: A
           },
           o.id
         )) }),
-        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", T), children: e ? null : n })
+        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", g), children: e ? null : n })
       ]
     }
   );
 };
 export {
-  k as Sidebar
+  V as Sidebar
 };

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

@@ -1,6 +1,7 @@
 import { ReactNode, CSSProperties } from 'react';
 export type SidebarVariant = 'default' | 'bordered' | 'floating';
 export type SidebarPosition = 'left' | 'right';
+export type SidebarActiveVariant = 'fill' | 'border' | 'indicator';
 export interface SidebarItem {
     id: string;
     label: string;
@@ -19,8 +20,14 @@ export interface SidebarProps {
     collapsedWidth?: number | string;
     header?: ReactNode;
     footer?: ReactNode;
+    /** When false, header (e.g. logo + title) is not rendered. Default true. */
+    showHeader?: boolean;
     activeItemId?: string;
     onItemClick?: (item: SidebarItem) => void;
+    /** How the active item is highlighted: fill (solid bg), border (left border), indicator (pill). Default fill. */
+    activeVariant?: SidebarActiveVariant;
+    /** When true, sidebar uses min-h-full so it fills viewport height. Default false. */
+    fullHeight?: boolean;
     variant?: SidebarVariant;
     position?: SidebarPosition;
     className?: string;
@@ -41,4 +48,6 @@ export interface SidebarItemComponentProps {
     collapsed?: boolean;
     depth?: number;
     onClick?: (item: SidebarItem) => void;
+    /** How active state is shown. Passed from Sidebar activeVariant. */
+    activeVariant?: SidebarActiveVariant;
 }

package/dist/components/Sidebar/components/SidebarItem/SidebarItem.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),b=require("../../../../utils/cn.cjs"),u=require("../../../Icon/index.cjs"),r=require("../../Sidebar.const.cjs"),S=_=>{const{item:e,isActive:o,collapsed:i,depth:c=0,onClick:s}=_,[l,m]=d.useState(!1),t=e.children&&e.children.length>0,E=i?r.SIDEBAR_PADDING_BASE:r.SIDEBAR_PADDING_BASE+c*r.SIDEBAR_DEPTH_INDENT,I=d.useCallback(()=>{t&&m(n=>!n),e.onClick&&e.onClick(),s==null||s(e)},[t,e,s]),h=a.jsxs(a.Fragment,{children:[e.icon&&a.jsx("span",{className:"Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),!i&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"Bear-Sidebar__item-label bear-flex-1 bear-truncate",children:e.label}),e.badge&&a.jsx("span",{className:"Bear-Sidebar__item-badge bear-ml-auto",children:e.badge}),t&&a.jsx(u.ChevronDownIcon,{size:r.SIDEBAR_ICON_SIZE,className:b.cn("Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",l&&"bear-rotate-180")})]})]}),A=b.cn("Bear-Sidebar__item",r.SIDEBAR_ITEM_BASE_CLASSES,o?`Bear-Sidebar__item--active ${r.SIDEBAR_ITEM_ACTIVE_CLASSES}`:r.SIDEBAR_ITEM_INACTIVE_CLASSES,e.disabled&&`Bear-Sidebar__item--disabled ${r.SIDEBAR_ITEM_DISABLED_CLASSES}`,i&&"Bear-Sidebar__item--collapsed bear-justify-center"),B=e.href?"a":"button";return a.jsxs("div",{className:"Bear-Sidebar__item-wrapper",children:[a.jsx(B,{href:e.href,onClick:I,disabled:e.disabled,className:A,style:{paddingLeft:E},title:i?e.label:void 0,children:h}),t&&l&&!i&&a.jsx("div",{className:"Bear-Sidebar__children bear-mt-1",children:e.children.map(n=>a.jsx(S,{item:n,isActive:!1,collapsed:i,depth:c+1,onClick:s},n.id))})]})};exports.SidebarItem=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),b=require("../../../../utils/cn.cjs"),f=require("../../../Icon/index.cjs"),r=require("../../Sidebar.const.cjs"),_=o=>{const{item:e,isActive:S,collapsed:i,depth:c=0,onClick:s,activeVariant:m="fill"}=o,[l,I]=d.useState(!1),t=e.children&&e.children.length>0,E=i?r.SIDEBAR_PADDING_BASE:r.SIDEBAR_PADDING_BASE+c*r.SIDEBAR_DEPTH_INDENT,h=d.useCallback(()=>{t&&I(n=>!n),e.onClick&&e.onClick(),s==null||s(e)},[t,e,s]),A=a.jsxs(a.Fragment,{children:[e.icon&&a.jsx("span",{className:"Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),!i&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"Bear-Sidebar__item-label bear-flex-1 bear-truncate",children:e.label}),e.badge&&a.jsx("span",{className:"Bear-Sidebar__item-badge bear-ml-auto",children:e.badge}),t&&a.jsx(f.ChevronDownIcon,{size:r.SIDEBAR_ICON_SIZE,className:b.cn("Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",l&&"bear-rotate-180")})]})]}),B=r.SIDEBAR_ITEM_ACTIVE_BY_VARIANT[m],u=b.cn("Bear-Sidebar__item",r.SIDEBAR_ITEM_BASE_CLASSES,S?`Bear-Sidebar__item--active ${B}`:r.SIDEBAR_ITEM_INACTIVE_CLASSES,e.disabled&&`Bear-Sidebar__item--disabled ${r.SIDEBAR_ITEM_DISABLED_CLASSES}`,i&&"Bear-Sidebar__item--collapsed bear-justify-center"),D=e.href?"a":"button";return a.jsxs("div",{className:"Bear-Sidebar__item-wrapper",children:[a.jsx(D,{href:e.href,onClick:h,disabled:e.disabled,className:u,style:{paddingLeft:E},title:i?e.label:void 0,children:A}),t&&l&&!i&&a.jsx("div",{className:"Bear-Sidebar__children bear-mt-1",children:e.children.map(n=>a.jsx(_,{item:n,isActive:!1,collapsed:i,depth:c+1,onClick:s},n.id))})]})};exports.SidebarItem=_;

package/dist/components/Sidebar/components/SidebarItem/SidebarItem.js

@@ -1,66 +1,67 @@
-import { jsxs as s, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { useState as A, useCallback as f } from "react";
-import { cn as m } from "../../../../utils/cn.js";
-import { ChevronDownIcon as C } from "../../../Icon/index.js";
-import { SIDEBAR_ICON_SIZE as D, SIDEBAR_ITEM_DISABLED_CLASSES as N, SIDEBAR_ITEM_ACTIVE_CLASSES as u, SIDEBAR_ITEM_INACTIVE_CLASSES as v, SIDEBAR_ITEM_BASE_CLASSES as T, SIDEBAR_PADDING_BASE as o, SIDEBAR_DEPTH_INDENT as R } from "../../Sidebar.const.js";
-const g = (b) => {
+import { jsxs as n, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { useState as C, useCallback as D } from "react";
+import { cn as o } from "../../../../utils/cn.js";
+import { ChevronDownIcon as N } from "../../../Icon/index.js";
+import { SIDEBAR_ICON_SIZE as v, SIDEBAR_ITEM_DISABLED_CLASSES as u, SIDEBAR_ITEM_ACTIVE_BY_VARIANT as T, SIDEBAR_ITEM_INACTIVE_CLASSES as R, SIDEBAR_ITEM_BASE_CLASSES as g, SIDEBAR_PADDING_BASE as m, SIDEBAR_DEPTH_INDENT as k } from "../../Sidebar.const.js";
+const x = (_) => {
   const {
     item: e,
-    isActive: _,
+    isActive: b,
     collapsed: r,
     depth: l = 0,
-    onClick: i
-  } = b, [c, S] = A(!1), t = e.children && e.children.length > 0, h = r ? o : o + l * R, E = f(() => {
-    t && S((n) => !n), e.onClick && e.onClick(), i == null || i(e);
-  }, [t, e, i]), I = /* @__PURE__ */ s(d, { children: [
+    onClick: i,
+    activeVariant: S = "fill"
+  } = _, [c, h] = C(!1), t = e.children && e.children.length > 0, E = r ? m : m + l * k, I = D(() => {
+    t && h((s) => !s), e.onClick && e.onClick(), i == null || i(e);
+  }, [t, e, i]), B = /* @__PURE__ */ n(d, { children: [
     e.icon && /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
-    !r && /* @__PURE__ */ s(d, { children: [
+    !r && /* @__PURE__ */ n(d, { children: [
       /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-label bear-flex-1 bear-truncate", children: e.label }),
       e.badge && /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-badge bear-ml-auto", children: e.badge }),
       t && /* @__PURE__ */ a(
-        C,
+        N,
         {
-          size: D,
-          className: m(
+          size: v,
+          className: o(
             "Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",
             c && "bear-rotate-180"
           )
         }
       )
     ] })
-  ] }), B = m(
+  ] }), A = T[S], f = o(
     "Bear-Sidebar__item",
-    T,
-    _ ? `Bear-Sidebar__item--active ${u}` : v,
-    e.disabled && `Bear-Sidebar__item--disabled ${N}`,
+    g,
+    b ? `Bear-Sidebar__item--active ${A}` : R,
+    e.disabled && `Bear-Sidebar__item--disabled ${u}`,
     r && "Bear-Sidebar__item--collapsed bear-justify-center"
   ), p = e.href ? "a" : "button";
-  return /* @__PURE__ */ s("div", { className: "Bear-Sidebar__item-wrapper", children: [
+  return /* @__PURE__ */ n("div", { className: "Bear-Sidebar__item-wrapper", children: [
     /* @__PURE__ */ a(
       p,
       {
         href: e.href,
-        onClick: E,
+        onClick: I,
         disabled: e.disabled,
-        className: B,
-        style: { paddingLeft: h },
+        className: f,
+        style: { paddingLeft: E },
         title: r ? e.label : void 0,
-        children: I
+        children: B
       }
     ),
-    t && c && !r && /* @__PURE__ */ a("div", { className: "Bear-Sidebar__children bear-mt-1", children: e.children.map((n) => /* @__PURE__ */ a(
-      g,
+    t && c && !r && /* @__PURE__ */ a("div", { className: "Bear-Sidebar__children bear-mt-1", children: e.children.map((s) => /* @__PURE__ */ a(
+      x,
       {
-        item: n,
+        item: s,
         isActive: !1,
         collapsed: r,
         depth: l + 1,
         onClick: i
       },
-      n.id
+      s.id
     )) })
   ] });
 };
 export {
-  g as SidebarItem
+  x as SidebarItem
 };

package/dist/components/SignPad/SignPad.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("react"),_=require("../../utils/cn.cjs"),w=require("../Button/Button.cjs"),s=require("./SignPad.const.cjs"),V=y=>{const{onChange:r,width:P=s.SIGN_PAD_DEFAULT_WIDTH,height:A=s.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:B,strokeWidth:b=s.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:O,placeholder:U=s.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:o=!1,readOnly:i=!1,showClear:I=!0,showSave:v=!1,clearText:M="Clear",saveText:j="Save",outputFormat:h=s.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:D=s.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:F,testId:H,id:K,...W}=y,l=a.useRef(null),[g,k]=a.useState(!1),[u,L]=a.useState(!1),[f,E]=a.useState(null),[T,q]=a.useState(!1);a.useEffect(()=>{const e=()=>{const n=document.documentElement.classList.contains("dark");q(n)};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const R=B||(T?s.SIGN_PAD_STROKE_DARK:s.SIGN_PAD_STROKE_LIGHT),S=O||(T?s.SIGN_PAD_BG_DARK:s.SIGN_PAD_BG_LIGHT);a.useEffect(()=>{const e=l.current;if(!e)return;const t=e.getContext("2d");t&&(e.width=P,e.height=A,t.fillStyle=S,t.fillRect(0,0,P,A))},[P,A,S,T]);const C=a.useCallback(e=>{const t=l.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),d=t.width/n.width,G=t.height/n.height;if("touches"in e){const p=e.touches[0];return{x:(p.clientX-n.left)*d,y:(p.clientY-n.top)*G}}return{x:(e.clientX-n.left)*d,y:(e.clientY-n.top)*G}},[]),x=a.useCallback(e=>{if(o||i)return;const t=C(e);k(!0),E(t)},[o,i,C]),m=a.useCallback(e=>{if(!g||o||i)return;const t=l.current,n=t==null?void 0:t.getContext("2d");if(!t||!n||!f)return;const d=C(e);n.beginPath(),n.moveTo(f.x,f.y),n.lineTo(d.x,d.y),n.strokeStyle=R,n.lineWidth=b,n.lineCap="round",n.lineJoin="round",n.stroke(),E(d),L(!0)},[g,o,i,f,R,b,C]),N=a.useCallback(()=>{if(g&&u){const e=l.current;if(e&&r){const t=e.toDataURL(h,D);r(t)}}k(!1),E(null)},[g,u,r,h,D]),X=a.useCallback(()=>{const e=l.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=S==="transparent"?"rgba(0,0,0,0)":S,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),L(!1),r==null||r(null))},[S,r]),Y=a.useCallback(()=>{const e=l.current;if(!e||!u)return;const t=e.toDataURL(h,D);r==null||r(t)},[u,r,h,D]);return c.jsxs("div",{id:K,"data-testid":H,className:_.cn("Bear-SignPad",s.SIGN_PAD_ROOT_CLASSES,o&&"Bear-SignPad--disabled bear-opacity-50",i&&"Bear-SignPad--readonly",F),...W,children:[c.jsxs("div",{className:_.cn("Bear-SignPad__canvas-wrapper",s.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!o&&!i&&s.SIGN_PAD_CANVAS_WRAPPER_HOVER,o&&"bear-cursor-not-allowed",!o&&!i&&"bear-cursor-crosshair"),children:[c.jsx("canvas",{ref:l,className:"Bear-SignPad__canvas bear-block bear-rounded-lg",style:{width:P,height:A},onMouseDown:x,onMouseMove:m,onMouseUp:N,onMouseLeave:N,onTouchStart:x,onTouchMove:m,onTouchEnd:N}),!u&&c.jsx("div",{className:_.cn("Bear-SignPad__placeholder",s.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),c.jsx("div",{className:_.cn("Bear-SignPad__line",s.SIGN_PAD_LINE_CLASSES)}),c.jsx("span",{className:_.cn("Bear-SignPad__x-mark",s.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(I||v)&&c.jsxs("div",{className:_.cn("Bear-SignPad__actions",s.SIGN_PAD_ACTIONS_CLASSES),children:[I&&c.jsx(w.Button,{size:"sm",variant:"ghost",onClick:X,disabled:o||!u,children:M}),v&&c.jsx(w.Button,{size:"sm",variant:"primary",onClick:Y,disabled:o||!u,children:j})]})]})};exports.SignPad=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),_=require("../../utils/cn.cjs"),p=require("../Button/Button.cjs"),a=require("./SignPad.const.cjs"),V=y=>{const{onChange:r,width:P=a.SIGN_PAD_DEFAULT_WIDTH,height:A=a.SIGN_PAD_DEFAULT_HEIGHT,strokeColor:B,strokeWidth:N=a.SIGN_PAD_DEFAULT_STROKE_WIDTH,backgroundColor:O,placeholder:U=a.SIGN_PAD_DEFAULT_PLACEHOLDER,disabled:o=!1,readOnly:l=!1,showClear:I=!0,showSave:v=!1,clearText:M="Clear",saveText:j="Save",outputFormat:h=a.SIGN_PAD_DEFAULT_OUTPUT_FORMAT,outputQuality:D=a.SIGN_PAD_DEFAULT_OUTPUT_QUALITY,className:F,testId:H,id:K,...W}=y,i=s.useRef(null),[f,x]=s.useState(!1),[u,m]=s.useState(!1),[g,C]=s.useState(null),[E,q]=s.useState(!1);s.useEffect(()=>{const e=()=>{const n=document.documentElement.classList.contains("dark");q(n)};e();const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>t.disconnect()},[]);const k=B||(E?a.SIGN_PAD_STROKE_DARK:a.SIGN_PAD_STROKE_LIGHT),S=O||(E?a.SIGN_PAD_BG_DARK:a.SIGN_PAD_BG_LIGHT);s.useEffect(()=>{const e=i.current;if(!e)return;const t=e.getContext("2d");t&&(e.width=P,e.height=A,t.fillStyle=S,t.fillRect(0,0,P,A))},[P,A,S,E]);const b=s.useCallback(e=>{const t=i.current;if(!t)return{x:0,y:0};const n=t.getBoundingClientRect(),d=t.width/n.width,w=t.height/n.height;if("touches"in e){const G=e.touches[0];return{x:(G.clientX-n.left)*d,y:(G.clientY-n.top)*w}}return{x:(e.clientX-n.left)*d,y:(e.clientY-n.top)*w}},[]),L=s.useCallback(e=>{if(o||l)return;const t=b(e);x(!0),C(t)},[o,l,b]),R=s.useCallback(e=>{if(!f||o||l)return;const t=i.current,n=t==null?void 0:t.getContext("2d");if(!t||!n||!g)return;const d=b(e);n.beginPath(),n.moveTo(g.x,g.y),n.lineTo(d.x,d.y),n.strokeStyle=k,n.lineWidth=N,n.lineCap="round",n.lineJoin="round",n.stroke(),C(d),m(!0)},[f,o,l,g,k,N,b]),T=s.useCallback(()=>{if(f&&u){const e=i.current;if(e&&r){const t=e.toDataURL(h,D);r(t)}}x(!1),C(null)},[f,u,r,h,D]),X=s.useCallback(()=>{const e=i.current,t=e==null?void 0:e.getContext("2d");!e||!t||(t.fillStyle=S==="transparent"?"rgba(0,0,0,0)":S,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),m(!1),r==null||r(null))},[S,r]),Y=s.useCallback(()=>{const e=i.current;if(!e||!u)return;const t=e.toDataURL(h,D);r==null||r(t)},[u,r,h,D]);return c.jsxs("div",{id:K,"data-testid":H,className:_.cn("Bear-SignPad bear-max-w-full bear-w-full",a.SIGN_PAD_ROOT_CLASSES,o&&"Bear-SignPad--disabled bear-opacity-50",l&&"Bear-SignPad--readonly",F),...W,children:[c.jsxs("div",{className:_.cn("Bear-SignPad__canvas-wrapper bear-max-w-full bear-overflow-hidden",a.SIGN_PAD_CANVAS_WRAPPER_CLASSES,!o&&!l&&a.SIGN_PAD_CANVAS_WRAPPER_HOVER,o&&"bear-cursor-not-allowed",!o&&!l&&"bear-cursor-crosshair"),children:[c.jsx("canvas",{ref:i,className:"Bear-SignPad__canvas bear-block bear-rounded-lg bear-max-w-full",style:{width:P,height:A},onMouseDown:L,onMouseMove:R,onMouseUp:T,onMouseLeave:T,onTouchStart:L,onTouchMove:R,onTouchEnd:T}),!u&&c.jsx("div",{className:_.cn("Bear-SignPad__placeholder",a.SIGN_PAD_PLACEHOLDER_CLASSES),children:U}),c.jsx("div",{className:_.cn("Bear-SignPad__line",a.SIGN_PAD_LINE_CLASSES)}),c.jsx("span",{className:_.cn("Bear-SignPad__x-mark",a.SIGN_PAD_X_MARK_CLASSES),children:"×"})]}),(I||v)&&c.jsxs("div",{className:_.cn("Bear-SignPad__actions",a.SIGN_PAD_ACTIONS_CLASSES),children:[I&&c.jsx(p.Button,{size:"sm",variant:"ghost",onClick:X,disabled:o||!u,children:M}),v&&c.jsx(p.Button,{size:"sm",variant:"primary",onClick:Y,disabled:o||!u,children:j})]})]})};exports.SignPad=V;

package/dist/components/SignPad/SignPad.js

@@ -1,99 +1,99 @@
 import { jsxs as I, jsx as l } from "react/jsx-runtime";
-import { useRef as J, useState as m, useEffect as y, useCallback as d } from "react";
+import { useRef as J, useState as g, useEffect as y, useCallback as d } from "react";
 import { cn as _ } from "../../utils/cn.js";
 import { Button as O } from "../Button/Button.js";
-import { SIGN_PAD_DEFAULT_WIDTH as q, SIGN_PAD_DEFAULT_HEIGHT as Z, SIGN_PAD_DEFAULT_STROKE_WIDTH as $, SIGN_PAD_DEFAULT_PLACEHOLDER as tt, SIGN_PAD_DEFAULT_OUTPUT_FORMAT as et, SIGN_PAD_DEFAULT_OUTPUT_QUALITY as nt, SIGN_PAD_BG_DARK as rt, SIGN_PAD_BG_LIGHT as ot, SIGN_PAD_STROKE_DARK as at, SIGN_PAD_STROKE_LIGHT as st, SIGN_PAD_PLACEHOLDER_CLASSES as ct, SIGN_PAD_LINE_CLASSES as it, SIGN_PAD_X_MARK_CLASSES as lt, SIGN_PAD_CANVAS_WRAPPER_HOVER as dt, SIGN_PAD_CANVAS_WRAPPER_CLASSES as _t, SIGN_PAD_ACTIONS_CLASSES as ut, SIGN_PAD_ROOT_CLASSES as St } from "./SignPad.const.js";
-const gt = (U) => {
+import { SIGN_PAD_DEFAULT_WIDTH as q, SIGN_PAD_DEFAULT_HEIGHT as Z, SIGN_PAD_DEFAULT_STROKE_WIDTH as $, SIGN_PAD_DEFAULT_PLACEHOLDER as tt, SIGN_PAD_DEFAULT_OUTPUT_FORMAT as et, SIGN_PAD_DEFAULT_OUTPUT_QUALITY as rt, SIGN_PAD_BG_DARK as nt, SIGN_PAD_BG_LIGHT as at, SIGN_PAD_STROKE_DARK as ot, SIGN_PAD_STROKE_LIGHT as st, SIGN_PAD_PLACEHOLDER_CLASSES as ct, SIGN_PAD_LINE_CLASSES as it, SIGN_PAD_X_MARK_CLASSES as lt, SIGN_PAD_CANVAS_WRAPPER_HOVER as dt, SIGN_PAD_CANVAS_WRAPPER_CLASSES as _t, SIGN_PAD_ACTIONS_CLASSES as ut, SIGN_PAD_ROOT_CLASSES as St } from "./SignPad.const.js";
+const mt = (U) => {
   const {
-    onChange: r,
+    onChange: n,
     width: S = q,
     height: A = Z,
     strokeColor: B,
-    strokeWidth: p = $,
+    strokeWidth: b = $,
     backgroundColor: M,
     placeholder: F = tt,
-    disabled: o = !1,
-    readOnly: a = !1,
+    disabled: a = !1,
+    readOnly: o = !1,
     showClear: v = !0,
-    showSave: C = !1,
+    showSave: p = !1,
     clearText: H = "Clear",
     saveText: K = "Save",
     outputFormat: h = et,
-    outputQuality: P = nt,
+    outputQuality: P = rt,
     className: W,
     testId: X,
     id: Y,
     ...V
-  } = U, s = J(null), [D, L] = m(!1), [c, R] = m(!1), [f, E] = m(null), [N, j] = m(!1);
+  } = U, s = J(null), [f, C] = g(!1), [c, L] = g(!1), [D, E] = g(null), [N, j] = g(!1);
   y(() => {
     const t = () => {
-      const n = document.documentElement.classList.contains("dark");
-      j(n);
+      const r = document.documentElement.classList.contains("dark");
+      j(r);
     };
     t();
     const e = new MutationObserver(t);
     return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => e.disconnect();
   }, []);
-  const G = B || (N ? at : st), u = M || (N ? rt : ot);
+  const R = B || (N ? ot : st), u = M || (N ? nt : at);
   y(() => {
     const t = s.current;
     if (!t) return;
     const e = t.getContext("2d");
     e && (t.width = S, t.height = A, e.fillStyle = u, e.fillRect(0, 0, S, A));
   }, [S, A, u, N]);
-  const g = d((t) => {
+  const m = d((t) => {
     const e = s.current;
     if (!e) return { x: 0, y: 0 };
-    const n = e.getBoundingClientRect(), i = e.width / n.width, w = e.height / n.height;
+    const r = e.getBoundingClientRect(), i = e.width / r.width, k = e.height / r.height;
     if ("touches" in t) {
       const x = t.touches[0];
       return {
-        x: (x.clientX - n.left) * i,
-        y: (x.clientY - n.top) * w
+        x: (x.clientX - r.left) * i,
+        y: (x.clientY - r.top) * k
       };
     }
     return {
-      x: (t.clientX - n.left) * i,
-      y: (t.clientY - n.top) * w
+      x: (t.clientX - r.left) * i,
+      y: (t.clientY - r.top) * k
     };
-  }, []), b = d((t) => {
-    if (o || a) return;
-    const e = g(t);
-    L(!0), E(e);
-  }, [o, a, g]), k = d((t) => {
-    if (!D || o || a) return;
-    const e = s.current, n = e == null ? void 0 : e.getContext("2d");
-    if (!e || !n || !f) return;
-    const i = g(t);
-    n.beginPath(), n.moveTo(f.x, f.y), n.lineTo(i.x, i.y), n.strokeStyle = G, n.lineWidth = p, n.lineCap = "round", n.lineJoin = "round", n.stroke(), E(i), R(!0);
-  }, [D, o, a, f, G, p, g]), T = d(() => {
-    if (D && c) {
+  }, []), w = d((t) => {
+    if (a || o) return;
+    const e = m(t);
+    C(!0), E(e);
+  }, [a, o, m]), G = d((t) => {
+    if (!f || a || o) return;
+    const e = s.current, r = e == null ? void 0 : e.getContext("2d");
+    if (!e || !r || !D) return;
+    const i = m(t);
+    r.beginPath(), r.moveTo(D.x, D.y), r.lineTo(i.x, i.y), r.strokeStyle = R, r.lineWidth = b, r.lineCap = "round", r.lineJoin = "round", r.stroke(), E(i), L(!0);
+  }, [f, a, o, D, R, b, m]), T = d(() => {
+    if (f && c) {
       const t = s.current;
-      if (t && r) {
+      if (t && n) {
         const e = t.toDataURL(h, P);
-        r(e);
+        n(e);
       }
     }
-    L(!1), E(null);
-  }, [D, c, r, h, P]), z = d(() => {
+    C(!1), E(null);
+  }, [f, c, n, h, P]), z = d(() => {
     const t = s.current, e = t == null ? void 0 : t.getContext("2d");
-    !t || !e || (e.fillStyle = u === "transparent" ? "rgba(0,0,0,0)" : u, e.clearRect(0, 0, t.width, t.height), e.fillRect(0, 0, t.width, t.height), R(!1), r == null || r(null));
-  }, [u, r]), Q = d(() => {
+    !t || !e || (e.fillStyle = u === "transparent" ? "rgba(0,0,0,0)" : u, e.clearRect(0, 0, t.width, t.height), e.fillRect(0, 0, t.width, t.height), L(!1), n == null || n(null));
+  }, [u, n]), Q = d(() => {
     const t = s.current;
     if (!t || !c) return;
     const e = t.toDataURL(h, P);
-    r == null || r(e);
-  }, [c, r, h, P]);
+    n == null || n(e);
+  }, [c, n, h, P]);
   return /* @__PURE__ */ I(
     "div",
     {
       id: Y,
       "data-testid": X,
       className: _(
-        "Bear-SignPad",
+        "Bear-SignPad bear-max-w-full bear-w-full",
         St,
-        o && "Bear-SignPad--disabled bear-opacity-50",
-        a && "Bear-SignPad--readonly",
+        a && "Bear-SignPad--disabled bear-opacity-50",
+        o && "Bear-SignPad--readonly",
         W
       ),
       ...V,
@@ -102,25 +102,25 @@ const gt = (U) => {
           "div",
           {
             className: _(
-              "Bear-SignPad__canvas-wrapper",
+              "Bear-SignPad__canvas-wrapper bear-max-w-full bear-overflow-hidden",
               _t,
-              !o && !a && dt,
-              o && "bear-cursor-not-allowed",
-              !o && !a && "bear-cursor-crosshair"
+              !a && !o && dt,
+              a && "bear-cursor-not-allowed",
+              !a && !o && "bear-cursor-crosshair"
             ),
             children: [
               /* @__PURE__ */ l(
                 "canvas",
                 {
                   ref: s,
-                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg",
+                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg bear-max-w-full",
                   style: { width: S, height: A },
-                  onMouseDown: b,
-                  onMouseMove: k,
+                  onMouseDown: w,
+                  onMouseMove: G,
                   onMouseUp: T,
                   onMouseLeave: T,
-                  onTouchStart: b,
-                  onTouchMove: k,
+                  onTouchStart: w,
+                  onTouchMove: G,
                   onTouchEnd: T
                 }
               ),
@@ -130,24 +130,24 @@ const gt = (U) => {
             ]
           }
         ),
-        (v || C) && /* @__PURE__ */ I("div", { className: _("Bear-SignPad__actions", ut), children: [
+        (v || p) && /* @__PURE__ */ I("div", { className: _("Bear-SignPad__actions", ut), children: [
           v && /* @__PURE__ */ l(
             O,
             {
               size: "sm",
               variant: "ghost",
               onClick: z,
-              disabled: o || !c,
+              disabled: a || !c,
               children: H
             }
           ),
-          C && /* @__PURE__ */ l(
+          p && /* @__PURE__ */ l(
             O,
             {
               size: "sm",
               variant: "primary",
               onClick: Q,
-              disabled: o || !c,
+              disabled: a || !c,
               children: K
             }
           )
@@ -157,5 +157,5 @@ const gt = (U) => {
   );
 };
 export {
-  gt as SignPad
+  mt as SignPad
 };

package/dist/components/TimePicker/TimePicker.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),V=require("../../utils/cn.cjs"),G=require("../../hooks/useMediaQuery.cjs"),J=require("./TimePicker.utils.cjs"),e=require("./TimePicker.constants.cjs"),X=require("./components/TimePickerColumnsDropdown/TimePickerColumnsDropdown.cjs"),Y=require("./components/TimePickerDialDropdown/TimePickerDialDropdown.cjs"),Z=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"})}),g=t=>{const j={value:t.value,onChange:t.onChange,disabled:t.disabled??!1,placeholder:t.placeholder??"Select time",label:t.label,error:t.error,helperText:t.helperText,format:t.format??e.TIMEPICKER_FORMAT_12H,minuteStep:t.minuteStep??5,clearable:t.clearable??!0,className:t.className,size:t.size??"md",variant:t.variant??"default",dropdownVariant:t.dropdownVariant??e.TIMEPICKER_VARIANT_COLUMNS,dropdownVariantBreakpoint:t.dropdownVariantBreakpoint??e.TIMEPICKER_DEFAULT_BREAKPOINT,icon:t.icon,translations:t.translations},{value:y,onChange:l,disabled:T,placeholder:D,label:M,error:i,helperText:S,format:c,minuteStep:_,clearable:A,className:H,size:U,variant:q,dropdownVariant:f,dropdownVariantBreakpoint:F,icon:z,translations:b}=j,B=G.useMediaQuery(`(min-width: ${F}px)`),p=f===e.TIMEPICKER_VARIANT_AUTO?B?e.TIMEPICKER_VARIANT_DIAL:e.TIMEPICKER_VARIANT_COLUMNS:f,h=p===e.TIMEPICKER_VARIANT_DIAL&&c===e.TIMEPICKER_FORMAT_24H?e.TIMEPICKER_VARIANT_COLUMNS:p,n=y,[C,d]=r.useState(!1),[u,k]=r.useState(12),[E,N]=r.useState(0),[I,K]=r.useState("AM"),R=r.useRef(null);r.useEffect(()=>{if(n&&typeof n=="string"){const[o,a]=n.split(" "),[W,$]=o.split(":").map(Number);k(W),N($),a&&K(a)}},[n]),r.useEffect(()=>{const o=a=>{R.current&&!R.current.contains(a.target)&&d(!1)};return document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[]);const O=r.useCallback(()=>{l==null||l(J.formatTime(u,E,I,c??e.TIMEPICKER_FORMAT_12H)),d(!1)},[l,u,E,I,c]),x=c===e.TIMEPICKER_FORMAT_12H?Array.from({length:e.TIMEPICKER_HOURS_12H},(o,a)=>a+1):Array.from({length:e.TIMEPICKER_HOURS_24H},(o,a)=>a),L=Array.from({length:e.TIMEPICKER_MINUTES_DIVISOR/(_??5)},(o,a)=>a*(_??5)),w=r.useCallback(()=>d(!1),[]),v=c??e.TIMEPICKER_FORMAT_12H,P=_??5,m=r.useMemo(()=>({selectedHour:u,setSelectedHour:k,selectedMinute:E,setSelectedMinute:N,period:I,setPeriod:K,format:v,hours:x,minutes:L,timeValue:n,clearable:A??!0,onChange:l,onConfirm:O,onClose:w,translations:b}),[u,E,I,v,x,L,n,A,l,O,w,b]),Q=r.useCallback(()=>C?h===e.TIMEPICKER_VARIANT_DIAL?s.jsx(Y.TimePickerDialDropdown,{...m,minuteStep:P}):s.jsx(X.TimePickerColumnsDropdown,{...m}):null,[C,h,m,P]);return s.jsxs("div",{ref:R,className:V.cn(e.TIMEPICKER_ROOT_CLASSES,H),children:[M&&s.jsx("label",{className:e.TIMEPICKER_LABEL_CLASSES,children:M}),s.jsxs("button",{type:"button",onClick:()=>!T&&d(!C),disabled:T,className:V.cn(e.TIMEPICKER_BUTTON_CLASSES,e.sizeClasses[U??"md"],e.variantClasses[q??"default"],i?"bear-border-red-500":"focus:bear-border-pink-500",T&&"bear-opacity-50 bear-cursor-not-allowed",n?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-400 dark:bear-text-zinc-500"),children:[s.jsx("span",{children:n||D}),z??Z]}),i&&s.jsx("p",{className:e.TIMEPICKER_ERROR_CLASSES,children:i}),S&&!i&&s.jsx("p",{className:e.TIMEPICKER_HELPER_CLASSES,children:S}),Q()]})};exports.TimePicker=g;