@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","t8","Symbol","for","group","t9","input","t10","t11","t12","popup","popover","t13","popupDialog","ring","t14","t15","t16","RACButton","stylex.props","DatePicker","_c","props","RACDatePicker","RACGroup","RACDateInput","RACDialog","Calendar","RACPopover"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws: below the breakpoint the picker is a dialog,\n// centred over a scrim, and `Sheet` changes presentation at the same width.\n// It is done in CSS rather than by rendering a different tree: a 360dp\n// calendar anchored to a field is unreachable at 375px, and a modal that\n// stayed centred on a desktop would cover a form for no reason. `Sheet`\n// settles its own swap the same way, and doing it twice in two different\n// ways is how the two would drift. The styles are in `src/styles/picker.ts`.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\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   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line,\n    // which is where Select and ComboBox put their chevron. The slot\n    // cancels the box's top padding and stretches to its full height, so\n    // it centres the 40dp trigger in the box; on the line the trigger\n    // was taller than the row that held it and hung past the underline,\n    // and the segments centred on it rather than on their own line.\n    //\n    // React Aria's `DatePicker` is what gives the trigger its press\n    // behaviour, through context, so the slot reaches it as well as the\n    // group did.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","showMonthYearMenus","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","isRequired","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","popup","popover","t14","popupDialog","ring","t15","t16","t17","RACButton","stylex.props","DatePicker","_c","props","RACDatePicker","RACGroup","RACDateInput","RACDialog","Calendar","RACPopover"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws: below the breakpoint the picker is a dialog,\n// centred over a scrim, and `Sheet` changes presentation at the same width.\n// It is done in CSS rather than by rendering a different tree: a 360dp\n// calendar anchored to a field is unreachable at 375px, and a modal that\n// stayed centred on a desktop would cover a form for no reason. `Sheet`\n// settles its own swap the same way, and doing it twice in two different\n// ways is how the two would drift. The styles are in `src/styles/picker.ts`.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\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   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * Whether the calendar's header draws the month and the year as menu\n   * buttons, each opening a list of them in the grid's place — see\n   * `Calendar`.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * Left out, React Aria names it in the reader's locale — \"Calendar\" in\n   * English, followed by the field's own label.\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string | undefined) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  showMonthYearMenus = false,\n  triggerLabel,\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated isRequired={props.isRequired} label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line,\n    // which is where Select and ComboBox put their chevron. The slot\n    // cancels the box's top padding and stretches to its full height, so\n    // it centres the 40dp trigger in the box; on the line the trigger\n    // was taller than the row that held it and hung past the underline,\n    // and the segments centred on it rather than on their own line.\n    //\n    // React Aria's `DatePicker` is what gives the trigger its press\n    // behaviour, through context, so the slot reaches it as well as the\n    // group did.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} showMonthYearMenus={showMonthYearMenus} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}

package/dist/components/date-range-picker/index.d.ts

@@ -43,11 +43,19 @@ type DateRangePickerProps$1<T extends DateValue = DateValue> = Omit<DateRangePic
    * @default '–'
    */
   separator?: string;
+  /**
+   * Whether the calendar's header draws the month and the year as menu
+   * buttons, each opening a list of them in the grid's place — see
+   * `RangeCalendar`.
+   * @default false
+   */
+  showMonthYearMenus?: boolean;
   /** A function may compute the style from the picker's render state. */
   style?: DateRangePickerProps<T>['style'];
   /**
    * What the button that opens the calendar is called, for a screen reader.
-   * @default 'Choose a date range'
+   * Left out, React Aria names it in the reader's locale — "Calendar" in
+   * English, followed by the field's own label.
    */
   triggerLabel?: string;
   /**
@@ -82,7 +90,7 @@ type DateRangePickerProps$1<T extends DateValue = DateValue> = Omit<DateRangePic
  * The call site's `className` and `style` land on the picker as a whole,
  * which is the element a layout positions.
  */
-declare function DateRangePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, separator, triggerLabel, variant, ...props }: DateRangePickerProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function DateRangePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, separator, showMonthYearMenus, triggerLabel, variant, ...props }: DateRangePickerProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type DateRangePickerProps$1 as DateRangePickerProps, DateRangePicker$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/date-range-picker/index.js

@@ -48,12 +48,12 @@ function calendarTrigger(triggerLabel) {
 * which is the element a layout positions.
 */
 function DateRangePicker$1(t0) {
-	const $ = c(38);
-	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, separator: t3, triggerLabel: t4, variant: t5, ...props$1 } = t0;
+	const $ = c(40);
+	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, separator: t3, showMonthYearMenus: t4, triggerLabel, variant: t5, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	const separator = t3 === void 0 ? "–" : t3;
-	const triggerLabel = t4 === void 0 ? "Choose a date range" : t4;
+	const showMonthYearMenus = t4 === void 0 ? false : t4;
 	const variant = t5 === void 0 ? "filled" : t5;
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = DateRangePicker;
@@ -64,143 +64,150 @@ function DateRangePicker$1(t0) {
 		$[1] = t6;
 	} else t6 = $[1];
 	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	let t8;
+	const t8 = props$1.isRequired;
+	let t9;
 	if ($[2] !== triggerLabel) {
-		t8 = calendarTrigger(triggerLabel);
+		t9 = calendarTrigger(triggerLabel);
 		$[2] = triggerLabel;
-		$[3] = t8;
-	} else t8 = $[3];
-	let t9;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = props(picker.group);
-		$[4] = t9;
-	} else t9 = $[4];
+		$[3] = t9;
+	} else t9 = $[3];
 	let t10;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = props(picker.group);
+		$[4] = t10;
+	} else t10 = $[4];
+	let t11;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(DateInput, {
+		t11 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "start",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[5] = t10;
-	} else t10 = $[5];
-	let t11;
+		$[5] = t11;
+	} else t11 = $[5];
+	let t12;
 	if ($[6] !== separator) {
-		t11 = /* @__PURE__ */ jsx("span", {
+		t12 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej",
 			children: separator
 		});
 		$[6] = separator;
-		$[7] = t11;
-	} else t11 = $[7];
-	let t12;
+		$[7] = t12;
+	} else t12 = $[7];
+	let t13;
 	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(DateInput, {
+		t13 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "end",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[8] = t12;
-	} else t12 = $[8];
-	let t13;
-	if ($[9] !== t11) {
-		t13 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsxs(Group, {
-			...t9,
+		$[8] = t13;
+	} else t13 = $[8];
+	let t14;
+	if ($[9] !== t12) {
+		t14 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsxs(Group, {
+			...t10,
 			children: [
-				t10,
 				t11,
-				t12
+				t12,
+				t13
 			]
 		}) });
-		$[9] = t11;
-		$[10] = t13;
-	} else t13 = $[10];
-	let t14;
-	if ($[11] !== floatingLabel || $[12] !== label || $[13] !== leadingIcon || $[14] !== t13 || $[15] !== t8 || $[16] !== variant) {
-		t14 = /* @__PURE__ */ jsx(FieldBox, {
+		$[9] = t12;
+		$[10] = t14;
+	} else t14 = $[10];
+	let t15;
+	if ($[11] !== floatingLabel || $[12] !== label || $[13] !== leadingIcon || $[14] !== props$1.isRequired || $[15] !== t14 || $[16] !== t9 || $[17] !== variant) {
+		t15 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
+			isRequired: t8,
 			label,
 			leading: leadingIcon,
-			trailing: t8,
+			trailing: t9,
 			variant,
-			children: t13
+			children: t14
 		});
 		$[11] = floatingLabel;
 		$[12] = label;
 		$[13] = leadingIcon;
-		$[14] = t13;
-		$[15] = t8;
-		$[16] = variant;
-		$[17] = t14;
-	} else t14 = $[17];
-	let t15;
-	if ($[18] !== description || $[19] !== error) {
-		t15 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[14] = props$1.isRequired;
+		$[15] = t14;
+		$[16] = t9;
+		$[17] = variant;
+		$[18] = t15;
+	} else t15 = $[18];
+	let t16;
+	if ($[19] !== description || $[20] !== error) {
+		t16 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[18] = description;
-		$[19] = error;
-		$[20] = t15;
-	} else t15 = $[20];
-	let t16;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t16 = props(overlay.popup, picker.popover);
+		$[19] = description;
+		$[20] = error;
 		$[21] = t16;
 	} else t16 = $[21];
 	let t17;
 	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = props(overlay.popupDialog, focus.ring);
+		t17 = props(overlay.popup, picker.popover);
 		$[22] = t17;
 	} else t17 = $[22];
 	let t18;
-	if ($[23] !== label) {
-		t18 = /* @__PURE__ */ jsx(Dialog, {
-			...t17,
-			children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
-		});
-		$[23] = label;
-		$[24] = t18;
-	} else t18 = $[24];
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = props(overlay.popupDialog, focus.ring);
+		$[23] = t18;
+	} else t18 = $[23];
 	let t19;
-	if ($[25] !== container || $[26] !== t18) {
-		t19 = /* @__PURE__ */ jsx(Popover, {
-			UNSTABLE_portalContainer: container,
-			...t16,
-			children: t18
+	if ($[24] !== label || $[25] !== showMonthYearMenus) {
+		t19 = /* @__PURE__ */ jsx(Dialog, {
+			...t18,
+			children: /* @__PURE__ */ jsx(RangeCalendar$1, {
+				"aria-label": label,
+				showMonthYearMenus
+			})
 		});
-		$[25] = container;
-		$[26] = t18;
-		$[27] = t19;
-	} else t19 = $[27];
+		$[24] = label;
+		$[25] = showMonthYearMenus;
+		$[26] = t19;
+	} else t19 = $[26];
 	let t20;
-	if ($[28] !== T0 || $[29] !== isDisabled || $[30] !== props$1 || $[31] !== t14 || $[32] !== t15 || $[33] !== t19 || $[34] !== t6 || $[35] !== t7 || $[36] !== validationBehavior) {
-		t20 = /* @__PURE__ */ jsxs(T0, {
+	if ($[27] !== container || $[28] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Popover, {
+			UNSTABLE_portalContainer: container,
+			...t17,
+			children: t19
+		});
+		$[27] = container;
+		$[28] = t19;
+		$[29] = t20;
+	} else t20 = $[29];
+	let t21;
+	if ($[30] !== T0 || $[31] !== isDisabled || $[32] !== props$1 || $[33] !== t15 || $[34] !== t16 || $[35] !== t20 || $[36] !== t6 || $[37] !== t7 || $[38] !== validationBehavior) {
+		t21 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t6,
 			validationBehavior,
 			...props$1,
 			...t7,
 			children: [
-				t14,
 				t15,
-				t19
+				t16,
+				t20
 			]
 		});
-		$[28] = T0;
-		$[29] = isDisabled;
-		$[30] = props$1;
-		$[31] = t14;
-		$[32] = t15;
-		$[33] = t19;
-		$[34] = t6;
-		$[35] = t7;
-		$[36] = validationBehavior;
-		$[37] = t20;
-	} else t20 = $[37];
-	return t20;
+		$[30] = T0;
+		$[31] = isDisabled;
+		$[32] = props$1;
+		$[33] = t15;
+		$[34] = t16;
+		$[35] = t20;
+		$[36] = t6;
+		$[37] = t7;
+		$[38] = validationBehavior;
+		$[39] = t21;
+	} else t21 = $[39];
+	return t21;
 }
 //#endregion
 export { DateRangePicker$1 as default };

package/dist/components/date-range-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20","RACButton","stylex.props","DateRangePicker","_c","props","RACDateRangePicker","RACDateInput","RACGroup","RACDialog","RangeCalendar","RACPopover"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\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   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","showMonthYearMenus","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","isRequired","t9","t10","Symbol","for","group","t11","input","t12","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","ring","t19","t20","t21","RACButton","stylex.props","DateRangePicker","_c","props","RACDateRangePicker","RACDateInput","RACGroup","RACDialog","RangeCalendar","RACPopover"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\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   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /**\n   * Whether the calendar's header draws the month and the year as menu\n   * buttons, each opening a list of them in the grid's place — see\n   * `RangeCalendar`.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * Left out, React Aria names it in the reader's locale — \"Calendar\" in\n   * English, followed by the field's own label.\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string | undefined) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  showMonthYearMenus = false,\n  triggerLabel,\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T> & RefAttributes<HTMLDivElement>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated isRequired={props.isRequired} label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} showMonthYearMenus={showMonthYearMenus} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

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

@@ -77,5 +77,5 @@ type DialogContentProps = {
 } & Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;
 type DialogTitleProps = HeadingProps;
 //#endregion
-export { type DialogContentProps, type DialogProps$1 as DialogProps, type DialogTitleProps, Dialog$1 as default };
+export { DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps$1 as DialogProps, DialogTitle, type DialogTitleProps, Dialog$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.js

@@ -154,7 +154,7 @@ function DialogContent(t0) {
 	} else t2 = $[9];
 	let t3;
 	if ($[10] !== className || $[11] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l" }, {
 			className,
 			style
 		});
@@ -279,6 +279,6 @@ Dialog$1.Footer = DialogFooter;
 Dialog$1.Header = DialogHeader;
 Dialog$1.Title = DialogTitle;
 //#endregion
-export { Dialog$1 as default };
+export { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Dialog$1 as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","useRef","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useScrollable","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","Omit","children","t0","$","props","t1","DialogBody","ref","scrollable","undefined","modalBodyRing","t2","DialogContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRef } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// 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)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={ref} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","useRef","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useScrollable","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","Omit","children","t0","$","props","t1","DialogBody","ref","scrollable","undefined","modalBodyRing","t2","DialogContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRef } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// 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)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. Open\n * state is React Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody(props: HTMLAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={ref} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n    }, {\n      className,\n      style\n    })}>\n        <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </RACDialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n  }, props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element\n   * inside it, or the dialog renders outside the theme and falls back to\n   * the tokens' `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":";;;;;;;;;;AA+CA,MAAMmC,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRf,QAAQ;EACRgB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;AACF;;;;;;;;;;;;;;;AAmBA,SAAAjC,SAAAwC,IAAA;CAAA,MAAAC,IAAA3D,EAAA,CAAA;CAAA,IAAAyD;CAAA,IAAAG;CAAA,IAAAD,EAAA,OAAAD,IAAA;EAAgB,CAAA,CAAAD,UAAA,GAAAG,SAAAF;EAGFC,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAC;CAAA,OAAA;EAAAH,WAAAE,EAAA;EAAAC,QAAAD,EAAA;CAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAF,YAAAE,EAAA,OAAAC,OAAA;EACLC,KAAA,oBAAC,eAAD;GAAc,GAAKD;GAAQH;EAAb,CAAA;EAAsCE,EAAA,KAAAF;EAAAE,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAApDE;AAAoD;AAE7D,SAAAC,WAAAF,SAAA;CAAA,MAAAD,IAAA3D,EAAA,CAAA;CACE,MAAA+D,MAAYlD,OAAuB,IAAI;CAO7B,MAAA6C,KAHStC,cAAc2C,GAGvBC,IAAA,IAAAC,KAAAA;CAA0B,IAAAJ;CAAA,IAAAF,EAAA,OAAAC,SAAA;EAA2BC,KAAAvC,YAAYV,MAAasB,OAAMC,MAAOZ,QAAO2C,aAAc,GAAGN,OAAK;EAACD,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAC,WAAAD,EAAA,OAAAD,MAAAC,EAAA,OAAAE,IAAA;EAF5HM,KAAA,oBAAA,OAAA;GAEG,UAAAT;GAA0B,GAAME;GAAYG;GAAG,GAAMF;EAAoE,CAAA;EAAIF,EAAA,KAAAC;EAAAD,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFhIQ;AAEgI;;;;;;;;;;;;;;;;;AAmBzI,SAAAC,cAAAV,IAAA;CAAA,MAAAC,IAAA3D,EAAA,EAAA;CAAA,IAAAyD;CAAA,IAAAY;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAX;CAAA,IAAAG;CAAA,IAAAS;CAAA,IAAAX;CAAA,IAAAF,EAAA,OAAAD,IAAA;EAAuB,CAAA,CAAAD,UAAAY,WAAAC,WAAAG,eAAAZ,IAAAU,2BAAAR,KAAAS,OAAA,GAAAZ,WAAAF;EAS8BC,EAAA,KAAAD;EAAAC,EAAA,KAAAF;EAAAE,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAC;EAAAD,EAAA,KAAAI;EAAAJ,EAAA,KAAAa;EAAAb,EAAA,KAAAE;CAAA,OAAA;EAAAJ,WAAAE,EAAA;EAAAU,YAAAV,EAAA;EAAAW,YAAAX,EAAA;EAAAY,4BAAAZ,EAAA;EAAAC,UAAAD,EAAA;EAAAI,MAAAJ,EAAA;EAAAa,QAAAb,EAAA;EAAAE,KAAAF,EAAA;CAAA;CALnD,MAAAc,gBAAAZ,OAAAI,KAAAA,IAAA,OAAAJ;CAAoB,IAAAM;CAAA,IAAAR,EAAA,OAAAe,OAAAC,IAAA,2BAAA,GAAA;EAQqBR,KAAAvD,MAAaW,QAAOqD,OAAQ1C,OAAMkB,MAAO;EAACO,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAU,aAAAV,EAAA,QAAAa,OAAA;EAInEK,KAAAxD,oBAAoB,EAAAgD,WACrB,+PACb,GAAG;GAAAA;GAAAG;EAGH,CAAC;EAACb,EAAA,MAAAU;EAAAV,EAAA,MAAAa;EAAAb,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAe,OAAAC,IAAA,2BAAA,GAAA;EAC4BG,KAAAlE,MAAaW,QAAOwD,WAAY;EAACpB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,QAAAF,YAAAE,EAAA,QAAAC,SAAA;EAA3DoB,KAAA,oBAACmB,QAAD;GAAU,GAAKvC;GAAK,GAAMkB;GACvBrB;EADO,CAAA;EAEEE,EAAA,MAAAF;EAAAE,EAAA,MAAAC;EAAAD,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAI,OAAAJ,EAAA,QAAAkB,MAAAlB,EAAA,QAAAqB,IAAA;EAXdC,KAAA,oBAAC,OAAD;GAGGlB;GAAG,GAAMc;GAMVG,UAAAA;EATI,CAAA;EAYErB,EAAA,MAAAI;EAAAJ,EAAA,MAAAkB;EAAAlB,EAAA,MAAAqB;EAAArB,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAW,aAAAX,EAAA,QAAAc,iBAAAd,EAAA,QAAAY,6BAAAZ,EAAA,QAAAsB,IAAA;EAfLC,KAAA,oBAAC,cAAD;GAA6BT;GAA0CF;GAEpDD,0BAAAA;GAAS,GAAMH;GACrCc,UAAAA;EAHgB,CAAA;EAgBHtB,EAAA,MAAAW;EAAAX,EAAA,MAAAc;EAAAd,EAAA,MAAAY;EAAAZ,EAAA,MAAAsB;EAAAtB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CAAA,OAhBVuB;AAgBU;AAEnB,SAAAC,aAAAvB,OAAA;CAAA,MAAAD,IAAA3D,EAAA,CAAA;CAAA,IAAA0D;CAAA,IAAAC,EAAA,OAAAC,OAAA;EAC6BF,KAAApC,YAAY,EAAA+C,WAC1B,iJACb,GAAGT,KAAK;EAACD,EAAA,KAAAC;EAAAD,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAC,SAAAD,EAAA,OAAAD,IAAA;EAFFG,KAAA,oBAAA,OAAA;GAEM,GAFGD;GAAK,GAAMF;EAElB,CAAA;EAAIC,EAAA,KAAAC;EAAAD,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;AAEf,SAAAuB,aAAAxB,OAAA;CAAA,MAAAD,IAAA3D,EAAA,CAAA;CAAA,IAAA0D;CAAA,IAAAC,EAAA,OAAAC,OAAA;EAC6BF,KAAApC,YAAY,EAAA+C,WAC1B,+IACb,GAAGT,KAAK;EAACD,EAAA,KAAAC;EAAAD,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAC,SAAAD,EAAA,OAAAD,IAAA;EAFFG,KAAA,oBAAA,OAAA;GAEM,GAFGD;GAAK,GAAMF;EAElB,CAAA;EAAIC,EAAA,KAAAC;EAAAD,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;;AAQf,SAAAwB,YAAAzB,OAAA;CAAA,MAAAD,IAAA3D,EAAA,CAAA;CAAA,IAAA0D;CAAA,IAAAC,EAAA,OAAAC,OAAA;EAC8CF,KAAApC,YAAY,EAAA+C,WAC3C,+GACb,GAAGT,KAAK;EAACD,EAAA,KAAAC;EAAAD,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAC,SAAAD,EAAA,OAAAD,IAAA;EAFFG,KAAA,oBAAC,SAAD;GAAc,MAAA;GAAO,GAAKD;GAAK,GAAMF;EAEnC,CAAA;EAAIC,EAAA,KAAAC;EAAAD,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;AAEf3C,SAAOoE,OAAOxB;AACd5C,SAAOqE,UAAUnB;AACjBlD,SAAOsE,SAASL;AAChBjE,SAAOuE,SAASL;AAChBlE,SAAOwE,QAAQL"}

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

@@ -64,5 +64,5 @@ declare function DisclosureHeader({ children, headingLevel, leading, supporting
  */
 declare function DisclosurePanel$1({ children, ...props }: DisclosurePanelProps$1): import("react").JSX.Element;
 //#endregion
-export { type DisclosureHeaderProps, type DisclosurePanelProps$1 as DisclosurePanelProps, type DisclosureProps$1 as DisclosureProps, Disclosure$1 as default };
+export { DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel$1 as DisclosurePanel, type DisclosurePanelProps$1 as DisclosurePanelProps, type DisclosureProps$1 as DisclosureProps, Disclosure$1 as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/disclosure/index.js

@@ -17,8 +17,8 @@ const styles = { header: {
 } };
 function chevronFor(isExpanded) {
 	return /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
-		0: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
-		1: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
+		0: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7" },
+		1: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u x1iffjtl" }
 	}[!!isExpanded << 0] });
 }
 /**
@@ -154,11 +154,11 @@ function DisclosurePanel$1(t0) {
 	} else t1 = $[0];
 	const t2 = t1[!!(state?.isExpanded === true) << 0];
 	const T0 = DisclosurePanel;
-	const t3 = mergeStatefulStyles({ className: "x9f619 x2lwn1j xb3r6kr" }, props);
+	const t3 = mergeStatefulStyles({ className: "x9f619 x2lwn1j x7giv3 x1hm618n" }, props);
 	let t4;
 	if ($[1] !== children) {
 		t4 = /* @__PURE__ */ jsx("div", {
-			className: "x9f619 xzfxn0k x790zyz",
+			className: "x9f619 xzfxn0k x25398y x790zyz",
 			children
 		});
 		$[1] = children;
@@ -190,7 +190,7 @@ function DisclosurePanel$1(t0) {
 	return t6;
 }
 function headerClassName(supporting) {
-	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== void 0 && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? "";
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== void 0 && rowStyles.twoLine, state.isHovered && rowStyles.hovered, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled).className ?? "";
 }
 function headerContent(children, leading, supporting, isExpanded, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RowContent, {
@@ -204,6 +204,6 @@ function headerContent(children, leading, supporting, isExpanded, ripple) {
 Disclosure$1.Header = DisclosureHeader;
 Disclosure$1.Panel = DisclosurePanel$1;
 //#endregion
-export { Disclosure$1 as default };
+export { DisclosureHeader, DisclosurePanel$1 as DisclosurePanel, Disclosure$1 as default };
 
 //# sourceMappingURL=index.js.map