@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-JDO7W4D4.js

@@ -0,0 +1,1263 @@
+// src/components/layout/ContentToolbar/ContentToolbar.tsx
+import { Box, Button, Checkbox, Divider, Typography } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var selectionButtonSx = {
+  minWidth: 0,
+  height: "auto",
+  borderRadius: 0.5,
+  fontWeight: 600,
+  py: 0.5,
+  px: 1.5,
+  fontSize: "0.75rem",
+  textTransform: "none",
+  color: "text.primary"
+};
+function SelectionCluster({
+  hasSelection,
+  selectedCount,
+  selectAll,
+  clearSelection,
+  actions,
+  selectAllTestId,
+  clearAllTestId,
+  edgeAlign = false
+}) {
+  const actionsSlot = actions !== void 0 && /* @__PURE__ */ jsx(Box, { sx: { ml: 0.5, display: "flex", flexShrink: 0, alignItems: "center" }, children: actions });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        minWidth: 0,
+        // Mobile: don't grow, so the controls sit on the SAME line as the checkbox
+        // (no orphaned selection row). Desktop: grow to push controls right.
+        flex: { xs: "0 0 auto", md: 1 },
+        alignItems: "center",
+        gap: 1.5,
+        ml: edgeAlign ? -1.5 : 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "small",
+            color: "inherit",
+            onClick: selectAll,
+            "data-testid": selectAllTestId,
+            sx: { ...selectionButtonSx, display: { xs: "none", md: "inline-flex" } },
+            children: "Select All"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            size: "small",
+            checked: hasSelection,
+            onChange: (event) => event.target.checked ? selectAll() : clearSelection(),
+            "data-testid": `${selectAllTestId}-checkbox`,
+            inputProps: { "aria-label": "Selecionar todos" },
+            sx: { p: 0.5, display: { xs: "inline-flex", md: "none" } }
+          }
+        ),
+        hasSelection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "small",
+              color: "inherit",
+              onClick: clearSelection,
+              "data-testid": clearAllTestId,
+              sx: selectionButtonSx,
+              children: "Clear All"
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { height: 16, alignSelf: "center" } }),
+          /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              component: "span",
+              "data-testid": "selected-count-indicator",
+              sx: { fontSize: "0.875rem", color: "text.secondary", whiteSpace: "nowrap", flexShrink: 0 },
+              children: [
+                selectedCount,
+                " ",
+                selectedCount === 1 ? "item" : "items",
+                " selected"
+              ]
+            }
+          ),
+          actionsSlot
+        ] }) : actionsSlot
+      ]
+    }
+  );
+}
+function BrowsingClusters({
+  leadingControls,
+  rightControls,
+  hasSelection,
+  edgeAlign
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingControls !== void 0 && /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          flexGrow: 1,
+          minWidth: 0,
+          // The collapse ladder has a FLOOR — below roughly 400px even the
+          // fully-collapsed row does not fit, and its controls cannot shrink
+          // (they are flexShrink:0 so an over-packed row sheds instead of
+          // squeezing). Past that point this scrolls rather than letting them
+          // paint outside the toolbar, which is what a narrow phone did.
+          overflowX: "auto",
+          // No scrollbar gutter stealing height on the common case.
+          scrollbarWidth: "thin"
+        },
+        children: leadingControls
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          // Same single-line rule as the row itself: this cluster wrapping
+          // INTERNALLY buys a second line just as surely as the row wrapping
+          // does. It bit at exactly 900px, the `md` breakpoint where the "N de
+          // N" counter appears and pushes Exibir/Exportar over the edge.
+          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
+          // Tight (5px) when browsing so the controls fit one line beside the
+          // checkbox; roomier (14px) in selection mode where they get their own row.
+          gap: hasSelection ? "14px" : "5px",
+          ml: "auto",
+          mr: edgeAlign ? -1.5 : 0,
+          "& > *": { flexShrink: 0 }
+        },
+        children: rightControls
+      }
+    )
+  ] });
+}
+function ContentToolbar({
+  hasSelection,
+  selectedCount,
+  selectAll,
+  clearSelection,
+  rightControls,
+  leadingControls,
+  actions,
+  selectAllTestId,
+  clearAllTestId,
+  edgeAlign = false,
+  exclusiveSelection = false
+}) {
+  const showSelection = !exclusiveSelection || hasSelection;
+  const showControls = !exclusiveSelection || !hasSelection;
+  return (
+    // Two clusters on one line. They may wrap onto separate rows ONLY for a
+    // toolbar without `leadingControls` — one carrying search + filters is
+    // driven by a measured collapse ladder (see `useFilterOverflow`), and a
+    // wrap there is the ladder having failed: it would silently buy a second
+    // row instead of shedding a control into "Mais", which is the one outcome
+    // the ladder exists to prevent.
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 2,
+          flexWrap: leadingControls === void 0 ? "wrap" : "nowrap",
+          rowGap: 1
+        },
+        children: [
+          showSelection && /* @__PURE__ */ jsx(
+            SelectionCluster,
+            {
+              hasSelection,
+              selectedCount,
+              selectAll,
+              clearSelection,
+              actions,
+              selectAllTestId,
+              clearAllTestId,
+              edgeAlign
+            }
+          ),
+          showControls && /* @__PURE__ */ jsx(
+            BrowsingClusters,
+            {
+              leadingControls,
+              rightControls,
+              hasSelection,
+              edgeAlign
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+
+// src/components/layout/ContentToolbar/ViewSelector.tsx
+import CheckIcon from "@mui/icons-material/Check";
+import ChevronDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import GridIcon from "@mui/icons-material/GridViewOutlined";
+import ListIcon from "@mui/icons-material/FormatListBulletedRounded";
+import { Box as Box2, Button as Button2, ListItemIcon, ListItemText, Menu, MenuItem, Slider } from "@mui/material";
+import { useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VIEW_OPTIONS = [
+  { value: "grid", label: "Grid View", icon: GridIcon },
+  { value: "list", label: "List View", icon: ListIcon }
+];
+function ViewSelector({
+  viewMode,
+  onViewModeChange,
+  zoom,
+  onZoomChange
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0];
+  const ActiveIcon = activeOption.icon;
+  return /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+    viewMode === "grid" && /* @__PURE__ */ jsx2(Box2, { sx: { width: 96, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx2(
+      Slider,
+      {
+        "data-testid": "resize-card-slider",
+        "aria-label": "Card size",
+        value: zoom[0] ?? 0,
+        onChange: (_, value) => onZoomChange([value]),
+        min: 0,
+        max: 100,
+        step: 1,
+        size: "small"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(
+      Button2,
+      {
+        "data-testid": "view-mode-btn",
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "aria-label": activeOption.label,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { minWidth: 0, height: 32, px: 1, gap: 1, color: "text.secondary" },
+        children: [
+          /* @__PURE__ */ jsx2(ActiveIcon, { sx: { fontSize: 16 } }),
+          /* @__PURE__ */ jsx2(ChevronDownIcon, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: () => setAnchorEl(null),
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 180 } } },
+        children: VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const selected = viewMode === option.value;
+          return /* @__PURE__ */ jsxs2(
+            MenuItem,
+            {
+              "data-testid": `view-mode-${option.value}`,
+              onClick: () => {
+                onViewModeChange(option.value);
+                setAnchorEl(null);
+              },
+              sx: { gap: 1.5 },
+              children: [
+                /* @__PURE__ */ jsx2(ListItemText, { children: option.label }),
+                /* @__PURE__ */ jsx2(OptionIcon, { sx: { fontSize: 16, color: "text.secondary" } }),
+                /* @__PURE__ */ jsx2(ListItemIcon, { sx: { minWidth: "auto !important" }, children: /* @__PURE__ */ jsx2(CheckIcon, { sx: { fontSize: 16, color: selected ? "text.primary" : "transparent" } }) })
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    )
+  ] });
+}
+
+// src/components/layout/ContentToolbar/SortByDropdown.tsx
+import CheckIcon2 from "@mui/icons-material/Check";
+import ChevronDownIcon2 from "@mui/icons-material/KeyboardArrowDown";
+import { Box as Box3, Button as Button3, Divider as Divider2, ListSubheader, Menu as Menu2, MenuItem as MenuItem2, Typography as Typography2 } from "@mui/material";
+import { useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } 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__ */ jsx3(Box3, { component: "span", sx: { display: "flex", width: 16, flexShrink: 0, alignItems: "center", justifyContent: "center" }, "aria-hidden": true, children: checked ? /* @__PURE__ */ jsx3(CheckIcon2, { sx: { fontSize: 14 } }) : null });
+}
+function SortRow({
+  value,
+  label,
+  checked,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs3(MenuItem2, { "data-testid": `sort-${value}-option`, onClick: onSelect, sx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx3(SortCheck, { checked }),
+    /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: label })
+  ] });
+}
+function SortMenu({
+  anchorEl,
+  open,
+  close,
+  orderOptions,
+  activeOrderValue,
+  onOrderSelect,
+  fields,
+  activeField,
+  onFieldSelect
+}) {
+  return /* @__PURE__ */ jsxs3(
+    Menu2,
+    {
+      anchorEl,
+      open,
+      onClose: close,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      slotProps: { paper: { sx: { minWidth: 180 } } },
+      children: [
+        orderOptions.length > 0 && [
+          /* @__PURE__ */ jsx3(ListSubheader, { sx: sectionLabelSx, children: "Order" }, "order-label"),
+          ...orderOptions.map((option) => /* @__PURE__ */ jsx3(
+            SortRow,
+            {
+              value: option.value,
+              label: option.label,
+              checked: activeOrderValue === option.value,
+              onSelect: () => onOrderSelect(option.value)
+            },
+            `order-${option.value}`
+          )),
+          /* @__PURE__ */ jsx3(Divider2, {}, "order-divider")
+        ],
+        /* @__PURE__ */ jsx3(ListSubheader, { sx: sectionLabelSx, children: "Sort" }),
+        fields.map((field) => /* @__PURE__ */ jsx3(
+          SortRow,
+          {
+            value: field.value,
+            label: field.label,
+            checked: activeField === field.value,
+            onSelect: () => onFieldSelect(field.value)
+          },
+          field.value
+        ))
+      ]
+    }
+  );
+}
+function SortByDropdown({
+  fields,
+  activeField,
+  activeOrder,
+  onFieldChange,
+  onOrderChange,
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState2(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__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx3(
+      Typography2,
+      {
+        component: "span",
+        sx: { display: { xs: "none", md: "inline" }, color: "text.secondary", fontSize: "0.875rem" },
+        children: "Sort By:"
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      Button3,
+      {
+        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__ */ jsx3(Box3, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: trigger.full }),
+          /* @__PURE__ */ jsx3(Box3, { component: "span", sx: { display: { xs: "inline", md: "none" } }, children: trigger.short }),
+          trigger.arrowSuffix,
+          /* @__PURE__ */ jsx3(ChevronDownIcon2, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      SortMenu,
+      {
+        anchorEl,
+        open,
+        close,
+        orderOptions,
+        activeOrderValue: activeOrderOption?.value,
+        onOrderSelect: (value) => {
+          onOrderChange?.(value);
+          close();
+        },
+        fields: safeFields,
+        activeField,
+        onFieldSelect: handleFieldChange
+      }
+    )
+  ] });
+}
+
+// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  Box as Box5,
+  Button as Button5,
+  Checkbox as Checkbox2,
+  Divider as Divider3,
+  InputAdornment,
+  ListSubheader as ListSubheader2,
+  Menu as Menu3,
+  MenuItem as MenuItem3,
+  TextField
+} from "@mui/material";
+import { useMemo, useState as useState3 } from "react";
+
+// src/components/layout/ContentToolbar/MultiSelectTriggers.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import ChevronDownIcon3 from "@mui/icons-material/KeyboardArrowDown";
+import { Box as Box4, Button as Button4, Typography as Typography3 } from "@mui/material";
+import { useId } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function buildTriggerLabel2(selected, options, allLabel) {
+  const size = selected.size;
+  if (size === 0 || size === options.length) return allLabel;
+  const labelMap = new Map(options.map((option) => [option.value, option.label]));
+  const firstValue = selected.values().next().value;
+  const firstLabel = labelMap.get(firstValue) ?? allLabel;
+  if (size === 1) return firstLabel;
+  return `${firstLabel} (+${size - 1})`;
+}
+function InlineTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  return /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", alignItems: "center", gap: 1, fontSize: "0.875rem" }, children: [
+    /* @__PURE__ */ jsxs4(Typography3, { component: "span", sx: { color: "text.secondary", fontSize: "0.875rem" }, children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxs4(
+      Button4,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: onOpen,
+        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          triggerLabel,
+          /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 14 } })
+        ]
+      }
+    )
+  ] });
+}
+function StackedTrigger({ label, triggerLabel, open, onOpen, testId }) {
+  const baseId = useId();
+  return /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+    /* @__PURE__ */ jsx4(Typography3, { id: `${baseId}-label`, component: "label", sx: { fontSize: "0.75rem", fontWeight: 500, color: "text.secondary" }, children: label }),
+    /* @__PURE__ */ jsx4(
+      Button4,
+      {
+        variant: "outlined",
+        color: "inherit",
+        fullWidth: true,
+        "data-testid": testId,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-labelledby": `${baseId}-label ${baseId}-value`,
+        onClick: onOpen,
+        endIcon: /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 18, color: "text.secondary" } }),
+        sx: {
+          justifyContent: "space-between",
+          height: 40,
+          px: 1.5,
+          color: "text.primary",
+          textTransform: "none",
+          fontWeight: 400,
+          fontSize: "0.875rem",
+          borderColor: "divider",
+          bgcolor: "background.paper",
+          "&:hover": { borderColor: "text.primary", bgcolor: "background.paper" }
+        },
+        children: /* @__PURE__ */ jsx4(
+          Box4,
+          {
+            component: "span",
+            id: `${baseId}-value`,
+            sx: { flex: 1, minWidth: 0, textAlign: "left", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            children: triggerLabel
+          }
+        )
+      }
+    )
+  ] });
+}
+function PillTrigger({
+  label,
+  open,
+  onOpen,
+  testId,
+  selectedCount,
+  onClear
+}) {
+  const active = selectedCount > 0;
+  return /* @__PURE__ */ jsxs4(
+    Button4,
+    {
+      variant: "outlined",
+      color: "inherit",
+      size: "small",
+      "data-testid": testId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      onClick: onOpen,
+      startIcon: active && onClear ? /* @__PURE__ */ jsx4(
+        Box4,
+        {
+          component: "span",
+          role: "button",
+          tabIndex: 0,
+          "aria-label": `Limpar ${label}`,
+          "data-testid": testId ? `${testId}-clear` : void 0,
+          onClick: (event) => {
+            event.stopPropagation();
+            onClear();
+          },
+          onKeyDown: (event) => {
+            if (event.key !== "Enter" && event.key !== " ") return;
+            event.preventDefault();
+            event.stopPropagation();
+            onClear();
+          },
+          sx: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "50%",
+            cursor: "pointer",
+            color: "primary.main",
+            "&:hover": { bgcolor: "primary.main", color: "primary.contrastText" }
+          },
+          children: /* @__PURE__ */ jsx4(CloseIcon, { sx: { fontSize: 14 } })
+        }
+      ) : void 0,
+      endIcon: /* @__PURE__ */ jsx4(ChevronDownIcon3, { sx: { fontSize: 16 } }),
+      sx: {
+        borderRadius: 999,
+        height: 34,
+        px: 1.5,
+        color: "text.primary",
+        fontWeight: 600,
+        fontSize: "0.8125rem",
+        textTransform: "none",
+        borderColor: active ? "primary.main" : "divider",
+        bgcolor: active ? "action.selected" : "background.paper",
+        "&:hover": { borderColor: active ? "primary.main" : "text.primary", bgcolor: active ? "action.selected" : "action.hover" }
+      },
+      children: [
+        label,
+        active ? ` (${selectedCount})` : ""
+      ]
+    }
+  );
+}
+
+// src/components/layout/ContentToolbar/MultiSelectDropdown.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function CheckboxRow({
+  label,
+  count,
+  checked,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs5(MenuItem3, { onClick: () => onToggle(!checked), sx: { gap: 1 }, children: [
+    /* @__PURE__ */ jsx5(Checkbox2, { checked, size: "small", disableRipple: true, sx: { p: 0, pointerEvents: "none" }, tabIndex: -1 }),
+    /* @__PURE__ */ jsxs5(Box5, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+      label,
+      count != null && /* @__PURE__ */ jsxs5(Box5, { component: "span", sx: { color: "text.secondary" }, children: [
+        " ",
+        "(",
+        count,
+        ")"
+      ] })
+    ] })
+  ] });
+}
+function MultiSelectDropdown({
+  label,
+  options,
+  selected,
+  onToggle,
+  onClear,
+  allLabel = "All",
+  extraOptions,
+  searchable,
+  searchPlaceholder = "Search\u2026",
+  noResultsLabel = "No results",
+  layout = "inline",
+  "data-testid": testId,
+  onOpenChange
+}) {
+  const [anchorEl, setAnchorEl] = useState3(null);
+  const [query, setQuery] = useState3("");
+  const open = Boolean(anchorEl);
+  const stacked = layout === "stacked";
+  const close = () => {
+    setAnchorEl(null);
+    setQuery("");
+    onOpenChange?.(false);
+  };
+  const triggerLabel = buildTriggerLabel2(selected, options, allLabel);
+  const showSearch = searchable ?? options.length > 8;
+  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;
+  const clearDisabled = selected.size === 0 && !anyExtraChecked;
+  const openMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
+  const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };
+  const renderTrigger = () => {
+    if (stacked) return /* @__PURE__ */ jsx5(StackedTrigger, { label, ...triggerProps });
+    if (layout === "pill")
+      return /* @__PURE__ */ jsx5(
+        PillTrigger,
+        {
+          label,
+          selectedCount: selected.size,
+          onClear,
+          ...triggerProps
+        }
+      );
+    return /* @__PURE__ */ jsx5(InlineTrigger, { label, ...triggerProps });
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    renderTrigger(),
+    /* @__PURE__ */ jsx5(
+      MultiSelectMenu,
+      {
+        anchorEl,
+        open,
+        close,
+        options,
+        selected,
+        onToggle,
+        extraOptions,
+        clearDisabled,
+        onClear,
+        showSearch,
+        query,
+        onQueryChange: setQuery,
+        searchPlaceholder,
+        noResultsLabel,
+        matchAnchorWidth: stacked,
+        testId
+      }
+    )
+  ] });
+}
+function MenuSearchField({
+  query,
+  onQueryChange,
+  placeholder,
+  testId
+}) {
+  return /* @__PURE__ */ jsx5(
+    Box5,
+    {
+      sx: { position: "sticky", top: 0, zIndex: 1, bgcolor: "background.paper", px: 1, py: 0.75 },
+      onKeyDown: (event) => event.stopPropagation(),
+      children: /* @__PURE__ */ jsx5(
+        TextField,
+        {
+          autoFocus: true,
+          size: "small",
+          fullWidth: true,
+          value: query,
+          onChange: (event) => onQueryChange(event.target.value),
+          placeholder,
+          inputProps: { "aria-label": placeholder, "data-testid": testId ? `${testId}-search` : void 0 },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx5(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx5(SearchIcon, { sx: { fontSize: 16 } }) })
+          }
+        }
+      )
+    }
+  );
+}
+function resolveMenuPlacement(matchAnchorWidth, anchorEl) {
+  if (!matchAnchorWidth) return { anchorWidth: void 0, align: "right" };
+  return { anchorWidth: anchorEl?.offsetWidth, align: "left" };
+}
+function MultiSelectMenu({
+  anchorEl,
+  open,
+  close,
+  options,
+  selected,
+  onToggle,
+  extraOptions,
+  clearDisabled,
+  onClear,
+  showSearch,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  noResultsLabel,
+  matchAnchorWidth,
+  testId
+}) {
+  const trimmed = query.trim().toLowerCase();
+  const visibleOptions = useMemo(
+    () => trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options,
+    [options, trimmed]
+  );
+  const { anchorWidth, align } = resolveMenuPlacement(matchAnchorWidth, anchorEl);
+  return /* @__PURE__ */ jsxs5(
+    Menu3,
+    {
+      anchorEl,
+      open,
+      onClose: close,
+      anchorOrigin: { vertical: "bottom", horizontal: align },
+      transformOrigin: { vertical: "top", horizontal: align },
+      autoFocus: !showSearch,
+      disableAutoFocusItem: true,
+      slotProps: {
+        // Cap the height so a long list (e.g. many categories) scrolls instead
+        // of running off-screen; the sticky search box stays pinned on top.
+        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },
+        list: { sx: { pt: showSearch ? 0 : void 0, pb: 0 } }
+      },
+      children: [
+        showSearch && /* @__PURE__ */ jsx5(MenuSearchField, { query, onQueryChange, placeholder: searchPlaceholder, testId }),
+        visibleOptions.length === 0 && showSearch ? /* @__PURE__ */ jsx5(MenuItem3, { disabled: true, "data-testid": testId ? `${testId}-no-results` : void 0, sx: { fontSize: "0.8125rem" }, children: noResultsLabel }) : visibleOptions.map((option) => /* @__PURE__ */ jsx5(
+          CheckboxRow,
+          {
+            label: option.label,
+            count: option.count,
+            checked: selected.has(option.value),
+            onToggle: (next) => onToggle(option.value, next)
+          },
+          option.value
+        )),
+        extraOptions && extraOptions.length > 0 ? [
+          /* @__PURE__ */ jsx5(Divider3, {}, "extra-divider"),
+          /* @__PURE__ */ jsx5(ListSubheader2, { sx: { px: 1, py: 0.75, fontSize: "0.75rem", fontWeight: 600 }, children: "Options" }, "extra-label"),
+          ...extraOptions.map((extra) => /* @__PURE__ */ jsx5(CheckboxRow, { label: extra.label, checked: extra.checked, onToggle: (next) => extra.onCheckedChange(next) }, extra.id))
+        ] : null,
+        /* @__PURE__ */ jsx5(MenuClearFooter, { clearDisabled, onClear, close, testId })
+      ]
+    }
+  );
+}
+function MenuClearFooter({
+  clearDisabled,
+  onClear,
+  close,
+  testId
+}) {
+  return /* @__PURE__ */ jsx5(
+    Box5,
+    {
+      sx: {
+        // Pin to the bottom of the scroll viewport so it stays visible while the
+        // options list scrolls (mirrors the sticky search box on top).
+        position: "sticky",
+        bottom: 0,
+        zIndex: 1,
+        display: "flex",
+        justifyContent: "flex-end",
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        px: 1,
+        py: 0.75
+      },
+      children: /* @__PURE__ */ jsx5(
+        Button5,
+        {
+          variant: "text",
+          size: "small",
+          color: "inherit",
+          "data-testid": testId ? `${testId}-clear` : void 0,
+          disabled: clearDisabled,
+          onClick: () => {
+            onClear();
+            close();
+          },
+          sx: { minWidth: 0, px: 1, py: 0.25, fontSize: "0.75rem", fontWeight: 400, textTransform: "none", color: "text.secondary" },
+          children: "Clear"
+        }
+      )
+    }
+  );
+}
+
+// src/components/layout/ContentToolbar/FilterTrigger.tsx
+import FilterIcon from "@mui/icons-material/FilterListRounded";
+import { Box as Box6, Button as Button6 } from "@mui/material";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function FilterTrigger({
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  activeCount = 0,
+  label = "Filtros",
+  "data-testid": testId = "toggle-filters-btn"
+}) {
+  const active = activeCount > 0 || hasActiveFilters;
+  return /* @__PURE__ */ jsxs6(
+    Button6,
+    {
+      variant: "text",
+      size: "small",
+      color: "inherit",
+      "data-testid": testId,
+      "aria-expanded": open,
+      "aria-label": open ? "Close filters" : "Open filters",
+      onClick: () => onOpenChange(!open),
+      startIcon: /* @__PURE__ */ jsx6(FilterIcon, { sx: { fontSize: 16 } }),
+      sx: {
+        minWidth: 0,
+        height: 32,
+        px: 1,
+        gap: 0.25,
+        textTransform: "none",
+        fontWeight: 600,
+        color: active ? "primary.main" : "text.primary",
+        bgcolor: open ? "action.selected" : "transparent"
+      },
+      children: [
+        label,
+        activeCount > 0 && /* @__PURE__ */ jsx6(
+          Box6,
+          {
+            component: "span",
+            "data-testid": `${testId}-count`,
+            sx: {
+              ml: 0.5,
+              minWidth: 18,
+              height: 18,
+              px: 0.5,
+              borderRadius: 999,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "0.7rem",
+              fontWeight: 700,
+              lineHeight: 1,
+              bgcolor: "primary.main",
+              color: "primary.contrastText"
+            },
+            children: activeCount
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/layout/ContentToolbar/ColumnsMenu.tsx
+import ColumnsIcon from "@mui/icons-material/ViewColumnRounded";
+import { Box as Box7, Checkbox as Checkbox3, IconButton, ListSubheader as ListSubheader3, Menu as Menu4, MenuItem as MenuItem4 } from "@mui/material";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ColumnRow({
+  option,
+  onToggle,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs7(
+    MenuItem4,
+    {
+      "data-testid": testId,
+      onClick: () => onToggle(option.id, !option.visible),
+      disabled: option.locked,
+      sx: { gap: 1 },
+      children: [
+        /* @__PURE__ */ jsx7(
+          Checkbox3,
+          {
+            checked: option.visible,
+            size: "small",
+            disableRipple: true,
+            sx: { p: 0, pointerEvents: "none" },
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsx7(Box7, { component: "span", sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: option.label })
+      ]
+    }
+  );
+}
+function ColumnsMenu({
+  columns,
+  onToggle,
+  title = "Columns",
+  ariaLabel = "Toggle columns",
+  "data-testid": testId
+}) {
+  const [anchorEl, setAnchorEl] = useState4(null);
+  const open = Boolean(anchorEl);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx7(
+      IconButton,
+      {
+        size: "small",
+        "data-testid": testId,
+        "aria-label": ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: {
+          width: 32,
+          height: 32,
+          borderRadius: 1,
+          color: "text.secondary",
+          bgcolor: open ? "action.selected" : "transparent"
+        },
+        children: /* @__PURE__ */ jsx7(ColumnsIcon, { sx: { fontSize: 16 } })
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      Menu4,
+      {
+        anchorEl,
+        open,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        slotProps: { paper: { sx: { minWidth: 200 } } },
+        children: [
+          /* @__PURE__ */ jsx7(ListSubheader3, { sx: { px: 1.5, py: 0.75, fontSize: "0.75rem", fontWeight: 600, color: "text.primary", lineHeight: 1.5 }, children: title }),
+          columns.map((option) => /* @__PURE__ */ jsx7(
+            ColumnRow,
+            {
+              option,
+              onToggle,
+              testId: testId ? `${testId}-${option.id}` : void 0
+            },
+            option.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/layout/ContentToolbar/SavedViewsMenu.tsx
+import CheckIcon3 from "@mui/icons-material/Check";
+import ChevronDownIcon4 from "@mui/icons-material/KeyboardArrowDown";
+import KebabIcon from "@mui/icons-material/MoreVert";
+import ViewIcon from "@mui/icons-material/Visibility";
+import { Box as Box8, Button as Button7, IconButton as IconButton2, Menu as Menu5, MenuItem as MenuItem5, Popover, Stack, Typography as Typography4 } from "@mui/material";
+import { useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  trigger: "Vis\xF5es",
+  mainView: "Vis\xE3o principal",
+  pinned: "Fixadas",
+  recent: "Recentes",
+  empty: "Nenhuma vis\xE3o salva ainda.",
+  saveCurrent: "+ Salvar vis\xE3o atual",
+  manageAll: "Gerenciar vis\xF5es",
+  apply: "Aplicar",
+  setDefault: "Definir como padr\xE3o",
+  pin: "Fixar na barra lateral",
+  unpin: "Desafixar",
+  share: "Compartilhar com a equipe",
+  unshare: "Tornar privada",
+  edit: "Editar",
+  remove: "Excluir",
+  defaultTag: "Padr\xE3o"
+};
+var RECENT_LIMIT = 5;
+function DefaultTag({ label, testId }) {
+  return /* @__PURE__ */ jsx8(
+    Box8,
+    {
+      component: "span",
+      "data-testid": testId,
+      sx: { px: 0.75, py: 0.125, borderRadius: 1, fontSize: "0.7rem", bgcolor: "primary.main", color: "primary.contrastText" },
+      children: label
+    }
+  );
+}
+function buildActions(view, handlers, labels) {
+  const actions = [{ id: "apply", label: labels.apply, run: () => handlers.apply(view) }];
+  if (!view.isOwner) return actions;
+  if (!view.isDefault) {
+    actions.push({ id: "default", label: labels.setDefault, run: () => handlers.onSetDefault(view) });
+  }
+  actions.push({ id: "pin", label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });
+  actions.push({ id: "share", label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });
+  actions.push({ id: "edit", label: labels.edit, run: () => handlers.onEdit(view) });
+  actions.push({ id: "delete", label: labels.remove, danger: true, run: () => handlers.onDelete(view) });
+  return actions;
+}
+function ViewKebab({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  const [anchorEl, setAnchorEl] = useState5(null);
+  const close = () => setAnchorEl(null);
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx8(
+      IconButton2,
+      {
+        size: "small",
+        "aria-label": `${labels.apply} ${view.name}`,
+        "data-testid": `${testIdPrefix}-kebab-${view.id}`,
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        sx: { width: 28, height: 28, color: "text.secondary" },
+        children: /* @__PURE__ */ jsx8(KebabIcon, { sx: { fontSize: 16 } })
+      }
+    ),
+    /* @__PURE__ */ jsx8(Menu5, { anchorEl, open: Boolean(anchorEl), onClose: close, children: buildActions(view, handlers, labels).map((action) => /* @__PURE__ */ jsx8(
+      MenuItem5,
+      {
+        "data-testid": `${testIdPrefix}-item-${action.id}-${view.id}`,
+        onClick: () => {
+          action.run();
+          close();
+        },
+        sx: action.danger ? { color: "error.main" } : void 0,
+        children: action.label
+      },
+      action.id
+    )) })
+  ] });
+}
+function ViewRow({
+  view,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs8(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, "data-testid": `${testIdPrefix}-row-${view.id}`, children: [
+    /* @__PURE__ */ jsxs8(
+      Box8,
+      {
+        onClick: () => handlers.apply(view),
+        sx: { flex: 1, minWidth: 0, cursor: "pointer", display: "flex", alignItems: "center", gap: 0.75 },
+        "data-testid": `${testIdPrefix}-apply-${view.id}`,
+        children: [
+          /* @__PURE__ */ jsx8(Typography4, { component: "span", sx: { fontSize: "0.875rem" }, children: view.name }),
+          view.isDefault && /* @__PURE__ */ jsx8(DefaultTag, { label: labels.defaultTag, testId: `${testIdPrefix}-default-${view.id}` })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(ViewKebab, { view, handlers, labels, testIdPrefix })
+  ] });
+}
+function ViewSection({
+  title,
+  list,
+  sectionKey,
+  handlers,
+  labels,
+  testIdPrefix
+}) {
+  if (list.length === 0) return null;
+  return /* @__PURE__ */ jsxs8(Box8, { "data-testid": `${testIdPrefix}-section-${sectionKey}`, children: [
+    /* @__PURE__ */ jsx8(Typography4, { component: "span", sx: { fontSize: "0.75rem", fontWeight: 600, color: "text.secondary" }, children: title }),
+    /* @__PURE__ */ jsx8(Stack, { spacing: 0.5, sx: { mt: 0.5 }, children: list.map((view) => /* @__PURE__ */ jsx8(ViewRow, { view, handlers, labels, testIdPrefix }, view.id)) })
+  ] });
+}
+function FooterButton({
+  label,
+  testId,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx8(Button7, { variant: "text", size: "small", color: "inherit", onClick, "data-testid": testId, sx: { textTransform: "none" }, children: label });
+}
+function PopoverBody({
+  views,
+  pinned,
+  recent,
+  activeViewName,
+  labels,
+  handlers,
+  onSelectMain,
+  onSaveCurrent,
+  onManageAll,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs8(Stack, { spacing: 1.5, sx: { p: 1.5, width: 300 }, "data-testid": `${testIdPrefix}-popover`, children: [
+    /* @__PURE__ */ jsxs8(MenuItem5, { "data-testid": `${testIdPrefix}-main`, selected: !activeViewName, onClick: onSelectMain, sx: { borderRadius: 1, px: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsx8(Box8, { component: "span", sx: { flex: 1, minWidth: 0, fontSize: "0.875rem" }, children: labels.mainView }),
+      !activeViewName && /* @__PURE__ */ jsx8(CheckIcon3, { sx: { fontSize: 16, color: "primary.main" } })
+    ] }),
+    views.length === 0 ? /* @__PURE__ */ jsx8(Typography4, { sx: { fontSize: "0.75rem", color: "text.secondary" }, children: labels.empty }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      /* @__PURE__ */ jsx8(ViewSection, { title: labels.pinned, list: pinned, sectionKey: "pinned", handlers, labels, testIdPrefix }),
+      /* @__PURE__ */ jsx8(ViewSection, { title: labels.recent, list: recent, sectionKey: "recent", handlers, labels, testIdPrefix })
+    ] }),
+    /* @__PURE__ */ jsx8(Box8, { sx: { borderTop: 1, borderColor: "divider", pt: 1 }, children: /* @__PURE__ */ jsxs8(Stack, { spacing: 0.5, sx: { alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsx8(FooterButton, { label: labels.saveCurrent, testId: `${testIdPrefix}-save-current`, onClick: onSaveCurrent }),
+      /* @__PURE__ */ jsx8(FooterButton, { label: labels.manageAll, testId: `${testIdPrefix}-manage-all`, onClick: onManageAll })
+    ] }) })
+  ] });
+}
+function SavedViewsMenu({
+  views,
+  activeViewName,
+  onApply,
+  onSelectMain,
+  onSaveCurrent,
+  onEdit,
+  onDelete,
+  onSetDefault,
+  onTogglePin,
+  onToggleShare,
+  onManageAll,
+  labels: labelOverrides,
+  testIdPrefix = "views"
+}) {
+  const [anchorEl, setAnchorEl] = useState5(null);
+  const close = () => setAnchorEl(null);
+  const runAndClose = (action) => () => {
+    action();
+    close();
+  };
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+  const pinned = views.filter((view) => view.pinned);
+  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
+  const handlers = {
+    apply: (view) => {
+      onApply(view);
+      close();
+    },
+    onEdit,
+    onDelete,
+    onSetDefault,
+    onTogglePin,
+    onToggleShare
+  };
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsxs8(
+      Button7,
+      {
+        variant: "text",
+        size: "small",
+        color: "inherit",
+        onClick: (event) => setAnchorEl(event.currentTarget),
+        "data-testid": `${testIdPrefix}-button`,
+        "aria-haspopup": "menu",
+        "aria-expanded": Boolean(anchorEl),
+        "aria-label": activeViewName ?? labels.mainView,
+        sx: { minWidth: 0, height: 32, px: 1, gap: 0.5, color: "text.primary", textTransform: "none", fontWeight: 600 },
+        children: [
+          /* @__PURE__ */ jsx8(ViewIcon, { sx: { fontSize: 18, display: { xs: "inline-flex", md: "none" } } }),
+          /* @__PURE__ */ jsx8(Box8, { component: "span", sx: { display: { xs: "none", md: "inline" } }, children: activeViewName ?? labels.mainView }),
+          /* @__PURE__ */ jsx8(ChevronDownIcon4, { sx: { fontSize: 14 } })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      Popover,
+      {
+        open: Boolean(anchorEl),
+        anchorEl,
+        onClose: close,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        children: /* @__PURE__ */ jsx8(
+          PopoverBody,
+          {
+            views,
+            pinned,
+            recent,
+            activeViewName,
+            labels,
+            handlers,
+            onSelectMain: runAndClose(onSelectMain),
+            onSaveCurrent: runAndClose(onSaveCurrent),
+            onManageAll: runAndClose(onManageAll),
+            testIdPrefix
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export {
+  ContentToolbar,
+  ViewSelector,
+  SortByDropdown,
+  MultiSelectDropdown,
+  FilterTrigger,
+  ColumnsMenu,
+  SavedViewsMenu
+};
+//# sourceMappingURL=chunk-JDO7W4D4.js.map