@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/stepper.js

@@ -0,0 +1,902 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import { Check } from "lucide-react";
+import * as React from "react";
+import { useComitorLabels } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+const ROOT_NAME = "Stepper";
+const LIST_NAME = "StepperList";
+const ITEM_NAME = "StepperItem";
+const TRIGGER_NAME = "StepperTrigger";
+const INDICATOR_NAME = "StepperIndicator";
+const SEPARATOR_NAME = "StepperSeparator";
+const TITLE_NAME = "StepperTitle";
+const DESCRIPTION_NAME = "StepperDescription";
+const CONTENT_NAME = "StepperContent";
+const PREV_NAME = "StepperPrev";
+const NEXT_NAME = "StepperNext";
+const ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+function getId(id, variant, value) {
+  return `${id}-${variant}-${value}`;
+}
+const MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+function getFocusIntent(event, dir, orientation) {
+  const key = getDirectionAwareKey(event.key, dir);
+  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
+  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
+  return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidateRef of candidates) {
+    const candidate = candidateRef.current;
+    if (!candidate) continue;
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getDataState(value, itemValue, stepState, steps, variant = "item") {
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = stepKeys.indexOf(itemValue);
+  if (stepState?.completed) return "completed";
+  if (value === itemValue) {
+    return variant === "separator" ? "inactive" : "active";
+  }
+  if (value) {
+    const activeIndex = stepKeys.indexOf(value);
+    if (activeIndex > currentIndex) return "completed";
+  }
+  return "inactive";
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector) {
+  const store = useStoreContext("useStepper");
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const StepperContext = React.createContext(null);
+function useStepperContext(consumerName) {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Stepper(props) {
+  const {
+    value,
+    defaultValue,
+    onValueChange,
+    onValueComplete,
+    onValueAdd,
+    onValueRemove,
+    onValidate,
+    dir: dirProp,
+    orientation = "horizontal",
+    activationMode = "automatic",
+    asChild,
+    disabled = false,
+    nonInteractive = false,
+    loop = false,
+    labels: labelsProp,
+    className,
+    id,
+    ...rootProps
+  } = props;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    steps: /* @__PURE__ */ new Map(),
+    value: value ?? defaultValue ?? ""
+  }));
+  const propsRef = useAsRef({
+    onValueChange,
+    onValueComplete,
+    onValueAdd,
+    onValueRemove,
+    onValidate
+  });
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        if (key === "value" && typeof value2 === "string") {
+          stateRef.current.value = value2;
+          propsRef.current.onValueChange?.(value2);
+        } else {
+          stateRef.current[key] = value2;
+        }
+        store.notify();
+      },
+      setStateWithValidation: async (value2, direction) => {
+        if (!propsRef.current.onValidate) {
+          store.setState("value", value2);
+          return true;
+        }
+        try {
+          const isValid = await propsRef.current.onValidate(value2, direction);
+          if (isValid) {
+            store.setState("value", value2);
+          }
+          return isValid;
+        } catch {
+          return false;
+        }
+      },
+      hasValidation: () => !!propsRef.current.onValidate,
+      /*
+       * ⚠ Khác thượng nguồn: mỗi lần thêm/bớt/sửa bước đều thay `steps` bằng một `Map` MỚI. Bản gốc
+       * sửa tại chỗ nên `useStore((s) => s.steps)` không bao giờ thấy tham chiếu mới — phần tử chỉ
+       * đọc `steps` (`StepperPrev`/`StepperNext`) không render lại sau khi các bước đăng ký, và
+       * nằm `disabled` cho tới lần đổi bước đầu tiên.
+       */
+      addStep: (value2, completed, disabled2) => {
+        const newStep = { value: value2, completed, disabled: disabled2 };
+        const steps = new Map(stateRef.current.steps);
+        steps.set(value2, newStep);
+        stateRef.current.steps = steps;
+        propsRef.current.onValueAdd?.(value2);
+        store.notify();
+      },
+      removeStep: (value2) => {
+        const steps = new Map(stateRef.current.steps);
+        steps.delete(value2);
+        stateRef.current.steps = steps;
+        propsRef.current.onValueRemove?.(value2);
+        store.notify();
+      },
+      setStep: (value2, completed, disabled2) => {
+        const step = stateRef.current.steps.get(value2);
+        if (step) {
+          const updatedStep = { ...step, completed, disabled: disabled2 };
+          const steps = new Map(stateRef.current.steps);
+          steps.set(value2, updatedStep);
+          stateRef.current.steps = steps;
+          if (completed !== step.completed) {
+            propsRef.current.onValueComplete?.(value2, completed);
+          }
+          store.notify();
+        }
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) {
+      store.setState("value", value);
+    }
+  }, [value]);
+  const dir = useDirection(dirProp);
+  const instanceId = React.useId();
+  const rootId = id ?? instanceId;
+  const labels = useComitorLabels("stepper", labelsProp);
+  const contextValue = React.useMemo(
+    () => ({
+      rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      nonInteractive,
+      loop,
+      labels
+    }),
+    [rootId, dir, orientation, activationMode, disabled, nonInteractive, loop, labels]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      id: rootId,
+      "data-disabled": disabled ? "" : void 0,
+      "data-orientation": orientation,
+      "data-slot": "stepper",
+      dir,
+      ...rootProps,
+      className: cn("flex gap-6", orientation === "horizontal" ? "w-full flex-col" : "flex-row", className)
+    }
+  ) }) });
+}
+const FocusContext = React.createContext(null);
+function useFocusContext(consumerName) {
+  const context = React.useContext(FocusContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${LIST_NAME}\``);
+  }
+  return context;
+}
+function StepperList(props) {
+  const {
+    asChild,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onMouseDown: onMouseDownProp,
+    className,
+    children,
+    ref,
+    ...listProps
+  } = props;
+  const context = useStepperContext(LIST_NAME);
+  const orientation = context.orientation;
+  const currentValue = useStore((state) => state.value);
+  const propsRef = useAsRef({
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onMouseDown: onMouseDownProp
+  });
+  const [tabStopId, setTabStopId] = React.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React.useState(0);
+  const isClickFocusRef = React.useRef(false);
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const listRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, listRef);
+  const onItemFocus = React.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React.useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = React.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;
+      if (!elementA || !elementB) return 0;
+      const position = elementA.compareDocumentPosition(elementB);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+  }, []);
+  const onBlur = React.useCallback(
+    (event) => {
+      propsRef.current.onBlur?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    [propsRef]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      propsRef.current.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      const isKeyboardFocus = !isClickFocusRef.current;
+      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+        const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+        event.currentTarget.dispatchEvent(entryFocusEvent);
+        if (!entryFocusEvent.defaultPrevented) {
+          const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+          const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
+          const activeItem = items.find((item) => item.active);
+          const currentItem = items.find((item) => item.id === tabStopId);
+          const candidateItems = [selectedItem, activeItem, currentItem, ...items].filter(Boolean);
+          const candidateRefs = candidateItems.map((item) => item.ref);
+          focusFirst(candidateRefs, false);
+        }
+      }
+      isClickFocusRef.current = false;
+    },
+    [propsRef, isTabbingBackOut, currentValue, tabStopId]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    [propsRef]
+  );
+  const focusContextValue = React.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const ListPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(FocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx(
+    ListPrimitive,
+    {
+      role: "tablist",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      "data-slot": "stepper-list",
+      dir: context.dir,
+      tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+      ...listProps,
+      ref: composedRef,
+      className: cn(
+        "flex outline-none",
+        orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start",
+        className
+      ),
+      onBlur,
+      onFocus,
+      onMouseDown,
+      children
+    }
+  ) });
+}
+const StepperItemContext = React.createContext(null);
+function useStepperItemContext(consumerName) {
+  const context = React.useContext(StepperItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function StepperItem(props) {
+  const {
+    value: itemValue,
+    completed = false,
+    disabled = false,
+    asChild,
+    className,
+    children,
+    ref,
+    ...itemProps
+  } = props;
+  const context = useStepperContext(ITEM_NAME);
+  const store = useStoreContext(ITEM_NAME);
+  const orientation = context.orientation;
+  const value = useStore((state) => state.value);
+  useIsomorphicLayoutEffect(() => {
+    store.addStep(itemValue, completed, disabled);
+    return () => {
+      store.removeStep(itemValue);
+    };
+  }, [itemValue]);
+  useIsomorphicLayoutEffect(() => {
+    store.setStep(itemValue, completed, disabled);
+  }, [itemValue, completed, disabled]);
+  const stepState = useStore((state) => state.steps.get(itemValue));
+  const steps = useStore((state) => state.steps);
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const itemContextValue = React.useMemo(
+    () => ({
+      value: itemValue,
+      stepState
+    }),
+    [itemValue, stepState]
+  );
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      "data-disabled": stepState?.disabled ? "" : void 0,
+      "data-orientation": orientation,
+      "data-state": dataState,
+      "data-slot": "stepper-item",
+      dir: context.dir,
+      ...itemProps,
+      ref,
+      className: cn(
+        "relative flex items-center not-last:flex-1",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function StepperTrigger(props) {
+  const {
+    asChild,
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onMouseDown: onMouseDownProp,
+    disabled,
+    className,
+    ref,
+    ...triggerProps
+  } = props;
+  const context = useStepperContext(TRIGGER_NAME);
+  const itemContext = useStepperItemContext(TRIGGER_NAME);
+  const itemValue = itemContext.value;
+  const store = useStoreContext(TRIGGER_NAME);
+  const focusContext = useFocusContext(TRIGGER_NAME);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const stepState = useStore((state) => state.steps.get(itemValue));
+  const propsRef = useAsRef({
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onMouseDown: onMouseDownProp
+  });
+  const activationMode = context.activationMode;
+  const orientation = context.orientation;
+  const loop = context.loop;
+  const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
+  const stepPosition = stepIndex + 1;
+  const stepCount = steps.size;
+  const triggerId = getId(context.rootId, "trigger", itemValue);
+  const contentId = getId(context.rootId, "content", itemValue);
+  const titleId = getId(context.rootId, "title", itemValue);
+  const descriptionId = getId(context.rootId, "description", itemValue);
+  const isDisabled = disabled || stepState?.disabled || context.disabled;
+  const isActive = value === itemValue;
+  const isTabStop = focusContext.tabStopId === triggerId;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const triggerRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, triggerRef);
+  const isArrowKeyPressedRef = React.useRef(false);
+  const isMouseClickRef = React.useRef(false);
+  React.useEffect(() => {
+    function onKeyDown2(event) {
+      if (ARROW_KEYS.includes(event.key)) {
+        isArrowKeyPressedRef.current = true;
+      }
+    }
+    function onKeyUp() {
+      isArrowKeyPressedRef.current = false;
+    }
+    document.addEventListener("keydown", onKeyDown2);
+    document.addEventListener("keyup", onKeyUp);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown2);
+      document.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    focusContext.onItemRegister({
+      id: triggerId,
+      ref: triggerRef,
+      value: itemValue,
+      active: isTabStop,
+      disabled: !!isDisabled
+    });
+    if (!isDisabled) {
+      focusContext.onFocusableItemAdd();
+    }
+    return () => {
+      focusContext.onItemUnregister(triggerId);
+      if (!isDisabled) {
+        focusContext.onFocusableItemRemove();
+      }
+    };
+  }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
+  const onClick = React.useCallback(
+    async (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      if (!isDisabled && !context.nonInteractive) {
+        const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
+        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+        await store.setStateWithValidation(itemValue, direction);
+      }
+    },
+    [isDisabled, context.nonInteractive, store, itemValue, value, steps, propsRef]
+  );
+  const onFocus = React.useCallback(
+    async (event) => {
+      propsRef.current.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      focusContext.onItemFocus(triggerId);
+      const isKeyboardFocus = !isMouseClickRef.current;
+      if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
+        const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+        const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
+        const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+        await store.setStateWithValidation(itemValue, direction);
+      }
+      isMouseClickRef.current = false;
+    },
+    [
+      focusContext,
+      triggerId,
+      activationMode,
+      isActive,
+      isDisabled,
+      context.nonInteractive,
+      store,
+      itemValue,
+      value,
+      steps,
+      propsRef
+    ]
+  );
+  const onKeyDown = React.useCallback(
+    async (event) => {
+      propsRef.current.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Enter" && context.nonInteractive) {
+        event.preventDefault();
+        return;
+      }
+      if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
+        event.preventDefault();
+        if (!isDisabled && triggerRef.current) {
+          triggerRef.current.click();
+        }
+        return;
+      }
+      if (event.key === "Tab" && event.shiftKey) {
+        focusContext.onItemShiftTab();
+        return;
+      }
+      if (event.target !== event.currentTarget) return;
+      const focusIntent = getFocusIntent(event, context.dir, orientation);
+      if (focusIntent !== void 0) {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+        event.preventDefault();
+        const items = focusContext.getItems().filter((item) => !item.disabled);
+        let candidateRefs = items.map((item) => item.ref);
+        if (focusIntent === "last") {
+          candidateRefs.reverse();
+        } else if (focusIntent === "prev" || focusIntent === "next") {
+          if (focusIntent === "prev") candidateRefs.reverse();
+          const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
+          candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
+        }
+        if (store.hasValidation() && candidateRefs.length > 0) {
+          const nextRef = candidateRefs[0];
+          const nextElement = nextRef?.current;
+          const nextItem = items.find((item) => item.ref.current === nextElement);
+          if (nextItem && nextItem.value !== itemValue) {
+            const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
+            const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
+            const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
+            if (direction === "next") {
+              const isValid = await store.setStateWithValidation(nextItem.value, direction);
+              if (!isValid) return;
+            } else {
+              store.setState("value", nextItem.value);
+            }
+            queueMicrotask(() => nextElement?.focus());
+            return;
+          }
+        }
+        queueMicrotask(() => focusFirst(candidateRefs));
+      }
+    },
+    [
+      focusContext,
+      context.nonInteractive,
+      context.dir,
+      activationMode,
+      orientation,
+      loop,
+      isDisabled,
+      store,
+      propsRef,
+      itemValue,
+      value,
+      steps
+    ]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      propsRef.current.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isMouseClickRef.current = true;
+      if (isDisabled) {
+        event.preventDefault();
+      } else {
+        focusContext.onItemFocus(triggerId);
+      }
+    },
+    [focusContext, triggerId, isDisabled, propsRef]
+  );
+  const TriggerPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    TriggerPrimitive,
+    {
+      id: triggerId,
+      role: "tab",
+      type: "button",
+      "aria-controls": contentId,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-describedby": `${titleId} ${descriptionId}`,
+      "aria-posinset": stepPosition,
+      "aria-selected": isActive,
+      "aria-setsize": stepCount,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-state": dataState,
+      "data-slot": "stepper-trigger",
+      disabled: isDisabled,
+      tabIndex: isTabStop ? 0 : -1,
+      ...triggerProps,
+      ref: composedRef,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn:
+         * - Vòng focus theo khuôn `Checkbox`/`RadioGroup` của gói, thay cho `ring-[3px]` của bản gốc.
+         * - Lỗi (`aria-invalid`) viền bằng `--destructive-ink` — VAI TRÒ viền trên nền trang (hợp
+         *   đồng §1 của docs/hop-dong-mau.md); bản gốc dùng `border-destructive` là token TÔ NỀN.
+         */
+        "inline-flex items-center justify-center gap-3 rounded-md text-left transition-all outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive-ink aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full",
+        className
+      ),
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseDown
+    }
+  );
+}
+function StepperIndicator(props) {
+  const { className, children, asChild, ref, ...indicatorProps } = props;
+  const context = useStepperContext(INDICATOR_NAME);
+  const itemContext = useStepperItemContext(INDICATOR_NAME);
+  const value = useStore((state) => state.value);
+  const itemValue = itemContext.value;
+  const stepState = useStore((state) => state.steps.get(itemValue));
+  const steps = useStore((state) => state.steps);
+  const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const IndicatorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    IndicatorPrimitive,
+    {
+      "data-state": dataState,
+      "data-slot": "stepper-indicator",
+      dir: context.dir,
+      ...indicatorProps,
+      ref,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn — màu đi qua token VAI TRÒ (docs/hop-dong-mau.md §1, §3):
+         * - Lúc nghỉ: viền `--control-edge` thay `border-muted`. Ô chỉ báo là HÌNH của chính nút
+         *   bước, nên viền của nó là viền control; `--muted` là token bề mặt, đem làm viền thì bảng
+         *   tương phản cao không kéo lên được. Ở bảng mặc định `--control-edge` nhạt đúng như bản gốc.
+         * - Đang làm/đã xong: nền ĐẶC `bg-primary` + chữ/tick `text-primary-foreground` (giữ nguyên),
+         *   nhưng viền là `--primary-ink` chứ không `border-primary`: nền vàng đặc chỉ ~1,86:1 với
+         *   nền trang, nên chính VIỀN mới là dấu hiệu trạng thái đạt 3:1 (6,51:1 ở bảng tương phản cao).
+         * - Chữ lúc nghỉ viết `data-[state=inactive]:text-muted-foreground` thay cho lớp trần: CSS y
+         *   hệt (ba trạng thái loại trừ nhau), nhưng cổng `lint:a11y` không ghép nhầm chữ xám với nền
+         *   vàng của trạng thái đang làm — cặp đó không bao giờ cùng xuất hiện.
+         */
+        "flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-control-edge bg-background text-sm font-medium data-[state=inactive]:text-muted-foreground transition-colors data-[state=active]:border-primary-ink data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:border-primary-ink data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground",
+        className
+      ),
+      children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? (
+        /*
+         * ⚠ Khác thượng nguồn: bản gốc chỉ vẽ dấu tick. Trigger chỉ chứa ô chỉ báo (demo mặc định
+         * của Dice UI) thì bước đã xong thành một nút KHÔNG TÊN — con số vốn là tên nút đã bị dấu
+         * tick thay mất. Thêm chữ `sr-only` giữ lại con số và nói luôn trạng thái.
+         */
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: context.labels.completedStep(stepPosition) })
+        ] })
+      ) : stepPosition
+    }
+  );
+}
+function StepperSeparator(props) {
+  const { className, asChild, forceMount = false, ref, ...separatorProps } = props;
+  const context = useStepperContext(SEPARATOR_NAME);
+  const itemContext = useStepperItemContext(SEPARATOR_NAME);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const orientation = context.orientation;
+  const stepIndex = Array.from(steps.keys()).indexOf(itemContext.value);
+  const isLastStep = stepIndex === steps.size - 1;
+  if (isLastStep && !forceMount) return null;
+  const dataState = getDataState(value, itemContext.value, itemContext.stepState, steps, "separator");
+  const SeparatorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive,
+    {
+      "aria-hidden": "true",
+      "data-orientation": orientation,
+      "data-state": dataState,
+      "data-slot": "stepper-separator",
+      dir: context.dir,
+      ...separatorProps,
+      ref,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: đoạn nối ĐÃ XONG mang nghĩa tiến độ (phi văn bản, 3:1) → `--primary-ink`
+         * thay `bg-primary` (token tô nền, ~1,86:1 với nền trang). Đoạn CHƯA tới giữ `bg-border`:
+         * sợi tóc 1px, thuần trang trí.
+         */
+        "bg-border transition-colors data-[state=active]:bg-primary-ink data-[state=completed]:bg-primary-ink",
+        orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px",
+        className
+      )
+    }
+  );
+}
+function StepperTitle(props) {
+  const { className, asChild, ref, ...titleProps } = props;
+  const context = useStepperContext(TITLE_NAME);
+  const itemContext = useStepperItemContext(TITLE_NAME);
+  const titleId = getId(context.rootId, "title", itemContext.value);
+  const TitlePrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    TitlePrimitive,
+    {
+      id: titleId,
+      "data-slot": "title",
+      dir: context.dir,
+      ...titleProps,
+      ref,
+      className: cn("text-sm font-medium", className)
+    }
+  );
+}
+function StepperDescription(props) {
+  const { className, asChild, ref, ...descriptionProps } = props;
+  const context = useStepperContext(DESCRIPTION_NAME);
+  const itemContext = useStepperItemContext(DESCRIPTION_NAME);
+  const descriptionId = getId(context.rootId, "description", itemContext.value);
+  const DescriptionPrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    DescriptionPrimitive,
+    {
+      id: descriptionId,
+      "data-slot": "description",
+      dir: context.dir,
+      ...descriptionProps,
+      ref,
+      className: cn("text-xs text-muted-foreground", className)
+    }
+  );
+}
+function StepperContent(props) {
+  const { value: valueProp, asChild, forceMount = false, ref, className, ...contentProps } = props;
+  const context = useStepperContext(CONTENT_NAME);
+  const value = useStore((state) => state.value);
+  const contentId = getId(context.rootId, "content", valueProp);
+  const triggerId = getId(context.rootId, "trigger", valueProp);
+  if (valueProp !== value && !forceMount) return null;
+  const ContentPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      id: contentId,
+      role: "tabpanel",
+      "aria-labelledby": triggerId,
+      "data-slot": "stepper-content",
+      dir: context.dir,
+      ...contentProps,
+      ref,
+      className: cn("flex-1 outline-none", className)
+    }
+  );
+}
+function StepperPrev(props) {
+  const { asChild, onClick: onClickProp, disabled, children, ...prevProps } = props;
+  const context = useStepperContext(PREV_NAME);
+  const store = useStoreContext(PREV_NAME);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex <= 0;
+  const onClick = React.useCallback(
+    async (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented || isDisabled) return;
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const prevStepValue = stepKeys[prevIndex];
+      if (prevStepValue) {
+        store.setState("value", prevStepValue);
+      }
+    },
+    [propsRef, isDisabled, currentIndex, stepKeys, store]
+  );
+  const PrevPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(PrevPrimitive, { type: "button", "data-slot": "stepper-prev", disabled: isDisabled, ...prevProps, onClick, children: asChild ? children : children ?? context.labels.prev });
+}
+function StepperNext(props) {
+  const { asChild, onClick: onClickProp, disabled, children, ...nextProps } = props;
+  const context = useStepperContext(NEXT_NAME);
+  const store = useStoreContext(NEXT_NAME);
+  const value = useStore((state) => state.value);
+  const steps = useStore((state) => state.steps);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
+  const onClick = React.useCallback(
+    async (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented || isDisabled) return;
+      const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
+      const nextStepValue = stepKeys[nextIndex];
+      if (nextStepValue) {
+        await store.setStateWithValidation(nextStepValue, "next");
+      }
+    },
+    [propsRef, isDisabled, currentIndex, stepKeys, store]
+  );
+  const NextPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(NextPrimitive, { type: "button", "data-slot": "stepper-next", disabled: isDisabled, ...nextProps, onClick, children: asChild ? children : children ?? context.labels.next });
+}
+export {
+  Stepper,
+  StepperContent,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperList,
+  StepperNext,
+  StepperPrev,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+  useStore as useStepper
+};
+//# sourceMappingURL=stepper.js.map