@forgedevstack/bear 1.2.4 → 1.2.6

package/dist/components/Select/Select.js

@@ -1,127 +1,203 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { useState as p, useRef as g, useCallback as I, useEffect as L } from "react";
-import { cn as o } from "../../utils/cn.js";
-import { useClickOutsideMultiple as M } from "../../hooks/useClickOutside.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useState as O, useRef as D, useCallback as X, useEffect as V } from "react";
+import { SELECT_DEFAULT_PLACEHOLDER as W, SELECT_SIZE_CLASSES as M, S_E_L_E_C_T_ROOT_CLASS as l, SELECT_MENU_Z_INDEX as Z, SELECT_MENU_EDGE_PAD_PX as $, SELECT_MENU_OFFSET_PX as G } from "./Select.const.js";
+import { ChevronDownIcon as H, CheckIcon as q } from "../Icon/index.js";
+import { Portal as J } from "../Portal/Portal.js";
+import { cn as b } from "../../utils/cn.js";
+import { resolveBearId as K } from "../../utils/generateBearId.utils.js";
+import { useBearId as Q } from "../../utils/useBearId.js";
+import { useClickOutsideMultiple as Y } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
 import "../FormControl/FormControl.context.js";
-import { ChevronDownIcon as P, CheckIcon as R } from "../Icon/index.js";
-import { Portal as S } from "../Portal/Portal.js";
-const B = {
-  sm: "bear-h-8 bear-text-sm bear-px-3",
-  md: "bear-h-10 bear-text-base bear-px-4",
-  lg: "bear-h-12 bear-text-lg bear-px-5"
-}, K = ({
-  options: m,
-  value: t,
-  onChange: s,
-  placeholder: y = "Select an option",
-  label: x,
-  error: n,
-  disabled: d = !1,
-  size: k = "md",
-  fullWidth: N = !1,
-  className: C
-}) => {
-  const [a, i] = p(!1), [c, E] = p({ top: 0, left: 0, width: 0 }), f = g(null), v = g(null), w = !!n, l = m.find((e) => e.value === t), j = I(() => i(!1), []);
-  M([f, v], j, { enabled: a });
-  const z = (e) => {
-    s == null || s(e), i(!1);
+const ue = (R) => {
+  const {
+    options: v,
+    value: a,
+    onChange: o,
+    placeholder: h = W,
+    label: c,
+    error: s,
+    disabled: d = !1,
+    size: y = "md",
+    fullWidth: C = !1,
+    displayEmpty: p = !1,
+    renderValue: N,
+    native: u = !1,
+    className: S,
+    id: A,
+    testId: L
+  } = R, j = Q("Select"), f = K(A, j), [t, x] = O(!1), [w, z] = O({
+    top: 0,
+    left: 0,
+    width: 0
+  }), E = D(null), k = D(null), m = !!s, g = v.find((e) => e.value === a), _ = a === void 0 || a === "", I = _ || p && _, B = X(() => x(!1), []);
+  Y([E, k], B, { enabled: t && !u });
+  const F = (e) => {
+    o == null || o(e), x(!1);
   };
-  return L(() => {
-    if (!a) return;
+  V(() => {
+    if (!t || u) return;
     const e = () => {
-      var h;
-      const b = (h = f.current) == null ? void 0 : h.getBoundingClientRect();
-      b && E({
-        top: b.bottom + 4,
-        left: Math.max(8, Math.min(b.left, window.innerWidth - b.width - 8)),
-        width: b.width
+      var T;
+      const i = (T = E.current) == null ? void 0 : T.getBoundingClientRect();
+      i && z({
+        top: i.bottom + G,
+        left: Math.max(
+          $,
+          Math.min(i.left, window.innerWidth - i.width - $)
+        ),
+        width: i.width
       });
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
       window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
     };
-  }, [a]), /* @__PURE__ */ u(
+  }, [t, u]);
+  const U = N && !_ ? N(a) : I || !g ? h : g.label, P = {
+    backgroundColor: "var(--bear-bg-primary)",
+    borderColor: m ? void 0 : "var(--bear-border-default)",
+    color: g && !I ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+  };
+  return u ? /* @__PURE__ */ n(
+    "div",
+    {
+      id: f,
+      "data-testid": L,
+      className: b(
+        l,
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        C && "bear-w-full"
+      ),
+      children: [
+        c && /* @__PURE__ */ r(
+          "label",
+          {
+            htmlFor: `${f}-native`,
+            className: "bear-text-sm bear-font-medium",
+            style: { color: "var(--bear-text-secondary)" },
+            children: c
+          }
+        ),
+        /* @__PURE__ */ n(
+          "select",
+          {
+            id: `${f}-native`,
+            disabled: d,
+            value: a ?? "",
+            onChange: (e) => o == null ? void 0 : o(e.target.value),
+            className: b(
+              `${l}__native`,
+              "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
+              "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
+              m ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              d && "bear-opacity-50 bear-cursor-not-allowed",
+              M[y],
+              S
+            ),
+            style: P,
+            "aria-invalid": m || void 0,
+            children: [
+              (p || h) && /* @__PURE__ */ r("option", { value: "", disabled: !p, children: h }),
+              v.map((e) => /* @__PURE__ */ r("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: s })
+      ]
+    }
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      ref: f,
-      className: o("bear-relative bear-flex bear-flex-col bear-gap-1.5", N && "bear-w-full"),
+      ref: E,
+      id: f,
+      "data-testid": L,
+      className: b(
+        l,
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        C && "bear-w-full"
+      ),
       children: [
-        x && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: x }),
-        /* @__PURE__ */ u(
+        c && /* @__PURE__ */ r("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: c }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             disabled: d,
-            onClick: () => !d && i(!a),
-            className: o(
+            onClick: () => !d && x(!t),
+            className: b(
+              `${l}__trigger`,
               "bear-flex bear-items-center bear-justify-between bear-w-full",
               "bear-rounded-lg bear-border bear-text-left bear-outline-none bear-transition-all bear-duration-200",
               "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
-              w ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              m ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
               d && "bear-opacity-50 bear-cursor-not-allowed",
-              B[k],
-              C
+              M[y],
+              S
             ),
-            style: {
-              backgroundColor: "var(--bear-bg-primary)",
-              borderColor: w ? void 0 : "var(--bear-border-default)",
-              color: l ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
-            },
+            style: P,
+            "aria-haspopup": "listbox",
+            "aria-expanded": t,
             children: [
-              /* @__PURE__ */ r("span", { children: (l == null ? void 0 : l.label) || y }),
+              /* @__PURE__ */ r("span", { className: `${l}__value`, children: U }),
               /* @__PURE__ */ r(
-                P,
+                H,
                 {
-                  className: o("bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform", a && "bear-rotate-180"),
+                  className: b(
+                    "bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",
+                    t && "bear-rotate-180"
+                  ),
                   style: { color: "var(--bear-text-muted)" }
                 }
               )
             ]
           }
         ),
-        a && /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(
+        t && /* @__PURE__ */ r(J, { children: /* @__PURE__ */ r(
           "div",
           {
-            ref: v,
-            className: "bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden",
+            ref: k,
+            className: `${l}__menu bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
             style: {
               backgroundColor: "var(--bear-bg-primary)",
               borderColor: "var(--bear-border-default)",
-              top: c.top,
-              left: c.left,
-              width: c.width,
-              zIndex: 1e4
+              top: w.top,
+              left: w.left,
+              width: w.width,
+              zIndex: Z
             },
-            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: m.map((e) => /* @__PURE__ */ u(
+            role: "listbox",
+            children: /* @__PURE__ */ r("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: v.map((e) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && z(e.value),
-                className: o(
+                onClick: () => !e.disabled && F(e.value),
+                role: "option",
+                "aria-selected": e.value === a,
+                className: b(
+                  `${l}__option`,
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
                   e.disabled && "bear-cursor-not-allowed",
-                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
-                  !e.disabled && e.value !== t && "hover:bear-bg-[var(--bear-bg-tertiary)]"
+                  e.value === a && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== a && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
-                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === t ? void 0 : { color: "var(--bear-text-secondary)" },
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === a ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ r(R, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === a && /* @__PURE__ */ r(q, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
         ) }),
-        n && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: n })
+        s && /* @__PURE__ */ r("p", { className: "bear-text-sm bear-text-red-500", children: s })
       ]
     }
   );
 };
 export {
-  K as Select
+  ue as Select
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),y=require("../../utils/cn.cjs"),T=require("../../utils/generateBearId.utils.cjs"),p={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},k=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),C={success:"bear-bg-green-500 bear-text-white",info:"bear-bg-blue-500 bear-text-white",warning:"bear-bg-amber-500 bear-text-white",error:"bear-bg-red-500 bear-text-white"},I={"top-left":"bear-top-4 bear-left-4","top-center":"bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2","top-right":"bear-top-4 bear-right-4","bottom-left":"bear-bottom-4 bear-left-4","bottom-center":"bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2","bottom-right":"bear-bottom-4 bear-right-4"},v=r.createContext(null),E=()=>{const i=r.useContext(v);if(!i)throw new Error("useToast must be used within a ToastProvider");return i},N=({message:i,title:c,severity:b="info",duration:o=5e3,closable:l=!0,icon:s,action:x,onClose:n,onRemove:u,className:g,autoScroll:f=!1})=>{const[j,m]=r.useState(!1),d=r.useRef(null);r.useEffect(()=>{f&&d.current&&d.current.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},[f]),r.useEffect(()=>{if(o>0){const h=setTimeout(()=>{m(!0),setTimeout(()=>{u(),n==null||n()},200)},o);return()=>clearTimeout(h)}},[o,u,n]);const t=()=>{m(!0),setTimeout(()=>{u(),n==null||n()},200)},a=()=>s===!1?null:s||p[b];return e.jsxs("div",{ref:d,role:"alert",className:y.cn("bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]","bear-transition-all bear-duration-200",j?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",C[b],g),children:[a()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:a()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[c&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:c}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:i})]}),x&&e.jsx("div",{className:"bear-flex-shrink-0",children:x}),l&&e.jsx("button",{type:"button",onClick:t,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(k,{})})]})},w=({position:i="top-right",maxToasts:c=5,className:b})=>{const o=r.useContext(v);if(!o)return null;const{_toasts:l,_removeToast:s}=o,x=l.slice(0,c);return e.jsx("div",{className:y.cn("bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",I[i],b),children:x.map(n=>e.jsx(N,{...n,onRemove:()=>s(n.id)},n.id))})},S=({children:i,position:c="top-right"})=>{const[b,o]=r.useState([]),l=r.useCallback(t=>{o(a=>a.filter(h=>h.id!==t))},[]),s=r.useCallback(t=>{const a=t.id||T.generateBearId("Toast");return o(h=>[...h,{...t,id:a}]),a},[]),x=r.useCallback(t=>s(t),[s]),n=r.useCallback((t,a)=>s({message:t,severity:"success",...a}),[s]),u=r.useCallback((t,a)=>s({message:t,severity:"info",...a}),[s]),g=r.useCallback((t,a)=>s({message:t,severity:"warning",...a}),[s]),f=r.useCallback((t,a)=>s({message:t,severity:"error",...a}),[s]),j=r.useCallback(t=>l(t),[l]),m=r.useCallback(()=>o([]),[]),d={toast:x,success:n,info:u,warning:g,error:f,dismiss:j,dismissAll:m,_toasts:b,_removeToast:l};return e.jsxs(v.Provider,{value:d,children:[i,e.jsx(w,{position:c})]})};exports.ToastContainer=w;exports.ToastProvider=S;exports.useToast=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),d=require("./Toast.const.cjs"),k=require("../../utils/cn.cjs"),C=require("../../utils/generateBearId.utils.cjs"),A={success:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e.jsx("polyline",{points:"22 4 12 14.01 9 11.01"})]}),info:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e.jsx("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),warning:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"}),e.jsx("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e.jsx("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),error:e.jsxs("svg",{width:20,height:20,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10"}),e.jsx("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e.jsx("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]})},E=()=>e.jsxs("svg",{width:16,height:16,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),O={success:"bear-bg-green-500 bear-text-white",info:"bear-bg-blue-500 bear-text-white",warning:"bear-bg-amber-500 bear-text-white",error:"bear-bg-red-500 bear-text-white"},R={"top-left":"bear-top-4 bear-left-4","top-center":"bear-top-4 bear-left-1/2 bear-transform bear--translate-x-1/2","top-right":"bear-top-4 bear-right-4","bottom-left":"bear-bottom-4 bear-left-4","bottom-center":"bear-bottom-4 bear-left-1/2 bear-transform bear--translate-x-1/2","bottom-right":"bear-bottom-4 bear-right-4"},_=t.createContext(null),L=()=>{const i=t.useContext(_);if(!i)throw new Error("useToast must be used within a ToastProvider");return i},N=({message:i,title:u,severity:c="info",duration:l=5e3,closable:b=!0,icon:o,action:a,onClose:n,onRemove:h,className:j,autoScroll:f=!1,pauseOnHover:T=!1})=>{const[v,m]=t.useState(!1),[g,r]=t.useState(!1),s=t.useRef(null),x=t.useRef(l),w=t.useRef(0);t.useEffect(()=>{f&&s.current&&s.current.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})},[f]),t.useEffect(()=>{if(l<=0||g)return;w.current=Date.now();const I=setTimeout(()=>{m(!0),setTimeout(()=>{h(),n==null||n()},d.TOAST_EXIT_MS)},x.current);return()=>{clearTimeout(I),x.current=Math.max(0,x.current-(Date.now()-w.current))}},[l,g,h,n]);const S=()=>{m(!0),setTimeout(()=>{h(),n==null||n()},d.TOAST_EXIT_MS)},y=()=>o===!1?null:o||A[c];return e.jsxs("div",{ref:s,role:d.TOAST_ARIA_ROLE[c],"aria-live":d.TOAST_ARIA_LIVE[c],"aria-atomic":"true",onMouseEnter:T?()=>r(!0):void 0,onMouseLeave:T?()=>r(!1):void 0,className:k.cn(d.T_O_A_S_T_ROOT_CLASS,"bear-flex bear-items-start bear-gap-3 bear-p-4 bear-rounded-lg bear-shadow-lg bear-min-w-[300px] bear-max-w-[400px]","bear-transition-all bear-duration-200",v?"bear-opacity-0 bear-translate-x-2":"bear-opacity-100 bear-translate-x-0",O[c],j),children:[y()&&e.jsx("span",{className:"bear-flex-shrink-0 bear-mt-0.5",children:y()}),e.jsxs("div",{className:"bear-flex-1 bear-min-w-0",children:[u&&e.jsx("div",{className:"bear-font-semibold bear-mb-0.5",children:u}),e.jsx("div",{className:"bear-text-sm bear-opacity-90",children:i})]}),a&&e.jsx("div",{className:"bear-flex-shrink-0",children:a}),b&&e.jsx("button",{type:"button",onClick:S,className:"bear-flex-shrink-0 bear-p-1 bear-rounded hover:bear-bg-white/20 bear-transition-colors bear-bg-transparent bear-border-none bear-cursor-pointer","aria-label":"Close",children:e.jsx(E,{})})]})},p=({position:i="top-right",maxToasts:u=5,className:c})=>{const l=t.useContext(_);if(!l)return null;const{_toasts:b,_removeToast:o}=l,a=b.slice(0,u);return e.jsx("div",{className:k.cn(`${d.T_O_A_S_T_ROOT_CLASS}__container`,"bear-fixed bear-z-[11000] bear-flex bear-flex-col bear-gap-2",R[i],c),"aria-relevant":"additions",children:a.map(n=>e.jsx(N,{...n,onRemove:()=>o(n.id)},n.id))})},M=({children:i,position:u="top-right",maxToasts:c})=>{const[l,b]=t.useState([]),o=t.useCallback(r=>{b(s=>s.filter(x=>x.id!==r))},[]),a=t.useCallback(r=>{const s=r.id||C.generateBearId("Toast");return b(x=>[...x,{...r,id:s}]),s},[]),n=t.useCallback(r=>a(r),[a]),h=t.useCallback((r,s)=>a({message:r,severity:"success",...s}),[a]),j=t.useCallback((r,s)=>a({message:r,severity:"info",...s}),[a]),f=t.useCallback((r,s)=>a({message:r,severity:"warning",...s}),[a]),T=t.useCallback((r,s)=>a({message:r,severity:"error",...s}),[a]),v=t.useCallback(r=>o(r),[o]),m=t.useCallback(()=>b([]),[]),g={toast:n,success:h,info:j,warning:f,error:T,dismiss:v,dismissAll:m,_toasts:l,_removeToast:o};return e.jsxs(_.Provider,{value:g,children:[i,e.jsx(p,{position:u,maxToasts:c})]})};exports.ToastContainer=p;exports.ToastProvider=M;exports.useToast=L;

package/dist/components/Toast/Toast.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="Bear-Toast",t={success:"polite",info:"polite",warning:"polite",error:"assertive"},T={success:"status",info:"status",warning:"status",error:"alert"},s=200;exports.TOAST_ARIA_LIVE=t;exports.TOAST_ARIA_ROLE=T;exports.TOAST_EXIT_MS=s;exports.T_O_A_S_T_ROOT_CLASS=_;