@forgedevstack/bear 1.2.5 → 1.2.7

package/dist/components/Snackbar/Snackbar.js

@@ -1,99 +1,101 @@
-import { jsxs as n, Fragment as T, jsx as r } from "react/jsx-runtime";
-import { createPortal as w } from "react-dom";
-import { cn as z } from "../../utils/cn.js";
+import { jsxs as n, Fragment as z, jsx as r } from "react/jsx-runtime";
+import { createPortal as L } from "react-dom";
+import { cn as U } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as L } from "../../utils/generateBearId.utils.js";
-import { useBearId as U } from "../../utils/useBearId.js";
-import { Paper as X } from "../Paper/Paper.js";
+import { resolveBearId as X } from "../../utils/generateBearId.utils.js";
+import { useBearId as Z } from "../../utils/useBearId.js";
+import { getBearLiveRegionProps as j } from "../../utils/liveRegion.utils.js";
+import { Paper as H } from "../Paper/Paper.js";
 import { Flex as d } from "../Flex/Flex.js";
-import { Typography as S } from "../Typography/Typography.js";
-import { Progress as Z } from "../Progress/Progress.js";
-import { CloseButton as j } from "../CloseButton/CloseButton.js";
-import { SNACKBAR_DEFAULT_AUTO_HIDE_MS as H, SNACKBAR_DEFAULT_OFFSET_X as G, SNACKBAR_DEFAULT_OFFSET_Y as M, SNACKBAR_BACKDROP_Z_INDEX as V, SNACKBAR_SIZE_PADDING as Y, SNACKBAR_SURFACE_CLASSES as q, SNACKBAR_ROOT_CLASS as J, SNACKBAR_Z_INDEX as Q } from "./Snackbar.const.js";
-import { useSnackbar as W } from "./hooks/useSnackbar.js";
-const $ = (i, o, a, t) => {
-  const e = { zIndex: Q };
+import { Typography as A } from "../Typography/Typography.js";
+import { Progress as G } from "../Progress/Progress.js";
+import { CloseButton as M } from "../CloseButton/CloseButton.js";
+import { SNACKBAR_DEFAULT_AUTO_HIDE_MS as V, SNACKBAR_DEFAULT_OFFSET_X as Y, SNACKBAR_DEFAULT_OFFSET_Y as q, SNACKBAR_BACKDROP_Z_INDEX as J, SNACKBAR_SIZE_PADDING as Q, SNACKBAR_SURFACE_CLASSES as W, SNACKBAR_ROOT_CLASS as $, SNACKBAR_Z_INDEX as ee } from "./Snackbar.const.js";
+import { useSnackbar as re } from "./hooks/useSnackbar.js";
+const oe = (i, o, a, t) => {
+  const e = { zIndex: ee };
   return i === "top" ? e.top = t : e.bottom = t, o === "left" ? (e.left = a, e.right = "auto") : o === "right" ? (e.right = a, e.left = "auto") : (e.left = "50%", e.right = "auto", e.transform = "translateX(-50%)"), e;
-}, be = (i) => {
+}, ge = (i) => {
   const {
     open: o,
     message: a,
     description: t,
-    action: e,
-    autoHideDuration: g = H,
+    severity: e = "default",
+    action: m,
+    autoHideDuration: h = V,
     onClose: l,
-    anchorOrigin: m = { vertical: "bottom", horizontal: "center" },
-    offsetX: A = G,
-    offsetY: h = M,
-    size: B = "md",
-    progress: N = null,
-    progressPosition: u = "bottom",
-    progressColor: C = "default",
-    countdownProgress: k = !1,
+    anchorOrigin: f = { vertical: "bottom", horizontal: "center" },
+    offsetX: B = Y,
+    offsetY: N = q,
+    size: C = "md",
+    progress: k = null,
+    progressPosition: p = "bottom",
+    progressColor: v = "default",
+    countdownProgress: R = !1,
     showCloseButton: O,
     closeOnClickOutside: x,
     container: D,
     id: I,
-    testId: R,
-    className: v
-  } = i, E = U("Snackbar"), y = L(I, E), b = D ?? (typeof document < "u" ? document.body : null), s = !!l, F = O ?? s, f = x ?? s, { surfaceRef: K, progressValue: p } = W({
+    testId: y,
+    className: E
+  } = i, F = Z("Snackbar"), P = X(I, F), u = D ?? (typeof document < "u" ? document.body : null), s = !!l, K = O ?? s, b = x ?? s, { surfaceRef: T, progressValue: _ } = re({
     open: o,
-    autoHideDuration: g,
+    autoHideDuration: h,
     onClose: l,
-    countdownProgress: k,
-    staticProgress: N,
-    closeOnClickOutside: f
+    countdownProgress: R,
+    staticProgress: k,
+    closeOnClickOutside: b
   });
-  if (!o || !b)
+  if (!o || !u)
     return null;
-  const c = typeof p == "number", _ = c ? /* @__PURE__ */ r(
-    Z,
+  const g = j(e), c = typeof _ == "number", S = c ? /* @__PURE__ */ r(
+    G,
     {
-      value: p,
+      value: _,
       size: "sm",
-      color: C,
+      color: v,
       className: "Bear-Snackbar__progress"
     }
-  ) : null, P = /* @__PURE__ */ n(T, { children: [
-    f && s && /* @__PURE__ */ r(
+  ) : null, w = /* @__PURE__ */ n(z, { children: [
+    b && s && /* @__PURE__ */ r(
       "div",
       {
         className: "Bear-Snackbar__backdrop bear-fixed bear-inset-0",
-        style: { zIndex: V },
+        style: { zIndex: J },
         "aria-hidden": !0
       }
     ),
     /* @__PURE__ */ n(
-      X,
+      H,
       {
-        ref: K,
-        id: y,
-        "data-testid": R,
-        role: "status",
-        "aria-live": "polite",
+        ref: T,
+        id: P,
+        "data-testid": y,
+        role: g.role,
+        "aria-live": g["aria-live"],
         elevation: 4,
         rounded: "lg",
         padding: "none",
         background: "transparent",
-        className: z(
-          J,
-          q,
+        className: U(
+          $,
+          W,
           "bear-fixed bear-flex bear-flex-col bear-overflow-hidden",
           "bear-border bear-border-[var(--bear-border-default)]",
-          Y[B],
-          v
+          Q[C],
+          E
         ),
-        style: $(m.vertical, m.horizontal, A, h),
+        style: oe(f.vertical, f.horizontal, B, N),
         children: [
-          c && u === "top" && _,
+          c && p === "top" && S,
           /* @__PURE__ */ n(d, { className: "Bear-Snackbar__content bear-w-full", align: "center", gap: 3, children: [
             /* @__PURE__ */ n(d, { direction: "column", className: "Bear-Snackbar__text bear-flex-1 bear-min-w-0", gap: 1, children: [
-              a && /* @__PURE__ */ r(S, { variant: "body2", className: "Bear-Snackbar__message", children: a }),
-              t && /* @__PURE__ */ r(S, { variant: "caption", color: "muted", className: "Bear-Snackbar__description", children: t })
+              a && /* @__PURE__ */ r(A, { variant: "body2", className: "Bear-Snackbar__message", children: a }),
+              t && /* @__PURE__ */ r(A, { variant: "caption", color: "muted", className: "Bear-Snackbar__description", children: t })
             ] }),
-            e && /* @__PURE__ */ r(d, { className: "Bear-Snackbar__action bear-shrink-0", align: "center", children: e }),
-            F && s && /* @__PURE__ */ r(
-              j,
+            m && /* @__PURE__ */ r(d, { className: "Bear-Snackbar__action bear-shrink-0", align: "center", children: m }),
+            K && s && /* @__PURE__ */ r(
+              M,
               {
                 size: "sm",
                 onClick: l,
@@ -102,13 +104,13 @@ const $ = (i, o, a, t) => {
               }
             )
           ] }),
-          c && u === "bottom" && _
+          c && p === "bottom" && S
         ]
       }
     )
   ] });
-  return w(P, b);
+  return L(w, u);
 };
 export {
-  be as Snackbar
+  ge as Snackbar
 };

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

@@ -5,10 +5,12 @@ export type SnackbarAnchorOriginHorizontal = 'left' | 'center' | 'right';
 export type SnackbarProgressPosition = 'top' | 'bottom';
 export type SnackbarSize = Extract<BearSize, 'sm' | 'md' | 'lg'>;
 export type SnackbarProgressColor = 'default' | 'success' | 'warning' | 'danger' | 'info';
+export type SnackbarSeverity = 'success' | 'info' | 'warning' | 'error' | 'default';
 export interface SnackbarProps {
     open: boolean;
     message?: ReactNode;
     description?: ReactNode;
+    severity?: SnackbarSeverity;
     action?: ReactNode;
     autoHideDuration?: number | null;
     onClose?: () => void;

package/dist/components/Stepper/Stepper.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),J=require("../../context/BearProvider.cjs"),Q=require("../../utils/maxVisible.utils.cjs"),c=require("../../utils/cn.cjs"),F=require("../Typography/Typography.cjs"),ee=require("../Dropdown/Dropdown.cjs"),re=require("../Icon/index.cjs"),r=require("./Stepper.const.cjs"),m=require("./Stepper.utils.cjs"),ne=1200,te=16,se=640,H=3,oe=()=>n.jsx("svg",{width:r.CHECK_ICON_SIZE,height:r.CHECK_ICON_SIZE,viewBox:r.CHECK_ICON_VIEWBOX,fill:"none",stroke:"currentColor",strokeWidth:"3",children:n.jsx("polyline",{points:r.CHECK_ICON_POINTS})}),ie=()=>n.jsxs("svg",{width:r.ERROR_ICON_SIZE,height:r.ERROR_ICON_SIZE,viewBox:r.ERROR_ICON_VIEWBOX,fill:"none",stroke:"currentColor",strokeWidth:"3",children:[n.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),n.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),U=d.forwardRef(({steps:o,activeStep:_,onStepClick:S,orientation:W=r.DEFAULT_ORIENTATION,size:A=r.DEFAULT_SIZE,showNumbers:D=r.DEFAULT_SHOW_NUMBERS,clickable:g=r.DEFAULT_CLICKABLE,showConnectors:M=r.DEFAULT_SHOW_CONNECTORS,connectorStyle:R=r.DEFAULT_CONNECTOR_STYLE,alternativeLabel:L=r.DEFAULT_ALTERNATIVE_LABEL,completedIcon:V,errorIcon:q,labelTypographyProps:Z,descriptionTypographyProps:z,maxVisibleSteps:C,testId:K,className:k,...X},$)=>{const f=J.useBearThemeOptional(),[O,G]=d.useState(()=>typeof window<"u"?window.innerWidth:ne);d.useEffect(()=>{const e=()=>G(window.innerWidth);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const h=d.useMemo(()=>{if(C!=null)return Q.resolveMaxVisible(C,{width:O,theme:f});if(O<se&&o.length>H)return H},[C,O,f,o.length]),E=W==="horizontal",p=r.STEP_INDICATOR_SIZES[A],v=r.STEP_LABEL_SIZES[A],T=E&&h!=null&&o.length>h,{visibleIndices:j,leftHidden:x,rightHidden:N}=d.useMemo(()=>{if(!T||h==null)return{visibleIndices:o.map((a,I)=>I),leftHidden:[],rightHidden:[]};const e=h,t=Math.floor(e/2),s=Math.max(0,Math.min(_-t,o.length-e)),i=Array.from({length:e},(a,I)=>s+I),l=[],y=[];for(let a=0;a<s;a++)l.push(a);for(let a=s+e;a<o.length;a++)y.push(a);return{visibleIndices:i,leftHidden:l,rightHidden:y}},[T,h,o,_]),b=(e,t,s)=>{const i=r.STEP_STATUS_CLASSES[s],l=m.resolveIndicatorContent(e,t,s,D,V,q,n.jsx(oe,{}),n.jsx(ie,{}));return n.jsx("div",{className:c.cn(r.STEP_INDICATOR_BASE,p,i.indicator,g&&!e.disabled&&"cursor-pointer hover:scale-105"),onClick:()=>{g&&!e.disabled&&S&&S(t)},children:l})},u=(e,t)=>{if(!M||t)return null;const s=e<_;return E?n.jsx("div",{className:c.cn("Bear-Stepper__connector flex-1 self-center mx-1","h-0.5 min-w-[12px] transition-colors",s?r.CONNECTOR_STATUS.completed:r.CONNECTOR_STATUS.pending,R==="dashed"&&"border-t-2 border-dashed bg-transparent")}):n.jsx("div",{className:c.cn(r.CONNECTOR_BASE,r.CONNECTOR_VERTICAL,s?r.CONNECTOR_STATUS.completed:r.CONNECTOR_STATUS.pending,R==="dashed"&&"border-t-2 border-dashed bg-transparent")})},w=(e,t)=>{const s=r.STEP_STATUS_CLASSES[t],i={...Z,...e.labelTypographyProps},l={...z,...e.descriptionTypographyProps};return n.jsxs(n.Fragment,{children:[n.jsx(F.Typography,{variant:"body2",...i,className:c.cn(r.STEP_LABEL_BASE,v.label,s.label,i==null?void 0:i.className),children:e.label}),e.description&&n.jsx(F.Typography,{variant:"caption",...l,className:c.cn(r.STEP_DESCRIPTION_CLASSES,v.description,l==null?void 0:l.className),children:e.description})]})},B=(e,t)=>{const s=m.resolveStepStatus(e,t,_);return n.jsxs("div",{className:c.cn("Bear-Stepper__content flex shrink-0",L?"flex-col items-center":"items-center gap-2"),children:[b(e,t,s),n.jsx("div",{className:c.cn(L&&"text-center mt-2","whitespace-nowrap"),children:w(e,s)})]})},Y=(e,t)=>{const s=m.resolveStepStatus(e,t,_);return n.jsxs(n.Fragment,{children:[n.jsx("div",{className:"flex-shrink-0 mr-4",children:b(e,t,s)}),n.jsxs("div",{className:"flex-1 pt-0.5",children:[w(e,s),e.content&&s==="active"&&n.jsx("div",{className:"mt-4",children:e.content})]})]})},P=(e,t)=>n.jsx("div",{className:"Bear-Stepper__overflow shrink-0",children:n.jsx(ee.Dropdown,{placement:"bottom-start",closeOnSelect:!0,trigger:n.jsx("button",{type:"button",className:c.cn(r.STEP_INDICATOR_BASE,p,r.STEP_STATUS_CLASSES.pending.indicator,"bear-cursor-pointer bear-border-0"),"aria-label":t==="left"?r.OVERFLOW_LEFT_LABEL:r.OVERFLOW_RIGHT_LABEL,children:n.jsx(re.BearIcons.MoreHorizIcon,{size:te})}),items:e.map(s=>({key:`step-${s}`,label:o[s].label,disabled:o[s].disabled,onClick:()=>{o[s].disabled||S==null||S(s)}}))})},`overflow-${t}`);return n.jsxs("div",{ref:$,className:c.cn(r.STEPPER_BASE_CLASSES,E?r.STEPPER_HORIZONTAL_CLASSES:r.STEPPER_VERTICAL_CLASSES,k),"data-testid":K,...X,children:[E&&!T&&o.map((e,t)=>n.jsxs(d.Fragment,{children:[B(e,t),u(t,t===o.length-1)]},t)),E&&T&&n.jsxs(n.Fragment,{children:[x.length>0&&n.jsxs(n.Fragment,{children:[P(x,"left"),u(-1,!1)]}),j.map((e,t)=>{const s=o[e],i=t===j.length-1&&N.length===0;return n.jsxs(d.Fragment,{children:[B(s,e),u(e,i)]},e)}),N.length>0&&P(N,"right")]}),!E&&o.map((e,t)=>n.jsxs("div",{className:c.cn("Bear-Stepper__step",r.STEP_WRAPPER_VERTICAL),children:[Y(e,t),u(t,t===o.length-1)]},t))]})});U.displayName="Stepper";exports.Stepper=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("react"),H=require("../../context/BearProvider.cjs"),ee=require("../../utils/maxVisible.utils.cjs"),c=require("../../utils/cn.cjs"),U=require("../Typography/Typography.cjs"),re=require("../Dropdown/Dropdown.cjs"),ne=require("../Icon/index.cjs"),r=require("./Stepper.const.cjs"),m=require("./Stepper.utils.cjs"),te=1200,se=16,oe=640,W=3,ie=()=>n.jsx("svg",{width:r.CHECK_ICON_SIZE,height:r.CHECK_ICON_SIZE,viewBox:r.CHECK_ICON_VIEWBOX,fill:"none",stroke:"currentColor",strokeWidth:"3",children:n.jsx("polyline",{points:r.CHECK_ICON_POINTS})}),ce=()=>n.jsxs("svg",{width:r.ERROR_ICON_SIZE,height:r.ERROR_ICON_SIZE,viewBox:r.ERROR_ICON_VIEWBOX,fill:"none",stroke:"currentColor",strokeWidth:"3",children:[n.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),n.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),D=E.forwardRef(({steps:o,activeStep:_,onStepClick:S,orientation:M=r.DEFAULT_ORIENTATION,size:A=r.DEFAULT_SIZE,showNumbers:V=r.DEFAULT_SHOW_NUMBERS,clickable:g=r.DEFAULT_CLICKABLE,showConnectors:q=r.DEFAULT_SHOW_CONNECTORS,connectorStyle:R=r.DEFAULT_CONNECTOR_STYLE,alternativeLabel:L=r.DEFAULT_ALTERNATIVE_LABEL,completedIcon:Z,errorIcon:z,labelTypographyProps:K,descriptionTypographyProps:k,maxVisibleSteps:C,testId:X,className:$,...G},Y)=>{const f=H.useBearThemeOptional(),{direction:p}=H.useBearDirectionOptional(),[O,J]=E.useState(()=>typeof window<"u"?window.innerWidth:te);E.useEffect(()=>{const e=()=>J(window.innerWidth);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]);const h=E.useMemo(()=>{if(C!=null)return ee.resolveMaxVisible(C,{width:O,theme:f});if(O<oe&&o.length>W)return W},[C,O,f,o.length]),d=M==="horizontal",v=r.STEP_INDICATOR_SIZES[A],x=r.STEP_LABEL_SIZES[A],T=d&&h!=null&&o.length>h,{visibleIndices:j,leftHidden:b,rightHidden:N}=E.useMemo(()=>{if(!T||h==null)return{visibleIndices:o.map((a,I)=>I),leftHidden:[],rightHidden:[]};const e=h,t=Math.floor(e/2),s=Math.max(0,Math.min(_-t,o.length-e)),i=Array.from({length:e},(a,I)=>s+I),l=[],F=[];for(let a=0;a<s;a++)l.push(a);for(let a=s+e;a<o.length;a++)F.push(a);return{visibleIndices:i,leftHidden:l,rightHidden:F}},[T,h,o,_]),w=(e,t,s)=>{const i=r.STEP_STATUS_CLASSES[s],l=m.resolveIndicatorContent(e,t,s,V,Z,z,n.jsx(ie,{}),n.jsx(ce,{}));return n.jsx("div",{className:c.cn(r.STEP_INDICATOR_BASE,v,i.indicator,g&&!e.disabled&&"cursor-pointer hover:scale-105"),onClick:()=>{g&&!e.disabled&&S&&S(t)},children:l})},u=(e,t)=>{if(!q||t)return null;const s=e<_;return d?n.jsx("div",{className:c.cn("Bear-Stepper__connector flex-1 self-center mx-1","h-0.5 min-w-[12px] transition-colors",s?r.CONNECTOR_STATUS.completed:r.CONNECTOR_STATUS.pending,R==="dashed"&&"border-t-2 border-dashed bg-transparent")}):n.jsx("div",{className:c.cn(r.CONNECTOR_BASE,r.CONNECTOR_VERTICAL,s?r.CONNECTOR_STATUS.completed:r.CONNECTOR_STATUS.pending,R==="dashed"&&"border-t-2 border-dashed bg-transparent")})},B=(e,t)=>{const s=r.STEP_STATUS_CLASSES[t],i={...K,...e.labelTypographyProps},l={...k,...e.descriptionTypographyProps};return n.jsxs(n.Fragment,{children:[n.jsx(U.Typography,{variant:"body2",...i,className:c.cn(r.STEP_LABEL_BASE,x.label,s.label,i==null?void 0:i.className),children:e.label}),e.description&&n.jsx(U.Typography,{variant:"caption",...l,className:c.cn(r.STEP_DESCRIPTION_CLASSES,x.description,l==null?void 0:l.className),children:e.description})]})},P=(e,t)=>{const s=m.resolveStepStatus(e,t,_);return n.jsxs("div",{className:c.cn("Bear-Stepper__content flex shrink-0",L?"flex-col items-center":"items-center gap-2"),children:[w(e,t,s),n.jsx("div",{className:c.cn(L&&"text-center mt-2","whitespace-nowrap"),children:B(e,s)})]})},Q=(e,t)=>{const s=m.resolveStepStatus(e,t,_);return n.jsxs(n.Fragment,{children:[n.jsx("div",{className:"flex-shrink-0 mr-4",children:w(e,t,s)}),n.jsxs("div",{className:"flex-1 pt-0.5",children:[B(e,s),e.content&&s==="active"&&n.jsx("div",{className:"mt-4",children:e.content})]})]})},y=(e,t)=>n.jsx("div",{className:"Bear-Stepper__overflow shrink-0",children:n.jsx(re.Dropdown,{placement:"bottom-start",closeOnSelect:!0,trigger:n.jsx("button",{type:"button",className:c.cn(r.STEP_INDICATOR_BASE,v,r.STEP_STATUS_CLASSES.pending.indicator,"bear-cursor-pointer bear-border-0"),"aria-label":t==="left"?r.OVERFLOW_LEFT_LABEL:r.OVERFLOW_RIGHT_LABEL,children:n.jsx(ne.BearIcons.MoreHorizIcon,{size:se})}),items:e.map(s=>({key:`step-${s}`,label:o[s].label,disabled:o[s].disabled,onClick:()=>{o[s].disabled||S==null||S(s)}}))})},`overflow-${t}`);return n.jsxs("div",{ref:Y,dir:p,className:c.cn(r.STEPPER_BASE_CLASSES,d?r.STEPPER_HORIZONTAL_CLASSES:r.STEPPER_VERTICAL_CLASSES,p==="rtl"&&d&&"bear-flex-row-reverse",$),"data-testid":X,...G,children:[d&&!T&&o.map((e,t)=>n.jsxs(E.Fragment,{children:[P(e,t),u(t,t===o.length-1)]},t)),d&&T&&n.jsxs(n.Fragment,{children:[b.length>0&&n.jsxs(n.Fragment,{children:[y(b,"left"),u(-1,!1)]}),j.map((e,t)=>{const s=o[e],i=t===j.length-1&&N.length===0;return n.jsxs(E.Fragment,{children:[P(s,e),u(e,i)]},e)}),N.length>0&&y(N,"right")]}),!d&&o.map((e,t)=>n.jsxs("div",{className:c.cn("Bear-Stepper__step",r.STEP_WRAPPER_VERTICAL),children:[Q(e,t),u(t,t===o.length-1)]},t))]})});D.displayName="Stepper";exports.Stepper=D;

package/dist/components/Stepper/Stepper.js

@@ -1,75 +1,75 @@
 import { jsxs as i, Fragment as f, jsx as t } from "react/jsx-runtime";
-import D, { forwardRef as oe, useState as ie, useEffect as le, useMemo as U } from "react";
-import { useBearThemeOptional as se } from "../../context/BearProvider.js";
-import { resolveMaxVisible as ae } from "../../utils/maxVisible.utils.js";
+import U, { forwardRef as ie, useState as le, useEffect as se, useMemo as V } from "react";
+import { useBearThemeOptional as ae, useBearDirectionOptional as ce } from "../../context/BearProvider.js";
+import { resolveMaxVisible as de } from "../../utils/maxVisible.utils.js";
 import { cn as s } from "../../utils/cn.js";
-import { Typography as V } from "../Typography/Typography.js";
-import { Dropdown as ce } from "../Dropdown/Dropdown.js";
-import { BearIcons as de } from "../Icon/index.js";
-import { STEP_WRAPPER_VERTICAL as Ee, STEPPER_HORIZONTAL_CLASSES as he, STEPPER_VERTICAL_CLASSES as _e, STEPPER_BASE_CLASSES as me, DEFAULT_ORIENTATION as Te, DEFAULT_SIZE as fe, DEFAULT_SHOW_NUMBERS as Se, DEFAULT_CLICKABLE as Ie, DEFAULT_SHOW_CONNECTORS as Oe, DEFAULT_CONNECTOR_STYLE as Ce, DEFAULT_ALTERNATIVE_LABEL as Ne, CONNECTOR_STATUS as S, CONNECTOR_VERTICAL as ue, CONNECTOR_BASE as Ae, OVERFLOW_LEFT_LABEL as Le, OVERFLOW_RIGHT_LABEL as ge, STEP_STATUS_CLASSES as u, STEP_INDICATOR_SIZES as Re, STEP_INDICATOR_BASE as M, STEP_LABEL_SIZES as pe, STEP_LABEL_BASE as ve, STEP_DESCRIPTION_CLASSES as we, ERROR_ICON_VIEWBOX as be, ERROR_ICON_SIZE as z, CHECK_ICON_VIEWBOX as Be, CHECK_ICON_SIZE as Z, CHECK_ICON_POINTS as Pe } from "./Stepper.const.js";
-import { resolveStepStatus as K, resolveIndicatorContent as ye } from "./Stepper.utils.js";
-const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", { width: Z, height: Z, viewBox: Be, fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ t("polyline", { points: Pe }) }), Ue = () => /* @__PURE__ */ i("svg", { width: z, height: z, viewBox: be, fill: "none", stroke: "currentColor", strokeWidth: "3", children: [
+import { Typography as M } from "../Typography/Typography.js";
+import { Dropdown as Ee } from "../Dropdown/Dropdown.js";
+import { BearIcons as he } from "../Icon/index.js";
+import { STEP_WRAPPER_VERTICAL as _e, STEPPER_HORIZONTAL_CLASSES as me, STEPPER_VERTICAL_CLASSES as Te, STEPPER_BASE_CLASSES as fe, DEFAULT_ORIENTATION as Se, DEFAULT_SIZE as Ie, DEFAULT_SHOW_NUMBERS as Oe, DEFAULT_CLICKABLE as Ce, DEFAULT_SHOW_CONNECTORS as Ne, DEFAULT_CONNECTOR_STYLE as ue, DEFAULT_ALTERNATIVE_LABEL as Ae, CONNECTOR_STATUS as S, CONNECTOR_VERTICAL as Le, CONNECTOR_BASE as ge, OVERFLOW_LEFT_LABEL as Re, OVERFLOW_RIGHT_LABEL as pe, STEP_STATUS_CLASSES as u, STEP_INDICATOR_SIZES as ve, STEP_INDICATOR_BASE as z, STEP_LABEL_SIZES as we, STEP_LABEL_BASE as be, STEP_DESCRIPTION_CLASSES as Be, ERROR_ICON_VIEWBOX as Pe, ERROR_ICON_SIZE as Z, CHECK_ICON_VIEWBOX as ye, CHECK_ICON_SIZE as K, CHECK_ICON_POINTS as He } from "./Stepper.const.js";
+import { resolveStepStatus as k, resolveIndicatorContent as We } from "./Stepper.utils.js";
+const Fe = 1200, De = 16, Ue = 640, x = 3, Ve = () => /* @__PURE__ */ t("svg", { width: K, height: K, viewBox: ye, fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ t("polyline", { points: He }) }), Me = () => /* @__PURE__ */ i("svg", { width: Z, height: Z, viewBox: Pe, fill: "none", stroke: "currentColor", strokeWidth: "3", children: [
   /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
   /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), Ve = oe(
+] }), ze = ie(
   ({
     steps: o,
     activeStep: E,
     onStepClick: h,
-    orientation: X = Te,
-    size: A = fe,
-    showNumbers: j = Se,
-    clickable: L = Ie,
-    showConnectors: x = Oe,
-    connectorStyle: g = Ce,
-    alternativeLabel: R = Ne,
-    completedIcon: $,
-    errorIcon: G,
-    labelTypographyProps: Y,
-    descriptionTypographyProps: q,
+    orientation: X = Se,
+    size: A = Ie,
+    showNumbers: j = Oe,
+    clickable: L = Ce,
+    showConnectors: $ = Ne,
+    connectorStyle: g = ue,
+    alternativeLabel: R = Ae,
+    completedIcon: G,
+    errorIcon: Y,
+    labelTypographyProps: q,
+    descriptionTypographyProps: J,
     maxVisibleSteps: I,
-    testId: J,
-    className: Q,
-    ...ee
-  }, re) => {
-    const p = se(), [O, ne] = ie(() => typeof window < "u" ? window.innerWidth : He);
-    le(() => {
-      const e = () => ne(window.innerWidth);
+    testId: Q,
+    className: ee,
+    ...re
+  }, ne) => {
+    const p = ae(), { direction: v } = ce(), [O, te] = le(() => typeof window < "u" ? window.innerWidth : Fe);
+    se(() => {
+      const e = () => te(window.innerWidth);
       return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
     }, []);
-    const _ = U(() => {
+    const _ = V(() => {
       if (I != null)
-        return ae(I, { width: O, theme: p });
-      if (O < Fe && o.length > k)
-        return k;
-    }, [I, O, p, o.length]), d = X === "horizontal", v = Re[A], w = pe[A], m = d && _ != null && o.length > _, { visibleIndices: b, leftHidden: B, rightHidden: C } = U(() => {
+        return de(I, { width: O, theme: p });
+      if (O < Ue && o.length > x)
+        return x;
+    }, [I, O, p, o.length]), d = X === "horizontal", w = ve[A], b = we[A], m = d && _ != null && o.length > _, { visibleIndices: B, leftHidden: P, rightHidden: C } = V(() => {
       if (!m || _ == null)
         return {
           visibleIndices: o.map((c, N) => N),
           leftHidden: [],
           rightHidden: []
         };
-      const e = _, r = Math.floor(e / 2), n = Math.max(0, Math.min(E - r, o.length - e)), l = Array.from({ length: e }, (c, N) => n + N), a = [], F = [];
+      const e = _, r = Math.floor(e / 2), n = Math.max(0, Math.min(E - r, o.length - e)), l = Array.from({ length: e }, (c, N) => n + N), a = [], D = [];
       for (let c = 0; c < n; c++) a.push(c);
-      for (let c = n + e; c < o.length; c++) F.push(c);
-      return { visibleIndices: l, leftHidden: a, rightHidden: F };
-    }, [m, _, o, E]), P = (e, r, n) => {
-      const l = u[n], a = ye(
+      for (let c = n + e; c < o.length; c++) D.push(c);
+      return { visibleIndices: l, leftHidden: a, rightHidden: D };
+    }, [m, _, o, E]), y = (e, r, n) => {
+      const l = u[n], a = We(
         e,
         r,
         n,
         j,
-        $,
         G,
-        /* @__PURE__ */ t(De, {}),
-        /* @__PURE__ */ t(Ue, {})
+        Y,
+        /* @__PURE__ */ t(Ve, {}),
+        /* @__PURE__ */ t(Me, {})
       );
       return /* @__PURE__ */ t(
         "div",
         {
           className: s(
-            M,
-            v,
+            z,
+            w,
             l.indicator,
             L && !e.disabled && "cursor-pointer hover:scale-105"
           ),
@@ -80,7 +80,7 @@ const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", {
         }
       );
     }, T = (e, r) => {
-      if (!x || r) return null;
+      if (!$ || r) return null;
       const n = e < E;
       return d ? /* @__PURE__ */ t(
         "div",
@@ -96,52 +96,52 @@ const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", {
         "div",
         {
           className: s(
-            Ae,
-            ue,
+            ge,
+            Le,
             n ? S.completed : S.pending,
             g === "dashed" && "border-t-2 border-dashed bg-transparent"
           )
         }
       );
-    }, y = (e, r) => {
-      const n = u[r], l = { ...Y, ...e.labelTypographyProps }, a = { ...q, ...e.descriptionTypographyProps };
+    }, H = (e, r) => {
+      const n = u[r], l = { ...q, ...e.labelTypographyProps }, a = { ...J, ...e.descriptionTypographyProps };
       return /* @__PURE__ */ i(f, { children: [
         /* @__PURE__ */ t(
-          V,
+          M,
           {
             variant: "body2",
             ...l,
-            className: s(ve, w.label, n.label, l == null ? void 0 : l.className),
+            className: s(be, b.label, n.label, l == null ? void 0 : l.className),
             children: e.label
           }
         ),
         e.description && /* @__PURE__ */ t(
-          V,
+          M,
           {
             variant: "caption",
             ...a,
-            className: s(we, w.description, a == null ? void 0 : a.className),
+            className: s(Be, b.description, a == null ? void 0 : a.className),
             children: e.description
           }
         )
       ] });
-    }, H = (e, r) => {
-      const n = K(e, r, E);
+    }, W = (e, r) => {
+      const n = k(e, r, E);
       return /* @__PURE__ */ i("div", { className: s("Bear-Stepper__content flex shrink-0", R ? "flex-col items-center" : "items-center gap-2"), children: [
-        P(e, r, n),
-        /* @__PURE__ */ t("div", { className: s(R && "text-center mt-2", "whitespace-nowrap"), children: y(e, n) })
+        y(e, r, n),
+        /* @__PURE__ */ t("div", { className: s(R && "text-center mt-2", "whitespace-nowrap"), children: H(e, n) })
       ] });
-    }, te = (e, r) => {
-      const n = K(e, r, E);
+    }, oe = (e, r) => {
+      const n = k(e, r, E);
       return /* @__PURE__ */ i(f, { children: [
-        /* @__PURE__ */ t("div", { className: "flex-shrink-0 mr-4", children: P(e, r, n) }),
+        /* @__PURE__ */ t("div", { className: "flex-shrink-0 mr-4", children: y(e, r, n) }),
         /* @__PURE__ */ i("div", { className: "flex-1 pt-0.5", children: [
-          y(e, n),
+          H(e, n),
           e.content && n === "active" && /* @__PURE__ */ t("div", { className: "mt-4", children: e.content })
         ] })
       ] });
-    }, W = (e, r) => /* @__PURE__ */ t("div", { className: "Bear-Stepper__overflow shrink-0", children: /* @__PURE__ */ t(
-      ce,
+    }, F = (e, r) => /* @__PURE__ */ t("div", { className: "Bear-Stepper__overflow shrink-0", children: /* @__PURE__ */ t(
+      Ee,
       {
         placement: "bottom-start",
         closeOnSelect: !0,
@@ -150,13 +150,13 @@ const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", {
           {
             type: "button",
             className: s(
-              M,
-              v,
+              z,
+              w,
               u.pending.indicator,
               "bear-cursor-pointer bear-border-0"
             ),
-            "aria-label": r === "left" ? Le : ge,
-            children: /* @__PURE__ */ t(de.MoreHorizIcon, { size: We })
+            "aria-label": r === "left" ? Re : pe,
+            children: /* @__PURE__ */ t(he.MoreHorizIcon, { size: De })
           }
         ),
         items: e.map((n) => ({
@@ -172,31 +172,37 @@ const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", {
     return /* @__PURE__ */ i(
       "div",
       {
-        ref: re,
-        className: s(me, d ? he : _e, Q),
-        "data-testid": J,
-        ...ee,
+        ref: ne,
+        dir: v,
+        className: s(
+          fe,
+          d ? me : Te,
+          v === "rtl" && d && "bear-flex-row-reverse",
+          ee
+        ),
+        "data-testid": Q,
+        ...re,
         children: [
-          d && !m && o.map((e, r) => /* @__PURE__ */ i(D.Fragment, { children: [
-            H(e, r),
+          d && !m && o.map((e, r) => /* @__PURE__ */ i(U.Fragment, { children: [
+            W(e, r),
             T(r, r === o.length - 1)
           ] }, r)),
           d && m && /* @__PURE__ */ i(f, { children: [
-            B.length > 0 && /* @__PURE__ */ i(f, { children: [
-              W(B, "left"),
+            P.length > 0 && /* @__PURE__ */ i(f, { children: [
+              F(P, "left"),
               T(-1, !1)
             ] }),
-            b.map((e, r) => {
-              const n = o[e], l = r === b.length - 1 && C.length === 0;
-              return /* @__PURE__ */ i(D.Fragment, { children: [
-                H(n, e),
+            B.map((e, r) => {
+              const n = o[e], l = r === B.length - 1 && C.length === 0;
+              return /* @__PURE__ */ i(U.Fragment, { children: [
+                W(n, e),
                 T(e, l)
               ] }, e);
             }),
-            C.length > 0 && W(C, "right")
+            C.length > 0 && F(C, "right")
           ] }),
-          !d && o.map((e, r) => /* @__PURE__ */ i("div", { className: s("Bear-Stepper__step", Ee), children: [
-            te(e, r),
+          !d && o.map((e, r) => /* @__PURE__ */ i("div", { className: s("Bear-Stepper__step", _e), children: [
+            oe(e, r),
             T(r, r === o.length - 1)
           ] }, r))
         ]
@@ -204,7 +210,7 @@ const He = 1200, We = 16, Fe = 640, k = 3, De = () => /* @__PURE__ */ t("svg", {
     );
   }
 );
-Ve.displayName = "Stepper";
+ze.displayName = "Stepper";
 export {
-  Ve as Stepper
+  ze as Stepper
 };

package/dist/components/Tabs/Tabs.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("react"),b=require("../../utils/cn.cjs"),x=u.createContext(null),T=({children:o,value:n,defaultTab:e,variant:c="line",onChange:a,className:l,testId:d})=>{const[t,r]=u.useState(e),i=n!==void 0,v=i?n:t,m=p=>{i||r(p),a==null||a(p)};return s.jsx(x.Provider,{value:{activeTab:v,setActiveTab:m,variant:c},children:s.jsx("div",{className:b.cn("Bear-Tabs",l),"data-testid":d,children:o})})},y=({id:o,children:n,disabled:e=!1,icon:c})=>{const a=u.useContext(x);if(!a)throw new Error("Tab must be used within Tabs");const{activeTab:l,setActiveTab:d,variant:t}=a,r=l===o,i="bear-flex bear-items-center bear-gap-2 bear-px-4 bear-py-2 bear-text-sm bear-font-medium bear-transition-colors",v={line:b.cn("bear-border-b-2 bear--mb-px",r?"bear-border-primary-500 bear-text-primary-600 dark:bear-text-primary-400":"bear-border-transparent hover:bear-border-[var(--bear-border-default)]"),pills:b.cn("bear-rounded-md",r&&"bear-shadow-sm"),enclosed:b.cn("bear-rounded-t-lg bear-border bear-border-transparent",r&&"bear--mb-px")},m=e?void 0:r?t==="pills"?{backgroundColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:t==="enclosed"?{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",borderBottomColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:void 0:{color:"var(--bear-text-muted)"};return s.jsxs("button",{role:"tab","aria-selected":r,disabled:e,onClick:()=>!e&&d(o),className:b.cn("Bear-Tabs__tab",r&&"Bear-Tabs__tab--active",i,v[t],!r&&"hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]",e&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),style:m,children:[c&&s.jsx("span",{className:"Bear-Tabs__tab-icon",children:c}),s.jsx("span",{className:"Bear-Tabs__tab-label",children:n})]})};exports.Tab=y;exports.Tabs=T;exports.TabsContext=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react"),t=require("../../utils/cn.cjs"),S=require("../../utils/generateBearId.utils.cjs"),g=require("../../utils/useBearId.cjs"),f=require("../../context/BearProvider.cjs"),B=require("./Tabs.const.cjs"),x=p.createContext(null),I=({children:b,value:n,defaultTab:r,variant:c="line",onChange:a,className:i,testId:l,id:s})=>{const d=g.useBearId("Tabs"),e=S.resolveBearId(s,d),{density:u}=f.useBearDensityOptional(),m=u==="compact",[v,T]=p.useState(r),_=n!==void 0,C=_?n:v,A=y=>{_||T(y),a==null||a(y)};return o.jsx(x.Provider,{value:{activeTab:C,setActiveTab:A,variant:c,compact:m},children:o.jsx("div",{id:e,"data-testid":l,className:t.cn("Bear-Tabs",i),children:b})})},j=({id:b,children:n,disabled:r=!1,icon:c})=>{const a=p.useContext(x);if(!a)throw new Error("Tab must be used within Tabs");const{activeTab:i,setActiveTab:l,variant:s,compact:d}=a,e=i===b,u=d?B.TABS_TAB_PADDING_COMPACT_CLASSES:B.TABS_TAB_PADDING_CLASSES,m=t.cn("bear-flex bear-items-center bear-gap-2 bear-text-sm bear-font-medium bear-transition-colors",u),v={line:t.cn("bear-border-b-2 bear--mb-px",e?"bear-border-primary-500 bear-text-primary-600 dark:bear-text-primary-400":"bear-border-transparent hover:bear-border-[var(--bear-border-default)]"),pills:t.cn("bear-rounded-md",e&&"bear-shadow-sm"),enclosed:t.cn("bear-rounded-t-lg bear-border bear-border-transparent",e&&"bear--mb-px")},T=r?void 0:e?s==="pills"?{backgroundColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:s==="enclosed"?{backgroundColor:"var(--bear-bg-primary)",borderColor:"var(--bear-border-default)",borderBottomColor:"var(--bear-bg-primary)",color:"var(--bear-text-primary)"}:void 0:{color:"var(--bear-text-muted)"};return o.jsxs("button",{role:"tab","aria-selected":e,disabled:r,onClick:()=>!r&&l(b),className:t.cn("Bear-Tabs__tab",e&&"Bear-Tabs__tab--active",m,v[s],!e&&"hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-[var(--bear-text-primary)]",r&&"Bear-Tabs__tab--disabled bear-opacity-50 bear-cursor-not-allowed"),style:T,children:[c&&o.jsx("span",{className:"Bear-Tabs__tab-icon",children:c}),o.jsx("span",{className:"Bear-Tabs__tab-label",children:n})]})};exports.Tab=j;exports.Tabs=I;exports.TabsContext=x;

package/dist/components/Tabs/Tabs.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="bear-px-4 bear-py-2",S="bear-px-3 bear-py-1";exports.TABS_TAB_PADDING_CLASSES=A;exports.TABS_TAB_PADDING_COMPACT_CLASSES=S;

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

@@ -1 +1,3 @@
 export declare const T_A_B_S_ROOT_CLASS = "Bear-Tabs";
+export declare const TABS_TAB_PADDING_CLASSES = "bear-px-4 bear-py-2";
+export declare const TABS_TAB_PADDING_COMPACT_CLASSES = "bear-px-3 bear-py-1";

package/dist/components/Tabs/Tabs.const.js

@@ -0,0 +1,5 @@
+const A = "bear-px-4 bear-py-2", S = "bear-px-3 bear-py-1";
+export {
+  A as TABS_TAB_PADDING_CLASSES,
+  S as TABS_TAB_PADDING_COMPACT_CLASSES
+};