@12-apps/ui 5.0.0 → 5.1.0

package/dist/form/Toggle.js

@@ -0,0 +1,234 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/Toggle/Toggle.tsx
+import { ToggleButton } from "@mui/material";
+import { styled } from "@mui/material";
+import { forwardRef } from "react";
+
+// src/components/form/Toggle/Toggle.styles.ts
+import { alpha, keyframes } from "@mui/material";
+var glowAnimation = keyframes`
+  0% { box-shadow: 0 0 5px currentColor; }
+  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
+  100% { box-shadow: 0 0 5px currentColor; }
+`;
+var floatAnimation = keyframes`
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-2px); }
+`;
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var shade = (palette, key, fallback) => palette?.[key] || palette?.main || fallback[key];
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  const fallback = theme.palette.primary;
+  const palette = colorMap[color] || fallback;
+  return {
+    main: palette?.main || fallback.main,
+    dark: shade(palette, "dark", fallback),
+    light: shade(palette, "light", fallback),
+    contrastText: palette?.contrastText || "#fff"
+  };
+};
+var SIZE_MAP = {
+  xs: { padding: "4px 8px", fontSize: "0.75rem" },
+  sm: { padding: "6px 12px", fontSize: "0.875rem" },
+  md: { padding: "8px 16px", fontSize: "1rem" },
+  lg: { padding: "10px 20px", fontSize: "1.125rem" },
+  xl: { padding: "12px 24px", fontSize: "1.25rem" }
+};
+var baseStyles = (theme, colorPalette, customSize) => ({
+  textTransform: "none",
+  fontWeight: 500,
+  borderRadius: theme.spacing(1),
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,
+  color: theme.palette.text.primary,
+  backgroundColor: "transparent",
+  position: "relative",
+  overflow: "hidden",
+  // A zero-sized circle that grows to fill the button on hover.
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha(colorPalette.main, 0.2),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.4s, height 0.4s"
+  },
+  "&:hover": {
+    backgroundColor: alpha(colorPalette.main, 0.08),
+    borderColor: colorPalette.main,
+    transform: "translateY(-1px)",
+    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,
+    animation: `${floatAnimation} 2s ease-in-out infinite`,
+    "&::before": {
+      width: "100%",
+      height: "100%"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  },
+  "&.Mui-selected": {
+    backgroundColor: colorPalette.main,
+    color: colorPalette.contrastText || "#fff",
+    borderColor: colorPalette.main,
+    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, transparent, ${alpha("#fff", 0.1)})`,
+      pointerEvents: "none"
+    },
+    "&:hover": {
+      backgroundColor: colorPalette.dark,
+      transform: "translateY(-2px) scale(1.02)",
+      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`
+    }
+  },
+  // Size wins over everything above it.
+  ...SIZE_MAP[customSize] ?? {}
+});
+var variantStyles = (customVariant, colorPalette) => {
+  switch (customVariant) {
+    case "outline":
+      return {
+        backgroundColor: "transparent",
+        border: `2px solid ${colorPalette.main}`,
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: colorPalette.main,
+          color: colorPalette.contrastText || "#fff"
+        }
+      };
+    case "soft":
+      return {
+        backgroundColor: alpha(colorPalette.main, 0.1),
+        border: "none",
+        color: colorPalette.main,
+        "&.Mui-selected": {
+          backgroundColor: alpha(colorPalette.main, 0.2),
+          color: colorPalette.main
+        }
+      };
+    default:
+      return {};
+  }
+};
+var effectStyles = (theme, colorPalette, { glass, gradient, glow }) => ({
+  ...glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...gradient && {
+    "&.Mui-selected": {
+      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,
+      backgroundSize: "200% 200%",
+      animation: `${floatAnimation} 3s ease-in-out infinite`,
+      border: "none",
+      "&:hover": {
+        backgroundPosition: "100% 100%"
+      }
+    }
+  },
+  ...glow && {
+    "&.Mui-selected": {
+      animation: `${glowAnimation} 2s ease-in-out infinite`,
+      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`
+    }
+  }
+});
+
+// src/components/form/Toggle/Toggle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledToggle = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow })
+  };
+});
+var Toggle = forwardRef(
+  ({
+    variant = "default",
+    color = "primary",
+    size = "md",
+    icon,
+    glow = false,
+    glass = false,
+    gradient = false,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const testIds = {
+      container: dataTestId,
+      icon: dataTestId ? `${dataTestId}-icon` : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledToggle,
+      {
+        ref,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        "data-testid": testIds.container,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { marginRight: children ? "8px" : "0" },
+              "data-testid": testIds.icon,
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+export {
+  Toggle
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/form/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/Toggle/Toggle.tsx","../../src/components/form/Toggle/Toggle.styles.ts"],"sourcesContent":["import { ToggleButton } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport {\n  baseStyles,\n  effectStyles,\n  getColorFromTheme,\n  variantStyles,\n} from './Toggle.styles';\nimport type { ToggleProps } from './Toggle.types';\n\nconst StyledToggle = styled(ToggleButton, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient'].includes(\n      prop as string,\n    ),\n})<{\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n}>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n}) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    ...baseStyles(theme, colorPalette, customSize),\n    ...variantStyles(customVariant, colorPalette),\n    ...effectStyles(theme, colorPalette, { glass, gradient, glow }),\n  };\n});\n\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      variant = 'default',\n      color = 'primary',\n      size = 'md',\n      icon,\n      glow = false,\n      glass = false,\n      gradient = false,\n      dataTestId,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const testIds = {\n      container: dataTestId,\n      icon: dataTestId ? `${dataTestId}-icon` : undefined,\n    };\n\n    return (\n      <StyledToggle\n        ref={ref}\n        customVariant={variant}\n        customColor={color}\n        customSize={size}\n        glow={glow}\n        glass={glass}\n        gradient={gradient}\n        data-testid={testIds.container}\n        {...props}\n      >\n        {icon && (\n          <span\n            style={{ marginRight: children ? '8px' : '0' }}\n            data-testid={testIds.icon}\n          >\n            {icon}\n          </span>\n        )}\n        {children}\n      </StyledToggle>\n    );\n  },\n);\n\nToggle.displayName = 'Toggle';\n","import { alpha, keyframes } from '@mui/material';\nimport type { CSSObject, PaletteColor, Theme } from '@mui/material';\n\nconst glowAnimation = keyframes`\n  0% { box-shadow: 0 0 5px currentColor; }\n  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }\n  100% { box-shadow: 0 0 5px currentColor; }\n`;\n\nconst floatAnimation = keyframes`\n  0%, 100% { transform: translateY(0px); }\n  50% { transform: translateY(-2px); }\n`;\n\ninterface TogglePalette {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n}\n\nconst neutralPalette = (theme: Theme): TogglePalette => ({\n  main: theme.palette.grey?.[700] || '#616161',\n  dark: theme.palette.grey?.[800] || '#424242',\n  light: theme.palette.grey?.[500] || '#9e9e9e',\n  contrastText: '#fff',\n});\n\n// A theme can be handed to us with shades missing, so each one falls back through\n// the palette's own main colour before reaching for primary.\nconst shade = (\n  palette: PaletteColor | undefined,\n  key: 'dark' | 'light',\n  fallback: PaletteColor,\n): string => palette?.[key] || palette?.main || fallback[key];\n\nexport const getColorFromTheme = (theme: Theme, color: string): TogglePalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PaletteColor> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  const fallback = theme.palette.primary;\n  const palette = colorMap[color] || fallback;\n\n  return {\n    main: palette?.main || fallback.main,\n    dark: shade(palette, 'dark', fallback),\n    light: shade(palette, 'light', fallback),\n    contrastText: palette?.contrastText || '#fff',\n  };\n};\n\nconst SIZE_MAP: Record<string, CSSObject> = {\n  xs: { padding: '4px 8px', fontSize: '0.75rem' },\n  sm: { padding: '6px 12px', fontSize: '0.875rem' },\n  md: { padding: '8px 16px', fontSize: '1rem' },\n  lg: { padding: '10px 20px', fontSize: '1.125rem' },\n  xl: { padding: '12px 24px', fontSize: '1.25rem' },\n};\n\nexport const baseStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  customSize: string,\n): CSSObject => ({\n  textTransform: 'none',\n  fontWeight: 500,\n  borderRadius: theme.spacing(1),\n  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n  border: `2px solid ${alpha(theme.palette.divider, 0.3)}`,\n  color: theme.palette.text.primary,\n  backgroundColor: 'transparent',\n  position: 'relative',\n  overflow: 'hidden',\n\n  // A zero-sized circle that grows to fill the button on hover.\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(colorPalette.main, 0.2),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.4s, height 0.4s',\n  },\n\n  '&:hover': {\n    backgroundColor: alpha(colorPalette.main, 0.08),\n    borderColor: colorPalette.main,\n    transform: 'translateY(-1px)',\n    boxShadow: `0 4px 8px ${alpha(colorPalette.main, 0.15)}`,\n    animation: `${floatAnimation} 2s ease-in-out infinite`,\n\n    '&::before': {\n      width: '100%',\n      height: '100%',\n    },\n  },\n\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n\n  '&.Mui-selected': {\n    backgroundColor: colorPalette.main,\n    color: colorPalette.contrastText || '#fff',\n    borderColor: colorPalette.main,\n    boxShadow: `0 2px 8px ${alpha(colorPalette.main, 0.3)}`,\n\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, transparent, ${alpha('#fff', 0.1)})`,\n      pointerEvents: 'none',\n    },\n\n    '&:hover': {\n      backgroundColor: colorPalette.dark,\n      transform: 'translateY(-2px) scale(1.02)',\n      boxShadow: `0 6px 20px ${alpha(colorPalette.main, 0.4)}`,\n    },\n  },\n\n  // Size wins over everything above it.\n  ...(SIZE_MAP[customSize] ?? {}),\n});\n\nexport const variantStyles = (\n  customVariant: string | undefined,\n  colorPalette: TogglePalette,\n): CSSObject => {\n  switch (customVariant) {\n    case 'outline':\n      return {\n        backgroundColor: 'transparent',\n        border: `2px solid ${colorPalette.main}`,\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: colorPalette.main,\n          color: colorPalette.contrastText || '#fff',\n        },\n      };\n    case 'soft':\n      return {\n        backgroundColor: alpha(colorPalette.main, 0.1),\n        border: 'none',\n        color: colorPalette.main,\n\n        '&.Mui-selected': {\n          backgroundColor: alpha(colorPalette.main, 0.2),\n          color: colorPalette.main,\n        },\n      };\n    default:\n      return {};\n  }\n};\n\ninterface ToggleEffects {\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}\n\n// gradient and glow both target `.Mui-selected`; with both on, the later spread\n// wins, so glow's animation replaces gradient's.\nexport const effectStyles = (\n  theme: Theme,\n  colorPalette: TogglePalette,\n  { glass, gradient, glow }: ToggleEffects,\n): CSSObject => ({\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(20px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n\n  ...(gradient && {\n    '&.Mui-selected': {\n      background: `linear-gradient(135deg, ${colorPalette.light}, ${colorPalette.main}, ${colorPalette.dark})`,\n      backgroundSize: '200% 200%',\n      animation: `${floatAnimation} 3s ease-in-out infinite`,\n      border: 'none',\n\n      '&:hover': {\n        backgroundPosition: '100% 100%',\n      },\n    },\n  }),\n\n  ...(glow && {\n    '&.Mui-selected': {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 15px ${alpha(colorPalette.main, 0.6)}`,\n    },\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/form/ToggleGroup.js

@@ -0,0 +1,8 @@
+import {
+  ToggleGroup
+} from "../chunk-P3IPM2SZ.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  ToggleGroup
+};
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/form/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/form/UploadButton.js

@@ -0,0 +1,429 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/UploadButton/UploadButton.tsx
+import { Box as Box2 } from "@mui/material";
+import React from "react";
+
+// src/components/form/UploadButton/UploadButton.hooks.ts
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+var SIMULATED_PROGRESS_CEILING = 90;
+var SIMULATED_PROGRESS_STEP = 10;
+var SIMULATED_PROGRESS_INTERVAL_MS = 100;
+var PROGRESS_RESET_DELAY_MS = 1e3;
+var BYTES_PER_MB = 1024 * 1024;
+var INITIAL_STATE = {
+  isDragOver: false,
+  isUploading: false,
+  uploadProgress: 0,
+  error: null
+};
+function useFileValidator(maxSizeMB, validate) {
+  return useCallback(
+    (file) => {
+      if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {
+        return `File size must be less than ${maxSizeMB}MB`;
+      }
+      return validate ? validate(file) : null;
+    },
+    [maxSizeMB, validate]
+  );
+}
+function useUploadRunner(onUpload, externalUploading, setState) {
+  return useCallback(
+    async (file) => {
+      if (!onUpload || externalUploading) return;
+      try {
+        setState((prev) => ({ ...prev, isUploading: true, uploadProgress: 0 }));
+        const timer = globalThis.setInterval(() => {
+          setState((prev) => {
+            if (prev.uploadProgress >= SIMULATED_PROGRESS_CEILING) {
+              globalThis.clearInterval(timer);
+              return prev;
+            }
+            return { ...prev, uploadProgress: prev.uploadProgress + SIMULATED_PROGRESS_STEP };
+          });
+        }, SIMULATED_PROGRESS_INTERVAL_MS);
+        await onUpload(file);
+        globalThis.clearInterval(timer);
+        setState((prev) => ({ ...prev, isUploading: false, uploadProgress: 100 }));
+        globalThis.setTimeout(() => {
+          setState((prev) => ({ ...prev, uploadProgress: 0 }));
+        }, PROGRESS_RESET_DELAY_MS);
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isUploading: false,
+          uploadProgress: 0,
+          error: error instanceof Error ? error.message : "Upload failed"
+        }));
+      }
+    },
+    [onUpload, externalUploading, setState]
+  );
+}
+function useUploadSelection({
+  onSelect,
+  multiple,
+  onSelectMany,
+  onUpload,
+  externalUploading,
+  validateFile
+}) {
+  const [state, setState] = useState(INITIAL_STATE);
+  const runUpload = useUploadRunner(onUpload, externalUploading, setState);
+  const selectOne = useCallback(
+    (file) => {
+      const error = validateFile(file);
+      setState((prev) => ({ ...prev, error }));
+      if (error) return;
+      onSelect(file);
+      void runUpload(file);
+    },
+    [onSelect, runUpload, validateFile]
+  );
+  const selectMany = useCallback(
+    (files, accept) => {
+      const accepted = [];
+      let rejection = null;
+      for (const file of files) {
+        const error = validateFile(file);
+        if (error) rejection ?? (rejection = error);
+        else accepted.push(file);
+      }
+      setState((prev) => ({ ...prev, error: rejection }));
+      if (accepted.length === 0) return;
+      accept(accepted);
+      void (async () => {
+        for (const file of accepted) await runUpload(file);
+      })();
+    },
+    [runUpload, validateFile]
+  );
+  const handleFiles = useCallback(
+    (files) => {
+      if (files.length === 0) return;
+      if (multiple && onSelectMany) selectMany(files, onSelectMany);
+      else selectOne(files[0]);
+    },
+    [multiple, onSelectMany, selectMany, selectOne]
+  );
+  const setDragOver = useCallback((isDragOver) => {
+    setState((prev) => ({ ...prev, isDragOver }));
+  }, []);
+  return useMemo(() => ({ state, setDragOver, handleFiles }), [state, setDragOver, handleFiles]);
+}
+var swallow = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+function useDragHandlers(disabled, setDragOver, handleFiles) {
+  return {
+    onDragEnter: (event) => {
+      swallow(event);
+      if (!disabled) setDragOver(true);
+    },
+    onDragLeave: (event) => {
+      swallow(event);
+      setDragOver(false);
+    },
+    onDragOver: swallow,
+    onDrop: (event) => {
+      swallow(event);
+      setDragOver(false);
+      if (!disabled) handleFiles(Array.from(event.dataTransfer.files));
+    }
+  };
+}
+function useUploadButton(props) {
+  const {
+    onSelect,
+    multiple = false,
+    onSelectMany,
+    onUpload,
+    uploading: externalUploading = false,
+    progress: externalProgress = 0,
+    maxSizeMB,
+    validate,
+    helperText,
+    errorText,
+    disabled = false
+  } = props;
+  const inputRef = useRef(null);
+  const inputId = `upload-button-${useId()}`;
+  const validateFile = useFileValidator(maxSizeMB, validate);
+  const { state, setDragOver, handleFiles } = useUploadSelection({
+    onSelect,
+    multiple,
+    onSelectMany,
+    onUpload,
+    externalUploading,
+    validateFile
+  });
+  const drag = useDragHandlers(disabled, setDragOver, handleFiles);
+  const derived = useDerivedUploadState({
+    state,
+    inputId,
+    externalUploading,
+    externalProgress,
+    errorText,
+    helperText
+  });
+  const openPicker = useCallback(() => inputRef.current?.click(), []);
+  const handleInputChange = useCallback(
+    (event) => {
+      handleFiles(Array.from(event.target.files ?? []));
+      event.target.value = "";
+    },
+    [handleFiles]
+  );
+  return { inputRef, inputId, state, drag, derived, openPicker, handleInputChange };
+}
+function useDerivedUploadState({
+  state,
+  inputId,
+  externalUploading,
+  externalProgress,
+  errorText,
+  helperText
+}) {
+  const error = errorText || state.error;
+  const helperId = helperText ? `${inputId}-helper` : void 0;
+  const errorId = error ? `${inputId}-error` : void 0;
+  return {
+    isUploading: externalUploading || state.isUploading,
+    progress: externalUploading ? externalProgress : state.uploadProgress,
+    error,
+    helperId,
+    errorId,
+    describedBy: [helperId, errorId].filter(Boolean).join(" ") || void 0
+  };
+}
+
+// src/components/form/UploadButton/UploadButton.parts.tsx
+import AttachFileOutlined from "@mui/icons-material/AttachFileOutlined";
+import CloudUploadOutlined from "@mui/icons-material/CloudUploadOutlined";
+import { Box, Button, LinearProgress, Typography, useTheme } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function UploadDropzone({
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  isDragOver,
+  drag
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "div",
+      ...drag,
+      onClick: onOpen,
+      sx: {
+        border: `2px dashed ${isDragOver ? theme.palette.primary.main : theme.palette.divider}`,
+        borderRadius: 2,
+        padding: 3,
+        textAlign: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        backgroundColor: isDragOver ? `${theme.palette.primary.main}0A` : "transparent",
+        transition: "all 0.2s ease-in-out",
+        ...!disabled && {
+          "&:hover": {
+            borderColor: theme.palette.primary.main,
+            backgroundColor: `${theme.palette.primary.main}05`
+          }
+        },
+        opacity: disabled ? 0.6 : 1
+      },
+      className,
+      "data-testid": dataTestId,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onOpen();
+      },
+      "aria-describedby": describedBy,
+      "aria-label": `Upload file dropzone. ${label}`,
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon || /* @__PURE__ */ jsx(CloudUploadOutlined, { sx: { fontSize: 48, color: "text.secondary" } }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 1 }, children: label }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "Drop your file here or click to browse" })
+      ]
+    }
+  );
+}
+var MUI_VARIANT = { outline: "outlined", ghost: "text" };
+function UploadTrigger({
+  label,
+  icon,
+  disabled,
+  className,
+  dataTestId,
+  describedBy,
+  onOpen,
+  variant,
+  isUploading
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: MUI_VARIANT[variant] ?? "contained",
+      disabled: disabled || isUploading,
+      onClick: onOpen,
+      startIcon: icon || /* @__PURE__ */ jsx(AttachFileOutlined, {}),
+      className,
+      "data-testid": dataTestId,
+      "aria-describedby": describedBy,
+      sx: {
+        ...variant === "ghost" && {
+          "&:hover": { backgroundColor: `${theme.palette.primary.main}08` }
+        }
+      },
+      children: isUploading ? "Uploading..." : label
+    }
+  );
+}
+function UploadAnnouncer({
+  announceDragOver,
+  isUploading,
+  progress,
+  error
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: "sr-only",
+      style: {
+        position: "absolute",
+        left: "-10000px",
+        width: "1px",
+        height: "1px",
+        overflow: "hidden"
+      },
+      children: [
+        announceDragOver && "File ready to drop",
+        isUploading && `Upload in progress: ${Math.round(progress)}%`,
+        error && `Error: ${error}`
+      ]
+    }
+  );
+}
+function UploadFeedback({
+  isUploading,
+  progress,
+  helperText,
+  helperId,
+  error,
+  errorId,
+  announceDragOver
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isUploading && progress > 0 && /* @__PURE__ */ jsxs(Box, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: progress, sx: { borderRadius: 1 } }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { mt: 0.5, display: "block" }, children: [
+        Math.round(progress),
+        "% uploaded"
+      ] })
+    ] }),
+    helperText && !error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: helperId,
+        variant: "caption",
+        color: "text.secondary",
+        sx: { display: "block", mt: 0.5 },
+        children: helperText
+      }
+    ),
+    error && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: errorId,
+        variant: "caption",
+        color: "error",
+        sx: { display: "block", mt: 0.5 },
+        role: "alert",
+        children: error
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      UploadAnnouncer,
+      {
+        announceDragOver,
+        isUploading,
+        progress,
+        error
+      }
+    )
+  ] });
+}
+
+// src/components/form/UploadButton/UploadButton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var UploadButton = React.forwardRef((props, ref) => {
+  const {
+    variant = "default",
+    label = "Upload File",
+    disabled = false,
+    multiple = false,
+    accept,
+    capture,
+    helperText,
+    icon,
+    className,
+    "data-testid": dataTestId
+  } = props;
+  const { inputRef, inputId, state, drag, derived, openPicker, handleInputChange } = useUploadButton(props);
+  const trigger = {
+    label,
+    icon,
+    disabled,
+    className,
+    dataTestId,
+    describedBy: derived.describedBy,
+    onOpen: openPicker
+  };
+  return /* @__PURE__ */ jsxs2(Box2, { children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        ref: ref || inputRef,
+        id: inputId,
+        type: "file",
+        accept,
+        multiple,
+        capture,
+        onChange: handleInputChange,
+        style: { display: "none" },
+        disabled,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "dropzone" ? /* @__PURE__ */ jsx2(UploadDropzone, { ...trigger, isDragOver: state.isDragOver, drag }) : /* @__PURE__ */ jsx2(UploadTrigger, { ...trigger, variant, isUploading: derived.isUploading }),
+    /* @__PURE__ */ jsx2(
+      UploadFeedback,
+      {
+        isUploading: derived.isUploading,
+        progress: derived.progress,
+        helperText,
+        helperId: derived.helperId,
+        error: derived.error,
+        errorId: derived.errorId,
+        announceDragOver: variant === "dropzone" && state.isDragOver
+      }
+    )
+  ] });
+});
+UploadButton.displayName = "UploadButton";
+export {
+  UploadButton
+};
+//# sourceMappingURL=UploadButton.js.map