@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-WQFIV5WD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/SortByDropdown.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport ListSubheader from '@mui/material/ListSubheader/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useState } from 'react';\n\nimport type {\n  SortByDropdownProps,\n  SortFieldDefinition,\n  SortOrderOption,\n} from './ContentToolbar.types';\n\nfunction findActiveField<TField extends string>(\n  fields: SortFieldDefinition<TField>[] | undefined,\n  activeField: TField,\n): SortFieldDefinition<TField> | undefined {\n  return fields?.find((field) => field.value === activeField);\n}\n\nfunction findActiveOrder(\n  fieldDef: SortFieldDefinition | undefined,\n  activeOrder: string | undefined,\n): SortOrderOption | undefined {\n  const options = fieldDef?.orderOptions;\n  if (!options?.length) return undefined;\n  return options.find((option) => option.value === activeOrder) ?? options[0];\n}\n\nfunction resolveArrowDirection(option: SortOrderOption | undefined, indexInList: number): 'up' | 'down' {\n  if (option?.arrowDirection) return option.arrowDirection;\n  // A missing (<0) or first index sorts \"down\"; any later option sorts \"up\".\n  return indexInList <= 0 ? 'down' : 'up';\n}\n\nfunction buildTriggerLabel(\n  fieldDef: SortFieldDefinition | undefined,\n  orderOption: SortOrderOption | undefined,\n): string {\n  if (!fieldDef) return '';\n  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;\n  if (fieldDef.triggerLabelStyle === 'range' && fieldDef.orderOptions?.length === 2) {\n    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);\n    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;\n  }\n  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;\n}\n\n/** The trigger's full label (md+), short label (mobile), and direction arrow. */\nfunction resolveTriggerParts(\n  fieldDef: SortFieldDefinition | undefined,\n  orderOption: SortOrderOption | undefined,\n  orderOptions: SortOrderOption[],\n): { full: string; short: string; arrowSuffix: string } {\n  const useRangeLabel = fieldDef?.triggerLabelStyle === 'range' && orderOptions.length === 2;\n  const orderIndex = orderOptions.findIndex((option) => option.value === orderOption?.value);\n  const arrow = resolveArrowDirection(orderOption, orderIndex);\n  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === 'down' ? '↓' : '↑'}` : '';\n  const full = buildTriggerLabel(fieldDef, orderOption);\n  return { full, short: fieldDef?.label ?? full, arrowSuffix };\n}\n\nconst sectionLabelSx = { px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 } as const;\n\n/** A fixed-width check slot (empty when unchecked) so labels align. */\nfunction SortCheck({ checked }: { checked: boolean }): React.JSX.Element {\n  return (\n    <Box component=\"span\" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>\n      {checked ? <CheckIcon sx={{ fontSize: 14 }} /> : null}\n    </Box>\n  );\n}\n\n/** One `id`/`label` menu row with a leading check + testid. */\nfunction SortRow({\n  value,\n  label,\n  checked,\n  onSelect,\n}: {\n  value: string;\n  label: string;\n  checked: boolean;\n  onSelect: () => void;\n}): React.JSX.Element {\n  return (\n    <MenuItem data-testid={`sort-${value}-option`} onClick={onSelect} sx={{ gap: 1 }}>\n      <SortCheck checked={checked} />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {label}\n      </Box>\n    </MenuItem>\n  );\n}\n\ninterface SortMenuProps<TField extends string> {\n  anchorEl: HTMLElement | null;\n  open: boolean;\n  close: () => void;\n  orderOptions: SortOrderOption[];\n  activeOrderValue: string | undefined;\n  onOrderSelect: (value: string) => void;\n  fields: SortFieldDefinition<TField>[];\n  activeField: TField;\n  onFieldSelect: (field: TField) => void;\n  orderHeading: string;\n  sortHeading: string;\n}\n\n/** The Order + Sort sections of the dropdown menu. */\nfunction SortMenu<TField extends string>({\n  anchorEl,\n  open,\n  close,\n  orderOptions,\n  activeOrderValue,\n  onOrderSelect,\n  fields,\n  activeField,\n  onFieldSelect,\n  orderHeading,\n  sortHeading,\n}: SortMenuProps<TField>): React.JSX.Element {\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={close}\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n      slotProps={{ paper: { sx: { minWidth: 180 } } }}\n    >\n      {orderOptions.length > 0 && [\n        <ListSubheader key=\"order-label\" sx={sectionLabelSx}>\n          {orderHeading}\n        </ListSubheader>,\n        ...orderOptions.map((option) => (\n          <SortRow\n            key={`order-${option.value}`}\n            value={option.value}\n            label={option.label}\n            checked={activeOrderValue === option.value}\n            onSelect={() => onOrderSelect(option.value)}\n          />\n        )),\n        <Divider key=\"order-divider\" />,\n      ]}\n      <ListSubheader sx={sectionLabelSx}>{sortHeading}</ListSubheader>\n      {fields.map((field) => (\n        <SortRow\n          key={field.value}\n          value={field.value}\n          label={field.label}\n          checked={activeField === field.value}\n          onSelect={() => onFieldSelect(field.value)}\n        />\n      ))}\n    </Menu>\n  );\n}\n\n/**\n * Generic \"Sort By\" dropdown: a \"Sort By:\" label + a trigger whose menu has an\n * **Order** section (direction within the active field) and a **Sort** section\n * (which field). The Order section is hidden when the field defines no order\n * options. Faithful MUI port of the reference control.\n */\nexport function SortByDropdown<TField extends string = string>({\n  fields,\n  activeField,\n  activeOrder,\n  onFieldChange,\n  onOrderChange,\n  orderHeading,\n  sortHeading,\n  triggerPrefix,\n  'data-testid': testId,\n}: SortByDropdownProps<TField>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = (): void => setAnchorEl(null);\n\n  const safeFields = fields ?? [];\n  const activeFieldDef = findActiveField(fields, activeField);\n  const orderOptions = activeFieldDef?.orderOptions ?? [];\n  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);\n  const trigger = resolveTriggerParts(activeFieldDef, activeOrderOption, orderOptions);\n\n  function handleFieldChange(field: TField): void {\n    // Switch field in ONE callback. Previously this also fired `onOrderChange`\n    // to reset the order, but a consumer whose `onOrderChange` derives the field\n    // from its own (now-stale) prop would re-apply the OLD field — silently\n    // reverting the field change (e.g. picking \"E-mail\" snapped back to \"Nome\").\n    // The field-change consumer owns the resulting order.\n    onFieldChange(field);\n    close();\n  }\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>\n      <Typography\n        component=\"span\"\n        sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: '0.875rem' }}\n      >\n        {triggerPrefix}\n      </Typography>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        data-testid={testId}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}\n      >\n        {/* Full \"Nome (crescente)\" on md+; just the field name on mobile — the\n            arrow already conveys the direction, so the parenthetical is dropped. */}\n        <Box component=\"span\" sx={{ display: { xs: 'none', md: 'inline' } }}>\n          {trigger.full}\n        </Box>\n        <Box component=\"span\" sx={{ display: { xs: 'inline', md: 'none' } }}>\n          {trigger.short}\n        </Box>\n        {trigger.arrowSuffix}\n        <ChevronDownIcon sx={{ fontSize: 14 }} />\n      </Button>\n      <SortMenu\n        orderHeading={orderHeading}\n        sortHeading={sortHeading}\n        anchorEl={anchorEl}\n        open={open}\n        close={close}\n        orderOptions={orderOptions}\n        activeOrderValue={activeOrderOption?.value}\n        onOrderSelect={(value) => {\n          onOrderChange?.(value);\n          close();\n        }}\n        fields={safeFields}\n        activeField={activeField}\n        onFieldSelect={handleFieldChange}\n      />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-WQSL6MCA.js

@@ -0,0 +1,288 @@
+import {
+  TABLE_DEFAULTS,
+  definedProps
+} from "./chunk-MTFCPPZ5.js";
+import {
+  EmptyRow,
+  NoDataPlaceholder
+} from "./chunk-XIXR2L3L.js";
+import {
+  EnhancedTableBody,
+  EnhancedTableHeader
+} from "./chunk-ULTOQ6ZV.js";
+import {
+  useTableSelection
+} from "./chunk-DF4K5XVW.js";
+import {
+  tableStyles
+} from "./chunk-P2PDDFMM.js";
+
+// src/components/data-display/Table/Table.tsx
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import Box from "@mui/material/Box/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Skeleton from "@mui/material/Skeleton/index.js";
+import Switch from "@mui/material/Switch/index.js";
+import MuiTable from "@mui/material/Table/index.js";
+import TableBody from "@mui/material/TableBody/index.js";
+import TableCell from "@mui/material/TableCell/index.js";
+import TableContainer from "@mui/material/TableContainer/index.js";
+import TableRow from "@mui/material/TableRow/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StyledTableContainer = styled(TableContainer, {
+  shouldForwardProp: (prop) => !["virtualScrolling", "containerHeight"].includes(prop)
+})(({ virtualScrolling, containerHeight }) => ({
+  ...virtualScrolling && {
+    height: containerHeight || 400,
+    overflow: "auto"
+  }
+}));
+var StyledTable = styled(MuiTable, {
+  shouldForwardProp: (prop) => !["customVariant", "glow", "pulse", "hoverable", "density", "stickyHeader", "stripeColor"].includes(prop)
+})(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = "neutral" }) => {
+  return tableStyles({
+    theme,
+    customVariant,
+    glow,
+    pulse,
+    hoverable,
+    density,
+    stickyHeader,
+    stripeColor
+  });
+});
+var TableShell = ({
+  innerRef,
+  variant,
+  stripeColor,
+  glow,
+  pulse,
+  hoverable,
+  density,
+  stickyHeader,
+  header,
+  rest,
+  children
+}) => /* @__PURE__ */ jsx(StyledTableContainer, { children: /* @__PURE__ */ jsxs(
+  StyledTable,
+  {
+    ref: innerRef,
+    customVariant: variant,
+    stripeColor,
+    glow,
+    pulse,
+    hoverable,
+    density,
+    stickyHeader,
+    ...rest,
+    children: [
+      header,
+      children
+    ]
+  }
+) });
+var SKELETON_ROW_COUNT = 5;
+var LoadingSkeletonRows = ({ columns }) => /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => /* @__PURE__ */ jsx(TableRow, { children: columns?.map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { height: 20 }) }, column.key)) }, index)) });
+var ColumnToggleMenu = ({ columns, hiddenColumns, anchor, setAnchor, setHiddenColumns }) => /* @__PURE__ */ jsxs(Box, { position: "absolute", top: 8, right: 8, children: [
+  /* @__PURE__ */ jsx(IconButton, { onClick: (event) => setAnchor(event.currentTarget), size: "small", children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }),
+  /* @__PURE__ */ jsx(Menu, { anchorEl: anchor, open: Boolean(anchor), onClose: () => setAnchor(null), children: columns.map((column, index) => /* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: !hiddenColumns.includes(index),
+          onChange: (event) => setHiddenColumns(
+            event.target.checked ? hiddenColumns.filter((i) => i !== index) : [...hiddenColumns, index]
+          ),
+          size: "small"
+        }
+      ),
+      label: column.label
+    }
+  ) }, column.key)) })
+] });
+var columnsFor = (resolved, selection) => (resolved.responsive ? selection.visibleColumns : resolved.columns) ?? [];
+var showsColumnToggle = (resolved, selection) => Boolean(
+  resolved.responsive && selection.isMobile && resolved.showColumnToggle && selection.hiddenColumns.length > 0
+);
+var AdvancedTable = ({ resolved: p, selection, innerRef, rest }) => {
+  const finalColumns = columnsFor(p, selection);
+  const showToggle = showsColumnToggle(p, selection);
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+    /* @__PURE__ */ jsx(
+      StyledTableContainer,
+      {
+        virtualScrolling: p.virtualScrolling,
+        containerHeight: p.containerHeight,
+        children: /* @__PURE__ */ jsxs(
+          StyledTable,
+          {
+            ref: innerRef,
+            customVariant: p.variant,
+            stripeColor: p.stripeColor,
+            glow: p.glow,
+            pulse: p.pulse,
+            hoverable: p.hoverable,
+            density: p.density,
+            stickyHeader: p.stickyHeader,
+            ...rest,
+            children: [
+              /* @__PURE__ */ jsx(
+                EnhancedTableHeader,
+                {
+                  columns: finalColumns,
+                  data: p.data ?? [],
+                  sortable: p.sortable,
+                  sortConfig: p.sortConfig,
+                  onSortChange: p.onSortChange,
+                  selectable: p.selectable,
+                  selectedRows: p.selectedRows,
+                  onSelectAll: selection.handleSelectAll,
+                  density: p.density,
+                  stickyHeader: p.stickyHeader
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EnhancedTableBody,
+                {
+                  data: p.data ?? [],
+                  columns: finalColumns,
+                  selectedRows: p.selectedRows,
+                  onRowClick: p.onRowClick,
+                  onRowFocus: p.onRowFocus,
+                  onRowBlur: p.onRowBlur,
+                  onSelectionChange: selection.handleSelectionChange,
+                  rowKeyExtractor: p.rowKeyExtractor,
+                  density: p.density,
+                  selectable: p.selectable,
+                  hoverable: p.hoverable,
+                  renderRow: p.renderRow,
+                  renderCell: p.renderCell,
+                  virtualScrolling: p.virtualScrolling,
+                  containerHeight: typeof p.containerHeight === "number" ? p.containerHeight : void 0,
+                  rowHeight: p.rowHeight,
+                  overscan: p.overscan
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    showToggle && /* @__PURE__ */ jsx(
+      ColumnToggleMenu,
+      {
+        columns: p.columns ?? [],
+        hiddenColumns: selection.hiddenColumns,
+        anchor: selection.columnMenuAnchor,
+        setAnchor: selection.setColumnMenuAnchor,
+        setHiddenColumns: selection.setHiddenColumns
+      }
+    )
+  ] });
+};
+var buildShell = ({
+  resolved,
+  selection,
+  innerRef,
+  rest,
+  finalColumns
+}) => ({
+  innerRef,
+  variant: resolved.variant,
+  stripeColor: resolved.stripeColor,
+  glow: resolved.glow,
+  pulse: resolved.pulse,
+  hoverable: resolved.hoverable,
+  density: resolved.density,
+  stickyHeader: resolved.stickyHeader,
+  header: resolved.columns ? /* @__PURE__ */ jsx(
+    EnhancedTableHeader,
+    {
+      columns: finalColumns ?? [],
+      data: [],
+      sortable: resolved.sortable,
+      sortConfig: resolved.sortConfig,
+      onSortChange: resolved.onSortChange,
+      selectable: resolved.selectable,
+      selectedRows: resolved.selectedRows,
+      onSelectAll: selection.handleSelectAll,
+      density: resolved.density,
+      stickyHeader: resolved.stickyHeader
+    }
+  ) : null,
+  rest
+});
+var TableLoadingState = ({ shell, loadingComponent, columns }) => /* @__PURE__ */ jsx(TableShell, { ...shell, children: /* @__PURE__ */ jsx(TableBody, { "data-testid": "table-loading", children: loadingComponent || /* @__PURE__ */ jsx(LoadingSkeletonRows, { columns }) }) });
+var TableEmptyState = ({ shell, emptyStateComponent, emptyText, colSpan }) => /* @__PURE__ */ jsx(TableShell, { ...shell, children: /* @__PURE__ */ jsx(EmptyRow, { colSpan, children: emptyStateComponent || /* @__PURE__ */ jsx(NoDataPlaceholder, { emptyText }) }) });
+var Table = React.forwardRef(
+  (tableProps, ref) => {
+    const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) };
+    const {
+      columns,
+      data,
+      responsive,
+      loading,
+      loadingComponent,
+      emptyStateComponent,
+      emptyText,
+      children,
+      ...props
+    } = resolved;
+    const selection = useTableSelection({
+      columns,
+      data,
+      responsive,
+      columnPriorities: resolved.columnPriorities,
+      selectedRows: resolved.selectedRows ?? [],
+      rowKeyExtractor: resolved.rowKeyExtractor,
+      onSelectionChange: resolved.onSelectionChange
+    });
+    const rest = props;
+    const renderer = { resolved, selection, innerRef: ref, rest };
+    const finalColumns = responsive ? selection.visibleColumns : columns;
+    const shell = buildShell({ ...renderer, finalColumns });
+    if (loading) {
+      return /* @__PURE__ */ jsx(TableLoadingState, { shell, loadingComponent, columns });
+    }
+    if (data && data.length === 0) {
+      return /* @__PURE__ */ jsx(
+        TableEmptyState,
+        {
+          shell,
+          emptyStateComponent,
+          emptyText,
+          colSpan: finalColumns?.length || 1
+        }
+      );
+    }
+    if (columns && data) return /* @__PURE__ */ jsx(AdvancedTable, { ...renderer });
+    return /* @__PURE__ */ jsx(
+      StyledTable,
+      {
+        ref,
+        customVariant: resolved.variant,
+        stripeColor: resolved.stripeColor,
+        glow: resolved.glow,
+        pulse: resolved.pulse,
+        hoverable: resolved.hoverable,
+        density: resolved.density,
+        stickyHeader: resolved.stickyHeader,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+
+export {
+  Table
+};
+//# sourceMappingURL=chunk-WQSL6MCA.js.map

package/dist/chunk-WQSL6MCA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Table/Table.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert';\nimport Box from '@mui/material/Box/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Menu from '@mui/material/Menu/index.js';\nimport MenuItem from '@mui/material/MenuItem/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Switch from '@mui/material/Switch/index.js';\nimport MuiTable from '@mui/material/Table/index.js';\nimport TableBody from '@mui/material/TableBody/index.js';\nimport TableCell from '@mui/material/TableCell/index.js';\nimport TableContainer from '@mui/material/TableContainer/index.js';\nimport TableRow from '@mui/material/TableRow/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  ColumnConfig,\n  TableDensity,\n  TableProps,\n  TableStripeColor} from './Table.types';\nimport { TABLE_DEFAULTS, definedProps } from './Table.helpers';\nimport { useTableSelection } from './Table.hooks';\nimport { EnhancedTableBody, EnhancedTableHeader } from './TableParts';\nimport { EmptyRow, NoDataPlaceholder } from './TableStates';\nimport {\n  tableStyles } from './Table.styles';\n\n// Define pulse animation\nconst StyledTableContainer = styled(TableContainer, {\n  shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ \n  virtualScrolling?: boolean; \n  containerHeight?: number | string;\n}>(({ virtualScrolling, containerHeight }) => ({\n  ...(virtualScrolling && {\n    height: containerHeight || 400,\n    overflow: 'auto' }) }));\n\n// Helper function to get stripe color from theme\nconst StyledTable = styled(MuiTable, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'glow', 'pulse', 'hoverable', 'density', 'stickyHeader', 'stripeColor'].includes(prop as string) })<{\n  customVariant?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  stripeColor?: TableStripeColor;\n}>(({ theme, customVariant, glow, pulse, hoverable, density, stickyHeader, stripeColor = 'neutral' }) => {\n  return tableStyles({\n    theme,\n    customVariant,\n    glow,\n    pulse,\n    hoverable,\n    density,\n    stickyHeader,\n    stripeColor });\n});\n\n// Virtual Scrolling Hook\nconst TableShell: React.FC<{\n  innerRef: React.Ref<globalThis.HTMLTableElement>;\n  variant?: string;\n  stripeColor?: TableStripeColor;\n  glow?: boolean;\n  pulse?: boolean;\n  hoverable?: boolean;\n  density?: TableDensity;\n  stickyHeader?: boolean;\n  header: React.ReactNode;\n  rest: Record<string, unknown>;\n  children: React.ReactNode;\n}> = ({\n  innerRef,\n  variant,\n  stripeColor,\n  glow,\n  pulse,\n  hoverable,\n  density,\n  stickyHeader,\n  header,\n  rest,\n  children }) => (\n  <StyledTableContainer>\n    <StyledTable\n      ref={innerRef}\n      customVariant={variant}\n      stripeColor={stripeColor}\n      glow={glow}\n      pulse={pulse}\n      hoverable={hoverable}\n      density={density}\n      stickyHeader={stickyHeader}\n      {...rest}\n    >\n      {header}\n      {children}\n    </StyledTable>\n  </StyledTableContainer>\n);\n\nconst SKELETON_ROW_COUNT = 5;\n\nconst LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => (\n  <>\n    {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (\n      <TableRow key={index}>\n        {columns?.map((column) => (\n          <TableCell key={column.key}>\n            <Skeleton height={20} />\n          </TableCell>\n        ))}\n      </TableRow>\n    ))}\n  </>\n);\n\nexport type TableShellProps = Omit<React.ComponentProps<typeof TableShell>, 'children'>;\n\ntype Selection = ReturnType<typeof useTableSelection>;\n\ninterface RendererProps {\n  resolved: TableProps;\n  selection: Selection;\n  innerRef: React.Ref<globalThis.HTMLTableElement>;\n  rest: Record<string, unknown>;\n}\n\n// The column-visibility control, shown only when responsive mode has actually\n// hidden something on a narrow viewport.\nconst ColumnToggleMenu: React.FC<{\n  columns: ColumnConfig[];\n  hiddenColumns: number[];\n  anchor: HTMLElement | null;\n  setAnchor: (element: HTMLElement | null) => void;\n  setHiddenColumns: (next: number[]) => void;\n}> = ({ columns, hiddenColumns, anchor, setAnchor, setHiddenColumns }) => (\n  <Box position=\"absolute\" top={8} right={8}>\n    <IconButton onClick={(event) => setAnchor(event.currentTarget)} size=\"small\">\n      <MoreVertIcon />\n    </IconButton>\n    <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)}>\n      {columns.map((column, index) => (\n        <MenuItem key={column.key}>\n          <FormControlLabel\n            control={\n              <Switch\n                checked={!hiddenColumns.includes(index)}\n                onChange={(event) =>\n                  setHiddenColumns(\n                    event.target.checked\n                      ? hiddenColumns.filter((i: number) => i !== index)\n                      : [...hiddenColumns, index],\n                  )\n                }\n                size=\"small\"\n              />\n            }\n            label={column.label}\n          />\n        </MenuItem>\n      ))}\n    </Menu>\n  </Box>\n);\n\n// The populated table. Local because StyledTableContainer and StyledTable\n// cannot cross a module boundary (TS2742).\nconst columnsFor = (resolved: TableProps, selection: Selection): ColumnConfig[] =>\n  (resolved.responsive ? selection.visibleColumns : resolved.columns) ?? [];\n\n// The toggle only earns its place when responsive mode has actually hidden\n// something on a narrow viewport.\nconst showsColumnToggle = (resolved: TableProps, selection: Selection): boolean =>\n  Boolean(\n    resolved.responsive &&\n      selection.isMobile &&\n      resolved.showColumnToggle &&\n      selection.hiddenColumns.length > 0,\n  );\n\nconst AdvancedTable: React.FC<RendererProps> = ({ resolved: p, selection, innerRef, rest }) => {\n  const finalColumns = columnsFor(p, selection);\n  const showToggle = showsColumnToggle(p, selection);\n\n  return (\n    <Box position=\"relative\">\n      <StyledTableContainer\n        virtualScrolling={p.virtualScrolling}\n        containerHeight={p.containerHeight}\n      >\n        <StyledTable\n          ref={innerRef}\n          customVariant={p.variant}\n          stripeColor={p.stripeColor}\n          glow={p.glow}\n          pulse={p.pulse}\n          hoverable={p.hoverable}\n          density={p.density}\n          stickyHeader={p.stickyHeader}\n          {...rest}\n        >\n          <EnhancedTableHeader\n            columns={finalColumns}\n            data={p.data ?? []}\n            sortable={p.sortable}\n            sortConfig={p.sortConfig}\n            onSortChange={p.onSortChange}\n            selectable={p.selectable}\n            selectedRows={p.selectedRows}\n            onSelectAll={selection.handleSelectAll}\n            density={p.density}\n            stickyHeader={p.stickyHeader}\n          />\n          <EnhancedTableBody\n            data={p.data ?? []}\n            columns={finalColumns}\n            selectedRows={p.selectedRows}\n            onRowClick={p.onRowClick}\n            onRowFocus={p.onRowFocus}\n            onRowBlur={p.onRowBlur}\n            onSelectionChange={selection.handleSelectionChange}\n            rowKeyExtractor={p.rowKeyExtractor}\n            density={p.density}\n            selectable={p.selectable}\n            hoverable={p.hoverable}\n            renderRow={p.renderRow}\n            renderCell={p.renderCell}\n            virtualScrolling={p.virtualScrolling}\n            containerHeight={typeof p.containerHeight === 'number' ? p.containerHeight : undefined}\n            rowHeight={p.rowHeight}\n            overscan={p.overscan}\n          />\n        </StyledTable>\n      </StyledTableContainer>\n\n      {showToggle && (\n        <ColumnToggleMenu\n          columns={p.columns ?? []}\n          hiddenColumns={selection.hiddenColumns}\n          anchor={selection.columnMenuAnchor}\n          setAnchor={selection.setColumnMenuAnchor}\n          setHiddenColumns={selection.setHiddenColumns}\n        />\n      )}\n    </Box>\n  );\n};\n\n// The loading and empty states render the same shell as the populated table, so\n// they share TableShell rather than repeating it three times.\nconst buildShell = ({\n  resolved,\n  selection,\n  innerRef,\n  rest,\n  finalColumns }: RendererProps & { finalColumns?: ColumnConfig[] }) => ({\n  innerRef,\n  variant: resolved.variant,\n  stripeColor: resolved.stripeColor,\n  glow: resolved.glow,\n  pulse: resolved.pulse,\n  hoverable: resolved.hoverable,\n  density: resolved.density,\n  stickyHeader: resolved.stickyHeader,\n  header: resolved.columns ? (\n    <EnhancedTableHeader\n      columns={finalColumns ?? []}\n      data={[]}\n      sortable={resolved.sortable}\n      sortConfig={resolved.sortConfig}\n      onSortChange={resolved.onSortChange}\n      selectable={resolved.selectable}\n      selectedRows={resolved.selectedRows}\n      onSelectAll={selection.handleSelectAll}\n      density={resolved.density}\n      stickyHeader={resolved.stickyHeader}\n    />\n  ) : null,\n  rest: rest as Record<string, unknown> });\n\nconst TableLoadingState: React.FC<{\n  shell: TableShellProps;\n  loadingComponent?: React.ReactNode;\n  columns?: ColumnConfig[];\n}> = ({ shell, loadingComponent, columns }) => (\n  <TableShell {...shell}>\n    <TableBody data-testid=\"table-loading\">\n      {loadingComponent || <LoadingSkeletonRows columns={columns} />}\n    </TableBody>\n  </TableShell>\n);\n\nconst TableEmptyState: React.FC<{\n  shell: TableShellProps;\n  emptyStateComponent?: React.ReactNode;\n  emptyText: string;\n  colSpan: number;\n}> = ({ shell, emptyStateComponent, emptyText, colSpan }) => (\n  <TableShell {...shell}>\n    <EmptyRow colSpan={colSpan}>\n      {emptyStateComponent || <NoDataPlaceholder emptyText={emptyText} />}\n    </EmptyRow>\n  </TableShell>\n);\n\nexport const Table = React.forwardRef<globalThis.HTMLTableElement, TableProps>(\n  (tableProps, ref) => {\n    const resolved = { ...TABLE_DEFAULTS, ...definedProps(tableProps) } as TableProps;\n    const {\n      columns,\n      data,\n      responsive,\n      loading,\n      loadingComponent,\n      emptyStateComponent,\n      emptyText,\n      children,\n      ...props\n    } = resolved;\n\n    const selection = useTableSelection({\n      columns,\n      data,\n      responsive,\n      columnPriorities: resolved.columnPriorities,\n      selectedRows: resolved.selectedRows ?? [],\n      rowKeyExtractor: resolved.rowKeyExtractor,\n      onSelectionChange: resolved.onSelectionChange });\n\n    const rest = props as unknown as Record<string, unknown>;\n    const renderer: RendererProps = { resolved, selection, innerRef: ref, rest };\n    const finalColumns = responsive ? selection.visibleColumns : columns;\n    const shell = buildShell({ ...renderer, finalColumns });\n\n    if (loading) {\n      return (\n        <TableLoadingState shell={shell} loadingComponent={loadingComponent} columns={columns} />\n      );\n    }\n\n    if (data && data.length === 0) {\n      return (\n        <TableEmptyState\n          shell={shell}\n          emptyStateComponent={emptyStateComponent}\n          emptyText={emptyText}\n          colSpan={finalColumns?.length || 1}\n        />\n      );\n    }\n\n    if (columns && data) return <AdvancedTable {...renderer} />;\n\n    // Basic table (backward compatibility)\n    return (\n      <StyledTable\n        ref={ref}\n        customVariant={resolved.variant}\n        stripeColor={resolved.stripeColor}\n        glow={resolved.glow}\n        pulse={resolved.pulse}\n        hoverable={resolved.hoverable}\n        density={resolved.density}\n        stickyHeader={resolved.stickyHeader}\n        {...rest}\n      >\n        {children}\n      </StyledTable>\n    );\n  },\n);\n\nTable.displayName = 'Table';"],"mappings":"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","names":[]}

package/dist/chunk-WUTHROII.js

@@ -0,0 +1,175 @@
+import {
+  dimmedStyles,
+  regionAttrs,
+  transitionSettings,
+  triggerStyles
+} from "./chunk-TVL5V2JK.js";
+
+// src/components/layout/Collapsible/Collapsible.tsx
+import Box from "@mui/material/Box/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var useMeasuredHeight = (open, maxHeight, children) => {
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState("auto");
+  const measureHeight = useCallback(() => {
+    if (contentRef.current) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);
+    }
+  }, [maxHeight]);
+  useEffect(() => {
+    if (!open) {
+      setHeight(0);
+    } else if (contentRef.current) {
+      measureHeight();
+    }
+  }, [open, measureHeight, children]);
+  return { contentRef, height };
+};
+var DefaultCollapsible = ({
+  children,
+  open,
+  duration,
+  disabled,
+  keepMounted,
+  maxHeight,
+  sx,
+  className,
+  dataTestId,
+  transition: _transition,
+  easing: _easing,
+  ...otherProps
+}) => /* @__PURE__ */ jsx(
+  Collapse,
+  {
+    in: open && !disabled,
+    timeout: disabled ? 0 : duration,
+    sx: {
+      ...dimmedStyles(disabled),
+      ...maxHeight && { maxHeight, overflow: "hidden" },
+      ...sx
+    },
+    className,
+    unmountOnExit: !keepMounted,
+    ...regionAttrs({ open, disabled, dataTestId }),
+    ...otherProps,
+    children: /* @__PURE__ */ jsx(Box, { children })
+  }
+);
+var AnimatedCollapsible = ({
+  children,
+  open,
+  disabled,
+  keepMounted,
+  maxHeight,
+  transition,
+  sx,
+  className,
+  dataTestId,
+  duration: _duration,
+  easing: _easing,
+  ...otherProps
+}) => {
+  const { contentRef, height } = useMeasuredHeight(open, maxHeight, children);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "div",
+      sx: {
+        overflow: "hidden",
+        height: open && !disabled ? height : 0,
+        transition: disabled ? "none" : `height ${transition.duration}ms ${transition.easing}`,
+        willChange: disabled ? "auto" : "height",
+        ...dimmedStyles(disabled),
+        ...sx
+      },
+      className,
+      ...regionAttrs({ open, disabled, dataTestId }),
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Box, { ref: contentRef, children: (keepMounted || open && !disabled) && children })
+    }
+  );
+};
+var Collapsible = ({
+  variant = "default",
+  duration = 300,
+  easing,
+  onToggle,
+  disabled = false,
+  keepMounted = false,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const { open } = rest;
+  useEffect(() => {
+    if (onToggle && !disabled) {
+      onToggle(open);
+    }
+  }, [open, onToggle, disabled]);
+  const variantProps = {
+    ...rest,
+    duration,
+    easing,
+    disabled,
+    keepMounted,
+    transition: transitionSettings(theme, variant, duration, easing)
+  };
+  return variant === "default" ? /* @__PURE__ */ jsx(DefaultCollapsible, { ...variantProps }) : /* @__PURE__ */ jsx(AnimatedCollapsible, { ...variantProps });
+};
+var CollapsibleTrigger = ({
+  children,
+  onClick,
+  disabled = false,
+  expanded = false,
+  className,
+  dataTestId,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "button",
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      className,
+      "data-testid": dataTestId,
+      "aria-expanded": expanded,
+      "aria-disabled": disabled,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "data-state": expanded ? "open" : "closed",
+      sx: triggerStyles(theme, { disabled, expanded }),
+      ...otherProps,
+      children
+    }
+  );
+};
+var CollapsibleContent = ({
+  children,
+  className,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      sx: {
+        padding: theme.spacing(2)
+      },
+      ...otherProps,
+      children
+    }
+  );
+};
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent
+};
+//# sourceMappingURL=chunk-WUTHROII.js.map

package/dist/chunk-WUTHROII.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Collapsible/Collapsible.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Collapse from '@mui/material/Collapse/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback,useEffect, useRef, useState } from 'react';\n\nimport {\n  dimmedStyles,\n  regionAttrs,\n  transitionSettings,\n  triggerStyles,\n} from './Collapsible.helpers';\nimport type { CollapsibleContentProps,CollapsibleProps, CollapsibleTriggerProps } from './Collapsible.types';\n\n/**\n * The smooth and spring variants animate an explicit pixel height, so the content\n * has to be measured after every render that could have changed it.\n */\nconst useMeasuredHeight = (\n  open: boolean,\n  maxHeight: number | undefined,\n  children: React.ReactNode,\n) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState<number | 'auto'>('auto');\n\n  const measureHeight = useCallback(() => {\n    if (contentRef.current) {\n      const scrollHeight = contentRef.current.scrollHeight;\n      // Cap at maxHeight if provided\n      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);\n    }\n  }, [maxHeight]);\n\n  useEffect(() => {\n    if (!open) {\n      setHeight(0);\n    } else if (contentRef.current) {\n      measureHeight();\n    }\n  }, [open, measureHeight, children]);\n\n  return { contentRef, height };\n};\n\ntype VariantProps = Omit<CollapsibleProps, 'variant' | 'onToggle'> & {\n  duration: number;\n  disabled: boolean;\n  keepMounted: boolean;\n  transition: { duration: number; easing: string };\n};\n\n// Use MUI's built-in Collapse for the default variant.\nconst DefaultCollapsible: React.FC<VariantProps> = ({\n  children,\n  open,\n  duration,\n  disabled,\n  keepMounted,\n  maxHeight,\n  sx,\n  className,\n  dataTestId,\n  transition: _transition,\n  easing: _easing,\n  ...otherProps\n}) => (\n  <Collapse\n    in={open && !disabled}\n    timeout={disabled ? 0 : duration}\n    sx={{\n      ...dimmedStyles(disabled),\n      ...(maxHeight && { maxHeight, overflow: 'hidden' }),\n      ...sx,\n    }}\n    className={className}\n    unmountOnExit={!keepMounted}\n    {...regionAttrs({ open, disabled, dataTestId })}\n    {...otherProps}\n  >\n    <Box>{children}</Box>\n  </Collapse>\n);\n\nconst AnimatedCollapsible: React.FC<VariantProps> = ({\n  children,\n  open,\n  disabled,\n  keepMounted,\n  maxHeight,\n  transition,\n  sx,\n  className,\n  dataTestId,\n  duration: _duration,\n  easing: _easing,\n  ...otherProps\n}) => {\n  const { contentRef, height } = useMeasuredHeight(open, maxHeight, children);\n\n  return (\n    <Box\n      component=\"div\"\n      sx={{\n        overflow: 'hidden',\n        height: open && !disabled ? height : 0,\n        transition: disabled ? 'none' : `height ${transition.duration}ms ${transition.easing}`,\n        willChange: disabled ? 'auto' : 'height',\n        ...dimmedStyles(disabled),\n        ...sx,\n      }}\n      className={className}\n      {...regionAttrs({ open, disabled, dataTestId })}\n      {...otherProps}\n    >\n      <Box ref={contentRef}>{(keepMounted || (open && !disabled)) && children}</Box>\n    </Box>\n  );\n};\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  variant = 'default',\n  duration = 300,\n  easing,\n  onToggle,\n  disabled = false,\n  keepMounted = false,\n  ...rest\n}) => {\n  const theme = useTheme();\n  const { open } = rest;\n\n  // Trigger onToggle callback when open state changes\n  useEffect(() => {\n    if (onToggle && !disabled) {\n      onToggle(open);\n    }\n  }, [open, onToggle, disabled]);\n\n  const variantProps: VariantProps = {\n    ...rest,\n    duration,\n    easing,\n    disabled,\n    keepMounted,\n    transition: transitionSettings(theme, variant, duration, easing),\n  };\n\n  return variant === 'default' ? (\n    <DefaultCollapsible {...variantProps} />\n  ) : (\n    <AnimatedCollapsible {...variantProps} />\n  );\n};\n\nexport const CollapsibleTrigger: React.FC<CollapsibleTriggerProps> = ({\n  children,\n  onClick,\n  disabled = false,\n  expanded = false,\n  className,\n  dataTestId,\n  ...otherProps\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      component=\"button\"\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      className={className}\n      data-testid={dataTestId}\n      aria-expanded={expanded}\n      aria-disabled={disabled}\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      data-state={expanded ? 'open' : 'closed'}\n      sx={triggerStyles(theme, { disabled, expanded })}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n};\n\nexport const CollapsibleContent: React.FC<CollapsibleContentProps> = ({\n  children,\n  className,\n  ...otherProps\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      className={className}\n      sx={{\n        padding: theme.spacing(2),\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,cAAc;AACrB,SAAS,gBAAgB;AACzB,SAAgB,aAAY,WAAW,QAAQ,gBAAgB;AA4E3D;AA9DJ,IAAM,oBAAoB,CACxB,MACA,WACA,aACG;AACH,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0B,MAAM;AAE5D,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,WAAW,SAAS;AACtB,YAAM,eAAe,WAAW,QAAQ;AAExC,gBAAU,YAAY,KAAK,IAAI,cAAc,SAAS,IAAI,YAAY;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,gBAAU,CAAC;AAAA,IACb,WAAW,WAAW,SAAS;AAC7B,oBAAc;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,MAAM,eAAe,QAAQ,CAAC;AAElC,SAAO,EAAE,YAAY,OAAO;AAC9B;AAUA,IAAM,qBAA6C,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,GAAG;AACL,MACE;AAAA,EAAC;AAAA;AAAA,IACC,IAAI,QAAQ,CAAC;AAAA,IACb,SAAS,WAAW,IAAI;AAAA,IACxB,IAAI;AAAA,MACF,GAAG,aAAa,QAAQ;AAAA,MACxB,GAAI,aAAa,EAAE,WAAW,UAAU,SAAS;AAAA,MACjD,GAAG;AAAA,IACL;AAAA,IACA;AAAA,IACA,eAAe,CAAC;AAAA,IACf,GAAG,YAAY,EAAE,MAAM,UAAU,WAAW,CAAC;AAAA,IAC7C,GAAG;AAAA,IAEJ,8BAAC,OAAK,UAAS;AAAA;AACjB;AAGF,IAAM,sBAA8C,CAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,YAAY,OAAO,IAAI,kBAAkB,MAAM,WAAW,QAAQ;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,IAAI;AAAA,QACF,UAAU;AAAA,QACV,QAAQ,QAAQ,CAAC,WAAW,SAAS;AAAA,QACrC,YAAY,WAAW,SAAS,UAAU,WAAW,QAAQ,MAAM,WAAW,MAAM;AAAA,QACpF,YAAY,WAAW,SAAS;AAAA,QAChC,GAAG,aAAa,QAAQ;AAAA,QACxB,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG,YAAY,EAAE,MAAM,UAAU,WAAW,CAAC;AAAA,MAC7C,GAAG;AAAA,MAEJ,8BAAC,OAAI,KAAK,YAAc,0BAAgB,QAAQ,CAAC,aAAc,UAAS;AAAA;AAAA,EAC1E;AAEJ;AAEO,IAAM,cAA0C,CAAC;AAAA,EACtD,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,KAAK,IAAI;AAGjB,YAAU,MAAM;AACd,QAAI,YAAY,CAAC,UAAU;AACzB,eAAS,IAAI;AAAA,IACf;AAAA,EACF,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,QAAM,eAA6B;AAAA,IACjC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,mBAAmB,OAAO,SAAS,UAAU,MAAM;AAAA,EACjE;AAEA,SAAO,YAAY,YACjB,oBAAC,sBAAoB,GAAG,cAAc,IAEtC,oBAAC,uBAAqB,GAAG,cAAc;AAE3C;AAEO,IAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,WAAW,SAAY;AAAA,MAChC;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,MAAK;AAAA,MACL,UAAU,WAAW,KAAK;AAAA,MAC1B,cAAY,WAAW,SAAS;AAAA,MAChC,IAAI,cAAc,OAAO,EAAE,UAAU,SAAS,CAAC;AAAA,MAC9C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEO,IAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI;AAAA,QACF,SAAS,MAAM,QAAQ,CAAC;AAAA,MAC1B;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-WXD7MGBT.js

@@ -0,0 +1,100 @@
+// src/components/layout/ContentToolbar/ViewSelector.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import GridIcon from "@mui/icons-material/GridViewOutlined";
+import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Slider from "@mui/material/Slider/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VIEW_OPTIONS = [
+  { value: "grid", label: "Grid View", icon: GridIcon },
+  { value: "list", label: "List View", icon: ListIcon }
+];
+function ViewSelector({
+  viewMode,
+  onViewModeChange,
+  zoom,
+  onZoomChange,
+  cardSizeLabel
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
+  const ActiveIcon = activeOption.icon;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+    viewMode === "grid" && /* @__PURE__ */ jsx(Box, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+      Slider,
+      {
+        "data-testid": "resize-card-slider",
+        "aria-label": cardSizeLabel,
+        value: zoom[0] ?? 0,
+        onChange: (_, value) => onZoomChange([value]),
+        min: 0,
+        max: 100,
+        step: 1,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-testid": "view-mode-btn",
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "aria-label": activeOption.label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: 32, px: 1, gap: 1, color: "text.secondary" },
+        children: [
+          /* @__PURE__ */ jsx(ActiveIcon, { sx: { fontSize: 16 } }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: () => setAnchorEl(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 180 } } },
+        children: VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const selected = viewMode === option.value;
+          return /* @__PURE__ */ jsxs(
+            MenuItem,
+            {
+              "data-testid": `view-mode-${option.value}`,
+              onClick: () => {
+                onViewModeChange(option.value);
+                setAnchorEl(null);
+              },
+              sx: { gap: 1.5 },
+              children: [
+                /* @__PURE__ */ jsx(ListItemText, { children: option.label }),
+                /* @__PURE__ */ jsx(OptionIcon, { sx: { fontSize: 16, color: "text.secondary" } }),
+                /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: 16, color: selected ? "text.primary" : "transparent" } }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export {
+  ViewSelector
+};
+//# sourceMappingURL=chunk-WXD7MGBT.js.map