@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-U3J55YPN.js

@@ -0,0 +1,390 @@
+import {
+  dynamicViewportHeight
+} from "./chunk-TSPG6TWK.js";
+
+// src/components/feedback/Dialog/Dialog.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Backdrop,
+  Box,
+  Dialog as MuiDialog,
+  DialogActions as MuiDialogActions,
+  DialogContent as MuiDialogContent,
+  DialogTitle as MuiDialogTitle,
+  Drawer,
+  IconButton,
+  Typography,
+  useTheme
+} from "@mui/material";
+import React from "react";
+
+// src/components/feedback/Dialog/Dialog.styles.ts
+import { alpha, keyframes } from "@mui/material";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 20px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+function borderRadiusOf(theme, borderRadius) {
+  switch (borderRadius) {
+    case "none":
+      return 0;
+    case "sm":
+      return theme.spacing(0.5);
+    case "md":
+      return theme.spacing(1);
+    case "xl":
+      return theme.spacing(3);
+    case "lg":
+    default:
+      return theme.spacing(2);
+  }
+}
+function maxWidthOf(size) {
+  switch (size) {
+    case "xs":
+      return 400;
+    case "sm":
+      return 600;
+    case "lg":
+      return 1e3;
+    case "xl":
+      return 1200;
+    case "md":
+    default:
+      return 800;
+  }
+}
+function baseStylesOf(theme, opts) {
+  return {
+    borderRadius: borderRadiusOf(theme, opts.borderRadius),
+    maxWidth: maxWidthOf(opts.size),
+    width: "90vw",
+    margin: theme.spacing(2),
+    transition: theme.transitions.create(
+      ["box-shadow", "background-color", "backdrop-filter"],
+      { duration: theme.transitions.duration.standard }
+    )
+  };
+}
+function glowStylesOf(theme, glow) {
+  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};
+}
+function pulseStylesOf(theme, pulse) {
+  if (!pulse) return {};
+  return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: theme.palette.primary.main,
+      opacity: 0.3,
+      animation: `${pulseAnimation} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  };
+}
+function defaultVariantStyles(theme, opts) {
+  const gradientStyles = opts.gradient ? {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+    backdropFilter: "blur(10px)"
+  } : {};
+  return {
+    ...gradientStyles,
+    backgroundColor: opts.glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
+    backdropFilter: opts.glass ? "blur(20px)" : "none",
+    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : "none"
+  };
+}
+function variantStylesOf(theme, opts) {
+  const decorations = {
+    ...glowStylesOf(theme, opts.glow),
+    ...pulseStylesOf(theme, opts.pulse)
+  };
+  switch (opts.variant) {
+    case "glass":
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+      };
+    case "fullscreen":
+      return {
+        borderRadius: 0,
+        margin: 0,
+        width: "100vw",
+        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.
+        ...dynamicViewportHeight("height"),
+        maxWidth: "none",
+        maxHeight: "none",
+        ...decorations
+      };
+    case "drawer": {
+      const radius = borderRadiusOf(theme, opts.borderRadius);
+      return {
+        borderRadius: `${radius}px 0 0 ${radius}px`,
+        margin: 0,
+        width: maxWidthOf(opts.size),
+        ...dynamicViewportHeight("height"),
+        maxHeight: "none",
+        position: "absolute",
+        right: 0,
+        ...decorations
+      };
+    }
+    default:
+      return {
+        ...baseStylesOf(theme, opts),
+        ...decorations,
+        ...defaultVariantStyles(theme, opts)
+      };
+  }
+}
+function backdropSxOf(theme, glass) {
+  return {
+    backgroundColor: glass ? alpha(theme.palette.common.black, 0.2) : alpha(theme.palette.common.black, 0.5),
+    backdropFilter: glass ? "blur(8px)" : "none"
+  };
+}
+
+// src/components/feedback/Dialog/Dialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function bodyOf(children, hasTitle) {
+  const managesOwnSpacing = React.Children.toArray(children).some(
+    (child) => React.isValidElement(child) && (child.type === DialogContent || child.type === DialogActions)
+  );
+  if (managesOwnSpacing) return children;
+  return /* @__PURE__ */ jsx(Box, { sx: { px: 3, pb: 2.5, pt: hasTitle ? 0.5 : 2.5 }, children });
+}
+var DIALOG_DEFAULTS = {
+  variant: "default",
+  size: "md",
+  showCloseButton: true,
+  backdrop: true,
+  persistent: false,
+  glass: false,
+  gradient: false,
+  glow: false,
+  pulse: false,
+  borderRadius: "lg"
+};
+function withDialogDefaults(props) {
+  const merged = { ...props };
+  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {
+    if (merged[key] === void 0) merged[key] = value;
+  }
+  return merged;
+}
+var Dialog = (rawProps) => {
+  const {
+    children,
+    variant,
+    size,
+    title,
+    description,
+    showCloseButton,
+    backdrop,
+    persistent,
+    glass,
+    gradient,
+    glow,
+    pulse,
+    borderRadius,
+    onClose,
+    open,
+    dataTestId,
+    ...props
+  } = withDialogDefaults(rawProps);
+  const theme = useTheme();
+  const testId = dataTestId || "dialog";
+  const paperSx = variantStylesOf(theme, {
+    variant,
+    size,
+    borderRadius,
+    glass,
+    gradient,
+    glow,
+    pulse
+  });
+  const handleClose = (event, reason) => {
+    if (persistent && (reason === "backdropClick" || reason === "escapeKeyDown")) {
+      return;
+    }
+    onClose?.();
+  };
+  const header = title ? /* @__PURE__ */ jsx(
+    DialogHeader,
+    {
+      title,
+      subtitle: description,
+      showCloseButton,
+      onClose,
+      dataTestId
+    }
+  ) : null;
+  const body = bodyOf(children, Boolean(title));
+  if (variant === "drawer") {
+    return /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        anchor: "right",
+        open,
+        onClose,
+        "data-testid": testId,
+        ...props,
+        children: /* @__PURE__ */ jsxs(Box, { sx: { ...paperSx, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+          header,
+          body
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    MuiDialog,
+    {
+      open,
+      onClose: handleClose,
+      fullScreen: variant === "fullscreen",
+      BackdropComponent: backdrop ? Backdrop : void 0,
+      BackdropProps: { sx: backdropSxOf(theme, glass) },
+      PaperProps: { sx: paperSx, "data-testid": testId },
+      ...props,
+      children: [
+        header,
+        body
+      ]
+    }
+  );
+};
+var DialogHeader = ({
+  children,
+  title,
+  subtitle,
+  showCloseButton = true,
+  onClose,
+  dataTestId
+}) => {
+  if (children) {
+    return /* @__PURE__ */ jsx(Box, { sx: { p: 2, borderBottom: "1px solid", borderColor: "divider" }, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    MuiDialogTitle,
+    {
+      "data-testid": dataTestId ? `${dataTestId}-title` : "dialog-title",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pb: subtitle ? 1 : 2
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", component: "div", children: title }),
+          subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: subtitle })
+        ] }),
+        showCloseButton && onClose && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "close",
+            onClick: onClose,
+            "data-testid": dataTestId ? `${dataTestId}-close` : "dialog-close",
+            sx: {
+              color: "text.secondary",
+              "&:hover": {
+                backgroundColor: "action.hover"
+              }
+            },
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var TITLED_BODY_PADDING_TOP = 1.5;
+var TITLED_BODY_SELECTOR = ".MuiDialogTitle-root + &.MuiDialogContent-root";
+var DialogContent = ({
+  children,
+  dividers = false,
+  dense = false,
+  dataTestId,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  MuiDialogContent,
+  {
+    "data-testid": dataTestId ? `${dataTestId}-content` : "dialog-content",
+    dividers,
+    sx: {
+      padding: dense ? 1.5 : 3,
+      [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },
+      "&.MuiDialogContent-dividers": {
+        borderTop: dividers ? "1px solid" : "none",
+        borderBottom: dividers ? "1px solid" : "none",
+        borderColor: "divider"
+      }
+    },
+    ...props,
+    children
+  }
+);
+var DialogActions = ({
+  children,
+  alignment = "right",
+  spacing = 1,
+  dataTestId,
+  ...props
+}) => {
+  const getJustifyContent = () => {
+    switch (alignment) {
+      case "left":
+        return "flex-start";
+      case "center":
+        return "center";
+      case "right":
+        return "flex-end";
+      case "space-between":
+        return "space-between";
+      default:
+        return "flex-end";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    MuiDialogActions,
+    {
+      "data-testid": dataTestId ? `${dataTestId}-actions` : "dialog-actions",
+      sx: {
+        justifyContent: getJustifyContent(),
+        gap: spacing,
+        p: 2
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+export {
+  Dialog,
+  DialogHeader,
+  DialogContent,
+  DialogActions
+};
+//# sourceMappingURL=chunk-U3J55YPN.js.map

package/dist/chunk-U3J55YPN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Dialog/Dialog.tsx","../src/components/feedback/Dialog/Dialog.styles.ts"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport {\n  Backdrop,\n  Box,\n  Dialog as MuiDialog,\n  DialogActions as MuiDialogActions,\n  DialogContent as MuiDialogContent,\n  DialogTitle as MuiDialogTitle,\n  Drawer,\n  IconButton,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport React from 'react';\n\nimport { backdropSxOf, variantStylesOf } from './Dialog.styles';\nimport type {\n  DialogActionsProps,\n  DialogContentProps,\n  DialogHeaderProps,\n  DialogProps,\n} from './Dialog.types';\n\n/**\n * The dialog body. Consumers that pass raw children (no <DialogContent>) used\n * to render them flush against the paper edges — give them comfortable default\n * padding; <DialogContent>/<DialogActions> users keep managing their own\n * spacing.\n */\nfunction bodyOf(children: React.ReactNode, hasTitle: boolean): React.ReactNode {\n  const managesOwnSpacing = React.Children.toArray(children).some(\n    (child) =>\n      React.isValidElement(child) &&\n      (child.type === DialogContent || child.type === DialogActions),\n  );\n  if (managesOwnSpacing) return children;\n  return <Box sx={{ px: 3, pb: 2.5, pt: hasTitle ? 0.5 : 2.5 }}>{children}</Box>;\n}\n\nconst DIALOG_DEFAULTS = {\n  variant: 'default',\n  size: 'md',\n  showCloseButton: true,\n  backdrop: true,\n  persistent: false,\n  glass: false,\n  gradient: false,\n  glow: false,\n  pulse: false,\n  borderRadius: 'lg',\n} as const satisfies Partial<DialogProps>;\n\n/** DialogProps with every defaulted field guaranteed present (wide types). */\ntype DialogPropsWithDefaults = DialogProps &\n  Required<Pick<DialogProps, keyof typeof DIALOG_DEFAULTS>>;\n\n/**\n * Apply {@link DIALOG_DEFAULTS} exactly like parameter defaults would: only a\n * missing/`undefined` prop falls back (a loop, so the component's cyclomatic\n * complexity doesn't pay one branch per defaulted prop).\n */\nfunction withDialogDefaults(props: DialogProps): DialogPropsWithDefaults {\n  const merged: Record<string, unknown> = { ...props };\n  for (const [key, value] of Object.entries(DIALOG_DEFAULTS)) {\n    if (merged[key] === undefined) merged[key] = value;\n  }\n  return merged as unknown as DialogPropsWithDefaults;\n}\n\nexport const Dialog: React.FC<DialogProps> = (rawProps) => {\n  const {\n    children,\n    variant,\n    size,\n    title,\n    description,\n    showCloseButton,\n    backdrop,\n    persistent,\n    glass,\n    gradient,\n    glow,\n    pulse,\n    borderRadius,\n    onClose,\n    open,\n    dataTestId,\n    ...props\n  } = withDialogDefaults(rawProps);\n  const theme = useTheme();\n  const testId = dataTestId || 'dialog';\n  const paperSx = variantStylesOf(theme, {\n    variant, size, borderRadius, glass, gradient, glow, pulse,\n  });\n\n  const handleClose = (event: object, reason: 'backdropClick' | 'escapeKeyDown') => {\n    if (persistent && (reason === 'backdropClick' || reason === 'escapeKeyDown')) {\n      return;\n    }\n    onClose?.();\n  };\n\n  const header = title ? (\n    <DialogHeader\n      title={title}\n      subtitle={description}\n      showCloseButton={showCloseButton}\n      onClose={onClose}\n      dataTestId={dataTestId}\n    />\n  ) : null;\n  const body = bodyOf(children, Boolean(title));\n\n  if (variant === 'drawer') {\n    return (\n      <Drawer\n        anchor=\"right\"\n        open={open}\n        onClose={onClose}\n        data-testid={testId}\n        {...props}\n      >\n        <Box sx={{ ...paperSx, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>\n          {header}\n          {body}\n        </Box>\n      </Drawer>\n    );\n  }\n\n  return (\n    <MuiDialog\n      open={open}\n      onClose={handleClose}\n      fullScreen={variant === 'fullscreen'}\n      BackdropComponent={backdrop ? Backdrop : undefined}\n      BackdropProps={{ sx: backdropSxOf(theme, glass) }}\n      PaperProps={{ sx: paperSx, 'data-testid': testId }}\n      {...props}\n    >\n      {header}\n      {body}\n    </MuiDialog>\n  );\n};\n\nexport const DialogHeader: React.FC<DialogHeaderProps> = ({\n  children,\n  title,\n  subtitle,\n  showCloseButton = true,\n  onClose,\n  dataTestId,\n}) => {\n  if (children) {\n    return (\n      <Box sx={{ p: 2, borderBottom: '1px solid', borderColor: 'divider' }}>\n        {children}\n      </Box>\n    );\n  }\n\n  return (\n    <MuiDialogTitle\n      data-testid={dataTestId ? `${dataTestId}-title` : 'dialog-title'}\n      sx={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        pb: subtitle ? 1 : 2,\n      }}\n    >\n      <Box>\n        <Typography variant=\"h6\" component=\"div\">\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      {showCloseButton && onClose && (\n        <IconButton\n          aria-label=\"close\"\n          onClick={onClose}\n          data-testid={dataTestId ? `${dataTestId}-close` : 'dialog-close'}\n          sx={{\n            color: 'text.secondary',\n            '&:hover': {\n              backgroundColor: 'action.hover',\n            },\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </MuiDialogTitle>\n  );\n};\n\n/**\n * Top padding for a body that sits directly under the title.\n *\n * MUI zeroes it there (`.MuiDialogTitle-root + &` on a non-`dividers` content),\n * assuming the title's own bottom padding is the whole gap. That assumption\n * breaks for a body opening with an outlined field: a filled field floats its\n * label ABOVE the input's border box, and `DialogContent` is `overflow-y: auto`\n * — a clipping box — so the label gets sliced in half (FUT-544: \"Tipo\" in the\n * \"Novo insumo\" dialog).\n *\n * Reserve the overhang rather than restore the full 24px: the title already\n * contributes its bottom padding, so a shrunk label's `translate(…, -9px)` is\n * all that is missing. 12px clears it and leaves the gap visually tight.\n */\nconst TITLED_BODY_PADDING_TOP = 1.5;\n\n/**\n * `.MuiDialogTitle-root + &` is `(0,2,0)`-specific and a plain `sx` entry is\n * `(0,1,0)`, so the padding above only survives the cascade by naming the class\n * again — `(0,3,0)`. Scoped to the title-following case so an untitled dialog\n * keeps MUI's roomier default.\n */\nconst TITLED_BODY_SELECTOR = '.MuiDialogTitle-root + &.MuiDialogContent-root';\n\nexport const DialogContent: React.FC<DialogContentProps> = ({\n  children,\n  dividers = false,\n  dense = false,\n  dataTestId,\n  ...props\n}) => (\n    <MuiDialogContent\n      data-testid={dataTestId ? `${dataTestId}-content` : 'dialog-content'}\n      dividers={dividers}\n      sx={{\n        padding: dense ? 1.5 : 3,\n        [TITLED_BODY_SELECTOR]: { paddingTop: TITLED_BODY_PADDING_TOP },\n        '&.MuiDialogContent-dividers': {\n          borderTop: dividers ? '1px solid' : 'none',\n          borderBottom: dividers ? '1px solid' : 'none',\n          borderColor: 'divider',\n        },\n      }}\n      {...props}\n    >\n      {children}\n    </MuiDialogContent>\n  );\n\nexport const DialogActions: React.FC<DialogActionsProps> = ({\n  children,\n  alignment = 'right',\n  spacing = 1,\n  dataTestId,\n  ...props\n}) => {\n  const getJustifyContent = () => {\n    switch (alignment) {\n      case 'left': return 'flex-start';\n      case 'center': return 'center';\n      case 'right': return 'flex-end';\n      case 'space-between': return 'space-between';\n      default: return 'flex-end';\n    }\n  };\n\n  return (\n    <MuiDialogActions\n      data-testid={dataTestId ? `${dataTestId}-actions` : 'dialog-actions'}\n      sx={{\n        justifyContent: getJustifyContent(),\n        gap: spacing,\n        p: 2,\n      }}\n      {...props}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};","import type { SxProps, Theme } from '@mui/material';\nimport { alpha, keyframes } from '@mui/material';\n\nimport { dynamicViewportHeight } from '../../../utils/viewport';\nimport type { DialogProps } from './Dialog.types';\n\n/**\n * Paper/backdrop styling for the Dialog component (FUT-181 gate cleanup):\n * pure helpers so `Dialog.tsx` stays within the size/complexity budget.\n */\n\n// Define pulse animation\nconst pulseAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 20px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Style toggles that shape the dialog paper (extracted so each fn stays small). */\ninterface VariantStyleOptions {\n  variant: NonNullable<DialogProps['variant']>;\n  size: NonNullable<DialogProps['size']>;\n  borderRadius: NonNullable<DialogProps['borderRadius']>;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  pulse: boolean;\n}\n\nfunction borderRadiusOf(theme: Theme, borderRadius: VariantStyleOptions['borderRadius']) {\n  switch (borderRadius) {\n    case 'none': return 0;\n    case 'sm': return theme.spacing(0.5);\n    case 'md': return theme.spacing(1);\n    case 'xl': return theme.spacing(3);\n    case 'lg':\n    default: return theme.spacing(2);\n  }\n}\n\nfunction maxWidthOf(size: VariantStyleOptions['size']): number {\n  switch (size) {\n    case 'xs': return 400;\n    case 'sm': return 600;\n    case 'lg': return 1000;\n    case 'xl': return 1200;\n    case 'md':\n    default: return 800;\n  }\n}\n\nfunction baseStylesOf(theme: Theme, opts: VariantStyleOptions) {\n  return {\n    borderRadius: borderRadiusOf(theme, opts.borderRadius),\n    maxWidth: maxWidthOf(opts.size),\n    width: '90vw',\n    margin: theme.spacing(2),\n    transition: theme.transitions.create(\n      ['box-shadow', 'background-color', 'backdrop-filter'],\n      { duration: theme.transitions.duration.standard },\n    ),\n  };\n}\n\nfunction glowStylesOf(theme: Theme, glow: boolean) {\n  return glow ? { boxShadow: `0 0 40px ${alpha(theme.palette.primary.main, 0.3)}` } : {};\n}\n\nfunction pulseStylesOf(theme: Theme, pulse: boolean) {\n  if (!pulse) return {};\n  return {\n    position: 'relative' as const,\n    '&::after': {\n      content: '\"\"',\n      position: 'absolute' as const,\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      borderRadius: 'inherit',\n      backgroundColor: theme.palette.primary.main,\n      opacity: 0.3,\n      animation: `${pulseAnimation} 2s infinite`,\n      pointerEvents: 'none' as const,\n      zIndex: -1,\n    },\n  };\n}\n\n/** The default variant's paper: optional gradient/glass over the base styles. */\nfunction defaultVariantStyles(theme: Theme, opts: VariantStyleOptions) {\n  const gradientStyles = opts.gradient\n    ? {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n        backdropFilter: 'blur(10px)',\n      }\n    : {};\n  return {\n    ...gradientStyles,\n    backgroundColor: opts.glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    backdropFilter: opts.glass ? 'blur(20px)' : 'none',\n    border: opts.glass ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}` : 'none',\n  };\n}\n\nexport function variantStylesOf(theme: Theme, opts: VariantStyleOptions): SxProps<Theme> {\n  const decorations = {\n    ...glowStylesOf(theme, opts.glow),\n    ...pulseStylesOf(theme, opts.pulse),\n  };\n  switch (opts.variant) {\n    case 'glass':\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        backgroundColor: alpha(theme.palette.background.paper, 0.1),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n      };\n    case 'fullscreen':\n      return {\n        borderRadius: 0,\n        margin: 0,\n        width: '100vw',\n        // `100dvh`, not `100vh` — see `dynamicViewportHeight`.\n        ...dynamicViewportHeight('height'),\n        maxWidth: 'none',\n        maxHeight: 'none',\n        ...decorations,\n      };\n    case 'drawer': {\n      const radius = borderRadiusOf(theme, opts.borderRadius);\n      return {\n        borderRadius: `${radius}px 0 0 ${radius}px`,\n        margin: 0,\n        width: maxWidthOf(opts.size),\n        ...dynamicViewportHeight('height'),\n        maxHeight: 'none',\n        position: 'absolute' as const,\n        right: 0,\n        ...decorations,\n      };\n    }\n    default:\n      return {\n        ...baseStylesOf(theme, opts),\n        ...decorations,\n        ...defaultVariantStyles(theme, opts),\n      };\n  }\n}\n\nexport function backdropSxOf(theme: Theme, glass: boolean) {\n  return {\n    backgroundColor: glass\n      ? alpha(theme.palette.common.black, 0.2)\n      : alpha(theme.palette.common.black, 0.5),\n    backdropFilter: glass ? 'blur(8px)' : 'none',\n  };\n}\n\n"],"mappings":"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","names":[]}

package/dist/chunk-U7CIYYA7.js

@@ -0,0 +1,45 @@
+// src/components/form/HeaderButton/HeaderButton.tsx
+import { Box, Button } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function HeaderButton({
+  text,
+  icon,
+  endIcon,
+  onClick,
+  variant = "contained",
+  color = "primary",
+  disabled,
+  collapseBelow = "md",
+  fullWidth,
+  dataTestId,
+  ...aria
+}) {
+  const labelDisplay = { xs: "none", [collapseBelow]: "inline" };
+  const horizontalPad = { xs: 1, [collapseBelow]: 2 };
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      color,
+      size: "medium",
+      onClick,
+      disabled,
+      fullWidth,
+      "aria-label": typeof text === "string" ? text : void 0,
+      "aria-haspopup": aria["aria-haspopup"],
+      "aria-expanded": aria["aria-expanded"],
+      "data-testid": dataTestId,
+      sx: { minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: "1rem", textTransform: "none" },
+      children: [
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: icon }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: labelDisplay }, children: text }),
+        endIcon != null && /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "inline-flex", alignItems: "center" }, children: endIcon })
+      ]
+    }
+  );
+}
+
+export {
+  HeaderButton
+};
+//# sourceMappingURL=chunk-U7CIYYA7.js.map

package/dist/chunk-U7CIYYA7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/HeaderButton/HeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport { Box, Button } from '@mui/material';\nimport type { ButtonProps } from '@mui/material';\nimport type { ReactNode } from 'react';\n\ntype Breakpoint = 'sm' | 'md' | 'lg';\n\nexport interface HeaderButtonProps {\n  /** The label — shown next to the icon on wide screens, hidden (icon-only) below `collapseBelow`. */\n  text: ReactNode;\n  /** Leading icon/image — always visible. */\n  icon: ReactNode;\n  /** Optional trailing icon (e.g. a dropdown chevron) — always visible. */\n  endIcon?: ReactNode;\n  onClick?: ButtonProps['onClick'];\n  /** MUI variant. @default 'contained' */\n  variant?: ButtonProps['variant'];\n  /** MUI color. @default 'primary' */\n  color?: ButtonProps['color'];\n  disabled?: boolean;\n  /** Width below which the button collapses to icon-only. @default 'md' */\n  collapseBelow?: Breakpoint;\n  fullWidth?: boolean;\n  'aria-haspopup'?: ButtonProps['aria-haspopup'];\n  'aria-expanded'?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * A page-header action that adapts to width: below `collapseBelow` it renders\n * ONLY its icon (compact, so several fit one line on phones); at/above it renders\n * the icon + text label. The accessible name is always `text`, so the icon-only\n * state stays labeled for screen readers.\n */\nexport function HeaderButton({\n  text,\n  icon,\n  endIcon,\n  onClick,\n  variant = 'contained',\n  color = 'primary',\n  disabled,\n  collapseBelow = 'md',\n  fullWidth,\n  dataTestId,\n  ...aria\n}: HeaderButtonProps): React.JSX.Element {\n  // Hide the label below the breakpoint; keep the icon(s). `gap` collapses around\n  // the display:none label, so on mobile it reads as a compact icon button.\n  const labelDisplay = { xs: 'none', [collapseBelow]: 'inline' };\n  const horizontalPad = { xs: 1, [collapseBelow]: 2 };\n  return (\n    <Button\n      variant={variant}\n      color={color}\n      size=\"medium\"\n      onClick={onClick}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      aria-label={typeof text === 'string' ? text : undefined}\n      aria-haspopup={aria['aria-haspopup']}\n      aria-expanded={aria['aria-expanded']}\n      data-testid={dataTestId}\n      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: '1rem', textTransform: 'none' }}\n    >\n      <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n        {icon}\n      </Box>\n      <Box component=\"span\" sx={{ display: labelDisplay }}>\n        {text}\n      </Box>\n      {endIcon != null && (\n        <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n          {endIcon}\n        </Box>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";AAEA,SAAS,KAAK,cAAc;AAmDxB,SAaE,KAbF;AAlBG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AAGvC,QAAM,eAAe,EAAE,IAAI,QAAQ,CAAC,aAAa,GAAG,SAAS;AAC7D,QAAM,gBAAgB,EAAE,IAAI,GAAG,CAAC,aAAa,GAAG,EAAE;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY,OAAO,SAAS,WAAW,OAAO;AAAA,MAC9C,iBAAe,KAAK,eAAe;AAAA,MACnC,iBAAe,KAAK,eAAe;AAAA,MACnC,eAAa;AAAA,MACb,IAAI,EAAE,UAAU,GAAG,KAAK,MAAM,IAAI,eAAe,IAAI,GAAG,UAAU,QAAQ,eAAe,OAAO;AAAA,MAEhG;AAAA,4BAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,gBACH;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,aAAa,GAC/C,gBACH;AAAA,QACC,WAAW,QACV,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,mBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-VUHLNYAE.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-VUHLNYAE.js.map

package/dist/chunk-VUHLNYAE.js.map

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