@kanso-labs/kanso-ui 0.31.1 → 0.32.0

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","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: \"x1dkaolv\",\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  /**\n   * Whether the whole picker is inert — the trigger, and the plane, strips\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed\n   * as `children` is the call site's own to disable.\n   * @default false\n   */\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            {/*\n              Disabled reaches every control here, not only the trigger.\n              React Aria's colour picker carries no disabled state of its\n              own — react-stately's `useColorPickerState` has no such\n              concept — so nothing hands it down the way a field's context\n              would. And the surface opens independently of the trigger, so\n              a disabled picker can still be on screen: already open when a\n              form disables it, or opened from outside. Without this the\n              plane could be dragged, the strips moved with the arrow keys\n              and the field typed into, all changing the value of something\n              documented as inert.\n               An arrangement a call site passes as `children` is its own to\n              disable; there is no context to reach it through.\n             */}\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" isDisabled={isDisabled} xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" isDisabled={isDisabled} label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" isDisabled={isDisabled} label=\"Alpha\" /> : null}\n                <ColorField isDisabled={isDisabled} 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**, centred\n// over a scrim there — the same swap `DatePicker` makes, at the width `Sheet`\n// changes presentation too, and the shared one in `src/styles/picker.ts`\n// rather than a third copy. A 280dp surface anchored to a trigger is\n// 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: \"x1dkaolv\",\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  /**\n   * Whether the whole picker is inert — the trigger, and the plane, strips\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed\n   * as `children` is the call site's own to disable.\n   * @default false\n   */\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            {/*\n              Disabled reaches every control here, not only the trigger.\n              React Aria's colour picker carries no disabled state of its\n              own — react-stately's `useColorPickerState` has no such\n              concept — so nothing hands it down the way a field's context\n              would. And the surface opens independently of the trigger, so\n              a disabled picker can still be on screen: already open when a\n              form disables it, or opened from outside. Without this the\n              plane could be dragged, the strips moved with the arrow keys\n              and the field typed into, all changing the value of something\n              documented as inert.\n               An arrangement a call site passes as `children` is its own to\n              disable; there is no context to reach it through.\n             */}\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" isDisabled={isDisabled} xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" isDisabled={isDisabled} label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" isDisabled={isDisabled} label=\"Alpha\" /> : null}\n                <ColorField isDisabled={isDisabled} 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/color-swatch-picker/index.js

@@ -1,9 +1,52 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import ColorSwatch$1 from "../color-swatch/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
 //#region src/components/color-swatch-picker/index.tsx
+const styles = {
+	item: {
+		kaIpWk: "x1tfhd1",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x1t137rt",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	itemDisabled: {
+		kkrTdU: "xt0e3qv",
+		kSiTet: "x1ppv7y9",
+		$$css: true
+	},
+	itemFocused: {
+		kjBf7l: "xrgy624",
+		kInvED: "x8wkva7",
+		k3XXqK: "xaatb59",
+		$$css: true
+	},
+	itemHovered: {
+		kjBf7l: "x1wab145",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59 xq4115o",
+		$$css: true
+	},
+	itemPressed: {
+		kjBf7l: "x5ma03c",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59 xq4115o",
+		$$css: true
+	},
+	itemSelected: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		$$css: true
+	}
+};
 /**
 * A row of colours to choose one from, drawn as swatches. The value is React
 * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —
@@ -93,16 +136,7 @@ function ColorSwatchPickerItem$1(t0) {
 	return t4;
 }
 function itemStyles(state) {
-	return {
-		0: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn" },
-		4: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59" },
-		2: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59" },
-		6: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59" },
-		1: { className: "x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9" },
-		5: { className: "x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9" },
-		3: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" },
-		7: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" }
-	}[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0];
+	return props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);
 }
 ColorSwatchPicker$1.Item = ColorSwatchPickerItem$1;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","Omit","children","className","style","props","$","_c","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isSelected","Item"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0];\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAM,oBAAAc,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAAb,oBAAoB,EAAAQ,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,mBAAD;GAAqB,GAAKJ;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAhB,wBAAAe,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAO;CAAA,IAAAE;CAAA,IAAAL,EAAA,OAAAE,IAAA;EAA+B,MAAA,EAAAN,UAAAU,IAAA,GAAAP,UAAAG;EAAAN,WAAAU;EAIrBF,KAAAhB;EAA6BW,KAAAA;EAAWM,KAAAhB,oBAAoBkB,YAAYR,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAJ,WAAAI,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,UAAA;EACjFU,KAAAV,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAG,MAAAH,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKT;GAAK,GAAMM;GAC3CC,UAAAA;EAD2B,CAAA;EAEHN,EAAA,KAAAI;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFtBQ;AAEsB;AAW/B,SAASD,WAAWE,OAIjB;CACD,OAAO;EACL,GAAG,EACDZ,WAAW,qEACb;EACA,GAAG,EACDA,WAAW,oEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,mEACb;EACA,GAAG,EACDA,WAAW,6EACb;EACA,GAAG,EACDA,WAAW,4EACb;EACA,GAAG,EACDA,WAAW,2EACb;EACA,GAAG,EACDA,WAAW,2EACb;CACF,EAAE,CAAC,CAACY,MAAMG,cAAc,IAAI,CAAC,CAACH,MAAME,kBAAkB,IAAI,CAAC,CAACF,MAAMC,cAAc;AAClF;AACAzB,oBAAkB4B,OAAO1B"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","FORCED_COLORS","styles","item","kaIpWk","kB7OPa","kkrTdU","k1xSpc","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","itemDisabled","kSiTet","itemFocused","itemHovered","itemPressed","itemSelected","Omit","children","className","style","props","$","_c","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","Item"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n//\n// **Hover and press are a ring too, in the slot selection would take.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen:\n// behind it the tint is hidden, over it the tint changes the colour. So an\n// unselected swatch under the pointer takes a ring at the selection ring's\n// offset, drawn in the outline roles rather than primary so it cannot be read\n// as chosen — outline variant while a pointer is over it, and outline while a\n// touch or a pen holds it. Those are the only presses anyone sees: React Aria\n// chooses a swatch the moment a mouse or a key presses it, and on release for\n// a touch, so that press is the one a reader waits through before the swatch\n// is theirs. Under forced colours both roles become one system colour, so the\n// ring turns dashed there, where the selection ring stays solid.\n\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  item: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  itemDisabled: {\n    kkrTdU: \"xt0e3qv\",\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  itemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x8wkva7\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  itemHovered: {\n    kjBf7l: \"x1wab145\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemPressed: {\n    kjBf7l: \"x5ma03c\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemSelected: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\n};\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. The hover and press rings come before both, so a chosen or focused\n// swatch keeps the ring that says so. `disabled` is last, so it takes the\n// cursor with it; React Aria reports neither hover nor press on one.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}) {\n  return stylex.props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;AA6CA,MAAMiB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZP,QAAQ;EACRQ,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXP,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAI,aAAa;EACXR,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAK,aAAa;EACXT,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAM,cAAc;EACZV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAArB,oBAAAgC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,OAAA;EAC8CG,KAAA/B,oBAAoB,EAAA0B,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAD,SAAAC,EAAA,OAAAE,IAAA;EAFFC,KAAA,oBAAC,mBAAD;GAAqB,GAAKJ;GAAK,GAAMG;EAEnC,CAAA;EAAIF,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAFNG;AAEM;;;;;AAOf,SAAAlC,wBAAAiC,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAG;CAAA,IAAAR;CAAA,IAAAO;CAAA,IAAAE;CAAA,IAAAL,EAAA,OAAAE,IAAA;EAA+B,MAAA,EAAAN,UAAAU,IAAA,GAAAP,UAAAG;EAAAN,WAAAU;EAIrBF,KAAAlC;EAA6B6B,KAAAA;EAAWM,KAAAlC,oBAAoBoC,YAAYR,KAAK;EAACC,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAJ,WAAAI,EAAA;EAAAG,KAAAH,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,UAAA;EACjFU,KAAAV,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAGI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAI,MAAAJ,EAAA,OAAAG,MAAAH,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKT;GAAK,GAAMM;GAC3CC,UAAAA;EAD2B,CAAA;EAEHN,EAAA,KAAAI;EAAAJ,EAAA,KAAAG;EAAAH,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAFtBQ;AAEsB;AAa/B,SAASD,WAAWE,OAMjB;CACD,OAAO3C,MAAaY,OAAOC,MAAM8B,MAAMG,aAAalC,OAAOc,aAAaiB,MAAMI,aAAanC,OAAOe,aAAagB,MAAMK,cAAcpC,OAAOgB,cAAce,MAAME,kBAAkBjC,OAAOa,aAAakB,MAAMC,cAAchC,OAAOW,YAAY;AAC7O;AACAtB,oBAAkBgD,OAAO9C"}

package/dist/components/color-wheel/index.d.ts

@@ -2,15 +2,15 @@ import { ColorWheelProps } from "react-aria-components";
 //#region src/components/color-wheel/index.d.ts
 type ColorWheelProps$1 = Omit<ColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {
   /** A function may compute the class from the wheel's render state. */
-  className?: string;
+  className?: ColorWheelProps['className'];
   /**
    * How far the ring reaches from the centre, in pixels. The wheel is twice
    * this across.
    * @default 100
    */
   outerRadius?: number;
-  /** Lands on the wheel, as `className` does. */
-  style?: React.CSSProperties;
+  /** A function may compute the style from the wheel's render state. */
+  style?: ColorWheelProps['style'];
   /**
    * How wide the band is, in pixels. The inner radius is this in from
    * `outerRadius`, so the two cannot disagree.

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

@@ -1,5 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { mergeStyles } from "../../styles/merge.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { thumbClassName } from "../../styles/color.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -72,7 +72,7 @@ function ColorWheel$1(t0) {
 	const innerRadius = Math.max(0, outerRadius - (t3 === void 0 ? DEFAULT_THICKNESS : t3));
 	let t4;
 	if ($[7] !== className || $[8] !== isDisabled || $[9] !== style) {
-		t4 = mergeStyles({
+		t4 = mergeStatefulStyles({
 			0: { className: "x9f619 x1rg5ohu x14ju556" },
 			1: { className: "x9f619 x1rg5ohu x14ju556 x1ppv7y9" }
 		}[!!isDisabled << 0], {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ColorWheelProps","RACColorWheelProps","stylex","ColorThumb","RACColorThumb","ColorWheel","RACColorWheel","ColorWheelTrack","RACColorWheelTrack","thumbClassName","mergeStyles","stateLayerOpacity","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","_temp","kX1K2I","styles","track","kkrTdU","$$css","trackDisabled","trackRing","inner","Math","max","undefined","Omit","className","outerRadius","style","React","CSSProperties","thickness","t0","$","_c","props","t1","t2","t3","isDisabled","innerRadius","t4","0","1","t5","t6","t7","Symbol","for","t8"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: string;\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** Lands on the wheel, as `className` does. */\n  style?: React.CSSProperties;\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ColorWheelProps","RACColorWheelProps","stylex","ColorThumb","RACColorThumb","ColorWheel","RACColorWheel","ColorWheelTrack","RACColorWheelTrack","thumbClassName","mergeStatefulStyles","stateLayerOpacity","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","_temp","kX1K2I","styles","track","kkrTdU","$$css","trackDisabled","trackRing","inner","Math","max","undefined","Omit","className","outerRadius","style","thickness","t0","$","_c","props","t1","t2","t3","isDisabled","innerRadius","t4","0","1","t5","t6","t7","Symbol","for","t8"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: RACColorWheelProps['className'];\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** A function may compute the style from the wheel's render state. */\n  style?: RACColorWheelProps['style'];\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":"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"}

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

@@ -38,7 +38,10 @@ declare function DialogBody(props: HTMLAttributes<HTMLDivElement>): import("reac
  *
  * A press on the scrim closes the dialog unless `isDismissable` says
  * otherwise, which is the same default `Sheet` takes and the reverse of
- * React Aria's own.
+ * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,
+ * and `isDismissable` says nothing about it — so a dialog that has to be
+ * answered from one of its actions, as an alert dialog usually does, turns
+ * off both.
  */
 declare function DialogContent({ children, className, container, isDismissable, isKeyboardDismissDisabled, style, ...props }: DialogContentProps): import("react").JSX.Element;
 declare function DialogFooter(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

package/dist/components/dialog/index.js

@@ -82,7 +82,10 @@ function DialogBody(props) {
 *
 * A press on the scrim closes the dialog unless `isDismissable` says
 * otherwise, which is the same default `Sheet` takes and the reverse of
-* React Aria's own.
+* React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,
+* and `isDismissable` says nothing about it — so a dialog that has to be
+* answered from one of its actions, as an alert dialog usually does, turns
+* off both.
 */
 function DialogContent(t0) {
 	const $ = c(24);

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 x1az23kl x18d9i69 x886u18 xexx8yu 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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"}
+{"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 x1az23kl x18d9i69 x886u18 xexx8yu 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. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  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/list-item/index.d.ts

@@ -9,6 +9,16 @@ type ListItemProps = {
    * @default false
    */
   interactive?: boolean;
+  /**
+   * Draws the row disabled, in the treatment every row in the library shares:
+   * its text fades to on-surface at the disabled content opacity, overline
+   * and supporting line included. An interactive row's button is disabled
+   * outright: it takes no focus, no hover tint, no press and no ripple. A row
+   * that only presents has nothing to disable, and is marked `aria-disabled`
+   * instead so the state it draws is announced as well.
+   * @default false
+   */
+  isDisabled?: boolean;
   /** Content before the headline: an avatar, an icon, a checkbox. */
   leading?: ReactNode;
   /**
@@ -34,7 +44,7 @@ type ListItemProps = {
  * here is the element around them — a `<div>` that presents, or a `<button>`
  * that ripples — and the props that fill the slots.
  */
-declare function ListItem({ children, interactive, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ children, interactive, isDisabled, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion
 export { type ListItemProps, ListItem as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/list-item/index.js

@@ -19,12 +19,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * that ripples — and the props that fill the slots.
 */
 function ListItem(t0) {
-	const $ = c(19);
-	const { children, interactive: t1, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props$1 } = t0;
+	const $ = c(21);
+	const { children, interactive: t1, isDisabled: t2, leading, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, trailing, ...props$1 } = t0;
 	const interactive = t1 === void 0 ? false : t1;
-	let t2;
+	const isDisabled = t2 === void 0 ? false : t2;
+	let t3;
 	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t2 = {
+		t3 = {
 			onClick,
 			onContextMenu,
 			onPointerCancel,
@@ -38,15 +39,16 @@ function ListItem(t0) {
 		$[3] = onPointerDown;
 		$[4] = onPointerLeave;
 		$[5] = onPointerUp;
-		$[6] = t2;
-	} else t2 = $[6];
-	const ripple = useRipple(interactive, t2);
+		$[6] = t3;
+	} else t3 = $[6];
+	const ripple = useRipple(interactive && !isDisabled, t3);
 	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
 	const twoLine = extraLines === 1;
 	const threeLine = extraLines === 2;
-	let t3;
-	if ($[7] !== children || $[8] !== leading || $[9] !== overline || $[10] !== supporting || $[11] !== trailing) {
-		t3 = /* @__PURE__ */ jsx(RowContent, {
+	let t4;
+	if ($[7] !== children || $[8] !== isDisabled || $[9] !== leading || $[10] !== overline || $[11] !== supporting || $[12] !== trailing) {
+		t4 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled,
 			leading,
 			overline,
 			supporting,
@@ -54,39 +56,43 @@ function ListItem(t0) {
 			children
 		});
 		$[7] = children;
-		$[8] = leading;
-		$[9] = overline;
-		$[10] = supporting;
-		$[11] = trailing;
-		$[12] = t3;
-	} else t3 = $[12];
-	const content = t3;
+		$[8] = isDisabled;
+		$[9] = leading;
+		$[10] = overline;
+		$[11] = supporting;
+		$[12] = trailing;
+		$[13] = t4;
+	} else t4 = $[13];
+	const content = t4;
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
+		"aria-disabled": isDisabled || void 0,
 		...props$1,
 		...ripple.handlers,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1),
 		children: content
 	});
-	const t4 = "button";
-	const t5 = ripple.handlers;
-	const t6 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1);
-	let t7;
-	if ($[13] !== content || $[14] !== props$1 || $[15] !== ripple.handlers || $[16] !== ripple.surface || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("button", {
-			type: t4,
-			...t5,
-			...props$1,
+	const t5 = "button";
+	const t6 = ripple.handlers;
+	const t7 = mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props$1);
+	let t8;
+	if ($[14] !== content || $[15] !== isDisabled || $[16] !== props$1 || $[17] !== ripple.handlers || $[18] !== ripple.surface || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("button", {
+			disabled: isDisabled,
+			type: t5,
 			...t6,
+			...props$1,
+			...t7,
 			children: [content, ripple.surface]
 		});
-		$[13] = content;
-		$[14] = props$1;
-		$[15] = ripple.handlers;
-		$[16] = ripple.surface;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	return t7;
+		$[14] = content;
+		$[15] = isDisabled;
+		$[16] = props$1;
+		$[17] = ripple.handlers;
+		$[18] = ripple.surface;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 //#endregion
 export { ListItem as default };

package/dist/components/list-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t2","ripple","extraLines","twoLine","threeLine","t3","content","handlers","base","list","t4","t5","t6","t7","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  const ripple = useRipple<HTMLElement>(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n        {content}\n      </div>;\n  }\n  return <button type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,SAAAe,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAV,UAAAC,aAAAU,IAAAT,SAAAU,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAd,UAAAC,YAAAC,UAAA,GAAAa,YAAAV;CAEhB,MAAAP,cAAAU,OAAAQ,KAAAA,IAAA,QAAAR;CAAmB,IAAAS;CAAA,IAAAX,EAAA,OAAAG,WAAAH,EAAA,OAAAI,iBAAAJ,EAAA,OAAAK,mBAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAO,kBAAAP,EAAA,OAAAQ,aAAA;EAwBgCG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOnD;EAACR,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAPD,MAAAY,SAAe1B,UAAuBM,aAAamB,EAOlD;CAWD,MAAAE,cAAoBnB,aAAagB,KAAAA,IAAb,IAAA,MAAmCf,eAAee,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAhB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,WAAAO,EAAA,OAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBoB,KAAA,oBAAC,YAAD;GAAqBvB;GAAmBC;GAAsBC;GAAsBC;GAC/FL;EADsB,CAAA;EAEZS,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAFf,MAAAiB,UAAgBD;CAGhB,IAAI,CAACxB,aAAW,OACP,oBAAA,OAAA;EAEC,GAFQiB;EAAK,GAAMG,OAAMM;EAAS,GAAM7B,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAON,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;EAC1KQ,UAAAA;CACG,CAAA;CAEU,MAAAI,KAAA;CAAa,MAAAC,KAAAV,OAAMM;CAA0B,MAAAK,KAAAlC,YAAYJ,MAAaG,UAAS+B,MAAO/B,UAASgC,MAAOhC,UAASI,aAAcsB,WAAW1B,UAAS0B,SAAUC,aAAa3B,UAAS2B,SAAU,GAAGN,OAAK;CAAC,IAAAe;CAAA,IAAAxB,EAAA,QAAAiB,WAAAjB,EAAA,QAAAS,WAAAT,EAAA,QAAAY,OAAAM,YAAAlB,EAAA,QAAAY,OAAAa,WAAAzB,EAAA,QAAAuB,IAAA;EAAjNC,KAAA,qBAAA,UAAA;GAAa,MAAAH;GAAQ,GAAKC;GAAe,GAAMb;GAAK,GAAMc;GAA1D,UAAA,CACFN,SACAL,OAAMa,OACA;;EAAAzB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAS;EAAAT,EAAA,MAAAY,OAAAM;EAAAlB,EAAA,MAAAY,OAAAa;EAAAzB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,OAHJwB;AAGI"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","ReactNode","stylex","useRipple","RowContent","rowStyles","mergeStyles","ListItemProps","children","interactive","isDisabled","leading","overline","supporting","trailing","HTMLElement","ListItem","t0","$","_c","t1","t2","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","props","undefined","t3","ripple","extraLines","twoLine","threeLine","t4","content","handlers","base","list","disabled","t5","t6","t7","t8","surface"],"sources":["../../../src/components/list-item/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStyles } from '../../styles/merge';\ntype ListItemProps = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Renders a `<button>` that ripples and tints on hover, for a row that is\n   * itself pressable. Leave it off for a row that only presents.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * Draws the row disabled, in the treatment every row in the library shares:\n   * its text fades to on-surface at the disabled content opacity, overline\n   * and supporting line included. An interactive row's button is disabled\n   * outright: it takes no focus, no hover tint, no press and no ripple. A row\n   * that only presents has nothing to disable, and is marked `aria-disabled`\n   * instead so the state it draws is announced as well.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & HTMLAttributes<HTMLElement>;\n\n/**\n * A static row: the row every list draws, on its own, as the lists spec page\n * gives it — a 56px one-line container, a body-large headline and a\n * body-medium supporting line. A second line takes it to the page's 72px\n * two-line container; an `overline` puts that second line above the headline\n * instead of below it, and an overline with a supporting line makes the\n * page's three-line item, an 88px container with the leading and trailing\n * slots held at the top rather than centred. The layout and the states are\n * the row module's in `src/row`, shared with every collection item; what is\n * here is the element around them — a `<div>` that presents, or a `<button>`\n * that ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  isDisabled = false,\n  leading,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than left in `props` to be spread over its handlers afterwards,\n  // which is what Card and Button do and for the same reason: a plain spread\n  // means whichever object comes last silently wins, so an onClick on the\n  // call site would replace the one that ends the press and the row would\n  // stay visibly pressed. The hook runs its own handler first and the\n  // consumer's second, and hands them straight back when the ripple is off,\n  // which is what puts them on the presenting <div> below. The host is\n  // `HTMLElement` rather than the button: the same handlers now reach both\n  // elements, and only the type `ListItemProps` already declares is assignable\n  // to a <div>'s props as well as a <button>'s.\n  //\n  // Off on a disabled row as well as on one that only presents. A press on a\n  // disabled button still delivers its pointerdown and pointerup, and\n  // withholds only the click, which is what ends a press — so a ripple left\n  // on would start and then stay drawn.\n  const ripple = useRipple<HTMLElement>(interactive && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n\n  // Which of the page's three items this row is, read from the content rather\n  // than taken as a prop: a row holding all three lines already says it is\n  // three lines, and a word for it would be a second place to get it wrong.\n  // A line that wraps grows the row past its container height on its own and\n  // keeps its slots centred, which is the shorter item made taller rather\n  // than the next one along.\n  //\n  // The three-line item is the only row whose slots move, which is why it\n  // alone carries an alignment as well as a height.\n  const extraLines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  const twoLine = extraLines === 1;\n  const threeLine = extraLines === 2;\n  const content = <RowContent isDisabled={isDisabled} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n\n  // `disabled` goes last in both lists. On the button that is what lets it\n  // win over the interactive style, as it does on every collection item:\n  // StyleX replaces a property whole, which takes the hover and pressed tints\n  // and the pointer cursor with it.\n  if (!interactive) {\n    return <div aria-disabled={isDisabled || undefined} {...props} {...ripple.handlers} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n        {content}\n      </div>;\n  }\n  return <button disabled={isDisabled} type=\"button\" {...ripple.handlers} {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine, isDisabled && rowStyles.disabled), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmDA,SAAAgB,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAX,UAAAC,aAAAW,IAAAV,YAAAW,IAAAV,SAAAW,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAf,UAAAC,YAAAC,UAAA,GAAAc,YAAAX;CAEhB,MAAAR,cAAAW,OAAAS,KAAAA,IAAA,QAAAT;CACA,MAAAV,aAAAW,OAAAQ,KAAAA,IAAA,QAAAR;CAAkB,IAAAS;CAAA,IAAAZ,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EA6BgDG,KAAA;GAAAR;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOlE;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAPD,MAAAa,SAAe5B,UAAuBM,eAAA,CAAgBC,YAAYoB,EAOjE;CAWD,MAAAE,cAAoBpB,aAAaiB,KAAAA,IAAb,IAAA,MAAmChB,eAAegB,KAAAA,IAAf,IAAA;CACvD,MAAAI,UAAgBD,eAAe;CAC/B,MAAAE,YAAkBF,eAAe;CAAE,IAAAG;CAAA,IAAAjB,EAAA,OAAAV,YAAAU,EAAA,OAAAR,cAAAQ,EAAA,OAAAP,WAAAO,EAAA,QAAAN,YAAAM,EAAA,QAAAL,cAAAK,EAAA,QAAAJ,UAAA;EACnBqB,KAAA,oBAAC,YAAD;GAAwBzB;GAAqBC;GAAmBC;GAAsBC;GAAsBC;GACvHN;EADsB,CAAA;EAEZU,EAAA,KAAAV;EAAAU,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAFf,MAAAkB,UAAgBD;CAQhB,IAAI,CAAC1B,aAAW,OACP,oBAAA,OAAA;EAAoB,iBAAAC,cAAAmB,KAAAA;EAAuB,GAAMD;EAAK,GAAMG,OAAMM;EAAS,GAAM/B,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAON,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;EACpPQ,UAAAA;CACG,CAAA;CAEgC,MAAAK,KAAA;CAAa,MAAAC,KAAAX,OAAMM;CAA0B,MAAAM,KAAArC,YAAYJ,MAAaG,UAASiC,MAAOjC,UAASkC,MAAOlC,UAASI,aAAcwB,WAAW5B,UAAS4B,SAAUC,aAAa7B,UAAS6B,WAAYxB,cAAcL,UAASmC,QAAS,GAAGZ,OAAK;CAAC,IAAAgB;CAAA,IAAA1B,EAAA,QAAAkB,WAAAlB,EAAA,QAAAR,cAAAQ,EAAA,QAAAU,WAAAV,EAAA,QAAAa,OAAAM,YAAAnB,EAAA,QAAAa,OAAAc,WAAA3B,EAAA,QAAAyB,IAAA;EAAzQC,KAAA,qBAAA,UAAA;GAAkBlC,UAAAA;GAAiB,MAAA+B;GAAQ,GAAKC;GAAe,GAAMd;GAAK,GAAMe;GAAhF,UAAA,CACFP,SACAL,OAAMc,OACA;;EAAA3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAR;EAAAQ,EAAA,MAAAU;EAAAV,EAAA,MAAAa,OAAAM;EAAAnB,EAAA,MAAAa,OAAAc;EAAA3B,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,OAHJ0B;AAGI"}

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

@@ -5,10 +5,12 @@ type TableBodyProps$1<T extends object = object> = Omit<TableBodyProps<T>, 'clas
   /** A function may compute the class from the body's render state. */
   className?: TableBodyProps<T>['className'];
   /**
-   * What the table shows in place of rows when it has none. Drawn in a row
-   * of its own spanning every column.
+   * What the table shows in place of rows when it has none: React Aria's own
+   * render function, under React Aria's own name, as List, ListBox, Tree and
+   * ChipGroup take it. What it returns is drawn in a row of its own spanning
+   * every column, inside the muted, padded box the table draws there.
    */
-  emptyState?: ReactNode;
+  renderEmptyState?: TableBodyProps<T>['renderEmptyState'];
   /** A function may compute the style from the body's render state. */
   style?: TableBodyProps<T>['style'];
 };
@@ -144,15 +146,15 @@ declare namespace Table$1 {
   var Row: typeof TableRow;
 }
 /**
- * The rows. `emptyState` is what it shows when there are none — a table with
- * no rows and nothing to say in their place is a blank area with a header
- * over it.
+ * The rows. `renderEmptyState` is what it shows when there are none — a table
+ * with no rows and nothing to say in their place is a blank area with a
+ * header over it.
  *
  * It carries no styles of its own, since every rule a body needs is drawn by
  * the rows inside it, so a `className` here lands on the `<tbody>` through
  * React Aria rather than through a merge.
  */
-declare function TableBody$1<T extends object = object>({ emptyState, ...props }: TableBodyProps$1<T>): import("react").JSX.Element;
+declare function TableBody$1<T extends object = object>({ renderEmptyState, ...props }: TableBodyProps$1<T>): import("react").JSX.Element;
 /**
  * One cell. `selection` draws this row's checkbox in place of whatever else
  * the cell would hold.

package/dist/components/table/index.js

@@ -53,10 +53,10 @@ function columnStyles(selection, sticky) {
 function dropAriaLevel(node) {
 	node?.removeAttribute("aria-level");
 }
-function emptyContent(emptyState) {
-	return (_state) => /* @__PURE__ */ jsx("span", {
+function emptyContent(renderEmptyState) {
+	return (state) => /* @__PURE__ */ jsx("span", {
 		className: "x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid",
-		children: emptyState
+		children: renderEmptyState(state)
 	});
 }
 function resizableContainerClassName() {
@@ -240,9 +240,9 @@ function Table$1(t0) {
 	return t9;
 }
 /**
-* The rows. `emptyState` is what it shows when there are none — a table with
-* no rows and nothing to say in their place is a blank area with a header
-* over it.
+* The rows. `renderEmptyState` is what it shows when there are none — a table
+* with no rows and nothing to say in their place is a blank area with a
+* header over it.
 *
 * It carries no styles of its own, since every rule a body needs is drawn by
 * the rows inside it, so a `className` here lands on the `<tbody>` through
@@ -250,21 +250,21 @@ function Table$1(t0) {
 */
 function TableBody$1(t0) {
 	const $ = c(8);
-	let emptyState;
 	let props;
+	let renderEmptyState;
 	if ($[0] !== t0) {
-		({emptyState, ...props} = t0);
+		({renderEmptyState, ...props} = t0);
 		$[0] = t0;
-		$[1] = emptyState;
-		$[2] = props;
+		$[1] = props;
+		$[2] = renderEmptyState;
 	} else {
-		emptyState = $[1];
-		props = $[2];
+		props = $[1];
+		renderEmptyState = $[2];
 	}
 	let t1;
-	if ($[3] !== emptyState) {
-		t1 = emptyState === void 0 ? void 0 : emptyContent(emptyState);
-		$[3] = emptyState;
+	if ($[3] !== renderEmptyState) {
+		t1 = renderEmptyState === void 0 ? void 0 : emptyContent(renderEmptyState);
+		$[3] = renderEmptyState;
 		$[4] = t1;
 	} else t1 = $[4];
 	let t2;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","Omit","T","className","emptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","_state","resizableContainerClassName","isResizing","isFocusVisible","rowStyles","selectionMode","isSelected","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n  /** A function may compute the class from the body's render state. */\n  className?: RACTableBodyProps<T>['className'];\n  /**\n   * What the table shows in place of rows when it has none. Drawn in a row\n   * of its own spanning every column.\n   */\n  emptyState?: ReactNode;\n  /** A function may compute the style from the body's render state. */\n  style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n  /** What the cell holds. */\n  children?: ReactNode;\n  /** A function may compute the class from the cell's render state. */\n  className?: RACCellProps['className'];\n  /**\n   * Draws this row's selection checkbox instead of `children`. The row's own\n   * text is what names the row; the box inside it takes the table's\n   * `selectLabel`.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the cell's render state. */\n  style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n  /** The column's name. */\n  children?: ReactNode;\n  /** A function may compute the class from the column's render state. */\n  className?: RACColumnProps['className'];\n  /**\n   * Draws a handle at the column's trailing edge that drags its width. Needs\n   * the table's own `resizable` as well — React Aria keeps the resize state\n   * on a container around the table, and without it there is nothing for a\n   * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n   * Aria's and apply only inside that container.\n   */\n  resizable?: boolean;\n  /**\n   * Draws the select-all checkbox instead of `children`, for the column the\n   * rows put their own checkboxes in.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the column's render state. */\n  style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n  /** A function may compute the class from the table's render state. */\n  className?: RACTableProps['className'];\n  /** Called as a column is dragged, with every column's width. */\n  onResize?: ResizableTableContainerProps['onResize'];\n  /** Called once a drag ends, with every column's width. */\n  onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n  /**\n   * Lets columns marked `resizable` be dragged, by putting the table in the\n   * container React Aria keeps the resize state on. A resizable table sizes\n   * to its columns rather than to its parent, and that container is what\n   * fills the width and scrolls instead.\n   */\n  resizable?: boolean;\n  /**\n   * What the resize handle is called, for a screen reader. React Aria\n   * composes it with the column's own name.\n   * @default 'Resize column'\n   */\n  resizeLabel?: string;\n  /**\n   * What the select-all checkbox is called, for a screen reader.\n   * @default 'Select all'\n   */\n  selectAllLabel?: string;\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /**\n   * Holds the header row in place while the rows scroll under it. Needs the\n   * table inside something that scrolls; on a table that does not, it draws\n   * the same as without it.\n   */\n  stickyHeader?: boolean;\n  /** A function may compute the style from the table's render state. */\n  style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the row's render state. */\n  className?: RACRowProps<T>['className'];\n  /** A function may compute the style from the row's render state. */\n  style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n  if (!selection) {\n    return children;\n  }\n  return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n  return {\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    }\n  }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n  if (selection) {\n    return <Checkbox aria-label={label} slot=\"selection\" />;\n  }\n  // The handle is a sibling of the name rather than part of it: React Aria\n  // renders it as its own element, positioned against the cell's trailing\n  // edge, which the name's own box does not reach.\n  return (state: ColumnRenderProps): ReactNode => <>\n      <span className=\"x6s0dn4 x78zum5 x126z3so\">\n        {children}\n        {sortArrowFor(state.sortDirection)}\n      </span>\n      {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n    </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n  return (state: ColumnRenderProps) => ({\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n    },\n    2: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    },\n    6: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    5: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    3: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    7: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    }\n  })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n  node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows. A call rather than a function\n// written at the prop, for the same reason the others are.\nfunction emptyContent(emptyState: ReactNode) {\n  // The return type is written out rather than inferred: `ReactNode` is a\n  // union that includes a promise, and a function inferred as returning one\n  // has to be `async`.\n  return (_state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{emptyState}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n  return {\n    className: \"x9f619 xh8yej3 xw2csxc\"\n  }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n  return {\n    0: {\n      className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n    },\n    1: {\n      className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n    }\n  }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n  return {\n    0: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    2: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    6: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    5: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    7: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n  if (direction === undefined) {\n    return null;\n  }\n  return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n *   <Table.Header>\n *     <Table.Column selection />\n *     <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row id=\"first\">\n *       <Table.Cell selection />\n *       <Table.Cell>First item</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n  onResize,\n  onResizeEnd,\n  resizable = false,\n  resizeLabel = 'Resize column',\n  selectAllLabel = 'Select all',\n  selectLabel = 'Select',\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const table = <RACTable {...props} {...mergeStatefulStyles({\n    className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n  }, props)} />;\n  return <SelectAllLabelContext value={selectAllLabel}>\n      <SelectLabelContext value={selectLabel}>\n        <ResizeLabelContext value={resizeLabel}>\n          <ResizableContext value={resizable}>\n            <StickyHeaderContext value={stickyHeader}>\n              {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n                  {table}\n                </RACResizableTableContainer> : table}\n            </StickyHeaderContext>\n          </ResizableContext>\n        </ResizeLabelContext>\n      </SelectLabelContext>\n    </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `emptyState` is what it shows when there are none — a table with\n * no rows and nothing to say in their place is a blank area with a header\n * over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n  emptyState,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody<T> {...props} renderEmptyState={emptyState === undefined ? undefined : emptyContent(emptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n  children,\n  selection = false,\n  ...props\n}: TableCellProps) {\n  const label = useContext(SelectLabelContext);\n  return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n      {cellContent(children, selection, label)}\n    </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n  children,\n  resizable = false,\n  selection = false,\n  ...props\n}: TableColumnProps) {\n  const label = useContext(SelectAllLabelContext);\n  const resizeLabel = useContext(ResizeLabelContext);\n  const resizableTable = useContext(ResizableContext);\n  const sticky = useContext(StickyHeaderContext);\n  return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n      {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n    </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n  return <RACTableFooter<T> {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n  }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n  const sticky = useContext(StickyHeaderContext);\n  return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x1j6faob x1q0q8m5 xso031l\"\n    },\n    1: {}\n  }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n  label = 'Loading more',\n  ...props\n}: TableLoadMoreProps) {\n  return <RACTableLoadMoreItem {...props} {...mergeStyles({\n    className: \"xdd8jsf\"\n  }, props)} ref={dropAriaLevel}>\n      <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n        <CollectionLoadMore label={label} size=\"24px\" />\n      </span>\n    </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n  return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ColumnRenderProps","ColumnResizerRenderProps","CellProps","RACCellProps","ColumnProps","RACColumnProps","RowProps","RACRowProps","TableBodyProps","RACTableBodyProps","TableFooterProps","RACTableFooterProps","TableHeaderProps","RACTableHeaderProps","TableLoadMoreItemProps","RACTableLoadMoreItemProps","TableProps","RACTableProps","ResizableTableContainerProps","RowRenderProps","TableBodyRenderProps","stylex","createContext","useContext","Cell","RACCell","Column","RACColumn","ColumnResizer","RACColumnResizer","ResizableTableContainer","RACResizableTableContainer","Row","RACRow","Table","RACTable","TableBody","RACTableBody","TableFooter","RACTableFooter","TableHeader","RACTableHeader","TableLoadMoreItem","RACTableLoadMoreItem","CollectionLoadMore","ArrowDownwardGlyph","ArrowUpwardGlyph","mergeStatefulStyles","mergeStyles","colors","sizing","spacing","stateLayerOpacity","typography","Checkbox","SelectAllLabelContext","SelectLabelContext","Omit","T","className","renderEmptyState","style","TableCellProps","children","selection","TableColumnProps","resizable","TableLoadMoreProps","label","onResize","onResizeEnd","resizeLabel","selectAllLabel","selectLabel","stickyHeader","TableRowProps","ResizeLabelContext","ResizableContext","StickyHeaderContext","cellContent","cellStyles","columnContent","state","sortArrowFor","sortDirection","resizerClassName","columnStyles","sticky","allowsSorting","dropAriaLevel","node","HTMLTableRowElement","removeAttribute","emptyContent","resizableContainerClassName","isResizing","isFocusVisible","rowStyles","selectionMode","isSelected","isDisabled","direction","undefined","t0","$","_c","T0","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","table","TableCell","TableColumn","resizableTable","0","1","TableLoadMore","TableRow","Body","Footer","Header","LoadMore"],"sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnRenderProps, ColumnResizerRenderProps, CellProps as RACCellProps, ColumnProps as RACColumnProps, RowProps as RACRowProps, TableBodyProps as RACTableBodyProps, TableFooterProps as RACTableFooterProps, TableHeaderProps as RACTableHeaderProps, TableLoadMoreItemProps as RACTableLoadMoreItemProps, TableProps as RACTableProps, ResizableTableContainerProps, RowRenderProps, TableBodyRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Cell as RACCell, Column as RACColumn, ColumnResizer as RACColumnResizer, ResizableTableContainer as RACResizableTableContainer, Row as RACRow, Table as RACTable, TableBody as RACTableBody, TableFooter as RACTableFooter, TableHeader as RACTableHeader, TableLoadMoreItem as RACTableLoadMoreItem } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { ArrowDownwardGlyph, ArrowUpwardGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\n\n// A grid of rows and columns, with sorting and selection. The design system\n// carries no data table page — it was dropped after Material Design 2 — so\n// the geometry comes from the archived one at\n// <https://m2.material.io/components/data-tables>, which is the page this\n// component is drawn from: a 56dp header row, 52dp body rows, 16dp of\n// padding on each side of a cell, a medium-weight header to set it apart\n// from the rows, and an arrow beside the name of the column being sorted.\n//\n// Its colour roles are the current system's rather than that page's, since\n// a table sits beside lists, cards and menus that all draw from the tokens\n// here. That means the row's state layers are the ones `src/row` uses — the\n// same hover, pressed and selected treatment a list row takes — so a\n// selected table row and a selected list row on one page cannot disagree.\n//\n// The row is not `src/row`, and that is the one place this departs from the\n// library's other collections. That module's row is a headline with a\n// supporting line and a slot at each end; a table row is a run of cells with\n// no such shape, and forcing one into the other would give every cell the\n// row's 56dp floor and body-large headline. The state layers are shared by\n// being written from the same tokens rather than by sharing the module.\n//\n// Four things are this component's own.\n//\n// **The rule between rows is drawn on the row, not on its cells.** A cell\n// cannot see whether its row is the first one, so a rule per cell either\n// doubles under the header or needs the row's position passed down. The\n// table collapses its borders, which is what lets a `<tr>` carry one.\n//\n// **A selecting table draws its checkbox where the call site puts it.**\n// `selection` on a column and on a cell renders the library's Checkbox in\n// React Aria's selection slot — the column's is select-all, the cell's is\n// that row's. It is a prop rather than an injected column because the header\n// and every row have to agree on how many columns there are, and only the\n// call site can keep that true.\n//\n// **A sortable column is the press target itself.** React Aria puts no\n// button inside the header cell; it makes the cell pressable and sets\n// `aria-sort` on it. So the arrow is content next to the name, and the\n// hover and pressed layers belong to the cell.\n//\n// **The header sticks only when asked.** A sticky header needs an opaque\n// background to scroll rows under, and that colour is only right when the\n// table is in something that scrolls. `stickyHeader` is what says so.\n//\n// **Resizing is asked for twice, and both are needed.** React Aria puts the\n// resize state on a container around the table and the handle inside a\n// column, so `resizable` on the table is what brings the container and\n// `resizable` on a column is what draws its handle. The archived page has no\n// resizer to take a treatment from — it predates the feature — so the handle\n// is the divider's own rule, thickening and taking the primary role while it\n// is dragged.\n//\n// **A resizable table stops filling its width.** The container sets\n// `table-layout: fixed` and `width: min-content` on the table as inline\n// styles, which no rule here can outrank; the container fills the width\n// instead and scrolls when the columns together are wider than it.\n//\n// One thing about React Aria's collection is worth knowing before writing a\n// call site. **A column's `id` and a row's `id` share one namespace**, and a\n// value used by both silently drops every column — the table then throws\n// \"Cell count must match column count\", naming the cells rather than the\n// duplicate key that caused it. Nothing here can catch it, since both ids\n// are the call site's to choose; the docstrings below say to keep them\n// apart, and the stories and tests use `col`-prefixed column ids so the two\n// sets cannot meet.\n\n// What the selection checkboxes are called. A context rather than a prop on\n// every column and cell, since it is the table's decision and repeating it\n// per row is how the two drift.\nconst SelectAllLabelContext = createContext('Select all');\nconst SelectLabelContext = createContext('Select');\ntype TableBodyProps<T extends object = object> = Omit<RACTableBodyProps<T>, 'className' | 'renderEmptyState' | 'style'> & {\n  /** A function may compute the class from the body's render state. */\n  className?: RACTableBodyProps<T>['className'];\n  /**\n   * What the table shows in place of rows when it has none: React Aria's own\n   * render function, under React Aria's own name, as List, ListBox, Tree and\n   * ChipGroup take it. What it returns is drawn in a row of its own spanning\n   * every column, inside the muted, padded box the table draws there.\n   */\n  renderEmptyState?: RACTableBodyProps<T>['renderEmptyState'];\n  /** A function may compute the style from the body's render state. */\n  style?: RACTableBodyProps<T>['style'];\n};\ntype TableCellProps = Omit<RACCellProps, 'children' | 'className' | 'style'> & {\n  /** What the cell holds. */\n  children?: ReactNode;\n  /** A function may compute the class from the cell's render state. */\n  className?: RACCellProps['className'];\n  /**\n   * Draws this row's selection checkbox instead of `children`. The row's own\n   * text is what names the row; the box inside it takes the table's\n   * `selectLabel`.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the cell's render state. */\n  style?: RACCellProps['style'];\n};\ntype TableColumnProps = {\n  /** The column's name. */\n  children?: ReactNode;\n  /** A function may compute the class from the column's render state. */\n  className?: RACColumnProps['className'];\n  /**\n   * Draws a handle at the column's trailing edge that drags its width. Needs\n   * the table's own `resizable` as well — React Aria keeps the resize state\n   * on a container around the table, and without it there is nothing for a\n   * handle to change. `defaultWidth`, `minWidth` and `maxWidth` are React\n   * Aria's and apply only inside that container.\n   */\n  resizable?: boolean;\n  /**\n   * Draws the select-all checkbox instead of `children`, for the column the\n   * rows put their own checkboxes in.\n   */\n  selection?: boolean;\n  /** A function may compute the style from the column's render state. */\n  style?: RACColumnProps['style'];\n} & Omit<RACColumnProps, 'children' | 'className' | 'style'>;\ntype TableFooterProps<T extends object = object> = RACTableFooterProps<T>;\ntype TableHeaderProps<T extends object = object> = RACTableHeaderProps<T>;\ntype TableLoadMoreProps = Omit<RACTableLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TableProps = Omit<RACTableProps, 'className' | 'style'> & {\n  /** A function may compute the class from the table's render state. */\n  className?: RACTableProps['className'];\n  /** Called as a column is dragged, with every column's width. */\n  onResize?: ResizableTableContainerProps['onResize'];\n  /** Called once a drag ends, with every column's width. */\n  onResizeEnd?: ResizableTableContainerProps['onResizeEnd'];\n  /**\n   * Lets columns marked `resizable` be dragged, by putting the table in the\n   * container React Aria keeps the resize state on. A resizable table sizes\n   * to its columns rather than to its parent, and that container is what\n   * fills the width and scrolls instead.\n   */\n  resizable?: boolean;\n  /**\n   * What the resize handle is called, for a screen reader. React Aria\n   * composes it with the column's own name.\n   * @default 'Resize column'\n   */\n  resizeLabel?: string;\n  /**\n   * What the select-all checkbox is called, for a screen reader.\n   * @default 'Select all'\n   */\n  selectAllLabel?: string;\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /**\n   * Holds the header row in place while the rows scroll under it. Needs the\n   * table inside something that scrolls; on a table that does not, it draws\n   * the same as without it.\n   */\n  stickyHeader?: boolean;\n  /** A function may compute the style from the table's render state. */\n  style?: RACTableProps['style'];\n};\ntype TableRowProps<T extends object = object> = Omit<RACRowProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the row's render state. */\n  className?: RACRowProps<T>['className'];\n  /** A function may compute the style from the row's render state. */\n  style?: RACRowProps<T>['style'];\n};\n\n// What the resize handles are called, for the same reason the selection\n// labels travel this way: it is the table's decision, and repeating it per\n// column is how the two drift.\nconst ResizeLabelContext = createContext('Resize column');\n\n// Whether the table brought the container. React Aria's resizer throws\n// outright without one — \"Wrap your <Table> in a <ResizableTableContainer>\",\n// naming a component a consumer of this library never writes — so a column\n// asking to resize inside a table that does not would take the whole page\n// down. It draws no handle instead.\nconst ResizableContext = createContext(false);\n\n// Whether the header sticks, so a column reaches it without every call site\n// repeating the table's own decision on each one.\nconst StickyHeaderContext = createContext(false);\n\n// What a body cell draws, and the classes it draws with. Written as calls\n// rather than inline at the props, which is what react-perf's\n// no-new-function-as-prop and jsx-no-jsx-as-prop are after; the React\n// Compiler memoises the results on their inputs.\n// The return type is written out rather than inferred, here and in the two\n// below: `ReactNode` is a union that includes a promise, and a function\n// inferred as returning one has to be `async`.\nfunction cellContent(children: ReactNode, selection: boolean, label: string): ReactNode {\n  if (!selection) {\n    return children;\n  }\n  return <Checkbox aria-label={label} slot=\"selection\" />;\n}\nfunction cellStyles(selection: boolean) {\n  return {\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    }\n  }[!!selection << 0];\n}\nfunction columnContent(children: ReactNode, selection: boolean, label: string, resizable: boolean, resizeLabel: string): RACColumnProps['children'] {\n  if (selection) {\n    return <Checkbox aria-label={label} slot=\"selection\" />;\n  }\n  // The handle is a sibling of the name rather than part of it: React Aria\n  // renders it as its own element, positioned against the cell's trailing\n  // edge, which the name's own box does not reach.\n  return (state: ColumnRenderProps): ReactNode => <>\n      <span className=\"x6s0dn4 x78zum5 x126z3so\">\n        {children}\n        {sortArrowFor(state.sortDirection)}\n      </span>\n      {resizable ? <RACColumnResizer aria-label={resizeLabel} className={resizerClassName} /> : null}\n    </>;\n}\nfunction columnStyles(selection: boolean, sticky: boolean) {\n  return (state: ColumnRenderProps) => ({\n    0: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm\"\n    },\n    2: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft\"\n    },\n    6: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x14s9m32 x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft\"\n    },\n    1: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    5: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    3: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 x1n2onr6 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    7: {\n      className: \"x9f619 x790zyz x1yc453h xxymvpz x1ded5cy x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ixd52e x13vifvy x7wzq59 x1vjfegm x19ddzpn xuxw1ft x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    }\n  })[!!sticky << 2 | !!selection << 1 | !!state.allowsSorting << 0];\n}\n\n// React Aria puts `aria-level` on the load-more row, and `aria-level` is only\n// valid on a row inside a `treegrid` — a grid's rows have no level. axe flags\n// it as `aria-conditional-attr`, and this library's stories run axe as an\n// error, so a table with a load-more row would fail on an attribute nothing\n// here asks for.\n//\n// It cannot be turned off through props: React Aria writes it after spreading\n// what the call site passed, so `aria-level={undefined}` is overwritten. The\n// attribute is taken off the element instead. React writes an attribute only\n// when its prop changes between renders, and this one is always 1, so the\n// removal holds rather than being undone by the next render. `load more` in\n// index.test.tsx pins that it is gone, which is what would notice if React\n// Aria stopped setting it or started varying it.\nfunction dropAriaLevel(node: HTMLTableRowElement | null) {\n  node?.removeAttribute('aria-level');\n}\n\n// What the body draws in place of rows: whatever the call site's function\n// returns, inside the box that pads and centres it. A call rather than a\n// function written at the prop, for the same reason the others are.\n//\n// The box is the one thing this adds to React Aria's prop, and the one way\n// the table differs from its siblings, which pass theirs straight through and\n// draw nothing around it. A table's empty state goes in a spanning cell that\n// is not this component's and carries no padding, so without the box the\n// content would sit against the table's edge with no room around it.\nfunction emptyContent(renderEmptyState: (state: TableBodyRenderProps) => ReactNode) {\n  // The return type is written out rather than inferred: `ReactNode` is a\n  // union that includes a promise, and a function inferred as returning one\n  // has to be `async`.\n  return (state: TableBodyRenderProps): ReactNode => <span className=\"x9f619 x1w5n3ug x1lliihq xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1lrxzt4 x790zyz x2b8uid\">{renderEmptyState(state)}</span>;\n}\n\n// The container's class. React Aria takes a plain string here rather than a\n// function of render state, since the container reports none — so this is a\n// call rather than the function form the other parts pass.\nfunction resizableContainerClassName() {\n  return {\n    className: \"x9f619 xh8yej3 xw2csxc\"\n  }.className ?? '';\n}\n\n// The handle's classes, from React Aria's own render state — it reports the\n// drag and the keyboard focus separately, and the two get one treatment.\nfunction resizerClassName(state: ColumnResizerRenderProps) {\n  return {\n    0: {\n      className: \"x1l12bh x5yr21d x9f619 xicojor x1i1rx1s x13vifvy xtijo5x x10l6tqk x5ve5x3\"\n    },\n    1: {\n      className: \"x5yr21d x9f619 xicojor x13vifvy xtijo5x x10l6tqk x5ve5x3 xnety89 xfo62xy\"\n    }\n  }[!!(state.isResizing || state.isFocusVisible) << 0].className ?? '';\n}\nfunction rowStyles(state: RowRenderProps) {\n  return {\n    0: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x83qkoq x1p2om7n xjbqb8w x1ypdohk\"\n    },\n    2: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    6: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn x1ypdohk xxwd9aw x1hei0q8 xp89om9 xscdzaa\"\n    },\n    1: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    5: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    7: {\n      className: \"xdd8jsf x12smttz x13fuv20 x1g31smg x178xt8z xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!(state.selectionMode !== 'none') << 2 | !!state.isSelected << 1 | !!state.isDisabled << 0];\n}\n\n// The arrow beside a sorted column's name. Nothing is drawn on a column that\n// is sortable but not currently sorted: the page puts the arrow next to the\n// column being sorted, and an arrow on every sortable column would say every\n// one of them was.\nfunction sortArrowFor(direction: 'ascending' | 'descending' | undefined) {\n  if (direction === undefined) {\n    return null;\n  }\n  return direction === 'ascending' ? <ArrowUpwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" /> : <ArrowDownwardGlyph className=\"xmix8c7 x2lah0s x1xp8n7a\" />;\n}\n\n/**\n * A grid of rows and columns. Sorting and selection are React Aria's: pass\n * `sortDescriptor` with `onSortChange` and mark the sortable columns\n * `allowsSorting`, and set `selectionMode` to `single` or `multiple` with\n * `selectedKeys` and `onSelectionChange`, or `defaultSelectedKeys`.\n *\n * ```tsx\n * <Table aria-label=\"Label\" selectionMode=\"multiple\">\n *   <Table.Header>\n *     <Table.Column selection />\n *     <Table.Column id=\"name\" isRowHeader>Label</Table.Column>\n *   </Table.Header>\n *   <Table.Body>\n *     <Table.Row id=\"first\">\n *       <Table.Cell selection />\n *       <Table.Cell>First item</Table.Cell>\n *     </Table.Row>\n *   </Table.Body>\n * </Table>\n * ```\n *\n * Composed from parts, since a cell takes arbitrary content: `Table.Header`,\n * `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell` and\n * `Table.Footer`. Name the table with `aria-label` or `aria-labelledby`, and\n * mark one column `isRowHeader` so a screen reader has something to read a\n * row by.\n *\n * The call site's `className` and `style` land on the table, which is the\n * element a layout positions.\n */\nfunction Table({\n  onResize,\n  onResizeEnd,\n  resizable = false,\n  resizeLabel = 'Resize column',\n  selectAllLabel = 'Select all',\n  selectLabel = 'Select',\n  stickyHeader = false,\n  ...props\n}: TableProps) {\n  const table = <RACTable {...props} {...mergeStatefulStyles({\n    className: \"x1mwwwfo x9f619 x139gbkf xpo2rfv x193rfdd x1hews6w xh8yej3 xn43zvd xv61bfh x1t137rt\"\n  }, props)} />;\n  return <SelectAllLabelContext value={selectAllLabel}>\n      <SelectLabelContext value={selectLabel}>\n        <ResizeLabelContext value={resizeLabel}>\n          <ResizableContext value={resizable}>\n            <StickyHeaderContext value={stickyHeader}>\n              {resizable ? <RACResizableTableContainer className={resizableContainerClassName()} onResize={onResize} onResizeEnd={onResizeEnd}>\n                  {table}\n                </RACResizableTableContainer> : table}\n            </StickyHeaderContext>\n          </ResizableContext>\n        </ResizeLabelContext>\n      </SelectLabelContext>\n    </SelectAllLabelContext>;\n}\n\n/**\n * The rows. `renderEmptyState` is what it shows when there are none — a table\n * with no rows and nothing to say in their place is a blank area with a\n * header over it.\n *\n * It carries no styles of its own, since every rule a body needs is drawn by\n * the rows inside it, so a `className` here lands on the `<tbody>` through\n * React Aria rather than through a merge.\n */\nfunction TableBody<T extends object = object>({\n  renderEmptyState,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody<T> {...props} renderEmptyState={renderEmptyState === undefined ? undefined : emptyContent(renderEmptyState)} />;\n}\n\n/**\n * One cell. `selection` draws this row's checkbox in place of whatever else\n * the cell would hold.\n */\nfunction TableCell({\n  children,\n  selection = false,\n  ...props\n}: TableCellProps) {\n  const label = useContext(SelectLabelContext);\n  return <RACCell {...props} {...mergeStatefulStyles(cellStyles(selection), props)}>\n      {cellContent(children, selection, label)}\n    </RACCell>;\n}\n\n/**\n * One column. `allowsSorting` is React Aria's and makes the header cell\n * itself the control that sorts; the arrow appears on the column the\n * `sortDescriptor` names. `isRowHeader` marks the column a screen reader\n * reads a row by.\n *\n * Its `id` shares a namespace with the rows', so give the two sets values\n * that cannot collide — a column and a row with one id between them leaves\n * the table with no columns at all.\n */\nfunction TableColumn({\n  children,\n  resizable = false,\n  selection = false,\n  ...props\n}: TableColumnProps) {\n  const label = useContext(SelectAllLabelContext);\n  const resizeLabel = useContext(ResizeLabelContext);\n  const resizableTable = useContext(ResizableContext);\n  const sticky = useContext(StickyHeaderContext);\n  return <RACColumn {...props} {...mergeStatefulStyles(columnStyles(selection, sticky), props)}>\n      {columnContent(children, selection, label, resizable && resizableTable, resizeLabel)}\n    </RACColumn>;\n}\n\n/**\n * A row under the body, for totals and the like. It is not part of the\n * selection or the keyboard navigation — React Aria keeps it out of both.\n */\nfunction TableFooter<T extends object = object>(props: TableFooterProps<T>) {\n  return <RACTableFooter<T> {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\"\n  }, props)} />;\n}\n\n/**\n * The header row, holding the columns, and the rule drawn under it — which\n * moves to the cells when the header sticks, since a row group's border does\n * not travel with cells `position: sticky` has lifted out of it.\n */\nfunction TableHeader<T extends object = object>(props: TableHeaderProps<T>) {\n  const sticky = useContext(StickyHeaderContext);\n  return <RACTableHeader<T> {...props} {...mergeStatefulStyles({\n    0: {\n      className: \"x1j6faob x1q0q8m5 xso031l\"\n    },\n    1: {}\n  }[!!sticky << 0], props)} />;\n}\n\n/**\n * The row the table shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`. It goes inside `Table.Body`, after the rows.\n */\nfunction TableLoadMore({\n  label = 'Loading more',\n  ...props\n}: TableLoadMoreProps) {\n  return <RACTableLoadMoreItem {...props} {...mergeStyles({\n    className: \"xdd8jsf\"\n  }, props)} ref={dropAriaLevel}>\n      <span className=\"x6s0dn4 x9f619 x78zum5 xl56j7k\">\n        <CollectionLoadMore label={label} size=\"24px\" />\n      </span>\n    </RACTableLoadMoreItem>;\n}\n\n/**\n * One row. Give every row an `id` — that is the key selection is reported\n * by, and it has to differ from every column's. `onAction` runs when the\n * row is pressed.\n */\nfunction TableRow<T extends object = object>(props: TableRowProps<T>) {\n  return <RACRow<T> {...props} {...mergeStatefulStyles(rowStyles, props)} />;\n}\nTable.Body = TableBody;\nTable.Cell = TableCell;\nTable.Column = TableColumn;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.LoadMore = TableLoadMore;\nTable.Row = TableRow;\nexport type { TableBodyProps, TableCellProps, TableColumnProps, TableFooterProps, TableHeaderProps, TableLoadMoreProps, TableProps, TableRowProps };\nexport default Table;"],"mappings":"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"}

package/dist/styles/overlay.js

@@ -29,7 +29,10 @@ const overlay = {
 		kKVMdj: "x97zbip",
 		kyAemX: "x16dv9tl",
 		kWkggS: "x1mjdul6",
+		kVAM5u: "x1w1tqly",
 		kaIpWk: "x62ce2h",
+		ksu8eU: "xx61lck",
+		kMzoRj: "x13rsnn2",
 		kGVxlE: "x1os83gw",
 		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",

package/dist/styles/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","k3XXqK","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kaIpWk","kGVxlE","kMwMTN","kORKVm","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kaIpWk: \"x62ce2h\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover and a menu.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AAkCA,MAAMS,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRY,QAAQ;EACRpB,OAAO;CACT;CACAqB,OAAO;EACLV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRvB,OAAO;CACT;AACF;AAOA,MAAMwB,UAAU;CACdC,QAAQ5B,QAAQM;CAChBuB,QAAQ7B,QAAQM;CAChBwB,MAAM9B,QAAQK;CACd0B,OAAO/B,QAAQI;CACf4B,KAAKhC,QAAQC;AACf;;;;;;;;;;AAiBA,SAASkC,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}
+{"version":3,"file":"overlay.js","names":["PopoverRenderProps","stylex","colors","motion","radii","shadows","spacing","FORCED_COLORS","fadeIn","scaleIn","overlay","fromBottom","k3nNDw","$$css","fromLeft","fromRight","fromTop","modalDialog","kZKoxP","kB7OPa","k1xSpc","kXwgrk","k3XXqK","popup","k44tkh","kKVMdj","kyAemX","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kGVxlE","kMwMTN","kORKVm","popupDialog","kOIVth","scrim","kpwlN0","kVAEAm","origins","bottom","center","left","right","top","OverlayAlign","OverlaySide","placementOf","side","align","const","popupOrigin","placement"],"sources":["../../src/styles/overlay.ts"],"sourcesContent":["import type { PopoverRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing } from '../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// What every overlay shares, drawn once. Popover's anchored surface and its\n// entry, Sheet's scrim, and the element that carries the dialog role inside\n// each of them; the coverage plan brings a dozen more overlays — Menu, Select,\n// ComboBox, Tooltip, the date pickers, Dialog — and each would otherwise have\n// written the same surface and the same scrim a second time. Geometry stays\n// with the component: how wide a popover is, which edge a sheet is pinned to,\n// where a dialog sits, are each overlay's own decision.\n//\n// Every one of these is portalled to the end of the body, which is why each\n// component takes a `container` prop and documents the same caveat: an app\n// that scopes its StyleX theme to a subtree has to point the portal inside it,\n// or the surface renders outside the theme and falls back to the tokens'\n// `prefers-color-scheme` default.\n//\n// Entry only, and no exit animation, for the same reason in every overlay:\n// React Aria keeps a closing surface mounted only while an animation is\n// running on it, and a popover in particular is dismissed far more often than\n// it is closed deliberately — usually by pressing something else, where a\n// lingering surface is in the way of whatever the press was for.\n\n// The scrim settles before the panel it sits behind arrives: shorter than\n// any panel's entry, so the two do not finish together.\nconst fadeIn = \"x18re5ia-B\";\n\n// An anchored surface grows from the edge it is anchored by rather than from\n// its own centre, which is what makes it read as coming out of the trigger.\n// The origin is a separate style, chosen from the placement React Aria\n// reports, so the same keyframes serve all four sides.\nconst scaleIn = \"x1k48ry3-B\";\nconst overlay = {\n  fromBottom: {\n    k3nNDw: \"x18ouj0k\",\n    $$css: true\n  },\n  fromLeft: {\n    k3nNDw: \"x1nf803f\",\n    $$css: true\n  },\n  fromRight: {\n    k3nNDw: \"xyibjs4\",\n    $$css: true\n  },\n  fromTop: {\n    k3nNDw: \"x1dp6rp6\",\n    $$css: true\n  },\n  modalDialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popup: {\n    k44tkh: \"xvhm28k x1u6grsq\",\n    kKVMdj: \"x97zbip\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1mjdul6\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x62ce2h\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kGVxlE: \"x1os83gw\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  popupDialog: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  scrim: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  }\n};\n\n// Which side the surface opened on, and the origin its entry grows from.\n// Keyed on the placement React Aria reports rather than the one asked for,\n// since the surface flips to the opposite side when there is no room on its\n// own; `center` is the placement React Aria reports for an anchor it could\n// not place beside, and grows from the top like the default.\nconst origins = {\n  bottom: overlay.fromTop,\n  center: overlay.fromTop,\n  left: overlay.fromRight,\n  right: overlay.fromLeft,\n  top: overlay.fromBottom\n};\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start';\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top';\n\n/**\n * React Aria's placement, from the side and the alignment a call site names.\n * Its own vocabulary pairs a side with `top`/`bottom` on the inline sides and\n * `start`/`end` on the block ones; a call site should not have to know which\n * of the two it is asking for, so this maps one onto the other.\n *\n * Shared by every anchored overlay rather than kept in one, since which side\n * a surface opens on is the same question for a popover and a menu.\n */\nfunction placementOf(side: OverlaySide, align: OverlayAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * The origin an anchored surface grows from, for the placement React Aria\n * reports through its render state. `null`, before the surface has been\n * placed, grows from the top as `bottom` does.\n */\nfunction popupOrigin(placement: PopoverRenderProps['placement']) {\n  return origins[placement ?? 'bottom'];\n}\nexport type { OverlayAlign, OverlaySide };\nexport { overlay, placementOf, popupOrigin };"],"mappings":";AAwCA,MAAMU,UAAU;CACdC,YAAY;EACVC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRF,QAAQ;EACRC,OAAO;CACT;CACAE,WAAW;EACTH,QAAQ;EACRC,OAAO;CACT;CACAG,SAAS;EACPJ,QAAQ;EACRC,OAAO;CACT;CACAI,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRrB,OAAO;CACT;CACAsB,aAAa;EACXhB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRe,QAAQ;EACRvB,OAAO;CACT;CACAwB,OAAO;EACLb,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;AACF;AAOA,MAAM2B,UAAU;CACdC,QAAQ/B,QAAQM;CAChB0B,QAAQhC,QAAQM;CAChB2B,MAAMjC,QAAQK;CACd6B,OAAOlC,QAAQI;CACf+B,KAAKnC,QAAQC;AACf;;;;;;;;;;AAiBA,SAASqC,YAAYC,MAAmBC,OAAqB;CAC3D,IAAIA,UAAU,UACZ,OAAOD;CAET,IAAIA,SAAS,SAASA,SAAS,UAC7B,OAAO,GAAGA,KAAI,GAAIC;CAEpB,OAAO,GAAGD,KAAI,GAAIC,UAAU,UAAU,QAAQ;AAChD;;;;;;AAOA,SAASE,YAAYC,WAA4C;CAC/D,OAAOb,QAAQa,aAAa;AAC9B"}

package/dist/styles/picker.js

@@ -13,11 +13,17 @@ const picker = {
 		$$css: true
 	},
 	popover: {
-		k87sOh: "x80663w xifftmu",
-		kLqNvP: "xhi6v0a xel0e7d",
+		kZKoxP: "x1poebcc",
+		kGVxlE: "x1os83gw x1l41d60",
+		kzqmXN: "xpxzbr4",
+		krVfgx: "xudx362",
+		k87sOh: "xbvrusa",
+		kt4wiu: "x1v0tev1",
+		kLqNvP: "x12sfaok",
+		kogj98: "xucn3ve",
+		kskxy: "xmjxpzh",
 		ks0D6T: "x1x1rfll x1493c6o",
-		kVAEAm: "x10l6tqk xrdyt6x",
-		k3aq6I: "x1c071of xd6mrmt",
+		kVAEAm: "x1mesnot",
 		$$css: true
 	},
 	triggerDisabled: {

package/dist/styles/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","names":["stylex","colors","media","spacing","stateLayerOpacity","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","k87sOh","kLqNvP","ks0D6T","kVAEAm","k3aq6I","triggerDisabled","kWkggS","kMwMTN","kkrTdU","triggerGlyph","kZKoxP","triggerClassName","state","isDisabled","props","chrome","ring","className"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    k87sOh: \"x80663w xifftmu\",\n    kLqNvP: \"xhi6v0a xel0e7d\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x10l6tqk xrdyt6x\",\n    k3aq6I: \"x1c071of xd6mrmt\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isDisabled && picker.triggerDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,iBAAiB;EACfC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,cAAc;EACZC,QAAQ;EACRd,QAAQ;EACRE,OAAO;CACT;AACF;AAKA,SAASa,iBAAiBC,OAEvB;CACD,OAAO7B,MAAaM,WAAW0B,QAAQ3B,MAAM4B,MAAMJ,MAAMC,cAAcvB,OAAOe,eAAe,CAAC,CAACY,aAAa;AAC9G"}
+{"version":3,"file":"picker.js","names":["stylex","colors","media","shadows","spacing","stateLayerOpacity","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","kZKoxP","kGVxlE","krVfgx","k87sOh","kt4wiu","kLqNvP","kogj98","kskxy","ks0D6T","kVAEAm","triggerDisabled","kWkggS","kMwMTN","kkrTdU","triggerGlyph","triggerClassName","state","isDisabled","props","chrome","ring","className"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, shadows, spacing, stateLayerOpacity } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    kZKoxP: \"x1poebcc\",\n    kGVxlE: \"x1os83gw x1l41d60\",\n    kzqmXN: \"xpxzbr4\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kogj98: \"xucn3ve\",\n    kskxy: \"xmjxpzh\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  },\n  triggerDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1gpw424\",\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isDisabled && picker.triggerDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMQ,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,iBAAiB;EACfC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,cAAc;EACZd,QAAQ;EACRJ,QAAQ;EACRE,OAAO;CACT;AACF;AAKA,SAASiB,iBAAiBC,OAEvB;CACD,OAAOlC,MAAaO,WAAW8B,QAAQ/B,MAAMgC,MAAMJ,MAAMC,cAAc3B,OAAOoB,eAAe,CAAC,CAACW,aAAa;AAC9G"}

package/dist/styles.css

@@ -388,6 +388,10 @@
       border-color: buttontext;
     }
 
+    .x1w1tqly.x1w1tqly {
+      border-color: canvastext;
+    }
+
     .xmnqt3w.xmnqt3w {
       border-color: graytext;
     }
@@ -1674,6 +1678,14 @@
     outline-color: var(--x1cjupv7);
   }
 
+  .x5ma03c {
+    outline-color: var(--x1ridy1o);
+  }
+
+  .x1wab145 {
+    outline-color: var(--x7dbk6n);
+  }
+
   .x2ssjo2 {
     outline-offset: -2px;
   }
@@ -2470,6 +2482,10 @@
       outline-offset: 2px;
     }
 
+    .xq4115o.xq4115o {
+      outline-style: dashed;
+    }
+
     .x1894zjx.x1894zjx {
       outline-style: none;
     }
@@ -2689,6 +2705,12 @@
     left: 0;
   }
 
+  @media (width < 600px) {
+    .xucn3ve.xucn3ve {
+      margin: auto;
+    }
+  }
+
   .xxkrg4w {
     margin-bottom: var(--x3km7fe);
   }
@@ -3167,6 +3189,10 @@
     .x9t1vth.x9t1vth {
       border-start-start-radius: var(--x1w5u0jm);
     }
+
+    .x1l41d60.x1l41d60 {
+      box-shadow: var(--x14ermby),0 0 0 100vmax color-mix(in srgb,var(--x1khq28e) 32%,transparent);
+    }
   }
 
   @media (width >= 840px) {
@@ -3222,12 +3248,16 @@
   }
 
   @media (width < 600px) {
-    .x1upgybz.x1upgybz {
-      inset-inline-start: 0;
+    .x1v0tev1.x1v0tev1 {
+      inset-inline-end: 0 !important;
+    }
+
+    .x12sfaok.x12sfaok {
+      inset-inline-start: 0 !important;
     }
 
-    .xel0e7d.xel0e7d {
-      inset-inline-start: 50%;
+    .x1upgybz.x1upgybz {
+      inset-inline-start: 0;
     }
 
     .x1khanjg.x1khanjg {
@@ -3238,12 +3268,8 @@
       line-height: var(--xuc6kgf);
     }
 
-    .xrdyt6x.xrdyt6x {
-      position: fixed;
-    }
-
-    .xd6mrmt.xd6mrmt {
-      transform: translate(-50%, -50%);
+    .x1mesnot.x1mesnot {
+      position: fixed !important;
     }
   }
 }
@@ -3258,6 +3284,10 @@
       border-top-style: solid;
     }
 
+    .xudx362.xudx362 {
+      bottom: 0 !important;
+    }
+
     .x1ju3lih.x1ju3lih {
       height: 100%;
     }
@@ -3265,6 +3295,10 @@
     .xxcmccx.xxcmccx {
       height: 56px;
     }
+
+    .x1poebcc.x1poebcc {
+      height: fit-content;
+    }
   }
 
   .x1mtdikz:before {
@@ -3280,6 +3314,10 @@
   }
 
   @media (width < 600px) {
+    .xmjxpzh.xmjxpzh {
+      max-height: calc(100dvh - 2 * var(--x3km7fe)) !important;
+    }
+
     .x11ijow0.x11ijow0 {
       max-height: calc(100dvh - 72px);
     }
@@ -3304,8 +3342,8 @@
       padding-top: 0;
     }
 
-    .xifftmu.xifftmu {
-      top: 50%;
+    .xbvrusa.xbvrusa {
+      top: 0 !important;
     }
 
     .xmpip4z.xmpip4z {
@@ -3315,6 +3353,10 @@
     .xwvxfow.xwvxfow {
       width: 100%;
     }
+
+    .xpxzbr4.xpxzbr4 {
+      width: fit-content;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",