@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-IGGXKT5B.js

@@ -0,0 +1,196 @@
+import {
+  Stepper
+} from "./chunk-CX66M55F.js";
+import {
+  EmptyState
+} from "./chunk-HN3PZTUK.js";
+
+// src/components/data-display/SectionOnboarding/SectionOnboarding.tsx
+import CheckCircle from "@mui/icons-material/CheckCircle";
+import Box from "@mui/material/Box/index.js";
+import Button from "@mui/material/Button/index.js";
+import Collapse from "@mui/material/Collapse/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OnboardingSteps = ({ steps, activeStepId, completedStepIds, dataTestId }) => {
+  if (!steps || steps.length === 0) return null;
+  const activeId = activeStepId ?? steps[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(Box, { sx: { width: "100%", overflowX: "auto", pb: 1 }, children: /* @__PURE__ */ jsx(
+    Stepper,
+    {
+      steps,
+      activeId,
+      completed: new Set(completedStepIds ?? []),
+      size: "sm",
+      "data-testid": `${dataTestId}-steps`
+    }
+  ) });
+};
+var ConfiguredSummary = ({
+  configuredTitle,
+  title,
+  configuredSummary,
+  dataTestId,
+  expanded,
+  onToggle,
+  editLabel,
+  collapseLabel,
+  hasChildren
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: { xs: "column", sm: "row" },
+      spacing: 2,
+      alignItems: { xs: "flex-start", sm: "center" },
+      "data-testid": `${dataTestId}-summary`,
+      children: [
+        /* @__PURE__ */ jsx(CheckCircle, { sx: { color: theme.palette.success.main }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", component: "h3", fontWeight: "medium", children: configuredTitle ?? title }),
+          configuredSummary && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", children: configuredSummary })
+        ] }),
+        hasChildren && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outlined",
+            size: "small",
+            onClick: onToggle,
+            "aria-expanded": expanded,
+            "data-testid": `${dataTestId}-edit-toggle`,
+            children: expanded ? collapseLabel : editLabel
+          }
+        )
+      ]
+    }
+  );
+};
+var ConfiguredView = ({
+  title,
+  configuredTitle,
+  configuredSummary,
+  editLabel,
+  collapseLabel,
+  defaultExpanded = false,
+  children,
+  className,
+  dataTestId = "section-onboarding"
+}) => {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      "data-status": "configured",
+      sx: { p: 2, borderRadius: 1, border: 1, borderColor: "divider" },
+      children: [
+        /* @__PURE__ */ jsx(
+          ConfiguredSummary,
+          {
+            configuredTitle,
+            title,
+            configuredSummary,
+            dataTestId,
+            expanded,
+            onToggle: () => setExpanded((prev) => !prev),
+            editLabel,
+            collapseLabel,
+            hasChildren: Boolean(children)
+          }
+        ),
+        children && /* @__PURE__ */ jsx(Collapse, { in: expanded, unmountOnExit: true, children: /* @__PURE__ */ jsx(Box, { sx: { mt: 3 }, "data-testid": `${dataTestId}-content`, children }) })
+      ]
+    }
+  );
+};
+var InProgressView = ({
+  steps,
+  activeStepId,
+  completedStepIds,
+  children,
+  className,
+  statusAttr,
+  dataTestId = "section-onboarding"
+}) => /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": statusAttr, spacing: 3, children: [
+  /* @__PURE__ */ jsx(
+    OnboardingSteps,
+    {
+      steps,
+      activeStepId,
+      completedStepIds,
+      dataTestId
+    }
+  ),
+  children && /* @__PURE__ */ jsx(Box, { "data-testid": `${dataTestId}-content`, children })
+] });
+var HeroView = ({
+  title,
+  description,
+  illustration,
+  steps,
+  activeStepId,
+  completedStepIds,
+  primaryAction,
+  startLabel,
+  secondaryAction,
+  helpLink,
+  children,
+  className,
+  onStart,
+  dataTestId = "section-onboarding"
+}) => {
+  const heroPrimary = primaryAction ?? (children ? { label: startLabel, onClick: onStart } : void 0);
+  return /* @__PURE__ */ jsxs(Stack, { className, "data-testid": dataTestId, "data-status": "unconfigured", spacing: 1, children: [
+    /* @__PURE__ */ jsx(
+      OnboardingSteps,
+      {
+        steps,
+        activeStepId,
+        completedStepIds,
+        dataTestId
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: illustration ? "illustrated" : "action",
+        title,
+        description,
+        illustration,
+        primaryAction: heroPrimary,
+        secondaryAction,
+        helpLink,
+        dataTestId: `${dataTestId}-hero`
+      }
+    )
+  ] });
+};
+var SectionOnboarding = (props) => {
+  const [started, setStarted] = React.useState(false);
+  if (props.status === "configured") {
+    return /* @__PURE__ */ jsx(ConfiguredView, { ...props });
+  }
+  if (props.status === "in-progress" || started) {
+    return /* @__PURE__ */ jsx(
+      InProgressView,
+      {
+        ...props,
+        statusAttr: props.status === "in-progress" ? "in-progress" : "started"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(HeroView, { ...props, onStart: () => setStarted(true) });
+};
+SectionOnboarding.displayName = "SectionOnboarding";
+var SectionOnboarding_default = SectionOnboarding;
+
+export {
+  SectionOnboarding,
+  SectionOnboarding_default
+};
+//# sourceMappingURL=chunk-IGGXKT5B.js.map

package/dist/chunk-IKLOIONQ.js

@@ -0,0 +1,175 @@
+import {
+  useColumnsWithActions,
+  useRenderedColumns
+} from "./chunk-FFOQZRFC.js";
+import {
+  filterRows
+} from "./chunk-YGQX7BNI.js";
+import {
+  useSelection
+} from "./chunk-LLZWB32X.js";
+import {
+  resolveScope,
+  useScopeConfigChecks
+} from "./chunk-PL2AB5HJ.js";
+import {
+  useStateWriters
+} from "./chunk-U5FOJBLG.js";
+import {
+  computeActiveFilterCount,
+  defaultSortFields
+} from "./chunk-75LOTMSN.js";
+import {
+  serverDerived,
+  useServerQuery
+} from "./chunk-IMLIIW77.js";
+import {
+  emptyViewState
+} from "./chunk-LHHAYZ55.js";
+
+// src/components/data-display/DataViews/use-data-views-state.ts
+import { useEffect, useMemo, useRef, useState } from "react";
+function useMatchedRows(server, rows, columns, fields, rangeFields, state) {
+  return useMemo(
+    () => server ? rows : filterRows(
+      rows,
+      columns,
+      fields,
+      { search: state.search, pills: state.pills, ranges: state.ranges },
+      rangeFields
+    ),
+    [server, rows, columns, fields, rangeFields, state.search, state.pills, state.ranges]
+  );
+}
+function useStateSyncEffects(appliedState, syncState, state, onStateChange, setState) {
+  const firstApplied = useRef(true);
+  useEffect(() => {
+    if (firstApplied.current) {
+      firstApplied.current = false;
+      return;
+    }
+    if (appliedState) setState(appliedState);
+  }, [appliedState, setState]);
+  const firstSync = useRef(true);
+  useEffect(() => {
+    if (firstSync.current) {
+      firstSync.current = false;
+      return;
+    }
+    if (syncState) setState((prev) => ({ ...prev, ...syncState }));
+  }, [syncState, setState]);
+  useEffect(() => {
+    onStateChange?.(state);
+  }, [state, onStateChange]);
+}
+function seedState(appliedState, syncState, allColumnIds) {
+  const seed = appliedState ?? emptyViewState(allColumnIds);
+  return syncState ? { ...seed, ...syncState } : seed;
+}
+function makeSetScope(patch, clearSelection) {
+  return (id) => {
+    patch({ scope: id });
+    clearSelection();
+  };
+}
+function orderedColumnIds(allColumnIds, order) {
+  if (!order || order.length === 0) return allColumnIds;
+  const declared = new Set(allColumnIds);
+  const kept = order.filter((id) => declared.has(id));
+  const seen = new Set(kept);
+  return [...kept, ...allColumnIds.filter((id) => !seen.has(id))];
+}
+function liveQuery(state, scope, server, matchedCount) {
+  return {
+    search: state.search,
+    pills: state.pills,
+    ranges: state.ranges ?? {},
+    sortBy: state.sortBy,
+    // Absent, not undefined, when the table declares no scopes.
+    ...scope !== void 0 ? { scope } : {},
+    page: server?.page ?? 1,
+    // Client mode has one page, and it is everything that matched.
+    pageSize: server?.pageSize ?? matchedCount
+  };
+}
+function activeSortOf(state, resolvedSortFields) {
+  const active = state.sortBy?.[0];
+  return {
+    activeSortField: active?.id ?? resolvedSortFields[0]?.value ?? "",
+    activeSortOrder: active?.dir === "desc" ? "desc" : "asc"
+  };
+}
+function useDataViewsState({
+  rows,
+  columns,
+  fields,
+  rangeFields,
+  getRowId,
+  onRowClick,
+  appliedState,
+  syncState,
+  onStateChange,
+  testIdPrefix,
+  sortFields,
+  rowActions,
+  rowActionsLeading,
+  renderRowMenu,
+  server,
+  scopes = [],
+  scopeFieldId
+}) {
+  useScopeConfigChecks(scopes, fields.map((field) => field.id), scopeFieldId, server !== void 0);
+  const { columnsWithActions, allColumnIds } = useColumnsWithActions(columns, {
+    rowActions,
+    rowActionsLeading,
+    renderRowMenu,
+    testIdPrefix,
+    getRowId
+  });
+  const [state, setState] = useState(
+    () => seedState(appliedState, syncState, allColumnIds)
+  );
+  const [filterOpen, setFilterOpen] = useState(false);
+  useStateSyncEffects(appliedState, syncState, state, onStateChange, setState);
+  const { patch, toggleColumn } = useStateWriters(setState);
+  const matched = useMatchedRows(server, rows, columns, fields, rangeFields, state);
+  const scope = resolveScope(scopes, state.scope);
+  const { changePage } = useServerQuery(server, state, scope);
+  const { gridColumns, hideableColumns } = useRenderedColumns(
+    columnsWithActions,
+    state.visibleColumns,
+    onRowClick,
+    state.order
+  );
+  const selection = useSelection(matched, getRowId, { rememberOffPage: Boolean(server) });
+  const resolvedSortFields = sortFields ?? defaultSortFields(columns);
+  return {
+    state,
+    ranges: state.ranges ?? {},
+    patch,
+    matched,
+    gridColumns,
+    hideableColumns,
+    columnOrder: orderedColumnIds(allColumnIds, state.order),
+    toggleColumn,
+    ...selection,
+    filterOpen,
+    setFilterOpen,
+    resolvedSortFields,
+    ...activeSortOf(state, resolvedSortFields),
+    activeFilterCount: computeActiveFilterCount(state, fields, rangeFields),
+    ...serverDerived(server, matched.length),
+    changePage,
+    scope,
+    setScope: makeSetScope(patch, selection.clearSelection),
+    currentQuery: liveQuery(state, scope, server, matched.length),
+    // Verbatim, or absent. See DataViewServer.scopeCounts for why there is no
+    // client-side fallback.
+    scopeCounts: server?.scopeCounts
+  };
+}
+
+export {
+  useDataViewsState
+};
+//# sourceMappingURL=chunk-IKLOIONQ.js.map

package/dist/chunk-IM4DMKH4.js

@@ -0,0 +1,51 @@
+import {
+  rem,
+  rems
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Sheet/Sheet.animations.ts
+import { keyframes } from "@mui/material/styles/index.js";
+var SPRING_CONFIG = {
+  tension: 200,
+  friction: 25,
+  velocity: 0
+};
+var DEFAULT_VELOCITY_THRESHOLD = 0.5;
+var DEFAULT_DRAG_RESISTANCE = 0.3;
+var pulseAnimation = (theme) => keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 ${rem(theme, 20)} rgba(var(--pulse-color), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
+  }
+`;
+var shimmerAnimation = (theme) => keyframes`
+  0% {
+    background-position: ${rem(theme, -1e3)} 0;
+  }
+  100% {
+    background-position: ${rem(theme, 1e3)} 0;
+  }
+`;
+var glowAnimation = (theme) => keyframes`
+  0%, 100% {
+    box-shadow: ${rems(theme, 0, 0, 20, 5)} rgba(var(--glow-color), 0.3);
+  }
+  50% {
+    box-shadow: ${rems(theme, 0, 0, 35, 10)} rgba(var(--glow-color), 0.5);
+  }
+`;
+
+export {
+  SPRING_CONFIG,
+  DEFAULT_VELOCITY_THRESHOLD,
+  DEFAULT_DRAG_RESISTANCE,
+  pulseAnimation,
+  shimmerAnimation,
+  glowAnimation
+};
+//# sourceMappingURL=chunk-IM4DMKH4.js.map

package/dist/chunk-IM4DMKH4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.animations.ts"],"sourcesContent":["import { keyframes, type Theme } from '@mui/material/styles/index.js';\n\nimport { rem, rems } from '../../../tokens/relative';\n\n/** Spring physics used by the draggable variant's snap-point animation. */\nexport const SPRING_CONFIG = {\n  tension: 200,\n  friction: 25,\n  velocity: 0,\n};\n\n/** Velocity threshold for snap detection (pixels per millisecond). */\nexport const DEFAULT_VELOCITY_THRESHOLD = 0.5;\n\n/** Drag resistance factor applied past the first and last snap points. */\nexport const DEFAULT_DRAG_RESISTANCE = 0.3;\n\nexport const pulseAnimation = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, 20)} rgba(var(--pulse-color), 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);\n  }\n`;\n\nexport const shimmerAnimation = (theme: Theme) => keyframes`\n  0% {\n    background-position: ${rem(theme, -1000)} 0;\n  }\n  100% {\n    background-position: ${rem(theme, 1000)} 0;\n  }\n`;\n\nexport const glowAnimation = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: ${rems(theme, 0, 0, 20, 5)} rgba(var(--glow-color), 0.3);\n  }\n  50% {\n    box-shadow: ${rems(theme, 0, 0, 35, 10)} rgba(var(--glow-color), 0.5);\n  }\n`;\n"],"mappings":";;;;;;AAAA,SAAS,iBAA6B;AAK/B,IAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AACZ;AAGO,IAAM,6BAA6B;AAGnC,IAAM,0BAA0B;AAEhC,IAAM,iBAAiB,CAAC,UAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKxB,IAAI,OAAO,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,IAAM,mBAAmB,CAAC,UAAiB;AAAA;AAAA,2BAEvB,IAAI,OAAO,IAAK,CAAC;AAAA;AAAA;AAAA,2BAGjB,IAAI,OAAO,GAAI,CAAC;AAAA;AAAA;AAIpC,IAAM,gBAAgB,CAAC,UAAiB;AAAA;AAAA,kBAE7B,KAAK,OAAO,GAAG,GAAG,IAAI,CAAC,CAAC;AAAA;AAAA;AAAA,kBAGxB,KAAK,OAAO,GAAG,GAAG,IAAI,EAAE,CAAC;AAAA;AAAA;","names":[]}

package/dist/chunk-IVJKILIX.js

@@ -0,0 +1,63 @@
+import {
+  LightboxAutoplayButton,
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls
+} from "./chunk-TZASFX6G.js";
+
+// src/components/data-display/Lightbox/LightboxOverlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxOverlay = ({
+  testId,
+  itemCount,
+  currentIndex,
+  showControls,
+  loop,
+  autoplay,
+  canZoom,
+  isAutoPlaying,
+  onClose,
+  onPrev,
+  onNext,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom,
+  onToggleAutoplay
+}) => {
+  const hasMultiple = itemCount > 1;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LightboxCloseButton, { testId, onClose }),
+    showControls && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxNavButtons,
+      {
+        testId,
+        atStart: !loop && currentIndex === 0,
+        atEnd: !loop && currentIndex === itemCount - 1,
+        onPrev,
+        onNext
+      }
+    ),
+    canZoom && /* @__PURE__ */ jsx(
+      LightboxZoomControls,
+      {
+        testId,
+        onZoomIn,
+        onZoomOut,
+        onResetZoom
+      }
+    ),
+    autoplay && hasMultiple && /* @__PURE__ */ jsx(
+      LightboxAutoplayButton,
+      {
+        testId,
+        isAutoPlaying,
+        onToggle: onToggleAutoplay
+      }
+    )
+  ] });
+};
+
+export {
+  LightboxOverlay
+};
+//# sourceMappingURL=chunk-IVJKILIX.js.map