@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-TBWEIQUR.js

@@ -0,0 +1,263 @@
+import {
+  bounceAnimation,
+  glowAnimation,
+  pulseAnimation,
+  rippleAnimation,
+  shimmerAnimation,
+  spinAnimation
+} from "./chunk-35ETD7ML.js";
+
+// src/components/form/Switch/Switch.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => ({
+  main: theme.palette.grey?.[700] || "#616161",
+  dark: theme.palette.grey?.[800] || "#424242",
+  light: theme.palette.grey?.[500] || "#9e9e9e",
+  contrastText: "#fff"
+});
+var namedPalette = (theme, color) => {
+  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
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || "#fff"
+  };
+};
+var SIZES = {
+  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },
+  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },
+  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },
+  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },
+  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 }
+};
+var lookOf = (customVariant) => {
+  if (customVariant === "ios") return "ios";
+  if (customVariant === "android") return "android";
+  if (customVariant === "material") return "material";
+  return "default";
+};
+var geometryOf = (flags) => {
+  const preset = SIZES[flags.customSize] ?? SIZES.md;
+  return {
+    ...preset,
+    width: flags.trackWidth || preset.width,
+    height: flags.trackHeight || preset.height
+  };
+};
+var THUMB_RADIUS = {
+  ios: () => "50%",
+  android: () => 4,
+  material: (thumbSize) => thumbSize / 3,
+  default: () => "50%"
+};
+var TRACK_RADIUS = {
+  ios: (height) => height / 2,
+  android: (height) => height / 3,
+  material: (height) => height / 2.5,
+  default: (height) => height / 2
+};
+var thumbShadow = (theme, look) => {
+  if (look === "ios") {
+    return `0 3px 1px 0 ${alpha("#000", 0.04)}, 0 3px 8px 0 ${alpha("#000", 0.12)}, 0 1px 0 0 ${alpha("#000", 0.08)}`;
+  }
+  return look === "android" ? theme.shadows[3] : theme.shadows[2];
+};
+var trackColor = (theme, look) => {
+  if (look === "ios") return alpha(theme.palette.common.black, 0.1);
+  if (look === "android") return alpha(theme.palette.action.disabled, 0.2);
+  return alpha(theme.palette.action.disabled, 0.3);
+};
+var rippleOverlay = (palette) => ({
+  content: '""',
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  width: "100%",
+  height: "100%",
+  borderRadius: "50%",
+  background: alpha(palette.main, 0.2),
+  animation: `${rippleAnimation} 0.6s ease-out`,
+  transform: "translate(-50%, -50%)",
+  pointerEvents: "none"
+});
+var checkedTrack = (flags, palette) => ({
+  backgroundColor: palette.main,
+  opacity: 1,
+  border: 0,
+  position: "relative",
+  overflow: "hidden",
+  ...flags.glow && {
+    animation: `${glowAnimation} 2s ease-in-out infinite`,
+    boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`
+  },
+  ...flags.gradient && {
+    background: `linear-gradient(90deg, ${palette.light || palette.main} 0%, ${palette.main} 50%, ${palette.dark || palette.main} 100%)`,
+    backgroundSize: "200% 100%",
+    animation: `${shimmerAnimation} 3s ease infinite`
+  }
+});
+var switchBaseSx = (theme, flags, palette, geometry, look) => {
+  const { width, thumbSize, padding } = geometry;
+  const isIos = look === "ios";
+  return {
+    padding,
+    margin: 0,
+    transitionDuration: "300ms",
+    transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    ...isIos && { transform: "translateX(2px)" },
+    "&:hover": {
+      "& .MuiSwitch-thumb": {
+        transform: flags.loading ? "none" : "scale(1.05)",
+        boxShadow: `${theme.shadows[4]}, 0 0 12px ${alpha(palette.main, 0.2)}`
+      },
+      ...flags.ripple && { "&::after": rippleOverlay(palette) }
+    },
+    "&.Mui-checked": {
+      // The thumb travels the track minus its own width and both paddings; the
+      // iOS look insets differently, so it gets its own distance.
+      transform: `translateX(${width - thumbSize - padding * 2}px)`,
+      color: "#fff",
+      "& .MuiSwitch-thumb": {
+        animation: flags.loading ? "none" : `${bounceAnimation} 0.3s ease-out`
+      },
+      "& + .MuiSwitch-track": checkedTrack(flags, palette),
+      "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
+      ...isIos && { transform: `translateX(${width - thumbSize - 4}px)` }
+    },
+    "&.Mui-focusVisible .MuiSwitch-thumb": {
+      color: palette.main,
+      border: `6px solid ${alpha(palette.main, 0.2)}`
+    },
+    "&.Mui-disabled .MuiSwitch-thumb": { color: theme.palette.grey[100] },
+    "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.3 }
+  };
+};
+var thumbSx = (theme, flags, palette, thumbSize, look) => ({
+  width: thumbSize,
+  height: thumbSize,
+  borderRadius: THUMB_RADIUS[look](thumbSize),
+  backgroundColor: "#fff",
+  boxShadow: thumbShadow(theme, look),
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.9),
+    backdropFilter: "blur(10px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...flags.pulse && { animation: `${pulseAnimation} 2s ease-in-out infinite` },
+  ...flags.loading && {
+    // A spinner drawn inside the thumb rather than over the whole control.
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      width: thumbSize * 0.6,
+      height: thumbSize * 0.6,
+      border: `2px solid ${palette.main}`,
+      borderTop: `2px solid transparent`,
+      borderRadius: "50%",
+      animation: `${spinAnimation} 1s linear infinite`
+    }
+  },
+  ...look === "material" && {
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderRadius: "inherit",
+      backgroundColor: palette.main,
+      opacity: 0,
+      transform: "scale(0)",
+      transition: "all 0.3s ease"
+    }
+  }
+});
+var trackLabels = (theme, onText, offText) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  paddingLeft: theme.spacing(1),
+  paddingRight: theme.spacing(1),
+  fontSize: "0.75rem",
+  fontWeight: 500,
+  color: theme.palette.text.secondary,
+  "&::before, &::after": {
+    content: '""',
+    position: "absolute",
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1
+  },
+  ...onText && {
+    "&::before": { content: `"${onText}"`, left: theme.spacing(1), color: "#fff" }
+  },
+  ...offText && {
+    "&::after": {
+      content: `"${offText}"`,
+      right: theme.spacing(1),
+      color: theme.palette.text.secondary
+    }
+  }
+});
+var trackSx = (theme, flags, palette, height, look) => {
+  const { glass, gradient, onText, offText, customVariant } = flags;
+  const showsLabels = customVariant === "label" && (onText || offText);
+  return {
+    borderRadius: TRACK_RADIUS[look](height),
+    backgroundColor: trackColor(theme, look),
+    opacity: 1,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    boxShadow: look === "ios" ? `inset 0 0 0 0.5px ${alpha("#000", 0.1)}, inset 0 2px 3px ${alpha("#000", 0.12)}` : "none",
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: "blur(20px)",
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+    },
+    ...gradient && !glass && {
+      background: `linear-gradient(135deg, ${alpha(palette.light || palette.main, 0.3)}, ${alpha(palette.main, 0.2)})`
+    },
+    ...showsLabels && trackLabels(theme, onText, offText)
+  };
+};
+var switchSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = geometryOf(flags);
+  const look = lookOf(flags.customVariant);
+  return {
+    width: geometry.width,
+    height: geometry.height,
+    padding: 0,
+    overflow: "visible",
+    "& .MuiSwitch-switchBase": switchBaseSx(theme, flags, palette, geometry, look),
+    "& .MuiSwitch-thumb": thumbSx(theme, flags, palette, geometry.thumbSize, look),
+    "& .MuiSwitch-track": trackSx(theme, flags, palette, geometry.height, look)
+  };
+};
+
+export {
+  switchSx
+};
+//# sourceMappingURL=chunk-TBWEIQUR.js.map

package/dist/chunk-TBWEIQUR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Switch/Switch.styles.ts"],"sourcesContent":["import { alpha } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport {\n  bounceAnimation,\n  glowAnimation,\n  pulseAnimation,\n  rippleAnimation,\n  shimmerAnimation,\n  spinAnimation,\n} from './Switch.animations';\n\ninterface ColorPalette {\n  main: string;\n  dark?: string;\n  light?: string;\n  contrastText?: string;\n}\n\n/**\n * `neutral` is not a MUI palette entry, so it is built from the grey ramp. The\n * literal fallbacks cover a theme whose grey ramp omits these steps.\n */\nconst neutralPalette = (theme: Theme): ColorPalette => ({\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/** `danger` is this component's name for the error palette; the rest map straight through. */\nconst namedPalette = (theme: Theme, color: string): ColorPalette => {\n  const colorMap: Record<string, ColorPalette> = {\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  return colorMap[color] || theme.palette.primary;\n};\n\n/**\n * Resolves a colour name to a full palette, filling any step the theme leaves\n * out from `main` and then from the primary palette.\n */\nconst getColorFromTheme = (theme: Theme, color: string): ColorPalette => {\n  if (color === 'neutral') {\n    return neutralPalette(theme);\n  }\n\n  const palette = namedPalette(theme, color);\n  const { primary } = theme.palette;\n\n  return {\n    main: palette.main || primary.main,\n    dark: palette.dark || palette.main || primary.dark,\n    light: palette.light || palette.main || primary.light,\n    contrastText: palette.contrastText || '#fff',\n  };\n};\n\ntype SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\ninterface SwitchGeometry {\n  width: number;\n  height: number;\n  padding: number;\n  thumbSize: number;\n}\n\nconst SIZES: Record<SizeKey, SwitchGeometry> = {\n  xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },\n  sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },\n  md: { width: 50, height: 26, padding: 1, thumbSize: 22 },\n  lg: { width: 58, height: 30, padding: 2, thumbSize: 24 },\n  xl: { width: 66, height: 34, padding: 2, thumbSize: 28 },\n};\n\nexport interface SwitchFlags {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  trackWidth?: number;\n  trackHeight?: number;\n  onText?: string;\n  offText?: string;\n  loading?: boolean;\n  ripple?: boolean;\n  pulse?: boolean;\n}\n\n/**\n * The four platform looks. Each names one row of the tables below, so the\n * borderRadius/shadow/colour choices stop being nested ternaries repeated per\n * DOM part.\n */\ntype Look = 'ios' | 'android' | 'material' | 'default';\n\nconst lookOf = (customVariant?: string): Look => {\n  if (customVariant === 'ios') return 'ios';\n  if (customVariant === 'android') return 'android';\n  if (customVariant === 'material') return 'material';\n  return 'default';\n};\n\n/** Track geometry once the caller's overrides and the size preset are combined. */\nconst geometryOf = (flags: SwitchFlags) => {\n  const preset = SIZES[flags.customSize as SizeKey] ?? SIZES.md;\n\n  return {\n    ...preset,\n    width: flags.trackWidth || preset.width,\n    height: flags.trackHeight || preset.height,\n  };\n};\n\nconst THUMB_RADIUS: Record<Look, (thumbSize: number) => number | string> = {\n  ios: () => '50%',\n  android: () => 4,\n  material: (thumbSize) => thumbSize / 3,\n  default: () => '50%',\n};\n\nconst TRACK_RADIUS: Record<Look, (height: number) => number> = {\n  ios: (height) => height / 2,\n  android: (height) => height / 3,\n  material: (height) => height / 2.5,\n  default: (height) => height / 2,\n};\n\nconst thumbShadow = (theme: Theme, look: Look) => {\n  if (look === 'ios') {\n    return `0 3px 1px 0 ${alpha('#000', 0.04)}, 0 3px 8px 0 ${alpha('#000', 0.12)}, 0 1px 0 0 ${alpha('#000', 0.08)}`;\n  }\n  return look === 'android' ? theme.shadows[3] : theme.shadows[2];\n};\n\nconst trackColor = (theme: Theme, look: Look) => {\n  if (look === 'ios') return alpha(theme.palette.common.black, 0.1);\n  if (look === 'android') return alpha(theme.palette.action.disabled, 0.2);\n  return alpha(theme.palette.action.disabled, 0.3);\n};\n\n/** The ripple that expands from the thumb on hover. */\nconst rippleOverlay = (palette: ColorPalette): CSSObject => ({\n  content: '\"\"',\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  width: '100%',\n  height: '100%',\n  borderRadius: '50%',\n  background: alpha(palette.main, 0.2),\n  animation: `${rippleAnimation} 0.6s ease-out`,\n  transform: 'translate(-50%, -50%)',\n  pointerEvents: 'none',\n});\n\n/** The checked track: the filled bar behind the thumb once the switch is on. */\nconst checkedTrack = (flags: SwitchFlags, palette: ColorPalette): CSSObject => ({\n  backgroundColor: palette.main,\n  opacity: 1,\n  border: 0,\n  position: 'relative',\n  overflow: 'hidden',\n  ...(flags.glow && {\n    animation: `${glowAnimation} 2s ease-in-out infinite`,\n    boxShadow: `0 0 10px ${alpha(palette.main, 0.6)}, inset 0 0 10px ${alpha(palette.main, 0.2)}`,\n  }),\n  ...(flags.gradient && {\n    background: `linear-gradient(90deg, ${palette.light || palette.main} 0%, ${palette.main} 50%, ${palette.dark || palette.main} 100%)`,\n    backgroundSize: '200% 100%',\n    animation: `${shimmerAnimation} 3s ease infinite`,\n  }),\n});\n\nconst switchBaseSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  geometry: SwitchGeometry,\n  look: Look,\n): CSSObject => {\n  const { width, thumbSize, padding } = geometry;\n  const isIos = look === 'ios';\n\n  return {\n    padding,\n    margin: 0,\n    transitionDuration: '300ms',\n    transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    ...(isIos && { transform: 'translateX(2px)' }),\n    '&:hover': {\n      '& .MuiSwitch-thumb': {\n        transform: flags.loading ? 'none' : 'scale(1.05)',\n        boxShadow: `${theme.shadows[4]}, 0 0 12px ${alpha(palette.main, 0.2)}`,\n      },\n      ...(flags.ripple && { '&::after': rippleOverlay(palette) }),\n    },\n    '&.Mui-checked': {\n      // The thumb travels the track minus its own width and both paddings; the\n      // iOS look insets differently, so it gets its own distance.\n      transform: `translateX(${width - thumbSize - padding * 2}px)`,\n      color: '#fff',\n      '& .MuiSwitch-thumb': {\n        animation: flags.loading ? 'none' : `${bounceAnimation} 0.3s ease-out`,\n      },\n      '& + .MuiSwitch-track': checkedTrack(flags, palette),\n      '&.Mui-disabled + .MuiSwitch-track': { opacity: 0.5 },\n      ...(isIos && { transform: `translateX(${width - thumbSize - 4}px)` }),\n    },\n    '&.Mui-focusVisible .MuiSwitch-thumb': {\n      color: palette.main,\n      border: `6px solid ${alpha(palette.main, 0.2)}`,\n    },\n    '&.Mui-disabled .MuiSwitch-thumb': { color: theme.palette.grey[100] },\n    '&.Mui-disabled + .MuiSwitch-track': { opacity: 0.3 },\n  };\n};\n\nconst thumbSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  thumbSize: number,\n  look: Look,\n): CSSObject => ({\n  width: thumbSize,\n  height: thumbSize,\n  borderRadius: THUMB_RADIUS[look](thumbSize),\n  backgroundColor: '#fff',\n  boxShadow: thumbShadow(theme, look),\n  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  ...(flags.glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.9),\n    backdropFilter: 'blur(10px)',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  }),\n  ...(flags.pulse && { animation: `${pulseAnimation} 2s ease-in-out infinite` }),\n  ...(flags.loading && {\n    // A spinner drawn inside the thumb rather than over the whole control.\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute',\n      width: thumbSize * 0.6,\n      height: thumbSize * 0.6,\n      border: `2px solid ${palette.main}`,\n      borderTop: `2px solid transparent`,\n      borderRadius: '50%',\n      animation: `${spinAnimation} 1s linear infinite`,\n    },\n  }),\n  ...(look === 'material' && {\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      borderRadius: 'inherit',\n      backgroundColor: palette.main,\n      opacity: 0,\n      transform: 'scale(0)',\n      transition: 'all 0.3s ease',\n    },\n  }),\n});\n\n/** The on/off wording the `label` variant prints inside the track. */\nconst trackLabels = (theme: Theme, onText?: string, offText?: string): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  paddingLeft: theme.spacing(1),\n  paddingRight: theme.spacing(1),\n  fontSize: '0.75rem',\n  fontWeight: 500,\n  color: theme.palette.text.secondary,\n  '&::before, &::after': {\n    content: '\"\"',\n    position: 'absolute',\n    fontSize: '0.75rem',\n    fontWeight: 500,\n    top: '50%',\n    transform: 'translateY(-50%)',\n    zIndex: 1,\n  },\n  ...(onText && {\n    '&::before': { content: `\"${onText}\"`, left: theme.spacing(1), color: '#fff' },\n  }),\n  ...(offText && {\n    '&::after': {\n      content: `\"${offText}\"`,\n      right: theme.spacing(1),\n      color: theme.palette.text.secondary,\n    },\n  }),\n});\n\nconst trackSx = (\n  theme: Theme,\n  flags: SwitchFlags,\n  palette: ColorPalette,\n  height: number,\n  look: Look,\n): CSSObject => {\n  const { glass, gradient, onText, offText, customVariant } = flags;\n  const showsLabels = customVariant === 'label' && (onText || offText);\n\n  return {\n    borderRadius: TRACK_RADIUS[look](height),\n    backgroundColor: trackColor(theme, look),\n    opacity: 1,\n    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',\n    position: 'relative',\n    boxShadow:\n      look === 'ios'\n        ? `inset 0 0 0 0.5px ${alpha('#000', 0.1)}, inset 0 2px 3px ${alpha('#000', 0.12)}`\n        : 'none',\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    ...(gradient &&\n      !glass && {\n        background: `linear-gradient(135deg, ${alpha(palette.light || palette.main, 0.3)}, ${alpha(palette.main, 0.2)})`,\n      }),\n    ...(showsLabels && trackLabels(theme, onText, offText)),\n  };\n};\n\nexport const switchSx = (theme: Theme, flags: SwitchFlags): CSSObject => {\n  const palette = getColorFromTheme(theme, flags.customColor ?? 'primary');\n  const geometry = geometryOf(flags);\n  const look = lookOf(flags.customVariant);\n\n  return {\n    width: geometry.width,\n    height: geometry.height,\n    padding: 0,\n    overflow: 'visible',\n    '& .MuiSwitch-switchBase': switchBaseSx(theme, flags, palette, geometry, look),\n    '& .MuiSwitch-thumb': thumbSx(theme, flags, palette, geometry.thumbSize, look),\n    '& .MuiSwitch-track': trackSx(theme, flags, palette, geometry.height, look),\n  };\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-TC3EPGGJ.js

@@ -0,0 +1,76 @@
+import {
+  UploadDropzone,
+  UploadFeedback,
+  UploadTrigger
+} from "./chunk-JSANSHGF.js";
+import {
+  useUploadButton
+} from "./chunk-QWVETTIY.js";
+
+// src/components/form/UploadButton/UploadButton.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UploadButton = React.forwardRef((props, ref) => {
+  const {
+    copy,
+    variant = "default",
+    label = props.copy.buttonLabel,
+    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 = {
+    copy,
+    label,
+    icon,
+    disabled,
+    className,
+    dataTestId,
+    describedBy: derived.describedBy,
+    onOpen: openPicker
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: ref || inputRef,
+        id: inputId,
+        type: "file",
+        accept,
+        multiple,
+        capture,
+        onChange: handleInputChange,
+        style: { display: "none" },
+        disabled,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "dropzone" ? /* @__PURE__ */ jsx(UploadDropzone, { ...trigger, isDragOver: state.isDragOver, drag }) : /* @__PURE__ */ jsx(UploadTrigger, { ...trigger, variant, isUploading: derived.isUploading }),
+    /* @__PURE__ */ jsx(
+      UploadFeedback,
+      {
+        copy,
+        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=chunk-TC3EPGGJ.js.map

package/dist/chunk-TC3EPGGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { useUploadButton } from './UploadButton.hooks';\nimport {\n  UploadDropzone,\n  UploadFeedback,\n  UploadTrigger,\n  type TriggerProps,\n} from './UploadButton.parts';\nimport type { UploadButtonProps, UploadButtonState } from './UploadButton.types';\n\n/**\n * A file picker with an optional drag-and-drop surface.\n *\n * The body here is deliberately thin: selection rules live in\n * `UploadButton.hooks`, appearance in `UploadButton.parts`. What remains is the\n * wiring — the hidden input, which trigger to render, and the feedback beneath.\n */\nconst UploadButton = React.forwardRef<HTMLInputElement, UploadButtonProps>((props, ref) => {\n  const {\n    copy,\n    variant = 'default',\n    label = props.copy.buttonLabel,\n    disabled = false,\n    multiple = false,\n    accept,\n    capture,\n    helperText,\n    icon,\n    className,\n    'data-testid': dataTestId,\n  } = props;\n  const { inputRef, inputId, state, drag, derived, openPicker, handleInputChange } =\n    useUploadButton(props);\n\n  const trigger: TriggerProps = {\n    copy,\n    label,\n    icon,\n    disabled,\n    className,\n    dataTestId,\n    describedBy: derived.describedBy,\n    onOpen: openPicker,\n  };\n\n  return (\n    <Box>\n      <input\n        ref={ref || inputRef}\n        id={inputId}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        capture={capture}\n        onChange={handleInputChange}\n        style={{ display: 'none' }}\n        disabled={disabled}\n        aria-hidden=\"true\"\n      />\n\n      {variant === 'dropzone' ? (\n        <UploadDropzone {...trigger} isDragOver={state.isDragOver} drag={drag} />\n      ) : (\n        <UploadTrigger {...trigger} variant={variant} isUploading={derived.isUploading} />\n      )}\n\n      <UploadFeedback\n        copy={copy}\n        isUploading={derived.isUploading}\n        progress={derived.progress}\n        helperText={helperText}\n        helperId={derived.helperId}\n        error={derived.error}\n        errorId={derived.errorId}\n        announceDragOver={variant === 'dropzone' && state.isDragOver}\n      />\n    </Box>\n  );\n});\n\nUploadButton.displayName = 'UploadButton';\n\nexport { UploadButton };\nexport type { UploadButtonProps, UploadButtonState };\n"],"mappings":";;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,WAAW;AA+Cd,SACE,KADF;AA7BJ,IAAM,eAAe,MAAM,WAAgD,CAAC,OAAO,QAAQ;AACzF,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,KAAK;AAAA,IACnB,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AACJ,QAAM,EAAE,UAAU,SAAS,OAAO,MAAM,SAAS,YAAY,kBAAkB,IAC7E,gBAAgB,KAAK;AAEvB,QAAM,UAAwB;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,QAAQ;AAAA,EACV;AAEA,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,OAAO;AAAA,QACZ,IAAI;AAAA,QACJ,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE,SAAS,OAAO;AAAA,QACzB;AAAA,QACA,eAAY;AAAA;AAAA,IACd;AAAA,IAEC,YAAY,aACX,oBAAC,kBAAgB,GAAG,SAAS,YAAY,MAAM,YAAY,MAAY,IAEvE,oBAAC,iBAAe,GAAG,SAAS,SAAkB,aAAa,QAAQ,aAAa;AAAA,IAGlF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAa,QAAQ;AAAA,QACrB,UAAU,QAAQ;AAAA,QAClB;AAAA,QACA,UAAU,QAAQ;AAAA,QAClB,OAAO,QAAQ;AAAA,QACf,SAAS,QAAQ;AAAA,QACjB,kBAAkB,YAAY,cAAc,MAAM;AAAA;AAAA,IACpD;AAAA,KACF;AAEJ,CAAC;AAED,aAAa,cAAc;","names":[]}

package/dist/chunk-TCAB2ERD.js

@@ -0,0 +1,64 @@
+import {
+  Text
+} from "./chunk-VRHBJXZ7.js";
+
+// src/components/data-display/DescriptionItem/DescriptionItem.tsx
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var containerSx = (isHorizontal, align) => ({
+  display: "flex",
+  flexDirection: isHorizontal ? "row" : "column",
+  alignItems: isHorizontal ? "center" : FLEX_ALIGN[align],
+  gap: isHorizontal ? 1 : 0,
+  // `alignItems` places the two boxes; `textAlign` handles a label or value
+  // that WRAPS, whose second line would otherwise fall back to flush-left
+  // inside a box the alignment had already centred.
+  textAlign: align
+});
+var labelStyle = (isHorizontal) => ({
+  textTransform: "uppercase",
+  marginBottom: isHorizontal ? 0 : "0.25rem",
+  minWidth: isHorizontal ? "fit-content" : void 0,
+  flexShrink: isHorizontal ? 0 : void 0
+});
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;
+var DescriptionItem = ({
+  label,
+  value,
+  orientation = "vertical",
+  align = "start",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: containerSx(isHorizontal, align),
+      "data-testid": dataTestId || "description-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "caption",
+            size: "xs",
+            color: "secondary",
+            style: labelStyle(isHorizontal),
+            "data-testid": testId("label"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { "data-testid": testId("value"), children: typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", children: value }) : value })
+      ]
+    }
+  );
+};
+DescriptionItem.displayName = "DescriptionItem";
+
+export {
+  DescriptionItem
+};
+//# sourceMappingURL=chunk-TCAB2ERD.js.map

package/dist/chunk-TCAB2ERD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DescriptionItem/DescriptionItem.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { ReactNode } from 'react';\n\nimport { Text } from '../../typography/Text/Text';\n\nexport interface DescriptionItemProps {\n  /**\n   * The label text to display\n   */\n  label: string;\n\n  /**\n   * The value to display - can be text, number, or any React node\n   */\n  value: ReactNode;\n\n  /**\n   * Layout orientation\n   * - `vertical`: Label above value (default)\n   * - `horizontal`: Label and value side by side\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * Which edge the label and value line up on.\n   *\n   * - `start` (default): both flush left, the reading order for a form or a\n   *   description list.\n   * - `center`: both centred over each other — for a pair sitting in a column\n   *   of its own, where a left-flush label over a shorter value looks unhinged\n   *   from it.\n   * - `end`: both flush right, which is what a numeric column wants so its\n   *   digits line up with the value above and below.\n   *\n   * Applies to `vertical`; a `horizontal` pair is already a single line.\n   */\n  align?: 'start' | 'center' | 'end';\n\n  /**\n   * Optional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Test ID for testing purposes\n   */\n  'data-testid'?: string;\n}\n\n/**\n * DescriptionItem - A label-value pair component for displaying read-only information\n *\n * Used for displaying structured metadata, properties, or descriptive information\n * in a consistent vertical layout with a label above the value.\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Incident ID\"\n *   value=\"INC-12345\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * <DescriptionItem\n *   label=\"Status\"\n *   value={<Chip label=\"Active\" color=\"success\" />}\n * />\n * ```\n */\n/** `align` in the terms flexbox and CSS each want it. */\nconst FLEX_ALIGN = { start: 'flex-start', center: 'center', end: 'flex-end' } as const;\n\n// Vertical stacks the label above the value; horizontal sets them side by side\n// with the label sized to its content.\nconst containerSx = (isHorizontal: boolean, align: 'start' | 'center' | 'end') => ({\n  display: 'flex',\n  flexDirection: isHorizontal ? ('row' as const) : ('column' as const),\n  alignItems: isHorizontal ? 'center' : FLEX_ALIGN[align],\n  gap: isHorizontal ? 1 : 0,\n  // `alignItems` places the two boxes; `textAlign` handles a label or value\n  // that WRAPS, whose second line would otherwise fall back to flush-left\n  // inside a box the alignment had already centred.\n  textAlign: align,\n});\n\nconst labelStyle = (isHorizontal: boolean) => ({\n  textTransform: 'uppercase' as const,\n  marginBottom: isHorizontal ? 0 : '0.25rem',\n  minWidth: isHorizontal ? ('fit-content' as const) : undefined,\n  flexShrink: isHorizontal ? 0 : undefined,\n});\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;\n\nexport const DescriptionItem: React.FC<DescriptionItemProps> = ({\n  label,\n  value,\n  orientation = 'vertical',\n  align = 'start',\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const isHorizontal = orientation === 'horizontal';\n  const testId = makeTestId(dataTestId);\n\n  return (\n    <Box\n      className={className}\n      sx={containerSx(isHorizontal, align)}\n      data-testid={dataTestId || 'description-item'}\n    >\n      <Text\n        variant=\"caption\"\n        size=\"xs\"\n        color=\"secondary\"\n        style={labelStyle(isHorizontal)}\n        data-testid={testId('label')}\n      >\n        {label}\n      </Text>\n      <Box data-testid={testId('value')}>\n        {/* Plain text gets the component's own typography; anything else is\n            rendered as given. */}\n        {typeof value === 'string' || typeof value === 'number' ? (\n          <Text variant=\"body\" size=\"sm\" weight=\"semibold\">\n            {value}\n          </Text>\n        ) : (\n          value\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nDescriptionItem.displayName = 'DescriptionItem';\n"],"mappings":";;;;;AAAA,OAAO,SAAS;AA+GZ,SAKE,KALF;AAvCJ,IAAM,aAAa,EAAE,OAAO,cAAc,QAAQ,UAAU,KAAK,WAAW;AAI5E,IAAM,cAAc,CAAC,cAAuB,WAAuC;AAAA,EACjF,SAAS;AAAA,EACT,eAAe,eAAgB,QAAmB;AAAA,EAClD,YAAY,eAAe,WAAW,WAAW,KAAK;AAAA,EACtD,KAAK,eAAe,IAAI;AAAA;AAAA;AAAA;AAAA,EAIxB,WAAW;AACb;AAEA,IAAM,aAAa,CAAC,kBAA2B;AAAA,EAC7C,eAAe;AAAA,EACf,cAAc,eAAe,IAAI;AAAA,EACjC,UAAU,eAAgB,gBAA0B;AAAA,EACpD,YAAY,eAAe,IAAI;AACjC;AAEA,IAAM,aACJ,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,oBAAoB,MAAM;AAEhE,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,eAAe,gBAAgB;AACrC,QAAM,SAAS,WAAW,UAAU;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,YAAY,cAAc,KAAK;AAAA,MACnC,eAAa,cAAc;AAAA,MAE3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,OAAO,WAAW,YAAY;AAAA,YAC9B,eAAa,OAAO,OAAO;AAAA,YAE1B;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,OAAI,eAAa,OAAO,OAAO,GAG7B,iBAAO,UAAU,YAAY,OAAO,UAAU,WAC7C,oBAAC,QAAK,SAAQ,QAAO,MAAK,MAAK,QAAO,YACnC,iBACH,IAEA,OAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;","names":[]}