@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-WLDK74RR.js

@@ -0,0 +1,305 @@
+import {
+  commandPaperStyles,
+  commandSizeStyles
+} from "./chunk-RIAIJTEW.js";
+import {
+  CommandEmpty,
+  CommandLoading
+} from "./chunk-CMK4DJDR.js";
+import {
+  resolveCommandProps,
+  useCommandPalette
+} from "./chunk-6DN4ZULV.js";
+
+// src/components/form/Command/Command.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Chip from "@mui/material/Chip/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import Fade from "@mui/material/Fade/index.js";
+import Grow from "@mui/material/Grow/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputAdornment from "@mui/material/InputAdornment/index.js";
+import List from "@mui/material/List/index.js";
+import ListItemButton from "@mui/material/ListItemButton/index.js";
+import ListItemIcon from "@mui/material/ListItemIcon/index.js";
+import ListItemText from "@mui/material/ListItemText/index.js";
+import TextField from "@mui/material/TextField/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+var Command = (rawProps) => {
+  const props = resolveCommandProps(rawProps);
+  const { open, onOpenChange, variant, dataTestId } = props;
+  const theme = useTheme();
+  const testId = makeTestId(dataTestId);
+  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } = useCommandPalette(props);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: () => onOpenChange?.(false),
+      maxWidth: false,
+      PaperProps: {
+        sx: {
+          ...commandPaperStyles(theme, props),
+          ...commandSizeStyles(props.size),
+          overflow: "hidden",
+          ...props.style
+        },
+        className: props.className,
+        "data-testid": dataTestId
+      },
+      TransitionComponent: variant === "glass" ? Fade : Grow,
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsxs(Box, { sx: { p: 0 }, children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: props.placeholder,
+            value: internalValue,
+            onChange: handleValueChange,
+            onFocus: props.onFocus,
+            onBlur: props.onBlur,
+            disabled: props.disabled,
+            autoFocus: props.autoFocus,
+            onKeyDown: handleKeyDown,
+            dataTestId: testId("input")
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(DialogContent, { sx: { p: 0, maxHeight: props.maxHeight, overflow: "auto" }, children: [
+          /* @__PURE__ */ jsx(
+            CommandBody,
+            {
+              loading: props.loading,
+              items: filteredItems,
+              value: internalValue,
+              emptyMessage: props.emptyMessage,
+              onSelect: handleSelect,
+              selectedId: highlightedId,
+              showCategories: props.showCategories,
+              showShortcuts: props.showShortcuts,
+              showDescriptions: props.showDescriptions,
+              testId
+            }
+          ),
+          props.children
+        ] })
+      ] })
+    }
+  );
+};
+var CommandBody = ({ loading, emptyMessage, testId, ...list }) => {
+  if (loading) {
+    return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: testId("loading") });
+  }
+  if (!list.items?.length) {
+    return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: testId("empty") });
+  }
+  return /* @__PURE__ */ jsx(CommandList, { ...list, dataTestId: testId("list") });
+};
+var CommandInput = ({
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  onKeyDown,
+  className,
+  style,
+  dataTestId
+}) => /* @__PURE__ */ jsx(
+  TextField,
+  {
+    fullWidth: true,
+    value,
+    onChange: (e) => onChange?.(e.target.value),
+    onFocus,
+    onBlur,
+    onKeyDown,
+    placeholder,
+    disabled,
+    autoFocus,
+    variant: "standard",
+    className,
+    inputProps: {
+      "data-testid": dataTestId
+    },
+    sx: {
+      p: 2,
+      "& .MuiInput-underline:before": { border: "none" },
+      "& .MuiInput-underline:after": { border: "none" },
+      ...style
+    },
+    InputProps: {
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+      endAdornment: value && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChange?.(""), children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }) })
+    }
+  }
+);
+var CommandList = ({
+  items = [],
+  onSelect,
+  selectedId,
+  emptyMessage,
+  showCategories,
+  showShortcuts,
+  showDescriptions,
+  loading,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupedItems = useMemo(() => {
+    if (!showCategories) return { "": items };
+    const groups = {};
+    items.forEach((item) => {
+      const category = item.category || "";
+      if (!groups[category]) groups[category] = [];
+      groups[category].push(item);
+    });
+    return groups;
+  }, [items, showCategories]);
+  if (loading) return /* @__PURE__ */ jsx(CommandLoading, { dataTestId: dataTestId ? `${dataTestId}-loading` : void 0 });
+  if (items.length === 0) return /* @__PURE__ */ jsx(CommandEmpty, { message: emptyMessage, dataTestId: dataTestId ? `${dataTestId}-empty` : void 0 });
+  return /* @__PURE__ */ jsx(List, { className, sx: style, "data-testid": dataTestId, children: Object.entries(groupedItems).map(([category, categoryItems]) => /* @__PURE__ */ jsx(
+    CommandGroup,
+    {
+      heading: category,
+      items: categoryItems,
+      onSelect,
+      selectedId,
+      showShortcuts,
+      showDescriptions
+    },
+    category
+  )) });
+};
+var CommandGroup = ({
+  heading,
+  items = [],
+  onSelect,
+  selectedId,
+  showShortcuts,
+  showDescriptions,
+  className,
+  style,
+  dataTestId
+}) => {
+  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : void 0);
+  return /* @__PURE__ */ jsxs(Box, { className, sx: style, "data-testid": groupTestId, children: [
+    heading && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          px: 2,
+          py: 1,
+          display: "block",
+          color: "text.secondary",
+          fontWeight: 600,
+          textTransform: "uppercase"
+        },
+        children: heading
+      }
+    ),
+    items.map((item) => /* @__PURE__ */ jsx(
+      CommandItemComponent,
+      {
+        ...item,
+        selected: selectedId === item.id,
+        onSelect: () => onSelect?.(item),
+        showShortcut: showShortcuts,
+        showDescription: showDescriptions,
+        dataTestId: `command-item-${item.id}`
+      },
+      item.id
+    ))
+  ] });
+};
+var CommandItemComponent = ({
+  label,
+  description,
+  icon,
+  shortcut,
+  disabled,
+  selected,
+  onSelect,
+  showShortcut,
+  showDescription,
+  className,
+  style,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    ListItemButton,
+    {
+      onClick: onSelect,
+      disabled,
+      selected,
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        py: 1.5,
+        px: 2,
+        "&:hover": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08)
+        },
+        "&.Mui-selected": {
+          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+          "&:hover": {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16)
+          }
+        },
+        ...style
+      },
+      children: [
+        icon && /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 40 }, children: icon }),
+        /* @__PURE__ */ jsx(
+          ListItemText,
+          {
+            primary: label,
+            secondary: showDescription && description,
+            primaryTypographyProps: {
+              fontSize: "0.875rem",
+              fontWeight: selected ? 600 : 400
+            },
+            secondaryTypographyProps: {
+              fontSize: "0.75rem"
+            }
+          }
+        ),
+        showShortcut && shortcut && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: shortcut,
+            size: "small",
+            variant: "outlined",
+            sx: {
+              height: 20,
+              fontSize: "0.7rem",
+              ml: 1
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup
+};
+//# sourceMappingURL=chunk-WLDK74RR.js.map

package/dist/chunk-WLDK74RR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Command/Command.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { useMemo } from 'react';\n\nimport { resolveCommandProps, useCommandPalette } from './Command.hooks';\nimport { CommandEmpty, CommandLoading } from './Command.parts';\nimport { commandPaperStyles, commandSizeStyles } from './Command.styles';\nimport type {\n  CommandGroupProps,\n  CommandInputProps,\n  CommandItem,\n  CommandItemProps,\n  CommandListProps,\n  CommandProps,\n} from './Command.types';\n\nexport { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';\n\nconst makeTestId = (dataTestId?: string) => (suffix: string) =>\n  dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\nexport const Command: React.FC<CommandProps> = (rawProps) => {\n  const props = resolveCommandProps(rawProps);\n  const { open, onOpenChange, variant, dataTestId } = props;\n  const theme = useTheme();\n  const testId = makeTestId(dataTestId);\n\n  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } =\n    useCommandPalette(props);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={() => onOpenChange?.(false)}\n      maxWidth={false}\n      PaperProps={{\n        sx: {\n          ...commandPaperStyles(theme, props),\n          ...commandSizeStyles(props.size),\n          overflow: 'hidden',\n          ...props.style,\n        },\n        className: props.className,\n        'data-testid': dataTestId,\n      }}\n      TransitionComponent={variant === 'glass' ? Fade : Grow}\n      onClick={props.onClick}\n    >\n      <Box sx={{ p: 0 }}>\n        <CommandInput\n          placeholder={props.placeholder}\n          value={internalValue}\n          onChange={handleValueChange}\n          onFocus={props.onFocus}\n          onBlur={props.onBlur}\n          disabled={props.disabled}\n          autoFocus={props.autoFocus}\n          onKeyDown={handleKeyDown}\n          dataTestId={testId('input')}\n        />\n\n        <Divider />\n\n        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>\n          <CommandBody\n            loading={props.loading}\n            items={filteredItems}\n            value={internalValue}\n            emptyMessage={props.emptyMessage}\n            onSelect={handleSelect}\n            selectedId={highlightedId}\n            showCategories={props.showCategories}\n            showShortcuts={props.showShortcuts}\n            showDescriptions={props.showDescriptions}\n            testId={testId}\n          />\n          {props.children}\n        </DialogContent>\n      </Box>\n    </Dialog>\n  );\n};\n\ntype CommandBodyProps = Pick<\n  CommandListProps,\n  'items' | 'value' | 'onSelect' | 'selectedId' | 'showCategories' | 'showShortcuts' | 'showDescriptions'\n> & {\n  loading: boolean;\n  emptyMessage: string;\n  testId: (suffix: string) => string | undefined;\n};\n\n/** Three mutually exclusive states share the scrolling area: busy, empty, or a list. */\nconst CommandBody: React.FC<CommandBodyProps> = ({ loading, emptyMessage, testId, ...list }) => {\n  if (loading) {\n    return <CommandLoading dataTestId={testId('loading')} />;\n  }\n\n  if (!list.items?.length) {\n    return <CommandEmpty message={emptyMessage} dataTestId={testId('empty')} />;\n  }\n\n  return <CommandList {...list} dataTestId={testId('list')} />;\n};\n\nexport const CommandInput: React.FC<CommandInputProps> = ({\n  placeholder,\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  disabled,\n  autoFocus,\n  onKeyDown,\n  className,\n  style,\n  dataTestId,\n}) => (\n    <TextField\n      fullWidth\n      value={value}\n      onChange={(e) => onChange?.(e.target.value)}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      placeholder={placeholder}\n      disabled={disabled}\n      autoFocus={autoFocus}\n      variant=\"standard\"\n      className={className}\n      inputProps={{\n        'data-testid': dataTestId,\n      }}\n      sx={{\n        p: 2,\n        '& .MuiInput-underline:before': { border: 'none' },\n        '& .MuiInput-underline:after': { border: 'none' },\n        ...style,\n      }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon />\n          </InputAdornment>\n        ),\n        endAdornment: value && (\n          <InputAdornment position=\"end\">\n            <IconButton size=\"small\" onClick={() => onChange?.('')}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </InputAdornment>\n        ),\n      }}\n    />\n  );\n\nexport const CommandList: React.FC<CommandListProps> = ({\n  items = [],\n  onSelect,\n  selectedId,\n  emptyMessage,\n  showCategories,\n  showShortcuts,\n  showDescriptions,\n  loading,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupedItems = useMemo(() => {\n    if (!showCategories) return { '': items };\n\n    const groups: Record<string, CommandItem[]> = {};\n    items.forEach(item => {\n      const category = item.category || '';\n      if (!groups[category]) groups[category] = [];\n      groups[category].push(item);\n    });\n    return groups;\n  }, [items, showCategories]);\n\n  if (loading) return <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />;\n  if (items.length === 0) return <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />;\n\n  return (\n    <List className={className} sx={style} data-testid={dataTestId}>\n      {Object.entries(groupedItems).map(([category, categoryItems]) => (\n        <CommandGroup\n          key={category}\n          heading={category}\n          items={categoryItems}\n          onSelect={onSelect}\n          selectedId={selectedId}\n          showShortcuts={showShortcuts}\n          showDescriptions={showDescriptions}\n        />\n      ))}\n    </List>\n  );\n};\n\nexport const CommandGroup: React.FC<CommandGroupProps> = ({\n  heading,\n  items = [],\n  onSelect,\n  selectedId,\n  showShortcuts,\n  showDescriptions,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : undefined);\n\n  return (\n    <Box className={className} sx={style} data-testid={groupTestId}>\n      {heading && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            px: 2,\n            py: 1,\n            display: 'block',\n            color: 'text.secondary',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n          }}\n        >\n          {heading}\n        </Typography>\n      )}\n      {items.map((item) => (\n        <CommandItemComponent\n          key={item.id}\n          {...item}\n          selected={selectedId === item.id}\n          onSelect={() => onSelect?.(item)}\n          showShortcut={showShortcuts}\n          showDescription={showDescriptions}\n          dataTestId={`command-item-${item.id}`}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst CommandItemComponent: React.FC<CommandItemProps> = ({\n  label,\n  description,\n  icon,\n  shortcut,\n  disabled,\n  selected,\n  onSelect,\n  showShortcut,\n  showDescription,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <ListItemButton\n      onClick={onSelect}\n      disabled={disabled}\n      selected={selected}\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        py: 1.5,\n        px: 2,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        },\n        '&.Mui-selected': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.12),\n          '&:hover': {\n            backgroundColor: alpha(theme.palette.primary.main, 0.16),\n          },\n        },\n        ...style,\n      }}\n    >\n      {icon && (\n        <ListItemIcon sx={{ minWidth: 40 }}>\n          {icon}\n        </ListItemIcon>\n      )}\n\n      <ListItemText\n        primary={label}\n        secondary={showDescription && description}\n        primaryTypographyProps={{\n          fontSize: '0.875rem',\n          fontWeight: selected ? 600 : 400,\n        }}\n        secondaryTypographyProps={{\n          fontSize: '0.75rem',\n        }}\n      />\n\n      {showShortcut && shortcut && (\n        <Chip\n          label={shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{\n            height: 20,\n            fontSize: '0.7rem',\n            ml: 1,\n          }}\n        />\n      )}\n    </ListItemButton>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-WMALDOF5.js

@@ -0,0 +1,138 @@
+import {
+  SettingsRail
+} from "./chunk-7JO3ES5P.js";
+import {
+  activeItemLabel,
+  filterGroups
+} from "./chunk-BXC6GRLE.js";
+import {
+  SettingsPanel
+} from "./chunk-IE7ISTLQ.js";
+import {
+  atLeastRail
+} from "./chunk-LIG7TKIB.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/layout/SettingsLayout/SettingsLayout.tsx
+import Box from "@mui/material/Box/index.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULTS = {
+  searchPlaceholder: "Search settings",
+  defaultQuery: "",
+  emptySearchLabel: "No settings match your search.",
+  testIdPrefix: "settings",
+  railBreakpoint: "md",
+  navVariant: "switcher",
+  atIndex: false,
+  backLabel: "Back"
+};
+function shellSx(breakpoint, fillHeight) {
+  return (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 1.5,
+    width: "100%",
+    minWidth: 0,
+    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page
+    // itself, and two independent scrollbars on a phone is a trap rather than a
+    // convenience.
+    [atLeastRail(theme, breakpoint ?? "md")]: {
+      flexDirection: "row",
+      gap: 3,
+      ...fillHeight ? { height: "100%", minHeight: 0 } : {}
+    }
+  });
+}
+var SettingsLayout = (props) => {
+  const {
+    title,
+    groups,
+    activeItemId,
+    onSelectItem,
+    searchPlaceholder,
+    defaultQuery,
+    emptySearchLabel,
+    emptySearchAction,
+    linkComponent,
+    children,
+    testIdPrefix,
+    railBreakpoint,
+    fillHeight = false,
+    navVariant,
+    atIndex,
+    indexHref,
+    backLabel,
+    sectionChips
+  } = withDefaults(props, DEFAULTS);
+  const [query, setQuery] = useState(defaultQuery);
+  const [navOpen, setNavOpen] = useState(false);
+  const filteredGroups = useMemo(() => filterGroups(groups, query), [groups, query]);
+  const activeLabel = useMemo(() => activeItemLabel(groups, activeItemId), [groups, activeItemId]);
+  const drilldown = navVariant === "drilldown";
+  const ariaLabel = typeof title === "string" ? title : "Settings";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": testIdPrefix,
+      "data-nav-variant": navVariant,
+      "data-at-index": atIndex ? "true" : "false",
+      sx: shellSx(railBreakpoint, fillHeight),
+      children: [
+        /* @__PURE__ */ jsx(
+          SettingsRail,
+          {
+            title,
+            activeLabel,
+            navOpen,
+            onToggleNav: () => setNavOpen((open) => !open),
+            query,
+            onQueryChange: setQuery,
+            searchPlaceholder,
+            emptySearchLabel,
+            emptySearchAction,
+            filteredGroups,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            onNavigate: () => setNavOpen(false),
+            testIdPrefix,
+            variant: navVariant,
+            breakpoint: railBreakpoint,
+            atIndex,
+            fillHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsPanel,
+          {
+            inSection: drilldown && !atIndex,
+            hideOnNarrow: drilldown && atIndex,
+            breakpoint: railBreakpoint,
+            indexHref,
+            sectionTitle: props.sectionTitle,
+            sectionDescription: props.sectionDescription,
+            backLabel,
+            ariaLabel,
+            sectionChips,
+            activeItemId,
+            linkComponent,
+            onSelectItem,
+            testIdPrefix,
+            fillHeight,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+SettingsLayout.displayName = "SettingsLayout";
+
+export {
+  SettingsLayout
+};
+//# sourceMappingURL=chunk-WMALDOF5.js.map

package/dist/chunk-WMALDOF5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingsLayout/SettingsLayout.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React, { useMemo, useState } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\nimport { activeItemLabel, filterGroups } from './SettingsLayout.filters';\nimport { SettingsRail } from './SettingsLayout.rail';\nimport { atLeastRail } from './SettingsLayout.styles';\nimport { SettingsPanel } from './SettingsPanel';\nimport type { SettingsLayoutProps } from './SettingsLayout.types';\n\n/**\n * The props with every default already applied.\n *\n * A table through `withDefaults` rather than a `= default` per destructured\n * prop: each of those is a branch, and seven of them put the component over the\n * complexity bar before it renders anything. The single cast is what buys the\n * body non-optional values — without it every use site would restate the\n * default as a `??`, which is the same default written twice and free to drift.\n */\ntype ResolvedProps = SettingsLayoutProps &\n  Required<\n    Pick<\n      SettingsLayoutProps,\n      | 'searchPlaceholder'\n      | 'defaultQuery'\n      | 'emptySearchLabel'\n      | 'testIdPrefix'\n      | 'railBreakpoint'\n      | 'navVariant'\n      | 'atIndex'\n      | 'backLabel'\n    >\n  >;\n\nconst DEFAULTS = {\n  searchPlaceholder: 'Search settings',\n  defaultQuery: '',\n  emptySearchLabel: 'No settings match your search.',\n  testIdPrefix: 'settings',\n  railBreakpoint: 'md',\n  navVariant: 'switcher',\n  atIndex: false,\n  backLabel: 'Back',\n} satisfies Partial<SettingsLayoutProps>;\n\n/** Stacked below the rail's breakpoint, two columns at and above it. */\nfunction shellSx(breakpoint: SettingsLayoutProps['railBreakpoint'], fillHeight: boolean) {\n  return (theme: Theme) => ({\n    display: 'flex',\n    flexDirection: 'column' as const,\n    alignItems: 'stretch',\n    gap: 1.5,\n    width: '100%',\n    minWidth: 0,\n    // Only ever at the wide shape. Narrow, the rail is a disclosure or the page\n    // itself, and two independent scrollbars on a phone is a trap rather than a\n    // convenience.\n    [atLeastRail(theme, breakpoint ?? 'md')]: {\n      flexDirection: 'row',\n      gap: 3,\n      ...(fillHeight ? { height: '100%', minHeight: 0 } : {}),\n    },\n  });\n}\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 * ## Two narrow-width shapes\n *\n * `navVariant=\"switcher\"` (the default) folds the rail into a disclosure above\n * the panel. `navVariant=\"drilldown\"` gives the phone shape instead: at the\n * area's index the LIST is the page, and inside a section the panel is the page\n * with a back link and a scrollable strip of sibling sections above it.\n *\n * ## Why the width decision is CSS and not JavaScript\n *\n * Every part that changes between the two shapes does it through a `display`\n * pair keyed on `railBreakpoint`. Nothing here asks a media query in JS and\n * renders one branch.\n *\n * That is not a performance preference. A layout that RENDERS one navigation and\n * not the other can offer the narrow width less than the wide one, and no test\n * or review catches it — the missing control simply is not in the tree to be\n * asserted about. With both forms always mounted, \"the narrow width reaches\n * everything the wide one does\" holds by construction, and an audit that counts\n * controls per width gets the same answer at both.\n */\nexport const SettingsLayout: React.FC<SettingsLayoutProps> = (props) => {\n  const {\n    title,\n    groups,\n    activeItemId,\n    onSelectItem,\n    searchPlaceholder,\n    defaultQuery,\n    emptySearchLabel,\n    emptySearchAction,\n    linkComponent,\n    children,\n    testIdPrefix,\n    railBreakpoint,\n    fillHeight = false,\n    navVariant,\n    atIndex,\n    indexHref,\n    backLabel,\n    sectionChips,\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n  const [query, setQuery] = useState(defaultQuery);\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  const drilldown = navVariant === 'drilldown';\n  const ariaLabel = typeof title === 'string' ? title : 'Settings';\n\n  return (\n    <Box\n      data-testid={testIdPrefix}\n      data-nav-variant={navVariant}\n      data-at-index={atIndex ? 'true' : 'false'}\n      sx={shellSx(railBreakpoint, fillHeight)}\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        emptySearchAction={emptySearchAction}\n        filteredGroups={filteredGroups}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        onNavigate={() => setNavOpen(false)}\n        testIdPrefix={testIdPrefix}\n        variant={navVariant}\n        breakpoint={railBreakpoint}\n        atIndex={atIndex}\n        fillHeight={fillHeight}\n      />\n\n      <SettingsPanel\n        inSection={drilldown && !atIndex}\n        hideOnNarrow={drilldown && atIndex}\n        breakpoint={railBreakpoint}\n        indexHref={indexHref}\n        sectionTitle={props.sectionTitle}\n        sectionDescription={props.sectionDescription}\n        backLabel={backLabel}\n        ariaLabel={ariaLabel}\n        sectionChips={sectionChips}\n        activeItemId={activeItemId}\n        linkComponent={linkComponent}\n        onSelectItem={onSelectItem}\n        testIdPrefix={testIdPrefix}\n        fillHeight={fillHeight}\n      >\n        {children}\n      </SettingsPanel>\n    </Box>\n  );\n};\n\nSettingsLayout.displayName = 'SettingsLayout';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,OAAO,SAAS;AAEhB,SAAgB,SAAS,gBAAgB;AAwHrC,SAME,KANF;AAvFJ,IAAM,WAAW;AAAA,EACf,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AACb;AAGA,SAAS,QAAQ,YAAmD,YAAqB;AACvF,SAAO,CAAC,WAAkB;AAAA,IACxB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA;AAAA;AAAA;AAAA,IAIV,CAAC,YAAY,OAAO,cAAc,IAAI,CAAC,GAAG;AAAA,MACxC,eAAe;AAAA,MACf,KAAK;AAAA,MACL,GAAI,aAAa,EAAE,QAAQ,QAAQ,WAAW,EAAE,IAAI,CAAC;AAAA,IACvD;AAAA,EACF;AACF;AA4BO,IAAM,iBAAgD,CAAC,UAAU;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,aAAa,OAAO,QAAQ;AAChC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,iBAAiB,QAAQ,MAAM,aAAa,QAAQ,KAAK,GAAG,CAAC,QAAQ,KAAK,CAAC;AACjF,QAAM,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,YAAY,GAAG,CAAC,QAAQ,YAAY,CAAC;AAE/F,QAAM,YAAY,eAAe;AACjC,QAAM,YAAY,OAAO,UAAU,WAAW,QAAQ;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,oBAAkB;AAAA,MAClB,iBAAe,UAAU,SAAS;AAAA,MAClC,IAAI,QAAQ,gBAAgB,UAAU;AAAA,MAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAa,MAAM,WAAW,CAAC,SAAS,CAAC,IAAI;AAAA,YAC7C;AAAA,YACA,eAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,MAAM,WAAW,KAAK;AAAA,YAClC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,YACZ;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,aAAa,CAAC;AAAA,YACzB,cAAc,aAAa;AAAA,YAC3B,YAAY;AAAA,YACZ;AAAA,YACA,cAAc,MAAM;AAAA,YACpB,oBAAoB,MAAM;AAAA,YAC1B;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;","names":[]}

package/dist/chunk-WQFIV5WD.js

@@ -0,0 +1,185 @@
+// src/components/layout/ContentToolbar/SortByDropdown.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Divider from "@mui/material/Divider/index.js";
+import ListSubheader from "@mui/material/ListSubheader/index.js";
+import Menu from "@mui/material/Menu/index.js";
+import MenuItem from "@mui/material/MenuItem/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function findActiveField(fields, activeField) {
+  return fields?.find((field) => field.value === activeField);
+}
+function findActiveOrder(fieldDef, activeOrder) {
+  const options = fieldDef?.orderOptions;
+  if (!options?.length) return void 0;
+  return options.find((option) => option.value === activeOrder) ?? options[0];
+}
+function resolveArrowDirection(option, indexInList) {
+  if (option?.arrowDirection) return option.arrowDirection;
+  return indexInList <= 0 ? "down" : "up";
+}
+function buildTriggerLabel(fieldDef, orderOption) {
+  if (!fieldDef) return "";
+  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;
+  if (fieldDef.triggerLabelStyle === "range" && fieldDef.orderOptions?.length === 2) {
+    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);
+    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;
+  }
+  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;
+}
+function resolveTriggerParts(fieldDef, orderOption, orderOptions) {
+  const useRangeLabel = fieldDef?.triggerLabelStyle === "range" && orderOptions.length === 2;
+  const orderIndex = orderOptions.findIndex((option) => option.value === orderOption?.value);
+  const arrow = resolveArrowDirection(orderOption, orderIndex);
+  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === "down" ? "\u2193" : "\u2191"}` : "";
+  const full = buildTriggerLabel(fieldDef, orderOption);
+  return { full, short: fieldDef?.label ?? full, arrowSuffix };
+}
+var sectionLabelSx = { px: 1, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 };
+function SortCheck({ checked }) {
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "flex", width: 16, flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: 14 } }) : null });
+}
+function SortRow({
+  value,
+  label,
+  checked,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(MenuItem, { "data-testid": `sort-${value}-option`, onClick: onSelect, sx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx(SortCheck, { checked }),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: label })
+  ] });
+}
+function SortMenu({
+  anchorEl,
+  open,
+  close,
+  orderOptions,
+  activeOrderValue,
+  onOrderSelect,
+  fields,
+  activeField,
+  onFieldSelect,
+  orderHeading,
+  sortHeading
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      anchorEl,
+      open,
+      onClose: close,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      slotProps: { paper: { sx: { minWidth: 180 } } },
+      children: [
+        orderOptions.length > 0 && [
+          /* @__PURE__ */ jsx(ListSubheader, { sx: sectionLabelSx, children: orderHeading }, "order-label"),
+          ...orderOptions.map((option) => /* @__PURE__ */ jsx(
+            SortRow,
+            {
+              value: option.value,
+              label: option.label,
+              checked: activeOrderValue === option.value,
+              onSelect: () => onOrderSelect(option.value)
+            },
+            `order-${option.value}`
+          )),
+          /* @__PURE__ */ jsx(Divider, {}, "order-divider")
+        ],
+        /* @__PURE__ */ jsx(ListSubheader, { sx: sectionLabelSx, children: sortHeading }),
+        fields.map((field) => /* @__PURE__ */ jsx(
+          SortRow,
+          {
+            value: field.value,
+            label: field.label,
+            checked: activeField === field.value,
+            onSelect: () => onFieldSelect(field.value)
+          },
+          field.value
+        ))
+      ]
+    }
+  );
+}
+function SortByDropdown({
+  fields,
+  activeField,
+  activeOrder,
+  onFieldChange,
+  onOrderChange,
+  orderHeading,
+  sortHeading,
+  triggerPrefix,
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  const safeFields = fields ?? [];
+  const activeFieldDef = findActiveField(fields, activeField);
+  const orderOptions = activeFieldDef?.orderOptions ?? [];
+  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);
+  const trigger = resolveTriggerParts(activeFieldDef, activeOrderOption, orderOptions);
+  function handleFieldChange(field) {
+    onFieldChange(field);
+    close();
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        sx: { display: { xs: "none", md: "inline" }, color: "text.secondary", fontSize: "0.875rem" },
+        children: triggerPrefix
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: trigger.full }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "inline", md: "none" } }, children: trigger.short }),
+          trigger.arrowSuffix,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SortMenu,
+      {
+        orderHeading,
+        sortHeading,
+        anchorEl,
+        open,
+        close,
+        orderOptions,
+        activeOrderValue: activeOrderOption?.value,
+        onOrderSelect: (value) => {
+          onOrderChange?.(value);
+          close();
+        },
+        fields: safeFields,
+        activeField,
+        onFieldSelect: handleFieldChange
+      }
+    )
+  ] });
+}
+
+export {
+  SortByDropdown
+};
+//# sourceMappingURL=chunk-WQFIV5WD.js.map