@12-apps/ui 6.19.1 → 6.21.0

package/dist/chunk-PANMJFDS.js

@@ -0,0 +1,190 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-26Z7QWID.js";
+
+// src/components/data-display/DataViews/DataViewsBoard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_EXTRA_LABEL = "Sem etapa";
+function groupValueOf(row, groupBy) {
+  const value = row[groupBy];
+  return value === null || value === void 0 ? "" : String(value);
+}
+function groupRows(rows, board) {
+  const declared = new Map(board.groups.map((group) => [group.value, []]));
+  const extra = [];
+  for (const row of rows) {
+    const bucket = declared.get(groupValueOf(row, board.groupBy));
+    if (bucket) bucket.push(row);
+    else extra.push(row);
+  }
+  const columns = board.groups.map((group) => ({
+    key: group.value,
+    label: group.label,
+    tone: group.tone,
+    rows: declared.get(group.value) ?? []
+  }));
+  if (extra.length > 0) {
+    columns.push({ key: "__extra__", label: board.extraLabel ?? DEFAULT_EXTRA_LABEL, rows: extra });
+  }
+  return columns;
+}
+function sumOf(rows, sumBy) {
+  if (!sumBy) return null;
+  return rows.reduce((total, row) => {
+    const value = row[sumBy];
+    return typeof value === "number" && Number.isFinite(value) ? total + value : total;
+  }, 0);
+}
+function toneColor(tone) {
+  const known = ["primary", "secondary", "success", "warning", "error", "info"];
+  return tone && known.includes(tone) ? `${tone}.main` : "divider";
+}
+function BoardColumnHeader({
+  label,
+  count,
+  sum,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(default2, { component: "span", sx: { fontWeight: 600 }, children: label }) }),
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "span",
+          "data-testid": `${testId}-count`,
+          "aria-label": copy.board.countOnPage(label, count),
+          sx: { color: "text.secondary", whiteSpace: "nowrap" },
+          children: copy.board.onThisPage(count)
+        }
+      ) })
+    ] }),
+    sum !== null && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(
+      default2,
+      {
+        component: "span",
+        "data-testid": `${testId}-sum`,
+        "aria-label": copy.board.pageSum(sum),
+        sx: { color: "text.secondary" },
+        children: sum
+      }
+    ) })
+  ] });
+}
+function BoardColumn({
+  column,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  width,
+  testId
+}) {
+  const copy = useDataViewsCopy();
+  const total = sumOf(column.rows, board.sumBy);
+  return /* @__PURE__ */ jsxs(
+    default2,
+    {
+      "data-testid": testId,
+      sx: {
+        flex: `0 0 ${width}px`,
+        minWidth: width,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        borderTop: 3,
+        borderStyle: "solid",
+        borderColor: toneColor(column.tone),
+        borderRadius: 1,
+        bgcolor: "action.hover",
+        p: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          BoardColumnHeader,
+          {
+            label: column.label,
+            count: column.rows.length,
+            sum: total === null ? null : String(board.formatSum ? board.formatSum(total) : total),
+            testId
+          }
+        ),
+        column.rows.length === 0 ? /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", "data-testid": `${testId}-empty`, sx: { color: "text.disabled" }, children: copy.board.emptyColumn }) }) : column.rows.map((row) => {
+          const id = getRowId(row);
+          return /* @__PURE__ */ jsx(default2, { children: renderCard(row, {
+            selected: selectedIds.has(id),
+            onToggleSelect: () => onToggleId(id),
+            scale: cardScale
+          }) }, id);
+        })
+      ]
+    }
+  );
+}
+var BASE_COLUMN_WIDTH = 240;
+var MIN_COLUMN_WIDTH = 220;
+function DataViewsBoard({
+  rows,
+  board,
+  getRowId,
+  renderCard,
+  selectedIds,
+  onToggleId,
+  cardScale,
+  dataTestId
+}) {
+  const copy = useDataViewsCopy();
+  const columns = groupRows(rows, board);
+  const width = Math.max(MIN_COLUMN_WIDTH, Math.round(BASE_COLUMN_WIDTH * cardScale));
+  const testId = dataTestId ? `${dataTestId}-board` : "data-views-board";
+  return /* @__PURE__ */ jsxs(default2, { sx: { mt: 1.5 }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(default2, { component: "span", "data-testid": `${testId}-scale-note`, sx: { color: "text.secondary" }, children: copy.board.pageScopeNote }) }),
+    /* @__PURE__ */ jsx(
+      default2,
+      {
+        "data-testid": testId,
+        sx: {
+          mt: 1,
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 1.5,
+          // The BOARD scrolls, not the page: without `maxWidth` the flex row
+          // widens its parent and the whole document scrolls sideways.
+          maxWidth: "100%",
+          overflowX: "auto",
+          pb: 1
+        },
+        children: columns.map((column) => /* @__PURE__ */ jsx(
+          BoardColumn,
+          {
+            column,
+            board,
+            getRowId,
+            renderCard,
+            selectedIds,
+            onToggleId,
+            cardScale,
+            width,
+            testId: `${testId}-column-${column.key}`
+          },
+          column.key
+        ))
+      }
+    )
+  ] });
+}
+
+export {
+  groupRows,
+  DataViewsBoard
+};
+//# sourceMappingURL=chunk-PANMJFDS.js.map

package/dist/chunk-PF5HDFYY.js

@@ -0,0 +1,165 @@
+import {
+  Sheet
+} from "./chunk-MCRIT46W.js";
+import {
+  Dialog
+} from "./chunk-S5LE2ARG.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+import {
+  accentFor
+} from "./chunk-V5IOLAIS.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-PF5HDFYY.js.map

package/dist/chunk-PFLKPNBU.js

@@ -0,0 +1,82 @@
+import {
+  baseStyles,
+  effectStyles,
+  getColorFromTheme,
+  variantStyles
+} from "./chunk-6WIDZGXE.js";
+
+// src/components/form/Toggle/Toggle.tsx
+import ToggleButton from "@mui/material/ToggleButton/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledToggle = styled(ToggleButton, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient
+}) => {
+  const colorPalette = getColorFromTheme(theme, customColor);
+  return {
+    ...baseStyles(theme, colorPalette, customSize),
+    ...variantStyles(customVariant, colorPalette),
+    ...effectStyles(theme, colorPalette, { glass, gradient, glow })
+  };
+});
+var Toggle = forwardRef(
+  ({
+    variant = "default",
+    color = "primary",
+    size = "md",
+    icon,
+    glow = false,
+    glass = false,
+    gradient = false,
+    dataTestId,
+    children,
+    ...props
+  }, ref) => {
+    const testIds = {
+      container: dataTestId,
+      icon: dataTestId ? `${dataTestId}-icon` : void 0
+    };
+    return /* @__PURE__ */ jsxs(
+      StyledToggle,
+      {
+        ref,
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        "data-testid": testIds.container,
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { marginRight: children ? "8px" : "0" },
+              "data-testid": testIds.icon,
+              children: icon
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export {
+  Toggle
+};
+//# sourceMappingURL=chunk-PFLKPNBU.js.map

package/dist/chunk-PWXL3QQ6.js

@@ -0,0 +1,28 @@
+import {
+  DropdownMenu
+} from "./chunk-IDHZHOZW.js";
+import {
+  Button
+} from "./chunk-BNNSO4MC.js";
+
+// src/components/data-display/CardKit/CardKebab.tsx
+import { jsx } from "react/jsx-runtime";
+function CardKebab({
+  items,
+  menuLabel,
+  dataTestId
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", "aria-label": menuLabel, dataTestId, children: "\u22EE" })
+    }
+  );
+}
+
+export {
+  CardKebab
+};
+//# sourceMappingURL=chunk-PWXL3QQ6.js.map

package/dist/chunk-PXH24VIP.js

@@ -0,0 +1,215 @@
+import {
+  PaletteResults
+} from "./chunk-SQSFMZTF.js";
+import {
+  useCommandPalette
+} from "./chunk-SUZXPDUQ.js";
+import {
+  ShortcutChip
+} from "./chunk-5EIW2FZY.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)(() => ({
+  "& .MuiBackdrop-root": {
+    backgroundColor: alpha("#000", 0.6),
+    backdropFilter: "blur(4px)"
+  },
+  "& .MuiDialog-paper": {
+    position: "fixed",
+    top: "20%",
+    margin: 0,
+    maxHeight: "none",
+    background: "transparent",
+    boxShadow: "none",
+    overflow: "visible"
+  }
+}));
+var PaletteContainer = styled(Paper)(({ theme }) => ({
+  width: "100%",
+  maxWidth: 640,
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)",
+  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: "1.125rem",
+  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: 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 = "640px",
+  maxHeight = "400px",
+  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, maxHeight }, 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-PXH24VIP.js.map