@12-apps/ui 5.0.0 → 5.0.1

package/dist/layout/SettingsLayout.js

@@ -0,0 +1,339 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import { Box as Box2 } from "@mui/material";
+import { useMemo, useState } from "react";
+
+// src/components/layout/SettingsLayout/SettingsLayout.parts.tsx
+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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RAIL_WIDTH = 300;
+function filterGroups(groups, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return groups;
+  const matches = (item) => 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);
+}
+function activeItemLabel(groups, activeItemId) {
+  return groups.flatMap((group) => group.items).find((item) => item.id === activeItemId)?.label;
+}
+function SettingsRailItem({
+  item,
+  active,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix
+}) {
+  const theme = useTheme();
+  const shared = {
+    selected: active,
+    "aria-current": active ? "page" : void 0,
+    "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 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 0, color: "inherit" }, children: item.icon }) : null,
+    /* @__PURE__ */ jsx(
+      ListItemText,
+      {
+        primary: item.label,
+        primaryTypographyProps: { variant: "body2", noWrap: true, fontWeight: active ? 600 : 500 }
+      }
+    )
+  ] });
+  if (item.href && linkComponent) {
+    const LinkComponent = linkComponent;
+    return /* @__PURE__ */ jsx(ListItemButton, { component: LinkComponent, href: item.href, onClick: onNavigate, ...shared, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    ListItemButton,
+    {
+      onClick: () => {
+        onSelectItem?.(item.id);
+        onNavigate?.();
+      },
+      ...shared,
+      children: content
+    }
+  );
+}
+function SettingsRailGroup({
+  group,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": `${testIdPrefix}-group-${group.id}`, sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          display: "block",
+          px: 1,
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.06em"
+        },
+        children: group.label
+      }
+    ),
+    group.description ? /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", sx: { px: 1, mt: 0.25, color: "text.disabled" }, children: group.description }) : null,
+    /* @__PURE__ */ jsx(List, { disablePadding: true, sx: { mt: 0.5 }, children: group.items.map((item) => /* @__PURE__ */ jsx(
+      SettingsRailItem,
+      {
+        item,
+        active: item.id === activeItemId,
+        linkComponent,
+        onSelectItem,
+        onNavigate,
+        testIdPrefix
+      },
+      item.id
+    )) })
+  ] });
+}
+function SettingsRailToggle({
+  title,
+  activeLabel,
+  open,
+  onToggle,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    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
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { display: "block", color: "text.secondary" }, children: title }) : null,
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", noWrap: true, sx: { fontWeight: 600 }, children: activeLabel ?? "" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ExpandMoreIcon,
+          {
+            fontSize: "small",
+            sx: {
+              flex: "0 0 auto",
+              color: "text.secondary",
+              transition: "transform 150ms ease",
+              transform: open ? "rotate(180deg)" : "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function SettingsRailBody({
+  navOpen,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  emptySearchLabel,
+  filteredGroups,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  onNavigate,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-rail-body`,
+      sx: { display: { xs: navOpen ? "block" : "none", md: "block" } },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            value: query,
+            onChange: (event) => onQueryChange(event.target.value),
+            placeholder: searchPlaceholder,
+            size: "small",
+            fullWidth: true,
+            "aria-label": searchPlaceholder,
+            "data-testid": `${testIdPrefix}-search`,
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, { fontSize: "small", sx: { color: "text.secondary" } }) })
+            },
+            sx: { mb: 2 }
+          }
+        ),
+        filteredGroups.length === 0 ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: "text.secondary",
+            "data-testid": `${testIdPrefix}-empty`,
+            sx: { px: 1, py: 2 },
+            children: emptySearchLabel
+          }
+        ) : filteredGroups.map((group) => /* @__PURE__ */ jsx(
+          SettingsRailGroup,
+          {
+            group,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate,
+            testIdPrefix
+          },
+          group.id
+        ))
+      ]
+    }
+  );
+}
+function SettingsRail({
+  title,
+  activeLabel,
+  navOpen,
+  onToggleNav,
+  testIdPrefix,
+  ...bodyProps
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    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 }
+      },
+      children: [
+        title ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h6",
+            "data-testid": `${testIdPrefix}-title`,
+            sx: { display: { xs: "none", md: "block" }, fontWeight: 700, mb: 1.5 },
+            children: title
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          SettingsRailToggle,
+          {
+            title,
+            activeLabel,
+            open: navOpen,
+            onToggle: onToggleNav,
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsx(SettingsRailBody, { navOpen, testIdPrefix, ...bodyProps })
+      ]
+    }
+  );
+}
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SettingsLayout = ({
+  title,
+  groups,
+  activeItemId,
+  onSelectItem,
+  searchPlaceholder = "Search settings",
+  emptySearchLabel = "No settings match your search.",
+  linkComponent,
+  children,
+  testIdPrefix = "settings"
+}) => {
+  const [query, setQuery] = useState("");
+  const [navOpen, setNavOpen] = useState(false);
+  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
+  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      "data-testid": testIdPrefix,
+      sx: {
+        display: "flex",
+        flexDirection: { xs: "column", md: "row" },
+        alignItems: "stretch",
+        gap: { xs: 1.5, md: 3 },
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SettingsRail,
+          {
+            title,
+            activeLabel,
+            navOpen,
+            onToggleNav: () => setNavOpen((open) => !open),
+            query,
+            onQueryChange: setQuery,
+            searchPlaceholder,
+            emptySearchLabel,
+            filteredGroups,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate: () => setNavOpen(false),
+            testIdPrefix
+          }
+        ),
+        /* @__PURE__ */ jsx2(Box2, { "data-testid": `${testIdPrefix}-panel`, sx: { flex: "1 1 auto", minWidth: 0, width: "100%" }, children })
+      ]
+    }
+  );
+};
+SettingsLayout.displayName = "SettingsLayout";
+export {
+  SettingsLayout
+};
+//# sourceMappingURL=SettingsLayout.js.map

package/dist/layout/SettingsLayout.js.map

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

package/dist/layout/Sidebar.js

@@ -0,0 +1,124 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/layout/Sidebar/Sidebar.tsx
+import { alpha, Box, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Sidebar = ({
+  children,
+  variant = "fixed",
+  open = true,
+  onToggle: _onToggle,
+  width = 280,
+  collapsedWidth = 64,
+  position = "left",
+  className,
+  dataTestId = "sidebar",
+  ...rest
+}) => {
+  void _onToggle;
+  const theme = useTheme();
+  const isCollapsed = variant === "collapsible" && !open;
+  const currentWidth = isCollapsed ? collapsedWidth : width;
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "floating":
+        return {
+          position: "fixed",
+          top: theme.spacing(2),
+          bottom: theme.spacing(2),
+          [position]: theme.spacing(2),
+          borderRadius: theme.spacing(2),
+          boxShadow: theme.shadows[8],
+          zIndex: theme.zIndex.drawer
+        };
+      case "glass":
+        return {
+          backgroundColor: alpha(theme.palette.background.paper, 0.1),
+          backdropFilter: "blur(20px)",
+          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+          boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`
+        };
+      case "collapsible":
+        return {
+          transition: theme.transitions.create("width", {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen
+          })
+        };
+      default:
+        return {
+          backgroundColor: theme.palette.background.paper,
+          borderRight: `1px solid ${theme.palette.divider}`
+        };
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        width: currentWidth,
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...getVariantStyles()
+      },
+      children
+    }
+  );
+};
+var SidebarHeader = ({ children, dataTestId = "sidebar-header", ...rest }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        padding: theme.spacing(2),
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        flexShrink: 0,
+        overflow: "hidden"
+      },
+      children
+    }
+  );
+};
+var SidebarContent = ({ children, dataTestId = "sidebar-content", ...rest }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": dataTestId,
+    ...rest,
+    sx: {
+      flex: 1,
+      overflow: "auto"
+    },
+    children
+  }
+);
+var SidebarFooter = ({ children, dataTestId = "sidebar-footer", ...rest }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-testid": dataTestId,
+      ...rest,
+      sx: {
+        padding: theme.spacing(2),
+        borderTop: `1px solid ${theme.palette.divider}`,
+        flexShrink: 0
+      },
+      children
+    }
+  );
+};
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/layout/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/layout/Sidebar/Sidebar.tsx"],"sourcesContent":["import { alpha,Box, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport type {\n  SidebarContentProps,\n  SidebarFooterProps,\n  SidebarHeaderProps,\n  SidebarProps,\n} from './Sidebar.types';\n\nexport const Sidebar: React.FC<SidebarProps> = ({\n  children,\n  variant = 'fixed',\n  open = true,\n  onToggle: _onToggle,\n  width = 280,\n  collapsedWidth = 64,\n  position = 'left',\n  className,\n  dataTestId = 'sidebar',\n  ...rest\n}) => {\n  // Prevent unused variable warning for onToggle\n  void _onToggle;\n  const theme = useTheme();\n\n  const isCollapsed = variant === 'collapsible' && !open;\n  const currentWidth = isCollapsed ? collapsedWidth : width;\n\n  const getVariantStyles = () => {\n    switch (variant) {\n      case 'floating':\n        return {\n          position: 'fixed' as const,\n          top: theme.spacing(2),\n          bottom: theme.spacing(2),\n          [position]: theme.spacing(2),\n          borderRadius: theme.spacing(2),\n          boxShadow: theme.shadows[8],\n          zIndex: theme.zIndex.drawer,\n        };\n      case 'glass':\n        return {\n          backgroundColor: alpha(theme.palette.background.paper, 0.1),\n          backdropFilter: 'blur(20px)',\n          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,\n          boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,\n        };\n      case 'collapsible':\n        return {\n          transition: theme.transitions.create('width', {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.leavingScreen,\n          }),\n        };\n      default:\n        return {\n          backgroundColor: theme.palette.background.paper,\n          borderRight: `1px solid ${theme.palette.divider}`,\n        };\n    }\n  };\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        width: currentWidth,\n        height: '100vh',\n        display: 'flex',\n        flexDirection: 'column',\n        overflow: 'hidden',\n        ...getVariantStyles(),\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({ children, dataTestId = 'sidebar-header', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderBottom: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n        overflow: 'hidden',\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const SidebarContent: React.FC<SidebarContentProps> = ({ children, dataTestId = 'sidebar-content', ...rest }) => (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        flex: 1,\n        overflow: 'auto',\n      }}\n    >\n      {children}\n    </Box>\n  );\n\nexport const SidebarFooter: React.FC<SidebarFooterProps> = ({ children, dataTestId = 'sidebar-footer', ...rest }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      data-testid={dataTestId}\n      {...rest}\n      sx={{\n        padding: theme.spacing(2),\n        borderTop: `1px solid ${theme.palette.divider}`,\n        flexShrink: 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/layout/Skeleton.js

@@ -0,0 +1,9 @@
+import "../chunk-724ZONOL.js";
+import {
+  Skeleton
+} from "../chunk-7XUYRPRQ.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/layout/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/layout/Spacer.js

@@ -0,0 +1,65 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/layout/Spacer/Spacer.tsx
+import { Box, useTheme } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Spacer = ({
+  size = "md",
+  direction = "both",
+  width,
+  height,
+  flex = false,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const theme = useTheme();
+  const getSpacing = () => {
+    switch (size) {
+      case "xs":
+        return theme.spacing(0.5);
+      case "sm":
+        return theme.spacing(1);
+      case "md":
+        return theme.spacing(2);
+      case "lg":
+        return theme.spacing(3);
+      case "xl":
+        return theme.spacing(4);
+      default:
+        return theme.spacing(2);
+    }
+  };
+  const getDimensions = () => {
+    const spacing = getSpacing();
+    let finalWidth = width;
+    let finalHeight = height;
+    if (direction === "horizontal" || direction === "both") {
+      finalWidth = width ?? spacing;
+    }
+    if (direction === "vertical" || direction === "both") {
+      finalHeight = height ?? spacing;
+    }
+    return { width: finalWidth, height: finalHeight };
+  };
+  const dimensions = getDimensions();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        width: dimensions.width,
+        height: dimensions.height,
+        flex: flex ? 1 : void 0,
+        flexShrink: 0,
+        pointerEvents: "none",
+        userSelect: "none"
+      },
+      "aria-hidden": "true"
+    }
+  );
+};
+export {
+  Spacer
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/layout/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["import { Box, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport type { SpacerProps } from './Spacer.types';\n\nexport const Spacer: React.FC<SpacerProps> = ({\n  size = 'md',\n  direction = 'both',\n  width,\n  height,\n  flex = false,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  const theme = useTheme();\n\n  const getSpacing = () => {\n    switch (size) {\n      case 'xs':\n        return theme.spacing(0.5);\n      case 'sm':\n        return theme.spacing(1);\n      case 'md':\n        return theme.spacing(2);\n      case 'lg':\n        return theme.spacing(3);\n      case 'xl':\n        return theme.spacing(4);\n      default:\n        return theme.spacing(2);\n    }\n  };\n\n  const getDimensions = () => {\n    const spacing = getSpacing();\n\n    let finalWidth = width;\n    let finalHeight = height;\n\n    if (direction === 'horizontal' || direction === 'both') {\n      finalWidth = width ?? spacing;\n    }\n\n    if (direction === 'vertical' || direction === 'both') {\n      finalHeight = height ?? spacing;\n    }\n\n    return { width: finalWidth, height: finalHeight };\n  };\n\n  const dimensions = getDimensions();\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        width: dimensions.width,\n        height: dimensions.height,\n        flex: flex ? 1 : undefined,\n        flexShrink: 0,\n        pointerEvents: 'none',\n        userSelect: 'none',\n      }}\n      aria-hidden=\"true\"\n    />\n  );\n};\n"],"mappings":";;;AAAA,SAAS,KAAK,gBAAgB;AAqD1B;AAhDG,IAAM,SAAgC,CAAC;AAAA,EAC5C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,QAAM,aAAa,MAAM;AACvB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO,MAAM,QAAQ,GAAG;AAAA,MAC1B,KAAK;AACH,eAAO,MAAM,QAAQ,CAAC;AAAA,MACxB,KAAK;AACH,eAAO,MAAM,QAAQ,CAAC;AAAA,MACxB,KAAK;AACH,eAAO,MAAM,QAAQ,CAAC;AAAA,MACxB,KAAK;AACH,eAAO,MAAM,QAAQ,CAAC;AAAA,MACxB;AACE,eAAO,MAAM,QAAQ,CAAC;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,UAAM,UAAU,WAAW;AAE3B,QAAI,aAAa;AACjB,QAAI,cAAc;AAElB,QAAI,cAAc,gBAAgB,cAAc,QAAQ;AACtD,mBAAa,SAAS;AAAA,IACxB;AAEA,QAAI,cAAc,cAAc,cAAc,QAAQ;AACpD,oBAAc,UAAU;AAAA,IAC1B;AAEA,WAAO,EAAE,OAAO,YAAY,QAAQ,YAAY;AAAA,EAClD;AAEA,QAAM,aAAa,cAAc;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,IAAI;AAAA,QACF,OAAO,WAAW;AAAA,QAClB,QAAQ,WAAW;AAAA,QACnB,MAAM,OAAO,IAAI;AAAA,QACjB,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,YAAY;AAAA,MACd;AAAA,MACA,eAAY;AAAA;AAAA,EACd;AAEJ;","names":[]}

package/dist/layout/TableFilter.js

@@ -0,0 +1,12 @@
+import {
+  TableFilter,
+  TableFilterContext,
+  useTableFilterContext
+} from "../chunk-35VGGLOC.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  TableFilter,
+  TableFilterContext,
+  useTableFilterContext
+};
+//# sourceMappingURL=TableFilter.js.map

package/dist/layout/TableFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/mui/AppBar.js

@@ -0,0 +1,9 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/mui/AppBar.ts
+import { AppBar, AppBar as AppBar2 } from "@mui/material";
+export {
+  AppBar,
+  AppBar2 as default
+};
+//# sourceMappingURL=AppBar.js.map

package/dist/mui/AppBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mui/AppBar.ts"],"sourcesContent":["export type { AppBarProps } from '@mui/material';\nexport { AppBar, AppBar as default } from '@mui/material';\n"],"mappings":";;;AACA,SAAS,QAAkB,UAAVA,eAAyB;","names":["AppBar"]}

package/dist/mui/Box.js

@@ -0,0 +1,10 @@
+import {
+  Box,
+  Box2
+} from "../chunk-34DQAXL2.js";
+import "../chunk-PZ5AY32C.js";
+export {
+  Box,
+  Box2 as default
+};
+//# sourceMappingURL=Box.js.map

package/dist/mui/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/mui/CssBaseline.js

@@ -0,0 +1,9 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/mui/CssBaseline.ts
+import { CssBaseline, CssBaseline as CssBaseline2 } from "@mui/material";
+export {
+  CssBaseline,
+  CssBaseline2 as default
+};
+//# sourceMappingURL=CssBaseline.js.map

package/dist/mui/CssBaseline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mui/CssBaseline.ts"],"sourcesContent":["export type { CssBaselineProps } from '@mui/material';\nexport { CssBaseline, CssBaseline as default } from '@mui/material';\n"],"mappings":";;;AACA,SAAS,aAA4B,eAAfA,oBAA8B;","names":["CssBaseline"]}

package/dist/mui/FormControl.js

@@ -0,0 +1,9 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/mui/FormControl.ts
+import { FormControl, FormControl as FormControl2 } from "@mui/material";
+export {
+  FormControl,
+  FormControl2 as default
+};
+//# sourceMappingURL=FormControl.js.map