@forgedevstack/bear 1.0.3 → 1.0.4

package/dist/components/Sidebar/Sidebar.js

@@ -1,158 +1,70 @@
-import { jsxs as s, jsx as r, Fragment as g } from "react/jsx-runtime";
-import { useState as z, useCallback as S } from "react";
-import { cn as l } from "../../utils/cn.js";
-import { ChevronRightIcon as v, ChevronLeftIcon as y, ChevronDownIcon as N } from "../Icon/index.js";
-const k = 256, C = 64, w = ({
-  item: e,
-  isActive: b,
-  collapsed: a,
-  depth: i = 0,
-  onClick: n
-}) => {
-  const [t, o] = z(!1), d = e.children && e.children.length > 0, u = a ? 16 : 16 + i * 12, f = S(() => {
-    d && o((c) => !c), e.onClick && e.onClick(), n == null || n(e);
-  }, [d, e, n]), h = /* @__PURE__ */ s(g, { children: [
-    e.icon && /* @__PURE__ */ r("span", { className: "bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
-    !a && /* @__PURE__ */ s(g, { children: [
-      /* @__PURE__ */ r("span", { className: "bear-flex-1 bear-truncate", children: e.label }),
-      e.badge && /* @__PURE__ */ r("span", { className: "bear-ml-auto", children: e.badge }),
-      d && /* @__PURE__ */ r(
-        N,
-        {
-          size: 14,
-          className: l(
-            "bear-ml-1 bear-transition-transform bear-duration-200",
-            t && "bear-rotate-180"
-          )
-        }
-      )
-    ] })
-  ] }), m = l(
-    "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",
-    b ? "bear-bg-bear-500 bear-text-white bear-shadow-md" : "bear-text-zinc-600 hover:bear-bg-zinc-100 hover:bear-text-zinc-900",
-    e.disabled && "bear-opacity-50 bear-cursor-not-allowed bear-pointer-events-none",
-    a && "bear-justify-center"
-  ), x = e.href ? "a" : "button";
-  return /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ r(
-      x,
-      {
-        href: e.href,
-        onClick: f,
-        disabled: e.disabled,
-        className: m,
-        style: { paddingLeft: u },
-        title: a ? e.label : void 0,
-        children: h
-      }
-    ),
-    d && t && !a && /* @__PURE__ */ r("div", { className: "bear-mt-1", children: e.children.map((c) => /* @__PURE__ */ r(
-      w,
-      {
-        item: c,
-        isActive: !1,
-        collapsed: a,
-        depth: i + 1,
-        onClick: n
-      },
-      c.id
-    )) })
-  ] });
-}, O = ({
-  title: e,
-  children: b,
-  collapsible: a = !1,
-  defaultCollapsed: i = !1,
-  className: n
-}) => {
-  const [t, o] = z(i);
-  return /* @__PURE__ */ s("div", { className: l("bear-mb-4", n), children: [
-    e && /* @__PURE__ */ s(
-      "button",
-      {
-        type: "button",
-        onClick: () => a && o(!t),
-        className: l(
-          "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",
-          a && "bear-cursor-pointer hover:bear-text-zinc-600"
-        ),
-        children: [
-          a && /* @__PURE__ */ r(
-            N,
-            {
-              size: 12,
-              className: l(
-                "bear-transition-transform",
-                t && "-bear-rotate-90"
-              )
-            }
-          ),
-          e
-        ]
-      }
-    ),
-    !t && /* @__PURE__ */ r("div", { className: "bear-space-y-1", children: b })
-  ] });
-}, R = ({
-  items: e,
-  collapsed: b = !1,
-  onCollapsedChange: a,
-  width: i = k,
-  collapsedWidth: n = C,
-  header: t,
-  footer: o,
-  activeItemId: d,
-  onItemClick: u,
-  variant: f = "default",
-  position: h = "left",
-  className: m,
-  style: x
-}) => {
-  const c = b ? n : i;
-  return /* @__PURE__ */ s(
+import { jsxs as S, 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 = (_) => {
+  const {
+    items: f,
+    collapsed: e = !1,
+    onCollapsedChange: d,
+    width: m = v,
+    collapsedWidth: E = L,
+    header: s,
+    footer: n,
+    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(
     "aside",
     {
-      className: l(
+      id: C,
+      "data-testid": B,
+      className: r(
+        "Bear-Sidebar",
+        `Bear-Sidebar--${t}`,
+        e && "Bear-Sidebar--collapsed",
         "bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",
-        f === "default" && (h === "left" ? "bear-border-r" : "bear-border-l"),
-        {
-          default: "bear-bg-white dark:bear-bg-gray-900 bear-border-zinc-200 dark:bear-border-zinc-700",
-          bordered: "bear-bg-white dark:bear-bg-gray-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-gray-900/95 bear-backdrop-blur-sm bear-shadow-2xl bear-rounded-xl bear-m-3"
-        }[f],
-        m
+        t === "default" && R,
+        y[t],
+        h
       ),
-      style: { width: c, ...x },
+      style: { width: D, ...A },
       children: [
-        t && /* @__PURE__ */ s("div", { className: "bear-px-3 bear-py-4 bear-border-b bear-border-zinc-100 bear-flex bear-items-center bear-justify-between", children: [
-          !b && t,
-          a && /* @__PURE__ */ r(
+        s && /* @__PURE__ */ S("div", { className: r("Bear-Sidebar__header", N), children: [
+          !e && s,
+          d && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: () => a(!b),
-              className: "bear-p-1.5 bear-rounded-lg bear-text-zinc-400 hover:bear-bg-zinc-100 hover:bear-text-zinc-600 bear-transition-colors",
-              "aria-label": b ? "Expand sidebar" : "Collapse sidebar",
-              children: b ? h === "left" ? /* @__PURE__ */ r(v, { size: 18 }) : /* @__PURE__ */ r(y, { size: 18 }) : h === "left" ? /* @__PURE__ */ r(y, { size: 18 }) : /* @__PURE__ */ r(v, { size: 18 })
+              onClick: () => d(!e),
+              className: r("Bear-Sidebar__toggle", x),
+              "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 })
             }
           )
         ] }),
-        /* @__PURE__ */ r("nav", { className: "bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1", children: e.map((p) => /* @__PURE__ */ r(
-          w,
+        /* @__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,
           {
-            item: p,
-            isActive: p.id === d,
-            collapsed: b,
-            onClick: u
+            item: o,
+            isActive: o.id === I,
+            collapsed: e,
+            onClick: p
           },
-          p.id
+          o.id
         )) }),
-        o && /* @__PURE__ */ r("div", { className: "bear-px-3 bear-py-3 bear-border-t bear-border-zinc-100 bear-mt-auto", children: b ? null : o })
+        n && /* @__PURE__ */ a("div", { className: r("Bear-Sidebar__footer", T), children: e ? null : n })
       ]
     }
   );
 };
 export {
-  R as Sidebar,
-  O as SidebarGroup
+  k as Sidebar
 };

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

@@ -1,4 +1,6 @@
 import { ReactNode, CSSProperties } from 'react';
+export type SidebarVariant = 'default' | 'bordered' | 'floating';
+export type SidebarPosition = 'left' | 'right';
 export interface SidebarItem {
     id: string;
     label: string;
@@ -19,10 +21,12 @@ export interface SidebarProps {
     footer?: ReactNode;
     activeItemId?: string;
     onItemClick?: (item: SidebarItem) => void;
-    variant?: 'default' | 'bordered' | 'floating';
-    position?: 'left' | 'right';
+    variant?: SidebarVariant;
+    position?: SidebarPosition;
     className?: string;
     style?: CSSProperties;
+    testId?: string;
+    id?: string;
 }
 export interface SidebarGroupProps {
     title?: string;
@@ -31,7 +35,7 @@ export interface SidebarGroupProps {
     defaultCollapsed?: boolean;
     className?: string;
 }
-export interface SidebarItemProps {
+export interface SidebarItemComponentProps {
     item: SidebarItem;
     isActive?: boolean;
     collapsed?: boolean;

package/dist/components/Sidebar/components/SidebarGroup/SidebarGroup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),t=require("../../../../utils/cn.cjs"),d=require("../../../Icon/index.cjs"),o=require("../../Sidebar.const.cjs"),S=n=>{const{title:a,children:c,collapsible:r=!1,defaultCollapsed:i=!1,className:l}=n,[s,u]=b.useState(i);return e.jsxs("div",{className:t.cn("Bear-Sidebar__group bear-mb-4",l),children:[a&&e.jsxs("button",{type:"button",onClick:()=>r&&u(!s),className:t.cn("Bear-Sidebar__group-title",o.SIDEBAR_GROUP_TITLE_CLASSES,r&&"bear-cursor-pointer hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300"),children:[r&&e.jsx(d.ChevronDownIcon,{size:o.SIDEBAR_ICON_SIZE-2,className:t.cn("bear-transition-transform",s&&"-bear-rotate-90")}),a]}),!s&&e.jsx("div",{className:"Bear-Sidebar__group-content bear-space-y-1",children:c})]})};exports.SidebarGroup=S;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SidebarGroupProps } from '../../Sidebar.types';
+export declare const SidebarGroup: FC<SidebarGroupProps>;
+export default SidebarGroup;

package/dist/components/Sidebar/components/SidebarGroup/SidebarGroup.js

@@ -0,0 +1,45 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { cn as a } from "../../../../utils/cn.js";
+import { ChevronDownIcon as b } from "../../../Icon/index.js";
+import { SIDEBAR_ICON_SIZE as d, SIDEBAR_GROUP_TITLE_CLASSES as S } from "../../Sidebar.const.js";
+const h = (i) => {
+  const {
+    title: o,
+    children: l,
+    collapsible: e = !1,
+    defaultCollapsed: n = !1,
+    className: c
+  } = i, [r, m] = p(n);
+  return /* @__PURE__ */ t("div", { className: a("Bear-Sidebar__group bear-mb-4", c), children: [
+    o && /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        onClick: () => e && m(!r),
+        className: a(
+          "Bear-Sidebar__group-title",
+          S,
+          e && "bear-cursor-pointer hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300"
+        ),
+        children: [
+          e && /* @__PURE__ */ s(
+            b,
+            {
+              size: d - 2,
+              className: a(
+                "bear-transition-transform",
+                r && "-bear-rotate-90"
+              )
+            }
+          ),
+          o
+        ]
+      }
+    ),
+    !r && /* @__PURE__ */ s("div", { className: "Bear-Sidebar__group-content bear-space-y-1", children: l })
+  ] });
+};
+export {
+  h as SidebarGroup
+};

package/dist/components/Sidebar/components/SidebarGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarGroup } from './SidebarGroup';
+export { default } from './SidebarGroup';

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

@@ -0,0 +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;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SidebarItemComponentProps } from '../../Sidebar.types';
+export declare const SidebarItem: FC<SidebarItemComponentProps>;
+export default SidebarItem;

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

@@ -0,0 +1,66 @@
+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) => {
+  const {
+    item: e,
+    isActive: _,
+    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: [
+    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: [
+      /* @__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,
+        {
+          size: D,
+          className: m(
+            "Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",
+            c && "bear-rotate-180"
+          )
+        }
+      )
+    ] })
+  ] }), B = m(
+    "Bear-Sidebar__item",
+    T,
+    _ ? `Bear-Sidebar__item--active ${u}` : v,
+    e.disabled && `Bear-Sidebar__item--disabled ${N}`,
+    r && "Bear-Sidebar__item--collapsed bear-justify-center"
+  ), p = e.href ? "a" : "button";
+  return /* @__PURE__ */ s("div", { className: "Bear-Sidebar__item-wrapper", children: [
+    /* @__PURE__ */ a(
+      p,
+      {
+        href: e.href,
+        onClick: E,
+        disabled: e.disabled,
+        className: B,
+        style: { paddingLeft: h },
+        title: r ? e.label : void 0,
+        children: I
+      }
+    ),
+    t && c && !r && /* @__PURE__ */ a("div", { className: "Bear-Sidebar__children bear-mt-1", children: e.children.map((n) => /* @__PURE__ */ a(
+      g,
+      {
+        item: n,
+        isActive: !1,
+        collapsed: r,
+        depth: l + 1,
+        onClick: i
+      },
+      n.id
+    )) })
+  ] });
+};
+export {
+  g as SidebarItem
+};

package/dist/components/Sidebar/components/SidebarItem/index.d.ts

@@ -0,0 +1,2 @@
+export { SidebarItem } from './SidebarItem';
+export { default } from './SidebarItem';

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

@@ -0,0 +1,2 @@
+export { SidebarItem } from './SidebarItem';
+export { SidebarGroup } from './SidebarGroup';

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

@@ -1,2 +1,5 @@
-export { Sidebar, SidebarGroup } from './Sidebar';
-export type { SidebarProps, SidebarItem, SidebarGroupProps, SidebarItemProps } from './Sidebar.types';
+export { Sidebar, default } from './Sidebar';
+export { SidebarGroup } from './components/SidebarGroup';
+export { SidebarItem } from './components/SidebarItem';
+export * from './Sidebar.types';
+export * from './Sidebar.const';

package/dist/components/SignPad/SignPad.cjs

@@ -0,0 +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;

package/dist/components/SignPad/SignPad.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=400,e=200,A=2,S="Sign here",r="image/png",D=.92,a="#1f2937",b="#f3f4f6",t="#ffffff",P="#18181b",I="bear-inline-flex bear-flex-col bear-gap-2",E="bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600",o="hover:bear-border-pink-400 dark:hover:bear-border-pink-500",T="bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none",G="bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600",N="bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold",L="bear-flex bear-gap-2 bear-justify-end";exports.SIGN_PAD_ACTIONS_CLASSES=L;exports.SIGN_PAD_BG_DARK=P;exports.SIGN_PAD_BG_LIGHT=t;exports.SIGN_PAD_CANVAS_WRAPPER_CLASSES=E;exports.SIGN_PAD_CANVAS_WRAPPER_HOVER=o;exports.SIGN_PAD_DEFAULT_HEIGHT=e;exports.SIGN_PAD_DEFAULT_OUTPUT_FORMAT=r;exports.SIGN_PAD_DEFAULT_OUTPUT_QUALITY=D;exports.SIGN_PAD_DEFAULT_PLACEHOLDER=S;exports.SIGN_PAD_DEFAULT_STROKE_WIDTH=A;exports.SIGN_PAD_DEFAULT_WIDTH=_;exports.SIGN_PAD_LINE_CLASSES=G;exports.SIGN_PAD_PLACEHOLDER_CLASSES=T;exports.SIGN_PAD_ROOT_CLASSES=I;exports.SIGN_PAD_STROKE_DARK=b;exports.SIGN_PAD_STROKE_LIGHT=a;exports.SIGN_PAD_X_MARK_CLASSES=N;

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

@@ -0,0 +1,19 @@
+export declare const SIGN_PAD_DEFAULT_WIDTH = 400;
+export declare const SIGN_PAD_DEFAULT_HEIGHT = 200;
+export declare const SIGN_PAD_DEFAULT_STROKE_COLOR = "currentColor";
+export declare const SIGN_PAD_DEFAULT_STROKE_WIDTH = 2;
+export declare const SIGN_PAD_DEFAULT_BACKGROUND = "transparent";
+export declare const SIGN_PAD_DEFAULT_PLACEHOLDER = "Sign here";
+export declare const SIGN_PAD_DEFAULT_OUTPUT_FORMAT = "image/png";
+export declare const SIGN_PAD_DEFAULT_OUTPUT_QUALITY = 0.92;
+export declare const SIGN_PAD_STROKE_LIGHT = "#1f2937";
+export declare const SIGN_PAD_STROKE_DARK = "#f3f4f6";
+export declare const SIGN_PAD_BG_LIGHT = "#ffffff";
+export declare const SIGN_PAD_BG_DARK = "#18181b";
+export declare const SIGN_PAD_ROOT_CLASSES = "bear-inline-flex bear-flex-col bear-gap-2";
+export declare const SIGN_PAD_CANVAS_WRAPPER_CLASSES = "bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600";
+export declare const SIGN_PAD_CANVAS_WRAPPER_HOVER = "hover:bear-border-pink-400 dark:hover:bear-border-pink-500";
+export declare const SIGN_PAD_PLACEHOLDER_CLASSES = "bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none";
+export declare const SIGN_PAD_LINE_CLASSES = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600";
+export declare const SIGN_PAD_X_MARK_CLASSES = "bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold";
+export declare const SIGN_PAD_ACTIONS_CLASSES = "bear-flex bear-gap-2 bear-justify-end";

package/dist/components/SignPad/SignPad.const.js

@@ -0,0 +1,20 @@
+const e = 400, r = 200, _ = 2, a = "Sign here", b = "image/png", t = 0.92, A = "#1f2937", o = "#f3f4f6", S = "#ffffff", n = "#18181b", D = "bear-inline-flex bear-flex-col bear-gap-2", s = "bear-relative bear-rounded-lg bear-border-2 bear-border-dashed bear-border-gray-300 dark:bear-border-zinc-600", I = "hover:bear-border-pink-400 dark:hover:bear-border-pink-500", P = "bear-absolute bear-inset-0 bear-flex bear-items-center bear-justify-center bear-text-gray-400 dark:bear-text-zinc-500 bear-text-sm bear-pointer-events-none", c = "bear-absolute bear-bottom-8 bear-left-4 bear-right-4 bear-border-b bear-border-gray-300 dark:bear-border-zinc-600", E = "bear-absolute bear-bottom-6 bear-left-4 bear-text-gray-400 dark:bear-text-zinc-500 bear-text-lg bear-font-bold", G = "bear-flex bear-gap-2 bear-justify-end";
+export {
+  G as SIGN_PAD_ACTIONS_CLASSES,
+  n as SIGN_PAD_BG_DARK,
+  S as SIGN_PAD_BG_LIGHT,
+  s as SIGN_PAD_CANVAS_WRAPPER_CLASSES,
+  I as SIGN_PAD_CANVAS_WRAPPER_HOVER,
+  r as SIGN_PAD_DEFAULT_HEIGHT,
+  b as SIGN_PAD_DEFAULT_OUTPUT_FORMAT,
+  t as SIGN_PAD_DEFAULT_OUTPUT_QUALITY,
+  a as SIGN_PAD_DEFAULT_PLACEHOLDER,
+  _ as SIGN_PAD_DEFAULT_STROKE_WIDTH,
+  e as SIGN_PAD_DEFAULT_WIDTH,
+  c as SIGN_PAD_LINE_CLASSES,
+  P as SIGN_PAD_PLACEHOLDER_CLASSES,
+  D as SIGN_PAD_ROOT_CLASSES,
+  o as SIGN_PAD_STROKE_DARK,
+  A as SIGN_PAD_STROKE_LIGHT,
+  E as SIGN_PAD_X_MARK_CLASSES
+};

package/dist/components/SignPad/SignPad.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { SignPadProps } from './SignPad.types';
+/**
+ * SignPad - Digital signature capture component
+ *
+ * @example
+ * ```tsx
+ * const [signature, setSignature] = useState<string | null>(null);
+ *
+ * <SignPad
+ *   onChange={setSignature}
+ *   placeholder="Sign here"
+ * />
+ * ```
+ */
+export declare const SignPad: FC<SignPadProps>;
+export default SignPad;

package/dist/components/SignPad/SignPad.js

@@ -0,0 +1,161 @@
+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 { 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) => {
+  const {
+    onChange: r,
+    width: S = q,
+    height: A = Z,
+    strokeColor: B,
+    strokeWidth: p = $,
+    backgroundColor: M,
+    placeholder: F = tt,
+    disabled: o = !1,
+    readOnly: a = !1,
+    showClear: v = !0,
+    showSave: C = !1,
+    clearText: H = "Clear",
+    saveText: K = "Save",
+    outputFormat: h = et,
+    outputQuality: P = nt,
+    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);
+  y(() => {
+    const t = () => {
+      const n = document.documentElement.classList.contains("dark");
+      j(n);
+    };
+    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);
+  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 e = s.current;
+    if (!e) return { x: 0, y: 0 };
+    const n = e.getBoundingClientRect(), i = e.width / n.width, w = e.height / n.height;
+    if ("touches" in t) {
+      const x = t.touches[0];
+      return {
+        x: (x.clientX - n.left) * i,
+        y: (x.clientY - n.top) * w
+      };
+    }
+    return {
+      x: (t.clientX - n.left) * i,
+      y: (t.clientY - n.top) * w
+    };
+  }, []), 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) {
+      const t = s.current;
+      if (t && r) {
+        const e = t.toDataURL(h, P);
+        r(e);
+      }
+    }
+    L(!1), E(null);
+  }, [D, c, r, 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(() => {
+    const t = s.current;
+    if (!t || !c) return;
+    const e = t.toDataURL(h, P);
+    r == null || r(e);
+  }, [c, r, h, P]);
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      id: Y,
+      "data-testid": X,
+      className: _(
+        "Bear-SignPad",
+        St,
+        o && "Bear-SignPad--disabled bear-opacity-50",
+        a && "Bear-SignPad--readonly",
+        W
+      ),
+      ...V,
+      children: [
+        /* @__PURE__ */ I(
+          "div",
+          {
+            className: _(
+              "Bear-SignPad__canvas-wrapper",
+              _t,
+              !o && !a && dt,
+              o && "bear-cursor-not-allowed",
+              !o && !a && "bear-cursor-crosshair"
+            ),
+            children: [
+              /* @__PURE__ */ l(
+                "canvas",
+                {
+                  ref: s,
+                  className: "Bear-SignPad__canvas bear-block bear-rounded-lg",
+                  style: { width: S, height: A },
+                  onMouseDown: b,
+                  onMouseMove: k,
+                  onMouseUp: T,
+                  onMouseLeave: T,
+                  onTouchStart: b,
+                  onTouchMove: k,
+                  onTouchEnd: T
+                }
+              ),
+              !c && /* @__PURE__ */ l("div", { className: _("Bear-SignPad__placeholder", ct), children: F }),
+              /* @__PURE__ */ l("div", { className: _("Bear-SignPad__line", it) }),
+              /* @__PURE__ */ l("span", { className: _("Bear-SignPad__x-mark", lt), children: "×" })
+            ]
+          }
+        ),
+        (v || C) && /* @__PURE__ */ I("div", { className: _("Bear-SignPad__actions", ut), children: [
+          v && /* @__PURE__ */ l(
+            O,
+            {
+              size: "sm",
+              variant: "ghost",
+              onClick: z,
+              disabled: o || !c,
+              children: H
+            }
+          ),
+          C && /* @__PURE__ */ l(
+            O,
+            {
+              size: "sm",
+              variant: "primary",
+              onClick: Q,
+              disabled: o || !c,
+              children: K
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  gt as SignPad
+};