@kanso-labs/kanso-ui 0.44.1 → 0.45.1

package/dist/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","selection","t4","content","t5","buttonClasses","toggleClasses","isToggle","T0","t6","t7","onPress","toggle","t8","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","border","shift","container","Button","_c","props","stylex.props"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonClassesState, ButtonDOMProps, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **The outlined rule is faint on purpose.** Outline variant sits at about\n// 1.6:1 against the surface in the light theme and 2:1 in the dark, under the\n// 3:1 WCAG asks of a boundary that identifies a control. The rule is not that\n// boundary: the label identifies the button, in on-surface-variant at about\n// 9:1, and the rule only shows how far the button reaches. IconButton's\n// outlined variant draws its rule in the same role for the same reason.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// The hover, focus and pressed layers come from React Aria's render state,\n// `isHovered`, `isFocusVisible` and `isPressed`, rather than from `:hover`,\n// `:focus-visible` and `:active`. On a touch screen Chromium leaves `:hover`\n// on the last element tapped, so the layer and its lifted shadow stayed on a\n// button after the tap had ended, where React Aria ignores the emulated mouse\n// events that follow a touch. And React Aria prevents the default of the\n// keydown that presses a button with Space or Enter, so `:active` never\n// matched a keyboard press, which `isPressed` reports like any other.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they win\n// over any state layer applied before them.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton`, which\n// announces the state through `aria-pressed`, as IconButton's toggle does.\n// The page gives four of the five styles a second pair of colour roles for\n// it: a filled toggle rests on surface container with an on-surface-variant\n// label and takes primary once selected, a tonal one moves from the\n// secondary container pair to secondary, an elevated one keeps its low\n// surface until it takes primary, and an outlined one swaps its rule for the\n// inverse surface pair. Under forced colours a selected toggle of any style\n// is filled `Highlight`, as IconButton's is. The page gives text no pair, so\n// a text button given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between**, from the page's size\n// token sets. `round` rests at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring and `aria-busy`, a parent's disabled state\n// — is `src/button`'s, shared with IconButton.\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  lg: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kAzted: \"xdovgog\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  pending: {\n    kkrTdU: \"x19v85br\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kAzted: \"x112cvos\",\n    k8WAf4: \"xny1cbh\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  xxl: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kAzted: \"xldltni\",\n    k8WAf4: \"x1lrxzt4\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\n    $$css: true\n  }\n};\n\n// The icon each size draws, from the page's size token sets: 20dp for the\n// two small sizes, then 24, 32 and 40. The gap before it is the size's own,\n// which `base`, `xl` and `xxl` already set as the page gives them.\nconst iconSizes = {\n  lg: {\n    kGuDYH: \"x1pvqxga\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x1s3cmhv\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"x1tgwohi\",\n    $$css: true\n  }\n};\n\n// Each size's inline padding again, for the one place it is read at runtime:\n// a standard ButtonGroup widening a pressed button by adding to it. The size\n// styles above write the same values, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\n  xxl: '64px'\n};\n\n// The padding a standard group sets while it widens or narrows the button.\nconst shifted = {\n  padding: (value: string) => [{\n    kg3NbH: value != null ? \"x30g6up\" : value,\n    $$css: true\n  }, {\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The square corner each size rests at, and a round toggle once selected.\nconst squareShapes = {\n  lg: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, whatever its shape. Applied after the\n// resting and selected shapes, so a press is felt whichever the button rests\n// at.\nconst pressedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// The interaction state layers, one style per variant for each state, applied\n// from React Aria's render state — see the header for why that and not the\n// pseudo-classes. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. Hover lifts filled and tonal off the page and raises elevated a\n// level, and a press brings each back to where it rests.\n//\n// A toggle's containers carry a layer of their own, each the label colour\n// over that container, applied after the variant's so the variant still\n// decides the shadow. A selected toggle's keeps its forced-colours\n// `Highlight`, since a later style replaces the property whole.\nconst hovered = {\n  elevated: {\n    kWkggS: \"xltxkvm\",\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xo1ct44\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  elevated: {\n    kWkggS: \"xcn1wy9\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\nconst pressed = {\n  elevated: {\n    kWkggS: \"x1d33wxb\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x7b25lv\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\n\n// Which container a toggle draws, selected and not, by its name in the\n// tables above. Three of the eight are the plain button's own: an unselected\n// tonal, elevated or outlined toggle is the tonal, elevated or outlined\n// button.\nconst toggleContainers = {\n  elevated: {\n    selected: 'elevatedToggleSelected',\n    unselected: 'elevated'\n  },\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\ntype ButtonProps = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, at the page's icon size for the button's size:\n   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw\n   * it `1em` square in `currentColor`, as every icon here is, and it follows.\n   * Hidden with the label while the button is pending.\n   */\n  icon?: ReactNode;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /**\n   * The corner the button rests at: `round` is the pill, `square` the\n   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.\n   * Either tightens while pressed, and a toggle trades one for the other\n   * once selected.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n};\ntype ButtonShape = 'round' | 'square';\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// The four styles the page gives a toggle's colour pairs; see the header.\ntype ToggleVariant = keyof typeof toggleContainers;\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square. Given `href` it is a link with the same appearance. Every\n * `aria-*` prop is forwarded to the element; React Aria alone would keep only\n * the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n */\nfunction Button({\n  children,\n  defaultSelected,\n  href,\n  icon,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  shape = 'round',\n  size: ownSize,\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup or a SplitButton around the button hands it a size, its\n  // shape at the group's inner edges and the press interaction; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  // A group that selects is React Aria's ToggleButtonGroup, whose buttons\n  // have to be toggles to take part in its selection.\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // The icon goes in with the label, inside what ButtonBase hides while the\n  // button is pending, so the ring takes the place of both.\n  const content = icon === undefined ? children : <>\n        <span {...stylex.props(styles.icon, iconSizes[size])}>{icon}</span>\n        {children}\n      </>;\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group) : buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target}>\n      {content}\n    </ButtonBase>;\n}\n\n// The button's own classes, from React Aria's render state — see the header\n// for why that and not the pseudo-classes. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction buttonClasses(shape: ButtonShape, size: ButtonSize, variant: ButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n}\n\n// What a group lays over the button: its own styles for the button's state,\n// and the standard group's widening or narrowing as extra inline padding,\n// half of the shift on either side.\nfunction groupStyles(group: ButtonGroupItem | null, size: ButtonSize, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${group.shift / 2}px)`)];\n}\n\n// A toggle's classes: the plain button's, with the container and its layers\n// swapped for the toggle's pair, and the selected shape between the resting\n// and the pressed one. The variant's own style and layers still go first, for\n// the shadow and the rule they carry. Built by a call for the reason\n// `buttonClasses` is.\nfunction toggleClasses(shape: ButtonShape, size: ButtonSize, variant: ToggleVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonClassesState) => {\n    const isSelected = state.isSelected === true;\n    const container = toggleContainers[variant][isSelected ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[size], state.isHovered && hovered[variant], state.isHovered && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && pressed[variant], state.isPressed && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n  };\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","PressEvent","StyleOrFunction","stylex","useContext","useState","ToggleGroupStateContext","ButtonClassesState","ButtonDOMProps","ButtonLinkForm","ButtonPressForm","ButtonState","ButtonToggleForm","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","ks0D6T","kHjlTd","kVAEAm","k9WMMc","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","OUTLINE_WIDTHS","const","outlinedSizes","iconSizes","PADDINGS","shifted","padding","value","val","undefined","roundShapes","kaIpWk","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","ButtonProps","variant","Exclude","ButtonVariant","children","className","disableRipple","pendingLabel","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","Button","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","t1","ownSize","target","t2","props","group","inSelectingGroup","grouped","onPressStart","onPressEnd","t3","selection","keyHeld","setKeyHeld","press","event","event_0","pointerType","ripples","t4","content","t5","buttonClasses","toggleClasses","isToggle","onPress","toggle","state","ring","isHovered","isPressed","isFocusVisible","groupStyles","isDisabled","border","shift","container","Button","_c","props","stylex.props"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, PressEvent, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useState } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonClassesState, ButtonDOMProps, ButtonLinkForm, ButtonPressForm, ButtonState, ButtonToggleForm } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **The outlined rule is faint on purpose.** Outline variant sits at about\n// 1.6:1 against the surface in the light theme and 2:1 in the dark, under the\n// 3:1 WCAG asks of a boundary that identifies a control. The rule is not that\n// boundary: the label identifies the button, in on-surface-variant at about\n// 9:1, and the rule only shows how far the button reaches. IconButton's\n// outlined variant draws its rule in the same role for the same reason.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// The hover, focus and pressed layers come from React Aria's render state,\n// `isHovered`, `isFocusVisible` and `isPressed`, rather than from `:hover`,\n// `:focus-visible` and `:active`. On a touch screen Chromium leaves `:hover`\n// on the last element tapped, so the layer and its lifted shadow stayed on a\n// button after the tap had ended, where React Aria ignores the emulated mouse\n// events that follow a touch. And React Aria prevents the default of the\n// keydown that presses a button with Space or Enter, so `:active` never\n// matched a keyboard press, which `isPressed` reports like any other.\n//\n// A press is one layer, as the page draws it: the ripple at the pressed\n// opacity, over the container at rest. The hover layer and its lift come off\n// while the button is pressed, so neither stacks under the ripple, and the\n// `pressed` table is the layer a button draws in the ripple's place: when\n// `disableRipple` turns the ripple off, and while a key holds the button\n// down, since the ripple answers a key only once it is released. The layer\n// then gives way to the ripple, which plays its whole press from there.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they win\n// over any state layer applied before them.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton`, which\n// announces the state through `aria-pressed`, as IconButton's toggle does.\n// The page gives four of the five styles a second pair of colour roles for\n// it: a filled toggle rests on surface container with an on-surface-variant\n// label and takes primary once selected, a tonal one moves from the\n// secondary container pair to secondary, an elevated one keeps its low\n// surface until it takes primary, and an outlined one swaps its rule for the\n// inverse surface pair. Under forced colours a selected toggle of any style\n// is filled `Highlight`, as IconButton's is. The page gives text no pair, so\n// a text button given those props stays a plain one.\n//\n// **The corner is a shape the button morphs between**, from the page's size\n// token sets. `round` rests at half the container's height, which is the pill\n// for a label on one line, and `square` at the size's square corner: 12dp up\n// to the page's S, 16dp at M and 28dp above. A press tightens either to the\n// size's pressed corner, 8dp, 12dp or 16dp, and a toggle trades its shape for\n// the other once selected — a round one for the square corner, a square one\n// for the round. The corner eases over the motion tokens' short duration, as\n// the container, label and rule colours and the shadow do between states, and\n// all of them move at once for a reader who asks for reduced motion.\n//\n// The round corner is a length rather than the pill token's 9999px, because\n// the browser draws a corner no larger than half the box and eases the value\n// as written. From 9999px a press spent all but the last frame or two of its\n// 150ms above the 20dp a medium button can show, so the corner held round and\n// then jumped. From half the height every frame of the ease is one the eye\n// can see. A label that wraps makes a button taller than that, and its ends a\n// little less than round, as a connected ButtonGroup's already are.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring and `aria-busy`, a parent's disabled state\n// — is `src/button`'s, shared with IconButton.\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x2b8uid\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x4ukx00 x12w9bfk\",\n    k1ekBW: \"xidvh3d\",\n    kAMwcw: \"xmg88ys\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  icon: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  lg: {\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kAzted: \"xdovgog\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"x1cio8j0\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  pending: {\n    kkrTdU: \"x19v85br\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kAzted: \"x112cvos\",\n    k8WAf4: \"xny1cbh\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"xun2zgk\",\n    kpsdNU: \"x1ecwmwu\",\n    kEoFBp: \"x1hmns74\",\n    kOIVth: \"xzoy561\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  xxl: {\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kAzted: \"xldltni\",\n    k8WAf4: \"x1lrxzt4\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst OUTLINE_WIDTHS = {\n  lg: '1px',\n  md: '1px',\n  xl: '2px',\n  xs: '1px',\n  xxl: '3px'\n} as const;\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the border takes,\n// so an outlined and a filled button with one label are one width, and a\n// group mixing them lines up. The height needs nothing, since it is a floor\n// the border already counts towards.\nconst outlinedSizes = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"xfeiziq\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x1uvede8\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    kg3NbH: \"xrhf21y\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    kg3NbH: \"x9t8nta\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    kg3NbH: \"x1wz3vkj\",\n    $$css: true\n  }\n};\n\n// The icon each size draws, from the page's size token sets: 20dp for the\n// two small sizes, then 24, 32 and 40. The gap before it is the size's own,\n// which `base`, `xl` and `xxl` already set as the page gives them.\nconst iconSizes = {\n  lg: {\n    kGuDYH: \"x1pvqxga\",\n    $$css: true\n  },\n  md: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xl: {\n    kGuDYH: \"x1s3cmhv\",\n    $$css: true\n  },\n  xs: {\n    kGuDYH: \"xwsyq91\",\n    $$css: true\n  },\n  xxl: {\n    kGuDYH: \"x1tgwohi\",\n    $$css: true\n  }\n};\n\n// Each size's inline padding again, for the one place it is read at runtime:\n// a standard ButtonGroup widening a pressed button by adding to it. The size\n// styles above write the same values, and an outlined button's border comes\n// off them here as it does in `outlinedSizes`.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.md,\n  xxl: '64px'\n};\n\n// The padding a standard group sets while it widens or narrows the button.\nconst shifted = {\n  padding: (value: string) => [{\n    kg3NbH: value != null ? \"x30g6up\" : value,\n    $$css: true\n  }, {\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The round corner each size rests at, and a square toggle once selected:\n// half the container's height — see the header for why not the pill's\n// 9999px. `min()` leaves the pill token in charge below that, so a scheme\n// that sets `--kui-radius-pill` small still draws round buttons at its corner.\nconst roundShapes = {\n  lg: {\n    kaIpWk: \"x1j5kmnq\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1y5wlyh\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x39tcx0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"xcslhsm\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xjy9rn5\",\n    $$css: true\n  }\n};\n\n// The square corner each size rests at, and a round toggle once selected.\nconst squareShapes = {\n  lg: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"x19pkqky\",\n    $$css: true\n  }\n};\n\n// The corner each size presses to, whatever its shape. Applied after the\n// resting and selected shapes, so a press is felt whichever the button rests\n// at.\nconst pressedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// The interaction state layers, one style per variant for each state, applied\n// from React Aria's render state — see the header for why that and not the\n// pseudo-classes. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. Hover lifts filled and tonal off the page and raises elevated a\n// level, and a press brings each back to where it rests.\n//\n// A toggle's containers carry a layer of their own, each the label colour\n// over that container, applied after the variant's so the variant still\n// decides the shadow. A selected toggle's keeps its forced-colours\n// `Highlight`, since a later style replaces the property whole.\nconst hovered = {\n  elevated: {\n    kWkggS: \"xltxkvm\",\n    kGVxlE: \"x1os83gw\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xo1ct44\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  elevated: {\n    kWkggS: \"xcn1wy9\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The pressed layer of a button whose ripple is off, drawn in the ripple's\n// place — see the header. Its shadow is the variant's resting one, which the\n// hover's lift no longer covers while the button is pressed.\nconst pressed = {\n  elevated: {\n    kWkggS: \"x1d33wxb\",\n    $$css: true\n  },\n  elevatedToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x7b25lv\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\n\n// Which container a toggle draws, selected and not, by its name in the\n// tables above. Three of the eight are the plain button's own: an unselected\n// tonal, elevated or outlined toggle is the tonal, elevated or outlined\n// button.\nconst toggleContainers = {\n  elevated: {\n    selected: 'elevatedToggleSelected',\n    unselected: 'elevated'\n  },\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\ntype ButtonProps = ButtonDOMProps & (ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {\n  /**\n   * A toggle takes any variant but `text`, which the page gives no\n   * selected colours.\n   */\n  variant?: Exclude<ButtonVariant, 'text'>;\n})) & {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. A press then draws its layer as a background\n   * instead, at the same pressed opacity, so the button reads the same\n   * either way. The hover and focus layers are unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, at the page's icon size for the button's size:\n   * 20px at `xs` and `md`, 24px at `lg`, 32px at `xl` and 40px at `xxl`. Draw\n   * it `1em` square in `currentColor`, as every icon here is, and it follows.\n   * Hidden with the label while the button is pending.\n   */\n  icon?: ReactNode;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /**\n   * The corner the button rests at: `round` is the pill, `square` the\n   * page's rounded rectangle, 12px up to `md`, 16px at `lg` and 28px above.\n   * Either tightens while pressed, and a toggle trades one for the other\n   * once selected.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n};\ntype ButtonShape = 'round' | 'square';\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// The four styles the page gives a toggle's colour pairs; see the header.\ntype ToggleVariant = keyof typeof toggleContainers;\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square. Given `href` it is a link with the same appearance. Every\n * `aria-*` prop is forwarded to the element; React Aria alone would keep only\n * the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. The three forms are exclusive, so a toggle\n * given `href` does not compile, and nor does a `text` toggle, which the page\n * gives no selected colours — a `text` button in a selecting `ButtonGroup`\n * is the one that toggles, for the group's sake. A toggle may be pending,\n * for a state saved somewhere slow: the ring replaces its label and a press\n * changes nothing until it clears.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n */\nfunction Button({\n  children,\n  defaultSelected,\n  href,\n  icon,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  shape = 'round',\n  size: ownSize,\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup or a SplitButton around the button hands it a size, its\n  // shape at the group's inner edges and the press interaction; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  // A group that selects is React Aria's ToggleButtonGroup, whose buttons\n  // have to be toggles to take part in its selection.\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const grouped = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const onPressEnd = grouped.onPressEnd ?? props.onPressEnd;\n  const onPressStart = grouped.onPressStart ?? props.onPressStart;\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n  // Whether a key holds the button down, which the ripple does not draw\n  // until the key is released, so the pressed layer draws in its place.\n  const [keyHeld, setKeyHeld] = useState(false);\n  const press = {\n    onPressEnd: (event: PressEvent) => {\n      setKeyHeld(false);\n      onPressEnd?.(event);\n    },\n    onPressStart: (event: PressEvent) => {\n      setKeyHeld(event.pointerType === 'keyboard');\n      onPressStart?.(event);\n    }\n  };\n  const ripples = props.disableRipple !== true && !keyHeld;\n\n  // The icon goes in with the label, inside what ButtonBase hides while the\n  // button is pending, so the ring takes the place of both.\n  const content = icon === undefined ? children : <>\n        <span {...stylex.props(styles.icon, iconSizes[size])}>{icon}</span>\n        {children}\n      </>;\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection — a text button too, which draws its\n  // selection by nothing but the group's shape. Whether a button sits in one\n  // does not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group, ripples) : toggleClasses(shape, size, variant, group, ripples)} isPending={isPending}>\n        {content}\n      </ToggleButtonBase>;\n  }\n\n  // The three props that make this a toggle on its own, read as IconButton\n  // reads them, and on the same component as the plain button so a toggle\n  // whose `isSelected` is still loading stays one element when it arrives.\n  // The types keep them off a `text` button; the check here keeps a call\n  // site that slipped past them a plain button, as it always was.\n  const isToggle = variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined);\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleClasses(shape, size, variant, group, ripples) : buttonClasses(shape, size, variant, group, ripples)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target}>\n      {content}\n    </ButtonBase>;\n}\n\n// The button's own classes, from React Aria's render state — see the header\n// for why that and not the pseudo-classes, and for why a press drops the\n// hover layer and draws its own only where the ripple does not. Built by a\n// call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\nfunction buttonClasses(shape: ButtonShape, size: ButtonSize, variant: ButtonVariant, group: ButtonGroupItem | null, ripples: boolean) {\n  return (state: ButtonClassesState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], variant === 'outlined' && outlinedSizes[size], state.isHovered && !state.isPressed && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && !ripples && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n}\n\n// What a group lays over the button: its own styles for the button's state,\n// and the standard group's widening or narrowing as extra inline padding,\n// half of the shift on either side.\nfunction groupStyles(group: ButtonGroupItem | null, size: ButtonSize, variant: ButtonVariant, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : '0px';\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} - ${border} + ${group.shift / 2}px)`)];\n}\n\n// A toggle's classes: the plain button's, with the container and its layers\n// swapped for the toggle's pair, and the selected shape between the resting\n// and the pressed one. The variant's own style and layers still go first, for\n// the shadow and the rule they carry. Built by a call for the reason\n// `buttonClasses` is.\nfunction toggleClasses(shape: ButtonShape, size: ButtonSize, variant: ToggleVariant, group: ButtonGroupItem | null, ripples: boolean) {\n  return (state: ButtonClassesState) => {\n    const isSelected = state.isSelected === true;\n    const container = toggleContainers[variant][isSelected ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === 'square' ? squareShapes[size] : roundShapes[size], isSelected && (shape === 'square' ? roundShapes[size] : squareShapes[size]), variant === 'outlined' && outlinedSizes[size], state.isHovered && !state.isPressed && hovered[variant], state.isHovered && !state.isPressed && hovered[container], state.isFocusVisible && focused[variant], state.isFocusVisible && focused[container], state.isPressed && !ripples && pressed[variant], state.isPressed && !ripples && pressed[container], state.isPressed && pressedShapes[size], groupStyles(group, size, variant, state), state.isPending === true && styles.pending, state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\n  };\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonShape, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/card/index.d.ts

@@ -3,9 +3,11 @@ import { RenderComponentProps } from "../../render/useRender.js";
 type CardProps = {
   /**
    * Makes the card the thing you press: it ripples, lifts on hover, and takes
-   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave
-   * it off for a card that merely holds content, including one containing its
-   * own buttons.
+   * a focus ring. Renders a `<button>` unless `render` says otherwise. A
+   * button holds phrasing content only, so its children are spans, which a
+   * `Text` is, laid out through StyleX; for block content, `render` gives it
+   * an anchor or another element. Leave it off for a card that merely holds
+   * content, including one containing its own buttons.
    * @default false
    */
   interactive?: boolean;
@@ -40,6 +42,12 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  * as a link and opening in a new tab on a modifier click, which a `<button>`
  * with an onClick does neither of.
  *
+ * ```tsx
+ * <Card interactive render={<a href="#first" />}>
+ *   <Text variant="titleMedium">Headline</Text>
+ * </Card>
+ * ```
+ *
  * `interactive` and `render` are separate axes. `interactive` says the card
  * is pressable and gives it the ripple, the hover lift, and a focus ring;
  * `render` says what it is. A pressable card with no `render` is a

package/dist/components/card/index.js

@@ -98,10 +98,26 @@ const interactionStyles = {
 	},
 	filled: {
 		kWkggS: "x1w49kxs x10l1pcx xt0lj0h x1rrhr5q",
+		kGVxlE: "xpk4wdd x1xzfgx1 x1jblvwk",
 		$$css: true
 	},
 	outlined: {
 		kWkggS: "x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32",
+		kGVxlE: "xpk4wdd x1xzfgx1 x1jblvwk",
+		$$css: true
+	}
+};
+const focusColors = {
+	elevated: {
+		kjBf7l: "xat36cu",
+		$$css: true
+	},
+	filled: {
+		kjBf7l: "xat36cu",
+		$$css: true
+	},
+	outlined: {
+		kjBf7l: "xnzrtil",
 		$$css: true
 	}
 };
@@ -111,6 +127,12 @@ const interactionStyles = {
 * as a link and opening in a new tab on a modifier click, which a `<button>`
 * with an onClick does neither of.
 *
+* ```tsx
+* <Card interactive render={<a href="#first" />}>
+*   <Text variant="titleMedium">Headline</Text>
+* </Card>
+* ```
+*
 * `interactive` and `render` are separate axes. `interactive` says the card
 * is pressable and gives it the ripple, the hover lift, and a focus ring;
 * `render` says what it is. A pressable card with no `render` is a
@@ -183,7 +205,7 @@ function Card(t0) {
 		$[18] = t11;
 		$[19] = t12;
 	} else t12 = $[19];
-	const t13 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== "outlined" && styles.interactiveBoundary, interactive && !disabled && focus.ring, interactive && !disabled && interactionStyles[variant], disabled && styles.disabled, disabled && disabledStyles[variant]), props$1);
+	const t13 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== "outlined" && styles.interactiveBoundary, interactive && !disabled && focus.ring, interactive && !disabled && focusColors[variant], interactive && !disabled && interactionStyles[variant], disabled && styles.disabled, disabled && disabledStyles[variant]), props$1);
 	let t14;
 	if ($[20] !== props$1 || $[21] !== ripple.handlers || $[22] !== t10 || $[23] !== t12 || $[24] !== t13 || $[25] !== t8) {
 		t14 = {

package/dist/components/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","MouseEvent","stylex","cloneElement","isValidElement","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","FORCED_COLORS","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kHjlTd","kVAEAm","kybGjl","$$css","content","kAzted","disabled","kVAM5u","kkrTdU","disabledContent","kSiTet","disabledElevated","kWkggS","kGVxlE","disabledFilled","disabledOutlined","elevated","filled","interactive","kVVagm","kzqmXN","k9WMMc","kIyJzY","k1ekBW","kAMwcw","interactiveBoundary","ksu8eU","outlined","paddingDefault","kmVPX3","paddingNone","HOVER_CAPABLE","interactionStyles","CardProps","isDisabled","padding","variant","CardVariant","Card","t0","$","children","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","props","undefined","t5","t6","ripple","padded","t7","t8","type","t9","handlers","t10","disabledAttributes","t11","0","className","1","t12","surface","t13","ring","disabledStyles","t14","t15","withoutActivation","t16","defaultTagName","preventDefault","event","Record","href","tabIndex","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport type { MouseEvent } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { cloneElement, isValidElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    kAzted: \"x1us19tq\",\n    $$css: true\n  },\n  disabled: {\n    kVAM5u: \"xmnqt3w\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disabledContent: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  disabledElevated: {\n    kWkggS: \"x1jfv5e4\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  disabledFilled: {\n    kWkggS: \"x6mg230\",\n    $$css: true\n  },\n  disabledOutlined: {\n    kVAM5u: \"x1y3ic1l xmnqt3w\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    kIyJzY: \"x1iuyhda x12w9bfk\",\n    k1ekBW: \"x106061f\",\n    kAMwcw: \"x1g6yzlr\",\n    $$css: true\n  },\n  interactiveBoundary: {\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. An\n// interactive card is a plain element React Aria does not host, so it has no\n// `isHovered` to draw its hover layer from, and Chromium leaves `:hover` on\n// whatever a touch last tapped — a card tapped and then navigated back to\n// stayed lifted. Inside this query a touch screen draws no hover at all. A\n// touchscreen laptop still matches it for its trackpad, which is the limit of\n// asking the device rather than the event.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The state layers, from pseudo-classes, since the card has no render state\n// to read — see `HOVER_CAPABLE`.\n// `:active` is written twice, bare for a touch and again inside the query.\n// StyleX orders a rule by the sum of its conditions, so a hover inside the\n// query would otherwise come after a bare press and win while both held.\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x14zlms8 xqmo4o3 x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs x10l1pcx xt0lj0h x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, stops rippling and lifting, and takes no press. The\n   * default `<button>` is disabled outright. An element of the call site's\n   * own through `render` is marked `aria-disabled`, and an element handed in\n   * directly loses its `href`, `tabIndex` and `onClick`, so a link card can\n   * neither be followed nor focused. Has no effect on a card that is not\n   * `interactive`, which cannot be pressed to begin with.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const disabled = interactive && isDisabled;\n  const ripple = useRipple(interactive && !disabled, {\n    onClick: disabled ? undefined : onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      // After the ripple's handlers, whose click it replaces while disabled.\n      ...disabledAttributes(disabled, render),\n      children: <>\n          {interactive ? <span {...{\n          0: {\n            className: \"x9f619 x1lliihq x1us19tq\"\n          },\n          1: {\n            className: \"x9f619 x1lliihq x1us19tq x1ppv7y9\"\n          }\n        }[!!disabled << 0]}>\n              {children}\n            </span> : children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== 'outlined' && styles.interactiveBoundary, interactive && !disabled && focus.ring, interactive && !disabled && interactionStyles[variant], disabled && styles.disabled, disabled && disabledStyles[variant]), props)\n    },\n    render: disabled ? withoutActivation(render) : render\n  });\n}\nconst disabledStyles = {\n  elevated: styles.disabledElevated,\n  filled: styles.disabledFilled,\n  outlined: styles.disabledOutlined\n};\n\n// How a disabled card says so, by the element it renders. The default\n// <button> takes the native `disabled`, which removes it from the tab order\n// and fires nothing on a press. Any other element has no such attribute, so\n// it is marked `aria-disabled` for assistive technology, and a click on it\n// has its default prevented, which is what would follow a link — the click\n// a function passed as `render` wires up is its own, and runs first.\nfunction disabledAttributes(disabled: boolean, render: CardProps['render']) {\n  if (!disabled) {\n    return undefined;\n  }\n  if (render === undefined) {\n    return {\n      disabled: true\n    };\n  }\n  return {\n    'aria-disabled': true,\n    onClick: preventDefault\n  };\n}\nfunction preventDefault(event: MouseEvent) {\n  event.preventDefault();\n}\n\n// An element handed in as `render`, without what would still activate it: an\n// element's own props win over the card's, so an <a href> stays a link the\n// card cannot switch off from outside. Without an `href` it is neither\n// followed nor focusable, and without its `tabIndex` it is not focusable\n// either. Its `onClick` is replaced rather than removed, since a key the\n// element carries wins even when its value is undefined, and would drop the\n// card's own prevented click along with it.\nfunction withoutActivation(render: CardProps['render']): CardProps['render'] {\n  if (!isValidElement<Record<string, unknown>>(render)) {\n    return render;\n  }\n  return cloneElement(render, {\n    href: undefined,\n    onClick: preventDefault,\n    tabIndex: undefined\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","MouseEvent","stylex","cloneElement","isValidElement","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","motion","radii","shadows","spacing","stateLayerOpacity","FORCED_COLORS","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kHjlTd","kVAEAm","kybGjl","$$css","content","kAzted","disabled","kVAM5u","kkrTdU","disabledContent","kSiTet","disabledElevated","kWkggS","kGVxlE","disabledFilled","disabledOutlined","elevated","filled","interactive","kVVagm","kzqmXN","k9WMMc","kIyJzY","k1ekBW","kAMwcw","interactiveBoundary","ksu8eU","outlined","paddingDefault","kmVPX3","paddingNone","HOVER_CAPABLE","interactionStyles","focusColors","kjBf7l","CardProps","isDisabled","padding","variant","CardVariant","Card","t0","$","children","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","props","undefined","t5","t6","ripple","padded","t7","t8","type","t9","handlers","t10","disabledAttributes","t11","0","className","1","t12","surface","t13","ring","disabledStyles","t14","t15","withoutActivation","t16","defaultTagName","preventDefault","event","Record","href","tabIndex","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport type { MouseEvent } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { cloneElement, isValidElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    kAzted: \"x1us19tq\",\n    $$css: true\n  },\n  disabled: {\n    kVAM5u: \"xmnqt3w\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  disabledContent: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  disabledElevated: {\n    kWkggS: \"x1jfv5e4\",\n    kGVxlE: \"x1gnnqk1\",\n    $$css: true\n  },\n  disabledFilled: {\n    kWkggS: \"x6mg230\",\n    $$css: true\n  },\n  disabledOutlined: {\n    kVAM5u: \"x1y3ic1l xmnqt3w\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    kIyJzY: \"x1iuyhda x12w9bfk\",\n    k1ekBW: \"x106061f\",\n    kAMwcw: \"x1g6yzlr\",\n    $$css: true\n  },\n  interactiveBoundary: {\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. An\n// interactive card is a plain element React Aria does not host, so it has no\n// `isHovered` to draw its hover layer from, and Chromium leaves `:hover` on\n// whatever a touch last tapped — a card tapped and then navigated back to\n// stayed lifted. Inside this query a touch screen draws no hover at all. A\n// touchscreen laptop still matches it for its trackpad, which is the limit of\n// asking the device rather than the event.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The state layers, from pseudo-classes, since the card has no render state\n// to read — see `HOVER_CAPABLE`.\n// `:active` is written twice, bare for a touch and again inside the query.\n// StyleX orders a rule by the sum of its conditions, so a hover inside the\n// query would otherwise come after a bare press and win while both held.\n//\n// Each variant also lifts one level on hover and comes back down on a press,\n// to the container elevations the cards page gives: the elevated card from\n// level 1 to 2, and the filled and outlined cards from level 0 to 1.\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x14zlms8 xqmo4o3 x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs x10l1pcx xt0lj0h x1rrhr5q\",\n    kGVxlE: \"xpk4wdd x1xzfgx1 x1jblvwk\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32\",\n    kGVxlE: \"xpk4wdd x1xzfgx1 x1jblvwk\",\n    $$css: true\n  }\n};\n\n// The cards page's focus indicator, in secondary on the elevated and filled\n// cards and in on surface on the outlined one, where the shared ring takes\n// primary. Only the colour is the card's: the width, the offset and the\n// `:focus-visible` are the shared ring's, which this is applied over. Under\n// forced colours the mode repaints the outline in a system colour, as it does\n// every ring's.\nconst focusColors = {\n  elevated: {\n    kjBf7l: \"xat36cu\",\n    $$css: true\n  },\n  filled: {\n    kjBf7l: \"xat36cu\",\n    $$css: true\n  },\n  outlined: {\n    kjBf7l: \"xnzrtil\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. A\n   * button holds phrasing content only, so its children are spans, which a\n   * `Text` is, laid out through StyleX; for block content, `render` gives it\n   * an anchor or another element. Leave it off for a card that merely holds\n   * content, including one containing its own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, stops rippling and lifting, and takes no press. The\n   * default `<button>` is disabled outright. An element of the call site's\n   * own through `render` is marked `aria-disabled`, and an element handed in\n   * directly loses its `href`, `tabIndex` and `onClick`, so a link card can\n   * neither be followed nor focused. Has no effect on a card that is not\n   * `interactive`, which cannot be pressed to begin with.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * ```tsx\n * <Card interactive render={<a href=\"#first\" />}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  isDisabled = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const disabled = interactive && isDisabled;\n  const ripple = useRipple(interactive && !disabled, {\n    onClick: disabled ? undefined : onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      // After the ripple's handlers, whose click it replaces while disabled.\n      ...disabledAttributes(disabled, render),\n      children: <>\n          {interactive ? <span {...{\n          0: {\n            className: \"x9f619 x1lliihq x1us19tq\"\n          },\n          1: {\n            className: \"x9f619 x1lliihq x1us19tq x1ppv7y9\"\n          }\n        }[!!disabled << 0]}>\n              {children}\n            </span> : children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== 'outlined' && styles.interactiveBoundary, interactive && !disabled && focus.ring, interactive && !disabled && focusColors[variant], interactive && !disabled && interactionStyles[variant], disabled && styles.disabled, disabled && disabledStyles[variant]), props)\n    },\n    render: disabled ? withoutActivation(render) : render\n  });\n}\nconst disabledStyles = {\n  elevated: styles.disabledElevated,\n  filled: styles.disabledFilled,\n  outlined: styles.disabledOutlined\n};\n\n// How a disabled card says so, by the element it renders. The default\n// <button> takes the native `disabled`, which removes it from the tab order\n// and fires nothing on a press. Any other element has no such attribute, so\n// it is marked `aria-disabled` for assistive technology, and a click on it\n// has its default prevented, which is what would follow a link — the click\n// a function passed as `render` wires up is its own, and runs first.\nfunction disabledAttributes(disabled: boolean, render: CardProps['render']) {\n  if (!disabled) {\n    return undefined;\n  }\n  if (render === undefined) {\n    return {\n      disabled: true\n    };\n  }\n  return {\n    'aria-disabled': true,\n    onClick: preventDefault\n  };\n}\nfunction preventDefault(event: MouseEvent) {\n  event.preventDefault();\n}\n\n// An element handed in as `render`, without what would still activate it: an\n// element's own props win over the card's, so an <a href> stays a link the\n// card cannot switch off from outside. Without an `href` it is neither\n// followed nor focusable, and without its `tabIndex` it is not focusable\n// either. Its `onClick` is replaced rather than removed, since a key the\n// element carries wins even when its value is undefined, and would drop the\n// card's own prevented click along with it.\nfunction withoutActivation(render: CardProps['render']): CardProps['render'] {\n  if (!isValidElement<Record<string, unknown>>(render)) {\n    return render;\n  }\n  return cloneElement(render, {\n    href: undefined,\n    onClick: preventDefault,\n    tabIndex: undefined\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"mappings":"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"}

package/dist/components/checkbox/index.js

@@ -16,7 +16,6 @@ import { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from "react-
 const styles = {
 	box: {
 		k6CgDc: "x12w9bfk",
-		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
 		kZKoxP: "xmix8c7",
 		kVAM5u: "x1is7jjm",
@@ -25,9 +24,9 @@ const styles = {
 		kMzoRj: "xdh2fpr",
 		kB7OPa: "x9f619",
 		kMwMTN: "xwjo7ld",
-		k1xSpc: "x78zum5",
+		k1xSpc: "x1lliihq",
 		kzqmXN: "x1xp8n7a",
-		kjj79g: "xl56j7k",
+		kVAEAm: "x1n2onr6",
 		kIyJzY: "x1qno0dh",
 		k1ekBW: "xts7igz",
 		kAMwcw: "xpc4ca7",
@@ -109,7 +108,7 @@ const pressedLayers = {
 		$$css: true
 	}
 };
-function buttonContent(children, ripple, inGroup) {
+function buttonContent(children, surface, inGroup) {
 	return (state) => {
 		const required = state.isRequired && !inGroup;
 		const marked = state.isSelected || state.isIndeterminate;
@@ -117,12 +116,17 @@ function buttonContent(children, ripple, inGroup) {
 		const tone = state.isInvalid ? "error" : marked ? "marked" : "unmarked";
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
-			...interactive ? ripple.handlers : {},
 			...props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
-			children: [/* @__PURE__ */ jsx("span", {
+			children: [/* @__PURE__ */ jsxs("span", {
 				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
-				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : null
-			}), interactive ? ripple.surface : null]
+				children: [/* @__PURE__ */ jsx(CheckGlyph, { ...{
+					0: { className: "x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g xg01cxk x10l6tqk x1a33avv x1qno0dh x6o7n8i xpc4ca7" },
+					1: { className: "x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g x10l6tqk x1qno0dh x6o7n8i xpc4ca7 x1hc1fzr x3oybdh" }
+				}[!!(state.isSelected && !state.isIndeterminate) << 0] }), /* @__PURE__ */ jsx(IndeterminateGlyph, { ...{
+					0: { className: "x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g xg01cxk x10l6tqk x1a33avv x1qno0dh x6o7n8i xpc4ca7" },
+					1: { className: "x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g x10l6tqk x1qno0dh x6o7n8i xpc4ca7 x1hc1fzr x3oybdh" }
+				}[!!state.isIndeterminate << 0] })]
+			}), interactive ? surface : null]
 		}), /* @__PURE__ */ jsx(ControlLabel, {
 			isRequired: required,
 			state,
@@ -145,64 +149,67 @@ function buttonContent(children, ripple, inGroup) {
 * which is the element a layout positions.
 */
 function Checkbox(t0) {
-	const $ = c(20);
+	const $ = c(15);
 	const { children, description, error, ...props$1 } = t0;
-	const ripple = useRipple();
 	const validationBehavior = useFieldValidationBehavior();
-	const inGroup = useContext(CheckboxGroupStateContext) !== null;
+	const group = useContext(CheckboxGroupStateContext);
+	const inGroup = group !== null;
 	const reachable = !inGroup && (props$1.isRequired === true || props$1.validate !== void 0 || props$1.name !== void 0);
-	const T0 = CheckboxField;
+	const interactive = props$1.isDisabled !== true && props$1.isReadOnly !== true && group?.isDisabled !== true && group?.isReadOnly !== true;
 	let t1;
-	if ($[0] !== error) {
-		t1 = invalidFrom(error);
-		$[0] = error;
-		$[1] = t1;
-	} else t1 = $[1];
-	const t2 = mergeStatefulStyles(props(controlStyles.field), props$1);
-	let t3;
-	if ($[2] !== children || $[3] !== inGroup || $[4] !== ripple) {
-		t3 = buttonContent(children, ripple, inGroup);
-		$[2] = children;
-		$[3] = inGroup;
-		$[4] = ripple;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(CheckboxButton, {
-			className: "xjp7ctv",
-			children: t3
-		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {};
+		$[0] = t1;
+	} else t1 = $[0];
+	const ripple = useRipple(interactive, t1, true, true);
+	const press = { onPress: (event) => {
+		if (event.pointerType === "keyboard") ripple.play();
+		props$1.onPress?.(event);
+	} };
+	let t2;
+	if ($[1] !== error) {
+		t2 = invalidFrom(error);
+		$[1] = error;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = mergeStatefulStyles(props(controlStyles.field), props$1);
+	const t4 = ripple.handlers;
 	let t5;
-	if ($[8] !== description || $[9] !== error || $[10] !== reachable || $[11] !== t4) {
-		t5 = fieldContent(t4, description, error, reachable);
-		$[8] = description;
-		$[9] = error;
-		$[10] = reachable;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
+	if ($[3] !== children || $[4] !== inGroup || $[5] !== ripple.surface) {
+		t5 = buttonContent(children, ripple.surface, inGroup);
+		$[3] = children;
+		$[4] = inGroup;
+		$[5] = ripple.surface;
+		$[6] = t5;
+	} else t5 = $[6];
 	let t6;
-	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t1 || $[16] !== t2 || $[17] !== t5 || $[18] !== validationBehavior) {
-		t6 = /* @__PURE__ */ jsx(T0, {
-			isInvalid: t1,
-			validationBehavior,
-			...props$1,
-			...t2,
+	if ($[7] !== ripple.handlers || $[8] !== t5) {
+		t6 = /* @__PURE__ */ jsx(CheckboxButton, {
+			...t4,
+			className: "xjp7ctv",
 			children: t5
 		});
-		$[13] = T0;
-		$[14] = props$1;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t5;
-		$[18] = validationBehavior;
-		$[19] = t6;
-	} else t6 = $[19];
-	return t6;
+		$[7] = ripple.handlers;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== description || $[11] !== error || $[12] !== reachable || $[13] !== t6) {
+		t7 = fieldContent(t6, description, error, reachable);
+		$[10] = description;
+		$[11] = error;
+		$[12] = reachable;
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	return /* @__PURE__ */ jsx(CheckboxField, {
+		isInvalid: t2,
+		validationBehavior,
+		...props$1,
+		...press,
+		...t3,
+		children: t7
+	});
 }
 function fieldContent(button, description, error, reserve) {
 	return ({ isDisabled }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [button, /* @__PURE__ */ jsx("div", {