@12-apps/ui 5.0.0 → 5.1.0

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

@@ -1,5 +1,5 @@
 import { Box, FormControl, MenuItem, Select, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import type { FC } from 'react';
 import React from 'react';
 

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

@@ -6,7 +6,7 @@ import {
   Divider,
   Tab as MuiTab,
   Tabs as MuiTabs } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import { CustomTabPanel } from './TabsPanel';

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

@@ -1,5 +1,5 @@
 import { Box, CircularProgress, Fade } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import type { TabPanelProps } from './Tabs.types';

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -1,7 +1,7 @@
 import FormatQuote from '@mui/icons-material/FormatQuote';
 import type { Theme} from '@mui/material';
 import { alpha, Box,Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import type { BlockquoteProps } from './Blockquote.types';

package/src/components/typography/Code/Code.tsx

@@ -1,7 +1,7 @@
 import Check from '@mui/icons-material/Check';
 import ContentCopy from '@mui/icons-material/ContentCopy';
 import { alpha,Box, IconButton, Tooltip } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';

package/src/components/typography/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import { headingSx } from './Heading.styles';

package/src/components/typography/Paragraph/Paragraph.tsx

@@ -1,6 +1,6 @@
 import type { Theme} from '@mui/material';
 import {Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import type { ParagraphProps } from './Paragraph.types';

package/src/components/typography/Text/Text.tsx

@@ -2,7 +2,7 @@
 
 import type { CSSObject, Theme } from '@mui/material';
 import { alpha,Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import type { TextProps } from './Text.types';

package/src/components/utility/InstallPrompt/InstallPrompt.styles.ts

@@ -1,5 +1,5 @@
 import { alpha } from '@mui/material';
-import type { CSSObject, Theme } from '@mui/material/styles';
+import type { CSSObject, Theme } from '@mui/material';
 
 export const installPromptStyles = (theme: Theme): CSSObject => ({
   display: 'flex',

package/src/components/utility/InstallPrompt/InstallPrompt.tsx

@@ -2,7 +2,7 @@ import Close from '@mui/icons-material/Close';
 import InstallMobile from '@mui/icons-material/InstallMobile';
 import IosShare from '@mui/icons-material/IosShare';
 import { Box, Button, IconButton, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React from 'react';
 
 import { installPromptStyles } from './InstallPrompt.styles';

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import type { CSSObject, Theme } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React, { forwardRef, useCallback } from 'react';
 
 import type { StepColors } from './WorkflowStep.helpers';

package/src/components/utility/WorkflowStep/WorkflowStep.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { styled } from '@mui/material';
 import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import { resolveWorkflowStepProps, withDerivedStatus } from './WorkflowStep.helpers';

package/src/mui/AppBar.ts

@@ -1,2 +1,2 @@
-export type { AppBarProps } from '@mui/material/AppBar';
-export { default as AppBar, default } from '@mui/material/AppBar';
+export type { AppBarProps } from '@mui/material';
+export { AppBar, AppBar as default } from '@mui/material';

package/src/mui/Box.ts

@@ -1,2 +1,2 @@
-export type { BoxProps } from '@mui/material/Box';
-export { default as Box, default } from '@mui/material/Box';
+export type { BoxProps } from '@mui/material';
+export { Box, Box as default } from '@mui/material';

package/src/mui/CssBaseline.ts

@@ -1,2 +1,2 @@
-export type { CssBaselineProps } from '@mui/material/CssBaseline';
-export { default as CssBaseline, default } from '@mui/material/CssBaseline';
+export type { CssBaselineProps } from '@mui/material';
+export { CssBaseline, CssBaseline as default } from '@mui/material';

package/src/mui/FormControl.ts

@@ -1,2 +1,2 @@
-export type { FormControlProps } from '@mui/material/FormControl';
-export { default as FormControl, default } from '@mui/material/FormControl';
+export type { FormControlProps } from '@mui/material';
+export { FormControl, FormControl as default } from '@mui/material';

package/src/mui/FormControlLabel.ts

@@ -1,2 +1,2 @@
-export type { FormControlLabelProps } from '@mui/material/FormControlLabel';
-export { default as FormControlLabel, default } from '@mui/material/FormControlLabel';
+export type { FormControlLabelProps } from '@mui/material';
+export { FormControlLabel, FormControlLabel as default } from '@mui/material';

package/src/mui/Grid2.ts

@@ -1,2 +1,2 @@
-export type { Grid2Props } from '@mui/material/Grid2';
-export { default as Grid2, default } from '@mui/material/Grid2';
+export type { Grid2Props } from '@mui/material';
+export { Grid2, Grid2 as default } from '@mui/material';

package/src/mui/InputLabel.ts

@@ -1,2 +1,2 @@
-export type { InputLabelProps } from '@mui/material/InputLabel';
-export { default as InputLabel, default } from '@mui/material/InputLabel';
+export type { InputLabelProps } from '@mui/material';
+export { InputLabel, InputLabel as default } from '@mui/material';

package/src/mui/Link.ts

@@ -1,2 +1,2 @@
-export type { LinkProps } from '@mui/material/Link';
-export { default as Link, default } from '@mui/material/Link';
+export type { LinkProps } from '@mui/material';
+export { Link, Link as default } from '@mui/material';

package/src/mui/List.ts

@@ -1,2 +1,2 @@
-export type { ListProps } from '@mui/material/List';
-export { default as List, default } from '@mui/material/List';
+export type { ListProps } from '@mui/material';
+export { List, List as default } from '@mui/material';

package/src/mui/ListItem.ts

@@ -1,2 +1,2 @@
-export type { ListItemProps } from '@mui/material/ListItem';
-export { default as ListItem, default } from '@mui/material/ListItem';
+export type { ListItemProps } from '@mui/material';
+export { ListItem, ListItem as default } from '@mui/material';

package/src/mui/ListItemButton.ts

@@ -1,2 +1,2 @@
-export type { ListItemButtonProps } from '@mui/material/ListItemButton';
-export { default as ListItemButton, default } from '@mui/material/ListItemButton';
+export type { ListItemButtonProps } from '@mui/material';
+export { ListItemButton, ListItemButton as default } from '@mui/material';

package/src/mui/ListItemText.ts

@@ -1,2 +1,2 @@
-export type { ListItemTextProps } from '@mui/material/ListItemText';
-export { default as ListItemText, default } from '@mui/material/ListItemText';
+export type { ListItemTextProps } from '@mui/material';
+export { ListItemText, ListItemText as default } from '@mui/material';

package/src/mui/Stack.ts

@@ -1,2 +1,2 @@
-export type { StackProps } from '@mui/material/Stack';
-export { default as Stack, default } from '@mui/material/Stack';
+export type { StackProps } from '@mui/material';
+export { Stack, Stack as default } from '@mui/material';

package/src/mui/SvgIcon.ts

@@ -1,2 +1,2 @@
-export type { SvgIconProps } from '@mui/material/SvgIcon';
-export { default as SvgIcon, default } from '@mui/material/SvgIcon';
+export type { SvgIconProps } from '@mui/material';
+export { SvgIcon, SvgIcon as default } from '@mui/material';

package/src/mui/Toolbar.ts

@@ -1,2 +1,2 @@
-export type { ToolbarProps } from '@mui/material/Toolbar';
-export { default as Toolbar, default } from '@mui/material/Toolbar';
+export type { ToolbarProps } from '@mui/material';
+export { Toolbar, Toolbar as default } from '@mui/material';

package/src/mui/styles.ts

@@ -1,2 +1,2 @@
-export type { SxProps, Theme } from '@mui/material/styles';
-export { alpha, styled, useTheme, createTheme, ThemeProvider } from '@mui/material/styles';
+export type { SxProps, Theme } from '@mui/material';
+export { alpha, styled, useTheme, createTheme, ThemeProvider } from '@mui/material';

package/src/mui/useMediaQuery.ts

@@ -1 +1 @@
-export { default as useMediaQuery, default } from '@mui/material/useMediaQuery';
+export { useMediaQuery, useMediaQuery as default } from '@mui/material';

package/src/tokens/scales.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material';
 
 /**
  * THE TWO VOCABULARIES EVERY COMPONENT SPEAKS.

package/src/utils/viewport.ts

@@ -1,4 +1,4 @@
-import type { CSSObject } from '@mui/material/styles';
+import type { CSSObject } from '@mui/material';
 
 /**
  * Viewport helpers for full-height surfaces (dialogs, drawers, slide-overs).

package/dist/index.cjs

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -1,2 +0,0 @@
-
-export {  }

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-
-export {  }

package/src/components/layout/SettingsLayout/SettingsLayout.parts.tsx

@@ -1,358 +0,0 @@
-'use client';
-
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import SearchIcon from '@mui/icons-material/Search';
-import {
-  alpha,
-  Box,
-  InputAdornment,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  TextField,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import React from 'react';
-
-import type { SettingsLayoutProps, SettingsNavGroup, SettingsNavItem } from './SettingsLayout.types';
-
-/** Fixed width of the left navigation rail on `md`+ screens. */
-const RAIL_WIDTH = 300;
-
-/** Case-insensitive filter over item label + keywords; drops emptied groups. */
-export function filterGroups(groups: SettingsNavGroup[], query: string): SettingsNavGroup[] {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return groups;
-  const matches = (item: SettingsNavItem): boolean =>
-    item.label.toLowerCase().includes(needle) ||
-    (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(needle));
-  return groups
-    .map((group) => ({ ...group, items: group.items.filter(matches) }))
-    .filter((group) => group.items.length > 0);
-}
-
-/** Label of the active item, shown in the mobile section-switcher header. */
-export function activeItemLabel(
-  groups: SettingsNavGroup[],
-  activeItemId?: string,
-): string | undefined {
-  return groups.flatMap((group) => group.items).find((item) => item.id === activeItemId)?.label;
-}
-
-interface RailItemProps {
-  item: SettingsNavItem;
-  active: boolean;
-  linkComponent?: SettingsLayoutProps['linkComponent'];
-  onSelectItem?: (id: string) => void;
-  /** Called on activation so the mobile rail can collapse after a choice. */
-  onNavigate?: () => void;
-  testIdPrefix: string;
-}
-
-/** One rail entry — rendered as a link when it has `href`, else a button. */
-function SettingsRailItem({
-  item,
-  active,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-}: RailItemProps): React.JSX.Element {
-  const theme = useTheme();
-  const shared = {
-    selected: active,
-    'aria-current': active ? ('page' as const) : undefined,
-    'data-testid': `${testIdPrefix}-item-${item.id}`,
-    sx: {
-      borderRadius: 1.5,
-      mb: 0.25,
-      gap: 1.5,
-      color: active ? 'primary.main' : 'text.secondary',
-      '&.Mui-selected': {
-        bgcolor: alpha(theme.palette.primary.main, 0.12),
-        '&:hover': { bgcolor: alpha(theme.palette.primary.main, 0.18) },
-      },
-    },
-  };
-  const content = (
-    <>
-      {item.icon ? (
-        <ListItemIcon sx={{ minWidth: 0, color: 'inherit' }}>{item.icon}</ListItemIcon>
-      ) : null}
-      <ListItemText
-        primary={item.label}
-        primaryTypographyProps={{ variant: 'body2', noWrap: true, fontWeight: active ? 600 : 500 }}
-      />
-    </>
-  );
-
-  if (item.href && linkComponent) {
-    const LinkComponent = linkComponent;
-    return (
-      <ListItemButton component={LinkComponent} href={item.href} onClick={onNavigate} {...shared}>
-        {content}
-      </ListItemButton>
-    );
-  }
-  return (
-    <ListItemButton
-      onClick={() => {
-        onSelectItem?.(item.id);
-        onNavigate?.();
-      }}
-      {...shared}
-    >
-      {content}
-    </ListItemButton>
-  );
-}
-
-interface RailGroupProps {
-  group: SettingsNavGroup;
-  activeItemId?: string;
-  linkComponent?: SettingsLayoutProps['linkComponent'];
-  onSelectItem?: (id: string) => void;
-  onNavigate?: () => void;
-  testIdPrefix: string;
-}
-
-/** A category: header + optional description + its items. */
-function SettingsRailGroup({
-  group,
-  activeItemId,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-}: RailGroupProps): React.JSX.Element {
-  return (
-    <Box data-testid={`${testIdPrefix}-group-${group.id}`} sx={{ mb: 2 }}>
-      <Typography
-        variant="caption"
-        sx={{
-          display: 'block',
-          px: 1,
-          color: 'text.secondary',
-          fontWeight: 600,
-          textTransform: 'uppercase',
-          letterSpacing: '0.06em',
-        }}
-      >
-        {group.label}
-      </Typography>
-      {group.description ? (
-        <Typography variant="caption" component="p" sx={{ px: 1, mt: 0.25, color: 'text.disabled' }}>
-          {group.description}
-        </Typography>
-      ) : null}
-      <List disablePadding sx={{ mt: 0.5 }}>
-        {group.items.map((item) => (
-          <SettingsRailItem
-            key={item.id}
-            item={item}
-            active={item.id === activeItemId}
-            linkComponent={linkComponent}
-            onSelectItem={onSelectItem}
-            onNavigate={onNavigate}
-            testIdPrefix={testIdPrefix}
-          />
-        ))}
-      </List>
-    </Box>
-  );
-}
-
-interface RailToggleProps {
-  title?: React.ReactNode;
-  activeLabel?: string;
-  open: boolean;
-  onToggle: () => void;
-  testIdPrefix: string;
-}
-
-/**
- * Mobile-only collapse control: shows the current section (a compact switcher)
- * so the panel content stays at the top of the screen. Hidden on `md`+.
- */
-function SettingsRailToggle({
-  title,
-  activeLabel,
-  open,
-  onToggle,
-  testIdPrefix,
-}: RailToggleProps): React.JSX.Element {
-  return (
-    <Box
-      component="button"
-      type="button"
-      onClick={onToggle}
-      aria-expanded={open}
-      aria-label={typeof title === 'string' ? title : 'Settings'}
-      data-testid={`${testIdPrefix}-toggle`}
-      sx={{
-        display: { xs: 'flex', md: 'none' },
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 1,
-        width: '100%',
-        px: 1.5,
-        py: 1,
-        mb: 1,
-        textAlign: 'left',
-        cursor: 'pointer',
-        color: 'text.primary',
-        background: 'transparent',
-        border: (theme) => `1px solid ${theme.palette.divider}`,
-        borderRadius: 1.5,
-      }}
-    >
-      <Box sx={{ minWidth: 0 }}>
-        {title ? (
-          <Typography variant="caption" sx={{ display: 'block', color: 'text.secondary' }}>
-            {title}
-          </Typography>
-        ) : null}
-        <Typography variant="body2" noWrap sx={{ fontWeight: 600 }}>
-          {activeLabel ?? ''}
-        </Typography>
-      </Box>
-      <ExpandMoreIcon
-        fontSize="small"
-        sx={{
-          flex: '0 0 auto',
-          color: 'text.secondary',
-          transition: 'transform 150ms ease',
-          transform: open ? 'rotate(180deg)' : 'none',
-        }}
-      />
-    </Box>
-  );
-}
-
-interface RailBodyProps {
-  navOpen: boolean;
-  query: string;
-  onQueryChange: (value: string) => void;
-  searchPlaceholder: string;
-  emptySearchLabel: React.ReactNode;
-  filteredGroups: SettingsNavGroup[];
-  activeItemId?: string;
-  linkComponent?: SettingsLayoutProps['linkComponent'];
-  onSelectItem?: (id: string) => void;
-  onNavigate?: () => void;
-  testIdPrefix: string;
-}
-
-/** The searchable rail body (search + groups); hidden on mobile until expanded. */
-function SettingsRailBody({
-  navOpen,
-  query,
-  onQueryChange,
-  searchPlaceholder,
-  emptySearchLabel,
-  filteredGroups,
-  activeItemId,
-  linkComponent,
-  onSelectItem,
-  onNavigate,
-  testIdPrefix,
-}: RailBodyProps): React.JSX.Element {
-  return (
-    <Box
-      data-testid={`${testIdPrefix}-rail-body`}
-      sx={{ display: { xs: navOpen ? 'block' : 'none', md: 'block' } }}
-    >
-      <TextField
-        value={query}
-        onChange={(event) => onQueryChange(event.target.value)}
-        placeholder={searchPlaceholder}
-        size="small"
-        fullWidth
-        aria-label={searchPlaceholder}
-        data-testid={`${testIdPrefix}-search`}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
-            </InputAdornment>
-          ),
-        }}
-        sx={{ mb: 2 }}
-      />
-      {filteredGroups.length === 0 ? (
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          data-testid={`${testIdPrefix}-empty`}
-          sx={{ px: 1, py: 2 }}
-        >
-          {emptySearchLabel}
-        </Typography>
-      ) : (
-        filteredGroups.map((group) => (
-          <SettingsRailGroup
-            key={group.id}
-            group={group}
-            activeItemId={activeItemId}
-            linkComponent={linkComponent}
-            onSelectItem={onSelectItem}
-            onNavigate={onNavigate}
-            testIdPrefix={testIdPrefix}
-          />
-        ))
-      )}
-    </Box>
-  );
-}
-
-/** Props for {@link SettingsRail}: the rail body's inputs plus the mobile chrome. */
-export type SettingsRailProps = RailBodyProps & {
-  title?: React.ReactNode;
-  activeLabel?: string;
-  onToggleNav: () => void;
-};
-
-/** The left navigation column: desktop title, mobile switcher, and the body. */
-export function SettingsRail({
-  title,
-  activeLabel,
-  navOpen,
-  onToggleNav,
-  testIdPrefix,
-  ...bodyProps
-}: SettingsRailProps): React.JSX.Element {
-  const theme = useTheme();
-  return (
-    <Box
-      component="nav"
-      aria-label={typeof title === 'string' ? title : 'Settings'}
-      data-testid={`${testIdPrefix}-rail`}
-      sx={{
-        flex: { xs: '0 0 auto', md: `0 0 ${RAIL_WIDTH}px` },
-        width: { xs: '100%', md: RAIL_WIDTH },
-        borderRight: { md: `1px solid ${theme.palette.divider}` },
-        pr: { md: 2 },
-      }}
-    >
-      {title ? (
-        <Typography
-          variant="h6"
-          data-testid={`${testIdPrefix}-title`}
-          sx={{ display: { xs: 'none', md: 'block' }, fontWeight: 700, mb: 1.5 }}
-        >
-          {title}
-        </Typography>
-      ) : null}
-      <SettingsRailToggle
-        title={title}
-        activeLabel={activeLabel}
-        open={navOpen}
-        onToggle={onToggleNav}
-        testIdPrefix={testIdPrefix}
-      />
-      <SettingsRailBody navOpen={navOpen} testIdPrefix={testIdPrefix} {...bodyProps} />
-    </Box>
-  );
-}