@ikatec/nebula-react 1.0.27 → 1.1.0-beta.1

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, UserIcon, MinusIcon, PlusIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
+import { ChevronRight, Check, Circle, CircleX, Eye, EyeOff, X, Minus, ClockIcon, ChevronsLeft, ChevronLeft, ChevronsRight, MoreHorizontal, ChevronDown, ChevronLeftIcon, ChevronDownIcon, ChevronRightIcon, CalendarIcon, ImageUpIcon, XIcon, MinusIcon, PlusIcon, UserIcon, LoaderCircleIcon, CheckIcon, PhoneIcon, FileTextIcon, FileAudioIcon, FileVideoIcon, Info, CircleCheckBig } from 'lucide-react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import Select, { components } from 'react-select';
 import Creatable from 'react-select/creatable';
@@ -28,6 +28,7 @@ import { DayPicker } from 'react-day-picker';
 import { ptBR, enUS, es } from 'react-day-picker/locale';
 import { useMask } from '@react-input/mask';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
 // src/button.tsx
 
@@ -2241,12 +2242,13 @@ var InputText = React8.forwardRef(
       "div",
       {
         className: cn(
-          "w-full flex outline-none",
+          "flex outline-none",
           "rounded-input",
           "border border-inputText-border-default focus-within:ring-[3px] focus-within:ring-inputText-border-focus focus-within:border-inputText-border-focus",
           "focus-within:text-inputText-text-focus placeholder:text-inputText-text-default disabled:text-inputText-text-disabled",
           isError && "border-inputText-border-danger focus-within:border-inputText-border-danger focus-within:ring-button-danger-border-focus",
-          disabled && "pointer-events-none"
+          disabled && "pointer-events-none",
+          className
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "nebula-ds relative w-full", children: [
@@ -2255,7 +2257,7 @@ var InputText = React8.forwardRef(
               {
                 ref,
                 className: cn(
-                  "w-full h-10 outline-none text-sm leading-none font-medium",
+                  "h-10 outline-none text-sm leading-none font-medium",
                   "bg-inputText-background-default disabled:bg-inputText-background-disabled",
                   "text-inputText-text-filled",
                   "disabled:cursor-not-allowed",
@@ -2267,7 +2269,7 @@ var InputText = React8.forwardRef(
                     "pr-10": initialInputType === "password",
                     "pr-10 pl-4": !!icon && iconPlacement === "end" && initialInputType !== "password"
                   },
-                  className
+                  "!w-full"
                 ),
                 ...{ ...props, icon: void 0, iconPlacement: void 0 },
                 disabled,
@@ -3476,10 +3478,11 @@ var PhoneInput = React8__default.forwardRef(({ className, ...props }, ref) => {
         "data-slot": "phone-input",
         ref,
         className: cn(
-          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus:ring-0 border-0 w-full h-auto",
+          "-ms-px rounded-s-none shadow-none focus-visible:z-10 ring-0 focus-within:ring-0 border-0 w-full h-auto",
           className
         ),
-        ...props
+        ...props,
+        type: "text"
       }
     )
   ] });
@@ -4965,113 +4968,6 @@ var TextArea = React8.forwardRef(
   }
 );
 TextArea.displayName = "TextArea";
-var ProfileImage = ({
-  maxSizeMB = 2,
-  subtitle,
-  onError,
-  maxFiles = Infinity,
-  onRemove,
-  image,
-  ...rest
-}) => {
-  const maxSize = maxSizeMB * 1024 * 1024;
-  const id = useId();
-  const [
-    { files, isDragging, errors },
-    {
-      handleDragEnter,
-      handleDragLeave,
-      handleDragOver,
-      handleDrop,
-      openFileDialog,
-      removeFile,
-      getInputProps
-    }
-  ] = useFileUpload({
-    initialFiles: image ? [
-      {
-        id,
-        url: image,
-        name: image,
-        size: 0,
-        type: "image"
-      }
-    ] : [],
-    multiple: false,
-    maxSize: maxSize > 0 ? maxSize : void 0,
-    accept: "image/*",
-    ...rest,
-    maxFiles
-  });
-  useEffect(() => {
-    onError?.(errors);
-  }, [errors, onError]);
-  const [file] = files;
-  return /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "button",
-        onClick: openFileDialog,
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDragOver: handleDragOver,
-        onDrop: handleDrop,
-        "data-dragging": isDragging || void 0,
-        className: cn(
-          "relative border border-transparent rounded-full size-fit",
-          "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
-          !file && "border-dashed border-fileUpload-border"
-        ),
-        "data-testid": "select-image-profile",
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ...getInputProps(),
-              className: "nebula-ds sr-only",
-              "aria-label": "Upload file"
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
-              "aria-hidden": "true",
-              children: [
-                file && file.preview && /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: file.preview,
-                    alt: file.file.name,
-                    className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
-                  }
-                ),
-                !file && /* @__PURE__ */ jsx(UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
-              ]
-            }
-          ),
-          file && /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
-              "data-testid": "remove-profile-image",
-              onClick: (e) => {
-                e.stopPropagation();
-                removeFile(file.id);
-                onRemove?.();
-              },
-              type: "button",
-              children: /* @__PURE__ */ jsx(XIcon, { className: "nebula-ds size-2" })
-            }
-          )
-        ]
-      }
-    ) }),
-    !!subtitle && /* @__PURE__ */ jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
-  ] });
-};
-ProfileImage.displayName = "ProfileImage";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -5959,8 +5855,8 @@ function Cropper2({
   onOpenChange,
   open,
   previewUrl,
-  onRemove: removeFile,
   onApply,
+  onCancelCrop,
   rounded = false,
   portal = false
 }) {
@@ -5973,7 +5869,6 @@ function Cropper2({
   const handleApply = async () => {
     if (!previewUrl || !croppedAreaPixels) {
       if (previewUrl) {
-        removeFile();
         setCroppedAreaPixels(null);
       }
       return;
@@ -5994,6 +5889,13 @@ function Cropper2({
       onOpenChange(false);
     }
   };
+  const handleCancelCrop = () => {
+    setFinalImageUrl(null);
+    setCroppedAreaPixels(null);
+    setZoom(1);
+    onOpenChange?.(false);
+    onCancelCrop?.();
+  };
   useEffect(() => {
     const currentFinalUrl = finalImageUrl;
     return () => {
@@ -6003,94 +5905,649 @@ function Cropper2({
     };
   }, [finalImageUrl]);
   const { cropper } = useNebulaI18n().messages;
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
-    DialogContent,
+  return /* @__PURE__ */ jsx(
+    Dialog,
     {
-      className: "nebula-ds gap-0 p-0 sm:max-w-140 *:[button]:hidden border border-cropper-dialogBorderColor",
-      portal,
-      showClose: false,
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsx(DialogHeader, { className: "nebula-ds contents space-y-0 text-left", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "nebula-ds flex items-center justify-between p-4 text-base", children: [
-          /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center gap-2", children: [
+      open,
+      onOpenChange: (isOpen) => {
+        if (!isOpen && !finalImageUrl) {
+          handleCancelCrop();
+        }
+        onOpenChange?.(isOpen);
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "nebula-ds gap-0 p-0 sm:max-w-140 *:[button]:hidden border border-cropper-dialogBorderColor",
+          portal,
+          showClose: false,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsx(DialogHeader, { className: "nebula-ds contents space-y-0 text-left", children: /* @__PURE__ */ jsxs(DialogTitle, { className: "nebula-ds flex items-center justify-between p-4 text-base", children: [
+              /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: true,
+                    type: "button",
+                    variant: "ghost",
+                    onClick: handleCancelCrop,
+                    "aria-label": "close-cropper-dialog",
+                    "data-testid": "close-cropper-dialog",
+                    size: "sm",
+                    children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+                  }
+                ),
+                cropper.dialogTitle
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  autoFocus: false,
+                  onClick: handleApply,
+                  disabled: !previewUrl,
+                  variant: "primary",
+                  size: "sm",
+                  type: "button",
+                  "aria-label": "apply-cropper-image",
+                  "data-testid": "apply-cropper-image",
+                  children: cropper.applyButtonLabel
+                }
+              )
+            ] }) }),
+            previewUrl && /* @__PURE__ */ jsxs(
+              CropperRoot2,
+              {
+                className: "nebula-ds h-96 sm:h-120",
+                image: previewUrl,
+                zoom,
+                onCropChange: handleCropChange,
+                onZoomChange: setZoom,
+                children: [
+                  /* @__PURE__ */ jsx(CropperDescription2, {}),
+                  /* @__PURE__ */ jsx(CropperImage2, {}),
+                  /* @__PURE__ */ jsx(CropperCropArea2, { rounded })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DialogFooter, { className: "nebula-ds border-t border-t-cropper-dialogBorderColor px-4 py-6", children: /* @__PURE__ */ jsxs("div", { className: "nebula-ds mx-auto flex w-full max-w-80 items-center gap-4", children: [
+              /* @__PURE__ */ jsx(
+                MinusIcon,
+                {
+                  className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+                  size: 16,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Slider,
+                {
+                  defaultValue: [1],
+                  value: [zoom],
+                  min: 1,
+                  max: 3,
+                  step: 0.1,
+                  onValueChange: (value) => setZoom(value[0]),
+                  "aria-label": "Zoom slider"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PlusIcon,
+                {
+                  className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
+                  size: 16,
+                  "aria-hidden": "true"
+                }
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var ProfileImage = ({
+  maxSizeMB = 5,
+  subtitle,
+  onError,
+  maxFiles = Infinity,
+  onRemove,
+  image,
+  cropperProps,
+  onChange
+}) => {
+  const maxSize = maxSizeMB * 1024 * 1024;
+  const id = useId();
+  const withCropper = useMemo(() => !!cropperProps, [cropperProps]);
+  const handleFileChange = (file2, blob) => {
+    if (!file2) {
+      return;
+    }
+    let fileLike = file2;
+    if (withCropper && !blob) {
+      return;
+    }
+    if (withCropper && blob) {
+      fileLike = new File([blob], file2.name, { type: file2.type });
+    }
+    onChange?.(fileLike);
+  };
+  const [
+    { files, isDragging, errors },
+    {
+      handleDragEnter,
+      handleDragLeave,
+      handleDragOver,
+      handleDrop,
+      openFileDialog,
+      removeFile,
+      getInputProps
+    }
+  ] = useFileUpload({
+    maxFiles,
+    initialFiles: image ? [
+      {
+        id,
+        url: image,
+        name: image,
+        size: 0,
+        type: "image"
+      }
+    ] : [],
+    multiple: false,
+    maxSize: maxSize > 0 ? maxSize : void 0,
+    accept: "image/*",
+    onFilesChange([file2]) {
+      handleFileChange(file2?.file);
+    }
+  });
+  const [finalImageUrl, setFinalImageUrl] = useState(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  useEffect(() => {
+    onError?.(errors);
+  }, [errors, onError]);
+  const [file] = files;
+  const fileId = file?.id;
+  const previousFileIdRef = useRef(null);
+  const previewUrl = file?.preview || null;
+  const profileImagePreview = useMemo(() => {
+    if (withCropper) return finalImageUrl;
+    return previewUrl;
+  }, [previewUrl, withCropper, finalImageUrl]);
+  useEffect(() => {
+    if (!withCropper) return;
+    if (fileId && fileId !== previousFileIdRef.current) {
+      setIsDialogOpen(true);
+    }
+    previousFileIdRef.current = fileId;
+  }, [fileId, withCropper]);
+  const handleApply = async (croppedUrl, croppedBlob) => {
+    try {
+      const newFinalUrl = URL.createObjectURL(croppedBlob);
+      if (finalImageUrl) {
+        URL.revokeObjectURL(finalImageUrl);
+      }
+      setFinalImageUrl(newFinalUrl);
+      handleFileChange(file?.file, croppedBlob);
+      setIsDialogOpen(false);
+    } catch (error2) {
+      setIsDialogOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "nebula-ds flex justify-center", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          onClick: openFileDialog,
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          "data-dragging": isDragging || void 0,
+          className: cn(
+            "relative border border-transparent rounded-full size-fit",
+            "bg-fileUpload-background hover:bg-fileUpload-backgroundHover transition-colors",
+            !file && "border-dashed border-fileUpload-border"
+          ),
+          "data-testid": "select-image-profile",
+          children: [
             /* @__PURE__ */ jsx(
-              Button,
+              "input",
               {
-                icon: true,
-                type: "button",
-                variant: "ghost",
-                onClick: () => onOpenChange(false),
-                "aria-label": "close-cropper-dialog",
-                "data-testid": "close-cropper-dialog",
-                size: "sm",
-                children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+                ...getInputProps(),
+                className: "nebula-ds sr-only",
+                "aria-label": "Upload file"
               }
             ),
-            cropper.dialogTitle
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              autoFocus: false,
-              onClick: handleApply,
-              disabled: !previewUrl,
-              variant: "primary",
-              size: "sm",
-              type: "button",
-              "aria-label": "apply-cropper-image",
-              "data-testid": "apply-cropper-image",
-              children: cropper.applyButtonLabel
-            }
-          )
-        ] }) }),
-        previewUrl && /* @__PURE__ */ jsxs(
-          CropperRoot2,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "nebula-ds flex size-12 shrink-0 items-center justify-center rounded-full",
+                "aria-hidden": "true",
+                children: [
+                  profileImagePreview && /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: profileImagePreview,
+                      alt: fileId,
+                      className: "nebula-ds rounded-[inherit] object-cover h-full w-full"
+                    }
+                  ),
+                  !file && /* @__PURE__ */ jsx(UserIcon, { className: "nebula-ds size-4 opacity-60 text-fileUpload-icon" })
+                ]
+              }
+            ),
+            profileImagePreview && file && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "nebula-ds box-border absolute flex items-center justify-center -top-1 -right-1 rounded-full size-5 text-profileImage-removeImageButton-icon border-2 border-profileImage-removeImageButton-border bg-profileImage-removeImageButton-background hover:bg-profileImage-removeImageButton-hover",
+                "data-testid": "remove-profile-image",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeFile(file.id);
+                  setFinalImageUrl(null);
+                  onChange?.(void 0);
+                  onRemove?.();
+                },
+                type: "button",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "nebula-ds size-2" })
+              }
+            )
+          ]
+        }
+      ) }),
+      !!subtitle && /* @__PURE__ */ jsx(Paragraph, { className: "nebula-ds text-center", size: "sm", children: subtitle })
+    ] }),
+    withCropper && /* @__PURE__ */ jsx(
+      Cropper2,
+      {
+        ...cropperProps,
+        open: isDialogOpen,
+        previewUrl,
+        onOpenChange: setIsDialogOpen,
+        onApply: handleApply,
+        onCancelCrop: () => {
+          fileId && removeFile(fileId);
+          setFinalImageUrl(null);
+          onChange?.(void 0);
+        }
+      }
+    )
+  ] });
+};
+ProfileImage.displayName = "ProfileImage";
+function RadioGroup2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        `
+        border-2
+        data-[state=checked]:border-4
+        
+        border-radio-border-unselected-default
+        data-[state=checked]:border-radio-background-selected-default
+        hover:border-radio-border-unselected-hover
+        data-[state=checked]:hover:border-radio-background-selected-hover
+
+        bg-radio-background-unselected-default
+        data-[state=checked]:bg-radio-background-unselected-default
+        hover:bg-radio-background-unselected-hover
+        data-[state=checked]:hover:bg-radio-background-unselected-hover
+
+        disabled:border-radio-border-unselected-disabled
+        disabled:bg-radio-background-unselected-disabled
+        data-[state=checked]:disabled:bg-radio-background-unselected-default
+        data-[state=checked]:disabled:border-radio-background-selected-disabled
+
+        focus-visible:ring-[2px]
+        focus-visible:border-radio-border-selected-focus
+
+        aria-invalid:ring-destructive/20
+        dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive
+        
+        aspect-square
+        size-4
+        shrink-0
+        rounded-full
+        shadow-xs
+        transition-all
+        outline-none
+        disabled:cursor-not-allowed
+        `,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "nebula-ds flex items-center justify-center text-current", children: /* @__PURE__ */ jsx("div", { className: "nebula-ds rounded-full w-2 h-2" }) })
+    }
+  );
+}
+var StepperContext = createContext(void 0);
+var StepItemContext = createContext(
+  void 0
+);
+var useStepper = () => {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper");
+  }
+  return context;
+};
+var useStepItem = () => {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error("useStepItem must be used within a StepperItem");
+  }
+  return context;
+};
+function Stepper({
+  defaultValue = 0,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  className,
+  ...props
+}) {
+  const [activeStep, setInternalStep] = React8.useState(defaultValue);
+  const setActiveStep = React8.useCallback(
+    (step) => {
+      if (value === void 0) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+  const currentStep = value ?? activeStep;
+  return /* @__PURE__ */ jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        activeStep: currentStep,
+        setActiveStep,
+        orientation
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "stepper",
+          className: cn(
+            `
+          group/stepper
+          gap-2
+          inline-flex
+          data-[orientation=horizontal]:w-full
+          data-[orientation=horizontal]:flex-row
+          data-[orientation=vertical]:flex-col
+          `,
+            className
+          ),
+          "data-orientation": orientation,
+          ...props
+        }
+      )
+    }
+  );
+}
+function StepperItem({
+  step,
+  completed = false,
+  disabled = false,
+  loading = false,
+  className,
+  children,
+  ...props
+}) {
+  const { activeStep } = useStepper();
+  const state = completed || step < activeStep ? "completed" : activeStep === step ? "active" : "inactive";
+  const isLoading = loading && step === activeStep;
+  return /* @__PURE__ */ jsx(
+    StepItemContext.Provider,
+    {
+      value: { step, state, isDisabled: disabled, isLoading },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "stepper-item",
+          className: cn(
+            `
+          group/step
+          gap-2
+          flex
+          items-center
+          group-data-[orientation=horizontal]/stepper:flex-row
+          group-data-[orientation=vertical]/stepper:flex-col
+          group-data-[orientation=vertical]/stepper:items-start
+          `,
+            className
+          ),
+          "data-state": state,
+          ...isLoading ? { "data-loading": true } : {},
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function StepperTrigger({
+  asChild = false,
+  className,
+  children,
+  isClickable = true,
+  ...props
+}) {
+  const { setActiveStep } = useStepper();
+  const { step, isDisabled } = useStepItem();
+  if (asChild) {
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(Comp, { "data-slot": "stepper-trigger", className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-slot": "stepper-trigger",
+      className: cn(
+        `
+        gap-2
+        inline-flex
+        items-center
+        rounded-full
+        outline-none
+        focus-visible:z-10
+        focus-visible:border-ring
+        focus-visible:ring-ring/50
+        focus-visible:ring-[3px]
+        disabled:pointer-events-none
+        disabled:opacity-50
+        `,
+        className
+      ),
+      onClick: () => isClickable ? setActiveStep(step) : null,
+      disabled: isDisabled,
+      ...props,
+      children
+    }
+  );
+}
+function StepperIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const { state, step, isLoading } = useStepItem();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "stepper-indicator",
+      className: cn(
+        `
+        flex
+        size-5
+        shrink-0
+        items-center
+        justify-center
+        rounded-full
+        font-semibold
+        text-xs
+        transition-colors
+        bg-stepper-background-default
+        text-stepper-count-default
+        data-[state=active]:bg-stepper-background-active
+        data-[state=active]:text-stepper-count-active
+        data-[state=completed]:bg-stepper-background-active
+        data-[state=completed]:text-stepper-count-active
+        `,
+        className
+      ),
+      "data-state": state,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        isLoading ? /* @__PURE__ */ jsx(
+          LoaderCircleIcon,
           {
-            className: "nebula-ds h-96 sm:h-120",
-            image: previewUrl,
-            zoom,
-            onCropChange: handleCropChange,
-            onZoomChange: setZoom,
-            children: [
-              /* @__PURE__ */ jsx(CropperDescription2, {}),
-              /* @__PURE__ */ jsx(CropperImage2, {}),
-              /* @__PURE__ */ jsx(CropperCropArea2, { rounded })
-            ]
+            className: "nebula-ds animate-spin",
+            size: 14,
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              `
+                transition-all
+                group-data-[state=completed]/step:scale-0
+                group-data-[state=completed]/step:opacity-0
+                `
+            ),
+            children: step
           }
         ),
-        /* @__PURE__ */ jsx(DialogFooter, { className: "nebula-ds border-t border-t-cropper-dialogBorderColor px-4 py-6", children: /* @__PURE__ */ jsxs("div", { className: "nebula-ds mx-auto flex w-full max-w-80 items-center gap-4", children: [
-          /* @__PURE__ */ jsx(
-            MinusIcon,
-            {
-              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
-              size: 16,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Slider,
-            {
-              defaultValue: [1],
-              value: [zoom],
-              min: 1,
-              max: 3,
-              step: 0.1,
-              onValueChange: (value) => setZoom(value[0]),
-              "aria-label": "Zoom slider"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            PlusIcon,
-            {
-              className: "nebula-ds shrink-0 size-5 text-cropper-sliderIconColor",
-              size: 16,
-              "aria-hidden": "true"
-            }
-          )
-        ] }) })
-      ]
+        /* @__PURE__ */ jsx(
+          CheckIcon,
+          {
+            className: cn(
+              `
+              absolute
+              scale-0
+              opacity-0
+              transition-all
+              group-data-[state=completed]/step:scale-100
+              group-data-[state=completed]/step:opacity-100
+              `
+            ),
+            size: 16,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
     }
-  ) });
+  );
+}
+function StepperTitle({
+  className,
+  ...props
+}) {
+  const { state } = useStepItem();
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      "data-slot": "stepper-title",
+      className: cn(
+        `
+        text-sm
+        font-medium
+        text-stepper-title-default
+        data-[state=active]:text-stepper-title-active
+        data-[state=completed]:text-stepper-title-active
+        `,
+        className
+      ),
+      "data-state": state,
+      ...props
+    }
+  );
+}
+function StepperDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "stepper-description",
+      className: cn(
+        `
+        text-sm
+        text-muted-foreground
+        `,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function StepperSeparator({
+  className,
+  ...props
+}) {
+  const { step } = useStepItem();
+  const { activeStep, orientation } = useStepper();
+  const separatorState = step < activeStep ? "completed" : "inactive";
+  const line = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "stepper-separator",
+      "data-orientation": orientation,
+      className: cn(
+        `
+        rounded-full
+        bg-stepper-separator-default
+        `,
+        orientation === "horizontal" && `
+          w-5
+          h-[2px]
+          flex-1
+        `,
+        orientation === "vertical" && `
+          w-[2px]
+          h-5
+          flex-none
+        `,
+        separatorState === "completed" && `
+          bg-stepper-separator-active
+        `,
+        className
+      ),
+      "data-state": separatorState,
+      ...props
+    }
+  );
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx("div", { className: "nebula-ds flex w-5 justify-center", children: line });
+  }
+  return line;
 }
 
 // src/tailwind.ts
@@ -6103,4 +6560,4 @@ var tailwind = {
   // plugin: () => require("tailwindcss")("node_modules/@nebulareact/dist/tailwind.config.js"),
 };
 
-export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, StyledSelect as Select, Separator2 as Separator, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };
+export { Accordion, AccordionContent, AccordionDescription, AccordionItem, AccordionTitle, AccordionTrigger, ActionBar, ActionBarButton, ActionBarClose, ActionBarContent, ActionBarDivider, ActionBarPortal, ActionBarTrigger, Alert, AlertButton, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, StyledAsync as Async, StyledAsyncCreatable as AsyncCreatable, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Caption, Checkbox, StyledCreatable as Creatable, Cropper2 as Cropper, CropperCropArea2 as CropperCropArea, CropperDescription2 as CropperDescription, CropperImage2 as CropperImage, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileUpload, FileUploadError, Heading, InputDatePickerSingle, InputDateTimePickerSingle, InputPhone, InputText, InputTime, Label, Link, NebulaI18nProvider, Pagination, Paragraph, Popover, PopoverContent, PopoverTrigger, ProfileImage, RadioGroup2 as RadioGroup, RadioGroupItem, StyledSelect as Select, Separator2 as Separator, Skeleton, Slider, Space, SpaceDirectionEnum, SpaceSizeEnum, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TextArea, Toaster, Tooltip, alertVariants, badgeSizeEnum, badgeVariantEnum, buttonSizeEnum, buttonVariantEnum, buttonVariantsConfig, dateIsAvailable, formatBytes, getNebulaLanguage, localeByi18nKey, messages19 as messages, separatorVariants, setNebulaLanguage, tagVariantsEnum, tailwind, toast, useClickOutside, useFileUpload, useKeyPress, useNebulaI18n };