@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-POV2KL2P.js

@@ -0,0 +1,205 @@
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Table/Table.styles.ts
+import { alpha, keyframes } from "@mui/material/styles/index.js";
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+var getDensityConfig = (theme, density = "normal") => {
+  const configs = {
+    compact: {
+      rowHeightPx: 36,
+      cellPadding: rems(theme, 6, 12),
+      fontSize: rem(theme, 13),
+      headerPadding: rems(theme, 8, 12)
+    },
+    normal: {
+      rowHeightPx: 52,
+      cellPadding: rems(theme, 12, 16),
+      fontSize: rem(theme, 14),
+      headerPadding: rems(theme, 16, 16)
+    },
+    comfortable: {
+      rowHeightPx: 68,
+      cellPadding: rems(theme, 18, 24),
+      fontSize: rem(theme, 14),
+      headerPadding: rems(theme, 20, 24)
+    }
+  };
+  return configs[density];
+};
+var getStripeColorFromTheme = (theme, stripeColor = "neutral") => {
+  const colorMap = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    info: theme.palette.info.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    danger: theme.palette.error.main,
+    neutral: theme.palette.action.hover
+  };
+  return colorMap[stripeColor];
+};
+var stripeRowColor = (theme, stripeColor = "neutral") => {
+  const color = getStripeColorFromTheme(theme, stripeColor);
+  return stripeColor === "neutral" ? color : alpha(color, 0.15);
+};
+var TABLE_VARIANTS = {
+  default: ({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    "& .MuiTableHead-root": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.1)
+    }
+  }),
+  striped: ({ theme, stripeColor }) => ({
+    backgroundColor: theme.palette.background.paper,
+    "& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)": {
+      backgroundColor: stripeRowColor(theme, stripeColor)
+    }
+  }),
+  glass: ({ theme }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  }),
+  minimal: ({ theme }) => ({
+    backgroundColor: "transparent",
+    "& .MuiTableCell-root": {
+      borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+    }
+  }),
+  gradient: ({ theme }) => ({
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.05)}, ${alpha(theme.palette.secondary.main, 0.05)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    "& .MuiTableHead-root": {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`
+    },
+    "& .MuiTableCell-root": {
+      borderBottom: `1px solid ${alpha(theme.palette.divider, 0.15)}`
+    }
+  })
+};
+var tableVariantStyles = (args, customVariant) => customVariant ? TABLE_VARIANTS[customVariant]?.(args) ?? {} : {};
+var stickyHeaderStyles = (theme, densityConfig) => ({
+  "& .MuiTableHead-root": {
+    position: "sticky",
+    top: 0,
+    zIndex: 100,
+    backgroundColor: theme.palette.background.paper,
+    "& .MuiTableCell-root": {
+      borderBottom: `${rem(theme, 2)} solid ${theme.palette.divider}`,
+      fontWeight: 600,
+      padding: densityConfig.headerPadding
+    }
+  }
+});
+var hoverableRowStyles = (theme) => ({
+  "& .MuiTableBody-root .MuiTableRow-root:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.08),
+    cursor: "pointer",
+    transition: "background-color 0.15s ease-in-out"
+  }
+});
+var emphasisStyles = (theme, glow, pulse) => {
+  if (glow && pulse) return {
+    position: "relative",
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    filter: "brightness(1.05)",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: theme.palette.primary.main,
+      opacity: 0.1,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  };
+  if (glow) return {
+    boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
+    filter: "brightness(1.05)"
+  };
+  if (pulse) return {
+    position: "relative",
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "inherit",
+      backgroundColor: theme.palette.primary.main,
+      opacity: 0.1,
+      animation: `${pulseAnimation(theme)} 2s infinite`,
+      pointerEvents: "none",
+      zIndex: -1
+    }
+  };
+  return {};
+};
+var tableStyles = ({
+  theme,
+  customVariant,
+  glow,
+  pulse,
+  hoverable,
+  density,
+  stickyHeader,
+  stripeColor = "neutral"
+}) => {
+  const densityConfig = getDensityConfig(theme, density);
+  return {
+    borderRadius: theme.spacing(1),
+    overflow: "hidden",
+    transition: "all 0.3s ease",
+    position: "relative",
+    // Density styles
+    "& .MuiTableCell-root": {
+      padding: densityConfig.cellPadding,
+      fontSize: densityConfig.fontSize,
+      height: rem(theme, densityConfig.rowHeightPx)
+    },
+    // Sticky header
+    ...tableVariantStyles({ theme, densityConfig, stripeColor }, customVariant),
+    ...stickyHeader ? stickyHeaderStyles(theme, densityConfig) : {},
+    ...hoverable ? hoverableRowStyles(theme) : {},
+    ...emphasisStyles(theme, glow, pulse),
+    // Variant styles
+    // Hoverable rows
+    // Selection styles
+    "& .MuiTableRow-root.selected": {
+      backgroundColor: alpha(theme.palette.primary.main, 0.12),
+      "&:hover": {
+        backgroundColor: alpha(theme.palette.primary.main, 0.16)
+      }
+    }
+    // Glow effect
+    // Pulse animation
+    // Both glow and pulse
+  };
+};
+
+export {
+  tableStyles
+};
+//# sourceMappingURL=chunk-POV2KL2P.js.map

package/dist/chunk-POV2KL2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.styles.ts"],"sourcesContent":["import { alpha, keyframes } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\n\nimport type { TableDensity, TableStripeColor } from './Table.types';\nimport { rem, rems } from '../../../tokens/relative';\n\nconst pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 1;\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;\n    opacity: 0;\n  }\n  100% {\n    box-shadow: 0 0 0 0 currentColor;\n    opacity: 0;\n  }\n`;\n\n// Density configurations. The row height stays design px (`…Px`) and goes\n// through `rem` where the cell is drawn.\nconst getDensityConfig = (theme: Theme, density: TableDensity = 'normal') => {\n  const configs = {\n    compact: {\n      rowHeightPx: 36,\n      cellPadding: rems(theme, 6, 12),\n      fontSize: rem(theme, 13),\n      headerPadding: rems(theme, 8, 12) },\n    normal: {\n      rowHeightPx: 52,\n      cellPadding: rems(theme, 12, 16),\n      fontSize: rem(theme, 14),\n      headerPadding: rems(theme, 16, 16) },\n    comfortable: {\n      rowHeightPx: 68,\n      cellPadding: rems(theme, 18, 24),\n      fontSize: rem(theme, 14),\n      headerPadding: rems(theme, 20, 24) } };\n  return configs[density];\n};\n\nconst getStripeColorFromTheme = (theme: { palette: { primary: { main: string }; secondary: { main: string }; info: { main: string }; success: { main: string }; warning: { main: string }; error: { main: string }; action: { hover: string } } }, stripeColor: TableStripeColor = 'neutral') => {\n  const colorMap: Record<TableStripeColor, string> = {\n    primary: theme.palette.primary.main,\n    secondary: theme.palette.secondary.main,\n    info: theme.palette.info.main,\n    success: theme.palette.success.main,\n    warning: theme.palette.warning.main,\n    danger: theme.palette.error.main,\n    neutral: theme.palette.action.hover };\n  return colorMap[stripeColor];\n};\n\n/**\n * The zebra stripe for one body row.\n *\n * `neutral` — the default — resolves to `palette.action.hover`, which ALREADY\n * carries its subtlety in its own alpha (`rgba(0,0,0,0.04)` in the light\n * theme). MUI's `alpha()` REPLACES that channel rather than multiplying it, so\n * re-alpha-ing it at 0.5 amplified the tint 12.5× into `rgba(0,0,0,0.5)` —\n * solid #808080 on a white card, which reads as a selected or errored row\n * rather than as a stripe (FUT-755). It is used as-is instead.\n *\n * The named colours are opaque `*.main` values with no alpha of their own, so\n * they still need one.\n */\nconst stripeRowColor = (\n  theme: Parameters<typeof getStripeColorFromTheme>[0],\n  stripeColor: TableStripeColor = 'neutral',\n): string => {\n  const color = getStripeColorFromTheme(theme, stripeColor);\n  return stripeColor === 'neutral' ? color : alpha(color, 0.15);\n};\n\n// One variant applies at a time, so a lookup replaces the mutually exclusive\n// spreads.\nconst TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {\n  default: ({ theme }) => ({\n      backgroundColor: theme.palette.background.paper,\n      '& .MuiTableHead-root': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.1) } }),\n  striped: ({ theme, stripeColor }) => ({\n      backgroundColor: theme.palette.background.paper,\n      '& .MuiTableBody-root .MuiTableRow-root:nth-of-type(even)': {\n        backgroundColor: stripeRowColor(theme, stripeColor) } }),\n  glass: ({ theme }) => ({\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: `blur(${rem(theme, 20)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }),\n  minimal: ({ theme }) => ({\n      backgroundColor: 'transparent',\n      '& .MuiTableCell-root': {\n        borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}` } }),\n  gradient: ({ theme }) => ({\n      background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.05)}, ${alpha(theme.palette.secondary.main, 0.05)})`,\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      '& .MuiTableHead-root': {\n        background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})` },\n      '& .MuiTableCell-root': {\n        borderBottom: `1px solid ${alpha(theme.palette.divider, 0.15)}` } }) };\n\ntype VariantArgs = {\n  theme: Theme;\n  densityConfig: ReturnType<typeof getDensityConfig>;\n  stripeColor?: TableStripeColor;\n};\n\nconst tableVariantStyles = (args: VariantArgs, customVariant?: string): CSSObject =>\n  customVariant ? (TABLE_VARIANTS[customVariant]?.(args) ?? {}) : {};\n\n// Sticky headers and row hover are independent of the variant.\nconst stickyHeaderStyles = (\n  theme: Theme,\n  densityConfig: ReturnType<typeof getDensityConfig>,\n): CSSObject => ({\n      '& .MuiTableHead-root': {\n        position: 'sticky',\n        top: 0,\n        zIndex: 100,\n        backgroundColor: theme.palette.background.paper,\n        '& .MuiTableCell-root': {\n          borderBottom: `${rem(theme, 2)} solid ${theme.palette.divider}`,\n          fontWeight: 600,\n          padding: densityConfig.headerPadding } } });\n\nconst hoverableRowStyles = (theme: Theme): CSSObject => ({\n      '& .MuiTableBody-root .MuiTableRow-root:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        cursor: 'pointer',\n        transition: 'background-color 0.15s ease-in-out' } });\n\n// glow and pulse combine into three distinct looks, spelled out rather than\n// layered — the glow-only shadow differs from the one used when both are on.\nconst emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => {\n  if (glow && pulse) return ({\n      position: 'relative',\n      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1 } });\n  if (glow) return ({\n      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n      filter: 'brightness(1.05)' });\n  if (pulse) return ({\n      position: 'relative',\n      '&::after': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        borderRadius: 'inherit',\n        backgroundColor: theme.palette.primary.main,\n        opacity: 0.1,\n        animation: `${pulseAnimation(theme)} 2s infinite`,\n        pointerEvents: 'none',\n        zIndex: -1 } });\n\n  return {};\n};\n\n// The table's own styling, lifted out so the styled() callback just forwards\n// its props.\nexport const tableStyles = ({\n  theme,\n  customVariant,\n  glow,\n  pulse,\n  hoverable,\n  density,\n  stickyHeader,\n  stripeColor = 'neutral' }: {\n  theme: Theme;\n  customVariant?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  stripeColor?: TableStripeColor;\n}): CSSObject => {\n  const densityConfig = getDensityConfig(theme, density);\n  \n  return {\n    borderRadius: theme.spacing(1),\n    overflow: 'hidden',\n    transition: 'all 0.3s ease',\n    position: 'relative',\n\n    // Density styles\n    '& .MuiTableCell-root': {\n      padding: densityConfig.cellPadding,\n      fontSize: densityConfig.fontSize,\n      height: rem(theme, densityConfig.rowHeightPx) },\n\n    // Sticky header\n    ...tableVariantStyles({ theme, densityConfig, stripeColor }, customVariant),\n    ...(stickyHeader ? stickyHeaderStyles(theme, densityConfig) : {}),\n    ...(hoverable ? hoverableRowStyles(theme) : {}),\n    ...emphasisStyles(theme, glow, pulse),\n\n\n    // Variant styles\n\n\n\n\n\n\n\n\n\n\n    // Hoverable rows\n\n\n    // Selection styles\n    '& .MuiTableRow-root.selected': {\n      backgroundColor: alpha(theme.palette.primary.main, 0.12),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, 0.16) } },\n\n    // Glow effect\n\n\n    // Pulse animation\n\n\n    // Both glow and pulse\n\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-PT2XADGH.js

@@ -0,0 +1,116 @@
+import {
+  CollapseToggle,
+  LogoBar,
+  MenuList
+} from "./chunk-HB7ISSLK.js";
+import {
+  renderMenuItem
+} from "./chunk-MK4CH4VT.js";
+import {
+  slideIn
+} from "./chunk-6GRZ77IS.js";
+
+// src/components/navigation/NavigationMenu/NavigationStandardBody.tsx
+import MenuIcon from "@mui/icons-material/Menu";
+import Box from "@mui/material/Box/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import { alpha } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DividerRule = () => /* @__PURE__ */ jsx(
+  Divider,
+  {
+    sx: {
+      my: 1,
+      opacity: 0.5,
+      background: (theme) => `linear-gradient(90deg, transparent 0%, ${alpha(theme.palette.divider, 0.5)} 50%, transparent 100%)`
+    }
+  }
+);
+var VerticalLogo = ({ logo, collapsed }) => /* @__PURE__ */ jsx(LogoBar, { children: collapsed ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }) : logo });
+var CollapseControl = ({
+  collapsed,
+  onToggle
+}) => /* @__PURE__ */ jsxs(CollapseToggle, { onClick: onToggle, children: [
+  /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: collapsed ? 0 : 40, justifyContent: "center" }, children: /* @__PURE__ */ jsx(MenuIcon, {}) }),
+  !collapsed && /* @__PURE__ */ jsx(ListItemText, { primary: "Collapse" })
+] });
+var MenuItems = ({ items, variant, size, collapsed, minimal, showDividers }) => /* @__PURE__ */ jsx(MenuList, { variant, size, children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        // Staggered so the list fills in rather than appearing at once.
+        animation: `${slideIn} 0.4s ease-out`,
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "both"
+      },
+      children: renderMenuItem(item, variant, size, collapsed, minimal, 0)
+    }
+  ),
+  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx(DividerRule, {})
+] }, item.id)) });
+var EndPanel = ({ children }) => /* @__PURE__ */ jsx(Fade, { in: true, timeout: 600, children: /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: {
+      mt: "auto",
+      p: 2,
+      borderTop: (theme) => `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+      background: (theme) => `linear-gradient(180deg, transparent 0%, ${alpha(theme.palette.background.default, 0.5)} 100%)`
+    },
+    children
+  }
+) });
+var NavigationStandardBody = ({
+  variant,
+  size,
+  minimal,
+  collapsed,
+  collapsible,
+  showDividers,
+  items,
+  logo,
+  endContent,
+  onCollapseToggle
+}) => {
+  const isVertical = variant === "vertical";
+  const elevation = !minimal && variant === "horizontal" ? 1 : 0;
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      elevation,
+      sx: {
+        width: "100%",
+        height: isVertical ? "100%" : "auto",
+        overflow: "hidden",
+        background: minimal ? "transparent" : void 0
+      },
+      children: [
+        logo && isVertical && /* @__PURE__ */ jsx(VerticalLogo, { logo, collapsed }),
+        collapsible && isVertical && /* @__PURE__ */ jsx(CollapseControl, { collapsed, onToggle: onCollapseToggle }),
+        /* @__PURE__ */ jsx(
+          MenuItems,
+          {
+            items,
+            variant,
+            size,
+            collapsed,
+            minimal,
+            showDividers
+          }
+        ),
+        endContent && /* @__PURE__ */ jsx(EndPanel, { children: endContent })
+      ]
+    }
+  );
+};
+
+export {
+  NavigationStandardBody
+};
+//# sourceMappingURL=chunk-PT2XADGH.js.map

package/dist/chunk-PWZHCBG3.js

@@ -0,0 +1,39 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Select
+} from "./chunk-TU5A2CV7.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-D6KL74KI.js";
+
+// src/components/form/total-form/Fields/SelectField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectField({ name, options, label, placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        options,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, String(event.target.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  SelectField
+};
+//# sourceMappingURL=chunk-PWZHCBG3.js.map

package/dist/chunk-PZ7PU4AP.js

@@ -0,0 +1,96 @@
+import {
+  otpSlotSx
+} from "./chunk-YZ2DMP23.js";
+import {
+  useOtpDigits
+} from "./chunk-UETHX57J.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/InputOTP/InputOTP.tsx
+import Box from "@mui/material/Box/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledOTPInput = styled(TextField, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glass", "gradient"].includes(prop)
+})(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "numeric",
+  color: "primary",
+  size: "md",
+  length: 6,
+  value: "",
+  glass: false,
+  gradient: false,
+  autoFocus: false,
+  error: false,
+  disabled: false
+};
+var InputOTP = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    length,
+    value,
+    onChange,
+    onComplete,
+    glass,
+    gradient,
+    autoFocus,
+    error,
+    disabled,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({
+    variant,
+    length,
+    value,
+    onChange,
+    onComplete
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      "data-testid": dataTestId,
+      sx: { display: "flex", gap: 1, justifyContent: "center", alignItems: "center" },
+      ...rest,
+      children: digits.map((digit, index) => /* @__PURE__ */ jsx(
+        StyledOTPInput,
+        {
+          ref: (el) => {
+            inputRefs.current[index] = el?.querySelector("input") || null;
+          },
+          customColor: color,
+          customSize: size,
+          glass,
+          gradient,
+          value: variant === "masked" ? digit ? "\u2022" : "" : digit,
+          onChange: (e) => handleInputChange(index, e.target.value),
+          onKeyDown: (e) => handleKeyDown(index, e),
+          onPaste: index === 0 ? handlePaste : void 0,
+          autoFocus: autoFocus && index === 0,
+          error,
+          disabled,
+          inputProps: {
+            maxLength: 1,
+            style: { textAlign: "center" },
+            "data-testid": dataTestId ? `${dataTestId}-slot-${index}` : void 0
+          }
+        },
+        index
+      ))
+    }
+  );
+});
+InputOTP.displayName = "InputOTP";
+
+export {
+  InputOTP
+};
+//# sourceMappingURL=chunk-PZ7PU4AP.js.map

package/dist/chunk-Q2YNXJEL.js

@@ -0,0 +1,114 @@
+import {
+  renderChartByType
+} from "./chunk-TXGB2WSW.js";
+import {
+  ChartContainer
+} from "./chunk-RIRTW5EU.js";
+import {
+  getSizeStyles,
+  getVariantStyles,
+  plotHeightPx
+} from "./chunk-EA2UNEL6.js";
+import {
+  muiColor
+} from "./chunk-7ZPUN7TV.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/Chart.tsx
+import Box from "@mui/material/Box/index.js";
+import CircularProgress from "@mui/material/CircularProgress/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function variantSx(theme, props) {
+  return getVariantStyles(theme, {
+    variant: props.variant ?? "default",
+    color: props.color ?? "primary",
+    glow: props.glow ?? false,
+    pulse: props.pulse ?? false,
+    glass: props.glass ?? false,
+    gradient: props.gradient ?? false,
+    disabled: props.disabled ?? false
+  });
+}
+function ChartHeader({ title, subtitle, neon, dataTestId }) {
+  if (!title && !subtitle) return null;
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, "data-testid": `${dataTestId}-header`, children: [
+    title && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "h6",
+        "data-testid": `${dataTestId}-title`,
+        sx: (theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : "text.primary", fontWeight: 600 }),
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        "data-testid": `${dataTestId}-subtitle`,
+        sx: (theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : "text.secondary" }),
+        children: subtitle
+      }
+    )
+  ] });
+}
+var Chart = (props) => {
+  const theme = useTheme();
+  const sizeStyles = getSizeStyles(theme, props.size, props.height);
+  const styles = variantSx(theme, props);
+  const dataTestId = props["data-testid"] ?? "chart";
+  if (props.loading) {
+    return /* @__PURE__ */ jsx(
+      Paper,
+      {
+        "data-testid": `${dataTestId}-loading`,
+        sx: { ...styles, ...sizeStyles, display: "flex", justifyContent: "center", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(props.color ?? "primary", "inherit"), "data-testid": `${dataTestId}-loading-spinner` })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      "data-testid": dataTestId,
+      className: props.className,
+      sx: { p: 2, ...styles, ...props.style },
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      children: [
+        /* @__PURE__ */ jsx(
+          ChartHeader,
+          {
+            title: props.title,
+            subtitle: props.subtitle,
+            neon: props.variant === "neon",
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ChartContainer,
+          {
+            responsive: props.responsive ?? true,
+            width: typeof props.width === "number" ? rem(theme, props.width) : props.width ?? "100%",
+            height: props.fillHeight === true ? "100%" : plotHeightPx(props.size, props.height),
+            "data-testid": `${dataTestId}-container`,
+            children: renderChartByType(props, theme)
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Chart
+};
+//# sourceMappingURL=chunk-Q2YNXJEL.js.map

package/dist/chunk-Q2YNXJEL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/Chart.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { ChartProps } from './Chart.types';\nimport { ChartContainer } from './ChartComposables';\nimport { getSizeStyles, getVariantStyles, plotHeightPx } from './chart-internals';\nimport { renderChartByType } from './chart-renderers';\nimport { uiInk } from '../../../tokens/ink';\nimport { muiColor, rem } from '../../../tokens/scales';\n\n/**\n * Prop-driven Recharts wrapper (line/bar/area/pie/radar/scatter/composed)\n * with MUI-themed chrome. The serializable-spec API (`SpecChart`) layers on\n * top of this component; type-specific rendering lives in\n * `chart-renderers.tsx` and styling in `chart-internals.ts`.\n */\n\nfunction variantSx(theme: Theme, props: ChartProps): Record<string, unknown> {\n  return getVariantStyles(theme, {\n    variant: props.variant ?? 'default',\n    color: props.color ?? 'primary',\n    glow: props.glow ?? false,\n    pulse: props.pulse ?? false,\n    glass: props.glass ?? false,\n    gradient: props.gradient ?? false,\n    disabled: props.disabled ?? false,\n  });\n}\n\ninterface HeaderProps {\n  title?: string;\n  subtitle?: string;\n  neon: boolean;\n  dataTestId: string;\n}\n\nfunction ChartHeader({ title, subtitle, neon, dataTestId }: HeaderProps): React.ReactElement | null {\n  if (!title && !subtitle) return null;\n  return (\n    <Box sx={{ mb: 2 }} data-testid={`${dataTestId}-header`}>\n      {title && (\n        <Typography\n          variant=\"h6\"\n          data-testid={`${dataTestId}-title`}\n          sx={(theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : 'text.primary', fontWeight: 600 })}\n        >\n          {title}\n        </Typography>\n      )}\n      {subtitle && (\n        <Typography\n          variant=\"body2\"\n          data-testid={`${dataTestId}-subtitle`}\n          sx={(theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : 'text.secondary' })}\n        >\n          {subtitle}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\nexport const Chart: React.FC<ChartProps> = (props) => {\n  const theme = useTheme();\n  const sizeStyles = getSizeStyles(theme, props.size, props.height);\n  const styles = variantSx(theme, props);\n  const dataTestId = props['data-testid'] ?? 'chart';\n\n  if (props.loading) {\n    return (\n      <Paper\n        data-testid={`${dataTestId}-loading`}\n        sx={{ ...styles, ...sizeStyles, display: 'flex', justifyContent: 'center', alignItems: 'center' }}\n      >\n        <CircularProgress color={muiColor(props.color ?? 'primary', 'inherit')} data-testid={`${dataTestId}-loading-spinner`} />\n      </Paper>\n    );\n  }\n\n  return (\n    <Paper\n      data-testid={dataTestId}\n      className={props.className}\n      sx={{ p: 2, ...styles, ...props.style }}\n      onFocus={props.onFocus}\n      onBlur={props.onBlur}\n    >\n      <ChartHeader\n        title={props.title}\n        subtitle={props.subtitle}\n        neon={props.variant === 'neon'}\n        dataTestId={dataTestId}\n      />\n      <ChartContainer\n        responsive={props.responsive ?? true}\n        width={typeof props.width === 'number' ? rem(theme, props.width) : (props.width ?? '100%')}\n        height={props.fillHeight === true ? '100%' : plotHeightPx(props.size, props.height)}\n        data-testid={`${dataTestId}-container`}\n      >\n        {renderChartByType(props, theme)}\n      </ChartContainer>\n    </Paper>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,SAAS,OAAO,gBAA4B;AAuCxC,SAEI,KAFJ;AAtBJ,SAAS,UAAU,OAAc,OAA4C;AAC3E,SAAO,iBAAiB,OAAO;AAAA,IAC7B,SAAS,MAAM,WAAW;AAAA,IAC1B,OAAO,MAAM,SAAS;AAAA,IACtB,MAAM,MAAM,QAAQ;AAAA,IACpB,OAAO,MAAM,SAAS;AAAA,IACtB,OAAO,MAAM,SAAS;AAAA,IACtB,UAAU,MAAM,YAAY;AAAA,IAC5B,UAAU,MAAM,YAAY;AAAA,EAC9B,CAAC;AACH;AASA,SAAS,YAAY,EAAE,OAAO,UAAU,MAAM,WAAW,GAA2C;AAClG,MAAI,CAAC,SAAS,CAAC,SAAU,QAAO;AAChC,SACE,qBAAC,OAAI,IAAI,EAAE,IAAI,EAAE,GAAG,eAAa,GAAG,UAAU,WAC3C;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,MAAM,KAAK,EAAE,YAAY,SAAS,gBAAgB,YAAY,IAAI;AAAA,QAEjG;AAAA;AAAA,IACH;AAAA,IAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,MAAM,MAAM,KAAK,EAAE,YAAY,QAAQ,GAAG,IAAI,iBAAiB;AAAA,QAE9F;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEO,IAAM,QAA8B,CAAC,UAAU;AACpD,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,cAAc,OAAO,MAAM,MAAM,MAAM,MAAM;AAChE,QAAM,SAAS,UAAU,OAAO,KAAK;AACrC,QAAM,aAAa,MAAM,aAAa,KAAK;AAE3C,MAAI,MAAM,SAAS;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,GAAG,UAAU;AAAA,QAC1B,IAAI,EAAE,GAAG,QAAQ,GAAG,YAAY,SAAS,QAAQ,gBAAgB,UAAU,YAAY,SAAS;AAAA,QAEhG,8BAAC,oBAAiB,OAAO,SAAS,MAAM,SAAS,WAAW,SAAS,GAAG,eAAa,GAAG,UAAU,oBAAoB;AAAA;AAAA,IACxH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW,MAAM;AAAA,MACjB,IAAI,EAAE,GAAG,GAAG,GAAG,QAAQ,GAAG,MAAM,MAAM;AAAA,MACtC,SAAS,MAAM;AAAA,MACf,QAAQ,MAAM;AAAA,MAEd;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM;AAAA,YACb,UAAU,MAAM;AAAA,YAChB,MAAM,MAAM,YAAY;AAAA,YACxB;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,MAAM,cAAc;AAAA,YAChC,OAAO,OAAO,MAAM,UAAU,WAAW,IAAI,OAAO,MAAM,KAAK,IAAK,MAAM,SAAS;AAAA,YACnF,QAAQ,MAAM,eAAe,OAAO,SAAS,aAAa,MAAM,MAAM,MAAM,MAAM;AAAA,YAClF,eAAa,GAAG,UAAU;AAAA,YAEzB,4BAAkB,OAAO,KAAK;AAAA;AAAA,QACjC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}