@kanso-labs/kanso-ui 0.36.0 → 0.37.0

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","twoLine","threeLine","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAASsB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+B1C,MAAaC,UAAU2C,MAAM3C,UAAU4C,MAAMP,OAAOE,UAAU,KAAKvC,UAAU6C,SAASN,UAAU,KAAKvC,UAAU8C,WAAWL,MAAMR,cAAcjC,UAAU+C,cAAcN,MAAMV,aAAa/B,UAAUgD,SAASP,MAAMX,kBAAkB9B,UAAUiD,cAAcR,MAAMT,aAAahC,UAAUkD,SAAST,MAAMZ,cAAc7B,UAAUmD,QAAQ;AACjX"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","stateLayerOpacity","typography","FORCED_COLORS","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","dropTarget","kWkggS","kjBf7l","kInvED","kMeerF","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isDragging","isDropTarget","isFocusVisible","isHovered","isPressed","isSelected","containerClasses","state","className","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","props","base","list","twoLine","threeLine","dragging","selectedList","hovered","focusVisible","pressed","disabled","stylex.props"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\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 collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  dropTarget: {\n    kWkggS: \"x659ado\",\n    kjBf7l: \"xrgy624 x1x84bn5\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  /** Reported only where the collection drags; see `dragging` in `src/row`. */\n  isDragging?: boolean;\n  /** Reported only where the collection takes drops onto its items. */\n  isDropTarget?: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * A collection's own box, as the function React Aria's `className` prop\n * wants: the container, and the drop target while a drop would land on the\n * collection as a whole. List, ListBox and Tree each draw it.\n */\nfunction containerClasses(state: {\n  isDropTarget: boolean;\n}) {\n  return {\n    0: {\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    },\n    1: {\n      className: \"x9f619 x78zum5 xdt5ytf x1cmllll x659ado xrgy624 x1x84bn5 x2ssjo2 xaatb59 x1de99jn\"\n    }\n  }[!!state.isDropTarget << 0];\n}\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isDragging === true && rowStyles.dragging, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDropTarget === true && rowStyles.dropTarget, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, containerClasses, rowItemStyles };"],"mappings":";;;AA4BA,MAAMS,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRO,QAAQ;EACRL,OAAO;CACT;CACAM,QAAQ;EACNX,QAAQ;EACRY,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,SAAS;EACPC,QAAQ;EACRtB,QAAQ;EACRC,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRnB,OAAO;CACT;CACAoB,SAAS;EACPzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;AAuBA,SAAS6B,iBAAiBC,OAEvB;CACD,OAAO;EACL,GAAG,EACDC,WAAW,2CACb;EACA,GAAG,EACDA,WAAW,oFACb;CACF,EAAE,CAAC,CAACD,MAAMN,gBAAgB;AAC5B;;;;;;;;;;;;;;;;;;;;AAqBA,SAASQ,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQR,UAA+B7C,MAAaC,UAAUsD,MAAMtD,UAAUuD,MAAMN,OAAOE,UAAU,KAAKnD,UAAUwD,SAASL,UAAU,KAAKnD,UAAUyD,WAAWb,MAAMP,eAAe,QAAQrC,UAAU0D,UAAUd,MAAMF,cAAc1C,UAAU2D,cAAcf,MAAMJ,aAAaxC,UAAU4D,SAAShB,MAAML,kBAAkBvC,UAAU6D,cAAcjB,MAAMH,aAAazC,UAAU8D,SAASlB,MAAMN,iBAAiB,QAAQtC,UAAUe,YAAY6B,MAAMR,cAAcpC,UAAU+D,QAAQ;AACvd"}

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

@@ -28,6 +28,9 @@ type BadgeProps = RenderComponentProps<'span'> & {
  * </IconButton>
  * ```
  *
+ * Given no children, the mark stands alone in the line, as a tab draws it
+ * after its label.
+ *
  * The call site's `className` and `style` land on the element wrapping what
  * the badge is drawn on.
  */

package/dist/components/badge/index.js

@@ -19,6 +19,9 @@ import { useLocale } from "react-aria-components";
 * </IconButton>
 * ```
 *
+* Given no children, the mark stands alone in the line, as a tab draws it
+* after its label.
+*
 * The call site's `className` and `style` land on the element wrapping what
 * the badge is drawn on.
 */
@@ -43,11 +46,13 @@ function Badge(t0) {
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
 			0: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft" },
-			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" }
+			2: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" },
+			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk" },
+			3: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk" }
 		};
 		$[4] = t5;
 	} else t5 = $[4];
-	const t6 = t5[!!(label === void 0) << 0];
+	const t6 = t5[!!(label === void 0) << 1 | !!(children === void 0 || children === null) << 0];
 	let t7;
 	if ($[5] !== label || $[6] !== t6) {
 		t7 = /* @__PURE__ */ jsx("span", {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","1","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\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)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          }\n        }[!!(label === undefined) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsEA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAP8B,MAAAqB,KAAAL,GAO7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc;CAAE,IAAAiB;CAAA,IAAAtB,EAAA,OAAAY,SAAAZ,EAAA,OAAAqB,IAAA;EAP7BC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAQ1BT,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAqB;EAAArB,EAAA,KAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,OAAAC,YAAAD,EAAA,OAAAsB,IAAA;EAXDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLtB,UACDqB,EASO,EAAA,CAAA;EACNtB,EAAA,KAAAC;EAAAD,EAAA,KAAAsB;EAAAtB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,IAAAwB;CAAA,IAAAxB,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAuB,IAAA;EAjBAC,KAAA;GAAA,GACFpB;GAAK,GACLU;GAEMb,UACCsB;EAaZ;EAACvB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAG,UAAAH,EAAA,QAAAwB,IAAA;EApBcC,MAAA;GAAAC,gBACCb;GAAMT,OACfoB;GAkBNrB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,OAtBMZ,UAAUqC,GAsBhB;AAAC"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","2","1","3","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above it.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\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)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label.\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          2: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk\"\n          },\n          3: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk\"\n          }\n        }[!!(label === undefined) << 1 | !!(children === undefined || children === null) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;GAACM,GACE,EAAAN,WACU,0MACb;GAACO,GACE,EAAAP,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAb8B,MAAAuB,KAAAP,GAa7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc,IAAI,CAAC,EAAEJ,aAAaI,KAAAA,KAAaJ,aAAa,SAAS;CAAE,IAAAuB;CAAA,IAAAxB,EAAA,OAAAY,SAAAZ,EAAA,OAAAuB,IAAA;EAbpFC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAc1BX,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAC,YAAAD,EAAA,OAAAwB,IAAA;EAjBDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLxB,UACDuB,EAeO,EAAA,CAAA;EACNxB,EAAA,KAAAC;EAAAD,EAAA,KAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAyB,IAAA;EAvBAC,KAAA;GAAA,GACFtB;GAAK,GACLU;GAEMb,UACCwB;EAmBZ;EAACzB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAG,UAAAH,EAAA,QAAA0B,IAAA;EA1BcC,MAAA;GAAAC,gBACCf;GAAMT,OACfsB;GAwBNvB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OA5BMZ,UAAUuC,GA4BhB;AAAC"}

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

@@ -101,7 +101,7 @@ type ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';
  * </Button>
  * ```
  */
-declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
+declare function Button$1({ children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape, size: ownSize, target, variant, ...props }: ButtonProps$1 & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
 export { type ButtonDOMProps, type ButtonProps$1 as ButtonProps, type ButtonShape, type ButtonSize, type ButtonState, type ButtonVariant, Button$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.js

@@ -1,9 +1,14 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { focus } from "../../styles/focus.js";
 import { ButtonBase, ToggleButtonBase } from "../../button/index.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import { groupPressHandlers } from "../../button/group.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroupStateContext } from "react-aria-components";
 //#region src/components/button/index.tsx
 const styles = {
 	base: {
@@ -24,7 +29,7 @@ const styles = {
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
 		kIyJzY: "x1qno0dh x12w9bfk",
-		k1ekBW: "xro4s79",
+		k1ekBW: "x1hdt7lq",
 		kAMwcw: "x1seskgd",
 		$$css: true
 	},
@@ -233,6 +238,17 @@ const iconSizes = {
 		$$css: true
 	}
 };
+const PADDINGS = {
+	lg: spacing.xl,
+	md: spacing.lg,
+	xl: "48px",
+	xs: spacing.lg,
+	xxl: "64px"
+};
+const shifted = { padding: (value) => [{
+	kg3NbH: value != null ? "x30g6up" : value,
+	$$css: true
+}, { "--x-paddingInline": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(value) }] };
 const squareShapes = {
 	lg: {
 		kaIpWk: "xhpdng0",
@@ -451,114 +467,76 @@ const toggleContainers = {
 * </Button>
 * ```
 */
-function Button(t0) {
-	const $ = c(44);
-	let children;
-	let defaultSelected;
-	let href;
-	let icon;
-	let isPending;
-	let isSelected;
-	let onChange;
-	let pendingLabel;
-	let props$1;
-	let rel;
-	let t1;
-	let t2;
-	let t3;
-	let target;
-	if ($[0] !== t0) {
-		({children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape: t1, size: t2, target, variant: t3, ...props$1} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = defaultSelected;
-		$[3] = href;
-		$[4] = icon;
-		$[5] = isPending;
-		$[6] = isSelected;
-		$[7] = onChange;
-		$[8] = pendingLabel;
-		$[9] = props$1;
-		$[10] = rel;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = target;
-	} else {
-		children = $[1];
-		defaultSelected = $[2];
-		href = $[3];
-		icon = $[4];
-		isPending = $[5];
-		isSelected = $[6];
-		onChange = $[7];
-		pendingLabel = $[8];
-		props$1 = $[9];
-		rel = $[10];
-		t1 = $[11];
-		t2 = $[12];
-		t3 = $[13];
-		target = $[14];
-	}
+function Button$1(t0) {
+	const $ = c(33);
+	const { children, defaultSelected, href, icon, isPending, isSelected, onChange, pendingLabel, rel, shape: t1, size: ownSize, target, variant: t2, ...props$1 } = t0;
 	const shape = t1 === void 0 ? "round" : t1;
-	const size = t2 === void 0 ? "md" : t2;
-	const variant = t3 === void 0 ? "filled" : t3;
-	let t4;
-	if ($[15] !== children || $[16] !== icon || $[17] !== size) {
-		t4 = icon === void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	const variant = t2 === void 0 ? "filled" : t2;
+	const group = useContext(ButtonGroupItemContext);
+	const size = ownSize ?? group?.size ?? "md";
+	const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;
+	const press = groupPressHandlers(group, props$1.onPressStart, props$1.onPressEnd);
+	let t3;
+	if ($[0] !== children || $[1] !== icon || $[2] !== size) {
+		t3 = icon === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			...props(styles.icon, iconSizes[size]),
 			children: icon
 		}), children] });
-		$[15] = children;
-		$[16] = icon;
-		$[17] = size;
-		$[18] = t4;
-	} else t4 = $[18];
-	const content = t4;
-	if (variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0)) {
+		$[0] = children;
+		$[1] = icon;
+		$[2] = size;
+		$[3] = t3;
+	} else t3 = $[3];
+	const content = t3;
+	if (inSelectingGroup || variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0)) {
+		let t4;
+		if ($[4] !== group || $[5] !== shape || $[6] !== size || $[7] !== variant) {
+			t4 = variant === "text" ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group);
+			$[4] = group;
+			$[5] = shape;
+			$[6] = size;
+			$[7] = variant;
+			$[8] = t4;
+		} else t4 = $[8];
 		let t5;
-		if ($[19] !== shape || $[20] !== size || $[21] !== variant) {
-			t5 = toggleClasses(shape, size, variant);
-			$[19] = shape;
-			$[20] = size;
-			$[21] = variant;
-			$[22] = t5;
-		} else t5 = $[22];
-		let t6;
-		if ($[23] !== content || $[24] !== defaultSelected || $[25] !== isPending || $[26] !== isSelected || $[27] !== onChange || $[28] !== props$1 || $[29] !== t5) {
-			t6 = /* @__PURE__ */ jsx(ToggleButtonBase, {
+		if ($[9] !== content || $[10] !== defaultSelected || $[11] !== isPending || $[12] !== isSelected || $[13] !== onChange || $[14] !== press || $[15] !== props$1 || $[16] !== t4) {
+			t5 = /* @__PURE__ */ jsx(ToggleButtonBase, {
 				...props$1,
-				classes: t5,
+				...press,
+				classes: t4,
 				defaultSelected,
 				isPending,
 				isSelected,
 				onChange,
 				children: content
 			});
-			$[23] = content;
-			$[24] = defaultSelected;
-			$[25] = isPending;
-			$[26] = isSelected;
-			$[27] = onChange;
-			$[28] = props$1;
-			$[29] = t5;
-			$[30] = t6;
-		} else t6 = $[30];
-		return t6;
+			$[9] = content;
+			$[10] = defaultSelected;
+			$[11] = isPending;
+			$[12] = isSelected;
+			$[13] = onChange;
+			$[14] = press;
+			$[15] = props$1;
+			$[16] = t4;
+			$[17] = t5;
+		} else t5 = $[17];
+		return t5;
 	}
+	let t4;
+	if ($[18] !== group || $[19] !== shape || $[20] !== size || $[21] !== variant) {
+		t4 = buttonClasses(shape, size, variant, group);
+		$[18] = group;
+		$[19] = shape;
+		$[20] = size;
+		$[21] = variant;
+		$[22] = t4;
+	} else t4 = $[22];
 	let t5;
-	if ($[31] !== shape || $[32] !== size || $[33] !== variant) {
-		t5 = buttonClasses(shape, size, variant);
-		$[31] = shape;
-		$[32] = size;
-		$[33] = variant;
-		$[34] = t5;
-	} else t5 = $[34];
-	let t6;
-	if ($[35] !== content || $[36] !== href || $[37] !== isPending || $[38] !== pendingLabel || $[39] !== props$1 || $[40] !== rel || $[41] !== t5 || $[42] !== target) {
-		t6 = /* @__PURE__ */ jsx(ButtonBase, {
+	if ($[23] !== content || $[24] !== href || $[25] !== isPending || $[26] !== pendingLabel || $[27] !== press || $[28] !== props$1 || $[29] !== rel || $[30] !== t4 || $[31] !== target) {
+		t5 = /* @__PURE__ */ jsx(ButtonBase, {
 			...props$1,
-			classes: t5,
+			...press,
+			classes: t4,
 			href,
 			isPending,
 			pendingLabel,
@@ -566,29 +544,34 @@ function Button(t0) {
 			target,
 			children: content
 		});
-		$[35] = content;
-		$[36] = href;
-		$[37] = isPending;
-		$[38] = pendingLabel;
-		$[39] = props$1;
-		$[40] = rel;
-		$[41] = t5;
-		$[42] = target;
-		$[43] = t6;
-	} else t6 = $[43];
-	return t6;
+		$[23] = content;
+		$[24] = href;
+		$[25] = isPending;
+		$[26] = pendingLabel;
+		$[27] = press;
+		$[28] = props$1;
+		$[29] = rel;
+		$[30] = t4;
+		$[31] = target;
+		$[32] = t5;
+	} else t5 = $[32];
+	return t5;
+}
+function buttonClasses(shape, size, variant, group) {
+	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" && squareShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 }
-function buttonClasses(shape, size, variant) {
-	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], shape === "square" && squareShapes[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+function groupStyles(group, size, state) {
+	if (group === null) return null;
+	return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} + ${group.shift / 2}px)`)];
 }
-function toggleClasses(shape, size, variant) {
+function toggleClasses(shape, size, variant, group) {
 	return (state) => {
 		const isSelected = state.isSelected === true;
 		const container = toggleContainers[variant][isSelected ? "selected" : "unselected"];
-		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" && squareShapes[size], isSelected && (shape === "square" ? styles.round : squareShapes[size]), variant === "outlined" && outlineWidths[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], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		return props(styles.base, focus.ring, styles[variant], styles[container], styles[size], shape === "square" && squareShapes[size], isSelected && (shape === "square" ? styles.round : squareShapes[size]), variant === "outlined" && outlineWidths[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, state), state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 	};
 }
 //#endregion
-export { Button as default };
+export { Button$1 as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","ButtonDOMProps","ButtonState","ButtonBase","ToggleButtonBase","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","kjj79g","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","round","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","iconSizes","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","const","ButtonProps","children","className","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","shape","ButtonShape","size","ButtonSize","style","target","variant","ButtonVariant","ToggleVariant","Button","t0","$","isPending","props","t1","t2","t3","undefined","t4","content","t5","toggleClasses","t6","buttonClasses","state","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_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 type { ButtonDOMProps, ButtonState } from '../../button';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\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// **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 as the pill and `square` at the size's square\n// corner: 12dp up to the page's S, 16dp at M and 28dp above. A press tightens\n// either to the size's pressed corner, 8dp, 12dp or 16dp, and a toggle\n// trades its shape for the other once selected — a round one for the square\n// corner, a square one for the pill. The corner eases over the motion\n// tokens' short duration, and moves at once for a reader who asks for\n// reduced motion.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `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    kaIpWk: \"x1dkaolv\",\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    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1qno0dh x12w9bfk\",\n    k1ekBW: \"xro4s79\",\n    kAMwcw: \"x1seskgd\",\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: \"x1gvacq5\",\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  round: {\n    kaIpWk: \"x1dkaolv\",\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: \"x1arwny6\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x790zyz\",\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 outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\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// 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 = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle —\n   * except a `text` button, which the page gives no selected colours, so it\n   * stays a plain button.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\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   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle, `text` excepted.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle,\n   * `text` excepted.\n   */\n  onChange?: (isSelected: boolean) => void;\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  /** The link's `rel`, when `href` is set. */\n  rel?: 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  /** The link's `target`, when `href` is set. */\n  target?: string;\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} & ButtonDOMProps;\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. A toggle takes neither `href` nor the\n * pending props, and a `text` button never toggles.\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 = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\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  // The three props that make this a toggle, read as IconButton reads them,\n  // for every style the page gives a toggle's colours to.\n  if (variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined)) {\n    return <ToggleButtonBase {...props} classes={toggleClasses(shape, size, variant)} defaultSelected={defaultSelected} isPending={isPending} isSelected={isSelected} onChange={onChange}>\n        {content}\n      </ToggleButtonBase>;\n  }\n  return <ButtonBase {...props} classes={buttonClasses(shape, size, variant)} href={href} isPending={isPending} 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) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' && squareShapes[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);\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) {\n  return (state: ButtonState) => {\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], isSelected && (shape === 'square' ? styles.round : squareShapes[size]), variant === 'outlined' && outlineWidths[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], 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","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","focus","colors","motion","radii","shadows","sizing","spacing","stateLayerOpacity","typography","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","elevatedToggleSelected","filled","filledDisabled","filledToggle","filledToggleSelected","icon","kmuXW","kjj79g","lg","kAzted","k8WAf4","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","round","text","textDisabled","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","iconSizes","PADDINGS","shifted","padding","value","val","undefined","squareShapes","pressedShapes","hovered","focused","pressed","disabledStyles","toggleContainers","selected","unselected","const","ButtonProps","children","className","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","shape","ButtonShape","size","ButtonSize","style","target","variant","ButtonVariant","ToggleVariant","Button","t0","$","isPending","t1","ownSize","t2","props","group","inSelectingGroup","press","onPressStart","onPressEnd","t3","content","t4","buttonClasses","toggleClasses","t5","state","ring","isHovered","isFocusVisible","isPressed","groupStyles","isDisabled","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 { ButtonDOMProps, ButtonState } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\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// **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 as the pill and `square` at the size's square\n// corner: 12dp up to the page's S, 16dp at M and 28dp above. A press tightens\n// either to the size's pressed corner, 8dp, 12dp or 16dp, and a toggle\n// trades its shape for the other once selected — a round one for the square\n// corner, a square one for the pill. The corner eases over the motion\n// tokens' short duration, and moves at once for a reader who asks for\n// reduced motion.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `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    kaIpWk: \"x1dkaolv\",\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    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1qno0dh x12w9bfk\",\n    k1ekBW: \"x1hdt7lq\",\n    kAMwcw: \"x1seskgd\",\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: \"x1gvacq5\",\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  round: {\n    kaIpWk: \"x1dkaolv\",\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: \"x1arwny6\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kAzted: \"xlzjxrf\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"x790zyz\",\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 outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\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.\nconst PADDINGS = {\n  lg: spacing.xl,\n  md: spacing.lg,\n  xl: '48px',\n  xs: spacing.lg,\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 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 = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Whether a toggle starts selected, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle —\n   * except a `text` button, which the page gives no selected colours, so it\n   * stays a plain button.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\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   * Whether a toggle is selected, when the call site holds the state. Pass\n   * it with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle, `text` excepted.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle,\n   * `text` excepted.\n   */\n  onChange?: (isSelected: boolean) => void;\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  /** The link's `rel`, when `href` is set. */\n  rel?: 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  /** The link's `target`, when `href` is set. */\n  target?: string;\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} & ButtonDOMProps;\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. A toggle takes neither `href` nor the\n * pending props, and a `text` button never toggles.\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\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  // The three props that make this a toggle, read as IconButton reads them,\n  // for every style the page gives a toggle's colours to — or a selecting\n  // group around it. A text button in such a group is a toggle too, for the\n  // group's sake, and draws its selection by nothing but the group's shape.\n  if (inSelectingGroup || variant !== 'text' && (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined)) {\n    return <ToggleButtonBase {...props} {...press} classes={variant === 'text' ? buttonClasses(shape, size, variant, group) : toggleClasses(shape, size, variant, group)} defaultSelected={defaultSelected} isPending={isPending} isSelected={isSelected} onChange={onChange}>\n        {content}\n      </ToggleButtonBase>;\n  }\n  return <ButtonBase {...props} {...press} classes={buttonClasses(shape, size, variant, group)} href={href} isPending={isPending} 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: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], shape === 'square' && squareShapes[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && pressedShapes[size], groupStyles(group, size, state), 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, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.padding(`calc(${PADDINGS[size]} + ${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: ButtonState) => {\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], isSelected && (shape === 'square' ? styles.round : squareShapes[size]), variant === 'outlined' && outlineWidths[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, state), 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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"}