@grupor5/raya 0.2.46 → 0.2.48

package/dist/molecules/file-upload/index.js

@@ -0,0 +1,752 @@
+'use strict';
+
+var React4 = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var reactSlot = require('@radix-ui/react-slot');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var LabelPrimitive = require('@radix-ui/react-label');
+var rayaIcons = require('@grupor5/raya-icons');
+var FolderCloudIcon = require('@grupor5/raya-icons/icons/FolderCloudIcon');
+var DocumentTextIcon = require('@grupor5/raya-icons/icons/DocumentTextIcon');
+var DocumentDownloadIcon = require('@grupor5/raya-icons/icons/DocumentDownloadIcon');
+var TrashIcon = require('@grupor5/raya-icons/icons/TrashIcon');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/tokens/buttons.ts
+var buttonSizeClasses = {
+  sm: {
+    base: "h-8 px-2 py-1 text-sm rounded-[10px]",
+    icon: "h-8 w-8 rounded-[10px]",
+    iconSize: "w-4 h-4"
+  },
+  md: {
+    base: "h-10 px-4 py-2 text-base rounded-xl",
+    icon: "h-10 w-10 rounded-xl",
+    iconSize: "w-5 h-5"
+  },
+  lg: {
+    base: "h-12 px-6 py-3 text-lg rounded-2xl",
+    icon: "h-12 w-12 rounded-2xl",
+    iconSize: "w-[22px] h-[22px]"
+  }
+};
+var buttonVariantClasses = {
+  // Primary variants
+  primary: {
+    primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-[hsl(var(--primary-pressed))] disabled:bg-primary-400 disabled:text-primary-700",
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/90 active:bg-secondary/80 disabled:bg-primary-400 disabled:text-primary-700",
+    success: "bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 active:bg-emerald-800 disabled:bg-primary-400 disabled:text-primary-700",
+    warning: "bg-amber-600 text-white shadow-sm hover:bg-amber-700 active:bg-amber-800 disabled:bg-primary-400 disabled:text-primary-700",
+    destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 active:bg-destructive/80 disabled:bg-primary-400 disabled:text-primary-700",
+    neutral: "bg-neutral-700 text-white shadow-sm hover:bg-neutral-800 active:bg-neutral-900 disabled:bg-primary-400 disabled:text-primary-700"
+  },
+  // Secondary variants (outlined)
+  secondary: {
+    primary: "border border-primary text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent",
+    secondary: "border border-secondary text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent",
+    success: "border border-emerald-600 text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent",
+    warning: "border border-amber-600 text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent",
+    destructive: "border border-destructive text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent",
+    neutral: "border border-neutral-700 text-neutral-700 bg-transparent hover:bg-neutral-50 active:bg-neutral-100 disabled:border-primary-400 disabled:text-primary-700 disabled:bg-transparent"
+  },
+  // Ghost variants (text only)
+  ghost: {
+    primary: "text-primary bg-transparent hover:bg-primary/10 active:bg-primary/20 disabled:text-primary-700 disabled:bg-transparent",
+    secondary: "text-secondary bg-transparent hover:bg-secondary/10 active:bg-secondary/20 disabled:text-primary-700 disabled:bg-transparent",
+    success: "text-emerald-600 bg-transparent hover:bg-emerald-50 active:bg-emerald-100 disabled:text-primary-700 disabled:bg-transparent",
+    warning: "text-amber-600 bg-transparent hover:bg-amber-50 active:bg-amber-100 disabled:text-primary-700 disabled:bg-transparent",
+    destructive: "text-destructive bg-transparent hover:bg-destructive/10 active:bg-destructive/20 disabled:text-primary-700 disabled:bg-transparent",
+    neutral: "text-neutral-700 bg-transparent hover:bg-neutral-100 active:bg-neutral-200 disabled:text-primary-700 disabled:bg-transparent"
+  }
+};
+var buttonBaseClasses = "inline-flex items-center justify-center gap-2 whitespace-nowrap font-regular transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed focus-visible:border-2 focus-visible:border-[--stroke-color-focus-border]";
+var buttonLoadingClasses = {
+  spinner: "animate-spin",
+  container: "flex items-center justify-center gap-2",
+  text: "opacity-70"
+};
+var getButtonSizeClasses = (size, isIcon) => {
+  return isIcon ? buttonSizeClasses[size].icon : buttonSizeClasses[size].base;
+};
+var getButtonVariantClasses = (variant, color) => {
+  var _a;
+  if (variant === "icon") {
+    return buttonVariantClasses.ghost[color];
+  }
+  return ((_a = buttonVariantClasses[variant]) == null ? void 0 : _a[color]) || "";
+};
+var getButtonIconSize = (size) => {
+  return buttonSizeClasses[size].iconSize;
+};
+var defaultButtonConfig = {
+  variant: "primary",
+  size: "md",
+  color: "primary",
+  type: "button"
+};
+var LoadingSpinner = ({
+  size,
+  className
+}) => {
+  const sizeClasses = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(buttonLoadingClasses.spinner, sizeClasses[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { fill: "none", viewBox: "0 0 24 24", className: "w-full h-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        className: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        className: "opacity-75",
+        fill: "currentColor",
+        d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      }
+    )
+  ] }) });
+};
+var Button = React4.forwardRef((_a, ref) => {
+  var _b = _a, {
+    variant = defaultButtonConfig.variant,
+    size = defaultButtonConfig.size,
+    color = defaultButtonConfig.color,
+    disabled = false,
+    loading = false,
+    loadingText,
+    icon,
+    iconLeft,
+    iconRight,
+    className,
+    children,
+    type = defaultButtonConfig.type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    asChild = false,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "color",
+    "disabled",
+    "loading",
+    "loadingText",
+    "icon",
+    "iconLeft",
+    "iconRight",
+    "className",
+    "children",
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "asChild",
+    "onClick"
+  ]);
+  const isIconOnly = variant === "icon" || !!(!children && (icon || iconLeft || iconRight));
+  const buttonClasses = React4.useMemo(() => {
+    const sizeClasses = getButtonSizeClasses(size, isIconOnly);
+    const variantClasses = getButtonVariantClasses(variant, color);
+    return cn(
+      buttonBaseClasses,
+      sizeClasses,
+      variantClasses,
+      className
+    );
+  }, [variant, size, color, isIconOnly, className]);
+  const buttonContent = React4.useMemo(() => {
+    if (loading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonLoadingClasses.container, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { size }),
+        loadingText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: buttonLoadingClasses.text, children: loadingText })
+      ] });
+    }
+    const iconSizeClass = getButtonIconSize(size);
+    const renderIcon = (iconNode) => {
+      if (React4__namespace.default.isValidElement(iconNode)) {
+        return React4__namespace.default.cloneElement(iconNode, {
+          className: cn(iconSizeClass, iconNode.props.className),
+          "aria-hidden": true
+        });
+      }
+      return iconNode;
+    };
+    if (isIconOnly) {
+      return renderIcon(icon || iconLeft || iconRight);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [
+      iconLeft && renderIcon(iconLeft),
+      children && /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+      iconRight && renderIcon(iconRight)
+    ] });
+  }, [loading, loadingText, isIconOnly, icon, iconLeft, iconRight, children, size]);
+  const accessibilityProps = React4.useMemo(() => {
+    const props2 = {};
+    if (isIconOnly && !ariaLabel) {
+      console.warn("Icon-only buttons should have an aria-label for accessibility");
+    }
+    if (ariaLabel) {
+      props2["aria-label"] = ariaLabel;
+    }
+    if (ariaDescribedBy) {
+      props2["aria-describedby"] = ariaDescribedBy;
+    }
+    if (loading) {
+      props2["aria-busy"] = true;
+      props2["aria-disabled"] = true;
+    }
+    if (disabled || loading) {
+      props2["aria-disabled"] = true;
+    }
+    return props2;
+  }, [isIconOnly, ariaLabel, ariaDescribedBy, loading, disabled]);
+  const handleClick = (event) => {
+    if (disabled || loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick == null ? void 0 : onClick(event);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactSlot.Slot,
+      __spreadProps(__spreadValues(__spreadValues({
+        ref,
+        className: buttonClasses
+      }, accessibilityProps), props), {
+        children
+      })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues(__spreadValues({
+      ref,
+      type,
+      className: buttonClasses,
+      disabled: disabled || loading,
+      onClick: handleClick
+    }, accessibilityProps), props), {
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-3 h-5 w-5 text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ),
+        loading && loadingText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: buttonLoadingClasses.text, children: loadingText }) : buttonContent
+      ]
+    })
+  );
+});
+Button.displayName = "Button";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React4__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    __spreadValues({
+      ref,
+      className: cn(labelVariants(), className)
+    }, props)
+  );
+});
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var progressBarContainerVariants = classVarianceAuthority.cva("w-full min-w-[200px]", {
+  variants: {
+    size: {
+      sm: "text-progress-bar-sm",
+      md: "text-progress-bar-md",
+      lg: "text-progress-bar-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var progressBarTrackVariants = classVarianceAuthority.cva(
+  "overflow-hidden rounded-full bg-progress-bar-track",
+  {
+    variants: {
+      size: {
+        sm: "h-progress-bar-sm",
+        md: "h-progress-bar-md",
+        lg: "h-progress-bar-lg"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressBarIndicatorVariants = classVarianceAuthority.cva(
+  "h-full rounded-full bg-progress-bar-indicator transition-all duration-300 ease-in-out",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var ProgressBar = React4__namespace.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      value,
+      label,
+      size,
+      showPercentage = true
+    } = _b, props = __objRest(_b, [
+      "className",
+      "value",
+      "label",
+      "size",
+      "showPercentage"
+    ]);
+    const progress = Math.max(0, Math.min(100, value || 0));
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(progressBarContainerVariants({ size }), className)
+      }, props), {
+        children: [
+          (label || showPercentage) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center mb-1",
+                label ? "justify-between" : "justify-end"
+              ),
+              children: [
+                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                  Math.round(progress),
+                  "%"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(progressBarTrackVariants({ size })), children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(progressBarIndicatorVariants()),
+              style: { width: `${progress}%` }
+            }
+          ) })
+        ]
+      })
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+var alertVariants = classVarianceAuthority.cva(
+  "relative w-full rounded-2xl px-6 py-2 flex items-center justify-between",
+  {
+    variants: {
+      variant: {
+        default: "bg-background",
+        danger: "bg-red-100",
+        success: "bg-green-10",
+        warning: "bg-yellow-10",
+        neutral: "bg-secondary-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var AlertContext = React4__namespace.createContext(null);
+var useAlertContext = () => {
+  const context = React4__namespace.useContext(AlertContext);
+  if (!context) {
+    throw new Error("useAlertContext must be used inside an Alert");
+  }
+  return context;
+};
+var Alert = React4__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className, variant, children, isClosable, actions } = _b, props = __objRest(_b, ["className", "variant", "children", "isClosable", "actions"]);
+  const [isVisible, setIsVisible] = React4__namespace.useState(true);
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children }),
+        isClosable ? /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "ghost",
+            onClick: () => setIsVisible(false),
+            "aria-label": "Cerrar",
+            className: "border p-2 !rounded-[8px] border-primary-500 text-primary-1200 h-6 w-6",
+            children: /* @__PURE__ */ jsxRuntime.jsx(rayaIcons.CloseCircleIcon, { size: 16 })
+          }
+        ) : actions
+      ]
+    })
+  ) });
+});
+Alert.displayName = "Alert";
+var AlertTitle = React4__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { variant } = useAlertContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-base font-bold leading-5",
+        {
+          "text-red-600": variant === "danger",
+          "text-primary-900": ["success", "warning", "neutral", "default"].includes(
+            variant
+          ) || !variant
+        },
+        className
+      )
+    }, props)
+  );
+});
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React4__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const { variant } = useAlertContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-xs leading-5 [&_p]:leading-relaxed text-primary-900",
+        className
+      )
+    }, props)
+  );
+});
+AlertDescription.displayName = "AlertDescription";
+var FileUploadDropzone = React4__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      onSelect,
+      accept = ".png,.jpg,.jpeg,.pdf",
+      disabled = false,
+      subtitle = "PNG, JPG, JPEG o PDF",
+      buttonLabel = "Abrir explorador"
+    } = _b, props = __objRest(_b, [
+      "className",
+      "onSelect",
+      "accept",
+      "disabled",
+      "subtitle",
+      "buttonLabel"
+    ]);
+    const inputRef = React4__namespace.useRef(null);
+    const handleChange = (e) => {
+      const files = e.target.files;
+      if (files && files.length > 0) {
+        onSelect(Array.from(files));
+      }
+      e.target.value = "";
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex flex-col gap-[26px] rounded-2xl border border-primary-400 bg-white p-6",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(FolderCloudIcon.FolderCloudIcon, { className: "h-6 w-6 text-primary-600", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base text-primary-1200", children: "A\xF1adir archivos" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-primary-600", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "primary",
+              size: "lg",
+              className: "w-full",
+              disabled,
+              iconLeft: /* @__PURE__ */ jsxRuntime.jsx(DocumentDownloadIcon.DocumentDownloadIcon, {}),
+              onClick: () => {
+                var _a2;
+                return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+              },
+              children: buttonLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              hidden: true,
+              accept,
+              disabled,
+              onChange: handleChange
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+FileUploadDropzone.displayName = "FileUploadDropzone";
+function formatFileSize(bytes) {
+  if (bytes >= 1048576) return `${Math.round(bytes / 1048576)} MB`;
+  if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${bytes} B`;
+}
+var FileUploadItem = React4__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      name,
+      size,
+      status,
+      progress = 0,
+      errorMessage,
+      onDelete
+    } = _b, props = __objRest(_b, [
+      "className",
+      "name",
+      "size",
+      "status",
+      "progress",
+      "errorMessage",
+      "onDelete"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "flex items-start gap-4 rounded-2xl border border-primary-300 bg-white p-4",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
+                  status === "uploaded" ? "bg-secondary-200" : status === "error" ? "bg-red-200" : "bg-primary-100"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  DocumentTextIcon.DocumentTextIcon,
+                  {
+                    className: cn(
+                      "h-5 w-5",
+                      status === "uploaded" ? "text-secondary-900" : status === "error" ? "text-red-600" : "text-primary-600"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { value: progress, label: name, showPercentage: true, size: "sm" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-primary-600", children: formatFileSize(size) })
+            ] }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-primary-1200", children: name }),
+              errorMessage && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-red-600", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Ops!" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "h-1 w-1 shrink-0 rounded-full bg-red-600",
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage })
+              ] })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm text-primary-1200", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-primary-600", children: formatFileSize(size) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "icon",
+              size: "md",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(TrashIcon.TrashIcon, {}),
+              onClick: onDelete,
+              "aria-label": "Eliminar archivo"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+FileUploadItem.displayName = "FileUploadItem";
+var FileUpload = React4__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      files,
+      onSelect,
+      onDelete,
+      maxFiles = 1,
+      accept,
+      subtitle,
+      disabled = false,
+      recommendations
+    } = _b, props = __objRest(_b, [
+      "className",
+      "files",
+      "onSelect",
+      "onDelete",
+      "maxFiles",
+      "accept",
+      "subtitle",
+      "disabled",
+      "recommendations"
+    ]);
+    const showDropzone = files.length < maxFiles && !files.some((f) => f.status === "uploading");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn("flex flex-col gap-4", className)
+      }, props), {
+        children: [
+          recommendations && recommendations.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Alert, { variant: "neutral", className: "py-4", children: /* @__PURE__ */ jsxRuntime.jsx(AlertDescription, { children: recommendations.map((text, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            text,
+            i < recommendations.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("br", {})
+          ] }, i)) }) }),
+          showDropzone && /* @__PURE__ */ jsxRuntime.jsx(
+            FileUploadDropzone,
+            {
+              onSelect,
+              accept,
+              subtitle,
+              disabled
+            }
+          ),
+          files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
+            FileUploadItem,
+            {
+              name: file.name,
+              size: file.size,
+              status: file.status,
+              progress: file.progress,
+              errorMessage: file.errorMessage,
+              onDelete: () => onDelete(file.id)
+            },
+            file.id
+          ))
+        ]
+      })
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+
+exports.FileUpload = FileUpload;
+exports.FileUploadDropzone = FileUploadDropzone;
+exports.FileUploadItem = FileUploadItem;