@szum-tech/design-system 2.7.0 → 3.0.0

package/dist/{chunk-XIPREW2R.js → chunk-DP7UEOTA.js}

@@ -1,78 +1,12 @@
-import { HelperText } from './chunk-5PBHBOXI.js';
-import { Label } from './chunk-VZKTT6CG.js';
+import { useComposedRefs } from './chunk-U4AWAABZ.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 { 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 * as React5 from 'react';
 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";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
 
 // src/components/stepper/stepper.constants.ts
 var STEPPER_ROOT_NAME = "Stepper";
@@ -100,9 +34,9 @@ var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
 };
 
 // src/components/stepper/stepper.context.tsx
-var StepperContext = React12.createContext(null);
+var StepperContext = React5.createContext(null);
 function useStepperContext(consumerName) {
-  const context = React12.useContext(StepperContext);
+  const context = React5.useContext(StepperContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -192,9 +126,9 @@ function createStepperStore(listenersRef, stateRef, onValueChange, onValueComple
   };
   return store;
 }
-var StepperStoreContext = React12.createContext(null);
+var StepperStoreContext = React5.createContext(null);
 function useStepperStoreContext(consumerName) {
-  const context = React12.useContext(StepperStoreContext);
+  const context = React5.useContext(StepperStoreContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -202,8 +136,8 @@ function useStepperStoreContext(consumerName) {
 }
 function useStepperStore(selector) {
   const store = useStepperStoreContext("useStore");
-  const getSnapshot = React12.useCallback(() => selector(store.getState()), [selector, store]);
-  return React12.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = React5.useCallback(() => selector(store.getState()), [selector, store]);
+  return React5.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function Stepper({
   value,
@@ -225,14 +159,14 @@ function Stepper({
   indicators = {},
   ...rootProps
 }) {
-  const id = React12.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 = React12.useMemo(
+  const store = React5.useMemo(
     () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
     [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
   );
@@ -242,7 +176,7 @@ function Stepper({
     }
   }, [value]);
   const dir = useDirection(dirProp);
-  const contextValue = React12.useMemo(
+  const contextValue = React5.useMemo(
     () => ({
       id: rootId,
       dir,
@@ -294,48 +228,14 @@ var StepperDataState = {
   ACTIVE: "active",
   COMPLETED: "completed"
 };
-var StepperFocusContext = React12.createContext(null);
+var StepperFocusContext = React5.createContext(null);
 function useStepperFocusContext(consumerName) {
-  const context = React12.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 React12.useCallback(composeRefs(...refs), refs);
-}
 
 // src/components/stepper/stepper.utils.tsx
 function focusFirst(candidates, preventScroll = false) {
@@ -385,32 +285,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] = 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 [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 = React12.useCallback((tabStopId2) => {
+  const onItemFocus = React5.useCallback((tabStopId2) => {
     setTabStopId(tabStopId2);
   }, []);
-  const onItemShiftTab = React12.useCallback(() => {
+  const onItemShiftTab = React5.useCallback(() => {
     setIsTabbingBackOut(true);
   }, []);
-  const onFocusableItemAdd = React12.useCallback(() => {
+  const onFocusableItemAdd = React5.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount + 1);
   }, []);
-  const onFocusableItemRemove = React12.useCallback(() => {
+  const onFocusableItemRemove = React5.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount - 1);
   }, []);
-  const onItemRegister = React12.useCallback((item) => {
+  const onItemRegister = React5.useCallback((item) => {
     itemsRef.current.set(item.id, item);
   }, []);
-  const onItemUnregister = React12.useCallback((id) => {
+  const onItemUnregister = React5.useCallback((id) => {
     itemsRef.current.delete(id);
   }, []);
-  const getItems = React12.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;
@@ -425,7 +325,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
       return 0;
     });
   }, []);
-  const onBlur = React12.useCallback(
+  const onBlur = React5.useCallback(
     (event) => {
       listProps.onBlur?.(event);
       if (event.defaultPrevented) return;
@@ -433,7 +333,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     },
     [listProps.onBlur]
   );
-  const onFocus = React12.useCallback(
+  const onFocus = React5.useCallback(
     (event) => {
       listProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -458,7 +358,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
   );
-  const onMouseDown = React12.useCallback(
+  const onMouseDown = React5.useCallback(
     (event) => {
       listProps.onMouseDown?.(event);
       if (event.defaultPrevented) return;
@@ -467,7 +367,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onMouseDown]
   );
-  const focusContextValue = React12.useMemo(
+  const focusContextValue = React5.useMemo(
     () => ({
       tabStopId,
       onItemFocus,
@@ -513,9 +413,9 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     }
   ) });
 }
-var StepperItemContext = React12.createContext(null);
+var StepperItemContext = React5.createContext(null);
 function useStepperItemContext(consumerName) {
-  const context = React12.useContext(StepperItemContext);
+  const context = React5.useContext(StepperItemContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
   }
@@ -546,7 +446,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 = React12.useMemo(
+  const itemContextValue = React5.useMemo(
     () => ({
       value: itemValue,
       stepState
@@ -563,7 +463,7 @@ function StepperItem({
       "data-slot": "stepper-item",
       dir,
       className: cn(
-        "group/step flex flex-1 flex-col justify-end",
+        "group/step flex flex-1 flex-col justify-end data-[disabled]:opacity-50",
         "",
         // "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
         className
@@ -576,8 +476,8 @@ function StepperItem({
           {
             "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"
+              "bg-border h-1 w-full transition-colors duration-500",
+              "data-[state=active]:bg-primary data-[state=completed]:bg-success"
             )
           }
         )
@@ -608,11 +508,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 = React12.useRef(null);
+  const triggerRef = React5.useRef(null);
   const composedRef = useComposedRefs(ref, triggerRef);
-  const isArrowKeyPressedRef = React12.useRef(false);
-  const isMouseClickRef = React12.useRef(false);
-  React12.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;
@@ -646,7 +546,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       }
     };
   }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
-  const onClick = React12.useCallback(
+  const onClick = React5.useCallback(
     async (event) => {
       triggerProps.onClick?.(event);
       if (event.defaultPrevented) return;
@@ -660,7 +560,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 = React12.useCallback(
+  const onFocus = React5.useCallback(
     async (event) => {
       triggerProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -675,20 +575,20 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       isMouseClickRef.current = false;
     },
     [
+      triggerProps,
       focusContext,
       triggerId,
-      activationMode,
       isActive,
       isDisabled,
+      activationMode,
       context.nonInteractive,
-      store,
-      itemValue,
-      value,
       steps,
-      triggerProps.onFocus
+      value,
+      itemValue,
+      store
     ]
   );
-  const onKeyDown = React12.useCallback(
+  const onKeyDown = React5.useCallback(
     async (event) => {
       triggerProps.onKeyDown?.(event);
       if (event.defaultPrevented) return;
@@ -757,7 +657,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       steps
     ]
   );
-  const onMouseDown = React12.useCallback(
+  const onMouseDown = React5.useCallback(
     (event) => {
       triggerProps.onMouseDown?.(event);
       if (event.defaultPrevented) {
@@ -793,10 +693,9 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       "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]",
+        "inline-flex w-full cursor-pointer items-center gap-3 rounded text-left transition-colors duration-500 outline-none",
+        "disabled:pointer-events-none",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         className
       ),
       onClick,
@@ -825,9 +724,9 @@ function StepperIndicator({ className, children, asChild, ref, ...props }) {
       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",
+        "bg-muted border-border text-muted-foreground relative flex size-6 shrink-0 items-center justify-center self-end overflow-hidden rounded-t border-x border-t text-xs transition-colors duration-500",
+        "data-[state=completed]:bg-success/50 data-[state=completed]:border-success data-[state=completed]:text-success-foreground",
+        "data-[state=active]:bg-primary/50 data-[state=active]:border-primary data-[state=active]:text-primary-foreground",
         className
       ),
       ...props,
@@ -862,7 +761,7 @@ function StepperDescription({ className, asChild, ...props }) {
       id: descriptionId,
       "data-slot": "stepper-description",
       dir: context.dir,
-      className: cn("text-sm text-gray-700", className),
+      className: cn("text-muted-foreground text-sm", className),
       ...props
     }
   );
@@ -919,7 +818,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 = React12.useCallback(
+  const handleClick = React5.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -952,7 +851,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 = React12.useCallback(
+  const handleClick = React5.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -978,19 +877,117 @@ function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
     }
   );
 }
-var FormMessage = React12.forwardRef(function({ children, ...props }, ref) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) {
-    return null;
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-all shrink-0 outline-none",
+    "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        error: "bg-error text-white hover:bg-error/90 focus-visible:ring-error/20 dark:focus-visible:ring-error/40 dark:bg-error/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      },
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      fullWidth: false
+    }
   }
-  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";
+);
+function Button({
+  asChild = false,
+  variant = "default",
+  disabled = false,
+  fullWidth = false,
+  loadingPosition: loadingPositionProp = "start",
+  children,
+  type = "button",
+  loading = false,
+  size = "default",
+  endIcon,
+  startIcon,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  const isDisabled = disabled || loading;
+  const loadingPosition = size?.startsWith("icon") ? "center" : loadingPositionProp;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "aria-disabled": isDisabled || void 0,
+      className: cn(buttonVariants({ fullWidth, size, variant }), className),
+      "data-state": loading ? "loading" : void 0,
+      disabled: isDisabled,
+      role: Comp !== "button" ? "button" : void 0,
+      tabIndex: isDisabled ? -1 : 0,
+      type: Comp === "button" ? type : void 0,
+      "data-size": size,
+      "data-variant": variant,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          size,
+          loadingPosition,
+          startIcon,
+          endIcon,
+          asChild,
+          children
+        }
+      )
+    }
+  );
+}
+function ButtonContent({
+  children,
+  loading = false,
+  loadingPosition = "start",
+  startIcon,
+  asChild,
+  endIcon,
+  ...props
+}) {
+  const isStartLoading = loading && loadingPosition === "start";
+  const StartIcon = isStartLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : startIcon || null;
+  const isEndLoading = loading && loadingPosition === "end";
+  const EndIcon = isEndLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : endIcon || null;
+  const isCenterLoading = loading && loadingPosition === "center";
+  return asChild && React5.isValidElement(children) ? React5.cloneElement(
+    children,
+    props,
+    /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+      StartIcon,
+      isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : React5.isValidElement(children) ? children.props?.children : null,
+      EndIcon
+    ] })
+  ) : /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    StartIcon,
+    isCenterLoading ? /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading" }) : children,
+    EndIcon
+  ] });
+}
 
-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 };
+export { Button, Stepper, StepperActivationMode, StepperContent, StepperDataState, StepperDescription, StepperFocusIntent, StepperIndicator, StepperItem, StepperNav, StepperNavigationDirection, StepperNextTrigger, StepperOrientation, StepperPanel, StepperPrevTrigger, StepperTitle, StepperTrigger, useStepperContext, useStepperFocusContext, useStepperItemContext };

package/dist/chunk-HCHVDUI6.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var lucideReact = require('lucide-react');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Checkbox({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: chunkH2BWO3SI_cjs.cn(
+        "peer border-input dark:bg-input/30 size-4 shrink-0 rounded border shadow-xs transition-shadow outline-none",
+        "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+        "aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+exports.Checkbox = Checkbox;