@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-JG6ASCPE.js

@@ -0,0 +1,41 @@
+import {
+  useFormContext
+} from "./chunk-4XK6JQ4D.js";
+import {
+  CategorySelect
+} from "./chunk-UDSVB7VW.js";
+
+// src/components/form/total-form/Fields/CategoryField.tsx
+import { jsx } from "react/jsx-runtime";
+function CategoryField({
+  name,
+  options,
+  label,
+  placeholder,
+  allowParentSelection = true,
+  copy
+}) {
+  const { values, errors, setFieldValue } = useFormContext();
+  const error = errors[name];
+  return /* @__PURE__ */ jsx(
+    CategorySelect,
+    {
+      copy,
+      mode: "single",
+      fullWidth: true,
+      label,
+      placeholder,
+      options,
+      allowParentSelection,
+      value: values[name] ? values[name] : null,
+      error,
+      onChange: (next) => setFieldValue(name, next ?? ""),
+      dataTestId: `total-form-field-${name}`
+    }
+  );
+}
+
+export {
+  CategoryField
+};
+//# sourceMappingURL=chunk-JG6ASCPE.js.map

package/dist/chunk-JG6ASCPE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/total-form/Fields/CategoryField.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../../copy\";\nimport React from 'react';\n\nimport { CategorySelect } from '../../CategorySelect';\nimport type { CategorySelectOption } from '../../CategorySelect';\nimport { useFormContext } from '../FormContext';\n\n/** Props for the `total-form` {@link CategoryField}. */\nexport interface CategoryFieldProps {\n  /** The picker\\'s words. REQUIRED — this package ships no default copy. */\n  copy: CategorySelectCopy;\n  /** Field name; also the key into the form's values/errors. */\n  name: string;\n  /** The categories to choose from, flat, each carrying its `parentId`. */\n  options: CategorySelectOption[];\n  /** Optional visible label rendered above the control. */\n  label?: string;\n  /** Placeholder shown while nothing is chosen. */\n  placeholder?: string;\n  /** Lets a top-level category be chosen in its own right (default: `true`). */\n  allowParentSelection?: boolean;\n}\n\n/**\n * Category picker bound to {@link useFormContext}.\n *\n * The sibling {@link SelectField} flattens a category tree into one list, which\n * is the thing the hierarchical picker exists to stop. Use this wherever the\n * field's options nest.\n *\n * Form values are strings, so \"nothing chosen\" travels as `\"\"` — mapped to and\n * from the control's `null` here rather than making every caller do it.\n */\nexport function CategoryField({\n  name,\n  options,\n  label,\n  placeholder,\n  allowParentSelection = true,\n  copy,\n}: CategoryFieldProps): React.ReactElement {\n  const { values, errors, setFieldValue } = useFormContext();\n  const error = errors[name];\n\n  return (\n    <CategorySelect\n      copy={copy}\n      mode=\"single\"\n      fullWidth\n      label={label}\n      placeholder={placeholder}\n      options={options}\n      allowParentSelection={allowParentSelection}\n      value={values[name] ? values[name] : null}\n      error={error}\n      onChange={(next) => setFieldValue(name, next ?? '')}\n      dataTestId={`total-form-field-${name}`}\n    />\n  );\n}\n"],"mappings":";;;;;;;;AA+CI;AAZG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB;AACF,GAA2C;AACzC,QAAM,EAAE,QAAQ,QAAQ,cAAc,IAAI,eAAe;AACzD,QAAM,QAAQ,OAAO,IAAI;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO,OAAO,IAAI,IAAI,OAAO,IAAI,IAAI;AAAA,MACrC;AAAA,MACA,UAAU,CAAC,SAAS,cAAc,MAAM,QAAQ,EAAE;AAAA,MAClD,YAAY,oBAAoB,IAAI;AAAA;AAAA,EACtC;AAEJ;","names":[]}

package/dist/chunk-JGPXMJ3X.js

@@ -0,0 +1,266 @@
+import {
+  CARD_RADIUS,
+  cardSurfaceStyles,
+  isActionable,
+  isSelectable,
+  slotTestIds
+} from "./chunk-XA7HTVZO.js";
+import {
+  DragHandle,
+  useDragItem
+} from "./chunk-4HJOBQ7X.js";
+import {
+  CARD_ASPECT_RATIOS
+} from "./chunk-C6ATAHBX.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Checkbox
+} from "./chunk-YPBWZBWV.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+import {
+  Card
+} from "./chunk-SIKI6I7S.js";
+import {
+  Text
+} from "./chunk-R52HJAYO.js";
+
+// src/components/data-display/DataViews/base-card.tsx
+import { useTheme } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function 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_PX = 42;
+function contentGaps(opts) {
+  const { hasMedia, hasBody, overlays, pad } = opts;
+  const gap = pad * 0.5;
+  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - 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(Box, { sx: { position: "absolute", top: 4, left: 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(
+      Box,
+      {
+        sx: { position: "absolute", top: 4, right: 4, zIndex: 2 },
+        onClick: (event) => event.stopPropagation(),
+        children: menu
+      }
+    )
+  ] });
+}
+function CardMedia({ image, imageFallback }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      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(
+    Box,
+    {
+      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
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: { mt: topGap, minWidth: 0 }, children: [
+    title != null && /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "heading",
+        size: "sm",
+        weight: "bold",
+        as: "p",
+        style: {
+          lineHeight: 1.15,
+          fontSize: "0.95rem",
+          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(Box, { sx: { position: "absolute", bottom: 4, left: 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-JGPXMJ3X.js.map

package/dist/chunk-JGPXMJ3X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/base-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode } from \"react\";\n\nimport { useTheme, type CSSObject } from \"@mui/material\";\n\n/** See the note on `CardSx` in `card-surface` — these fragments get merged. */\ntype CardSx = CSSObject | Record<string, unknown>;\n\nimport { Checkbox } from \"../../form/Checkbox\";\nimport { Card } from \"../../layout/Card\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport { DragHandle, useDragItem } from \"./data-views-drag\";\nimport {\n  CARD_RADIUS,\n  cardSurfaceStyles,\n  isActionable,\n  isSelectable,\n  slotTestIds,\n  type CardSurfaceProps,\n} from \"./card-surface\";\nimport { CARD_ASPECT_RATIOS, type CardAspectRatio } from \"./data-views-types\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\nexport interface BaseCardProps extends CardSurfaceProps {\n  /** Extra body content below the caption (chips, meta). Optional. */\n  children?: ReactNode;\n  /** Tile proportion. Defaults to \"4:3\". */\n  aspectRatio?: CardAspectRatio;\n  /**\n   * Size multiplier from the zoom slider (1 = base).\n   *\n   * Applied as `zoom`, so the whole card grows together — padding, typography,\n   * the checkbox, the menu and the media alike — in step with its width, which\n   * the grid sizes to base × scale. A card at scale 2 renders at ~twice the\n   * size, its proportion preserved by `aspectRatio`. Default 1.\n   */\n  scale?: number;\n  /** Display-image node (e.g. an `<img>` / thumbnail) filling the media region. */\n  image?: ReactNode;\n  /** Shown centered in the media region when there is no `image` (icon/initial). */\n  imageFallback?: ReactNode;\n  /** First-class title, rendered in the caption. */\n  title?: ReactNode;\n  /** Secondary caption line under the title. */\n  subtitle?: ReactNode;\n  /** The 3-dots menu (or any action node) pinned to the top-right corner. */\n  menu?: ReactNode;\n  /** Toggle this card's selection. Omit to hide the checkbox (non-selectable). */\n  onToggleSelect?: () => void;\n  /**\n   * This card's id for drag purposes.\n   *\n   * Draggable ONLY inside a {@link DragContainerProvider} — see\n   * `data-views-drag`. On the board that is how a card moves between columns;\n   * in a grade it is how the operator reorders. Outside a container this is\n   * inert and no grip appears.\n   */\n  dragId?: string | number;\n  checkboxTestId?: string;\n}\n\n/**\n * The outlined-tile style: fixed ratio, scaled padding, selected/dimmed states.\n *\n * See the note on the row: `zoom` scales EVERY length in the subtree, including\n * the MUI internals (checkbox, chip, icon button) that no prop of ours reaches.\n * The grid still sizes the track to BASE_CARD_WIDTH x scale, so the tile fills\n * its track physically and lays its contents out in the unscaled box behind it\n * — which is what \"the whole card grows together\" was always meant to mean.\n */\nfunction cardSx(opts: {\n  aspectRatio: CardAspectRatio;\n  pad: number;\n  scale: number;\n  interactive: boolean;\n  draggable: boolean;\n}): CardSx {\n  const { aspectRatio, pad, scale, interactive, draggable } = opts;\n  return {\n    position: \"relative\",\n    zoom: scale,\n    aspectRatio: String(CARD_ASPECT_RATIOS[aspectRatio]),\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflow: \"hidden\",\n    p: pad,\n    cursor: draggable ? \"grab\" : interactive ? \"pointer\" : undefined,\n    ...(draggable ? { touchAction: \"none\", \"&:active\": { cursor: \"grabbing\" } } : {}),\n  };\n}\n\n/**\n * How far the first block in flow must start below the tile's top edge to clear\n * the absolute overlays: their 4px inset plus the checkbox's 38px hit area (20px\n * glyph in MUI's 9px padding), which is the taller of the two corners.\n */\nconst OVERLAY_BAND_PX = 42;\n\n/**\n * The top margin each stacked slot needs, in MUI spacing units.\n *\n * The overlays are absolute, so they cost the flow nothing — over MEDIA that is\n * the whole point (a checkbox on a thumbnail reads as a checkbox on a\n * thumbnail). Over TEXT it is a collision: a title-only tile started its first\n * line at the padding edge, directly under the checkbox, and rendered\n * `Selecionada` with the box sitting on the `Se`. So when nothing pictorial is\n * there to absorb them, whichever block comes first clears the band instead.\n */\nfunction contentGaps(opts: {\n  hasMedia: boolean;\n  hasBody: boolean;\n  overlays: boolean;\n  pad: number;\n}): { body: number; caption: number } {\n  const { hasMedia, hasBody, overlays, pad } = opts;\n  const gap = pad * 0.5;\n  const clear = !hasMedia && overlays ? Math.max(0, OVERLAY_BAND_PX / 8 - pad) : 0;\n  return { body: hasMedia ? gap : clear, caption: hasMedia || hasBody ? gap : clear };\n}\n\n/** The top-corner overlays: the select checkbox (left) and the menu slot (right). */\nfunction CardOverlays({\n  selected,\n  onToggleSelect,\n  checkboxTestId,\n  menu,\n}: Pick<BaseCardProps, \"selected\" | \"onToggleSelect\" | \"checkboxTestId\" | \"menu\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      {onToggleSelect && (\n        <Box sx={{ position: \"absolute\", top: 4, left: 4, zIndex: 2 }}>\n          <Checkbox\n            checked={selected}\n            onChange={() => onToggleSelect()}\n            // Selecting must never trigger the card's own click (open/edit).\n            onClick={(event) => event.stopPropagation()}\n            size=\"small\"\n            data-testid={checkboxTestId}\n            aria-label={copy.selection.selectRow}\n          />\n        </Box>\n      )}\n      {menu && (\n        <Box\n          sx={{ position: \"absolute\", top: 4, right: 4, zIndex: 2 }}\n          // Acting on the menu must never trigger the card's own click.\n          onClick={(event) => event.stopPropagation()}\n        >\n          {menu}\n        </Box>\n      )}\n    </>\n  );\n}\n\n/**\n * Media region: fills the tile above the caption; centers `imageFallback` when\n * there is no image so title-only entities still fill the ratio box and mixed\n * grids stay aligned.\n */\nfunction CardMedia({ image, imageFallback }: Pick<BaseCardProps, \"image\" | \"imageFallback\">): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: 1,\n        minHeight: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        overflow: \"hidden\",\n        borderRadius: 1,\n        \"& img\": { width: \"100%\", height: \"100%\", objectFit: \"cover\" },\n      }}\n    >\n      {image ?? imageFallback}\n    </Box>\n  );\n}\n\n/** The body slot (chips/meta); fills remaining space when there is no media. */\nfunction CardBodyContent({\n  children,\n  fill,\n  topGap,\n}: {\n  children: ReactNode;\n  fill: boolean;\n  topGap: number;\n}): React.JSX.Element {\n  return (\n    <Box\n      sx={{\n        flex: fill ? 1 : \"none\",\n        minHeight: 0,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: 0.75,\n        mt: topGap,\n        overflow: \"hidden\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/** The title/subtitle caption. */\nfunction CardCaption({\n  title,\n  subtitle,\n  topGap,\n}: {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  topGap: number;\n}): React.JSX.Element {\n  return (\n    <Box sx={{ mt: topGap, minWidth: 0 }}>\n      {title != null && (\n        <Text\n          variant=\"heading\"\n          size=\"sm\"\n          weight=\"bold\"\n          as=\"p\"\n          style={{\n            lineHeight: 1.15,\n            fontSize: \"0.95rem\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {title}\n        </Text>\n      )}\n      {subtitle != null && (\n        <Text variant=\"caption\" size=\"xs\" color=\"secondary\" as=\"p\">\n          {subtitle}\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** The stacked media / body / caption slots inside the tile (below the overlays). */\nfunction CardContents({\n  children,\n  image,\n  imageFallback,\n  title,\n  subtitle,\n  overlays,\n  pad,\n}: Pick<BaseCardProps, \"children\" | \"image\" | \"imageFallback\" | \"title\" | \"subtitle\"> & {\n  overlays: boolean;\n  pad: number;\n}): React.JSX.Element {\n  const hasMedia = image != null || imageFallback != null;\n  const hasBody = children != null;\n  const hasCaption = title != null || subtitle != null;\n  const top = contentGaps({ hasMedia, hasBody, overlays, pad });\n  return (\n    <>\n      {hasMedia && <CardMedia image={image} imageFallback={imageFallback} />}\n      {hasBody && (\n        <CardBodyContent fill={!hasMedia} topGap={top.body}>\n          {children}\n        </CardBodyContent>\n      )}\n      {hasCaption && <CardCaption title={title} subtitle={subtitle} topGap={top.caption} />}\n    </>\n  );\n}\n\n/**\n * Reusable selectable card shell for the DataViews \"Grade\" (cards) layout, and\n * the ONLY card component that lives in `@12-apps/ui` — every domain \"kind card\"\n * (product, mesa, role, …) lives in the app and composes this envelope. See the\n * per-slot helpers above; this shell just assembles them within a fixed-ratio\n * tile. Reads no context, so it renders standalone as well as inside the grid.\n */\n/**\n * Everything the tile derives from its props before it can render — pulled out\n * so `BaseCard` itself stays inside the complexity budget.\n */\nfunction useCardShell(props: BaseCardProps) {\n  const actionable = isActionable(props.state);\n  return {\n    selectable: isSelectable(props),\n    actionable,\n    theme: useTheme(),\n    slot: slotTestIds(props.testId),\n    scale: props.scale ?? 1,\n    // The card's own veto over the container's decision — see `CardSurfaceProps`.\n    drag: useDragItem(props.draggable === false || !actionable ? undefined : props.dragId),\n  };\n}\n\nexport function BaseCard(props: BaseCardProps): React.JSX.Element {\n  const { aspectRatio = \"4:3\", selected = false } = props;\n  const { menu, onToggleSelect, onClick } = props;\n  const { selectable, actionable, theme, slot, scale, drag } = useCardShell(props);\n  const dataTestId = props.testId;\n  const checkboxTestId = slot(\"checkbox\");\n  const pad = 1.5;\n\n  return (\n    <Card\n      variant=\"outlined\"\n      onClick={onClick}\n      dataTestId={dataTestId}\n      className={props.className}\n      aria-label={props[\"aria-label\"]}\n      aria-disabled={actionable ? undefined : true}\n      {...drag.itemProps}\n      // A PLAIN OBJECT, not a function. `Card` merges by spreading\n      // (`sx={{ ...defaults, ...sx }}`), and spreading a function yields\n      // nothing at all — the styles vanish silently, which is exactly how the\n      // first version of this shipped with no variants and no effects.\n      sx={{\n        // The same corner the row uses: a Grade and a Lista of the same records\n        // sit beside each other, and a tile that rounds harder than the row\n        // reads as a different component.\n        borderRadius: CARD_RADIUS,\n        // The shared half — variant, colour, selection, effects — identical to\n        // the one BaseListCard uses, so a Grade and a Lista of the same records\n        // are dressed by one set of rules.\n        ...cardSurfaceStyles(\n          {\n            ...props,\n            selectable,\n            shape: \"tile\",\n            // A card mid-drag is a ghost of itself; the drop target is what the\n            // eye should be on.\n            state: drag.dragging ? \"disabled\" : props.state,\n          },\n          theme,\n        ),\n        // …and the tile's own geometry on top.\n        ...cardSx({\n          aspectRatio, pad, scale,\n          interactive: onClick != null,\n          draggable: drag.draggable && drag.handleProps === undefined,\n        }),\n      }}\n    >\n      {/* Bottom-left, opposite the menu and clear of the checkbox — a grip in\n          the same corner as a control that toggles selection means every drag\n          starts with a near-miss on it. */}\n      {drag.draggable && (\n        <Box sx={{ position: \"absolute\", bottom: 4, left: 4, zIndex: 2 }}>\n          <DragHandle\n            handleProps={drag.handleProps}\n            gated={drag.handleProps !== undefined}\n            testId={slot(\"drag\")}\n          />\n        </Box>\n      )}\n      <CardOverlays\n        selected={selected}\n        onToggleSelect={selectable ? onToggleSelect ?? (() => {}) : undefined}\n        checkboxTestId={checkboxTestId}\n        menu={menu}\n      />\n      <CardContents\n        image={props.image}\n        imageFallback={props.imageFallback}\n        title={props.title}\n        subtitle={props.subtitle}\n        overlays={selectable || menu != null}\n        pad={pad}\n      >\n        {props.children}\n      </CardContents>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-JKB3LODO.js

@@ -0,0 +1,179 @@
+// src/components/layout/ContentToolbar/SortByDropdown.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { Box, Button, Divider, ListSubheader, Menu, MenuItem, Typography } from "@mui/material";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function findActiveField(fields, activeField) {
+  return fields?.find((field) => field.value === activeField);
+}
+function findActiveOrder(fieldDef, activeOrder) {
+  const options = fieldDef?.orderOptions;
+  if (!options?.length) return void 0;
+  return options.find((option) => option.value === activeOrder) ?? options[0];
+}
+function resolveArrowDirection(option, indexInList) {
+  if (option?.arrowDirection) return option.arrowDirection;
+  return indexInList <= 0 ? "down" : "up";
+}
+function buildTriggerLabel(fieldDef, orderOption) {
+  if (!fieldDef) return "";
+  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;
+  if (fieldDef.triggerLabelStyle === "range" && fieldDef.orderOptions?.length === 2) {
+    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);
+    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;
+  }
+  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;
+}
+function resolveTriggerParts(fieldDef, orderOption, orderOptions) {
+  const useRangeLabel = fieldDef?.triggerLabelStyle === "range" && orderOptions.length === 2;
+  const orderIndex = orderOptions.findIndex((option) => option.value === orderOption?.value);
+  const arrow = resolveArrowDirection(orderOption, orderIndex);
+  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === "down" ? "\u2193" : "\u2191"}` : "";
+  const full = buildTriggerLabel(fieldDef, orderOption);
+  return { full, short: fieldDef?.label ?? full, arrowSuffix };
+}
+var sectionLabelSx = { px: 1, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 };
+function SortCheck({ checked }) {
+  return /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "flex", width: 16, flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx(CheckIcon, { sx: { fontSize: 14 } }) : null });
+}
+function SortRow({
+  value,
+  label,
+  checked,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(MenuItem, { "data-testid": `sort-${value}-option`, onClick: onSelect, sx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx(SortCheck, { checked }),
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: label })
+  ] });
+}
+function SortMenu({
+  anchorEl,
+  open,
+  close,
+  orderOptions,
+  activeOrderValue,
+  onOrderSelect,
+  fields,
+  activeField,
+  onFieldSelect,
+  orderHeading,
+  sortHeading
+}) {
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      anchorEl,
+      open,
+      onClose: close,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      slotProps: { paper: { sx: { minWidth: 180 } } },
+      children: [
+        orderOptions.length > 0 && [
+          /* @__PURE__ */ jsx(ListSubheader, { sx: sectionLabelSx, children: orderHeading }, "order-label"),
+          ...orderOptions.map((option) => /* @__PURE__ */ jsx(
+            SortRow,
+            {
+              value: option.value,
+              label: option.label,
+              checked: activeOrderValue === option.value,
+              onSelect: () => onOrderSelect(option.value)
+            },
+            `order-${option.value}`
+          )),
+          /* @__PURE__ */ jsx(Divider, {}, "order-divider")
+        ],
+        /* @__PURE__ */ jsx(ListSubheader, { sx: sectionLabelSx, children: sortHeading }),
+        fields.map((field) => /* @__PURE__ */ jsx(
+          SortRow,
+          {
+            value: field.value,
+            label: field.label,
+            checked: activeField === field.value,
+            onSelect: () => onFieldSelect(field.value)
+          },
+          field.value
+        ))
+      ]
+    }
+  );
+}
+function SortByDropdown({
+  fields,
+  activeField,
+  activeOrder,
+  onFieldChange,
+  onOrderChange,
+  orderHeading,
+  sortHeading,
+  triggerPrefix,
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  const safeFields = fields ?? [];
+  const activeFieldDef = findActiveField(fields, activeField);
+  const orderOptions = activeFieldDef?.orderOptions ?? [];
+  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);
+  const trigger = resolveTriggerParts(activeFieldDef, activeOrderOption, orderOptions);
+  function handleFieldChange(field) {
+    onFieldChange(field);
+    close();
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "span",
+        sx: { display: { xs: "none", md: "inline" }, color: "text.secondary", fontSize: "0.875rem" },
+        children: triggerPrefix
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: trigger.full }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: { xs: "inline", md: "none" } }, children: trigger.short }),
+          trigger.arrowSuffix,
+          /* @__PURE__ */ jsx(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SortMenu,
+      {
+        orderHeading,
+        sortHeading,
+        anchorEl,
+        open,
+        close,
+        orderOptions,
+        activeOrderValue: activeOrderOption?.value,
+        onOrderSelect: (value) => {
+          onOrderChange?.(value);
+          close();
+        },
+        fields: safeFields,
+        activeField,
+        onFieldSelect: handleFieldChange
+      }
+    )
+  ] });
+}
+
+export {
+  SortByDropdown
+};
+//# sourceMappingURL=chunk-JKB3LODO.js.map

package/dist/chunk-JKB3LODO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ContentToolbar/SortByDropdown.tsx"],"sourcesContent":["'use client';\n\nimport CheckIcon from '@mui/icons-material/Check';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport { Box, Button, Divider, ListSubheader, Menu, MenuItem, Typography } from '@mui/material';\nimport React, { useState } from 'react';\n\nimport type {\n  SortByDropdownProps,\n  SortFieldDefinition,\n  SortOrderOption,\n} from './ContentToolbar.types';\n\nfunction findActiveField<TField extends string>(\n  fields: SortFieldDefinition<TField>[] | undefined,\n  activeField: TField,\n): SortFieldDefinition<TField> | undefined {\n  return fields?.find((field) => field.value === activeField);\n}\n\nfunction findActiveOrder(\n  fieldDef: SortFieldDefinition | undefined,\n  activeOrder: string | undefined,\n): SortOrderOption | undefined {\n  const options = fieldDef?.orderOptions;\n  if (!options?.length) return undefined;\n  return options.find((option) => option.value === activeOrder) ?? options[0];\n}\n\nfunction resolveArrowDirection(option: SortOrderOption | undefined, indexInList: number): 'up' | 'down' {\n  if (option?.arrowDirection) return option.arrowDirection;\n  // A missing (<0) or first index sorts \"down\"; any later option sorts \"up\".\n  return indexInList <= 0 ? 'down' : 'up';\n}\n\nfunction buildTriggerLabel(\n  fieldDef: SortFieldDefinition | undefined,\n  orderOption: SortOrderOption | undefined,\n): string {\n  if (!fieldDef) return '';\n  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;\n  if (fieldDef.triggerLabelStyle === 'range' && fieldDef.orderOptions?.length === 2) {\n    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);\n    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;\n  }\n  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;\n}\n\n/** The trigger's full label (md+), short label (mobile), and direction arrow. */\nfunction resolveTriggerParts(\n  fieldDef: SortFieldDefinition | undefined,\n  orderOption: SortOrderOption | undefined,\n  orderOptions: SortOrderOption[],\n): { full: string; short: string; arrowSuffix: string } {\n  const useRangeLabel = fieldDef?.triggerLabelStyle === 'range' && orderOptions.length === 2;\n  const orderIndex = orderOptions.findIndex((option) => option.value === orderOption?.value);\n  const arrow = resolveArrowDirection(orderOption, orderIndex);\n  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === 'down' ? '↓' : '↑'}` : '';\n  const full = buildTriggerLabel(fieldDef, orderOption);\n  return { full, short: fieldDef?.label ?? full, arrowSuffix };\n}\n\nconst sectionLabelSx = { px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 } as const;\n\n/** A fixed-width check slot (empty when unchecked) so labels align. */\nfunction SortCheck({ checked }: { checked: boolean }): React.JSX.Element {\n  return (\n    <Box component=\"span\" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>\n      {checked ? <CheckIcon sx={{ fontSize: 14 }} /> : null}\n    </Box>\n  );\n}\n\n/** One `id`/`label` menu row with a leading check + testid. */\nfunction SortRow({\n  value,\n  label,\n  checked,\n  onSelect,\n}: {\n  value: string;\n  label: string;\n  checked: boolean;\n  onSelect: () => void;\n}): React.JSX.Element {\n  return (\n    <MenuItem data-testid={`sort-${value}-option`} onClick={onSelect} sx={{ gap: 1 }}>\n      <SortCheck checked={checked} />\n      <Box component=\"span\" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>\n        {label}\n      </Box>\n    </MenuItem>\n  );\n}\n\ninterface SortMenuProps<TField extends string> {\n  anchorEl: HTMLElement | null;\n  open: boolean;\n  close: () => void;\n  orderOptions: SortOrderOption[];\n  activeOrderValue: string | undefined;\n  onOrderSelect: (value: string) => void;\n  fields: SortFieldDefinition<TField>[];\n  activeField: TField;\n  onFieldSelect: (field: TField) => void;\n  orderHeading: string;\n  sortHeading: string;\n}\n\n/** The Order + Sort sections of the dropdown menu. */\nfunction SortMenu<TField extends string>({\n  anchorEl,\n  open,\n  close,\n  orderOptions,\n  activeOrderValue,\n  onOrderSelect,\n  fields,\n  activeField,\n  onFieldSelect,\n  orderHeading,\n  sortHeading,\n}: SortMenuProps<TField>): React.JSX.Element {\n  return (\n    <Menu\n      anchorEl={anchorEl}\n      open={open}\n      onClose={close}\n      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n      transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n      slotProps={{ paper: { sx: { minWidth: 180 } } }}\n    >\n      {orderOptions.length > 0 && [\n        <ListSubheader key=\"order-label\" sx={sectionLabelSx}>\n          {orderHeading}\n        </ListSubheader>,\n        ...orderOptions.map((option) => (\n          <SortRow\n            key={`order-${option.value}`}\n            value={option.value}\n            label={option.label}\n            checked={activeOrderValue === option.value}\n            onSelect={() => onOrderSelect(option.value)}\n          />\n        )),\n        <Divider key=\"order-divider\" />,\n      ]}\n      <ListSubheader sx={sectionLabelSx}>{sortHeading}</ListSubheader>\n      {fields.map((field) => (\n        <SortRow\n          key={field.value}\n          value={field.value}\n          label={field.label}\n          checked={activeField === field.value}\n          onSelect={() => onFieldSelect(field.value)}\n        />\n      ))}\n    </Menu>\n  );\n}\n\n/**\n * Generic \"Sort By\" dropdown: a \"Sort By:\" label + a trigger whose menu has an\n * **Order** section (direction within the active field) and a **Sort** section\n * (which field). The Order section is hidden when the field defines no order\n * options. Faithful MUI port of the reference control.\n */\nexport function SortByDropdown<TField extends string = string>({\n  fields,\n  activeField,\n  activeOrder,\n  onFieldChange,\n  onOrderChange,\n  orderHeading,\n  sortHeading,\n  triggerPrefix,\n  'data-testid': testId,\n}: SortByDropdownProps<TField>): React.JSX.Element {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const open = Boolean(anchorEl);\n  const close = (): void => setAnchorEl(null);\n\n  const safeFields = fields ?? [];\n  const activeFieldDef = findActiveField(fields, activeField);\n  const orderOptions = activeFieldDef?.orderOptions ?? [];\n  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);\n  const trigger = resolveTriggerParts(activeFieldDef, activeOrderOption, orderOptions);\n\n  function handleFieldChange(field: TField): void {\n    // Switch field in ONE callback. Previously this also fired `onOrderChange`\n    // to reset the order, but a consumer whose `onOrderChange` derives the field\n    // from its own (now-stale) prop would re-apply the OLD field — silently\n    // reverting the field change (e.g. picking \"E-mail\" snapped back to \"Nome\").\n    // The field-change consumer owns the resulting order.\n    onFieldChange(field);\n    close();\n  }\n\n  return (\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>\n      <Typography\n        component=\"span\"\n        sx={{ display: { xs: 'none', md: 'inline' }, color: 'text.secondary', fontSize: '0.875rem' }}\n      >\n        {triggerPrefix}\n      </Typography>\n      <Button\n        variant=\"text\"\n        size=\"small\"\n        color=\"inherit\"\n        data-testid={testId}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n        onClick={(event) => setAnchorEl(event.currentTarget)}\n        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}\n      >\n        {/* Full \"Nome (crescente)\" on md+; just the field name on mobile — the\n            arrow already conveys the direction, so the parenthetical is dropped. */}\n        <Box component=\"span\" sx={{ display: { xs: 'none', md: 'inline' } }}>\n          {trigger.full}\n        </Box>\n        <Box component=\"span\" sx={{ display: { xs: 'inline', md: 'none' } }}>\n          {trigger.short}\n        </Box>\n        {trigger.arrowSuffix}\n        <ChevronDownIcon sx={{ fontSize: 14 }} />\n      </Button>\n      <SortMenu\n        orderHeading={orderHeading}\n        sortHeading={sortHeading}\n        anchorEl={anchorEl}\n        open={open}\n        close={close}\n        orderOptions={orderOptions}\n        activeOrderValue={activeOrderOption?.value}\n        onOrderSelect={(value) => {\n          onOrderChange?.(value);\n          close();\n        }}\n        fields={safeFields}\n        activeField={activeField}\n        onFieldSelect={handleFieldChange}\n      />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-JOEISLPP.js

@@ -0,0 +1,99 @@
+// src/components/data-display/HoverCard/HoverCard.content.tsx
+import { Avatar, Box, CircularProgress, Typography } from "@mui/material";
+import { styled } from "@mui/material";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LoadingContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: 80,
+  color: theme.palette.text.secondary
+}));
+var testId = (base, suffix, fallback) => base ? `${base}-${suffix}` : fallback;
+var CardAvatar = ({ avatar }) => {
+  if (!avatar) return null;
+  if (typeof avatar === "string") {
+    return /* @__PURE__ */ jsx(Avatar, { src: avatar, sx: { width: 48, height: 48, mr: 2 } });
+  }
+  const element = avatar;
+  return React.cloneElement(element, {
+    sx: { width: 48, height: 48, mr: 2, ...element.props.sx }
+  });
+};
+var Title = ({ title, variant, sx, dataTestId }) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: variant === "minimal" ? "body2" : "subtitle1",
+    sx: { fontWeight: 600, ...sx },
+    "data-testid": testId(dataTestId, "title", "hover-card-title"),
+    children: title
+  }
+);
+var Description = ({ description, sx, dataTestId }) => /* @__PURE__ */ jsx(
+  Typography,
+  {
+    variant: "body2",
+    color: "text.secondary",
+    sx,
+    "data-testid": testId(dataTestId, "description", "hover-card-description"),
+    children: description
+  }
+);
+var DetailedContent = ({
+  title,
+  description,
+  avatar,
+  children,
+  dataTestId
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  avatar && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 2 }, children: [
+    /* @__PURE__ */ jsx(CardAvatar, { avatar }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      title && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h6",
+          sx: { fontWeight: 600, mb: 0.5 },
+          "data-testid": testId(dataTestId, "title", "hover-card-title"),
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(Description, { description, dataTestId })
+    ] })
+  ] }),
+  !avatar && title && /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      sx: { fontWeight: 600, mb: 1 },
+      "data-testid": testId(dataTestId, "title", "hover-card-title"),
+      children: title
+    }
+  ),
+  !avatar && description && /* @__PURE__ */ jsx(Description, { description, sx: { mb: 1 }, dataTestId }),
+  children && /* @__PURE__ */ jsx(Box, { children })
+] });
+var HoverCardContent = (props) => {
+  const { variant, title, description, avatar, loading, loadingComponent, children, dataTestId } = props;
+  const { loadingText } = props;
+  if (loading) {
+    return /* @__PURE__ */ jsx(LoadingContainer, { children: loadingComponent || /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", children: loadingText })
+    ] }) });
+  }
+  if (variant === "detailed" && (avatar || title || description)) {
+    return /* @__PURE__ */ jsx(DetailedContent, { ...props });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(Title, { title, variant, sx: { mb: 0.5 }, dataTestId }),
+    description && /* @__PURE__ */ jsx(Description, { description, dataTestId }),
+    children
+  ] });
+};
+
+export {
+  HoverCardContent
+};
+//# sourceMappingURL=chunk-JOEISLPP.js.map