@vkzstudio/muza-ui 1.0.5 → 1.0.7

package/dist/components/Select/Select.js

@@ -1,26 +1,27 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import m, { forwardRef as C, useMemo as V, useRef as N, useEffect as R } from "react";
-import { triggerWrapperVariants as A } from "./utils.js";
+import m, { forwardRef as A, useMemo as I, useRef as N, useEffect as R } from "react";
+import { triggerWrapperVariants as j } from "./utils.js";
+import { useMuzaTranslations as E } from "../../translations/TranslationContext.js";
 import { Typography as s } from "../Typography/Typography.js";
-import { DropdownMenu as I, DropdownMenuTrigger as j, DropdownMenuContent as E, DropdownMenuRadioGroup as _, DropdownMenuRadioItem as k } from "../DropdownMenu/DropdownMenu.js";
-import { AltArrowUpOutline as B } from "@solar-icons/react-perf";
-import { cn as F } from "../../utils/cn.js";
-const G = C(
-  (S, f) => {
-    const {
-      label: x,
-      hint: g,
-      error: h,
+import { DropdownMenu as P, DropdownMenuTrigger as _, DropdownMenuContent as k, DropdownMenuRadioGroup as B, DropdownMenuRadioItem as F } from "../DropdownMenu/DropdownMenu.js";
+import { AltArrowUpOutline as G } from "@solar-icons/react-perf";
+import { cn as L } from "../../utils/cn.js";
+const U = A(
+  (z, f) => {
+    const S = E(), {
+      label: h,
+      hint: x,
+      error: g,
       options: c,
-      onChange: i,
+      onChange: a,
       value: r,
-      disabled: a,
+      disabled: i,
       prefix: b,
-      size: z,
-      placeholder: w = "Select...",
-      shouldScrollToSelectedOption: v,
+      size: M,
+      placeholder: T,
+      shouldScrollToSelectedOption: w,
       collisionPadding: D
-    } = S, M = V(() => {
+    } = z, v = T ?? S.select.placeholder, O = I(() => {
       const e = r && c.find((l) => l.value === r);
       return e ? typeof e.label != "function" ? /* @__PURE__ */ t(
         s,
@@ -38,13 +39,13 @@ const G = C(
           className: "grow-1 fix-y-text truncate text-left text-comp-select-text-placeholder",
           weight: "regular",
           component: "span",
-          children: w
+          children: v
         }
       );
-    }, [c, r, w]), [o, O] = m.useState(!1), [y, T] = m.useState(0), d = m.useRef(!1), W = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? W;
+    }, [c, r, v]), [o, W] = m.useState(!1), [y, C] = m.useState(0), d = m.useRef(!1), V = N(null), u = N({}), n = (typeof f == "function" ? null : f) ?? V;
     return R(() => {
       const e = () => {
-        n.current && T(n.current.offsetWidth);
+        n.current && C(n.current.offsetWidth);
       };
       e();
       const l = new ResizeObserver(e);
@@ -53,47 +54,47 @@ const G = C(
       };
     }, [n]), R(() => {
       var e;
-      o && r && u.current[r] && v && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
-    }, [o, v, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
-      x && /* @__PURE__ */ t(
+      o && r && u.current[r] && w && ((e = u.current[r]) == null || e.scrollIntoView({ block: "nearest" }));
+    }, [o, w, r]), /* @__PURE__ */ p("div", { className: "flex flex-1 flex-col gap-sm", children: [
+      h && /* @__PURE__ */ t(
         s,
         {
           component: "label",
           size: "sm",
           weight: "regular",
           className: "text-comp-select-text-primary",
-          children: x
+          children: h
         }
       ),
       /* @__PURE__ */ p(
-        I,
+        P,
         {
           onOpenChange: (e) => {
-            O(e);
+            W(e);
           },
           children: [
-            /* @__PURE__ */ t(j, { disabled: a, asChild: !0, children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t(_, { disabled: i, asChild: !0, children: /* @__PURE__ */ t(
               "button",
               {
                 ref: n,
                 type: "button",
                 role: "input",
                 tabIndex: 0,
-                disabled: a,
-                className: A({ size: z, error: h, expanded: o }),
+                disabled: i,
+                className: j({ size: M, error: g, expanded: o }),
                 children: /* @__PURE__ */ p("div", { className: "flex min-w-0 flex-1 items-center gap-sm", children: [
                   b && /* @__PURE__ */ t(
                     "span",
                     {
-                      className: a ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
+                      className: i ? "text-comp-select-icon-disabled" : "text-comp-select-icon-brand-def",
                       children: b
                     }
                   ),
-                  M,
+                  O,
                   /* @__PURE__ */ t(
-                    B,
+                    G,
                     {
-                      className: F(
+                      className: L(
                         "transition-transform duration-200",
                         o ? "rotate-0" : "rotate-180"
                       )
@@ -103,7 +104,7 @@ const G = C(
               }
             ) }),
             /* @__PURE__ */ t(
-              E,
+              k,
               {
                 className: "mt-1",
                 style: {
@@ -114,14 +115,14 @@ const G = C(
                 },
                 collisionPadding: D,
                 children: /* @__PURE__ */ t(
-                  _,
+                  B,
                   {
                     value: r,
                     onValueChange: (e) => {
-                      d.current = !0, i == null || i(e);
+                      d.current = !0, a == null || a(e);
                     },
                     children: c.map((e) => /* @__PURE__ */ t(
-                      k,
+                      F,
                       {
                         value: e.value.toString(),
                         disabled: e.disabled,
@@ -140,20 +141,20 @@ const G = C(
           ]
         }
       ),
-      g && /* @__PURE__ */ t(
+      x && /* @__PURE__ */ t(
         s,
         {
           component: "p",
           size: "sm",
           weight: "regular",
-          className: h ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
-          children: g
+          className: g ? "text-comp-select-text-error" : "text-comp-select-text-secondary",
+          children: x
         }
       )
     ] });
   }
 );
-G.displayName = "Select";
+U.displayName = "Select";
 export {
-  G as Select
+  U as Select
 };

package/dist/components/Stepper/Stepper.d.ts

@@ -13,6 +13,6 @@ export interface StepperProps {
     className?: string;
     onLimitReached?: (limit: 'min' | 'max') => void;
 }
-declare const Stepper: ({ value, defaultValue, onChange, min, max, step, disabled, formatValue, incrementAriaLabel, decrementAriaLabel, className, onLimitReached, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stepper: ({ value, defaultValue, onChange, min, max, step, disabled, formatValue, incrementAriaLabel: incrementAriaLabelProp, decrementAriaLabel: decrementAriaLabelProp, className, onLimitReached, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export { Stepper };
 //# sourceMappingURL=Stepper.d.ts.map

package/dist/components/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAEvC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,OAAO,GAAI,8IAad,YAAY,4CA6Ed,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,YAAY;IAE3B,KAAK,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ,GAAG,CAAC,EAAE,MAAM,CAAA;IAEZ,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAEvC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAA;CAChD;AAED,QAAA,MAAM,OAAO,GAAI,8LAad,YAAY,4CAmFd,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Stepper/Stepper.js

@@ -1,84 +1,85 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
-import { useState as j, useEffect as n } from "react";
-import { StepperButton as v } from "./StepperButton.js";
-import { Typography as w } from "../Typography/Typography.js";
-import { cn as z } from "../../utils/cn.js";
-import { MinusCircleBold as D, AddCircleBold as A } from "@solar-icons/react-perf";
-const G = ({
-  value: d,
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
+import { useState as I, useEffect as M } from "react";
+import { StepperButton as b } from "./StepperButton.js";
+import { useMuzaTranslations as T } from "../../translations/TranslationContext.js";
+import { Typography as D } from "../Typography/Typography.js";
+import { cn as x } from "../../utils/cn.js";
+import { MinusCircleBold as E, AddCircleBold as Y } from "@solar-icons/react-perf";
+const P = ({
+  value: f,
   defaultValue: p,
   onChange: r,
-  min: c,
+  min: i,
   max: o,
-  step: N,
+  step: z,
   disabled: m,
-  formatValue: u,
-  incrementAriaLabel: b = "Increment",
-  decrementAriaLabel: y = "Decrement",
-  className: k,
-  onLimitReached: e
+  formatValue: d,
+  incrementAriaLabel: v,
+  decrementAriaLabel: A,
+  className: N,
+  onLimitReached: s
 }) => {
-  const i = d !== void 0, [S, f] = j(p ?? 0), s = i ? d : S, x = N ?? 1;
-  n(() => {
-    !i && p !== void 0 && f(p);
-  }, [p, i]);
+  const n = T(), y = v ?? n.stepper.incrementAriaLabel, k = A ?? n.stepper.decrementAriaLabel, c = f !== void 0, [S, a] = I(p ?? 0), e = c ? f : S, u = z ?? 1;
+  M(() => {
+    !c && p !== void 0 && a(p);
+  }, [p, c]);
   const B = () => {
     if (m) return;
-    const t = s - x;
-    if (c !== void 0 && t < c) {
-      e == null || e("min");
+    const t = e - u;
+    if (i !== void 0 && t < i) {
+      s == null || s("min");
       return;
     }
-    i || f(t), r == null || r(t);
-  }, I = () => {
+    c || a(t), r == null || r(t);
+  }, j = () => {
     if (m) return;
-    const t = s + x;
+    const t = e + u;
     if (o !== void 0 && t > o) {
-      e == null || e("max");
+      s == null || s("max");
       return;
     }
-    i || f(t), r == null || r(t);
+    c || a(t), r == null || r(t);
   };
-  return /* @__PURE__ */ a("div", { className: z("flex items-center gap-sm", k), children: [
+  return /* @__PURE__ */ w("div", { className: x("flex items-center gap-sm", N), children: [
     /* @__PURE__ */ l(
-      v,
+      b,
       {
-        ariaLabel: y,
+        ariaLabel: k,
         onClick: B,
-        disabled: m || c !== void 0 && s <= c,
+        disabled: m || i !== void 0 && e <= i,
         className: "size-comp-stepper-btn-size",
-        children: /* @__PURE__ */ l(D, { className: "size-full transition-colors" })
+        children: /* @__PURE__ */ l(E, { className: "size-full transition-colors" })
       }
     ),
     /* @__PURE__ */ l(
-      w,
+      D,
       {
         variant: "body",
         size: "base",
         weight: "medium",
         component: "span",
-        className: z(
+        className: x(
           "min-w-[1.75rem] text-center text-text-dark-primary-def",
           {
-            "text-text-dark-secondary": s === c
+            "text-text-dark-secondary": e === i
           }
         ),
         fixY: !0,
-        children: u ? u(s) : s
+        children: d ? d(e) : e
       }
     ),
     /* @__PURE__ */ l(
-      v,
+      b,
       {
-        ariaLabel: b,
-        onClick: I,
-        disabled: m || o !== void 0 && s >= o,
+        ariaLabel: y,
+        onClick: j,
+        disabled: m || o !== void 0 && e >= o,
         className: "size-comp-stepper-btn-size",
-        children: /* @__PURE__ */ l(A, { className: "size-full transition-colors" })
+        children: /* @__PURE__ */ l(Y, { className: "size-full transition-colors" })
       }
     )
   ] });
 };
 export {
-  G as Stepper
+  P as Stepper
 };

package/dist/components/SwipeButton/SwipeButton.d.ts

@@ -12,6 +12,6 @@ export interface SwipeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
     onResetComplete?: () => void;
     className?: string;
 }
-declare const SwipeButton: ({ text, successText, loadingText, variant, size, fullWidth, loading, success, disabled, danger, onSwipeComplete, reset, onResetComplete, className, }: SwipeButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const SwipeButton: ({ text, successText: successTextProp, loadingText: loadingTextProp, variant, size, fullWidth, loading, success, disabled, danger, onSwipeComplete, reset, onResetComplete, className, }: SwipeButtonProps) => import("react/jsx-runtime").JSX.Element;
 export { SwipeButton };
 //# sourceMappingURL=SwipeButton.d.ts.map

package/dist/components/SwipeButton/SwipeButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeButton.d.ts","sourceRoot":"","sources":["../../../src/components/SwipeButton/SwipeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAe5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,GAAI,uJAelB,gBAAgB,4CAiOlB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"SwipeButton.d.ts","sourceRoot":"","sources":["../../../src/components/SwipeButton/SwipeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAgB5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAE3D,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,WAAW,GAAI,yLAelB,gBAAgB,4CAsOlB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/SwipeButton/SwipeButton.js

@@ -1,131 +1,132 @@
-import { jsxs as g, jsx as o } from "react/jsx-runtime";
-import { useRef as D, useState as V, useEffect as N } from "react";
-import { SwipeLoadingIcon as A } from "./SwipeLoadingIcon.js";
-import { swipeButtonProgressVariants as $ } from "./swipeButtonProgressVariants.js";
-import { swipeButtonSliderVariants as F } from "./swipeButtonSliderVariants.js";
-import { swipeButtonVariants as S } from "./swipeButtonVariants.js";
-import { useDragControls as U } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
-import { useMotionValue as _ } from "../../node_modules/framer-motion/dist/es/value/use-motion-value.js";
-import { useTransform as b } from "../../node_modules/framer-motion/dist/es/value/use-transform.js";
-import { useMotionValueEvent as q } from "../../node_modules/framer-motion/dist/es/utils/use-motion-value-event.js";
-import { animate as f } from "../../node_modules/framer-motion/dist/es/animation/animate/index.js";
+import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { useRef as D, useState as B, useEffect as N } from "react";
+import { SwipeLoadingIcon as U } from "./SwipeLoadingIcon.js";
+import { swipeButtonProgressVariants as _ } from "./swipeButtonProgressVariants.js";
+import { swipeButtonSliderVariants as q } from "./swipeButtonSliderVariants.js";
+import { swipeButtonVariants as G } from "./swipeButtonVariants.js";
+import { useMuzaTranslations as H } from "../../translations/TranslationContext.js";
+import { useDragControls as J } from "../../node_modules/framer-motion/dist/es/gestures/drag/use-drag-controls.js";
+import { useMotionValue as Q } from "../../node_modules/framer-motion/dist/es/value/use-motion-value.js";
+import { useTransform as T } from "../../node_modules/framer-motion/dist/es/value/use-transform.js";
+import { useMotionValueEvent as X } from "../../node_modules/framer-motion/dist/es/utils/use-motion-value-event.js";
+import { animate as u } from "../../node_modules/framer-motion/dist/es/animation/animate/index.js";
 import { motion as E } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
-import { Typography as B } from "../Typography/Typography.js";
-import { DoubleArrowRight as G } from "../Icons/CustomIcons.js";
-import { cn as x } from "../../utils/cn.js";
-import { UnreadOutline as H } from "@solar-icons/react-perf";
-const pe = ({
-  text: I,
-  successText: O = "success",
-  loadingText: C = "loading",
+import { Typography as V } from "../Typography/Typography.js";
+import { DoubleArrowRight as Z } from "../Icons/CustomIcons.js";
+import { cn as y } from "../../utils/cn.js";
+import { UnreadOutline as ee } from "@solar-icons/react-perf";
+const ve = ({
+  text: z,
+  successText: L,
+  loadingText: M,
   variant: w = "primary",
-  size: s = "md",
-  fullWidth: M = !1,
+  size: o = "md",
+  fullWidth: A = !1,
   loading: t = !1,
-  success: a = !1,
+  success: n = !1,
   disabled: i = !1,
   danger: h = !1,
-  onSwipeComplete: u,
+  onSwipeComplete: f,
   reset: p,
-  onResetComplete: z,
-  className: R
+  onResetComplete: I,
+  className: C
 }) => {
-  const T = D(null), l = D(null), d = D(null), [n, j] = V(0), [y, c] = V(!1), v = U(), r = _(0), K = b(r, [0, n], [0, 1]), L = b(r, [0, n * 0.5], [1, 0]), P = b(
-    K,
+  const v = H(), O = L ?? v.swipeButton.successText, R = M ?? v.swipeButton.loadingText, j = v.swipeButton.processingAriaLabel, K = D(null), m = D(null), d = D(null), [a, W] = B(0), [x, l] = B(!1), g = J(), r = Q(0), Y = T(r, [0, a], [0, 1]), k = T(r, [0, a * 0.5], [1, 0]), P = T(
+    Y,
     (e) => `calc(${e}*(100% - var(--slider-size) - 2px) + var(--slider-size))`
-  ), m = !t && !a && !p || i;
+  ), c = !t && !n && !p || i;
   N(() => {
     const e = () => {
-      d.current && l.current && j(
-        l.current.offsetWidth - d.current.offsetWidth
+      d.current && m.current && W(
+        m.current.offsetWidth - d.current.offsetWidth
       );
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-  }, [d, l, s]), q(r, "change", (e) => {
-    if (m)
-      e / n >= 0.9 && !p ? c(!0) : c(!1);
+  }, [d, m, o]), X(r, "change", (e) => {
+    if (c)
+      e / a >= 0.9 && !p ? l(!0) : l(!1);
     else return;
   }), N(() => {
-    y && (f(r, n, {
+    x && (u(r, a, {
       type: "tween",
       duration: 0.15,
       ease: "easeOut"
-    }), v.cancel(), u == null || u());
-  }, [v, y, n, u, r]), N(() => {
-    p ? (c(!1), f(r, 0, {
+    }), g.cancel(), f == null || f());
+  }, [g, x, a, f, r]), N(() => {
+    p ? (l(!1), u(r, 0, {
       type: "tween",
       duration: 0.25,
       ease: "easeOut",
-      onComplete: z
-    })) : (a || t) && f(r, n, {
+      onComplete: I
+    })) : (n || t) && u(r, a, {
       type: "tween",
       duration: 0.15,
       ease: "easeOut"
     });
-  }, [p, t, n, a, z, r]);
-  const W = () => {
-    !m || y || f(r, 0, { type: "tween", duration: 0.25, ease: "easeOut" });
+  }, [p, t, a, n, I, r]);
+  const $ = () => {
+    !c || x || u(r, 0, { type: "tween", duration: 0.25, ease: "easeOut" });
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ b(
     "button",
     {
-      ref: T,
+      ref: K,
       tabIndex: i ? -1 : 0,
       role: "button",
-      "aria-label": a ? O : t ? "Processing..." : I,
+      "aria-label": n ? O : t ? j : z,
       "aria-disabled": !!i,
       "aria-busy": !!t,
       onKeyDown: (e) => {
-        m && (e.key === "Enter" || e.key === " ") && (y ? f(r, 0, {
+        c && (e.key === "Enter" || e.key === " ") && (x ? u(r, 0, {
           type: "tween",
           duration: 0.25,
           ease: "easeOut",
-          onComplete: () => c(!1)
-        }) : c(!0));
+          onComplete: () => l(!1)
+        }) : l(!0));
       },
       "data-danger": h,
       disabled: i,
-      className: x(
-        S({ variant: w, size: s, loading: t, fullWidth: M, disabled: i }),
-        R
+      className: y(
+        G({ variant: w, size: o, loading: t, fullWidth: A, disabled: i }),
+        C
       ),
       style: {
-        "--slider-size": `calc(var(--spacing-comp-button-h-${s === "md" ? "def" : s}) - 2px - 2*var(--spacing-comp-button-p-xxs))`
+        "--slider-size": `calc(var(--spacing-comp-button-h-${o === "md" ? "def" : o}) - 2px - 2*var(--spacing-comp-button-p-xxs))`
       },
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           E.div,
           {
-            style: { opacity: a || t ? 1 : L },
+            style: { opacity: n || t ? 1 : k },
             className: "pointer-events-none flex items-center justify-center",
-            children: /* @__PURE__ */ o(
-              B,
+            children: /* @__PURE__ */ s(
+              V,
               {
                 component: "span",
                 variant: "cta",
-                size: s === "sm" ? "sm" : "base",
+                size: o === "sm" ? "sm" : "base",
                 weight: "medium",
                 className: "relative fix-y-text",
                 fixY: !0,
-                children: I
+                children: z
               }
             )
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ b(
           "div",
           {
-            ref: l,
+            ref: m,
             className: "absolute inset-comp-button-p-xxs",
             children: [
-              /* @__PURE__ */ o(
+              /* @__PURE__ */ s(
                 E.div,
                 {
-                  className: x(
+                  className: y(
                     "absolute rounded-full",
-                    $({
+                    _({
                       variant: w,
-                      interactive: m,
+                      interactive: c,
                       danger: h,
                       disabled: i
                     })
@@ -133,24 +134,24 @@ const pe = ({
                   style: { width: P }
                 }
               ),
-              /* @__PURE__ */ g(
+              /* @__PURE__ */ b(
                 E.div,
                 {
                   ref: d,
-                  className: x(
-                    F({
+                  className: y(
+                    q({
                       variant: w,
-                      interactive: m,
+                      interactive: c,
                       danger: h
                     })
                   ),
                   style: { x: r, touchAction: "none" },
-                  dragControls: v,
-                  drag: m ? "x" : !1,
-                  dragConstraints: l,
+                  dragControls: g,
+                  drag: c ? "x" : !1,
+                  dragConstraints: m,
                   dragElastic: 0,
                   dragTransition: { power: 0, timeConstant: 0 },
-                  onDragEnd: W,
+                  onDragEnd: $,
                   animate: { rotate: t ? 360 : 0 },
                   transition: {
                     scale: { type: "tween", duration: 0.2 },
@@ -161,9 +162,9 @@ const pe = ({
                     } : { duration: 0.2 }
                   },
                   children: [
-                    a && /* @__PURE__ */ o(H, { className: "size-icon-small" }),
-                    t && !a && /* @__PURE__ */ o(A, { className: "size-icon-small" }),
-                    !t && !a && /* @__PURE__ */ o(G, { className: "size-icon-small" })
+                    n && /* @__PURE__ */ s(ee, { className: "size-icon-small" }),
+                    t && !n && /* @__PURE__ */ s(U, { className: "size-icon-small" }),
+                    !t && !n && /* @__PURE__ */ s(Z, { className: "size-icon-small" })
                   ]
                 }
               )
@@ -171,29 +172,29 @@ const pe = ({
           }
         ),
         [
-          { textContent: C, condition: t },
-          { textContent: O, condition: a }
+          { textContent: R, condition: t },
+          { textContent: O, condition: n }
         ].map(
-          ({ textContent: e, condition: Y }, k) => e && /* @__PURE__ */ o(
-            B,
+          ({ textContent: e, condition: F }, S) => e && /* @__PURE__ */ s(
+            V,
             {
               component: "span",
               variant: "cta",
-              size: s === "sm" ? "sm" : "base",
+              size: o === "sm" ? "sm" : "base",
               weight: "medium",
               fixY: !0,
-              className: x(
+              className: y(
                 "pointer-events-none absolute z-10 w-max",
                 "top-[50%] left-[calc(50%-var(--slider-size)/2))]",
                 "translate-x-[-50%] translate-y-[-50%]",
                 "transition-500 opacity-0 transition-opacity",
                 {
-                  "opacity-100": Y
+                  "opacity-100": F
                 }
               ),
               children: e
             },
-            k
+            S
           )
         )
       ]
@@ -201,5 +202,5 @@ const pe = ({
   );
 };
 export {
-  pe as SwipeButton
+  ve as SwipeButton
 };

package/dist/components/SwipeButton/SwipeButton.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { SwipeButtonProps } from './SwipeButton';
 declare const meta: {
     title: string;
-    component: ({ text, successText, loadingText, variant, size, fullWidth, loading, success, disabled, danger, onSwipeComplete, reset, onResetComplete, className, }: SwipeButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ text, successText: successTextProp, loadingText: loadingTextProp, variant, size, fullWidth, loading, success, disabled, danger, onSwipeComplete, reset, onResetComplete, className, }: SwipeButtonProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
         docs: {

package/dist/components/Typography/Typography.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export declare const typographyVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "caption" | "base" | "input" | null | undefined;
     weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
-    variant?: "body" | "title" | "paragraph" | "cta" | null | undefined;
+    variant?: "title" | "body" | "paragraph" | "cta" | null | undefined;
     uppercase?: boolean | null | undefined;
     fixY?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;