@forgedevstack/bear 1.0.6 → 1.0.8

package/dist/components/RichEditor/components/ToolbarColorPicker/ToolbarColorPicker.js

@@ -1,126 +1,136 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { useState as k, useRef as y, useEffect as _ } from "react";
-import { cn as a } from "../../../../utils/cn.js";
-import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as C, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as E, RICH_EDITOR_BUTTON_BASE_CLASSES as R, RICH_EDITOR_COLORS as v } from "../../RichEditor.const.js";
-import { FormatColorTextIcon as I, HighlightIcon as N } from "../../../Icon/icons/editor.js";
-import { CheckIcon as S } from "../../../Icon/icons/status.js";
-const L = (p) => {
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as C, useRef as _, useEffect as w } from "react";
+import { createPortal as N } from "react-dom";
+import { cn as i } from "../../../../utils/cn.js";
+import { RICH_EDITOR_COLORS as S, RICH_EDITOR_BUTTON_DISABLED_CLASSES as B, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as T, RICH_EDITOR_BUTTON_BASE_CLASSES as O } from "../../RichEditor.const.js";
+import { useMediaQuery as z } from "../../../../hooks/useMediaQuery.js";
+import { FormatColorTextIcon as A, HighlightIcon as L } from "../../../Icon/icons/editor.js";
+import { CheckIcon as M } from "../../../Icon/icons/status.js";
+const Q = (R) => {
   const {
-    value: o,
-    onChange: b,
-    title: f,
-    disabled: n,
-    type: i = "text",
-    recentColors: l = [],
-    onApplyLast: m
-  } = p, [h, s] = k(!1), c = y(null);
-  _(() => {
-    const e = (g) => {
-      c.current && !c.current.contains(g.target) && s(!1);
+    value: a,
+    onChange: v,
+    title: E,
+    disabled: l,
+    type: c = "text",
+    recentColors: d = [],
+    onApplyLast: g
+  } = R, [s, m] = C(!1), [h, b] = C({ top: 0, left: 0 }), u = _(null), p = _(null), o = z("(max-width: 640px)");
+  w(() => {
+    if (s && o && p.current && typeof document < "u") {
+      const t = p.current.getBoundingClientRect(), r = t.top, k = window.innerHeight - t.bottom;
+      k >= 240 || k >= r ? b({ top: t.bottom + 4, left: Math.max(8, Math.min(t.left, window.innerWidth - 220)) }) : b({ top: t.top - 244, left: Math.max(8, Math.min(t.left, window.innerWidth - 220)) });
+    }
+  }, [s, o]), w(() => {
+    const t = (r) => {
+      u.current && !u.current.contains(r.target) && m(!1);
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
   }, []);
-  const d = (e) => {
-    b(e), s(!1);
-  }, x = i === "text" ? I : N, u = l[0] || o;
-  return /* @__PURE__ */ r("div", { ref: c, className: "Bear-RichEditor__color-picker relative flex items-center", children: [
-    /* @__PURE__ */ r(
+  const f = (t) => {
+    v(t), m(!1);
+  }, I = c === "text" ? A : L, x = d[0] || a, y = /* @__PURE__ */ n(
+    "div",
+    {
+      className: i(
+        "Bear-RichEditor__color-menu p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,240px)]",
+        o ? "fixed z-[9999]" : "absolute bottom-full left-0 mb-1"
+      ),
+      style: o ? { top: h.top, left: h.left } : void 0,
+      children: [
+        d.length > 0 && /* @__PURE__ */ n("div", { className: "mb-3", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1.5", children: "Recent" }),
+          /* @__PURE__ */ e("div", { className: "flex gap-1 flex-wrap", children: d.slice(0, 6).map((t, r) => /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => f(t),
+              className: i(
+                "w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",
+                a === t && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+              ),
+              style: { backgroundColor: t },
+              title: t
+            },
+            `recent-${r}`
+          )) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-8 gap-1", children: S.map((t) => /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: () => f(t),
+            className: i(
+              "Bear-RichEditor__color-swatch w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110 touch-manipulation",
+              a === t && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
+            ),
+            style: { backgroundColor: t },
+            title: t
+          },
+          t
+        )) }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: () => f(""),
+            className: "w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors touch-manipulation",
+            children: [
+              "Remove ",
+              c === "text" ? "color" : "highlight"
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ n("div", { ref: u, className: "Bear-RichEditor__color-picker relative flex items-center", children: [
+    /* @__PURE__ */ n(
       "button",
       {
+        ref: p,
         type: "button",
-        title: f,
-        disabled: n,
-        onClick: () => s(!h),
-        className: a(
+        title: E,
+        disabled: l,
+        onClick: () => m(!s),
+        className: i(
           "Bear-RichEditor__color-trigger",
-          R,
-          E,
+          O,
+          T,
           "flex items-center gap-0.5",
-          n && `Bear-RichEditor__color-trigger--disabled ${C}`
+          l && `Bear-RichEditor__color-trigger--disabled ${B}`
         ),
         children: [
-          /* @__PURE__ */ t(x, { size: 16 }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ e(I, { size: 16 }),
+          /* @__PURE__ */ e(
             "span",
             {
               className: "w-3 h-1 rounded-sm mt-0.5",
-              style: { backgroundColor: o || (i === "text" ? "#000000" : "#fef08a") }
+              style: { backgroundColor: a || (c === "text" ? "#000000" : "#fef08a") }
             }
           )
         ]
       }
     ),
-    u && m && /* @__PURE__ */ t(
+    x && g && /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        title: `Apply ${i === "text" ? "text" : "highlight"} color`,
-        disabled: n,
-        onClick: () => m(u),
-        className: a(
+        title: `Apply ${c === "text" ? "text" : "highlight"} color`,
+        disabled: l,
+        onClick: () => g(x),
+        className: i(
           "Bear-RichEditor__color-apply",
           "p-0.5 rounded transition-colors",
           "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700",
-          n && "opacity-50 cursor-not-allowed"
+          l && "opacity-50 cursor-not-allowed"
         ),
-        children: /* @__PURE__ */ t(S, { size: 12 })
+        children: /* @__PURE__ */ e(M, { size: 12 })
       }
     ),
-    h && /* @__PURE__ */ r(
-      "div",
-      {
-        className: "Bear-RichEditor__color-menu absolute bottom-full left-0 mb-1 p-3 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px]",
-        style: { zIndex: 9999 },
-        children: [
-          l.length > 0 && /* @__PURE__ */ r("div", { className: "mb-3", children: [
-            /* @__PURE__ */ t("p", { className: "text-xs text-gray-500 dark:text-gray-400 mb-1.5", children: "Recent" }),
-            /* @__PURE__ */ t("div", { className: "flex gap-1", children: l.slice(0, 6).map((e, g) => /* @__PURE__ */ t(
-              "button",
-              {
-                type: "button",
-                onClick: () => d(e),
-                className: a(
-                  "w-6 h-6 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
-                  o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
-                ),
-                style: { backgroundColor: e },
-                title: e
-              },
-              `recent-${g}`
-            )) })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "grid grid-cols-8 gap-1", children: v.map((e) => /* @__PURE__ */ t(
-            "button",
-            {
-              type: "button",
-              onClick: () => d(e),
-              className: a(
-                "Bear-RichEditor__color-swatch",
-                "w-5 h-5 rounded-full border border-gray-300 dark:border-zinc-600 transition-transform hover:scale-110",
-                o === e && "ring-2 ring-pink-500 ring-offset-1 dark:ring-offset-zinc-800"
-              ),
-              style: { backgroundColor: e },
-              title: e
-            },
-            e
-          )) }),
-          /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              onClick: () => d(""),
-              className: "w-full mt-2 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded transition-colors",
-              children: [
-                "Remove ",
-                i === "text" ? "color" : "highlight"
-              ]
-            }
-          )
-        ]
-      }
-    )
+    s && (o && typeof document < "u" ? N(y, document.body) : y)
   ] });
 };
 export {
-  L as ToolbarColorPicker
+  Q as ToolbarColorPicker
 };

package/dist/components/RichEditor/components/ToolbarMore/ToolbarMore.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),d=require("../../../../utils/cn.cjs"),o=require("../../RichEditor.const.cjs"),u=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("line",{x1:"12",y1:"5",x2:"12",y2:"19"}),e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})]}),_=({children:l,disabled:i})=>{const[r,s]=n.useState(!1),t=n.useRef(null);return n.useEffect(()=>{const c=a=>{t.current&&!t.current.contains(a.target)&&s(!1)};return document.addEventListener("mousedown",c),()=>document.removeEventListener("mousedown",c)},[]),e.jsxs("div",{ref:t,className:"Bear-RichEditor__more relative",children:[e.jsx("button",{type:"button",title:"More options",disabled:i,onClick:()=>s(!r),className:d.cn("Bear-RichEditor__more-trigger",o.RICH_EDITOR_BUTTON_BASE_CLASSES,o.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center justify-center",r&&"bg-pink-500 text-white",i&&`Bear-RichEditor__more-trigger--disabled ${o.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:e.jsx(u,{})}),r&&e.jsx("div",{className:"Bear-RichEditor__more-menu absolute top-full right-0 mt-1 p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl z-50 min-w-[200px]",children:e.jsx("div",{className:"flex flex-wrap items-center gap-0.5",children:l})})]})};exports.ToolbarMore=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),E=require("react-dom"),h=require("../../../../utils/cn.cjs"),l=require("../../RichEditor.const.cjs"),p=()=>e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"12",cy:"12",r:"1.5",fill:"currentColor"}),e.jsx("circle",{cx:"6",cy:"12",r:"1.5",fill:"currentColor"}),e.jsx("circle",{cx:"18",cy:"12",r:"1.5",fill:"currentColor"})]}),R=({children:_,disabled:u,isMobile:r})=>{const[o,d]=t.useState(!1),c=t.useRef(null),i=t.useRef(null),[a,g]=t.useState({top:0,left:0});t.useEffect(()=>{const n=m=>{var x;if(c.current&&!c.current.contains(m.target)){const s=m.target;(x=s.closest)!=null&&x.call(s,".Bear-RichEditor__more-menu")||d(!1)}};return document.addEventListener("mousedown",n),()=>document.removeEventListener("mousedown",n)},[]),t.useEffect(()=>{if(o&&r&&i.current&&typeof document<"u"){const n=i.current.getBoundingClientRect();g({top:n.bottom+4,left:Math.max(8,n.right-220)})}},[o,r]);const f=e.jsx("div",{className:h.cn("Bear-RichEditor__more-menu p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,280px)] max-h-[70vh] overflow-y-auto",r?"fixed z-[9999]":"absolute top-full right-0 mt-1 z-50"),style:r?{top:a.top,left:a.left}:void 0,children:e.jsx("div",{className:"flex flex-wrap items-center gap-0.5",children:_})});return e.jsxs("div",{ref:c,className:"Bear-RichEditor__more relative",children:[e.jsx("button",{ref:i,type:"button",title:"More options",disabled:u,onClick:()=>d(!o),className:h.cn("Bear-RichEditor__more-trigger",l.RICH_EDITOR_BUTTON_BASE_CLASSES,l.RICH_EDITOR_BUTTON_INACTIVE_CLASSES,"flex items-center justify-center",o&&"bg-pink-500 text-white",u&&`Bear-RichEditor__more-trigger--disabled ${l.RICH_EDITOR_BUTTON_DISABLED_CLASSES}`),children:e.jsx(p,{})}),o&&(r&&typeof document<"u"?E.createPortal(f,document.body):f)]})};exports.ToolbarMore=R;

package/dist/components/RichEditor/components/ToolbarMore/ToolbarMore.d.ts

@@ -2,6 +2,8 @@ import { FC, ReactNode } from 'react';
 export interface ToolbarMoreProps {
     children: ReactNode;
     disabled?: boolean;
+    /** When true, render menu via portal for mobile (avoids clipping) */
+    isMobile?: boolean;
 }
 export declare const ToolbarMore: FC<ToolbarMoreProps>;
 export default ToolbarMore;

package/dist/components/RichEditor/components/ToolbarMore/ToolbarMore.js

@@ -1,45 +1,63 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as a, useRef as d, useEffect as m } from "react";
-import { cn as u } from "../../../../utils/cn.js";
-import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as _, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as f, RICH_EDITOR_BUTTON_BASE_CLASSES as h } from "../../RichEditor.const.js";
-const E = () => /* @__PURE__ */ s("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-  /* @__PURE__ */ e("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-  /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-] }), S = ({ children: c, disabled: o }) => {
-  const [r, i] = a(!1), t = d(null);
-  return m(() => {
-    const n = (l) => {
-      t.current && !t.current.contains(l.target) && i(!1);
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { useState as f, useRef as p, useEffect as h } from "react";
+import { createPortal as C } from "react-dom";
+import { cn as _ } from "../../../../utils/cn.js";
+import { RICH_EDITOR_BUTTON_DISABLED_CLASSES as R, RICH_EDITOR_BUTTON_INACTIVE_CLASSES as v, RICH_EDITOR_BUTTON_BASE_CLASSES as w } from "../../RichEditor.const.js";
+const B = () => /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("circle", { cx: "6", cy: "12", r: "1.5", fill: "currentColor" }),
+  /* @__PURE__ */ e("circle", { cx: "18", cy: "12", r: "1.5", fill: "currentColor" })
+] }), b = ({ children: x, disabled: l, isMobile: t }) => {
+  const [r, s] = f(!1), n = p(null), i = p(null), [d, E] = f({ top: 0, left: 0 });
+  h(() => {
+    const o = (u) => {
+      var a;
+      if (n.current && !n.current.contains(u.target)) {
+        const c = u.target;
+        (a = c.closest) != null && a.call(c, ".Bear-RichEditor__more-menu") || s(!1);
+      }
     };
-    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
-  }, []), /* @__PURE__ */ s("div", { ref: t, className: "Bear-RichEditor__more relative", children: [
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, []), h(() => {
+    if (r && t && i.current && typeof document < "u") {
+      const o = i.current.getBoundingClientRect();
+      E({ top: o.bottom + 4, left: Math.max(8, o.right - 220) });
+    }
+  }, [r, t]);
+  const m = /* @__PURE__ */ e(
+    "div",
+    {
+      className: _(
+        "Bear-RichEditor__more-menu p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl min-w-[200px] max-w-[min(90vw,280px)] max-h-[70vh] overflow-y-auto",
+        t ? "fixed z-[9999]" : "absolute top-full right-0 mt-1 z-50"
+      ),
+      style: t ? { top: d.top, left: d.left } : void 0,
+      children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-0.5", children: x })
+    }
+  );
+  return /* @__PURE__ */ g("div", { ref: n, className: "Bear-RichEditor__more relative", children: [
     /* @__PURE__ */ e(
       "button",
       {
+        ref: i,
         type: "button",
         title: "More options",
-        disabled: o,
-        onClick: () => i(!r),
-        className: u(
+        disabled: l,
+        onClick: () => s(!r),
+        className: _(
           "Bear-RichEditor__more-trigger",
-          h,
-          f,
+          w,
+          v,
           "flex items-center justify-center",
           r && "bg-pink-500 text-white",
-          o && `Bear-RichEditor__more-trigger--disabled ${_}`
+          l && `Bear-RichEditor__more-trigger--disabled ${R}`
         ),
-        children: /* @__PURE__ */ e(E, {})
+        children: /* @__PURE__ */ e(B, {})
       }
     ),
-    r && /* @__PURE__ */ e(
-      "div",
-      {
-        className: "Bear-RichEditor__more-menu absolute top-full right-0 mt-1 p-2 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-xl z-50 min-w-[200px]",
-        children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-0.5", children: c })
-      }
-    )
+    r && (t && typeof document < "u" ? C(m, document.body) : m)
   ] });
 };
 export {
-  S as ToolbarMore
+  b as ToolbarMore
 };

package/dist/components/SegmentedControl/SegmentedControl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),i=require("../../utils/cn.cjs"),y={sm:"bear-h-8 bear-text-sm",md:"bear-h-10 bear-text-base",lg:"bear-h-12 bear-text-lg"},p=({items:t,value:b,defaultValue:d,onChange:a,size:c="md",fullWidth:l=!1,disabled:r=!1,className:u})=>{var o;const[x,g]=f.useState(d??((o=t[0])==null?void 0:o.value)??""),n=b??x,v=(e,m)=>{m||r||(b===void 0&&g(e),a==null||a(e))};return s.jsx("div",{role:"group","aria-label":"Segmented control",className:i.cn("Bear-SegmentedControl bear-relative bear-inline-flex bear-rounded-lg bear-bg-gray-200 dark:bear-bg-zinc-800 bear-p-1",l&&"bear-w-full",r&&"bear-opacity-50 bear-pointer-events-none",u),children:t.map(e=>s.jsx("button",{type:"button",role:"tab","aria-selected":e.value===n,"aria-disabled":e.disabled||r,disabled:e.disabled||r,onClick:()=>v(e.value,e.disabled),className:i.cn("Bear-SegmentedControl__item bear-relative bear-flex-1 bear-flex bear-items-center bear-justify-center bear-rounded-md bear-font-medium bear-transition-all bear-duration-200 bear-text-gray-600 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-zinc-200",e.value===n&&"bear-bg-white dark:bear-bg-zinc-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm",(e.disabled||r)&&"bear-cursor-not-allowed bear-opacity-50",y[c],l?"bear-min-w-0":"bear-px-4"),children:e.label},e.value))})};exports.SegmentedControl=p;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

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

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,58 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { cn as d } from "../../utils/cn.js";
+const p = {
+  sm: "bear-h-8 bear-text-sm",
+  md: "bear-h-10 bear-text-base",
+  lg: "bear-h-12 bear-text-lg"
+}, w = ({
+  items: t,
+  value: b,
+  defaultValue: i,
+  onChange: r,
+  size: c = "md",
+  fullWidth: l = !1,
+  disabled: a = !1,
+  className: u
+}) => {
+  var o;
+  const [m, x] = g(i ?? ((o = t[0]) == null ? void 0 : o.value) ?? ""), n = b ?? m, v = (e, f) => {
+    f || a || (b === void 0 && x(e), r == null || r(e));
+  };
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Segmented control",
+      className: d(
+        "Bear-SegmentedControl bear-relative bear-inline-flex bear-rounded-lg bear-bg-gray-200 dark:bear-bg-zinc-800 bear-p-1",
+        l && "bear-w-full",
+        a && "bear-opacity-50 bear-pointer-events-none",
+        u
+      ),
+      children: t.map((e) => /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": e.value === n,
+          "aria-disabled": e.disabled || a,
+          disabled: e.disabled || a,
+          onClick: () => v(e.value, e.disabled),
+          className: d(
+            "Bear-SegmentedControl__item bear-relative bear-flex-1 bear-flex bear-items-center bear-justify-center bear-rounded-md bear-font-medium bear-transition-all bear-duration-200 bear-text-gray-600 dark:bear-text-zinc-400 hover:bear-text-gray-900 dark:hover:bear-text-zinc-200",
+            e.value === n && "bear-bg-white dark:bear-bg-zinc-700 bear-text-gray-900 dark:bear-text-white bear-shadow-sm",
+            (e.disabled || a) && "bear-cursor-not-allowed bear-opacity-50",
+            p[c],
+            l ? "bear-min-w-0" : "bear-px-4"
+          ),
+          children: e.label
+        },
+        e.value
+      ))
+    }
+  );
+};
+export {
+  w as SegmentedControl
+};

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlItem {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps {
+    items: SegmentedControlItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md' | 'lg';
+    fullWidth?: boolean;
+    disabled?: boolean;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlItem } from './SegmentedControl.types';

package/dist/components/SignPad/SignPad.cjs

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