@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-6S7RF73B.js

@@ -0,0 +1,166 @@
+// src/components/layout/ScrollArea/ScrollArea.styles.ts
+import { alpha } from "@mui/material";
+var SCROLLBAR_SIZES = {
+  thin: 8,
+  thick: 16
+};
+var DEFAULT_SCROLLBAR_SIZE = 12;
+var getScrollbarSize = (scrollbarSize) => scrollbarSize ? SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE : DEFAULT_SCROLLBAR_SIZE;
+var getScrollbarColors = ({
+  theme,
+  variant,
+  scrollbarColor,
+  scrollbarTrackColor
+}) => {
+  const defaultScrollbarColor = variant === "glass" ? alpha(theme.palette.primary.main, 0.5) : theme.palette.mode === "dark" ? theme.palette.grey[600] : theme.palette.grey[400];
+  const defaultTrackColor = variant === "glass" ? alpha(theme.palette.background.paper, 0.1) : theme.palette.mode === "dark" ? theme.palette.grey[900] : theme.palette.grey[200];
+  return {
+    scrollbar: scrollbarColor || defaultScrollbarColor,
+    track: scrollbarTrackColor || defaultTrackColor
+  };
+};
+var getOverflowStyle = ({
+  disabled,
+  orientation
+}) => {
+  if (disabled) return { overflow: "hidden" };
+  switch (orientation) {
+    case "horizontal":
+      return {
+        overflow: "hidden",
+        overflowX: "auto",
+        overflowY: "hidden"
+      };
+    case "both":
+      return { overflow: "auto" };
+    default:
+      return {
+        overflow: "hidden",
+        overflowY: "auto",
+        overflowX: "hidden"
+      };
+  }
+};
+var autoHideScrollbarStyles = ({
+  thumbColor,
+  trackColor,
+  size,
+  orientation,
+  shouldShowScrollbar,
+  theme,
+  scrollbarSize
+}) => ({
+  "&::-webkit-scrollbar": {
+    width: orientation !== "horizontal" ? size : "100%",
+    height: orientation !== "vertical" ? size : "100%"
+  },
+  "&::-webkit-scrollbar-track": {
+    background: shouldShowScrollbar ? trackColor : "transparent",
+    borderRadius: size / 2,
+    transition: "background 0.3s ease"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    background: shouldShowScrollbar ? thumbColor : "transparent",
+    borderRadius: size / 2,
+    transition: "background 0.3s ease",
+    "&:hover": {
+      background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
+    }
+  },
+  "&::-webkit-scrollbar-corner": {
+    background: shouldShowScrollbar ? trackColor : "transparent"
+  },
+  // Firefox scrollbar styling
+  scrollbarWidth: shouldShowScrollbar ? scrollbarSize === "thin" ? "thin" : "auto" : "none",
+  scrollbarColor: shouldShowScrollbar ? `${thumbColor} ${trackColor}` : "transparent transparent"
+});
+var VARIANT_SCROLLBARS = {
+  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({
+    "&::-webkit-scrollbar": {
+      width: orientation !== "horizontal" ? size : "100%",
+      height: orientation !== "vertical" ? size : "100%",
+      position: "absolute",
+      right: 0,
+      top: 0
+    },
+    "&::-webkit-scrollbar-track": {
+      background: "transparent",
+      borderRadius: size / 2
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: shouldShowScrollbar ? alpha(colors.scrollbar, 0.5) : "transparent",
+      borderRadius: size / 2,
+      transition: "background 0.3s ease",
+      border: "2px solid transparent",
+      backgroundClip: "padding-box",
+      "&:hover": {
+        background: shouldShowScrollbar ? theme.palette.primary.main : "transparent"
+      }
+    },
+    "&::-webkit-scrollbar-corner": {
+      background: "transparent"
+    },
+    scrollbarWidth: shouldShowScrollbar ? scrollbarSize === "thin" ? "thin" : "auto" : "none",
+    scrollbarColor: shouldShowScrollbar ? `${alpha(colors.scrollbar, 0.5)} transparent` : "transparent transparent"
+  }),
+  // Starts from the shared chrome, then adds what makes it glass: a blurred
+  // track and root, and an inner highlight on the thumb. scrollbar-color (the
+  // Firefox property) keeps the solid palette colour rather than the gradient —
+  // a gradient is not a valid value there, which is why the original picked
+  // colors.scrollbar for it.
+  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {
+    const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;
+    const glassTrackColor = alpha(theme.palette.background.paper, 0.1);
+    const base = autoHideScrollbarStyles({
+      thumbColor: glassThumbColor,
+      trackColor: glassTrackColor,
+      size,
+      orientation,
+      shouldShowScrollbar,
+      theme,
+      scrollbarSize
+    });
+    return {
+      ...base,
+      "&::-webkit-scrollbar-track": {
+        ...base["&::-webkit-scrollbar-track"],
+        backdropFilter: shouldShowScrollbar ? "blur(5px)" : "none"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        ...base["&::-webkit-scrollbar-thumb"],
+        boxShadow: shouldShowScrollbar ? `inset 0 0 6px ${alpha(theme.palette.common.white, 0.3)}` : "none"
+      },
+      scrollbarColor: shouldShowScrollbar ? `${colors.scrollbar} ${glassTrackColor}` : "transparent transparent",
+      backdropFilter: "blur(10px)"
+    };
+  },
+  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => autoHideScrollbarStyles({
+    thumbColor: colors.scrollbar,
+    trackColor: colors.track,
+    size,
+    orientation,
+    shouldShowScrollbar,
+    theme,
+    scrollbarSize
+  })
+};
+var getVariantStyles = ({
+  theme,
+  variant,
+  orientation,
+  scrollbarSize,
+  scrollbarColor,
+  scrollbarTrackColor,
+  shouldShowScrollbar
+}) => {
+  const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });
+  const size = getScrollbarSize(scrollbarSize);
+  const build = VARIANT_SCROLLBARS[variant ?? "default"] ?? VARIANT_SCROLLBARS.default;
+  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });
+};
+
+export {
+  getOverflowStyle,
+  getVariantStyles
+};
+//# sourceMappingURL=chunk-6S7RF73B.js.map

package/dist/chunk-6S7RF73B.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import type { CSSObject, Theme } from '@mui/material';\nimport { alpha } from '@mui/material';\n\nimport type { ScrollAreaProps } from './ScrollArea.types';\n\nconst SCROLLBAR_SIZES: Record<string, number> = {\n  thin: 8,\n  thick: 16,\n};\n\nconst DEFAULT_SCROLLBAR_SIZE = 12;\n\n// thin/thick are the named ends of the scale; anything else takes the default.\nconst getScrollbarSize = (scrollbarSize?: string): number =>\n  scrollbarSize ? (SCROLLBAR_SIZES[scrollbarSize] ?? DEFAULT_SCROLLBAR_SIZE) : DEFAULT_SCROLLBAR_SIZE;\n\nconst getScrollbarColors = ({\n  theme,\n  variant,\n  scrollbarColor,\n  scrollbarTrackColor,\n}: {\n  theme: Theme;\n  variant?: string;\n  scrollbarColor?: string;\n  scrollbarTrackColor?: string;\n}) => {\n  const defaultScrollbarColor =\n    variant === 'glass'\n      ? alpha(theme.palette.primary.main, 0.5)\n      : theme.palette.mode === 'dark'\n        ? theme.palette.grey[600]\n        : theme.palette.grey[400];\n\n  const defaultTrackColor =\n    variant === 'glass'\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.mode === 'dark'\n        ? theme.palette.grey[900]\n        : theme.palette.grey[200];\n\n  return {\n    scrollbar: scrollbarColor || defaultScrollbarColor,\n    track: scrollbarTrackColor || defaultTrackColor,\n  };\n};\n\nexport const getOverflowStyle = ({\n  disabled,\n  orientation,\n}: {\n  disabled?: boolean;\n  orientation?: ScrollAreaProps['orientation'];\n}) => {\n  if (disabled) return { overflow: 'hidden' as const };\n\n  switch (orientation) {\n    case 'horizontal':\n      return {\n        overflow: 'hidden' as const,\n        overflowX: 'auto' as const,\n        overflowY: 'hidden' as const,\n      };\n    case 'both':\n      return { overflow: 'auto' as const };\n    default:\n      return {\n        overflow: 'hidden' as const,\n        overflowY: 'auto' as const,\n        overflowX: 'hidden' as const,\n      };\n  }\n};\n\n// Scrollbar chrome shared by every variant. autoHide fades the thumb out when\n// the area is idle, which is why the colours are parameters rather than read\n// from the variant directly.\nconst autoHideScrollbarStyles = ({\n  thumbColor,\n  trackColor,\n  size,\n  orientation,\n  shouldShowScrollbar,\n  theme,\n  scrollbarSize,\n}: {\n  thumbColor: string;\n  trackColor: string;\n  size: number;\n  orientation?: ScrollAreaProps['orientation'];\n  shouldShowScrollbar: boolean;\n  theme: Theme;\n  scrollbarSize?: string;\n}) => ({\n    '&::-webkit-scrollbar': {\n      width: orientation !== 'horizontal' ? size : '100%',\n      height: orientation !== 'vertical' ? size : '100%',\n    },\n    '&::-webkit-scrollbar-track': {\n      background: shouldShowScrollbar ? trackColor : 'transparent',\n      borderRadius: size / 2,\n      transition: 'background 0.3s ease',\n    },\n    '&::-webkit-scrollbar-thumb': {\n      background: shouldShowScrollbar ? thumbColor : 'transparent',\n      borderRadius: size / 2,\n      transition: 'background 0.3s ease',\n      '&:hover': {\n        background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',\n      },\n    },\n    '&::-webkit-scrollbar-corner': {\n      background: shouldShowScrollbar ? trackColor : 'transparent',\n    },\n    // Firefox scrollbar styling\n    scrollbarWidth: shouldShowScrollbar\n      ? scrollbarSize === 'thin'\n        ? ('thin' as const)\n        : ('auto' as const)\n      : ('none' as const),\n    scrollbarColor: shouldShowScrollbar\n      ? `${thumbColor} ${trackColor}`\n      : 'transparent transparent',\n  });\n\ntype VariantArgs = {\n  theme: Theme;\n  colors: { scrollbar: string; track: string };\n  size: number;\n  orientation?: ScrollAreaProps['orientation'];\n  shouldShowScrollbar: boolean;\n  scrollbarSize?: string;\n};\n\n// One entry per scrollbar look. overlay floats above the content, glass tints\n// it, and the default delegates to the shared auto-hide chrome.\nconst VARIANT_SCROLLBARS: Record<string, (args: VariantArgs) => CSSObject> = {\n  overlay: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => ({\n          '&::-webkit-scrollbar': {\n            width: orientation !== 'horizontal' ? size : '100%',\n            height: orientation !== 'vertical' ? size : '100%',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n          },\n          '&::-webkit-scrollbar-track': {\n            background: 'transparent',\n            borderRadius: size / 2,\n          },\n          '&::-webkit-scrollbar-thumb': {\n            background: shouldShowScrollbar\n              ? alpha(colors.scrollbar, 0.5)\n              : 'transparent',\n            borderRadius: size / 2,\n            transition: 'background 0.3s ease',\n            border: '2px solid transparent',\n            backgroundClip: 'padding-box',\n            '&:hover': {\n              background: shouldShowScrollbar ? theme.palette.primary.main : 'transparent',\n            },\n          },\n          '&::-webkit-scrollbar-corner': {\n            background: 'transparent',\n          },\n          scrollbarWidth: shouldShowScrollbar\n            ? scrollbarSize === 'thin'\n              ? ('thin' as const)\n              : ('auto' as const)\n            : ('none' as const),\n          scrollbarColor: shouldShowScrollbar\n            ? `${alpha(colors.scrollbar, 0.5)} transparent`\n            : 'transparent transparent',\n        }),\n\n  // Starts from the shared chrome, then adds what makes it glass: a blurred\n  // track and root, and an inner highlight on the thumb. scrollbar-color (the\n  // Firefox property) keeps the solid palette colour rather than the gradient —\n  // a gradient is not a valid value there, which is why the original picked\n  // colors.scrollbar for it.\n  glass: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) => {\n    const glassThumbColor = `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.3)}, ${alpha(theme.palette.secondary.main, 0.3)})`;\n    const glassTrackColor = alpha(theme.palette.background.paper, 0.1);\n\n    const base = autoHideScrollbarStyles({\n      thumbColor: glassThumbColor,\n      trackColor: glassTrackColor,\n      size,\n      orientation,\n      shouldShowScrollbar,\n      theme,\n      scrollbarSize,\n    });\n\n    return {\n      ...base,\n      '&::-webkit-scrollbar-track': {\n        ...(base['&::-webkit-scrollbar-track'] as object),\n        backdropFilter: shouldShowScrollbar ? 'blur(5px)' : 'none',\n      },\n      '&::-webkit-scrollbar-thumb': {\n        ...(base['&::-webkit-scrollbar-thumb'] as object),\n        boxShadow: shouldShowScrollbar\n          ? `inset 0 0 6px ${alpha(theme.palette.common.white, 0.3)}`\n          : 'none',\n      },\n      scrollbarColor: shouldShowScrollbar\n        ? `${colors.scrollbar} ${glassTrackColor}`\n        : 'transparent transparent',\n      backdropFilter: 'blur(10px)',\n    };\n  },\n\n  default: ({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize }) =>\n    autoHideScrollbarStyles({\n      thumbColor: colors.scrollbar,\n      trackColor: colors.track,\n      size,\n      orientation,\n      shouldShowScrollbar,\n      theme,\n      scrollbarSize,\n    }),\n};\n\nexport const getVariantStyles = ({\n  theme,\n  variant,\n  orientation,\n  scrollbarSize,\n  scrollbarColor,\n  scrollbarTrackColor,\n  shouldShowScrollbar,\n}: {\n  theme: Theme;\n  variant?: string;\n  orientation?: ScrollAreaProps['orientation'];\n  scrollbarSize?: string;\n  scrollbarColor?: string;\n  scrollbarTrackColor?: string;\n  shouldShowScrollbar: boolean;\n}) => {\n  const colors = getScrollbarColors({ theme, variant, scrollbarColor, scrollbarTrackColor });\n  const size = getScrollbarSize(scrollbarSize);\n\n  const build = VARIANT_SCROLLBARS[variant ?? 'default'] ?? VARIANT_SCROLLBARS.default!;\n\n  return build({ theme, colors, size, orientation, shouldShowScrollbar, scrollbarSize });\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-6VRUI5JF.js

@@ -0,0 +1,175 @@
+import {
+  BreadcrumbEntry
+} from "./chunk-MZXZIOSF.js";
+import {
+  breadcrumbsBarStyles,
+  sizeIconMap
+} from "./chunk-V3QBKFKP.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import {
+  Box,
+  Breadcrumbs as MuiBreadcrumbs,
+  useMediaQuery,
+  useTheme
+} from "@mui/material";
+import { styled } from "@mui/material";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled(MuiBreadcrumbs, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "color" && prop !== "visualStyle" && prop !== "elevation"
+})(
+  ({ theme, size, color, visualStyle, elevation = 0 }) => ({
+    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation })
+  })
+);
+var AnimatedSeparator = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.6,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  }
+}));
+var getSeparator = (separatorType) => {
+  const separatorContent = (() => {
+    switch (separatorType) {
+      case "slash":
+        return "/";
+      case "arrow":
+        return /* @__PURE__ */ jsx(NavigateNext, { fontSize: "small" });
+      case "chevron":
+        return /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" });
+      case "dot":
+        return "\u2022";
+      case "pipe":
+        return "|";
+      default:
+        return /* @__PURE__ */ jsx(ArrowForwardIos, { sx: { fontSize: 12 } });
+    }
+  })();
+  return /* @__PURE__ */ jsx(AnimatedSeparator, { children: separatorContent });
+};
+var collapseItems = ({
+  items,
+  effectiveMaxItems,
+  collapseBehavior
+}) => {
+  if (items.length <= effectiveMaxItems) {
+    return { displayItems: items, collapsedItems: [] };
+  }
+  if (collapseBehavior === "menu") {
+    const firstItem = items[0];
+    const tail = items.slice(-(effectiveMaxItems - 2));
+    return {
+      displayItems: firstItem ? [firstItem, ...tail] : tail,
+      collapsedItems: items.slice(1, -(effectiveMaxItems - 2))
+    };
+  }
+  if (collapseBehavior === "ellipsis") {
+    const half = Math.floor(effectiveMaxItems / 2);
+    return {
+      displayItems: [
+        ...items.slice(0, half),
+        { label: "...", href: "#", isEllipsis: true },
+        ...items.slice(-half)
+      ],
+      collapsedItems: []
+    };
+  }
+  return { displayItems: items, collapsedItems: [] };
+};
+var BREADCRUMBS_DEFAULTS = {
+  variant: "default",
+  separatorType: "default",
+  maxItems: 8,
+  showHomeIcon: true,
+  size: "md",
+  color: "neutral",
+  elevation: 1,
+  collapseBehavior: "menu",
+  mobileMaxItems: 3
+};
+var resolveProps = (props) => ({
+  ...BREADCRUMBS_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var Breadcrumbs = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      separatorType,
+      items,
+      separator,
+      maxItems,
+      showHomeIcon,
+      size,
+      color,
+      elevation,
+      collapseBehavior,
+      mobileMaxItems,
+      ariaLabel,
+      copy,
+      dataTestId,
+      ...props
+    } = resolveProps(componentProps);
+    const theme = useTheme();
+    const finalSeparator = separator || getSeparator(separatorType);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const iconSize = sizeIconMap[size];
+    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;
+    const shouldCollapse = items.length > effectiveMaxItems;
+    const { displayItems, collapsedItems } = collapseItems({
+      items,
+      effectiveMaxItems,
+      collapseBehavior
+    });
+    return /* @__PURE__ */ jsx(
+      StyledBreadcrumbs,
+      {
+        ref,
+        separator: finalSeparator,
+        maxItems: shouldCollapse ? void 0 : effectiveMaxItems,
+        size,
+        color,
+        visualStyle: variant,
+        elevation,
+        "aria-label": ariaLabel || "breadcrumb navigation",
+        role: "navigation",
+        "data-testid": dataTestId || "breadcrumbs",
+        ...props,
+        children: displayItems.map((item, index) => /* @__PURE__ */ jsx(
+          BreadcrumbEntry,
+          {
+            copy,
+            item,
+            index,
+            itemCount: displayItems.length,
+            collapsedItems,
+            collapseBehavior,
+            separator: finalSeparator,
+            showHomeIcon,
+            iconSize,
+            size,
+            variant,
+            dataTestId
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=chunk-6VRUI5JF.js.map

package/dist/chunk-6VRUI5JF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import ArrowForwardIos from '@mui/icons-material/ArrowForwardIos';\nimport ChevronRight from '@mui/icons-material/ChevronRight';\nimport NavigateNext from '@mui/icons-material/NavigateNext';\nimport {\n  Box,\n  Breadcrumbs as MuiBreadcrumbs,\n  useMediaQuery,\n  useTheme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport {\n  breadcrumbsBarStyles,\n  sizeIconMap } from './Breadcrumbs.styles';\nimport { BreadcrumbEntry } from './BreadcrumbEntry';\nimport type { BreadcrumbItem,BreadcrumbsProps } from './Breadcrumbs.types';\n\n// Animation keyframes\nconst StyledBreadcrumbs = styled(MuiBreadcrumbs, {\n  shouldForwardProp: (prop) =>\n    prop !== 'size' && prop !== 'color' && prop !== 'visualStyle' && prop !== 'elevation' })<{ size?: string; color?: string; visualStyle?: string; elevation?: number }>(\n  ({ theme, size, color, visualStyle, elevation = 0 }) => ({\n    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation }) }),\n);\n\nconst AnimatedSeparator = styled(Box)(() => ({\n  display: 'flex',\n  alignItems: 'center',\n  opacity: 0.6,\n  transition: 'all 0.2s ease',\n\n  '&:hover': {\n    opacity: 1,\n    transform: 'scale(1.1)' } }));\n\nconst getSeparator = (separatorType: string) => {\n  const separatorContent = (() => {\n    switch (separatorType) {\n      case 'slash':\n        return '/';\n      case 'arrow':\n        return <NavigateNext fontSize=\"small\" />;\n      case 'chevron':\n        return <ChevronRight fontSize=\"small\" />;\n      case 'dot':\n        return '•';\n      case 'pipe':\n        return '|';\n      default:\n        return <ArrowForwardIos sx={{ fontSize: 12 }} />;\n    }\n  })();\n\n  return <AnimatedSeparator>{separatorContent}</AnimatedSeparator>;\n};\n\ntype DisplayItem = BreadcrumbItem & { isEllipsis?: boolean };\n\n// Long trails either hide their middle behind a menu or replace it with an\n// ellipsis crumb; short ones pass straight through.\nconst collapseItems = ({\n  items,\n  effectiveMaxItems,\n  collapseBehavior }: {\n  items: BreadcrumbItem[];\n  effectiveMaxItems: number;\n  collapseBehavior: string;\n}): { displayItems: DisplayItem[]; collapsedItems: BreadcrumbItem[] } => {\n  if (items.length <= effectiveMaxItems) {\n    return { displayItems: items, collapsedItems: [] };\n  }\n\n  if (collapseBehavior === 'menu') {\n    const firstItem = items[0];\n    const tail = items.slice(-(effectiveMaxItems - 2));\n\n    return {\n      displayItems: firstItem ? [firstItem, ...tail] : tail,\n      collapsedItems: items.slice(1, -(effectiveMaxItems - 2)) };\n  }\n\n  if (collapseBehavior === 'ellipsis') {\n    const half = Math.floor(effectiveMaxItems / 2);\n\n    return {\n      displayItems: [\n        ...items.slice(0, half),\n        { label: '...', href: '#', isEllipsis: true },\n        ...items.slice(-half),\n      ],\n      collapsedItems: [] };\n  }\n\n  return { displayItems: items, collapsedItems: [] };\n};\n\ntype BreadcrumbsDefaultedKeys =\n  | 'variant'\n  | 'separatorType'\n  | 'maxItems'\n  | 'showHomeIcon'\n  | 'size'\n  | 'color'\n  | 'elevation'\n  | 'collapseBehavior'\n  | 'mobileMaxItems';\n\ntype ResolvedBreadcrumbsProps = BreadcrumbsProps &\n  Required<Pick<BreadcrumbsProps, BreadcrumbsDefaultedKeys>>;\n\nconst BREADCRUMBS_DEFAULTS: Pick<BreadcrumbsProps, BreadcrumbsDefaultedKeys> = {\n  variant: 'default',\n  separatorType: 'default',\n  maxItems: 8,\n  showHomeIcon: true,\n  size: 'md',\n  color: 'neutral',\n  elevation: 1,\n  collapseBehavior: 'menu',\n  mobileMaxItems: 3 };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}` still\n// falls back to the default exactly as a destructuring default would. Applied as\n// a merge rather than destructuring defaults, which would otherwise put nine\n// branches into the component's own complexity budget.\nconst resolveProps = (props: BreadcrumbsProps): ResolvedBreadcrumbsProps =>\n  ({\n    ...BREADCRUMBS_DEFAULTS,\n    ...(Object.fromEntries(\n      Object.entries(props).filter(([, value]) => value !== undefined),\n    ) as Partial<BreadcrumbsProps>) }) as ResolvedBreadcrumbsProps;\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  (componentProps, ref) => {\n    const {\n      variant,\n      separatorType,\n      items,\n      separator,\n      maxItems,\n      showHomeIcon,\n      size,\n      color,\n      elevation,\n      collapseBehavior,\n      mobileMaxItems,\n      ariaLabel,\n      copy,\n      dataTestId,\n      ...props\n    } = resolveProps(componentProps);\n    const theme = useTheme();\n    // separatorType picks a built-in separator; an explicit `separator` wins.\n    // This was computed before but never passed on, so separatorType had no\n    // effect on what rendered.\n    const finalSeparator = separator || getSeparator(separatorType);\n    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));\n    const iconSize = sizeIconMap[size];\n\n    // Handle mobile collapsing\n    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;\n    const shouldCollapse = items.length > effectiveMaxItems;\n\n    const { displayItems, collapsedItems } = collapseItems({\n      items,\n      effectiveMaxItems,\n      collapseBehavior });\n\n    return (\n      <StyledBreadcrumbs\n        ref={ref}\n        separator={finalSeparator}\n        maxItems={shouldCollapse ? undefined : effectiveMaxItems}\n        size={size}\n        color={color}\n        visualStyle={variant}\n        elevation={elevation}\n        aria-label={ariaLabel || 'breadcrumb navigation'}\n        role=\"navigation\"\n        data-testid={dataTestId || 'breadcrumbs'}\n        {...props}\n      >\n        {displayItems.map((item, index) => (\n          <BreadcrumbEntry\n            copy={copy}\n            key={index}\n            item={item}\n            index={index}\n            itemCount={displayItems.length}\n            collapsedItems={collapsedItems}\n            collapseBehavior={collapseBehavior}\n            separator={finalSeparator}\n            showHomeIcon={showHomeIcon}\n            iconSize={iconSize}\n            size={size}\n            variant={variant}\n            dataTestId={dataTestId}\n          />\n        ))}\n      </StyledBreadcrumbs>\n    );\n  },\n);\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"mappings":"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","names":[]}

package/dist/chunk-6VTLJWCK.js

@@ -0,0 +1,249 @@
+import {
+  buttonRadioSx,
+  formLabelSx,
+  radioCardSx,
+  segmentButtonSx,
+  segmentContainerSx
+} from "./chunk-Z6FXJ44X.js";
+
+// src/components/form/RadioGroup/RadioGroup.variants.tsx
+import {
+  Box,
+  ButtonBase,
+  Card,
+  CardContent,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup as MuiRadioGroup,
+  Typography
+} from "@mui/material";
+import { styled } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledFormLabel = styled(FormLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  ...formLabelSx(theme, glass, error)
+}));
+var StyledRadioCard = styled(Card, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "glow", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));
+var StyledButtonRadio = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));
+var StyledSegmentContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["glass", "customColor"].includes(prop)
+})(({ theme, glass, customColor }) => ({
+  ...segmentContainerSx(theme, glass, customColor)
+}));
+var StyledSegmentButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "customSize", "animated"].includes(prop)
+})(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var muiRadioColor = (color) => color === "danger" ? "error" : color;
+var OptionLabel = ({
+  option,
+  testIdValue
+}) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, "data-testid": testIdValue, children: [
+  option.icon,
+  option.label
+] });
+var DefaultRadios = ({
+  options,
+  value,
+  color,
+  direction,
+  showDescriptions,
+  dataTestId,
+  groupRef,
+  onChange,
+  rest
+}) => /* @__PURE__ */ jsx(
+  MuiRadioGroup,
+  {
+    ref: groupRef,
+    value,
+    onChange,
+    ...rest,
+    sx: { flexDirection: direction, gap: 1 },
+    "data-testid": testId(dataTestId, "group"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `option-${index}`),
+        control: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            color: muiRadioColor(color),
+            "data-testid": testId(dataTestId, `radio-${index}`)
+          }
+        ),
+        label: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            "data-testid": testId(dataTestId, `label-${index}`),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { children: option.label }),
+                option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description })
+              ] })
+            ]
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var CardBody = ({
+  option,
+  index,
+  isSelected,
+  color,
+  showDescriptions,
+  dataTestId
+}) => /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+  option.icon && /* @__PURE__ */ jsx(Box, { sx: { mt: 0.5, color: isSelected ? `${color}.main` : "text.secondary" }, children: option.icon }),
+  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "subtitle1",
+        fontWeight: 600,
+        color: isSelected ? `${color}.main` : "text.primary",
+        "data-testid": testId(dataTestId, `label-${index}`),
+        children: option.label
+      }
+    ),
+    option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: option.description })
+  ] })
+] }) });
+var CardRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  showDescriptions,
+  glass,
+  gradient,
+  glow,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 2 },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledRadioCard,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        glow,
+        customSize: size,
+        animated: true,
+        "data-testid": testId(dataTestId, `card-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(
+          CardBody,
+          {
+            option,
+            index,
+            isSelected: value === option.value,
+            color,
+            showDescriptions,
+            dataTestId
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var ButtonRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  glass,
+  gradient,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 1, flexWrap: "wrap" },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledButtonRadio,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `button-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var SegmentRadios = ({
+  options,
+  value,
+  color,
+  size,
+  glass,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  StyledSegmentContainer,
+  {
+    glass,
+    customColor: color,
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledSegmentButton,
+      {
+        selected: value === option.value,
+        customColor: color,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `segment-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var GroupLabel = ({ glass, error, dataTestId, children }) => /* @__PURE__ */ jsx(StyledFormLabel, { glass, error, "data-testid": testId(dataTestId, "label"), children });
+
+export {
+  testId,
+  OptionLabel,
+  DefaultRadios,
+  CardBody,
+  CardRadios,
+  ButtonRadios,
+  SegmentRadios,
+  GroupLabel
+};
+//# sourceMappingURL=chunk-6VTLJWCK.js.map

package/dist/chunk-6VTLJWCK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/RadioGroup/RadioGroup.variants.tsx"],"sourcesContent":["import {\n  Box,\n  ButtonBase,\n  Card,\n  CardContent,\n  FormControlLabel,\n  FormLabel,\n  Radio,\n  RadioGroup as MuiRadioGroup,\n  Typography,\n} from '@mui/material';\nimport { styled } from '@mui/material';\nimport React from 'react';\n\nimport {\n  buttonRadioSx,\n  formLabelSx,\n  radioCardSx,\n  segmentButtonSx,\n  segmentContainerSx,\n} from './RadioGroup.styles';\nimport type { SurfaceFlags } from './RadioGroup.styles';\nimport type { RadioOption, RadioGroupProps } from './RadioGroup.types';\n\nconst StyledFormLabel = styled(FormLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string),\n})<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  ...formLabelSx(theme, glass, error),\n}));\n\nconst StyledRadioCard = styled(Card, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'glass', 'gradient', 'glow', 'customSize', 'animated'].includes(\n      prop as string,\n    ),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));\n\nconst StyledButtonRadio = styled(ButtonBase, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'glass', 'gradient', 'customSize', 'animated'].includes(\n      prop as string,\n    ),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));\n\nconst StyledSegmentContainer = styled(Box, {\n  shouldForwardProp: (prop) => !['glass', 'customColor'].includes(prop as string),\n})<{ glass?: boolean; customColor?: string }>(({ theme, glass, customColor }) => ({\n  ...segmentContainerSx(theme, glass, customColor),\n}));\n\nconst StyledSegmentButton = styled(ButtonBase, {\n  shouldForwardProp: (prop) =>\n    !['selected', 'customColor', 'customSize', 'animated'].includes(prop as string),\n})<SurfaceFlags>(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));\n\n\nexport interface VariantProps {\n  options: RadioOption[];\n  value?: unknown;\n  color: NonNullable<RadioGroupProps['color']>;\n  size: NonNullable<RadioGroupProps['size']>;\n  direction: NonNullable<RadioGroupProps['direction']>;\n  showDescriptions: boolean;\n  glass: boolean;\n  gradient: boolean;\n  glow: boolean;\n  dataTestId?: string;\n  onSelect: (option: RadioOption) => void;\n  /** Only the default variant hands its ref and extra props to MUI's group. */\n  groupRef?: React.Ref<HTMLDivElement>;\n  onChange?: RadioGroupProps['onChange'];\n  rest?: Record<string, unknown>;\n}\n\n/** `${dataTestId}-${suffix}`, or nothing when the caller supplied no id. */\nexport const testId = (base: string | undefined, suffix: string) =>\n  base ? `${base}-${suffix}` : undefined;\n\n/**\n * MUI's Radio has no `danger`; this component's palette calls the error colour\n * that, so the name is translated at the boundary.\n */\nconst muiRadioColor = (color: string) =>\n  color === 'danger'\n    ? 'error'\n    : (color as 'primary' | 'secondary' | 'success' | 'warning' | 'error');\n\n/** An option's icon beside its label, the run every variant but `cards` uses. */\nconst OptionLabel: React.FC<{ option: RadioOption; testIdValue?: string }> = ({\n  option,\n  testIdValue,\n}) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }} data-testid={testIdValue}>\n    {option.icon}\n    {option.label}\n  </Box>\n);\n\nexport const DefaultRadios: React.FC<VariantProps> = ({\n  options,\n  value,\n  color,\n  direction,\n  showDescriptions,\n  dataTestId,\n  groupRef,\n  onChange,\n  rest,\n}) => (\n  <MuiRadioGroup\n    ref={groupRef}\n    value={value}\n    onChange={onChange}\n    {...rest}\n    sx={{ flexDirection: direction, gap: 1 }}\n    data-testid={testId(dataTestId, 'group')}\n  >\n    {options.map((option, index) => (\n      <FormControlLabel\n        key={option.value}\n        value={option.value}\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `option-${index}`)}\n        control={\n          <Radio\n            color={muiRadioColor(color)}\n            data-testid={testId(dataTestId, `radio-${index}`)}\n          />\n        }\n        label={\n          <Box\n            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}\n            data-testid={testId(dataTestId, `label-${index}`)}\n          >\n            {option.icon}\n            <Box>\n              <Typography>{option.label}</Typography>\n              {option.description && showDescriptions && (\n                <Typography variant=\"caption\" color=\"text.secondary\">\n                  {option.description}\n                </Typography>\n              )}\n            </Box>\n          </Box>\n        }\n      />\n    ))}\n  </MuiRadioGroup>\n);\n\nexport interface CardBodyProps {\n  option: RadioOption;\n  index: number;\n  isSelected: boolean;\n  color: string;\n  showDescriptions: boolean;\n  dataTestId?: string;\n}\n\n/** A card's contents: the icon, the label, and the optional description under it. */\nexport const CardBody: React.FC<CardBodyProps> = ({\n  option,\n  index,\n  isSelected,\n  color,\n  showDescriptions,\n  dataTestId,\n}) => (\n  <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>\n    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2 }}>\n      {option.icon && (\n        <Box sx={{ mt: 0.5, color: isSelected ? `${color}.main` : 'text.secondary' }}>\n          {option.icon}\n        </Box>\n      )}\n      <Box sx={{ flex: 1 }}>\n        <Typography\n          variant=\"subtitle1\"\n          fontWeight={600}\n          color={isSelected ? `${color}.main` : 'text.primary'}\n          data-testid={testId(dataTestId, `label-${index}`)}\n        >\n          {option.label}\n        </Typography>\n        {option.description && showDescriptions && (\n          <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mt: 0.5 }}>\n            {option.description}\n          </Typography>\n        )}\n      </Box>\n    </Box>\n  </CardContent>\n);\n\nexport { OptionLabel };\n\nexport const CardRadios: React.FC<VariantProps> = ({\n  options, value, color, size, direction, showDescriptions, glass, gradient, glow, dataTestId, onSelect,\n}) => (\n  <Box\n    sx={{ display: 'flex', flexDirection: direction, gap: 2 }}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledRadioCard\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        glass={glass}\n        gradient={gradient}\n        glow={glow}\n        customSize={size}\n        animated\n        data-testid={testId(dataTestId, `card-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <CardBody\n          option={option}\n          index={index}\n          isSelected={value === option.value}\n          color={color}\n          showDescriptions={showDescriptions}\n          dataTestId={dataTestId}\n        />\n      </StyledRadioCard>\n    ))}\n  </Box>\n);\n\nexport const ButtonRadios: React.FC<VariantProps> = ({\n  options, value, color, size, direction, glass, gradient, dataTestId, onSelect,\n}) => (\n  <Box\n    sx={{ display: 'flex', flexDirection: direction, gap: 1, flexWrap: 'wrap' }}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledButtonRadio\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        glass={glass}\n        gradient={gradient}\n        customSize={size}\n        animated\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `button-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <OptionLabel option={option} testIdValue={testId(dataTestId, `label-${index}`)} />\n      </StyledButtonRadio>\n    ))}\n  </Box>\n);\n\nexport const SegmentRadios: React.FC<VariantProps> = ({\n  options, value, color, size, glass, dataTestId, onSelect,\n}) => (\n  <StyledSegmentContainer\n    glass={glass}\n    customColor={color}\n    data-testid={testId(dataTestId, 'container')}\n  >\n    {options.map((option, index) => (\n      <StyledSegmentButton\n        key={option.value}\n        selected={value === option.value}\n        customColor={color}\n        customSize={size}\n        animated\n        disabled={option.disabled}\n        data-testid={testId(dataTestId, `segment-${index}`)}\n        onClick={() => onSelect(option)}\n      >\n        <OptionLabel option={option} testIdValue={testId(dataTestId, `label-${index}`)} />\n      </StyledSegmentButton>\n    ))}\n  </StyledSegmentContainer>\n);\n\n/** The group's own label, which can carry the glass treatment independently. */\nexport const GroupLabel: React.FC<{\n  glass?: boolean;\n  error?: boolean;\n  dataTestId?: string;\n  children: React.ReactNode;\n}> = ({ glass, error, dataTestId, children }) => (\n  <StyledFormLabel glass={glass} error={error} data-testid={testId(dataTestId, 'label')}>\n    {children}\n  </StyledFormLabel>\n);\n"],"mappings":"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","names":[]}