@12-apps/ui 6.33.1 → 6.35.0

package/dist/chunk-HXEBKOSM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/TableFilter/TableFilter.tsx"],"sourcesContent":["'use client';\n\nimport CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Checkbox from '@mui/material/Checkbox/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport Link from '@mui/material/Link/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport React, { useRef, useState } from 'react';\n\nimport { TableFilterContext, useTableFilterContext } from './TableFilterContext';\nimport type {\n  TableFilterCheckboxFieldProps,\n  TableFilterKeywordProps,\n  TableFilterLayoutProps,\n  TableFilterMainProps,\n  TableFilterPanelProps,\n  TableFilterProps,\n  TableFilterRangeFieldProps,\n  TableFilterSectionProps,\n} from './TableFilter.types';\nimport { fieldTextFieldStyles } from '../../../tokens/field-height';\nimport { sxRem } from '../../../tokens/relative';\n\nconst PANEL_WIDTH = 280;\n\n/**\n * Compound filter-panel system, MUI port of the reference `TableFilter`. Provides\n * open/close state; `Panel` slides in from the right beside `Main` (no overlap).\n *\n * @example\n * ```tsx\n * <TableFilter open={open} onOpenChange={setOpen} hasActiveFilters={n > 0}>\n *   <TableFilter.Layout>\n *     <TableFilter.Main>{table}</TableFilter.Main>\n *     <TableFilter.Panel onClearAll={clearAll}>\n *       <TableFilter.Keyword value={q} onChange={setQ} />\n *       <TableFilter.Section title=\"Attributes\">\n *         <TableFilter.CheckboxField label=\"Category\" options={cats} selected={sel} onToggle={toggle} />\n *         <TableFilter.RangeField label=\"Price\" unit=\"R$\" value={price} onChange={setPrice} />\n *       </TableFilter.Section>\n *     </TableFilter.Panel>\n *   </TableFilter.Layout>\n * </TableFilter>\n * ```\n */\nexport function TableFilter({\n  children,\n  open,\n  onOpenChange,\n  hasActiveFilters = false,\n  copy,\n}: TableFilterProps): React.JSX.Element {\n  return (\n    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters, copy }}>\n      {children}\n    </TableFilterContext.Provider>\n  );\n}\nTableFilter.displayName = 'TableFilter';\n\nconst TableFilterLayout = ({ children, className }: TableFilterLayoutProps): React.JSX.Element => {\n  const { open } = useTableFilterContext();\n  return (\n    <Box\n      className={className}\n      sx={{\n        display: 'flex',\n        minHeight: 0,\n        minWidth: 0,\n        flex: 1,\n        alignItems: 'stretch',\n        overflow: 'hidden',\n        gap: open ? 2 : 0,\n      }}\n    >\n      {children}\n    </Box>\n  );\n};\nTableFilterLayout.displayName = 'TableFilter.Layout';\n\nconst TableFilterMain = ({ children, className }: TableFilterMainProps): React.JSX.Element => (\n  <Box className={className} sx={{ minWidth: 0, flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>\n    {children}\n  </Box>\n);\nTableFilterMain.displayName = 'TableFilter.Main';\n\nconst TableFilterPanel = ({\n  children,\n  onClearAll,\n  ariaLabel = 'Filters',\n  clearTestId,\n}: TableFilterPanelProps): React.JSX.Element => {\n  const { open, copy } = useTableFilterContext();\n  return (\n    <Box\n      component=\"aside\"\n      aria-label={ariaLabel}\n      aria-hidden={!open}\n      sx={{\n        display: 'flex',\n        minHeight: 0,\n        flexShrink: 0,\n        flexDirection: 'column',\n        alignSelf: 'stretch',\n        overflow: 'hidden',\n        bgcolor: 'background.paper',\n        width: open ? PANEL_WIDTH : 0,\n        borderLeft: open ? 1 : 0,\n        borderColor: 'divider',\n        transition: 'width 300ms ease-in-out',\n        '@media (prefers-reduced-motion: reduce)': { transition: 'none' },\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          minHeight: 0,\n          flex: 1,\n          flexDirection: 'column',\n          overflowY: 'auto',\n          overflowX: 'hidden',\n          visibility: open ? 'visible' : 'hidden',\n          opacity: open ? 1 : 0,\n          pointerEvents: open ? 'auto' : 'none',\n          transition: 'opacity 200ms ease-out',\n        }}\n      >\n        <Box sx={{ boxSizing: 'border-box', display: 'flex', width: '100%', minWidth: 0, flexDirection: 'column', gap: 2.5, p: 2 }}>\n          <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              data-testid={clearTestId}\n              onClick={onClearAll}\n              sx={{ fontSize: sxRem(12), color: 'text.secondary' }}\n            >\n              {copy.clearAllFilters}\n            </Link>\n          </Box>\n          {children}\n        </Box>\n      </Box>\n    </Box>\n  );\n};\nTableFilterPanel.displayName = 'TableFilter.Panel';\n\nconst TableFilterKeyword = ({\n  value,\n  onChange,\n  placeholder = 'Press Enter to filter',\n  label = 'Filter by keyword',\n  testId,\n}: TableFilterKeywordProps): React.JSX.Element => {\n  const { copy } = useTableFilterContext();\n  const [draft, setDraft] = useState(value);\n  const prevValue = useRef(value);\n  if (prevValue.current !== value) {\n    prevValue.current = value;\n    if (draft !== value) setDraft(value);\n  }\n\n  const commit = (): void => {\n    if (draft !== value) onChange(draft);\n  };\n  const clearKeyword = (): void => {\n    setDraft('');\n    if (value !== '') onChange('');\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>\n      <Typography component=\"label\" sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n        {label}\n      </Typography>\n      <TextField\n        size=\"small\"\n        sx={fieldTextFieldStyles}\n        name=\"keyword\"\n        placeholder={placeholder}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onBlur={commit}\n        onKeyDown={(event) => {\n          if (event.key !== 'Enter') return;\n          event.preventDefault();\n          commit();\n        }}\n        inputProps={{ 'aria-label': label, 'data-testid': testId }}\n        InputProps={{\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon sx={{ fontSize: sxRem(16), color: 'text.secondary' }} />\n            </InputAdornment>\n          ),\n          endAdornment:\n            draft !== '' ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size=\"small\"\n                  aria-label={copy.clearKeyword}\n                  data-testid={testId ? `${testId}-clear` : undefined}\n                  onMouseDown={(event) => event.preventDefault()}\n                  onClick={clearKeyword}\n                >\n                  <CloseIcon sx={{ fontSize: sxRem(16) }} />\n                </IconButton>\n              </InputAdornment>\n            ) : null,\n        }}\n      />\n    </Box>\n  );\n};\nTableFilterKeyword.displayName = 'TableFilter.Keyword';\n\nconst TableFilterSection = ({ title, children }: TableFilterSectionProps): React.JSX.Element => (\n  <Box>\n    <Divider sx={{ mb: 2.5 }} />\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n      <Typography component=\"h2\" sx={{ fontSize: sxRem(14), fontWeight: 600, color: 'text.primary' }}>\n        {title}\n      </Typography>\n      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>{children}</Box>\n    </Box>\n  </Box>\n);\nTableFilterSection.displayName = 'TableFilter.Section';\n\nfunction TableFilterCheckboxField<TValue extends string = string>({\n  label,\n  options,\n  selected,\n  onToggle,\n  testId,\n}: TableFilterCheckboxFieldProps<TValue>): React.JSX.Element {\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>{label}</Typography>\n      <Box sx={{ display: 'flex', flexDirection: 'column' }}>\n        {options.map((option) => {\n          const checked = selected.has(option.value);\n          return (\n            <FormControlLabel\n              key={option.value}\n              control={\n                <Checkbox\n                  size=\"small\"\n                  checked={checked}\n                  onChange={(event) => onToggle(option.value, event.target.checked)}\n                  data-testid={testId ? `${testId}-${option.value}` : undefined}\n                  sx={{ py: 0.25 }}\n                />\n              }\n              label={\n                <Box component=\"span\" sx={{ fontSize: sxRem(14) }}>\n                  {option.label}\n                  {option.count != null && (\n                    <Box component=\"span\" sx={{ color: 'text.secondary' }}>\n                      {' '}\n                      ({option.count})\n                    </Box>\n                  )}\n                </Box>\n              }\n              sx={{ ml: -0.5, mr: 0 }}\n            />\n          );\n        })}\n      </Box>\n    </Box>\n  );\n}\nTableFilterCheckboxField.displayName = 'TableFilter.CheckboxField';\n\nfunction parseBound(text: string): number | undefined {\n  if (text.trim() === '') return undefined;\n  const parsed = Number(text);\n  return Number.isNaN(parsed) ? undefined : parsed;\n}\n\n/** One numeric bound input (min or max) for {@link TableFilterRangeField}. */\nfunction RangeBound({\n  bound,\n  error,\n  placeholder,\n  step,\n  ariaLabel,\n  testId,\n  onChange,\n}: {\n  bound: number | undefined;\n  error: boolean;\n  placeholder: string;\n  step?: number;\n  ariaLabel: string;\n  testId?: string;\n  onChange: (next: number | undefined) => void;\n}): React.JSX.Element {\n  return (\n    <TextField\n      size=\"small\"\n      sx={fieldTextFieldStyles}\n      type=\"number\"\n      error={error}\n      placeholder={placeholder}\n      value={bound != null ? String(bound) : ''}\n      onChange={(event) => onChange(parseBound(event.target.value))}\n      inputProps={{ step, 'aria-label': ariaLabel, 'data-testid': testId }}\n    />\n  );\n}\n\n/** Inverted range: both ends set and max < min (surfaced to the user as an error). */\nconst isRangeInverted = (value: { min?: number; max?: number }): boolean =>\n  value.min != null && value.max != null && value.max < value.min;\n\nconst TableFilterRangeField = ({\n  label,\n  value,\n  onChange,\n  unit,\n  step,\n  minPlaceholder,\n  maxPlaceholder,\n  invalidLabel,\n  testId,\n}: TableFilterRangeFieldProps): React.JSX.Element => {\n  const { copy } = useTableFilterContext();\n  const invalid = isRangeInverted(value);\n  // A field may override any of the three; unset, they come from the root's\n  // table. Neither path reaches an English literal in this package.\n  const minText = minPlaceholder ?? copy.rangeMin;\n  const maxText = maxPlaceholder ?? copy.rangeMax;\n  const invalidText = invalidLabel ?? copy.invalidRange;\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>\n      <Typography sx={{ fontSize: sxRem(12), fontWeight: 500, color: 'text.secondary' }}>\n        {label}\n        {unit ? ` (${unit})` : ''}\n      </Typography>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n        <RangeBound\n          bound={value.min}\n          error={invalid}\n          placeholder={minText}\n          step={step}\n          ariaLabel={`${label} ${minText}`}\n          testId={testId ? `${testId}-min` : undefined}\n          onChange={(min) => onChange({ ...value, min })}\n        />\n        <Typography component=\"span\" sx={{ color: 'text.secondary' }}>\n          –\n        </Typography>\n        <RangeBound\n          bound={value.max}\n          error={invalid}\n          placeholder={maxText}\n          step={step}\n          ariaLabel={`${label} ${maxText}`}\n          testId={testId ? `${testId}-max` : undefined}\n          onChange={(max) => onChange({ ...value, max })}\n        />\n      </Box>\n      {invalid && (\n        <Typography\n          role=\"alert\"\n          data-testid={testId ? `${testId}-error` : undefined}\n          sx={{ fontSize: sxRem(11.2), color: 'error.main' }}\n        >\n          {invalidText}\n        </Typography>\n      )}\n    </Box>\n  );\n};\nTableFilterRangeField.displayName = 'TableFilter.RangeField';\n\nTableFilter.Layout = TableFilterLayout;\nTableFilter.Main = TableFilterMain;\nTableFilter.Panel = TableFilterPanel;\nTableFilter.Keyword = TableFilterKeyword;\nTableFilter.Section = TableFilterSection;\nTableFilter.CheckboxField = TableFilterCheckboxField;\nTableFilter.RangeField = TableFilterRangeField;\n"],"mappings":"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","names":[]}

package/dist/chunk-I2CRLUS7.js

@@ -0,0 +1,160 @@
+import {
+  PillControl
+} from "./chunk-SN2YMCTL.js";
+import {
+  PanelRangeField
+} from "./chunk-Y2E73IG2.js";
+import {
+  useDataViewsCopy
+} from "./chunk-KHG57NAE.js";
+import {
+  TableFilter
+} from "./chunk-HXEBKOSM.js";
+import {
+  StackedModal
+} from "./chunk-IL7JZKXY.js";
+import {
+  StackedModalContent
+} from "./chunk-RWTFZ7J5.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/DataViews/data-views-filter-panel.tsx
+import Box from "@mui/material/Box/index.js";
+import Link from "@mui/material/Link/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function PillField({
+  field,
+  selected,
+  testIdPrefix,
+  onTogglePill,
+  onClearField
+}) {
+  const testId = `${testIdPrefix}-filter-${field.id}`;
+  if (field.searchEnabled || field.control === "multiselect" || field.control === "category") {
+    return /* @__PURE__ */ jsx(
+      PillControl,
+      {
+        fieldId: field.id,
+        pill: field,
+        selected,
+        onTogglePill,
+        onClearField,
+        testIdPrefix,
+        layout: "stacked"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TableFilter.CheckboxField,
+    {
+      label: field.label,
+      options: field.options,
+      selected: new Set(selected),
+      onToggle: (value, checked) => onTogglePill(field.id, value, checked),
+      testId
+    }
+  );
+}
+function FilterControls({
+  testIdPrefix,
+  search,
+  fields,
+  rangeFields,
+  pills,
+  ranges,
+  onSearchChange,
+  onTogglePill,
+  onChangeRange,
+  onClearField
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TableFilter.Keyword,
+      {
+        value: search,
+        onChange: onSearchChange,
+        label: copy.search.allColumnsLabel,
+        placeholder: copy.search.keywordPlaceholder,
+        testId: `${testIdPrefix}-search-all`
+      }
+    ),
+    (fields.length > 0 || rangeFields.length > 0) && /* @__PURE__ */ jsxs(TableFilter.Section, { title: copy.filters.panelTitle, children: [
+      fields.map((field) => /* @__PURE__ */ jsx(
+        PillField,
+        {
+          field,
+          selected: pills[field.id] ?? [],
+          testIdPrefix,
+          onTogglePill,
+          onClearField
+        },
+        field.id
+      )),
+      rangeFields.map((field) => /* @__PURE__ */ jsx(
+        PanelRangeField,
+        {
+          field,
+          value: ranges[field.id] ?? {},
+          onChange: (range) => onChangeRange(field.id, range),
+          testId: `${testIdPrefix}-range-${field.id}`
+        },
+        field.id
+      ))
+    ] })
+  ] });
+}
+function GridFilterPanel(props) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    TableFilter.Panel,
+    {
+      onClearAll: props.onClearAll,
+      clearTestId: `${props.testIdPrefix}-clear-filters`,
+      ariaLabel: copy.filters.panelTitle,
+      children: /* @__PURE__ */ jsx(FilterControls, { ...props })
+    }
+  );
+}
+function FilterDialog({
+  open,
+  onClose,
+  ...props
+}) {
+  const copy = useDataViewsCopy();
+  return /* @__PURE__ */ jsx(
+    StackedModal,
+    {
+      open,
+      onClose,
+      navigationTitle: copy.filters.panelTitle,
+      backLabel: copy.nav.goBack,
+      modalId: `${props.testIdPrefix}-filters`,
+      maxWidth: "xs",
+      dataTestId: `${props.testIdPrefix}-filter-dialog`,
+      children: /* @__PURE__ */ jsx(StackedModalContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2.5 }, children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            component: "button",
+            type: "button",
+            underline: "hover",
+            onClick: props.onClearAll,
+            "data-testid": `${props.testIdPrefix}-clear-filters`,
+            sx: { fontSize: sxRem(12), color: "text.secondary" },
+            children: copy.filters.clearAllFilters
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FilterControls, { ...props })
+      ] }) })
+    }
+  );
+}
+
+export {
+  GridFilterPanel,
+  FilterDialog
+};
+//# sourceMappingURL=chunk-I2CRLUS7.js.map

package/dist/chunk-I2CRLUS7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DataViews/data-views-filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport Box from \"@mui/material/Box/index.js\";\nimport Link from \"@mui/material/Link/index.js\";\n\nimport { StackedModal, StackedModalContent } from \"../../feedback/StackedModal\";\nimport { TableFilter } from \"../../layout/TableFilter\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport { PanelRangeField } from \"./data-views-range-pill\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type {\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RangeValue,\n} from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Filter panel ────────────────────────────────────────────────────────── */\n\nexport interface GridFilterPanelProps<T extends Record<string, unknown>> {\n  testIdPrefix: string;\n  search: string;\n  fields: FilterFieldConfig<T>[];\n  rangeFields: RangeFieldConfig<T>[];\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onSearchChange: (value: string) => void;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  onClearField: (fieldId: string) => void;\n  onClearAll: () => void;\n}\n\n/** One pill field: a compact multi-select for long lists, else a checkbox list. */\nfunction PillField<T extends Record<string, unknown>>({\n  field,\n  selected,\n  testIdPrefix,\n  onTogglePill,\n  onClearField,\n}: {\n  field: FilterFieldConfig<T>;\n  selected: string[];\n  testIdPrefix: string;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClearField: (fieldId: string) => void;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-filter-${field.id}`;\n  // `searchEnabled` forces the searchable multi-select; a plain `multiselect`\n  // keeps the auto \"search only when the list is long\" rule. `category` is the\n  // hierarchical tree — see PillControl.\n  if (field.searchEnabled || field.control === \"multiselect\" || field.control === \"category\") {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field}\n        selected={selected}\n        onTogglePill={onTogglePill}\n        onClearField={onClearField}\n        testIdPrefix={testIdPrefix}\n        layout=\"stacked\"\n      />\n    );\n  }\n  return (\n    <TableFilter.CheckboxField\n      label={field.label}\n      options={field.options}\n      selected={new Set(selected)}\n      onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n      testId={testId}\n    />\n  );\n}\n\n/** The filter controls (keyword + pill facets + numeric ranges), surface-agnostic. */\nfunction FilterControls<T extends Record<string, unknown>>({\n  testIdPrefix,\n  search,\n  fields,\n  rangeFields,\n  pills,\n  ranges,\n  onSearchChange,\n  onTogglePill,\n  onChangeRange,\n  onClearField,\n}: Omit<GridFilterPanelProps<T>, \"onClearAll\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      <TableFilter.Keyword\n        value={search}\n        onChange={onSearchChange}\n        label={copy.search.allColumnsLabel}\n        placeholder={copy.search.keywordPlaceholder}\n        testId={`${testIdPrefix}-search-all`}\n      />\n      {(fields.length > 0 || rangeFields.length > 0) && (\n        <TableFilter.Section title={copy.filters.panelTitle}>\n          {fields.map((field) => (\n            <PillField\n              key={field.id}\n              field={field}\n              selected={pills[field.id] ?? []}\n              testIdPrefix={testIdPrefix}\n              onTogglePill={onTogglePill}\n              onClearField={onClearField}\n            />\n          ))}\n          {rangeFields.map((field) => (\n            <PanelRangeField\n              key={field.id}\n              field={field}\n              value={ranges[field.id] ?? {}}\n              onChange={(range) => onChangeRange(field.id, range)}\n              testId={`${testIdPrefix}-range-${field.id}`}\n            />\n          ))}\n        </TableFilter.Section>\n      )}\n    </>\n  );\n}\n\n/** The slide-in filter panel: keyword + checkbox facets + numeric ranges. */\nexport function GridFilterPanel<T extends Record<string, unknown>>(\n  props: GridFilterPanelProps<T>,\n): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <TableFilter.Panel\n      onClearAll={props.onClearAll}\n      clearTestId={`${props.testIdPrefix}-clear-filters`}\n      ariaLabel={copy.filters.panelTitle}\n    >\n      <FilterControls {...props} />\n    </TableFilter.Panel>\n  );\n}\n\n/** Props for the modal filter surface used below the inline breakpoint. */\ninterface FilterDialogProps<T extends Record<string, unknown>> extends GridFilterPanelProps<T> {\n  open: boolean;\n  onClose: () => void;\n}\n\n/**\n * The same filter controls in a centered modal — used on smaller screens where the\n * slide-in panel would overlap the table. The \"Filtros\" toolbar button opens it.\n */\nexport function FilterDialog<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  ...props\n}: FilterDialogProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <StackedModal\n      open={open}\n      onClose={onClose}\n      navigationTitle={copy.filters.panelTitle}\n      backLabel={copy.nav.goBack}\n      modalId={`${props.testIdPrefix}-filters`}\n      maxWidth=\"xs\"\n      dataTestId={`${props.testIdPrefix}-filter-dialog`}\n    >\n      <StackedModalContent>\n        <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2.5 }}>\n          <Box sx={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              onClick={props.onClearAll}\n              data-testid={`${props.testIdPrefix}-clear-filters`}\n              sx={{ fontSize: sxRem(12), color: \"text.secondary\" }}\n            >\n              {copy.filters.clearAllFilters}\n            </Link>\n          </Box>\n          <FilterControls {...props} />\n        </Box>\n      </StackedModalContent>\n    </StackedModal>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-I62ALI7F.js

@@ -0,0 +1,208 @@
+import {
+  EN_US_SOCIAL_LOGIN_COPY
+} from "./chunk-INGPH3YQ.js";
+import {
+  Heading
+} from "./chunk-IJFAF3A7.js";
+import {
+  Separator
+} from "./chunk-Q4CAZ2TP.js";
+import {
+  Card,
+  CardContent
+} from "./chunk-N6CSXHFJ.js";
+import {
+  Button
+} from "./chunk-KH25WUSX.js";
+import {
+  Text
+} from "./chunk-WTOYEWW6.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+
+// src/social-login-button/social-login-button.tsx
+import * as React from "react";
+import Box from "@mui/material/Box/index.js";
+import Stack from "@mui/material/Stack/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GoogleIcon = () => {
+  const logo = uiInk(useTheme()).socialBrand.googleLogo;
+  return /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+        fill: logo.blue
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+        fill: logo.green
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+        fill: logo.yellow
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+        fill: logo.red
+      }
+    )
+  ] });
+};
+var FacebookIcon = () => {
+  const { logo } = uiInk(useTheme()).socialBrand.facebook;
+  return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z",
+      fill: logo
+    }
+  ) });
+};
+var AppleIcon = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
+var GOOGLE_LOGO_WHEN_DISABLED_SX = {
+  "&.Mui-disabled .MuiButton-startIcon": {
+    filter: "brightness(0)",
+    opacity: (theme) => theme.palette.action.disabledOpacity
+  }
+};
+var FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {
+  "& .MuiButton-startIcon path": { fill: "currentColor" }
+};
+var brand = (pick) => (theme) => pick(uiInk(theme).socialBrand);
+var providerConfig = {
+  google: {
+    Icon: GoogleIcon,
+    variant: "outline",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.google.background),
+      color: brand((c) => c.google.text),
+      borderColor: brand((c) => c.google.border),
+      "&:hover": {
+        backgroundColor: brand((c) => c.google.hover),
+        borderColor: brand((c) => c.google.hoverBorder)
+      },
+      ...GOOGLE_LOGO_WHEN_DISABLED_SX
+    }
+  },
+  facebook: {
+    Icon: FacebookIcon,
+    variant: "solid",
+    color: "primary",
+    sx: {
+      backgroundColor: brand((c) => c.facebook.background),
+      color: brand((c) => c.facebook.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.facebook.hover)
+      },
+      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX
+    }
+  },
+  apple: {
+    Icon: AppleIcon,
+    variant: "solid",
+    color: "neutral",
+    sx: {
+      backgroundColor: brand((c) => c.apple.background),
+      color: brand((c) => c.apple.text),
+      "&:hover": {
+        backgroundColor: brand((c) => c.apple.hover)
+      }
+    }
+  }
+};
+var ICON_ONLY_SX = {
+  justifyContent: "center",
+  gap: 0,
+  "& .MuiButton-startIcon": { margin: 0 }
+};
+var SocialLoginButton = React.forwardRef(
+  ({
+    provider,
+    onClick,
+    loading = false,
+    disabled = false,
+    fullWidth = true,
+    copy = EN_US_SOCIAL_LOGIN_COPY,
+    dataTestId,
+    iconOnly = false
+  }, ref) => {
+    const config = providerConfig[provider];
+    const label = copy[provider];
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        variant: config.variant,
+        color: config.color,
+        size: "lg",
+        loading,
+        disabled,
+        onClick,
+        icon: /* @__PURE__ */ jsx(config.Icon, {}),
+        dataTestId,
+        fullWidth,
+        ...iconOnly ? { "aria-label": label, title: label } : {},
+        sx: {
+          minHeight: 48,
+          justifyContent: "flex-start",
+          gap: 2,
+          ...iconOnly ? ICON_ONLY_SX : {},
+          ...config.sx
+        },
+        children: iconOnly ? void 0 : label
+      }
+    );
+  }
+);
+SocialLoginButton.displayName = "SocialLoginButton";
+function SocialLoginContainer({
+  children,
+  title = "Sign in to continue",
+  subtitle,
+  showDivider = false,
+  dividerText = "or",
+  maxWidth = 400
+}) {
+  return (
+    // `width: 100%` is what makes the cap below mean anything. Every caller
+    // centres this card in a flex column (`Container variant="centered"` does),
+    // and a flex item under `align-items: center` sizes to its CONTENT — so the
+    // card sat at whatever the longest label happened to need, ~267px, at every
+    // viewport from 390 to 1280. The 400 was never reached, which is why raising
+    // it would have changed nothing; the card had no width to cap.
+    /* @__PURE__ */ jsx(Card, { variant: "elevated", borderRadius: "lg", sx: { width: "100%", maxWidth }, children: /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 3, sx: { width: "100%" }, children: [
+      title && /* @__PURE__ */ jsxs(Box, { sx: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: title }),
+        subtitle && /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Stack, { spacing: 2, children }),
+      showDivider && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(Text, { color: "secondary", size: "sm", children: dividerText }),
+        /* @__PURE__ */ jsx(Separator, {})
+      ] })
+    ] }) }) })
+  );
+}
+
+export {
+  GoogleIcon,
+  FacebookIcon,
+  AppleIcon,
+  SocialLoginButton,
+  SocialLoginContainer
+};
+//# sourceMappingURL=chunk-I62ALI7F.js.map

package/dist/chunk-I62ALI7F.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/social-login-button/social-login-button.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Stack from '@mui/material/Stack/index.js';\nimport { useTheme, type Theme } from '@mui/material/styles/index.js';\nimport { Button } from '../components/form/Button';\nimport { Card, CardContent } from '../components/layout/Card';\nimport { Heading } from '../components/typography/Heading';\nimport { Text } from '../components/typography/Text';\nimport { Separator } from '../components/layout/Separator';\nimport type { SocialLoginCopy } from '../copy/form';\nimport { EN_US_SOCIAL_LOGIN_COPY } from '../en-US.form';\nimport { uiInk, type UiInk } from '../tokens/ink';\n\nexport type SocialProvider = 'google' | 'facebook' | 'apple';\n\n/**\n * SVG Icons for social providers\n */\nconst GoogleIcon = (): React.ReactElement => {\n  const logo = uiInk(useTheme()).socialBrand.googleLogo;\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill={logo.blue}\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill={logo.green}\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill={logo.yellow}\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill={logo.red}\n      />\n    </svg>\n  );\n};\n\nconst FacebookIcon = (): React.ReactElement => {\n  const { logo } = uiInk(useTheme()).socialBrand.facebook;\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854V15.47H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953H15.83c-1.491 0-1.956.925-1.956 1.874V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12z\"\n        fill={logo}\n      />\n    </svg>\n  );\n};\n\nconst AppleIcon = (): React.ReactElement => (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z\" />\n  </svg>\n);\n\n/**\n * Google's logo on a disabled button: one flat grey, faded (FUT-2393).\n *\n * The G is drawn in Google's four colours, hard-coded in its SVG, so MUI\n * greying a disabled button's label left a full-colour G beside it. The grey\n * label still said the button could not be pressed; an icon-only button has no\n * label, and read as ready to tap.\n *\n * `brightness(0)` draws the G in one flat colour, as Google's own disabled\n * button does, and the theme's `disabledOpacity` fades it, the step MUI dims a\n * disabled control by. `grayscale` would not do: it turns the four colours four\n * different greys, and the yellow arc all but vanished (1.26:1 against white).\n *\n * Google's alone: Facebook's and Apple's logos are drawn in the button's\n * `currentColor`, so they grey with the label by themselves, and fading them\n * again would all but erase them. Keyed on `.Mui-disabled`, the class MUI greys\n * the label by, so the logo and the label always agree. A loading button\n * carries it too, but its spinner replaces the logo slot.\n */\nconst GOOGLE_LOGO_WHEN_DISABLED_SX = {\n  '&.Mui-disabled .MuiButton-startIcon': {\n    filter: 'brightness(0)',\n    opacity: (theme: Theme) => theme.palette.action.disabledOpacity,\n  },\n} as const;\n\n/**\n * Facebook's logo in its button's own colour (FUT-2393).\n *\n * `FacebookIcon` is the blue roundel, drawn in #1877F2 with the \"f\" cut out of\n * it. On the button's own #1877F2 the roundel vanished: a label beside nothing,\n * and an icon-only button an empty blue slab. In `currentColor` it is the white\n * roundel Facebook's own button carries, and a disabled button greys it with\n * the label. Set on the button rather than in `FacebookIcon`, which a host may\n * draw on a white page.\n */\nconst FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX = {\n  '& .MuiButton-startIcon path': { fill: 'currentColor' },\n} as const;\n\n/** A provider's own colour, read from the theme's `uiInk.socialBrand` as an `sx` value. */\nconst brand =\n  (pick: (colours: UiInk['socialBrand']) => string) =>\n  (theme: Theme): string =>\n    pick(uiInk(theme).socialBrand);\n\ninterface ProviderConfig {\n  Icon: () => React.ReactElement;\n  variant: 'solid' | 'outline' | 'ghost';\n  color: 'primary' | 'secondary' | 'neutral';\n  sx?: object;\n}\n\nconst providerConfig: Record<SocialProvider, ProviderConfig> = {\n  google: {\n    Icon: GoogleIcon,\n    variant: 'outline',\n    color: 'neutral',\n    sx: {\n      backgroundColor: brand((c) => c.google.background),\n      color: brand((c) => c.google.text),\n      borderColor: brand((c) => c.google.border),\n      '&:hover': {\n        backgroundColor: brand((c) => c.google.hover),\n        borderColor: brand((c) => c.google.hoverBorder),\n      },\n      ...GOOGLE_LOGO_WHEN_DISABLED_SX,\n    },\n  },\n  facebook: {\n    Icon: FacebookIcon,\n    variant: 'solid',\n    color: 'primary',\n    sx: {\n      backgroundColor: brand((c) => c.facebook.background),\n      color: brand((c) => c.facebook.text),\n      '&:hover': {\n        backgroundColor: brand((c) => c.facebook.hover),\n      },\n      ...FACEBOOK_LOGO_IN_BUTTON_COLOUR_SX,\n    },\n  },\n  apple: {\n    Icon: AppleIcon,\n    variant: 'solid',\n    color: 'neutral',\n    sx: {\n      backgroundColor: brand((c) => c.apple.background),\n      color: brand((c) => c.apple.text),\n      '&:hover': {\n        backgroundColor: brand((c) => c.apple.hover),\n      },\n    },\n  },\n};\n\nexport interface SocialLoginButtonProps {\n  provider: SocialProvider;\n  onClick?: () => void;\n  loading?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  /**\n   * The three provider labels (FUT-1263). `SOCIAL_LOGIN_COPY` ships both\n   * languages, so a host passes `SOCIAL_LOGIN_COPY[\"pt-BR\"]` rather than\n   * authoring a word.\n   *\n   * These used to be English string literals inside `providerConfig`, reachable\n   * by nothing: a pt-BR storefront rendered \"Continue with Google\" on an\n   * otherwise Portuguese sign-in screen and had no way to change it.\n   *\n   * OPTIONAL, unlike every other `copy` in this package, and defaulted to the\n   * en-US pack. That is a deliberate exception so this ships as a MINOR: making\n   * it required would break every existing caller on a routine update. The cost\n   * is the one this package's convention exists to avoid — a host that says\n   * nothing still renders English — so a consumer wanting Portuguese must pass\n   * the pack, and FUT-1263 is not closed until it does.\n   */\n  copy?: SocialLoginCopy;\n  /**\n   * Per-provider test hook. Without one all three buttons render the same\n   * `data-testid`, leaving their visible text as the only selector — which is\n   * exactly the text a host is now expected to translate.\n   */\n  dataTestId?: string;\n  /**\n   * The provider's logo alone, centred (FUT-2393).\n   *\n   * For a row of providers in a narrow block, where \"Continuar com o Google\"\n   * wraps to two lines at 320px and two providers cannot share a line. The\n   * label is not dropped: it stays the button's accessible name, so a screen\n   * reader still announces the provider, and its `title`, so a pointer\n   * hovering the logo reads it too.\n   */\n  iconOnly?: boolean;\n}\n\n/**\n * What an icon-only social button changes: the logo centred, with no gap\n * reserved for a label and no margin MUI keeps beside a start icon.\n */\nconst ICON_ONLY_SX = {\n  justifyContent: 'center',\n  gap: 0,\n  '& .MuiButton-startIcon': { margin: 0 },\n} as const;\n\n/**\n * Social login button using UI package Button component\n */\nexport const SocialLoginButton = React.forwardRef<HTMLButtonElement, SocialLoginButtonProps>(\n  (\n    {\n      provider,\n      onClick,\n      loading = false,\n      disabled = false,\n      fullWidth = true,\n      copy = EN_US_SOCIAL_LOGIN_COPY,\n      dataTestId,\n      iconOnly = false,\n    },\n    ref,\n  ) => {\n    const config = providerConfig[provider];\n    const label = copy[provider];\n\n    return (\n      <Button\n        ref={ref}\n        variant={config.variant}\n        color={config.color}\n        size=\"lg\"\n        loading={loading}\n        disabled={disabled}\n        onClick={onClick}\n        icon={<config.Icon />}\n        dataTestId={dataTestId}\n        fullWidth={fullWidth}\n        {...(iconOnly ? { 'aria-label': label, title: label } : {})}\n        sx={{\n          minHeight: 48,\n          justifyContent: 'flex-start',\n          gap: 2,\n          ...(iconOnly ? ICON_ONLY_SX : {}),\n          ...config.sx,\n        }}\n      >\n        {iconOnly ? undefined : label}\n      </Button>\n    );\n  }\n);\n\nSocialLoginButton.displayName = 'SocialLoginButton';\n\n/**\n * Container for social login buttons with optional divider\n */\nexport interface SocialLoginContainerProps {\n  children: React.ReactNode;\n  title?: string;\n  subtitle?: string;\n  showDivider?: boolean;\n  dividerText?: string;\n  /**\n   * How wide the card is allowed to get. Defaults to the 400 it has always\n   * intended, so nothing that does not ask for a width moves.\n   *\n   * Worth passing for a card holding a FORM rather than a row of provider\n   * buttons: 400 was chosen for the latter, and an e-mail + password pair reads\n   * cramped in it.\n   */\n  maxWidth?: number | string;\n}\n\nexport function SocialLoginContainer({\n  children,\n  title = \"Sign in to continue\",\n  subtitle,\n  showDivider = false,\n  dividerText = \"or\",\n  maxWidth = 400,\n}: SocialLoginContainerProps): React.ReactElement {\n  return (\n    // `width: 100%` is what makes the cap below mean anything. Every caller\n    // centres this card in a flex column (`Container variant=\"centered\"` does),\n    // and a flex item under `align-items: center` sizes to its CONTENT — so the\n    // card sat at whatever the longest label happened to need, ~267px, at every\n    // viewport from 390 to 1280. The 400 was never reached, which is why raising\n    // it would have changed nothing; the card had no width to cap.\n    <Card variant=\"elevated\" borderRadius=\"lg\" sx={{ width: '100%', maxWidth }}>\n      <CardContent>\n        <Stack spacing={3} sx={{ width: '100%' }}>\n          {title && (\n            <Box sx={{ textAlign: 'center' }}>\n              <Heading level=\"h2\">\n                {title}\n              </Heading>\n              {subtitle && (\n                <Text color=\"secondary\" size=\"sm\">\n                  {subtitle}\n                </Text>\n              )}\n            </Box>\n          )}\n\n          <Stack spacing={2}>\n            {children}\n          </Stack>\n\n          {showDivider && (\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>\n              <Separator />\n              <Text color=\"secondary\" size=\"sm\">\n                {dividerText}\n              </Text>\n              <Separator />\n            </Box>\n          )}\n        </Stack>\n      </CardContent>\n    </Card>\n  );\n}\n\nexport { GoogleIcon, FacebookIcon, AppleIcon };\n"],"mappings":"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","names":[]}

package/dist/chunk-I6EVBLFX.js

@@ -0,0 +1,123 @@
+import {
+  accentFor
+} from "./chunk-TCAQOUIB.js";
+import {
+  uiInk
+} from "./chunk-FQ6UW7IY.js";
+import {
+  sxRem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Chart/chart-internals.ts
+import { alpha } from "@mui/material/styles/index.js";
+var SIZE_PRESETS = {
+  xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },
+  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },
+  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },
+  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },
+  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 }
+};
+function getSizeStyles(theme, size, height) {
+  const preset = SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
+  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };
+}
+function getDefaultColors(theme, variant, colors) {
+  if (colors) return colors;
+  if (variant === "neon") return [...uiInk(theme).dataVizNeon.series];
+  return [
+    theme.palette.primary.main,
+    theme.palette.secondary.main,
+    theme.palette.success.main,
+    theme.palette.warning.main,
+    theme.palette.error.main,
+    theme.palette.info.main
+  ];
+}
+function effectStyles(theme, options) {
+  const accent = accentFor(theme, options.color).main;
+  const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};
+  const pulse = options.pulse ? {
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
+      "70%": { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+      "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
+    }
+  } : {};
+  return { ...glow, ...pulse };
+}
+function variantSurface(theme, options) {
+  switch (options.variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+      };
+    case "gradient":
+      return {
+        background: options.gradient ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})` : theme.palette.background.paper
+      };
+    case "elevated":
+      return { boxShadow: theme.shadows[4] };
+    case "minimal":
+      return { border: "none", backgroundColor: "transparent" };
+    case "neon": {
+      const neon = uiInk(theme).dataVizNeon;
+      return {
+        backgroundColor: neon.ground,
+        border: `1px solid ${alpha(neon.accent, 0.3)}`,
+        "& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line": {
+          stroke: alpha(neon.accent, 0.1)
+        }
+      };
+    }
+    default:
+      return { backgroundColor: theme.palette.background.paper };
+  }
+}
+function getVariantStyles(theme, options) {
+  return {
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    opacity: options.disabled ? 0.5 : 1,
+    pointerEvents: options.disabled ? "none" : "auto",
+    ...effectStyles(theme, options),
+    ...variantSurface(theme, options)
+  };
+}
+function resolveSeries(data, series, xAxisKey, palette) {
+  if (series) return series;
+  if (data.length === 0) return [];
+  return Object.keys(data[0] ?? {}).filter((key) => key !== xAxisKey).map((key, index) => ({
+    dataKey: key,
+    name: key,
+    color: palette[index % palette.length]
+  }));
+}
+function getAxisStyles(theme, variant, fontSize) {
+  const neon = variant === "neon";
+  const neonAccent = uiInk(theme).dataVizNeon.accent;
+  return {
+    axisStyle: {
+      fontSize,
+      fill: neon ? neonAccent : theme.palette.text.secondary,
+      // Ticks are columns of digits: they have to line up between rows.
+      fontVariantNumeric: "tabular-nums"
+    },
+    gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,
+    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.
+    gridOpacity: neon ? 1 : 0.5
+  };
+}
+
+export {
+  getSizeStyles,
+  getDefaultColors,
+  getVariantStyles,
+  resolveSeries,
+  getAxisStyles
+};
+//# sourceMappingURL=chunk-I6EVBLFX.js.map

package/dist/chunk-I6EVBLFX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chart/chart-internals.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles/index.js';\nimport type { CSSProperties } from 'react';\n\nimport type { ChartProps, ChartSeries } from './Chart.types';\nimport { uiInk } from '../../../tokens/ink';\nimport { accentFor, sxRem } from '../../../tokens/scales';\n\n/**\n * Non-JSX internals of the prop-driven Chart: size/variant styling, palette\n * resolution and series auto-detection. Split from Chart.tsx to keep every\n * function inside the repo's complexity budget.\n */\n\nexport interface SizeStyles {\n  height: number;\n  fontSize: string;\n  /**\n   * Gap between an axis line and its tick labels, px.\n   *\n   * Recharts' default of 2 is not enough. The bottom VALUE tick is centred on\n   * the x-axis line, so its text box reaches ~0.79em BELOW that line, while\n   * the category labels begin 2px under the 6px tick mark — the two collide at\n   * the axis corner, at every viewport. Each value below is ~0.8em of its own\n   * font size, which clears the value label's descender with ~6px to spare.\n   */\n  tickMargin: number;\n}\n\ntype SizePreset = Omit<SizeStyles, 'fontSize'> & { fontSize: (theme: Theme) => string };\n\nconst SIZE_PRESETS: Record<NonNullable<ChartProps['size']>, SizePreset> = {\n  xs: { height: 200, fontSize: sxRem(12), tickMargin: 10 },\n  sm: { height: 300, fontSize: sxRem(14), tickMargin: 12 },\n  md: { height: 400, fontSize: sxRem(16), tickMargin: 14 },\n  lg: { height: 500, fontSize: sxRem(18), tickMargin: 16 },\n  xl: { height: 600, fontSize: sxRem(20), tickMargin: 18 },\n};\n\nexport function getSizeStyles(theme: Theme, size: ChartProps['size'], height?: number): SizeStyles {\n  const preset = SIZE_PRESETS[size ?? 'md'] ?? SIZE_PRESETS.md;\n  return { ...preset, fontSize: preset.fontSize(theme), height: height ?? preset.height };\n}\n\nexport function getDefaultColors(theme: Theme, variant: ChartProps['variant'], colors?: string[]): string[] {\n  if (colors) return colors;\n  if (variant === 'neon') return [...uiInk(theme).dataVizNeon.series];\n  return [\n    theme.palette.primary.main,\n    theme.palette.secondary.main,\n    theme.palette.success.main,\n    theme.palette.warning.main,\n    theme.palette.error.main,\n    theme.palette.info.main,\n  ];\n}\n\ntype SxStyles = Record<string, unknown>;\n\ninterface VariantOptions {\n  variant: NonNullable<ChartProps['variant']>;\n  color: NonNullable<ChartProps['color']>;\n  glow: boolean;\n  pulse: boolean;\n  glass: boolean;\n  gradient: boolean;\n  disabled: boolean;\n}\n\nfunction effectStyles(theme: Theme, options: VariantOptions): SxStyles {\n  const accent = accentFor(theme, options.color).main;\n  const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};\n  const pulse = options.pulse\n    ? {\n        animation: 'pulse 2s infinite',\n        '@keyframes pulse': {\n          '0%': { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },\n          '70%': { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },\n          '100%': { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` },\n        },\n      }\n    : {};\n  return { ...glow, ...pulse };\n}\n\nfunction variantSurface(theme: Theme, options: VariantOptions): SxStyles {\n  switch (options.variant) {\n    case 'glass':\n      return {\n        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),\n        backdropFilter: 'blur(20px)',\n        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,\n      };\n    case 'gradient':\n      return {\n        background: options.gradient\n          ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})`\n          : theme.palette.background.paper,\n      };\n    case 'elevated':\n      return { boxShadow: theme.shadows[4] };\n    case 'minimal':\n      return { border: 'none', backgroundColor: 'transparent' };\n    case 'neon': {\n      const neon = uiInk(theme).dataVizNeon;\n      return {\n        backgroundColor: neon.ground,\n        border: `1px solid ${alpha(neon.accent, 0.3)}`,\n        '& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line': {\n          stroke: alpha(neon.accent, 0.1),\n        },\n      };\n    }\n    default:\n      return { backgroundColor: theme.palette.background.paper };\n  }\n}\n\nexport function getVariantStyles(theme: Theme, options: VariantOptions): SxStyles {\n  return {\n    borderRadius: theme.spacing(1),\n    transition: theme.transitions.create(['all'], {\n      duration: theme.transitions.duration.standard,\n    }),\n    opacity: options.disabled ? 0.5 : 1,\n    pointerEvents: options.disabled ? ('none' as const) : ('auto' as const),\n    ...effectStyles(theme, options),\n    ...variantSurface(theme, options),\n  };\n}\n\n/** Explicit series, or one series per non-axis key found in the first row. */\nexport function resolveSeries(\n  data: ChartProps['data'],\n  series: ChartSeries[] | undefined,\n  xAxisKey: string,\n  palette: string[],\n): ChartSeries[] {\n  if (series) return series;\n  if (data.length === 0) return [];\n  return Object.keys(data[0] ?? {})\n    .filter((key) => key !== xAxisKey)\n    .map((key, index) => ({\n      dataKey: key,\n      name: key,\n      color: palette[index % palette.length],\n    }));\n}\n\ninterface AxisTextStyles {\n  axisStyle: CSSProperties;\n  gridStroke: string;\n  /**\n   * Multiplier applied to `gridStroke`'s own alpha. Gridlines must read one\n   * step BELOW the card border — the border is `divider`, so half of it —\n   * without being dashed at data weight. Expressing the step as an opacity\n   * rather than a second colour keeps it derived from the theme's divider\n   * whatever form that takes (rgba, hex, or a CSS variable, which the colour\n   * helpers cannot decompose).\n   */\n  gridOpacity: number;\n}\n\nexport function getAxisStyles(theme: Theme, variant: ChartProps['variant'], fontSize: string): AxisTextStyles {\n  const neon = variant === 'neon';\n  const neonAccent = uiInk(theme).dataVizNeon.accent;\n  return {\n    axisStyle: {\n      fontSize,\n      fill: neon ? neonAccent : theme.palette.text.secondary,\n      // Ticks are columns of digits: they have to line up between rows.\n      fontVariantNumeric: 'tabular-nums',\n    },\n    gridStroke: neon ? alpha(neonAccent, 0.1) : theme.palette.divider,\n    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.\n    gridOpacity: neon ? 1 : 0.5,\n  };\n}\n"],"mappings":"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","names":[]}