@szum-tech/design-system 3.9.0 → 3.10.1

package/dist/chunk-EUH466AL.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var React = require('react');
+var react = require('motion/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var cursorVariants = {
+  blinking: {
+    opacity: [0, 0, 1, 1],
+    transition: {
+      duration: 1,
+      repeat: Infinity,
+      repeatDelay: 0,
+      ease: "linear",
+      times: [0, 0.5, 0.5, 1]
+    }
+  }
+};
+var animationVariants = {
+  fadeIn: {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0 }
+  },
+  blurIn: {
+    hidden: { opacity: 0, filter: "blur(4px)" },
+    show: { opacity: 1, filter: "blur(0px)" },
+    exit: { opacity: 0, filter: "blur(4px)" }
+  },
+  blurInUp: {
+    hidden: { opacity: 0, y: 20, filter: "blur(4px)" },
+    show: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: { opacity: 0, y: -20, filter: "blur(4px)" }
+  },
+  blurInDown: {
+    hidden: { opacity: 0, y: -20, filter: "blur(4px)" },
+    show: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: { opacity: 0, y: 20, filter: "blur(4px)" }
+  },
+  slideUp: {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 }
+  },
+  slideDown: {
+    hidden: { opacity: 0, y: -20 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 20 }
+  },
+  slideLeft: {
+    hidden: { opacity: 0, x: 20 },
+    show: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -20 }
+  },
+  slideRight: {
+    hidden: { opacity: 0, x: -20 },
+    show: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 }
+  },
+  scaleUp: {
+    hidden: { opacity: 0, scale: 0.8 },
+    show: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.2 }
+  },
+  scaleDown: {
+    hidden: { opacity: 0, scale: 1.2 },
+    show: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8 }
+  }
+};
+function TypingText({
+  text,
+  texts,
+  speed = 100,
+  delay = 0,
+  showCursor = true,
+  cursorClassName = "",
+  cursor = "|",
+  loop = false,
+  pauseDuration = 2e3,
+  className,
+  onComplete,
+  startOnView = true,
+  once = false,
+  animation = "fadeIn",
+  inViewMargin,
+  ...props
+}) {
+  const ref = React__namespace.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React__namespace.useState(false);
+  const [displayText, setDisplayText] = React__namespace.useState("");
+  const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
+  const [isTyping, setIsTyping] = React__namespace.useState(false);
+  const [currentTextIndex, setCurrentTextIndex] = React__namespace.useState(0);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  const textArray = texts && texts.length > 0 ? texts : [text];
+  const currentText = textArray[currentTextIndex] ?? "";
+  React__namespace.useEffect(() => {
+    if (!shouldStart) return;
+    const timeout = setTimeout(() => {
+      setIsTyping(true);
+      setHasAnimated(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, shouldStart]);
+  React__namespace.useEffect(() => {
+    if (!isTyping) return;
+    if (currentIndex < currentText.length) {
+      const timeout = setTimeout(() => {
+        setDisplayText(currentText.slice(0, currentIndex + 1));
+        setCurrentIndex(currentIndex + 1);
+      }, speed);
+      return () => clearTimeout(timeout);
+    } else {
+      onComplete?.();
+      if (loop && texts && texts.length > 1) {
+        const timeout = setTimeout(() => {
+          setDisplayText("");
+          setCurrentIndex(0);
+          setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+        }, pauseDuration);
+        return () => clearTimeout(timeout);
+      }
+    }
+  }, [currentIndex, currentText, isTyping, speed, loop, texts, pauseDuration, onComplete]);
+  const selectedVariants = animationVariants[animation];
+  const MotionComponent = react.motion.span;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MotionComponent,
+    {
+      ref,
+      variants: selectedVariants,
+      initial: "hidden",
+      whileInView: startOnView ? "show" : void 0,
+      animate: startOnView ? void 0 : "show",
+      exit: "exit",
+      className: chunkH2BWO3SI_cjs.cn("whitespace-pre-wrap", className),
+      viewport: { once },
+      "data-slot": "typing-text",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+        displayText,
+        showCursor && /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.span,
+          {
+            variants: cursorVariants,
+            animate: "blinking",
+            className: chunkH2BWO3SI_cjs.cn("text-foreground ms-1 inline-block w-px font-normal select-none", cursorClassName),
+            children: cursor
+          }
+        )
+      ] })
+    }
+  );
+}
+
+exports.TypingText = TypingText;

package/dist/chunk-F7N6WQV6.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function Accordion({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Accordion.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Accordion.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: chunkH2BWO3SI_cjs.cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Accordion.Item,
+    {
+      "data-slot": "accordion-item",
+      className: chunkH2BWO3SI_cjs.cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;

package/dist/chunk-GYXQUTWZ.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var statusVariants = classVarianceAuthority.cva(
+  "inline-flex w-fit shrink-0 items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground",
+        success: "border-success/20 bg-success/10 text-success **:data-[slot=status-indicator]:bg-success",
+        error: "border-error/20 bg-error/10 text-error **:data-[slot=status-indicator]:bg-error",
+        warning: "border-warning/20 bg-warning/10 text-warning **:data-[slot=status-indicator]:bg-warning",
+        primary: "border-primary/20 bg-primary/10 text-primary **:data-[slot=status-indicator]:bg-primary "
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Status({ className, variant = "default", asChild, ...rootProps }) {
+  const RootPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RootPrimitive,
+    {
+      "data-slot": "status",
+      "data-variant": variant,
+      ...rootProps,
+      className: chunkH2BWO3SI_cjs.cn(statusVariants({ variant }), className)
+    }
+  );
+}
+function StatusIndicator(props) {
+  const { className, ...indicatorProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "status-indicator",
+      ...indicatorProps,
+      className: chunkH2BWO3SI_cjs.cn(
+        "relative flex size-2 shrink-0 rounded-full",
+        "before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-inherit",
+        "after:absolute after:inset-0.5 after:rounded-full after:bg-inherit",
+        className
+      )
+    }
+  );
+}
+function StatusLabel({ className, ...labelProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "status-label", ...labelProps, className: chunkH2BWO3SI_cjs.cn("leading-none", className) });
+}
+
+exports.Status = Status;
+exports.StatusIndicator = StatusIndicator;
+exports.StatusLabel = StatusLabel;

package/dist/chunk-IWF52DDE.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var statusVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground",
+        success: "border-success/20 bg-success/10 text-success **:data-[slot=status-indicator]:bg-success",
+        error: "border-error/20 bg-error/10 text-error **:data-[slot=status-indicator]:bg-error",
+        warning: "border-warning/20 bg-warning/10 text-warning **:data-[slot=status-indicator]:bg-warning",
+        primary: "border-primary/20 bg-primary/10 text-primary **:data-[slot=status-indicator]:bg-primary "
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Status({ className, variant = "default", asChild, ...rootProps }) {
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      "data-slot": "status",
+      "data-variant": variant,
+      ...rootProps,
+      className: cn(statusVariants({ variant }), className)
+    }
+  );
+}
+function StatusIndicator(props) {
+  const { className, ...indicatorProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "status-indicator",
+      ...indicatorProps,
+      className: cn(
+        "relative flex size-2 shrink-0 rounded-full",
+        "before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-inherit",
+        "after:absolute after:inset-0.5 after:rounded-full after:bg-inherit",
+        className
+      )
+    }
+  );
+}
+function StatusLabel({ className, ...labelProps }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "status-label", ...labelProps, className: cn("leading-none", className) });
+}
+
+export { Status, StatusIndicator, StatusLabel };

package/dist/{chunk-PHPJ54IC.js → chunk-JLKQ6WKK.js}

@@ -1,8 +1,8 @@
+import { useDirection, useComposedRefs } from './chunk-YSYZKK24.js';
 import { Spinner } from './chunk-P5IUC7HJ.js';
-import { useDirection, Direction } from './chunk-H5O5L6XT.js';
 import { useLazyRef, useIsomorphicLayoutEffect } from './chunk-DFD2WUOU.js';
 import { cn } from './chunk-ZD2QRAOX.js';
-import * as React6 from 'react';
+import * as React5 from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
@@ -36,9 +36,9 @@ var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
 };
 
 // src/components/stepper/stepper.context.tsx
-var StepperContext = React6.createContext(null);
+var StepperContext = React5.createContext(null);
 function useStepperContext(consumerName) {
-  const context = React6.useContext(StepperContext);
+  const context = React5.useContext(StepperContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -128,9 +128,9 @@ function createStepperStore(listenersRef, stateRef, onValueChange, onValueComple
   };
   return store;
 }
-var StepperStoreContext = React6.createContext(null);
+var StepperStoreContext = React5.createContext(null);
 function useStepperStoreContext(consumerName) {
-  const context = React6.useContext(StepperStoreContext);
+  const context = React5.useContext(StepperStoreContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -138,8 +138,8 @@ function useStepperStoreContext(consumerName) {
 }
 function useStepperStore(selector) {
   const store = useStepperStoreContext("useStore");
-  const getSnapshot = React6.useCallback(() => selector(store.getState()), [selector, store]);
-  return React6.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = React5.useCallback(() => selector(store.getState()), [selector, store]);
+  return React5.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function Stepper({
   value,
@@ -161,14 +161,14 @@ function Stepper({
   indicators = {},
   ...rootProps
 }) {
-  const id = React6.useId();
+  const id = React5.useId();
   const rootId = idProp ?? id;
   const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
   const stateRef = useLazyRef(() => ({
     steps: /* @__PURE__ */ new Map(),
     value: value ?? defaultValue
   }));
-  const store = React6.useMemo(
+  const store = React5.useMemo(
     () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
     [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
   );
@@ -178,7 +178,7 @@ function Stepper({
     }
   }, [value]);
   const dir = useDirection(dirProp);
-  const contextValue = React6.useMemo(
+  const contextValue = React5.useMemo(
     () => ({
       id: rootId,
       dir,
@@ -230,48 +230,14 @@ var StepperDataState = {
   ACTIVE: "active",
   COMPLETED: "completed"
 };
-var StepperFocusContext = React6.createContext(null);
+var StepperFocusContext = React5.createContext(null);
 function useStepperFocusContext(consumerName) {
-  const context = React6.useContext(StepperFocusContext);
+  const context = React5.useContext(StepperFocusContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
   }
   return context;
 }
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    return ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    let hasCleanup = false;
-    const cleanups = refs.map((ref) => {
-      const cleanup = setRef(ref, node);
-      if (!hasCleanup && typeof cleanup == "function") {
-        hasCleanup = true;
-      }
-      return cleanup;
-    });
-    if (hasCleanup) {
-      return () => {
-        for (let i = 0; i < cleanups.length; i++) {
-          const cleanup = cleanups[i];
-          if (typeof cleanup == "function") {
-            cleanup();
-          } else {
-            setRef(refs[i], null);
-          }
-        }
-      };
-    }
-  };
-}
-function useComposedRefs(...refs) {
-  return React6.useCallback(composeRefs(...refs), refs);
-}
 
 // src/components/stepper/stepper.utils.tsx
 function focusFirst(candidates, preventScroll = false) {
@@ -308,7 +274,7 @@ function wrapArray(array, startIndex) {
   return array.map((_, index) => array[(startIndex + index) % array.length]);
 }
 function getDirectionAwareKey(key, dir) {
-  if (dir !== Direction.RTL) return key;
+  if (dir !== "rtl") return key;
   return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
 }
 function getFocusIntent(event, dir, orientation) {
@@ -321,32 +287,32 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
   const context = useStepperContext(STEPPER_NAV_NAME);
   const orientation = context.orientation;
   const currentValue = useStepperStore((state) => state.value);
-  const [tabStopId, setTabStopId] = React6.useState(null);
-  const [isTabbingBackOut, setIsTabbingBackOut] = React6.useState(false);
-  const [focusableItemCount, setFocusableItemCount] = React6.useState(0);
-  const isClickFocusRef = React6.useRef(false);
-  const itemsRef = React6.useRef(/* @__PURE__ */ new Map());
-  const listRef = React6.useRef(null);
+  const [tabStopId, setTabStopId] = React5.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React5.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React5.useState(0);
+  const isClickFocusRef = React5.useRef(false);
+  const itemsRef = React5.useRef(/* @__PURE__ */ new Map());
+  const listRef = React5.useRef(null);
   const composedRef = useComposedRefs(ref, listRef);
-  const onItemFocus = React6.useCallback((tabStopId2) => {
+  const onItemFocus = React5.useCallback((tabStopId2) => {
     setTabStopId(tabStopId2);
   }, []);
-  const onItemShiftTab = React6.useCallback(() => {
+  const onItemShiftTab = React5.useCallback(() => {
     setIsTabbingBackOut(true);
   }, []);
-  const onFocusableItemAdd = React6.useCallback(() => {
+  const onFocusableItemAdd = React5.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount + 1);
   }, []);
-  const onFocusableItemRemove = React6.useCallback(() => {
+  const onFocusableItemRemove = React5.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount - 1);
   }, []);
-  const onItemRegister = React6.useCallback((item) => {
+  const onItemRegister = React5.useCallback((item) => {
     itemsRef.current.set(item.id, item);
   }, []);
-  const onItemUnregister = React6.useCallback((id) => {
+  const onItemUnregister = React5.useCallback((id) => {
     itemsRef.current.delete(id);
   }, []);
-  const getItems = React6.useCallback(() => {
+  const getItems = React5.useCallback(() => {
     return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
       const elementA = a.ref.current;
       const elementB = b.ref.current;
@@ -361,7 +327,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
       return 0;
     });
   }, []);
-  const onBlur = React6.useCallback(
+  const onBlur = React5.useCallback(
     (event) => {
       listProps.onBlur?.(event);
       if (event.defaultPrevented) return;
@@ -370,7 +336,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onBlur]
   );
-  const onFocus = React6.useCallback(
+  const onFocus = React5.useCallback(
     (event) => {
       listProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -395,7 +361,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
   );
-  const onMouseDown = React6.useCallback(
+  const onMouseDown = React5.useCallback(
     (event) => {
       listProps.onMouseDown?.(event);
       if (event.defaultPrevented) return;
@@ -404,7 +370,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onMouseDown]
   );
-  const focusContextValue = React6.useMemo(
+  const focusContextValue = React5.useMemo(
     () => ({
       tabStopId,
       onItemFocus,
@@ -450,9 +416,9 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     }
   ) });
 }
-var StepperItemContext = React6.createContext(null);
+var StepperItemContext = React5.createContext(null);
 function useStepperItemContext(consumerName) {
-  const context = React6.useContext(StepperItemContext);
+  const context = React5.useContext(StepperItemContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
   }
@@ -483,7 +449,7 @@ function StepperItem({
   const stepState = useStepperStore((state) => state.steps.get(itemValue));
   const steps = useStepperStore((state) => state.steps);
   const dataState = getDataState(value, itemValue, stepState, steps);
-  const itemContextValue = React6.useMemo(
+  const itemContextValue = React5.useMemo(
     () => ({
       value: itemValue,
       stepState
@@ -545,11 +511,11 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
   const isActive = value === itemValue;
   const isTabStop = focusContext.tabStopId === triggerId;
   const dataState = getDataState(value, itemValue, stepState, steps);
-  const triggerRef = React6.useRef(null);
+  const triggerRef = React5.useRef(null);
   const composedRef = useComposedRefs(ref, triggerRef);
-  const isArrowKeyPressedRef = React6.useRef(false);
-  const isMouseClickRef = React6.useRef(false);
-  React6.useEffect(() => {
+  const isArrowKeyPressedRef = React5.useRef(false);
+  const isMouseClickRef = React5.useRef(false);
+  React5.useEffect(() => {
     function onKeyDown2(event) {
       if (STEPPER_ARROW_KEYS.includes(event.key)) {
         isArrowKeyPressedRef.current = true;
@@ -583,7 +549,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       }
     };
   }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
-  const onClick = React6.useCallback(
+  const onClick = React5.useCallback(
     async (event) => {
       triggerProps.onClick?.(event);
       if (event.defaultPrevented) return;
@@ -597,7 +563,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [isDisabled, context.nonInteractive, store, itemValue, value, steps, triggerProps.onClick]
   );
-  const onFocus = React6.useCallback(
+  const onFocus = React5.useCallback(
     async (event) => {
       triggerProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -625,7 +591,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       store
     ]
   );
-  const onKeyDown = React6.useCallback(
+  const onKeyDown = React5.useCallback(
     async (event) => {
       triggerProps.onKeyDown?.(event);
       if (event.defaultPrevented) return;
@@ -695,7 +661,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       steps
     ]
   );
-  const onMouseDown = React6.useCallback(
+  const onMouseDown = React5.useCallback(
     (event) => {
       triggerProps.onMouseDown?.(event);
       if (event.defaultPrevented) {
@@ -856,7 +822,7 @@ function StepperNextTrigger({ asChild = false, onClick, disabled, ...props }) {
   const stepKeys = Array.from(steps.keys());
   const currentIndex = value ? stepKeys.indexOf(value) : -1;
   const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
-  const handleClick = React6.useCallback(
+  const handleClick = React5.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -889,7 +855,7 @@ function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
   const stepKeys = Array.from(steps.keys());
   const currentIndex = value ? stepKeys.indexOf(value) : -1;
   const isDisabled = disabled || currentIndex <= 0;
-  const handleClick = React6.useCallback(
+  const handleClick = React5.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -1036,15 +1002,15 @@ function ButtonContent({
   const isEndLoading = loading && loadingPosition === "end";
   const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : endIcon || null;
   const isCenterLoading = loading && loadingPosition === "center";
-  return asChild && React6.isValidElement(children) ? React6.cloneElement(
+  return asChild && React5.isValidElement(children) ? React5.cloneElement(
     children,
     props,
-    /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+    /* @__PURE__ */ jsxs(React5.Fragment, { children: [
       StartIcon,
-      isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : React6.isValidElement(children) ? children.props?.children : null,
+      isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : React5.isValidElement(children) ? children.props?.children : null,
       EndIcon
     ] })
-  ) : /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+  ) : /* @__PURE__ */ jsxs(React5.Fragment, { children: [
     StartIcon,
     isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : children,
     EndIcon