@12-apps/ui 6.11.0 → 6.11.1

package/dist/chunk-LGCMG7AT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-range-pill.tsx"],"sourcesContent":["'use client';\n\n/**\n * A range filter as a PILL in the inline filter bar — the same affordance the\n * multi-select facets use, so \"Data\" and \"Valor\" sit in the filter row beside\n * \"Pagamento\"/\"Situação\"/\"Método\" instead of floating above the grid.\n *\n * Before this the inline bar rendered pills only, and `rangeFields` had a\n * surface on the slide-in panel alone — which `inlineFilters` REPLACES on a wide\n * screen. So a range filter was invisible on exactly the screens that use it,\n * and a page wanting one had to hang its own inputs outside the grid, outside\n * `DataViewState`, and outside the grid's \"Limpar filtros\" (FUT-668).\n */\nimport CloseIcon from '@mui/icons-material/Close';\nimport ChevronDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport { Box, Button, Popover, Typography } from '@mui/material';\nimport React, { useState } from 'react';\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { TableFilter } from '../../layout/TableFilter';\nimport { DayBoundInput } from './data-views-day-input';\nimport { NumberBoundInput } from './data-views-number-input';\nimport { RangePresets } from './data-views-preset-chips';\nimport { presetsFor } from './data-views-range-presets';\nimport {\n  isRangeInverted,\n  isRangeSet,\n  numericRange,\n  rangeChipLabel,\n} from './data-views-range-values';\nimport type { RangeFieldConfig, RangeValue } from './data-views-types';\n\n\n\n/**\n * One end of the range. A day keeps its `AAAA-MM-DD` string verbatim (the form\n * both the field and the backend speak) and is typed through the masked\n * `dd/mm/aaaa` field rather than a native date input — see\n * {@link DayBoundInput} for why. A number parses, and an unparseable/blank\n * entry CLEARS the bound rather than writing `NaN`.\n */\nfunction BoundField<T extends Record<string, unknown>>({\n  field,\n  label,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  label: string;\n  value: number | string | undefined;\n  onChange: (bound: number | string | undefined) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === 'day') {\n    return (\n      <DayBoundInput\n        mask={copy.filters.dayMask}\n        label={label}\n        value={value == null ? undefined : String(value)}\n        onChange={onChange}\n        testId={testId}\n      />\n    );\n  }\n  return (\n    <NumberBoundInput\n      label={label}\n      value={value}\n      unit={field.unit}\n      onChange={onChange}\n      testId={testId}\n    />\n  );\n}\n\n\n/**\n * The `De`/`Até` pair for a range — shared by the pill's popover and the\n * slide-in panel's day fields, so the two surfaces cannot drift on what a bound\n * accepts or how it clears.\n */\nexport function RangeBounds<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const inverted = isRangeInverted(value);\n  return (\n    <Box data-testid={`${testId}-panel`}>\n      {/* Above the inputs, not below: the presets are the answer for most\n          merchants, and the two date pickers are the escape hatch. */}\n      <Box sx={{ '&:not(:empty)': { mb: 1.5 } }}>\n        <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n      </Box>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>\n        <BoundField\n          field={field}\n          label={copy.filters.rangeStart}\n          value={value.min}\n          onChange={(min) => onChange({ ...value, min })}\n          testId={`${testId}-min`}\n        />\n        <BoundField\n          field={field}\n          label={copy.filters.rangeEnd}\n          value={value.max}\n          onChange={(max) => onChange({ ...value, max })}\n          testId={`${testId}-max`}\n        />\n      </Box>\n      {inverted && (\n        <Typography\n          component=\"p\"\n          data-testid={`${testId}-inverted`}\n          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'error.main' }}\n        >\n          {copy.filters.rangeInvalid}\n        </Typography>\n      )}\n      {/* BOTH days are in the result. Saying so is FUT-668's other half: the\n          bounds compare as ISO strings precisely so `até` keeps its whole day,\n          and nothing on screen would otherwise tell the merchant that. */}\n      {field.kind === 'day' && !inverted && (\n        <Typography\n          component=\"p\"\n          data-testid={`${testId}-inclusive`}\n          sx={{ mt: 0.75, fontSize: '0.75rem', color: 'text.disabled' }}\n        >\n          {copy.filters.rangeInclusiveNote}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n\n/**\n * The pill + its popover. Bounds commit on change (the list is server-driven, so\n * each edit is a query) and the popover stays open, which is what lets a\n * merchant set \"de\" and then \"até\" without re-opening it.\n */\n/** An applied range clears from the pill itself — re-opening to empty two fields is three gestures for one intent. */\nfunction ClearAffordance({\n  label,\n  onClear,\n  testId,\n}: {\n  label: string;\n  onClear: () => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const clear = (event: React.SyntheticEvent): void => {\n    event.stopPropagation();\n    onClear();\n  };\n  return (\n    <Box\n      component=\"span\"\n      role=\"button\"\n      tabIndex={0}\n      aria-label={copy.filters.clearRange(label)}\n      data-testid={testId}\n      onClick={clear}\n      onKeyDown={(event: React.KeyboardEvent) => {\n        if (event.key !== 'Enter' && event.key !== ' ') return;\n        event.preventDefault();\n        clear(event);\n      }}\n      sx={{ display: 'inline-flex', borderRadius: 999, p: 0.125, '&:hover': { bgcolor: 'action.selected' } }}\n    >\n      <CloseIcon sx={{ fontSize: 14 }} />\n    </Box>\n  );\n}\n\n/** The pill button: its label carries the applied window, and its tone the state. */\nfunction RangeTrigger<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpen,\n  open,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  onOpen: (anchor: HTMLElement) => void;\n  open: boolean;\n  testId: string;\n}): React.JSX.Element {\n  const active = isRangeSet(value);\n  const inverted = isRangeInverted(value);\n  // An INVERTED window gets its own tone rather than the ordinary \"applied\"\n  // one: it is applied, and it matches nothing, and those are different states.\n  const tone = inverted ? 'error.main' : active ? 'primary.main' : 'divider';\n  return (\n    <Button\n      variant=\"outlined\"\n      color=\"inherit\"\n      size=\"small\"\n      data-testid={testId}\n      aria-haspopup=\"dialog\"\n      aria-expanded={open}\n      onClick={(event) => onOpen(event.currentTarget)}\n      // ✕ FIRST, chevron LAST — the same shape as every other pill. It used to\n      // replace the chevron at the end, so a range pill and a multi-select pill\n      // put the clear in different places, and an applied range lost the\n      // affordance that says it opens.\n      startIcon={\n        active ? (\n          <ClearAffordance label={field.label} onClear={() => onChange({})} testId={`${testId}-clear-inline`} />\n        ) : undefined\n      }\n      endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}\n      sx={{\n        borderRadius: 999,\n        height: 34,\n        px: 1.5,\n        maxWidth: 280,\n        color: inverted ? 'error.main' : 'text.primary',\n        fontWeight: 600,\n        fontSize: '0.8125rem',\n        textTransform: 'none',\n        whiteSpace: 'nowrap',\n        borderColor: tone,\n        bgcolor: active ? 'action.selected' : 'background.paper',\n        '&:hover': {\n          borderColor: active ? tone : 'text.primary',\n          bgcolor: active ? 'action.selected' : 'action.hover',\n        },\n      }}\n    >\n      {/* The applied bounds, in the label — a pill reading only \"Valor\" hides\n          the very thing that is narrowing the list. */}\n      <Box component=\"span\" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>\n        {active ? rangeChipLabel(field, value) : field.label}\n      </Box>\n    </Button>\n  );\n}\n\nexport function RangePill<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  onOpenChange,\n  testIdPrefix,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  /** So a measured toolbar can hold still while this is open. */\n  onOpenChange?: (open: boolean) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const [anchor, setAnchor] = useState<HTMLElement | null>(null);\n  const active = isRangeSet(value);\n  const testId = `${testIdPrefix}-range-${field.id}`;\n  return (\n    <>\n      <RangeTrigger\n        field={field}\n        value={value}\n        onChange={onChange}\n        onOpen={(element) => {\n          setAnchor(element);\n          onOpenChange?.(true);\n        }}\n        open={Boolean(anchor)}\n        testId={testId}\n      />\n      <Popover\n        open={Boolean(anchor)}\n        anchorEl={anchor}\n        onClose={() => {\n          setAnchor(null);\n          onOpenChange?.(false);\n        }}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        slotProps={{ paper: { sx: { p: 2, mt: 0.5 } } }}\n      >\n        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n        {/* An inverted window is not an error the merchant must fix before the\n            list responds — it simply matches nothing, and saying so beats an\n            empty grid with no explanation (FUT-668). */}\n        {active && (\n          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2, mt: 1.5 }}>\n            <Typography component=\"span\" sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>\n              {rangeChipLabel(field, value)}\n            </Typography>\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              onClick={() => onChange({})}\n              data-testid={`${testId}-clear`}\n              sx={{ textTransform: 'none' }}\n            >\n              {copy.filters.clear}\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </>\n  );\n}\n\n\n/**\n * One range on the SLIDE-IN panel (and the narrow-screen modal): the numeric\n * control the panel already had, or — for a day range, which that control cannot\n * express — the same `De`/`Até` pair the pill's popover uses.\n */\nexport function PanelRangeField<T extends Record<string, unknown>>({\n  field,\n  value,\n  onChange,\n  testId,\n}: {\n  field: RangeFieldConfig<T>;\n  value: RangeValue;\n  onChange: (range: RangeValue) => void;\n  testId: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  if (field.kind === \"day\") {\n    return (\n      <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n        <Typography component=\"span\" sx={{ fontSize: \"0.75rem\", fontWeight: 500, color: \"text.secondary\" }}>\n          {field.label}\n        </Typography>\n        <RangeBounds field={field} value={value} onChange={onChange} testId={testId} />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 1 }}>\n      <TableFilter.RangeField\n        label={field.label}\n        unit={field.unit}\n        value={numericRange(value)}\n        onChange={(range) => onChange(range)}\n        testId={testId}\n      />\n      {/* Below the numeric control here, unlike the pill's popover: this one\n          renders its own label, and chips above it would separate the label\n          from the field it names. */}\n      <RangePresets presets={presetsFor(field, copy)} value={value} onChange={onChange} testId={testId} />\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-LGH5HJQF.js

@@ -0,0 +1,200 @@
+import {
+  Skeleton
+} from "./chunk-6Z6SNY3X.js";
+
+// src/components/data-display/StatCard/StatCard.tsx
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import RemoveIcon from "@mui/icons-material/Remove";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DIRECTION_ICON = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon
+};
+var DIRECTION_WORD = {
+  up: "Increase of",
+  down: "Decrease of",
+  neutral: "Change of"
+};
+var IMPLIED_TONE = {
+  up: "positive",
+  down: "negative",
+  neutral: "neutral"
+};
+function toneColor(tone, theme) {
+  if (tone === "positive") return theme.palette.success.main;
+  if (tone === "negative") return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+function deltaAriaLabel(delta) {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : "";
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+function DeltaRow({ delta, testId }) {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 0.5,
+      sx: { alignItems: "center", flexWrap: "wrap" },
+      "data-testid": testId,
+      "data-direction": delta.direction,
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", sx: { fontSize: "1rem", color } }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            component: "span",
+            "aria-label": deltaAriaLabel(delta),
+            sx: { color, fontWeight: theme.typography.fontWeightMedium },
+            children: delta.value
+          }
+        ),
+        delta.label && /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", sx: { color: theme.palette.text.secondary }, children: delta.label })
+      ]
+    }
+  );
+}
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+    icon && /* @__PURE__ */ jsx(
+      Box,
+      {
+        "aria-hidden": "true",
+        "data-testid": `${testId}-icon`,
+        sx: { display: "flex", color: theme.palette.text.secondary },
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        id: labelId,
+        variant: "caption",
+        component: "p",
+        "data-testid": `${testId}-label`,
+        sx: { color: theme.palette.text.secondary },
+        children: label
+      }
+    )
+  ] });
+}
+function ValueRow({
+  value,
+  loading,
+  testId
+}) {
+  const theme = useTheme();
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 28,
+        width: "60%",
+        borderRadius: 4,
+        "data-testid": `${testId}-value-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant: "h6",
+      component: "p",
+      "data-testid": `${testId}-value`,
+      sx: {
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: "anywhere"
+      },
+      children: value
+    }
+  );
+}
+function DeltaSlot({
+  delta,
+  loading,
+  testId
+}) {
+  if (!delta) return null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        variant: "rectangular",
+        height: 16,
+        width: "40%",
+        borderRadius: 4,
+        "data-testid": `${testId}-delta-skeleton`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DeltaRow, { delta, testId: `${testId}-delta` });
+}
+var StatCard = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || "stat-card";
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-busy": loading || void 0,
+        className,
+        "data-testid": testId,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx(LabelRow, { label, icon, labelId, testId }),
+          /* @__PURE__ */ jsx(ValueRow, { value, loading, testId }),
+          /* @__PURE__ */ jsx(DeltaSlot, { delta, loading, testId }),
+          hint && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              component: "p",
+              "data-testid": `${testId}-hint`,
+              sx: { color: theme.palette.text.secondary },
+              children: hint
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+var StatCard_default = StatCard;
+
+export {
+  StatCard,
+  StatCard_default
+};
+//# sourceMappingURL=chunk-LGH5HJQF.js.map

package/dist/chunk-LGH5HJQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/StatCard/StatCard.tsx"],"sourcesContent":["import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';\nimport RemoveIcon from '@mui/icons-material/Remove';\nimport { Box, Stack, Typography, useTheme, type Theme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport type {\n  StatCardDelta,\n  StatCardDeltaDirection,\n  StatCardDeltaTone,\n  StatCardProps,\n} from './StatCard.types';\n\n/** The arrow each direction renders (decorative — the text carries the meaning). */\nconst DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {\n  up: ArrowUpwardIcon,\n  down: ArrowDownwardIcon,\n  neutral: RemoveIcon,\n};\n\n/** How each direction reads to a screen reader when no `ariaLabel` is given. */\nconst DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {\n  up: 'Increase of',\n  down: 'Decrease of',\n  neutral: 'Change of',\n};\n\n/** A direction's natural tone, used when the caller doesn't override it. */\nconst IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {\n  up: 'positive',\n  down: 'negative',\n  neutral: 'neutral',\n};\n\n/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */\nfunction toneColor(tone: StatCardDeltaTone, theme: Theme): string {\n  if (tone === 'positive') return theme.palette.success.main;\n  if (tone === 'negative') return theme.palette.error.main;\n  return theme.palette.text.secondary;\n}\n\n/** The screen-reader sentence for a delta: caller override, else generated. */\nfunction deltaAriaLabel(delta: StatCardDelta): string {\n  if (delta.ariaLabel) return delta.ariaLabel;\n  const suffix = delta.label ? ` ${delta.label}` : '';\n  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;\n}\n\n/** The delta row: a decorative arrow plus the pre-formatted change and context. */\nfunction DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];\n  const Icon = DIRECTION_ICON[delta.direction];\n  const color = toneColor(tone, theme);\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0.5}\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      data-testid={testId}\n      data-direction={delta.direction}\n      data-tone={tone}\n    >\n      {/* The arrow duplicates what the aria-label already says, so it is hidden\n          from assistive tech rather than read twice. */}\n      <Icon aria-hidden=\"true\" sx={{ fontSize: '1rem', color }} />\n      <Typography\n        variant=\"body2\"\n        component=\"span\"\n        aria-label={deltaAriaLabel(delta)}\n        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}\n      >\n        {delta.value}\n      </Typography>\n      {delta.label && (\n        <Typography variant=\"caption\" component=\"span\" sx={{ color: theme.palette.text.secondary }}>\n          {delta.label}\n        </Typography>\n      )}\n    </Stack>\n  );\n}\n\n/** The label row: the optional decorative icon plus the metric's name. */\nfunction LabelRow({\n  label,\n  icon,\n  labelId,\n  testId,\n}: Pick<StatCardProps, 'label' | 'icon'> & {\n  labelId: string;\n  testId: string;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Stack direction=\"row\" spacing={1} sx={{ alignItems: 'center' }}>\n      {icon && (\n        <Box\n          aria-hidden=\"true\"\n          data-testid={`${testId}-icon`}\n          sx={{ display: 'flex', color: theme.palette.text.secondary }}\n        >\n          {icon}\n        </Box>\n      )}\n      <Typography\n        id={labelId}\n        variant=\"caption\"\n        component=\"p\"\n        data-testid={`${testId}-label`}\n        sx={{ color: theme.palette.text.secondary }}\n      >\n        {label}\n      </Typography>\n    </Stack>\n  );\n}\n\n/** The figure itself, or its skeleton while the tile is loading. */\nfunction ValueRow({\n  value,\n  loading,\n  testId,\n}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={28}\n        width=\"60%\"\n        borderRadius={4}\n        data-testid={`${testId}-value-skeleton`}\n      />\n    );\n  }\n  return (\n    <Typography\n      variant=\"h6\"\n      component=\"p\"\n      data-testid={`${testId}-value`}\n      sx={{\n        fontWeight: theme.typography.fontWeightMedium,\n        color: theme.palette.text.primary,\n        overflowWrap: 'anywhere',\n      }}\n    >\n      {value}\n    </Typography>\n  );\n}\n\n/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */\nfunction DeltaSlot({\n  delta,\n  loading,\n  testId,\n}: {\n  delta?: StatCardDelta;\n  loading: boolean;\n  testId: string;\n}): React.JSX.Element | null {\n  if (!delta) return null;\n  if (loading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        height={16}\n        width=\"40%\"\n        borderRadius={4}\n        data-testid={`${testId}-delta-skeleton`}\n      />\n    );\n  }\n  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;\n}\n\n/**\n * StatCard (KPI tile) — one labelled figure with an optional period-over-period\n * delta, leading icon, hint line and loading state. The single shared tile for\n * dashboards and summary bands, so surfaces stop hand-rolling the pattern.\n *\n * The tile is presentation only: `value` and `delta.value` arrive ALREADY\n * formatted, so locale/currency rules stay with the data owner. Colour comes\n * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's\n * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in\n * cost can render \"up\" while reading as negative.\n */\nexport const StatCard: React.FC<StatCardProps> = React.memo(\n  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {\n    const theme = useTheme();\n    const labelId = React.useId();\n    const testId = dataTestId || 'stat-card';\n\n    return (\n      <Box\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-busy={loading || undefined}\n        className={className}\n        data-testid={testId}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: theme.spacing(0.5),\n          padding: theme.spacing(2),\n          borderRadius: theme.shape.borderRadius / 4,\n          border: `1px solid ${theme.palette.divider}`,\n          backgroundColor: theme.palette.background.paper,\n          minWidth: 0,\n        }}\n      >\n        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />\n        <ValueRow value={value} loading={loading} testId={testId} />\n        <DeltaSlot delta={delta} loading={loading} testId={testId} />\n        {hint && (\n          <Typography\n            variant=\"caption\"\n            component=\"p\"\n            data-testid={`${testId}-hint`}\n            sx={{ color: theme.palette.text.secondary }}\n          >\n            {hint}\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n\nexport default StatCard;\n"],"mappings":"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","names":[]}

package/dist/chunk-LHTSYQIW.js

@@ -0,0 +1,297 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  Box
+} from "./chunk-34DQAXL2.js";
+import {
+  Button
+} from "./chunk-GD7HXHOT.js";
+import {
+  Text
+} from "./chunk-R52HJAYO.js";
+
+// src/components/data-display/DataViews/data-views-view-nav.tsx
+import ChevronLeftRoundedIcon from "@mui/icons-material/ChevronLeftRounded";
+import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
+import GroupOutlinedIcon from "@mui/icons-material/GroupOutlined";
+import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import StarOutlineRoundedIcon from "@mui/icons-material/StarOutlined";
+import StarOutlineRoundedIcon2 from "@mui/icons-material/StarOutlineRounded";
+import { IconButton } from "@mui/material";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import RestartAltRoundedIcon from "@mui/icons-material/RestartAltRounded";
+import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var rowSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  width: "100%",
+  px: 1.25,
+  py: 1,
+  border: 0,
+  borderRadius: 1,
+  bgcolor: "transparent",
+  cursor: "pointer",
+  font: "inherit",
+  fontSize: "0.8125rem",
+  textAlign: "left",
+  color: "text.primary",
+  "&:hover": { bgcolor: "action.hover" }
+};
+function ViewsList({
+  handlers,
+  onOpenActions,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { views, activeViewId, onSelectView } = handlers;
+  const onMain = !activeViewId;
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 0.75 }, "data-testid": `${testIdPrefix}-views-list`, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "button",
+        type: "button",
+        onClick: () => onSelectView(null),
+        "data-testid": `${testIdPrefix}-view-main`,
+        sx: { ...rowSx, color: onMain ? "primary.main" : "text.primary", fontWeight: onMain ? 600 : 400 },
+        children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1 }, children: copy.nav.mainView }),
+          onMain && /* @__PURE__ */ jsx(CheckRoundedIcon, { fontSize: "small" })
+        ]
+      }
+    ),
+    views.map((view) => {
+      const active = view.id === activeViewId;
+      return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            onClick: () => onSelectView(view.id),
+            "data-testid": `${testIdPrefix}-view-${view.id}`,
+            sx: { ...rowSx, minWidth: 0, color: active ? "primary.main" : "text.primary", fontWeight: active ? 600 : 400 },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: view.name }),
+              view.isDefault && /* @__PURE__ */ jsx(StarOutlineRoundedIcon, { fontSize: "small", sx: { color: "warning.main" }, titleAccess: copy.nav.defaultTag }),
+              view.pinned && /* @__PURE__ */ jsx(PushPinOutlinedIcon, { fontSize: "small", sx: { color: "text.disabled" }, titleAccess: "Fixada" }),
+              view.shared && /* @__PURE__ */ jsx(GroupOutlinedIcon, { fontSize: "small", sx: { color: "text.disabled" }, titleAccess: "Compartilhada" }),
+              active && /* @__PURE__ */ jsx(CheckRoundedIcon, { fontSize: "small" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "small",
+            onClick: () => onOpenActions(view),
+            "aria-label": copy.nav.viewOptions(view.name),
+            "data-testid": `${testIdPrefix}-view-${view.id}-menu`,
+            children: /* @__PURE__ */ jsx(MoreVertRoundedIcon, { fontSize: "small" })
+          }
+        )
+      ] }, view.id);
+    }),
+    views.length === 0 && /* @__PURE__ */ jsx(Text, { variant: "caption", as: "p", children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { display: "block", px: 1.25, py: 1.5, color: "text.secondary", lineHeight: 1.6 }, children: copy.nav.emptyHint }) })
+  ] });
+}
+function ViewActions({
+  view,
+  handlers,
+  onBack,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { onEditView, onPatchView, onDeleteView } = handlers;
+  const action = (key, Icon, label, onClick, opts = {}) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "button",
+      type: "button",
+      onClick,
+      "data-testid": `${testIdPrefix}-view-action-${key}`,
+      sx: {
+        ...rowSx,
+        color: opts.danger ? "error.main" : "text.primary",
+        "&:hover": { bgcolor: opts.danger ? "error.lighter" : "action.hover" }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { fontSize: "small", sx: { color: opts.danger ? "inherit" : "text.disabled" } }),
+        /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1 }, children: label }),
+        opts.on && /* @__PURE__ */ jsx(CheckRoundedIcon, { fontSize: "small", color: "primary" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: { p: 0.75 }, "data-testid": `${testIdPrefix}-view-actions`, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "button",
+        type: "button",
+        onClick: onBack,
+        "data-testid": `${testIdPrefix}-view-actions-back`,
+        sx: { ...rowSx, color: "text.secondary", fontSize: "0.75rem" },
+        children: [
+          /* @__PURE__ */ jsx(ChevronLeftRoundedIcon, { fontSize: "small" }),
+          /* @__PURE__ */ jsx(Box, { component: "span", sx: { flex: 1, fontWeight: 600, color: "text.primary" }, children: view.name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: { my: 0.5, borderTop: 1, borderColor: "divider" } }),
+    action("edit", EditOutlinedIcon, copy.nav.editView, () => onEditView(view)),
+    action("default", StarOutlineRoundedIcon2, copy.nav.setDefault, () => onPatchView(view, { isDefault: !view.isDefault }), { on: view.isDefault }),
+    action("pin", PushPinOutlinedIcon, copy.nav.pinToSidebar, () => onPatchView(view, { pinned: !view.pinned }), { on: view.pinned }),
+    action("share", GroupOutlinedIcon, copy.nav.shareWithTeam, () => onPatchView(view, { shared: !view.shared }), { on: view.shared }),
+    /* @__PURE__ */ jsx(Box, { sx: { my: 0.5, borderTop: 1, borderColor: "divider" } }),
+    action("delete", DeleteOutlineRoundedIcon, copy.nav.deleteView, () => onDeleteView(view), { danger: true })
+  ] });
+}
+function ToggleContents({
+  view,
+  open,
+  interactive,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { component: "span", sx: { fontWeight: 600 }, "data-testid": `${testIdPrefix}-display-view-name`, children: view.activeViewName ?? "{copy.nav.mainView}" }),
+    view.dirty && /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        "aria-label": copy.nav.unsavedChanges,
+        "data-testid": `${testIdPrefix}-display-dirty`,
+        sx: { height: 6, width: 6, borderRadius: "50%", bgcolor: "primary.main" }
+      }
+    ),
+    interactive && /* @__PURE__ */ jsx(
+      KeyboardArrowDownRoundedIcon,
+      {
+        fontSize: "small",
+        sx: { color: "text.disabled", transform: open ? "rotate(180deg)" : "none" }
+      }
+    )
+  ] });
+}
+function ViewToggle({
+  view,
+  open,
+  onToggle,
+  testIdPrefix
+}) {
+  const interactive = Boolean(view.nav);
+  const affordance = interactive ? { px: 0.75, py: 0.25, cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : { px: 0, py: 0, cursor: "default" };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: interactive ? "button" : "div",
+      type: interactive ? "button" : void 0,
+      onClick: interactive ? onToggle : void 0,
+      "aria-expanded": interactive ? open : void 0,
+      "data-testid": `${testIdPrefix}-display-view-toggle`,
+      sx: {
+        ml: "auto",
+        display: "flex",
+        alignItems: "center",
+        gap: 0.75,
+        minWidth: 0,
+        border: 0,
+        borderRadius: 1,
+        font: "inherit",
+        fontSize: "0.75rem",
+        bgcolor: open ? "action.selected" : "transparent",
+        ...affordance
+      },
+      children: /* @__PURE__ */ jsx(ToggleContents, { view, open, interactive, testIdPrefix })
+    }
+  );
+}
+function ViewHeader(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: "divider" }, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { textTransform: "uppercase", letterSpacing: 0.5, color: "text.disabled" }, children: copy.nav.label }) }),
+    /* @__PURE__ */ jsx(ViewToggle, { ...props })
+  ] });
+}
+function ViewFooter({
+  view,
+  onDone,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 1,
+        px: 1.5,
+        py: 1,
+        borderTop: 1,
+        borderColor: "divider",
+        bgcolor: "action.hover"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "text",
+            size: "sm",
+            color: "neutral",
+            disabled: !view.dirty,
+            startIcon: /* @__PURE__ */ jsx(RestartAltRoundedIcon, { fontSize: "small" }),
+            onClick: view.onReset,
+            dataTestId: `${testIdPrefix}-display-reset`,
+            children: copy.nav.reset
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          view.onUpdate && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "sm",
+              color: "neutral",
+              onClick: () => {
+                view.onSaveAs();
+                onDone();
+              },
+              dataTestId: `${testIdPrefix}-display-save-as`,
+              children: copy.nav.saveAs
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              disabled: !view.dirty,
+              startIcon: /* @__PURE__ */ jsx(SaveOutlinedIcon, { fontSize: "small" }),
+              onClick: () => {
+                (view.onUpdate ?? view.onSaveAs)();
+                onDone();
+              },
+              dataTestId: `${testIdPrefix}-display-save`,
+              children: view.onUpdate ? copy.nav.update : copy.nav.save
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  ViewsList,
+  ViewActions,
+  ViewHeader,
+  ViewFooter
+};
+//# sourceMappingURL=chunk-LHTSYQIW.js.map

package/dist/chunk-LHTSYQIW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-view-nav.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * The saved views, rendered INSIDE the Exibir panel rather than in a dropdown\n * of their own.\n *\n * Two levels, both of them replacing the panel's BODY (the tabs stay put):\n * the list of views, and one view's actions. It is a drill-down and not a\n * nested menu on purpose — an absolutely positioned popover inside the panel's\n * own scroll container gets clipped by it, which is how copy.nav.deleteView ends\n * up unreachable. One level, no clipping, and it works on touch.\n */\nimport ChevronLeftRoundedIcon from \"@mui/icons-material/ChevronLeftRounded\";\nimport CheckRoundedIcon from \"@mui/icons-material/CheckRounded\";\nimport DeleteOutlineRoundedIcon from \"@mui/icons-material/DeleteOutlineRounded\";\nimport EditOutlinedIcon from \"@mui/icons-material/EditOutlined\";\nimport GroupOutlinedIcon from \"@mui/icons-material/GroupOutlined\";\nimport MoreVertRoundedIcon from \"@mui/icons-material/MoreVertRounded\";\nimport PushPinOutlinedIcon from \"@mui/icons-material/PushPinOutlined\";\nimport StarOutlineRoundedIcon from \"@mui/icons-material/StarOutlined\";\nimport StarOutlineRoundedIcon2 from \"@mui/icons-material/StarOutlineRounded\";\nimport { IconButton } from \"@mui/material\";\n\nimport KeyboardArrowDownRoundedIcon from \"@mui/icons-material/KeyboardArrowDownRounded\";\nimport RestartAltRoundedIcon from \"@mui/icons-material/RestartAltRounded\";\nimport SaveOutlinedIcon from \"@mui/icons-material/SaveOutlined\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { Button } from \"../../form/Button\";\nimport { Box } from \"../../../mui/Box\";\nimport { Text } from \"../../typography/Text\";\n\nimport type { DisplayPanelView } from \"./data-views-display-panel\";\nimport type { SavedViewSummary } from \"./data-views-types\";\n\n/** What the panel needs to drive the views without owning any of them. */\nexport interface ViewNavHandlers {\n  views: SavedViewSummary[];\n  activeViewId?: string | null;\n  /** `null` selects the built-in \"{copy.nav.mainView}\". */\n  onSelectView: (id: string | null) => void;\n  onEditView: (view: SavedViewSummary) => void;\n  onPatchView: (\n    view: SavedViewSummary,\n    changes: Partial<Pick<SavedViewSummary, \"isDefault\" | \"pinned\" | \"shared\">>,\n  ) => void;\n  onDeleteView: (view: SavedViewSummary) => void;\n}\n\nconst rowSx = {\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 1,\n  width: \"100%\",\n  px: 1.25,\n  py: 1,\n  border: 0,\n  borderRadius: 1,\n  bgcolor: \"transparent\",\n  cursor: \"pointer\",\n  font: \"inherit\",\n  fontSize: \"0.8125rem\",\n  textAlign: \"left\",\n  color: \"text.primary\",\n  \"&:hover\": { bgcolor: \"action.hover\" },\n} as const;\n\n/** The list: the built-in view, then each saved one with its own \"⋮\". */\nexport function ViewsList({\n  handlers,\n  onOpenActions,\n  testIdPrefix,\n}: {\n  handlers: ViewNavHandlers;\n  onOpenActions: (view: SavedViewSummary) => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { views, activeViewId, onSelectView } = handlers;\n  const onMain = !activeViewId;\n  return (\n    <Box sx={{ p: 0.75 }} data-testid={`${testIdPrefix}-views-list`}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={() => onSelectView(null)}\n        data-testid={`${testIdPrefix}-view-main`}\n        sx={{ ...rowSx, color: onMain ? \"primary.main\" : \"text.primary\", fontWeight: onMain ? 600 : 400 }}\n      >\n        <Box component=\"span\" sx={{ flex: 1 }}>\n          {copy.nav.mainView}\n        </Box>\n        {onMain && <CheckRoundedIcon fontSize=\"small\" />}\n      </Box>\n\n      {views.map((view) => {\n        const active = view.id === activeViewId;\n        return (\n          <Box key={view.id} sx={{ display: \"flex\", alignItems: \"center\" }}>\n            <Box\n              component=\"button\"\n              type=\"button\"\n              onClick={() => onSelectView(view.id)}\n              data-testid={`${testIdPrefix}-view-${view.id}`}\n              sx={{ ...rowSx, minWidth: 0, color: active ? \"primary.main\" : \"text.primary\", fontWeight: active ? 600 : 400 }}\n            >\n              <Box component=\"span\" sx={{ flex: 1, minWidth: 0, overflow: \"hidden\", textOverflow: \"ellipsis\", whiteSpace: \"nowrap\" }}>\n                {view.name}\n              </Box>\n              {/* What the row-menu toggles DID, readable without opening it:\n                  a view set as default, pinned or shared says so here. */}\n              {view.isDefault && (\n                <StarOutlineRoundedIcon fontSize=\"small\" sx={{ color: \"warning.main\" }} titleAccess={copy.nav.defaultTag} />\n              )}\n              {view.pinned && (\n                <PushPinOutlinedIcon fontSize=\"small\" sx={{ color: \"text.disabled\" }} titleAccess=\"Fixada\" />\n              )}\n              {view.shared && (\n                <GroupOutlinedIcon fontSize=\"small\" sx={{ color: \"text.disabled\" }} titleAccess=\"Compartilhada\" />\n              )}\n              {active && <CheckRoundedIcon fontSize=\"small\" />}\n            </Box>\n            <IconButton\n              size=\"small\"\n              onClick={() => onOpenActions(view)}\n              aria-label={copy.nav.viewOptions(view.name)}\n              data-testid={`${testIdPrefix}-view-${view.id}-menu`}\n            >\n              <MoreVertRoundedIcon fontSize=\"small\" />\n            </IconButton>\n          </Box>\n        );\n      })}\n\n      {views.length === 0 && (\n        <Text variant=\"caption\" as=\"p\">\n          <Box component=\"span\" sx={{ display: \"block\", px: 1.25, py: 1.5, color: \"text.secondary\", lineHeight: 1.6 }}>\n            {copy.nav.emptyHint}\n          </Box>\n        </Text>\n      )}\n    </Box>\n  );\n}\n\n/** One view's actions, reached from its \"⋮\" and left by the back row. */\nexport function ViewActions({\n  view,\n  handlers,\n  onBack,\n  testIdPrefix,\n}: {\n  view: SavedViewSummary;\n  handlers: ViewNavHandlers;\n  onBack: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const { onEditView, onPatchView, onDeleteView } = handlers;\n  const action = (\n    key: string,\n    Icon: typeof StarOutlineRoundedIcon2,\n    label: string,\n    onClick: () => void,\n    opts: { on?: boolean; danger?: boolean } = {},\n  ): React.JSX.Element => (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      onClick={onClick}\n      data-testid={`${testIdPrefix}-view-action-${key}`}\n      sx={{\n        ...rowSx,\n        color: opts.danger ? \"error.main\" : \"text.primary\",\n        \"&:hover\": { bgcolor: opts.danger ? \"error.lighter\" : \"action.hover\" },\n      }}\n    >\n      <Icon fontSize=\"small\" sx={{ color: opts.danger ? \"inherit\" : \"text.disabled\" }} />\n      <Box component=\"span\" sx={{ flex: 1 }}>\n        {label}\n      </Box>\n      {opts.on && <CheckRoundedIcon fontSize=\"small\" color=\"primary\" />}\n    </Box>\n  );\n\n  return (\n    <Box sx={{ p: 0.75 }} data-testid={`${testIdPrefix}-view-actions`}>\n      <Box\n        component=\"button\"\n        type=\"button\"\n        onClick={onBack}\n        data-testid={`${testIdPrefix}-view-actions-back`}\n        sx={{ ...rowSx, color: \"text.secondary\", fontSize: \"0.75rem\" }}\n      >\n        <ChevronLeftRoundedIcon fontSize=\"small\" />\n        <Box component=\"span\" sx={{ flex: 1, fontWeight: 600, color: \"text.primary\" }}>\n          {view.name}\n        </Box>\n      </Box>\n      <Box sx={{ my: 0.5, borderTop: 1, borderColor: \"divider\" }} />\n      {action(\"edit\", EditOutlinedIcon, copy.nav.editView, () => onEditView(view))}\n      {action(\"default\", StarOutlineRoundedIcon2, copy.nav.setDefault, () => onPatchView(view, { isDefault: !view.isDefault }), { on: view.isDefault })}\n      {action(\"pin\", PushPinOutlinedIcon, copy.nav.pinToSidebar, () => onPatchView(view, { pinned: !view.pinned }), { on: view.pinned })}\n      {action(\"share\", GroupOutlinedIcon, copy.nav.shareWithTeam, () => onPatchView(view, { shared: !view.shared }), { on: view.shared })}\n      <Box sx={{ my: 0.5, borderTop: 1, borderColor: \"divider\" }} />\n      {action(\"delete\", DeleteOutlineRoundedIcon, copy.nav.deleteView, () => onDeleteView(view), { danger: true })}\n    </Box>\n  );\n}\n\n/** Name, unsaved dot, chevron — the parts, so the toggle has one decision. */\nfunction ToggleContents({\n  view,\n  open,\n  interactive,\n  testIdPrefix,\n}: {\n  view: DisplayPanelView;\n  open: boolean;\n  interactive: boolean;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      <Box component=\"span\" sx={{ fontWeight: 600 }} data-testid={`${testIdPrefix}-display-view-name`}>\n        {view.activeViewName ?? \"{copy.nav.mainView}\"}\n      </Box>\n      {view.dirty && (\n        <Box\n          component=\"span\"\n          aria-label={copy.nav.unsavedChanges}\n          data-testid={`${testIdPrefix}-display-dirty`}\n          sx={{ height: 6, width: 6, borderRadius: \"50%\", bgcolor: \"primary.main\" }}\n        />\n      )}\n      {interactive && (\n        <KeyboardArrowDownRoundedIcon\n          fontSize=\"small\"\n          sx={{ color: \"text.disabled\", transform: open ? \"rotate(180deg)\" : \"none\" }}\n        />\n      )}\n    </>\n  );\n}\n\n/** The name + unsaved dot; a button only when there are views to open. */\nfunction ViewToggle({\n  view,\n  open,\n  onToggle,\n  testIdPrefix,\n}: {\n  view: DisplayPanelView;\n  open: boolean;\n  onToggle: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const interactive = Boolean(view.nav);\n  // One decision, not eight: a panel with no views renders the same row as\n  // plain text rather than as a button that opens nothing.\n  const affordance = interactive\n    ? { px: 0.75, py: 0.25, cursor: \"pointer\", \"&:hover\": { bgcolor: \"action.hover\" } }\n    : { px: 0, py: 0, cursor: \"default\" };\n  return (\n    <Box\n      component={interactive ? \"button\" : \"div\"}\n      type={interactive ? \"button\" : undefined}\n      onClick={interactive ? onToggle : undefined}\n      aria-expanded={interactive ? open : undefined}\n      data-testid={`${testIdPrefix}-display-view-toggle`}\n      sx={{\n        ml: \"auto\",\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 0.75,\n        minWidth: 0,\n        border: 0,\n        borderRadius: 1,\n        font: \"inherit\",\n        fontSize: \"0.75rem\",\n        bgcolor: open ? \"action.selected\" : \"transparent\",\n        ...affordance,\n      }}\n    >\n      <ToggleContents view={view} open={open} interactive={interactive} testIdPrefix={testIdPrefix} />\n    </Box>\n  );\n}\n\n/** The VISÃO row above the tabs. */\nexport function ViewHeader(props: {\n  view: DisplayPanelView;\n  open: boolean;\n  onToggle: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1, px: 1.5, py: 1, borderBottom: 1, borderColor: \"divider\" }}>\n      <Text variant=\"caption\" as=\"span\">\n        <Box component=\"span\" sx={{ textTransform: \"uppercase\", letterSpacing: 0.5, color: \"text.disabled\" }}>\n          {copy.nav.label}\n        </Box>\n      </Text>\n      <ViewToggle {...props} />\n    </Box>\n  );\n}\n\n/** Redefinir / Salvar como nova / Atualizar, pinned below the tabs. */\nexport function ViewFooter({\n  view,\n  onDone,\n  testIdPrefix,\n}: {\n  view: DisplayPanelView;\n  onDone: () => void;\n  testIdPrefix: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <Box\n      sx={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        gap: 1,\n        px: 1.5,\n        py: 1,\n        borderTop: 1,\n        borderColor: \"divider\",\n        bgcolor: \"action.hover\",\n      }}\n    >\n      <Button\n        variant=\"text\"\n        size=\"sm\"\n        color=\"neutral\"\n        disabled={!view.dirty}\n        startIcon={<RestartAltRoundedIcon fontSize=\"small\" />}\n        onClick={view.onReset}\n        dataTestId={`${testIdPrefix}-display-reset`}\n      >\n        {copy.nav.reset}\n      </Button>\n      <Box sx={{ display: \"flex\", alignItems: \"center\", gap: 1 }}>\n        {/* Only meaningful with a view APPLIED: on {copy.nav.mainView} the single\n            \"Salvar visão\" already is \"save as new\". */}\n        {view.onUpdate && (\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            color=\"neutral\"\n            onClick={() => {\n              view.onSaveAs();\n              onDone();\n            }}\n            dataTestId={`${testIdPrefix}-display-save-as`}\n          >\n            {copy.nav.saveAs}\n          </Button>\n        )}\n        {/* Enabled only when something in Ordenar / Colunas / Exibição (or the\n            filters the view also stores) differs from the applied view: the\n            filled button is a STATE — \"there is something to save\" — not a\n            permanent fixture. */}\n        <Button\n          size=\"sm\"\n          disabled={!view.dirty}\n          startIcon={<SaveOutlinedIcon fontSize=\"small\" />}\n          onClick={() => {\n            (view.onUpdate ?? view.onSaveAs)();\n            onDone();\n          }}\n          dataTestId={`${testIdPrefix}-display-save`}\n        >\n          {view.onUpdate ? copy.nav.update : copy.nav.save}\n        </Button>\n      </Box>\n    </Box>\n  );\n}\n\n"],"mappings":"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","names":[]}