@forgedevstack/bear 1.0.7 → 1.0.9

package/dist/components/Highlight/Highlight.d.ts

@@ -1,2 +1,6 @@
 import { HighlightProps } from './Highlight.types';
+/**
+ * Highlight - Inline text highlight with theme-aware colors.
+ * 'primary' color uses BearProvider's primary palette.
+ */
 export declare const Highlight: import('react').ForwardRefExoticComponent<HighlightProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Highlight/Highlight.js

@@ -1,28 +1,36 @@
-import { jsx as b } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
-const n = {
-  yellow: "bg-yellow-200 dark:bg-yellow-500/30",
-  pink: "bg-pink-200 dark:bg-pink-500/30",
-  blue: "bg-blue-200 dark:bg-blue-500/30",
-  green: "bg-green-200 dark:bg-green-500/30",
-  purple: "bg-purple-200 dark:bg-purple-500/30",
-  orange: "bg-orange-200 dark:bg-orange-500/30"
-}, i = p(({
-  children: e,
-  color: r = "yellow",
-  animated: g = !1,
-  className: l = "",
-  ...a
-}, o) => /* @__PURE__ */ b(
-  "span",
-  {
-    ref: o,
-    className: `bear-highlight px-1 rounded ${n[r]} ${g ? "animate-pulse" : ""} ${l}`.trim(),
-    ...a,
-    children: e
+import { cn as f } from "../../utils/cn.js";
+import { DEFAULT_COLOR as r, HIGHLIGHT_COLOR_CLASSES as t } from "./Highlight.const.js";
+const h = p(
+  (a, e) => {
+    const {
+      children: o,
+      color: s = r,
+      animated: i = !1,
+      className: m,
+      testId: l,
+      ...n
+    } = a, c = t[s] ?? t[r];
+    return /* @__PURE__ */ d(
+      "span",
+      {
+        ref: e,
+        className: f(
+          "Bear-Highlight",
+          "bear-px-1 bear-rounded",
+          c,
+          i && "bear-animate-pulse",
+          m
+        ),
+        "data-testid": l,
+        ...n,
+        children: o
+      }
+    );
   }
-));
-i.displayName = "Highlight";
+);
+h.displayName = "Highlight";
 export {
-  i as Highlight
+  h as Highlight
 };

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

@@ -1,6 +1,14 @@
 import { HTMLAttributes, ReactNode } from 'react';
+export type HighlightColor = 'primary' | 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'cyan';
 export interface HighlightProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Content to highlight */
     children?: ReactNode;
-    color?: 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange';
+    /** Highlight color — 'primary' uses theme color from BearProvider */
+    color?: HighlightColor;
+    /** Whether to animate with pulse */
     animated?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
 }

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

@@ -1,2 +1,2 @@
 export { Highlight } from './Highlight';
-export type { HighlightProps } from './Highlight.types';
+export type { HighlightProps, HighlightColor } from './Highlight.types';

package/dist/components/Icon/Icon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("../../utils/cn.cjs"),d={xs:12,sm:16,md:20,lg:24,xl:32},m=({size:e="md",color:t="currentColor",strokeWidth:o=2,spin:r=!1,className:s,children:i,testId:a,...c})=>{const n=typeof e=="number"?e:d[e];return l.jsx("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:t,strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round",className:u.cn("bear-inline-block bear-shrink-0",r&&"bear-animate-spin",s),"data-testid":a,...c,children:i})};exports.Icon=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),u=require("../../utils/cn.cjs");require("react");const d={xs:12,sm:16,md:20,lg:24,xl:32},m=({size:e="md",color:r="currentColor",strokeWidth:t=2,spin:o=!1,className:s,children:i,testId:a,...c})=>{const n=typeof e=="number"?e:d[e];return l.jsx("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",stroke:r,strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:u.cn("bear-inline-block bear-shrink-0",o&&"bear-animate-spin",s),"data-testid":a,...c,children:i})};exports.Icon=m;

package/dist/components/Icon/Icon.js

@@ -1,44 +1,45 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { cn as c } from "../../utils/cn.js";
-const d = {
+import "react";
+const p = {
   xs: 12,
   sm: 16,
   md: 20,
   lg: 24,
   xl: 32
-}, b = ({
+}, f = ({
   size: e = "md",
-  color: n = "currentColor",
-  strokeWidth: r = 2,
+  color: r = "currentColor",
+  strokeWidth: n = 2,
   spin: t = !1,
-  className: s,
-  children: i,
+  className: i,
+  children: s,
   testId: a,
-  ...l
+  ...m
 }) => {
-  const o = typeof e == "number" ? e : d[e];
-  return /* @__PURE__ */ m(
+  const o = typeof e == "number" ? e : p[e];
+  return /* @__PURE__ */ l(
     "svg",
     {
       width: o,
       height: o,
       viewBox: "0 0 24 24",
       fill: "none",
-      stroke: n,
-      strokeWidth: r,
+      stroke: r,
+      strokeWidth: n,
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className: c(
         "bear-inline-block bear-shrink-0",
         t && "bear-animate-spin",
-        s
+        i
       ),
       "data-testid": a,
-      ...l,
-      children: i
+      ...m,
+      children: s
     }
   );
 };
 export {
-  b as Icon
+  f as Icon
 };

package/dist/components/Icon/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");const n=require("./icons/action.cjs"),o=require("./icons/navigation.cjs"),t=require("./icons/content.cjs"),r=require("./icons/communication.cjs"),c=require("./icons/status.cjs"),i=require("./icons/media.cjs"),s=require("./icons/editor.cjs"),e=require("./icons/misc.cjs"),I=c.CheckIcon,h=o.CloseIcon,C=n.EditIcon,v=o.ChevronDownIcon,u=o.ChevronRightIcon,a=o.ChevronLeftIcon,g=o.ChevronsLeftIcon,d=o.ChevronsRightIcon,q=e.XIcon,f={...n,...o,...t,...r,...c,...i,...s,...e,Action:n,Navigation:o,Content:t,Communication:r,Status:c,Media:i,Editor:s,Misc:e};exports.BearIcons=f;exports.CheckIcon=I;exports.ChevronDownIcon=v;exports.ChevronLeftIcon=a;exports.ChevronRightIcon=u;exports.ChevronsLeftIcon=g;exports.ChevronsRightIcon=d;exports.CloseIcon=h;exports.EditIcon=C;exports.XIcon=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("react");const n=require("./icons/action.cjs"),o=require("./icons/navigation.cjs"),t=require("./icons/content.cjs"),r=require("./icons/communication.cjs"),e=require("./icons/status.cjs"),i=require("./icons/media.cjs"),s=require("./icons/editor.cjs"),c=require("./icons/misc.cjs"),I=e.CheckIcon,h=o.CloseIcon,C=n.EditIcon,v=o.ChevronDownIcon,u=o.ChevronRightIcon,a=o.ChevronLeftIcon,g=o.ChevronsLeftIcon,q=o.ChevronsRightIcon,d=c.XIcon,f={...n,...o,...t,...r,...e,...i,...s,...c,Action:n,Navigation:o,Content:t,Communication:r,Status:e,Media:i,Editor:s,Misc:c};exports.BearIcons=f;exports.CheckIcon=I;exports.ChevronDownIcon=v;exports.ChevronLeftIcon=a;exports.ChevronRightIcon=u;exports.ChevronsLeftIcon=g;exports.ChevronsRightIcon=q;exports.CloseIcon=h;exports.EditIcon=C;exports.XIcon=d;

package/dist/components/Icon/index.js

@@ -1,4 +1,5 @@
 import "react/jsx-runtime";
+import "react";
 import * as o from "./icons/action.js";
 import { EditIcon as m } from "./icons/action.js";
 import * as n from "./icons/navigation.js";
@@ -11,7 +12,7 @@ import * as s from "./icons/media.js";
 import * as i from "./icons/editor.js";
 import * as e from "./icons/misc.js";
 import { XIcon as $ } from "./icons/misc.js";
-const E = p, k = a, l = m, w = I, D = h, X = C, M = f, x = v, A = $, B = {
+const k = p, l = a, w = m, D = I, X = h, M = C, x = f, A = v, B = $, N = {
   // Flat access to common icons (shortcuts)
   ...o,
   ...n,
@@ -32,14 +33,14 @@ const E = p, k = a, l = m, w = I, D = h, X = C, M = f, x = v, A = $, B = {
   Misc: e
 };
 export {
-  B as BearIcons,
-  E as CheckIcon,
-  w as ChevronDownIcon,
-  X as ChevronLeftIcon,
-  D as ChevronRightIcon,
-  M as ChevronsLeftIcon,
-  x as ChevronsRightIcon,
-  k as CloseIcon,
-  l as EditIcon,
-  A as XIcon
+  N as BearIcons,
+  k as CheckIcon,
+  D as ChevronDownIcon,
+  M as ChevronLeftIcon,
+  X as ChevronRightIcon,
+  x as ChevronsLeftIcon,
+  A as ChevronsRightIcon,
+  l as CloseIcon,
+  w as EditIcon,
+  B as XIcon
 };

package/dist/components/JsonViewer/JsonViewer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),S=require("../../utils/cn.cjs"),v=require("../../context/BearProvider.cjs"),A=require("../Typography/Typography.cjs"),I=require("../Button/Button.cjs"),g=require("../Icon/index.cjs"),u=require("./JsonViewer.const.cjs"),T=({name:r,value:s,path:d,depth:h,defaultExpandDepth:y,showDataTypes:j,showArrayIndices:x,onValueClick:c})=>{const[o,b]=i.useState(h<y),{mode:N}=v.useBear(),n=N==="dark"?u.DARK_THEME:u.DEFAULT_THEME,t=i.useMemo(()=>s===null?"null":Array.isArray(s)?"array":typeof s,[s]),p=t==="object"||t==="array",a=p&&Object.keys(s).length===0,f=i.useCallback(()=>{b(l=>!l)},[]),m=i.useCallback(()=>{c==null||c(d,s)},[d,s,c]),w=()=>{switch(t){case"string":return e.jsxs("span",{style:{color:n.string},className:"cursor-pointer hover:underline",onClick:m,children:['"',s,'"']});case"number":return e.jsx("span",{style:{color:n.number},className:"cursor-pointer hover:underline",onClick:m,children:String(s)});case"boolean":return e.jsx("span",{style:{color:n.boolean},className:"cursor-pointer hover:underline",onClick:m,children:String(s)});case"null":return e.jsx("span",{style:{color:n.null},className:"cursor-pointer hover:underline",onClick:m,children:"null"});default:return null}},k=()=>{if(!j)return null;const l=t==="array"?`Array(${s.length})`:t==="object"?"Object":t;return e.jsx("span",{className:"text-[10px] opacity-50 ml-1",children:l})};if(!p)return e.jsxs("div",{className:"flex items-center gap-1 py-0.5",children:[e.jsx("span",{className:"w-4"})," ",(x||typeof r=="string")&&e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{color:n.key},children:typeof r=="string"?`"${r}"`:r}),e.jsx("span",{style:{color:n.punctuation},children:":"})]}),w(),k()]});const B=Object.entries(s),q=t==="array"?"[":"{",E=t==="array"?"]":"}";return e.jsxs("div",{className:"py-0.5",children:[e.jsxs("div",{className:"flex items-center gap-1 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 rounded px-1 -mx-1",onClick:f,children:[e.jsx("span",{className:"w-4 flex items-center justify-center text-gray-400",children:a?null:o?e.jsx(g.BearIcons.ChevronDownIcon,{size:12}):e.jsx(g.BearIcons.ChevronRightIcon,{size:12})}),(x||typeof r=="string")&&r!==""&&e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{color:n.key},children:typeof r=="string"?`"${r}"`:r}),e.jsx("span",{style:{color:n.punctuation},children:":"})]}),e.jsx("span",{style:{color:n.bracket},children:q}),!o&&!a&&e.jsx("span",{className:"text-gray-400 text-xs",children:"..."}),(!o||a)&&e.jsx("span",{style:{color:n.bracket},children:E}),k()]}),o&&!a&&e.jsx("div",{className:"ml-4 border-l border-gray-200 dark:border-gray-700 pl-2",children:B.map(([l,C],F)=>e.jsx(T,{name:t==="array"?F:l,value:C,path:[...d,l],depth:h+1,defaultExpandDepth:y,showDataTypes:j,showArrayIndices:x,onValueClick:c},l))}),o&&!a&&e.jsxs("div",{className:"flex items-center",children:[e.jsx("span",{className:"w-4"}),e.jsx("span",{style:{color:n.bracket},children:E})]})]})},J=({data:r,defaultExpandDepth:s=u.DEFAULT_EXPAND_DEPTH,showDataTypes:d=!1,showArrayIndices:h=!0,showCopyButton:y=!0,rootName:j="root",onValueClick:x,onCopy:c,className:o,testId:b})=>{const{mode:N}=v.useBear(),n=N==="dark"?u.DARK_THEME:u.DEFAULT_THEME,[t,p]=i.useState(!1),a=i.useCallback(async()=>{try{await navigator.clipboard.writeText(JSON.stringify(r,null,2)),p(!0),c==null||c(r),setTimeout(()=>p(!1),2e3)}catch(f){console.error("Failed to copy:",f)}},[r,c]);return e.jsxs("div",{className:S.cn("Bear-JsonViewer","rounded-lg overflow-hidden font-mono text-sm",o),style:{backgroundColor:n.background},"data-testid":b,children:[y&&e.jsxs("div",{className:"flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700",children:[e.jsx(A.Typography,{variant:"caption",className:"opacity-60",children:"JSON"}),e.jsx(I.Button,{variant:"ghost",size:"sm",onClick:a,className:"!py-1 !px-2 !text-xs",children:t?e.jsxs(e.Fragment,{children:[e.jsx(g.BearIcons.CheckIcon,{size:12,className:"mr-1"}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsx(g.BearIcons.CopyIcon,{size:12,className:"mr-1"}),"Copy"]})})]}),e.jsx("div",{className:"p-3 overflow-x-auto",children:e.jsx(T,{name:j||"",value:r,path:[],depth:0,defaultExpandDepth:s,showDataTypes:d,showArrayIndices:h,onValueClick:x})})]})};exports.JsonViewer=J;

package/dist/components/JsonViewer/JsonViewer.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=2,e={background:"var(--bear-bg-secondary, #f5f5f5)",string:"#22c55e",number:"#3b82f6",boolean:"#f59e0b",null:"#ef4444",key:"#ec4899",bracket:"var(--bear-text-secondary, #737373)",punctuation:"var(--bear-text-tertiary, #a3a3a3)"},r={background:"var(--bear-bg-secondary, #262626)",string:"#4ade80",number:"#60a5fa",boolean:"#fbbf24",null:"#f87171",key:"#f472b6",bracket:"var(--bear-text-secondary, #a3a3a3)",punctuation:"var(--bear-text-tertiary, #737373)"};exports.DARK_THEME=r;exports.DEFAULT_EXPAND_DEPTH=a;exports.DEFAULT_THEME=e;

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

@@ -0,0 +1,4 @@
+import { JsonViewerTheme } from './JsonViewer.types';
+export declare const DEFAULT_EXPAND_DEPTH = 2;
+export declare const DEFAULT_THEME: JsonViewerTheme;
+export declare const DARK_THEME: JsonViewerTheme;

package/dist/components/JsonViewer/JsonViewer.const.js

@@ -0,0 +1,24 @@
+const a = 2, e = {
+  background: "var(--bear-bg-secondary, #f5f5f5)",
+  string: "#22c55e",
+  number: "#3b82f6",
+  boolean: "#f59e0b",
+  null: "#ef4444",
+  key: "#ec4899",
+  bracket: "var(--bear-text-secondary, #737373)",
+  punctuation: "var(--bear-text-tertiary, #a3a3a3)"
+}, r = {
+  background: "var(--bear-bg-secondary, #262626)",
+  string: "#4ade80",
+  number: "#60a5fa",
+  boolean: "#fbbf24",
+  null: "#f87171",
+  key: "#f472b6",
+  bracket: "var(--bear-text-secondary, #a3a3a3)",
+  punctuation: "var(--bear-text-tertiary, #737373)"
+};
+export {
+  r as DARK_THEME,
+  a as DEFAULT_EXPAND_DEPTH,
+  e as DEFAULT_THEME
+};

package/dist/components/JsonViewer/JsonViewer.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { JsonViewerProps } from './JsonViewer.types';
+/**
+ * JsonViewer - Pretty-print and explore JSON data
+ *
+ * @example
+ * ```tsx
+ * <JsonViewer
+ *   data={{ name: 'John', age: 30, active: true }}
+ *   defaultExpandDepth={3}
+ *   showDataTypes
+ *   showCopyButton
+ * />
+ * ```
+ */
+export declare const JsonViewer: FC<JsonViewerProps>;
+export default JsonViewer;

package/dist/components/JsonViewer/JsonViewer.js

@@ -0,0 +1,195 @@
+import { jsxs as o, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { useState as j, useCallback as v, useMemo as F } from "react";
+import { cn as I } from "../../utils/cn.js";
+import { useBear as T } from "../../context/BearProvider.js";
+import { Typography as _ } from "../Typography/Typography.js";
+import { Button as H } from "../Button/Button.js";
+import { BearIcons as b } from "../Icon/index.js";
+import { DARK_THEME as B, DEFAULT_THEME as C, DEFAULT_EXPAND_DEPTH as L } from "./JsonViewer.const.js";
+const z = ({
+  name: r,
+  value: t,
+  path: d,
+  depth: h,
+  defaultExpandDepth: y,
+  showDataTypes: u,
+  showArrayIndices: p,
+  onValueClick: c
+}) => {
+  const [l, x] = j(h < y), { mode: N } = T(), n = N === "dark" ? B : C, s = F(() => t === null ? "null" : Array.isArray(t) ? "array" : typeof t, [t]), m = s === "object" || s === "array", a = m && Object.keys(t).length === 0, k = v(() => {
+    x((i) => !i);
+  }, []), f = v(() => {
+    c == null || c(d, t);
+  }, [d, t, c]), A = () => {
+    switch (s) {
+      case "string":
+        return /* @__PURE__ */ o(
+          "span",
+          {
+            style: { color: n.string },
+            className: "cursor-pointer hover:underline",
+            onClick: f,
+            children: [
+              '"',
+              t,
+              '"'
+            ]
+          }
+        );
+      case "number":
+        return /* @__PURE__ */ e(
+          "span",
+          {
+            style: { color: n.number },
+            className: "cursor-pointer hover:underline",
+            onClick: f,
+            children: String(t)
+          }
+        );
+      case "boolean":
+        return /* @__PURE__ */ e(
+          "span",
+          {
+            style: { color: n.boolean },
+            className: "cursor-pointer hover:underline",
+            onClick: f,
+            children: String(t)
+          }
+        );
+      case "null":
+        return /* @__PURE__ */ e(
+          "span",
+          {
+            style: { color: n.null },
+            className: "cursor-pointer hover:underline",
+            onClick: f,
+            children: "null"
+          }
+        );
+      default:
+        return null;
+    }
+  }, E = () => {
+    if (!u) return null;
+    const i = s === "array" ? `Array(${t.length})` : s === "object" ? "Object" : s;
+    return /* @__PURE__ */ e("span", { className: "text-[10px] opacity-50 ml-1", children: i });
+  };
+  if (!m)
+    return /* @__PURE__ */ o("div", { className: "flex items-center gap-1 py-0.5", children: [
+      /* @__PURE__ */ e("span", { className: "w-4" }),
+      " ",
+      (p || typeof r == "string") && /* @__PURE__ */ o(g, { children: [
+        /* @__PURE__ */ e("span", { style: { color: n.key }, children: typeof r == "string" ? `"${r}"` : r }),
+        /* @__PURE__ */ e("span", { style: { color: n.punctuation }, children: ":" })
+      ] }),
+      A(),
+      E()
+    ] });
+  const J = Object.entries(t), O = s === "array" ? "[" : "{", w = s === "array" ? "]" : "}";
+  return /* @__PURE__ */ o("div", { className: "py-0.5", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "flex items-center gap-1 cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 rounded px-1 -mx-1",
+        onClick: k,
+        children: [
+          /* @__PURE__ */ e("span", { className: "w-4 flex items-center justify-center text-gray-400", children: a ? null : l ? /* @__PURE__ */ e(b.ChevronDownIcon, { size: 12 }) : /* @__PURE__ */ e(b.ChevronRightIcon, { size: 12 }) }),
+          (p || typeof r == "string") && r !== "" && /* @__PURE__ */ o(g, { children: [
+            /* @__PURE__ */ e("span", { style: { color: n.key }, children: typeof r == "string" ? `"${r}"` : r }),
+            /* @__PURE__ */ e("span", { style: { color: n.punctuation }, children: ":" })
+          ] }),
+          /* @__PURE__ */ e("span", { style: { color: n.bracket }, children: O }),
+          !l && !a && /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "..." }),
+          (!l || a) && /* @__PURE__ */ e("span", { style: { color: n.bracket }, children: w }),
+          E()
+        ]
+      }
+    ),
+    l && !a && /* @__PURE__ */ e("div", { className: "ml-4 border-l border-gray-200 dark:border-gray-700 pl-2", children: J.map(([i, S], D) => /* @__PURE__ */ e(
+      z,
+      {
+        name: s === "array" ? D : i,
+        value: S,
+        path: [...d, i],
+        depth: h + 1,
+        defaultExpandDepth: y,
+        showDataTypes: u,
+        showArrayIndices: p,
+        onValueClick: c
+      },
+      i
+    )) }),
+    l && !a && /* @__PURE__ */ o("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ e("span", { className: "w-4" }),
+      /* @__PURE__ */ e("span", { style: { color: n.bracket }, children: w })
+    ] })
+  ] });
+}, G = ({
+  data: r,
+  defaultExpandDepth: t = L,
+  showDataTypes: d = !1,
+  showArrayIndices: h = !0,
+  showCopyButton: y = !0,
+  rootName: u = "root",
+  onValueClick: p,
+  onCopy: c,
+  className: l,
+  testId: x
+}) => {
+  const { mode: N } = T(), n = N === "dark" ? B : C, [s, m] = j(!1), a = v(async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(r, null, 2)), m(!0), c == null || c(r), setTimeout(() => m(!1), 2e3);
+    } catch (k) {
+      console.error("Failed to copy:", k);
+    }
+  }, [r, c]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: I(
+        "Bear-JsonViewer",
+        "rounded-lg overflow-hidden font-mono text-sm",
+        l
+      ),
+      style: { backgroundColor: n.background },
+      "data-testid": x,
+      children: [
+        y && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ e(_, { variant: "caption", className: "opacity-60", children: "JSON" }),
+          /* @__PURE__ */ e(
+            H,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: a,
+              className: "!py-1 !px-2 !text-xs",
+              children: s ? /* @__PURE__ */ o(g, { children: [
+                /* @__PURE__ */ e(b.CheckIcon, { size: 12, className: "mr-1" }),
+                "Copied!"
+              ] }) : /* @__PURE__ */ o(g, { children: [
+                /* @__PURE__ */ e(b.CopyIcon, { size: 12, className: "mr-1" }),
+                "Copy"
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { className: "p-3 overflow-x-auto", children: /* @__PURE__ */ e(
+          z,
+          {
+            name: u || "",
+            value: r,
+            path: [],
+            depth: 0,
+            defaultExpandDepth: t,
+            showDataTypes: d,
+            showArrayIndices: h,
+            onValueClick: p
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  G as JsonViewer
+};

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

@@ -0,0 +1,54 @@
+/**
+ * JsonViewer component types
+ */
+export interface JsonViewerProps {
+    /** JSON data to display */
+    data: unknown;
+    /** Number of levels to expand by default (default: 2) */
+    defaultExpandDepth?: number;
+    /** Expand all nodes */
+    expandAll?: boolean;
+    /** Collapse all nodes */
+    collapseAll?: boolean;
+    /** Show data types */
+    showDataTypes?: boolean;
+    /** Show array indices */
+    showArrayIndices?: boolean;
+    /** Show copy button */
+    showCopyButton?: boolean;
+    /** Enable search */
+    enableSearch?: boolean;
+    /** Custom theme colors */
+    theme?: JsonViewerTheme;
+    /** Root name (default: 'root') */
+    rootName?: string | false;
+    /** Callback when a value is clicked */
+    onValueClick?: (path: string[], value: unknown) => void;
+    /** Callback when copied */
+    onCopy?: (value: unknown) => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+export interface JsonViewerTheme {
+    background?: string;
+    text?: string;
+    string?: string;
+    number?: string;
+    boolean?: string;
+    null?: string;
+    key?: string;
+    bracket?: string;
+    punctuation?: string;
+}
+export interface JsonNodeProps {
+    name: string | number;
+    value: unknown;
+    path: string[];
+    depth: number;
+    defaultExpandDepth: number;
+    showDataTypes: boolean;
+    showArrayIndices: boolean;
+    onValueClick?: (path: string[], value: unknown) => void;
+}

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

@@ -0,0 +1,2 @@
+export { JsonViewer } from './JsonViewer';
+export type { JsonViewerProps, JsonViewerTheme } from './JsonViewer.types';

package/dist/components/Kanban/Kanban.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),K=require("react"),m=require("../../utils/cn.cjs");require("../../context/BearProvider.cjs");const P=require("../../hooks/useDragDrop/useDragDrop.cjs"),S="bear-kanban",$=({columns:n,onColumnsChange:o,onCardMove:p,renderCard:h,renderColumnHeader:u,disabled:y=!1,className:v})=>{const w=K.useCallback((r,e,i,b,d)=>{const l=n.find(a=>a.id===r),s=n.find(a=>a.id===e);if(!l||!s)return;const f=n.map(a=>{if(a.id===r){const c=a.cards.filter((x,g)=>g!==i);return{...a,cards:c}}if(a.id===e){const c=r===e&&i<b?b-1:b,x=[...a.cards];return x.splice(Math.max(0,c),0,d),{...a,cards:x}}return a});o==null||o(f),p==null||p(d.id,r,e,i,b)},[n,o,p]),{getDragProps:N,getDropProps:j,isDragging:_,draggedId:z,dragOverId:k}=P.useDragDrop({disabled:y,dragType:S,onDrop:(r,e,i,b,d)=>{var D;const l=String(r),s=String(e),f=l.split("-")[0],a=parseInt(l.split("-")[1],10)||0,c=s.endsWith("-col")?s.replace("-col",""):s.split("-")[0],x=s.endsWith("-col")?((D=n.find(q=>q.id===c))==null?void 0:D.cards.length)??0:parseInt(s.split("-")[1],10),g=d;g!=null&&g.id&&w(f,c,a,x,g)}});return t.jsx("div",{className:m.cn("Bear-Kanban bear-flex bear-gap-4 bear-overflow-x-auto bear-pb-4",y&&"bear-opacity-50 bear-pointer-events-none",v),children:n.map(r=>t.jsxs("div",{...j(`${r.id}-col`,r,0),className:m.cn("Bear-Kanban__column bear-flex-shrink-0 bear-w-72 bear-flex bear-flex-col bear-rounded-lg bear-bg-gray-100 dark:bear-bg-zinc-800/80 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transition-colors",k===`${r.id}-col`&&"bear-border-bear-500 bear-bg-bear-500/5"),children:[t.jsx("div",{className:"bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",children:u?u(r):t.jsx("h3",{className:"bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:r.title})}),t.jsx("div",{className:"bear-flex-1 bear-flex bear-flex-col bear-gap-2 bear-p-3 bear-min-h-[120px]",children:r.cards.map((e,i)=>{const b=`${r.id}-${i}`,d=_&&z===b;return t.jsx("div",{...j(b,e,i),...N(b,e,i),className:m.cn("Bear-Kanban__card bear-rounded-lg bear-bg-white dark:bear-bg-zinc-700/80 bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-p-3 bear-cursor-grab active:bear-cursor-grabbing bear-transition-all bear-shadow-sm",d&&"bear-opacity-50 bear-scale-95",k===b&&"bear-border-bear-500 bear-bg-bear-500/10"),children:h?h(e,r.id):t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"bear-font-medium bear-text-gray-900 dark:bear-text-white",children:e.title}),e.description&&t.jsx("div",{className:"bear-text-sm bear-text-gray-600 dark:bear-text-zinc-400 bear-mt-1",children:e.description}),e.meta&&t.jsx("div",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mt-2",children:e.meta})]})},e.id)})})]},r.id))})};exports.Kanban=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),K=require("react"),m=require("../../utils/cn.cjs");require("../../context/BearProvider.cjs");const P=require("../../hooks/useDragDrop/useDragDrop.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const S="bear-kanban",$=({columns:n,onColumnsChange:o,onCardMove:p,renderCard:h,renderColumnHeader:u,disabled:y=!1,className:v})=>{const w=K.useCallback((r,e,i,b,d)=>{const l=n.find(a=>a.id===r),s=n.find(a=>a.id===e);if(!l||!s)return;const f=n.map(a=>{if(a.id===r){const c=a.cards.filter((x,g)=>g!==i);return{...a,cards:c}}if(a.id===e){const c=r===e&&i<b?b-1:b,x=[...a.cards];return x.splice(Math.max(0,c),0,d),{...a,cards:x}}return a});o==null||o(f),p==null||p(d.id,r,e,i,b)},[n,o,p]),{getDragProps:N,getDropProps:j,isDragging:_,draggedId:z,dragOverId:k}=P.useDragDrop({disabled:y,dragType:S,onDrop:(r,e,i,b,d)=>{var D;const l=String(r),s=String(e),f=l.split("-")[0],a=parseInt(l.split("-")[1],10)||0,c=s.endsWith("-col")?s.replace("-col",""):s.split("-")[0],x=s.endsWith("-col")?((D=n.find(q=>q.id===c))==null?void 0:D.cards.length)??0:parseInt(s.split("-")[1],10),g=d;g!=null&&g.id&&w(f,c,a,x,g)}});return t.jsx("div",{className:m.cn("Bear-Kanban bear-flex bear-gap-4 bear-overflow-x-auto bear-pb-4",y&&"bear-opacity-50 bear-pointer-events-none",v),children:n.map(r=>t.jsxs("div",{...j(`${r.id}-col`,r,0),className:m.cn("Bear-Kanban__column bear-flex-shrink-0 bear-w-72 bear-flex bear-flex-col bear-rounded-lg bear-bg-gray-100 dark:bear-bg-zinc-800/80 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transition-colors",k===`${r.id}-col`&&"bear-border-bear-500 bear-bg-bear-500/5"),children:[t.jsx("div",{className:"bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",children:u?u(r):t.jsx("h3",{className:"bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white",children:r.title})}),t.jsx("div",{className:"bear-flex-1 bear-flex bear-flex-col bear-gap-2 bear-p-3 bear-min-h-[120px]",children:r.cards.map((e,i)=>{const b=`${r.id}-${i}`,d=_&&z===b;return t.jsx("div",{...j(b,e,i),...N(b,e,i),className:m.cn("Bear-Kanban__card bear-rounded-lg bear-bg-white dark:bear-bg-zinc-700/80 bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-p-3 bear-cursor-grab active:bear-cursor-grabbing bear-transition-all bear-shadow-sm",d&&"bear-opacity-50 bear-scale-95",k===b&&"bear-border-bear-500 bear-bg-bear-500/10"),children:h?h(e,r.id):t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"bear-font-medium bear-text-gray-900 dark:bear-text-white",children:e.title}),e.description&&t.jsx("div",{className:"bear-text-sm bear-text-gray-600 dark:bear-text-zinc-400 bear-mt-1",children:e.description}),e.meta&&t.jsx("div",{className:"bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-mt-2",children:e.meta})]})},e.id)})})]},r.id))})};exports.Kanban=$;

package/dist/components/Kanban/Kanban.js

@@ -3,9 +3,10 @@ import { useCallback as I } from "react";
 import { cn as f } from "../../utils/cn.js";
 import "../../context/BearProvider.js";
 import { useDragDrop as P } from "../../hooks/useDragDrop/useDragDrop.js";
-const S = "bear-kanban", O = ({
+import "../../hooks/useBearComponent/useBearComponent.js";
+const S = "bear-kanban", R = ({
   columns: d,
-  onColumnsChange: o,
+  onColumnsChange: g,
   onCardMove: l,
   renderCard: h,
   renderColumnHeader: k,
@@ -13,30 +14,30 @@ const S = "bear-kanban", O = ({
   className: _
 }) => {
   const z = I(
-    (r, e, t, b, n) => {
+    (r, e, b, t, n) => {
       const x = d.find((a) => a.id === r), s = d.find((a) => a.id === e);
       if (!x || !s) return;
       const m = d.map((a) => {
         if (a.id === r) {
-          const c = a.cards.filter((g, p) => p !== t);
+          const c = a.cards.filter((o, p) => p !== b);
           return { ...a, cards: c };
         }
         if (a.id === e) {
-          const c = r === e && t < b ? b - 1 : b, g = [...a.cards];
-          return g.splice(Math.max(0, c), 0, n), { ...a, cards: g };
+          const c = r === e && b < t ? t - 1 : t, o = [...a.cards];
+          return o.splice(Math.max(0, c), 0, n), { ...a, cards: o };
         }
         return a;
       });
-      o == null || o(m), l == null || l(n.id, r, e, t, b);
+      g == null || g(m), l == null || l(n.id, r, e, b, t);
     },
-    [d, o, l]
+    [d, g, l]
   ), { getDragProps: u, getDropProps: w, isDragging: K, draggedId: $, dragOverId: N } = P({
     disabled: y,
     dragType: S,
-    onDrop: (r, e, t, b, n) => {
+    onDrop: (r, e, b, t, n) => {
       var v;
-      const x = String(r), s = String(e), m = x.split("-")[0], a = parseInt(x.split("-")[1], 10) || 0, c = s.endsWith("-col") ? s.replace("-col", "") : s.split("-")[0], g = s.endsWith("-col") ? ((v = d.find((j) => j.id === c)) == null ? void 0 : v.cards.length) ?? 0 : parseInt(s.split("-")[1], 10), p = n;
-      p != null && p.id && z(m, c, a, g, p);
+      const x = String(r), s = String(e), m = x.split("-")[0], a = parseInt(x.split("-")[1], 10) || 0, c = s.endsWith("-col") ? s.replace("-col", "") : s.split("-")[0], o = s.endsWith("-col") ? ((v = d.find((j) => j.id === c)) == null ? void 0 : v.cards.length) ?? 0 : parseInt(s.split("-")[1], 10), p = n;
+      p != null && p.id && z(m, c, a, o, p);
     }
   });
   return /* @__PURE__ */ i(
@@ -57,17 +58,17 @@ const S = "bear-kanban", O = ({
           ),
           children: [
             /* @__PURE__ */ i("div", { className: "bear-px-4 bear-py-3 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", children: k ? k(r) : /* @__PURE__ */ i("h3", { className: "bear-text-sm bear-font-semibold bear-text-gray-900 dark:bear-text-white", children: r.title }) }),
-            /* @__PURE__ */ i("div", { className: "bear-flex-1 bear-flex bear-flex-col bear-gap-2 bear-p-3 bear-min-h-[120px]", children: r.cards.map((e, t) => {
-              const b = `${r.id}-${t}`, n = K && $ === b;
+            /* @__PURE__ */ i("div", { className: "bear-flex-1 bear-flex bear-flex-col bear-gap-2 bear-p-3 bear-min-h-[120px]", children: r.cards.map((e, b) => {
+              const t = `${r.id}-${b}`, n = K && $ === t;
               return /* @__PURE__ */ i(
                 "div",
                 {
-                  ...w(b, e, t),
-                  ...u(b, e, t),
+                  ...w(t, e, b),
+                  ...u(t, e, b),
                   className: f(
                     "Bear-Kanban__card bear-rounded-lg bear-bg-white dark:bear-bg-zinc-700/80 bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-p-3 bear-cursor-grab active:bear-cursor-grabbing bear-transition-all bear-shadow-sm",
                     n && "bear-opacity-50 bear-scale-95",
-                    N === b && "bear-border-bear-500 bear-bg-bear-500/10"
+                    N === t && "bear-border-bear-500 bear-bg-bear-500/10"
                   ),
                   children: h ? h(e, r.id) : /* @__PURE__ */ D(B, { children: [
                     /* @__PURE__ */ i("div", { className: "bear-font-medium bear-text-gray-900 dark:bear-text-white", children: e.title }),
@@ -86,5 +87,5 @@ const S = "bear-kanban", O = ({
   );
 };
 export {
-  O as Kanban
+  R as Kanban
 };

package/dist/components/Kbd/Kbd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),x={cmd:"⌘",command:"⌘",ctrl:"⌃",control:"⌃",alt:"⌥",option:"⌥",shift:"⇧",enter:"↵",return:"↵",tab:"⇥",backspace:"⌫",delete:"⌦",escape:"⎋",esc:"⎋",up:"↑",down:"↓",left:"←",right:"→",space:"␣"},u=({children:l,keys:r,size:b="md",variant:s="default",className:c})=>{const i={sm:"bear-text-xs bear-px-1.5 bear-py-0.5 bear-min-w-[18px]",md:"bear-text-sm bear-px-2 bear-py-1 bear-min-w-[24px]",lg:"bear-text-base bear-px-2.5 bear-py-1.5 bear-min-w-[30px]"},o={default:"bear-bg-zinc-700 bear-border-zinc-600 bear-shadow-[0_1px_0_1px_rgba(0,0,0,0.3)]",outline:"bear-bg-transparent bear-border-zinc-500",ghost:"bear-bg-zinc-800/50 bear-border-transparent"},d=(a,n,m)=>{const p=x[a.toLowerCase()]||a.toUpperCase();return e.jsxs("span",{className:"bear-inline-flex bear-items-center",children:[e.jsx("kbd",{className:t.cn("bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-border bear-font-mono bear-font-medium bear-text-zinc-300",i[b],o[s]),children:p}),!m&&e.jsx("span",{className:"bear-mx-1 bear-text-zinc-500",children:"+"})]},n)};return r&&r.length>0?e.jsx("span",{className:t.cn("bear-inline-flex bear-items-center",c),children:r.map((a,n)=>d(a,n,n===r.length-1))}):e.jsx("kbd",{className:t.cn("bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-border bear-font-mono bear-font-medium bear-text-zinc-300",i[b],o[s],c),children:l})};exports.Kbd=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const x={cmd:"⌘",command:"⌘",ctrl:"⌃",control:"⌃",alt:"⌥",option:"⌥",shift:"⇧",enter:"↵",return:"↵",tab:"⇥",backspace:"⌫",delete:"⌦",escape:"⎋",esc:"⎋",up:"↑",down:"↓",left:"←",right:"→",space:"␣"},u=({children:l,keys:r,size:b="md",variant:s="default",className:c})=>{const i={sm:"bear-text-xs bear-px-1.5 bear-py-0.5 bear-min-w-[18px]",md:"bear-text-sm bear-px-2 bear-py-1 bear-min-w-[24px]",lg:"bear-text-base bear-px-2.5 bear-py-1.5 bear-min-w-[30px]"},o={default:"bear-bg-zinc-700 bear-border-zinc-600 bear-shadow-[0_1px_0_1px_rgba(0,0,0,0.3)]",outline:"bear-bg-transparent bear-border-zinc-500",ghost:"bear-bg-zinc-800/50 bear-border-transparent"},d=(a,n,m)=>{const p=x[a.toLowerCase()]||a.toUpperCase();return e.jsxs("span",{className:"bear-inline-flex bear-items-center",children:[e.jsx("kbd",{className:t.cn("bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-border bear-font-mono bear-font-medium bear-text-zinc-300",i[b],o[s]),children:p}),!m&&e.jsx("span",{className:"bear-mx-1 bear-text-zinc-500",children:"+"})]},n)};return r&&r.length>0?e.jsx("span",{className:t.cn("bear-inline-flex bear-items-center",c),children:r.map((a,n)=>d(a,n,n===r.length-1))}):e.jsx("kbd",{className:t.cn("bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-border bear-font-mono bear-font-medium bear-text-zinc-300",i[b],o[s],c),children:l})};exports.Kbd=u;