@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-DQIRSUEK.js

@@ -0,0 +1,118 @@
+import {
+  sliderSx
+} from "./chunk-2RRXQTOO.js";
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+
+// src/components/form/Slider/Slider.tsx
+import Box from "@mui/material/Box/index.js";
+import MuiSlider from "@mui/material/Slider/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledSlider = styled(MuiSlider, {
+  shouldForwardProp: (prop) => !["customColor", "customSize", "glow", "glass", "gradient", "customVariant"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...sliderSx(theme, flags) }));
+var DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  showValue: false,
+  glow: false,
+  glass: false,
+  gradient: false,
+  showMarks: false,
+  unit: ""
+};
+var formatOne = (n, unit, formatValue) => `${formatValue ? formatValue(n) : n}${unit}`;
+var displayValueOf = (value, unit, formatValue) => {
+  if (Array.isArray(value)) {
+    const low = formatOne(value[0] ?? 0, unit, formatValue);
+    const high = formatOne(value[1] ?? 0, unit, formatValue);
+    return `${low} - ${high}`;
+  }
+  return formatOne(value ?? 0, unit, formatValue);
+};
+var marksFor = (variant, showMarks, customMarks) => {
+  if (variant !== "marks" && !showMarks) return void 0;
+  return customMarks || (variant === "marks" ? true : void 0);
+};
+var Slider = forwardRef((props, ref) => {
+  const {
+    variant,
+    color,
+    size,
+    label,
+    showValue,
+    glow,
+    glass,
+    gradient,
+    showMarks,
+    customMarks,
+    unit,
+    formatValue,
+    value,
+    onChange,
+    dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS);
+  const testId = (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0;
+  return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, "data-testid": dataTestId, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          mb: 2
+        },
+        children: [
+          label && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              fontWeight: 500,
+              color: "text.primary",
+              "data-testid": testId("label"),
+              children: label
+            }
+          ),
+          showValue && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", "data-testid": testId("value-label"), children: displayValueOf(value, unit, formatValue) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { px: 1 }, children: /* @__PURE__ */ jsx(
+      StyledSlider,
+      {
+        ref,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        customVariant: variant,
+        value,
+        onChange,
+        marks: marksFor(variant, showMarks, customMarks),
+        valueLabelDisplay: showValue ? "auto" : "off",
+        "data-testid": testId("slider"),
+        slotProps: {
+          track: { "data-testid": testId("track") },
+          thumb: { "data-testid": testId("thumb") }
+        },
+        ...rest
+      }
+    ) })
+  ] });
+});
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};
+//# sourceMappingURL=chunk-DQIRSUEK.js.map

package/dist/chunk-DRKYPQNA.js

@@ -0,0 +1,156 @@
+import {
+  useLightboxCopy
+} from "./chunk-TEQYTEM2.js";
+import {
+  OVERLAY_Z_INDEX,
+  navButtonSx,
+  overlayButtonSx
+} from "./chunk-2BFUUUDS.js";
+
+// src/components/data-display/Lightbox/LightboxControls.tsx
+import PrevIcon from "@mui/icons-material/ChevronLeft";
+import NextIcon from "@mui/icons-material/ChevronRight";
+import CloseIcon from "@mui/icons-material/Close";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayIcon from "@mui/icons-material/PlayArrow";
+import ResetZoomIcon from "@mui/icons-material/RestartAlt";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LightboxCloseButton = ({
+  testId,
+  onClose
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onClose,
+      sx: { ...overlayButtonSx, position: "absolute", top: 16, right: 16, zIndex: OVERLAY_Z_INDEX },
+      "aria-label": copy.close,
+      "data-testid": testId("close"),
+      children: /* @__PURE__ */ jsx(CloseIcon, {})
+    }
+  );
+};
+var arrowSx = (side) => ({
+  ...navButtonSx,
+  position: "absolute",
+  [side]: 16,
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: OVERLAY_Z_INDEX
+});
+var LightboxNavButtons = ({
+  testId,
+  atStart,
+  atEnd,
+  onPrev,
+  onNext
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: atStart,
+        sx: arrowSx("left"),
+        "aria-label": copy.previous,
+        "data-testid": testId("prev"),
+        children: /* @__PURE__ */ jsx(PrevIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: atEnd,
+        sx: arrowSx("right"),
+        "aria-label": copy.next,
+        "data-testid": testId("next"),
+        children: /* @__PURE__ */ jsx(NextIcon, {})
+      }
+    )
+  ] });
+};
+var LightboxZoomControls = ({
+  testId,
+  onZoomIn,
+  onZoomOut,
+  onResetZoom
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "absolute",
+        top: 16,
+        left: 16,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "data-testid": testId("zoom-controls"),
+      children: [
+        /* @__PURE__ */ jsx(IconButton, { onClick: onZoomIn, sx: overlayButtonSx, "aria-label": copy.zoomIn, "data-testid": testId("zoom-in"), children: /* @__PURE__ */ jsx(ZoomInIcon, {}) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onZoomOut,
+            sx: overlayButtonSx,
+            "aria-label": copy.zoomOut,
+            "data-testid": testId("zoom-out"),
+            children: /* @__PURE__ */ jsx(ZoomOutIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: onResetZoom,
+            sx: overlayButtonSx,
+            "aria-label": copy.resetZoom,
+            "data-testid": testId("zoom-reset"),
+            children: /* @__PURE__ */ jsx(ResetZoomIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var LightboxAutoplayButton = ({
+  testId,
+  isAutoPlaying,
+  onToggle
+}) => {
+  const copy = useLightboxCopy();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick: onToggle,
+      sx: {
+        ...overlayButtonSx,
+        position: "absolute",
+        top: 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: OVERLAY_Z_INDEX
+      },
+      "aria-label": isAutoPlaying ? copy.pause : copy.play,
+      "data-testid": testId("autoplay"),
+      children: isAutoPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+    }
+  );
+};
+
+export {
+  LightboxCloseButton,
+  LightboxNavButtons,
+  LightboxZoomControls,
+  LightboxAutoplayButton
+};
+//# sourceMappingURL=chunk-DRKYPQNA.js.map

package/dist/chunk-DSIJEJQ7.js

@@ -0,0 +1,88 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-3EDZU2H7.js";
+import {
+  Text
+} from "./chunk-H57ZS6W2.js";
+
+// src/components/data-display/DataViews/data-views-select-all-strip.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectAllStrip({
+  rows,
+  getRowId,
+  selectedIds,
+  onChange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (rows.length === 0) return null;
+  const pageIds = rows.map(getRowId);
+  const selectedHere = pageIds.filter((id) => selectedIds.has(id)).length;
+  const all = selectedHere === pageIds.length;
+  const some = selectedHere > 0 && !all;
+  const toggle = () => {
+    if (all) {
+      const next = new Set(selectedIds);
+      pageIds.forEach((id) => next.delete(id));
+      onChange(next);
+      return;
+    }
+    onChange(/* @__PURE__ */ new Set([...selectedIds, ...pageIds]));
+  };
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-select-all-strip`,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        mt: 1.5,
+        px: 1,
+        py: 0.75,
+        borderBottom: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover",
+        borderRadius: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "small",
+            checked: all,
+            indeterminate: some,
+            onChange: toggle,
+            "data-testid": `${testIdPrefix}-select-all-box`,
+            inputProps: { "aria-label": copy.selection.selectAllOnPage },
+            sx: { p: 0.5 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            color: "secondary",
+            onClick: toggle,
+            dataTestId: `${testIdPrefix}-select-all-toggle`,
+            children: all ? copy.selection.clearSelection : copy.selection.selectAll
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { ml: "auto", color: "text.disabled", whiteSpace: "nowrap" }, children: copy.selection.onThisPage(rows.length) }) })
+      ]
+    }
+  );
+}
+
+export {
+  SelectAllStrip
+};
+//# sourceMappingURL=chunk-DSIJEJQ7.js.map

package/dist/chunk-DY7VTAYO.js

@@ -0,0 +1,165 @@
+import {
+  Sheet
+} from "./chunk-DBCITC4P.js";
+import {
+  Dialog
+} from "./chunk-L4UP5VYS.js";
+import {
+  Button
+} from "./chunk-3EDZU2H7.js";
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+
+// src/components/navigation/AppHeader/AppHeader.details.tsx
+import Box from "@mui/material/Box/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIALOG_WIDTH = 460;
+var XXS_MAX_WIDTH = 360;
+function sheetHeight(xxs) {
+  return { height: "auto", maxHeight: xxs ? "100dvh" : "90dvh" };
+}
+function usesSheet(presentation, compact) {
+  if (presentation === "sheet") return true;
+  if (presentation === "dialog") return false;
+  return compact;
+}
+var DetailRow = ({
+  row,
+  last,
+  dataTestId
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${dataTestId}-row`,
+      "data-row": row.id ?? row.label,
+      sx: {
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 2,
+        py: 1.5,
+        borderBottom: last ? "none" : `1px solid ${theme.palette.divider}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", component: "span", sx: { flex: "0 0 auto" }, children: row.label }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            component: "span",
+            sx: {
+              minWidth: 0,
+              textAlign: "right",
+              fontWeight: row.tone ? 700 : 500,
+              color: row.tone ? accentFor(theme, row.tone).main : "text.primary",
+              // Newlines in a value are meaningful — an address is two lines.
+              whiteSpace: "pre-line"
+            },
+            children: row.value
+          }
+        )
+      ]
+    }
+  );
+};
+var DetailsBody = ({ rows, children, dataTestId }) => /* @__PURE__ */ jsxs(Box, { "data-testid": `${dataTestId}-body`, children: [
+  (rows ?? []).map((row, index) => /* @__PURE__ */ jsx(
+    DetailRow,
+    {
+      row,
+      last: index === (rows?.length ?? 0) - 1 && !children,
+      dataTestId
+    },
+    row.id ?? row.label
+  )),
+  children
+] });
+var DetailsAction = ({ action, dataTestId, padded = false }) => action ? /* @__PURE__ */ jsx(Box, { sx: padded ? { pt: 2 } : void 0, children: /* @__PURE__ */ jsx(
+  Button,
+  {
+    variant: "solid",
+    color: action.color ?? "primary",
+    size: "lg",
+    fullWidth: true,
+    disabled: action.disabled,
+    onClick: action.onClick,
+    dataTestId: action.dataTestId ?? `${dataTestId}-action`,
+    children: action.label
+  }
+) }) : null;
+var AppHeaderDetails = ({
+  open,
+  onClose,
+  title,
+  subtitle,
+  rows,
+  children,
+  action,
+  presentation = "auto",
+  breakpoint = "sm",
+  className,
+  dataTestId = "app-header-details"
+}) => {
+  const theme = useTheme();
+  const asSheet = usesSheet(presentation, useMediaQuery(theme.breakpoints.down(breakpoint)));
+  const xxs = useMediaQuery(`(max-width:${XXS_MAX_WIDTH - 0.05}px)`);
+  const description = typeof subtitle === "string" ? subtitle : void 0;
+  const richSubtitle = description === void 0 ? subtitle : null;
+  const body = /* @__PURE__ */ jsx(DetailsBody, { rows, dataTestId, children });
+  const footer = /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId });
+  if (asSheet) {
+    return /* @__PURE__ */ jsxs(
+      Sheet,
+      {
+        open,
+        onClose,
+        onOpenChange: (next) => !next && onClose(),
+        position: "bottom",
+        size: "md",
+        style: sheetHeight(xxs),
+        className,
+        title,
+        description,
+        showCloseButton: true,
+        rounded: true,
+        footer,
+        dataTestId,
+        children: [
+          richSubtitle,
+          body
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      description,
+      showCloseButton: true,
+      fullWidth: true,
+      className,
+      dataTestId,
+      PaperProps: { sx: { maxWidth: DIALOG_WIDTH, borderRadius: 3 } },
+      children: [
+        richSubtitle,
+        body,
+        /* @__PURE__ */ jsx(DetailsAction, { action, dataTestId, padded: true })
+      ]
+    }
+  );
+};
+AppHeaderDetails.displayName = "AppHeaderDetails";
+
+export {
+  AppHeaderDetails
+};
+//# sourceMappingURL=chunk-DY7VTAYO.js.map