@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-SQ5AV7IK.js

@@ -0,0 +1,282 @@
+// src/components/data-display/Stepper/Stepper.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import {
+  Box,
+  Button,
+  styled,
+  Typography
+} from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STEP_MIN_WIDTH = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };
+var STEP_ICON_SIZE = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };
+var StepperRoot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "orientation"
+})(({ orientation }) => ({
+  display: "flex",
+  flexDirection: orientation === "horizontal" ? "row" : "column",
+  // Use flex-start to align all step circles at the same vertical position
+  alignItems: "flex-start"
+}));
+var StepItem = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isLast"].includes(prop)
+})(({ orientation, isLast }) => ({
+  display: "flex",
+  // For horizontal: row layout so connector appears beside step content
+  // For vertical: column layout so connector appears below step content
+  flexDirection: orientation === "horizontal" ? "row" : "column",
+  // For horizontal: flex-start to keep circles aligned at top
+  // For vertical: center to align connector with centered circle
+  alignItems: orientation === "horizontal" ? "flex-start" : "center",
+  flex: orientation === "horizontal" && !isLast ? 1 : "none",
+  position: "relative",
+  // For vertical: ensure consistent width for proper centering
+  ...orientation === "vertical" && {
+    width: "100%"
+  }
+}));
+var CIRCLE_SIZE = { xs: 24, sm: 32, md: 48, lg: 60, xl: 72 };
+var StepButton = styled(Button, {
+  shouldForwardProp: (prop) => !["isActive", "isCompleted", "clickable", "stepSize"].includes(prop)
+})(
+  ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
+    minWidth: CIRCLE_SIZE[stepSize],
+    width: CIRCLE_SIZE[stepSize],
+    height: CIRCLE_SIZE[stepSize],
+    borderRadius: "50%",
+    padding: 0,
+    backgroundColor: isCompleted ? theme.palette.primary.main : isActive ? theme.palette.primary.main : theme.palette.grey[300],
+    color: isCompleted || isActive ? theme.palette.primary.contrastText : theme.palette.text.primary,
+    cursor: clickable ? "pointer" : "default",
+    pointerEvents: clickable ? "auto" : "none",
+    transition: theme.transitions.create(["background-color", "transform"], {
+      duration: theme.transitions.duration.short
+    }),
+    "&:hover": clickable ? {
+      backgroundColor: isCompleted ? theme.palette.primary.dark : isActive ? theme.palette.primary.dark : theme.palette.grey[400],
+      transform: "scale(1.05)"
+    } : {},
+    "&:disabled": {
+      backgroundColor: theme.palette.grey[300],
+      color: theme.palette.text.disabled
+    }
+  })
+);
+var StepConnector = styled(Box, {
+  shouldForwardProp: (prop) => !["orientation", "isCompleted", "size"].includes(prop)
+})(
+  ({ theme, orientation, isCompleted, size }) => ({
+    backgroundColor: isCompleted ? theme.palette.primary.main : theme.palette.grey[300],
+    transition: theme.transitions.create("background-color", {
+      duration: theme.transitions.duration.short
+    }),
+    ...orientation === "horizontal" ? {
+      flex: 1,
+      height: 2,
+      // Vertically centered on the circle (circle/2 - 1 for the 2px line).
+      marginTop: CIRCLE_SIZE[size] / 2 - 1,
+      marginLeft: 8,
+      marginRight: 8,
+      minWidth: 24
+    } : {
+      width: 2,
+      height: 32,
+      marginTop: 8,
+      marginBottom: 8,
+      // Use margin auto to center horizontally
+      marginLeft: "auto",
+      marginRight: "auto"
+    }
+  })
+);
+var StepLabel = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "orientation"
+})(({ orientation }) => ({
+  textAlign: "center",
+  marginTop: orientation === "horizontal" ? 8 : 0
+}));
+function stepClasses(isActive, isCompleted, optional) {
+  return [
+    isActive && "stepper-step-active",
+    isCompleted && "stepper-step-completed",
+    optional && "stepper-step-optional"
+  ].filter(Boolean).join(" ");
+}
+function contentSx(orientation, size) {
+  return orientation === "horizontal" ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: "0 1 auto" } : { flexShrink: 0 };
+}
+var StepCircle = ({ step, index, isActive, isCompleted, isClickable, size, labelVariant, onClick }) => {
+  const state = isCompleted ? " (completed)" : isActive ? " (current)" : "";
+  return /* @__PURE__ */ jsx(
+    StepButton,
+    {
+      isActive,
+      isCompleted,
+      clickable: isClickable,
+      stepSize: size,
+      onClick,
+      disabled: step.disabled,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-label": `Step ${index + 1}: ${step.label}${step.optional ? " (optional)" : ""}${state}`,
+      "data-testid": `stepper-step-icon-${index}`,
+      children: isCompleted ? /* @__PURE__ */ jsx(CheckCircle, { sx: { fontSize: STEP_ICON_SIZE[size] } }) : /* @__PURE__ */ jsx(Typography, { variant: labelVariant, fontWeight: "bold", children: index + 1 })
+    }
+  );
+};
+var StepLabelBlock = ({
+  step,
+  index,
+  isActive,
+  orientation,
+  size,
+  labelVariant
+}) => /* @__PURE__ */ jsxs(
+  StepLabel,
+  {
+    orientation,
+    "data-testid": `stepper-step-label-${index}`,
+    sx: size === "sm" && orientation === "horizontal" ? { mt: "2px" } : void 0,
+    children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: labelVariant,
+          fontWeight: isActive ? "bold" : "normal",
+          color: isActive ? "primary" : "textPrimary",
+          children: [
+            step.label,
+            step.optional && /* @__PURE__ */ jsx(Typography, { component: "span", variant: "caption", color: "textSecondary", sx: { ml: 1 }, children: "(optional)" })
+          ]
+        }
+      ),
+      step.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", display: "block", children: step.description })
+    ]
+  }
+);
+var StepperItem = ({
+  step,
+  index,
+  isActive,
+  isCompleted,
+  isLast,
+  orientation,
+  size,
+  variant,
+  clickable,
+  onStepClick,
+  renderConnector,
+  nextStep
+}) => {
+  const labelVariant = size === "sm" ? "caption" : "body2";
+  const isClickable = Boolean(clickable) && !step.disabled && (variant === "non-linear" || !isActive);
+  const handleStepClick = () => {
+    if (isClickable && onStepClick) onStepClick(step.id);
+  };
+  const connector = renderConnector && nextStep ? renderConnector(step, nextStep, { completed: isCompleted, active: isActive }) : /* @__PURE__ */ jsx(StepConnector, { orientation, isCompleted, size, "data-testid": `stepper-connector-${index}` });
+  return /* @__PURE__ */ jsxs(
+    StepItem,
+    {
+      orientation,
+      isLast,
+      role: "listitem",
+      "data-testid": `stepper-step-${index}`,
+      className: stepClasses(isActive, isCompleted, step.optional),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            "data-testid": `stepper-step-content-${index}`,
+            sx: contentSx(orientation, size),
+            children: [
+              /* @__PURE__ */ jsx(
+                StepCircle,
+                {
+                  step,
+                  index,
+                  isActive,
+                  isCompleted,
+                  isClickable,
+                  size,
+                  labelVariant,
+                  onClick: handleStepClick
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                StepLabelBlock,
+                {
+                  step,
+                  index,
+                  isActive,
+                  orientation,
+                  size,
+                  labelVariant
+                }
+              )
+            ]
+          }
+        ),
+        !isLast && connector
+      ]
+    }
+  );
+};
+var Stepper = ({
+  steps,
+  activeId,
+  completed = /* @__PURE__ */ new Set(),
+  orientation = "horizontal",
+  size = "md",
+  variant = "linear",
+  onStepChange,
+  clickable,
+  renderConnector,
+  className,
+  "data-testid": dataTestId
+}) => {
+  const isClickable = clickable ?? variant === "non-linear";
+  return /* @__PURE__ */ jsx(
+    StepperRoot,
+    {
+      component: "ol",
+      orientation,
+      className,
+      "data-testid": dataTestId || "stepper-container",
+      sx: {
+        listStyle: "none",
+        padding: 0,
+        margin: 0
+      },
+      children: steps.map((step, index) => {
+        const isActive = step.id === activeId;
+        const isCompleted = completed.has(step.id);
+        const isLast = index === steps.length - 1;
+        const nextStep = !isLast ? steps[index + 1] : void 0;
+        return /* @__PURE__ */ jsx(
+          StepperItem,
+          {
+            step,
+            index,
+            isActive,
+            isCompleted,
+            isLast,
+            orientation,
+            size,
+            variant,
+            clickable: isClickable,
+            onStepClick: onStepChange,
+            renderConnector,
+            nextStep
+          },
+          step.id
+        );
+      })
+    }
+  );
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-SQ5AV7IK.js.map

package/dist/chunk-SQ5AV7IK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Stepper/Stepper.tsx"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport {\n  Box,\n  Button,\n  styled,\n  Typography,\n} from '@mui/material';\nimport React from 'react';\n\nimport type { Step, StepItemProps, StepperProps } from './Stepper.types';\nimport type { SizeValue } from '../../../tokens/scales';\n\n/**\n * The five house stops, drawn rather than collapsed.\n *\n * These were two-way ternaries on `sm`, which is what a two-value size prop\n * allows; with the full scale they have to be real values or the three new\n * stops would render identically to `md` and the prop would be a lie.\n */\nconst STEP_MIN_WIDTH: Record<SizeValue, number> = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };\nconst STEP_ICON_SIZE: Record<SizeValue, number> = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };\n\n\nconst StepperRoot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'orientation',\n})<{ orientation: 'horizontal' | 'vertical'; component?: React.ElementType }>(({ orientation }) => ({\n  display: 'flex',\n  flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n  // Use flex-start to align all step circles at the same vertical position\n  alignItems: 'flex-start',\n}));\n\nconst StepItem = styled(Box, {\n  shouldForwardProp: (prop) => !['orientation', 'isLast'].includes(prop as string),\n})<{ orientation: 'horizontal' | 'vertical'; isLast: boolean }>(({ orientation, isLast }) => ({\n  display: 'flex',\n  // For horizontal: row layout so connector appears beside step content\n  // For vertical: column layout so connector appears below step content\n  flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n  // For horizontal: flex-start to keep circles aligned at top\n  // For vertical: center to align connector with centered circle\n  alignItems: orientation === 'horizontal' ? 'flex-start' : 'center',\n  flex: orientation === 'horizontal' && !isLast ? 1 : 'none',\n  position: 'relative',\n  // For vertical: ensure consistent width for proper centering\n  ...(orientation === 'vertical' && {\n    width: '100%',\n  }),\n}));\n\n/** Circle diameter per size. */\nconst CIRCLE_SIZE: Record<SizeValue, number> = { xs: 24, sm: 32, md: 48, lg: 60, xl: 72 };\n\nconst StepButton = styled(Button, {\n  shouldForwardProp: (prop) =>\n    !['isActive', 'isCompleted', 'clickable', 'stepSize'].includes(prop as string),\n})<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: SizeValue }>(\n  ({ theme, isActive, isCompleted, clickable, stepSize }) => ({\n    minWidth: CIRCLE_SIZE[stepSize],\n    width: CIRCLE_SIZE[stepSize],\n    height: CIRCLE_SIZE[stepSize],\n    borderRadius: '50%',\n    padding: 0,\n    backgroundColor: isCompleted\n      ? theme.palette.primary.main\n      : isActive\n      ? theme.palette.primary.main\n      : theme.palette.grey[300],\n    color: isCompleted || isActive ? theme.palette.primary.contrastText : theme.palette.text.primary,\n    cursor: clickable ? 'pointer' : 'default',\n    pointerEvents: clickable ? 'auto' : 'none',\n    transition: theme.transitions.create(['background-color', 'transform'], {\n      duration: theme.transitions.duration.short,\n    }),\n    '&:hover': clickable\n      ? {\n          backgroundColor: isCompleted\n            ? theme.palette.primary.dark\n            : isActive\n            ? theme.palette.primary.dark\n            : theme.palette.grey[400],\n          transform: 'scale(1.05)',\n        }\n      : {},\n    '&:disabled': {\n      backgroundColor: theme.palette.grey[300],\n      color: theme.palette.text.disabled,\n    },\n  }),\n);\n\nconst StepConnector = styled(Box, {\n  shouldForwardProp: (prop) =>\n    !['orientation', 'isCompleted', 'size'].includes(prop as string),\n})<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: SizeValue }>(\n  ({ theme, orientation, isCompleted, size }) => ({\n    backgroundColor: isCompleted ? theme.palette.primary.main : theme.palette.grey[300],\n    transition: theme.transitions.create('background-color', {\n      duration: theme.transitions.duration.short,\n    }),\n    ...(orientation === 'horizontal'\n      ? {\n          flex: 1,\n          height: 2,\n          // Vertically centered on the circle (circle/2 - 1 for the 2px line).\n          marginTop: CIRCLE_SIZE[size] / 2 - 1,\n          marginLeft: 8,\n          marginRight: 8,\n          minWidth: 24,\n        }\n      : {\n          width: 2,\n          height: 32,\n          marginTop: 8,\n          marginBottom: 8,\n          // Use margin auto to center horizontally\n          marginLeft: 'auto',\n          marginRight: 'auto',\n        }),\n  }),\n);\n\nconst StepLabel = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'orientation',\n})<{ orientation: 'horizontal' | 'vertical' }>(({ orientation }) => ({\n  textAlign: 'center',\n  marginTop: orientation === 'horizontal' ? 8 : 0,\n}));\n\ntype StepSize = SizeValue;\ntype LabelVariant = 'caption' | 'body2';\n\n/** Space-joined state classes for a step (active / completed / optional). */\nfunction stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean): string {\n  return [\n    isActive && 'stepper-step-active',\n    isCompleted && 'stepper-step-completed',\n    optional && 'stepper-step-optional',\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** The circle content-column width per orientation/size. */\nfunction contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {\n  return orientation === 'horizontal'\n    ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: '0 1 auto' }\n    : { flexShrink: 0 };\n}\n\ninterface StepPartProps {\n  step: Step;\n  index: number;\n  isActive: boolean;\n  size: StepSize;\n  labelVariant: LabelVariant;\n}\n\n/** The step circle: a check when completed, otherwise the 1-based index. */\nconst StepCircle: React.FC<\n  StepPartProps & { isCompleted: boolean; isClickable: boolean; onClick: () => void }\n> = ({ step, index, isActive, isCompleted, isClickable, size, labelVariant, onClick }) => {\n  const state = isCompleted ? ' (completed)' : isActive ? ' (current)' : '';\n  return (\n    <StepButton\n      isActive={isActive}\n      isCompleted={isCompleted}\n      clickable={isClickable}\n      stepSize={size}\n      onClick={onClick}\n      disabled={step.disabled}\n      aria-current={isActive ? 'step' : undefined}\n      aria-label={`Step ${index + 1}: ${step.label}${step.optional ? ' (optional)' : ''}${state}`}\n      data-testid={`stepper-step-icon-${index}`}\n    >\n      {isCompleted ? (\n        <CheckCircle sx={{ fontSize: STEP_ICON_SIZE[size] }} />\n      ) : (\n        <Typography variant={labelVariant} fontWeight=\"bold\">\n          {index + 1}\n        </Typography>\n      )}\n    </StepButton>\n  );\n};\n\n/** The step label block: title, optional marker, and description. */\nconst StepLabelBlock: React.FC<StepPartProps & { orientation: 'horizontal' | 'vertical' }> = ({\n  step,\n  index,\n  isActive,\n  orientation,\n  size,\n  labelVariant,\n}) => (\n  <StepLabel\n    orientation={orientation}\n    data-testid={`stepper-step-label-${index}`}\n    sx={size === 'sm' && orientation === 'horizontal' ? { mt: '2px' } : undefined}\n  >\n    <Typography\n      variant={labelVariant}\n      fontWeight={isActive ? 'bold' : 'normal'}\n      color={isActive ? 'primary' : 'textPrimary'}\n    >\n      {step.label}\n      {step.optional && (\n        <Typography component=\"span\" variant=\"caption\" color=\"textSecondary\" sx={{ ml: 1 }}>\n          (optional)\n        </Typography>\n      )}\n    </Typography>\n    {step.description && (\n      <Typography variant=\"caption\" color=\"textSecondary\" display=\"block\">\n        {step.description}\n      </Typography>\n    )}\n  </StepLabel>\n);\n\nconst StepperItem: React.FC<StepItemProps> = ({\n  step,\n  index,\n  isActive,\n  isCompleted,\n  isLast,\n  orientation,\n  size,\n  variant,\n  clickable,\n  onStepClick,\n  renderConnector,\n  nextStep,\n}) => {\n  const labelVariant: LabelVariant = size === 'sm' ? 'caption' : 'body2';\n  const isClickable = Boolean(clickable) && !step.disabled && (variant === 'non-linear' || !isActive);\n  const handleStepClick = () => {\n    if (isClickable && onStepClick) onStepClick(step.id);\n  };\n  const connector =\n    renderConnector && nextStep ? (\n      renderConnector(step, nextStep, { completed: isCompleted, active: isActive })\n    ) : (\n      <StepConnector orientation={orientation} isCompleted={isCompleted} size={size} data-testid={`stepper-connector-${index}`} />\n    );\n\n  return (\n    <StepItem\n      orientation={orientation}\n      isLast={isLast}\n      role=\"listitem\"\n      data-testid={`stepper-step-${index}`}\n      className={stepClasses(isActive, isCompleted, step.optional)}\n    >\n      <Box\n        display=\"flex\"\n        flexDirection=\"column\"\n        alignItems=\"center\"\n        data-testid={`stepper-step-content-${index}`}\n        sx={contentSx(orientation, size)}\n      >\n        <StepCircle\n          step={step}\n          index={index}\n          isActive={isActive}\n          isCompleted={isCompleted}\n          isClickable={isClickable}\n          size={size}\n          labelVariant={labelVariant}\n          onClick={handleStepClick}\n        />\n        <StepLabelBlock\n          step={step}\n          index={index}\n          isActive={isActive}\n          orientation={orientation}\n          size={size}\n          labelVariant={labelVariant}\n        />\n      </Box>\n      {!isLast && connector}\n    </StepItem>\n  );\n};\n\nexport const Stepper: React.FC<StepperProps> = ({\n  steps,\n  activeId,\n  completed = new Set(),\n  orientation = 'horizontal',\n  size = 'md',\n  variant = 'linear',\n  onStepChange,\n  clickable,\n  renderConnector,\n  className,\n  'data-testid': dataTestId,\n}) => {\n  // Determine clickable behavior\n  const isClickable = clickable ?? variant === 'non-linear';\n\n  return (\n    <StepperRoot\n      component=\"ol\"\n      orientation={orientation}\n      className={className}\n      data-testid={dataTestId || 'stepper-container'}\n      sx={{\n        listStyle: 'none',\n        padding: 0,\n        margin: 0,\n      }}\n    >\n      {steps.map((step, index) => {\n        const isActive = step.id === activeId;\n        const isCompleted = completed.has(step.id);\n        const isLast = index === steps.length - 1;\n        const nextStep = !isLast ? steps[index + 1] : undefined;\n\n        return (\n          <StepperItem\n            key={step.id}\n            step={step}\n            index={index}\n            isActive={isActive}\n            isCompleted={isCompleted}\n            isLast={isLast}\n            orientation={orientation}\n            size={size}\n            variant={variant}\n            clickable={isClickable}\n            onStepClick={onStepChange}\n            renderConnector={renderConnector}\n            nextStep={nextStep}\n          />\n        );\n      })}\n    </StepperRoot>\n  );\n};"],"mappings":"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","names":[]}

package/dist/chunk-TLBCBVYY.js

@@ -0,0 +1,217 @@
+// src/components/data-display/EmptyState/EmptyState.tsx
+import AddIcon from "@mui/icons-material/Add";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import {
+  Box,
+  Button,
+  Link,
+  Stack,
+  Typography,
+  useTheme
+} from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;
+var actionsOf = (props, refreshLabel, createLabel) => {
+  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;
+  const specs = [];
+  if (primaryAction) {
+    specs.push({
+      key: "primary-action",
+      variant: "contained",
+      onClick: primaryAction.onClick,
+      label: primaryAction.label
+    });
+  }
+  if (onCreate) {
+    specs.push({
+      key: "create-button",
+      variant: "contained",
+      onClick: onCreate,
+      label: createLabel,
+      icon: /* @__PURE__ */ jsx(AddIcon, {})
+    });
+  }
+  if (secondaryAction) {
+    specs.push({
+      key: "secondary-action",
+      variant: "outlined",
+      onClick: secondaryAction.onClick,
+      label: secondaryAction.label
+    });
+  }
+  if (onRefresh) {
+    specs.push({
+      key: "refresh-button",
+      variant: "outlined",
+      onClick: onRefresh,
+      label: refreshLabel,
+      icon: /* @__PURE__ */ jsx(RefreshIcon, {})
+    });
+  }
+  return specs;
+};
+var Illustration = ({ illustration, variant, testId }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    "data-testid": testId,
+    sx: {
+      maxWidth: variant === "illustrated" ? 240 : 120,
+      width: "100%",
+      height: "auto",
+      opacity: variant === "minimal" ? 0.6 : 0.8,
+      display: variant === "minimal" ? "none" : "block"
+    },
+    children: illustration
+  }
+);
+var Actions = ({ specs, testId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: 2,
+      alignItems: "center",
+      sx: { mt: theme.spacing(2) },
+      children: specs.map((spec) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: spec.variant,
+          onClick: spec.onClick,
+          startIcon: spec.icon,
+          "data-testid": testId(spec.key),
+          sx: { minWidth: 120 },
+          children: spec.label
+        },
+        spec.key
+      ))
+    }
+  );
+};
+var HelpLink = ({ helpLink, testId }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: helpLink.href,
+      target: helpLink.external ? "_blank" : void 0,
+      rel: helpLink.external ? "noopener noreferrer" : void 0,
+      "data-testid": testId,
+      sx: {
+        mt: theme.spacing(1),
+        color: theme.palette.primary.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      },
+      children: [
+        helpLink.label,
+        helpLink.external && " \u2197"
+      ]
+    }
+  );
+};
+var Content = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: titleId,
+        variant: "h6",
+        component: "h3",
+        "data-testid": testId("title"),
+        sx: {
+          fontWeight: theme.typography.fontWeightMedium,
+          color: theme.palette.text.primary,
+          maxWidth: 400
+        },
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "body2",
+        color: "text.secondary",
+        "data-testid": testId("description"),
+        sx: {
+          maxWidth: 480,
+          lineHeight: 1.6
+        },
+        children: description
+      }
+    ),
+    showActions && /* @__PURE__ */ jsx(Actions, { specs: actions, testId }),
+    helpLink && /* @__PURE__ */ jsx(HelpLink, { helpLink, testId: testId("help-link") })
+  ] });
+};
+var EmptyState = React.memo((props) => {
+  const {
+    variant = "default",
+    title,
+    description,
+    illustration,
+    helpLink,
+    refreshLabel = "Refresh",
+    createLabel = "Create New",
+    className,
+    dataTestId
+  } = props;
+  const theme = useTheme();
+  const titleId = React.useId();
+  const testId = makeTestId(dataTestId);
+  const actions = actionsOf(props, refreshLabel, createLabel);
+  const showActions = variant === "action" || actions.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "region",
+      "aria-labelledby": titleId,
+      className,
+      "data-testid": dataTestId || "empty-state",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        padding: theme.spacing(6),
+        minHeight: 200,
+        gap: theme.spacing(3)
+      },
+      children: [
+        illustration && /* @__PURE__ */ jsx(
+          Illustration,
+          {
+            illustration,
+            variant,
+            testId: testId("icon")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Content,
+          {
+            title,
+            description,
+            titleId,
+            testId,
+            actions,
+            showActions,
+            helpLink
+          }
+        )
+      ]
+    }
+  );
+});
+EmptyState.displayName = "EmptyState";
+var EmptyState_default = EmptyState;
+
+export {
+  EmptyState,
+  EmptyState_default
+};
+//# sourceMappingURL=chunk-TLBCBVYY.js.map

package/dist/chunk-TLBCBVYY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/EmptyState/EmptyState.tsx"],"sourcesContent":["import AddIcon from '@mui/icons-material/Add';\nimport RefreshIcon from '@mui/icons-material/Refresh';\nimport {\n  Box,\n  Button,\n  Link,\n  Stack,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport React from 'react';\n\nimport type { EmptyStateProps } from './EmptyState.types';\n\ntype EmptyStateVariant = NonNullable<EmptyStateProps['variant']>;\n\nconst makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `empty-state-${suffix}`;\n\ninterface ActionSpec {\n  key: string;\n  variant: 'contained' | 'outlined';\n  onClick: () => void;\n  label: string;\n  icon?: React.ReactNode;\n}\n\n// The four buttons are one button with different props. Listing them keeps their\n// order — primary, create, secondary, refresh — visible in one place.\nconst actionsOf = (\n  props: EmptyStateProps,\n  refreshLabel: string,\n  createLabel: string,\n): ActionSpec[] => {\n  const { primaryAction, secondaryAction, onCreate, onRefresh } = props;\n  const specs: ActionSpec[] = [];\n\n  if (primaryAction) {\n    specs.push({\n      key: 'primary-action',\n      variant: 'contained',\n      onClick: primaryAction.onClick,\n      label: primaryAction.label,\n    });\n  }\n  if (onCreate) {\n    specs.push({\n      key: 'create-button',\n      variant: 'contained',\n      onClick: onCreate,\n      label: createLabel,\n      icon: <AddIcon />,\n    });\n  }\n  if (secondaryAction) {\n    specs.push({\n      key: 'secondary-action',\n      variant: 'outlined',\n      onClick: secondaryAction.onClick,\n      label: secondaryAction.label,\n    });\n  }\n  if (onRefresh) {\n    specs.push({\n      key: 'refresh-button',\n      variant: 'outlined',\n      onClick: onRefresh,\n      label: refreshLabel,\n      icon: <RefreshIcon />,\n    });\n  }\n\n  return specs;\n};\n\nconst Illustration: React.FC<{\n  illustration: React.ReactNode;\n  variant: EmptyStateVariant;\n  testId: string;\n}> = ({ illustration, variant, testId }) => (\n  <Box\n    data-testid={testId}\n    sx={{\n      maxWidth: variant === 'illustrated' ? 240 : 120,\n      width: '100%',\n      height: 'auto',\n      opacity: variant === 'minimal' ? 0.6 : 0.8,\n      display: variant === 'minimal' ? 'none' : 'block',\n    }}\n  >\n    {illustration}\n  </Box>\n);\n\nconst Actions: React.FC<{\n  specs: ActionSpec[];\n  testId: (suffix: string) => string;\n}> = ({ specs, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={2}\n      alignItems=\"center\"\n      sx={{ mt: theme.spacing(2) }}\n    >\n      {specs.map((spec) => (\n        <Button\n          key={spec.key}\n          variant={spec.variant}\n          onClick={spec.onClick}\n          startIcon={spec.icon}\n          data-testid={testId(spec.key)}\n          sx={{ minWidth: 120 }}\n        >\n          {spec.label}\n        </Button>\n      ))}\n    </Stack>\n  );\n};\n\nconst HelpLink: React.FC<{\n  helpLink: NonNullable<EmptyStateProps['helpLink']>;\n  testId: string;\n}> = ({ helpLink, testId }) => {\n  const theme = useTheme();\n\n  return (\n    <Link\n      href={helpLink.href}\n      target={helpLink.external ? '_blank' : undefined}\n      rel={helpLink.external ? 'noopener noreferrer' : undefined}\n      data-testid={testId}\n      sx={{\n        mt: theme.spacing(1),\n        color: theme.palette.primary.main,\n        textDecoration: 'none',\n        '&:hover': {\n          textDecoration: 'underline',\n        },\n      }}\n    >\n      {helpLink.label}\n      {helpLink.external && ' ↗'}\n    </Link>\n  );\n};\n\nconst Content: React.FC<{\n  title: string;\n  description?: string;\n  titleId: string;\n  testId: (suffix: string) => string;\n  actions: ActionSpec[];\n  showActions: boolean;\n  helpLink?: EmptyStateProps['helpLink'];\n}> = ({ title, description, titleId, testId, actions, showActions, helpLink }) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={2} alignItems=\"center\">\n      <Typography\n        id={titleId}\n        variant=\"h6\"\n        component=\"h3\"\n        data-testid={testId('title')}\n        sx={{\n          fontWeight: theme.typography.fontWeightMedium,\n          color: theme.palette.text.primary,\n          maxWidth: 400,\n        }}\n      >\n        {title}\n      </Typography>\n\n      {description && (\n        <Typography\n          variant=\"body2\"\n          color=\"text.secondary\"\n          data-testid={testId('description')}\n          sx={{\n            maxWidth: 480,\n            lineHeight: 1.6,\n          }}\n        >\n          {description}\n        </Typography>\n      )}\n\n      {showActions && <Actions specs={actions} testId={testId} />}\n\n      {helpLink && <HelpLink helpLink={helpLink} testId={testId('help-link')} />}\n    </Stack>\n  );\n};\n\nexport const EmptyState: React.FC<EmptyStateProps> = React.memo((props) => {\n  const {\n    variant = 'default',\n    title,\n    description,\n    illustration,\n    helpLink,\n    refreshLabel = 'Refresh',\n    createLabel = 'Create New',\n    className,\n    dataTestId,\n  } = props;\n  const theme = useTheme();\n  const titleId = React.useId();\n  const testId = makeTestId(dataTestId);\n\n  const actions = actionsOf(props, refreshLabel, createLabel);\n  // The `action` variant reserves the action row even when nothing fills it.\n  const showActions = variant === 'action' || actions.length > 0;\n\n  return (\n    <Box\n      role=\"region\"\n      aria-labelledby={titleId}\n      className={className}\n      data-testid={dataTestId || 'empty-state'}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        textAlign: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(3),\n      }}\n    >\n      {/* Illustration */}\n      {illustration && (\n        <Illustration\n          illustration={illustration}\n          variant={variant}\n          testId={testId('icon')}\n        />\n      )}\n\n      {/* Content */}\n      <Content\n        title={title}\n        description={description}\n        titleId={titleId}\n        testId={testId}\n        actions={actions}\n        showActions={showActions}\n        helpLink={helpLink}\n      />\n    </Box>\n  );\n});\n\nEmptyState.displayName = 'EmptyState';\n\nexport default EmptyState;\n"],"mappings":"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","names":[]}

package/dist/chunk-TSPG6TWK.js

@@ -0,0 +1,32 @@
+// src/utils/viewport.ts
+var VIEWPORT_HEIGHT_FALLBACK = "100vh";
+var DYNAMIC_VIEWPORT_HEIGHT = "100dvh";
+function dynamicViewportHeight(...properties) {
+  const pinned = properties.length > 0 ? [...properties] : ["height"];
+  const fallback = {};
+  const dynamic = {};
+  for (const property of pinned) {
+    fallback[property] = VIEWPORT_HEIGHT_FALLBACK;
+    dynamic[property] = DYNAMIC_VIEWPORT_HEIGHT;
+  }
+  return {
+    ...fallback,
+    [`@supports (height: ${DYNAMIC_VIEWPORT_HEIGHT})`]: dynamic
+  };
+}
+function safeAreaBottom(basePx) {
+  return {
+    paddingBottom: `${basePx}px`,
+    "@supports (padding: max(0px))": {
+      paddingBottom: `max(${basePx}px, calc(${basePx}px + env(safe-area-inset-bottom)))`
+    }
+  };
+}
+
+export {
+  VIEWPORT_HEIGHT_FALLBACK,
+  DYNAMIC_VIEWPORT_HEIGHT,
+  dynamicViewportHeight,
+  safeAreaBottom
+};
+//# sourceMappingURL=chunk-TSPG6TWK.js.map

package/dist/chunk-TSPG6TWK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/viewport.ts"],"sourcesContent":["import type { CSSObject } from '@mui/material';\n\n/**\n * Viewport helpers for full-height surfaces (dialogs, drawers, slide-overs).\n *\n * iOS Safari and iOS Chrome resolve `100vh` against the *large* viewport — the\n * height the page would have if the browser chrome were hidden — while a\n * `position: fixed` element is still clipped by the *small* viewport that the\n * URL bar and toolbar actually leave visible. A panel sized `height: 100vh`\n * therefore ends underneath the toolbar, so the last rows of its scroll area\n * (typically the submit button) are unreachable: the rubber-band overscroll\n * that reveals them snaps straight back the moment the finger lifts.\n *\n * `100dvh` tracks the *dynamic* viewport, so the panel always ends where the\n * visible area ends. `100vh` stays as the fallback for browsers without\n * dynamic viewport units.\n */\n\n/** Height unit for browsers without dynamic viewport units. */\nexport const VIEWPORT_HEIGHT_FALLBACK = '100vh';\n\n/** Height unit that tracks the visible viewport as browser chrome shows/hides. */\nexport const DYNAMIC_VIEWPORT_HEIGHT = '100dvh';\n\n/** The height properties {@link dynamicViewportHeight} can pin to the viewport. */\nexport type ViewportHeightProperty = 'height' | 'maxHeight' | 'minHeight';\n\n/**\n * Full-viewport-height styles for the given properties: `100vh` up front, with a\n * `@supports` block upgrading to `100dvh` where dynamic viewport units exist.\n *\n * ```ts\n * const paper = { ...dynamicViewportHeight('height', 'maxHeight') };\n * ```\n */\nexport function dynamicViewportHeight(\n  ...properties: readonly ViewportHeightProperty[]\n): CSSObject {\n  const pinned: ViewportHeightProperty[] =\n    properties.length > 0 ? [...properties] : ['height'];\n  const fallback: CSSObject = {};\n  const dynamic: CSSObject = {};\n  for (const property of pinned) {\n    fallback[property] = VIEWPORT_HEIGHT_FALLBACK;\n    dynamic[property] = DYNAMIC_VIEWPORT_HEIGHT;\n  }\n  return {\n    ...fallback,\n    [`@supports (height: ${DYNAMIC_VIEWPORT_HEIGHT})`]: dynamic,\n  };\n}\n\n/**\n * Bottom padding that clears the iOS home indicator, added on top of a base\n * padding expressed in pixels. Falls back to the base value on browsers without\n * `env()` support.\n */\nexport function safeAreaBottom(basePx: number): CSSObject {\n  return {\n    paddingBottom: `${basePx}px`,\n    '@supports (padding: max(0px))': {\n      paddingBottom: `max(${basePx}px, calc(${basePx}px + env(safe-area-inset-bottom)))`,\n    },\n  };\n}\n"],"mappings":";AAmBO,IAAM,2BAA2B;AAGjC,IAAM,0BAA0B;AAahC,SAAS,yBACX,YACQ;AACX,QAAM,SACJ,WAAW,SAAS,IAAI,CAAC,GAAG,UAAU,IAAI,CAAC,QAAQ;AACrD,QAAM,WAAsB,CAAC;AAC7B,QAAM,UAAqB,CAAC;AAC5B,aAAW,YAAY,QAAQ;AAC7B,aAAS,QAAQ,IAAI;AACrB,YAAQ,QAAQ,IAAI;AAAA,EACtB;AACA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,CAAC,sBAAsB,uBAAuB,GAAG,GAAG;AAAA,EACtD;AACF;AAOO,SAAS,eAAe,QAA2B;AACxD,SAAO;AAAA,IACL,eAAe,GAAG,MAAM;AAAA,IACxB,iCAAiC;AAAA,MAC/B,eAAe,OAAO,MAAM,YAAY,MAAM;AAAA,IAChD;AAAA,EACF;AACF;","names":[]}