@kanso-labs/kanso-ui 0.43.7 → 0.44.1

package/dist/components/calendar/index.js

@@ -5,9 +5,13 @@ import { focus } from "../../styles/focus.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 { invalidFrom } from "../../field/root.js";
+import { fieldChromeStyles } from "../../field/styles.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-aria-components";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarStateContext, Text } from "react-aria-components";
+import { isSameDay } from "@internationalized/date";
 //#region src/components/calendar/index.tsx
 /**
 * A month calendar for picking a date. The value is React Aria's: pass
@@ -31,85 +35,82 @@ import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-ar
 * element a layout positions.
 */
 function Calendar$1(t0) {
-	const $ = c(23);
+	const $ = c(20);
 	let T0;
-	let T1;
+	let error;
+	let props$1;
+	let showMonthYearMenus;
 	let t1;
 	let t2;
 	let t3;
-	let t4;
-	let t5;
-	let t6;
 	if ($[0] !== t0) {
-		const { showMonthYearMenus: t7, ...props$1 } = t0;
-		const showMonthYearMenus = t7 === void 0 ? false : t7;
-		T1 = Calendar;
-		t5 = props$1;
-		t6 = mergeStatefulStyles(props(calendarStyles.root), props$1);
-		T0 = CalendarFrame;
-		t3 = props$1.visibleDuration?.months ?? 1;
-		t4 = showMonthYearMenus;
-		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-			t1 = props(calendarStyles.months);
+		const { error: t4, showMonthYearMenus: t5, ...t6 } = t0;
+		error = t4;
+		props$1 = t6;
+		showMonthYearMenus = t5 === void 0 ? false : t5;
+		T0 = Calendar;
+		if ($[8] !== error) {
+			t1 = invalidFrom(error);
+			$[8] = error;
 			$[9] = t1;
 		} else t1 = $[9];
-		t2 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
+		t2 = props$1;
+		t3 = mergeStatefulStyles(props(calendarStyles.root), props$1);
 		$[0] = t0;
 		$[1] = T0;
-		$[2] = T1;
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
+		$[2] = error;
+		$[3] = props$1;
+		$[4] = showMonthYearMenus;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
 	} else {
 		T0 = $[1];
-		T1 = $[2];
-		t1 = $[3];
-		t2 = $[4];
-		t3 = $[5];
-		t4 = $[6];
-		t5 = $[7];
-		t6 = $[8];
+		error = $[2];
+		props$1 = $[3];
+		showMonthYearMenus = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
 	}
-	let t7;
-	if ($[10] !== t1 || $[11] !== t2) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			...t1,
-			children: t2
-		});
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== T0 || $[14] !== t3 || $[15] !== t4 || $[16] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T0, {
-			months: t3,
-			showMonthYearMenus: t4,
-			children: t7
-		});
-		$[13] = T0;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
-	if ($[18] !== T1 || $[19] !== t5 || $[20] !== t6 || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsx(T1, {
-			...t5,
-			...t6,
-			children: t8
+	let t4;
+	if ($[10] !== error || $[11] !== props$1.visibleDuration?.months || $[12] !== showMonthYearMenus) {
+		t4 = (t5) => {
+			const { isInvalid } = t5;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CalendarFrame, {
+				months: props$1.visibleDuration?.months ?? 1,
+				showMonthYearMenus,
+				children: /* @__PURE__ */ jsx("div", {
+					...props(calendarStyles.months),
+					children: monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp)
+				})
+			}), isInvalid && error !== void 0 ? /* @__PURE__ */ jsx(Text, {
+				slot: "errorMessage",
+				...props(fieldChromeStyles.message, fieldChromeStyles.messageError),
+				children: error
+			}) : null] });
+		};
+		$[10] = error;
+		$[11] = props$1.visibleDuration?.months;
+		$[12] = showMonthYearMenus;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== T0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			isInvalid: t1,
+			...t2,
+			...t3,
+			children: t4
 		});
-		$[18] = T1;
+		$[14] = T0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
 		$[19] = t5;
-		$[20] = t6;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	return t9;
+	} else t5 = $[19];
+	return t5;
 }
 function _temp(offset) {
 	return /* @__PURE__ */ jsx("div", {
@@ -121,14 +122,69 @@ function _temp(offset) {
 		})
 	}, offset.months);
 }
-function cellClassName(state) {
-	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 cellClassName(state, calendar) {
+	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isSelected && state.isInvalid && calendarStyles.cellInvalid, calendar.isReadOnly && calendarStyles.cellReadOnly, !calendar.isReadOnly && state.isHovered && hoveredLayer(state), state.isPressed && pressedLayer(state), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled, calendar.isHeldWhileDisabled && !state.isOutsideMonth && calendarStyles.cellSelectedDisabled).className ?? "";
+}
+function cellClassNameIn(calendar) {
+	return (state) => cellClassName(state, calendar);
+}
+/**
+* One date. React Aria's cell, with what its classes need from the calendar
+* read from React Aria's calendar state: whether it is read-only, and the
+* date it holds, which React Aria hides from the cell itself once the
+* calendar is disabled.
+*
+* Held means what React Aria would have called selected with the calendar
+* enabled: the value, inside the bounds, and in its own month's grid rather
+* than a neighbour's, which the classes check.
+*/
+function DateCell(t0) {
+	const $ = c(8);
+	const { date } = t0;
+	const calendar = useContext(CalendarStateContext);
+	let T0;
+	let t1;
+	if ($[0] !== calendar || $[1] !== date) {
+		const isHeldWhileDisabled = calendar !== null && calendar.isDisabled && !calendar.isInvalid(date) && holds(calendar.value, date);
+		T0 = CalendarCell;
+		t1 = cellClassNameIn({
+			isHeldWhileDisabled,
+			isReadOnly: calendar?.isReadOnly ?? false
+		});
+		$[0] = calendar;
+		$[1] = date;
+		$[2] = T0;
+		$[3] = t1;
+	} else {
+		T0 = $[2];
+		t1 = $[3];
+	}
+	let t2;
+	if ($[4] !== T0 || $[5] !== date || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T0, {
+			className: t1,
+			date
+		});
+		$[4] = T0;
+		$[5] = date;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
 }
 function gridCell(date) {
-	return /* @__PURE__ */ jsx(CalendarCell, {
-		className: cellClassName,
-		date
-	});
+	return /* @__PURE__ */ jsx(DateCell, { date });
+}
+function holds(value, date) {
+	return (value !== null && "length" in value ? value : [value]).some((entry) => entry !== null && isSameDay(entry, date));
+}
+function hoveredLayer(state) {
+	if (!state.isSelected) return dateLayers.plainHovered;
+	return state.isInvalid ? dateLayers.invalidHovered : dateLayers.selectedHovered;
+}
+function pressedLayer(state) {
+	if (!state.isSelected) return dateLayers.plainPressed;
+	return state.isInvalid ? dateLayers.invalidPressed : dateLayers.selectedPressed;
 }
 //#endregion
 export { Calendar$1 as default };

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","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","className","T","showMonthYearMenus","style","Omit","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","t7","props","undefined","root","visibleDuration","months","Symbol","for","map","_temp","t8","t9","offset","month","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 within a century of the one shown in one press, or any\n// the bounds allow where they are closer, and Shift with Page Up or Page\n// 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 circle is the element, centred in a 48dp column and a 48dp\n// row — the pitch Compose lays its days at — and a transparent box reaching\n// the 4dp past it on every side makes the whole square the press target,\n// rather than a 48dp box with a 40dp box inside it. The chevrons and the\n// month and year menu buttons reach a 48dp target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that. Under about\n// 304dp of content a column is narrower than its 40dp circle, and the\n// circles of neighbouring dates meet.\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> = {\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: the year list runs a\n   * century either side of the year shown, or to `minValue` and `maxValue`\n   * where they are closer.\n   *\n   * For one visible month. With `visibleDuration` of more than one, the\n   * header is the plain one, whose heading names every month shown — the\n   * menus name only the first, which would leave the others unlabelled.\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} & Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'>;\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, stacked below the expanded breakpoint. Name it with `aria-label`\n * or `aria-labelledby`; React Aria composes the visible month into that name\n * 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 months={props.visibleDuration?.months ?? 1} showMonthYearMenus={showMonthYearMenus}>\n        <div {...stylex.props(calendarStyles.months)}>\n          {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <div key={offset.months} {...stylex.props(calendarStyles.month)}>\n              <RACCalendarGrid offset={offset} {...stylex.props(calendarStyles.grid)}>\n                <CalendarGridHeader />\n                <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n              </RACCalendarGrid>\n            </div>)}\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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"}
+{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","CalendarCellRenderProps","CalendarRenderProps","DateValue","CalendarProps","RACCalendarProps","isSameDay","stylex","useContext","CalendarStateContext","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","Text","RACText","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","invalidFrom","fieldChromeStyles","focus","mergeStatefulStyles","className","T","error","showMonthYearMenus","style","Omit","CalendarStates","isHeldWhileDisabled","isReadOnly","t0","$","T0","props","t1","t2","t3","t4","t5","t6","undefined","root","visibleDuration","months","isInvalid","map","_temp","message","messageError","offset","month","grid","gridCell","cellClassName","state","calendar","cell","ring","isToday","cellToday","isSelected","cellSelected","cellInvalid","cellReadOnly","isHovered","hoveredLayer","isPressed","pressedLayer","isUnavailable","cellUnavailable","isDisabled","cellDisabled","isOutsideMonth","cellSelectedDisabled","cellClassNameIn","DateCell","date","holds","value","held","some","entry","plainHovered","invalidHovered","selectedHovered","plainPressed","invalidPressed","selectedPressed","Calendar","_c","props","RACCalendar","stylex.props","RACText","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 { CalendarCellRenderProps, CalendarRenderProps, DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport { isSameDay } from '@internationalized/date';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { CalendarStateContext, Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, Text as RACText } from 'react-aria-components';\nimport { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } from '../../calendar/styles';\nimport { invalidFrom } from '../../field/root';\nimport { fieldChromeStyles } from '../../field/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// The calendar's own disabled, read-only and invalid states are drawn on its\n// dates, from React Aria's calendar state rather than each date's, since\n// that is the one place all three are known:\n//\n// - **Disabled** fades every date, the weekday row, the chevrons and the\n//   menu buttons to the page's 38%, and keeps the date it holds as a\n//   disabled filled circle — React Aria stops calling a disabled date\n//   selected, which left the calendar looking empty.\n// - **Read-only** keeps every date at full strength, since it still reports\n//   a value, but drops the pointer and the state layers from the dates, which\n//   a press no longer changes. The chevrons and the menus still move the\n//   month, so they keep theirs.\n// - **Invalid** draws the date held in the error container roles, and\n//   `error` writes the reason under the months in the field's supporting\n//   type and error colour. Each date React Aria marks invalid points\n//   `aria-describedby` at it, so a screen reader hears why as well as that.\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 within a century of the one shown in one press, or any\n// the bounds allow where they are closer, and Shift with Page Up or Page\n// 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 circle is the element, centred in a 48dp column and a 48dp\n// row — the pitch Compose lays its days at — and a transparent box reaching\n// the 4dp past it on every side makes the whole square the press target,\n// rather than a 48dp box with a 40dp box inside it. The chevrons and the\n// month and year menu buttons reach a 48dp target the same way.\n//\n// **It narrows to its container.** The page's docked calendar is 360dp, and\n// a compact window leaves 328dp between its margins, so the calendar is 360\n// at most and the columns share whatever is left below that. Under about\n// 304dp of content a column is narrower than its 40dp circle, and the\n// circles of neighbouring dates meet.\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> = {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /**\n   * The message shown under the months, which also marks the calendar\n   * invalid: the date it holds turns to the error container colours, and\n   * React Aria points that date's description at the message. `isInvalid`\n   * on its own marks the date with no message.\n   */\n  error?: string;\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: the year list runs a\n   * century either side of the year shown, or to `minValue` and `maxValue`\n   * where they are closer.\n   *\n   * For one visible month. With `visibleDuration` of more than one, the\n   * header is the plain one, whose heading names every month shown — the\n   * menus name only the first, which would leave the others unlabelled.\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} & Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'>;\n\n/** What a date's classes read off the calendar around it. */\ntype CalendarStates = {\n  /**\n   * Whether this date is the one a disabled calendar holds, inside its\n   * bounds. A copy of it in a neighbouring month's grid is told apart by\n   * React Aria's own `isOutsideMonth`.\n   */\n  isHeldWhileDisabled: boolean;\n  isReadOnly: boolean;\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, stacked below the expanded breakpoint. Name it with `aria-label`\n * or `aria-labelledby`; React Aria composes the visible month into that name\n * 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  error,\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> isInvalid={invalidFrom(error)} {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      {({\n      isInvalid\n    }: CalendarRenderProps) => <>\n          <CalendarFrame months={props.visibleDuration?.months ?? 1} showMonthYearMenus={showMonthYearMenus}>\n            <div {...stylex.props(calendarStyles.months)}>\n              {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <div key={offset.months} {...stylex.props(calendarStyles.month)}>\n                    <RACCalendarGrid offset={offset} {...stylex.props(calendarStyles.grid)}>\n                      <CalendarGridHeader />\n                      <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n                    </RACCalendarGrid>\n                  </div>)}\n            </div>\n          </CalendarFrame>\n          {/*\n           * Through React Aria's error slot, which gives it the id an\n           * invalid date's `aria-describedby` names. Drawn only while the\n           * calendar is invalid: React Aria looks for the element when\n           * `isInvalid` changes, which is when this appears and goes.\n           */}\n          {isInvalid && error !== undefined ? <RACText slot=\"errorMessage\" {...stylex.props(fieldChromeStyles.message, fieldChromeStyles.messageError)}>\n              {error}\n            </RACText> : null}\n        </>}\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state and the calendar's.\n// StyleX cannot target `[data-selected]` on the element it is styling, so the\n// state comes from 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 — and `invalid` after `selected`,\n// which it repaints. The hover and pressed layers come next, over whichever\n// ground the date has, a press over a hover. A read-only calendar takes no\n// hover layer, and React Aria reports no press there to draw one for.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them; the date a disabled calendar\n// holds then puts its disabled circle back.\nfunction cellClassName(state: CalendarCellRenderProps, calendar: CalendarStates) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isSelected && state.isInvalid && calendarStyles.cellInvalid, calendar.isReadOnly && calendarStyles.cellReadOnly, !calendar.isReadOnly && state.isHovered && hoveredLayer(state), state.isPressed && pressedLayer(state), state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled, calendar.isHeldWhileDisabled && !state.isOutsideMonth && calendarStyles.cellSelectedDisabled).className ?? '';\n}\n\n// The calendar's part of a date's classes, bound once per date. Built by a\n// call rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction cellClassNameIn(calendar: CalendarStates) {\n  return (state: CalendarCellRenderProps) => cellClassName(state, calendar);\n}\n\n/**\n * One date. React Aria's cell, with what its classes need from the calendar\n * read from React Aria's calendar state: whether it is read-only, and the\n * date it holds, which React Aria hides from the cell itself once the\n * calendar is disabled.\n *\n * Held means what React Aria would have called selected with the calendar\n * enabled: the value, inside the bounds, and in its own month's grid rather\n * than a neighbour's, which the classes check.\n */\nfunction DateCell({\n  date\n}: {\n  date: CalendarDate;\n}): ReactElement {\n  const calendar = useContext(CalendarStateContext);\n  const isHeldWhileDisabled = calendar !== null && calendar.isDisabled && !calendar.isInvalid(date) && holds(calendar.value, date);\n  return <RACCalendarCell className={cellClassNameIn({\n    isHeldWhileDisabled,\n    isReadOnly: calendar?.isReadOnly ?? false\n  })} date={date} />;\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <DateCell date={date} />;\n}\n\n// Whether a calendar's value includes a date: one date, or several where the\n// calendar takes more than one.\nfunction holds(value: CalendarDate | null | readonly (CalendarDate | null)[], date: CalendarDate) {\n  const held = value !== null && 'length' in value ? value : [value];\n  return held.some(entry => entry !== null && isSameDay(entry, date));\n}\nfunction hoveredLayer(state: CalendarCellRenderProps) {\n  if (!state.isSelected) {\n    return dateLayers.plainHovered;\n  }\n  return state.isInvalid ? dateLayers.invalidHovered : dateLayers.selectedHovered;\n}\nfunction pressedLayer(state: CalendarCellRenderProps) {\n  if (!state.isSelected) {\n    return dateLayers.plainPressed;\n  }\n  return state.isInvalid ? dateLayers.invalidPressed : dateLayers.selectedPressed;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":"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"}

package/dist/components/checkbox/index.js

@@ -121,7 +121,7 @@ function buttonContent(children, ripple, inGroup) {
 			...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
+				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x2lah0s x1xp8n7a" }) : null
 			}), interactive ? ripple.surface : null]
 		}), /* @__PURE__ */ jsx(ControlLabel, {
 			isRequired: required,
@@ -145,7 +145,7 @@ function buttonContent(children, ripple, inGroup) {
 * which is the element a layout positions.
 */
 function Checkbox(t0) {
-	const $ = c(21);
+	const $ = c(20);
 	const { children, description, error, ...props$1 } = t0;
 	const ripple = useRipple();
 	const validationBehavior = useFieldValidationBehavior();
@@ -177,45 +177,45 @@ function Checkbox(t0) {
 		$[7] = t4;
 	} else t4 = $[7];
 	let t5;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = props(controlStyles.messages);
-		$[8] = t5;
-	} else t5 = $[8];
+	if ($[8] !== description || $[9] !== error || $[10] !== reachable || $[11] !== t4) {
+		t5 = fieldContent(t4, description, error, reachable);
+		$[8] = description;
+		$[9] = error;
+		$[10] = reachable;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
 	let t6;
-	if ($[9] !== description || $[10] !== error || $[11] !== reachable) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			...t5,
-			children: /* @__PURE__ */ jsx(FieldMessage, {
-				description,
-				error,
-				inset: false,
-				reserve: reachable
-			})
-		});
-		$[9] = description;
-		$[10] = error;
-		$[11] = reachable;
-		$[12] = t6;
-	} else t6 = $[12];
-	let t7;
-	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t1 || $[16] !== t2 || $[17] !== t4 || $[18] !== t6 || $[19] !== validationBehavior) {
-		t7 = /* @__PURE__ */ jsxs(T0, {
+	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t1 || $[16] !== t2 || $[17] !== t5 || $[18] !== validationBehavior) {
+		t6 = /* @__PURE__ */ jsx(T0, {
 			isInvalid: t1,
 			validationBehavior,
 			...props$1,
 			...t2,
-			children: [t4, t6]
+			children: t5
 		});
 		$[13] = T0;
 		$[14] = props$1;
 		$[15] = t1;
 		$[16] = t2;
-		$[17] = t4;
-		$[18] = t6;
-		$[19] = validationBehavior;
-		$[20] = t7;
-	} else t7 = $[20];
-	return t7;
+		$[17] = t5;
+		$[18] = validationBehavior;
+		$[19] = t6;
+	} else t6 = $[19];
+	return t6;
+}
+function fieldContent(button, description, error, reserve) {
+	return ({ isDisabled }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [button, /* @__PURE__ */ jsx("div", {
+		...props(controlStyles.messages),
+		children: /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error,
+			indent: true,
+			inset: false,
+			isDisabled,
+			reserve
+		})
+	})] });
 }
 //#endregion
 export { Checkbox as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","useContext","CheckboxButton","CheckboxField","CheckboxGroupStateContext","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","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","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","reachable","validate","undefined","name","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 { useContext } from 'react';\nimport { CheckboxButton, CheckboxField, CheckboxGroupStateContext } 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.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  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 xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\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 xmnqt3w\",\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   * A link or a button in it acts on its own, as in a native label: a press\n   * or Enter on \"the terms\" in \"I agree to the terms\" follows the link and\n   * leaves the checkbox as it was. A press anywhere else in the label\n   * toggles it.\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, inGroup: boolean) {\n  return (state: CheckboxButtonRenderProps) => {\n    // A checkbox in a group is marked by the group's label rather than its\n    // own: the group is what has to have a choice made in it.\n    const required = state.isRequired && !inGroup;\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 isRequired={required} state={state}>\n          {children}\n        </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 * `isRequired` ends the label in the asterisk every required field's label\n * ends in. Inside a `CheckboxGroup` the group's label carries it instead,\n * since the group is what must have a choice made in it.\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\n  // Whether a message can ever reach this checkbox, which is what a form\n  // keeps an empty line under a field for. One in a group cannot — the\n  // group owns the one message and keeps its own line for it — and one on\n  // its own can only where something can find it wanting: a requirement, a\n  // check of its own, or a name a form's errors can be keyed by. Without\n  // this every checkbox in a form sat a line taller than it draws, and a\n  // group of them in a form gained a line after every item.\n  const inGroup = useContext(CheckboxGroupStateContext) !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple, inGroup)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} reserve={reachable} />\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","CheckboxFieldRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","useContext","CheckboxButton","CheckboxField","CheckboxGroupStateContext","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","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","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","reachable","validate","undefined","name","T0","t1","t2","field","t3","t4","t5","fieldContent","t6","button","reserve","messages","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { CheckboxButton, CheckboxField, CheckboxGroupStateContext } 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.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  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 xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\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 xmnqt3w\",\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   * A link or a button in it acts on its own, as in a native label: a press\n   * or Enter on \"the terms\" in \"I agree to the terms\" follows the link and\n   * leaves the checkbox as it was. A press anywhere else in the label\n   * toggles it.\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, inGroup: boolean) {\n  return (state: CheckboxButtonRenderProps) => {\n    // A checkbox in a group is marked by the group's label rather than its\n    // own: the group is what has to have a choice made in it.\n    const required = state.isRequired && !inGroup;\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 x2lah0s x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x2lah0s x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel isRequired={required} state={state}>\n          {children}\n        </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 * `isRequired` ends the label in the asterisk every required field's label\n * ends in. Inside a `CheckboxGroup` the group's label carries it instead,\n * since the group is what must have a choice made in it.\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\n  // Whether a message can ever reach this checkbox, which is what a form\n  // keeps an empty line under a field for. One in a group cannot — the\n  // group owns the one message and keeps its own line for it — and one on\n  // its own can only where something can find it wanting: a requirement, a\n  // check of its own, or a name a form's errors can be keyed by. Without\n  // this every checkbox in a form sat a line taller than it draws, and a\n  // group of them in a form gained a line after every item.\n  const inGroup = useContext(CheckboxGroupStateContext) !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      {fieldContent(<CheckboxButton className=\"xjp7ctv\">\n          {buttonContent(children, ripple, inGroup)}\n        </CheckboxButton>, description, error, reachable)}\n    </CheckboxField>;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled checkbox, by itself or by its group, as\n// its label does. Built by a call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined, reserve: boolean) {\n  return ({\n    isDisabled\n  }: CheckboxFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} indent inset={false} isDisabled={isDisabled} reserve={reserve} />\n      </div>\n    </>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
+import { controlStyles } from "../../control/styles.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckboxGroup } from "react-aria-components";
@@ -67,13 +68,14 @@ function groupContent(label, children, description, error) {
 			children: label
 		}),
 		/* @__PURE__ */ jsx("div", {
-			className: "x78zum5 xdt5ytf",
+			...props(controlStyles.stack),
 			children
 		}),
 		/* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error,
-			inset: false
+			inset: false,
+			isDisabled: state.isDisabled
 		})
 	] });
 }

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","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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxGroupRenderProps","CheckboxGroupProps","RACCheckboxGroupProps","stylex","CheckboxGroup","RACCheckboxGroup","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","mergeStatefulStyles","children","description","error","label","Omit","t0","$","props","validationBehavior","T0","t1","t2","root","t3","groupContent","t4","state","isRequired","stack","isDisabled","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 { controlStyles } from '../../control/styles';\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.\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 {...stylex.props(controlStyles.stack)}>{children}</div>\n      <FieldMessage description={description} error={error} inset={false} isDisabled={state.isDisabled} />\n    </>;\n}\nexport type { CheckboxGroupProps };\nexport default CheckboxGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsDA,SAAAQ,gBAAAc,IAAA;CAAA,MAAAC,IAAAtB,EAAA,EAAA;CAAuB,MAAA,EAAAgB,UAAAC,aAAAC,OAAAC,OAAA,GAAAI,YAAAF;CAOrB,MAAAG,qBAA2BX,2BAA2B;CAC9C,MAAAY,KAAAjB;CAAgB,IAAAkB;CAAA,IAAAJ,EAAA,OAAAJ,OAAA;EAAYQ,KAAAd,YAAYM,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAyD,MAAAK,KAAAZ,oBAAoBT,MAAaQ,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,GAAIb,MAAaG,cAAcyB,KAAK;GAAIlB;EAAc,CAAA;EAC3D,oBAAC,cAAD;GAA2BC;GAAoBC;GAAO,OAAO;GAAO,YAAYc,MAAMG;EAAW,CAAA;CACnG,EAAA,CAAA;AACJ"}

package/dist/components/chip/index.js

@@ -80,7 +80,7 @@ function actionChipContent(children, icon, surface) {
 		chipGlyph({
 			isDisabled: state.isDisabled,
 			isSelected: false
-		}, icon),
+		}, icon, false),
 		chipLabel(children),
 		surface
 	] });