@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-DSO6BL77.js

@@ -0,0 +1,288 @@
+// src/components/navigation/DropdownMenu/DropdownMenu.tsx
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import MoreVert from "@mui/icons-material/MoreVert";
+import {
+  alpha,
+  Box,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Typography
+} from "@mui/material";
+import { styled } from "@mui/material";
+import React, { cloneElement, isValidElement, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var glassTokens = (theme) => {
+  const isDark = theme.palette.mode === "dark";
+  return {
+    edge: isDark ? theme.palette.common.white : theme.palette.common.black,
+    dropShadowAlpha: isDark ? 0.4 : 0.12,
+    insetHighlightAlpha: isDark ? 0.2 : 0.8,
+    sheenAlpha: isDark ? 0.1 : 0.8
+  };
+};
+var glassMenuStyles = (theme) => {
+  const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, 0.75),
+    backdropFilter: "blur(24px) saturate(1.8)",
+    WebkitBackdropFilter: "blur(24px) saturate(1.8)",
+    // Safari support
+    border: `1px solid ${alpha(edge, 0.12)}`,
+    boxShadow: [
+      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,
+      `0 0 0 1px ${alpha(edge, 0.05)}`,
+      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`
+    ].join(", "),
+    // Enhanced glass morphism with subtle gradient overlay
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,
+      borderRadius: "inherit",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    // Ensure content appears above the overlay
+    "& .MuiList-root": {
+      position: "relative",
+      zIndex: 2
+    }
+  };
+};
+var StyledMenu = styled(Menu, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "size"
+})(({ theme, customVariant, size }) => ({
+  "& .MuiPaper-root": {
+    minWidth: 180,
+    borderRadius: theme.spacing(1),
+    ...customVariant === "glass" && glassMenuStyles(theme),
+    ...customVariant === "minimal" && {
+      boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...size === "sm" && {
+      "& .MuiMenuItem-root": {
+        fontSize: "0.875rem",
+        minHeight: 32,
+        padding: theme.spacing(0.75, 2)
+      }
+    },
+    ...size === "lg" && {
+      "& .MuiMenuItem-root": {
+        fontSize: "1.125rem",
+        minHeight: 48,
+        padding: theme.spacing(1.5, 3)
+      }
+    }
+  }
+}));
+var StyledMenuItem = styled(MenuItem, {
+  shouldForwardProp: (prop) => !["color", "showIconSpace"].includes(prop)
+})(({ theme, color, showIconSpace }) => ({
+  borderRadius: theme.spacing(0.5),
+  margin: theme.spacing(0.5, 1),
+  transition: "all 0.2s ease",
+  ...showIconSpace && {
+    paddingLeft: theme.spacing(5)
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08)
+  },
+  ...color && color !== "default" && {
+    color: theme.palette[color]?.main || theme.palette.text.primary,
+    "& .MuiListItemIcon-root": {
+      color: theme.palette[color]?.main || theme.palette.text.primary
+    },
+    "&:hover": {
+      backgroundColor: alpha(
+        theme.palette[color]?.main || theme.palette.primary.main,
+        0.08
+      )
+    }
+  }
+}));
+var MenuHeader = styled(Typography)(({ theme }) => ({
+  padding: theme.spacing(1, 2),
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  letterSpacing: 0.5
+}));
+var ShortcutText = styled(Typography)(({ theme }) => ({
+  fontSize: "0.75rem",
+  color: theme.palette.text.secondary,
+  marginLeft: "auto",
+  paddingLeft: theme.spacing(2)
+}));
+var renderMenuItem = (item, handleItemClick, showIconSpace, size) => {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } }, item.id);
+  }
+  if (item.type === "header") {
+    return /* @__PURE__ */ jsx(MenuHeader, { children: item.label }, item.id);
+  }
+  if (item.component) {
+    return /* @__PURE__ */ jsx(Box, { sx: { px: 2, py: 1 }, children: item.component }, item.id);
+  }
+  return renderLeafMenuItem(item, handleItemClick, showIconSpace, size);
+};
+var renderLeafMenuItem = (item, handleItemClick, showIconSpace, size) => {
+  const hasIcon = !!item.icon;
+  const hasChildren = item.children && item.children.length > 0;
+  return /* @__PURE__ */ jsxs(
+    StyledMenuItem,
+    {
+      disabled: item.disabled,
+      onClick: !item.disabled ? () => handleItemClick(item) : void 0,
+      color: item.color,
+      showIconSpace: showIconSpace && !hasIcon,
+      "data-testid": item.dataTestId,
+      children: [
+        hasIcon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: size === "sm" ? 32 : 40 }, children: item.icon }),
+        /* @__PURE__ */ jsx(ListItemText, { primary: item.label }),
+        item.shortcut && /* @__PURE__ */ jsx(ShortcutText, { variant: "caption", children: item.shortcut }),
+        hasChildren && item.showChevron !== false && /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small", sx: { ml: 1, opacity: 0.5 } })
+      ]
+    },
+    item.id
+  );
+};
+var resolveMenuState = (controlledOpen, internalOpen, providedAnchorEl, anchorRef) => {
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const anchorEl = providedAnchorEl || anchorRef.current;
+  return { isControlled, open, anchorEl, isOpen: Boolean(anchorEl) && open };
+};
+var useDropdownHandlers = ({
+  isControlled,
+  open,
+  setInternalOpen,
+  onOpen,
+  onClose,
+  closeOnItemClick,
+  anchorRef
+}) => {
+  const handleOpen = () => {
+    if (!isControlled) {
+      setInternalOpen(true);
+    }
+    onOpen?.();
+  };
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onClose?.();
+  };
+  const handleItemClick = (item) => {
+    item.onClick?.();
+    if (closeOnItemClick && !item.children?.length) {
+      handleClose();
+    }
+  };
+  const handleTriggerClick = (event) => {
+    if (isControlled) return;
+    if (open) {
+      handleClose();
+      return;
+    }
+    anchorRef.current = event.currentTarget;
+    handleOpen();
+  };
+  return { handleClose, handleItemClick, handleTriggerClick };
+};
+var DropdownTrigger = ({ trigger, anchorRef, onTriggerClick }) => {
+  if (isValidElement(trigger)) {
+    return cloneElement(
+      trigger,
+      { onClick: onTriggerClick, ref: anchorRef }
+    );
+  }
+  if (trigger) {
+    return /* @__PURE__ */ jsx(Box, { ref: anchorRef, onClick: onTriggerClick, children: trigger });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: anchorRef,
+      onClick: onTriggerClick,
+      sx: { cursor: "pointer", display: "inline-flex" },
+      children: /* @__PURE__ */ jsx(MoreVert, {})
+    }
+  );
+};
+var DropdownMenu = React.forwardRef(
+  ({
+    variant = "default",
+    items,
+    trigger,
+    open: controlledOpen,
+    onOpen,
+    onClose,
+    size = "md",
+    maxHeight = 400,
+    minWidth = 180,
+    closeOnItemClick = true,
+    showIconSpace = false,
+    anchorEl: providedAnchorEl,
+    ...menuProps
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const { isControlled, open, anchorEl, isOpen } = resolveMenuState(
+      controlledOpen,
+      internalOpen,
+      providedAnchorEl,
+      anchorRef
+    );
+    const { handleClose, handleItemClick, handleTriggerClick } = useDropdownHandlers({
+      isControlled,
+      open,
+      setInternalOpen,
+      onOpen,
+      onClose,
+      closeOnItemClick,
+      anchorRef
+    });
+    const triggerElement = /* @__PURE__ */ jsx(DropdownTrigger, { trigger, anchorRef, onTriggerClick: handleTriggerClick });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger !== void 0 && triggerElement,
+      /* @__PURE__ */ jsx(
+        StyledMenu,
+        {
+          ref,
+          anchorEl,
+          open: isOpen,
+          onClose: handleClose,
+          customVariant: variant,
+          size,
+          PaperProps: {
+            sx: {
+              maxHeight,
+              minWidth,
+              overflow: "auto"
+            }
+          },
+          transformOrigin: { horizontal: "left", vertical: "top" },
+          anchorOrigin: { horizontal: "left", vertical: "bottom" },
+          ...menuProps,
+          children: items.map((item) => renderMenuItem(item, handleItemClick, showIconSpace, size))
+        }
+      )
+    ] });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+
+export {
+  DropdownMenu
+};
+//# sourceMappingURL=chunk-DSO6BL77.js.map

package/dist/chunk-DSO6BL77.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import ChevronRight from '@mui/icons-material/ChevronRight';\nimport MoreVert from '@mui/icons-material/MoreVert';\nimport {\n  alpha,\n  Box,\n  Divider,\n  ListItemIcon,\n  ListItemText,\n  Menu,\n  MenuItem,\n  Typography,\n} from '@mui/material';\nimport { styled } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\nimport React, { cloneElement, isValidElement,useRef, useState } from 'react';\n\nimport type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';\n\n// Resolves every light/dark decision once. The inline version repeated\n// `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the\n// SAME expression on both branches (background.paper, and common.white for the\n// inset highlight) — so they read as mode-dependent while never varying.\nconst glassTokens = (theme: Theme) => {\n  const isDark = theme.palette.mode === 'dark';\n\n  return {\n    edge: isDark ? theme.palette.common.white : theme.palette.common.black,\n    dropShadowAlpha: isDark ? 0.4 : 0.12,\n    insetHighlightAlpha: isDark ? 0.2 : 0.8,\n    sheenAlpha: isDark ? 0.1 : 0.8,\n  };\n};\n\nconst glassMenuStyles = (theme: Theme): CSSObject => {\n  const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);\n\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, 0.75),\n    backdropFilter: 'blur(24px) saturate(1.8)',\n    WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support\n    border: `1px solid ${alpha(edge, 0.12)}`,\n    boxShadow: [\n      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,\n      `0 0 0 1px ${alpha(edge, 0.05)}`,\n      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`,\n    ].join(', '),\n    // Enhanced glass morphism with subtle gradient overlay\n    '&::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,\n      borderRadius: 'inherit',\n      pointerEvents: 'none',\n      zIndex: 1,\n    },\n    // Ensure content appears above the overlay\n    '& .MuiList-root': {\n      position: 'relative',\n      zIndex: 2,\n    },\n  };\n};\n\nconst StyledMenu = styled(Menu, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',\n})<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({\n  '& .MuiPaper-root': {\n    minWidth: 180,\n    borderRadius: theme.spacing(1),\n\n    ...(customVariant === 'glass' && glassMenuStyles(theme)),\n\n    ...(customVariant === 'minimal' && {\n      boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n\n    ...(size === 'sm' && {\n      '& .MuiMenuItem-root': {\n        fontSize: '0.875rem',\n        minHeight: 32,\n        padding: theme.spacing(0.75, 2),\n      },\n    }),\n\n    ...(size === 'lg' && {\n      '& .MuiMenuItem-root': {\n        fontSize: '1.125rem',\n        minHeight: 48,\n        padding: theme.spacing(1.5, 3),\n      },\n    }),\n  },\n}));\n\nconst StyledMenuItem = styled(MenuItem, {\n  shouldForwardProp: (prop) => !['color', 'showIconSpace'].includes(prop as string),\n})<{ color?: string; showIconSpace?: boolean }>(({ theme, color, showIconSpace }) => ({\n  borderRadius: theme.spacing(0.5),\n  margin: theme.spacing(0.5, 1),\n  transition: 'all 0.2s ease',\n\n  ...(showIconSpace && {\n    paddingLeft: theme.spacing(5),\n  }),\n\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.primary.main, 0.08),\n  },\n\n  ...(color &&\n    color !== 'default' && {\n      color:\n        theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n          ?.main || theme.palette.text.primary,\n      '& .MuiListItemIcon-root': {\n        color:\n          theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n            ?.main || theme.palette.text.primary,\n      },\n      '&:hover': {\n        backgroundColor: alpha(\n          theme.palette[color as 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success']\n            ?.main || theme.palette.primary.main,\n          0.08,\n        ),\n      },\n    }),\n}));\n\nconst MenuHeader = styled(Typography)(({ theme }) => ({\n  padding: theme.spacing(1, 2),\n  fontSize: '0.75rem',\n  fontWeight: 600,\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  letterSpacing: 0.5,\n}));\n\nconst ShortcutText = styled(Typography)(({ theme }) => ({\n  fontSize: '0.75rem',\n  color: theme.palette.text.secondary,\n  marginLeft: 'auto',\n  paddingLeft: theme.spacing(2),\n}));\n\nconst renderMenuItem = (\n  item: DropdownMenuItem,\n  handleItemClick: (item: DropdownMenuItem) => void,\n  showIconSpace?: boolean,\n  size?: string,\n) => {\n  if (item.type === 'divider') {\n    return <Divider key={item.id} sx={{ my: 0.5 }} />;\n  }\n\n  if (item.type === 'header') {\n    return <MenuHeader key={item.id}>{item.label}</MenuHeader>;\n  }\n\n  if (item.component) {\n    return (\n      <Box key={item.id} sx={{ px: 2, py: 1 }}>\n        {item.component}\n      </Box>\n    );\n  }\n\n  return renderLeafMenuItem(item, handleItemClick, showIconSpace, size);\n};\n\nconst renderLeafMenuItem = (\n  item: DropdownMenuItem,\n  handleItemClick: (item: DropdownMenuItem) => void,\n  showIconSpace?: boolean,\n  size?: string,\n) => {\n  const hasIcon = !!item.icon;\n  const hasChildren = item.children && item.children.length > 0;\n\n  return (\n    <StyledMenuItem\n      key={item.id}\n      disabled={item.disabled}\n      onClick={!item.disabled ? () => handleItemClick(item) : undefined} // ← change\n      color={item.color}\n      showIconSpace={showIconSpace && !hasIcon}\n      data-testid={item.dataTestId}\n    >\n      {hasIcon && (\n        <ListItemIcon sx={{ minWidth: size === 'sm' ? 32 : 40 }}>{item.icon}</ListItemIcon>\n      )}\n      <ListItemText primary={item.label} />\n      {item.shortcut && <ShortcutText variant=\"caption\">{item.shortcut}</ShortcutText>}\n      {hasChildren && item.showChevron !== false && (\n        <ChevronRight fontSize=\"small\" sx={{ ml: 1, opacity: 0.5 }} />\n      )}\n    </StyledMenuItem>\n  );\n};\n\n// Open state and anchor are each either caller-supplied or ours. Resolving both\n// here keeps those four branches out of the render body.\nconst resolveMenuState = (\n  controlledOpen: boolean | undefined,\n  internalOpen: boolean,\n  providedAnchorEl: DropdownMenuProps['anchorEl'],\n  anchorRef: React.RefObject<HTMLElement | null>,\n) => {\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : internalOpen;\n  const anchorEl = providedAnchorEl || anchorRef.current;\n\n  return { isControlled, open, anchorEl, isOpen: Boolean(anchorEl) && open };\n};\n\n// Open/close state is either ours or the caller's; every handler has to respect\n// that, so they are grouped here rather than repeating the isControlled check\n// inline four times in the render.\nconst useDropdownHandlers = ({\n  isControlled,\n  open,\n  setInternalOpen,\n  onOpen,\n  onClose,\n  closeOnItemClick,\n  anchorRef,\n}: {\n  isControlled: boolean;\n  open: boolean;\n  setInternalOpen: (value: boolean) => void;\n  onOpen?: () => void;\n  onClose?: () => void;\n  closeOnItemClick?: boolean;\n  anchorRef: React.RefObject<HTMLElement | null>;\n}) => {\n  const handleOpen = () => {\n    if (!isControlled) {\n      setInternalOpen(true);\n    }\n    onOpen?.();\n  };\n\n  const handleClose = () => {\n    if (!isControlled) {\n      setInternalOpen(false);\n    }\n    onClose?.();\n  };\n\n  const handleItemClick = (item: DropdownMenuItem) => {\n    item.onClick?.();\n    if (closeOnItemClick && !item.children?.length) {\n      handleClose();\n    }\n  };\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (isControlled) return;\n\n    if (open) {\n      handleClose();\n      return;\n    }\n\n    (anchorRef as React.MutableRefObject<HTMLElement>).current = event.currentTarget;\n    handleOpen();\n  };\n\n  return { handleClose, handleItemClick, handleTriggerClick };\n};\n\n// The trigger is either a caller-supplied element we clone to attach our click\n// handler and ref, arbitrary children we wrap, or the default kebab icon.\nconst DropdownTrigger: React.FC<{\n  trigger: DropdownMenuProps['trigger'];\n  anchorRef: React.RefObject<HTMLElement | null>;\n  onTriggerClick: (event: React.MouseEvent<HTMLElement>) => void;\n}> = ({ trigger, anchorRef, onTriggerClick }) => {\n  if (isValidElement(trigger)) {\n    return cloneElement(\n      trigger as React.ReactElement<{\n        onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n        ref?: React.Ref<HTMLElement>;\n      }>,\n      { onClick: onTriggerClick, ref: anchorRef },\n    );\n  }\n\n  if (trigger) {\n    return (\n      <Box ref={anchorRef} onClick={onTriggerClick}>\n        {trigger}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      ref={anchorRef}\n      onClick={onTriggerClick}\n      sx={{ cursor: 'pointer', display: 'inline-flex' }}\n    >\n      <MoreVert />\n    </Box>\n  );\n};\n\nexport const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(\n  (\n    {\n      variant = 'default',\n      items,\n      trigger,\n      open: controlledOpen,\n      onOpen,\n      onClose,\n      size = 'md',\n      maxHeight = 400,\n      minWidth = 180,\n      closeOnItemClick = true,\n      showIconSpace = false,\n      anchorEl: providedAnchorEl,\n      ...menuProps\n    },\n    ref,\n  ) => {\n    const [internalOpen, setInternalOpen] = useState(false);\n    const anchorRef = useRef<HTMLElement>(null);\n\n    const { isControlled, open, anchorEl, isOpen } = resolveMenuState(\n      controlledOpen,\n      internalOpen,\n      providedAnchorEl,\n      anchorRef,\n    );\n\n    const { handleClose, handleItemClick, handleTriggerClick } = useDropdownHandlers({\n      isControlled,\n      open,\n      setInternalOpen,\n      onOpen,\n      onClose,\n      closeOnItemClick,\n      anchorRef,\n    });\n\n    const triggerElement = (\n      <DropdownTrigger trigger={trigger} anchorRef={anchorRef} onTriggerClick={handleTriggerClick} />\n    );\n\n    return (\n      <>\n        {trigger !== undefined && triggerElement}\n        <StyledMenu\n          ref={ref}\n          anchorEl={anchorEl}\n          open={isOpen}\n          onClose={handleClose}\n          customVariant={variant}\n          size={size}\n          PaperProps={{\n            sx: {\n              maxHeight,\n              minWidth,\n              overflow: 'auto',\n            },\n          }}\n          transformOrigin={{ horizontal: 'left', vertical: 'top' }}\n          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}\n          {...menuProps}\n        >\n          {items.map((item) => renderMenuItem(item, handleItemClick, showIconSpace, size))}\n        </StyledMenu>\n      </>\n    );\n  },\n);\n\nDropdownMenu.displayName = 'DropdownMenu';\n"],"mappings":"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","names":[]}

package/dist/chunk-ENUVGXLE.js

@@ -0,0 +1,206 @@
+// src/components/form/Select/Select.tsx
+import {
+  alpha,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  keyframes,
+  MenuItem,
+  Select as MuiSelect,
+  styled
+} from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 10px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var glowStyles = (theme) => ({
+  "& .MuiOutlinedInput-root": {
+    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,
+    "&.Mui-focused": {
+      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`
+    }
+  }
+});
+var pulseStyles = (theme) => ({
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "0",
+    right: "0",
+    height: "56px",
+    transform: "translateY(-50%)",
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0.3,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var glassVariant = (theme) => ({
+  backgroundColor: alpha(theme.palette.background.paper, 0.1),
+  backdropFilter: "blur(20px)",
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  "& fieldset": { border: "none" },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.background.paper, 0.15),
+    borderColor: alpha(theme.palette.primary.main, 0.3)
+  },
+  "&.Mui-focused": {
+    backgroundColor: alpha(theme.palette.background.paper, 0.2),
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`
+  }
+});
+var gradientVariant = (theme) => ({
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
+  border: `2px solid transparent`,
+  backgroundOrigin: "border-box",
+  backgroundClip: "padding-box, border-box",
+  position: "relative",
+  "& fieldset": { border: "none" },
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "inherit",
+    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    maskComposite: "exclude",
+    padding: "2px",
+    zIndex: -1
+  },
+  "&:hover": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`
+  },
+  "&.Mui-focused": {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,
+    "&::before": {
+      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`
+    }
+  }
+});
+var defaultVariant = (theme) => ({
+  "& fieldset": { borderColor: alpha(theme.palette.divider, 0.23) },
+  "&:hover fieldset": { borderColor: theme.palette.primary.main },
+  "&.Mui-focused fieldset": { borderColor: theme.palette.primary.main, borderWidth: 2 },
+  "&.Mui-error fieldset": { borderColor: theme.palette.error.main }
+});
+var variantStyles = (theme, variant) => {
+  if (variant === "glass") return glassVariant(theme);
+  if (variant === "gradient") return gradientVariant(theme);
+  return defaultVariant(theme);
+};
+var StyledFormControl = styled(FormControl, {
+  shouldForwardProp: (prop) => prop !== "customVariant" && prop !== "glow" && prop !== "pulse"
+})(({ theme, customVariant, glow, pulse }) => ({
+  position: "relative",
+  ...glow ? glowStyles(theme) : {},
+  ...pulse ? pulseStyles(theme) : {},
+  "& .MuiOutlinedInput-root": {
+    transition: "all 0.3s ease",
+    ...variantStyles(theme, customVariant)
+  }
+}));
+function renderMenuItems(options, placeholder, dataTestId) {
+  const optionTestId = (value) => dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;
+  const items = options.map((option) => /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      "data-testid": optionTestId(option.value),
+      children: option.label
+    },
+    option.value
+  ));
+  if (placeholder) {
+    items.unshift(
+      /* @__PURE__ */ jsx(MenuItem, { value: "", disabled: true, children: placeholder }, "__placeholder__")
+    );
+  }
+  return items;
+}
+var formControlSize = (size) => {
+  if (size === void 0) return void 0;
+  return size === "sm" ? "small" : "medium";
+};
+var Select = React.forwardRef(
+  ({
+    // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined
+    // resolves to the default variant, MUI's medium size, and no glow/pulse —
+    // keeping this render function under the complexity budget.
+    variant,
+    options,
+    label,
+    helperText,
+    fullWidth = true,
+    size,
+    error,
+    placeholder,
+    glow,
+    pulse,
+    "data-testid": dataTestId,
+    value,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const labelId = React.useId();
+    const helperTextId = React.useId();
+    const selectId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      StyledFormControl,
+      {
+        fullWidth,
+        size: formControlSize(size),
+        error,
+        customVariant: variant,
+        glow,
+        pulse,
+        ref,
+        "data-testid": dataTestId,
+        children: [
+          label && /* @__PURE__ */ jsx(InputLabel, { id: labelId, htmlFor: selectId, children: label }),
+          /* @__PURE__ */ jsx(
+            MuiSelect,
+            {
+              id: selectId,
+              labelId: label ? labelId : void 0,
+              label,
+              displayEmpty: Boolean(placeholder),
+              "aria-describedby": helperText ? helperTextId : void 0,
+              "data-testid": dataTestId ? `${dataTestId}-select` : "select",
+              value: value ?? "",
+              ...props,
+              SelectDisplayProps: ariaLabel === void 0 ? void 0 : { "aria-label": ariaLabel, "aria-labelledby": void 0 },
+              children: renderMenuItems(options, placeholder, dataTestId)
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(FormHelperText, { id: helperTextId, error, children: helperText })
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+export {
+  Select
+};
+//# sourceMappingURL=chunk-ENUVGXLE.js.map

package/dist/chunk-ENUVGXLE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Select/Select.tsx"],"sourcesContent":["import {\n  alpha,\n  type CSSObject,\n  FormControl,\n  FormHelperText,\n  InputLabel,\n  keyframes,\n  MenuItem,\n  Select as MuiSelect,\n  styled,\n  type Theme,\n} from '@mui/material';\nimport React from 'react';\n\nimport type { SelectProps } from './Select.types';\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 10px currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n/** Glow ring on the outlined input, keyed off the `glow` prop. */\nconst glowStyles = (theme: Theme): CSSObject => ({\n  '& .MuiOutlinedInput-root': {\n    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,\n    '&.Mui-focused': {\n      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,\n    },\n  },\n});\n\n/** Pulsing halo behind the control, keyed off the `pulse` prop. */\nconst pulseStyles = (theme: Theme): CSSObject => ({\n  '&::after': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '0',\n    right: '0',\n    height: '56px',\n    transform: 'translateY(-50%)',\n    borderRadius: theme.spacing(0.5),\n    backgroundColor: theme.palette.primary.main,\n    opacity: 0.3,\n    animation: `${pulseAnimation} 2s infinite`,\n    pointerEvents: 'none',\n    zIndex: -1,\n  },\n});\n\n/** `glass` variant: translucent, blurred background. */\nconst glassVariant = (theme: Theme): CSSObject => ({\n  backgroundColor: alpha(theme.palette.background.paper, 0.1),\n  backdropFilter: 'blur(20px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  '& fieldset': { border: 'none' },\n  '&:hover': {\n    backgroundColor: alpha(theme.palette.background.paper, 0.15),\n    borderColor: alpha(theme.palette.primary.main, 0.3),\n  },\n  '&.Mui-focused': {\n    backgroundColor: alpha(theme.palette.background.paper, 0.2),\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,\n  },\n});\n\n/** `gradient` variant: gradient fill with a masked gradient border. */\nconst gradientVariant = (theme: Theme): CSSObject => ({\n  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,\n  border: `2px solid transparent`,\n  backgroundOrigin: 'border-box',\n  backgroundClip: 'padding-box, border-box',\n  position: 'relative',\n  '& fieldset': { border: 'none' },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    borderRadius: 'inherit',\n    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,\n    mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',\n    maskComposite: 'exclude',\n    padding: '2px',\n    zIndex: -1,\n  },\n  '&:hover': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,\n  },\n  '&.Mui-focused': {\n    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,\n    '&::before': {\n      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,\n    },\n  },\n});\n\n/** `default` variant: standard outlined borders with hover/focus/error states. */\nconst defaultVariant = (theme: Theme): CSSObject => ({\n  '& fieldset': { borderColor: alpha(theme.palette.divider, 0.23) },\n  '&:hover fieldset': { borderColor: theme.palette.primary.main },\n  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },\n  '&.Mui-error fieldset': { borderColor: theme.palette.error.main },\n});\n\n/** Pick the variant style block for the outlined input. */\nconst variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject => {\n  if (variant === 'glass') return glassVariant(theme);\n  if (variant === 'gradient') return gradientVariant(theme);\n  return defaultVariant(theme);\n};\n\nconst StyledFormControl = styled(FormControl, {\n  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'glow' && prop !== 'pulse',\n})<{\n  customVariant?: SelectProps['variant'];\n  glow?: boolean;\n  pulse?: boolean;\n}>(({ theme, customVariant, glow, pulse }) => ({\n  position: 'relative',\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme) : {}),\n  '& .MuiOutlinedInput-root': {\n    transition: 'all 0.3s ease',\n    ...variantStyles(theme, customVariant),\n  },\n}));\n\n/**\n * Build the placeholder item plus one MenuItem per option. Returns a flat ARRAY\n * (not a Fragment): MUI `Select` enumerates its children with `React.Children`,\n * which does not descend into Fragments — a Fragment would hide every option.\n */\nfunction renderMenuItems(\n  options: SelectProps['options'],\n  placeholder: string | undefined,\n  dataTestId: string | undefined,\n): React.ReactNode[] {\n  const optionTestId = (value: string | number): string =>\n    dataTestId ? `${dataTestId}-option-${value}` : `option-${value}`;\n  const items = options.map((option) => (\n    <MenuItem\n      key={option.value}\n      value={option.value}\n      disabled={option.disabled}\n      data-testid={optionTestId(option.value)}\n    >\n      {option.label}\n    </MenuItem>\n  ));\n  if (placeholder) {\n    items.unshift(\n      <MenuItem key=\"__placeholder__\" value=\"\" disabled>\n        {placeholder}\n      </MenuItem>,\n    );\n  }\n  return items;\n}\n\n/**\n * The house scale as a FormControl size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two. This component's scale is already narrowed to `sm | md`, so the map\n * is exact rather than lossy.\n */\nconst formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {\n  if (size === undefined) return undefined;\n  return size === 'sm' ? 'small' : 'medium';\n};\n\nexport const Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      // `variant`/`size`/`glow`/`pulse` intentionally have no defaults: undefined\n      // resolves to the default variant, MUI's medium size, and no glow/pulse —\n      // keeping this render function under the complexity budget.\n      variant,\n      options,\n      label,\n      helperText,\n      fullWidth = true,\n      size,\n      error,\n      placeholder,\n      glow,\n      pulse,\n      'data-testid': dataTestId,\n      value,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelId = React.useId();\n    const helperTextId = React.useId();\n    const selectId = React.useId();\n\n    return (\n      <StyledFormControl\n        fullWidth={fullWidth}\n        size={formControlSize(size)}\n        error={error}\n        customVariant={variant}\n        glow={glow}\n        pulse={pulse}\n        ref={ref}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <InputLabel id={labelId} htmlFor={selectId}>\n            {label}\n          </InputLabel>\n        )}\n        <MuiSelect\n          id={selectId}\n          labelId={label ? labelId : undefined}\n          label={label}\n          displayEmpty={Boolean(placeholder)}\n          aria-describedby={helperText ? helperTextId : undefined}\n          data-testid={dataTestId ? `${dataTestId}-select` : 'select'}\n          value={value ?? ''}\n          {...props}\n          /*\n           * `role=\"combobox\"` sits on MUI's display DIV, not on the hidden\n           * native input that `{...props}` reaches — so an `aria-label` passed\n           * to this component never landed on the element carrying the role,\n           * and MUI's `aria-labelledby` then fell back to that div's OWN id.\n           * The control announced as its current value: a filter's field\n           * select read \"Status\" instead of \"Filtro 1 — campo\".\n           *\n           * Forwarding it here names the right element. The explicit\n           * `undefined` clears that self-referential `aria-labelledby`, which\n           * would otherwise win — a labelledby always beats a label in the\n           * accessible-name computation.\n           */\n          SelectDisplayProps={\n            ariaLabel === undefined\n              ? undefined\n              : { 'aria-label': ariaLabel, 'aria-labelledby': undefined }\n          }\n        >\n          {renderMenuItems(options, placeholder, dataTestId)}\n        </MuiSelect>\n        {helperText && (\n          <FormHelperText id={helperTextId} error={error}>\n            {helperText}\n          </FormHelperText>\n        )}\n      </StyledFormControl>\n    );\n  },\n);\n\nSelect.displayName = 'Select';\n"],"mappings":"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","names":[]}

package/dist/chunk-FD4W36WR.js

@@ -0,0 +1,110 @@
+// src/components/form/Form/Form.tsx
+import { Box, Stack, styled } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledForm = styled("form", {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ theme, variant }) => ({
+  width: "100%",
+  ...variant === "inline" && {
+    display: "flex",
+    gap: theme.spacing(2),
+    alignItems: "flex-start"
+  }
+}));
+var spacingMap = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5
+};
+var maxWidthMap = {
+  sm: "600px",
+  md: "900px",
+  lg: "1200px",
+  xl: "1536px",
+  full: "100%"
+};
+var Form = React.forwardRef(
+  ({ variant = "vertical", maxWidth = "full", spacing = "md", children, dataTestId, ...props }, ref) => /* @__PURE__ */ jsx(StyledForm, { ref, variant, role: "form", "data-testid": dataTestId, ...props, children: /* @__PURE__ */ jsx(Box, { sx: { maxWidth: maxWidthMap[maxWidth], width: "100%" }, children: variant === "inline" ? children : /* @__PURE__ */ jsx(Stack, { spacing: spacingMap[spacing], children }) }) })
+);
+Form.displayName = "Form";
+var StyledFormField = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(
+  ({ theme, variant }) => ({
+    display: variant === "horizontal" ? "grid" : "flex",
+    flexDirection: variant === "horizontal" ? void 0 : "column",
+    gridTemplateColumns: variant === "horizontal" ? "200px 1fr" : void 0,
+    gap: theme.spacing(1),
+    alignItems: variant === "horizontal" ? "center" : void 0
+  })
+);
+var FormField = ({
+  name,
+  label,
+  required,
+  error,
+  helperText,
+  children,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(StyledFormField, { "data-testid": dataTestId, children: [
+  label && /* @__PURE__ */ jsx(FormLabel, { required, error: !!error, htmlFor: name, dataTestId: dataTestId ? `${dataTestId}-label` : void 0, children: label }),
+  /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, dataTestId: dataTestId ? `${dataTestId}-control` : void 0, children: [
+    children,
+    (error || helperText) && /* @__PURE__ */ jsx(FormMessage, { error: !!error, dataTestId: dataTestId ? `${dataTestId}-message` : void 0, children: error || helperText })
+  ] })
+] });
+var StyledFormLabel = styled("label", {
+  shouldForwardProp: (prop) => prop !== "error"
+})(({ theme, error }) => ({
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  marginBottom: theme.spacing(0.5),
+  display: "block",
+  "&::after": {
+    content: '" *"',
+    color: theme.palette.error.main,
+    display: "var(--required-display, none)"
+  }
+}));
+var FormLabel = ({ required, error, children, htmlFor, dataTestId }) => /* @__PURE__ */ jsx(
+  StyledFormLabel,
+  {
+    error,
+    htmlFor,
+    "data-testid": dataTestId,
+    style: { "--required-display": required ? "inline" : "none" },
+    children
+  }
+);
+var StyledFormControl = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "fullWidth"
+})(({ fullWidth }) => ({
+  width: fullWidth ? "100%" : "auto",
+  position: "relative"
+}));
+var FormControl = ({ fullWidth = true, children, dataTestId }) => (
+  // Don't pass error prop to the DOM element
+  /* @__PURE__ */ jsx(StyledFormControl, { fullWidth, "data-testid": dataTestId, children })
+);
+var StyledFormMessage = styled("span", {
+  shouldForwardProp: (prop) => prop !== "error"
+})(({ theme, error }) => ({
+  fontSize: "0.75rem",
+  marginTop: theme.spacing(0.5),
+  color: error ? theme.palette.error.main : theme.palette.text.secondary,
+  display: "block"
+}));
+var FormMessage = ({ error, children, dataTestId }) => /* @__PURE__ */ jsx(StyledFormMessage, { error, "data-testid": dataTestId, children });
+
+export {
+  Form,
+  FormField,
+  FormLabel,
+  FormControl,
+  FormMessage
+};
+//# sourceMappingURL=chunk-FD4W36WR.js.map