@12-apps/ui 1.0.0 → 1.3.0

package/src/components/navigation/Pagination/Pagination.tsx

@@ -1,352 +1,217 @@
-import { FirstPage, LastPage, NavigateBefore, NavigateNext } from '@mui/icons-material';
+import FirstPage from '@mui/icons-material/FirstPage';
+import LastPage from '@mui/icons-material/LastPage';
+import NavigateBefore from '@mui/icons-material/NavigateBefore';
+import NavigateNext from '@mui/icons-material/NavigateNext';
 import type { PaginationRenderItemParams } from '@mui/material';
 import {
-  alpha,
   Box,
-  FormControl,
-  MenuItem,
   Pagination as MuiPagination,
-  PaginationItem,
-  Select,
-  Typography,
-} from '@mui/material';
+  PaginationItem } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import type { ResolvedPaginationProps } from './Pagination.helpers';
+import { makeTestId, muiSizeFor, resolvePaginationProps } from './Pagination.helpers';
+import { paginationStyles } from './Pagination.styles';
 import type { PaginationProps } from './Pagination.types';
+import { ItemsPerPageSelect, PageInfo } from './PaginationParts';
 
 const StyledPagination = styled(MuiPagination, {
-  shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string),
-})<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({
-  '& .MuiPagination-ul': {
-    gap: customVariant === 'minimal' ? theme.spacing(0.5) : theme.spacing(1),
-  },
-
-  '& .MuiPaginationItem-root': {
-    transition: 'all 0.2s ease',
-    fontWeight: 500,
-
-    ...(customSize === 'sm' && {
-      fontSize: '0.875rem',
-      minWidth: 28,
-      height: 28,
-      padding: theme.spacing(0.25, 0.5),
-    }),
-
-    ...(customSize === 'lg' && {
-      fontSize: '1.125rem',
-      minWidth: 44,
-      height: 44,
-      padding: theme.spacing(1, 1.5),
-    }),
-
-    // Default variant (flat design)
-    ...(customVariant === 'default' && {
-      borderRadius: theme.spacing(1),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: 'translateY(-1px)',
-        boxShadow: `0 2px 8px ${alpha(theme.palette.primary.main, 0.15)}`,
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
-        '&:hover': {
-          backgroundColor: theme.palette.primary.dark,
-          transform: 'translateY(-2px)',
-        },
-      },
-    }),
-
-    // Rounded variant
-    ...(customVariant === 'rounded' && {
-      borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
-      width: customSize === 'sm' ? 28 : customSize === 'lg' ? 44 : 36,
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.08),
-        transform: 'scale(1.1)',
-        boxShadow: `0 4px 16px ${alpha(theme.palette.primary.main, 0.2)}`,
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-        transform: 'scale(1.05)',
-        boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.3)}`,
-        '&:hover': {
-          backgroundColor: theme.palette.primary.dark,
-          transform: 'scale(1.15)',
-        },
-      },
-    }),
-
-    // Dots variant (minimal circular dots)
-    ...(customVariant === 'dots' && {
-      borderRadius: '50%',
-      minWidth: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      width: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      height: customSize === 'sm' ? 8 : customSize === 'lg' ? 12 : 10,
-      fontSize: 0,
-      backgroundColor: alpha(theme.palette.text.secondary, 0.3),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.5),
-        transform: 'scale(1.3)',
-      },
-      '&.Mui-selected': {
-        backgroundColor: theme.palette.primary.main,
-        transform: 'scale(1.2)',
-        '&:hover': {
-          backgroundColor: theme.palette.primary.dark,
-          transform: 'scale(1.4)',
-        },
-      },
-      '&.MuiPaginationItem-previousNext, &.MuiPaginationItem-firstLast': {
-        display: 'none',
-      },
-    }),
-
-    // Minimal variant (text-only)
-    ...(customVariant === 'minimal' && {
-      borderRadius: theme.spacing(0.5),
-      backgroundColor: 'transparent',
-      color: theme.palette.text.secondary,
-      padding: theme.spacing(0.5, 1),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primary.main, 0.04),
-        color: theme.palette.primary.main,
-      },
-      '&.Mui-selected': {
-        backgroundColor: 'transparent',
-        color: theme.palette.primary.main,
-        fontWeight: 600,
-        position: 'relative',
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          bottom: 0,
-          left: '50%',
-          transform: 'translateX(-50%)',
-          width: '60%',
-          height: 2,
-          backgroundColor: theme.palette.primary.main,
-          borderRadius: 1,
-        },
-      },
-    }),
-  },
-
-  // Hide ellipsis for dots variant
-  ...(customVariant === 'dots' && {
-    '& .MuiPaginationItem-ellipsis': {
-      display: 'none',
-    },
-  }),
-}));
-
-const PageInfoContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(2),
-  marginLeft: theme.spacing(2),
-}));
-
-const ItemsPerPageContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(1),
-  marginRight: theme.spacing(2),
-}));
+  shouldForwardProp: (prop) => !['customVariant', 'customSize'].includes(prop as string) })<{ customVariant?: string; customSize?: string }>(({ theme, customVariant, customSize }) => ({
+  ...paginationStyles({ theme, customVariant, customSize }) }));
 
 const PaginationContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   flexWrap: 'wrap',
-  gap: theme.spacing(1),
-}));
+  gap: theme.spacing(1) }));
+
+// Arrow items get a short suffix, pages carry their number. This was two
+// parallel switch statements that differed only in whether the prefix came from
+// dataTestId or the literal 'pagination'.
+const ITEM_TEST_SUFFIX: Record<string, string> = {
+  first: 'first',
+  last: 'last',
+  previous: 'prev',
+  next: 'next' };
+
+const paginationItemTestId = (
+  base: string | undefined,
+  item: PaginationRenderItemParams,
+): string | undefined => {
+  const prefix = base ?? 'pagination';
+
+  if (item.type === 'page') return `${prefix}-page-${item.page}`;
+
+  const suffix = ITEM_TEST_SUFFIX[item.type];
+  return suffix ? `${prefix}-${suffix}` : undefined;
+};
+
+// A dots-variant page renders as a bare dot; everything else uses MUI's item
+// with our own arrow icons.
+const renderPaginationItem = ({
+  item,
+  variant,
+  size: _size,
+  dataTestId,
+  icons }: {
+  item: PaginationRenderItemParams;
+  variant: string;
+  size: string;
+  dataTestId?: string;
+  icons: {
+    firstIcon?: React.ReactNode;
+    lastIcon?: React.ReactNode;
+    previousIcon?: React.ReactNode;
+    nextIcon?: React.ReactNode;
+  };
+}) => {
+  const { firstIcon, lastIcon, previousIcon, nextIcon } = icons;
+
+    const itemTestId = paginationItemTestId(dataTestId, item);
+
+    if (variant === 'dots') {
+      if (item.type === 'page') {
+        return (
+          <PaginationItem
+            {...item}
+            data-testid={itemTestId}
+            sx={{
+              '&.MuiPaginationItem-page': {
+                fontSize: 0,
+                overflow: 'hidden',
+                textIndent: '-9999px' } }}
+          />
+        );
+      }
+      return null; // Hide navigation buttons for dots
+    }
+
+    // Map custom icons to components
+    const iconMap: Record<string, React.ReactElement> = {
+      first: firstIcon as React.ReactElement,
+      last: lastIcon as React.ReactElement,
+      previous: previousIcon as React.ReactElement,
+      next: nextIcon as React.ReactElement };
+
+    return (
+      <PaginationItem
+        {...item}
+        data-testid={itemTestId}
+        components={{
+          first: () => iconMap.first || <FirstPage />,
+          last: () => iconMap.last || <LastPage />,
+          previous: () => iconMap.previous || <NavigateBefore />,
+          next: () => iconMap.next || <NavigateNext /> }}
+      />
+    );
+  
+};
+
+// The control itself. Local because StyledPagination cannot cross a module
+// boundary (TS2742).
+const PaginationControl: React.FC<
+  ResolvedPaginationProps & {
+    innerRef: React.Ref<HTMLElement>;
+    renderItem: (item: PaginationRenderItemParams) => React.ReactNode;
+    rest: Record<string, unknown>;
+  }
+> = ({ innerRef, renderItem, rest, ...p }) => {
+  // The dots variant is a position indicator, not a control: no page numbers
+  // around the current one, and no step buttons.
+  const isDots = p.variant === 'dots';
+
+  return (
+    <StyledPagination
+      ref={innerRef}
+      page={p.page}
+      count={p.count}
+      onChange={p.onChange}
+      customVariant={p.variant}
+      customSize={p.size}
+      variant="outlined"
+      size={muiSizeFor(p.size)}
+      boundaryCount={isDots ? 0 : p.boundaryCount}
+      siblingCount={isDots ? 0 : p.siblingCount}
+      hideNextButton={p.hideNextButton || isDots}
+      hidePrevButton={p.hidePrevButton || isDots}
+      showFirstButton={p.showFirstButton && !isDots}
+      showLastButton={p.showLastButton && !isDots}
+      disabled={p.disabled}
+      color={p.color}
+      renderItem={renderItem}
+      {...rest}
+    />
+  );
+};
 
 export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
-  (
-    {
-      variant = 'default',
-      size = 'md',
+  (componentProps, ref) => {
+    const resolved = resolvePaginationProps(componentProps);
+    const {
+      variant,
+      size,
       page,
       count,
-      onChange,
-      boundaryCount = 1,
-      siblingCount = 1,
-      hideNextButton = false,
-      hidePrevButton = false,
-      showFirstButton = false,
-      showLastButton = false,
-      firstIcon = <FirstPage />,
-      lastIcon = <LastPage />,
-      previousIcon = <NavigateBefore />,
-      nextIcon = <NavigateNext />,
-      disabled = false,
-      color = 'primary',
-      showPageInfo = false,
-      pageInfoFormat = (page, count) => `Page ${page} of ${count}`,
-      showItemsPerPage = false,
-      itemsPerPageOptions = [10, 25, 50, 100],
-      itemsPerPage = 10,
+      onChange: _onChange,
+      boundaryCount: _boundaryCount,
+      siblingCount: _siblingCount,
+      hideNextButton: _hideNextButton,
+      hidePrevButton: _hidePrevButton,
+      showFirstButton: _showFirstButton,
+      showLastButton: _showLastButton,
+      firstIcon,
+      lastIcon,
+      previousIcon,
+      nextIcon,
+      disabled,
+      color: _color,
+      showPageInfo,
+      pageInfoFormat,
+      showItemsPerPage,
+      itemsPerPageOptions,
+      itemsPerPage,
       onItemsPerPageChange,
       className,
       dataTestId,
       ...props
-    },
-    ref,
-  ) => {
-    // For dots variant, we show fewer pages
-    const adjustedBoundaryCount = variant === 'dots' ? 0 : boundaryCount;
-    const adjustedSiblingCount = variant === 'dots' ? 0 : siblingCount;
-
-    const renderItem = (item: PaginationRenderItemParams) => {
-      // Determine test ID based on item type
-      let itemTestId: string | undefined;
-      if (dataTestId) {
-        switch (item.type) {
-          case 'first':
-            itemTestId = `${dataTestId}-first`;
-            break;
-          case 'last':
-            itemTestId = `${dataTestId}-last`;
-            break;
-          case 'previous':
-            itemTestId = `${dataTestId}-prev`;
-            break;
-          case 'next':
-            itemTestId = `${dataTestId}-next`;
-            break;
-          case 'page':
-            itemTestId = `${dataTestId}-page-${item.page}`;
-            break;
-        }
-      } else {
-        switch (item.type) {
-          case 'first':
-            itemTestId = 'pagination-first';
-            break;
-          case 'last':
-            itemTestId = 'pagination-last';
-            break;
-          case 'previous':
-            itemTestId = 'pagination-prev';
-            break;
-          case 'next':
-            itemTestId = 'pagination-next';
-            break;
-          case 'page':
-            itemTestId = `pagination-page-${item.page}`;
-            break;
-        }
-      }
+    } = resolved;
 
-      // Custom rendering for different variants
-      if (variant === 'dots') {
-        if (item.type === 'page') {
-          return (
-            <PaginationItem
-              {...item}
-              data-testid={itemTestId}
-              sx={{
-                '&.MuiPaginationItem-page': {
-                  fontSize: 0,
-                  overflow: 'hidden',
-                  textIndent: '-9999px',
-                },
-              }}
-            />
-          );
-        }
-        return null; // Hide navigation buttons for dots
-      }
-
-      // Map custom icons to components
-      const iconMap: Record<string, React.ReactElement> = {
-        first: firstIcon as React.ReactElement,
-        last: lastIcon as React.ReactElement,
-        previous: previousIcon as React.ReactElement,
-        next: nextIcon as React.ReactElement,
-      };
+    const testId = makeTestId(dataTestId);
 
-      return (
-        <PaginationItem
-          {...item}
-          data-testid={itemTestId}
-          components={{
-            first: () => iconMap.first || <FirstPage />,
-            last: () => iconMap.last || <LastPage />,
-            previous: () => iconMap.previous || <NavigateBefore />,
-            next: () => iconMap.next || <NavigateNext />,
-          }}
-        />
-      );
-    };
+    const renderItem = (item: PaginationRenderItemParams) =>
+      renderPaginationItem({
+        item,
+        variant,
+        size,
+        dataTestId,
+        icons: { firstIcon, lastIcon, previousIcon, nextIcon } });
 
     return (
       <PaginationContainer className={className} data-testid={dataTestId || 'pagination'}>
         {showItemsPerPage && onItemsPerPageChange && (
-          <ItemsPerPageContainer>
-            <Typography variant="body2" color="text.secondary">
-              Show:
-            </Typography>
-            <FormControl size="small" sx={{ minWidth: 80 }}>
-              <Select
-                value={itemsPerPage}
-                onChange={(e) => onItemsPerPageChange(e.target.value as number)}
-                disabled={disabled}
-                data-testid={dataTestId ? `${dataTestId}-items-per-page` : 'pagination-items-per-page'}
-                sx={{
-                  '& .MuiSelect-select': {
-                    fontSize: size === 'sm' ? '0.875rem' : size === 'lg' ? '1.125rem' : '1rem',
-                    py: size === 'sm' ? 0.5 : size === 'lg' ? 1.5 : 1,
-                  },
-                }}
-              >
-                {itemsPerPageOptions.map((option) => (
-                  <MenuItem key={option} value={option}>
-                    {option}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </ItemsPerPageContainer>
+          <ItemsPerPageSelect
+            value={itemsPerPage}
+            options={itemsPerPageOptions}
+            size={size}
+            disabled={disabled}
+            testId={testId('items-per-page')}
+            onChange={onItemsPerPageChange}
+          />
         )}
 
-        <StyledPagination
-          ref={ref}
-          page={page}
-          count={count}
-          onChange={onChange}
-          customVariant={variant}
-          customSize={size}
-          variant="outlined"
-          size={size === 'sm' ? 'small' : size === 'lg' ? 'large' : 'medium'}
-          boundaryCount={adjustedBoundaryCount}
-          siblingCount={adjustedSiblingCount}
-          hideNextButton={hideNextButton || variant === 'dots'}
-          hidePrevButton={hidePrevButton || variant === 'dots'}
-          showFirstButton={showFirstButton && variant !== 'dots'}
-          showLastButton={showLastButton && variant !== 'dots'}
-          disabled={disabled}
-          color={color}
+        <PaginationControl
+          {...resolved}
+          innerRef={ref}
           renderItem={renderItem}
-          {...props}
+          rest={props as unknown as Record<string, unknown>}
         />
 
         {showPageInfo && (
-          <PageInfoContainer>
-            <Typography
-              variant="body2"
-              color="text.secondary"
-              fontSize={size === 'sm' ? '0.75rem' : size === 'lg' ? '1rem' : '0.875rem'}
-              data-testid={dataTestId ? `${dataTestId}-info` : 'pagination-info'}
-            >
-              {pageInfoFormat(page, count)}
-            </Typography>
-          </PageInfoContainer>
+          <PageInfo size={size} testId={testId('info')}>
+            {pageInfoFormat(page, count)}
+          </PageInfo>
         )}
       </PaginationContainer>
     );

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -0,0 +1,81 @@
+import { Box, FormControl, MenuItem, Select, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import type { FC } from 'react';
+import React from 'react';
+
+import { scaleFor } from './Pagination.helpers';
+
+// Kept module-local: styled() components cannot be exported across a module
+// boundary here without tripping TS2742.
+const ItemsPerPageContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+}));
+
+const PageInfoContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+}));
+
+export interface ItemsPerPageSelectProps {
+  value: number;
+  options: number[];
+  size: string;
+  disabled: boolean;
+  testId: string;
+  onChange: (value: number) => void;
+}
+
+export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
+  value,
+  options,
+  size,
+  disabled,
+  testId,
+  onChange,
+}) => (
+  <ItemsPerPageContainer>
+    <Typography variant="body2" color="text.secondary">
+      Show:
+    </Typography>
+    <FormControl size="small" sx={{ minWidth: 80 }}>
+      <Select
+        value={value}
+        onChange={(event) => onChange(event.target.value as number)}
+        disabled={disabled}
+        data-testid={testId}
+        sx={{
+          '& .MuiSelect-select': {
+            fontSize: scaleFor(size, ['0.875rem', '1rem', '1.125rem']),
+            py: scaleFor(size, [0.5, 1, 1.5]),
+          },
+        }}
+      >
+        {options.map((option) => (
+          <MenuItem key={option} value={option}>
+            {option}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  </ItemsPerPageContainer>
+);
+
+export const PageInfo: FC<{ size: string; testId: string; children: React.ReactNode }> = ({
+  size,
+  testId,
+  children,
+}) => (
+  <PageInfoContainer>
+    <Typography
+      variant="body2"
+      color="text.secondary"
+      fontSize={scaleFor(size, ['0.75rem', '0.875rem', '1rem'])}
+      data-testid={testId}
+    >
+      {children}
+    </Typography>
+  </PageInfoContainer>
+);

package/src/components/navigation/Tabs/Tabs.md

@@ -148,7 +148,9 @@ function BasicExample() {
 ### Tabs with Icons and Badges
 
 ```tsx
-import { Home, Settings, Notifications } from '@mui/icons-material';
+import Home from '@mui/icons-material/Home';
+import Settings from '@mui/icons-material/Settings';
+import Notifications from '@mui/icons-material/Notifications';
 
 function TabsWithIconsAndBadges() {
   const [activeTab, setActiveTab] = useState('home');

package/src/components/navigation/Tabs/Tabs.stories.tsx

@@ -1,26 +1,24 @@
-import {
-  Analytics,
-  BugReport,
-  Cancel,
-  CheckCircle,
-  Code,
-  Dashboard,
-  Edit,
-  Email,
-  Error,
-  Info,
-  LocationOn,
-  Notifications,
-  Palette,
-  Person,
-  Phone,
-  PieChart,
-  Save,
-  Security,
-  Settings,
-  Timeline,
-  Warning,
-} from '@mui/icons-material';
+import Analytics from '@mui/icons-material/Analytics';
+import BugReport from '@mui/icons-material/BugReport';
+import Cancel from '@mui/icons-material/Cancel';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Code from '@mui/icons-material/Code';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Edit from '@mui/icons-material/Edit';
+import Email from '@mui/icons-material/Email';
+import Error from '@mui/icons-material/Error';
+import Info from '@mui/icons-material/Info';
+import LocationOn from '@mui/icons-material/LocationOn';
+import Notifications from '@mui/icons-material/Notifications';
+import Palette from '@mui/icons-material/Palette';
+import Person from '@mui/icons-material/Person';
+import Phone from '@mui/icons-material/Phone';
+import PieChart from '@mui/icons-material/PieChart';
+import Save from '@mui/icons-material/Save';
+import Security from '@mui/icons-material/Security';
+import Settings from '@mui/icons-material/Settings';
+import Timeline from '@mui/icons-material/Timeline';
+import Warning from '@mui/icons-material/Warning';
 import {
   Avatar,
   Box,