@12-apps/ui 6.54.0 → 6.55.0

package/dist/chunk-UFCULHHH.js

@@ -1,114 +0,0 @@
-import {
-  renderChartByType
-} from "./chunk-H7SOEZHW.js";
-import {
-  ChartContainer
-} from "./chunk-RIRTW5EU.js";
-import {
-  getSizeStyles,
-  getVariantStyles,
-  plotHeightPx
-} from "./chunk-XRGJVS4P.js";
-import {
-  muiColor
-} from "./chunk-7ZPUN7TV.js";
-import {
-  uiInk
-} from "./chunk-FQ6UW7IY.js";
-import {
-  rem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/Chart/Chart.tsx
-import Box from "@mui/material/Box/index.js";
-import CircularProgress from "@mui/material/CircularProgress/index.js";
-import Paper from "@mui/material/Paper/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import { alpha, useTheme } from "@mui/material/styles/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-function variantSx(theme, props) {
-  return getVariantStyles(theme, {
-    variant: props.variant ?? "default",
-    color: props.color ?? "primary",
-    glow: props.glow ?? false,
-    pulse: props.pulse ?? false,
-    glass: props.glass ?? false,
-    gradient: props.gradient ?? false,
-    disabled: props.disabled ?? false
-  });
-}
-function ChartHeader({ title, subtitle, neon, dataTestId }) {
-  if (!title && !subtitle) return null;
-  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, "data-testid": `${dataTestId}-header`, children: [
-    title && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "h6",
-        "data-testid": `${dataTestId}-title`,
-        sx: (theme) => ({ color: neon ? uiInk(theme).dataVizNeon.accent : "text.primary", fontWeight: 600 }),
-        children: title
-      }
-    ),
-    subtitle && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "body2",
-        "data-testid": `${dataTestId}-subtitle`,
-        sx: (theme) => ({ color: neon ? alpha(uiInk(theme).dataVizNeon.accent, 0.7) : "text.secondary" }),
-        children: subtitle
-      }
-    )
-  ] });
-}
-var Chart = (props) => {
-  const theme = useTheme();
-  const sizeStyles = getSizeStyles(theme, props.size, props.height);
-  const styles = variantSx(theme, props);
-  const dataTestId = props["data-testid"] ?? "chart";
-  if (props.loading) {
-    return /* @__PURE__ */ jsx(
-      Paper,
-      {
-        "data-testid": `${dataTestId}-loading`,
-        sx: { ...styles, ...sizeStyles, display: "flex", justifyContent: "center", alignItems: "center" },
-        children: /* @__PURE__ */ jsx(CircularProgress, { color: muiColor(props.color ?? "primary", "inherit"), "data-testid": `${dataTestId}-loading-spinner` })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    Paper,
-    {
-      "data-testid": dataTestId,
-      className: props.className,
-      sx: { p: 2, ...styles, ...props.style },
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
-      children: [
-        /* @__PURE__ */ jsx(
-          ChartHeader,
-          {
-            title: props.title,
-            subtitle: props.subtitle,
-            neon: props.variant === "neon",
-            dataTestId
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ChartContainer,
-          {
-            responsive: props.responsive ?? true,
-            width: typeof props.width === "number" ? rem(theme, props.width) : props.width ?? "100%",
-            height: props.fillHeight === true ? "100%" : plotHeightPx(props.size, props.height),
-            "data-testid": `${dataTestId}-container`,
-            children: renderChartByType(props, theme)
-          }
-        )
-      ]
-    }
-  );
-};
-
-export {
-  Chart
-};
-//# sourceMappingURL=chunk-UFCULHHH.js.map

package/dist/chunk-UHR7WIOR.js

@@ -1,19 +0,0 @@
-import {
-  withDividers
-} from "./chunk-4GGH6ZQ7.js";
-import {
-  Box
-} from "./chunk-VJXC7VEB.js";
-
-// src/components/layout/Stack/Stack.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var Stack = React.forwardRef(
-  ({ direction = "column", gap = 0, divider, children, ...rest }, ref) => /* @__PURE__ */ jsx(Box, { ref, direction, gap, ...rest, children: withDividers(children, divider) })
-);
-Stack.displayName = "Stack";
-
-export {
-  Stack
-};
-//# sourceMappingURL=chunk-UHR7WIOR.js.map

package/dist/chunk-UHX2LOT2.js

@@ -1,190 +0,0 @@
-import {
-  DATA_VIEWS_LAYOUTS
-} from "./chunk-LHHAYZ55.js";
-import {
-  useDataViewsCopy
-} from "./chunk-KHG57NAE.js";
-import {
-  Slider
-} from "./chunk-MNHIK2OR.js";
-import {
-  default as default2
-} from "./chunk-6DPAWXZ3.js";
-import {
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/DataViews/data-views-layout-context.tsx
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
-import GridViewOutlinedIcon from "@mui/icons-material/GridViewOutlined";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DataViewsLayoutContext = createContext(null);
-var DEFAULT_ZOOM = 35;
-var CARD_SCALE_RANGE = { min: 0.75, max: 2 };
-var LAYOUT_STORAGE_KEY = "dataviews:layout";
-var DENSITY_STORAGE_KEY = "dataviews:density";
-var DENSITIES = ["compact", "cozy", "comfortable"];
-var DENSITY_ROW_PADDING = {
-  compact: 0.25,
-  cozy: 0.75,
-  comfortable: 1.5
-};
-var DENSITY_CARD_SCALE = {
-  compact: 0.84,
-  cozy: 1.15,
-  comfortable: 1.4
-};
-function cardTargetWidthFor(zoom, density) {
-  return Math.round(cardMinWidthForZoom(zoom) * DENSITY_CARD_SCALE[density]);
-}
-var DENSITY_BOARD_SCALE = {
-  compact: 0.95,
-  cozy: 1,
-  comfortable: 1.25
-};
-function cardScaleForZoom(zoom) {
-  const clamped = Math.max(0, Math.min(100, zoom));
-  return CARD_SCALE_RANGE.min + clamped / 100 * (CARD_SCALE_RANGE.max - CARD_SCALE_RANGE.min);
-}
-function cardMinWidthForZoom(zoom) {
-  return Math.round(180 * cardScaleForZoom(zoom));
-}
-function isLayout(value) {
-  return DATA_VIEWS_LAYOUTS.includes(value);
-}
-function isDensity(value) {
-  return DENSITIES.includes(value);
-}
-var DEFAULT_DENSITY = "cozy";
-function readStoredDensity() {
-  try {
-    if (typeof window === "undefined") return void 0;
-    const stored = window.localStorage.getItem(DENSITY_STORAGE_KEY);
-    return isDensity(stored) ? stored : void 0;
-  } catch {
-    return void 0;
-  }
-}
-function pinLayout(layout, available) {
-  if (layout === "cards") return available.canUseCards ? "cards" : "table";
-  if (layout === "list") return available.canUseList ? "list" : "table";
-  if (layout === "board") return available.canUseBoard ? "board" : "table";
-  return "table";
-}
-function readStoredLayout() {
-  try {
-    if (typeof window === "undefined") return void 0;
-    const stored = window.localStorage.getItem(LAYOUT_STORAGE_KEY);
-    return isLayout(stored) ? stored : void 0;
-  } catch {
-    return void 0;
-  }
-}
-function writeStored(key, value) {
-  try {
-    if (typeof window === "undefined") return;
-    window.localStorage.setItem(key, value);
-  } catch {
-  }
-}
-function DataViewsLayoutProvider({
-  canUseCards = false,
-  canUseList = false,
-  canUseBoard = false,
-  defaultLayout = "table",
-  viewLayout,
-  ignoreStoredLayout = false,
-  children
-}) {
-  const availability = { canUseCards, canUseList, canUseBoard };
-  const [layout, setLayoutState] = useState(
-    () => pinLayout(
-      viewLayout ?? (ignoreStoredLayout ? void 0 : readStoredLayout()) ?? defaultLayout,
-      availability
-    )
-  );
-  const [density, setDensityState] = useState(
-    () => (ignoreStoredLayout ? void 0 : readStoredDensity()) ?? DEFAULT_DENSITY
-  );
-  const [zoom, setZoom] = useState(DEFAULT_ZOOM);
-  useEffect(() => {
-    if (viewLayout) setLayoutState(pinLayout(viewLayout, availability));
-  }, [viewLayout]);
-  const effective = pinLayout(layout, availability);
-  const value = useMemo(
-    () => ({
-      layout: effective,
-      setLayout: (next) => {
-        const pinned = pinLayout(next, availability);
-        setLayoutState(pinned);
-        if (!ignoreStoredLayout) writeStored(LAYOUT_STORAGE_KEY, pinned);
-      },
-      density,
-      setDensity: (next) => {
-        setDensityState(next);
-        if (!ignoreStoredLayout) writeStored(DENSITY_STORAGE_KEY, next);
-      },
-      canUseCards,
-      canUseList,
-      canUseBoard,
-      zoom,
-      setZoom
-    }),
-    [effective, density, canUseCards, canUseList, canUseBoard, zoom]
-  );
-  return /* @__PURE__ */ jsx(DataViewsLayoutContext.Provider, { value, children });
-}
-function useDataViewsLayout() {
-  const ctx = useContext(DataViewsLayoutContext);
-  if (!ctx) {
-    throw new Error("useDataViewsLayout must be used within a DataViewsLayoutProvider");
-  }
-  return ctx;
-}
-function DataViewsZoomSlider({ testIdPrefix }) {
-  const { layout, zoom, setZoom } = useDataViewsLayout();
-  const copy = useDataViewsCopy();
-  if (layout !== "cards" && layout !== "board") return null;
-  return /* @__PURE__ */ jsxs(
-    default2,
-    {
-      sx: {
-        display: { xs: "none", sm: "flex" },
-        alignItems: "center",
-        gap: 1,
-        color: "text.secondary"
-      },
-      children: [
-        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(14) } }),
-        /* @__PURE__ */ jsx(default2, { sx: { width: sxRem(88), display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
-          Slider,
-          {
-            size: "sm",
-            showValue: false,
-            value: zoom,
-            min: 0,
-            max: 100,
-            step: 5,
-            onChange: (_event, next) => setZoom(Array.isArray(next) ? next[0] ?? 0 : next),
-            "aria-label": copy.display.cardZoom,
-            "data-testid": `${testIdPrefix}-card-zoom`
-          }
-        ) }),
-        /* @__PURE__ */ jsx(GridViewOutlinedIcon, { sx: { fontSize: sxRem(20) } })
-      ]
-    }
-  );
-}
-
-export {
-  DENSITY_ROW_PADDING,
-  DENSITY_CARD_SCALE,
-  cardTargetWidthFor,
-  DENSITY_BOARD_SCALE,
-  cardScaleForZoom,
-  cardMinWidthForZoom,
-  DataViewsLayoutProvider,
-  useDataViewsLayout,
-  DataViewsZoomSlider
-};
-//# sourceMappingURL=chunk-UHX2LOT2.js.map

package/dist/chunk-UJHXEOU3.js

@@ -1,107 +0,0 @@
-import {
-  AlertDialog
-} from "./chunk-4PFKMNLP.js";
-
-// src/components/feedback/ConfirmAction/ConfirmAction.parts.tsx
-import Alert from "@mui/material/Alert/index.js";
-import Stack from "@mui/material/Stack/index.js";
-import TextField from "@mui/material/TextField/index.js";
-import Typography from "@mui/material/Typography/index.js";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_TEST_ID = "confirm-action";
-function confirmBody(description, copy, entityName) {
-  if (!entityName) return description ?? copy.irreversible;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontWeight: 600, display: "block" }, children: entityName }),
-    description
-  ] });
-}
-function resolveInitialFocus(tone, initialFocus) {
-  if (initialFocus) return initialFocus;
-  return tone === "destructive" ? "cancel" : "confirm";
-}
-function TypeToConfirmField({
-  expected,
-  label,
-  value,
-  onChange,
-  disabled,
-  dataTestId,
-  copy
-}) {
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: label ?? copy.typeToConfirm(expected) }),
-    /* @__PURE__ */ jsx(
-      TextField,
-      {
-        size: "small",
-        value,
-        disabled,
-        onChange: (event) => onChange(event.target.value),
-        inputProps: {
-          "aria-label": label ?? copy.typeToConfirm(expected),
-          "data-testid": `${dataTestId}-type-to-confirm`
-        }
-      }
-    )
-  ] });
-}
-function ConfirmActionDialog({
-  state,
-  title,
-  description,
-  entityName,
-  confirmText,
-  cancelText,
-  typeToConfirm,
-  typeToConfirmLabel,
-  tone = "destructive",
-  initialFocus,
-  dataTestId = DEFAULT_TEST_ID,
-  copy
-}) {
-  const [typed, setTyped] = React.useState("");
-  React.useEffect(() => {
-    if (state.open) setTyped("");
-  }, [state.open]);
-  const gateUnmet = typeToConfirm !== void 0 && typed.trim() !== typeToConfirm;
-  return /* @__PURE__ */ jsxs(
-    AlertDialog,
-    {
-      open: state.open,
-      variant: tone === "destructive" ? "destructive" : "default",
-      title,
-      description: confirmBody(description, copy, entityName),
-      confirmText,
-      cancelText: cancelText ?? copy.cancel,
-      loading: state.pending,
-      confirmDisabled: gateUnmet,
-      initialFocus: resolveInitialFocus(tone, initialFocus),
-      onConfirm: state.confirm,
-      onCancel: state.cancel,
-      onClose: state.cancel,
-      "data-testid": dataTestId,
-      children: [
-        state.error && /* @__PURE__ */ jsx(Alert, { severity: "error", sx: { mt: 1 }, "data-testid": `${dataTestId}-error`, children: state.error }),
-        typeToConfirm !== void 0 && /* @__PURE__ */ jsx(
-          TypeToConfirmField,
-          {
-            expected: typeToConfirm,
-            label: typeToConfirmLabel,
-            value: typed,
-            onChange: setTyped,
-            disabled: state.pending,
-            dataTestId,
-            copy
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  ConfirmActionDialog
-};
-//# sourceMappingURL=chunk-UJHXEOU3.js.map

package/dist/chunk-UNEJ4MUR.js

@@ -1,271 +0,0 @@
-import {
-  CARD_RADIUS,
-  cardSurfaceStyles,
-  isActionable,
-  isSelectable,
-  slotTestIds
-} from "./chunk-BYH5GPLT.js";
-import {
-  DragHandle,
-  useDragItem
-} from "./chunk-K4EKTMTC.js";
-import {
-  CARD_ASPECT_RATIOS
-} from "./chunk-LHHAYZ55.js";
-import {
-  useDataViewsCopy
-} from "./chunk-KHG57NAE.js";
-import {
-  Checkbox
-} from "./chunk-FRD7U6QO.js";
-import {
-  default as default2
-} from "./chunk-6DPAWXZ3.js";
-import {
-  Card
-} from "./chunk-WN5PNP6F.js";
-import {
-  Text
-} from "./chunk-MKLIMY3D.js";
-import {
-  rem,
-  sxRem
-} from "./chunk-YKCAJ2TN.js";
-
-// src/components/data-display/DataViews/base-card.tsx
-import { useTheme } from "@mui/material/styles/index.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var cardSx = (opts) => {
-  const { aspectRatio, pad, scale, interactive, draggable } = opts;
-  return {
-    position: "relative",
-    zoom: scale,
-    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
-    p: pad,
-    cursor: draggable ? "grab" : interactive ? "pointer" : void 0,
-    ...draggable ? { touchAction: "none", "&:active": { cursor: "grabbing" } } : {}
-  };
-};
-var OVERLAY_BAND_UNITS = 42 / 8;
-function contentGaps(opts) {
-  const { hasMedia, hasBody, overlays, pad } = opts;
-  const gap = pad * 0.5;
-  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_UNITS - pad) : 0;
-  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };
-}
-function CardOverlays({
-  selected,
-  onToggleSelect,
-  checkboxTestId,
-  menu
-}) {
-  const copy = useDataViewsCopy();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    onToggleSelect && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", top: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        checked: selected,
-        onChange: () => onToggleSelect(),
-        onClick: (event) => event.stopPropagation(),
-        size: "small",
-        "data-testid": checkboxTestId,
-        "aria-label": copy.selection.selectRow
-      }
-    ) }),
-    menu && /* @__PURE__ */ jsx(
-      default2,
-      {
-        sx: { position: "absolute", top: sxRem(4), right: sxRem(4), zIndex: 2 },
-        onClick: (event) => event.stopPropagation(),
-        children: menu
-      }
-    )
-  ] });
-}
-function CardMedia({ image, imageFallback }) {
-  return /* @__PURE__ */ jsx(
-    default2,
-    {
-      sx: {
-        flex: 1,
-        minHeight: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        borderRadius: 1,
-        "& img": { width: "100%", height: "100%", objectFit: "cover" }
-      },
-      children: image ?? imageFallback
-    }
-  );
-}
-function CardBodyContent({
-  children,
-  fill,
-  topGap
-}) {
-  return /* @__PURE__ */ jsx(
-    default2,
-    {
-      sx: {
-        flex: fill ? 1 : "none",
-        minHeight: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 0.75,
-        mt: topGap,
-        overflow: "hidden"
-      },
-      children
-    }
-  );
-}
-function CardCaption({
-  title,
-  subtitle,
-  topGap
-}) {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(default2, { sx: { mt: topGap, minWidth: 0 }, children: [
-    title != null && /* @__PURE__ */ jsx(
-      Text,
-      {
-        variant: "heading",
-        size: "sm",
-        weight: "bold",
-        as: "p",
-        style: {
-          lineHeight: 1.15,
-          fontSize: rem(theme, 15.2),
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap"
-        },
-        children: title
-      }
-    ),
-    subtitle != null && /* @__PURE__ */ jsx(Text, { variant: "caption", size: "xs", color: "secondary", as: "p", children: subtitle })
-  ] });
-}
-function CardContents({
-  children,
-  image,
-  imageFallback,
-  title,
-  subtitle,
-  overlays,
-  pad
-}) {
-  const hasMedia = image != null || imageFallback != null;
-  const hasBody = children != null;
-  const hasCaption = title != null || subtitle != null;
-  const top = contentGaps({ hasMedia, hasBody, overlays, pad });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    hasMedia && /* @__PURE__ */ jsx(CardMedia, { image, imageFallback }),
-    hasBody && /* @__PURE__ */ jsx(CardBodyContent, { fill: !hasMedia, topGap: top.body, children }),
-    hasCaption && /* @__PURE__ */ jsx(CardCaption, { title, subtitle, topGap: top.caption })
-  ] });
-}
-function useCardShell(props) {
-  const actionable = isActionable(props.state);
-  return {
-    selectable: isSelectable(props),
-    actionable,
-    theme: useTheme(),
-    slot: slotTestIds(props.testId),
-    scale: props.scale ?? 1,
-    // The card's own veto over the container's decision — see `CardSurfaceProps`.
-    drag: useDragItem(props.draggable === false || !actionable ? void 0 : props.dragId)
-  };
-}
-function BaseCard(props) {
-  const { aspectRatio = "4:3", selected = false } = props;
-  const { menu, onToggleSelect, onClick } = props;
-  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);
-  const dataTestId = props.testId;
-  const checkboxTestId = slot("checkbox");
-  const pad = 1.5;
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      variant: "outlined",
-      onClick,
-      dataTestId,
-      className: props.className,
-      "aria-label": props["aria-label"],
-      "aria-disabled": actionable ? void 0 : true,
-      ...drag.itemProps,
-      sx: {
-        // The same corner the row uses: a Grade and a Lista of the same records
-        // sit beside each other, and a tile that rounds harder than the row
-        // reads as a different component.
-        borderRadius: CARD_RADIUS,
-        // The shared half — variant, colour, selection, effects — identical to
-        // the one BaseListCard uses, so a Grade and a Lista of the same records
-        // are dressed by one set of rules.
-        ...cardSurfaceStyles(
-          {
-            ...props,
-            selectable,
-            shape: "tile",
-            // A card mid-drag is a ghost of itself; the drop target is what the
-            // eye should be on.
-            state: drag.dragging ? "disabled" : props.state
-          },
-          theme
-        ),
-        // …and the tile's own geometry on top.
-        ...cardSx({
-          aspectRatio,
-          pad,
-          scale,
-          interactive: onClick != null,
-          draggable: drag.draggable && drag.handleProps === void 0
-        })
-      },
-      children: [
-        drag.draggable && /* @__PURE__ */ jsx(default2, { sx: { position: "absolute", bottom: sxRem(4), left: sxRem(4), zIndex: 2 }, children: /* @__PURE__ */ jsx(
-          DragHandle,
-          {
-            handleProps: drag.handleProps,
-            gated: drag.handleProps !== void 0,
-            testId: slot("drag")
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          CardOverlays,
-          {
-            selected,
-            onToggleSelect: selectable ? onToggleSelect ?? (() => {
-            }) : void 0,
-            checkboxTestId,
-            menu
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CardContents,
-          {
-            image: props.image,
-            imageFallback: props.imageFallback,
-            title: props.title,
-            subtitle: props.subtitle,
-            overlays: selectable || menu != null,
-            pad,
-            children: props.children
-          }
-        )
-      ]
-    }
-  );
-}
-
-export {
-  BaseCard
-};
-//# sourceMappingURL=chunk-UNEJ4MUR.js.map