@12-apps/ui 6.33.1 → 6.34.0

package/dist/chunk-XOL2QCSP.js

@@ -0,0 +1,273 @@
+import {
+  DataViewsBoard
+} from "./chunk-VLVMJDGD.js";
+import {
+  SelectAllStrip
+} from "./chunk-DSIJEJQ7.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
+import {
+  cardGridTracks
+} from "./chunk-TNDV33LP.js";
+import {
+  ListCardGroup
+} from "./chunk-TAB6AIPN.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-2XGGHYEA.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-UCTJJYVC.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+
+// src/components/data-display/DataViews/data-views-grid-bodies.tsx
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GridBody({
+  rows,
+  columns,
+  getRowId,
+  selectedIds,
+  onChangeSelected,
+  sortBy,
+  onChangeSortBy,
+  sortMode,
+  rowPadding,
+  rowDetail,
+  dataTestId,
+  emptyState
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        width: "100%",
+        overflowX: "auto",
+        mt: 1.5,
+        // Tabwoah-style dense rows: MUI's default TableCell padding keeps rows
+        // tall regardless of rowHeight, so the DENSITY preference is applied
+        // here rather than through `rowHeight`, which it would fight.
+        "& .MuiTableCell-root": { py: rowPadding, fontSize: "0.8125rem" },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: "0.75rem" }
+      },
+      children: /* @__PURE__ */ jsx(
+        DataGrid,
+        {
+          rows,
+          columns,
+          getRowId: (row) => getRowId(row),
+          virtualizeRows: false,
+          density: "compact",
+          rowHeight: 36,
+          headerHeight: 36,
+          selection: { mode: "multi", selectedRowIds: selectedIds, onChangeSelected },
+          sorting: { mode: sortMode, sortBy, onChangeSortBy },
+          expansion: toGridExpansion(rowDetail, copy),
+          "data-testid": dataTestId,
+          emptyState,
+          emptyText: copy.grid.emptyFilteredTitle
+        }
+      )
+    }
+  );
+}
+function CardBody({
+  rows,
+  renderCard,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  targetCardWidth,
+  cardScale,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: {
+        mt: 1.5,
+        display: "grid",
+        // Fixed inter-card gap — deliberately NOT scaled by the zoom slider, so
+        // only the cards grow while the space between them stays constant.
+        gap: 1.5,
+        ...cardGridTracks(targetCardWidth)
+      },
+      "data-testid": dataTestId ? `${dataTestId}-cards` : "data-views-cards",
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+          selected: selectedIds.has(id),
+          onToggleSelect: () => onToggleId(id),
+          scale: cardScale
+        }) }, id);
+      })
+    }
+  );
+}
+function ListBody({
+  rows,
+  renderListRow,
+  getRowId,
+  selectedIds,
+  onToggleId,
+  rowGap,
+  group,
+  density,
+  dataTestId,
+  emptyState
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: emptyState });
+  }
+  const testId = dataTestId ? `${dataTestId}-list` : "data-views-list";
+  const selectionFor = (id) => ({
+    selected: selectedIds.has(id),
+    onToggleSelect: () => onToggleId(id),
+    scale: 1
+  });
+  if (group) {
+    return /* @__PURE__ */ jsx(default2, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx(
+      ListCardGroup,
+      {
+        cells: group.cells,
+        metaColumns: group.metaColumns,
+        rails: group.rails,
+        reserveGutters: group.reserveGutters,
+        density,
+        gap: rowGap,
+        dataTestId: testId,
+        children: rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(React.Fragment, { children: renderListRow(row, selectionFor(id)) }, id);
+        })
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    default2,
+    {
+      sx: { mt: 1.5, display: "flex", flexDirection: "column", gap: rowGap },
+      "data-testid": testId,
+      children: rows.map((row) => {
+        const id = getRowId(row);
+        return /* @__PURE__ */ jsx(default2, { children: renderListRow(row, selectionFor(id)) }, id);
+      })
+    }
+  );
+}
+function Headerless({
+  c,
+  getRowId,
+  testIdPrefix,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectAllStrip,
+      {
+        rows: c.matched,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onChange: (next) => c.setSelectedIds(next),
+        testIdPrefix
+      }
+    ),
+    children
+  ] });
+}
+function headerlessBody({ c, getRowId, renderCard, renderListRow, listGroup, board, dataTestId, emptyState }, { layout, zoom, density }) {
+  if (layout === "list" && renderListRow) {
+    return /* @__PURE__ */ jsx(
+      ListBody,
+      {
+        rows: c.matched,
+        renderListRow,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        rowGap: DENSITY_ROW_PADDING[density],
+        group: listGroup,
+        density,
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  if (layout === "board" && board && renderCard) {
+    return /* @__PURE__ */ jsx(
+      DataViewsBoard,
+      {
+        rows: c.matched,
+        board,
+        getRowId,
+        renderCard,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        cardScale: DENSITY_BOARD_SCALE[density],
+        dataTestId
+      }
+    );
+  }
+  if (layout === "cards" && renderCard) {
+    return /* @__PURE__ */ jsx(
+      CardBody,
+      {
+        rows: c.matched,
+        renderCard,
+        getRowId,
+        selectedIds: c.selectedIds,
+        onToggleId: c.toggleId,
+        targetCardWidth: cardTargetWidthFor(zoom, density),
+        cardScale: cardScaleForZoom(zoom),
+        dataTestId,
+        emptyState
+      }
+    );
+  }
+  return null;
+}
+function GridMain(props) {
+  const { c, getRowId, dataTestId, emptyState, testIdPrefix } = props;
+  const layoutState = useDataViewsLayout();
+  const body = headerlessBody(props, layoutState);
+  if (body) {
+    return /* @__PURE__ */ jsx(Headerless, { c, getRowId, testIdPrefix, children: body });
+  }
+  return /* @__PURE__ */ jsx(
+    GridBody,
+    {
+      rows: c.matched,
+      columns: c.gridColumns,
+      getRowId,
+      selectedIds: [...c.selectedIds],
+      onChangeSelected: (ids) => c.setSelectedIds(new Set(ids)),
+      sortBy: c.state.sortBy,
+      onChangeSortBy: (next) => c.patch({ sortBy: next }),
+      sortMode: c.serverMode ? "server" : "client",
+      rowPadding: DENSITY_ROW_PADDING[layoutState.density],
+      rowDetail: props.rowDetail,
+      dataTestId,
+      emptyState
+    }
+  );
+}
+
+export {
+  GridMain
+};
+//# sourceMappingURL=chunk-XOL2QCSP.js.map

package/dist/chunk-XYK3HXZY.js

@@ -0,0 +1,68 @@
+import {
+  ErrorState
+} from "./chunk-JIKWZDNK.js";
+import {
+  LoadingState
+} from "./chunk-QO6QWBDI.js";
+import {
+  EmptyState
+} from "./chunk-MZMGQKT3.js";
+
+// src/components/data-display/AsyncStateContainer/AsyncStateContainer.tsx
+import Box from "@mui/material/Box/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StateBox = ({ state, className, dataTestId, children }) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className,
+    "data-testid": dataTestId || "async-state-container",
+    "data-state": state,
+    children
+  }
+);
+var errorMessageOf = (error) => {
+  if (!error) return "";
+  if (typeof error === "string") return error;
+  if (error instanceof Error) return error.message;
+  return "An unexpected error occurred";
+};
+var pickNode = (node, render, fallback) => node || render?.() || fallback;
+var AsyncStateContainer = React.memo(
+  ({
+    isLoading = false,
+    error,
+    isEmpty = false,
+    children,
+    loadingComponent,
+    renderLoading,
+    errorComponent,
+    renderError,
+    emptyComponent,
+    emptyTitle,
+    renderEmpty,
+    className,
+    dataTestId
+  }) => {
+    const box = { className, dataTestId };
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "loading", ...box, children: pickNode(loadingComponent, renderLoading, /* @__PURE__ */ jsx(LoadingState, {})) });
+    }
+    if (error) {
+      const message = errorMessageOf(error);
+      return /* @__PURE__ */ jsx(StateBox, { state: "error", ...box, children: errorComponent || renderError?.(message) || /* @__PURE__ */ jsx(ErrorState, { message }) });
+    }
+    if (isEmpty) {
+      return /* @__PURE__ */ jsx(StateBox, { state: "empty", ...box, children: pickNode(emptyComponent, renderEmpty, /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle })) });
+    }
+    return /* @__PURE__ */ jsx(StateBox, { state: "success", ...box, children });
+  }
+);
+AsyncStateContainer.displayName = "AsyncStateContainer";
+var AsyncStateContainer_default = AsyncStateContainer;
+
+export {
+  AsyncStateContainer,
+  AsyncStateContainer_default
+};
+//# sourceMappingURL=chunk-XYK3HXZY.js.map

package/dist/chunk-Y3HMIUH6.js

@@ -0,0 +1,172 @@
+import {
+  BreadcrumbEntry
+} from "./chunk-67VUL6L2.js";
+import {
+  breadcrumbsBarStyles,
+  sizeIconMap
+} from "./chunk-JO3Y5H75.js";
+
+// src/components/navigation/Breadcrumbs/Breadcrumbs.tsx
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import NavigateNext from "@mui/icons-material/NavigateNext";
+import Box from "@mui/material/Box/index.js";
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs/index.js";
+import { useTheme, styled } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled(MuiBreadcrumbs, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "color" && prop !== "visualStyle" && prop !== "elevation"
+})(
+  ({ theme, size, color, visualStyle, elevation = 0 }) => ({
+    ...breadcrumbsBarStyles({ theme, size, color, visualStyle, elevation })
+  })
+);
+var AnimatedSeparator = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  opacity: 0.6,
+  transition: "all 0.2s ease",
+  "&:hover": {
+    opacity: 1,
+    transform: "scale(1.1)"
+  }
+}));
+var getSeparator = (separatorType) => {
+  const separatorContent = (() => {
+    switch (separatorType) {
+      case "slash":
+        return "/";
+      case "arrow":
+        return /* @__PURE__ */ jsx(NavigateNext, { fontSize: "small" });
+      case "chevron":
+        return /* @__PURE__ */ jsx(ChevronRight, { fontSize: "small" });
+      case "dot":
+        return "\u2022";
+      case "pipe":
+        return "|";
+      default:
+        return /* @__PURE__ */ jsx(ArrowForwardIos, { sx: { fontSize: 12 } });
+    }
+  })();
+  return /* @__PURE__ */ jsx(AnimatedSeparator, { children: separatorContent });
+};
+var collapseItems = ({
+  items,
+  effectiveMaxItems,
+  collapseBehavior
+}) => {
+  if (items.length <= effectiveMaxItems) {
+    return { displayItems: items, collapsedItems: [] };
+  }
+  if (collapseBehavior === "menu") {
+    const firstItem = items[0];
+    const tail = items.slice(-(effectiveMaxItems - 2));
+    return {
+      displayItems: firstItem ? [firstItem, ...tail] : tail,
+      collapsedItems: items.slice(1, -(effectiveMaxItems - 2))
+    };
+  }
+  if (collapseBehavior === "ellipsis") {
+    const half = Math.floor(effectiveMaxItems / 2);
+    return {
+      displayItems: [
+        ...items.slice(0, half),
+        { label: "...", href: "#", isEllipsis: true },
+        ...items.slice(-half)
+      ],
+      collapsedItems: []
+    };
+  }
+  return { displayItems: items, collapsedItems: [] };
+};
+var BREADCRUMBS_DEFAULTS = {
+  variant: "default",
+  separatorType: "default",
+  maxItems: 8,
+  showHomeIcon: true,
+  size: "md",
+  color: "neutral",
+  elevation: 1,
+  collapseBehavior: "menu",
+  mobileMaxItems: 3
+};
+var resolveProps = (props) => ({
+  ...BREADCRUMBS_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var Breadcrumbs = React.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      separatorType,
+      items,
+      separator,
+      maxItems,
+      showHomeIcon,
+      size,
+      color,
+      elevation,
+      collapseBehavior,
+      mobileMaxItems,
+      ariaLabel,
+      copy,
+      dataTestId,
+      ...props
+    } = resolveProps(componentProps);
+    const theme = useTheme();
+    const finalSeparator = separator || getSeparator(separatorType);
+    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const iconSize = sizeIconMap[size];
+    const effectiveMaxItems = isMobile ? mobileMaxItems : maxItems;
+    const shouldCollapse = items.length > effectiveMaxItems;
+    const { displayItems, collapsedItems } = collapseItems({
+      items,
+      effectiveMaxItems,
+      collapseBehavior
+    });
+    return /* @__PURE__ */ jsx(
+      StyledBreadcrumbs,
+      {
+        ref,
+        separator: finalSeparator,
+        maxItems: shouldCollapse ? void 0 : effectiveMaxItems,
+        size,
+        color,
+        visualStyle: variant,
+        elevation,
+        "aria-label": ariaLabel || "breadcrumb navigation",
+        role: "navigation",
+        "data-testid": dataTestId || "breadcrumbs",
+        ...props,
+        children: displayItems.map((item, index) => /* @__PURE__ */ jsx(
+          BreadcrumbEntry,
+          {
+            copy,
+            item,
+            index,
+            itemCount: displayItems.length,
+            collapsedItems,
+            collapseBehavior,
+            separator: finalSeparator,
+            showHomeIcon,
+            iconSize,
+            size,
+            variant,
+            dataTestId
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export {
+  Breadcrumbs
+};
+//# sourceMappingURL=chunk-Y3HMIUH6.js.map

package/dist/chunk-Y5WNNEND.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  Input
+} from "./chunk-IBGX6H4J.js";
+import {
+  FormControl,
+  FormLabel,
+  FormMessage
+} from "./chunk-IPPTOL53.js";
+
+// src/components/form/total-form/Fields/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextField({ name, label, type = "text", placeholder }) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  const testId = `total-form-field-${name}`;
+  return /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, error: Boolean(error), children: label }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: name,
+        name,
+        type,
+        placeholder,
+        value: values[name] ?? "",
+        error: Boolean(error),
+        "data-testid": testId,
+        onChange: (event) => setFieldValue(name, event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FormMessage, { error: true, dataTestId: `${testId}-message`, children: error })
+  ] });
+}
+
+export {
+  TextField
+};
+//# sourceMappingURL=chunk-Y5WNNEND.js.map

package/dist/chunk-YA4YH6WP.js

@@ -0,0 +1,80 @@
+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-empty.tsx
+import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
+import InboxRoundedIcon from "@mui/icons-material/InboxRounded";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DataViewsEmpty({
+  filtered,
+  onClearFilters,
+  emptyState,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const Icon = filtered ? FilterAltOffRoundedIcon : InboxRoundedIcon;
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": `${testIdPrefix}-empty${filtered ? "-filtered" : ""}`,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        textAlign: "center",
+        py: 8,
+        px: 2
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          default2,
+          {
+            sx: {
+              display: "inline-flex",
+              p: 2,
+              mb: 1.5,
+              borderRadius: "50%",
+              bgcolor: "action.hover",
+              color: "text.disabled"
+            },
+            children: /* @__PURE__ */ jsx(Icon, {})
+          }
+        ),
+        filtered ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { variant: "body", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: copy.grid.emptyFilteredTitle }) }),
+          /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { display: "block", mt: 0.5, mb: 2, color: "text.secondary", maxWidth: 380 }, children: copy.grid.emptyFilteredHint }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              color: "secondary",
+              onClick: onClearFilters,
+              dataTestId: `${testIdPrefix}-empty-clear`,
+              children: copy.grid.emptyFilteredAction
+            }
+          )
+        ] }) : (
+          // The page's own words for "nothing here yet" — it knows what the
+          // entity is and how one comes to exist; this component does not.
+          emptyState
+        )
+      ]
+    }
+  );
+}
+
+export {
+  DataViewsEmpty
+};
+//# sourceMappingURL=chunk-YA4YH6WP.js.map