@12-apps/ui 6.35.0 → 6.37.0

package/dist/chunk-75LOTMSN.js

@@ -0,0 +1,169 @@
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  DropdownMenu
+} from "./chunk-VFHGILXI.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Button
+} from "./chunk-2EAAWOZ2.js";
+import {
+  rem,
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-grid-helpers.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function isActionsColumn(col) {
+  return col.type === "actions" || col.id === "actions";
+}
+function buildGridColumns(columns, visibleColumns, onRowClick) {
+  return columns.map((col) => {
+    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);
+    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };
+    return {
+      ...col,
+      hidden,
+      cell: (ctx) => {
+        const content = col.cell ? col.cell(ctx) : ctx.value == null ? "" : String(ctx.value);
+        return /* @__PURE__ */ jsx(
+          default2,
+          {
+            onClick: () => onRowClick(ctx.row),
+            sx: { cursor: "pointer", width: "100%", height: "100%", display: "flex", alignItems: "center" },
+            children: content
+          }
+        );
+      }
+    };
+  });
+}
+function buildRowActionsColumn(config) {
+  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;
+  const kebabActions = rowActions.filter((action) => action.row !== false);
+  return {
+    id: "actions",
+    header: "",
+    type: "actions",
+    enableSort: false,
+    hideable: false,
+    // Narrow: the column only holds the "⋮" kebab (plus an optional leading icon),
+    // so it needs room for just one or two icons.
+    width: leading ? 72 : 44,
+    cell: ({ row }) => /* @__PURE__ */ jsxs(default2, { component: "span", sx: { display: "inline-flex", alignItems: "center", gap: sxRem(2), justifyContent: "flex-end" }, children: [
+      leading?.(row),
+      renderRowMenu ? renderRowMenu(row) : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)
+    ] })
+  };
+}
+function renderAutoKebab(kebabActions, row, testIdPrefix, getRowId) {
+  const copy = useDataViewsCopy();
+  const items = kebabActions.filter((action) => action.isVisible?.(row) ?? true).map((action) => ({
+    id: action.id,
+    label: action.rowLabel ? action.rowLabel(row) : action.label,
+    color: action.color,
+    onClick: () => void action.onSelect([row])
+  }));
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      size: "sm",
+      items,
+      trigger: /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", dataTestId: `${testIdPrefix}-actions-${getRowId(row)}`, "aria-label": copy.grid.rowActions, children: "\u22EE" })
+    }
+  );
+}
+function defaultSortFields(columns) {
+  return columns.filter(
+    (col) => col.enableSort !== false && col.type !== "actions" && col.id !== "actions" && typeof col.header === "string" && col.header !== ""
+  ).map((col) => ({
+    value: col.id,
+    label: col.header,
+    orderOptions: [
+      { value: "asc", label: "Crescente" },
+      { value: "desc", label: "Decrescente" }
+    ]
+  }));
+}
+function computeActiveFilterCount(state, fields, rangeFields) {
+  const ranges = state.ranges ?? {};
+  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);
+  const rangeCount = rangeFields.reduce((n, field) => {
+    const range = ranges[field.id];
+    return n + (range && (range.min != null || range.max != null) ? 1 : 0);
+  }, 0);
+  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;
+}
+function bulkMenuItems(rowActions, selectedRows, clearSelection) {
+  return rowActions.filter((action) => action.bulk !== false).map((action) => {
+    const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;
+    return { action, targets };
+  }).filter(({ targets }) => targets.length > 0).map(({ action, targets }) => ({
+    id: action.id,
+    label: action.label,
+    color: action.color,
+    onClick: () => {
+      const result = action.onSelect(targets);
+      if (result instanceof Promise) {
+        void result.then(
+          () => clearSelection(),
+          () => {
+          }
+        );
+      } else {
+        clearSelection();
+      }
+    }
+  }));
+}
+function renderBulkActions({
+  rowActions,
+  bulkActions,
+  selectedRows,
+  clearSelection,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  if (selectedRows.length === 0) return void 0;
+  if (rowActions) {
+    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);
+    if (items.length === 0) return void 0;
+    return /* @__PURE__ */ jsx(
+      DropdownMenu,
+      {
+        size: "sm",
+        items,
+        trigger: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", dataTestId: `${testIdPrefix}-bulk-actions`, children: copy.grid.bulkActions(selectedRows.length) })
+      }
+    );
+  }
+  return bulkActions ? bulkActions(selectedRows, clearSelection) : void 0;
+}
+function togglePillValues(current, value, checked) {
+  const list = current ?? [];
+  return checked ? [...list, value] : list.filter((v) => v !== value);
+}
+function cardGridTracks(targetWidth) {
+  return {
+    gridTemplateColumns: (theme) => ({
+      xs: "1fr",
+      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`
+    })
+  };
+}
+
+export {
+  isActionsColumn,
+  buildGridColumns,
+  buildRowActionsColumn,
+  defaultSortFields,
+  computeActiveFilterCount,
+  renderBulkActions,
+  togglePillValues,
+  cardGridTracks
+};
+//# sourceMappingURL=chunk-75LOTMSN.js.map

package/dist/chunk-75LOTMSN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-grid-helpers.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Theme } from \"@mui/material/styles/index.js\";\n\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport { type GridColumn } from \"../DataGrid\";\nimport { type SortFieldDefinition } from \"../../layout/ContentToolbar\";\nimport { Box } from \"../../../mui/Box\";\nimport { rem, sxRem } from \"../../../tokens/relative\";\nimport { Button } from \"../../form/Button\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../../navigation/DropdownMenu\";\n\nimport type {\n  DataViewColumn,\n  DataViewState,\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RowAction,\n} from \"./data-views-types\";\n\n/** Is this the non-clickable actions column? */\nexport function isActionsColumn<T extends Record<string, unknown>>(col: GridColumn<T>): boolean {\n  return col.type === \"actions\" || col.id === \"actions\";\n}\n\n/**\n * Map the DataView columns to grid columns, applying visibility and — when a row\n * click handler is present — wrapping each non-actions cell so clicking opens the row.\n */\nexport function buildGridColumns<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n  visibleColumns: string[],\n  onRowClick: ((row: T) => void) | undefined,\n): GridColumn<T>[] {\n  return columns.map((col) => {\n    const hidden = col.hideable !== false && !visibleColumns.includes(col.id);\n    if (!onRowClick || isActionsColumn(col)) return { ...col, hidden };\n    return {\n      ...col,\n      hidden,\n      cell: (ctx) => {\n        const content = col.cell ? col.cell(ctx) : ctx.value == null ? \"\" : String(ctx.value);\n        return (\n          <Box\n            onClick={() => onRowClick(ctx.row)}\n            sx={{ cursor: \"pointer\", width: \"100%\", height: \"100%\", display: \"flex\", alignItems: \"center\" }}\n          >\n            {content}\n          </Box>\n        );\n      },\n    };\n  });\n}\n\ninterface ActionsColumnConfig<T extends Record<string, unknown>> {\n  /** Actions that build the auto \"⋮\" kebab. Ignored when `renderRowMenu` is set. */\n  rowActions: RowAction<T>[];\n  /** Optional leading slot (e.g. a favourite star) rendered before the kebab. */\n  leading?: (row: T) => React.ReactNode;\n  testIdPrefix: string;\n  getRowId: (row: T) => string | number;\n  /**\n   * Escape hatch: render a bespoke per-row menu (e.g. an entity's self-contained\n   * 3-dots menu that owns its own popups) INSTEAD of the auto kebab built from\n   * `rowActions`. This is how the table row and the card share ONE menu component.\n   * `rowActions`/`bulkActions` still drive the multi-row bulk menu, which a\n   * single-row menu intentionally does not replace.\n   */\n  renderRowMenu?: (row: T) => React.ReactNode;\n}\n\n/**\n * The auto \"⋮\" kebab actions column built from the reusable `rowActions` — the\n * SAME definitions that feed the bulk menu, so the two never drift. Each item\n * acts on just this row; `rowLabel` provides a per-row label when set. An\n * optional `leading` slot (e.g. a favourite star) renders before the kebab.\n * When `renderRowMenu` is supplied, the cell renders that bespoke menu instead.\n */\nexport function buildRowActionsColumn<T extends Record<string, unknown>>(\n  config: ActionsColumnConfig<T>,\n): DataViewColumn<T> {\n  const { rowActions, leading, testIdPrefix, getRowId, renderRowMenu } = config;\n  const kebabActions = rowActions.filter((action) => action.row !== false);\n  return {\n    id: \"actions\",\n    header: \"\",\n    type: \"actions\",\n    enableSort: false,\n    hideable: false,\n    // Narrow: the column only holds the \"⋮\" kebab (plus an optional leading icon),\n    // so it needs room for just one or two icons.\n    width: leading ? 72 : 44,\n    cell: ({ row }) => (\n      <Box component=\"span\" sx={{ display: \"inline-flex\", alignItems: \"center\", gap: sxRem(2), justifyContent: \"flex-end\" }}>\n        {leading?.(row)}\n        {renderRowMenu\n          ? renderRowMenu(row)\n          : renderAutoKebab(kebabActions, row, testIdPrefix, getRowId)}\n      </Box>\n    ),\n  };\n}\n\n/** The built-in kebab menu for one row, derived from `rowActions`. */\nfunction renderAutoKebab<T extends Record<string, unknown>>(\n  kebabActions: RowAction<T>[],\n  row: T,\n  testIdPrefix: string,\n  getRowId: (row: T) => string | number,\n): React.ReactNode {\n  const copy = useDataViewsCopy();\n  const items: DropdownMenuItem[] = kebabActions\n    .filter((action) => action.isVisible?.(row) ?? true)\n    .map((action) => ({\n      id: action.id,\n      label: action.rowLabel ? action.rowLabel(row) : action.label,\n      color: action.color,\n      onClick: () => void action.onSelect([row]),\n    }));\n  if (items.length === 0) return null;\n  return (\n    <DropdownMenu\n      size=\"sm\"\n      items={items}\n      trigger={\n        <Button variant=\"text\" size=\"sm\" dataTestId={`${testIdPrefix}-actions-${getRowId(row)}`} aria-label={copy.grid.rowActions}>\n          ⋮\n        </Button>\n      }\n    />\n  );\n}\n\n/** Sort options derived from the sortable columns when a page supplies none. */\nexport function defaultSortFields<T extends Record<string, unknown>>(\n  columns: DataViewColumn<T>[],\n): SortFieldDefinition[] {\n  return columns\n    .filter(\n      (col) =>\n        col.enableSort !== false &&\n        col.type !== \"actions\" &&\n        col.id !== \"actions\" &&\n        typeof col.header === \"string\" &&\n        col.header !== \"\",\n    )\n    .map((col) => ({\n      value: col.id,\n      label: col.header as string,\n      orderOptions: [\n        { value: \"asc\", label: \"Crescente\" },\n        { value: \"desc\", label: \"Decrescente\" },\n      ],\n    }));\n}\n\n/** Count active filters (search + selected pills + bounded ranges) for the badge. */\nexport function computeActiveFilterCount<T extends Record<string, unknown>>(\n  state: DataViewState,\n  fields: FilterFieldConfig<T>[],\n  rangeFields: RangeFieldConfig<T>[],\n): number {\n  const ranges = state.ranges ?? {};\n  const pillCount = fields.reduce((n, field) => n + ((state.pills[field.id]?.length ?? 0) > 0 ? 1 : 0), 0);\n  const rangeCount = rangeFields.reduce((n, field) => {\n    const range = ranges[field.id];\n    return n + (range && (range.min != null || range.max != null) ? 1 : 0);\n  }, 0);\n  return (state.search.trim() ? 1 : 0) + pillCount + rangeCount;\n}\n\nfunction bulkMenuItems<T extends Record<string, unknown>>(\n  rowActions: RowAction<T>[],\n  selectedRows: T[],\n  clearSelection: () => void,\n): DropdownMenuItem[] {\n  return rowActions\n    .filter((action) => action.bulk !== false)\n    .map((action) => {\n      // State-machine guards: the action runs only on the rows it applies to,\n      // and disappears from the menu when none of the selection qualifies.\n      const targets = action.isVisible ? selectedRows.filter(action.isVisible) : selectedRows;\n      return { action, targets };\n    })\n    .filter(({ targets }) => targets.length > 0)\n    .map(({ action, targets }) => ({\n      id: action.id,\n      label: action.label,\n      color: action.color,\n      onClick: () => {\n        // Run the (possibly async) handler on the captured selection, then clear\n        // it — but only once the work settles. On failure keep the selection so\n        // the user can see which rows still need action and retry.\n        const result = action.onSelect(targets);\n        if (result instanceof Promise) {\n          void result.then(\n            () => clearSelection(),\n            () => {\n              /* keep the selection on failure so the user can retry */\n            },\n          );\n        } else {\n          clearSelection();\n        }\n      },\n    }));\n}\n\ninterface RenderBulkArgs<T extends Record<string, unknown>> {\n  rowActions: RowAction<T>[] | undefined;\n  bulkActions: ((selectedRows: T[], clearSelection: () => void) => React.ReactNode) | undefined;\n  selectedRows: T[];\n  clearSelection: () => void;\n  testIdPrefix: string;\n}\n\n/**\n * The selection bulk control shown in the toolbar. Prefers the reusable\n * `rowActions` (an \"Ações\" dropdown mirroring the row kebab); falls back to the\n * low-level `bulkActions` render prop. Renders nothing with no selection.\n */\nexport function renderBulkActions<T extends Record<string, unknown>>({\n  rowActions,\n  bulkActions,\n  selectedRows,\n  clearSelection,\n  testIdPrefix,\n}: RenderBulkArgs<T>): React.ReactNode {\n  const copy = useDataViewsCopy();\n  if (selectedRows.length === 0) return undefined;\n  if (rowActions) {\n    const items = bulkMenuItems(rowActions, selectedRows, clearSelection);\n    if (items.length === 0) return undefined;\n    return (\n      <DropdownMenu\n        size=\"sm\"\n        items={items}\n        trigger={\n          <Button variant=\"outline\" size=\"sm\" dataTestId={`${testIdPrefix}-bulk-actions`}>\n            {copy.grid.bulkActions(selectedRows.length)}\n          </Button>\n        }\n      />\n    );\n  }\n  return bulkActions ? bulkActions(selectedRows, clearSelection) : undefined;\n}\n\n/** Toggle a single value in a pill's selected-list (returns the next list). */\nexport function togglePillValues(current: string[] | undefined, value: string, checked: boolean): string[] {\n  const list = current ?? [];\n  return checked ? [...list, value] : list.filter((v) => v !== value);\n}\n\n/**\n * The card grid's `grid-template-columns`, as an sx fragment.\n *\n * One rule at every width: each card asks for `targetWidth` and `auto-fill`\n * decides how many fit. Density moves the target, so it changes the count at\n * every size — which the previous column-count cap could not do, because its\n * track floor bottomed out at a constant shared by all three densities.\n *\n * Below `sm` this is a single column, and no target changes that. That is why\n * the density control hides itself there rather than offering three settings\n * that all draw the same thing.\n */\nexport function cardGridTracks(targetWidth: number) {\n  return {\n    gridTemplateColumns: (theme: Theme) => ({\n      xs: \"1fr\",\n      sm: `repeat(auto-fill, minmax(${rem(theme, targetWidth)}, 1fr))`,\n    }),\n  };\n}\n"],"mappings":"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","names":["default"]}

package/dist/chunk-7EH4D6FU.js

@@ -0,0 +1,247 @@
+import {
+  buttonRadioSx,
+  formLabelSx,
+  radioCardSx,
+  segmentButtonSx,
+  segmentContainerSx
+} from "./chunk-G3XLFQ2Z.js";
+
+// src/components/form/RadioGroup/RadioGroup.variants.tsx
+import Box from "@mui/material/Box/index.js";
+import ButtonBase from "@mui/material/ButtonBase/index.js";
+import Card from "@mui/material/Card/index.js";
+import CardContent from "@mui/material/CardContent/index.js";
+import FormControlLabel from "@mui/material/FormControlLabel/index.js";
+import FormLabel from "@mui/material/FormLabel/index.js";
+import Radio from "@mui/material/Radio/index.js";
+import MuiRadioGroup from "@mui/material/RadioGroup/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { styled } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledFormLabel = styled(FormLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  ...formLabelSx(theme, glass, error)
+}));
+var StyledRadioCard = styled(Card, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "glow", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...radioCardSx(theme, flags) }));
+var StyledButtonRadio = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "glass", "gradient", "customSize", "animated"].includes(
+    prop
+  )
+})(({ theme, ...flags }) => ({ ...buttonRadioSx(theme, flags) }));
+var StyledSegmentContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["glass", "customColor"].includes(prop)
+})(({ theme, glass, customColor }) => ({
+  ...segmentContainerSx(theme, glass, customColor)
+}));
+var StyledSegmentButton = styled(ButtonBase, {
+  shouldForwardProp: (prop) => !["selected", "customColor", "customSize", "animated"].includes(prop)
+})(({ theme, ...flags }) => ({ ...segmentButtonSx(theme, flags) }));
+var testId = (base, suffix) => base ? `${base}-${suffix}` : void 0;
+var muiRadioColor = (color) => color === "danger" ? "error" : color;
+var OptionLabel = ({
+  option,
+  testIdValue
+}) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, "data-testid": testIdValue, children: [
+  option.icon,
+  option.label
+] });
+var DefaultRadios = ({
+  options,
+  value,
+  color,
+  direction,
+  showDescriptions,
+  dataTestId,
+  groupRef,
+  onChange,
+  rest
+}) => /* @__PURE__ */ jsx(
+  MuiRadioGroup,
+  {
+    ref: groupRef,
+    value,
+    onChange,
+    ...rest,
+    sx: { flexDirection: direction, gap: 1 },
+    "data-testid": testId(dataTestId, "group"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.value,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `option-${index}`),
+        control: /* @__PURE__ */ jsx(
+          Radio,
+          {
+            color: muiRadioColor(color),
+            "data-testid": testId(dataTestId, `radio-${index}`)
+          }
+        ),
+        label: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: { display: "flex", alignItems: "center", gap: 1 },
+            "data-testid": testId(dataTestId, `label-${index}`),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx(Typography, { children: option.label }),
+                option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description })
+              ] })
+            ]
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var CardBody = ({
+  option,
+  index,
+  isSelected,
+  color,
+  showDescriptions,
+  dataTestId
+}) => /* @__PURE__ */ jsx(CardContent, { sx: { p: 2, "&:last-child": { pb: 2 } }, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", gap: 2 }, children: [
+  option.icon && /* @__PURE__ */ jsx(Box, { sx: { mt: 0.5, color: isSelected ? `${color}.main` : "text.secondary" }, children: option.icon }),
+  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "subtitle1",
+        fontWeight: 600,
+        color: isSelected ? `${color}.main` : "text.primary",
+        "data-testid": testId(dataTestId, `label-${index}`),
+        children: option.label
+      }
+    ),
+    option.description && showDescriptions && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: option.description })
+  ] })
+] }) });
+var CardRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  showDescriptions,
+  glass,
+  gradient,
+  glow,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 2 },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledRadioCard,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        glow,
+        customSize: size,
+        animated: true,
+        "data-testid": testId(dataTestId, `card-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(
+          CardBody,
+          {
+            option,
+            index,
+            isSelected: value === option.value,
+            color,
+            showDescriptions,
+            dataTestId
+          }
+        )
+      },
+      option.value
+    ))
+  }
+);
+var ButtonRadios = ({
+  options,
+  value,
+  color,
+  size,
+  direction,
+  glass,
+  gradient,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    sx: { display: "flex", flexDirection: direction, gap: 1, flexWrap: "wrap" },
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledButtonRadio,
+      {
+        selected: value === option.value,
+        customColor: color,
+        glass,
+        gradient,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `button-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var SegmentRadios = ({
+  options,
+  value,
+  color,
+  size,
+  glass,
+  dataTestId,
+  onSelect
+}) => /* @__PURE__ */ jsx(
+  StyledSegmentContainer,
+  {
+    glass,
+    customColor: color,
+    "data-testid": testId(dataTestId, "container"),
+    children: options.map((option, index) => /* @__PURE__ */ jsx(
+      StyledSegmentButton,
+      {
+        selected: value === option.value,
+        customColor: color,
+        customSize: size,
+        animated: true,
+        disabled: option.disabled,
+        "data-testid": testId(dataTestId, `segment-${index}`),
+        onClick: () => onSelect(option),
+        children: /* @__PURE__ */ jsx(OptionLabel, { option, testIdValue: testId(dataTestId, `label-${index}`) })
+      },
+      option.value
+    ))
+  }
+);
+var GroupLabel = ({ glass, error, dataTestId, children }) => /* @__PURE__ */ jsx(StyledFormLabel, { glass, error, "data-testid": testId(dataTestId, "label"), children });
+
+export {
+  testId,
+  OptionLabel,
+  DefaultRadios,
+  CardBody,
+  CardRadios,
+  ButtonRadios,
+  SegmentRadios,
+  GroupLabel
+};
+//# sourceMappingURL=chunk-7EH4D6FU.js.map

package/dist/chunk-7EIOXZWL.js

@@ -0,0 +1,204 @@
+import {
+  RangeBounds
+} from "./chunk-AJ5SDHX5.js";
+import {
+  isRangeSet
+} from "./chunk-GCZJH4XL.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  MultiSelectDropdown
+} from "./chunk-NPP44TQG.js";
+import {
+  default as default2
+} from "./chunk-6DPAWXZ3.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  fieldHeight
+} from "./chunk-CGO452DC.js";
+import {
+  fieldRadiusPx
+} from "./chunk-GDN2LUTZ.js";
+import {
+  fieldEdge
+} from "./chunk-7FDU3FIN.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-more-fields.tsx
+import Checkbox from "@mui/material/Checkbox/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var INLINE_OPTION_LIMIT = 2;
+function OverflowPill({
+  field,
+  values,
+  onToggle,
+  onClear,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const options = field.pill?.options ?? [];
+  if (options.length > INLINE_OPTION_LIMIT) {
+    return /* @__PURE__ */ jsx(
+      MultiSelectDropdown,
+      {
+        extraOptionsHeading: copy.filters.optionsHeading,
+        clearText: copy.filters.clear,
+        clearLabel: copy.filters.clearRange(field.label),
+        label: field.pill?.label ?? field.label,
+        options,
+        selected: new Set(values),
+        onToggle,
+        onClear,
+        allLabel: copy.filters.allOption,
+        searchable: options.length > 6 ? true : void 0,
+        searchPlaceholder: copy.filters.optionSearchPlaceholder,
+        noResultsLabel: copy.filters.optionsEmpty,
+        layout: "pill",
+        "data-testid": `${testIdPrefix}-more-${field.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(default2, { sx: { display: "flex", flexWrap: "wrap", gap: 0.75 }, children: (field.pill?.options ?? []).map((option) => {
+    const checked = values.includes(option.value);
+    return /* @__PURE__ */ jsxs(
+      default2,
+      {
+        component: "label",
+        "data-testid": `${testIdPrefix}-more-${field.id}-${option.value}`,
+        sx: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 0.25,
+          pr: 1,
+          border: 1,
+          borderStyle: "solid",
+          minHeight: fieldHeight,
+          borderColor: (theme) => checked ? theme.palette.primary.main : fieldEdge(theme),
+          bgcolor: checked ? "action.selected" : "transparent",
+          borderRadius: fieldRadiusPx,
+          cursor: "pointer",
+          fontSize: sxRem(13),
+          color: checked ? "primary.main" : "text.secondary"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              checked,
+              onChange: (event) => onToggle(option.value, event.target.checked),
+              inputProps: { "aria-label": `${field.label}: ${option.label}` }
+            }
+          ),
+          option.label
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function OverflowRange({
+  field,
+  value,
+  onChange,
+  testIdPrefix
+}) {
+  if (!field.range) return null;
+  return /* @__PURE__ */ jsx(
+    RangeBounds,
+    {
+      field: field.range,
+      value,
+      onChange,
+      testId: `${testIdPrefix}-more-${field.id}`
+    }
+  );
+}
+function fieldClearing({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange
+}) {
+  if (field.group === "range") {
+    return {
+      applied: isRangeSet(ranges[field.id] ?? {}),
+      clear: () => onChangeRange(field.id, {})
+    };
+  }
+  const values = pills[field.id] ?? [];
+  return {
+    applied: values.length > 0,
+    clear: () => values.forEach((value) => onTogglePill(field.id, value, false))
+  };
+}
+function MoreGroup({
+  field,
+  pills,
+  ranges,
+  onTogglePill,
+  onChangeRange,
+  testIdPrefix
+}) {
+  const copy = useDataViewsCopy();
+  const { applied, clear } = fieldClearing({ field, pills, ranges, onTogglePill, onChangeRange });
+  return /* @__PURE__ */ jsxs(default2, { sx: { mb: 1.5, "&:last-of-type": { mb: 0 } }, children: [
+    /* @__PURE__ */ jsxs(default2, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(Text, { variant: "caption", as: "span", children: /* @__PURE__ */ jsxs(default2, { component: "span", sx: { color: "text.secondary" }, children: [
+        field.label,
+        field.group === "range" && isRangeSet(ranges[field.id] ?? {}) ? " \u2022" : ""
+      ] }) }),
+      applied && /* @__PURE__ */ jsx(
+        default2,
+        {
+          component: "button",
+          type: "button",
+          onClick: clear,
+          "data-testid": `${testIdPrefix}-more-${field.id}-clear`,
+          sx: {
+            ml: "auto",
+            border: 0,
+            p: 0,
+            bgcolor: "transparent",
+            cursor: "pointer",
+            font: "inherit",
+            fontSize: sxRem(12),
+            color: "primary.main",
+            "&:hover": { textDecoration: "underline" }
+          },
+          children: copy.filters.clear
+        }
+      )
+    ] }),
+    field.group === "pill" ? /* @__PURE__ */ jsx(
+      OverflowPill,
+      {
+        field,
+        values: pills[field.id] ?? [],
+        onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+        onClear: () => (pills[field.id] ?? []).forEach((v) => onTogglePill(field.id, v, false)),
+        testIdPrefix
+      }
+    ) : /* @__PURE__ */ jsx(
+      OverflowRange,
+      {
+        field,
+        value: ranges[field.id] ?? {},
+        onChange: (range) => onChangeRange(field.id, range),
+        testIdPrefix
+      }
+    )
+  ] });
+}
+
+export {
+  fieldClearing,
+  MoreGroup
+};
+//# sourceMappingURL=chunk-7EIOXZWL.js.map