@12-apps/ui 6.33.0 → 6.34.0

package/dist/chunk-ZSRLRDTP.js

@@ -0,0 +1,344 @@
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  absoluteInk,
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/form/CategorySelect/CategorySelect.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var METRICS = {
+  panelWidth: 340,
+  panelRadius: 14,
+  listMaxHeight: 290,
+  sheetListMaxHeight: 340,
+  rowHeight: 36,
+  sheetRowHeight: 42,
+  rowRadius: 8,
+  boxSize: 18,
+  chevronButton: 22,
+  /** Extra left padding per level of nesting. */
+  rowIndentStep: 14,
+  footerButton: 32,
+  sheetFooterButton: 38,
+  /** Below this width the panel becomes a bottom sheet. */
+  sheetBreakpoint: 480
+};
+var accent = (theme) => ({
+  main: theme.palette.primary.main,
+  ink: theme.palette.primary.dark,
+  soft: alpha(theme.palette.primary.main, 0.08),
+  edge: alpha(theme.palette.primary.main, 0.28),
+  ring: alpha(theme.palette.primary.main, 0.15)
+});
+var triggerSx = (theme, selected, open) => {
+  const brand = accent(theme);
+  return {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    height: fieldHeight(theme),
+    padding: "0 10px 0 12px",
+    borderRadius: fieldRadiusPx(theme),
+    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
+    background: selected ? brand.soft : theme.palette.background.paper,
+    color: selected ? brand.ink : theme.palette.text.primary,
+    font: "inherit",
+    fontSize: 13,
+    cursor: "pointer",
+    maxWidth: "100%",
+    transition: "border-color .12s, box-shadow .12s",
+    boxShadow: open ? `0 0 0 3px ${brand.ring}` : "none",
+    "&:hover": { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },
+    "&:focus-visible": {
+      outline: "none",
+      borderColor: brand.main,
+      boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`
+    },
+    "&:disabled": { opacity: 0.5, cursor: "default" }
+  };
+};
+var triggerCountSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 11,
+  lineHeight: 1,
+  background: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  borderRadius: "999px",
+  padding: "3px 6px",
+  minWidth: 18,
+  textAlign: "center"
+});
+var triggerClearSx = (theme) => ({
+  width: 20,
+  height: 20,
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: "5px",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: "inherit",
+  opacity: 0.6,
+  padding: 0,
+  "&:hover": { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 }
+});
+var triggerChevronSx = (open) => ({
+  width: 14,
+  height: 14,
+  flex: "0 0 auto",
+  opacity: 0.55,
+  transition: "transform .15s",
+  transform: open ? "rotate(180deg)" : "none"
+});
+var panelSx = (theme) => ({
+  width: METRICS.panelWidth,
+  maxWidth: "100%",
+  background: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${METRICS.panelRadius}px`,
+  boxShadow: `0 1px 2px ${alpha(uiInk(theme).panelShadowInk, 0.05)}, 0 18px 40px -12px ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden"
+});
+var sheetSx = (theme) => ({
+  width: "100%",
+  maxWidth: "none",
+  borderRadius: "18px 18px 0 0",
+  borderBottom: 0,
+  position: "relative",
+  paddingTop: "4px",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 7,
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: 36,
+    height: 4,
+    borderRadius: "2px",
+    background: theme.palette.divider
+  }
+});
+var panelHeadSx = (theme, sheet) => ({
+  padding: sheet ? "18px 10px 8px" : "10px 10px 8px",
+  borderBottom: `1px solid ${theme.palette.divider}`
+});
+var pinnedSx = (theme) => ({
+  padding: "9px 10px",
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  background: alpha(theme.palette.primary.main, 0.03)
+});
+var pinnedLabelSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 10,
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  marginBottom: "7px"
+});
+var chipWrapSx = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "5px",
+  maxHeight: 74,
+  overflow: "auto"
+};
+var chipSx = (theme) => {
+  const brand = accent(theme);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "5px",
+    fontSize: 12,
+    background: brand.soft,
+    color: brand.ink,
+    border: `1px solid ${brand.edge}`,
+    borderRadius: "7px",
+    padding: "3px 4px 3px 8px",
+    "& button": {
+      border: 0,
+      background: "transparent",
+      color: "inherit",
+      cursor: "pointer",
+      padding: 0,
+      width: 16,
+      height: 16,
+      borderRadius: "4px",
+      display: "grid",
+      placeItems: "center",
+      opacity: 0.65,
+      fontSize: 13,
+      lineHeight: 1,
+      "&:hover": { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 }
+    }
+  };
+};
+var listSx = (sheet) => ({
+  overflow: "auto",
+  maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,
+  padding: "6px 6px 8px",
+  scrollPadding: "8px 0",
+  overscrollBehavior: "contain"
+});
+var rowSx = (theme, active, sheet) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "0 8px",
+  height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,
+  borderRadius: `${METRICS.rowRadius}px`,
+  cursor: "pointer",
+  userSelect: "none",
+  position: "relative",
+  width: "100%",
+  border: 0,
+  textAlign: "left",
+  font: "inherit",
+  background: active ? alpha(theme.palette.primary.main, 0.08) : "transparent",
+  boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : "none",
+  "&:hover": {
+    background: active ? alpha(theme.palette.primary.main, 0.08) : theme.palette.action.hover
+  },
+  "&:focus-visible": { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 }
+});
+var rowIndent = (depth) => depth === 0 ? {} : { paddingLeft: `${depth * METRICS.rowIndentStep}px` };
+var rowNameSx = (theme, isCategory) => ({
+  flex: 1,
+  minWidth: 0,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  fontSize: 13.5,
+  fontWeight: isCategory ? 600 : 450,
+  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary
+});
+var rowMetaSx = (theme, selected) => ({
+  font: "500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace",
+  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,
+  fontWeight: selected ? 600 : 500,
+  flex: "0 0 auto"
+});
+var markSx = (theme) => ({
+  background: uiInk(theme).highlightMark,
+  color: "inherit",
+  borderRadius: "2px",
+  padding: "0 1px"
+});
+var chevronButtonSx = (theme, open) => ({
+  width: METRICS.chevronButton,
+  height: METRICS.chevronButton,
+  flex: "0 0 auto",
+  border: 0,
+  background: "transparent",
+  borderRadius: "6px",
+  display: "grid",
+  placeItems: "center",
+  cursor: "pointer",
+  color: theme.palette.text.secondary,
+  padding: 0,
+  "&:hover": { background: theme.palette.action.hover, color: theme.palette.text.primary },
+  "& svg": { width: 12, height: 12, transition: "transform .15s", transform: open ? "rotate(90deg)" : "none" }
+});
+var checkboxSx = (theme, state) => ({
+  width: METRICS.boxSize,
+  height: METRICS.boxSize,
+  flex: "0 0 auto",
+  border: `1.5px solid ${state === "off" ? theme.palette.divider : theme.palette.primary.main}`,
+  borderRadius: "5px",
+  background: state === "off" ? theme.palette.background.paper : theme.palette.primary.main,
+  display: "grid",
+  placeItems: "center",
+  transition: "background .1s, border-color .1s",
+  "& svg": { width: 12, height: 12, color: theme.palette.primary.contrastText }
+});
+var checkboxBarSx = (theme) => ({
+  width: 9,
+  height: 2,
+  background: theme.palette.primary.contrastText,
+  borderRadius: "1px"
+});
+var radioSx = (theme, on) => ({
+  width: METRICS.boxSize,
+  height: METRICS.boxSize,
+  flex: "0 0 auto",
+  borderRadius: "50%",
+  background: theme.palette.background.paper,
+  border: on ? `5.5px solid ${theme.palette.primary.main}` : `1.5px solid ${theme.palette.divider}`,
+  boxSizing: "border-box"
+});
+var sectionHeadSx = (theme) => ({
+  fontWeight: 600,
+  fontSize: 10,
+  lineHeight: 1,
+  letterSpacing: ".08em",
+  textTransform: "uppercase",
+  color: theme.palette.text.secondary,
+  padding: "9px 8px 6px"
+});
+var footerSx = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "8px",
+  padding: "9px 10px",
+  borderTop: `1px solid ${theme.palette.divider}`,
+  background: theme.palette.action.hover
+});
+var emptySx = (theme) => ({
+  padding: "26px 18px",
+  textAlign: "center",
+  color: theme.palette.text.secondary,
+  "& strong": {
+    display: "block",
+    color: theme.palette.text.primary,
+    fontSize: 13.5,
+    marginBottom: "4px"
+  },
+  "& p": { margin: "0 0 12px", fontSize: 12.5, lineHeight: 1.5 }
+});
+var skeletonSx = {
+  height: METRICS.rowHeight,
+  margin: "4px 6px",
+  borderRadius: `${METRICS.rowRadius}px`
+};
+
+export {
+  METRICS,
+  triggerSx,
+  triggerCountSx,
+  triggerClearSx,
+  triggerChevronSx,
+  panelSx,
+  sheetSx,
+  panelHeadSx,
+  pinnedSx,
+  pinnedLabelSx,
+  chipWrapSx,
+  chipSx,
+  listSx,
+  rowSx,
+  rowIndent,
+  rowNameSx,
+  rowMetaSx,
+  markSx,
+  chevronButtonSx,
+  checkboxSx,
+  checkboxBarSx,
+  radioSx,
+  sectionHeadSx,
+  footerSx,
+  emptySx,
+  skeletonSx
+};
+//# sourceMappingURL=chunk-ZSRLRDTP.js.map

package/dist/chunk-ZSRLRDTP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategorySelect.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\nimport { fieldEdge } from '../../../tokens/field-edge';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldHeight } from '../../../tokens/field-height';\nimport { absoluteInk, uiInk } from '../../../tokens/ink';\n\n/**\n * The prototype's METRICS, verbatim.\n *\n * Every number here is lifted from the approved design and is intentionally\n * absolute rather than derived from `theme.spacing`: the design is specified on\n * a half-pixel type scale (13.5px rows, 1.5px checkbox borders) that an 8px\n * spacing grid cannot express without rounding the look away.\n *\n * The trigger's CORNER and HEIGHT are the other exception: it is a field, so it\n * takes the theme's field radius and field height (`tokens/field-radius`,\n * `tokens/field-height`) and lines up with the inputs and filter pills beside it.\n *\n * COLOURS are the deliberate exception — they come from the theme, because a\n * tenant can white-label the palette (a hard-coded indigo would survive the\n * rebrand and the rest of the screen would not) and because the library ships a\n * dark mode. On the default light indigo theme the tokens below resolve to the\n * prototype's own values.\n */\nexport const METRICS = {\n  panelWidth: 340,\n  panelRadius: 14,\n  listMaxHeight: 290,\n  sheetListMaxHeight: 340,\n  rowHeight: 36,\n  sheetRowHeight: 42,\n  rowRadius: 8,\n  boxSize: 18,\n  chevronButton: 22,\n  /** Extra left padding per level of nesting. */\n  rowIndentStep: 14,\n  footerButton: 32,\n  sheetFooterButton: 38,\n  /** Below this width the panel becomes a bottom sheet. */\n  sheetBreakpoint: 480,\n} as const;\n\n/** Accent family, derived so a white-labelled palette carries through. */\nconst accent = (theme: Theme) => ({\n  main: theme.palette.primary.main,\n  ink: theme.palette.primary.dark,\n  soft: alpha(theme.palette.primary.main, 0.08),\n  edge: alpha(theme.palette.primary.main, 0.28),\n  ring: alpha(theme.palette.primary.main, 0.15),\n});\n\n/** The closed control. `selected` swaps it to the accent-tinted \"has filter\" skin. */\nexport const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '8px',\n    height: fieldHeight(theme),\n    padding: '0 10px 0 12px',\n    borderRadius: fieldRadiusPx(theme),\n    border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,\n    background: selected ? brand.soft : theme.palette.background.paper,\n    color: selected ? brand.ink : theme.palette.text.primary,\n    font: 'inherit',\n    fontSize: 13,\n    cursor: 'pointer',\n    maxWidth: '100%',\n    transition: 'border-color .12s, box-shadow .12s',\n    boxShadow: open ? `0 0 0 3px ${brand.ring}` : 'none',\n    '&:hover': { borderColor: open || selected ? brand.edge : theme.palette.text.disabled },\n    '&:focus-visible': {\n      outline: 'none',\n      borderColor: brand.main,\n      boxShadow: `0 0 0 3px ${alpha(brand.main, 0.18)}`,\n    },\n    '&:disabled': { opacity: 0.5, cursor: 'default' },\n  };\n};\n\n/** The count pill inside the trigger. */\nexport const triggerCountSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: 11,\n  lineHeight: 1,\n  background: theme.palette.primary.main,\n  color: theme.palette.primary.contrastText,\n  borderRadius: '999px',\n  padding: '3px 6px',\n  minWidth: 18,\n  textAlign: 'center',\n});\n\n/** The trigger's inline clear (×) and the chevron. */\nexport const triggerClearSx = (theme: Theme): CSSObject => ({\n  width: 20,\n  height: 20,\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: '5px',\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: 'inherit',\n  opacity: 0.6,\n  padding: 0,\n  '&:hover': { background: alpha(absoluteInk(theme).black, 0.08), opacity: 1 },\n});\n\nexport const triggerChevronSx = (open: boolean): CSSObject => ({\n  width: 14,\n  height: 14,\n  flex: '0 0 auto',\n  opacity: 0.55,\n  transition: 'transform .15s',\n  transform: open ? 'rotate(180deg)' : 'none',\n});\n\n/** The floating panel. */\nexport const panelSx = (theme: Theme): CSSObject => ({\n  width: METRICS.panelWidth,\n  maxWidth: '100%',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: `${METRICS.panelRadius}px`,\n  boxShadow: `0 1px 2px ${alpha(uiInk(theme).panelShadowInk, 0.05)}, 0 18px 40px -12px ${alpha(uiInk(theme).panelShadowInk, 0.28)}`,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** Bottom-sheet skin, applied under {@link METRICS.sheetBreakpoint}. */\nexport const sheetSx = (theme: Theme): CSSObject => ({\n  width: '100%',\n  maxWidth: 'none',\n  borderRadius: '18px 18px 0 0',\n  borderBottom: 0,\n  position: 'relative',\n  paddingTop: '4px',\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: 7,\n    left: '50%',\n    transform: 'translateX(-50%)',\n    width: 36,\n    height: 4,\n    borderRadius: '2px',\n    background: theme.palette.divider,\n  },\n});\n\nexport const panelHeadSx = (theme: Theme, sheet: boolean): CSSObject => ({\n  padding: sheet ? '18px 10px 8px' : '10px 10px 8px',\n  borderBottom: `1px solid ${theme.palette.divider}`,\n});\n\nexport const pinnedSx = (theme: Theme): CSSObject => ({\n  padding: '9px 10px',\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  background: alpha(theme.palette.primary.main, 0.03),\n});\n\nexport const pinnedLabelSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: 10,\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  marginBottom: '7px',\n});\n\nexport const chipWrapSx: CSSObject = {\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '5px',\n  maxHeight: 74,\n  overflow: 'auto',\n};\n\n/** A selected-category chip, in the pinned tray and the applied bar alike. */\nexport const chipSx = (theme: Theme): CSSObject => {\n  const brand = accent(theme);\n  return {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '5px',\n    fontSize: 12,\n    background: brand.soft,\n    color: brand.ink,\n    border: `1px solid ${brand.edge}`,\n    borderRadius: '7px',\n    padding: '3px 4px 3px 8px',\n    '& button': {\n      border: 0,\n      background: 'transparent',\n      color: 'inherit',\n      cursor: 'pointer',\n      padding: 0,\n      width: 16,\n      height: 16,\n      borderRadius: '4px',\n      display: 'grid',\n      placeItems: 'center',\n      opacity: 0.65,\n      fontSize: 13,\n      lineHeight: 1,\n      '&:hover': { background: alpha(theme.palette.primary.main, 0.16), opacity: 1 },\n    },\n  };\n};\n\nexport const listSx = (sheet: boolean): CSSObject => ({\n  overflow: 'auto',\n  maxHeight: sheet ? METRICS.sheetListMaxHeight : METRICS.listMaxHeight,\n  padding: '6px 6px 8px',\n  scrollPadding: '8px 0',\n  overscrollBehavior: 'contain',\n});\n\n/** A row. `active` is the KEYBOARD cursor — deliberately distinct from hover. */\nexport const rowSx = (theme: Theme, active: boolean, sheet: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: '8px',\n  padding: '0 8px',\n  height: sheet ? METRICS.sheetRowHeight : METRICS.rowHeight,\n  borderRadius: `${METRICS.rowRadius}px`,\n  cursor: 'pointer',\n  userSelect: 'none',\n  position: 'relative',\n  width: '100%',\n  border: 0,\n  textAlign: 'left',\n  font: 'inherit',\n  background: active ? alpha(theme.palette.primary.main, 0.08) : 'transparent',\n  boxShadow: active ? `inset 0 0 0 1px ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n  '&:hover': {\n    background: active\n      ? alpha(theme.palette.primary.main, 0.08)\n      : theme.palette.action.hover,\n  },\n  '&:focus-visible': { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: 1 },\n});\n\n/**\n * How far a row sits in from the panel edge, by depth.\n *\n * One step per level, on top of {@link rowSx}'s own 8px gutter — depth 0 keeps\n * that gutter, and every level below it adds `METRICS.rowIndentStep`. Absolute\n * like the rest of this file: the step is the design's own 14px, not a spacing\n * multiple that would round it.\n */\nexport const rowIndent = (depth: number): CSSObject =>\n  depth === 0 ? {} : { paddingLeft: `${depth * METRICS.rowIndentStep}px` };\n\nexport const rowNameSx = (theme: Theme, isCategory: boolean): CSSObject => ({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  fontSize: 13.5,\n  fontWeight: isCategory ? 600 : 450,\n  color: isCategory ? theme.palette.text.primary : theme.palette.text.secondary,\n});\n\nexport const rowMetaSx = (theme: Theme, selected: boolean): CSSObject => ({\n  font: '500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace',\n  color: selected ? theme.palette.primary.main : theme.palette.text.secondary,\n  fontWeight: selected ? 600 : 500,\n  flex: '0 0 auto',\n});\n\n/** The query hit inside a row label. */\nexport const markSx = (theme: Theme): CSSObject => ({\n  background: uiInk(theme).highlightMark,\n  color: 'inherit',\n  borderRadius: '2px',\n  padding: '0 1px',\n});\n\nexport const chevronButtonSx = (theme: Theme, open: boolean): CSSObject => ({\n  width: METRICS.chevronButton,\n  height: METRICS.chevronButton,\n  flex: '0 0 auto',\n  border: 0,\n  background: 'transparent',\n  borderRadius: '6px',\n  display: 'grid',\n  placeItems: 'center',\n  cursor: 'pointer',\n  color: theme.palette.text.secondary,\n  padding: 0,\n  '&:hover': { background: theme.palette.action.hover, color: theme.palette.text.primary },\n  '& svg': { width: 12, height: 12, transition: 'transform .15s', transform: open ? 'rotate(90deg)' : 'none' },\n});\n\n/** The tri-state checkbox: unchecked, checked, or the partial bar. */\nexport const checkboxSx = (theme: Theme, state: 'off' | 'partial' | 'on'): CSSObject => ({\n  width: METRICS.boxSize,\n  height: METRICS.boxSize,\n  flex: '0 0 auto',\n  border: `1.5px solid ${state === 'off' ? theme.palette.divider : theme.palette.primary.main}`,\n  borderRadius: '5px',\n  background: state === 'off' ? theme.palette.background.paper : theme.palette.primary.main,\n  display: 'grid',\n  placeItems: 'center',\n  transition: 'background .1s, border-color .1s',\n  '& svg': { width: 12, height: 12, color: theme.palette.primary.contrastText },\n});\n\n/** The partial bar drawn inside a half-selected checkbox. */\nexport const checkboxBarSx = (theme: Theme): CSSObject => ({\n  width: 9,\n  height: 2,\n  background: theme.palette.primary.contrastText,\n  borderRadius: '1px',\n});\n\nexport const radioSx = (theme: Theme, on: boolean): CSSObject => ({\n  width: METRICS.boxSize,\n  height: METRICS.boxSize,\n  flex: '0 0 auto',\n  borderRadius: '50%',\n  background: theme.palette.background.paper,\n  border: on\n    ? `5.5px solid ${theme.palette.primary.main}`\n    : `1.5px solid ${theme.palette.divider}`,\n  boxSizing: 'border-box',\n});\n\nexport const sectionHeadSx = (theme: Theme): CSSObject => ({\n  fontWeight: 600,\n  fontSize: 10,\n  lineHeight: 1,\n  letterSpacing: '.08em',\n  textTransform: 'uppercase',\n  color: theme.palette.text.secondary,\n  padding: '9px 8px 6px',\n});\n\nexport const footerSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: '8px',\n  padding: '9px 10px',\n  borderTop: `1px solid ${theme.palette.divider}`,\n  background: theme.palette.action.hover,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n  padding: '26px 18px',\n  textAlign: 'center',\n  color: theme.palette.text.secondary,\n  '& strong': {\n    display: 'block',\n    color: theme.palette.text.primary,\n    fontSize: 13.5,\n    marginBottom: '4px',\n  },\n  '& p': { margin: '0 0 12px', fontSize: 12.5, lineHeight: 1.5 },\n});\n\n/** Skeleton row used while the catalogue loads. */\nexport const skeletonSx: CSSObject = {\n  height: METRICS.rowHeight,\n  margin: '4px 6px',\n  borderRadius: `${METRICS.rowRadius}px`,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-ZTYUKEN3.js

@@ -0,0 +1,128 @@
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/layout/Sidebar/Sidebar.tsx
+import Box from "@mui/material/Box/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+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 ${shadowInk(theme, 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,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter
+};
+//# sourceMappingURL=chunk-ZTYUKEN3.js.map

package/dist/chunk-ZTYUKEN3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Sidebar/Sidebar.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type {\n  SidebarContentProps,\n  SidebarFooterProps,\n  SidebarHeaderProps,\n  SidebarProps,\n} from './Sidebar.types';\nimport { shadowInk } from '../../../tokens/ink';\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 ${shadowInk(theme, 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/chunk-ZUQIOWLN.js

@@ -0,0 +1,153 @@
+import {
+  pulseAnimation,
+  scaleIn,
+  slideInDown,
+  slideInLeft,
+  slideInRight,
+  slideInUp
+} from "./chunk-IT7ATXU7.js";
+import {
+  shadowInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/components/data-display/HoverCard/HoverCard.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var sideOf = (placement) => {
+  if (placement.startsWith("top")) return "top";
+  if (placement.startsWith("left")) return "left";
+  if (placement.startsWith("right")) return "right";
+  return "bottom";
+};
+var ARROW_SIZE = 8;
+var ARROWS = {
+  top: (color) => ({
+    bottom: -ARROW_SIZE,
+    left: "50%",
+    transform: "translateX(-50%)",
+    borderLeft: `${ARROW_SIZE}px solid transparent`,
+    borderRight: `${ARROW_SIZE}px solid transparent`,
+    borderTop: `${ARROW_SIZE}px solid ${color}`
+  }),
+  bottom: (color) => ({
+    top: -ARROW_SIZE,
+    left: "50%",
+    transform: "translateX(-50%)",
+    borderLeft: `${ARROW_SIZE}px solid transparent`,
+    borderRight: `${ARROW_SIZE}px solid transparent`,
+    borderBottom: `${ARROW_SIZE}px solid ${color}`
+  }),
+  left: (color) => ({
+    right: -ARROW_SIZE,
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderTop: `${ARROW_SIZE}px solid transparent`,
+    borderBottom: `${ARROW_SIZE}px solid transparent`,
+    borderLeft: `${ARROW_SIZE}px solid ${color}`
+  }),
+  right: (color) => ({
+    left: -ARROW_SIZE,
+    top: "50%",
+    transform: "translateY(-50%)",
+    borderTop: `${ARROW_SIZE}px solid transparent`,
+    borderBottom: `${ARROW_SIZE}px solid transparent`,
+    borderRight: `${ARROW_SIZE}px solid ${color}`
+  })
+};
+var arrowSx = (theme, placement) => ({
+  position: "absolute",
+  width: 0,
+  height: 0,
+  zIndex: 1,
+  ...ARROWS[sideOf(placement)](theme.palette.background.paper)
+});
+var ANCHOR_ORIGINS = {
+  top: { vertical: "top", horizontal: "center" },
+  bottom: { vertical: "bottom", horizontal: "center" },
+  left: { vertical: "center", horizontal: "left" },
+  right: { vertical: "center", horizontal: "right" }
+};
+var flip = (origin) => ({
+  vertical: origin.vertical === "top" ? "bottom" : origin.vertical === "bottom" ? "top" : "center",
+  horizontal: origin.horizontal === "left" ? "right" : origin.horizontal === "right" ? "left" : "center"
+});
+var getAnchorOrigin = (placement) => ANCHOR_ORIGINS[sideOf(placement)];
+var getTransformOrigin = (placement) => flip(ANCHOR_ORIGINS[sideOf(placement)]);
+var ANIMATIONS = {
+  // `fade` shares slideInUp deliberately: the keyframes fade in while rising.
+  fade: { animation: `${slideInUp} 0.2s ease-out` },
+  scale: { transformOrigin: "center", animation: `${scaleIn} 0.2s cubic-bezier(0.4, 0, 0.2, 1)` },
+  "slide-up": { animation: `${slideInUp} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
+  "slide-down": { animation: `${slideInDown} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
+  "slide-left": { animation: `${slideInLeft} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` },
+  "slide-right": { animation: `${slideInRight} 0.3s cubic-bezier(0.4, 0, 0.2, 1)` }
+};
+var VARIANTS = {
+  default: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    boxShadow: theme.shadows[8]
+  }),
+  glass: (theme) => ({
+    backgroundColor: alpha(theme.palette.background.paper, 0.85),
+    backdropFilter: "blur(20px)",
+    WebkitBackdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    boxShadow: `0 8px 32px ${shadowInk(theme, 0.12)}`
+  }),
+  detailed: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    boxShadow: theme.shadows[12]
+  }),
+  minimal: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+    boxShadow: theme.shadows[4]
+  })
+};
+var glowStyles = (theme) => ({
+  boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+  filter: "brightness(1.05)"
+});
+var pulseStyles = (theme) => ({
+  position: "relative",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "inherit",
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0.1,
+    animation: `${pulseAnimation} 2s infinite`,
+    pointerEvents: "none",
+    zIndex: -1
+  }
+});
+var cardSx = (theme, flags) => {
+  const { customVariant, glow, pulse, animation } = flags;
+  return {
+    borderRadius: theme.spacing(1.5),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "visible",
+    minWidth: 200,
+    maxWidth: 400,
+    ...animation ? ANIMATIONS[animation] ?? {} : {},
+    ...customVariant ? VARIANTS[customVariant]?.(theme) ?? {} : {},
+    // The old "both" arm was exactly these two spread together.
+    ...glow && glowStyles(theme),
+    ...pulse && pulseStyles(theme)
+  };
+};
+
+export {
+  sideOf,
+  arrowSx,
+  getAnchorOrigin,
+  getTransformOrigin,
+  cardSx
+};
+//# sourceMappingURL=chunk-ZUQIOWLN.js.map