@forgedevstack/bear 1.0.8 → 1.1.0

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/ActivityItem/ActivityItem.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../utils/cn.cjs"),m=({icon:s,iconBg:r="rgba(16, 185, 129, 0.2)",title:a,description:i,user:t,time:l,onClick:c,className:n,...x})=>e.jsxs("div",{className:d.cn("flex items-start gap-4 p-4 hover:bg-slate-700/30 dark:hover:bg-slate-700/30 rounded-xl transition-colors cursor-pointer",n),onClick:c,...x,children:[e.jsx("div",{className:"flex items-center justify-center w-10 h-10 rounded-xl flex-shrink-0",style:{background:r},children:s}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-gray-900 dark:text-white font-medium truncate",children:a}),e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm truncate",children:i})]}),e.jsxs("div",{className:"text-right flex-shrink-0",children:[e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm",children:l}),t&&e.jsx("p",{className:"text-gray-400 dark:text-slate-500 text-xs",children:t})]})]});exports.ActivityItem=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../utils/cn.cjs");require("react");const m=({icon:s,iconBg:r="rgba(16, 185, 129, 0.2)",title:a,description:i,user:t,time:l,onClick:c,className:n,...x})=>e.jsxs("div",{className:d.cn("flex items-start gap-4 p-4 hover:bg-slate-700/30 dark:hover:bg-slate-700/30 rounded-xl transition-colors cursor-pointer",n),onClick:c,...x,children:[e.jsx("div",{className:"flex items-center justify-center w-10 h-10 rounded-xl flex-shrink-0",style:{background:r},children:s}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("p",{className:"text-gray-900 dark:text-white font-medium truncate",children:a}),e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm truncate",children:i})]}),e.jsxs("div",{className:"text-right flex-shrink-0",children:[e.jsx("p",{className:"text-gray-500 dark:text-slate-400 text-sm",children:l}),t&&e.jsx("p",{className:"text-gray-400 dark:text-slate-500 text-xs",children:t})]})]});exports.ActivityItem=m;

package/dist/components/ActivityItem/ActivityItem.js

@@ -1,5 +1,6 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { cn as m } from "../../utils/cn.js";
+import "react";
 const g = ({
   icon: a,
   iconBg: s = "rgba(16, 185, 129, 0.2)",

package/dist/components/Alert/Alert.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/cn.cjs"),a={filled:e=>r.cn("bear-text-white bear-alert-filled",e==="success"&&"bear-alert-filled-success",e==="info"&&"bear-alert-filled-info",e==="warning"&&"bear-alert-filled-warning",e==="error"&&"bear-alert-filled-error"),outlined:()=>"bear-bg-transparent bear-border",standard:()=>""},l={SEVERITY:"info",VARIANT:"standard",SHOW_ICON:!0,CLOSABLE:!1};exports.ALERT_DEFAULTS=l;exports.ALERT_VARIANT_CLASSES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/cn.cjs");require("react");const a={filled:e=>r.cn("bear-text-white bear-alert-filled",e==="success"&&"bear-alert-filled-success",e==="info"&&"bear-alert-filled-info",e==="warning"&&"bear-alert-filled-warning",e==="error"&&"bear-alert-filled-error"),outlined:()=>"bear-bg-transparent bear-border",standard:()=>""},l={SEVERITY:"info",VARIANT:"standard",SHOW_ICON:!0,CLOSABLE:!1};exports.ALERT_DEFAULTS=l;exports.ALERT_VARIANT_CLASSES=a;

package/dist/components/Alert/Alert.const.js

@@ -1,5 +1,6 @@
 import { cn as e } from "../../utils/cn.js";
-const l = {
+import "react";
+const t = {
   filled: (r) => e(
     "bear-text-white bear-alert-filled",
     r === "success" && "bear-alert-filled-success",
@@ -17,5 +18,5 @@ const l = {
 };
 export {
   n as ALERT_DEFAULTS,
-  l as ALERT_VARIANT_CLASSES
+  t as ALERT_VARIANT_CLASSES
 };

package/dist/components/AppBar/AppBar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/cn.cjs"),g=({children:a,position:t="sticky",variant:b="default",color:r="primary",className:s,leftContent:i,rightContent:l,centerContent:c,elevation:n=!0})=>{const d={fixed:"bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",sticky:"bear-sticky bear-top-0 bear-z-50",static:"bear-static",relative:"bear-relative"},o={default:"",transparent:"bear-bg-transparent",blur:"bear-backdrop-blur-md"},p={default:"bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white",primary:"bear-bg-pink-600 bear-text-white",dark:"bear-bg-gray-900 bear-text-white dark:bear-bg-black"},x=n?"bear-shadow-md bear-border-b bear-border-gray-200/10":"";return e.jsx("header",{className:m.cn("Bear-AppBar","bear-w-full bear-h-16 bear-px-4 bear-flex bear-items-center",d[t],o[b],p[r],x,s),style:{backgroundColor:r==="primary"?"var(--bear-primary-600)":void 0},children:a??e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:i}),e.jsx("div",{className:"bear-flex-1 bear-flex bear-items-center bear-justify-center",children:c}),e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:l})]})})};exports.AppBar=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/cn.cjs");require("react");const u=({children:a,position:t="sticky",variant:b="default",color:r="primary",className:s,leftContent:i,rightContent:l,centerContent:c,elevation:n=!0})=>{const d={fixed:"bear-fixed bear-top-0 bear-left-0 bear-right-0 bear-z-50",sticky:"bear-sticky bear-top-0 bear-z-50",static:"bear-static",relative:"bear-relative"},o={default:"",transparent:"bear-bg-transparent",blur:"bear-backdrop-blur-md"},p={default:"bear-bg-white bear-text-gray-900 dark:bear-bg-zinc-900 dark:bear-text-white",primary:"bear-bg-pink-600 bear-text-white",dark:"bear-bg-gray-900 bear-text-white dark:bear-bg-black"},x=n?"bear-shadow-md bear-border-b bear-border-gray-200/10":"";return e.jsx("header",{className:m.cn("Bear-AppBar","bear-w-full bear-h-16 bear-px-4 bear-flex bear-items-center",d[t],o[b],p[r],x,s),style:{backgroundColor:r==="primary"?"var(--bear-primary-600)":void 0},children:a??e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:i}),e.jsx("div",{className:"bear-flex-1 bear-flex bear-items-center bear-justify-center",children:c}),e.jsx("div",{className:"bear-flex bear-items-center bear-gap-4",children:l})]})})};exports.AppBar=u;

package/dist/components/AppBar/AppBar.js

@@ -1,6 +1,7 @@
 import { jsx as e, jsxs as f, Fragment as x } from "react/jsx-runtime";
 import { cn as g } from "../../utils/cn.js";
-const k = ({
+import "react";
+const u = ({
   children: a,
   position: t = "sticky",
   variant: b = "default",
@@ -49,5 +50,5 @@ const k = ({
   );
 };
 export {
-  k as AppBar
+  u as AppBar
 };

package/dist/components/Badge/Badge.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("../../utils/cn.cjs"),e=require("./Badge.constants.cjs"),u=({variant:s="neutral",size:n="sm",pill:t=!1,dot:d=!1,className:l,children:o,testId:c,...i})=>a.jsxs("span",{className:r.cn("Bear-Badge","bear-inline-flex bear-items-center bear-gap-1.5 bear-font-medium",e.sizeClasses[n],e.variantClasses[s],t?"Bear-Badge--pill bear-rounded-full":"bear-rounded-md",l),"data-testid":c,...i,children:[d&&a.jsx("span",{className:r.cn("Bear-Badge__dot",e.BADGE_DOT_SIZE_CLASSES,"bear-rounded-full",e.dotVariantColors[s])}),a.jsx("span",{className:"Bear-Badge__content",children:o})]});exports.Badge=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("../../utils/cn.cjs");require("react");const e=require("./Badge.constants.cjs"),u=({variant:s="neutral",size:n="sm",pill:t=!1,dot:d=!1,className:l,children:o,testId:i,...c})=>a.jsxs("span",{className:r.cn("Bear-Badge","bear-inline-flex bear-items-center bear-gap-1.5 bear-font-medium",e.sizeClasses[n],e.variantClasses[s],t?"Bear-Badge--pill bear-rounded-full":"bear-rounded-md",l),"data-testid":i,...c,children:[d&&a.jsx("span",{className:r.cn("Bear-Badge__dot",e.BADGE_DOT_SIZE_CLASSES,"bear-rounded-full",e.dotVariantColors[s])}),a.jsx("span",{className:"Bear-Badge__content",children:o})]});exports.Badge=u;

package/dist/components/Badge/Badge.js

@@ -1,13 +1,14 @@
 import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { cn as r } from "../../utils/cn.js";
-import { dotVariantColors as B, BADGE_DOT_SIZE_CLASSES as f, variantClasses as p, sizeClasses as c } from "./Badge.constants.js";
-const g = ({
+import "react";
+import { dotVariantColors as p, BADGE_DOT_SIZE_CLASSES as B, variantClasses as f, sizeClasses as c } from "./Badge.constants.js";
+const x = ({
   variant: e = "neutral",
   size: s = "sm",
-  pill: d = !1,
-  dot: l = !1,
-  className: n,
-  children: t,
+  pill: t = !1,
+  dot: d = !1,
+  className: l,
+  children: n,
   testId: o,
   ...m
 }) => /* @__PURE__ */ i(
@@ -17,28 +18,28 @@ const g = ({
       "Bear-Badge",
       "bear-inline-flex bear-items-center bear-gap-1.5 bear-font-medium",
       c[s],
-      p[e],
-      d ? "Bear-Badge--pill bear-rounded-full" : "bear-rounded-md",
-      n
+      f[e],
+      t ? "Bear-Badge--pill bear-rounded-full" : "bear-rounded-md",
+      l
     ),
     "data-testid": o,
     ...m,
     children: [
-      l && /* @__PURE__ */ a(
+      d && /* @__PURE__ */ a(
         "span",
         {
           className: r(
             "Bear-Badge__dot",
-            f,
+            B,
             "bear-rounded-full",
-            B[e]
+            p[e]
           )
         }
       ),
-      /* @__PURE__ */ a("span", { className: "Bear-Badge__content", children: t })
+      /* @__PURE__ */ a("span", { className: "Bear-Badge__content", children: n })
     ]
   }
 );
 export {
-  g as Badge
+  x as Badge
 };

package/dist/components/BearLogo/EmberLogo.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn.cjs"),t=({size:r=48,className:o,animated:s=!1})=>e.jsxs("svg",{width:r,height:r,viewBox:"0 0 100 100",fill:"none",className:l.cn("bear-logo",s&&"bear-animate-bear-glow",o),children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"emberFlameGrad",x1:"50%",y1:"100%",x2:"50%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:"#ea580c"}),e.jsx("stop",{offset:"30%",stopColor:"#f97316"}),e.jsx("stop",{offset:"60%",stopColor:"#fb923c"}),e.jsx("stop",{offset:"100%",stopColor:"#fed7aa"})]}),e.jsxs("linearGradient",{id:"emberCoreGrad",x1:"50%",y1:"100%",x2:"50%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:"#f97316"}),e.jsx("stop",{offset:"50%",stopColor:"#fbbf24"}),e.jsx("stop",{offset:"100%",stopColor:"#fef3c7"})]}),e.jsxs("filter",{id:"emberGlow",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[e.jsx("feGaussianBlur",{stdDeviation:"3",result:"coloredBlur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"coloredBlur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"#1a1a2e",stroke:"url(#emberFlameGrad)",strokeWidth:"2"}),e.jsx("path",{d:`M50 15
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../utils/cn.cjs");require("react");const t=({size:r=48,className:o,animated:s=!1})=>e.jsxs("svg",{width:r,height:r,viewBox:"0 0 100 100",fill:"none",className:l.cn("bear-logo",s&&"bear-animate-bear-glow",o),children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"emberFlameGrad",x1:"50%",y1:"100%",x2:"50%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:"#ea580c"}),e.jsx("stop",{offset:"30%",stopColor:"#f97316"}),e.jsx("stop",{offset:"60%",stopColor:"#fb923c"}),e.jsx("stop",{offset:"100%",stopColor:"#fed7aa"})]}),e.jsxs("linearGradient",{id:"emberCoreGrad",x1:"50%",y1:"100%",x2:"50%",y2:"0%",children:[e.jsx("stop",{offset:"0%",stopColor:"#f97316"}),e.jsx("stop",{offset:"50%",stopColor:"#fbbf24"}),e.jsx("stop",{offset:"100%",stopColor:"#fef3c7"})]}),e.jsxs("filter",{id:"emberGlow",x:"-50%",y:"-50%",width:"200%",height:"200%",children:[e.jsx("feGaussianBlur",{stdDeviation:"3",result:"coloredBlur"}),e.jsxs("feMerge",{children:[e.jsx("feMergeNode",{in:"coloredBlur"}),e.jsx("feMergeNode",{in:"SourceGraphic"})]})]})]}),e.jsx("circle",{cx:"50",cy:"50",r:"45",fill:"#1a1a2e",stroke:"url(#emberFlameGrad)",strokeWidth:"2"}),e.jsx("path",{d:`M50 15
            C35 30 25 45 25 60
            C25 75 35 85 50 85
            C65 85 75 75 75 60

package/dist/components/BearLogo/EmberLogo.js

@@ -1,6 +1,7 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { cn as t } from "../../utils/cn.js";
-const c = ({
+import "react";
+const n = ({
   size: o = 48,
   className: l,
   animated: f = !1
@@ -87,5 +88,5 @@ const c = ({
   }
 );
 export {
-  c as EmberLogo
+  n as EmberLogo
 };

package/dist/components/BottomNavigation/BottomNavigation.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("../../utils/cn.cjs"),u=({items:s,value:i,onChange:t,showLabels:n="active",variant:l="default",className:c})=>{const d={default:"bear-bg-zinc-900 bear-border-t bear-border-zinc-800",elevated:"bear-bg-zinc-900 bear-shadow-[0_-4px_20px_rgba(0,0,0,0.3)]",transparent:"bear-bg-zinc-900/80 bear-backdrop-blur-md bear-border-t bear-border-zinc-800/50"},o=e=>n===!0||n==="always"?!0:n==="active"?e:!1;return r.jsx("nav",{className:b.cn("bear-fixed bear-bottom-0 bear-left-0 bear-right-0 bear-z-50 bear-h-16 bear-flex bear-items-center bear-justify-around bear-px-2",d[l],c),children:s.map(e=>{const a=i===e.id;return r.jsxs("button",{onClick:()=>!e.disabled&&(t==null?void 0:t(e.id)),disabled:e.disabled,className:b.cn("bear-flex bear-flex-col bear-items-center bear-justify-center bear-flex-1 bear-h-full bear-py-2 bear-transition-all",a?"bear-text-pink-400":"bear-text-zinc-500 hover:bear-text-zinc-300",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs("div",{className:"bear-relative",children:[r.jsx("span",{className:b.cn("bear-transition-transform",a&&"bear-scale-110"),children:e.icon}),e.badge!==void 0&&r.jsx("span",{className:"bear-absolute -bear-top-1 -bear-right-1 bear-min-w-[16px] bear-h-4 bear-px-1 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-bg-pink-500 bear-text-white bear-rounded-full",children:e.badge})]}),o(a)&&r.jsx("span",{className:b.cn("bear-text-xs bear-mt-1 bear-transition-all",a?"bear-font-medium":""),children:e.label})]},e.id)})})};exports.BottomNavigation=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("../../utils/cn.cjs");require("react");const u=({items:n,value:s,onChange:t,showLabels:i="active",variant:l="default",className:c})=>{const d={default:"bear-bg-zinc-900 bear-border-t bear-border-zinc-800",elevated:"bear-bg-zinc-900 bear-shadow-[0_-4px_20px_rgba(0,0,0,0.3)]",transparent:"bear-bg-zinc-900/80 bear-backdrop-blur-md bear-border-t bear-border-zinc-800/50"},o=e=>i===!0||i==="always"?!0:i==="active"?e:!1;return r.jsx("nav",{className:b.cn("bear-fixed bear-bottom-0 bear-left-0 bear-right-0 bear-z-50 bear-h-16 bear-flex bear-items-center bear-justify-around bear-px-2",d[l],c),children:n.map(e=>{const a=s===e.id;return r.jsxs("button",{onClick:()=>!e.disabled&&(t==null?void 0:t(e.id)),disabled:e.disabled,className:b.cn("bear-flex bear-flex-col bear-items-center bear-justify-center bear-flex-1 bear-h-full bear-py-2 bear-transition-all",a?"bear-text-pink-400":"bear-text-zinc-500 hover:bear-text-zinc-300",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[r.jsxs("div",{className:"bear-relative",children:[r.jsx("span",{className:b.cn("bear-transition-transform",a&&"bear-scale-110"),children:e.icon}),e.badge!==void 0&&r.jsx("span",{className:"bear-absolute -bear-top-1 -bear-right-1 bear-min-w-[16px] bear-h-4 bear-px-1 bear-flex bear-items-center bear-justify-center bear-text-xs bear-font-medium bear-bg-pink-500 bear-text-white bear-rounded-full",children:e.badge})]}),o(a)&&r.jsx("span",{className:b.cn("bear-text-xs bear-mt-1 bear-transition-all",a?"bear-font-medium":""),children:e.label})]},e.id)})})};exports.BottomNavigation=u;

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -1,6 +1,7 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import { cn as b } from "../../utils/cn.js";
-const p = ({
+import "react";
+const m = ({
   items: n,
   value: s,
   onChange: t,
@@ -45,5 +46,5 @@ const p = ({
   }) });
 };
 export {
-  p as BottomNavigation
+  m as BottomNavigation
 };

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/Carousel/Carousel.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),b=require("../../utils/cn.cjs"),z=({children:M,autoPlay:l=0,showDots:I=!0,showArrows:T=!0,loop:c=!0,slidesToShow:n=1,gap:i=16,pauseOnHover:f=!0,onSlideChange:u,className:L,testId:$})=>{const[t,C]=s.useState(0),[x,m]=s.useState(!1),[y,E]=s.useState(null),[v,k]=s.useState(null),R=s.useRef(null),j=s.Children.toArray(M),d=j.length,o=Math.max(0,d-n);s.useEffect(()=>{if(l>0&&!x){const e=setInterval(()=>{g()},l);return()=>clearInterval(e)}},[l,x,t]);const h=e=>{let r=e;c?e<0?r=o:e>o&&(r=0):r=Math.max(0,Math.min(o,e)),C(r),u==null||u(r)},g=()=>h(t+1),w=()=>h(t-1),p=50,S=e=>{k(null),E(e.targetTouches[0].clientX)},q=e=>{k(e.targetTouches[0].clientX)},W=()=>{if(!y||!v)return;const e=y-v,r=e>p,X=e<-p;r?g():X&&w()},N=`calc((100% - ${i*(n-1)}px) / ${n})`;return a.jsxs("div",{ref:R,className:b.cn("bear-relative bear-overflow-hidden",L),onMouseEnter:()=>f&&m(!0),onMouseLeave:()=>f&&m(!1),onTouchStart:S,onTouchMove:q,onTouchEnd:W,"data-testid":$,children:[a.jsx("div",{className:"bear-flex bear-transition-transform bear-duration-500 bear-ease-out",style:{gap:`${i}px`,transform:`translateX(calc(-${t} * (${N} + ${i}px)))`},children:j.map((e,r)=>a.jsx("div",{className:"bear-shrink-0",style:{width:N},children:e},r))}),T&&d>n&&a.jsxs(a.Fragment,{children:[a.jsx("button",{onClick:w,disabled:!c&&t===0,className:b.cn("bear-absolute bear-left-2 bear-top-1/2 bear--translate-y-1/2","bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center","bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg","bear-text-gray-700 dark:bear-text-gray-200","hover:bear-bg-white dark:hover:bear-bg-gray-700","bear-transition-all bear-z-10","disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"),children:a.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:a.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),a.jsx("button",{onClick:g,disabled:!c&&t===o,className:b.cn("bear-absolute bear-right-2 bear-top-1/2 bear--translate-y-1/2","bear-w-10 bear-h-10 bear-rounded-full bear-flex bear-items-center bear-justify-center","bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg","bear-text-gray-700 dark:bear-text-gray-200","hover:bear-bg-white dark:hover:bear-bg-gray-700","bear-transition-all bear-z-10","disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"),children:a.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:a.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]}),I&&d>n&&a.jsx("div",{className:"bear-flex bear-justify-center bear-gap-2 bear-mt-4",children:Array.from({length:o+1}).map((e,r)=>a.jsx("button",{onClick:()=>h(r),className:b.cn("bear-w-2.5 bear-h-2.5 bear-rounded-full bear-transition-all",r===t?"bear-bg-pink-500 bear-w-6":"bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500")},r))})]})};exports.Carousel=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("../../utils/cn.cjs"),o=require("./Carousel.const.cjs"),le=({children:z,autoPlay:y=0,showDots:B=!0,showArrows:P=!0,loop:m=!0,slidesToShow:u=1,gap:x=16,pauseOnHover:_=!0,onSlideChange:k,transition:p="slide",transitionDuration:d=o.DEFAULT_TRANSITION_DURATION,indicator:v="dots",thumbnails:E,thumbnailSize:S=o.DEFAULT_THUMBNAIL_SIZE,keyboard:w=!0,draggable:A=!0,showProgress:G=!1,showCounter:X=!1,activeColor:h=o.DEFAULT_ACTIVE_COLOR,className:Z,style:q,testId:F})=>{const[t,H]=s.useState(0),[M,R]=s.useState(!1),[$,K]=s.useState(null),[C,O]=s.useState(null),[L,U]=s.useState(!1),V=s.useRef(null),I=s.useRef(null),N=s.Children.toArray(z),f=N.length,l=Math.max(0,f-u),n=s.useCallback(a=>{if(L)return;let e=a;m?a<0?e=l:a>l&&(e=0):e=Math.max(0,Math.min(l,a)),U(!0),H(e),k==null||k(e),setTimeout(()=>U(!1),d)},[L,m,l,k,d]),b=s.useCallback(()=>n(t+1),[n,t]),c=s.useCallback(()=>n(t-1),[n,t]);s.useEffect(()=>{if(y>0&&!M)return I.current=setInterval(b,y),()=>{I.current&&clearInterval(I.current)}},[y,M,b]);const Y=s.useCallback(a=>{w&&(a.key==="ArrowLeft"?c():a.key==="ArrowRight"&&b())},[w,c,b]),J=a=>{O(null),K(a.targetTouches[0].clientX)},Q=a=>{O(a.targetTouches[0].clientX)},ee=()=>{if(!$||!C)return;const a=$-C;a>o.MIN_SWIPE_DISTANCE?b():a<-o.MIN_SWIPE_DISTANCE&&c()},[T,j]=s.useState(!1),[W,ae]=s.useState(0),re=s.useCallback(a=>{A&&(j(!0),ae(a.clientX))},[A]),te=s.useCallback(a=>{if(!T)return;j(!1);const e=W-a.clientX;e>o.MIN_SWIPE_DISTANCE?b():e<-o.MIN_SWIPE_DISTANCE&&c()},[T,W,b,c]),D=`calc((100% - ${x*(u-1)}px) / ${u})`,se=a=>{const e=a===t,g=`${d}ms`;switch(p){case"fade":return{position:"absolute",inset:0,opacity:e?1:0,transition:`opacity ${g} ease-in-out`,zIndex:e?1:0,pointerEvents:e?"auto":"none"};case"zoom":return{position:"absolute",inset:0,opacity:e?1:0,transform:e?"scale(1)":"scale(0.85)",transition:`opacity ${g} ease, transform ${g} ease`,zIndex:e?1:0,pointerEvents:e?"auto":"none"};case"flip":return{position:"absolute",inset:0,opacity:e?1:0,transform:e?"rotateY(0deg)":"rotateY(90deg)",transition:`opacity ${g} ease, transform ${g} ease`,zIndex:e?1:0,pointerEvents:e?"auto":"none",backfaceVisibility:"hidden"};case"slide":default:return{}}},oe=p==="fade"||p==="zoom"||p==="flip";return r.jsxs("div",{ref:V,className:i.cn("bear-relative bear-overflow-hidden bear-outline-none",Z),style:q,onMouseEnter:()=>_&&R(!0),onMouseLeave:()=>{_&&R(!1),T&&j(!1)},onTouchStart:J,onTouchMove:Q,onTouchEnd:ee,onMouseDown:re,onMouseUp:te,onKeyDown:Y,tabIndex:w?0:void 0,"data-testid":F,role:"region","aria-label":"Carousel","aria-roledescription":"carousel",children:[G&&y>0&&r.jsx("div",{className:"bear-absolute bear-top-0 bear-left-0 bear-right-0 bear-z-20",style:{height:o.PROGRESS_BAR_HEIGHT},children:r.jsx("div",{className:"bear-h-full bear-transition-all bear-ease-linear",style:{width:`${(t+1)/f*100}%`,background:h,transition:`width ${d}ms ease`}})}),oe?r.jsx("div",{className:"bear-relative",style:{minHeight:200},children:N.map((a,e)=>r.jsx("div",{style:se(e),children:a},e))}):r.jsx("div",{className:"bear-flex",style:{gap:`${x}px`,transform:`translateX(calc(-${t} * (${D} + ${x}px)))`,transition:`transform ${d}ms cubic-bezier(0.25, 0.1, 0.25, 1)`},children:N.map((a,e)=>r.jsx("div",{className:"bear-shrink-0",style:{width:D},children:a},e))}),P&&f>u&&r.jsxs(r.Fragment,{children:[r.jsx("button",{onClick:c,disabled:!m&&t===0,className:i.cn("bear-absolute bear-left-2 bear-top-1/2 bear--translate-y-1/2","bear-rounded-full bear-flex bear-items-center bear-justify-center","bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg","bear-text-gray-700 dark:bear-text-gray-200","hover:bear-bg-white dark:hover:bear-bg-gray-700","bear-transition-all bear-z-10","disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"),style:{width:o.ARROW_BUTTON_SIZE,height:o.ARROW_BUTTON_SIZE},"aria-label":"Previous slide",children:r.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M15 19l-7-7 7-7"})})}),r.jsx("button",{onClick:b,disabled:!m&&t===l,className:i.cn("bear-absolute bear-right-2 bear-top-1/2 bear--translate-y-1/2","bear-rounded-full bear-flex bear-items-center bear-justify-center","bear-bg-white/90 dark:bear-bg-gray-800/90 bear-shadow-lg","bear-text-gray-700 dark:bear-text-gray-200","hover:bear-bg-white dark:hover:bear-bg-gray-700","bear-transition-all bear-z-10","disabled:bear-opacity-50 disabled:bear-cursor-not-allowed"),style:{width:o.ARROW_BUTTON_SIZE,height:o.ARROW_BUTTON_SIZE},"aria-label":"Next slide",children:r.jsx("svg",{className:"bear-w-5 bear-h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})})})]}),X&&r.jsxs("div",{className:"bear-absolute bear-top-3 bear-right-3 bear-z-10 bear-bg-black/50 bear-text-white bear-text-xs bear-font-medium bear-px-2.5 bear-py-1 bear-rounded-full",children:[t+1," / ",f]}),B&&v!=="none"&&f>u&&r.jsx("div",{className:"bear-flex bear-justify-center bear-gap-2 bear-mt-4",children:v==="thumbnails"&&E?E.map((a,e)=>r.jsx("button",{onClick:()=>n(e),className:i.cn("bear-rounded bear-overflow-hidden bear-border-2 bear-transition-all",e===t?"bear-opacity-100 bear-scale-110":"bear-opacity-60 hover:bear-opacity-80"),style:{width:S,height:S,borderColor:e===t?h:"transparent"},"aria-label":`Go to slide ${e+1}`,children:r.jsx("img",{src:a,alt:"",className:"bear-w-full bear-h-full bear-object-cover"})},e)):v==="numbers"?Array.from({length:l+1}).map((a,e)=>r.jsx("button",{onClick:()=>n(e),className:i.cn("bear-w-7 bear-h-7 bear-rounded-full bear-text-xs bear-font-medium bear-transition-all","bear-flex bear-items-center bear-justify-center",e===t?"bear-text-white bear-shadow-md":"bear-bg-gray-200 dark:bear-bg-gray-600 bear-text-gray-600 dark:bear-text-gray-300 hover:bear-bg-gray-300 dark:hover:bear-bg-gray-500"),style:e===t?{background:h}:void 0,"aria-label":`Go to slide ${e+1}`,children:e+1},e)):v==="bars"?Array.from({length:l+1}).map((a,e)=>r.jsx("button",{onClick:()=>n(e),className:i.cn("bear-h-1 bear-rounded-full bear-transition-all",e===t?"bear-w-8":"bear-w-4 bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500"),style:e===t?{background:h}:void 0,"aria-label":`Go to slide ${e+1}`},e)):Array.from({length:l+1}).map((a,e)=>r.jsx("button",{onClick:()=>n(e),className:i.cn("bear-h-2.5 bear-rounded-full bear-transition-all",e===t?"bear-w-6":"bear-w-2.5 bear-bg-gray-300 dark:bear-bg-gray-600 hover:bear-bg-gray-400 dark:hover:bear-bg-gray-500"),style:e===t?{background:h}:void 0,"aria-label":`Go to slide ${e+1}`},e))})]})};exports.Carousel=le;

package/dist/components/Carousel/Carousel.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=500,_=50,I=48,A="var(--bear-primary-500)",E=40,R=3;exports.ARROW_BUTTON_SIZE=E;exports.DEFAULT_ACTIVE_COLOR=A;exports.DEFAULT_THUMBNAIL_SIZE=I;exports.DEFAULT_TRANSITION_DURATION=T;exports.MIN_SWIPE_DISTANCE=_;exports.PROGRESS_BAR_HEIGHT=R;

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

@@ -0,0 +1,12 @@
+/** Default transition duration in ms */
+export declare const DEFAULT_TRANSITION_DURATION = 500;
+/** Min swipe distance to trigger navigation (px) */
+export declare const MIN_SWIPE_DISTANCE = 50;
+/** Default thumbnail size (px) */
+export declare const DEFAULT_THUMBNAIL_SIZE = 48;
+/** Default active color */
+export declare const DEFAULT_ACTIVE_COLOR = "var(--bear-primary-500)";
+/** Arrow button size (px) */
+export declare const ARROW_BUTTON_SIZE = 40;
+/** Progress bar height (px) */
+export declare const PROGRESS_BAR_HEIGHT = 3;

package/dist/components/Carousel/Carousel.const.js

@@ -0,0 +1,9 @@
+const T = 500, _ = 50, I = 48, A = "var(--bear-primary-500)", E = 40, R = 3;
+export {
+  E as ARROW_BUTTON_SIZE,
+  A as DEFAULT_ACTIVE_COLOR,
+  I as DEFAULT_THUMBNAIL_SIZE,
+  T as DEFAULT_TRANSITION_DURATION,
+  _ as MIN_SWIPE_DISTANCE,
+  R as PROGRESS_BAR_HEIGHT
+};

package/dist/components/Carousel/Carousel.d.ts

@@ -1,14 +1,25 @@
 import { FC } from 'react';
 import { CarouselProps } from './Carousel.types';
 /**
- * Carousel - Sliding content carousel with touch support
+ * Carousel - Feature-rich sliding content carousel
+ *
+ * @description
+ * Supports slide, fade, zoom, and flip transitions, thumbnail indicators,
+ * keyboard navigation, drag/swipe, progress bar, and counter.
  *
  * @example
  * ```tsx
- * <Carousel autoPlay={5000} showDots showArrows>
+ * <Carousel
+ *   autoPlay={5000}
+ *   transition="fade"
+ *   indicator="thumbnails"
+ *   thumbnails={['/img1.jpg', '/img2.jpg']}
+ *   showArrows
+ *   showProgress
+ *   keyboard
+ * >
  *   <div>Slide 1</div>
  *   <div>Slide 2</div>
- *   <div>Slide 3</div>
  * </Carousel>
  * ```
  */