@kanso-labs/kanso-ui 0.30.3 → 0.30.4

package/dist/components/color-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","container","Element","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","t12","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\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    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /**\n   * Where to portal the surface. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the surface renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","container","Element","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","t12","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\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    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /**\n   * Where to portal the surface. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the surface renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /**\n   * Whether the whole picker is inert — the trigger, and the plane, strips\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed\n   * as `children` is the call site's own to disable.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {/*\n              Disabled reaches every control here, not only the trigger.\n              React Aria's colour picker carries no disabled state of its\n              own — react-stately's `useColorPickerState` has no such\n              concept — so nothing hands it down the way a field's context\n              would. And the surface opens independently of the trigger, so\n              a disabled picker can still be on screen: already open when a\n              form disables it, or opened from outside. Without this the\n              plane could be dragged, the strips moved with the arrow keys\n              and the field typed into, all changing the value of something\n              documented as inert.\n               An arrangement a call site passes as `children` is its own to\n              disable; there is no context to reach it through.\n             */}\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" isDisabled={isDisabled} xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" isDisabled={isDisabled} label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" isDisabled={isDisabled} label=\"Alpha\" /> : null}\n                <ColorField isDisabled={isDisabled} label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}

package/dist/components/color-swatch-picker/index.js

@@ -49,38 +49,50 @@ function ColorSwatchPicker$1(props) {
 * own `color` unless given different children.
 */
 function ColorSwatchPickerItem$1(t0) {
-	const $ = c(8);
+	const $ = c(12);
+	let T0;
 	let children;
-	let props;
+	let t1;
+	let t2;
 	if ($[0] !== t0) {
-		({children, ...props} = t0);
+		const { children: t3, ...props } = t0;
+		children = t3;
+		T0 = ColorSwatchPickerItem;
+		t1 = props;
+		t2 = mergeStatefulStyles(itemStyles, props);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = props;
+		$[1] = T0;
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
 	} else {
-		children = $[1];
-		props = $[2];
+		T0 = $[1];
+		children = $[2];
+		t1 = $[3];
+		t2 = $[4];
 	}
-	let t1;
-	if ($[3] !== children) {
-		t1 = children ?? /* @__PURE__ */ jsx(ColorSwatch$1, {});
-		$[3] = children;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
-			...props,
-			className: itemClassName,
-			children: t1
+	let t3;
+	if ($[5] !== children) {
+		t3 = children ?? /* @__PURE__ */ jsx(ColorSwatch$1, {});
+		$[5] = children;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 }
-function itemClassName(state) {
+function itemStyles(state) {
 	return {
 		0: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn" },
 		4: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59" },
@@ -90,7 +102,7 @@ function itemClassName(state) {
 		5: { className: "x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9" },
 		3: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" },
 		7: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" }
-	}[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? "";
+	}[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0];
 }
 ColorSwatchPicker$1.Item = ColorSwatchPickerItem$1;
 //#endregion

package/dist/components/color-swatch-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","Omit","children","className","style","props","$","_c","t0","t1","t2","itemClassName","state","isDisabled","isFocusVisible","isSelected","Item"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} className={itemClassName}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemClassName(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? '';\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAM,oBAAAc,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAAb,oBAAoB,EAAAQ,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,mBAAD;GAAqB,GAAKJ;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAhB,wBAAAe,IAAA;CAAA,MAAAF,IAAAC,EAAA,CAAA;CAAA,IAAAL;CAAA,IAAAG;CAAA,IAAAC,EAAA,OAAAE,IAAA;EAA+B,CAAA,CAAAN,UAAA,GAAAG,SAAAG;EAGFF,EAAA,KAAAE;EAAAF,EAAA,KAAAJ;EAAAI,EAAA,KAAAD;CAAA,OAAA;EAAAH,WAAAI,EAAA;EAAAD,QAAAC,EAAA;CAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAJ,UAAA;EAEtBO,KAAAP,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAD,SAAAC,EAAA,OAAAG,IAAA;EADzBC,KAAA,oBAAC,uBAAD;GAAyB,GAAKL;GAAkBM,WAAAA;GAClDF,UAAAA;EAD2B,CAAA;EAEHH,EAAA,KAAAD;EAAAC,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFtBI;AAEsB;AAW/B,SAASC,cAAcC,OAIpB;CACD,OAAO;EACL,GAAG,EACDT,WAAW,qEACb;EACA,GAAG,EACDA,WAAW,oEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,6EACb;EACA,GAAG,EACDA,WAAW,4EACb;EACA,GAAG,EACDA,WAAW,2EACb;EACA,GAAG,EACDA,WAAW,2EACb;CACF,EAAE,CAAC,CAACS,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMC,cAAc,EAAE,CAACV,aAAa;AAClG;AACAZ,oBAAkByB,OAAOvB"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","Omit","children","className","style","props","$","_c","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isSelected","Item"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0];\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAM,oBAAAc,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAAb,oBAAoB,EAAAQ,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,mBAAD;GAAqB,GAAKJ;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAhB,wBAAAe,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAO;CAAA,IAAAE;CAAA,IAAAL,EAAA,OAAAE,IAAA;EAA+B,MAAA,EAAAN,UAAAU,IAAA,GAAAP,UAAAG;EAAAN,WAAAU;EAIrBF,KAAAhB;EAA6BW,KAAAA;EAAWM,KAAAhB,oBAAoBkB,YAAYR,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAJ,WAAAI,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,UAAA;EACjFU,KAAAV,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAG,MAAAH,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKT;GAAK,GAAMM;GAC3CC,UAAAA;EAD2B,CAAA;EAEHN,EAAA,KAAAI;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFtBQ;AAEsB;AAW/B,SAASD,WAAWE,OAIjB;CACD,OAAO;EACL,GAAG,EACDZ,WAAW,qEACb;EACA,GAAG,EACDA,WAAW,oEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,6EACb;EACA,GAAG,EACDA,WAAW,4EACb;EACA,GAAG,EACDA,WAAW,2EACb;EACA,GAAG,EACDA,WAAW,2EACb;CACF,EAAE,CAAC,CAACY,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMC,cAAc;AAClF;AACAzB,oBAAkB4B,OAAO1B"}

package/dist/components/dialog/index.js

@@ -55,7 +55,7 @@ function DialogBody(props) {
 	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x" }, props);
+		t0 = mergeStyles({ className: "x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f x1az23kl x18d9i69 x886u18 xexx8yu xg0ps1x" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f x1az23kl x18d9i69 x886u18 xexx8yu xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}

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

@@ -96,7 +96,7 @@ type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
  * </IconButton>
  * ```
  */
-declare function IconButton({ children, defaultSelected, disableRipple, href, isDisabled, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, rel, render, size, target, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ children, defaultSelected, disableRipple, href, isDisabled, isPending, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel, rel, render, size, target, variant, ...props }: IconButtonProps): import("react").JSX.Element;
 //#endregion
 export { type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonVariant, IconButton as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.js

@@ -254,17 +254,18 @@ function buttonContent(children, pendingLabel, ripple) {
 * ```
 */
 function IconButton(t0) {
-	const $ = c(25);
-	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t2, rel, render, size: t3, target, variant: t4, ...props$1 } = t0;
+	const $ = c(26);
+	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isPending: t2, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t3, rel, render, size: t4, target, variant: t5, ...props$1 } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
-	const pendingLabel = t2 === void 0 ? "Loading" : t2;
-	const size = t3 === void 0 ? "md" : t3;
-	const variant = t4 === void 0 ? "standard" : t4;
+	const isPending = t2 === void 0 ? false : t2;
+	const pendingLabel = t3 === void 0 ? "Loading" : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const variant = t5 === void 0 ? "standard" : t5;
 	const context = useSlottedContext(ButtonContext, props$1.slot);
 	const disabled = isDisabled ?? context?.isDisabled ?? false;
-	let t5;
+	let t6;
 	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t5 = {
+		t6 = {
 			onClick,
 			onContextMenu,
 			onPointerCancel,
@@ -278,45 +279,45 @@ function IconButton(t0) {
 		$[3] = onPointerDown;
 		$[4] = onPointerLeave;
 		$[5] = onPointerUp;
-		$[6] = t5;
-	} else t5 = $[6];
-	const ripple = useRipple(!disableRipple && !disabled, t5);
+		$[6] = t6;
+	} else t6 = $[6];
+	const ripple = useRipple(!disableRipple && !disabled && !isPending, t6);
 	const element = {
 		aria: ariaAttributesOf(props$1),
 		onKeyDown,
 		onKeyUp
 	};
 	if (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
-		const t6 = toggleButtonRenderer(element, render);
-		const t7 = ripple.handlers;
-		const t8 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
-		let t9;
+		const t7 = toggleButtonRenderer(element, render);
+		const t8 = ripple.handlers;
+		const t9 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
+		let t10;
 		if ($[7] !== children || $[8] !== ripple) {
-			t9 = toggleContent(children, ripple);
+			t10 = toggleContent(children, ripple);
 			$[7] = children;
 			$[8] = ripple;
-			$[9] = t9;
-		} else t9 = $[9];
+			$[9] = t10;
+		} else t10 = $[9];
 		return /* @__PURE__ */ jsx(ToggleButton, {
 			defaultSelected,
 			isDisabled: disabled,
 			isSelected,
 			onChange,
-			render: t6,
-			...t7,
-			...props$1,
+			render: t7,
 			...t8,
-			children: t9
+			...props$1,
+			...t9,
+			children: t10
 		});
 	}
-	let t6;
+	let t7;
 	if ($[10] !== size || $[11] !== variant) {
-		t6 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		t7 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 		$[10] = size;
 		$[11] = variant;
-		$[12] = t6;
-	} else t6 = $[12];
-	const styleProps = mergeStatefulStyles(t6, props$1);
+		$[12] = t7;
+	} else t7 = $[12];
+	const styleProps = mergeStatefulStyles(t7, props$1);
 	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
 		href,
 		isDisabled: disabled,
@@ -329,36 +330,38 @@ function IconButton(t0) {
 		children: [children, ripple.surface]
 	});
 	const T0 = Button;
-	const t7 = buttonRenderer(element, render);
-	const t8 = ripple.handlers;
-	let t9;
+	const t8 = buttonRenderer(element, render);
+	const t9 = ripple.handlers;
+	let t10;
 	if ($[13] !== children || $[14] !== pendingLabel || $[15] !== ripple) {
-		t9 = buttonContent(children, pendingLabel, ripple);
+		t10 = buttonContent(children, pendingLabel, ripple);
 		$[13] = children;
 		$[14] = pendingLabel;
 		$[15] = ripple;
-		$[16] = t9;
-	} else t9 = $[16];
-	let t10;
-	if ($[17] !== T0 || $[18] !== disabled || $[19] !== props$1 || $[20] !== ripple.handlers || $[21] !== styleProps || $[22] !== t7 || $[23] !== t9) {
-		t10 = /* @__PURE__ */ jsx(T0, {
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== T0 || $[18] !== disabled || $[19] !== isPending || $[20] !== props$1 || $[21] !== ripple.handlers || $[22] !== styleProps || $[23] !== t10 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
 			isDisabled: disabled,
-			render: t7,
-			...t8,
+			isPending,
+			render: t8,
+			...t9,
 			...props$1,
 			...styleProps,
-			children: t9
+			children: t10
 		});
 		$[17] = T0;
 		$[18] = disabled;
-		$[19] = props$1;
-		$[20] = ripple.handlers;
-		$[21] = styleProps;
-		$[22] = t7;
-		$[23] = t9;
-		$[24] = t10;
-	} else t10 = $[24];
-	return t10;
+		$[19] = isPending;
+		$[20] = props$1;
+		$[21] = ripple.handlers;
+		$[22] = styleProps;
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
 }
 function toggleContent(children, ripple) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","t3","t4","props","undefined","context","slot","t5","element","aria","t6","t7","handlers","t8","toggleStyleProps","t9","toggleContent","ring","styleProps","T0","t10"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x13oubkp\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"x1f2tiqu\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\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// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\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   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\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   */\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.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only 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.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, as in Button.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x13oubkp\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"x1f2tiqu\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\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// Which container a toggle draws, chosen and not. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\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   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\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   */\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.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only 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.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}