@forgedevstack/bear 1.0.9 → 1.1.1

package/README.md

@@ -62,6 +62,7 @@ function App() {
 - `Container` - Responsive container with max-width constraints
 - `Flex` - Flexible box layout component
 - `Grid` / `GridItem` - CSS Grid layout system
+- `ResizablePanel` - Two-pane resizable layout with draggable divider (horizontal/vertical)
 
 ### UI Components
 
@@ -70,7 +71,7 @@ function App() {
 - `Badge` - Status indicators and labels
 - `Paper` - Elevated surface component
 - `Divider` - Visual separator
-- `Typography` - Text styling component
+- `Typography` - Text styling with gradient text and typewriter effect
 - `Link` - Styled link component
 
 ### Form Components
@@ -120,6 +121,7 @@ function App() {
 - `Avatar` / `AvatarGroup` - User avatar display
 - `Chip` - Compact element for input, attribute, or action
 - `TreeView` - Hierarchical tree structure
+- `FileTree` - File/folder tree with selection and expand/collapse
 - `Timeline` - Timeline component
 - `Statistic` - Statistical display
 - `EmptyState` - Empty state placeholder
@@ -153,8 +155,16 @@ import { Button } from '@forgedevstack/bear';
 <Button variant="secondary">Secondary</Button>
 <Button variant="outline">Outline</Button>
 <Button variant="ghost">Ghost</Button>
+
+// With icon (icon size matches text)
+<Button variant="primary" leftIcon={<PlayIcon />}>View Demos</Button>
+
+// Button label using Typography variant (h1, h2, body1, etc.)
+<Button variant="primary" textVariant="subtitle1">Heading-style label</Button>
 ```
 
+**Custom variants** (via `BearProvider`): pass `customVariants={{ myBrand: { bg: '#...', text: '#fff' } }}` and use `<Button variant="myBrand">`. Use `customTypography` for custom text styles and set `textVariant` on Button to use them.
+
 ### Card
 
 ```tsx

package/dist/components/Button/Button.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),k=require("../../utils/cn.cjs"),te=require("../Spinner/Spinner.cjs"),re=require("../Typography/Typography.cjs"),ne=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const oe=require("../../context/BearProvider.cjs"),b=require("./Button.constants.cjs"),q=m=>m in b.BUTTON_VARIANT,V=r.forwardRef((m,i)=>{var j,A;const{variant:e="primary",size:C="md",loading:d=!1,fullWidth:w=!1,icon:f,iconPosition:N="left",leftIcon:M,rightIcon:P,spotlight:l=!1,spotlightColor:z="rgba(255, 255, 255, 0.35)",spotlightSize:g=150,disabled:E,className:U,children:O,testId:D,bis:L,style:F,onMouseMove:h,onMouseEnter:p,onMouseLeave:B,...H}=m,X=E||d,y=ne.useBearStyles(L,F),S=M??(f&&N==="left"?f:void 0),I=P??(f&&N==="right"?f:void 0),s=r.useContext(oe.BearContext),x=((A=(j=s==null?void 0:s.components)==null?void 0:j.Button)==null?void 0:A.root)||{},T=(s==null?void 0:s.customVariants)||{},v=!q(e)&&e in T,n=v?T[e]:null,c=r.useRef(null),[R,_]=r.useState({x:-1e3,y:-1e3}),[Y,$]=r.useState(!1),W=r.useCallback(t=>{if(l&&c.current){const u=c.current.getBoundingClientRect(),Q=t.clientX-u.left,ee=t.clientY-u.top;_({x:Q,y:ee})}h==null||h(t)},[l,h]),Z=r.useCallback(t=>{if(l&&($(!0),c.current)){const u=c.current.getBoundingClientRect();_({x:t.clientX-u.left,y:t.clientY-u.top})}p==null||p(t)},[l,p]),G=r.useCallback(t=>{$(!1),_({x:-1e3,y:-1e3}),B==null||B(t)},[B]),a=b.VARIANT_DEFAULTS[e]||b.VARIANT_DEFAULTS.primary,J=r.useMemo(()=>v&&n?{backgroundColor:`var(--bear-${e}-bg, ${n.bg})`,color:n.text||"#ffffff",borderColor:n.border,"--bear-ring-color":n.ring||n.bg,...x,...y}:{backgroundColor:`var(--bear-btn-${e}-bg, ${a.bg})`,color:e==="outline"||e==="ghost"?`var(--bear-btn-${e}-text, ${a.text||"inherit"})`:"white",borderColor:e==="outline"?`var(--bear-btn-${e}-border, ${a.border||a.bg})`:void 0,"--bear-ring-color":`var(--bear-btn-${e}-ring, ${a.ring})`,...x,...y},[e,a,x,y,v,n]),K=r.useCallback(t=>{c.current=t,typeof i=="function"?i(t):i&&(i.current=t)},[i]);return o.jsxs("button",{ref:K,disabled:X,style:J,className:k.cn("Bear-Button","bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-lg bear-transition-all bear-duration-200 bear-outline-none bear-relative bear-overflow-hidden",b.BUTTON_SIZE[C],q(e)?b.BUTTON_VARIANT[e]:"bear-btn-custom bear-text-white focus:bear-ring-2 focus:bear-ring-offset-2 disabled:bear-opacity-50 disabled:bear-cursor-not-allowed hover:bear-brightness-110 active:bear-brightness-95",w&&"bear-w-full",d&&"bear-cursor-wait",U),"data-testid":D,onMouseMove:W,onMouseEnter:Z,onMouseLeave:G,...H,children:[l&&o.jsx("span",{className:"Bear-Button__spotlight","aria-hidden":"true",style:{position:"absolute",pointerEvents:"none",left:0,top:0,width:g,height:g,borderRadius:"50%",background:`radial-gradient(circle at center, ${z} 0%, transparent 70%)`,opacity:Y?1:0,transform:`translate(${R.x-g/2}px, ${R.y-g/2}px)`,transition:"opacity 0.15s ease-out",zIndex:1,mixBlendMode:"overlay"}}),d&&o.jsx(te.Spinner,{size:C==="xs"?"xs":"sm",className:"Bear-Button__spinner bear-absolute"}),o.jsxs("span",{className:k.cn("Bear-Button__content bear-inline-flex bear-items-center bear-gap-inherit bear-relative bear-z-10",d&&"bear-invisible"),children:[S&&o.jsx("span",{className:"Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0",children:S}),o.jsx(re.Typography,{variant:"inherit",className:"Bear-Button__text",children:O}),I&&o.jsx("span",{className:"Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0",children:I})]})]})});V.displayName="Button";exports.Button=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),r=require("react"),A=require("../../utils/cn.cjs"),re=require("../Spinner/Spinner.cjs"),ne=require("../Typography/Typography.cjs"),se=require("../../hooks/useBearStyles.cjs");require("../../hooks/useBearComponent/useBearComponent.cjs");const oe=require("../../context/BearProvider.cjs"),b=require("./Button.constants.cjs"),V=B=>B in b.BUTTON_VARIANT,k=r.forwardRef((B,i)=>{var w,j;const{variant:e="primary",size:C="md",loading:d=!1,fullWidth:q=!1,icon:g,iconPosition:N="left",leftIcon:M,rightIcon:P,textVariant:z="inherit",spotlight:l=!1,spotlightColor:E="rgba(255, 255, 255, 0.35)",spotlightSize:f=150,disabled:U,className:O,children:D,testId:L,bis:F,style:H,onMouseMove:h,onMouseEnter:m,onMouseLeave:p,...X}=B,Y=U||d,v=se.useBearStyles(F,H),S=M??(g&&N==="left"?g:void 0),I=P??(g&&N==="right"?g:void 0),o=r.useContext(oe.BearContext),y=((j=(w=o==null?void 0:o.components)==null?void 0:w.Button)==null?void 0:j.root)||{},T=(o==null?void 0:o.customVariants)||{},x=!V(e)&&e in T,n=x?T[e]:null,c=r.useRef(null),[R,_]=r.useState({x:-1e3,y:-1e3}),[W,$]=r.useState(!1),Z=r.useCallback(t=>{if(l&&c.current){const u=c.current.getBoundingClientRect(),ee=t.clientX-u.left,te=t.clientY-u.top;_({x:ee,y:te})}h==null||h(t)},[l,h]),G=r.useCallback(t=>{if(l&&($(!0),c.current)){const u=c.current.getBoundingClientRect();_({x:t.clientX-u.left,y:t.clientY-u.top})}m==null||m(t)},[l,m]),J=r.useCallback(t=>{$(!1),_({x:-1e3,y:-1e3}),p==null||p(t)},[p]),a=b.VARIANT_DEFAULTS[e]||b.VARIANT_DEFAULTS.primary,K=r.useMemo(()=>x&&n?{backgroundColor:`var(--bear-${e}-bg, ${n.bg})`,color:n.text||"#ffffff",borderColor:n.border,"--bear-ring-color":n.ring||n.bg,...y,...v}:{backgroundColor:`var(--bear-btn-${e}-bg, ${a.bg})`,color:e==="outline"||e==="ghost"?`var(--bear-btn-${e}-text, ${a.text||"inherit"})`:"white",borderColor:e==="outline"?`var(--bear-btn-${e}-border, ${a.border||a.bg})`:void 0,"--bear-ring-color":`var(--bear-btn-${e}-ring, ${a.ring})`,...y,...v},[e,a,y,v,x,n]),Q=r.useCallback(t=>{c.current=t,typeof i=="function"?i(t):i&&(i.current=t)},[i]);return s.jsxs("button",{ref:Q,disabled:Y,style:K,className:A.cn("Bear-Button","bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-lg bear-transition-all bear-duration-200 bear-outline-none bear-relative bear-overflow-hidden",b.BUTTON_SIZE[C],V(e)?b.BUTTON_VARIANT[e]:"bear-btn-custom bear-text-white focus:bear-ring-2 focus:bear-ring-offset-2 disabled:bear-opacity-50 disabled:bear-cursor-not-allowed hover:bear-brightness-110 active:bear-brightness-95",q&&"bear-w-full",d&&"bear-cursor-wait",O),"data-testid":L,onMouseMove:Z,onMouseEnter:G,onMouseLeave:J,...X,children:[l&&s.jsx("span",{className:"Bear-Button__spotlight","aria-hidden":"true",style:{position:"absolute",pointerEvents:"none",left:0,top:0,width:f,height:f,borderRadius:"50%",background:`radial-gradient(circle at center, ${E} 0%, transparent 70%)`,opacity:W?1:0,transform:`translate(${R.x-f/2}px, ${R.y-f/2}px)`,transition:"opacity 0.15s ease-out",zIndex:1,mixBlendMode:"overlay"}}),d&&s.jsx(re.Spinner,{size:C==="xs"?"xs":"sm",className:"Bear-Button__spinner bear-absolute"}),s.jsxs("span",{className:A.cn("Bear-Button__content bear-inline-flex bear-items-center bear-gap-inherit bear-relative bear-z-10",d&&"bear-invisible"),children:[S&&s.jsx("span",{className:"Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0 [&_svg]:bear-w-[1em] [&_svg]:bear-h-[1em] [&_svg]:bear-min-w-[1em]",children:S}),s.jsx(ne.Typography,{variant:z,className:"Bear-Button__text",children:D}),I&&s.jsx("span",{className:"Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0 [&_svg]:bear-w-[1em] [&_svg]:bear-h-[1em] [&_svg]:bear-min-w-[1em]",children:I})]})]})});k.displayName="Button";exports.Button=k;

package/dist/components/Button/Button.js

@@ -1,92 +1,93 @@
 import { jsxs as V, jsx as c } from "react/jsx-runtime";
-import { forwardRef as ne, useContext as oe, useRef as ae, useState as k, useCallback as g, useMemo as ie } from "react";
+import { forwardRef as oe, useContext as ae, useRef as ie, useState as k, useCallback as p, useMemo as se } from "react";
 import { cn as M } from "../../utils/cn.js";
-import { Spinner as se } from "../Spinner/Spinner.js";
-import { Typography as le } from "../Typography/Typography.js";
-import { useBearStyles as ce } from "../../hooks/useBearStyles.js";
+import { Spinner as le } from "../Spinner/Spinner.js";
+import { Typography as ce } from "../Typography/Typography.js";
+import { useBearStyles as be } from "../../hooks/useBearStyles.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
-import { BearContext as be } from "../../context/BearProvider.js";
-import { VARIANT_DEFAULTS as z, BUTTON_VARIANT as P, BUTTON_SIZE as ue } from "./Button.constants.js";
-const A = (h) => h in P, de = ne(
+import { BearContext as ue } from "../../context/BearProvider.js";
+import { VARIANT_DEFAULTS as z, BUTTON_VARIANT as P, BUTTON_SIZE as de } from "./Button.constants.js";
+const A = (h) => h in P, me = oe(
   (h, a) => {
-    var w, T;
+    var R, T;
     const {
       variant: e = "primary",
-      size: _ = "md",
+      size: x = "md",
       loading: b = !1,
       fullWidth: E = !1,
       icon: u,
       iconPosition: C = "left",
       leftIcon: j,
       rightIcon: U,
+      textVariant: D = "inherit",
       spotlight: i = !1,
-      spotlightColor: D = "rgba(255, 255, 255, 0.35)",
+      spotlightColor: H = "rgba(255, 255, 255, 0.35)",
       spotlightSize: d = 150,
-      disabled: H,
-      className: L,
-      children: O,
-      testId: X,
-      bis: Y,
-      style: F,
-      onMouseMove: f,
-      onMouseEnter: m,
-      onMouseLeave: p,
-      ...W
-    } = h, Z = H || b, B = ce(Y, F), I = j ?? (u && C === "left" ? u : void 0), N = U ?? (u && C === "right" ? u : void 0), n = oe(be), y = ((T = (w = n == null ? void 0 : n.components) == null ? void 0 : w.Button) == null ? void 0 : T.root) || {}, $ = (n == null ? void 0 : n.customVariants) || {}, v = !A(e) && e in $, r = v ? $[e] : null, s = ae(null), [S, x] = k({ x: -1e3, y: -1e3 }), [q, R] = k(!1), G = g((t) => {
+      disabled: L,
+      className: O,
+      children: X,
+      testId: Y,
+      bis: F,
+      style: W,
+      onMouseMove: m,
+      onMouseEnter: f,
+      onMouseLeave: g,
+      ...Z
+    } = h, q = L || b, v = be(F, W), I = j ?? (u && C === "left" ? u : void 0), N = U ?? (u && C === "right" ? u : void 0), n = ae(ue), B = ((T = (R = n == null ? void 0 : n.components) == null ? void 0 : R.Button) == null ? void 0 : T.root) || {}, $ = (n == null ? void 0 : n.customVariants) || {}, y = !A(e) && e in $, r = y ? $[e] : null, s = ie(null), [w, _] = k({ x: -1e3, y: -1e3 }), [G, S] = k(!1), J = p((t) => {
       if (i && s.current) {
-        const l = s.current.getBoundingClientRect(), te = t.clientX - l.left, re = t.clientY - l.top;
-        x({ x: te, y: re });
+        const l = s.current.getBoundingClientRect(), re = t.clientX - l.left, ne = t.clientY - l.top;
+        _({ x: re, y: ne });
       }
-      f == null || f(t);
-    }, [i, f]), J = g((t) => {
-      if (i && (R(!0), s.current)) {
+      m == null || m(t);
+    }, [i, m]), K = p((t) => {
+      if (i && (S(!0), s.current)) {
         const l = s.current.getBoundingClientRect();
-        x({
+        _({
           x: t.clientX - l.left,
           y: t.clientY - l.top
         });
       }
-      m == null || m(t);
-    }, [i, m]), K = g((t) => {
-      R(!1), x({ x: -1e3, y: -1e3 }), p == null || p(t);
-    }, [p]), o = z[e] || z.primary, Q = ie(() => v && r ? {
+      f == null || f(t);
+    }, [i, f]), Q = p((t) => {
+      S(!1), _({ x: -1e3, y: -1e3 }), g == null || g(t);
+    }, [g]), o = z[e] || z.primary, ee = se(() => y && r ? {
       backgroundColor: `var(--bear-${e}-bg, ${r.bg})`,
       color: r.text || "#ffffff",
       borderColor: r.border,
       "--bear-ring-color": r.ring || r.bg,
-      ...y,
-      ...B
+      ...B,
+      ...v
     } : {
       backgroundColor: `var(--bear-btn-${e}-bg, ${o.bg})`,
       color: e === "outline" || e === "ghost" ? `var(--bear-btn-${e}-text, ${o.text || "inherit"})` : "white",
       borderColor: e === "outline" ? `var(--bear-btn-${e}-border, ${o.border || o.bg})` : void 0,
       "--bear-ring-color": `var(--bear-btn-${e}-ring, ${o.ring})`,
-      ...y,
-      ...B
-    }, [e, o, y, B, v, r]), ee = g((t) => {
+      ...B,
+      ...v
+    }, [e, o, B, v, y, r]), te = p((t) => {
       s.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
     }, [a]);
     return /* @__PURE__ */ V(
       "button",
       {
-        ref: ee,
-        disabled: Z,
-        style: Q,
+        ref: te,
+        disabled: q,
+        style: ee,
         className: M(
           "Bear-Button",
           "bear-inline-flex bear-items-center bear-justify-center bear-font-medium bear-rounded-lg bear-transition-all bear-duration-200 bear-outline-none bear-relative bear-overflow-hidden",
-          ue[_],
+          de[x],
           // Use built-in variant classes or custom variant base classes
           A(e) ? P[e] : "bear-btn-custom bear-text-white focus:bear-ring-2 focus:bear-ring-offset-2 disabled:bear-opacity-50 disabled:bear-cursor-not-allowed hover:bear-brightness-110 active:bear-brightness-95",
           E && "bear-w-full",
           b && "bear-cursor-wait",
-          L
+          O
         ),
-        "data-testid": X,
-        onMouseMove: G,
-        onMouseEnter: J,
-        onMouseLeave: K,
-        ...W,
+        "data-testid": Y,
+        onMouseMove: J,
+        onMouseEnter: K,
+        onMouseLeave: Q,
+        ...Z,
         children: [
           i && /* @__PURE__ */ c(
             "span",
@@ -101,16 +102,16 @@ const A = (h) => h in P, de = ne(
                 width: d,
                 height: d,
                 borderRadius: "50%",
-                background: `radial-gradient(circle at center, ${D} 0%, transparent 70%)`,
-                opacity: q ? 1 : 0,
-                transform: `translate(${S.x - d / 2}px, ${S.y - d / 2}px)`,
+                background: `radial-gradient(circle at center, ${H} 0%, transparent 70%)`,
+                opacity: G ? 1 : 0,
+                transform: `translate(${w.x - d / 2}px, ${w.y - d / 2}px)`,
                 transition: "opacity 0.15s ease-out",
                 zIndex: 1,
                 mixBlendMode: "overlay"
               }
             }
           ),
-          b && /* @__PURE__ */ c(se, { size: _ === "xs" ? "xs" : "sm", className: "Bear-Button__spinner bear-absolute" }),
+          b && /* @__PURE__ */ c(le, { size: x === "xs" ? "xs" : "sm", className: "Bear-Button__spinner bear-absolute" }),
           /* @__PURE__ */ V(
             "span",
             {
@@ -119,9 +120,9 @@ const A = (h) => h in P, de = ne(
                 b && "bear-invisible"
               ),
               children: [
-                I && /* @__PURE__ */ c("span", { className: "Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0", children: I }),
-                /* @__PURE__ */ c(le, { variant: "inherit", className: "Bear-Button__text", children: O }),
-                N && /* @__PURE__ */ c("span", { className: "Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0", children: N })
+                I && /* @__PURE__ */ c("span", { className: "Bear-Button__icon Bear-Button__icon--left bear-inline-flex bear-shrink-0 [&_svg]:bear-w-[1em] [&_svg]:bear-h-[1em] [&_svg]:bear-min-w-[1em]", children: I }),
+                /* @__PURE__ */ c(ce, { variant: D, className: "Bear-Button__text", children: X }),
+                N && /* @__PURE__ */ c("span", { className: "Bear-Button__icon Bear-Button__icon--right bear-inline-flex bear-shrink-0 [&_svg]:bear-w-[1em] [&_svg]:bear-h-[1em] [&_svg]:bear-min-w-[1em]", children: N })
               ]
             }
           )
@@ -130,7 +131,7 @@ const A = (h) => h in P, de = ne(
     );
   }
 );
-de.displayName = "Button";
+me.displayName = "Button";
 export {
-  de as Button
+  me as Button
 };

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

@@ -1,6 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { BearSize, BearVariant } from '../../types';
 import { BisProp } from '../../types/bis.types';
+import { TypographyVariant } from '../Typography/Typography.types';
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     /**
      * Button variant style
@@ -30,6 +31,12 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     leftIcon?: ReactNode;
     /** Icon to show after text */
     rightIcon?: ReactNode;
+    /**
+     * Typography variant for the button label (e.g. h1, h2, body1).
+     * Use with BearProvider customTypography to add your own variants.
+     * @default 'inherit'
+     */
+    textVariant?: TypographyVariant;
     /** Enable mouse-follow spotlight hover effect */
     spotlight?: boolean;
     /** Spotlight color (default: rgba(255, 255, 255, 0.15)) */

package/dist/components/FileTree/FileTree.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),x=require("react"),b=require("../TreeView/TreeView.cjs"),T=require("../Icon/index.cjs"),j=()=>t.jsx(T.BearIcons.ArticleIcon,{size:"xs",className:"bear-text-gray-400"});function l(e,a=0){var r;const s=e.children&&e.children.length>0,i=e.type==="folder"||s;return{id:e.id,label:e.label,disabled:e.disabled,data:e.data,icon:e.icon??(i?void 0:t.jsx(j,{})),children:(r=e.children)==null?void 0:r.map(c=>l(c,a+1))}}const m=({items:e,selectedId:a,defaultExpandedIds:s=[],onSelect:i,onExpand:r,size:c="md",showLines:d=!1,className:n,testId:o})=>{const u=x.useMemo(()=>e.map(l),[e]);return t.jsx("div",{"data-testid":o,children:t.jsx(b.TreeView,{data:u,selectedId:a,defaultExpandedIds:s,onSelect:i?h=>i(h.data):void 0,onExpand:r,size:c,showLines:d,className:n})})};exports.FileTree=m;

package/dist/components/FileTree/FileTree.d.ts

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

package/dist/components/FileTree/FileTree.js

@@ -0,0 +1,46 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { TreeView as p } from "../TreeView/TreeView.js";
+import { BearIcons as b } from "../Icon/index.js";
+const u = () => /* @__PURE__ */ t(b.ArticleIcon, { size: "xs", className: "bear-text-gray-400" });
+function c(e, a = 0) {
+  var i;
+  const l = e.children && e.children.length > 0, r = e.type === "folder" || l;
+  return {
+    id: e.id,
+    label: e.label,
+    disabled: e.disabled,
+    data: e.data,
+    icon: e.icon ?? (r ? void 0 : /* @__PURE__ */ t(u, {})),
+    children: (i = e.children) == null ? void 0 : i.map((o) => c(o, a + 1))
+  };
+}
+const I = ({
+  items: e,
+  selectedId: a,
+  defaultExpandedIds: l = [],
+  onSelect: r,
+  onExpand: i,
+  size: o = "md",
+  showLines: d = !1,
+  className: s,
+  testId: n
+}) => {
+  const m = h(() => e.map(c), [e]);
+  return /* @__PURE__ */ t("div", { "data-testid": n, children: /* @__PURE__ */ t(
+    p,
+    {
+      data: m,
+      selectedId: a,
+      defaultExpandedIds: l,
+      onSelect: r ? (f) => r(f.data) : void 0,
+      onExpand: i,
+      size: o,
+      showLines: d,
+      className: s
+    }
+  ) });
+};
+export {
+  I as FileTree
+};

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface FileTreeNode {
+    id: string;
+    label: string;
+    type: 'file' | 'folder';
+    children?: FileTreeNode[];
+    icon?: ReactNode;
+    disabled?: boolean;
+    data?: unknown;
+}
+export interface FileTreeProps {
+    /** Tree data (files and folders) */
+    items: FileTreeNode[];
+    /** Selected node id */
+    selectedId?: string;
+    /** Initially expanded folder ids */
+    defaultExpandedIds?: string[];
+    /** Called when a node is selected */
+    onSelect?: (node: FileTreeNode) => void;
+    /** Called when a folder is expanded/collapsed */
+    onExpand?: (nodeId: string, expanded: boolean) => void;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Show connecting lines */
+    showLines?: boolean;
+    /** Class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { FileTree } from './FileTree';
+export type { FileTreeProps, FileTreeNode } from './FileTree.types';

package/dist/components/ResizablePanel/ResizablePanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),e=require("./ResizablePanel.const.cjs"),v=require("./ResizablePanel.utils.cjs"),_=require("../../utils/cn.cjs"),L=P=>{const{first:I,second:N,direction:c=e.DEFAULT_DIRECTION,defaultSize:R=e.DEFAULT_FIRST_SIZE,minSize:d=e.MIN_SIZE,maxSize:b=e.MAX_SIZE,onResize:s,className:z,testId:T}=P,[t,g]=l.useState(R),u=l.useRef(null),h=l.useCallback(r=>v.clampSize(r,d,b),[d,b]),S=l.useCallback(r=>{var m;r.preventDefault();const n=r.target;(m=n.setPointerCapture)==null||m.call(n,r.pointerId);const E=i=>{if(!u.current)return;const D=u.current.getBoundingClientRect(),y=v.getResizePercentage(D,c,i.clientX,i.clientY),f=h(y);g(f),s==null||s(f)},w=()=>{var i;(i=n.releasePointerCapture)==null||i.call(n,r.pointerId),window.removeEventListener(e.EVENT_POINTER_MOVE,E),window.removeEventListener(e.EVENT_POINTER_UP,w)};window.addEventListener(e.EVENT_POINTER_MOVE,E),window.addEventListener(e.EVENT_POINTER_UP,w)},[c,h,s]),a=c==="horizontal",p=a?{width:`${t}%`,minWidth:0}:{height:`${t}%`,minHeight:0},x=a?{width:`${100-t}%`,minWidth:0}:{height:`${100-t}%`,minHeight:0};return o.jsxs("div",{ref:u,"data-testid":T,className:_.cn("Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",a?"bear-flex-row":"bear-flex-col",z),children:[o.jsx("div",{className:"bear-overflow-auto bear-shrink-0",style:p,children:I}),o.jsx("div",{role:"separator","aria-valuenow":t,"aria-valuemin":d,"aria-valuemax":b,tabIndex:0,onPointerDown:S,className:_.cn("Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-pink-500/30 bear-transition-colors bear-cursor-col-resize",a?"bear-w-1.5":"bear-h-1.5 bear-w-full bear-cursor-row-resize"),style:a?{width:e.HANDLE_WIDTH}:{height:e.HANDLE_WIDTH}}),o.jsx("div",{className:"bear-overflow-auto bear-shrink-0 bear-flex-1",style:x,children:N})]})};exports.ResizablePanel=L;

package/dist/components/ResizablePanel/ResizablePanel.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=50,_=10,T=90,I=6,o="horizontal",t="pointermove",N="pointerup",n=100;exports.DEFAULT_DIRECTION=o;exports.DEFAULT_FIRST_SIZE=E;exports.EVENT_POINTER_MOVE=t;exports.EVENT_POINTER_UP=N;exports.HANDLE_WIDTH=I;exports.MAX_SIZE=T;exports.MIN_SIZE=_;exports.PERCENTAGE_SCALE=n;

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

@@ -0,0 +1,11 @@
+export declare const DEFAULT_FIRST_SIZE = 50;
+export declare const MIN_SIZE = 10;
+export declare const MAX_SIZE = 90;
+export declare const HANDLE_WIDTH = 6;
+/** Default layout direction */
+export declare const DEFAULT_DIRECTION = "horizontal";
+/** DOM event names for resize listeners */
+export declare const EVENT_POINTER_MOVE = "pointermove";
+export declare const EVENT_POINTER_UP = "pointerup";
+/** Percentage scale for size calculation */
+export declare const PERCENTAGE_SCALE = 100;

package/dist/components/ResizablePanel/ResizablePanel.const.js

@@ -0,0 +1,11 @@
+const E = 50, o = 10, t = 90, n = 6, _ = "horizontal", I = "pointermove", T = "pointerup", c = 100;
+export {
+  _ as DEFAULT_DIRECTION,
+  E as DEFAULT_FIRST_SIZE,
+  I as EVENT_POINTER_MOVE,
+  T as EVENT_POINTER_UP,
+  n as HANDLE_WIDTH,
+  t as MAX_SIZE,
+  o as MIN_SIZE,
+  c as PERCENTAGE_SCALE
+};

package/dist/components/ResizablePanel/ResizablePanel.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ResizablePanelProps } from './ResizablePanel.types';
+/**
+ * Two-pane resizable layout with a draggable divider.
+ * Supports horizontal and vertical directions; respects min/max size and dark/light theme.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanel
+ *   first={<Sidebar />}
+ *   second={<Main />}
+ *   direction="horizontal"
+ *   defaultSize={30}
+ * />
+ * ```
+ */
+export declare const ResizablePanel: FC<ResizablePanelProps>;

package/dist/components/ResizablePanel/ResizablePanel.js

@@ -0,0 +1,70 @@
+import { jsxs as k, jsx as d } from "react/jsx-runtime";
+import { useState as C, useRef as H, useCallback as w } from "react";
+import { DEFAULT_DIRECTION as A, DEFAULT_FIRST_SIZE as M, MIN_SIZE as O, MAX_SIZE as U, EVENT_POINTER_MOVE as p, EVENT_POINTER_UP as v, HANDLE_WIDTH as E } from "./ResizablePanel.const.js";
+import { clampSize as $, getResizePercentage as B } from "./ResizablePanel.utils.js";
+import { cn as I } from "../../utils/cn.js";
+const X = (z) => {
+  const {
+    first: g,
+    second: N,
+    direction: o = A,
+    defaultSize: S = M,
+    minSize: s = O,
+    maxSize: l = U,
+    onResize: i,
+    className: _,
+    testId: P
+  } = z, [t, x] = C(S), c = H(null), b = w((e) => $(e, s, l), [s, l]), R = w(
+    (e) => {
+      var f;
+      e.preventDefault();
+      const r = e.target;
+      (f = r.setPointerCapture) == null || f.call(r, e.pointerId);
+      const m = (a) => {
+        if (!c.current) return;
+        const y = c.current.getBoundingClientRect(), L = B(y, o, a.clientX, a.clientY), u = b(L);
+        x(u), i == null || i(u);
+      }, h = () => {
+        var a;
+        (a = r.releasePointerCapture) == null || a.call(r, e.pointerId), window.removeEventListener(p, m), window.removeEventListener(v, h);
+      };
+      window.addEventListener(p, m), window.addEventListener(v, h);
+    },
+    [o, b, i]
+  ), n = o === "horizontal", T = n ? { width: `${t}%`, minWidth: 0 } : { height: `${t}%`, minHeight: 0 }, D = n ? { width: `${100 - t}%`, minWidth: 0 } : { height: `${100 - t}%`, minHeight: 0 };
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      ref: c,
+      "data-testid": P,
+      className: I(
+        "Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",
+        n ? "bear-flex-row" : "bear-flex-col",
+        _
+      ),
+      children: [
+        /* @__PURE__ */ d("div", { className: "bear-overflow-auto bear-shrink-0", style: T, children: g }),
+        /* @__PURE__ */ d(
+          "div",
+          {
+            role: "separator",
+            "aria-valuenow": t,
+            "aria-valuemin": s,
+            "aria-valuemax": l,
+            tabIndex: 0,
+            onPointerDown: R,
+            className: I(
+              "Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-pink-500/30 bear-transition-colors bear-cursor-col-resize",
+              n ? "bear-w-1.5" : "bear-h-1.5 bear-w-full bear-cursor-row-resize"
+            ),
+            style: n ? { width: E } : { height: E }
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: "bear-overflow-auto bear-shrink-0 bear-flex-1", style: D, children: N })
+      ]
+    }
+  );
+};
+export {
+  X as ResizablePanel
+};

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface ResizablePanelProps {
+    /** First pane content */
+    first: ReactNode;
+    /** Second pane content */
+    second: ReactNode;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Default size of first pane (0–100, percentage) */
+    defaultSize?: number;
+    /** Minimum size of first pane (percentage) */
+    minSize?: number;
+    /** Maximum size of first pane (percentage) */
+    maxSize?: number;
+    /** Called when resize ends with new size (0–100) */
+    onResize?: (size: number) => void;
+    /** Class name for the root container */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}

package/dist/components/ResizablePanel/ResizablePanel.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./ResizablePanel.const.cjs");function r(e,t,i,a){return t==="horizontal"?(i-e.left)/e.width*n.PERCENTAGE_SCALE:(a-e.top)/e.height*n.PERCENTAGE_SCALE}function o(e,t,i){return Math.min(i,Math.max(t,e))}exports.clampSize=o;exports.getResizePercentage=r;

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

@@ -0,0 +1,10 @@
+import { ResizablePanelProps } from './ResizablePanel.types';
+/**
+ * Compute first pane size as a percentage (0–100) from pointer position and container rect.
+ * Used for both horizontal and vertical layouts.
+ */
+export declare function getResizePercentage(rect: DOMRect, direction: NonNullable<ResizablePanelProps['direction']>, clientX: number, clientY: number): number;
+/**
+ * Clamp a value between min and max (inclusive).
+ */
+export declare function clampSize(value: number, min: number, max: number): number;

package/dist/components/ResizablePanel/ResizablePanel.utils.js

@@ -0,0 +1,11 @@
+import { PERCENTAGE_SCALE as n } from "./ResizablePanel.const.js";
+function a(t, e, i, o) {
+  return e === "horizontal" ? (i - t.left) / t.width * n : (o - t.top) / t.height * n;
+}
+function h(t, e, i) {
+  return Math.min(i, Math.max(e, t));
+}
+export {
+  h as clampSize,
+  a as getResizePercentage
+};

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

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

package/dist/components/ResizableTextarea/ResizableTextarea.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),o=require("react"),f=require("../../utils/cn.cjs"),w=require("./ResizableTextarea.const.cjs"),k=({minHeight:e=w.DEFAULT_MIN_HEIGHT,maxHeight:t=w.DEFAULT_MAX_HEIGHT,resizable:a=!0,className:x,style:y,testId:R,...T})=>{const h=o.useRef(null),[c,E]=o.useState(e),b=o.useRef(0),d=o.useRef(e),_=o.useCallback(r=>{var v,g;if(!a)return;r.preventDefault(),b.current=r.clientY,d.current=c,(g=(v=r.target).setPointerCapture)==null||g.call(v,r.pointerId);const l=s=>{const i=s.clientY-b.current;let n=d.current+i;e>0&&(n=Math.max(e,n)),t>0&&(n=Math.min(t,n)),E(n)},p=()=>{var s,i;(i=(s=r.target).releasePointerCapture)==null||i.call(s,r.pointerId),window.removeEventListener("pointermove",l),window.removeEventListener("pointerup",p)};window.addEventListener("pointermove",l),window.addEventListener("pointerup",p)},[a,c,e,t]);return u.jsxs("div",{className:f.cn("Bear-ResizableTextarea bear-relative",x),"data-testid":R,children:[u.jsx("textarea",{ref:h,className:f.cn("bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-gray-600","bear-bg-white dark:bear-bg-gray-900 bear-text-gray-900 dark:bear-text-gray-100","bear-p-3 bear-resize-none focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/50"),style:{...y,minHeight:a?e:void 0,height:a?c:void 0,maxHeight:t>0?t:void 0},...T}),a&&u.jsx("div",{role:"separator",onPointerDown:_,className:"Bear-ResizableTextarea__handle bear-absolute bear-right-0 bear-bottom-0 bear-w-4 bear-h-4 bear-cursor-s-resize bear-opacity-50 hover:bear-opacity-100",style:{background:"linear-gradient(135deg, transparent 50%, currentColor 50%)"}})]})};exports.ResizableTextarea=k;

package/dist/components/ResizableTextarea/ResizableTextarea.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=80,t=400;exports.DEFAULT_MAX_HEIGHT=t;exports.DEFAULT_MIN_HEIGHT=T;

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_MIN_HEIGHT = 80;
+export declare const DEFAULT_MAX_HEIGHT = 400;

package/dist/components/ResizableTextarea/ResizableTextarea.const.js

@@ -0,0 +1,5 @@
+const E = 80, H = 400;
+export {
+  H as DEFAULT_MAX_HEIGHT,
+  E as DEFAULT_MIN_HEIGHT
+};

package/dist/components/ResizableTextarea/ResizableTextarea.d.ts

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

package/dist/components/ResizableTextarea/ResizableTextarea.js

@@ -0,0 +1,60 @@
+import { jsxs as k, jsx as f } from "react/jsx-runtime";
+import { useRef as d, useState as L, useCallback as _ } from "react";
+import { cn as g } from "../../utils/cn.js";
+import { DEFAULT_MIN_HEIGHT as D, DEFAULT_MAX_HEIGHT as I } from "./ResizableTextarea.const.js";
+const P = ({
+  minHeight: e = D,
+  maxHeight: t = I,
+  resizable: a = !0,
+  className: w,
+  style: m,
+  testId: y,
+  ...x
+}) => {
+  const h = d(null), [i, E] = L(e), b = d(0), c = d(e), T = _((r) => {
+    var p, v;
+    if (!a) return;
+    r.preventDefault(), b.current = r.clientY, c.current = i, (v = (p = r.target).setPointerCapture) == null || v.call(p, r.pointerId);
+    const u = (n) => {
+      const s = n.clientY - b.current;
+      let o = c.current + s;
+      e > 0 && (o = Math.max(e, o)), t > 0 && (o = Math.min(t, o)), E(o);
+    }, l = () => {
+      var n, s;
+      (s = (n = r.target).releasePointerCapture) == null || s.call(n, r.pointerId), window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", l);
+    };
+    window.addEventListener("pointermove", u), window.addEventListener("pointerup", l);
+  }, [a, i, e, t]);
+  return /* @__PURE__ */ k("div", { className: g("Bear-ResizableTextarea bear-relative", w), "data-testid": y, children: [
+    /* @__PURE__ */ f(
+      "textarea",
+      {
+        ref: h,
+        className: g(
+          "bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-gray-600",
+          "bear-bg-white dark:bear-bg-gray-900 bear-text-gray-900 dark:bear-text-gray-100",
+          "bear-p-3 bear-resize-none focus:bear-outline-none focus:bear-ring-2 focus:bear-ring-pink-500/50"
+        ),
+        style: {
+          ...m,
+          minHeight: a ? e : void 0,
+          height: a ? i : void 0,
+          maxHeight: t > 0 ? t : void 0
+        },
+        ...x
+      }
+    ),
+    a && /* @__PURE__ */ f(
+      "div",
+      {
+        role: "separator",
+        onPointerDown: T,
+        className: "Bear-ResizableTextarea__handle bear-absolute bear-right-0 bear-bottom-0 bear-w-4 bear-h-4 bear-cursor-s-resize bear-opacity-50 hover:bear-opacity-100",
+        style: { background: "linear-gradient(135deg, transparent 50%, currentColor 50%)" }
+      }
+    )
+  ] });
+};
+export {
+  P as ResizableTextarea
+};