@12-apps/ui 6.54.1 → 6.55.0

package/dist/chunk-5CFEXRQH.js

@@ -0,0 +1,277 @@
+import {
+  DataViewsBoard
+} from "./chunk-NHHWNA5W.js";
+import {
+  toGridExpansion
+} from "./chunk-O5UGAL2V.js";
+import {
+  SelectAllStrip
+} from "./chunk-CFAIMOFE.js";
+import {
+  ListCardGroup
+} from "./chunk-FQUIEXEY.js";
+import {
+  DENSITY_BOARD_SCALE,
+  DENSITY_ROW_PADDING,
+  cardScaleForZoom,
+  cardTargetWidthFor,
+  useDataViewsLayout
+} from "./chunk-MUIBNHJW.js";
+import {
+  cardGridTracks
+} from "./chunk-NQZNV3VR.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DataGrid
+} from "./chunk-FXZUVZON.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.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: sxRem(13) },
+        "& .MuiTableCell-head": { py: 0.5, fontSize: sxRem(12) }
+      },
+      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,
+          copy: copy.grid
+        }
+      )
+    }
+  );
+}
+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-5CFEXRQH.js.map

package/dist/chunk-5GXLWNQ7.js

@@ -0,0 +1,222 @@
+import {
+  PaletteResults
+} from "./chunk-2ARVNCVU.js";
+import {
+  useCommandPalette
+} from "./chunk-SUZXPDUQ.js";
+import {
+  ShortcutChip
+} from "./chunk-Z6MCTGIK.js";
+import {
+  scrim
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/CommandPalette/CommandPalette.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import EnterIcon from "@mui/icons-material/KeyboardReturn";
+import SearchIcon from "@mui/icons-material/Search";
+import Box from "@mui/material/Box/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import DialogContent from "@mui/material/DialogContent/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import InputBase from "@mui/material/InputBase/index.js";
+import Paper from "@mui/material/Paper/index.js";
+import Slide from "@mui/material/Slide/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, styled, useTheme } from "@mui/material/styles/index.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledDialog = styled(Dialog)(({ theme }) => ({
+  "& .MuiBackdrop-root": {
+    backgroundColor: scrim(theme, 0.6),
+    backdropFilter: `blur(${rem(theme, 4)})`
+  },
+  "& .MuiDialog-paper": {
+    position: "fixed",
+    top: "20%",
+    margin: 0,
+    maxHeight: "none",
+    background: "transparent",
+    boxShadow: "none",
+    overflow: "visible"
+  }
+}));
+var PaletteContainer = styled(Paper)(({ theme }) => ({
+  width: "100%",
+  maxWidth: rem(theme, 640),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: `blur(${rem(theme, 20)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 20)})`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+  borderRadius: theme.shape.borderRadius * 2,
+  overflow: "hidden",
+  boxShadow: theme.shadows[24]
+}));
+var SearchContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  padding: theme.spacing(2),
+  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+  background: alpha(theme.palette.background.default, 0.4)
+}));
+var SearchInput = styled(InputBase)(({ theme }) => ({
+  flex: 1,
+  fontSize: rem(theme, 18),
+  fontWeight: 400,
+  "& input": {
+    padding: theme.spacing(0, 1),
+    "&::placeholder": {
+      color: theme.palette.text.secondary,
+      opacity: 0.8
+    }
+  }
+}));
+var Transition = React.forwardRef(
+  function Transition2(props, ref) {
+    return /* @__PURE__ */ jsx(Slide, { direction: "down", ref, ...props });
+  }
+);
+var PaletteSearch = ({ inputRef, placeholder, value, dataTestId, onChange, onClose }) => /* @__PURE__ */ jsxs(SearchContainer, { children: [
+  /* @__PURE__ */ jsx(SearchIcon, { sx: { color: "text.secondary", mr: 1 } }),
+  /* @__PURE__ */ jsx(
+    SearchInput,
+    {
+      ref: inputRef,
+      placeholder,
+      value,
+      onChange,
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: "false",
+      inputProps: { "data-testid": `${dataTestId}-input` }
+    }
+  ),
+  /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClose, sx: { ml: 1 }, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+] });
+var PaletteFooter = ({
+  commandCount,
+  copy
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: 1,
+        borderTop: `1px solid ${alpha(theme.palette.divider, 0.12)}`,
+        background: alpha(theme.palette.background.default, 0.4)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 1 }, children: [
+          /* @__PURE__ */ jsx(
+            ShortcutChip,
+            {
+              icon: /* @__PURE__ */ jsx(EnterIcon, { sx: { fontSize: sxRem(12) } }),
+              label: copy.execute,
+              size: "small"
+            }
+          ),
+          /* @__PURE__ */ jsx(ShortcutChip, { label: copy.navigate, size: "small" }),
+          /* @__PURE__ */ jsx(ShortcutChip, { label: copy.close, size: "small" })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+          commandCount,
+          " commands"
+        ] })
+      ]
+    }
+  );
+};
+var CommandPalette = ({
+  copy,
+  open,
+  onClose,
+  commands,
+  placeholder = "Type a command or search...",
+  width,
+  maxHeight,
+  showRecent = true,
+  recentCommands = [],
+  onCommandExecute,
+  dataTestId = "command-palette"
+}) => {
+  const {
+    searchQuery,
+    setSearchQuery,
+    selectedIndex,
+    setSelectedIndex,
+    searchInputRef,
+    listRef,
+    filteredCommands,
+    groupedCommands,
+    executeCommand,
+    recentCommandIds
+  } = useCommandPalette({
+    open,
+    commands,
+    showRecent,
+    recentCommands,
+    onCommandExecute,
+    onClose
+  });
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
+  return /* @__PURE__ */ jsx(
+    StyledDialog,
+    {
+      open,
+      onClose,
+      TransitionComponent: Transition,
+      maxWidth: false,
+      fullWidth: true,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsx(DialogContent, { sx: { overflow: "visible", p: 0 }, children: /* @__PURE__ */ jsxs(PaletteContainer, { elevation: 24, sx: { width: width ?? sxRem(640), maxHeight: maxHeight ?? sxRem(400) }, children: [
+        /* @__PURE__ */ jsx(
+          PaletteSearch,
+          {
+            inputRef: searchInputRef,
+            placeholder,
+            value: searchQuery,
+            dataTestId,
+            onChange: handleSearchChange,
+            onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PaletteResults,
+          {
+            copy,
+            listRef,
+            dataTestId,
+            searchQuery,
+            showRecent,
+            commands,
+            recentCommandIds,
+            filteredCommands,
+            groupedCommands,
+            selectedIndex,
+            onSelect: setSelectedIndex,
+            onExecute: executeCommand
+          }
+        ),
+        /* @__PURE__ */ jsx(PaletteFooter, { copy, commandCount: filteredCommands.length })
+      ] }) })
+    }
+  );
+};
+var CommandPalette_default = CommandPalette;
+
+export {
+  CommandPalette,
+  CommandPalette_default
+};
+//# sourceMappingURL=chunk-5GXLWNQ7.js.map

package/dist/chunk-5KGABAQB.js

@@ -0,0 +1,76 @@
+import {
+  UploadDropzone,
+  UploadFeedback,
+  UploadTrigger
+} from "./chunk-A5UYPUS2.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-5KGABAQB.js.map