@kanso-labs/kanso-ui 0.21.0 → 0.22.0

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

@@ -0,0 +1,50 @@
+import { CSSProperties } from "react";
+import { ColorAreaProps } from "react-aria-components";
+//#region src/components/color-area/index.d.ts
+type ColorAreaProps$1 = Omit<ColorAreaProps, 'children' | 'className' | 'style'> & {
+  /**
+   * Lands on the square around the plane, which is the element a layout
+   * positions and the one that carries its size.
+   */
+  className?: string;
+  /** Lands on the square around the plane, as `className` does. */
+  style?: CSSProperties;
+};
+/**
+ * Two channels of a colour as a plane, with a handle where they meet. The
+ * value is React Aria's: pass `value` with `onChange` to control it, or
+ * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,
+ * which this package re-exports.
+ *
+ * ```tsx
+ * <ColorArea
+ *   defaultValue="hsl(200, 100%, 50%)"
+ *   xChannel="saturation"
+ *   yChannel="lightness"
+ * />
+ * ```
+ *
+ * **`xChannel` and `yChannel` have to name channels the value's own space
+ * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so
+ * naming one against it throws rather than converting — pass `colorSpace` to
+ * convert it, or give the value in the space you mean to work in. The same
+ * trap `ColorSlider` documents.
+ *
+ * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria
+ * quietly draws the saturation and lightness plane instead, so a plane that
+ * will not fade is the only sign anything was ignored.
+ *
+ * React Aria names the handle "Color picker" and announces both channels;
+ * pass `aria-label` to say what the plane is for instead.
+ *
+ * The call site's `className` and `style` land on the square around the
+ * plane rather than on the plane itself, so setting an `inlineSize` is what
+ * resizes one — and it stays square, since two channels sharing a box want
+ * equal travel. React Aria's function forms are not taken here for the same
+ * reason `ColorSwatch` does not take them: the element they would read
+ * state for is not the one a layout reaches.
+ */
+declare function ColorArea$1({ className, isDisabled, style, ...props }: ColorAreaProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorAreaProps$1 as ColorAreaProps, ColorArea$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,63 @@
+import { mergeStyles } from "../../styles/merge.js";
+import { thumbClassName } from "../../styles/color.js";
+import { jsx } from "react/jsx-runtime";
+import { ColorArea, ColorThumb } from "react-aria-components";
+//#region src/components/color-area/index.tsx
+/**
+* Two channels of a colour as a plane, with a handle where they meet. The
+* value is React Aria's: pass `value` with `onChange` to control it, or
+* `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,
+* which this package re-exports.
+*
+* ```tsx
+* <ColorArea
+*   defaultValue="hsl(200, 100%, 50%)"
+*   xChannel="saturation"
+*   yChannel="lightness"
+* />
+* ```
+*
+* **`xChannel` and `yChannel` have to name channels the value's own space
+* has.** A hex or `rgb()` value parses as RGB, which has no saturation, so
+* naming one against it throws rather than converting — pass `colorSpace` to
+* convert it, or give the value in the space you mean to work in. The same
+* trap `ColorSlider` documents.
+*
+* **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria
+* quietly draws the saturation and lightness plane instead, so a plane that
+* will not fade is the only sign anything was ignored.
+*
+* React Aria names the handle "Color picker" and announces both channels;
+* pass `aria-label` to say what the plane is for instead.
+*
+* The call site's `className` and `style` land on the square around the
+* plane rather than on the plane itself, so setting an `inlineSize` is what
+* resizes one — and it stays square, since two channels sharing a box want
+* equal travel. React Aria's function forms are not taken here for the same
+* reason `ColorSwatch` does not take them: the element they would read
+* state for is not the one a layout reaches.
+*/
+function ColorArea$1({ className, isDisabled = false, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...mergeStyles({
+			0: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3" },
+			1: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9" }
+		}[!!isDisabled << 0], {
+			className,
+			style
+		}),
+		children: /* @__PURE__ */ jsx(ColorArea, {
+			isDisabled,
+			...props,
+			...{
+				0: { className: "x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3" },
+				1: { className: "x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc" }
+			}[!!isDisabled << 0],
+			children: /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })
+		})
+	});
+}
+//#endregion
+export { ColorArea$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-area/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorAreaProps as RACColorAreaProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorArea as RACColorArea, ColorThumb as RACColorThumb } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Two channels of a colour at once, as a plane: one runs along the inline\n// axis and one along the block axis, and the handle sits where they meet.\n// React Aria paints both gradients on the plane's own inline `background`\n// and moves the handle in two axes, so what is here is the plane's shape and\n// the handle `ColorSlider` already draws, from `src/styles/color.ts`.\n//\n// The design carries no page for this, so the two choices below are the\n// library's own.\n//\n// **It is square, and takes the width it is given.** A plane has no natural\n// size, and a box that was not square would give its two channels unequal\n// travel — the same drag would move one further than the other, which is a\n// difference a reader cannot see and would feel as the control being wrong.\n//\n// **It carries no chequer, unlike a swatch or a colour slider's alpha\n// track.** Those two show the surface behind them where a colour thins out,\n// and a plane does not: React Aria stacks its gradients so the topmost is\n// opaque across the whole box, so nothing laid behind the plane is ever\n// seen. A chequer here was written first and then taken out, because it\n// could not be made to show under any pairing tried — including the RGB\n// alpha pairing whose gradient really does carry a `rgba(0, 0, 0, 0)` stop.\n//\n// **Alpha is a channel here only in RGB, and even there it does not thin\n// the plane.** Asked for it in HSL, React Aria draws the saturation and\n// lightness plane instead and says nothing — the gradients come out\n// identical to the pair it would have drawn anyway. It does not throw the\n// way an unknown channel does, so the only sign is a plane that will not\n// change, which is why it is written down here.\n\ntype ColorAreaProps = Omit<RACColorAreaProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Lands on the square around the plane, which is the element a layout\n   * positions and the one that carries its size.\n   */\n  className?: string;\n  /** Lands on the square around the plane, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * Two channels of a colour as a plane, with a handle where they meet. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,\n * which this package re-exports.\n *\n * ```tsx\n * <ColorArea\n *   defaultValue=\"hsl(200, 100%, 50%)\"\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n *\n * **`xChannel` and `yChannel` have to name channels the value's own space\n * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so\n * naming one against it throws rather than converting — pass `colorSpace` to\n * convert it, or give the value in the space you mean to work in. The same\n * trap `ColorSlider` documents.\n *\n * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria\n * quietly draws the saturation and lightness plane instead, so a plane that\n * will not fade is the only sign anything was ignored.\n *\n * React Aria names the handle \"Color picker\" and announces both channels;\n * pass `aria-label` to say what the plane is for instead.\n *\n * The call site's `className` and `style` land on the square around the\n * plane rather than on the plane itself, so setting an `inlineSize` is what\n * resizes one — and it stays square, since two channels sharing a box want\n * equal travel. React Aria's function forms are not taken here for the same\n * reason `ColorSwatch` does not take them: the element they would read\n * state for is not the one a layout reaches.\n */\nfunction ColorArea({\n  className,\n  isDisabled = false,\n  style,\n  ...props\n}: ColorAreaProps) {\n  return <div {...mergeStyles({\n    0: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3\"\n    },\n    1: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorArea isDisabled={isDisabled} {...props} {...{\n      0: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3\"\n      },\n      1: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc\"\n      }\n    }[!!isDisabled << 0]}>\n        <RACColorThumb className={thumbClassName} />\n      </RACColorArea>\n    </div>;\n}\nexport type { ColorAreaProps };\nexport default ColorArea;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAS,YAAU,EACjB,WACA,aAAa,OACb,OACA,GAAG,SACc;CACjB,OAAO,oBAAC,OAAD;EAAK,GAAI,YAAY;GAC1B,GAAG,EACD,WAAW,kCACb;GACA,GAAG,EACD,WAAW,2CACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EACG,UAAA,oBAAC,WAAD;GAA0B;GAAY,GAAI;GAAO,GAAI;IACrD,GAAG,EACD,WAAW,kDACb;IACA,GAAG,EACD,WAAW,mDACb;GACF,EAAE,CAAC,CAAC,cAAc;GACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;EAC7B,CAAA;CACX,CAAA;AACT"}

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

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { FieldLabel } from "../../field/index.js";
+import { thumbClassName } from "../../styles/color.js";
 import { chequer } from "../../styles/chequer.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorSlider, ColorThumb, SliderOutput, SliderTrack } from "react-aria-components";
@@ -63,18 +64,6 @@ function ColorSlider$1({ isDisabled = false, label, showValue = true, ...props$1
 		})]
 	});
 }
-function thumbClassName(state) {
-	return {
-		0: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7" },
-		4: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59" },
-		2: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s" },
-		6: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s" },
-		1: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc" },
-		5: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc" },
-		3: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc" },
-		7: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc" }
-	}[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? "";
-}
 //#endregion
 export { ColorSlider$1 as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorThumbRenderProps, ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\n\n// The handle's classes, from React Aria's render state. StyleX cannot target\n// `[data-dragging]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// `dragging` is applied after `focused`, and StyleX replaces a property\n// whole, so a handle being dragged takes the lifted shadow rather than\n// keeping the resting ring under it.\nfunction thumbClassName(state: ColorThumbRenderProps) {\n  return {\n    0: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7\"\n    },\n    4: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59\"\n    },\n    2: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s\"\n    },\n    6: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s\"\n    },\n    1: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc\"\n    },\n    5: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc\"\n    },\n    7: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc\"\n    }\n  }[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? '';\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":";;;;;;;AAsCA,MAAM,SAAS;CACb,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAS,cAAY,EACnB,aAAa,OACb,OACA,YAAY,MACZ,GAAG,WACgB;CACnB,OAAO,qBAAC,aAAD;EAA4B;EAAY,GAAI;EAAO,GAAI,oBAAoB,EAChF,WAAW,yCACb,GAAG,OAAK;EAFD,UAAA,CAGH,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UAAU,KAAA,IAAY,OAAO,oBAAC,YAAD;IAAY,WAAU;IAA+C,UAAA;GAAkB,CAAA,GACpH,YAAY,oBAAC,cAAD,EAAiB,WAAU,qDAAoD,CAAA,IAAM,IAC/F;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,GAAI,MAAa,QAAQ,QAAQ,OAAO,aAAa,cAAc,OAAO,mBAAmB;GAChG,UAAA,oBAAC,aAAD;IAAgB,GAAI;KACpB,GAAG,EACD,WAAW,8EACb;KACA,GAAG,EACD,WAAW,8EACb;IACF,EAAE,CAAC,CAAC,cAAc;IACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;GAC3B,CAAA;EACb,CAAA,CACS;;AACpB;AASA,SAAS,eAAe,OAA8B;CACpD,OAAO;EACL,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,uHACb;EACA,GAAG,EACD,WAAW,sHACb;CACF,EAAE,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":";;;;;;;;AAuCA,MAAM,SAAS;CACb,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAS,cAAY,EACnB,aAAa,OACb,OACA,YAAY,MACZ,GAAG,WACgB;CACnB,OAAO,qBAAC,aAAD;EAA4B;EAAY,GAAI;EAAO,GAAI,oBAAoB,EAChF,WAAW,yCACb,GAAG,OAAK;EAFD,UAAA,CAGH,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UAAU,KAAA,IAAY,OAAO,oBAAC,YAAD;IAAY,WAAU;IAA+C,UAAA;GAAkB,CAAA,GACpH,YAAY,oBAAC,cAAD,EAAiB,WAAU,qDAAoD,CAAA,IAAM,IAC/F;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,GAAI,MAAa,QAAQ,QAAQ,OAAO,aAAa,cAAc,OAAO,mBAAmB;GAChG,UAAA,oBAAC,aAAD;IAAgB,GAAI;KACpB,GAAG,EACD,WAAW,8EACb;KACA,GAAG,EACD,WAAW,8EACb;IACF,EAAE,CAAC,CAAC,cAAc;IACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;GAC3B,CAAA;EACb,CAAA,CACS;;AACpB"}

package/dist/components/disclosure/index.js

@@ -88,7 +88,7 @@ function DisclosureHeader({ children, headingLevel = 3, leading, supporting }) {
 		level: headingLevel,
 		className: "x1qlqyl8 x1pd3egz x1ghz6dp",
 		children: /* @__PURE__ */ jsx(Button, {
-			className: headerClassName,
+			className: headerClassName(supporting),
 			slot: "trigger",
 			children: headerContent(children, leading, supporting, state?.isExpanded === true)
 		})
@@ -149,8 +149,8 @@ function DisclosurePanel$1(t0) {
 	} else t6 = $[10];
 	return t6;
 }
-function headerClassName(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, state.isDisabled && rowStyles.disabled).className ?? "";
+function headerClassName(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== void 0 && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? "";
 }
 function headerContent(children, leading, supporting, isExpanded) {
 	return (state) => /* @__PURE__ */ jsx(RowContent, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName} slot=\"trigger\">\n        {headerContent(children, leading, supporting, state?.isExpanded === true)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\nfunction headerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n      {children}\n    </RowContent>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","children"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\">\n        {headerContent(children, leading, supporting, state?.isExpanded === true)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n      {children}\n    </RowContent>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ import CheckboxGroup, { CheckboxGroupProps } from "./checkbox-group/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
 import ChipGroup, { ChipGroupProps } from "./chip-group/index.js";
 import Code, { CodeProps } from "./code/index.js";
+import ColorArea, { ColorAreaProps } from "./color-area/index.js";
 import ColorSlider, { ColorSliderProps } from "./color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./color-swatch/index.js";
 import ColorSwatchPicker, { ColorSwatchPickerProps } from "./color-swatch-picker/index.js";
@@ -63,4 +64,4 @@ import TokenField, { TokenFieldProps } from "./token-field/index.js";
 import Toolbar, { ToolbarProps } from "./toolbar/index.js";
 import Tooltip, { TooltipProps } from "./tooltip/index.js";
 import Tree, { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps };

package/dist/components/list/index.js

@@ -20,8 +20,8 @@ function itemContent(children, leading, supporting, trailing, selectLabel) {
 		children
 	});
 }
-function itemStyles(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
 }
 /**
 * The selection checkbox, then whatever the row was given. Its return type is
@@ -82,7 +82,7 @@ function ListItem(t0) {
 		$[1] = textValue;
 		$[2] = t1;
 	} else t1 = $[2];
-	const t2 = mergeStatefulStyles(itemStyles, props);
+	const t2 = mergeStatefulStyles(itemStyles(supporting), props);
 	let t3;
 	if ($[3] !== children || $[4] !== leading || $[5] !== selectLabel || $[6] !== supporting || $[7] !== trailing) {
 		t3 = itemContent(children, leading, supporting, trailing, selectLabel);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, '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 ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\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  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: GridListItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <RACGridListHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListItemProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\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} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, '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 ListProps<T extends object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\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  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: GridListItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: GridListItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing, selectLabel)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <RACGridListHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\n\n// What the row is worth as text, for the thing React Aria does with a row's\n// words rather than its element: typeahead. It reads that off the children\n// when they are a string and finds nothing when they are not — and a row\n// here is always an element, since it wraps its headline. So a plain-string\n// headline becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListItemProps, ListLoadMoreProps, ListProps, ListSectionProps };\nexport default List;"],"mappings":"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"}

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

@@ -17,8 +17,8 @@ function itemContent(children, leading, supporting, trailing) {
 		children
 	});
 }
-function itemStyles(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
 }
 /**
 * A list of options one or more of which can be selected. Selection is React
@@ -83,7 +83,7 @@ function ListBoxItem$1(t0) {
 			$[11] = t1;
 		} else t1 = $[11];
 		t2 = props;
-		t3 = mergeStatefulStyles(itemStyles, props);
+		t3 = mergeStatefulStyles(itemStyles(supporting), props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\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} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, '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 ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: ListBoxItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["props","header","children"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\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} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, '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 ListBoxProps<T extends object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: ListBoxItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n  }, props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      {itemContent(children, leading, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}

package/dist/components/list-item/index.d.ts

@@ -24,14 +24,15 @@ type ListItemProps = {
 } & HTMLAttributes<HTMLElement>;
 /**
  * A static row: the row every list draws, on its own, as the lists spec page
- * gives it — a 56px floor, a body-large headline and a body-medium
- * supporting line. An `overline` puts a line above the headline instead of
- * below it, and an overline with a supporting line makes the page's
- * three-line item: an 88px floor, with the leading and trailing slots held
- * at the top rather than centred. The layout and the states are the row
- * module's in `src/row`, shared with every collection item; what is here is
- * the element around them — a `<div>` that presents, or a `<button>` that
- * ripples — and the props that fill the slots.
+ * gives it — a 56px one-line container, a body-large headline and a
+ * body-medium supporting line. A second line takes it to the page's 72px
+ * two-line container; an `overline` puts that second line above the headline
+ * instead of below it, and an overline with a supporting line makes the
+ * page's three-line item, an 88px container with the leading and trailing
+ * slots held at the top rather than centred. The layout and the states are
+ * the row module's in `src/row`, shared with every collection item; what is
+ * 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, overline, supporting, trailing, ...props }: ListItemProps): import("react").JSX.Element;
 //#endregion

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

@@ -7,18 +7,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
 /**
 * A static row: the row every list draws, on its own, as the lists spec page
-* gives it — a 56px floor, a body-large headline and a body-medium
-* supporting line. An `overline` puts a line above the headline instead of
-* below it, and an overline with a supporting line makes the page's
-* three-line item: an 88px floor, with the leading and trailing slots held
-* at the top rather than centred. The layout and the states are the row
-* module's in `src/row`, shared with every collection item; what is here is
-* the element around them — a `<div>` that presents, or a `<button>` that
-* ripples — and the props that fill the slots.
+* gives it — a 56px one-line container, a body-large headline and a
+* body-medium supporting line. A second line takes it to the page's 72px
+* two-line container; an `overline` puts that second line above the headline
+* instead of below it, and an overline with a supporting line makes the
+* page's three-line item, an 88px container with the leading and trailing
+* slots held at the top rather than centred. The layout and the states are
+* the row module's in `src/row`, shared with every collection item; what is
+* here is the element around them — a `<div>` that presents, or a `<button>`
+* that ripples — and the props that fill the slots.
 */
 function ListItem({ children, interactive = false, leading, overline, supporting, trailing, ...props$1 }) {
 	const ripple = useRipple(interactive);
-	const threeLine = overline !== void 0 && supporting !== void 0;
+	const extraLines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
+	const twoLine = extraLines === 1;
+	const threeLine = extraLines === 2;
 	const content = /* @__PURE__ */ jsx(RowContent, {
 		leading,
 		overline,
@@ -28,14 +31,14 @@ function ListItem({ children, interactive = false, leading, overline, supporting
 	});
 	if (!interactive) return /* @__PURE__ */ jsx("div", {
 		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, threeLine && rowStyles.threeLine), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: content
 	});
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		...ripple.handlers,
 		...props$1,
-		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, threeLine && rowStyles.threeLine), props$1),
+		...mergeStyles(props(rowStyles.base, rowStyles.list, rowStyles.interactive, twoLine && rowStyles.twoLine, threeLine && rowStyles.threeLine), props$1),
 		children: [content, ripple.surface]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 floor, a body-large headline and a body-medium\n * supporting line. An `overline` puts a line above the headline instead of\n * below it, and an overline with a supporting line makes the page's\n * three-line item: an 88px floor, with the leading and trailing slots held\n * at the top rather than centred. The layout and the states are the row\n * module's in `src/row`, shared with every collection item; what is here is\n * the element around them — a `<div>` that presents, or a `<button>` that\n * ripples — and the props that fill the slots.\n */\nfunction ListItem({\n  children,\n  interactive = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\n\n  // The page's three-line item is an overline, a headline and a supporting\n  // line, and it is the only row whose slots move. Read from the content\n  // rather than taken as a prop: a row holding all three lines already says\n  // it is three lines, and a word for it would be a second place to get it\n  // wrong. A supporting line that wraps grows the row past 88 on its own and\n  // keeps its slots centred, which is the page's two-line item made taller\n  // rather than a three-line one.\n  const threeLine = overline !== undefined && supporting !== undefined;\n  const content = <RowContent leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n  if (!interactive) {\n    return <div {...props} {...mergeStyles(stylex.props(rowStyles.base, rowStyles.list, 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, threeLine && rowStyles.threeLine), props)}>\n      {content}\n      {ripple.surface}\n    </button>;\n}\nexport type { ListItemProps };\nexport default ListItem;"],"mappings":";;;;;;;;;;;;;;;;;;AAwCA,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,UACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CASvD,MAAM,YAAY,aAAa,KAAA,KAAa,eAAe,KAAA;CAC3D,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAmB;EAAsB;EAAsB;EAC/F;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,aAAa,UAAU,SAAS,GAAG,OAAK;EACvH,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,aAAa,aAAa,UAAU,SAAS,GAAG,OAAK;EAAlL,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}
+{"version":3,"file":"index.js","names":[],"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  overline,\n  supporting,\n  trailing,\n  ...props\n}: ListItemProps) {\n  const ripple = useRipple<HTMLButtonElement>(interactive);\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} {...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,SAAS,SAAS,EAChB,UACA,cAAc,OACd,SACA,UACA,YACA,UACA,GAAG,WACa;CAChB,MAAM,SAAS,UAA6B,WAAW;CAWvD,MAAM,cAAc,aAAa,KAAA,IAAY,IAAI,MAAM,eAAe,KAAA,IAAY,IAAI;CACtF,MAAM,UAAU,eAAe;CAC/B,MAAM,YAAY,eAAe;CACjC,MAAM,UAAU,oBAAC,YAAD;EAAqB;EAAmB;EAAsB;EAAsB;EAC/F;CACS,CAAA;CACd,IAAI,CAAC,aACH,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EACrJ,UAAA;CACE,CAAA;CAET,OAAO,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,YAAY,MAAa,UAAU,MAAM,UAAU,MAAM,UAAU,aAAa,WAAW,UAAU,SAAS,aAAa,UAAU,SAAS,GAAG,OAAK;EAAhN,UAAA,CACF,SACA,OAAO,OACF;;AACZ"}

package/dist/components/tree/index.js

@@ -39,8 +39,8 @@ function itemContent(headline, leading, supporting, trailing, selectLabel) {
 		children: headline
 	});
 }
-function itemStyles(state) {
-	return props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+function itemStyles(supporting) {
+	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== void 0 && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
 }
 /**
 * The caret, the selection checkbox, then whatever the row was given. Its
@@ -132,7 +132,7 @@ function TreeItem$1(t0) {
 		$[1] = textValue;
 		$[2] = t1;
 	} else t1 = $[2];
-	const t2 = mergeStatefulStyles(itemStyles, props);
+	const t2 = mergeStatefulStyles(itemStyles(supporting), props);
 	let t3;
 	if ($[3] !== headline || $[4] !== leading || $[5] !== selectLabel || $[6] !== supporting || $[7] !== trailing) {
 		t3 = itemContent(headline, leading, supporting, trailing, selectLabel);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","props","header"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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 TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\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  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\nfunction itemStyles(state: TreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["children","props","header"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, '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 TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\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  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import CheckboxGroup, { CheckboxGroupProps } from "./components/checkbox-group/i
 import Chip, { ChipProps } from "./components/chip/index.js";
 import ChipGroup, { ChipGroupProps } from "./components/chip-group/index.js";
 import Code, { CodeProps } from "./components/code/index.js";
+import ColorArea, { ColorAreaProps } from "./components/color-area/index.js";
 import ColorSlider, { ColorSliderProps } from "./components/color-slider/index.js";
 import ColorSwatch, { ColorSwatchProps } from "./components/color-swatch/index.js";
 import ColorSwatchPicker, { ColorSwatchPickerProps } from "./components/color-swatch-picker/index.js";
@@ -68,4 +69,4 @@ import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, Key, ListLayout, PressEvent, Pressable, RouterProvider, Selection, SortDescriptor, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
 import "./styles.css";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type Key, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, type AppBarProps, Autocomplete, type AutocompleteProps, Avatar, type AvatarProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, Code, type CodeProps, Collection, ColorArea, type ColorAreaProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ComboBox, type ComboBoxProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, DIRECTORY_DRAG_TYPE, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, type DisclosureProps, DropZone, type DropZoneProps, Feed, type FeedProps, FileTrigger, type FileTriggerProps, Focusable, Form, type FormProps, GridLayout, I18nProvider, IconButton, type IconButtonProps, type Key, Keycap, type KeycapProps, Link, type LinkProps, List, ListBox, type ListBoxProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLayout, type ListProps, Menu, type MenuProps, Meter, type MeterProps, NavigationTree, type NavigationTreeHeaderProps, type NavigationTreeItemProps, type NavigationTreeProps, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverProps, type PressEvent, Pressable, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, RouterProvider, SearchField, type SearchFieldProps, SegmentedButton, type SegmentedButtonProps, type SegmentedButtonSegmentProps, Select, type SelectProps, type Selection, Separator, type SeparatorProps, Sheet, type SheetProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type SortDescriptor, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableFooterProps, type TableHeaderProps, TableLayout, type TableProps, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TokenField, type TokenFieldProps, TokenFieldValue, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Tree, type TreeHeaderProps, type TreeItemProps, type TreeLoadMoreProps, type TreeProps, type TreeSectionProps, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/index.js

@@ -13,6 +13,7 @@ import CheckboxGroup from "./components/checkbox-group/index.js";
 import Chip from "./components/chip/index.js";
 import ChipGroup from "./components/chip-group/index.js";
 import Code from "./components/code/index.js";
+import ColorArea from "./components/color-area/index.js";
 import ColorSlider from "./components/color-slider/index.js";
 import ColorSwatch from "./components/color-swatch/index.js";
 import ColorSwatchPicker from "./components/color-swatch-picker/index.js";
@@ -67,4 +68,4 @@ import { collectionSizes } from "./layout.js";
 import { useDragAndDrop } from "./drag/hooks.js";
 import { Collection, DIRECTORY_DRAG_TYPE, Focusable, GridLayout, I18nProvider, ListLayout, Pressable, RouterProvider, TableLayout, TokenFieldValue, Virtualizer, VisuallyHidden, WaterfallLayout, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDrop, useFilter, useListData, useLocale, useTreeData } from "./react-aria.js";
 import "./styles.css";
-export { AppBar, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorSlider, ColorSwatch, ColorSwatchPicker, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, DropZone, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListDetail, ListItem, ListLayout, Menu, Meter, NavigationTree, NumberField, Popover, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SegmentedButton, Select, Separator, Sheet, Slider, Snackbar, Stack, SupportingPane, Switch, Table, TableLayout, Tabs, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };
+export { AppBar, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, ComboBox, Container, CopyField, Currency, DIRECTORY_DRAG_TYPE, DateField, DatePicker, DateRangePicker, Dialog, Disclosure, DisclosureGroup, DropZone, Feed, FileTrigger, Focusable, Form, GridLayout, I18nProvider, IconButton, Keycap, Link, List, ListBox, ListDetail, ListItem, ListLayout, Menu, Meter, NavigationTree, NumberField, Popover, Pressable, ProductIcon, ProgressIndicator, Radio, RadioGroup, RangeCalendar, RouterProvider, SearchField, SegmentedButton, Select, Separator, Sheet, Slider, Snackbar, Stack, SupportingPane, Switch, Table, TableLayout, Tabs, Tag, Text, TextArea, TextField, TimeField, TokenField, TokenFieldValue, Toolbar, Tooltip, Tree, Virtualizer, VisuallyHidden, WaterfallLayout, collectionSizes, getColorChannels, isDirectoryDropItem, isFileDropItem, isTextDropItem, parseColor, useAsyncList, useDrag, useDragAndDrop, useDrop, useFilter, useListData, useLocale, useTreeData };

package/dist/layout.d.ts

@@ -24,12 +24,8 @@ declare const collectionSizes: {
   readonly dropIndicator: 2;
   /** A `List`, `ListBox` or `Tree` row with a headline alone. */
   readonly listRow: 56;
-  /**
-   * A row with a headline and a supporting line. The lists page names 72dp
-   * for its two-line item; what the row comes to is 70, since its floor is a
-   * minimum and the two lines plus the row's own padding decide the rest.
-   */
-  readonly listRowTwoLine: 70;
+  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */
+  readonly listRowTwoLine: 72;
   /** A `Menu` item, which the menus page gives a shorter floor than a list's. */
   readonly menuRow: 48;
   /** A `List.Section` or `Tree.Section` heading. */

package/dist/layout.js

@@ -24,12 +24,8 @@ const collectionSizes = {
 	dropIndicator: 2,
 	/** A `List`, `ListBox` or `Tree` row with a headline alone. */
 	listRow: 56,
-	/**
-	* A row with a headline and a supporting line. The lists page names 72dp
-	* for its two-line item; what the row comes to is 70, since its floor is a
-	* minimum and the two lines plus the row's own padding decide the rest.
-	*/
-	listRowTwoLine: 70,
+	/** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */
+	listRowTwoLine: 72,
 	/** A `Menu` item, which the menus page gives a shorter floor than a list's. */
 	menuRow: 48,
 	/** A `List.Section` or `Tree.Section` heading. */

package/dist/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","names":[],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.ts` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is not always the height the spec\n// page names. `listRowTwoLine` is the one that differs today: the lists page\n// gives a two-line item 72dp and the row comes to 70, since its floor is a\n// minimum and the two lines plus the row's own padding are what decide the\n// rest. A virtualizer needs what is drawn rather than what is specified, so\n// the measured number is the one here.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /** A `List`, `ListBox` or `Tree` row with a headline alone. */\n  listRow: 56,\n  /**\n   * A row with a headline and a supporting line. The lists page names 72dp\n   * for its two-line item; what the row comes to is 70, since its floor is a\n   * minimum and the two lines plus the row's own padding decide the rest.\n   */\n  listRowTwoLine: 70,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,kBAAkB;;CAEtB,eAAe;;CAEf,SAAS;;;;;;CAMT,gBAAgB;;CAEhB,SAAS;;CAET,gBAAgB;;CAEhB,gBAAgB;;CAEhB,UAAU;AACZ"}
+{"version":3,"file":"layout.js","names":[],"sources":["../src/layout.ts"],"sourcesContent":["// What the collections actually measure, for the layouts a virtualized one is\n// given. React Aria's `ListLayout`, `GridLayout`, `TableLayout` and\n// `WaterfallLayout` position rows from a size rather than from the DOM, so a\n// virtualized List, ListBox, Table or Tree has to be told how tall its rows\n// are — and a number guessed at the call site puts every row in the wrong\n// place the moment a component's own height changes.\n//\n// These are that number, and `src/layout.test.ts` renders each collection and\n// measures it, so a constant here cannot drift from what the component draws.\n//\n// They are the heights as rendered, which is what a virtualizer needs — not\n// what a spec page names, where the two can differ. They agree today.\n\n/**\n * The heights the collections draw, in pixels, for a virtualized one's\n * layout options.\n *\n * ```tsx\n * <Virtualizer\n *   layout={ListLayout}\n *   layoutOptions={{\n *     rowSize: collectionSizes.listRow,\n *     headingSize: collectionSizes.sectionHeading,\n *   }}\n * >\n *   <List aria-label=\"Label\" items={items}>{renderItem}</List>\n * </Virtualizer>\n * ```\n *\n * A row that wraps is taller than any of these, so a collection whose content\n * varies takes `estimatedRowSize` rather than `rowSize` and lets React Aria\n * measure the rest.\n */\nconst collectionSizes = {\n  /** The thickness of the line a drag draws between two rows. */\n  dropIndicator: 2,\n  /** A `List`, `ListBox` or `Tree` row with a headline alone. */\n  listRow: 56,\n  /** A `List`, `ListBox` or `Tree` row with a headline and a supporting line. */\n  listRowTwoLine: 72,\n  /** A `Menu` item, which the menus page gives a shorter floor than a list's. */\n  menuRow: 48,\n  /** A `List.Section` or `Tree.Section` heading. */\n  sectionHeading: 38,\n  /** A `Table` header row, which the data tables page draws taller than a body row. */\n  tableHeaderRow: 56,\n  /** A `Table` body row. */\n  tableRow: 52,\n} as const\n\nexport { collectionSizes }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,kBAAkB;;CAEtB,eAAe;;CAEf,SAAS;;CAET,gBAAgB;;CAEhB,SAAS;;CAET,gBAAgB;;CAEhB,gBAAgB;;CAEhB,UAAU;AACZ"}

package/dist/row/styles.js

@@ -129,6 +129,10 @@ const rowStyles = {
 		kGNEyG: "x1cy8zhl",
 		kAzted: "xefclja",
 		$$css: true
+	},
+	twoLine: {
+		kAzted: "x1qafhyn",
+		$$css: true
 	}
 };
 //#endregion

package/dist/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x3y1ksm\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1wxaq2x\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xoc6x28 x2p4cas xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"xefclja\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAoCA,MAAM,YAAY;CAChB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/row/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row every list draws: ListItem's, and from here on the item of every\n// collection the coverage plan adds — ListBox, Menu, List, Tree, the options\n// of Select and ComboBox. Apart from the RowContent component in ./index.tsx\n// so that file exports components alone, which is what keeps fast refresh\n// working for it.\n//\n// Three variants, because three spec pages draw three rows. The lists page\n// gives a list item a 56dp floor, a body-large headline and a body-medium\n// supporting line, and primary container when selected. The menus page gives\n// a menu item 48dp, a label-large label, and tertiary container when\n// selected. The navigation drawer page gives its row 56dp too, with a\n// label-large label like a menu's, and marks the current one with a\n// secondary-container pill held 12dp off each edge — 336dp of indicator in a\n// 360dp container, which is what that inset comes to. The layout, the\n// padding, the state layers and the disabled treatment are one row; `list`,\n// `menu` and `drawer` carry only what the three pages disagree on, and a\n// consumer applies one of them beside `base`.\n//\n// Laid out with flex rather than the grid the design draws. The design's\n// three columns are `auto 1fr auto`, which is what flex does natively — and\n// unlike a fixed three-column grid it stays correct when a row has no leading\n// or no trailing content, where the remaining children would otherwise slide\n// into the wrong columns.\n//\n// Rows align with each other through their leading content being the same\n// size, not through a fixed column width: a list of Avatars all at one size\n// lines up, and that is the same thing the design's 40px column achieves.\n//\n// The state layer composites over `transparent` rather than over a container\n// colour, because a row's own background is transparent and it therefore\n// tints whatever it happens to be sitting on — a card, a menu, or the page.\n// The two selected states are the ones that bring a container of their own.\nconst rowStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xxj4525\",\n    kzqmXN: \"xh8yej3\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    kVAEAm: \"x1n2onr6\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  disabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  drawer: {\n    kaIpWk: \"x3y1ksm\",\n    kzqmXN: \"x14atkfc\",\n    kUOVxO: \"xd2r6sq\",\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  headlineList: {\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  headlineMenu: {\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    $$css: true\n  },\n  interactive: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  list: {\n    kAzted: \"xbktkl8\",\n    $$css: true\n  },\n  main: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"x14qo01y\",\n    k7Eaqz: \"xeuugli\",\n    $$css: true\n  },\n  menu: {\n    kAzted: \"x1wxaq2x\",\n    $$css: true\n  },\n  overline: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    k63SB2: \"x1su64ma\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    $$css: true\n  },\n  selectedDrawer: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  selectedList: {\n    kWkggS: \"xxwd9aw x1hei0q8 xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  selectedMenu: {\n    kWkggS: \"xoc6x28 x2p4cas xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  slot: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  supporting: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    $$css: true\n  },\n  supportingInherit: {\n    kMwMTN: \"x1heor9g\",\n    $$css: true\n  },\n  supportingSelectedDrawer: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  supportingSelectedList: {\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  supportingSelectedMenu: {\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  },\n  threeLine: {\n    kGNEyG: \"x1cy8zhl\",\n    kAzted: \"xefclja\",\n    $$css: true\n  },\n  twoLine: {\n    kAzted: \"x1qafhyn\",\n    $$css: true\n  }\n};\nexport { rowStyles };"],"mappings":";AAoCA,MAAM,YAAY;CAChB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,OAAO;CACT;CACA,0BAA0B;EACxB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,wBAAwB;EACtB,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/styles/color.js

@@ -0,0 +1,17 @@
+//#region src/styles/color.ts
+function thumbClassName(state) {
+	return {
+		0: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7" },
+		4: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59" },
+		2: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s" },
+		6: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s" },
+		1: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc" },
+		5: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc" },
+		3: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc" },
+		7: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc" }
+	}[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? "";
+}
+//#endregion
+export { thumbClassName };
+
+//# sourceMappingURL=color.js.map

package/dist/styles/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/styles/color.ts"],"sourcesContent":["import type { ColorThumbRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows } from '../tokens/design.tokens.stylex';\n\n// The handle a colour slider and a colour area share. React Aria places it —\n// along one axis on a slider, along two in an area — and fills it with the\n// colour at that point, so everything here is the ring around that fill.\n//\n// In `src/styles` rather than a directory of its own, since it is a style\n// more than one component draws, which is what that directory holds.\n//\n// Two things about it are worth knowing.\n//\n// **It is ringed rather than filled, because its fill is the value.** The\n// ring is what has to read — against every colour the track or the plane\n// runs through — so it is a surface-coloured ring with a hairline outside\n// it, which works on a light ground and a dark one alike.\n//\n// **`dragging` is applied after `focused`.** StyleX replaces a property\n// whole, so a handle being dragged takes the lifted shadow rather than\n// keeping the resting ring under it.\n\nconst colorThumb = {\n  thumb: {\n    kZKoxP: \"x1qx5ct2\",\n    kaIpWk: \"x3y1ksm\",\n    kGVxlE: \"xlzcsym\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1jm3nie\",\n    kzqmXN: \"xw4jnvo\",\n    k87sOh: \"xwa60dl\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2wh2y9\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xkdsq27\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  thumbDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  thumbDragging: {\n    kGVxlE: \"x1kr41ut\",\n    kkrTdU: \"xi9pz9s\",\n    $$css: true\n  },\n  thumbFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\n};\n\n// The handle's classes, from React Aria's render state. StyleX cannot target\n// `[data-dragging]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\nfunction thumbClassName(state: ColorThumbRenderProps) {\n  return {\n    0: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7\"\n    },\n    4: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59\"\n    },\n    2: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s\"\n    },\n    6: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s\"\n    },\n    1: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc\"\n    },\n    5: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc\"\n    },\n    7: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc\"\n    }\n  }[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? '';\n}\nexport { colorThumb, thumbClassName };"],"mappings":";AA2DA,SAAS,eAAe,OAA8B;CACpD,OAAO;EACL,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,uHACb;EACA,GAAG,EACD,WAAW,sHACb;CACF,EAAE,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG"}

package/dist/styles.css

@@ -495,6 +495,10 @@
     appearance: none;
   }
 
+  .x1plog1 {
+    aspect-ratio: 1;
+  }
+
   .xtp5tyh {
     background-color: color-mix(in srgb,currentColor 25%,transparent);
   }
@@ -935,6 +939,10 @@
     cursor: col-resize;
   }
 
+  .xsid9ct {
+    cursor: crosshair;
+  }
+
   .xt0e3qv {
     cursor: default;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.21.0",
+  "version": "0.22.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",