@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/calendar/index.js

@@ -2,8 +2,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { focus } from "../../styles/focus.js";
-import { calendarStyles } from "../../calendar/styles.js";
-import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
+import { calendarStyles, dateLayers } from "../../calendar/styles.js";
+import { CalendarFrame, CalendarGridHeader as CalendarGridHeader$1 } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,53 +29,80 @@ import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-ar
 * The call site's `className` and `style` land on the container, which is the
 * element a layout positions.
 */
-function Calendar$1(props$1) {
-	const $ = c(12);
-	let t0;
-	if ($[0] !== props$1) {
-		t0 = mergeStatefulStyles(props(calendarStyles.root), props$1);
-		$[0] = props$1;
-		$[1] = t0;
-	} else t0 = $[1];
+function Calendar$1(t0) {
+	const $ = c(21);
+	let T0;
+	let T1;
 	let t1;
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(CalendarHeader, {});
-		t2 = props(calendarStyles.months);
-		$[2] = t1;
-		$[3] = t2;
-	} else {
-		t1 = $[2];
-		t2 = $[3];
-	}
 	let t3;
-	if ($[4] !== props$1.visibleDuration?.months) {
-		t3 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
-		$[4] = props$1.visibleDuration?.months;
-		$[5] = t3;
-	} else t3 = $[5];
 	let t4;
-	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx("div", {
-			...t2,
-			children: t3
-		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
 	let t5;
-	if ($[8] !== props$1 || $[9] !== t0 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Calendar, {
-			...props$1,
-			...t0,
-			children: [t1, t4]
+	if ($[0] !== t0) {
+		const { showMonthYearMenus: t6, ...props$1 } = t0;
+		const showMonthYearMenus = t6 === void 0 ? false : t6;
+		T1 = Calendar;
+		t4 = props$1;
+		t5 = mergeStatefulStyles(props(calendarStyles.root), props$1);
+		T0 = CalendarFrame;
+		t3 = showMonthYearMenus;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = props(calendarStyles.months);
+			$[8] = t1;
+		} else t1 = $[8];
+		t2 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+		t5 = $[7];
+	}
+	let t6;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			...t1,
+			children: t2
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== T0 || $[13] !== t3 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			showMonthYearMenus: t3,
+			children: t6
+		});
+		$[12] = T0;
+		$[13] = t3;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== T1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			...t4,
+			...t5,
+			children: t7
 		});
-		$[8] = props$1;
-		$[9] = t0;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	return t5;
+		$[16] = T1;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 function _temp(offset) {
 	return /* @__PURE__ */ jsxs(CalendarGrid, {
@@ -85,7 +112,7 @@ function _temp(offset) {
 	}, offset.months);
 }
 function cellClassName(state) {
-	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
 }
 function gridCell(date) {
 	return /* @__PURE__ */ jsx(CalendarCell, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","props","$","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","cellUnavailable","cellDisabled","date","Calendar","_c","props","stylex.props","RACCalendar","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// Four things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue = DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACCalendar>;\n}\n\n// A date'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. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,SAAAS,WAAAkB,SAAA;CAAA,MAAAC,IAAA3B,EAAA,EAAA;CAAA,IAAA4B;CAAA,IAAAD,EAAA,OAAAD,SAAA;EACwCE,KAAAP,oBAAoBd,MAAaY,eAAcU,IAAK,GAAGH,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAG;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAK,OAAAC,IAAA,2BAAA,GAAA;EAC/FH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAxB,MAAaY,eAAce,MAAO;EAACP,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAD,QAAAU,iBAAAF,QAAA;EACzCC,KAAAjB,aAAaQ,QAAKU,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACX,EAAA,KAAAD,QAAAU,iBAAAF;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAQ,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAR,EAAA,KAAAQ;EAAAR,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAD,WAAAC,EAAA,OAAAC,MAAAD,EAAA,QAAAY,IAAA;EAPHC,KAAA,qBAACqB,UAAD;GAAY,GAAQnC;GAAK,GAAME;GAA/B,UAAA,CACHE,IACAS,EAFe;;EAQHZ,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OARTa;AAQS;AATlB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAACqB,cAAD;EAA6CrB;EAAM,GAAMlC,MAAaY,eAAcuB,IAAK;EAAzF,UAAA,CAC5D,oBAACqB,sBAAD,CAAmB,CAAA,GACnB,oBAACC,kBAAD,EAAA,UAAsBrB,SAAF,CAAA,CAFwD;CAAMF,GAAAA,OAAMP,MAAZ;AAG5D;AAa5B,SAASU,cAAcC,OAKpB;CACD,OAAOtC,MAAaY,eAAe+B,MAAM9B,MAAM+B,MAAMN,MAAMG,WAAW7B,eAAeiC,WAAWP,MAAME,cAAc5B,eAAekC,cAAcR,MAAMI,iBAAiB9B,eAAemC,iBAAiBT,MAAMC,cAAc3B,eAAeoC,YAAY,CAAC,CAAC/B,aAAa;AACxQ;AACA,SAASmB,SAASa,MAAkC;CAClD,OAAO,oBAACS,cAAD;EAAiB,WAAWrB;EAAqBY;CAAK,CAAA;AAC/D"}
+{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","props","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","gridCell","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","selectedHovered","plainHovered","selectedPressed","plainPressed","cellUnavailable","cellDisabled","date","Calendar","_c","props","RACCalendar","stylex.props","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was. The parts are in\n// `src/calendar`, shared with RangeCalendar.\n//\n// Five things are this component's own.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year, which would need two names React Aria has no\n// message for — the library writes a word of its own only behind a prop that\n// can replace it, and it would take a pair on four components. The year list\n// reaches any year the bounds allow in one press, and Shift with Page Up or\n// Page Down steps a year from the keyboard.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue = DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>({\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n              <CalendarGridHeader />\n              <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n            </RACCalendarGrid>)}\n        </div>\n      </CalendarFrame>\n    </RACCalendar>;\n}\n\n// A date'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. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. The hover and pressed layers come\n// next, over whichever ground the date has, a press over a hover.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":"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"}

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

@@ -37,5 +37,5 @@ type CardVariant = 'elevated' | 'filled' | 'outlined';
  */
 declare function Card({ children, interactive, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding, render, variant, ...props }: CardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { type CardProps, Card as default };
+export { type CardProps, type CardVariant, Card as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -53,16 +53,16 @@ const styles = {
 };
 const interactionStyles = {
 	elevated: {
-		kWkggS: "xu5m21g x5r8g2b x1vnz5z6",
-		kGVxlE: "x1g60mc1 x1fzngjt x19efjv6",
+		kWkggS: "xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6",
+		kGVxlE: "x1g60mc1 x14zlms8 xqmo4o3 x19efjv6",
 		$$css: true
 	},
 	filled: {
-		kWkggS: "x1w49kxs xovjh5a x1rrhr5q",
+		kWkggS: "x1w49kxs x10l1pcx xt0lj0h x1rrhr5q",
 		$$css: true
 	},
 	outlined: {
-		kWkggS: "x1jqfdmz x1dmgsxd x14s9m32",
+		kWkggS: "x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32",
 		$$css: true
 	}
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","ring","t10","t11","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","HOVER_CAPABLE","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","ring","t10","t11","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\n\n// A pointer that can hover: a mouse or a trackpad, not a finger. An\n// interactive card is a plain element React Aria does not host, so it has no\n// `isHovered` to draw its hover layer from, and Chromium leaves `:hover` on\n// whatever a touch last tapped — a card tapped and then navigated back to\n// stayed lifted. Inside this query a touch screen draws no hover at all. A\n// touchscreen laptop still matches it for its trackpad, which is the limit of\n// asking the device rather than the event.\nconst HOVER_CAPABLE = '@media (hover: hover)';\n\n// The state layers, from pseudo-classes, since the card has no render state\n// to read — see `HOVER_CAPABLE`.\n// `:active` is written twice, bare for a touch and again inside the query.\n// StyleX orders a rule by the sum of its conditions, so a hover inside the\n// query would otherwise come after a bare press and win while both held.\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x17zbzf9 x1ru19e0 x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x14zlms8 xqmo4o3 x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs x10l1pcx xt0lj0h x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1ie1ydn x1dau0i7 x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"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":"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"}

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

@@ -61,6 +61,7 @@ function CheckboxGroup$1(t0) {
 function groupContent(label, children, description, error) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(FieldLabel, {
+			isRequired: state.isRequired,
 			state,
 			variant: "group",
 			children: label

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxGroupRenderProps","CheckboxGroupProps","RACCheckboxGroupProps","stylex","CheckboxGroup","RACCheckboxGroup","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","mergeStatefulStyles","children","description","error","label","Omit","t0","$","props","validationBehavior","T0","t1","t2","root","t3","groupContent","t4","state","CheckboxGroup","_c","props","RACCheckboxGroup","stylex.props"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxGroupRenderProps, CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxGroup as RACCheckboxGroup } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A labelled set of checkboxes sharing one value. The checkbox page draws\n// the boxes; the group is what the ARIA pattern asks for around them — a\n// group named by its label, described by its description, and invalid as a\n// whole — and its label, description and error are the field chrome's, so a\n// group reads like the fields beside it. The label is label-large, the role\n// a field's label takes at rest, since a group has no box to float it in.\n\ntype CheckboxGroupProps = {\n  /** The checkboxes, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the boxes' error\n   * colours and `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  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  label: string;\n} & Omit<RACCheckboxGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Checkbox` inside\n * names the entry it stands for with `value`. Disabled, read-only and the\n * error state reach every checkbox from here.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  description,\n  error,\n  label,\n  ...props\n}: CheckboxGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACCheckboxGroup isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root), props)}>\n      {groupContent(label, children, description, error)}\n    </RACCheckboxGroup>;\n}\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. The label takes the group's render state, so\n// its colour follows disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined) {\n  return (state: CheckboxGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div className=\"x78zum5 xdt5ytf\">{children}</div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\nexport type { CheckboxGroupProps };\nexport default CheckboxGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsDA,SAAAQ,gBAAAa,IAAA;CAAA,MAAAC,IAAArB,EAAA,EAAA;CAAuB,MAAA,EAAAe,UAAAC,aAAAC,OAAAC,OAAA,GAAAI,YAAAF;CAOrB,MAAAG,qBAA2BX,2BAA2B;CAC9C,MAAAY,KAAAhB;CAAgB,IAAAiB;CAAA,IAAAJ,EAAA,OAAAJ,OAAA;EAAYQ,KAAAd,YAAYM,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAyD,MAAAK,KAAAZ,oBAAoBR,MAAaO,YAAWc,IAAK,GAAGL,OAAK;CAAC,IAAAM;CAAA,IAAAP,EAAA,OAAAN,YAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAJ,SAAAI,EAAA,OAAAH,OAAA;EACpKU,KAAAC,aAAaX,OAAOH,UAAUC,aAAaC,KAAK;EAACI,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,MAAAH,EAAA,OAAAC,WAAAD,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,MAAAP,EAAA,QAAAE,oBAAA;EAD/CO,KAAA,oBAAC,IAAD;GAA6B,WAAAL;GAAwCF;GAAkB,GAAMD;GAAK,GAAMI;GAC1GE,UAAAA;EADmB,CAAA;EAEHP,EAAA,KAAAG;EAAAH,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFdS;AAEc;AAOvB,SAASD,aAAaX,OAAeH,UAAqBC,aAAiCC,OAA2B;CACpH,QAAQc,UAAoC,qBAAA,UAAA,EAAA,UAAA;EACxC,oBAAC,YAAD;GAAmBA;GAAO,SAAQ;GAC/Bb,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,WAAU;GAAmBH;EAAc,CAAA;EAChD,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxGroupRenderProps","CheckboxGroupProps","RACCheckboxGroupProps","stylex","CheckboxGroup","RACCheckboxGroup","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","mergeStatefulStyles","children","description","error","label","Omit","t0","$","props","validationBehavior","T0","t1","t2","root","t3","groupContent","t4","state","isRequired","CheckboxGroup","_c","props","RACCheckboxGroup","stylex.props"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxGroupRenderProps, CheckboxGroupProps as RACCheckboxGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxGroup as RACCheckboxGroup } from 'react-aria-components';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A labelled set of checkboxes sharing one value. The checkbox page draws\n// the boxes; the group is what the ARIA pattern asks for around them — a\n// group named by its label, described by its description, and invalid as a\n// whole — and its label, description and error are the field chrome's, so a\n// group reads like the fields beside it. The label is label-large, the role\n// a field's label takes at rest, since a group has no box to float it in.\n\ntype CheckboxGroupProps = {\n  /** The checkboxes, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the boxes' error\n   * colours and `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  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  label: string;\n} & Omit<RACCheckboxGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Checkbox` inside\n * names the entry it stands for with `value`. Disabled, read-only and the\n * error state reach every checkbox from here.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  description,\n  error,\n  label,\n  ...props\n}: CheckboxGroupProps & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACCheckboxGroup isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root), props)}>\n      {groupContent(label, children, description, error)}\n    </RACCheckboxGroup>;\n}\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. The label takes the group's render state, so\n// its colour follows disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined) {\n  return (state: CheckboxGroupRenderProps) => <>\n      <FieldLabel isRequired={state.isRequired} state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div className=\"x78zum5 xdt5ytf\">{children}</div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\nexport type { CheckboxGroupProps };\nexport default CheckboxGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsDA,SAAAQ,gBAAAa,IAAA;CAAA,MAAAC,IAAArB,EAAA,EAAA;CAAuB,MAAA,EAAAe,UAAAC,aAAAC,OAAAC,OAAA,GAAAI,YAAAF;CAOrB,MAAAG,qBAA2BX,2BAA2B;CAC9C,MAAAY,KAAAhB;CAAgB,IAAAiB;CAAA,IAAAJ,EAAA,OAAAJ,OAAA;EAAYQ,KAAAd,YAAYM,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAyD,MAAAK,KAAAZ,oBAAoBR,MAAaO,YAAWc,IAAK,GAAGL,OAAK;CAAC,IAAAM;CAAA,IAAAP,EAAA,OAAAN,YAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAJ,SAAAI,EAAA,OAAAH,OAAA;EACpKU,KAAAC,aAAaX,OAAOH,UAAUC,aAAaC,KAAK;EAACI,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,MAAAH,EAAA,OAAAC,WAAAD,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAO,MAAAP,EAAA,QAAAE,oBAAA;EAD/CO,KAAA,oBAAC,IAAD;GAA6B,WAAAL;GAAwCF;GAAkB,GAAMD;GAAK,GAAMI;GAC1GE,UAAAA;EADmB,CAAA;EAEHP,EAAA,KAAAG;EAAAH,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAE;EAAAF,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFdS;AAEc;AAOvB,SAASD,aAAaX,OAAeH,UAAqBC,aAAiCC,OAA2B;CACpH,QAAQc,UAAoC,qBAAA,UAAA,EAAA,UAAA;EACxC,oBAAC,YAAD;GAAY,YAAYA,MAAMC;GAAmBD;GAAO,SAAQ;GAC7Db,UAAAA;EACS,CAAA;EACZ,oBAAC,OAAD;GAAK,WAAU;GAAmBH;EAAc,CAAA;EAChD,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;EAAM,CAAA;CACrE,EAAA,CAAA;AACJ"}

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