@kanso-labs/kanso-ui 0.36.0 → 0.37.0

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

@@ -0,0 +1,54 @@
+import { ButtonShape, ButtonSize } from "../button/index.js";
+import { CSSProperties, ReactNode, RefAttributes } from "react";
+import { ToggleButtonGroupProps } from "react-aria-components";
+//#region src/components/button-group/index.d.ts
+type ButtonGroupProps = Omit<ToggleButtonGroupProps, 'children' | 'className' | 'selectionMode' | 'style'> & RefAttributes<HTMLDivElement> & {
+  /** The buttons: Buttons and IconButtons, each with an `id` in a group that selects. */
+  children?: ReactNode;
+  /** The class for the group's own element. */
+  className?: string;
+  /**
+   * Makes the group select, as React Aria's `ToggleButtonGroup`: `single`
+   * for one at a time, `multiple` for any number. Left out, the group's
+   * buttons are plain buttons.
+   */
+  selectionMode?: ToggleButtonGroupProps['selectionMode'];
+  /**
+   * The shape a connected group gives its two ends: `round`, the pill, or
+   * `square`, the size's corner, which its inner corners take as well.
+   * @default 'round'
+   */
+  shape?: ButtonShape;
+  /**
+   * The size every button in the group takes, unless it names its own, and
+   * the size the group spaces and shapes them for.
+   * @default 'md'
+   */
+  size?: ButtonSize;
+  /** The style for the group's own element. */
+  style?: CSSProperties;
+  /**
+   * `standard` sets the buttons apart and widens a pressed one; `connected`
+   * sets them 2dp apart with square inner corners.
+   * @default 'standard'
+   */
+  variant?: ButtonGroupVariant;
+};
+type ButtonGroupVariant = 'connected' | 'standard';
+/**
+ * A row of Buttons and IconButtons drawn as the button groups page's
+ * standard or connected group. Given `selectionMode`, its buttons are
+ * toggles whose selection the group keeps, by their `id`s.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+ *   <Button id="first">First item</Button>
+ *   <Button id="second">Second item</Button>
+ *   <Button id="third">Third item</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare function ButtonGroup({ children, className, ref, selectionMode, shape, size, style, variant, ...props }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+export { type ButtonGroupProps, type ButtonGroupVariant, ButtonGroup as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,272 @@
+"use client";
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { radii, sizing } from "../../tokens/design.tokens.stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { ButtonGroupItemContext } from "../../button/context.js";
+import { c } from "react/compiler-runtime";
+import { Children, isValidElement, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ButtonContext, Group, ToggleButtonGroup } from "react-aria-components";
+//#region src/components/button-group/index.tsx
+const EXPANDED_RATIO = .15;
+const DISABLED = { isDisabled: true };
+const styles = {
+	group: {
+		kGNEyG: "x6s0dn4",
+		kB7OPa: "x9f619",
+		k1xSpc: "x3nfvp2",
+		kwnvtZ: "xozqiw3",
+		$$css: true
+	},
+	minimum: {
+		k7Eaqz: "x900493",
+		$$css: true
+	}
+};
+const gaps = {
+	connected: {
+		kOIVth: "x14qo01y",
+		$$css: true
+	},
+	lg: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	md: {
+		kOIVth: "x1gka490",
+		$$css: true
+	},
+	xl: {
+		kOIVth: "x126z3so",
+		$$css: true
+	},
+	xs: {
+		kOIVth: "xaobbuh",
+		$$css: true
+	},
+	xxl: {
+		kOIVth: "x126z3so",
+		$$css: true
+	}
+};
+const corners = { shape: (start, end) => [{
+	kT0f0o: end != null ? "x1wsjk4f" : end,
+	kVL7Gh: start != null ? "x1oq9ryg" : start,
+	kfmiAY: end != null ? "xbsomw4" : end,
+	krdFHd: start != null ? "x6pmj1i" : start,
+	$$css: true
+}, {
+	"--x-borderEndEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderEndStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start),
+	"--x-borderStartEndRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(end),
+	"--x-borderStartStartRadius": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(start)
+}] };
+const INNER = {
+	lg: radii.sm,
+	md: radii.sm,
+	xl: radii.lg,
+	xs: radii.xs,
+	xxl: "20px"
+};
+const ROUND = {
+	lg: `calc(${sizing.controlLg} / 2)`,
+	md: `calc(${sizing.controlSm} / 2)`,
+	xl: `calc(${sizing.controlXl} / 2)`,
+	xs: `calc(${sizing.controlXs} / 2)`,
+	xxl: `calc(${sizing.controlXxl} / 2)`
+};
+const INNER_PRESSED = {
+	lg: radii.xs,
+	md: radii.xs,
+	xl: radii.sm,
+	xs: "2px",
+	xxl: "10px"
+};
+/**
+* A row of Buttons and IconButtons drawn as the button groups page's
+* standard or connected group. Given `selectionMode`, its buttons are
+* toggles whose selection the group keeps, by their `id`s.
+*
+* ```tsx
+* <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+*   <Button id="first">First item</Button>
+*   <Button id="second">Second item</Button>
+*   <Button id="third">Third item</Button>
+* </ButtonGroup>
+* ```
+*/
+function ButtonGroup(t0) {
+	const $ = c(40);
+	let children;
+	let className;
+	let props$1;
+	let ref;
+	let selectionMode;
+	let size;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, className, ref, selectionMode, shape: t1, size, style, variant: t2, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props$1;
+		$[4] = ref;
+		$[5] = selectionMode;
+		$[6] = size;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+	} else {
+		children = $[1];
+		className = $[2];
+		props$1 = $[3];
+		ref = $[4];
+		selectionMode = $[5];
+		size = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+	}
+	const shape = t1 === void 0 ? "round" : t1;
+	const variant = t2 === void 0 ? "standard" : t2;
+	const [press, setPress] = useState(null);
+	let groupProps;
+	let t3;
+	if ($[10] !== children || $[11] !== className || $[12] !== press || $[13] !== shape || $[14] !== size || $[15] !== style || $[16] !== variant) {
+		const items = Children.toArray(children).filter(isValidElement);
+		const sized = size ?? "md";
+		let t4;
+		if ($[19] !== className || $[20] !== sized || $[21] !== style || $[22] !== variant) {
+			t4 = mergeStyles(props(styles.group, variant === "connected" ? gaps.connected : gaps[sized]), {
+				className,
+				style
+			});
+			$[19] = className;
+			$[20] = sized;
+			$[21] = style;
+			$[22] = variant;
+			$[23] = t4;
+		} else t4 = $[23];
+		groupProps = t4;
+		let t5;
+		if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = () => {
+				setPress(null);
+			};
+			$[24] = t5;
+		} else t5 = $[24];
+		const endPress = t5;
+		t3 = items.map((child, index) => /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: itemFor({
+				count: items.length,
+				endPress,
+				index,
+				press,
+				setPress,
+				shape,
+				size,
+				variant
+			}),
+			children: child
+		}, child.key ?? index));
+		$[10] = children;
+		$[11] = className;
+		$[12] = press;
+		$[13] = shape;
+		$[14] = size;
+		$[15] = style;
+		$[16] = variant;
+		$[17] = groupProps;
+		$[18] = t3;
+	} else {
+		groupProps = $[17];
+		t3 = $[18];
+	}
+	const content = t3;
+	if (selectionMode !== void 0) {
+		let t4;
+		if ($[25] !== content || $[26] !== groupProps || $[27] !== props$1 || $[28] !== ref || $[29] !== selectionMode) {
+			t4 = /* @__PURE__ */ jsx(ToggleButtonGroup, {
+				ref,
+				selectionMode,
+				...props$1,
+				...groupProps,
+				children: content
+			});
+			$[25] = content;
+			$[26] = groupProps;
+			$[27] = props$1;
+			$[28] = ref;
+			$[29] = selectionMode;
+			$[30] = t4;
+		} else t4 = $[30];
+		return t4;
+	}
+	const t4 = props$1["aria-label"];
+	const t5 = props$1["aria-labelledby"];
+	let t6;
+	if ($[31] !== content || $[32] !== props$1.isDisabled) {
+		t6 = props$1.isDisabled === true ? /* @__PURE__ */ jsx(ButtonContext, {
+			value: DISABLED,
+			children: content
+		}) : content;
+		$[31] = content;
+		$[32] = props$1.isDisabled;
+		$[33] = t6;
+	} else t6 = $[33];
+	let t7;
+	if ($[34] !== groupProps || $[35] !== ref || $[36] !== t4 || $[37] !== t5 || $[38] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Group, {
+			"aria-label": t4,
+			"aria-labelledby": t5,
+			ref,
+			...groupProps,
+			children: t6
+		});
+		$[34] = groupProps;
+		$[35] = ref;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+	} else t7 = $[39];
+	return t7;
+}
+function connectedStyles(index, count, size, shape, state) {
+	const outer = shape === "square" ? INNER[size] : ROUND[size];
+	const inner = state.isPressed ? INNER_PRESSED[size] : state.isSelected === true ? ROUND[size] : INNER[size];
+	const start = index === 0 ? outer : inner;
+	const end = index === count - 1 ? outer : inner;
+	return [corners.shape(start, end), (size === "xs" || size === "md") && styles.minimum];
+}
+function itemFor({ count, endPress, index, press, setPress, shape, size, variant }) {
+	const sized = size ?? "md";
+	if (variant === "connected") return {
+		shift: 0,
+		size,
+		styles: (state) => connectedStyles(index, count, sized, shape, state)
+	};
+	return {
+		onPressEnd: endPress,
+		onPressStart: (width) => {
+			setPress({
+				delta: width * EXPANDED_RATIO,
+				index
+			});
+		},
+		shift: shiftFor(index, count, press),
+		size
+	};
+}
+function shiftFor(index, count, press) {
+	if (press === null) return 0;
+	if (index === press.index) return press.delta;
+	if (Math.abs(index - press.index) !== 1) return 0;
+	return -(press.index === 0 || press.index === count - 1 ? press.delta : press.delta / 2);
+}
+//#endregion
+export { ButtonGroup as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","CSSProperties","ReactNode","RefAttributes","ToggleButtonGroupProps","RACToggleButtonGroupProps","stylex","Children","isValidElement","useCallback","useState","ButtonContext","Group","RACGroup","ToggleButtonGroup","RACToggleButtonGroup","ButtonState","ButtonGroupItem","GroupSize","ButtonShape","ButtonSize","ButtonGroupItemContext","mergeStyles","radii","sizing","spacing","EXPANDED_RATIO","DISABLED","isDisabled","styles","group","kGNEyG","kB7OPa","k1xSpc","kwnvtZ","$$css","minimum","k7Eaqz","gaps","connected","kOIVth","lg","md","xl","xs","xxl","corners","shape","start","end","kT0f0o","kVL7Gh","kfmiAY","krdFHd","val","undefined","INNER","sm","ROUND","controlLg","controlSm","controlXl","controlXs","controlXxl","INNER_PRESSED","ButtonGroupProps","Omit","HTMLDivElement","children","className","selectionMode","size","style","variant","ButtonGroupVariant","Press","delta","index","ButtonGroup","t0","$","props","ref","t1","t2","press","setPress","groupProps","t3","items","toArray","filter","sized","t4","t5","Symbol","for","endPress","map","child","key","itemFor","count","length","content","t6","t7","connectedStyles","state","outer","inner","isPressed","isSelected","shift","onPressEnd","onPressStart","width","shiftFor","Math","abs","atEnd","_c","props","stylex.props","RACToggleButtonGroup","RACGroup"],"sources":["../../../src/components/button-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, ReactNode, RefAttributes } from 'react';\nimport type { ToggleButtonGroupProps as RACToggleButtonGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, isValidElement, useCallback, useState } from 'react';\nimport { ButtonContext, Group as RACGroup, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { ButtonState } from '../../button';\nimport type { ButtonGroupItem, GroupSize } from '../../button/context';\nimport type { ButtonShape, ButtonSize } from '../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, sizing, spacing } from '../../tokens/design.tokens.stylex';\n\n// The button groups page's two groups, around Buttons and IconButtons placed\n// inside: the standard group, buttons set apart by the page's 18dp, 12dp, 8dp,\n// 8dp and 8dp across the sizes, and the connected group, buttons 2dp apart\n// whose inner corners square off — 4dp, 8dp, 8dp, 16dp and 20dp — while the\n// group's two ends keep the buttons' own round. A square connected group\n// takes the same corner at its ends. The group draws nothing itself; it\n// hands each button its size, its corners and its part in the press\n// interaction through src/button/context.ts.\n//\n// **A press is felt across a standard group.** The pressed button widens by\n// 15% of its width — the share Material Design's own group widens it by —\n// and its neighbours narrow to make the room, so the group's width holds:\n// both neighbours by half the gain each, or the one neighbour of a button at\n// the group's end by all of it. Button takes the change as inline padding\n// and IconButton as width, and both ease it over the motion tokens' short\n// duration.\n//\n// **A connected group answers a press and a selection in the corner\n// instead.** Its buttons stay where they are; a pressed one's inner corners\n// tighten, and a selected one's round off entirely. The page gives the\n// pressed corner for its small group alone, 4dp against the 8dp it rests at;\n// the other sizes press to half their resting corner the same way. The page\n// also gives XS and S buttons in a connected group a 48dp minimum width,\n// which is their touch target.\n//\n// Given `selectionMode` the group is React Aria's `ToggleButtonGroup`, which\n// makes every button in it a toggle and reports the selection by the\n// buttons' `id`s: a radio group for `single`, a toolbar for `multiple`.\n// Without it the group is React Aria's plain `Group`.\n\n// The press interaction's share, from Material Design's own button group.\nconst EXPANDED_RATIO = 0.15;\nconst DISABLED = {\n  isDisabled: true\n};\nconst styles = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kwnvtZ: \"xozqiw3\",\n    $$css: true\n  },\n  minimum: {\n    k7Eaqz: \"x900493\",\n    $$css: true\n  }\n};\n\n// The space between buttons, by variant and size. The standard group's 18dp\n// at XS falls between two steps of the spacing scale and is written out.\nconst gaps = {\n  connected: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  lg: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xaobbuh\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  }\n};\n\n// A connected button's corners on each side, set from the button's place in\n// the group and its state.\nconst corners = {\n  shape: (start: string, end: string) => [{\n    kT0f0o: end != null ? \"x1wsjk4f\" : end,\n    kVL7Gh: start != null ? \"x1oq9ryg\" : start,\n    kfmiAY: end != null ? \"xbsomw4\" : end,\n    krdFHd: start != null ? \"x6pmj1i\" : start,\n    $$css: true\n  }, {\n    \"--x-borderEndEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderEndStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n    \"--x-borderStartEndRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n    \"--x-borderStartStartRadius\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n  }]\n};\n\n// The inner corner each size rests at, and the corner it presses to. The 20dp\n// at XL falls between two steps of the radius scale, and the two halves that\n// are not steps of it are written out too.\nconst INNER = {\n  lg: radii.sm,\n  md: radii.sm,\n  xl: radii.lg,\n  xs: radii.xs,\n  xxl: '20px'\n};\n\n// The round end at each size: half the button's height. Not the pill's\n// 9999px: CSS scales every corner of a box down together when two on one\n// side add up to more than the side is long, so a 9999px end beside an 8px\n// inner corner shrank the inner one to nothing. Half the height fits as\n// written. A label that wraps makes a button taller than this, and its ends\n// a little less than round.\nconst ROUND = {\n  lg: `calc(${sizing.controlLg} / 2)`,\n  md: `calc(${sizing.controlSm} / 2)`,\n  xl: `calc(${sizing.controlXl} / 2)`,\n  xs: `calc(${sizing.controlXs} / 2)`,\n  xxl: `calc(${sizing.controlXxl} / 2)`\n};\nconst INNER_PRESSED = {\n  lg: radii.xs,\n  md: radii.xs,\n  xl: radii.sm,\n  xs: '2px',\n  xxl: '10px'\n};\ntype ButtonGroupProps = Omit<RACToggleButtonGroupProps, 'children' | 'className' | 'selectionMode' | 'style'> & RefAttributes<HTMLDivElement> & {\n  /** The buttons: Buttons and IconButtons, each with an `id` in a group that selects. */\n  children?: ReactNode;\n  /** The class for the group's own element. */\n  className?: string;\n  /**\n   * Makes the group select, as React Aria's `ToggleButtonGroup`: `single`\n   * for one at a time, `multiple` for any number. Left out, the group's\n   * buttons are plain buttons.\n   */\n  selectionMode?: RACToggleButtonGroupProps['selectionMode'];\n  /**\n   * The shape a connected group gives its two ends: `round`, the pill, or\n   * `square`, the size's corner, which its inner corners take as well.\n   * @default 'round'\n   */\n  shape?: ButtonShape;\n  /**\n   * The size every button in the group takes, unless it names its own, and\n   * the size the group spaces and shapes them for.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** The style for the group's own element. */\n  style?: CSSProperties;\n  /**\n   * `standard` sets the buttons apart and widens a pressed one; `connected`\n   * sets them 2dp apart with square inner corners.\n   * @default 'standard'\n   */\n  variant?: ButtonGroupVariant;\n};\ntype ButtonGroupVariant = 'connected' | 'standard';\ntype Press = {\n  delta: number;\n  index: number;\n};\n\n/**\n * A row of Buttons and IconButtons drawn as the button groups page's\n * standard or connected group. Given `selectionMode`, its buttons are\n * toggles whose selection the group keeps, by their `id`s.\n *\n * ```tsx\n * <ButtonGroup aria-label=\"Label\" selectionMode=\"single\" variant=\"connected\">\n *   <Button id=\"first\">First item</Button>\n *   <Button id=\"second\">Second item</Button>\n *   <Button id=\"third\">Third item</Button>\n * </ButtonGroup>\n * ```\n */\nfunction ButtonGroup({\n  children,\n  className,\n  ref,\n  selectionMode,\n  shape = 'round',\n  size,\n  style,\n  variant = 'standard',\n  ...props\n}: ButtonGroupProps) {\n  const [press, setPress] = useState<null | Press>(null);\n  const items = Children.toArray(children).filter(isValidElement);\n  const sized = size ?? 'md';\n  const groupProps = mergeStyles(stylex.props(styles.group, variant === 'connected' ? gaps.connected : gaps[sized]), {\n    className,\n    style\n  });\n  const endPress = useCallback(() => {\n    setPress(null);\n  }, []);\n  const content = items.map((child, index) => <ButtonGroupItemContext key={child.key ?? index} value={itemFor({\n    count: items.length,\n    endPress,\n    index,\n    press,\n    setPress,\n    shape,\n    size,\n    variant\n  })}>\n      {child}\n    </ButtonGroupItemContext>);\n  if (selectionMode !== undefined) {\n    return <RACToggleButtonGroup ref={ref} selectionMode={selectionMode} {...props} {...groupProps}>\n        {content}\n      </RACToggleButtonGroup>;\n  }\n\n  // A plain group disables its buttons through React Aria's own context,\n  // which Button and IconButton read; a selecting one does it itself.\n  return <RACGroup aria-label={props['aria-label']} aria-labelledby={props['aria-labelledby']} ref={ref} {...groupProps}>\n      {props.isDisabled === true ? <ButtonContext value={DISABLED}>{content}</ButtonContext> : content}\n    </RACGroup>;\n}\n\n// A connected button's corners: the group's ends keep the outer shape, and\n// every edge it shares with a neighbour takes the inner corner, tighter while\n// pressed and round once selected — a press wins over a selection.\nfunction connectedStyles(index: number, count: number, size: GroupSize, shape: ButtonShape, state: ButtonState) {\n  const outer = shape === 'square' ? INNER[size] : ROUND[size];\n  const inner = state.isPressed ? INNER_PRESSED[size] : state.isSelected === true ? ROUND[size] : INNER[size];\n  const start = index === 0 ? outer : inner;\n  const end = index === count - 1 ? outer : inner;\n  return [corners.shape(start, end), (size === 'xs' || size === 'md') && styles.minimum];\n}\n\n// One button's part in the group: its size, its corners in a connected\n// group, and its share of a press in a standard one.\nfunction itemFor({\n  count,\n  endPress,\n  index,\n  press,\n  setPress,\n  shape,\n  size,\n  variant\n}: {\n  count: number;\n  endPress: () => void;\n  index: number;\n  press: null | Press;\n  setPress: (press: Press) => void;\n  shape: ButtonShape;\n  size: GroupSize | undefined;\n  variant: ButtonGroupVariant;\n}): ButtonGroupItem {\n  const sized = size ?? 'md';\n  if (variant === 'connected') {\n    return {\n      shift: 0,\n      size,\n      styles: (state: ButtonState) => connectedStyles(index, count, sized, shape, state)\n    };\n  }\n  return {\n    onPressEnd: endPress,\n    onPressStart: (width: number) => {\n      setPress({\n        delta: width * EXPANDED_RATIO,\n        index\n      });\n    },\n    shift: shiftFor(index, count, press),\n    size\n  };\n}\n\n// How far a standard group moves one button's width while a press is held:\n// the pressed button gains the whole share, and its neighbours give it up —\n// half each, or all of it from the one neighbour of a button at an end.\nfunction shiftFor(index: number, count: number, press: null | Press) {\n  if (press === null) {\n    return 0;\n  }\n  if (index === press.index) {\n    return press.delta;\n  }\n  if (Math.abs(index - press.index) !== 1) {\n    return 0;\n  }\n  const atEnd = press.index === 0 || press.index === count - 1;\n  return -(atEnd ? press.delta : press.delta / 2);\n}\nexport type { ButtonGroupProps, ButtonGroupVariant };\nexport default ButtonGroup;"],"mappings":"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"}

package/dist/components/checkbox/index.js

@@ -80,6 +80,20 @@ const hoverLayers = {
 		$$css: true
 	}
 };
+const focusLayers = {
+	error: {
+		kWkggS: "xyn212m",
+		$$css: true
+	},
+	marked: {
+		kWkggS: "x1sog3nf",
+		$$css: true
+	},
+	unmarked: {
+		kWkggS: "xwqhyid",
+		$$css: true
+	}
+};
 const pressedLayers = {
 	error: {
 		kWkggS: "x3czxiy",
@@ -102,7 +116,7 @@ function buttonContent(children, ripple) {
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			...interactive ? ripple.handlers : {},
-			...props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
+			...props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
 				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAMuB,SAAS;CACbC,KAAK;EACHC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,WAAW;EACTf,QAAQ;EACRE,QAAQ;EACRY,OAAO;CACT;CACAE,mBAAmB;EACjBhB,QAAQ;EACRE,QAAQ;EACRK,QAAQ;EACRO,OAAO;CACT;CACAG,gBAAgB;EACdjB,QAAQ;EACRE,QAAQ;EACRK,QAAQ;EACRO,OAAO;CACT;CACAI,mBAAmB;EACjBhB,QAAQ;EACRY,OAAO;CACT;CACAK,qBAAqB;EACnBjB,QAAQ;EACRY,OAAO;CACT;CACAM,kBAAkB;EAChBlB,QAAQ;EACRY,OAAO;CACT;CACAO,SAAS;EACPd,QAAQ;EACRO,OAAO;CACT;AACF;AAKA,MAAMQ,cAAc;CAClBC,OAAO;EACLvB,QAAQ;EACRc,OAAO;CACT;CACAU,QAAQ;EACNxB,QAAQ;EACRc,OAAO;CACT;CACAW,UAAU;EACRzB,QAAQ;EACRc,OAAO;CACT;AACF;AAGA,MAAMY,cAAc;CAClBH,OAAO;EACLvB,QAAQ;EACRc,OAAO;CACT;CACAU,QAAQ;EACNxB,QAAQ;EACRc,OAAO;CACT;CACAW,UAAU;EACRzB,QAAQ;EACRc,OAAO;CACT;AACF;AACA,MAAMa,gBAAgB;CACpBJ,OAAO;EACLvB,QAAQ;EACRc,OAAO;CACT;CACAU,QAAQ;EACNxB,QAAQ;EACRc,OAAO;CACT;CACAW,UAAU;EACRzB,QAAQ;EACRc,OAAO;CACT;AACF;AAgCA,SAASsB,cAAcP,UAAqBQ,QAAgB;CAC1D,QAAQC,UAAqC;EAC3C,MAAMd,SAASc,MAAMC,cAAcD,MAAME;EACzC,MAAMC,cAAc,CAACH,MAAMI,cAAc,CAACJ,MAAMK;EAChD,MAAMC,OAAaN,MAAMO,YAAY,UAAUrB,SAAS,WAAW;EACnE,MAAMsB,SAASR,MAAMS,aAAaT,MAAMU,aAAaV,MAAMW;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAIR,cAAcJ,OAAOa,WAAW,CAAC;GAAG,GAAItE,MAAaI,cAAcoE,MAAMxD,OAAOyB,SAASiB,MAAMK,cAAc3D,cAAcqE,iBAAiBf,MAAMI,cAAc1D,cAAcsE,iBAAiBb,eAAeH,MAAMS,aAAazB,YAAYsB,OAAOH,eAAeH,MAAMW,kBAAkBvB,YAAYkB,OAAOH,eAAeH,MAAMU,aAAarB,cAAciB,OAAON,MAAMW,kBAAkB1D,MAAMgE,WAAW;GAAxZ,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI3E,MAAagB,OAAOC,KAAK2B,UAAU5B,OAAOmB,WAAW,CAACS,UAAUc,MAAMO,aAAajD,OAAOwB,kBAAkB,CAACI,UAAU,CAACc,MAAMO,aAAaJ,eAAeK,UAAUlD,OAAOsB,mBAAmBM,UAAUc,MAAMO,aAAajD,OAAOqB,gBAAgBqB,MAAMI,eAAelB,SAAS5B,OAAOoB,oBAAoBpB,OAAOuB,oBAAoB;IAC7UmB,UAAAA,MAAME,kBAAkB,oBAAC,oBAAD,EAAoB,WAAU,4BAA2B,CAAA,IAAMF,MAAMC,aAAa,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA,IAAM;GAC9J,CAAA,GACLE,cAAcJ,OAAOmB,UAAU,IAC5B;EACN,CAAA,GAAA,oBAAC,cAAD;GAAqBlB;GAAQT;EAAuB,CAAA,CACtD,EAAA,CAAA;CACJ;AACF;;;;;;;;;;;AAYA,SAAA4B,SAAAC,IAAA;CAAA,MAAAC,IAAArF,EAAA,EAAA;CAAkB,MAAA,EAAAuD,UAAAC,aAAAP,OAAA,GAAA4B,YAAAO;CAMhB,MAAArB,SAAe/C,UAA2B;CAC1C,MAAAsE,qBAA2BzE,2BAA2B;CAC9C,MAAA0E,KAAA/E;CAAa,IAAAgF;CAAA,IAAAH,EAAA,OAAApC,OAAA;EAAYuC,KAAA5E,YAAYqC,KAAK;EAACoC,EAAA,KAAApC;EAAAoC,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAyD,MAAAI,KAAAvE,oBAAoBZ,MAAaI,cAAagF,KAAM,GAAGb,OAAK;CAAC,IAAAc;CAAA,IAAAN,EAAA,OAAA9B,YAAA8B,EAAA,OAAAtB,QAAA;EAElK4B,KAAA7B,cAAcP,UAAUQ,MAAM;EAACsB,EAAA,KAAA9B;EAAA8B,EAAA,KAAAtB;EAAAsB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAM,IAAA;EADlCC,KAAA,oBAAC,gBAAD;GAA0B,WAAA;GACvBD,UAAAA;EADY,CAAA;EAEEN,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAS,OAAAC,IAAA,2BAAA,GAAA;EACRF,KAAAvF,MAAaI,cAAasF,QAAS;EAACX,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAA7B,eAAA6B,EAAA,OAAApC,OAAA;EAA7CgD,KAAA,oBAAA,OAAA;GAEM,GAFGJ;GACP,UAAA,oBAAC,cAAD;IAA2BrC;IAAoBP;IAAc,OAAA;GAAK,CAAA;EAC9D,CAAA;EAAAoC,EAAA,KAAA7B;EAAA6B,EAAA,KAAApC;EAAAoC,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,QAAAE,MAAAF,EAAA,QAAAR,WAAAQ,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAO,MAAAP,EAAA,QAAAY,MAAAZ,EAAA,QAAAC,oBAAA;EANHY,KAAA,qBAAC,IAAD;GAA0B,WAAAV;GAAwCF;GAAkB,GAAMT;GAAK,GAAMY;GAArG,UAAA,CACHG,IAGAK,EAJiB;;EAOHZ,EAAA,MAAAE;EAAAF,EAAA,MAAAR;EAAAQ,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAO;EAAAP,EAAA,MAAAY;EAAAZ,EAAA,MAAAC;EAAAD,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAPXa;AAOW"}

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

@@ -1,7 +1,30 @@
 import { ReactNode, RefAttributes } from "react";
-import { ToggleButtonProps } from "react-aria-components";
+import { ButtonProps, ToggleButtonProps } from "react-aria-components";
 //#region src/components/chip/index.d.ts
-type ChipProps = Omit<ToggleButtonProps, 'children'> & {
+/** An assist or suggestion chip: an action, drawn as a plain button. */
+type ChipActionProps = Omit<ButtonProps, 'children' | 'isPending'> & {
+  /** The chip's label. */
+  children?: ReactNode;
+  /**
+   * Raises the chip off the page on a container of its own, at the page's
+   * elevation 1, in place of the outline.
+   * @default false
+   */
+  elevated?: boolean;
+  /**
+   * An icon before the label, in the page's 18dp slot and the primary role.
+   * An icon drawn in `em` takes its size from the slot.
+   */
+  icon?: ReactNode;
+  /**
+   * `assist` for an action the chip's context suggests, and `suggestion`
+   * for one the product generates. Either is an action rather than a
+   * selection, so neither is ever selected.
+   */
+  variant: 'assist' | 'suggestion';
+};
+/** A filter chip: a two-state button, the default. */
+type ChipFilterProps = Omit<ToggleButtonProps, 'children'> & {
   /**
    * The chip's label. A node rather than React Aria's node-or-function,
    * since the chip puts its own check before whatever this is and a function
@@ -9,14 +32,38 @@ type ChipProps = Omit<ToggleButtonProps, 'children'> & {
    * chip narrows it the same way, for the same reason.
    */
   children?: ReactNode;
+  /**
+   * Raises the chip off the page on a container of its own, at the page's
+   * elevation 1, in place of the outline. A selected one keeps the
+   * secondary container.
+   * @default false
+   */
+  elevated?: boolean;
+  /**
+   * An icon before the label, in the page's 18dp slot and the primary role.
+   * The check takes its place while the chip is selected, so the chip keeps
+   * its width. An icon drawn in `em` takes its size from the slot.
+   */
+  icon?: ReactNode;
+  /**
+   * A filter chip, a two-state button.
+   * @default 'filter'
+   */
+  variant?: 'filter';
 };
+type ChipProps = ChipActionProps | ChipFilterProps;
+/** Which of the chips page's chips a Chip is. */
+type ChipVariant = 'assist' | 'filter' | 'suggestion';
 /**
- * A chip is a two-state button, so its selected state is React Aria's
- * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to
- * let it keep its own state. Selection is announced through `aria-pressed`
- * rather than a role of its own.
+ * A chip. By default a filter chip, which is a two-state button, so its
+ * selected state is React Aria's `isSelected`: pass it with `onChange` to
+ * control it, or `defaultSelected` to let it keep its own state. Selection is
+ * announced through `aria-pressed` rather than a role of its own.
+ *
+ * `variant="assist"` and `variant="suggestion"` draw the page's two action
+ * chips instead: plain buttons, pressed with `onPress`, never selected.
  */
-declare function Chip({ children, onKeyDown, onKeyUp, render, ...props }: ChipProps & RefAttributes<HTMLButtonElement>): import("react").JSX.Element;
+declare function Chip(props: ChipProps & RefAttributes<HTMLButtonElement>): import("react").JSX.Element;
 //#endregion
-export { type ChipProps, Chip as default };
+export { type ChipActionProps, type ChipFilterProps, type ChipProps, type ChipVariant, Chip as default };
 //# sourceMappingURL=index.d.ts.map