@forgedevstack/bear 1.0.3 → 1.0.4-alpha

package/dist/components/CodeBlock/CodeBlock.js

@@ -1,55 +1,68 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as f, useState as v } from "react";
-const k = f(({
-  code: s,
-  language: d = "typescript",
-  showLineNumbers: g = !0,
-  title: o,
-  copyable: i = !0,
-  maxHeight: a,
-  theme: r = "dark",
-  className: y = "",
-  ...x
-}, p) => {
-  const [l, n] = v(!1), h = async () => {
-    await navigator.clipboard.writeText(s), n(!0), setTimeout(() => n(!1), 2e3);
-  }, m = s.split(`
-`);
-  return /* @__PURE__ */ t("div", { className: `bear-code-block rounded-lg overflow-hidden ${r === "dark" ? "bg-gray-900 text-gray-100" : "bg-gray-50 text-gray-900 border border-gray-200"} ${y}`.trim(), children: [
-    (o || i) && /* @__PURE__ */ t("div", { className: `flex items-center justify-between px-4 py-2 ${r === "dark" ? "bg-gray-800 border-b border-gray-700" : "bg-gray-100 border-b border-gray-200"}`, children: [
-      /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
-        o && /* @__PURE__ */ e("span", { className: `text-sm font-medium ${r === "dark" ? "text-gray-300" : "text-gray-700"}`, children: o }),
-        d && /* @__PURE__ */ e("span", { className: `text-xs px-2 py-0.5 rounded ${r === "dark" ? "bg-gray-700 text-gray-400" : "bg-gray-200 text-gray-600"}`, children: d })
-      ] }),
-      i && /* @__PURE__ */ e(
-        "button",
-        {
-          onClick: h,
-          className: `p-1.5 rounded transition-colors ${r === "dark" ? "hover:bg-gray-700 text-gray-400 hover:text-gray-200" : "hover:bg-gray-200 text-gray-500 hover:text-gray-700"}`,
-          title: l ? "Copied!" : "Copy code",
-          children: l ? /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ e("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-            /* @__PURE__ */ e("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(
-      "pre",
-      {
-        ref: p,
-        className: "overflow-x-auto p-4",
-        style: { maxHeight: a ? typeof a == "number" ? `${a}px` : a : void 0 },
-        ...x,
-        children: /* @__PURE__ */ e("code", { className: "text-sm font-mono", children: m.map((b, c) => /* @__PURE__ */ t("div", { className: "flex", children: [
-          g && /* @__PURE__ */ e("span", { className: `select-none w-8 flex-shrink-0 text-right pr-4 ${r === "dark" ? "text-gray-600" : "text-gray-400"}`, children: c + 1 }),
-          /* @__PURE__ */ e("span", { className: "flex-1", children: b || " " })
-        ] }, c)) })
-      }
-    )
-  ] });
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f, useState as A } from "react";
+import { cn as t } from "../../utils/cn.js";
+import { Typography as K } from "../Typography/Typography.js";
+const N = "Bear-CodeBlock bear-rounded-lg bear-overflow-hidden", S = "bear-bg-white bear-text-gray-900 bear-border bear-border-gray-200", v = "bear-bg-zinc-900 bear-text-gray-100", m = "bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-gray-100 bear-border bear-border-gray-200 dark:bear-border-zinc-700", R = "Bear-CodeBlock__header bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-2", z = "bear-bg-gray-50 bear-border-b bear-border-gray-200", T = "bear-bg-zinc-800 bear-border-b bear-border-zinc-700", w = "bear-bg-gray-50 dark:bear-bg-zinc-800 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", G = "Bear-CodeBlock__language bear-text-xs bear-px-2 bear-py-0.5 bear-rounded", U = "bear-bg-gray-200 bear-text-gray-600", I = "bear-bg-zinc-700 bear-text-zinc-400", H = "bear-bg-gray-200 dark:bear-bg-zinc-700 bear-text-gray-600 dark:bear-text-zinc-400", M = "Bear-CodeBlock__copy bear-p-1.5 bear-rounded bear-transition-colors", P = "hover:bear-bg-gray-200 bear-text-gray-500 hover:bear-text-gray-700", Y = "hover:bear-bg-zinc-700 bear-text-zinc-400 hover:bear-text-zinc-200", j = "hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-text-gray-500 dark:bear-text-zinc-400 hover:bear-text-gray-700 dark:hover:bear-text-zinc-200", W = "Bear-CodeBlock__pre bear-overflow-x-auto bear-p-4 bear-m-0", V = "Bear-CodeBlock__code bear-text-sm bear-font-mono", $ = "Bear-CodeBlock__line bear-flex", q = "Bear-CodeBlock__line-number bear-select-none bear-w-8 bear-flex-shrink-0 bear-text-right bear-pr-4", F = "bear-text-gray-400", J = "bear-text-zinc-600", Q = "bear-text-gray-400 dark:bear-text-zinc-600", X = f(({
+  code: c,
+  language: i = "typescript",
+  showLineNumbers: l = !0,
+  title: n,
+  copyable: s = !0,
+  maxHeight: o,
+  theme: r = "auto",
+  className: _ = "",
+  testId: O,
+  id: g,
+  ...E
+}, B) => {
+  const [b, d] = A(!1), L = async () => {
+    await navigator.clipboard.writeText(c), d(!0), setTimeout(() => d(!1), 2e3);
+  }, p = c.split(`
+`), x = () => r === "light" ? S : r === "dark" ? v : m, y = () => r === "light" ? z : r === "dark" ? T : w, h = () => r === "light" ? U : r === "dark" ? I : H, u = () => r === "light" ? P : r === "dark" ? Y : j, k = () => r === "light" ? F : r === "dark" ? J : Q;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      id: g,
+      "data-testid": O,
+      className: t(N, x(), _),
+      children: [
+        (n || s) && /* @__PURE__ */ a("div", { className: t(R, y()), children: [
+          /* @__PURE__ */ a("div", { className: "bear-flex bear-items-center bear-gap-2", children: [
+            n && /* @__PURE__ */ e(K, { variant: "caption", className: "Bear-CodeBlock__title bear-font-medium", children: n }),
+            i && /* @__PURE__ */ e("span", { className: t(G, h()), children: i })
+          ] }),
+          s && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: L,
+              className: t(M, u()),
+              title: b ? "Copied!" : "Copy code",
+              "aria-label": b ? "Copied!" : "Copy code",
+              children: b ? /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+                /* @__PURE__ */ e("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ e("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          "pre",
+          {
+            ref: B,
+            className: W,
+            style: { maxHeight: o ? typeof o == "number" ? `${o}px` : o : void 0 },
+            ...E,
+            children: /* @__PURE__ */ e("code", { className: V, children: p.map((D, C) => /* @__PURE__ */ a("div", { className: $, children: [
+              l && /* @__PURE__ */ e("span", { className: t(q, k()), children: C + 1 }),
+              /* @__PURE__ */ e("span", { className: "Bear-CodeBlock__line-content bear-flex-1", children: D || " " })
+            ] }, C)) })
+          }
+        )
+      ]
+    }
+  );
 });
-k.displayName = "CodeBlock";
+X.displayName = "CodeBlock";
 export {
-  k as CodeBlock
+  X as CodeBlock
 };

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

@@ -1,10 +1,21 @@
 import { HTMLAttributes } from 'react';
 export interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {
+    /** Code content to display */
     code: string;
+    /** Programming language for display label */
     language?: string;
+    /** Show line numbers */
     showLineNumbers?: boolean;
+    /** Title displayed in header */
     title?: string;
+    /** Show copy button */
     copyable?: boolean;
+    /** Maximum height with scroll */
     maxHeight?: number | string;
-    theme?: 'dark' | 'light';
+    /** Theme: 'auto' follows system, 'light' or 'dark' forces theme */
+    theme?: 'auto' | 'dark' | 'light';
+    /** Test ID for testing */
+    testId?: string;
+    /** Element ID */
+    id?: string;
 }

package/dist/components/Editable/Editable.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),v=require("../Button/Button.cjs"),k=require("../Icon/index.cjs"),w=e.createContext(null),d=()=>{const r=e.useContext(w);if(!r)throw new Error("Editable components must be used within Editable.Root");return r},j=e.forwardRef(({children:r,defaultValue:s="",value:a,onChange:i,onEditSubmit:t,onCancel:o,placeholder:b="Click to edit...",isDisabled:c=!1,startWithEditView:x=!1,className:u="",...f},m)=>{const[l,p]=e.useState(x),[B,T]=e.useState(s),[E,P]=e.useState(s),g=a!==void 0?a:B,y=e.useCallback(h=>{a===void 0&&T(h),i==null||i(h)},[a,i]),q=e.useCallback(()=>{c||(P(g),p(!0))},[c,g]),D=e.useCallback(()=>{p(!1)},[]),K=e.useCallback(()=>{t==null||t(g),p(!1)},[g,t]),S=e.useCallback(()=>{y(E),o==null||o(),p(!1)},[E,y,o]);return n.jsx(w.Provider,{value:{isEditing:l,value:g,startEditing:q,stopEditing:D,setValue:y,submit:K,cancel:S},children:n.jsx("div",{ref:m,className:`bear-editable inline-block ${u}`.trim(),...f,children:r})})});j.displayName="Editable.Root";const N=e.forwardRef(({children:r,className:s="",...a},i)=>{const{isEditing:t,value:o,startEditing:b}=d();return t?null:n.jsx("span",{ref:i,className:`bear-editable-preview cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1 rounded transition-colors ${s}`.trim(),onClick:b,...a,children:r||o||n.jsx("span",{className:"text-gray-400 italic",children:"Click to edit..."})})});N.displayName="Editable.Preview";const C=e.forwardRef(({asTextarea:r=!1,className:s="",...a},i)=>{const{isEditing:t,value:o,setValue:b,submit:c,cancel:x}=d(),u=e.useRef(null);e.useEffect(()=>{t&&u.current&&(u.current.focus(),u.current.select())},[t]);const f=l=>{l.key==="Enter"&&!r&&(l.preventDefault(),c()),l.key==="Escape"&&x()};if(!t)return null;const m="bear-editable-input w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500";return r?n.jsx("textarea",{ref:i,value:o,onChange:l=>b(l.target.value),onKeyDown:f,onBlur:c,className:`${m} min-h-[80px] resize-y ${s}`.trim(),...a}):n.jsx("input",{ref:u,type:"text",value:o,onChange:l=>b(l.target.value),onKeyDown:f,onBlur:c,className:`${m} ${s}`.trim(),...a})});C.displayName="Editable.Input";const R=e.forwardRef(({children:r,className:s="",...a},i)=>{const{isEditing:t}=d();return t?n.jsx("div",{ref:i,className:`bear-editable-control flex items-center gap-1 mt-1 ${s}`.trim(),...a,children:r}):null});R.displayName="Editable.Control";const $=e.forwardRef(({children:r,className:s="",...a},i)=>{const{submit:t}=d();return n.jsx(v.Button,{ref:i,type:"button",onClick:t,variant:"ghost",size:"sm",className:`bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:r||n.jsx(k.CheckIcon,{size:16})})});$.displayName="Editable.SubmitTrigger";const z=e.forwardRef(({children:r,className:s="",...a},i)=>{const{cancel:t}=d();return n.jsx(v.Button,{ref:i,type:"button",onClick:t,variant:"ghost",size:"sm",className:`bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:r||n.jsx(k.CloseIcon,{size:16})})});z.displayName="Editable.CancelTrigger";const I=e.forwardRef(({children:r,className:s="",...a},i)=>{const{isEditing:t,startEditing:o}=d();return t?null:n.jsx(v.Button,{ref:i,type:"button",onClick:o,variant:"ghost",size:"sm",className:`bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:r||n.jsx(k.EditIcon,{size:16})})});I.displayName="Editable.EditTrigger";const M={Root:j,Preview:N,Input:C,Control:R,SubmitTrigger:$,CancelTrigger:z,EditTrigger:I};exports.Editable=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("react"),y=require("../Button/Button.cjs"),k=require("../Icon/index.cjs"),w=e.createContext(null),d=()=>{const t=e.useContext(w);if(!t)throw new Error("Editable components must be used within Editable.Root");return t},j=e.forwardRef(({children:t,defaultValue:s="",value:a,onChange:i,onEditSubmit:r,onCancel:b,placeholder:u="Click to edit...",isDisabled:l=!1,startWithEditView:p=!1,className:c="",...f},m)=>{const[o,x]=e.useState(p),[I,T]=e.useState(s),[E,_]=e.useState(s),g=a!==void 0?a:I,v=e.useCallback(h=>{a===void 0&&T(h),i==null||i(h)},[a,i]),P=e.useCallback(()=>{l||(_(g),x(!0))},[l,g]),q=e.useCallback(()=>{x(!1)},[]),D=e.useCallback(()=>{r==null||r(g),x(!1)},[g,r]),K=e.useCallback(()=>{v(E),b==null||b(),x(!1)},[E,v,b]);return n.jsx(w.Provider,{value:{isEditing:o,value:g,startEditing:P,stopEditing:q,setValue:v,submit:D,cancel:K},children:n.jsx("div",{ref:m,className:`Bear-Editable bear-inline-block ${c}`.trim(),...f,children:t})})});j.displayName="Editable.Root";const N=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r,value:b,startEditing:u}=d();return r?null:n.jsx("span",{ref:i,className:`Bear-Editable__preview bear-cursor-pointer bear-px-2 bear-py-1 bear-rounded bear-transition-all bear-border bear-border-transparent hover:bear-border-gray-300 dark:hover:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white ${s}`.trim(),onClick:u,...a,children:t||b||n.jsx("span",{className:"bear-text-gray-400 dark:bear-text-zinc-500 bear-italic",children:"Click to edit..."})})});N.displayName="Editable.Preview";const C=e.forwardRef(({asTextarea:t=!1,className:s="",...a},i)=>{const{isEditing:r,value:b,setValue:u,submit:l,cancel:p}=d(),c=e.useRef(null);e.useEffect(()=>{r&&c.current&&(c.current.focus(),c.current.select())},[r]);const f=o=>{o.key==="Enter"&&!t&&(o.preventDefault(),l()),o.key==="Escape"&&p()};if(!r)return null;const m="Bear-Editable__input bear-w-full bear-px-2 bear-py-1 bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-rounded bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500";return t?n.jsx("textarea",{ref:i,value:b,onChange:o=>u(o.target.value),onKeyDown:f,onBlur:l,className:`${m} bear-min-h-[80px] bear-resize-y ${s}`.trim(),...a}):n.jsx("input",{ref:c,type:"text",value:b,onChange:o=>u(o.target.value),onKeyDown:f,onBlur:l,className:`${m} ${s}`.trim(),...a})});C.displayName="Editable.Input";const R=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r}=d();return r?n.jsx("div",{ref:i,className:`Bear-Editable__control bear-flex bear-items-center bear-gap-1 bear-mt-1 ${s}`.trim(),...a,children:t}):null});R.displayName="Editable.Control";const z=e.forwardRef(({children:t,className:s="",...a},i)=>{const{submit:r}=d();return n.jsx(y.Button,{ref:i,type:"button",onClick:r,variant:"ghost",size:"sm",className:`bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.CheckIcon,{size:16})})});z.displayName="Editable.SubmitTrigger";const B=e.forwardRef(({children:t,className:s="",...a},i)=>{const{cancel:r}=d();return n.jsx(y.Button,{ref:i,type:"button",onClick:r,variant:"ghost",size:"sm",className:`bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.CloseIcon,{size:16})})});B.displayName="Editable.CancelTrigger";const $=e.forwardRef(({children:t,className:s="",...a},i)=>{const{isEditing:r,startEditing:b}=d();return r?null:n.jsx(y.Button,{ref:i,type:"button",onClick:b,variant:"ghost",size:"sm",className:`bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${s}`.trim(),...a,children:t||n.jsx(k.EditIcon,{size:16})})});$.displayName="Editable.EditTrigger";const S={Root:j,Preview:N,Input:C,Control:R,SubmitTrigger:z,CancelTrigger:B,EditTrigger:$};exports.Editable=S;

package/dist/components/Editable/Editable.js

@@ -1,194 +1,194 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createContext as F, forwardRef as l, useState as h, useCallback as m, useRef as G, useEffect as H, useContext as J } from "react";
+import { createContext as A, forwardRef as o, useState as h, useCallback as m, useRef as F, useEffect as G, useContext as H } from "react";
 import { Button as k } from "../Button/Button.js";
-import { CheckIcon as L, CloseIcon as M, EditIcon as O } from "../Icon/index.js";
-const N = F(null), b = () => {
-  const t = J(N);
-  if (!t)
+import { CheckIcon as J, CloseIcon as L, EditIcon as M } from "../Icon/index.js";
+const N = A(null), d = () => {
+  const r = H(N);
+  if (!r)
     throw new Error("Editable components must be used within Editable.Root");
-  return t;
-}, C = l(({
-  children: t,
-  defaultValue: a = "",
-  value: r,
-  onChange: i,
+  return r;
+}, z = o(({
+  children: r,
+  defaultValue: i = "",
+  value: t,
+  onChange: a,
   onEditSubmit: e,
   onCancel: s,
   placeholder: u = "Click to edit...",
-  isDisabled: c = !1,
-  startWithEditView: v = !1,
-  className: d = "",
+  isDisabled: l = !1,
+  startWithEditView: y = !1,
+  className: c = "",
   ...p
 }, f) => {
-  const [o, y] = h(v), [B, D] = h(a), [x, K] = h(a), g = r !== void 0 ? r : B, E = m((w) => {
-    r === void 0 && D(w), i == null || i(w);
-  }, [r, i]), j = m(() => {
-    c || (K(g), y(!0));
-  }, [c, g]), V = m(() => {
-    y(!1);
-  }, []), q = m(() => {
-    e == null || e(g), y(!1);
-  }, [g, e]), A = m(() => {
-    E(x), s == null || s(), y(!1);
+  const [b, v] = h(y), [T, P] = h(i), [x, D] = h(i), g = t !== void 0 ? t : T, E = m((w) => {
+    t === void 0 && P(w), a == null || a(w);
+  }, [t, a]), K = m(() => {
+    l || (D(g), v(!0));
+  }, [l, g]), j = m(() => {
+    v(!1);
+  }, []), V = m(() => {
+    e == null || e(g), v(!1);
+  }, [g, e]), q = m(() => {
+    E(x), s == null || s(), v(!1);
   }, [x, E, s]);
-  return /* @__PURE__ */ n(N.Provider, { value: { isEditing: o, value: g, startEditing: j, stopEditing: V, setValue: E, submit: q, cancel: A }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(N.Provider, { value: { isEditing: b, value: g, startEditing: K, stopEditing: j, setValue: E, submit: V, cancel: q }, children: /* @__PURE__ */ n(
     "div",
     {
       ref: f,
-      className: `bear-editable inline-block ${d}`.trim(),
+      className: `Bear-Editable bear-inline-block ${c}`.trim(),
       ...p,
-      children: t
+      children: r
     }
   ) });
 });
-C.displayName = "Editable.Root";
-const $ = l(({
-  children: t,
-  className: a = "",
-  ...r
-}, i) => {
-  const { isEditing: e, value: s, startEditing: u } = b();
+z.displayName = "Editable.Root";
+const C = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, value: s, startEditing: u } = d();
   return e ? null : /* @__PURE__ */ n(
     "span",
     {
-      ref: i,
-      className: `bear-editable-preview cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1 rounded transition-colors ${a}`.trim(),
+      ref: a,
+      className: `Bear-Editable__preview bear-cursor-pointer bear-px-2 bear-py-1 bear-rounded bear-transition-all bear-border bear-border-transparent hover:bear-border-gray-300 dark:hover:bear-border-zinc-600 hover:bear-bg-gray-50 dark:hover:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white ${i}`.trim(),
       onClick: u,
-      ...r,
-      children: t || s || /* @__PURE__ */ n("span", { className: "text-gray-400 italic", children: "Click to edit..." })
+      ...t,
+      children: r || s || /* @__PURE__ */ n("span", { className: "bear-text-gray-400 dark:bear-text-zinc-500 bear-italic", children: "Click to edit..." })
     }
   );
 });
-$.displayName = "Editable.Preview";
-const z = l(({
-  asTextarea: t = !1,
-  className: a = "",
-  ...r
-}, i) => {
-  const { isEditing: e, value: s, setValue: u, submit: c, cancel: v } = b(), d = G(null);
-  H(() => {
-    e && d.current && (d.current.focus(), d.current.select());
+C.displayName = "Editable.Preview";
+const $ = o(({
+  asTextarea: r = !1,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, value: s, setValue: u, submit: l, cancel: y } = d(), c = F(null);
+  G(() => {
+    e && c.current && (c.current.focus(), c.current.select());
   }, [e]);
-  const p = (o) => {
-    o.key === "Enter" && !t && (o.preventDefault(), c()), o.key === "Escape" && v();
+  const p = (b) => {
+    b.key === "Enter" && !r && (b.preventDefault(), l()), b.key === "Escape" && y();
   };
   if (!e) return null;
-  const f = "bear-editable-input w-full px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-pink-500";
-  return t ? /* @__PURE__ */ n(
+  const f = "Bear-Editable__input bear-w-full bear-px-2 bear-py-1 bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-rounded bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500";
+  return r ? /* @__PURE__ */ n(
     "textarea",
     {
-      ref: i,
+      ref: a,
       value: s,
-      onChange: (o) => u(o.target.value),
+      onChange: (b) => u(b.target.value),
       onKeyDown: p,
-      onBlur: c,
-      className: `${f} min-h-[80px] resize-y ${a}`.trim(),
-      ...r
+      onBlur: l,
+      className: `${f} bear-min-h-[80px] bear-resize-y ${i}`.trim(),
+      ...t
     }
   ) : /* @__PURE__ */ n(
     "input",
     {
-      ref: d,
+      ref: c,
       type: "text",
       value: s,
-      onChange: (o) => u(o.target.value),
+      onChange: (b) => u(b.target.value),
       onKeyDown: p,
-      onBlur: c,
-      className: `${f} ${a}`.trim(),
-      ...r
+      onBlur: l,
+      className: `${f} ${i}`.trim(),
+      ...t
     }
   );
 });
-z.displayName = "Editable.Input";
-const I = l(({
-  children: t,
-  className: a = "",
-  ...r
-}, i) => {
-  const { isEditing: e } = b();
+$.displayName = "Editable.Input";
+const B = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e } = d();
   return e ? /* @__PURE__ */ n(
     "div",
     {
-      ref: i,
-      className: `bear-editable-control flex items-center gap-1 mt-1 ${a}`.trim(),
-      ...r,
-      children: t
+      ref: a,
+      className: `Bear-Editable__control bear-flex bear-items-center bear-gap-1 bear-mt-1 ${i}`.trim(),
+      ...t,
+      children: r
     }
   ) : null;
 });
-I.displayName = "Editable.Control";
-const R = l(({
-  children: t,
-  className: a = "",
-  ...r
-}, i) => {
-  const { submit: e } = b();
+B.displayName = "Editable.Control";
+const I = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { submit: e } = d();
   return /* @__PURE__ */ n(
     k,
     {
-      ref: i,
+      ref: a,
       type: "button",
       onClick: e,
       variant: "ghost",
       size: "sm",
-      className: `bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${a}`.trim(),
-      ...r,
-      children: t || /* @__PURE__ */ n(L, { size: 16 })
+      className: `bear-editable-submit bear-text-green-600 dark:bear-text-green-400 hover:bear-bg-green-100 dark:hover:bear-bg-green-900/30 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(J, { size: 16 })
     }
   );
 });
-R.displayName = "Editable.SubmitTrigger";
-const T = l(({
-  children: t,
-  className: a = "",
-  ...r
-}, i) => {
-  const { cancel: e } = b();
+I.displayName = "Editable.SubmitTrigger";
+const R = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { cancel: e } = d();
   return /* @__PURE__ */ n(
     k,
     {
-      ref: i,
+      ref: a,
       type: "button",
       onClick: e,
       variant: "ghost",
       size: "sm",
-      className: `bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${a}`.trim(),
-      ...r,
-      children: t || /* @__PURE__ */ n(M, { size: 16 })
+      className: `bear-editable-cancel bear-text-red-600 dark:bear-text-red-400 hover:bear-bg-red-100 dark:hover:bear-bg-red-900/30 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(L, { size: 16 })
     }
   );
 });
-T.displayName = "Editable.CancelTrigger";
-const P = l(({
-  children: t,
-  className: a = "",
-  ...r
-}, i) => {
-  const { isEditing: e, startEditing: s } = b();
+R.displayName = "Editable.CancelTrigger";
+const _ = o(({
+  children: r,
+  className: i = "",
+  ...t
+}, a) => {
+  const { isEditing: e, startEditing: s } = d();
   return e ? null : /* @__PURE__ */ n(
     k,
     {
-      ref: i,
+      ref: a,
       type: "button",
       onClick: s,
       variant: "ghost",
       size: "sm",
-      className: `bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${a}`.trim(),
-      ...r,
-      children: t || /* @__PURE__ */ n(O, { size: 16 })
+      className: `bear-editable-edit bear-text-gray-600 dark:bear-text-gray-400 hover:bear-bg-gray-100 dark:hover:bear-bg-gray-800 bear-p-1 bear-min-w-0 ${i}`.trim(),
+      ...t,
+      children: r || /* @__PURE__ */ n(M, { size: 16 })
     }
   );
 });
-P.displayName = "Editable.EditTrigger";
-const Y = {
-  Root: C,
-  Preview: $,
-  Input: z,
-  Control: I,
-  SubmitTrigger: R,
-  CancelTrigger: T,
-  EditTrigger: P
+_.displayName = "Editable.EditTrigger";
+const X = {
+  Root: z,
+  Preview: C,
+  Input: $,
+  Control: B,
+  SubmitTrigger: I,
+  CancelTrigger: R,
+  EditTrigger: _
 };
 export {
-  Y as Editable
+  X as Editable
 };

package/dist/components/Gauge/Gauge.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),o=require("../../utils/cn.cjs"),C=({value:a,min:r=0,max:l=100,size:i=120,strokeWidth:t=10,color:y="#ec4899",trackColor:j,showLabel:g=!0,label:p,animated:k=!0,arcAngle:n=270,gradient:s,className:M,...N})=>{const f=h.useId(),{percentage:v,circumference:u,offset:b,startAngle:x}=h.useMemo(()=>{const m=Math.min(Math.max((a-r)/(l-r)*100,0),100),w=50-t/2,c=2*Math.PI*w*(n/360),D=c-m/100*c,q=90+(360-n)/2;return{percentage:m,circumference:c,offset:D,startAngle:q}},[a,r,l,n,t]),d=50-t/2;return e.jsxs("div",{className:o.cn("relative inline-flex items-center justify-center",M),style:{width:i,height:i},...N,children:[e.jsxs("svg",{viewBox:"0 0 100 100",className:"w-full h-full -rotate-90",children:[e.jsx("defs",{children:s&&e.jsxs("linearGradient",{id:f,x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:s[0]}),e.jsx("stop",{offset:"100%",stopColor:s[1]})]})}),e.jsx("circle",{cx:"50",cy:"50",r:d,fill:"none",stroke:j||"currentColor",strokeWidth:t,strokeLinecap:"round",strokeDasharray:u,strokeDashoffset:0,className:o.cn("text-gray-200 dark:text-slate-700"),style:{transformOrigin:"center",transform:`rotate(${x}deg)`}}),e.jsx("circle",{cx:"50",cy:"50",r:d,fill:"none",stroke:s?`url(#${f})`:y,strokeWidth:t,strokeLinecap:"round",strokeDasharray:u,strokeDashoffset:b,className:o.cn(k&&"transition-all duration-1000 ease-out"),style:{transformOrigin:"center",transform:`rotate(${x}deg)`}})]}),g&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:p||e.jsxs("span",{className:"text-2xl font-semibold text-gray-800 dark:text-white",children:[Math.round(v),"%"]})})]})};exports.Gauge=C;

package/dist/components/Gauge/Gauge.d.ts

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

package/dist/components/Gauge/Gauge.js

@@ -0,0 +1,92 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useId as $, useMemo as b } from "react";
+import { cn as c } from "../../utils/cn.js";
+const B = ({
+  value: l,
+  min: o = 0,
+  max: i = 100,
+  size: f = 120,
+  strokeWidth: t = 10,
+  color: p = "#ec4899",
+  trackColor: y,
+  showLabel: g = !0,
+  label: k,
+  animated: N = !0,
+  arcAngle: n = 270,
+  gradient: r,
+  className: M,
+  ...j
+}) => {
+  const u = $(), { percentage: v, circumference: m, offset: w, startAngle: d } = b(() => {
+    const h = Math.min(Math.max((l - o) / (i - o) * 100, 0), 100), D = 50 - t / 2, a = 2 * Math.PI * D * (n / 360), C = a - h / 100 * a, I = 90 + (360 - n) / 2;
+    return {
+      percentage: h,
+      circumference: a,
+      offset: C,
+      startAngle: I
+    };
+  }, [l, o, i, n, t]), x = 50 - t / 2;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: c("relative inline-flex items-center justify-center", M),
+      style: { width: f, height: f },
+      ...j,
+      children: [
+        /* @__PURE__ */ s("svg", { viewBox: "0 0 100 100", className: "w-full h-full -rotate-90", children: [
+          /* @__PURE__ */ e("defs", { children: r && /* @__PURE__ */ s("linearGradient", { id: u, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: r[0] }),
+            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: r[1] })
+          ] }) }),
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: x,
+              fill: "none",
+              stroke: y || "currentColor",
+              strokeWidth: t,
+              strokeLinecap: "round",
+              strokeDasharray: m,
+              strokeDashoffset: 0,
+              className: c("text-gray-200 dark:text-slate-700"),
+              style: {
+                transformOrigin: "center",
+                transform: `rotate(${d}deg)`
+              }
+            }
+          ),
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r: x,
+              fill: "none",
+              stroke: r ? `url(#${u})` : p,
+              strokeWidth: t,
+              strokeLinecap: "round",
+              strokeDasharray: m,
+              strokeDashoffset: w,
+              className: c(
+                N && "transition-all duration-1000 ease-out"
+              ),
+              style: {
+                transformOrigin: "center",
+                transform: `rotate(${d}deg)`
+              }
+            }
+          )
+        ] }),
+        g && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: k || /* @__PURE__ */ s("span", { className: "text-2xl font-semibold text-gray-800 dark:text-white", children: [
+          Math.round(v),
+          "%"
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  B as Gauge
+};

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

@@ -0,0 +1,27 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface GaugeProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100 or within min/max) */
+    value: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Size of the gauge */
+    size?: number;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Primary color */
+    color?: string;
+    /** Track color */
+    trackColor?: string;
+    /** Show percentage label */
+    showLabel?: boolean;
+    /** Custom label */
+    label?: ReactNode;
+    /** Animate on render */
+    animated?: boolean;
+    /** Arc angle (180 for half, 270 for 3/4, 360 for full) */
+    arcAngle?: number;
+    /** Gradient colors [start, end] */
+    gradient?: [string, string];
+}

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

@@ -0,0 +1,2 @@
+export { Gauge } from './Gauge';
+export type { GaugeProps } from './Gauge.types';