@kanso-labs/kanso-ui 0.26.4 → 0.26.6

package/dist/components/color-slider/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
 import { thumbClassName } from "../../styles/color.js";
 import { chequer } from "../../styles/chequer.js";
@@ -8,6 +9,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorSlider, ColorThumb, SliderOutput, SliderTrack } from "react-aria-components";
 //#region src/components/color-slider/index.tsx
 const styles = {
+	root: {
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
 	trackGround: {
 		kZKoxP: "xlup9mm",
 		kaIpWk: "x1xdvaa9",
@@ -52,14 +57,14 @@ function ColorSlider$1(t0) {
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		const { isDisabled: t4, label: t5, showValue: t6, ...props } = t0;
+		const { isDisabled: t4, label: t5, showValue: t6, ...props$1 } = t0;
 		label = t5;
 		isDisabled = t4 === void 0 ? false : t4;
 		showValue = t6 === void 0 ? true : t6;
 		T0 = ColorSlider;
 		t1 = isDisabled;
-		t2 = props;
-		t3 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" }, props);
+		t2 = props$1;
+		t3 = mergeStatefulStyles(props(groupStyles.root, styles.root), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = isDisabled;
@@ -80,7 +85,7 @@ function ColorSlider$1(t0) {
 	let t4;
 	if ($[8] !== label) {
 		t4 = label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
-			className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+			variant: "group",
 			children: label
 		});
 		$[8] = label;

package/dist/components/color-slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ColorSliderProps","RACColorSliderProps","stylex","ColorSlider","RACColorSlider","ColorThumb","RACColorThumb","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","FieldLabel","chequer","thumbClassName","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","typography","styles","trackGround","kZKoxP","kaIpWk","kB7OPa","kzqmXN","kqGvvJ","$$css","trackGroundDisabled","kSiTet","Omit","className","label","showValue","style","t0","$","_c","T0","isDisabled","t1","t2","t3","t4","t5","t6","props","undefined","t7","ground","t8","Symbol","for","0","1","t9","t10","t11","t12","t13"],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ColorSliderProps","RACColorSliderProps","stylex","ColorSlider","RACColorSlider","ColorThumb","RACColorThumb","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","FieldLabel","groupStyles","chequer","thumbClassName","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","typography","styles","root","kzqmXN","$$css","trackGround","kZKoxP","kaIpWk","kB7OPa","kqGvvJ","trackGroundDisabled","kSiTet","Omit","className","label","showValue","style","t0","$","_c","T0","isDisabled","t1","t2","t3","t4","t5","t6","props","undefined","t7","ground","t8","Symbol","for","0","1","t9","t10","t11","t12","t13"],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { chequer } from '../../styles/chequer';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  root: {\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root), props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":"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"}

package/dist/components/combo-box/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldInput, FieldMessage, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
@@ -11,17 +12,34 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, ComboBox, ComboBoxStateContext, ComboBoxValue, Popover } from "react-aria-components";
 //#region src/components/combo-box/index.tsx
 const TOGGLE = /* @__PURE__ */ jsx(ComboToggle, {});
-const styles = { list: {
-	kWkggS: "x1vnz5z6",
-	kaIpWk: "x1tfhd1",
-	kzqmXN: "xlvufjm",
-	kskxy: "xedcshv",
-	ks0D6T: "x1x1rfll",
-	k7Eaqz: "xeuugli",
-	kORKVm: "x1odjw0f",
-	k8WAf4: "x1cmllll",
-	$$css: true
-} };
+const styles = {
+	list: {
+		kWkggS: "x1vnz5z6",
+		kaIpWk: "x1tfhd1",
+		kzqmXN: "xlvufjm",
+		kskxy: "xedcshv",
+		ks0D6T: "x1x1rfll",
+		k7Eaqz: "xeuugli",
+		kORKVm: "x1odjw0f",
+		k8WAf4: "x1cmllll",
+		$$css: true
+	},
+	toggle: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "xxk0z11",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1heor9g",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kzqmXN: "xvy4d1p",
+		kjj79g: "xl56j7k",
+		kmVPX3: "x1717udv",
+		$$css: true
+	}
+};
 /**
 * The chosen options, drawn before the input when more than one may be
 * chosen. The chrome's `FieldValue` is the styled element and React Aria's
@@ -194,27 +212,32 @@ function ComboBox$1(t0) {
 * collection by walking the children and a function is opaque to that walk.
 */
 function ComboToggle() {
-	const $ = c(3);
+	const $ = c(4);
 	const state = useContext(ComboBoxStateContext);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = {
+		t0 = props(styles.toggle, focus.ring);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
 			0: { className: "xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln" },
 			1: { className: "xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d" }
 		};
-		$[0] = t0;
-	} else t0 = $[0];
-	const t1 = t0[!!(state?.isOpen === true) << 0];
-	let t2;
-	if ($[1] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Button, {
-			className: "x6s0dn4 xjbqb8w xxk0z11 x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x3nfvp2 xvy4d1p xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv",
-			children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...t1 })
-		});
 		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = t1[!!(state?.isOpen === true) << 0];
+	let t3;
+	if ($[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			...t0,
+			children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...t2 })
+		});
 		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
 }
 //#endregion
 export { ComboBox$1 as default };

package/dist/components/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton className=\"x6s0dn4 xjbqb8w xxk0z11 x3y1ksm xc342km x9f619 x1heor9g x1ypdohk x3nfvp2 xvy4d1p xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CalendarGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import Calendar$1 from "../calendar/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
@@ -113,7 +114,7 @@ function DatePicker$1(t0) {
 	} else t13 = $[16];
 	let t14;
 	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = props(overlay.popupDialog);
+		t14 = props(overlay.popupDialog, focus.ring);
 		$[17] = t14;
 	} else t14 = $[17];
 	let t15;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","t0","$","_c","t1","isDisabled","t2","t3","t4","props","undefined","validationBehavior","T0","t5","t6","root","t7","Symbol","for","group","t8","input","t9","triggerGlyph","t10","t11","t12","t13","popup","popover","t14","popupDialog","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\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 and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends 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  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\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  /** An icon at the box's leading end. */\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?: 'filled' | 'outlined';\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  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>) {\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} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\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":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","t0","$","_c","t1","isDisabled","t2","t3","t4","props","undefined","validationBehavior","T0","t5","t6","root","t7","Symbol","for","group","t8","input","t9","triggerGlyph","t10","t11","t12","t13","popup","popover","t14","popupDialog","ring","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { FieldBox, FieldMessage, FieldValue } 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 and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends 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  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\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  /** An icon at the box's leading end. */\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?: 'filled' | 'outlined';\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  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>) {\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} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...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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"}

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

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CalendarGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
@@ -152,7 +153,7 @@ function DateRangePicker$1(t0) {
 	} else t17 = $[22];
 	let t18;
 	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = props(overlay.popupDialog);
+		t18 = props(overlay.popupDialog, focus.ring);
 		$[23] = t18;
 	} else t18 = $[23];
 	let t19;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","Symbol","for","group","t9","input","t10","t11","t12","triggerGlyph","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\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> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\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  /** An icon at the box's leading end. */\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?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\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  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>) {\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} variant={variant}>\n        <FieldValue>\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            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\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":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","Symbol","for","group","t9","input","t10","t11","t12","triggerGlyph","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","ring","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { FieldBox, FieldMessage, FieldValue } 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> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\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  /** An icon at the box's leading end. */\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?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\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  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>) {\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} variant={variant}>\n        <FieldValue>\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            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...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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"}

package/dist/components/dialog/index.js

@@ -120,7 +120,7 @@ function DialogContent(t0) {
 	} else t2 = $[8];
 	let t3;
 	if ($[9] !== className || $[10] !== style) {
-		t3 = mergeStatefulStyles({ className: "x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
+		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr" }, {
 			className,
 			style
 		});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\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// 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  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  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x\"\n  }, 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.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\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 {...mergeStatefulStyles({\n      className: \"x1n1nwrg xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba 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.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\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  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","scaleIn","slideInFromBottom","styles","centre","kGNEyG","k1xSpc","kjj79g","kmVPX3","$$css","Omit","children","t0","$","_c","props","t1","DialogBody","className","DialogContent","container","isKeyboardDismissDisabled","style","isDismissable","undefined","t2","Symbol","for","scrim","t3","t4","modalDialog","t5","t6","t7","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Pick","Element","DialogTitleProps"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\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// 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  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  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug x78zum5 xdt5ytf x1iyjqo2 xpo2rfv x193rfdd x1hews6w xxj4525 xn43zvd xv61bfh x1odjw0f xg0ps1x\"\n  }, 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.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: DialogContentProps) {\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 {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x19pkqky x1f120ba 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.\ntype DialogContentProps = Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\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  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport default Dialog;"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from "../../render/aria.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import ProgressIndicator from "../progress-indicator/index.js";
 import { c } from "react/compiler-runtime";
@@ -17,10 +18,6 @@ const styles = {
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
 		kjj79g: "xl56j7k",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		kmVPX3: "x1717udv",
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
@@ -314,7 +311,7 @@ function IconButton(t0) {
 	}
 	let t6;
 	if ($[10] !== size || $[11] !== variant) {
-		t6 = (state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		t6 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 		$[10] = size;
 		$[11] = variant;
 		$[12] = t6;
@@ -367,7 +364,7 @@ function toggleContent(children, ripple) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });
 }
 function toggleStyleProps(size, variant) {
-	return (state) => props(styles.base, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);
+	return (state) => props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size], variant === "outlined" && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);
 }
 //#endregion
 export { IconButton as default };