@12-apps/ui 6.11.1 → 6.12.0

package/dist/chunk-Y3ER5CJ2.js

@@ -0,0 +1,293 @@
+import {
+  indicatorSizeFor,
+  stepColors,
+  stepPalette
+} from "./chunk-VXGCB3GY.js";
+
+// src/components/utility/WorkflowStep/WorkflowStep.parts.tsx
+import Box from "@mui/material/Box/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var indicatorVariantStyles = (theme, variant, { backgroundColor, borderColor, textColor }) => {
+  if (variant === "outlined") {
+    return {
+      border: `2px solid ${borderColor}`,
+      backgroundColor: theme.palette.background.paper
+    };
+  }
+  const filled = { backgroundColor, color: textColor };
+  switch (variant) {
+    case "filled":
+      return filled;
+    case "minimal":
+      return { ...filled, border: "none" };
+    case "default":
+      return { ...filled, border: `1px solid ${borderColor}` };
+    default:
+      return {};
+  }
+};
+var StepItem = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isLast"].includes(prop)
+})(({ orientation, isLast }) => ({
+  display: "flex",
+  flexDirection: orientation === "vertical" ? "column" : "row",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  flex: orientation === "horizontal" && !isLast ? 1 : "none",
+  position: "relative",
+  minWidth: 0
+  // Allow content to shrink
+}));
+var StepIndicator = styled(Box, {
+  shouldForwardProp: (prop) => !["size", "variant", "color", "isActive", "isCompleted", "isError", "interactive", "disabled"].includes(prop)
+})(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {
+  const indicatorSize = indicatorSizeFor(size);
+  const palette = stepPalette(theme, color);
+  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {
+    isActive,
+    isCompleted,
+    isError,
+    variant
+  });
+  return {
+    width: indicatorSize,
+    height: indicatorSize,
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    cursor: interactive && !disabled ? "pointer" : "default",
+    transition: animated ? theme.transitions.create(["background-color", "border-color", "transform"], {
+      duration: theme.transitions.duration.short
+    }) : "none",
+    flexShrink: 0,
+    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),
+    // Interactive states
+    ...interactive && !disabled && {
+      "&:hover": {
+        transform: "scale(1.1)",
+        boxShadow: theme.shadows[2]
+      },
+      "&:focus-visible": {
+        outline: `2px solid ${palette.main}`,
+        outlineOffset: "2px"
+      }
+    },
+    // Disabled state
+    ...disabled && {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    }
+  };
+});
+var StepContent = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "interactive", "disabled"].includes(prop)
+})(({ theme, orientation, interactive, disabled }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: orientation === "vertical" ? "flex-start" : "center",
+  textAlign: orientation === "vertical" ? "left" : "center",
+  marginTop: orientation === "vertical" ? theme.spacing(1) : theme.spacing(0.5),
+  marginLeft: orientation === "horizontal" ? theme.spacing(1) : 0,
+  cursor: interactive && !disabled ? "pointer" : "default",
+  minWidth: 0,
+  flex: 1,
+  "& .step-title": {
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.text.primary,
+    marginBottom: theme.spacing(0.5),
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "100%"
+  },
+  "& .step-description": {
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    maxWidth: "100%"
+  },
+  ...disabled && {
+    opacity: 0.5
+  }
+}));
+var StepConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isCompleted", "color", "variant"].includes(prop)
+})(({ theme, orientation, isCompleted, color, variant }) => {
+  const colorKey = color || "primary";
+  const colorValue = colorKey === "neutral" ? { main: theme.palette.grey[600] } : theme.palette[colorKey];
+  const connectorColor = isCompleted ? colorValue.main : theme.palette.grey[300];
+  return {
+    flex: 1,
+    position: "relative",
+    ...orientation === "horizontal" && {
+      height: "2px",
+      backgroundColor: connectorColor,
+      margin: `0 ${theme.spacing(1)}`,
+      minWidth: theme.spacing(2)
+    },
+    ...orientation === "vertical" && {
+      width: "2px",
+      backgroundColor: connectorColor,
+      minHeight: theme.spacing(3),
+      marginLeft: theme.spacing(2),
+      position: "absolute",
+      left: "50%",
+      transform: "translateX(-50%)",
+      top: "100%"
+    },
+    transition: theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.short
+    }),
+    ...variant === "minimal" && {
+      opacity: 0.6
+    }
+  };
+});
+var StepIndicatorComponent = forwardRef(({
+  step,
+  index,
+  isActive,
+  isCompleted,
+  isError,
+  variant,
+  color,
+  size,
+  showNumbers,
+  showIcons,
+  completedIcon,
+  errorIcon,
+  interactive,
+  animated,
+  disabled,
+  onClick,
+  "data-testid": dataTestId
+}, ref) => {
+  const handleClick = useCallback(() => {
+    if (interactive && !disabled && onClick) {
+      onClick(index, step);
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const handleKeyDown = useCallback((event) => {
+    if (interactive && !disabled && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(index, step);
+      }
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const renderIndicatorContent = () => {
+    if (isError && errorIcon) {
+      return errorIcon;
+    }
+    if (isCompleted && completedIcon) {
+      return completedIcon;
+    }
+    if (showIcons && step.icon) {
+      return step.icon;
+    }
+    if (showNumbers) {
+      return index + 1;
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx(
+    StepIndicator,
+    {
+      ref,
+      size,
+      variant,
+      color,
+      isActive,
+      isCompleted,
+      isError,
+      interactive,
+      animated,
+      disabled: Boolean(disabled || step.disabled),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive && !disabled && !step.disabled ? 0 : -1,
+      "aria-label": `Step ${index + 1}: ${step.title}`,
+      "aria-current": isActive ? "step" : void 0,
+      "data-testid": dataTestId,
+      children: renderIndicatorContent()
+    }
+  );
+});
+StepIndicatorComponent.displayName = "StepIndicator";
+var StepConnectorComponent = forwardRef(({
+  isCompleted,
+  orientation,
+  variant,
+  color,
+  "data-testid": dataTestId
+}, ref) => /* @__PURE__ */ jsx(
+  StepConnector,
+  {
+    ref,
+    orientation,
+    isCompleted,
+    color,
+    variant,
+    "data-testid": dataTestId
+  }
+));
+StepConnectorComponent.displayName = "StepConnector";
+var StepContentComponent = forwardRef(({
+  step,
+  index,
+  orientation,
+  interactive,
+  disabled,
+  onClick,
+  "data-testid": dataTestId
+}, ref) => {
+  const handleClick = useCallback(() => {
+    if (interactive && !disabled && onClick) {
+      onClick(index, step);
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  const handleKeyDown = useCallback((event) => {
+    if (interactive && !disabled && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      if (onClick) {
+        onClick(index, step);
+      }
+    }
+  }, [interactive, disabled, onClick, index, step]);
+  return /* @__PURE__ */ jsxs(
+    StepContent,
+    {
+      ref,
+      orientation,
+      interactive,
+      disabled: Boolean(disabled || step.disabled),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive && !disabled && !step.disabled ? 0 : -1,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "step-title", children: step.title }),
+        step.description && /* @__PURE__ */ jsx("div", { className: "step-description", children: step.description })
+      ]
+    }
+  );
+});
+StepContentComponent.displayName = "StepContent";
+var StepItemRow = ({ orientation, isLast, children }) => /* @__PURE__ */ jsx(StepItem, { orientation, isLast, children });
+
+export {
+  StepIndicatorComponent,
+  StepConnectorComponent,
+  StepContentComponent,
+  StepItemRow
+};
+//# sourceMappingURL=chunk-Y3ER5CJ2.js.map

package/dist/chunk-Y3ER5CJ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/utility/WorkflowStep/WorkflowStep.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef, useCallback } from 'react';\n\nimport type { StepColors } from './WorkflowStep.helpers';\nimport { indicatorSizeFor, stepColors, stepPalette } from './WorkflowStep.helpers';\nimport type {\n  StepConnectorProps,\n  StepContentProps,\n  StepIndicatorProps,\n  WorkflowStepProps,\n} from './WorkflowStep.types';\n\n// `outlined` shows the surface through a coloured rim; the other three fill it and\n// differ only in what border they keep.\nconst indicatorVariantStyles = (\n  theme: Theme,\n  variant: WorkflowStepProps['variant'],\n  { backgroundColor, borderColor, textColor }: StepColors,\n): CSSObject => {\n  if (variant === 'outlined') {\n    return {\n      border: `2px solid ${borderColor}`,\n      backgroundColor: theme.palette.background.paper,\n    };\n  }\n\n  const filled = { backgroundColor, color: textColor };\n\n  switch (variant) {\n    case 'filled':\n      return filled;\n    case 'minimal':\n      return { ...filled, border: 'none' };\n    case 'default':\n      return { ...filled, border: `1px solid ${borderColor}` };\n    default:\n      return {};\n  }\n};\n\nconst StepItem = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isLast'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n}>(({ orientation, isLast }) => ({\n  display: 'flex',\n  flexDirection: orientation === 'vertical' ? 'column' : 'row',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  flex: orientation === 'horizontal' && !isLast ? 1 : 'none',\n  position: 'relative',\n  minWidth: 0, // Allow content to shrink\n}));\n\nconst StepIndicator = styled(Box, {\n  shouldForwardProp: (prop) => !['size', 'variant', 'color', 'isActive', 'isCompleted', 'isError', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  size: WorkflowStepProps['size'];\n  variant: WorkflowStepProps['variant'];\n  color: WorkflowStepProps['color'];\n  isActive: boolean;\n  isCompleted: boolean;\n  isError: boolean;\n  interactive: boolean;\n  animated: boolean;\n  disabled: boolean;\n}>(({ theme, size, variant, color, isActive, isCompleted, isError, interactive, animated, disabled }) => {\n  const indicatorSize = indicatorSizeFor(size);\n  const palette = stepPalette(theme, color);\n  const { backgroundColor, borderColor, textColor } = stepColors(theme, palette, {\n    isActive,\n    isCompleted,\n    isError,\n    variant,\n  });\n\n  return {\n    width: indicatorSize,\n    height: indicatorSize,\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontSize: theme.typography.caption.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    cursor: interactive && !disabled ? 'pointer' : 'default',\n    transition: animated\n      ? theme.transitions.create(['background-color', 'border-color', 'transform'], {\n          duration: theme.transitions.duration.short,\n        })\n      : 'none',\n    flexShrink: 0,\n\n    ...indicatorVariantStyles(theme, variant, { backgroundColor, borderColor, textColor }),\n\n    // Interactive states\n    ...(interactive && !disabled && {\n      '&:hover': {\n        transform: 'scale(1.1)',\n        boxShadow: theme.shadows[2],\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${palette.main}`,\n        outlineOffset: '2px',\n      },\n    }),\n\n    // Disabled state\n    ...(disabled && {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    }),\n  };\n});\n\nconst StepContent = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'interactive', 'disabled'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  interactive: boolean;\n  disabled: boolean;\n}>(({ theme, orientation, interactive, disabled }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: orientation === 'vertical' ? 'flex-start' : 'center',\n  textAlign: orientation === 'vertical' ? 'left' : 'center',\n  marginTop: orientation === 'vertical' ? theme.spacing(1) : theme.spacing(0.5),\n  marginLeft: orientation === 'horizontal' ? theme.spacing(1) : 0,\n  cursor: interactive && !disabled ? 'pointer' : 'default',\n  minWidth: 0,\n  flex: 1,\n\n  '& .step-title': {\n    fontSize: theme.typography.body2.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.palette.text.primary,\n    marginBottom: theme.spacing(0.5),\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  '& .step-description': {\n    fontSize: theme.typography.caption.fontSize,\n    color: theme.palette.text.secondary,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    maxWidth: '100%',\n  },\n\n  ...(disabled && {\n    opacity: 0.5,\n  }),\n}));\n\nconst StepConnector = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isCompleted', 'color', 'variant'].includes(prop as string),\n})<{\n  orientation: WorkflowStepProps['orientation'];\n  isCompleted: boolean;\n  color: WorkflowStepProps['color'];\n  variant: WorkflowStepProps['variant'];\n}>(({ theme, orientation, isCompleted, color, variant }) => {\n  const colorKey = color || 'primary';\n  const colorValue = colorKey === 'neutral' \n    ? { main: theme.palette.grey[600] }\n    : theme.palette[colorKey as 'primary' | 'secondary' | 'success' | 'warning' | 'error'];\n  const connectorColor = isCompleted ? colorValue.main : theme.palette.grey[300];\n\n  return {\n    flex: 1,\n    position: 'relative',\n    \n    ...(orientation === 'horizontal' && {\n      height: '2px',\n      backgroundColor: connectorColor,\n      margin: `0 ${theme.spacing(1)}`,\n      minWidth: theme.spacing(2),\n    }),\n    \n    ...(orientation === 'vertical' && {\n      width: '2px',\n      backgroundColor: connectorColor,\n      minHeight: theme.spacing(3),\n      marginLeft: theme.spacing(2),\n      position: 'absolute',\n      left: '50%',\n      transform: 'translateX(-50%)',\n      top: '100%',\n    }),\n\n    transition: theme.transitions.create('background-color', {\n      duration: theme.transitions.duration.short,\n    }),\n\n    ...(variant === 'minimal' && {\n      opacity: 0.6,\n    }),\n  };\n});\n\n/**\n * Individual step indicator component\n */\nconst StepIndicatorComponent = forwardRef<HTMLDivElement, StepIndicatorProps>(({\n  step,\n  index,\n  isActive,\n  isCompleted,\n  isError,\n  variant,\n  color,\n  size,\n  showNumbers,\n  showIcons,\n  completedIcon,\n  errorIcon,\n  interactive,\n  animated,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const renderIndicatorContent = () => {\n    if (isError && errorIcon) {\n      return errorIcon;\n    }\n    if (isCompleted && completedIcon) {\n      return completedIcon;\n    }\n    if (showIcons && step.icon) {\n      return step.icon;\n    }\n    if (showNumbers) {\n      return index + 1;\n    }\n    return null;\n  };\n\n  return (\n    <StepIndicator\n      ref={ref}\n      size={size}\n      variant={variant}\n      color={color}\n      isActive={isActive}\n      isCompleted={isCompleted}\n      isError={isError}\n      interactive={interactive}\n      animated={animated}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      aria-label={`Step ${index + 1}: ${step.title}`}\n      aria-current={isActive ? 'step' : undefined}\n      data-testid={dataTestId}\n    >\n      {renderIndicatorContent()}\n    </StepIndicator>\n  );\n});\n\nStepIndicatorComponent.displayName = 'StepIndicator';\n\n/**\n * Step connector component\n */\nconst StepConnectorComponent = forwardRef<HTMLDivElement, StepConnectorProps>(({\n  isCompleted,\n  orientation,\n  variant,\n  color,\n  'data-testid': dataTestId,\n}, ref) => (\n  <StepConnector\n    ref={ref}\n    orientation={orientation}\n    isCompleted={isCompleted}\n    color={color}\n    variant={variant}\n    data-testid={dataTestId}\n  />\n));\n\nStepConnectorComponent.displayName = 'StepConnector';\n\n/**\n * Step content component\n */\nconst StepContentComponent = forwardRef<HTMLDivElement, StepContentProps>(({\n  step,\n  index,\n  orientation,\n  interactive,\n  disabled,\n  onClick,\n  'data-testid': dataTestId,\n}, ref) => {\n  const handleClick = useCallback(() => {\n    if (interactive && !disabled && onClick) {\n      onClick(index, step);\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {\n    if (interactive && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      if (onClick) {\n        onClick(index, step);\n      }\n    }\n  }, [interactive, disabled, onClick, index, step]);\n\n  return (\n    <StepContent\n      ref={ref}\n      orientation={orientation}\n      interactive={interactive}\n      disabled={Boolean(disabled || step.disabled)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive && !disabled && !step.disabled ? 0 : -1}\n      data-testid={dataTestId}\n    >\n      <div className=\"step-title\">{step.title}</div>\n      {step.description && (\n        <div className=\"step-description\">{step.description}</div>\n      )}\n    </StepContent>\n  );\n});\n\nStepContentComponent.displayName = 'StepContent';\n\n/**\n * A plain wrapper around the styled row. Exporting the styled component itself\n * trips TS2742 — its inferred type names a pnpm-internal @mui/system path.\n */\nexport const StepItemRow: React.FC<{\n  orientation: WorkflowStepProps['orientation'];\n  isLast: boolean;\n  children: React.ReactNode;\n}> = ({ orientation, isLast, children }) => (\n  <StepItem orientation={orientation} isLast={isLast}>\n    {children}\n  </StepItem>\n);\n\nexport { StepConnectorComponent, StepContentComponent, StepIndicatorComponent };\n"],"mappings":"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","names":[]}

package/dist/chunk-YB6MDGPR.js

@@ -0,0 +1,161 @@
+// src/components/layout/ContentToolbar/MultiSelectTriggers.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildTriggerLabel(selected, options, allLabel) {
+  const size = selected.size;
+  if (size === 0 || size === options.length) return allLabel;
+  const labelMap = new Map(options.map((option) => [option.value, option.label]));
+  const firstValue = selected.values().next().value;
+  const firstLabel = labelMap.get(firstValue) ?? allLabel;
+  if (size === 1) return firstLabel;
+  return `${firstLabel} (+${size - 1})`;
+}
+function InlineTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
+    /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { color: "text.secondary", fontSize: "0.875rem" }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: onOpen,
+        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          triggerLabel,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    )
+  ] });
+}
+function StackedTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx(Typography, { id: `${baseId}-label`, component: "label", sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outlined",
+        color: "inherit",
+        fullWidth: true,
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-labelledby": `${baseId}-label ${baseId}-value`,
+        onClick: onOpen,
+        endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 18, color: "text.secondary" } }),
+        sx: {
+          justifyContent: "space-between",
+          height: 40,
+          px: 1.5,
+          color: "text.primary",
+          textTransform: "none",
+          fontWeight: 400,
+          fontSize: "0.875rem",
+          borderColor: "divider",
+          bgcolor: "background.paper",
+          "&:hover": { borderColor: "text.primary", bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            id: `${baseId}-value`,
+            sx: { flex: 1, minWidth: 0, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            children: triggerLabel
+          }
+        )
+      }
+    )
+  ] });
+}
+function PillTrigger({
+  label,
+  open,
+  onOpen,
+  testId,
+  selectedCount,
+  onClear,
+  clearLabel
+}) {
+  const active = selectedCount > 0;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      "data-testid": testId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onClick: onOpen,
+      startIcon: active && onClear ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          role: "button",
+          tabIndex: 0,
+          "aria-label": clearLabel,
+          "data-testid": testId ? `${testId}-clear` : void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            onClear();
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            event.stopPropagation();
+            onClear();
+          },
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "50%",
+            cursor: "pointer",
+            color: "primary.main",
+            "&:hover": { bgcolor: "primary.main", color: "primary.contrastText" }
+          },
+          children: /* @__PURE__ */ jsx(CloseIcon, { sx: { fontSize: 14 } })
+        }
+      ) : void 0,
+      endIcon: /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 16 } }),
+      sx: {
+        borderRadius: 999,
+        height: 34,
+        px: 1.5,
+        color: "text.primary",
+        fontWeight: 600,
+        fontSize: "0.8125rem",
+        textTransform: "none",
+        borderColor: active ? "primary.main" : "divider",
+        bgcolor: active ? "action.selected" : "background.paper",
+        "&:hover": { borderColor: active ? "primary.main" : "text.primary", bgcolor: active ? "action.selected" : "action.hover" }
+      },
+      children: [
+        label,
+        active ? ` (${selectedCount})` : ""
+      ]
+    }
+  );
+}
+
+export {
+  buildTriggerLabel,
+  InlineTrigger,
+  StackedTrigger,
+  PillTrigger
+};
+//# sourceMappingURL=chunk-YB6MDGPR.js.map

package/dist/chunk-YB6MDGPR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/MultiSelectTriggers.tsx"],"sourcesContent":["'use client';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useId } from 'react';\n\nimport type { MultiSelectOption } from './ContentToolbar.types';\n\n/**\n * Trigger label from the current selection: `allLabel` when none/all are\n * selected, the single label when one, else \"first (+N)\". Uses Set iteration\n * order so the label reflects the first-clicked option.\n */\nexport function buildTriggerLabel<TValue extends string>(\n  selected: ReadonlySet<TValue>,\n  options: MultiSelectOption<TValue>[],\n  allLabel: string,\n): string {\n  const size = selected.size;\n  if (size === 0 || size === options.length) return allLabel;\n  const labelMap = new Map(options.map((option) => [option.value, option.label]));\n  const firstValue = selected.values().next().value as TValue;\n  const firstLabel = labelMap.get(firstValue) ?? allLabel;\n  if (size === 1) return firstLabel;\n  return `${firstLabel} (+${size - 1})`;\n}\n\nexport interface TriggerProps {\n  label: string;\n  triggerLabel: string;\n  open: boolean;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  testId?: string;\n}\n\n/** Compact `Label:` text button for a horizontal toolbar (the default layout). */\nexport function InlineTrigger({ label, triggerLabel, open, onOpen, testId }: TriggerProps): React.JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>\n      <Typography component=\"span\" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>\n        {label}:\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={onOpen}\n        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}\n      >\n        {triggerLabel}\n        <ChevronDownIcon sx={{ fontSize: 14 }} />\n      </Button>\n    </Box>\n  );\n}\n\n/** Full-width, outlined select-style control with the label above (stacked layout). */\nexport function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: TriggerProps): React.JSX.Element {\n  // Name the button by label + value (aria-labelledby): a <button> isn't labelable.\n  const baseId = useId();\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n      <Typography id={`${baseId}-label`} component=\"label\" sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>\n        {label}\n      </Typography>\n      <Button\n        variant=\"outlined\"\n        color=\"inherit\"\n        fullWidth\n        data-testid={testId}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        aria-labelledby={`${baseId}-label ${baseId}-value`}\n        onClick={onOpen}\n        endIcon={<ChevronDownIcon sx={{ fontSize: 18, color: 'text.secondary' }} />}\n        sx={{\n          justifyContent: 'space-between',\n          height: 40,\n          px: 1.5,\n          color: 'text.primary',\n          textTransform: 'none',\n          fontWeight: 400,\n          fontSize: '0.875rem',\n          borderColor: 'divider',\n          bgcolor: 'background.paper',\n          '&:hover': { borderColor: 'text.primary', bgcolor: 'background.paper' },\n        }}\n      >\n        <Box\n          component=\"span\" id={`${baseId}-value`}\n          sx={{ flex: 1, minWidth: 0, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n        >\n          {triggerLabel}\n        </Box>\n      </Button>\n    </Box>\n  );\n}\n\n/** Rounded outlined chip (`Label ▾`, `Label (N) ▾` when selected) for a filter row. */\n/** The pill's own props, above the component so the signature stays short. */\nexport type PillTriggerProps = TriggerProps & {\n  selectedCount: number;\n  onClear?: () => void;\n  /**\n   * The clear affordance's accessible name — the pill's own label is already\n   * on screen, so this is the only thing a screen reader gets for the little\n   * cross. REQUIRED: this package ships no default copy.\n   */\n  clearLabel: string;\n};\n\nexport function PillTrigger({\n  label,\n  open,\n  onOpen,\n  testId,\n  selectedCount,\n  onClear,\n  clearLabel,\n}: PillTriggerProps): React.JSX.Element {\n  const active = selectedCount > 0;\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"menu\"\n      aria-expanded={open}\n      onClick={onOpen}\n      // Clearing lives ON the pill: the filter and the way to remove it are one\n      // control, so removing one does not mean finding it again in a second\n      // list somewhere else on the page.\n      startIcon={\n        active && onClear ? (\n          <Box\n            component=\"span\"\n            role=\"button\"\n            tabIndex={0}\n            aria-label={clearLabel}\n            data-testid={testId ? `${testId}-clear` : undefined}\n            onClick={(event: React.MouseEvent) => {\n              // The pill's own click opens the menu; clearing must not.\n              event.stopPropagation();\n              onClear();\n            }}\n            onKeyDown={(event: React.KeyboardEvent) => {\n              if (event.key !== 'Enter' && event.key !== ' ') return;\n              event.preventDefault();\n              event.stopPropagation();\n              onClear();\n            }}\n            sx={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n              borderRadius: '50%',\n              cursor: 'pointer',\n              color: 'primary.main',\n              '&:hover': { bgcolor: 'primary.main', color: 'primary.contrastText' },\n            }}\n          >\n            <CloseIcon sx={{ fontSize: 14 }} />\n          </Box>\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}\n      sx={{\n        borderRadius: 999,\n        height: 34,\n        px: 1.5,\n        color: 'text.primary',\n        fontWeight: 600,\n        fontSize: '0.8125rem',\n        textTransform: 'none',\n        borderColor: active ? 'primary.main' : 'divider',\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': { borderColor: active ? 'primary.main' : 'text.primary', bgcolor: active ? 'action.selected' : 'action.hover' },\n      }}\n    >\n      {label}\n      {active ? ` (${selectedCount})` : ''}\n    </Button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-YBJZ536V.js

@@ -0,0 +1,93 @@
+// src/components/form/PasswordStrength/PasswordStrength.helpers.tsx
+import SecurityIcon from "@mui/icons-material/Security";
+import SuccessIcon from "@mui/icons-material/CheckCircle";
+import WarningIcon from "@mui/icons-material/Warning";
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultRequirements = {
+  minLength: 8,
+  uppercase: true,
+  lowercase: true,
+  numbers: true,
+  special: true
+};
+var SPECIAL_CHARACTERS = /[!@#$%^&*(),.?":{}|<>]/;
+var DEFAULT_MIN_LENGTH = 8;
+var REQUIREMENT_POINTS = {
+  length: 20,
+  uppercase: 10,
+  lowercase: 10,
+  numbers: 15,
+  special: 15
+};
+var evaluateRequirements = (password, requirements) => {
+  if (!password) {
+    return { length: false, uppercase: false, lowercase: false, numbers: false, special: false };
+  }
+  return {
+    length: password.length >= (requirements.minLength || DEFAULT_MIN_LENGTH),
+    uppercase: !requirements.uppercase || /[A-Z]/.test(password),
+    lowercase: !requirements.lowercase || /[a-z]/.test(password),
+    numbers: !requirements.numbers || /\d/.test(password),
+    special: !requirements.special || SPECIAL_CHARACTERS.test(password)
+  };
+};
+var lengthBonus = (length) => {
+  const base = Math.min(length * 3, 30);
+  const over12 = length > 12 ? 10 : 0;
+  const over16 = length > 16 ? 10 : 0;
+  return base + over12 + over16;
+};
+var calculatePasswordStrength = (password, requirements) => {
+  if (!password) return 0;
+  const checks = evaluateRequirements(password, requirements);
+  const earned = Object.entries(REQUIREMENT_POINTS).reduce(
+    (total, [key, points]) => total + (checks[key] ? points : 0),
+    0
+  );
+  return Math.min(earned + lengthBonus(password.length), 100);
+};
+var STRENGTH_BANDS = [
+  [20, "veryWeak"],
+  [40, "weak"],
+  [60, "fair"],
+  [80, "good"]
+];
+var getStrengthLabel = (strength, bands) => bands[STRENGTH_BANDS.find(([ceiling]) => strength <= ceiling)?.[1] ?? "strong"];
+var getStrengthIcon = (strength) => {
+  if (strength <= 40) return /* @__PURE__ */ jsx(WarningIcon, {});
+  if (strength <= 80) return /* @__PURE__ */ jsx(SecurityIcon, {});
+  return /* @__PURE__ */ jsx(SuccessIcon, {});
+};
+var SUGGESTION_KEYS = [
+  ["length", "minLength"],
+  ["uppercase", "uppercase"],
+  ["lowercase", "lowercase"],
+  ["numbers", "numbers"],
+  ["special", "special"]
+];
+var buildSuggestions = (checks, copy, minLength) => SUGGESTION_KEYS.filter(([check]) => !checks[check]).map(
+  ([, key]) => key === "minLength" ? copy.minLength(minLength) : copy[key]
+);
+var SuggestionsList = ({
+  suggestions,
+  heading
+}) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", fontWeight: "medium", children: heading }),
+  /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: suggestions.map((tip) => /* @__PURE__ */ jsxs(Typography, { variant: "caption", display: "block", color: "warning.main", sx: { ml: 2 }, children: [
+    "\u2022 ",
+    tip
+  ] }, tip)) })
+] });
+
+export {
+  defaultRequirements,
+  evaluateRequirements,
+  calculatePasswordStrength,
+  getStrengthLabel,
+  getStrengthIcon,
+  buildSuggestions,
+  SuggestionsList
+};
+//# sourceMappingURL=chunk-YBJZ536V.js.map

package/dist/chunk-YBJZ536V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PasswordStrength/PasswordStrength.helpers.tsx"],"sourcesContent":["import SecurityIcon from '@mui/icons-material/Security';\nimport SuccessIcon from '@mui/icons-material/CheckCircle';\nimport WarningIcon from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React from 'react';\n\nimport type { PasswordRequirementCopy, PasswordStrengthCopy } from '../../../copy';\nimport type { PasswordRequirements } from './PasswordStrength.types';\n\nexport const defaultRequirements: PasswordRequirements = {\n  minLength: 8,\n  uppercase: true,\n  lowercase: true,\n  numbers: true,\n  special: true,\n};\n\n\nconst SPECIAL_CHARACTERS = /[!@#$%^&*(),.?\":{}|<>]/;\nconst DEFAULT_MIN_LENGTH = 8;\n\n// Points awarded per satisfied requirement.\nconst REQUIREMENT_POINTS = {\n  length: 20,\n  uppercase: 10,\n  lowercase: 10,\n  numbers: 15,\n  special: 15,\n} as const;\n\nexport type RequirementChecks = Record<keyof typeof REQUIREMENT_POINTS, boolean>;\n\n// A requirement that is switched off counts as satisfied. This was previously\n// written out twice — once to score the password and once to render the\n// checklist — so the two could drift.\nexport const evaluateRequirements = (\n  password: string,\n  requirements: PasswordRequirements,\n): RequirementChecks => {\n  if (!password) {\n    return { length: false, uppercase: false, lowercase: false, numbers: false, special: false };\n  }\n\n  return {\n    length: password.length >= (requirements.minLength || DEFAULT_MIN_LENGTH),\n    uppercase: !requirements.uppercase || /[A-Z]/.test(password),\n    lowercase: !requirements.lowercase || /[a-z]/.test(password),\n    numbers: !requirements.numbers || /\\d/.test(password),\n    special: !requirements.special || SPECIAL_CHARACTERS.test(password),\n  };\n};\n\nconst lengthBonus = (length: number): number => {\n  const base = Math.min(length * 3, 30);\n  const over12 = length > 12 ? 10 : 0;\n  const over16 = length > 16 ? 10 : 0;\n\n  return base + over12 + over16;\n};\n\nexport const calculatePasswordStrength = (\n  password: string,\n  requirements: PasswordRequirements,\n): number => {\n  if (!password) return 0;\n\n  const checks = evaluateRequirements(password, requirements);\n  const earned = Object.entries(REQUIREMENT_POINTS).reduce(\n    (total, [key, points]) => total + (checks[key as keyof RequirementChecks] ? points : 0),\n    0,\n  );\n\n  return Math.min(earned + lengthBonus(password.length), 100);\n};\n\n// The four ceilings, and which band each one names. The band NAMES come from\n// the host's table — only the thresholds are ours.\nconst STRENGTH_BANDS: ReadonlyArray<[number, keyof PasswordStrengthCopy['bands']]> = [\n  [20, 'veryWeak'],\n  [40, 'weak'],\n  [60, 'fair'],\n  [80, 'good'],\n];\n\nexport const getStrengthLabel = (\n  strength: number,\n  bands: PasswordStrengthCopy['bands'],\n): string => bands[STRENGTH_BANDS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'strong'];\n\nexport const getStrengthIcon = (strength: number) => {\n  if (strength <= 40) return <WarningIcon />;\n  if (strength <= 80) return <SecurityIcon />;\n  return <SuccessIcon />;\n};\n\n// One tip per unmet requirement, in checklist order. The `length` tip carries\n// the configured minimum, so the number in the sentence is the one enforced.\nconst SUGGESTION_KEYS: ReadonlyArray<[keyof RequirementChecks, keyof PasswordRequirementCopy]> = [\n  ['length', 'minLength'],\n  ['uppercase', 'uppercase'],\n  ['lowercase', 'lowercase'],\n  ['numbers', 'numbers'],\n  ['special', 'special'],\n];\n\nexport const buildSuggestions = (\n  checks: RequirementChecks,\n  copy: PasswordRequirementCopy,\n  minLength: number,\n): string[] =>\n  SUGGESTION_KEYS.filter(([check]) => !checks[check]).map(([, key]) =>\n    key === 'minLength' ? copy.minLength(minLength) : copy[key],\n  );\n\n// Rendered by PasswordStrength; depends on nothing styled, so it lives beside\n// the pure helpers rather than in the component file.\nexport const SuggestionsList: React.FC<{ suggestions: string[]; heading: string }> = ({\n  suggestions,\n  heading,\n}) => (\n  <Box>\n    <Typography variant=\"caption\" color=\"text.secondary\" fontWeight=\"medium\">\n      {heading}\n    </Typography>\n    <Box sx={{ mt: 1 }}>\n      {suggestions.map((tip) => (\n        <Typography key={tip} variant=\"caption\" display=\"block\" color=\"warning.main\" sx={{ ml: 2 }}>\n          • {tip}\n        </Typography>\n      ))}\n    </Box>\n  </Box>\n);\n"],"mappings":"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","names":[]}