@kanso-labs/kanso-ui 0.26.6 → 0.28.0

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

@@ -63,9 +63,10 @@ const triggerStyles = {
 * element a layout positions.
 */
 function ColorPicker$1(t0) {
-	const $ = c(36);
+	const $ = c(40);
 	let children;
 	let className;
+	let container;
 	let defaultOpen;
 	let isOpen;
 	let label;
@@ -75,71 +76,73 @@ function ColorPicker$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		({alpha: t1, children, className, defaultOpen, isDisabled: t2, isOpen, label, onOpenChange, style, ...props$1} = t0);
+		({alpha: t1, children, className, container, defaultOpen, isDisabled: t2, isOpen, label, onOpenChange, style, ...props$1} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
-		$[3] = defaultOpen;
-		$[4] = isOpen;
-		$[5] = label;
-		$[6] = onOpenChange;
-		$[7] = props$1;
-		$[8] = style;
-		$[9] = t1;
-		$[10] = t2;
+		$[3] = container;
+		$[4] = defaultOpen;
+		$[5] = isOpen;
+		$[6] = label;
+		$[7] = onOpenChange;
+		$[8] = props$1;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
 	} else {
 		children = $[1];
 		className = $[2];
-		defaultOpen = $[3];
-		isOpen = $[4];
-		label = $[5];
-		onOpenChange = $[6];
-		props$1 = $[7];
-		style = $[8];
-		t1 = $[9];
-		t2 = $[10];
+		container = $[3];
+		defaultOpen = $[4];
+		isOpen = $[5];
+		label = $[6];
+		onOpenChange = $[7];
+		props$1 = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
 	}
 	const alpha = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	let t3;
-	if ($[11] !== className || $[12] !== style) {
+	if ($[12] !== className || $[13] !== style) {
 		t3 = mergeStatefulStyles(_temp, {
 			className,
 			style
 		});
-		$[11] = className;
-		$[12] = style;
-		$[13] = t3;
-	} else t3 = $[13];
+		$[12] = className;
+		$[13] = style;
+		$[14] = t3;
+	} else t3 = $[14];
 	let t4;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(ColorSwatch$1, { className: "xxk0z11 x2lah0s xvy4d1p" });
-		$[14] = t4;
-	} else t4 = $[14];
+		$[15] = t4;
+	} else t4 = $[15];
 	let t5;
-	if ($[15] !== isDisabled || $[16] !== label || $[17] !== t3) {
+	if ($[16] !== isDisabled || $[17] !== label || $[18] !== t3) {
 		t5 = /* @__PURE__ */ jsxs(Button, {
 			isDisabled,
 			...t3,
 			children: [t4, label]
 		});
-		$[15] = isDisabled;
-		$[16] = label;
-		$[17] = t3;
-		$[18] = t5;
-	} else t5 = $[18];
+		$[16] = isDisabled;
+		$[17] = label;
+		$[18] = t3;
+		$[19] = t5;
+	} else t5 = $[19];
 	let t6;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = props(overlay.popup, picker.popover);
-		$[19] = t6;
-	} else t6 = $[19];
+		$[20] = t6;
+	} else t6 = $[20];
 	let t7;
-	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = props(overlay.popupDialog, focus.ring);
-		$[20] = t7;
-	} else t7 = $[20];
+		$[21] = t7;
+	} else t7 = $[21];
 	let t8;
-	if ($[21] !== alpha || $[22] !== children || $[23] !== label) {
+	if ($[22] !== alpha || $[23] !== children || $[24] !== label) {
 		t8 = children ?? /* @__PURE__ */ jsxs("div", {
 			className: "x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li",
 			children: [
@@ -161,49 +164,57 @@ function ColorPicker$1(t0) {
 				/* @__PURE__ */ jsx(ColorField$1, { label })
 			]
 		});
-		$[21] = alpha;
-		$[22] = children;
-		$[23] = label;
-		$[24] = t8;
-	} else t8 = $[24];
+		$[22] = alpha;
+		$[23] = children;
+		$[24] = label;
+		$[25] = t8;
+	} else t8 = $[25];
 	let t9;
-	if ($[25] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Popover, {
-			...t6,
-			children: /* @__PURE__ */ jsx(Dialog, {
-				...t7,
-				children: t8
-			})
+	if ($[26] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Dialog, {
+			...t7,
+			children: t8
 		});
-		$[25] = t8;
-		$[26] = t9;
-	} else t9 = $[26];
+		$[26] = t8;
+		$[27] = t9;
+	} else t9 = $[27];
 	let t10;
-	if ($[27] !== defaultOpen || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t5 || $[31] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(DialogTrigger, {
+	if ($[28] !== container || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Popover, {
+			UNSTABLE_portalContainer: container,
+			...t6,
+			children: t9
+		});
+		$[28] = container;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== defaultOpen || $[32] !== isOpen || $[33] !== onOpenChange || $[34] !== t10 || $[35] !== t5) {
+		t11 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			defaultOpen,
 			isOpen,
 			onOpenChange,
-			children: [t5, t9]
+			children: [t5, t10]
 		});
-		$[27] = defaultOpen;
-		$[28] = isOpen;
-		$[29] = onOpenChange;
-		$[30] = t5;
-		$[31] = t9;
-		$[32] = t10;
-	} else t10 = $[32];
-	let t11;
-	if ($[33] !== props$1 || $[34] !== t10) {
-		t11 = /* @__PURE__ */ jsx(ColorPicker, {
+		$[31] = defaultOpen;
+		$[32] = isOpen;
+		$[33] = onOpenChange;
+		$[34] = t10;
+		$[35] = t5;
+		$[36] = t11;
+	} else t11 = $[36];
+	let t12;
+	if ($[37] !== props$1 || $[38] !== t11) {
+		t12 = /* @__PURE__ */ jsx(ColorPicker, {
 			...props$1,
-			children: t10
+			children: t11
 		});
-		$[33] = props$1;
-		$[34] = t10;
-		$[35] = t11;
-	} else t11 = $[35];
-	return t11;
+		$[37] = props$1;
+		$[38] = t11;
+		$[39] = t12;
+	} else t12 = $[39];
+	return t12;
 }
 function _temp(state) {
 	return props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ColorPickerProps","RACColorPickerProps","stylex","Button","RACButton","ColorPicker","RACColorPicker","Dialog","RACDialog","DialogTrigger","RACDialogTrigger","Popover","RACPopover","focus","mergeStatefulStyles","overlay","picker","colors","radii","spacing","stateLayerOpacity","typography","ColorArea","ColorField","ColorSlider","ColorSwatch","triggerStyles","base","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","$$css","disabled","Omit","alpha","children","className","container","Element","defaultOpen","isDisabled","isOpen","label","onOpenChange","style","React","CSSProperties","t0","$","_c","props","t1","t2","undefined","t3","_temp","t4","Symbol","for","t5","t6","popup","popover","t7","popupDialog","ring","t8","t9","t10","t11","t12","state"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\nconst triggerStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"x19v6zzp\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  }\n};\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /**\n   * Where to portal the surface. 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 surface renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => stylex.props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled), {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover\n      // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n      UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":"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"}

package/dist/components/date-field/index.d.ts

@@ -1,7 +1,8 @@
+import { FieldVariant } from "../../field/index.js";
 import { ReactNode } from "react";
 import { DateFieldProps, DateValue } from "react-aria-components";
 //#region src/components/date-field/index.d.ts
-type DateFieldProps$1<T extends DateValue> = Omit<DateFieldProps<T>, 'children' | 'className' | 'style'> & {
+type DateFieldProps$1<T extends DateValue = DateValue> = Omit<DateFieldProps<T>, 'children' | 'className' | 'style'> & {
   /** A function may compute the class from the field's render state. */
   className?: DateFieldProps<T>['className'];
   /** Supporting text under the field. */
@@ -26,7 +27,7 @@ type DateFieldProps$1<T extends DateValue> = Omit<DateFieldProps<T>, 'children'
    * Which of the text fields page's two boxes to draw.
    * @default 'filled'
    */
-  variant?: 'filled' | 'outlined';
+  variant?: FieldVariant;
 };
 /**
  * A date typed rather than picked: one segment per part, each its own focus

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<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 field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\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 rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAAK,YAAAwB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBb,MAAaQ,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKvC,MAAaY,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADJ,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EAVO,CAAA;EAeEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<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 field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A date typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAAK,YAAAyB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAAlC;CAAY,IAAAmC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADJ,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EAVO,CAAA;EAeEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}

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

@@ -1,9 +1,18 @@
+import { FieldVariant } from "../../field/index.js";
 import { ReactNode } from "react";
 import { DatePickerProps, DateValue } from "react-aria-components";
 //#region src/components/date-picker/index.d.ts
-type DatePickerProps$1<T extends DateValue> = Omit<DatePickerProps<T>, 'children' | 'className' | 'style'> & {
+type DatePickerProps$1<T extends DateValue = DateValue> = Omit<DatePickerProps<T>, 'children' | 'className' | 'style'> & {
   /** A function may compute the class from the picker's render state. */
   className?: DatePickerProps<T>['className'];
+  /**
+   * Where to portal the calendar. Defaults to the end of `<body>`, which is
+   * right for an app that sets its StyleX theme on `:root`. An app that
+   * scopes the theme to a subtree has to point this at an element inside it,
+   * or the calendar renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
   /** Supporting text under the field. */
   description?: string;
   /** The message shown instead of the description, which also marks the field invalid. */
@@ -29,7 +38,7 @@ type DatePickerProps$1<T extends DateValue> = Omit<DatePickerProps<T>, 'children
    * Which of the text fields page's two boxes to draw.
    * @default 'filled'
    */
-  variant?: 'filled' | 'outlined';
+  variant?: FieldVariant;
 };
 /**
  * A date typed into a field, or picked from a calendar behind a button. The
@@ -51,7 +60,7 @@ type DatePickerProps$1<T extends DateValue> = Omit<DatePickerProps<T>, 'children
  * The call site's `className` and `style` land on the picker as a whole,
  * which is the element a layout positions.
  */
-declare function DatePicker$1<T extends DateValue>({ description, error, floatingLabel, isDisabled, label, leadingIcon, triggerLabel, variant, ...props }: DatePickerProps$1<T>): import("react").JSX.Element;
+declare function DatePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, triggerLabel, variant, ...props }: DatePickerProps$1<T>): import("react").JSX.Element;
 //#endregion
 export { type DatePickerProps$1 as DatePickerProps, DatePicker$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -34,8 +34,8 @@ import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-ari
 * which is the element a layout positions.
 */
 function DatePicker$1(t0) {
-	const $ = c(30);
-	const { description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, triggerLabel: t3, variant: t4, ...props$1 } = t0;
+	const $ = c(33);
+	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, triggerLabel: t3, variant: t4, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
 	const triggerLabel = t3 === void 0 ? "Choose a date" : t3;
@@ -119,19 +119,27 @@ function DatePicker$1(t0) {
 	} else t14 = $[17];
 	let t15;
 	if ($[18] !== label) {
-		t15 = /* @__PURE__ */ jsx(Popover, {
-			...t13,
-			children: /* @__PURE__ */ jsx(Dialog, {
-				...t14,
-				children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
-			})
+		t15 = /* @__PURE__ */ jsx(Dialog, {
+			...t14,
+			children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
 		});
 		$[18] = label;
 		$[19] = t15;
 	} else t15 = $[19];
 	let t16;
-	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== props$1 || $[23] !== t11 || $[24] !== t12 || $[25] !== t15 || $[26] !== t5 || $[27] !== t6 || $[28] !== validationBehavior) {
-		t16 = /* @__PURE__ */ jsxs(T0, {
+	if ($[20] !== container || $[21] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Popover, {
+			UNSTABLE_portalContainer: container,
+			...t13,
+			children: t15
+		});
+		$[20] = container;
+		$[21] = t15;
+		$[22] = t16;
+	} else t16 = $[22];
+	let t17;
+	if ($[23] !== T0 || $[24] !== isDisabled || $[25] !== props$1 || $[26] !== t11 || $[27] !== t12 || $[28] !== t16 || $[29] !== t5 || $[30] !== t6 || $[31] !== validationBehavior) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t5,
 			validationBehavior,
@@ -140,21 +148,21 @@ function DatePicker$1(t0) {
 			children: [
 				t11,
 				t12,
-				t15
+				t16
 			]
 		});
-		$[20] = T0;
-		$[21] = isDisabled;
-		$[22] = props$1;
-		$[23] = t11;
-		$[24] = t12;
-		$[25] = t15;
-		$[26] = t5;
-		$[27] = t6;
-		$[28] = validationBehavior;
-		$[29] = t16;
-	} else t16 = $[29];
-	return t16;
+		$[23] = T0;
+		$[24] = isDisabled;
+		$[25] = props$1;
+		$[26] = t11;
+		$[27] = t12;
+		$[28] = t16;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = validationBehavior;
+		$[32] = t17;
+	} else t17 = $[32];
+	return t17;
 }
 //#endregion
 export { DatePicker$1 as default };

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","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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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","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","t17"],"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 type { FieldVariant } from '../../field';\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 = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /** 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?: FieldVariant;\n};\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\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\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}

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

@@ -1,9 +1,18 @@
+import { FieldVariant } from "../../field/index.js";
 import { ReactNode } from "react";
 import { DateRangePickerProps, DateValue } from "react-aria-components";
 //#region src/components/date-range-picker/index.d.ts
-type DateRangePickerProps$1<T extends DateValue> = {
+type DateRangePickerProps$1<T extends DateValue = DateValue> = {
   /** A function may compute the class from the picker's render state. */
   className?: DateRangePickerProps<T>['className'];
+  /**
+   * Where to portal the calendar. Defaults to the end of `<body>`, which is
+   * right for an app that sets its StyleX theme on `:root`. An app that
+   * scopes the theme to a subtree has to point this at an element inside it,
+   * or the calendar renders outside the theme and falls back to the tokens'
+   * `prefers-color-scheme` default.
+   */
+  container?: Element;
   /** Supporting text under the field. */
   description?: string;
   /** The message shown instead of the description, which also marks the field invalid. */
@@ -35,7 +44,7 @@ type DateRangePickerProps$1<T extends DateValue> = {
    * Which of the text fields page's two boxes to draw.
    * @default 'filled'
    */
-  variant?: 'filled' | 'outlined';
+  variant?: FieldVariant;
 } & Omit<DateRangePickerProps<T>, 'children' | 'className' | 'style'>;
 /**
  * A date range typed into a field, or picked from a calendar behind a
@@ -63,7 +72,7 @@ type DateRangePickerProps$1<T extends DateValue> = {
  * The call site's `className` and `style` land on the picker as a whole,
  * which is the element a layout positions.
  */
-declare function DateRangePicker$1<T extends DateValue>({ description, error, floatingLabel, isDisabled, label, leadingIcon, separator, triggerLabel, variant, ...props }: DateRangePickerProps$1<T>): import("react").JSX.Element;
+declare function DateRangePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, separator, triggerLabel, variant, ...props }: DateRangePickerProps$1<T>): import("react").JSX.Element;
 //#endregion
 export { type DateRangePickerProps$1 as DateRangePickerProps, DateRangePicker$1 as default };
 //# sourceMappingURL=index.d.ts.map