@szum-tech/design-system 2.5.1 → 2.7.0

package/dist/chunk-XIPREW2R.js

@@ -0,0 +1,996 @@
+import { HelperText } from './chunk-5PBHBOXI.js';
+import { Label } from './chunk-VZKTT6CG.js';
+import { useDirection, Direction } from './chunk-H5O5L6XT.js';
+import { useLazyRef, useIsomorphicLayoutEffect } from './chunk-DFD2WUOU.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import { useFormContext, FormProvider, Controller } from 'react-hook-form';
+import * as React12 from 'react';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+
+var Form = FormProvider;
+var FormItemContext = React12.createContext({});
+var FormItem = React12.forwardRef(function({ className, ...props }, ref) {
+  const id = React12.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: twMerge("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var FormFieldContext = React12.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var useFormField = () => {
+  const fieldContext = React12.useContext(FormFieldContext);
+  const itemContext = React12.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormLabel = React12.forwardRef(
+  ({ className, caption, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-end justify-between", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          ref,
+          className: twMerge(error ? "text-error-500" : null, className),
+          htmlFor: formItemId,
+          ...props
+        }
+      ),
+      caption ? /* @__PURE__ */ jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
+    ] });
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormControl = React12.forwardRef(function(props, ref) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  const newProps = { ...props, invalid: !!error };
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...newProps
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+
+// src/components/stepper/stepper.constants.ts
+var STEPPER_ROOT_NAME = "Stepper";
+var STEPPER_NAV_NAME = "StepperNav";
+var STEPPER_ITEM_NAME = "StepperItem";
+var STEPPER_TRIGGER_NAME = "StepperTrigger";
+var STEPPER_INDICATOR_NAME = "StepperIndicator";
+var STEPPER_TITLE_NAME = "StepperTitle";
+var STEPPER_DESCRIPTION_NAME = "StepperDescription";
+var STEPPER_CONTENT_NAME = "StepperContent";
+var STEPPER_PREV_TRIGGER_NAME = "StepperPrevTrigger";
+var STEPPER_NEXT_TRIGGER_NAME = "StepperNextTrigger";
+var STEPPER_ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
+var STEPPER_EVENT_OPTIONS = { bubbles: false, cancelable: true };
+var STEPPER_ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
+  ArrowLeft: "prev",
+  ArrowUp: "prev",
+  ArrowRight: "next",
+  ArrowDown: "next",
+  PageUp: "first",
+  Home: "first",
+  PageDown: "last",
+  End: "last"
+};
+
+// src/components/stepper/stepper.context.tsx
+var StepperContext = React12.createContext(null);
+function useStepperContext(consumerName) {
+  const context = React12.useContext(StepperContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
+  }
+  return context;
+}
+function createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate) {
+  const store = {
+    subscribe: (cb) => {
+      if (listenersRef.current) {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current?.delete(cb);
+      }
+      return () => {
+      };
+    },
+    getState: () => stateRef.current ?? {
+      steps: /* @__PURE__ */ new Map(),
+      value: void 0
+    },
+    setState: (key, value) => {
+      const state = stateRef.current;
+      if (!state || Object.is(state[key], value)) return;
+      if (key === "value" && typeof value === "string") {
+        state.value = value;
+        onValueChange?.(value);
+      } else {
+        state[key] = value;
+      }
+      store.notify();
+    },
+    setStateWithValidation: async (value, direction) => {
+      if (!onValidate) {
+        store.setState("value", value);
+        return true;
+      }
+      try {
+        const isValid = await onValidate(value, direction);
+        if (isValid) {
+          store.setState("value", value);
+        }
+        return isValid;
+      } catch {
+        return false;
+      }
+    },
+    hasValidation: () => !!onValidate,
+    addStep: (newStep) => {
+      const state = stateRef.current;
+      if (state) {
+        state.steps = new Map(state.steps);
+        state.steps.set(newStep.value, newStep);
+        onValueAdd?.(newStep.value);
+        store.notify();
+      }
+    },
+    removeStep: (value) => {
+      const state = stateRef.current;
+      if (state) {
+        state.steps = new Map(state.steps);
+        state.steps.delete(value);
+        onValueRemove?.(value);
+        store.notify();
+      }
+    },
+    setStep: ({ value, disabled, loading, completed }) => {
+      const state = stateRef.current;
+      if (state) {
+        const step = state.steps.get(value);
+        if (step) {
+          const updatedStep = { ...step, completed, disabled, loading };
+          state.steps = new Map(state.steps);
+          state.steps.set(value, updatedStep);
+          if (completed !== step.completed) {
+            onValueComplete?.(value, completed);
+          }
+          store.notify();
+        }
+      }
+    },
+    notify: () => {
+      if (listenersRef.current) {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    }
+  };
+  return store;
+}
+var StepperStoreContext = React12.createContext(null);
+function useStepperStoreContext(consumerName) {
+  const context = React12.useContext(StepperStoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStepperStore(selector) {
+  const store = useStepperStoreContext("useStore");
+  const getSnapshot = React12.useCallback(() => selector(store.getState()), [selector, store]);
+  return React12.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function Stepper({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueComplete,
+  onValueAdd,
+  onValueRemove,
+  onValidate,
+  id: idProp,
+  dir: dirProp,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  asChild,
+  disabled = false,
+  nonInteractive = false,
+  loop = false,
+  className,
+  indicators = {},
+  ...rootProps
+}) {
+  const id = React12.useId();
+  const rootId = idProp ?? id;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    steps: /* @__PURE__ */ new Map(),
+    value: value ?? defaultValue
+  }));
+  const store = React12.useMemo(
+    () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
+    [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (value !== void 0) {
+      store.setState("value", value);
+    }
+  }, [value]);
+  const dir = useDirection(dirProp);
+  const contextValue = React12.useMemo(
+    () => ({
+      id: rootId,
+      dir,
+      orientation,
+      activationMode,
+      disabled,
+      nonInteractive,
+      loop,
+      indicators
+    }),
+    [rootId, dir, orientation, activationMode, disabled, nonInteractive, loop, indicators]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StepperStoreContext.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 w-full flex-col gap-4 data-[orientation=vertical]:flex-row", className)
+    }
+  ) }) });
+}
+
+// src/components/stepper/stepper.types.ts
+var StepperFocusIntent = {
+  FIRST: "first",
+  LAST: "last",
+  PREV: "prev",
+  NEXT: "next"
+};
+var StepperOrientation = {
+  HORIZONTAL: "horizontal",
+  VERTICAL: "vertical"
+};
+var StepperNavigationDirection = {
+  NEXT: "next",
+  PREV: "prev"
+};
+var StepperActivationMode = {
+  AUTOMATIC: "automatic",
+  MANUAL: "manual"
+};
+var StepperDataState = {
+  INACTIVE: "inactive",
+  ACTIVE: "active",
+  COMPLETED: "completed"
+};
+var StepperFocusContext = React12.createContext(null);
+function useStepperFocusContext(consumerName) {
+  const context = React12.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 React12.useCallback(composeRefs(...refs), refs);
+}
+
+// src/components/stepper/stepper.utils.tsx
+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 getDataState(value, itemValue, stepState, steps, variant = "item") {
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = stepKeys.indexOf(itemValue);
+  if (stepState?.completed) {
+    return StepperDataState.COMPLETED;
+  }
+  if (value === itemValue) {
+    return variant === "separator" ? StepperDataState.INACTIVE : StepperDataState.ACTIVE;
+  }
+  if (value) {
+    const activeIndex = stepKeys.indexOf(value);
+    if (activeIndex > currentIndex) {
+      return StepperDataState.COMPLETED;
+    }
+  }
+  return StepperDataState.INACTIVE;
+}
+function getId(id, variant, value) {
+  return `${id}-${variant}-${value}`;
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getDirectionAwareKey(key, dir) {
+  if (dir !== Direction.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 STEPPER_MAP_KEY_TO_FOCUS_INTENT[key];
+}
+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] = React12.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React12.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React12.useState(0);
+  const isClickFocusRef = React12.useRef(false);
+  const itemsRef = React12.useRef(/* @__PURE__ */ new Map());
+  const listRef = React12.useRef(null);
+  const composedRef = useComposedRefs(ref, listRef);
+  const onItemFocus = React12.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React12.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React12.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React12.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React12.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React12.useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = React12.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 = React12.useCallback(
+    (event) => {
+      listProps.onBlur?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    [listProps.onBlur]
+  );
+  const onFocus = React12.useCallback(
+    (event) => {
+      listProps.onFocus?.(event);
+      if (event.defaultPrevented) return;
+      const isKeyboardFocus = !isClickFocusRef.current;
+      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+        const entryFocusEvent = new CustomEvent(STEPPER_ENTRY_FOCUS, STEPPER_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;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
+  );
+  const onMouseDown = React12.useCallback(
+    (event) => {
+      listProps.onMouseDown?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listProps.onMouseDown]
+  );
+  const focusContextValue = React12.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const StepperNavPrimitive = asChild ? Slot : "nav";
+  return /* @__PURE__ */ jsx(StepperFocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx(
+    StepperNavPrimitive,
+    {
+      role: "tablist",
+      "data-slot": "stepper-nav",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      dir: context.dir,
+      tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+      ref: composedRef,
+      onBlur,
+      onFocus,
+      onMouseDown,
+      className: cn(
+        "group/stepper-nav inline-flex gap-4",
+        "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...listProps,
+      children
+    }
+  ) });
+}
+var StepperItemContext = React12.createContext(null);
+function useStepperItemContext(consumerName) {
+  const context = React12.useContext(StepperItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
+  }
+  return context;
+}
+function StepperItem({
+  value: itemValue,
+  completed = false,
+  disabled = false,
+  loading = false,
+  asChild,
+  className,
+  children,
+  ...props
+}) {
+  const { orientation, dir } = useStepperContext(STEPPER_ITEM_NAME);
+  const store = useStepperStoreContext(STEPPER_ITEM_NAME);
+  const value = useStepperStore((state) => state.value);
+  useIsomorphicLayoutEffect(() => {
+    store.addStep({ value: itemValue, completed, disabled, loading });
+    return () => {
+      store.removeStep(itemValue);
+    };
+  }, [itemValue, completed, disabled, loading]);
+  useIsomorphicLayoutEffect(() => {
+    store.setStep({ value: itemValue, completed, disabled, loading });
+  }, [itemValue, completed, disabled, loading]);
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const steps = useStepperStore((state) => state.steps);
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const itemContextValue = React12.useMemo(
+    () => ({
+      value: itemValue,
+      stepState
+    }),
+    [itemValue, stepState]
+  );
+  const StepperItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: itemContextValue, children: /* @__PURE__ */ jsxs(
+    StepperItemPrimitive,
+    {
+      "data-disabled": stepState?.disabled ? "" : void 0,
+      "data-orientation": orientation,
+      "data-state": dataState,
+      "data-slot": "stepper-item",
+      dir,
+      className: cn(
+        "group/step flex flex-1 flex-col justify-end",
+        "",
+        // "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-state": dataState,
+            className: cn(
+              "h-1 w-full bg-gray-800 transition-colors duration-500",
+              "data-[state=active]:bg-primary-500 data-[state=completed]:bg-success-500"
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps }) {
+  const context = useStepperContext(STEPPER_TRIGGER_NAME);
+  const itemContext = useStepperItemContext(STEPPER_TRIGGER_NAME);
+  const store = useStepperStoreContext(STEPPER_TRIGGER_NAME);
+  const focusContext = useStepperFocusContext(STEPPER_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const itemValue = itemContext.value;
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const activationMode = context.activationMode;
+  const orientation = context.orientation;
+  const loop = context.loop;
+  const steps = useStepperStore((state) => state.steps);
+  const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
+  const stepPosition = stepIndex + 1;
+  const stepCount = steps.size;
+  const triggerId = getId(context.id, "trigger", itemValue);
+  const contentId = getId(context.id, "content", itemValue);
+  const titleId = getId(context.id, "title", itemValue);
+  const descriptionId = getId(context.id, "description", itemValue);
+  const isDisabled = context.disabled || stepState?.disabled || disabled;
+  const isActive = value === itemValue;
+  const isTabStop = focusContext.tabStopId === triggerId;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const triggerRef = React12.useRef(null);
+  const composedRef = useComposedRefs(ref, triggerRef);
+  const isArrowKeyPressedRef = React12.useRef(false);
+  const isMouseClickRef = React12.useRef(false);
+  React12.useEffect(() => {
+    function onKeyDown2(event) {
+      if (STEPPER_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 = React12.useCallback(
+    async (event) => {
+      triggerProps.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);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isDisabled, context.nonInteractive, store, itemValue, value, steps, triggerProps.onClick]
+  );
+  const onFocus = React12.useCallback(
+    async (event) => {
+      triggerProps.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,
+      triggerProps.onFocus
+    ]
+  );
+  const onKeyDown = React12.useCallback(
+    async (event) => {
+      triggerProps.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,
+      triggerProps.onKeyDown,
+      store,
+      itemValue,
+      value,
+      steps
+    ]
+  );
+  const onMouseDown = React12.useCallback(
+    (event) => {
+      triggerProps.onMouseDown?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      isMouseClickRef.current = true;
+      if (isDisabled) {
+        event.preventDefault();
+      } else {
+        focusContext.onItemFocus(triggerId);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusContext, triggerId, isDisabled, triggerProps.onMouseDown]
+  );
+  const TriggerPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    TriggerPrimitive,
+    {
+      id: triggerId,
+      role: "tab",
+      type: "button",
+      disabled: isDisabled,
+      tabIndex: isTabStop ? 0 : -1,
+      ref: composedRef,
+      "data-slot": "stepper-trigger",
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-state": dataState,
+      "aria-controls": contentId,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-describedby": `${titleId} ${descriptionId}`,
+      "aria-posinset": stepPosition,
+      "aria-selected": isActive,
+      "aria-setsize": stepCount,
+      className: cn(
+        "inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-300 outline-none",
+        "text-gray-500 data-[state=active]:text-gray-100 data-[state=completed]:text-gray-100 data-[state=loading]:text-gray-100",
+        "disabled:pointer-events-none disabled:opacity-60",
+        "focus-visible:ring-primary-500/50 focus-visible:z-10 focus-visible:ring-[3px]",
+        className
+      ),
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseDown,
+      ...triggerProps
+    }
+  );
+}
+function StepperIndicator({ className, children, asChild, ref, ...props }) {
+  const { indicators, dir } = useStepperContext(STEPPER_INDICATOR_NAME);
+  const itemContext = useStepperItemContext(STEPPER_INDICATOR_NAME);
+  const value = useStepperStore((state) => state.value);
+  const itemValue = itemContext.value;
+  const stepState = useStepperStore((state) => state.steps.get(itemValue));
+  const steps = useStepperStore((state) => state.steps);
+  const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
+  const dataState = getDataState(value, itemValue, stepState, steps);
+  const StepperIndicatorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    StepperIndicatorPrimitive,
+    {
+      "data-slot": "stepper-indicator",
+      "data-state": dataState,
+      dir,
+      ref,
+      className: cn(
+        "bg-app-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t border-gray-800 text-xs transition-colors duration-500",
+        "data-[state=completed]:bg-success-500/50 data-[state=completed]:border-success-500",
+        "data-[state=active]:bg-primary-500/50 data-[state=active]:border-primary-500",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "absolute", children: typeof children === "function" ? children(dataState) : indicators && (itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive) ? itemContext.stepState?.loading && indicators.loading || dataState === "completed" && indicators.completed || dataState === "active" && indicators.active || dataState === "inactive" && indicators.inactive : children ? children : stepPosition })
+    }
+  );
+}
+function StepperTitle({ className, asChild = false, ...props }) {
+  const context = useStepperContext(STEPPER_TITLE_NAME);
+  const itemContext = useStepperItemContext(STEPPER_TITLE_NAME);
+  const titleId = getId(context.id, "title", itemContext.value);
+  const TitlePrimitive = asChild ? Slot : "h3";
+  return /* @__PURE__ */ jsx(
+    TitlePrimitive,
+    {
+      id: titleId,
+      "data-slot": "stepper-title",
+      dir: context.dir,
+      className: cn("text-sm leading-none font-medium", className),
+      ...props
+    }
+  );
+}
+function StepperDescription({ className, asChild, ...props }) {
+  const context = useStepperContext(STEPPER_DESCRIPTION_NAME);
+  const itemContext = useStepperItemContext(STEPPER_DESCRIPTION_NAME);
+  const descriptionId = getId(context.id, "description", itemContext.value);
+  const StepperDescriptionPrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    StepperDescriptionPrimitive,
+    {
+      id: descriptionId,
+      "data-slot": "stepper-description",
+      dir: context.dir,
+      className: cn("text-sm text-gray-700", className),
+      ...props
+    }
+  );
+}
+function StepperPanel({ children, asChild = false, className, ...props }) {
+  const currentValue = useStepperStore((state) => state.value);
+  const StepperPanelPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    StepperPanelPrimitive,
+    {
+      "data-slot": "stepper-panel",
+      "data-state": currentValue,
+      className: cn("w-full", className),
+      ...props,
+      children
+    }
+  );
+}
+function StepperContent({
+  value: valueProp,
+  asChild = false,
+  forceMount = false,
+  className,
+  ...props
+}) {
+  const context = useStepperContext(STEPPER_CONTENT_NAME);
+  const value = useStepperStore((state) => state.value);
+  const contentId = getId(context.id, "content", valueProp);
+  const triggerId = getId(context.id, "trigger", valueProp);
+  const isActive = value === valueProp;
+  if (!isActive && !forceMount) {
+    return null;
+  }
+  const ContentPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ContentPrimitive,
+    {
+      id: contentId,
+      role: "tabpanel",
+      "data-state": value,
+      "aria-labelledby": triggerId,
+      "data-slot": "stepper-content",
+      dir: context.dir,
+      className: cn("w-full", className, !isActive && forceMount && "hidden"),
+      hidden: !isActive && forceMount,
+      ...props
+    }
+  );
+}
+function StepperNextTrigger({ asChild = false, onClick, disabled, ...props }) {
+  const store = useStepperStoreContext(STEPPER_NEXT_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const steps = useStepperStore((state) => state.steps);
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
+  const handleClick = React12.useCallback(
+    async (event) => {
+      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");
+      }
+    },
+    [onClick, isDisabled, currentIndex, stepKeys, store]
+  );
+  const StepperNextTriggerPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    StepperNextTriggerPrimitive,
+    {
+      type: "button",
+      "data-slot": "stepper-next-trigger",
+      disabled: isDisabled,
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
+  const store = useStepperStoreContext(STEPPER_PREV_TRIGGER_NAME);
+  const value = useStepperStore((state) => state.value);
+  const steps = useStepperStore((state) => state.steps);
+  const stepKeys = Array.from(steps.keys());
+  const currentIndex = value ? stepKeys.indexOf(value) : -1;
+  const isDisabled = disabled || currentIndex <= 0;
+  const handleClick = React12.useCallback(
+    async (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented || isDisabled) {
+        return;
+      }
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const prevStepValue = stepKeys[prevIndex];
+      if (prevStepValue) {
+        store.setState("value", prevStepValue);
+      }
+    },
+    [currentIndex, isDisabled, onClick, stepKeys, store]
+  );
+  const StepperPrevTriggerPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    StepperPrevTriggerPrimitive,
+    {
+      type: "button",
+      "data-slot": "stepper-prev-trigger",
+      disabled: isDisabled,
+      onClick: handleClick,
+      ...props
+    }
+  );
+}
+var FormMessage = React12.forwardRef(function({ children, ...props }, ref) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
+});
+FormMessage.displayName = "FormMessage";
+var FormDescription = React12.forwardRef(function(props, ref) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(HelperText, { ref, id: formDescriptionId, ...props });
+});
+FormDescription.displayName = "FormDescription";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Stepper, StepperActivationMode, StepperContent, StepperDataState, StepperDescription, StepperFocusIntent, StepperIndicator, StepperItem, StepperNav, StepperNavigationDirection, StepperNextTrigger, StepperOrientation, StepperPanel, StepperPrevTrigger, StepperTitle, StepperTrigger, useStepperContext, useStepperFocusContext, useStepperItemContext };