@12-apps/ui 1.0.0 → 1.3.0

package/src/components/layout/Skeleton/Skeleton.styles.ts

@@ -0,0 +1,114 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { SkeletonProps } from './Skeleton.types';
+
+type SkeletonVariant = NonNullable<SkeletonProps['variant']>;
+type SkeletonIntensity = NonNullable<SkeletonProps['intensity']>;
+
+/** `wave` is our own name for a rectangle that animates; MUI has no such variant. */
+export const muiVariantFor = (
+  variant: SkeletonVariant,
+): 'circular' | 'rectangular' | 'text' => {
+  switch (variant) {
+    case 'circular':
+      return 'circular';
+    case 'rectangular':
+    case 'wave':
+      return 'rectangular';
+    default:
+      return 'text';
+  }
+};
+
+export const muiAnimationFor = (
+  variant: SkeletonVariant,
+  animation: SkeletonProps['animation'],
+) => {
+  if (variant === 'wave') return 'wave';
+  return animation;
+};
+
+export const defaultDimensions = (
+  variant: SkeletonVariant,
+): { width: number | string; height: number | undefined } => {
+  switch (variant) {
+    case 'circular':
+      return { width: 40, height: 40 };
+    case 'rectangular':
+    case 'wave':
+      return { width: '100%', height: 40 };
+    default:
+      return { width: '100%', height: undefined };
+  }
+};
+
+const INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15,
+};
+
+const intensityOpacity = (intensity: SkeletonIntensity): number =>
+  INTENSITY_OPACITY[intensity] ?? INTENSITY_OPACITY.medium;
+
+const glassmorphismStyles = (theme: Theme): CSSObject => ({
+  background: `linear-gradient(135deg,
+        ${alpha(theme.palette.background.paper, 0.8)} 0%,
+        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
+  backdropFilter: 'blur(20px)',
+  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+  boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,
+});
+
+// The sweep is a pseudo-element sliding across the box, so the box has to clip it
+// and establish a positioning context — hence `position`/`overflow` below.
+const shimmerStyles = (theme: Theme): CSSObject => ({
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: `linear-gradient(
+          90deg,
+          transparent,
+          ${alpha(theme.palette.common.white, 0.3)},
+          transparent
+        )`,
+    transform: 'translateX(-100%)',
+    animation: 'shimmer 2s infinite',
+  },
+  '@keyframes shimmer': {
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+interface SkeletonStyleArgs {
+  intensity: SkeletonIntensity;
+  borderRadius?: number | string;
+  glassmorphism: boolean;
+  shimmer: boolean;
+  style?: React.CSSProperties;
+}
+
+export const skeletonStyles = (
+  theme: Theme,
+  { intensity, borderRadius, glassmorphism, shimmer, style }: SkeletonStyleArgs,
+): CSSObject => ({
+  borderRadius,
+  backgroundColor: alpha(
+    theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
+    intensityOpacity(intensity),
+  ),
+  ...(shimmer && {
+    position: 'relative' as const,
+    overflow: 'hidden' as const,
+  }),
+  ...(glassmorphism ? glassmorphismStyles(theme) : {}),
+  ...(shimmer ? shimmerStyles(theme) : {}),
+  ...style,
+});

package/src/components/layout/Skeleton/Skeleton.test.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, Card, CardContent, Stack,Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect,within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 import { Skeleton } from './Skeleton';
 
@@ -153,8 +153,8 @@ export const AccessibilityTest: Story = {
     await step('Verify skeleton is not focusable', async () => {
       const skeleton = canvas.getByTestId('accessible-skeleton');
       await expect(skeleton).not.toHaveAttribute('tabindex');
-      skeleton.focus();
-      await expect(skeleton).not.toHaveFocus();
+      await userEvent.click(skeleton);
+      await waitFor(() => expect(skeleton).not.toHaveFocus());
     });
 
     await step('Verify proper ARIA attributes', async () => {

package/src/components/layout/Skeleton/Skeleton.tsx

@@ -1,166 +1,78 @@
-import { alpha,Box, Skeleton as MuiSkeleton, Stack, useTheme } from '@mui/material';
+import { Box, Skeleton as MuiSkeleton, Stack, useTheme } from '@mui/material';
 import React from 'react';
 
+import { resolveSkeletonProps } from './Skeleton.helpers';
+import {
+  defaultDimensions,
+  muiAnimationFor,
+  muiVariantFor,
+  skeletonStyles,
+} from './Skeleton.styles';
 import type { SkeletonProps } from './Skeleton.types';
 
-export const Skeleton: React.FC<SkeletonProps> = React.memo(
-  ({
-    variant = 'text',
-    animation = 'pulse',
+export const Skeleton: React.FC<SkeletonProps> = React.memo((rawProps) => {
+  const {
+    variant,
+    animation,
     width,
     height,
-    count = 1,
-    spacing = 1,
+    count,
+    spacing,
     borderRadius,
     className,
-    intensity = 'medium',
-    glassmorphism = false,
-    shimmer = false,
+    intensity,
+    glassmorphism,
+    shimmer,
     'data-testid': dataTestId,
     style,
     ...props
-  }) => {
-    const theme = useTheme();
-
-    const getSkeletonVariant = () => {
-      switch (variant) {
-        case 'circular':
-          return 'circular';
-        case 'rectangular':
-          return 'rectangular';
-        case 'wave':
-          return 'rectangular';
-        default:
-          return 'text';
-      }
-    };
-
-    const getSkeletonAnimation = () => {
-      if (variant === 'wave') return 'wave';
-      if (animation === false) return false;
-      return animation;
-    };
-
-    const getDefaultDimensions = () => {
-      switch (variant) {
-        case 'circular':
-          return { width: 40, height: 40 };
-        case 'rectangular':
-        case 'wave':
-          return { width: '100%', height: 40 };
-        default:
-          return { width: '100%', height: undefined };
-      }
-    };
-
-    const getIntensityOpacity = () => {
-      switch (intensity) {
-        case 'low':
-          return 0.11;
-        case 'medium':
-          return 0.13;
-        case 'high':
-          return 0.15;
-        default:
-          return 0.13;
-      }
-    };
-
-    const getGlassmorphismStyles = () => {
-      if (!glassmorphism) return {};
-
-      return {
-        background: `linear-gradient(135deg, 
-        ${alpha(theme.palette.background.paper, 0.8)} 0%, 
-        ${alpha(theme.palette.background.paper, 0.4)} 100%)`,
-        backdropFilter: 'blur(20px)',
-        border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-        boxShadow: `0 8px 32px 0 ${alpha(theme.palette.common.black, 0.1)}`,
-      };
-    };
-
-    const getShimmerStyles = () => {
-      if (!shimmer) return {};
-
-      return {
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0,
-          background: `linear-gradient(
-          90deg,
-          transparent,
-          ${alpha(theme.palette.common.white, 0.3)},
-          transparent
-        )`,
-          transform: 'translateX(-100%)',
-          animation: 'shimmer 2s infinite',
-        },
-        '@keyframes shimmer': {
-          '100%': {
-            transform: 'translateX(100%)',
-          },
-        },
-      };
-    };
-
-    const defaults = getDefaultDimensions();
-    const finalWidth = width ?? defaults.width;
-    const finalHeight = height ?? defaults.height;
-
-    // Handle edge case: count of 0 should render nothing
-    if (count === 0) {
-      return null;
-    }
-
-    const skeletonStyles = {
-      borderRadius,
-      backgroundColor: alpha(
-        theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.text.primary,
-        getIntensityOpacity(),
-      ),
-      ...(shimmer && {
-        position: 'relative' as const,
-        overflow: 'hidden' as const,
-      }),
-      ...getGlassmorphismStyles(),
-      ...getShimmerStyles(),
-      ...style,
-    };
-
-    const singleSkeleton = (
-      <MuiSkeleton
-        variant={getSkeletonVariant()}
-        animation={getSkeletonAnimation()}
-        width={finalWidth}
-        height={finalHeight}
-        sx={skeletonStyles}
-        className={className}
-        data-testid={dataTestId}
-        aria-hidden="true"
-        {...props}
-      />
-    );
-
-    if (count === 1) {
-      return singleSkeleton;
-    }
-
-    return (
-      <Stack spacing={spacing}>
-        {Array.from({ length: count }).map((_, index) => (
-          <Box key={`skeleton-${index}`}>
-            {React.cloneElement(singleSkeleton, {
-              'data-testid': dataTestId ? `${dataTestId}-${index}` : undefined,
-            })}
-          </Box>
-        ))}
-      </Stack>
-    );
-  },
-);
-
-Skeleton.displayName = 'Skeleton';
+  } = resolveSkeletonProps(rawProps);
+  const theme = useTheme();
+
+  const defaults = defaultDimensions(variant);
+  const finalWidth = width ?? defaults.width;
+  const finalHeight = height ?? defaults.height;
+
+  // Handle edge case: count of 0 should render nothing
+  if (count === 0) {
+    return null;
+  }
+
+  const singleSkeleton = (
+    <MuiSkeleton
+      variant={muiVariantFor(variant)}
+      animation={muiAnimationFor(variant, animation)}
+      width={finalWidth}
+      height={finalHeight}
+      sx={skeletonStyles(theme, {
+        intensity,
+        borderRadius,
+        glassmorphism,
+        shimmer,
+        style,
+      })}
+      className={className}
+      data-testid={dataTestId}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+
+  if (count === 1) {
+    return singleSkeleton;
+  }
+
+  return (
+    <Stack spacing={spacing}>
+      {Array.from({ length: count }).map((_, index) => (
+        <Box key={`skeleton-${index}`}>
+          {React.cloneElement(singleSkeleton, {
+            'data-testid': dataTestId ? `${dataTestId}-${index}` : undefined,
+          })}
+        </Box>
+      ))}
+    </Stack>
+  );
+});
+
+Skeleton.displayName = 'Skeleton';

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Close as CloseIcon, Search as SearchIcon } from '@mui/icons-material';
+import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
 import {
   Box,
   Checkbox,

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -0,0 +1,305 @@
+import Home from '@mui/icons-material/Home';
+import MoreHoriz from '@mui/icons-material/MoreHoriz';
+import { alpha, Box, Fade, Link, Tooltip, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
+import type { BreadcrumbItem } from './Breadcrumbs.types';
+
+const BreadcrumbLink = styled(Link, {
+  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
+  ({ theme, size, active, visualStyle }) => ({
+    ...breadcrumbLinkStyles({ theme, size, active, visualStyle }) }),
+);
+
+const BreadcrumbText = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'size' && prop !== 'visualStyle' })<{ size?: string; visualStyle?: string }>(({ theme, size, visualStyle }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(0.5),
+  fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',
+  fontWeight: 600,
+  color: theme.palette.primary.main,
+  padding: theme.spacing(0.5, 0.75),
+  borderRadius: theme.spacing(0.75),
+  position: 'relative',
+
+  ...(visualStyle === 'glass' && {
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`,
+    backdropFilter: 'blur(4px)',
+    border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}` }),
+
+  '& .breadcrumb-icon': {
+    color: theme.palette.primary.main },
+
+  // Mobile responsiveness
+  [theme.breakpoints.down('sm')]: {
+    fontSize: size === 'lg' ? '1rem' : size === 'sm' ? '0.75rem' : '0.875rem',
+    padding: theme.spacing(0.375, 0.5) } }));
+
+// Animated separator wrapper
+
+// Mobile collapsed menu component
+// The list that drops down from the "..." trigger.
+const CollapsedItemsPopover: React.FC<{
+  open: boolean;
+  items: BreadcrumbItem[];
+  size: string;
+  visualStyle?: string;
+  dataTestId?: string;
+  onSelect: () => void;
+}> = ({ open, items, dataTestId, onSelect }) => (
+<Fade in={open}>
+    <Box
+      sx={{
+        background: (theme) =>
+          theme.palette.mode === 'dark'
+            ? 'rgba(17, 24, 39, 0.95)'
+            : 'rgba(255, 255, 255, 0.95)',
+        backdropFilter: 'blur(10px)',
+        borderRadius: 1,
+        boxShadow: 3,
+        p: 1,
+        minWidth: 150 }}
+    >
+      {items.map((item, index) => (
+        <Box
+          key={index}
+          component="a"
+          href={item.href || '#'}
+          onClick={(e) => {
+            onSelect();
+            item.onClick?.(e);
+          }}
+          sx={{
+            display: 'block',
+            px: 2,
+            py: 1,
+            color: 'text.secondary',
+            textDecoration: 'none',
+            borderRadius: 0.5,
+            transition: 'all 0.2s',
+            '&:hover': {
+              backgroundColor: 'action.hover',
+              color: 'primary.main' } }}
+          data-testid={dataTestId ? `${dataTestId}-collapsed-item-${index}` : `breadcrumbs-collapsed-item-${index}`}
+        >
+          {item.label}
+        </Box>
+      ))}
+    </Box>
+  </Fade>
+);
+
+const CollapsedMenu = ({
+  items,
+  size,
+  visualStyle,
+  dataTestId }: {
+  items: BreadcrumbItem[];
+  size: string;
+  visualStyle?: string;
+  dataTestId?: string;
+}) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Tooltip title="Show more" arrow>
+        <BreadcrumbLink
+          onClick={handleClick}
+          size={size}
+          visualStyle={visualStyle}
+          sx={{ cursor: 'pointer' }}
+          data-testid={dataTestId ? `${dataTestId}-collapsed-menu` : 'breadcrumbs-collapsed-menu'}
+        >
+          <MoreHoriz className="breadcrumb-icon" />
+        </BreadcrumbLink>
+      </Tooltip>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          mt: 1,
+          display: open ? 'block' : 'none',
+          zIndex: 1000 }}
+        data-testid={dataTestId ? `${dataTestId}-collapsed-menu-items` : 'breadcrumbs-collapsed-menu-items'}
+      >
+        <CollapsedItemsPopover
+          open={open}
+          items={items}
+          size={size}
+          visualStyle={visualStyle}
+          dataTestId={dataTestId}
+          onSelect={handleClose}
+        />
+      </Box>
+    </>
+  );
+};
+
+// The leading crumb gets a house unless it brings its own icon; everything else
+// shows only what it supplies.
+const crumbIcon = ({
+  item,
+  isFirst,
+  showHomeIcon,
+  iconSize }: {
+  item: BreadcrumbItem;
+  isFirst: boolean;
+  showHomeIcon: boolean;
+  iconSize: 'small' | 'medium';
+}) => {
+  if (isFirst && showHomeIcon && !item.icon) {
+    return <Home className="breadcrumb-icon" fontSize={iconSize} />;
+  }
+
+  if (!item.icon) return null;
+
+  return (
+    <Box component="span" className="breadcrumb-icon" sx={{ display: 'flex', alignItems: 'center' }}>
+      {item.icon}
+    </Box>
+  );
+};
+
+const EllipsisCrumb: React.FC<{ label: string; dataTestId?: string }> = ({
+  label,
+  dataTestId }) => (
+  <Tooltip title="More items" arrow>
+            <Box
+              sx={{
+                px: 1,
+                color: 'text.disabled',
+                cursor: 'default',
+                userSelect: 'none' }}
+              data-testid={dataTestId ? `${dataTestId}-ellipsis` : 'breadcrumbs-ellipsis'}
+            >
+              {label}
+            </Box>
+          </Tooltip>
+);
+
+// The same conditional test id was written at each crumb variant.
+const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `breadcrumbs-${suffix}`;
+
+const ClickableCrumb: React.FC<{
+  item: BreadcrumbItem;
+  index: number;
+  icon: React.ReactNode;
+  size: string;
+  variant: string;
+  isActive: boolean;
+  testId: (suffix: string) => string;
+}> = ({ item, index, icon, size, variant, isActive, testId }) => (
+  <Tooltip title={item.tooltip || item.label} arrow disableHoverListener={!item.tooltip}>
+    <BreadcrumbLink
+      href={item.href || '#'}
+      onClick={item.onClick}
+      size={size}
+      visualStyle={variant}
+      active={isActive}
+      underline="none"
+      aria-label={item.ariaLabel || item.label}
+      data-testid={testId(`link-${index}`)}
+    >
+      {icon}
+      <span>{item.label}</span>
+    </BreadcrumbLink>
+  </Tooltip>
+);
+
+// One crumb: the collapsed-menu stand-in, the ellipsis, the active tail item or
+// a plain link.
+export const BreadcrumbEntry: React.FC<{
+  item: BreadcrumbItem & { isEllipsis?: boolean };
+  index: number;
+  itemCount: number;
+  collapsedItems: BreadcrumbItem[];
+  collapseBehavior: string;
+  separator: React.ReactNode;
+  showHomeIcon: boolean;
+  iconSize: 'small' | 'medium';
+  size: string;
+  variant: string;
+  dataTestId?: string;
+}> = ({
+  item,
+  index,
+  itemCount,
+  collapsedItems,
+  collapseBehavior,
+  separator,
+  showHomeIcon,
+  iconSize,
+  size,
+  variant,
+  dataTestId }) => {
+  const testId = makeTestId(dataTestId);
+  const isLast = index === itemCount - 1;
+  // The tail crumb is the current page unless it is the ellipsis placeholder.
+  const isActive = item.active || (isLast && !item.isEllipsis);
+
+  const isCollapsePoint =
+    index === 1 && collapsedItems.length > 0 && collapseBehavior === 'menu';
+
+  if (isCollapsePoint) {
+    return (
+      <>
+        <CollapsedMenu
+          items={collapsedItems}
+          size={size}
+          visualStyle={variant}
+          dataTestId={dataTestId}
+        />
+        {separator}
+      </>
+    );
+  }
+
+  if (item.isEllipsis) {
+    return <EllipsisCrumb label={item.label} dataTestId={dataTestId} />;
+  }
+
+  const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });
+
+  if (isActive) {
+    return (
+      <BreadcrumbText
+        size={size}
+        visualStyle={variant}
+        aria-current="page"
+        data-testid={testId(`item-${index}`)}
+      >
+        {icon}
+        <span>{item.label}</span>
+      </BreadcrumbText>
+    );
+  }
+
+  return (
+    <ClickableCrumb
+      item={item}
+      index={index}
+      icon={icon}
+      size={size}
+      variant={variant}
+      isActive={isActive}
+      testId={testId}
+    />
+  );
+};

package/src/components/navigation/Breadcrumbs/Breadcrumbs.md

@@ -443,7 +443,8 @@ test('collapses items on mobile', () => {
 #### Scenario 3: Testing with Icons
 
 ```tsx
-import { Home, Settings } from '@mui/icons-material';
+import Home from '@mui/icons-material/Home';
+import Settings from '@mui/icons-material/Settings';
 
 test('renders breadcrumbs with custom icons', () => {
   const items = [