@forgedevstack/bear 1.1.4 → 1.1.9

package/dist/components/Progress/Progress.js

@@ -6,20 +6,20 @@ const f = {
   md: "bear-h-2.5",
   lg: "bear-h-4"
 }, h = {
-  default: "bear-bg-pink-500",
+  default: "bear-bg-bear-500",
   success: "bear-bg-green-500",
-  warning: "bear-bg-yellow-500",
+  warning: "bear-bg-amber-500",
   danger: "bear-bg-red-500",
   info: "bear-bg-blue-500"
 }, y = ({
   value: n,
   max: l = 100,
   size: d = "md",
-  color: g = "default",
+  color: m = "default",
   showLabel: i = !1,
   labelPosition: o = "outside",
   striped: r = !1,
-  animated: m = !1,
+  animated: g = !1,
   indeterminate: e = !1,
   className: c,
   testId: u
@@ -46,9 +46,9 @@ const f = {
             className: b(
               "bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out",
               "bear-flex bear-items-center bear-justify-center",
-              h[g],
+              h[m],
               r && "bear-bg-stripes",
-              m && "bear-animate-stripes",
+              g && "bear-animate-stripes",
               e && "bear-animate-indeterminate"
             ),
             style: {

package/dist/components/PropsPlayground/PropsPlayground.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),n=require("../../utils/cn.cjs"),j=require("../Icon/Icon.cjs"),l=require("./PropsPlayground.const.cjs"),_=require("./PropsPlayground.utils.cjs"),$=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})}),q=({size:b})=>e.jsx(j.Icon,{size:b,children:e.jsx("polyline",{points:"9 18 15 12 9 6"})}),I=({size:b})=>e.jsxs(j.Icon,{size:b,children:[e.jsx("line",{x1:"4",y1:"21",x2:"4",y2:"14"}),e.jsx("line",{x1:"4",y1:"10",x2:"4",y2:"3"}),e.jsx("line",{x1:"12",y1:"21",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12",y2:"3"}),e.jsx("line",{x1:"20",y1:"21",x2:"20",y2:"16"}),e.jsx("line",{x1:"20",y1:"12",x2:"20",y2:"3"}),e.jsx("line",{x1:"1",y1:"14",x2:"7",y2:"14"}),e.jsx("line",{x1:"9",y1:"8",x2:"15",y2:"8"}),e.jsx("line",{x1:"17",y1:"16",x2:"23",y2:"16"})]}),O=({config:b,render:z,title:y="Props",size:S="md",defaultCollapsed:C=!1,showReset:w=!0,columns:P=3,className:L,testId:k})=>{const u=c.useMemo(()=>_.getDefaults(b),[b]),[g,f]=c.useState(u),[p,E]=c.useState(C),o=c.useCallback((r,s)=>{f(i=>({...i,[r]:s}))},[]),A=c.useCallback(()=>{f(u)},[u]),t=l.SIZE_CLASSES[S],N=Object.keys(b).length,m=n.cn("bear-w-full bear-rounded-md bear-border bear-border-zinc-700","bear-bg-zinc-800 bear-text-zinc-100","placeholder:bear-text-zinc-500","focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/30 focus:bear-border-pink-500","bear-transition-colors",t.input);return e.jsxs("div",{"data-testid":k,className:n.cn(l.ROOT_CLASS,"bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",L),children:[e.jsxs("button",{type:"button",onClick:()=>E(r=>!r),className:n.cn("bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors","bear-bg-zinc-800/60 hover:bear-bg-zinc-800","bear-text-zinc-200 bear-border-b bear-border-zinc-700","bear-px-4 bear-py-3",t.text),children:[e.jsx("span",{className:"bear-text-pink-500",children:p?e.jsx(q,{size:12}):e.jsx($,{size:12})}),e.jsx("span",{className:"bear-text-pink-500",children:e.jsx(I,{size:14})}),e.jsx("span",{className:"bear-font-semibold",children:y}),e.jsxs("span",{className:"bear-ml-auto bear-flex bear-items-center bear-gap-2",children:[e.jsxs("span",{className:"bear-text-[10px] bear-font-medium bear-text-zinc-500",children:[N," ",N===1?"control":"controls"]}),w&&!p&&e.jsx("button",{type:"button",onClick:r=>{r.stopPropagation(),A()},className:"bear-text-[10px] bear-font-semibold bear-text-pink-500 hover:bear-text-pink-400 hover:bear-underline",children:"Reset"})]})]}),!p&&e.jsx("div",{className:n.cn("bear-bg-zinc-900/50",t.padding),children:e.jsx("div",{className:n.cn("bear-grid",t.gap,l.COLUMN_CLASSES[P]),children:Object.entries(b).map(([r,s])=>{const i=g[r],d=r.replace(/([A-Z])/g," $1").replace(/^./,a=>a.toUpperCase()).trim();if(s.type==="boolean"){const a=i===!0;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsx("span",{className:n.cn("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500 bear-mb-2",t.label),children:l.TYPE_LABELS.boolean}),e.jsxs("label",{className:"bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":a,onClick:()=>o(r,!a),className:n.cn("bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",a?"bear-bg-pink-500":"bear-bg-zinc-600"),children:e.jsx("span",{className:n.cn("bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",a?"bear-translate-x-4":"bear-translate-x-0")})}),e.jsx("span",{className:n.cn("bear-font-medium bear-text-zinc-200 bear-truncate",t.text),children:d})]})]},r)}if(s.type==="select"&&s.options)return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.select})]}),e.jsx("select",{id:`pp-${r}`,value:String(i),onChange:a=>{const x=s.options.find(h=>String(h.value)===a.target.value);o(r,x?x.value:a.target.value)},className:n.cn(m,"bear-cursor-pointer bear-appearance-none"),children:s.options.map(a=>e.jsx("option",{value:String(a.value),children:a.label},String(a.value)))})]},r);if(s.type==="number"){const a=Number(i),x=Number.isNaN(a)?s.default:a;return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.number})]}),e.jsx("input",{id:`pp-${r}`,type:"number",value:x,min:s.min,max:s.max,step:s.step,onChange:h=>{const v=h.target.valueAsNumber;o(r,Number.isNaN(v)?s.default:v)},className:m})]},r)}return e.jsxs("div",{className:"bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",children:[e.jsxs("div",{className:"bear-flex bear-items-center bear-justify-between bear-mb-1.5",children:[e.jsx("label",{htmlFor:`pp-${r}`,className:n.cn("bear-font-medium bear-text-zinc-300 bear-truncate",t.label),children:d}),e.jsx("span",{className:n.cn("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500",t.label),children:l.TYPE_LABELS.string})]}),e.jsx("input",{id:`pp-${r}`,type:"text",value:String(i??""),onChange:a=>o(r,a.target.value),placeholder:s.placeholder,className:m})]},r)})})}),e.jsx("div",{className:"bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]",children:e.jsx("div",{className:"bear-w-full",children:z(g)})})]})};exports.PropsPlayground=O;

package/dist/components/PropsPlayground/PropsPlayground.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Bear-PropsPlayground",a={xs:{padding:"bear-p-2",text:"bear-text-[10px]",gap:"bear-gap-2",label:"bear-text-[9px]",input:"bear-px-1.5 bear-py-0.5 bear-text-[10px]"},sm:{padding:"bear-p-3",text:"bear-text-xs",gap:"bear-gap-2",label:"bear-text-[10px]",input:"bear-px-2 bear-py-1 bear-text-xs"},md:{padding:"bear-p-4",text:"bear-text-sm",gap:"bear-gap-3",label:"bear-text-[11px]",input:"bear-px-2.5 bear-py-1.5 bear-text-xs"},lg:{padding:"bear-p-5",text:"bear-text-sm",gap:"bear-gap-3",label:"bear-text-xs",input:"bear-px-3 bear-py-2 bear-text-sm"},xl:{padding:"bear-p-6",text:"bear-text-base",gap:"bear-gap-4",label:"bear-text-sm",input:"bear-px-3.5 bear-py-2.5 bear-text-base"}},t={1:"bear-grid-cols-1",2:"bear-grid-cols-2",3:"bear-grid-cols-3",4:"bear-grid-cols-4"},r={boolean:"bool",select:"select",number:"num",string:"str"};exports.COLUMN_CLASSES=t;exports.ROOT_CLASS=e;exports.SIZE_CLASSES=a;exports.TYPE_LABELS=r;

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

@@ -0,0 +1,11 @@
+import { BearSize } from '../../types';
+export declare const ROOT_CLASS = "Bear-PropsPlayground";
+export declare const SIZE_CLASSES: Record<BearSize, {
+    padding: string;
+    text: string;
+    gap: string;
+    label: string;
+    input: string;
+}>;
+export declare const COLUMN_CLASSES: Record<number, string>;
+export declare const TYPE_LABELS: Record<string, string>;

package/dist/components/PropsPlayground/PropsPlayground.const.js

@@ -0,0 +1,23 @@
+const e = "Bear-PropsPlayground", a = {
+  xs: { padding: "bear-p-2", text: "bear-text-[10px]", gap: "bear-gap-2", label: "bear-text-[9px]", input: "bear-px-1.5 bear-py-0.5 bear-text-[10px]" },
+  sm: { padding: "bear-p-3", text: "bear-text-xs", gap: "bear-gap-2", label: "bear-text-[10px]", input: "bear-px-2 bear-py-1 bear-text-xs" },
+  md: { padding: "bear-p-4", text: "bear-text-sm", gap: "bear-gap-3", label: "bear-text-[11px]", input: "bear-px-2.5 bear-py-1.5 bear-text-xs" },
+  lg: { padding: "bear-p-5", text: "bear-text-sm", gap: "bear-gap-3", label: "bear-text-xs", input: "bear-px-3 bear-py-2 bear-text-sm" },
+  xl: { padding: "bear-p-6", text: "bear-text-base", gap: "bear-gap-4", label: "bear-text-sm", input: "bear-px-3.5 bear-py-2.5 bear-text-base" }
+}, t = {
+  1: "bear-grid-cols-1",
+  2: "bear-grid-cols-2",
+  3: "bear-grid-cols-3",
+  4: "bear-grid-cols-4"
+}, r = {
+  boolean: "bool",
+  select: "select",
+  number: "num",
+  string: "str"
+};
+export {
+  t as COLUMN_CLASSES,
+  e as ROOT_CLASS,
+  a as SIZE_CLASSES,
+  r as TYPE_LABELS
+};

package/dist/components/PropsPlayground/PropsPlayground.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PropsPlaygroundProps } from './PropsPlayground.types';
+export declare const PropsPlayground: FC<PropsPlaygroundProps>;

package/dist/components/PropsPlayground/PropsPlayground.js

@@ -0,0 +1,221 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { useMemo as R, useState as y, useCallback as C } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { SIZE_CLASSES as _, TYPE_LABELS as m, COLUMN_CLASSES as F, ROOT_CLASS as I } from "./PropsPlayground.const.js";
+import { getDefaults as V } from "./PropsPlayground.utils.js";
+const D = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) }), M = ({ size: i }) => /* @__PURE__ */ e(f, { size: i, children: /* @__PURE__ */ e("polyline", { points: "9 18 15 12 9 6" }) }), T = ({ size: i }) => /* @__PURE__ */ b(f, { size: i, children: [
+  /* @__PURE__ */ e("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+  /* @__PURE__ */ e("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+  /* @__PURE__ */ e("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+  /* @__PURE__ */ e("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+  /* @__PURE__ */ e("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+  /* @__PURE__ */ e("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+  /* @__PURE__ */ e("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+] }), H = ({
+  config: i,
+  render: w,
+  title: S = "Props",
+  size: k = "md",
+  defaultCollapsed: j = !1,
+  showReset: $ = !0,
+  columns: A = 3,
+  className: L,
+  testId: E
+}) => {
+  const p = R(() => V(i), [i]), [g, N] = y(p), [u, O] = y(j), o = C(
+    (r, t) => {
+      N((s) => ({ ...s, [r]: t }));
+    },
+    []
+  ), P = C(() => {
+    N(p);
+  }, [p]), l = _[k], v = Object.keys(i).length, h = n(
+    "bear-w-full bear-rounded-md bear-border bear-border-zinc-700",
+    "bear-bg-zinc-800 bear-text-zinc-100",
+    "placeholder:bear-text-zinc-500",
+    "focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/30 focus:bear-border-pink-500",
+    "bear-transition-colors",
+    l.input
+  );
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      "data-testid": E,
+      className: n(
+        I,
+        "bear-rounded-lg bear-border bear-border-zinc-700 bear-overflow-hidden",
+        L
+      ),
+      children: [
+        /* @__PURE__ */ b(
+          "button",
+          {
+            type: "button",
+            onClick: () => O((r) => !r),
+            className: n(
+              "bear-w-full bear-flex bear-items-center bear-gap-2 bear-text-left bear-font-medium bear-transition-colors",
+              "bear-bg-zinc-800/60 hover:bear-bg-zinc-800",
+              "bear-text-zinc-200 bear-border-b bear-border-zinc-700",
+              "bear-px-4 bear-py-3",
+              l.text
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { className: "bear-text-pink-500", children: u ? /* @__PURE__ */ e(M, { size: 12 }) : /* @__PURE__ */ e(D, { size: 12 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-text-pink-500", children: /* @__PURE__ */ e(T, { size: 14 }) }),
+              /* @__PURE__ */ e("span", { className: "bear-font-semibold", children: S }),
+              /* @__PURE__ */ b("span", { className: "bear-ml-auto bear-flex bear-items-center bear-gap-2", children: [
+                /* @__PURE__ */ b("span", { className: "bear-text-[10px] bear-font-medium bear-text-zinc-500", children: [
+                  v,
+                  " ",
+                  v === 1 ? "control" : "controls"
+                ] }),
+                $ && !u && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (r) => {
+                      r.stopPropagation(), P();
+                    },
+                    className: "bear-text-[10px] bear-font-semibold bear-text-pink-500 hover:bear-text-pink-400 hover:bear-underline",
+                    children: "Reset"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !u && /* @__PURE__ */ e("div", { className: n("bear-bg-zinc-900/50", l.padding), children: /* @__PURE__ */ e("div", { className: n("bear-grid", l.gap, F[A]), children: Object.entries(i).map(([r, t]) => {
+          const s = g[r], c = r.replace(/([A-Z])/g, " $1").replace(/^./, (a) => a.toUpperCase()).trim();
+          if (t.type === "boolean") {
+            const a = s === !0;
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ e("span", { className: n("bear-block bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500 bear-mb-2", l.label), children: m.boolean }),
+                  /* @__PURE__ */ b("label", { className: "bear-flex bear-items-center bear-gap-2.5 bear-cursor-pointer", children: [
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        role: "switch",
+                        "aria-checked": a,
+                        onClick: () => o(r, !a),
+                        className: n(
+                          "bear-relative bear-inline-flex bear-h-5 bear-w-9 bear-flex-shrink-0 bear-rounded-full bear-border-2 bear-border-transparent bear-transition-colors",
+                          a ? "bear-bg-pink-500" : "bear-bg-zinc-600"
+                        ),
+                        children: /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: n(
+                              "bear-pointer-events-none bear-inline-block bear-h-4 bear-w-4 bear-transform bear-rounded-full bear-bg-white bear-shadow bear-transition",
+                              a ? "bear-translate-x-4" : "bear-translate-x-0"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-medium bear-text-zinc-200 bear-truncate", l.text), children: c })
+                  ] })
+                ]
+              },
+              r
+            );
+          }
+          if (t.type === "select" && t.options)
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                    /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.select })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "select",
+                    {
+                      id: `pp-${r}`,
+                      value: String(s),
+                      onChange: (a) => {
+                        const d = t.options.find((x) => String(x.value) === a.target.value);
+                        o(r, d ? d.value : a.target.value);
+                      },
+                      className: n(h, "bear-cursor-pointer bear-appearance-none"),
+                      children: t.options.map((a) => /* @__PURE__ */ e("option", { value: String(a.value), children: a.label }, String(a.value)))
+                    }
+                  )
+                ]
+              },
+              r
+            );
+          if (t.type === "number") {
+            const a = Number(s), d = Number.isNaN(a) ? t.default : a;
+            return /* @__PURE__ */ b(
+              "div",
+              {
+                className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+                children: [
+                  /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                    /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                    /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.number })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "input",
+                    {
+                      id: `pp-${r}`,
+                      type: "number",
+                      value: d,
+                      min: t.min,
+                      max: t.max,
+                      step: t.step,
+                      onChange: (x) => {
+                        const z = x.target.valueAsNumber;
+                        o(r, Number.isNaN(z) ? t.default : z);
+                      },
+                      className: h
+                    }
+                  )
+                ]
+              },
+              r
+            );
+          }
+          return /* @__PURE__ */ b(
+            "div",
+            {
+              className: "bear-rounded-lg bear-border bear-border-zinc-700/60 bear-bg-zinc-800/30 bear-p-3",
+              children: [
+                /* @__PURE__ */ b("div", { className: "bear-flex bear-items-center bear-justify-between bear-mb-1.5", children: [
+                  /* @__PURE__ */ e("label", { htmlFor: `pp-${r}`, className: n("bear-font-medium bear-text-zinc-300 bear-truncate", l.label), children: c }),
+                  /* @__PURE__ */ e("span", { className: n("bear-font-semibold bear-uppercase bear-tracking-wider bear-text-pink-500", l.label), children: m.string })
+                ] }),
+                /* @__PURE__ */ e(
+                  "input",
+                  {
+                    id: `pp-${r}`,
+                    type: "text",
+                    value: String(s ?? ""),
+                    onChange: (a) => o(r, a.target.value),
+                    placeholder: t.placeholder,
+                    className: h
+                  }
+                )
+              ]
+            },
+            r
+          );
+        }) }) }),
+        /* @__PURE__ */ e("div", { className: "bear-border-t bear-border-zinc-700 bear-p-6 bear-bg-zinc-900 bear-flex bear-items-center bear-justify-center bear-min-h-[180px]", children: /* @__PURE__ */ e("div", { className: "bear-w-full", children: w(g) }) })
+      ]
+    }
+  );
+};
+export {
+  H as PropsPlayground
+};

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { BearSize } from '../../types';
+export type PropControlType = 'boolean' | 'string' | 'number' | 'select';
+export interface PropControlOption {
+    label: string;
+    value: string | number | boolean;
+}
+export interface PropControlConfig {
+    type: PropControlType;
+    default: string | number | boolean;
+    options?: PropControlOption[];
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string;
+}
+export type PropsConfig = Record<string, PropControlConfig>;
+export type PropValues = Record<string, string | number | boolean>;
+export interface PropsPlaygroundProps {
+    config: PropsConfig;
+    render: (values: PropValues) => ReactNode;
+    title?: string;
+    size?: BearSize;
+    defaultCollapsed?: boolean;
+    showReset?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+    testId?: string;
+}

package/dist/components/PropsPlayground/PropsPlayground.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function n(t){const e={};for(const[o,u]of Object.entries(t))e[o]=u.default;return e}exports.getDefaults=n;

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

@@ -0,0 +1,2 @@
+import { PropsConfig, PropValues } from './PropsPlayground.types';
+export declare function getDefaults(config: PropsConfig): PropValues;

package/dist/components/PropsPlayground/PropsPlayground.utils.js

@@ -0,0 +1,9 @@
+function c(e) {
+  const t = {};
+  for (const [o, n] of Object.entries(e))
+    t[o] = n.default;
+  return t;
+}
+export {
+  c as getDefaults
+};

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

@@ -0,0 +1,2 @@
+export { PropsPlayground } from './PropsPlayground';
+export type { PropsPlaygroundProps, PropsConfig, PropValues, PropControlConfig, PropControlOption, PropControlType } from './PropsPlayground.types';

package/dist/components/Select/Select.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),a=require("../../utils/cn.cjs"),f=require("../Icon/index.cjs"),j={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=({options:u,value:t,onChange:s,placeholder:g="Select an option",label:x,error:l,disabled:n=!1,size:m="md",fullWidth:y=!1,className:h})=>{const[c,d]=i.useState(!1),o=i.useRef(null),k=!!l,b=u.find(e=>e.value===t);i.useEffect(()=>{const e=v=>{o.current&&!o.current.contains(v.target)&&d(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const w=e=>{s==null||s(e),d(!1)};return r.jsxs("div",{ref:o,className:a.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",y&&"bear-w-full"),children:[x&&r.jsx("label",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:x}),r.jsxs("button",{type:"button",disabled:n,onClick:()=>!n&&d(!c),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","bear-bg-white bear-text-gray-900 bear-border-gray-300","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white","dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",k?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",n&&"bear-opacity-50 bear-cursor-not-allowed",j[m],h),children:[r.jsx("span",{className:b?"bear-text-gray-900 dark:bear-text-white":"bear-text-gray-500 dark:bear-text-gray-500",children:(b==null?void 0:b.label)||g}),r.jsx(f.ChevronDownIcon,{className:a.cn("bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",c&&"bear-rotate-180")})]}),c&&r.jsx("div",{className:a.cn("bear-absolute bear-z-50 bear-w-full bear-mt-1","bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full","bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"),children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:u.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&w(e.value),className:a.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled?"bear-text-gray-500 bear-cursor-not-allowed":"bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",e.value===t&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"),children:[e.label,e.value===t&&r.jsx(f.CheckIcon,{className:"bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("react"),s=require("../../utils/cn.cjs"),j=require("../../hooks/useClickOutside.cjs");require("../../context/BearProvider.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const m=require("../Icon/index.cjs"),p={sm:"bear-h-8 bear-text-sm bear-px-3",md:"bear-h-10 bear-text-base bear-px-4",lg:"bear-h-12 bear-text-lg bear-px-5"},N=({options:u,value:a,onChange:t,placeholder:v="Select an option",label:i,error:l,disabled:o=!1,size:y="md",fullWidth:g=!1,className:h})=>{const[c,d]=n.useState(!1),f=n.useRef(null),x=!!l,b=u.find(e=>e.value===a),k=n.useCallback(()=>d(!1),[]);j.useClickOutside(f,k);const w=e=>{t==null||t(e),d(!1)};return r.jsxs("div",{ref:f,className:s.cn("bear-relative bear-flex bear-flex-col bear-gap-1.5",g&&"bear-w-full"),children:[i&&r.jsx("label",{className:"bear-text-sm bear-font-medium",style:{color:"var(--bear-text-secondary)"},children:i}),r.jsxs("button",{type:"button",disabled:o,onClick:()=>!o&&d(!c),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200","focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",x?"bear-border-red-500 focus:bear-ring-red-500":"focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",o&&"bear-opacity-50 bear-cursor-not-allowed",p[y],h),style:{backgroundColor:"var(--bear-bg-primary)",borderColor:x?void 0:"var(--bear-border-default)",color:b?"var(--bear-text-primary)":"var(--bear-text-muted)"},children:[r.jsx("span",{children:(b==null?void 0:b.label)||v}),r.jsx(m.ChevronDownIcon,{className:s.cn("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",c&&"bear-rotate-180"),style:{color:"var(--bear-text-muted)"}})]}),c&&r.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",style:{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)"},children:r.jsx("div",{className:"bear-max-h-60 bear-overflow-y-auto",children:u.map(e=>r.jsxs("button",{type:"button",disabled:e.disabled,onClick:()=>!e.disabled&&w(e.value),className:s.cn("bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2","bear-text-left bear-transition-colors",e.disabled&&"bear-cursor-not-allowed",e.value===a&&"bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",!e.disabled&&e.value!==a&&"hover:bear-bg-[var(--bear-bg-tertiary)]"),style:e.disabled?{color:"var(--bear-text-muted)"}:e.value===a?void 0:{color:"var(--bear-text-secondary)"},children:[e.label,e.value===a&&r.jsx(m.CheckIcon,{className:"bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400"})]},e.value))})}),l&&r.jsx("p",{className:"bear-text-sm bear-text-red-500",children:l})]})};exports.Select=N;

package/dist/components/Select/Select.js

@@ -1,66 +1,65 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { useState as v, useRef as p, useEffect as N } from "react";
-import { cn as a } from "../../utils/cn.js";
-import { ChevronDownIcon as j, CheckIcon as E } from "../Icon/index.js";
-const S = {
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as w, useRef as k, useCallback as N } from "react";
+import { cn as t } from "../../utils/cn.js";
+import { useClickOutside as C } from "../../hooks/useClickOutside.js";
+import "../../context/BearProvider.js";
+import "../../hooks/useBearComponent/useBearComponent.js";
+import { ChevronDownIcon as j, CheckIcon as S } from "../Icon/index.js";
+const I = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
-}, O = ({
-  options: f,
-  value: t,
-  onChange: s,
-  placeholder: g = "Select an option",
-  label: u,
-  error: l,
+}, A = ({
+  options: i,
+  value: a,
+  onChange: l,
+  placeholder: x = "Select an option",
+  label: f,
+  error: s,
   disabled: o = !1,
-  size: x = "md",
-  fullWidth: m = !1,
+  size: v = "md",
+  fullWidth: h = !1,
   className: y
 }) => {
-  const [d, n] = v(!1), c = p(null), h = !!l, b = f.find((e) => e.value === t);
-  N(() => {
-    const e = (w) => {
-      c.current && !c.current.contains(w.target) && n(!1);
-    };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const k = (e) => {
-    s == null || s(e), n(!1);
+  const [d, c] = w(!1), u = k(null), m = !!s, b = i.find((e) => e.value === a), g = N(() => c(!1), []);
+  C(u, g);
+  const p = (e) => {
+    l == null || l(e), c(!1);
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
-      ref: c,
-      className: a("bear-relative bear-flex bear-flex-col bear-gap-1.5", m && "bear-w-full"),
+      ref: u,
+      className: t("bear-relative bear-flex bear-flex-col bear-gap-1.5", h && "bear-w-full"),
       children: [
-        u && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: u }),
-        /* @__PURE__ */ i(
+        f && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: f }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             disabled: o,
-            onClick: () => !o && n(!d),
-            className: a(
+            onClick: () => !o && c(!d),
+            className: t(
               "bear-flex bear-items-center bear-justify-between bear-w-full",
               "bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200",
-              "bear-bg-white bear-text-gray-900 bear-border-gray-300",
-              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-white",
-              "dark:bear-bg-gray-800 dark:bear-text-white dark:bear-border-gray-600 dark:focus:bear-ring-offset-gray-900",
-              h ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
+              m ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
               o && "bear-opacity-50 bear-cursor-not-allowed",
-              S[x],
+              I[v],
               y
             ),
+            style: {
+              backgroundColor: "var(--bear-bg-primary)",
+              borderColor: m ? void 0 : "var(--bear-border-default)",
+              color: b ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+            },
             children: [
-              /* @__PURE__ */ r("span", { className: b ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-500 dark:bear-text-gray-500", children: (b == null ? void 0 : b.label) || g }),
+              /* @__PURE__ */ r("span", { children: (b == null ? void 0 : b.label) || x }),
               /* @__PURE__ */ r(
                 j,
                 {
-                  className: a(
-                    "bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-gray-400 bear-transition-transform",
-                    d && "bear-rotate-180"
-                  )
+                  className: t("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform", d && "bear-rotate-180"),
+                  style: { color: "var(--bear-text-muted)" }
                 }
               )
             ]
@@ -69,37 +68,39 @@ const S = {
         d && /* @__PURE__ */ r(
           "div",
           {
-            className: a(
-              "bear-absolute bear-z-50 bear-w-full bear-mt-1",
-              "bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",
-              "bear-bg-white bear-border-gray-200 dark:bear-bg-gray-800 dark:bear-border-gray-600"
-            ),
-            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: f.map((e) => /* @__PURE__ */ i(
+            className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden bear-top-full",
+            style: {
+              backgroundColor: "var(--bear-bg-primary)",
+              borderColor: "var(--bear-border-default)"
+            },
+            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: i.map((e) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && k(e.value),
-                className: a(
+                onClick: () => !e.disabled && p(e.value),
+                className: t(
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
-                  e.disabled ? "bear-text-gray-500 bear-cursor-not-allowed" : "bear-text-gray-700 dark:bear-text-gray-300 hover:bear-bg-gray-100 hover:bear-text-gray-900 dark:hover:bear-bg-gray-700 dark:hover:bear-text-white",
-                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300"
+                  e.disabled && "bear-cursor-not-allowed",
+                  e.value === a && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== a && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === a ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ r(E, { className: "bear-w-4 bear-h-4 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === a && /* @__PURE__ */ r(S, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
         ),
-        l && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: l })
+        s && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: s })
       ]
     }
   );
 };
 export {
-  O as Select
+  A as Select
 };

package/dist/components/SignPad/SignPad.cjs

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