@12-apps/ui 6.33.0 → 6.34.0

package/dist/chunk-EHCUOX6R.js

@@ -0,0 +1,264 @@
+import {
+  ColumnsTab
+} from "./chunk-JGOXXKPY.js";
+import {
+  DisplayTab,
+  SortTab
+} from "./chunk-SCQJV54H.js";
+import {
+  ViewActions,
+  ViewFooter,
+  ViewHeader,
+  ViewsList
+} from "./chunk-GQ4I6Z32.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-3EDZU2H7.js";
+
+// src/components/data-display/DataViews/data-views-display-panel.tsx
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import DisplaySettingsRoundedIcon from "@mui/icons-material/DisplaySettingsRounded";
+import Popover from "@mui/material/Popover/index.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function displayTabs(copy) {
+  return [
+    { key: "sort", label: copy.display.sortTab },
+    { key: "columns", label: copy.display.columnsTab },
+    { key: "display", label: copy.display.panelTab }
+  ];
+}
+function PanelTabs({
+  tab,
+  onChange,
+  muted,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", gap: 0.5, p: 0.75, bgcolor: "action.hover", borderBottom: 1, borderColor: "divider" }, children: displayTabs(copy).map((entry) => {
+    const active = tab === entry.key && !muted;
+    return /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "button",
+        type: "button",
+        onClick: () => onChange(entry.key),
+        "data-testid": `${testIdPrefix}-display-tab-${entry.key}`,
+        "aria-current": active,
+        sx: {
+          flex: 1,
+          px: 1,
+          py: 0.75,
+          border: 0,
+          borderRadius: 1,
+          cursor: "pointer",
+          font: "inherit",
+          fontSize: "0.8125rem",
+          bgcolor: active ? "background.paper" : "transparent",
+          boxShadow: active ? 1 : 0,
+          fontWeight: active ? 600 : 400,
+          color: active ? "text.primary" : "text.secondary"
+        },
+        children: entry.label
+      },
+      entry.key
+    );
+  }) });
+}
+function PanelBody({
+  tab,
+  c,
+  sortKinds,
+  testIdPrefix
+}) {
+  if (tab === "sort") {
+    return /* @__PURE__ */ jsx(
+      SortTab,
+      {
+        fields: c.resolvedSortFields,
+        activeField: c.activeSortField,
+        activeOrder: c.activeSortOrder,
+        onChange: (field, order) => c.patch({ sortBy: [{ id: field, dir: order }] }),
+        sortKinds,
+        testIdPrefix
+      }
+    );
+  }
+  if (tab === "columns") {
+    return /* @__PURE__ */ jsx(
+      ColumnsTab,
+      {
+        columns: c.hideableColumns,
+        order: c.columnOrder,
+        visibleColumns: c.state.visibleColumns,
+        onToggle: c.toggleColumn,
+        onReorder: (order) => c.patch({ order }),
+        onShowAll: () => c.patch({ visibleColumns: c.columnOrder }),
+        onReset: () => c.patch({ visibleColumns: c.columnOrder, order: void 0 }),
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DisplayTab, { testIdPrefix });
+}
+function PanelSurface({
+  c,
+  view,
+  nav,
+  tab,
+  onTab,
+  viewsOpen,
+  onToggleViews,
+  actionsFor,
+  onOpenActions,
+  onBack,
+  sortKinds,
+  onDone,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(default2, { "data-testid": `${testIdPrefix}-display-panel`, children: [
+    view && /* @__PURE__ */ jsx(
+      ViewHeader,
+      {
+        view,
+        open: viewsOpen,
+        onToggle: onToggleViews,
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PanelTabs,
+      {
+        tab,
+        onChange: onTab,
+        muted: Boolean(nav),
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(default2, { sx: { maxHeight: 320, minHeight: 220, overflowY: "auto" }, children: nav ? /* @__PURE__ */ jsx(
+      ViewsBody,
+      {
+        nav,
+        actionsFor,
+        onOpenActions,
+        onBack,
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(PanelBody, { tab, c, sortKinds, testIdPrefix }) }),
+    view && /* @__PURE__ */ jsx(ViewFooter, { view, onDone, testIdPrefix })
+  ] });
+}
+function ViewsBody({
+  nav,
+  actionsFor,
+  onOpenActions,
+  onBack,
+  testIdPrefix
+}) {
+  const live = actionsFor ? nav.views.find((view) => view.id === actionsFor.id) : void 0;
+  if (live) {
+    return /* @__PURE__ */ jsx(ViewActions, { view: live, handlers: nav, onBack, testIdPrefix });
+  }
+  return /* @__PURE__ */ jsx(ViewsList, { handlers: nav, onOpenActions, testIdPrefix });
+}
+function DisplayTrigger({
+  dirty,
+  compact,
+  onOpen,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      color: "neutral",
+      onClick: (event) => onOpen(event.currentTarget),
+      dataTestId: `${testIdPrefix}-display-trigger`,
+      "aria-label": copy.display.trigger,
+      title: compact ? copy.display.trigger : void 0,
+      children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+        /* @__PURE__ */ jsx(DisplaySettingsRoundedIcon, { fontSize: "small" }),
+        !compact && /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: { xs: "none", sm: "inline" } }, children: copy.display.trigger }),
+        dirty && /* @__PURE__ */ jsx(default2, { component: "span", sx: { height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" } }),
+        !compact && /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+      ] })
+    }
+  );
+}
+function DataViewsDisplayPanel({
+  c,
+  testIdPrefix,
+  sortKinds,
+  view,
+  compact
+}) {
+  const [anchor, setAnchor] = useState(null);
+  const [tab, setTab] = useState("columns");
+  const [viewsOpen, setViewsOpen] = useState(false);
+  const [actionsFor, setActionsFor] = useState(null);
+  const nav = viewsOpen ? view?.nav : void 0;
+  const close = () => setAnchor(null);
+  const leaveViews = () => {
+    setViewsOpen(false);
+    setActionsFor(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      DisplayTrigger,
+      {
+        dirty: Boolean(view?.dirty),
+        compact: Boolean(compact),
+        onOpen: setAnchor,
+        testIdPrefix
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        open: Boolean(anchor),
+        anchorEl: anchor,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { width: 320, maxWidth: "calc(100vw - 32px)" } } },
+        children: /* @__PURE__ */ jsx(
+          PanelSurface,
+          {
+            c,
+            view,
+            nav,
+            tab,
+            onTab: (next) => {
+              setTab(next);
+              leaveViews();
+            },
+            viewsOpen,
+            onToggleViews: () => {
+              setViewsOpen((prev) => !prev);
+              setActionsFor(null);
+            },
+            actionsFor,
+            onOpenActions: setActionsFor,
+            onBack: () => setActionsFor(null),
+            sortKinds,
+            onDone: close,
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  DataViewsDisplayPanel
+};
+//# sourceMappingURL=chunk-EHCUOX6R.js.map

package/dist/chunk-EIJC5DWG.js

@@ -0,0 +1,77 @@
+import {
+  Avatar
+} from "./chunk-L7Q5BH4A.js";
+import {
+  Card
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Button
+} from "./chunk-3EDZU2H7.js";
+import {
+  Text
+} from "./chunk-H57ZS6W2.js";
+
+// src/user-avatar/user-avatar.tsx
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0]?.substring(0, 2).toUpperCase() ?? "";
+  }
+  return ((parts[0]?.charAt(0) ?? "") + (parts[parts.length - 1]?.charAt(0) ?? "")).toUpperCase();
+}
+function UserAvatar({
+  src,
+  name,
+  size = "md",
+  onClick,
+  interactive = false
+}) {
+  const fallbackText = name ? getInitials(name) : "?";
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: src ?? void 0,
+      alt: name ?? "User avatar",
+      fallback: fallbackText,
+      size,
+      variant: "circle",
+      interactive: interactive || !!onClick,
+      onClick
+    }
+  );
+}
+function UserMenu({ user, onSignOut, copy }) {
+  return /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "md", children: /* @__PURE__ */ jsx(Box, { sx: { p: 2 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      UserAvatar,
+      {
+        src: user.image,
+        name: user.name,
+        size: "md"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx(Text, { weight: "semibold", size: "sm", children: user.name ?? "User" }),
+      user.email && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "xs", children: user.email })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        color: "danger",
+        size: "sm",
+        onClick: onSignOut,
+        children: copy.signOut
+      }
+    )
+  ] }) }) });
+}
+
+export {
+  UserAvatar,
+  UserMenu
+};
+//# sourceMappingURL=chunk-EIJC5DWG.js.map

package/dist/chunk-EMPVMZAB.js

@@ -0,0 +1,49 @@
+import {
+  ABSOLUTE_INK
+} from "./chunk-N3GAFIXG.js";
+
+// src/components/layout/Skeleton/Skeleton.metrics.ts
+var SKELETON_INTENSITY_OPACITY = {
+  low: 0.11,
+  medium: 0.13,
+  high: 0.15
+};
+var SKELETON_DEFAULT_DIMENSIONS = {
+  // `text` has no height of its own: MUI's line box gives it one (below).
+  text: { width: "100%", height: void 0 },
+  circular: { width: 40, height: 40 },
+  rectangular: { width: "100%", height: 40 },
+  wave: { width: "100%", height: 40 }
+};
+var GLASS_BACKGROUND_ALPHA_FROM = 0.8;
+var GLASS_BACKGROUND_ALPHA_TO = 0.4;
+var GLASS_BLUR_PX = 20;
+var GLASS_BORDER_ALPHA = 0.2;
+var GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 };
+var SHIMMER_ALPHA = 0.3;
+var SHIMMER_DURATION_MS = 2e3;
+var COMMON_BLACK = ABSOLUTE_INK.black;
+var COMMON_WHITE = ABSOLUTE_INK.white;
+var PULSE = { durationMs: 2e3, delayMs: 500, dip: 0.4 };
+var WAVE = { durationMs: 1600, delayMs: 500 };
+var TEXT_LINE_HEIGHT_EM = 1.2;
+var TEXT_SCALE_Y = 0.6;
+
+export {
+  SKELETON_INTENSITY_OPACITY,
+  SKELETON_DEFAULT_DIMENSIONS,
+  GLASS_BACKGROUND_ALPHA_FROM,
+  GLASS_BACKGROUND_ALPHA_TO,
+  GLASS_BLUR_PX,
+  GLASS_BORDER_ALPHA,
+  GLASS_SHADOW,
+  SHIMMER_ALPHA,
+  SHIMMER_DURATION_MS,
+  COMMON_BLACK,
+  COMMON_WHITE,
+  PULSE,
+  WAVE,
+  TEXT_LINE_HEIGHT_EM,
+  TEXT_SCALE_Y
+};
+//# sourceMappingURL=chunk-EMPVMZAB.js.map

package/dist/chunk-EMPVMZAB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Skeleton/Skeleton.metrics.ts"],"sourcesContent":["import type { SkeletonIntensity, SkeletonVariant } from './Skeleton.base';\nimport { ABSOLUTE_INK } from '../../../tokens/ink.core';\n\n/**\n * THE NUMBERS BOTH `Skeleton` RENDERERS DRAW WITH.\n *\n * `Skeleton.styles.ts` (web, emotion over MUI's own `Skeleton`) and\n * `Skeleton.native.tsx` (React Native) read this one table. The web turns them\n * into CSS strings — `blur(20px)`, `shimmer 2s infinite` — and native uses the\n * numbers as they are, so neither renderer restates a value.\n *\n * Two groups live here. The first is what the web component WRITES (the\n * intensity alphas, the default box, the glass and shimmer washes). The second\n * is what MUI's own `Skeleton` contributes on the web and the native half\n * therefore has to restate: its pulse keyframe, its wave cadence, and the\n * geometry of the `text` variant. Those are MUI's DEFAULTS — a host that\n * re-themes them moves the web only, which `NATIVE-NOTES.md` records.\n */\n\n/** The tint's alpha over the ink, per intensity. */\nexport const SKELETON_INTENSITY_OPACITY: Record<SkeletonIntensity, number> = {\n  low: 0.11,\n  medium: 0.13,\n  high: 0.15,\n};\n\n/** The box a variant draws when the caller gives no `width`/`height`. */\nexport const SKELETON_DEFAULT_DIMENSIONS: Record<\n  SkeletonVariant,\n  { width: number | string; height: number | undefined }\n> = {\n  // `text` has no height of its own: MUI's line box gives it one (below).\n  text: { width: '100%', height: undefined },\n  circular: { width: 40, height: 40 },\n  rectangular: { width: '100%', height: 40 },\n  wave: { width: '100%', height: 40 },\n};\n\n/* ── `glassmorphism` ──────────────────────────────────────────────────────── */\n\n/** The 135° wash over `background.paper`, from the first stop to the last. */\nexport const GLASS_BACKGROUND_ALPHA_FROM = 0.8;\nexport const GLASS_BACKGROUND_ALPHA_TO = 0.4;\nexport const GLASS_BLUR_PX = 20;\nexport const GLASS_BORDER_ALPHA = 0.2;\n/** `0 8px 32px 0 rgba(0, 0, 0, 0.1)`. */\nexport const GLASS_SHADOW = { offsetY: 8, blur: 32, alpha: 0.1 } as const;\n\n/* ── `shimmer` ────────────────────────────────────────────────────────────── */\n\n/** The sweep's middle stop, over white. */\nexport const SHIMMER_ALPHA = 0.3;\nexport const SHIMMER_DURATION_MS = 2000;\n\n/**\n * MUI's `palette.common`, which is a pair of fixed hexes rather than anything\n * derived — so the shared theme has no slot for them: the renderer-free\n * absolutes stand in (`src/tokens/ink.core.ts`).\n */\nexport const COMMON_BLACK = ABSOLUTE_INK.black;\nexport const COMMON_WHITE = ABSOLUTE_INK.white;\n\n/* ── MUI's own `Skeleton`, restated for the renderer that has no MUI ──────── */\n\n/**\n * MUI's `pulseKeyframe`: opacity 1 → 0.4 → 1, `2s ease-in-out 0.5s infinite`.\n * The delay runs once on the web; native replays it each lap unless the\n * animation is sequenced, which `Skeleton.native.tsx` does.\n */\nexport const PULSE = { durationMs: 2000, delayMs: 500, dip: 0.4 } as const;\n\n/** MUI's `wave` sweep: `1.6s linear 0.5s infinite`, in `palette.action.hover`. */\nexport const WAVE = { durationMs: 1600, delayMs: 500 } as const;\n\n/**\n * The `text` variant, as MUI draws it: a line box `1.2em` tall squashed to 60%\n * of its height (`transform: scale(1, 0.60)`), with a `4px/6.7px` elliptical\n * radius that the same squash turns back into a round 4px. React Native has no\n * `em`, and its transforms do not change layout, so the native half multiplies\n * the two out into one height and draws the plain 4px radius the squash lands on.\n */\nexport const TEXT_LINE_HEIGHT_EM = 1.2;\nexport const TEXT_SCALE_Y = 0.6;\n"],"mappings":";;;;;AAoBO,IAAM,6BAAgE;AAAA,EAC3E,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AACR;AAGO,IAAM,8BAGT;AAAA;AAAA,EAEF,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAU;AAAA,EACzC,UAAU,EAAE,OAAO,IAAI,QAAQ,GAAG;AAAA,EAClC,aAAa,EAAE,OAAO,QAAQ,QAAQ,GAAG;AAAA,EACzC,MAAM,EAAE,OAAO,QAAQ,QAAQ,GAAG;AACpC;AAKO,IAAM,8BAA8B;AACpC,IAAM,4BAA4B;AAClC,IAAM,gBAAgB;AACtB,IAAM,qBAAqB;AAE3B,IAAM,eAAe,EAAE,SAAS,GAAG,MAAM,IAAI,OAAO,IAAI;AAKxD,IAAM,gBAAgB;AACtB,IAAM,sBAAsB;AAO5B,IAAM,eAAe,aAAa;AAClC,IAAM,eAAe,aAAa;AASlC,IAAM,QAAQ,EAAE,YAAY,KAAM,SAAS,KAAK,KAAK,IAAI;AAGzD,IAAM,OAAO,EAAE,YAAY,MAAM,SAAS,IAAI;AAS9C,IAAM,sBAAsB;AAC5B,IAAM,eAAe;","names":[]}

package/dist/chunk-EUDIQQWE.js

@@ -0,0 +1,76 @@
+import {
+  UploadDropzone,
+  UploadFeedback,
+  UploadTrigger
+} from "./chunk-UTSGY3ON.js";
+import {
+  useUploadButton
+} from "./chunk-QWVETTIY.js";
+
+// src/components/form/UploadButton/UploadButton.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UploadButton = React.forwardRef((props, ref) => {
+  const {
+    copy,
+    variant = "default",
+    label = props.copy.buttonLabel,
+    disabled = false,
+    multiple = false,
+    accept,
+    capture,
+    helperText,
+    icon,
+    className,
+    "data-testid": dataTestId
+  } = props;
+  const { inputRef, inputId, state, drag, derived, openPicker, handleInputChange } = useUploadButton(props);
+  const trigger = {
+    copy,
+    label,
+    icon,
+    disabled,
+    className,
+    dataTestId,
+    describedBy: derived.describedBy,
+    onOpen: openPicker
+  };
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: ref || inputRef,
+        id: inputId,
+        type: "file",
+        accept,
+        multiple,
+        capture,
+        onChange: handleInputChange,
+        style: { display: "none" },
+        disabled,
+        "aria-hidden": "true"
+      }
+    ),
+    variant === "dropzone" ? /* @__PURE__ */ jsx(UploadDropzone, { ...trigger, isDragOver: state.isDragOver, drag }) : /* @__PURE__ */ jsx(UploadTrigger, { ...trigger, variant, isUploading: derived.isUploading }),
+    /* @__PURE__ */ jsx(
+      UploadFeedback,
+      {
+        copy,
+        isUploading: derived.isUploading,
+        progress: derived.progress,
+        helperText,
+        helperId: derived.helperId,
+        error: derived.error,
+        errorId: derived.errorId,
+        announceDragOver: variant === "dropzone" && state.isDragOver
+      }
+    )
+  ] });
+});
+UploadButton.displayName = "UploadButton";
+
+export {
+  UploadButton
+};
+//# sourceMappingURL=chunk-EUDIQQWE.js.map

package/dist/chunk-EVSKEIXI.js

@@ -0,0 +1,82 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-EKSSKQUW.js";
+import {
+  CategorySelect
+} from "./chunk-KBMKALKQ.js";
+
+// src/components/data-display/DataViews/data-views-category-pill.tsx
+import { jsx } from "react/jsx-runtime";
+function emitPillDiff(fieldId, before, after, onTogglePill) {
+  const had = new Set(before);
+  const wants = new Set(after);
+  after.forEach((value) => {
+    if (!had.has(value)) onTogglePill(fieldId, value, true);
+  });
+  before.forEach((value) => {
+    if (!wants.has(value)) onTogglePill(fieldId, value, false);
+  });
+}
+var toCategoryOption = (option) => ({
+  id: option.value,
+  name: option.label,
+  parentId: option.parentId ?? null
+});
+function PillControl({
+  fieldId,
+  pill,
+  selected,
+  onTogglePill,
+  onClearField,
+  onOpenChange,
+  testIdPrefix,
+  layout = "pill"
+}) {
+  const copy = useDataViewsCopy();
+  const testId = `${testIdPrefix}-filter-${fieldId}`;
+  if (pill.control === "category") {
+    return /* @__PURE__ */ jsx(
+      CategorySelect,
+      {
+        copy: copy.categorySelect,
+        placeholder: pill.label,
+        label: layout === "stacked" ? pill.label : void 0,
+        fullWidth: layout === "stacked",
+        options: pill.options.map(toCategoryOption),
+        allowParentSelection: pill.allowParentSelection ?? false,
+        value: selected,
+        onChange: (next) => emitPillDiff(fieldId, selected, next, onTogglePill),
+        dataTestId: testId
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MultiSelectDropdown,
+    {
+      extraOptionsHeading: copy.filters.optionsHeading,
+      clearText: copy.filters.clear,
+      clearLabel: copy.filters.clearRange(pill.label),
+      label: pill.label,
+      options: pill.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(fieldId, value, checked),
+      onClear: () => onClearField(fieldId),
+      allLabel: copy.filters.allOption,
+      searchable: pill.searchEnabled ? true : void 0,
+      searchPlaceholder: copy.filters.optionSearchPlaceholder,
+      noResultsLabel: copy.filters.optionsEmpty,
+      layout,
+      onOpenChange,
+      "data-testid": testId
+    }
+  );
+}
+
+export {
+  emitPillDiff,
+  PillControl
+};
+//# sourceMappingURL=chunk-EVSKEIXI.js.map