@12-apps/ui 6.24.6 → 6.24.8

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -10,7 +10,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import IconButton from "@mui/material/IconButton/index.js";
 import InputAdornment from "@mui/material/InputAdornment/index.js";
 import TextField from "@mui/material/TextField/index.js";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Box } from "../../../mui/Box";
 import { useDataViewsCopy } from "./data-views-copy-context";
@@ -33,6 +33,64 @@ function boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: nu
   return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? "none" : 384 };
 }
 
+/**
+ * The box's own draft, and the two ways it reaches `onChange`.
+ *
+ * Extracted from {@link InlineKeyword} so the commit policy reads in one place
+ * rather than split across a render body — and because it is where both halves
+ * of a defect that lost searches outright had to be fixed.
+ *
+ * ## The debounce must not be keyed on the handler's identity
+ *
+ * Every caller builds `onChange` inline — the grid's own bar passes
+ * `(value) => c.patch({ search: value })`, rebuilt on each render. Keying the
+ * effect on it re-armed the timer on every render, and a busy admin page
+ * re-renders more often than every 350ms as its queries land, so the timer
+ * never survived to fire and the term was NEVER committed: measured in one
+ * adopter as a dead `?q=` on a server-mode grid, where a 15-second loop pressed
+ * Enter over and over and the URL never moved. So the handler is read through a
+ * ref and the effect depends on `[draft, value]` alone.
+ *
+ * ## An immediate commit must read the BOX, not the draft
+ *
+ * A keystroke can land before React has processed the edit before it — a fast
+ * typist, and every Playwright `fill()` followed by `press('Enter')`. `draft` is
+ * then still the value from before the edit, and comparing THAT to `value` said
+ * "nothing changed" and dropped the keystroke, leaving the term on screen with
+ * an unfiltered list behind it. `commitNow` takes what the caller read off the
+ * element and syncs the draft to it, which also keeps the box from being reset
+ * to a stale draft by the next render when a host ignores the commit.
+ */
+function useKeywordDraft(
+  value: string,
+  onChange: (next: string) => void,
+): { draft: string; setDraft: (next: string) => void; commitNow: (typed: string) => void } {
+  const [draft, setDraft] = useState(value);
+  const prev = useRef(value);
+  // An external change (a saved view, the URL, "Limpar") wins over the draft.
+  if (prev.current !== value) {
+    prev.current = value;
+    if (draft !== value) setDraft(value);
+  }
+  const commit = useRef(onChange);
+  useEffect(() => {
+    commit.current = onChange;
+  });
+  useEffect(() => {
+    if (draft === value) return undefined;
+    const timer = setTimeout(() => commit.current(draft), SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [draft, value]);
+  const commitNow = useCallback(
+    (typed: string) => {
+      setDraft(typed);
+      if (typed !== value) commit.current(typed);
+    },
+    [value],
+  );
+  return { draft, setDraft, commitNow };
+}
+
 /**
  * The bar's keyword box.
  *
@@ -64,18 +122,7 @@ export function InlineKeyword({
   fill?: boolean;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
-  const [draft, setDraft] = useState(value);
-  const prev = useRef(value);
-  // An external change (a saved view, the URL, "Limpar") wins over the draft.
-  if (prev.current !== value) {
-    prev.current = value;
-    if (draft !== value) setDraft(value);
-  }
-  useEffect(() => {
-    if (draft === value) return undefined;
-    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [draft, value, onChange]);
+  const { draft, setDraft, commitNow } = useKeywordDraft(value, onChange);
 
   return (
     <TextField
@@ -94,7 +141,8 @@ export function InlineKeyword({
         // presses it has decided, and waiting out the timer reads as a stall.
         if (event.key !== "Enter") return;
         event.preventDefault();
-        if (draft !== value) onChange(draft);
+        // The BOX, not `draft` — see {@link useKeywordDraft}.
+        commitNow(event.target instanceof HTMLInputElement ? event.target.value : draft);
       }}
       placeholder={copy.search.placeholder}
       inputProps={{ "aria-label": copy.search.allColumnsLabel, "data-testid": testId }}

package/src/components/form/Button/Button.md

@@ -12,6 +12,8 @@ The Button component is a versatile and highly customizable interactive element
 - **Special Effects**: glow, pulse animations
 - **Loading States**: Built-in loading spinner
 - **Icon Support**: Leading icons with automatic loading state handling
+- **Renders As Anything**: `component` swaps the element, carrying that
+  component's own props through the types (a router link, an `<a>`, a label)
 - **Accessibility**: Full ARIA support, keyboard navigation
 - **Responsive Design**: Adapts to different screen sizes
 
@@ -37,6 +39,14 @@ import { Button } from '@procurement/ui';
 <Button variant="gradient" glow pulse>
   Special Button
 </Button>
+
+// As a navigation, painted as a button
+<Button component={Link} to="/orders/42">
+  Track my order
+</Button>
+
+// Or a plain anchor, when there is no router in the tree
+<Button href="/orders/42">Track my order</Button>
 ```
 
 ## Props
@@ -60,6 +70,35 @@ import { Button } from '@procurement/ui';
 | `onBlur`     | `(event: FocusEvent) => void`                                                 | -           | Blur event handler                        |
 | `children`   | `ReactNode`                                                                   | -           | Button content                            |
 | `className`  | `string`                                                                      | -           | Additional CSS classes                    |
+| `component`  | `ElementType`                                                                 | `'button'`  | Render as this element/component instead  |
+| `href`       | `string`                                                                      | -           | Renders an `<a>` (MUI's own behaviour)    |
+
+## Rendering as something else
+
+`component` swaps the element the button renders as, and the button's props are
+typed against it — so the target's own props are checked at the call site rather
+than silently dropped:
+
+```tsx
+import { Link } from 'react-router-dom';
+
+<Button component={Link} to="/orders/42" variant="solid" size="lg">
+  Track my order
+</Button>;
+```
+
+Three things are worth knowing:
+
+- **`to` is typed.** `Button` is an `OverridableComponent`, so the generic
+  carries the target's props through. Misspell `to` and it fails to compile.
+- **The paint does not change.** Measured against the same button rendered as a
+  `<button>`: identical box, background, padding, radius and type; hover still
+  darkens; the class still names the size.
+- **`href` alone is enough** when there is no router involved — MUI renders an
+  `<a>` for it without a `component`.
+
+The event handlers are typed on `HTMLElement` rather than `HTMLButtonElement`
+for this reason: the element under the pointer is not always a button.
 
 ## Variants
 

package/src/components/form/Button/Button.metrics.ts

@@ -34,6 +34,32 @@ export const ICON_ONLY_PADDING: Record<SizeValue, number> = {
   xl: 11,
 };
 
+/**
+ * The start/end icon slot's font-size, in px — MUI's `medium` value, pinned
+ * (12-74).
+ *
+ * MUI sizes that slot off its OWN `size` prop, writing 18/20/22 onto the first
+ * child of `.MuiButton-startIcon`. We never passed a `size`, so every button in
+ * every size has always drawn medium's 20px; now that `size` IS forwarded — so
+ * the rendered class finally names the size the button actually is — the number
+ * would start moving with it.
+ *
+ * WHAT THAT ACTUALLY REACHES, measured in a browser rather than assumed: this
+ * Button renders its own wrapper span around the icon (it carries the child
+ * test id), so MUI's rule lands on the WRAPPER and reaches the glyph only when
+ * the glyph takes its size by inheritance — `fontSize="inherit"`, an em-sized
+ * SVG, a text or emoji glyph. With the pin removed, such a glyph measured 18px
+ * at `xs`/`sm` and 22px at `lg`/`xl` against the 20px it has always been. An
+ * icon carrying an absolute size of its own does not move at all: a default
+ * `SvgIcon` stayed 24×24 across all five.
+ *
+ * A silent resize of the inherited case is still a design decision arriving as
+ * a side effect of a class-name fix, so it is pinned to what shipped before —
+ * `Button.tsx` puts it on that same wrapper. Scaling the glyph with the button
+ * is a ticket of its own.
+ */
+export const BUTTON_ICON_GLYPH_SIZE = 20;
+
 export const BUTTON_FONT_WEIGHT = 500;
 /** `theme.spacing(1)`. */
 export const BUTTON_RADIUS_UNITS = 1;

package/src/components/form/Button/Button.tsx

@@ -4,6 +4,7 @@ import { styled } from '@mui/material/styles/index.js';
 import * as React from 'react';
 
 import { resolveButtonProps } from './Button.helpers';
+import { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import {
   buttonEmphasisStyles,
@@ -12,7 +13,7 @@ import {
   iconAlignmentStyles,
   buttonSize,
 } from './Button.styles';
-import type { ButtonProps } from './Button.types';
+import type { ButtonComponent, ButtonProps } from './Button.types';
 
 const StyledButton = styled(MuiButton, {
   shouldForwardProp: (prop) =>
@@ -49,12 +50,53 @@ const muiVariantFor = (variant?: string): 'outlined' | 'text' | 'contained' => {
 
 type MuiButtonColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error';
 
+/**
+ * Our five sizes collapse onto MUI's three, so the rendered class NAMES the
+ * size the button actually is (12-74).
+ *
+ * It was never forwarded, so every button — `xs` through `xl` — carried
+ * `MuiButton-sizeMedium`. The pixels were right (they come from `buttonSize`'s
+ * `sx`, which still decides them) but the DOM said "medium" about a large
+ * button: a test could never assert the size, and devtools lied to whoever
+ * opened them.
+ *
+ * MUI's own size styles are padding, font-size and the icon glyph. The first
+ * two are overridden by that same `sx`; the third is pinned by
+ * `BUTTON_ICON_GLYPH_SIZE`, so forwarding this moves nothing on screen.
+ */
+const muiSizeFor = (size: NonNullable<ButtonProps['size']>): 'small' | 'medium' | 'large' => {
+  if (size === 'xs' || size === 'sm') return 'small';
+  return size === 'md' ? 'medium' : 'large';
+};
+
 /** `danger` and `neutral` are ours; the rest are MUI's own names already. */
 const muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor => {
   if (color === 'danger') return 'error';
   return color === 'neutral' ? 'inherit' : color;
 };
 
+/**
+ * The icon slot's font-size, pinned on the wrapper this component already owns
+ * (12-74).
+ *
+ * MUI writes 18/20/22 there off its own `size`, and that prop is now forwarded,
+ * so a glyph that takes its size by INHERITANCE would start moving with the
+ * button — measured at 18px on `xs` and 22px on `lg` against the 20px every
+ * size has always drawn. See {@link BUTTON_ICON_GLYPH_SIZE} for what that does
+ * and does not reach.
+ *
+ * Written as an inline style rather than a selector in `sx` because MUI's own
+ * rule sits on the start/end-icon span itself. Beating it from the root means
+ * winning a specificity contest at a distance — true in a browser, but not
+ * something a test can hold, since jsdom resolves `getComputedStyle` by
+ * document order and never by specificity. Inline wins both, and it sits on the
+ * one element we already render for this glyph.
+ *
+ * A number, not `px()`: React writes `font-size: 20px`, which is exactly the
+ * declaration MUI was emitting before.
+ */
+const ICON_GLYPH_STYLE = { fontSize: BUTTON_ICON_GLYPH_SIZE } as const;
+
 /**
  * An icon and nothing else — the shape that should render square.
  *
@@ -71,7 +113,26 @@ function isIconOnly({
   return !loading && icon != null && children == null;
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+/**
+ * The design system's button.
+ *
+ * Typed as an `OverridableComponent` (12-70) rather than a plain `forwardRef`,
+ * which is how MUI models a component that can render as something else. The
+ * practical difference is one line at a call site:
+ *
+ * ```tsx
+ * <Button component={Link} to="/account/compras/42">Acompanhar pedido</Button>
+ * ```
+ *
+ * `to` is typed here because the generic carries the target component's own
+ * props through. A plain `component?: React.ElementType` — what this was —
+ * accepts the component and throws its props away, so `to` typechecked
+ * nowhere even though it arrived intact at runtime. A host wanting a router
+ * navigation painted as a button had to choose between a type assertion and
+ * losing the `href`; both were shipped, and both are the reason this ticket
+ * exists.
+ */
+const ButtonRoot = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (rawProps, ref) => {
     const {
       variant,
@@ -99,7 +160,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     // Wrap icon with testId if provided
     const iconWithTestId =
-      !loading && icon ? <span data-testid={testId('icon')}>{icon}</span> : undefined;
+      !loading && icon ? (
+        <span data-testid={testId('icon')} style={ICON_GLYPH_STYLE}>
+          {icon}
+        </span>
+      ) : undefined;
 
     // Only an icon, so the button is a square rather than a 64px slab.
     const iconOnly = isIconOnly({ loading, icon, children });
@@ -112,6 +177,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         variant={muiVariantFor(variant)}
         color={muiColorFor(color)}
+        size={muiSizeFor(size)}
         customVariant={variant}
         customColor={color}
         glow={glow}
@@ -139,4 +205,11 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 
-Button.displayName = 'Button';
+ButtonRoot.displayName = 'Button';
+
+/**
+ * The cast is what publishes the generic — `forwardRef` cannot express
+ * "renders as C, and takes C's props" on its own, so MUI's own components do
+ * exactly this. `ButtonRoot` above is the implementation and is not exported.
+ */
+export const Button = ButtonRoot as ButtonComponent;

package/src/components/form/Button/Button.types.ts

@@ -1,25 +1,67 @@
 import type { ButtonProps as MuiButtonProps } from '@mui/material/Button/index.js';
+import type { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent/index.js';
 import type * as React from 'react';
 
 import type { ButtonBaseProps } from './Button.base';
 
 export type { ButtonBaseProps, ButtonVariant } from './Button.base';
 
-export interface ButtonProps
+/**
+ * Everything this Button adds, WITHOUT the element it renders as.
+ *
+ * `component` is deliberately omitted here and reintroduced by the type map
+ * below: MUI models "render as something else" with a generic, and taking
+ * `component?: React.ElementType` as a plain prop is exactly what threw the
+ * target's own props away (12-70).
+ */
+export interface ButtonOwnProps
   extends ButtonBaseProps,
-    Omit<MuiButtonProps, 'variant' | 'color' | 'size' | keyof ButtonBaseProps> {
+    Omit<MuiButtonProps, 'variant' | 'color' | 'size' | 'component' | keyof ButtonBaseProps> {
   /**
    * Click handler
    */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick?: React.MouseEventHandler<HTMLElement>;
 
   /**
    * Focus handler
    */
-  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+  onFocus?: React.FocusEventHandler<HTMLElement>;
 
   /**
    * Blur handler
    */
-  onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+  onBlur?: React.FocusEventHandler<HTMLElement>;
 }
+
+/**
+ * What `Button` renders as, and what that brings with it.
+ *
+ * This is the shape MUI's `OverridableComponent` reads. Handing `component` a
+ * router `Link` now also hands the call site that Link's OWN props — `to`,
+ * `replace`, `state` — typed, which is the whole point of 12-70. Before this,
+ * `component` was `React.ElementType` and `to` typechecked nowhere, so a host
+ * that wanted a navigation painted as a button had to reach for a type
+ * assertion or throw the `href` away.
+ */
+export interface ButtonTypeMap<
+  AdditionalProps = object,
+  RootComponent extends React.ElementType = 'button',
+> {
+  props: AdditionalProps & ButtonOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * The props of a Button rendered as `RootComponent` — `button` by default.
+ *
+ * Generic WITH defaults, so every existing `ButtonProps` (no arguments) keeps
+ * meaning exactly what it meant before this change: the button-rendered case.
+ */
+export type ButtonProps<
+  RootComponent extends React.ElementType = 'button',
+  AdditionalProps = object,
+> = OverrideProps<ButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export type ButtonComponent = OverridableComponent<ButtonTypeMap>;

package/dist/chunk-A7Q5AQVD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-search.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE INLINE BAR'S SEARCH — the one control on the toolbar that cannot be\n * guessed from an icon's position, which is why it is the LAST thing the\n * degradation ladder takes away. See `data-views-overflow.ts`.\n */\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport IconButton from \"@mui/material/IconButton/index.js\";\nimport InputAdornment from \"@mui/material/InputAdornment/index.js\";\nimport TextField from \"@mui/material/TextField/index.js\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Box } from \"../../../mui/Box\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\n\n/** How long the box waits after the last keystroke before it queries. */\nconst SEARCH_DEBOUNCE_MS = 350;\n\n/**\n * How wide the keyword box is allowed to be.\n *\n * The 200px floor is right while the box shares the row: a search you cannot\n * read six characters in is not a search. It is WRONG once the box has been\n * expanded out of its collapsed state on a narrow screen, where the cluster was\n * sized for a magnifier — the floor cannot be met there, so the row scrolled\n * sideways instead (154px of overhang at 320px). In that mode the box shrinks,\n * and if what is left would still be unreadable the bar hands it the whole\n * cluster instead (`searchTakeover`).\n */\nfunction boxWidth(fill: boolean): { flex: number; minWidth: number; maxWidth: number | \"none\" } {\n  return { flex: 1, minWidth: fill ? 0 : 200, maxWidth: fill ? \"none\" : 384 };\n}\n\n/**\n * The bar's keyword box.\n *\n * DEBOUNCED rather than committed on Enter/blur. In server mode every commit is\n * a round trip, and a box that only fires on blur makes the operator press a\n * key they were not told about to see any result at all — they type, nothing\n * happens, and the list looks broken. 350ms is long enough that a word costs\n * one query, short enough to feel like live search.\n *\n * `Escape` clears; the X clears without leaving the box. Both exist because\n * clearing by selecting-and-deleting is three gestures for the most common\n * thing anyone does to a search box.\n */\nexport function InlineKeyword({\n  value,\n  onChange,\n  testId,\n  autoFocus,\n  onEscape,\n  fill = false,\n}: {\n  value: string;\n  onChange: (value: string) => void;\n  testId?: string;\n  autoFocus?: boolean;\n  /** Called on Escape with the box already empty — the collapsed bar closes it. */\n  onEscape?: () => void;\n  /** Take whatever width there is, with no minimum — see {@link boxWidth}. */\n  fill?: boolean;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  const [draft, setDraft] = useState(value);\n  const prev = useRef(value);\n  // An external change (a saved view, the URL, \"Limpar\") wins over the draft.\n  if (prev.current !== value) {\n    prev.current = value;\n    if (draft !== value) setDraft(value);\n  }\n  useEffect(() => {\n    if (draft === value) return undefined;\n    const timer = setTimeout(() => onChange(draft), SEARCH_DEBOUNCE_MS);\n    return () => clearTimeout(timer);\n  }, [draft, value, onChange]);\n\n  return (\n    <TextField\n      size=\"small\"\n      value={draft}\n      autoFocus={autoFocus}\n      onChange={(event) => setDraft(event.target.value)}\n      onKeyDown={(event) => {\n        if (event.key === \"Escape\") {\n          event.preventDefault();\n          if (draft === \"\") onEscape?.();\n          setDraft(\"\");\n          return;\n        }\n        // Enter still commits IMMEDIATELY, ahead of the debounce — someone who\n        // presses it has decided, and waiting out the timer reads as a stall.\n        if (event.key !== \"Enter\") return;\n        event.preventDefault();\n        if (draft !== value) onChange(draft);\n      }}\n      placeholder={copy.search.placeholder}\n      inputProps={{ \"aria-label\": copy.search.allColumnsLabel, \"data-testid\": testId }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon sx={{ fontSize: 16, color: \"text.secondary\" }} />\n          </InputAdornment>\n        ),\n        endAdornment: draft ? (\n          <InputAdornment position=\"end\">\n            <IconButton\n              size=\"small\"\n              aria-label={copy.search.clear}\n              data-testid={testId ? `${testId}-clear` : undefined}\n              onClick={() => setDraft(\"\")}\n              sx={{ p: 0.25 }}\n            >\n              <CloseIcon sx={{ fontSize: 14 }} />\n            </IconButton>\n          </InputAdornment>\n        ) : undefined,\n      }}\n      // Takes the free space and gives it up first — step 3 of the ladder,\n      // which needs no flag because flex does it (see `computeSplit`).\n      sx={boxWidth(fill)}\n    />\n  );\n}\n\n/**\n * Step 4 of the ladder: the search as a magnifier.\n *\n * Carries a dot when a search is APPLIED. Collapsing a control that is\n * currently filtering the list, with nothing saying so, is how an operator ends\n * up staring at 3 rows of 214 and reading it as missing data.\n */\nexport function CollapsedSearch({\n  active,\n  onOpen,\n  testId,\n}: {\n  active: boolean;\n  onOpen: () => void;\n  testId?: string;\n}): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={onOpen}\n      aria-label={copy.search.open}\n      aria-expanded={false}\n      data-testid={testId ? `${testId}-collapsed` : undefined}\n      sx={{\n        position: \"relative\",\n        border: 1,\n        borderRadius: 1,\n        borderColor: active ? \"primary.main\" : \"divider\",\n        color: active ? \"primary.main\" : \"text.secondary\",\n        bgcolor: active ? \"action.selected\" : \"background.paper\",\n      }}\n    >\n      <SearchIcon sx={{ fontSize: 18 }} />\n      {active && (\n        <Box\n          component=\"span\"\n          sx={{\n            position: \"absolute\",\n            top: 2,\n            right: 2,\n            width: 6,\n            height: 6,\n            borderRadius: \"50%\",\n            bgcolor: \"primary.main\",\n          }}\n        />\n      )}\n    </IconButton>\n  );\n}\n\n"],"mappings":"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","names":["default"]}

package/dist/chunk-ITGG5OKP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Button/Button.metrics.ts"],"sourcesContent":["import { darken, lighten } from '../../../tokens/color';\nimport type { ColorValue, SizeValue } from '../../../tokens/vocabulary';\nimport type { UiPaletteColor, UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Button` RENDERERS DRAW WITH.\n *\n * `Button.styles.ts` (web, emotion) and `Button.native.tsx` (React Native)\n * read this one table. The web turns the px into rem and the padding into a\n * shorthand string; native uses the numbers as they are. Neither restates a\n * value, which is what keeps a native `md` button 16px tall of padding and\n * 16px of type exactly like the web one.\n */\nexport interface ButtonSizeMetrics {\n  paddingVertical: number;\n  paddingHorizontal: number;\n  fontSize: number;\n}\n\nexport const BUTTON_SIZES: Record<SizeValue, ButtonSizeMetrics> = {\n  xs: { paddingVertical: 2, paddingHorizontal: 8, fontSize: 12 },\n  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 14 },\n  md: { paddingVertical: 8, paddingHorizontal: 16, fontSize: 16 },\n  lg: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 18 },\n  xl: { paddingVertical: 12, paddingHorizontal: 24, fontSize: 20 },\n};\n\n/** A button that is only an icon is square: uniform padding, no min-width. */\nexport const ICON_ONLY_PADDING: Record<SizeValue, number> = {\n  xs: 2,\n  sm: 5,\n  md: 7,\n  lg: 9,\n  xl: 11,\n};\n\nexport const BUTTON_FONT_WEIGHT = 500;\n/** `theme.spacing(1)`. */\nexport const BUTTON_RADIUS_UNITS = 1;\n/** Between the icon and the label: `theme.spacing(0.5)`. */\nexport const BUTTON_ICON_GAP_UNITS = 0.5;\nexport const BUTTON_SPINNER_SIZE = 16;\n/** MUI's `line-height` for button text. */\nexport const BUTTON_LINE_HEIGHT = 1.75;\n\n/** The wash behind an outline, ghost or text button while it is hovered or pressed. */\nexport const BUTTON_WASH_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA = 0.1;\nexport const GLASS_BACKGROUND_ALPHA_PRESSED = 0.2;\nexport const GLASS_BORDER_ALPHA = 0.2;\nexport const GLOW_INNER_ALPHA = 0.6;\nexport const GLOW_OUTER_ALPHA = 0.3;\nexport const GLOW_RADIUS = 20;\nexport const PULSE_ALPHA = 0.3;\nexport const PULSE_DURATION_MS = 2000;\nexport const PULSE_SPREAD = 15;\n\n/**\n * `neutral` has no palette slot of its own in MUI, so `Button.styles.ts` has\n * always drawn it from three greys. Same three greys here.\n */\nexport function buttonPalette(theme: UiTheme, color: ColorValue): UiPaletteColor {\n  if (color === 'neutral') {\n    return {\n      main: theme.palette.grey[700],\n      dark: theme.palette.grey[800],\n      light: theme.palette.grey[500],\n      contrastText: '#fff',\n    };\n  }\n  return theme.palette[color];\n}\n\n/**\n * The label colour for `ghost` and `text`: one step darker than `main` in\n * light mode (lighter in dark), because `main` is chosen to sit UNDER white and\n * is not legible AS text on a tinted surface. See the web `quietInk`.\n */\nexport const quietInk = (theme: UiTheme, palette: UiPaletteColor): string =>\n  theme.mode === 'dark' ? lighten(palette.main, 0.35) : darken(palette.main, 0.3);\n\n/** Gradients run between two related hues; the named colours pick a specific pair. */\nexport function gradientStops(\n  theme: UiTheme,\n  color: ColorValue,\n  palette: UiPaletteColor,\n): [string, string] {\n  switch (color) {\n    case 'primary':\n      return [theme.palette.primary.main, theme.palette.secondary.main];\n    case 'secondary':\n      return [theme.palette.secondary.main, theme.palette.primary.main];\n    case 'success':\n    case 'warning':\n      return [theme.palette[color].light, theme.palette[color].dark];\n    case 'danger':\n      return [theme.palette.danger.light, theme.palette.danger.dark];\n    default:\n      return [palette.main, palette.dark];\n  }\n}\n"],"mappings":";;;;;;AAmBO,IAAM,eAAqD;AAAA,EAChE,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,UAAU,GAAG;AAAA,EAC7D,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC9D,IAAI,EAAE,iBAAiB,GAAG,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC9D,IAAI,EAAE,iBAAiB,IAAI,mBAAmB,IAAI,UAAU,GAAG;AAAA,EAC/D,IAAI,EAAE,iBAAiB,IAAI,mBAAmB,IAAI,UAAU,GAAG;AACjE;AAGO,IAAM,oBAA+C;AAAA,EAC1D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,qBAAqB;AAE3B,IAAM,sBAAsB;AAE5B,IAAM,wBAAwB;AAC9B,IAAM,sBAAsB;AAE5B,IAAM,qBAAqB;AAG3B,IAAM,oBAAoB;AAC1B,IAAM,yBAAyB;AAC/B,IAAM,iCAAiC;AACvC,IAAM,qBAAqB;AAC3B,IAAM,mBAAmB;AACzB,IAAM,mBAAmB;AACzB,IAAM,cAAc;AACpB,IAAM,cAAc;AACpB,IAAM,oBAAoB;AAC1B,IAAM,eAAe;AAMrB,SAAS,cAAc,OAAgB,OAAmC;AAC/E,MAAI,UAAU,WAAW;AACvB,WAAO;AAAA,MACL,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,MAAM,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC5B,OAAO,MAAM,QAAQ,KAAK,GAAG;AAAA,MAC7B,cAAc;AAAA,IAChB;AAAA,EACF;AACA,SAAO,MAAM,QAAQ,KAAK;AAC5B;AAOO,IAAM,WAAW,CAAC,OAAgB,YACvC,MAAM,SAAS,SAAS,QAAQ,QAAQ,MAAM,IAAI,IAAI,OAAO,QAAQ,MAAM,GAAG;AAGzE,SAAS,cACd,OACA,OACA,SACkB;AAClB,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,QAAQ,MAAM,MAAM,QAAQ,UAAU,IAAI;AAAA,IAClE,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,UAAU,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,IAClE,KAAK;AAAA,IACL,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,KAAK,EAAE,OAAO,MAAM,QAAQ,KAAK,EAAE,IAAI;AAAA,IAC/D,KAAK;AACH,aAAO,CAAC,MAAM,QAAQ,OAAO,OAAO,MAAM,QAAQ,OAAO,IAAI;AAAA,IAC/D;AACE,aAAO,CAAC,QAAQ,MAAM,QAAQ,IAAI;AAAA,EACtC;AACF;","names":[]}

package/dist/chunk-YTOYMJPM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Button/Button.tsx"],"sourcesContent":["import MuiButton from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport * as React from 'react';\n\nimport { resolveButtonProps } from './Button.helpers';\nimport { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport {\n  buttonEmphasisStyles,\n  buttonVariantStyles,\n  getColorFromTheme,\n  iconAlignmentStyles,\n  buttonSize,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\n\nconst StyledButton = styled(MuiButton, {\n  shouldForwardProp: (prop) =>\n    ['glow', 'pulse', 'loading', 'customVariant', 'customColor', 'ripple'].indexOf(\n      prop as string,\n    ) === -1,\n})<{\n  customVariant?: string;\n  customColor?: string;\n  glow?: boolean;\n  pulse?: boolean;\n  ripple?: boolean;\n}>(({ theme, customVariant, customColor = 'primary', glow, pulse }) => {\n  const colorPalette = getColorFromTheme(theme, customColor);\n\n  return {\n    textTransform: 'none',\n    fontWeight: 500,\n    borderRadius: theme.spacing(1),\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    overflow: 'hidden',\n    ...iconAlignmentStyles(theme),\n    ...buttonVariantStyles(theme, customVariant, colorPalette, customColor),\n    ...buttonEmphasisStyles(colorPalette, glow, pulse),\n  };\n});\n\n/** Our six variants collapse onto MUI's three; only outline and text differ. */\nconst muiVariantFor = (variant?: string): 'outlined' | 'text' | 'contained' => {\n  if (variant === 'outline') return 'outlined';\n  return variant === 'text' ? 'text' : 'contained';\n};\n\ntype MuiButtonColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error';\n\n/** `danger` and `neutral` are ours; the rest are MUI's own names already. */\nconst muiColorFor = (color: NonNullable<ButtonProps['color']>): MuiButtonColor => {\n  if (color === 'danger') return 'error';\n  return color === 'neutral' ? 'inherit' : color;\n};\n\n/**\n * An icon and nothing else — the shape that should render square.\n *\n * A separate predicate rather than three clauses inline: the component function\n * is already at the complexity ceiling, and \"what counts as an icon button\" is\n * a rule worth naming anyway. `loading` disqualifies, because a spinner\n * replaces the children and would otherwise make every loading button square.\n */\nfunction isIconOnly({\n  loading,\n  icon,\n  children,\n}: Pick<ButtonProps, 'loading' | 'icon' | 'children'>): boolean {\n  return !loading && icon != null && children == null;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      color,\n      size,\n      loading,\n      icon,\n      iconPosition,\n      glow,\n      pulse,\n      ripple,\n      active,\n      children,\n      disabled,\n      onClick,\n      onFocus,\n      onBlur,\n      ...others\n    } = resolveButtonProps(rawProps);\n    // Every spelling of the test id the shared contract allows, mapped to the\n    // one the DOM reads; the native Button does the same in reverse.\n    const ownTestId = resolveTestId(others, 'button');\n    const testId = (suffix: string) => childTestId(others, suffix, 'button');\n    const props = withoutTestIdProps(others);\n\n    // Wrap icon with testId if provided\n    const iconWithTestId =\n      !loading && icon ? <span data-testid={testId('icon')}>{icon}</span> : undefined;\n\n    // Only an icon, so the button is a square rather than a 64px slab.\n    const iconOnly = isIconOnly({ loading, icon, children });\n\n    const mergedClassName =\n      [active ? 'active' : '', props.className].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <StyledButton\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        color={muiColorFor(color)}\n        customVariant={variant}\n        customColor={color}\n        glow={glow}\n        pulse={pulse}\n        ripple={ripple}\n        disabled={disabled || loading}\n        disableRipple={!ripple}\n        startIcon={iconPosition === 'left' ? iconWithTestId : undefined}\n        endIcon={iconPosition === 'right' ? iconWithTestId : undefined}\n        onClick={onClick}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        sx={buttonSize(size, iconOnly)}\n        data-testid={ownTestId}\n        {...props}\n        className={mergedClassName}\n      >\n        {loading ? (\n          <CircularProgress size={16} color=\"inherit\" data-testid={testId('loading')} />\n        ) : (\n          children\n        )}\n      </StyledButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,eAAe;AACtB,OAAO,sBAAsB;AAC7B,SAAS,cAAc;AACvB,YAAY,WAAW;AAkGE;AArFzB,IAAM,eAAe,OAAO,WAAW;AAAA,EACrC,mBAAmB,CAAC,SAClB,CAAC,QAAQ,SAAS,WAAW,iBAAiB,eAAe,QAAQ,EAAE;AAAA,IACrE;AAAA,EACF,MAAM;AACV,CAAC,EAME,CAAC,EAAE,OAAO,eAAe,cAAc,WAAW,MAAM,MAAM,MAAM;AACrE,QAAM,eAAe,kBAAkB,OAAO,WAAW;AAEzD,SAAO;AAAA,IACL,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG,oBAAoB,KAAK;AAAA,IAC5B,GAAG,oBAAoB,OAAO,eAAe,cAAc,WAAW;AAAA,IACtE,GAAG,qBAAqB,cAAc,MAAM,KAAK;AAAA,EACnD;AACF,CAAC;AAGD,IAAM,gBAAgB,CAAC,YAAwD;AAC7E,MAAI,YAAY,UAAW,QAAO;AAClC,SAAO,YAAY,SAAS,SAAS;AACvC;AAKA,IAAM,cAAc,CAAC,UAA6D;AAChF,MAAI,UAAU,SAAU,QAAO;AAC/B,SAAO,UAAU,YAAY,YAAY;AAC3C;AAUA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAAgE;AAC9D,SAAO,CAAC,WAAW,QAAQ,QAAQ,YAAY;AACjD;AAEO,IAAM,SAAe;AAAA,EAC1B,CAAC,UAAU,QAAQ;AACjB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,mBAAmB,QAAQ;AAG/B,UAAM,YAAY,cAAc,QAAQ,QAAQ;AAChD,UAAM,SAAS,CAAC,WAAmB,YAAY,QAAQ,QAAQ,QAAQ;AACvE,UAAM,QAAQ,mBAAmB,MAAM;AAGvC,UAAM,iBACJ,CAAC,WAAW,OAAO,oBAAC,UAAK,eAAa,OAAO,MAAM,GAAI,gBAAK,IAAU;AAGxE,UAAM,WAAW,WAAW,EAAE,SAAS,MAAM,SAAS,CAAC;AAEvD,UAAM,kBACJ,CAAC,SAAS,WAAW,IAAI,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEzE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,cAAc,OAAO;AAAA,QAC9B,OAAO,YAAY,KAAK;AAAA,QACxB,eAAe;AAAA,QACf,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,eAAe,CAAC;AAAA,QAChB,WAAW,iBAAiB,SAAS,iBAAiB;AAAA,QACtD,SAAS,iBAAiB,UAAU,iBAAiB;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,QACA,IAAI,WAAW,MAAM,QAAQ;AAAA,QAC7B,eAAa;AAAA,QACZ,GAAG;AAAA,QACJ,WAAW;AAAA,QAEV,oBACC,oBAAC,oBAAiB,MAAM,IAAI,OAAM,WAAU,eAAa,OAAO,SAAS,GAAG,IAE5E;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}