@12-apps/ui 6.11.0 → 6.12.0

package/dist/chunk-QTPKACVO.js

@@ -0,0 +1,297 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-6HLRXICF.js";
+import {
+  Text
+} from "./chunk-VRHBJXZ7.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/IconButton/index.js";
+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(default2, { sx: { p: 0.75 }, "data-testid": `${testIdPrefix}-views-list`, children: [
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        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(default2, { 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(default2, { sx: { display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(
+          default2,
+          {
+            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(default2, { 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(default2, { 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(
+    default2,
+    {
+      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(default2, { component: "span", sx: { flex: 1 }, children: label }),
+        opts.on && /* @__PURE__ */ jsx(CheckRoundedIcon, { fontSize: "small", color: "primary" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(default2, { sx: { p: 0.75 }, "data-testid": `${testIdPrefix}-view-actions`, children: [
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        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(default2, { component: "span", sx: { flex: 1, fontWeight: 600, color: "text.primary" }, children: view.name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(default2, { 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(default2, { 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(default2, { component: "span", sx: { fontWeight: 600 }, "data-testid": `${testIdPrefix}-display-view-name`, children: view.activeViewName ?? "{copy.nav.mainView}" }),
+    view.dirty && /* @__PURE__ */ jsx(
+      default2,
+      {
+        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(
+    default2,
+    {
+      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(default2, { 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(default2, { 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(
+    default2,
+    {
+      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(default2, { 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-QTPKACVO.js.map

package/dist/chunk-QTPKACVO.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/IconButton/index.js\";\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":["default"]}

package/dist/chunk-QVWNK4JO.js

@@ -0,0 +1,22 @@
+// src/components/data-display/Chart/chart-format.ts
+var formatters = {
+  brl: new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }),
+  percent: new Intl.NumberFormat("pt-BR", { style: "percent", maximumFractionDigits: 1 }),
+  compact: new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 }),
+  integer: new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 0 }),
+  decimal: new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 2 })
+};
+function formatChartValue(value, format = "decimal") {
+  if (!Number.isFinite(value)) return "";
+  if (format === "brl") return formatters.brl.format(value / 100);
+  return formatters[format].format(value);
+}
+function chartValueFormatter(format) {
+  return (value) => formatChartValue(value, format);
+}
+
+export {
+  formatChartValue,
+  chartValueFormatter
+};
+//# sourceMappingURL=chunk-QVWNK4JO.js.map

package/dist/chunk-QVWNK4JO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-format.ts"],"sourcesContent":["import type { ChartNumberFormat } from './ChartSpec.types';\n\nconst formatters: Record<ChartNumberFormat, Intl.NumberFormat> = {\n  brl: new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }),\n  percent: new Intl.NumberFormat('pt-BR', { style: 'percent', maximumFractionDigits: 1 }),\n  compact: new Intl.NumberFormat('pt-BR', { notation: 'compact', maximumFractionDigits: 1 }),\n  integer: new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 0 }),\n  decimal: new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 2 }),\n};\n\n/**\n * Format a chart value with one of the serializable number formats.\n * `brl` expects integer centavos (repo-wide money convention); `percent`\n * expects a fraction (0.15 → \"15%\"). Non-finite values render as an empty\n * string so a null-ish row never draws \"NaN\" into a tooltip or axis.\n */\nexport function formatChartValue(value: number, format: ChartNumberFormat = 'decimal'): string {\n  if (!Number.isFinite(value)) return '';\n  if (format === 'brl') return formatters.brl.format(value / 100);\n  return formatters[format].format(value);\n}\n\n/** Curried {@link formatChartValue}, memo-friendly for tooltip/axis props. */\nexport function chartValueFormatter(format?: ChartNumberFormat): (value: number) => string {\n  return (value: number) => formatChartValue(value, format);\n}\n"],"mappings":";AAEA,IAAM,aAA2D;AAAA,EAC/D,KAAK,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,YAAY,UAAU,MAAM,CAAC;AAAA,EAC1E,SAAS,IAAI,KAAK,aAAa,SAAS,EAAE,OAAO,WAAW,uBAAuB,EAAE,CAAC;AAAA,EACtF,SAAS,IAAI,KAAK,aAAa,SAAS,EAAE,UAAU,WAAW,uBAAuB,EAAE,CAAC;AAAA,EACzF,SAAS,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAAA,EACpE,SAAS,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AACtE;AAQO,SAAS,iBAAiB,OAAe,SAA4B,WAAmB;AAC7F,MAAI,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACpC,MAAI,WAAW,MAAO,QAAO,WAAW,IAAI,OAAO,QAAQ,GAAG;AAC9D,SAAO,WAAW,MAAM,EAAE,OAAO,KAAK;AACxC;AAGO,SAAS,oBAAoB,QAAuD;AACzF,SAAO,CAAC,UAAkB,iBAAiB,OAAO,MAAM;AAC1D;","names":[]}

package/dist/chunk-QWVETTIY.js

@@ -0,0 +1,199 @@
+// src/components/form/UploadButton/UploadButton.hooks.ts
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+var SIMULATED_PROGRESS_CEILING = 90;
+var SIMULATED_PROGRESS_STEP = 10;
+var SIMULATED_PROGRESS_INTERVAL_MS = 100;
+var PROGRESS_RESET_DELAY_MS = 1e3;
+var BYTES_PER_MB = 1024 * 1024;
+var INITIAL_STATE = {
+  isDragOver: false,
+  isUploading: false,
+  uploadProgress: 0,
+  error: null
+};
+function useFileValidator(maxSizeMB, validate) {
+  return useCallback(
+    (file) => {
+      if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {
+        return `File size must be less than ${maxSizeMB}MB`;
+      }
+      return validate ? validate(file) : null;
+    },
+    [maxSizeMB, validate]
+  );
+}
+function useUploadRunner(onUpload, externalUploading, setState) {
+  return useCallback(
+    async (file) => {
+      if (!onUpload || externalUploading) return;
+      try {
+        setState((prev) => ({ ...prev, isUploading: true, uploadProgress: 0 }));
+        const timer = globalThis.setInterval(() => {
+          setState((prev) => {
+            if (prev.uploadProgress >= SIMULATED_PROGRESS_CEILING) {
+              globalThis.clearInterval(timer);
+              return prev;
+            }
+            return { ...prev, uploadProgress: prev.uploadProgress + SIMULATED_PROGRESS_STEP };
+          });
+        }, SIMULATED_PROGRESS_INTERVAL_MS);
+        await onUpload(file);
+        globalThis.clearInterval(timer);
+        setState((prev) => ({ ...prev, isUploading: false, uploadProgress: 100 }));
+        globalThis.setTimeout(() => {
+          setState((prev) => ({ ...prev, uploadProgress: 0 }));
+        }, PROGRESS_RESET_DELAY_MS);
+      } catch (error) {
+        setState((prev) => ({
+          ...prev,
+          isUploading: false,
+          uploadProgress: 0,
+          error: error instanceof Error ? error.message : "Upload failed"
+        }));
+      }
+    },
+    [onUpload, externalUploading, setState]
+  );
+}
+function useUploadSelection({
+  onSelect,
+  multiple,
+  onSelectMany,
+  onUpload,
+  externalUploading,
+  validateFile
+}) {
+  const [state, setState] = useState(INITIAL_STATE);
+  const runUpload = useUploadRunner(onUpload, externalUploading, setState);
+  const selectOne = useCallback(
+    (file) => {
+      const error = validateFile(file);
+      setState((prev) => ({ ...prev, error }));
+      if (error) return;
+      onSelect(file);
+      void runUpload(file);
+    },
+    [onSelect, runUpload, validateFile]
+  );
+  const selectMany = useCallback(
+    (files, accept) => {
+      const accepted = [];
+      let rejection = null;
+      for (const file of files) {
+        const error = validateFile(file);
+        if (error) rejection ?? (rejection = error);
+        else accepted.push(file);
+      }
+      setState((prev) => ({ ...prev, error: rejection }));
+      if (accepted.length === 0) return;
+      accept(accepted);
+      void (async () => {
+        for (const file of accepted) await runUpload(file);
+      })();
+    },
+    [runUpload, validateFile]
+  );
+  const handleFiles = useCallback(
+    (files) => {
+      if (files.length === 0) return;
+      if (multiple && onSelectMany) selectMany(files, onSelectMany);
+      else selectOne(files[0]);
+    },
+    [multiple, onSelectMany, selectMany, selectOne]
+  );
+  const setDragOver = useCallback((isDragOver) => {
+    setState((prev) => ({ ...prev, isDragOver }));
+  }, []);
+  return useMemo(() => ({ state, setDragOver, handleFiles }), [state, setDragOver, handleFiles]);
+}
+var swallow = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+function useDragHandlers(disabled, setDragOver, handleFiles) {
+  return {
+    onDragEnter: (event) => {
+      swallow(event);
+      if (!disabled) setDragOver(true);
+    },
+    onDragLeave: (event) => {
+      swallow(event);
+      setDragOver(false);
+    },
+    onDragOver: swallow,
+    onDrop: (event) => {
+      swallow(event);
+      setDragOver(false);
+      if (!disabled) handleFiles(Array.from(event.dataTransfer.files));
+    }
+  };
+}
+function useUploadButton(props) {
+  const {
+    onSelect,
+    multiple = false,
+    onSelectMany,
+    onUpload,
+    uploading: externalUploading = false,
+    progress: externalProgress = 0,
+    maxSizeMB,
+    validate,
+    helperText,
+    errorText,
+    disabled = false
+  } = props;
+  const inputRef = useRef(null);
+  const inputId = `upload-button-${useId()}`;
+  const validateFile = useFileValidator(maxSizeMB, validate);
+  const { state, setDragOver, handleFiles } = useUploadSelection({
+    onSelect,
+    multiple,
+    onSelectMany,
+    onUpload,
+    externalUploading,
+    validateFile
+  });
+  const drag = useDragHandlers(disabled, setDragOver, handleFiles);
+  const derived = useDerivedUploadState({
+    state,
+    inputId,
+    externalUploading,
+    externalProgress,
+    errorText,
+    helperText
+  });
+  const openPicker = useCallback(() => inputRef.current?.click(), []);
+  const handleInputChange = useCallback(
+    (event) => {
+      handleFiles(Array.from(event.target.files ?? []));
+      event.target.value = "";
+    },
+    [handleFiles]
+  );
+  return { inputRef, inputId, state, drag, derived, openPicker, handleInputChange };
+}
+function useDerivedUploadState({
+  state,
+  inputId,
+  externalUploading,
+  externalProgress,
+  errorText,
+  helperText
+}) {
+  const error = errorText || state.error;
+  const helperId = helperText ? `${inputId}-helper` : void 0;
+  const errorId = error ? `${inputId}-error` : void 0;
+  return {
+    isUploading: externalUploading || state.isUploading,
+    progress: externalUploading ? externalProgress : state.uploadProgress,
+    error,
+    helperId,
+    errorId,
+    describedBy: [helperId, errorId].filter(Boolean).join(" ") || void 0
+  };
+}
+
+export {
+  useUploadButton
+};
+//# sourceMappingURL=chunk-QWVETTIY.js.map

package/dist/chunk-QWVETTIY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/UploadButton/UploadButton.hooks.ts"],"sourcesContent":["import { useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type React from 'react';\n\nimport type { UploadButtonProps, UploadButtonState } from './UploadButton.types';\n\n/** The props {@link useUploadButton} reads — the component's own props. */\ntype UploadButtonHookProps = UploadButtonProps;\n\n/** Percent the simulated progress creeps to while waiting on `onUpload`. */\nconst SIMULATED_PROGRESS_CEILING = 90;\nconst SIMULATED_PROGRESS_STEP = 10;\nconst SIMULATED_PROGRESS_INTERVAL_MS = 100;\nconst PROGRESS_RESET_DELAY_MS = 1000;\nconst BYTES_PER_MB = 1024 * 1024;\n\nconst INITIAL_STATE: UploadButtonState = {\n  isDragOver: false,\n  isUploading: false,\n  uploadProgress: 0,\n  error: null,\n};\n\n/** Narrowed `setState` for the pieces below. */\ntype SetState = React.Dispatch<React.SetStateAction<UploadButtonState>>;\n\n/** The size/custom validation applied to every file, in both modes. */\nfunction useFileValidator(\n  maxSizeMB: number | undefined,\n  validate: ((file: globalThis.File) => string | null) | undefined,\n): (file: globalThis.File) => string | null {\n  return useCallback(\n    (file: globalThis.File): string | null => {\n      if (maxSizeMB && file.size > maxSizeMB * BYTES_PER_MB) {\n        return `File size must be less than ${maxSizeMB}MB`;\n      }\n      return validate ? validate(file) : null;\n    },\n    [maxSizeMB, validate],\n  );\n}\n\n/**\n * The built-in upload path, reachable from BOTH selection modes.\n *\n * Kept apart from selection because it is the only asynchronous part: left\n * inline it was single-file only, which made `onUpload` a silent no-op for a\n * multi-file caller — the worst kind of contract, since nothing fails.\n */\nfunction useUploadRunner(\n  onUpload: ((file: globalThis.File) => Promise<void>) | undefined,\n  externalUploading: boolean,\n  setState: SetState,\n): (file: globalThis.File) => Promise<void> {\n  return useCallback(\n    async (file: globalThis.File) => {\n      if (!onUpload || externalUploading) return;\n      try {\n        setState((prev) => ({ ...prev, isUploading: true, uploadProgress: 0 }));\n        // The real percentage is unknowable through a bare promise, so the bar\n        // creeps to a ceiling and only completes when the promise does.\n        const timer = globalThis.setInterval(() => {\n          setState((prev) => {\n            if (prev.uploadProgress >= SIMULATED_PROGRESS_CEILING) {\n              globalThis.clearInterval(timer);\n              return prev;\n            }\n            return { ...prev, uploadProgress: prev.uploadProgress + SIMULATED_PROGRESS_STEP };\n          });\n        }, SIMULATED_PROGRESS_INTERVAL_MS);\n\n        await onUpload(file);\n\n        globalThis.clearInterval(timer);\n        setState((prev) => ({ ...prev, isUploading: false, uploadProgress: 100 }));\n        globalThis.setTimeout(() => {\n          setState((prev) => ({ ...prev, uploadProgress: 0 }));\n        }, PROGRESS_RESET_DELAY_MS);\n      } catch (error) {\n        setState((prev) => ({\n          ...prev,\n          isUploading: false,\n          uploadProgress: 0,\n          error: error instanceof Error ? error.message : 'Upload failed',\n        }));\n      }\n    },\n    [onUpload, externalUploading, setState],\n  );\n}\n\n/**\n * What {@link useUploadSelection} hands back. Module-private: the published\n * surface is {@link useUploadButton}, not the shape of its internals.\n */\ninterface UploadSelection {\n  state: UploadButtonState;\n  setDragOver: (isDragOver: boolean) => void;\n  /** Route a picked/dropped selection through validation and the callbacks. */\n  handleFiles: (files: globalThis.File[]) => void;\n}\n\ninterface UploadSelectionOptions {\n  onSelect: (file: globalThis.File) => void;\n  multiple: boolean;\n  onSelectMany?: (files: globalThis.File[]) => void;\n  onUpload?: (file: globalThis.File) => Promise<void>;\n  externalUploading: boolean;\n  validateFile: (file: globalThis.File) => string | null;\n}\n\n/**\n * Selection, validation and the optional built-in upload.\n *\n * The rendering layer only reads `state` and calls `handleFiles`; every rule\n * about what a selection means lives here.\n */\nfunction useUploadSelection({\n  onSelect,\n  multiple,\n  onSelectMany,\n  onUpload,\n  externalUploading,\n  validateFile,\n}: UploadSelectionOptions): UploadSelection {\n  const [state, setState] = useState<UploadButtonState>(INITIAL_STATE);\n  const runUpload = useUploadRunner(onUpload, externalUploading, setState);\n\n  const selectOne = useCallback(\n    (file: globalThis.File) => {\n      const error = validateFile(file);\n      setState((prev) => ({ ...prev, error }));\n      if (error) return;\n      onSelect(file);\n      void runUpload(file);\n    },\n    [onSelect, runUpload, validateFile],\n  );\n\n  /**\n   * Multi-file mode is deliberately forgiving: the valid files are handed over\n   * and the first rejection is reported alongside them, so dropping a folder\n   * that also contains a PDF imports the rest instead of refusing the lot.\n   */\n  const selectMany = useCallback(\n    (files: globalThis.File[], accept: (files: globalThis.File[]) => void) => {\n      const accepted: globalThis.File[] = [];\n      let rejection: string | null = null;\n      for (const file of files) {\n        const error = validateFile(file);\n        if (error) rejection ??= error;\n        else accepted.push(file);\n      }\n      setState((prev) => ({ ...prev, error: rejection }));\n      if (accepted.length === 0) return;\n      accept(accepted);\n      // `onUpload` applies here too, one file after another, so the prop means\n      // the same thing in both modes. Sequential because the progress bar is a\n      // single indicator — overlapping uploads would report nonsense.\n      void (async () => {\n        for (const file of accepted) await runUpload(file);\n      })();\n    },\n    [runUpload, validateFile],\n  );\n\n  const handleFiles = useCallback(\n    (files: globalThis.File[]) => {\n      if (files.length === 0) return;\n      if (multiple && onSelectMany) selectMany(files, onSelectMany);\n      else selectOne(files[0] as globalThis.File);\n    },\n    [multiple, onSelectMany, selectMany, selectOne],\n  );\n\n  const setDragOver = useCallback((isDragOver: boolean) => {\n    setState((prev) => ({ ...prev, isDragOver }));\n  }, []);\n\n  return useMemo(() => ({ state, setDragOver, handleFiles }), [state, setDragOver, handleFiles]);\n}\n\n/** Drag-and-drop wiring for the dropzone variant. */\nexport interface DragHandlers {\n  onDragEnter: (event: React.DragEvent) => void;\n  onDragLeave: (event: React.DragEvent) => void;\n  onDragOver: (event: React.DragEvent) => void;\n  onDrop: (event: React.DragEvent) => void;\n}\n\nconst swallow = (event: React.DragEvent): void => {\n  event.preventDefault();\n  event.stopPropagation();\n};\n\nfunction useDragHandlers(\n  disabled: boolean,\n  setDragOver: (isDragOver: boolean) => void,\n  handleFiles: (files: globalThis.File[]) => void,\n): DragHandlers {\n  return {\n    onDragEnter: (event) => {\n      swallow(event);\n      if (!disabled) setDragOver(true);\n    },\n    onDragLeave: (event) => {\n      swallow(event);\n      setDragOver(false);\n    },\n    onDragOver: swallow,\n    onDrop: (event) => {\n      swallow(event);\n      setDragOver(false);\n      if (!disabled) handleFiles(Array.from(event.dataTransfer.files));\n    },\n  };\n}\n\n/** Everything the component needs, assembled from its props in one call. */\ninterface UploadButtonKit {\n  inputRef: React.RefObject<HTMLInputElement | null>;\n  inputId: string;\n  state: UploadButtonState;\n  drag: DragHandlers;\n  derived: DerivedUploadState;\n  openPicker: () => void;\n  handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\n/**\n * The component's whole behaviour in one hook, so the render body stays a thin\n * piece of wiring rather than a place where rules accumulate.\n */\nexport function useUploadButton(props: UploadButtonHookProps): UploadButtonKit {\n  const {\n    onSelect,\n    multiple = false,\n    onSelectMany,\n    onUpload,\n    uploading: externalUploading = false,\n    progress: externalProgress = 0,\n    maxSizeMB,\n    validate,\n    helperText,\n    errorText,\n    disabled = false,\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = `upload-button-${useId()}`;\n  const validateFile = useFileValidator(maxSizeMB, validate);\n  const { state, setDragOver, handleFiles } = useUploadSelection({\n    onSelect,\n    multiple,\n    onSelectMany,\n    onUpload,\n    externalUploading,\n    validateFile,\n  });\n  const drag = useDragHandlers(disabled, setDragOver, handleFiles);\n  const derived = useDerivedUploadState({\n    state,\n    inputId,\n    externalUploading,\n    externalProgress,\n    errorText,\n    helperText,\n  });\n\n  const openPicker = useCallback(() => inputRef.current?.click(), []);\n  const handleInputChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      handleFiles(Array.from(event.target.files ?? []));\n      // Let the same file be picked twice in a row — without this the input\n      // holds the old value and re-selecting it fires no change event.\n      event.target.value = '';\n    },\n    [handleFiles],\n  );\n\n  return { inputRef, inputId, state, drag, derived, openPicker, handleInputChange };\n}\n\n/** The values the render derives from props + internal state. */\ninterface DerivedUploadState {\n  isUploading: boolean;\n  progress: number;\n  error: string | null;\n  helperId?: string;\n  errorId?: string;\n  describedBy?: string;\n}\n\n/**\n * Fold props and internal state into what the render actually shows. External\n * state wins whenever the caller drives it.\n */\nfunction useDerivedUploadState({\n  state,\n  inputId,\n  externalUploading,\n  externalProgress,\n  errorText,\n  helperText,\n}: {\n  state: UploadButtonState;\n  inputId: string;\n  externalUploading: boolean;\n  externalProgress: number;\n  errorText?: string;\n  helperText?: string;\n}): DerivedUploadState {\n  const error = errorText || state.error;\n  const helperId = helperText ? `${inputId}-helper` : undefined;\n  const errorId = error ? `${inputId}-error` : undefined;\n  return {\n    isUploading: externalUploading || state.isUploading,\n    progress: externalUploading ? externalProgress : state.uploadProgress,\n    error,\n    helperId,\n    errorId,\n    describedBy: [helperId, errorId].filter(Boolean).join(' ') || undefined,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-QXTO3G2T.js

@@ -0,0 +1,62 @@
+import {
+  SR_ONLY_SX,
+  STATUS_COLOR
+} from "./chunk-LIG7TKIB.js";
+
+// src/components/layout/SettingsLayout/SettingsStatusMarker.tsx
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import Box from "@mui/material/Box/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsStatusMarker({
+  status,
+  label,
+  testId
+}) {
+  const hidden = label ? /* @__PURE__ */ jsx(Box, { component: "span", sx: SR_ONLY_SX, children: label }) : null;
+  if (status === "locked") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        component: "span",
+        "data-testid": testId,
+        "data-status": status,
+        sx: { display: "inline-flex", alignItems: "center", color: "text.disabled" },
+        children: [
+          /* @__PURE__ */ jsx(LockOutlinedIcon, { sx: { fontSize: 16 } }),
+          hidden
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: "span",
+      "data-testid": testId,
+      "data-status": status,
+      sx: { display: "inline-flex", alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              flex: "0 0 auto",
+              bgcolor: STATUS_COLOR[status]
+            }
+          }
+        ),
+        hidden
+      ]
+    }
+  );
+}
+SettingsStatusMarker.displayName = "SettingsStatusMarker";
+
+export {
+  SettingsStatusMarker
+};
+//# sourceMappingURL=chunk-QXTO3G2T.js.map