@kanso-labs/kanso-ui 0.40.4 → 0.40.6

package/dist/components/calendar/index.js

@@ -31,7 +31,7 @@ import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-ar
 * element a layout positions.
 */
 function Calendar$1(t0) {
-	const $ = c(21);
+	const $ = c(23);
 	let T0;
 	let T1;
 	let t1;
@@ -39,18 +39,20 @@ function Calendar$1(t0) {
 	let t3;
 	let t4;
 	let t5;
+	let t6;
 	if ($[0] !== t0) {
-		const { showMonthYearMenus: t6, ...props$1 } = t0;
-		const showMonthYearMenus = t6 === void 0 ? false : t6;
+		const { showMonthYearMenus: t7, ...props$1 } = t0;
+		const showMonthYearMenus = t7 === void 0 ? false : t7;
 		T1 = Calendar;
-		t4 = props$1;
-		t5 = mergeStatefulStyles(props(calendarStyles.root), props$1);
+		t5 = props$1;
+		t6 = mergeStatefulStyles(props(calendarStyles.root), props$1);
 		T0 = CalendarFrame;
-		t3 = showMonthYearMenus;
-		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = props$1.visibleDuration?.months ?? 1;
+		t4 = showMonthYearMenus;
+		if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = props(calendarStyles.months);
-			$[8] = t1;
-		} else t1 = $[8];
+			$[9] = t1;
+		} else t1 = $[9];
 		t2 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
 		$[0] = t0;
 		$[1] = T0;
@@ -60,6 +62,7 @@ function Calendar$1(t0) {
 		$[5] = t3;
 		$[6] = t4;
 		$[7] = t5;
+		$[8] = t6;
 	} else {
 		T0 = $[1];
 		T1 = $[2];
@@ -68,48 +71,54 @@ function Calendar$1(t0) {
 		t3 = $[5];
 		t4 = $[6];
 		t5 = $[7];
+		t6 = $[8];
 	}
-	let t6;
-	if ($[9] !== t1 || $[10] !== t2) {
-		t6 = /* @__PURE__ */ jsx("div", {
+	let t7;
+	if ($[10] !== t1 || $[11] !== t2) {
+		t7 = /* @__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];
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t7;
+	} else t7 = $[12];
 	let t8;
-	if ($[16] !== T1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t7) {
-		t8 = /* @__PURE__ */ jsx(T1, {
-			...t4,
-			...t5,
+	if ($[13] !== T0 || $[14] !== t3 || $[15] !== t4 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			months: t3,
+			showMonthYearMenus: t4,
 			children: t7
 		});
-		$[16] = T1;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t8;
-	} else t8 = $[20];
-	return t8;
+		$[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
+		});
+		$[18] = T1;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
 }
 function _temp(offset) {
-	return /* @__PURE__ */ jsxs(CalendarGrid, {
-		offset,
-		...props(calendarStyles.grid),
-		children: [/* @__PURE__ */ jsx(CalendarGridHeader$1, {}), /* @__PURE__ */ jsx(CalendarGridBody, { children: gridCell })]
+	return /* @__PURE__ */ jsx("div", {
+		...props(calendarStyles.month),
+		children: /* @__PURE__ */ jsxs(CalendarGrid, {
+			offset,
+			...props(calendarStyles.grid),
+			children: [/* @__PURE__ */ jsx(CalendarGridHeader$1, {}), /* @__PURE__ */ jsx(CalendarGridBody, { children: gridCell })]
+		})
 	}, offset.months);
 }
 function cellClassName(state) {

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","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. Each date's own inline margin supplies that room, with the\n// grid's `border-spacing` left at zero, so the circle is the element and the\n// square is the room around it — rather than a 48dp box with a 40dp box\n// 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, 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 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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"}
+{"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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"}

package/dist/components/card/index.js

@@ -5,7 +5,7 @@ import { mergeStyles } from "../../styles/merge.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/card/index.tsx
 const styles = {
 	base: {
@@ -20,6 +20,12 @@ const styles = {
 		kybGjl: "x1hl2dhg",
 		$$css: true
 	},
+	content: {
+		kB7OPa: "x9f619",
+		k1xSpc: "x1lliihq",
+		kAzted: "x1us19tq",
+		$$css: true
+	},
 	elevated: {
 		kWkggS: "x1vnz5z6",
 		kGVxlE: "x19efjv6",
@@ -86,7 +92,7 @@ const interactionStyles = {
 * navigates.
 */
 function Card(t0) {
-	const $ = c(23);
+	const $ = c(26);
 	const { children, interactive: t1, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, padding: t2, render, variant: t3, ...props$1 } = t0;
 	const interactive = t1 === void 0 ? false : t1;
 	const padding = t2 === void 0 ? "default" : t2;
@@ -121,42 +127,52 @@ function Card(t0) {
 	} else t6 = $[9];
 	const t7 = ripple.handlers;
 	let t8;
-	if ($[10] !== children || $[11] !== ripple.surface) {
-		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });
+	if ($[10] !== children || $[11] !== interactive) {
+		t8 = interactive ? /* @__PURE__ */ jsx("span", {
+			className: "x9f619 x1lliihq x1us19tq",
+			children
+		}) : children;
 		$[10] = children;
-		$[11] = ripple.surface;
+		$[11] = interactive;
 		$[12] = t8;
 	} else t8 = $[12];
-	const t9 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== "outlined" && styles.interactiveBoundary, interactive && focus.ring, interactive && interactionStyles[variant]), props$1);
-	let t10;
-	if ($[13] !== props$1 || $[14] !== ripple.handlers || $[15] !== t6 || $[16] !== t8 || $[17] !== t9) {
-		t10 = {
+	let t9;
+	if ($[13] !== ripple.surface || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t8, ripple.surface] });
+		$[13] = ripple.surface;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	const t10 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== "outlined" && styles.interactiveBoundary, interactive && focus.ring, interactive && interactionStyles[variant]), props$1);
+	let t11;
+	if ($[16] !== props$1 || $[17] !== ripple.handlers || $[18] !== t10 || $[19] !== t6 || $[20] !== t9) {
+		t11 = {
 			...props$1,
 			...t6,
 			...t7,
-			children: t8,
-			...t9
+			children: t9,
+			...t10
 		};
-		$[13] = props$1;
-		$[14] = ripple.handlers;
-		$[15] = t6;
-		$[16] = t8;
-		$[17] = t9;
+		$[16] = props$1;
+		$[17] = ripple.handlers;
 		$[18] = t10;
-	} else t10 = $[18];
-	let t11;
-	if ($[19] !== render || $[20] !== t10 || $[21] !== t5) {
-		t11 = {
+		$[19] = t6;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== render || $[23] !== t11 || $[24] !== t5) {
+		t12 = {
 			defaultTagName: t5,
-			props: t10,
+			props: t11,
 			render
 		};
-		$[19] = render;
-		$[20] = t10;
-		$[21] = t5;
-		$[22] = t11;
-	} else t11 = $[22];
-	return useRender(t11);
+		$[22] = render;
+		$[23] = t11;
+		$[24] = t5;
+		$[25] = t12;
+	} else t12 = $[25];
+	return useRender(t12);
 }
 //#endregion
 export { Card as default };

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","FORCED_COLORS","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kHjlTd","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","interactiveBoundary","kVAM5u","ksu8eU","outlined","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.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kHjlTd: \"xj0a0fe\",\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  interactiveBoundary: {\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\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 && variant !== 'outlined' && styles.interactiveBoundary, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps, CardVariant };\nexport default Card;"],"mappings":";;;;;;;;;AA0BA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAK,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,qBAAqB;EACnBC,QAAQ;EACRC,QAAQ;EACRpB,QAAQ;EACRQ,OAAO;CACT;CACAa,UAAU;EACRX,QAAQ;EACRS,QAAQ;EACRC,QAAQ;EACRpB,QAAQ;EACRQ,OAAO;CACT;CACAc,gBAAgB;EACdC,QAAQ;EACRf,OAAO;CACT;CACAgB,aAAa;EACXD,QAAQ;EACRf,OAAO;CACT;AACF;AAgBA,MAAMkB,oBAAoB;CACxBjB,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAa,UAAU;EACRX,QAAQ;EACRF,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAAuB,KAAAC,IAAA;CAAA,MAAAC,IAAAjD,EAAA,EAAA;CAAc,MAAA,EAAAkD,UAAArB,aAAAsB,IAAAC,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAb,SAAAc,IAAAC,QAAAd,SAAAe,IAAA,GAAAC,YAAAb;CAEZ,MAAAnB,cAAAsB,OAAAW,KAAAA,IAAA,QAAAX;CAOA,MAAAP,UAAAc,OAAAI,KAAAA,IAAA,YAAAJ;CAEA,MAAAb,UAAAe,OAAAE,KAAAA,IAAA,aAAAF;CAAoB,IAAAG;CAAA,IAAAd,EAAA,OAAAG,WAAAH,EAAA,OAAAI,iBAAAJ,EAAA,OAAAK,mBAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAO,kBAAAP,EAAA,OAAAQ,aAAA;EAQkBM,KAAA;GAAAX;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOtC;EAACR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAPD,MAAAe,SAAe7D,UAAU0B,aAAakC,EAOrC;CACD,MAAAE,SAAerB,YAAY,SAAS/B,OAAM2B,cAAe3B,OAAMyB;CAE7C,MAAA4B,KAAArC,cAAA,WAAA;CAA8B,IAAAsC;CAAA,IAAAlB,EAAA,OAAApB,eAAAoB,EAAA,OAAAU,QAAA;EAOxCQ,KAAAtC,eAAe8B,WAAWG,KAAAA,IAA1B,EAAAM,MACI,SACI,IAFRN,KAAAA;EAESb,EAAA,KAAApB;EAAAoB,EAAA,KAAAU;EAAAV,EAAA,KAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CACV,MAAAoB,KAAAL,OAAMM;CAAS,IAAAC;CAAA,IAAAtB,EAAA,QAAAC,YAAAD,EAAA,QAAAe,OAAAQ,SAAA;EACRD,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLrB,UACAc,OAAMQ,OAAQ,EAAA,CAAA;EACdvB,EAAA,MAAAC;EAAAD,EAAA,MAAAe,OAAAQ;EAAAvB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CACF,MAAAwB,KAAAnE,YAAYL,MAAaY,OAAMC,MAAOD,OAAOgC,UAAUoB,QAAQpC,eAAehB,OAAMgB,aAAcA,eAAegB,YAAY,cAAchC,OAAMqB,qBAAsBL,eAAexB,MAAKqE,MAAO7C,eAAea,kBAAkBG,QAAQ,GAAGgB,OAAK;CAAC,IAAAc;CAAA,IAAA1B,EAAA,QAAAY,WAAAZ,EAAA,QAAAe,OAAAM,YAAArB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAwB,IAAA;EAdlPE,MAAA;GAAA,GACFd;GAAK,GAKJM;GAES,GACVE;GAAenB,UACRqB;GAGL,GACFE;EACL;EAACxB,EAAA,MAAAY;EAAAZ,EAAA,MAAAe,OAAAM;EAAArB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAU,UAAAV,EAAA,QAAA0B,OAAA1B,EAAA,QAAAiB,IAAA;EAjBcU,MAAA;GAAAC,gBACCX;GAA8BL,OACvCc;GAeNhB;EAEH;EAACV,EAAA,MAAAU;EAAAV,EAAA,MAAA0B;EAAA1B,EAAA,MAAAiB;EAAAjB,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OAnBM7C,UAAUwE,GAmBhB;AAAC"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","FORCED_COLORS","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kHjlTd","kVAEAm","kybGjl","$$css","content","kAzted","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","interactiveBoundary","kVAM5u","ksu8eU","outlined","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","t9","surface","t10","ring","t11","t12","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.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"x7giv3\",\n    kHjlTd: \"xj0a0fe\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  content: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    kAzted: \"x1us19tq\",\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  interactiveBoundary: {\n    kVAM5u: \"x1ylmb6m\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\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          {interactive ? <span className=\"x9f619 x1lliihq x1us19tq\">{children}</span> : children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && variant !== 'outlined' && styles.interactiveBoundary, 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/carousel/index.js

@@ -2,9 +2,9 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { radii } from "../../tokens/design.tokens.stylex.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { useMessages } from "../../i18n/index.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
-import { useMessages } from "../../i18n/index.js";
 import { arrange, placements } from "../../carousel/arrangement.js";
 import IconButton from "../icon-button/index.js";
 import { c } from "react/compiler-runtime";

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

@@ -5,6 +5,11 @@ type CheckboxProps = {
   /**
    * The label, beside the box. A checkbox that a row labels some other way
    * leaves it out and passes `aria-label` instead.
+   *
+   * A link or a button in it acts on its own, as in a native label: a press
+   * or Enter on "the terms" in "I agree to the terms" follows the link and
+   * leaves the checkbox as it was. A press anywhere else in the label
+   * toggles it.
    */
   children?: ReactNode;
   /**
@@ -30,6 +35,10 @@ type CheckboxProps = {
  * draws the dash for a box that stands for a partly selected set. Inside a
  * `CheckboxGroup` it takes its `value` and the group's selection instead.
  *
+ * `isRequired` ends the label in the asterisk every required field's label
+ * ends in. Inside a `CheckboxGroup` the group's label carries it instead,
+ * since the group is what must have a choice made in it.
+ *
  * The call site's `className` and `style` land on the field as a whole,
  * which is the element a layout positions.
  */

package/dist/components/checkbox/index.js

@@ -4,13 +4,14 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { controlStyles } from "../../control/styles.js";
-import { ControlLabel } from "../../control/index.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
+import { controlStyles } from "../../control/styles.js";
+import { ControlLabel } from "../../control/index.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CheckboxButton, CheckboxField } from "react-aria-components";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from "react-aria-components";
 //#region src/components/checkbox/index.tsx
 const styles = {
 	box: {
@@ -108,13 +109,14 @@ const pressedLayers = {
 		$$css: true
 	}
 };
-function buttonContent(children, ripple) {
+function buttonContent(children, ripple, inGroup) {
 	return (state) => {
+		const required = state.isRequired && !inGroup;
 		const marked = state.isSelected || state.isIndeterminate;
 		const interactive = !state.isDisabled && !state.isReadOnly;
 		const tone = state.isInvalid ? "error" : marked ? "marked" : "unmarked";
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { 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.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
@@ -122,6 +124,7 @@ function buttonContent(children, ripple) {
 				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null
 			}), interactive ? ripple.surface : null]
 		}), /* @__PURE__ */ jsx(ControlLabel, {
+			isRequired: required,
 			state,
 			children
 		})] });
@@ -134,14 +137,20 @@ function buttonContent(children, ripple) {
 * draws the dash for a box that stands for a partly selected set. Inside a
 * `CheckboxGroup` it takes its `value` and the group's selection instead.
 *
+* `isRequired` ends the label in the asterisk every required field's label
+* ends in. Inside a `CheckboxGroup` the group's label carries it instead,
+* since the group is what must have a choice made in it.
+*
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions.
 */
 function Checkbox(t0) {
-	const $ = c(19);
+	const $ = c(21);
 	const { children, description, error, ...props$1 } = t0;
 	const ripple = useRipple();
 	const validationBehavior = useFieldValidationBehavior();
+	const inGroup = useContext(CheckboxGroupStateContext) !== null;
+	const reachable = !inGroup && (props$1.isRequired === true || props$1.validate !== void 0 || props$1.name !== void 0);
 	const T0 = CheckboxField;
 	let t1;
 	if ($[0] !== error) {
@@ -151,42 +160,45 @@ function Checkbox(t0) {
 	} else t1 = $[1];
 	const t2 = mergeStatefulStyles(props(controlStyles.field), props$1);
 	let t3;
-	if ($[2] !== children || $[3] !== ripple) {
-		t3 = buttonContent(children, ripple);
+	if ($[2] !== children || $[3] !== inGroup || $[4] !== ripple) {
+		t3 = buttonContent(children, ripple, inGroup);
 		$[2] = children;
-		$[3] = ripple;
-		$[4] = t3;
-	} else t3 = $[4];
+		$[3] = inGroup;
+		$[4] = ripple;
+		$[5] = t3;
+	} else t3 = $[5];
 	let t4;
-	if ($[5] !== t3) {
+	if ($[6] !== t3) {
 		t4 = /* @__PURE__ */ jsx(CheckboxButton, {
 			className: "xjp7ctv",
 			children: t3
 		});
-		$[5] = t3;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
 	let t5;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = props(controlStyles.messages);
-		$[7] = t5;
-	} else t5 = $[7];
+		$[8] = t5;
+	} else t5 = $[8];
 	let t6;
-	if ($[8] !== description || $[9] !== error) {
+	if ($[9] !== description || $[10] !== error || $[11] !== reachable) {
 		t6 = /* @__PURE__ */ jsx("div", {
 			...t5,
 			children: /* @__PURE__ */ jsx(FieldMessage, {
 				description,
 				error,
-				inset: false
+				inset: false,
+				reserve: reachable
 			})
 		});
-		$[8] = description;
-		$[9] = error;
-		$[10] = t6;
-	} else t6 = $[10];
+		$[9] = description;
+		$[10] = error;
+		$[11] = reachable;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[11] !== T0 || $[12] !== props$1 || $[13] !== t1 || $[14] !== t2 || $[15] !== t4 || $[16] !== t6 || $[17] !== validationBehavior) {
+	if ($[13] !== T0 || $[14] !== props$1 || $[15] !== t1 || $[16] !== t2 || $[17] !== t4 || $[18] !== t6 || $[19] !== validationBehavior) {
 		t7 = /* @__PURE__ */ jsxs(T0, {
 			isInvalid: t1,
 			validationBehavior,
@@ -194,15 +206,15 @@ function Checkbox(t0) {
 			...t2,
 			children: [t4, t6]
 		});
-		$[11] = T0;
-		$[12] = props$1;
-		$[13] = t1;
-		$[14] = t2;
-		$[15] = t4;
-		$[16] = t6;
-		$[17] = validationBehavior;
-		$[18] = t7;
-	} else t7 = $[18];
+		$[13] = T0;
+		$[14] = props$1;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = validationBehavior;
+		$[20] = t7;
+	} else t7 = $[20];
 	return t7;
 }
 //#endregion