@szum-tech/design-system 2.7.0 → 3.1.0

package/dist/{chunk-D3MOZUNH.cjs → chunk-ZV4467OW.cjs}

@@ -1,15 +1,14 @@
 'use strict';
 
-var chunkP4J2TTH7_cjs = require('./chunk-P4J2TTH7.cjs');
-var chunkFVSO3RHT_cjs = require('./chunk-FVSO3RHT.cjs');
+var chunkY6EVJSAH_cjs = require('./chunk-Y6EVJSAH.cjs');
+var chunk3WSQRFUY_cjs = require('./chunk-3WSQRFUY.cjs');
 var chunkEW6TE3N5_cjs = require('./chunk-EW6TE3N5.cjs');
 var chunk7EYMOUWG_cjs = require('./chunk-7EYMOUWG.cjs');
 var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
-var reactHookForm = require('react-hook-form');
-var React12 = require('react');
-var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
+var React5 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,72 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React12__namespace = /*#__PURE__*/_interopNamespace(React12);
-
-var Form = reactHookForm.FormProvider;
-var FormItemContext = React12__namespace.createContext({});
-var FormItem = React12__namespace.forwardRef(function({ className, ...props }, ref) {
-  const id = React12__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: tailwindMerge.twMerge("space-y-2", className), ...props }) });
-});
-FormItem.displayName = "FormItem";
-var FormFieldContext = React12__namespace.createContext({});
-var FormField = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
-};
-var useFormField = () => {
-  const fieldContext = React12__namespace.useContext(FormFieldContext);
-  const itemContext = React12__namespace.useContext(FormItemContext);
-  const { getFieldState, formState } = reactHookForm.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__namespace.forwardRef(
-  ({ className, caption, ...props }, ref) => {
-    const { error, formItemId } = useFormField();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-end justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        chunkFVSO3RHT_cjs.Label,
-        {
-          ref,
-          className: tailwindMerge.twMerge(error ? "text-error-500" : null, className),
-          htmlFor: formItemId,
-          ...props
-        }
-      ),
-      caption ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-caption text-gray-200", children: caption }) : null
-    ] });
-  }
-);
-FormLabel.displayName = "FormLabel";
-var FormControl = React12__namespace.forwardRef(function(props, ref) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-  const newProps = { ...props, invalid: !!error };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactSlot.Slot,
-    {
-      ref,
-      id: formItemId,
-      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
-      "aria-invalid": !!error,
-      ...newProps
-    }
-  );
-});
-FormControl.displayName = "FormControl";
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 // src/components/stepper/stepper.constants.ts
 var STEPPER_ROOT_NAME = "Stepper";
@@ -122,9 +56,9 @@ var STEPPER_MAP_KEY_TO_FOCUS_INTENT = {
 };
 
 // src/components/stepper/stepper.context.tsx
-var StepperContext = React12__namespace.createContext(null);
+var StepperContext = React5__namespace.createContext(null);
 function useStepperContext(consumerName) {
-  const context = React12__namespace.useContext(StepperContext);
+  const context = React5__namespace.useContext(StepperContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -214,9 +148,9 @@ function createStepperStore(listenersRef, stateRef, onValueChange, onValueComple
   };
   return store;
 }
-var StepperStoreContext = React12__namespace.createContext(null);
+var StepperStoreContext = React5__namespace.createContext(null);
 function useStepperStoreContext(consumerName) {
-  const context = React12__namespace.useContext(StepperStoreContext);
+  const context = React5__namespace.useContext(StepperStoreContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ROOT_NAME}\``);
   }
@@ -224,8 +158,8 @@ function useStepperStoreContext(consumerName) {
 }
 function useStepperStore(selector) {
   const store = useStepperStoreContext("useStore");
-  const getSnapshot = React12__namespace.useCallback(() => selector(store.getState()), [selector, store]);
-  return React12__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = React5__namespace.useCallback(() => selector(store.getState()), [selector, store]);
+  return React5__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function Stepper({
   value,
@@ -247,14 +181,14 @@ function Stepper({
   indicators = {},
   ...rootProps
 }) {
-  const id = React12__namespace.useId();
+  const id = React5__namespace.useId();
   const rootId = idProp ?? id;
   const listenersRef = chunk7EYMOUWG_cjs.useLazyRef(() => /* @__PURE__ */ new Set());
   const stateRef = chunk7EYMOUWG_cjs.useLazyRef(() => ({
     steps: /* @__PURE__ */ new Map(),
     value: value ?? defaultValue
   }));
-  const store = React12__namespace.useMemo(
+  const store = React5__namespace.useMemo(
     () => createStepperStore(listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate),
     [listenersRef, stateRef, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate]
   );
@@ -264,7 +198,7 @@ function Stepper({
     }
   }, [value]);
   const dir = chunkEW6TE3N5_cjs.useDirection(dirProp);
-  const contextValue = React12__namespace.useMemo(
+  const contextValue = React5__namespace.useMemo(
     () => ({
       id: rootId,
       dir,
@@ -316,48 +250,14 @@ var StepperDataState = {
   ACTIVE: "active",
   COMPLETED: "completed"
 };
-var StepperFocusContext = React12__namespace.createContext(null);
+var StepperFocusContext = React5__namespace.createContext(null);
 function useStepperFocusContext(consumerName) {
-  const context = React12__namespace.useContext(StepperFocusContext);
+  const context = React5__namespace.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__namespace.useCallback(composeRefs(...refs), refs);
-}
 
 // src/components/stepper/stepper.utils.tsx
 function focusFirst(candidates, preventScroll = false) {
@@ -407,32 +307,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__namespace.useState(null);
-  const [isTabbingBackOut, setIsTabbingBackOut] = React12__namespace.useState(false);
-  const [focusableItemCount, setFocusableItemCount] = React12__namespace.useState(0);
-  const isClickFocusRef = React12__namespace.useRef(false);
-  const itemsRef = React12__namespace.useRef(/* @__PURE__ */ new Map());
-  const listRef = React12__namespace.useRef(null);
-  const composedRef = useComposedRefs(ref, listRef);
-  const onItemFocus = React12__namespace.useCallback((tabStopId2) => {
+  const [tabStopId, setTabStopId] = React5__namespace.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React5__namespace.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React5__namespace.useState(0);
+  const isClickFocusRef = React5__namespace.useRef(false);
+  const itemsRef = React5__namespace.useRef(/* @__PURE__ */ new Map());
+  const listRef = React5__namespace.useRef(null);
+  const composedRef = chunkY6EVJSAH_cjs.useComposedRefs(ref, listRef);
+  const onItemFocus = React5__namespace.useCallback((tabStopId2) => {
     setTabStopId(tabStopId2);
   }, []);
-  const onItemShiftTab = React12__namespace.useCallback(() => {
+  const onItemShiftTab = React5__namespace.useCallback(() => {
     setIsTabbingBackOut(true);
   }, []);
-  const onFocusableItemAdd = React12__namespace.useCallback(() => {
+  const onFocusableItemAdd = React5__namespace.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount + 1);
   }, []);
-  const onFocusableItemRemove = React12__namespace.useCallback(() => {
+  const onFocusableItemRemove = React5__namespace.useCallback(() => {
     setFocusableItemCount((prevCount) => prevCount - 1);
   }, []);
-  const onItemRegister = React12__namespace.useCallback((item) => {
+  const onItemRegister = React5__namespace.useCallback((item) => {
     itemsRef.current.set(item.id, item);
   }, []);
-  const onItemUnregister = React12__namespace.useCallback((id) => {
+  const onItemUnregister = React5__namespace.useCallback((id) => {
     itemsRef.current.delete(id);
   }, []);
-  const getItems = React12__namespace.useCallback(() => {
+  const getItems = React5__namespace.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;
@@ -447,7 +347,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
       return 0;
     });
   }, []);
-  const onBlur = React12__namespace.useCallback(
+  const onBlur = React5__namespace.useCallback(
     (event) => {
       listProps.onBlur?.(event);
       if (event.defaultPrevented) return;
@@ -455,7 +355,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     },
     [listProps.onBlur]
   );
-  const onFocus = React12__namespace.useCallback(
+  const onFocus = React5__namespace.useCallback(
     (event) => {
       listProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -480,7 +380,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onFocus, isTabbingBackOut, currentValue, tabStopId]
   );
-  const onMouseDown = React12__namespace.useCallback(
+  const onMouseDown = React5__namespace.useCallback(
     (event) => {
       listProps.onMouseDown?.(event);
       if (event.defaultPrevented) return;
@@ -489,7 +389,7 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [listProps.onMouseDown]
   );
-  const focusContextValue = React12__namespace.useMemo(
+  const focusContextValue = React5__namespace.useMemo(
     () => ({
       tabStopId,
       onItemFocus,
@@ -535,9 +435,9 @@ function StepperNav({ className, children, asChild, ref, ...listProps }) {
     }
   ) });
 }
-var StepperItemContext = React12__namespace.createContext(null);
+var StepperItemContext = React5__namespace.createContext(null);
 function useStepperItemContext(consumerName) {
-  const context = React12__namespace.useContext(StepperItemContext);
+  const context = React5__namespace.useContext(StepperItemContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${STEPPER_ITEM_NAME}\``);
   }
@@ -568,7 +468,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__namespace.useMemo(
+  const itemContextValue = React5__namespace.useMemo(
     () => ({
       value: itemValue,
       stepState
@@ -585,7 +485,7 @@ function StepperItem({
       "data-slot": "stepper-item",
       dir,
       className: chunkH2BWO3SI_cjs.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
@@ -598,8 +498,8 @@ function StepperItem({
           {
             "data-state": dataState,
             className: chunkH2BWO3SI_cjs.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"
             )
           }
         )
@@ -630,11 +530,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__namespace.useRef(null);
-  const composedRef = useComposedRefs(ref, triggerRef);
-  const isArrowKeyPressedRef = React12__namespace.useRef(false);
-  const isMouseClickRef = React12__namespace.useRef(false);
-  React12__namespace.useEffect(() => {
+  const triggerRef = React5__namespace.useRef(null);
+  const composedRef = chunkY6EVJSAH_cjs.useComposedRefs(ref, triggerRef);
+  const isArrowKeyPressedRef = React5__namespace.useRef(false);
+  const isMouseClickRef = React5__namespace.useRef(false);
+  React5__namespace.useEffect(() => {
     function onKeyDown2(event) {
       if (STEPPER_ARROW_KEYS.includes(event.key)) {
         isArrowKeyPressedRef.current = true;
@@ -668,7 +568,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       }
     };
   }, [focusContext, triggerId, itemValue, isTabStop, isDisabled]);
-  const onClick = React12__namespace.useCallback(
+  const onClick = React5__namespace.useCallback(
     async (event) => {
       triggerProps.onClick?.(event);
       if (event.defaultPrevented) return;
@@ -682,7 +582,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__namespace.useCallback(
+  const onFocus = React5__namespace.useCallback(
     async (event) => {
       triggerProps.onFocus?.(event);
       if (event.defaultPrevented) return;
@@ -697,20 +597,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__namespace.useCallback(
+  const onKeyDown = React5__namespace.useCallback(
     async (event) => {
       triggerProps.onKeyDown?.(event);
       if (event.defaultPrevented) return;
@@ -779,7 +679,7 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       steps
     ]
   );
-  const onMouseDown = React12__namespace.useCallback(
+  const onMouseDown = React5__namespace.useCallback(
     (event) => {
       triggerProps.onMouseDown?.(event);
       if (event.defaultPrevented) {
@@ -815,10 +715,9 @@ function StepperTrigger({ asChild, disabled, className, ref, ...triggerProps })
       "aria-selected": isActive,
       "aria-setsize": stepCount,
       className: chunkH2BWO3SI_cjs.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,
@@ -847,9 +746,9 @@ function StepperIndicator({ className, children, asChild, ref, ...props }) {
       dir,
       ref,
       className: chunkH2BWO3SI_cjs.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,
@@ -884,7 +783,7 @@ function StepperDescription({ className, asChild, ...props }) {
       id: descriptionId,
       "data-slot": "stepper-description",
       dir: context.dir,
-      className: chunkH2BWO3SI_cjs.cn("text-sm text-gray-700", className),
+      className: chunkH2BWO3SI_cjs.cn("text-muted-foreground text-sm", className),
       ...props
     }
   );
@@ -941,7 +840,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__namespace.useCallback(
+  const handleClick = React5__namespace.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -974,7 +873,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__namespace.useCallback(
+  const handleClick = React5__namespace.useCallback(
     async (event) => {
       onClick?.(event);
       if (event.defaultPrevented || isDisabled) {
@@ -1000,28 +899,120 @@ function StepperPrevTrigger({ asChild = false, disabled, onClick, ...props }) {
     }
   );
 }
-var FormMessage = React12__namespace.forwardRef(function({ children, ...props }, ref) {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
-  if (!body) {
-    return null;
+var buttonVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(chunkP4J2TTH7_cjs.HelperText, { ref, type: "error", id: formMessageId, ...props, children: body });
-});
-FormMessage.displayName = "FormMessage";
-var FormDescription = React12__namespace.forwardRef(function(props, ref) {
-  const { formDescriptionId } = useFormField();
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkP4J2TTH7_cjs.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 ? reactSlot.Slot : "button";
+  const isDisabled = disabled || loading;
+  const loadingPosition = size?.startsWith("icon") ? "center" : loadingPositionProp;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "aria-disabled": isDisabled || void 0,
+      className: chunkH2BWO3SI_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : startIcon || null;
+  const isEndLoading = loading && loadingPosition === "end";
+  const EndIcon = isEndLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : endIcon || null;
+  const isCenterLoading = loading && loadingPosition === "center";
+  return asChild && React5__namespace.isValidElement(children) ? React5__namespace.cloneElement(
+    children,
+    props,
+    /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
+      StartIcon,
+      isCenterLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : React5__namespace.isValidElement(children) ? children.props?.children : null,
+      EndIcon
+    ] })
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
+    StartIcon,
+    isCenterLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk3WSQRFUY_cjs.Spinner, { "aria-label": "Loading" }) : children,
+    EndIcon
+  ] });
+}
 
-exports.Form = Form;
-exports.FormControl = FormControl;
-exports.FormDescription = FormDescription;
-exports.FormField = FormField;
-exports.FormItem = FormItem;
-exports.FormLabel = FormLabel;
-exports.FormMessage = FormMessage;
+exports.Button = Button;
 exports.Stepper = Stepper;
 exports.StepperActivationMode = StepperActivationMode;
 exports.StepperContent = StepperContent;

package/dist/components/alert-dialog/index.cjs

@@ -2,6 +2,7 @@
 
 var chunkTMXVL5CV_cjs = require('../../chunk-TMXVL5CV.cjs');
 require('../../chunk-H2BWO3SI.cjs');
+require('../../chunk-3376ZTRC.cjs');
 
 
 

package/dist/components/alert-dialog/index.js

@@ -1,2 +1,3 @@
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../../chunk-5MJPZUTO.js';
 import '../../chunk-ZD2QRAOX.js';
+import '../../chunk-BYXBJQAS.js';

package/dist/components/avatar/index.cjs

@@ -1,19 +1,20 @@
 'use strict';
 
-var chunk4NO6IM75_cjs = require('../../chunk-4NO6IM75.cjs');
+var chunkI7AV5IQO_cjs = require('../../chunk-I7AV5IQO.cjs');
 require('../../chunk-H2BWO3SI.cjs');
+require('../../chunk-3376ZTRC.cjs');
 
 
 
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,
-  get: function () { return chunk4NO6IM75_cjs.Avatar; }
+  get: function () { return chunkI7AV5IQO_cjs.Avatar; }
 });
 Object.defineProperty(exports, "AvatarFallback", {
   enumerable: true,
-  get: function () { return chunk4NO6IM75_cjs.AvatarFallback; }
+  get: function () { return chunkI7AV5IQO_cjs.AvatarFallback; }
 });
 Object.defineProperty(exports, "AvatarImage", {
   enumerable: true,
-  get: function () { return chunk4NO6IM75_cjs.AvatarImage; }
+  get: function () { return chunkI7AV5IQO_cjs.AvatarImage; }
 });

package/dist/components/avatar/index.d.cts

@@ -1,28 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { Avatar as Avatar$1 } from 'radix-ui';
-import { VariantProps } from 'class-variance-authority';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 
-type AvatarProps = Avatar$1.AvatarProps & React.RefAttributes<HTMLSpanElement> & {
-    /**
-     * Defines avatar size
-     */
-    size?: AvatarSizeType;
-};
-declare function Avatar({ className, size, ref, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
-
-declare const avatarCva: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-
-type AvatarCvaProps = VariantProps<typeof avatarCva>;
-type AvatarSizeType = NonNullable<AvatarCvaProps["size"]>;
+type AvatarProps = React.ComponentProps<typeof Avatar$1.Root>;
+declare function Avatar({ className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 type AvatarImageProps = React.ComponentProps<typeof Avatar$1.Image>;
-declare function AvatarImage({ className, ref, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): react_jsx_runtime.JSX.Element;
 
 type AvatarFallbackProps = React.ComponentProps<typeof Avatar$1.Fallback>;
-declare function AvatarFallback({ className, ref, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarSizeType };
+export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps };