@kanso-labs/kanso-ui 0.22.0 → 0.24.0

package/README.md

@@ -6,7 +6,7 @@ sourced from a single
 [W3C Design Tokens (DTCG)](https://design-tokens.github.io/community-group/format/)
 file and compiled via [Style Dictionary](https://styledictionary.com).
 
-Every component is documented in Storybook, published from `main` at
+Every component is documented in Storybook, published from the latest release at
 **[kanso-ui.kansolabs.org](https://kanso-ui.kansolabs.org/)**.
 
 ## Installation

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

@@ -0,0 +1,51 @@
+import { ReactNode } from "react";
+import { ColorFieldProps } from "react-aria-components";
+//#region src/components/color-field/index.d.ts
+type ColorFieldProps$1 = Omit<ColorFieldProps, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the field's render state. */
+  className?: ColorFieldProps['className'];
+  /** Supporting text under the field. */
+  description?: string;
+  /** The message shown instead of the description, which also marks the field invalid. */
+  error?: string;
+  /**
+   * Whether the label floats into the box's top once the field holds a
+   * value, rather than sitting above it.
+   * @default true
+   */
+  floatingLabel?: boolean;
+  /** What the field is for. Always rendered; never a placeholder. */
+  label: string;
+  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */
+  leadingIcon?: ReactNode;
+  /** A function may compute the style from the field's render state. */
+  style?: ColorFieldProps['style'];
+  /** An icon at the box's trailing end. */
+  trailingIcon?: ReactNode;
+  /**
+   * Which of the text fields page's two boxes to draw.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+/**
+ * A colour typed into a field. 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
+ * <ColorField defaultValue="#6750A4" label="Label" />
+ * ```
+ *
+ * Without `channel` the field holds the whole colour and parses what is
+ * typed; with one it holds that channel alone as a number. `colorSpace`
+ * decides which space a channel belongs to, the same as on `ColorSlider`.
+ *
+ * The box, label and message are the field chrome in `src/field`, shared
+ * with every other field. The call site's `className` and `style` land on
+ * the field as a whole, which is the element a layout positions.
+ */
+declare function ColorField$1({ description, error, floatingLabel, isDisabled, label, leadingIcon, trailingIcon, variant, ...props }: ColorFieldProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorFieldProps$1 as ColorFieldProps, ColorField$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,49 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorField } from "react-aria-components";
+//#region src/components/color-field/index.tsx
+/**
+* A colour typed into a field. 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
+* <ColorField defaultValue="#6750A4" label="Label" />
+* ```
+*
+* Without `channel` the field holds the whole colour and parses what is
+* typed; with one it holds that channel alone as a number. `colorSpace`
+* decides which space a channel belongs to, the same as on `ColorSlider`.
+*
+* The box, label and message are the field chrome in `src/field`, shared
+* with every other field. The call site's `className` and `style` land on
+* the field as a whole, which is the element a layout positions.
+*/
+function ColorField$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, trailingIcon, variant = "filled", ...props$1 }) {
+	const validationBehavior = useFieldValidationBehavior();
+	return /* @__PURE__ */ jsxs(ColorField, {
+		isDisabled,
+		isInvalid: invalidFrom(error),
+		validationBehavior,
+		...props$1,
+		...mergeStatefulStyles(props(fieldStyles.root), props$1),
+		children: [/* @__PURE__ */ jsx(FieldBox, {
+			floatingLabel,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: /* @__PURE__ */ jsx(FieldInput, {})
+		}), /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error
+		})]
+	});
+}
+//#endregion
+export { ColorField$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A colour typed into a field. The value is React Aria's — pass `value` with\n * `onChange` to control it, or `defaultValue` — as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAS,aAAW,EAClB,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,cACA,UAAU,UACV,GAAG,WACe;CAClB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,YAAD;EAA2B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAtL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAAsB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC3G,UAAA,oBAAC,YAAD,CAAW,CAAA;EACH,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACxC;;AACnB"}

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

@@ -0,0 +1,51 @@
+import { ReactNode } from "react";
+import { ColorPickerProps } from "react-aria-components";
+//#region src/components/color-picker/index.d.ts
+type ColorPickerProps$1 = Omit<ColorPickerProps, 'children'> & {
+  /** Whether the alpha strip is drawn under the hue one. @default false */
+  alpha?: boolean;
+  /** Replaces everything on the surface, for a picker that arranges its own parts. */
+  children?: ReactNode;
+  /** Lands on the trigger, which is the element a layout positions. */
+  className?: string;
+  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */
+  defaultOpen?: boolean;
+  /** Whether the whole picker is inert. @default false */
+  isDisabled?: boolean;
+  /** Whether the surface is open. Controlled; needs `onOpenChange`. */
+  isOpen?: boolean;
+  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */
+  label: string;
+  /** Called when the surface opens or closes. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Lands on the trigger, as `className` does. */
+  style?: React.CSSProperties;
+};
+/**
+ * A colour picked from a plane, a hue strip and a text field, behind a
+ * trigger showing the colour. 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
+ * <ColorPicker defaultValue="#6750A4" label="Label" />
+ * ```
+ *
+ * `alpha` adds the transparency strip. Above the medium breakpoint the
+ * surface is docked to the trigger; below it, it opens centred, the same
+ * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach
+ * the overlay, since the picker itself carries no open state — React Aria
+ * keeps that on the dialog trigger this renders inside.
+ *
+ * Every part inside is this package's own — `ColorArea`, `ColorSlider`,
+ * `ColorField` and `ColorSwatch` — and they share the picker's value
+ * through React Aria's context rather than props. Passing `children`
+ * replaces all of them, for a picker that wants a different arrangement.
+ *
+ * The call site's `className` and `style` land on the trigger, which is the
+ * element a layout positions.
+ */
+declare function ColorPicker$1({ alpha, children, className, defaultOpen, isDisabled, isOpen, label, onOpenChange, style, ...props }: ColorPickerProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorPickerProps$1 as ColorPickerProps, ColorPicker$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,86 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import ColorArea$1 from "../color-area/index.js";
+import ColorField$1 from "../color-field/index.js";
+import { overlay } from "../../styles/overlay.js";
+import { picker } from "../../styles/picker.js";
+import ColorSlider$1 from "../color-slider/index.js";
+import ColorSwatch$1 from "../color-swatch/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ColorPicker, Dialog, DialogTrigger, Popover } from "react-aria-components";
+//#region src/components/color-picker/index.tsx
+/**
+* A colour picked from a plane, a hue strip and a text field, behind a
+* trigger showing the colour. 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
+* <ColorPicker defaultValue="#6750A4" label="Label" />
+* ```
+*
+* `alpha` adds the transparency strip. Above the medium breakpoint the
+* surface is docked to the trigger; below it, it opens centred, the same
+* swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach
+* the overlay, since the picker itself carries no open state — React Aria
+* keeps that on the dialog trigger this renders inside.
+*
+* Every part inside is this package's own — `ColorArea`, `ColorSlider`,
+* `ColorField` and `ColorSwatch` — and they share the picker's value
+* through React Aria's context rather than props. Passing `children`
+* replaces all of them, for a picker that wants a different arrangement.
+*
+* The call site's `className` and `style` land on the trigger, which is the
+* element a layout positions.
+*/
+function ColorPicker$1({ alpha = false, children, className, defaultOpen, isDisabled = false, isOpen, label, onOpenChange, style, ...props$1 }) {
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		...props$1,
+		children: /* @__PURE__ */ jsxs(DialogTrigger, {
+			defaultOpen,
+			isOpen,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsxs(Button, {
+				isDisabled,
+				...mergeStatefulStyles((state) => ({
+					0: { className: "x6s0dn4 xu5m21g x5r8g2b x1vnz5z6 x3y1ksm xc342km x9f619 x139gbkf x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u" },
+					1: { className: "x6s0dn4 x3y1ksm xc342km x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u x19v6zzp x1xj74d8 x1h6gzvc" }
+				})[!!state.isDisabled << 0], {
+					className,
+					style
+				}),
+				children: [/* @__PURE__ */ jsx(ColorSwatch$1, { className: "xxk0z11 x2lah0s xvy4d1p" }), label]
+			}), /* @__PURE__ */ jsx(Popover, {
+				...props(overlay.popup, picker.popover),
+				children: /* @__PURE__ */ jsx(Dialog, {
+					...props(overlay.popupDialog),
+					children: children ?? /* @__PURE__ */ jsxs("div", {
+						className: "x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li",
+						children: [
+							/* @__PURE__ */ jsx(ColorArea$1, {
+								"aria-label": label,
+								colorSpace: "hsl",
+								xChannel: "saturation",
+								yChannel: "lightness"
+							}),
+							/* @__PURE__ */ jsx(ColorSlider$1, {
+								channel: "hue",
+								colorSpace: "hsl",
+								label: "Hue"
+							}),
+							alpha ? /* @__PURE__ */ jsx(ColorSlider$1, {
+								channel: "alpha",
+								label: "Alpha"
+							}) : null,
+							/* @__PURE__ */ jsx(ColorField$1, { label })
+						]
+					})
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { ColorPicker$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ColorPickerProps as RACColorPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, ColorPicker as RACColorPicker, Dialog as RACDialog, DialogTrigger as RACDialogTrigger, Popover as RACPopover } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ColorArea from '../color-area';\nimport ColorField from '../color-field';\nimport ColorSlider from '../color-slider';\nimport ColorSwatch from '../color-swatch';\n\n// Everything in this phase, in one control: a swatch and a label as the\n// trigger, and a plane, a hue slider, an alpha slider and a text field on\n// the surface it opens. React Aria's `ColorPicker` renders nothing of its\n// own — it is the state the five share — so what is here is the trigger,\n// the overlay and the arrangement inside it.\n//\n// The design carries no page for a colour picker. What it does carry is the\n// text fields page, which the field inside this one already draws through,\n// and the overlay surface every popover here shares. Three choices are the\n// library's own.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch\n// on its own is a coloured square with no affordance — nothing says it can\n// be pressed, and a screen reader is told a colour rather than an action.\n// The label is what makes it a button.\n//\n// **Hue is a slider rather than a wheel here.** A wheel and the plane want\n// the same space and would make the surface square and large; the strip\n// sits under the plane at the width it already has. `ColorWheel` is for a\n// picker that wants to be round, which is a different shape rather than a\n// different control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the same swap `DatePicker` and `Sheet` make — the shared one in\n// `src/styles/picker.ts` rather than a third copy. A 280dp surface anchored\n// to a trigger is unreachable at 375px.\n//\n// One thing the picker has to do that its parts do not. **The plane and the\n// hue strip are pinned to HSL.** A channel has to belong to the value's own\n// space or React Aria throws, and a hex parses as RGB, which has no\n// saturation — so `<ColorPicker defaultValue=\"#6750A4\" />`, the call anyone\n// writes first, would throw outright. Converting here is what makes the\n// picker take any notation, and it costs the caller nothing: the value\n// handed back is still in whatever they passed.\n\ntype ColorPickerProps = Omit<RACColorPickerProps, 'children'> & {\n  /** Whether the alpha strip is drawn under the hue one. @default false */\n  alpha?: boolean;\n  /** Replaces everything on the surface, for a picker that arranges its own parts. */\n  children?: ReactNode;\n  /** Lands on the trigger, which is the element a layout positions. */\n  className?: string;\n  /** Whether the surface starts open. Uncontrolled; pair `isOpen` with `onOpenChange` instead. */\n  defaultOpen?: boolean;\n  /** Whether the whole picker is inert. @default false */\n  isDisabled?: boolean;\n  /** Whether the surface is open. Controlled; needs `onOpenChange`. */\n  isOpen?: boolean;\n  /** What the trigger says beside its swatch. Always rendered; it is the button's name. */\n  label: string;\n  /** Called when the surface opens or closes. */\n  onOpenChange?: (isOpen: boolean) => void;\n  /** Lands on the trigger, as `className` does. */\n  style?: React.CSSProperties;\n};\n\n/**\n * A colour picked from a plane, a hue strip and a text field, behind a\n * trigger showing the colour. The value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency strip. Above the medium breakpoint the\n * surface is docked to the trigger; below it, it opens centred, the same\n * swap `DatePicker` makes. `defaultOpen`, `isOpen` and `onOpenChange` reach\n * the overlay, since the picker itself carries no open state — React Aria\n * keeps that on the dialog trigger this renders inside.\n *\n * Every part inside is this package's own — `ColorArea`, `ColorSlider`,\n * `ColorField` and `ColorSwatch` — and they share the picker's value\n * through React Aria's context rather than props. Passing `children`\n * replaces all of them, for a picker that wants a different arrangement.\n *\n * The call site's `className` and `style` land on the trigger, which is the\n * element a layout positions.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  className,\n  defaultOpen,\n  isDisabled = false,\n  isOpen,\n  label,\n  onOpenChange,\n  style,\n  ...props\n}: ColorPickerProps) {\n  return <RACColorPicker {...props}>\n      <RACDialogTrigger defaultOpen={defaultOpen} isOpen={isOpen} onOpenChange={onOpenChange}>\n        <RACButton isDisabled={isDisabled} {...mergeStatefulStyles(\n      // A function of the state rather than a fixed class, since the\n      // trigger is the element a layout positions and the call site's\n      // own class has to merge into it — a plain `className` would\n      // overwrite one or the other.\n      (state: ButtonRenderProps) => ({\n        0: {\n          className: \"x6s0dn4 xu5m21g x5r8g2b x1vnz5z6 x3y1ksm xc342km x9f619 x139gbkf x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u\"\n        },\n        1: {\n          className: \"x6s0dn4 x3y1ksm xc342km x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1cmllll x18fpw6u x19v6zzp x1xj74d8 x1h6gzvc\"\n        }\n      })[!!state.isDisabled << 0], {\n        className,\n        style\n      })}>\n          <ColorSwatch className=\"xxk0z11 x2lah0s xvy4d1p\" />\n          {label}\n        </RACButton>\n        <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n          <RACDialog {...stylex.props(overlay.popupDialog)}>\n            {children ?? <div className=\"x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li\">\n                <ColorArea aria-label={label} colorSpace=\"hsl\" xChannel=\"saturation\" yChannel=\"lightness\" />\n                <ColorSlider channel=\"hue\" colorSpace=\"hsl\" label=\"Hue\" />\n                {alpha ? <ColorSlider channel=\"alpha\" label=\"Alpha\" /> : null}\n                <ColorField label={label} />\n              </div>}\n          </RACDialog>\n        </RACPopover>\n      </RACDialogTrigger>\n    </RACColorPicker>;\n}\nexport type { ColorPickerProps };\nexport default ColorPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAS,cAAY,EACnB,QAAQ,OACR,UACA,WACA,aACA,aAAa,OACb,QACA,OACA,cACA,OACA,GAAG,WACgB;CACnB,OAAO,oBAAC,aAAD;EAAgB,GAAI;EACvB,UAAA,qBAAC,eAAD;GAA+B;GAAqB;GAAsB;GAA1E,UAAA,CACE,qBAAC,QAAD;IAAuB;IAAY,GAAI,qBAKxC,WAA8B;KAC7B,GAAG,EACD,WAAW,sMACb;KACA,GAAG,EACD,WAAW,sLACb;IACF,EAAA,CAAG,CAAC,CAAC,MAAM,cAAc,IAAI;KAC3B;KACA;IACF,CAAC;IAfC,UAAA,CAgBE,oBAAC,eAAD,EAAa,WAAU,0BAAyB,CAAA,GAC/C,KACQ;GACX,CAAA,GAAA,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC5C,UAAA,YAAY,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA;OACT,oBAAC,aAAD;QAAW,cAAY;QAAO,YAAW;QAAM,UAAS;QAAa,UAAS;OAAW,CAAA;OACzF,oBAAC,eAAD;QAAa,SAAQ;QAAM,YAAW;QAAM,OAAM;OAAK,CAAA;OACtD,QAAQ,oBAAC,eAAD;QAAa,SAAQ;QAAQ,OAAM;OAAO,CAAA,IAAM;OACzD,oBAAC,cAAD,EAAmB,MAAM,CAAA;MACtB;;IACE,CAAA;GACD,CAAA,CACI;;CACJ,CAAA;AACpB"}

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

@@ -0,0 +1,44 @@
+import { ColorWheelProps } from "react-aria-components";
+//#region src/components/color-wheel/index.d.ts
+type ColorWheelProps$1 = Omit<ColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {
+  /** A function may compute the class from the wheel's render state. */
+  className?: string;
+  /**
+   * How far the ring reaches from the centre, in pixels. The wheel is twice
+   * this across.
+   * @default 100
+   */
+  outerRadius?: number;
+  /** Lands on the wheel, as `className` does. */
+  style?: React.CSSProperties;
+  /**
+   * How wide the band is, in pixels. The inner radius is this in from
+   * `outerRadius`, so the two cannot disagree.
+   * @default 16
+   */
+  thickness?: number;
+};
+/**
+ * Hue as a ring, with a handle on it. 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
+ * <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+ * ```
+ *
+ * A wheel slides hue and nothing else, so unlike `ColorSlider` and
+ * `ColorArea` it names no channel and there is no space for one to be
+ * missing from — a hex value works here.
+ *
+ * The middle is genuinely empty rather than filled, so a `ColorArea` or a
+ * `ColorSwatch` can sit inside one. React Aria names the handle "Hue" and
+ * announces the value; pass `aria-label` to say something else.
+ *
+ * The call site's `className` and `style` land on the wheel, which is the
+ * element a layout positions. Its size comes from `outerRadius`.
+ */
+declare function ColorWheel$1({ className, isDisabled, outerRadius, style, thickness, ...props }: ColorWheelProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorWheelProps$1 as ColorWheelProps, ColorWheel$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,64 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { thumbClassName } from "../../styles/color.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorThumb, ColorWheel, ColorWheelTrack } from "react-aria-components";
+//#region src/components/color-wheel/index.tsx
+const DEFAULT_OUTER_RADIUS = 100;
+const DEFAULT_THICKNESS = 16;
+const _temp = {
+	kX1K2I: "xwjwp01",
+	"$$css": true
+};
+const styles = {
+	track: {
+		kkrTdU: "x1ypdohk",
+		$$css: true
+	},
+	trackDisabled: {
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	trackRing: (inner) => [_temp, { "--x-maskImage": `radial-gradient(circle at center, transparent ${Math.max(0, inner - .5)}px, #000 ${inner + .5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - .5)}px, #000 ${inner + .5}px)` : void 0 }]
+};
+/**
+* Hue as a ring, with a handle on it. 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
+* <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+* ```
+*
+* A wheel slides hue and nothing else, so unlike `ColorSlider` and
+* `ColorArea` it names no channel and there is no space for one to be
+* missing from — a hex value works here.
+*
+* The middle is genuinely empty rather than filled, so a `ColorArea` or a
+* `ColorSwatch` can sit inside one. React Aria names the handle "Hue" and
+* announces the value; pass `aria-label` to say something else.
+*
+* The call site's `className` and `style` land on the wheel, which is the
+* element a layout positions. Its size comes from `outerRadius`.
+*/
+function ColorWheel$1({ className, isDisabled = false, outerRadius = DEFAULT_OUTER_RADIUS, style, thickness = DEFAULT_THICKNESS, ...props$1 }) {
+	const innerRadius = Math.max(0, outerRadius - thickness);
+	return /* @__PURE__ */ jsxs(ColorWheel, {
+		innerRadius,
+		isDisabled,
+		outerRadius,
+		...props$1,
+		...mergeStyles({
+			0: { className: "x9f619 x1rg5ohu x14ju556" },
+			1: { className: "x9f619 x1rg5ohu x14ju556 x1ppv7y9" }
+		}[!!isDisabled << 0], {
+			className,
+			style
+		}),
+		children: [/* @__PURE__ */ jsx(ColorWheelTrack, { ...props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled) }), /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })]
+	});
+}
+//#endregion
+export { ColorWheel$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ColorWheelProps as RACColorWheelProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorThumb as RACColorThumb, ColorWheel as RACColorWheel, ColorWheelTrack as RACColorWheelTrack } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Hue as a ring. React Aria paints the conic gradient on the track's own\n// inline `background` and sizes it from `outerRadius`, so what is here is\n// the hole in the middle and the handle `ColorSlider` already draws, from\n// `src/styles/color.ts`.\n//\n// The design carries no page for this. Three things follow, each a choice\n// rather than a reading.\n//\n// **The ring's thickness is the sliders page's 16dp track.** A hue wheel and\n// a hue slider are the same control in two shapes, so the band a reader\n// drags along is the same width in both.\n//\n// **The thickness is a prop and the inner radius is not.** React Aria takes\n// both radii and would accept an inner one larger than the outer, which\n// draws nothing at all; deriving it is what stops the two disagreeing.\n//\n// **The hole is cut with a mask, not drawn with a disc on top.** A disc in\n// the wheel's own surface colour would be opaque, so anything the wheel is\n// placed over — a card, a photograph, another control — would be hidden by\n// a circle nothing explains. The mask leaves the middle genuinely empty,\n// which is also what lets a swatch or an area sit inside one.\n\nconst DEFAULT_OUTER_RADIUS = 100;\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16;\nconst _temp = {\n  kX1K2I: \"xwjwp01\",\n  \"$$css\": true\n};\nconst styles = {\n  track: {\n    kkrTdU: \"x1ypdohk\",\n    $$css: true\n  },\n  trackDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  trackRing: (inner: number) => [_temp, {\n    \"--x-maskImage\": `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` != null ? `radial-gradient(circle at center, transparent ${Math.max(0, inner - 0.5)}px, #000 ${inner + 0.5}px)` : undefined\n  }]\n};\ntype ColorWheelProps = Omit<RACColorWheelProps, 'children' | 'className' | 'innerRadius' | 'outerRadius' | 'style'> & {\n  /** A function may compute the class from the wheel's render state. */\n  className?: string;\n  /**\n   * How far the ring reaches from the centre, in pixels. The wheel is twice\n   * this across.\n   * @default 100\n   */\n  outerRadius?: number;\n  /** Lands on the wheel, as `className` does. */\n  style?: React.CSSProperties;\n  /**\n   * How wide the band is, in pixels. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  thickness?: number;\n};\n\n/**\n * Hue as a ring, with a handle on it. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue`, as a CSS colour\n * string or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel slides hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from — a hex value works here.\n *\n * The middle is genuinely empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. React Aria names the handle \"Hue\" and\n * announces the value; pass `aria-label` to say something else.\n *\n * The call site's `className` and `style` land on the wheel, which is the\n * element a layout positions. Its size comes from `outerRadius`.\n */\nfunction ColorWheel({\n  className,\n  isDisabled = false,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  style,\n  thickness = DEFAULT_THICKNESS,\n  ...props\n}: ColorWheelProps) {\n  const innerRadius = Math.max(0, outerRadius - thickness);\n  return <RACColorWheel innerRadius={innerRadius} isDisabled={isDisabled} outerRadius={outerRadius} {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x1rg5ohu x14ju556\"\n    },\n    1: {\n      className: \"x9f619 x1rg5ohu x14ju556 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorWheelTrack {...stylex.props(styles.track, styles.trackRing(innerRadius), isDisabled && styles.trackDisabled)} />\n      <RACColorThumb className={thumbClassName} />\n    </RACColorWheel>;\n}\nexport type { ColorWheelProps };\nexport default ColorWheel;"],"mappings":";;;;;;AA8BA,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,QAAQ;CACZ,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,YAAY,UAAkB,CAAC,OAAO,EACpC,iBAAiB,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,QAAS,OAAO,iDAAiD,KAAK,IAAI,GAAG,QAAQ,EAAG,EAAC,WAAY,QAAQ,GAAG,OAAQ,KAAA,EAC3O,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;AAwCA,SAAS,aAAW,EAClB,WACA,aAAa,OACb,cAAc,sBACd,OACA,YAAY,mBACZ,GAAG,WACe;CAClB,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,SAAS;CACvD,OAAO,qBAAC,YAAD;EAA4B;EAAyB;EAAyB;EAAa,GAAI;EAAO,GAAI,YAAY;GAC3H,GAAG,EACD,WAAW,2BACb;GACA,GAAG,EACD,WAAW,oCACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EAVM,UAAA,CAWH,oBAAC,iBAAD,EAAoB,GAAI,MAAa,OAAO,OAAO,OAAO,UAAU,WAAW,GAAG,cAAc,OAAO,aAAa,EAAE,CAAA,GACtH,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA,CAC5B;;AACnB"}

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

@@ -5,9 +5,9 @@ import Calendar$1 from "../calendar/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
+import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
-import { picker, triggerClassName } from "../../styles/picker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-aria-components";
 //#region src/components/date-picker/index.tsx
@@ -64,7 +64,10 @@ function DatePicker$1({ description, error, floatingLabel = true, isDisabled = f
 			}),
 			/* @__PURE__ */ jsx(Popover, {
 				...props(overlay.popup, picker.popover),
-				children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label }) })
+				children: /* @__PURE__ */ jsx(Dialog, {
+					...props(overlay.popupDialog),
+					children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
+				})
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAS,aAAgC,EACvC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,eAAe,iBACf,UAAU,UACV,GAAG,WACkB;CACrB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,YAAD;EAA8B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAzL,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA,CACE,oBAAC,WAAD;MAAc,GAAI,MAAa,cAAc,KAAK;MAC/C,UAAA;KACW,CAAA,GACd,oBAAC,QAAD;MAAW,cAAY;MAAc,WAAW;MAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;KAC5C,CAAA,CACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD,EAAA,UACE,oBAAC,YAAD,EAAU,cAAY,MAAM,CAAA,EACnB,CAAA;GACD,CAAA;EACC;;AACnB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAS,aAAgC,EACvC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,eAAe,iBACf,UAAU,UACV,GAAG,WACkB;CACrB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,YAAD;EAA8B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAzL,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA,CACE,oBAAC,WAAD;MAAc,GAAI,MAAa,cAAc,KAAK;MAC/C,UAAA;KACW,CAAA,GACd,oBAAC,QAAD;MAAW,cAAY;MAAc,WAAW;MAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;KAC5C,CAAA,CACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC7C,UAAA,oBAAC,YAAD,EAAU,cAAY,MAAM,CAAA;IACnB,CAAA;GACD,CAAA;EACC;;AACnB"}

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

@@ -4,9 +4,9 @@ import { CalendarGlyph } from "../../glyphs/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
+import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
-import { picker, triggerClassName } from "../../styles/picker.js";
 import RangeCalendar$1 from "../range-calendar/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "react-aria-components";
@@ -84,7 +84,10 @@ function DateRangePicker$1({ description, error, floatingLabel = true, isDisable
 			}),
 			/* @__PURE__ */ jsx(Popover, {
 				...props(overlay.popup, picker.popover),
-				children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label }) })
+				children: /* @__PURE__ */ jsx(Dialog, {
+					...props(overlay.popupDialog),
+					children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
+				})
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAS,kBAAqC,EAC5C,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,YAAY,KACZ,eAAe,uBACf,UAAU,UACV,GAAG,WACuB;CAC1B,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,iBAAD;EAAmC;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAA9L,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA;MACE,oBAAC,WAAD;OAAc,MAAK;OAAQ,GAAI,MAAa,cAAc,KAAK;OAC5D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAU;OAChC,UAAA;MACG,CAAA;MACN,oBAAC,WAAD;OAAc,MAAK;OAAM,GAAI,MAAa,cAAc,KAAK;OAC1D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAW,cAAY;OAAc,WAAW;OAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;MAC5C,CAAA;KACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD,EAAA,UACE,oBAAC,iBAAD,EAAe,cAAY,MAAM,CAAA,EACxB,CAAA;GACD,CAAA;EACM;;AACxB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue> = {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n} & Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'>;\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden input per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwGA,SAAS,kBAAqC,EAC5C,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,YAAY,KACZ,eAAe,uBACf,UAAU,UACV,GAAG,WACuB;CAC1B,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,iBAAD;EAAmC;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAA9L,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA;MACE,oBAAC,WAAD;OAAc,MAAK;OAAQ,GAAI,MAAa,cAAc,KAAK;OAC5D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAM,eAAY;OAAO,WAAU;OAChC,UAAA;MACG,CAAA;MACN,oBAAC,WAAD;OAAc,MAAK;OAAM,GAAI,MAAa,cAAc,KAAK;OAC1D,UAAA;MACW,CAAA;MACd,oBAAC,QAAD;OAAW,cAAY;OAAc,WAAW;OAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;MAC5C,CAAA;KACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC7C,UAAA,oBAAC,iBAAD,EAAe,cAAY,MAAM,CAAA;IACxB,CAAA;GACD,CAAA;EACM;;AACxB"}

package/dist/components/index.d.ts

@@ -11,9 +11,12 @@ 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 ColorField, { ColorFieldProps } from "./color-field/index.js";
+import ColorPicker, { ColorPickerProps } from "./color-picker/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";
+import ColorWheel, { ColorWheelProps } from "./color-wheel/index.js";
 import ComboBox, { ComboBoxProps } from "./combo-box/index.js";
 import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
@@ -64,4 +67,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, 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 };
+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, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, 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/tabs/index.js

@@ -1,19 +1,16 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { createContext, useContext, useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
+import { SelectionIndicator, Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 //#region src/components/tabs/index.tsx
 const NO_PANELS = /* @__PURE__ */ new Set();
 const PanelsContext = createContext(NO_PANELS);
 const RegisterPanelContext = createContext(() => () => {});
 function tabContent(children) {
-	return (state) => /* @__PURE__ */ jsx("span", {
-		...{
-			0: { className: "x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6" },
-			1: { className: "x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6 x1al0t14 xar2jh8 x7ap8th x1rrmwk0 x1s928wv x1lzipow x1xrz1ek xb7ltuz xr7aocx x1mcsf00 x1j6awrg" }
-		}[!!state.isSelected << 0],
-		children: typeof children === "function" ? children(state) : children
+	return (state) => /* @__PURE__ */ jsxs("span", {
+		className: "x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6",
+		children: [typeof children === "function" ? children(state) : children, /* @__PURE__ */ jsx(SelectionIndicator, { className: "x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd" })]
 	});
 }
 function tabRenderer(hasPanel, render) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["previous","next","register","panels","children"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\n\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span {...{\n    0: {\n      className: \"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\"\n    },\n    1: {\n      className: \"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6 x1al0t14 xar2jh8 x7ap8th x1rrmwk0 x1s928wv x1lzipow x1xrz1ek xb7ltuz xr7aocx x1mcsf00 x1j6awrg\"\n    }\n  }[!!state.isSelected << 0]}>\n      {typeof children === 'function' ? children(state) : children}\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["previous","next","register","panels","children"],"sources":["../../../src/components/tabs/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { Key, TabsProps as RACTabsProps, TabListProps, TabPanelProps, TabProps, TabRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, Tabs as RACTabs, Tab, TabList, TabPanel } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The tabs page's primary tabs: a 48dp bar on the surface, divided into equal\n// sections, with a 1dp outline-variant divider inside the bar along its\n// bottom edge and, under the active tab's label, a 3dp primary indicator\n// rounded along its top. The indicator follows the label rather than the\n// tab, inset 2dp from the label's ends and never shorter than 24dp, which is\n// what the page draws.\n//\n// The indicator is React Aria's `SelectionIndicator`, which is a shared\n// element: it is rendered inside every tab but drawn in the selected one,\n// and on a change it keeps the old one until it has finished moving to the\n// new one's place. No `SharedElementTransition` is rendered here — `Tab`\n// scopes its own, and one added around the list changes nothing, which is\n// worth knowing because the primitive throws outside a scope when it is put\n// anywhere else.\n//\n// The label is wrapped in a span of its own so the indicator has the label's\n// width to follow: it is the span's `::after`, and the span is as tall as the\n// tab so the indicator reaches the bottom of the bar. Which tab carries it\n// comes from React Aria's render state rather than a selector, since StyleX\n// cannot target [data-selected] on the element it is styling.\n\nconst NO_PANELS: ReadonlySet<Key> = new Set();\n\n// Which panels are mounted, by id. React Aria points a selected tab's\n// `aria-controls` at the panel it would control whether or not one exists,\n// and a strip used on its own — tabs that filter the content below rather\n// than swapping a panel — then references an id nothing carries, which axe\n// reports as an invalid attribute value. Each panel registers itself here so\n// a tab can leave the attribute off when its panel is not there.\nconst PanelsContext = createContext<ReadonlySet<Key>>(NO_PANELS);\nconst RegisterPanelContext = createContext<(id: Key) => () => void>(() => () => {});\n\n// `children` is narrowed to nodes. React Aria also accepts a function there,\n// to hand the children the tabs' render state, and that form cannot be\n// wrapped in a context provider without calling it first — which would be\n// doing React Aria's job with none of its state. Nothing here needs it, so\n// the narrower type says so rather than leaving a signature that type-checks\n// and then fails to render.\ntype TabsProps = Omit<RACTabsProps, 'children'> & {\n  children?: ReactNode;\n};\n\n// The label, wrapped so the indicator has its width to follow. Built by a\n// call for the same reason as `tabRenderer` below; React Aria hands the\n// function the tab's state, and it is passed on when the children are a\n// function too.\nfunction tabContent(children: TabProps['children']) {\n  return (state: TabRenderProps & {\n    defaultChildren: ReactNode;\n  }) => <span className=\"x6s0dn4 x5yr21d x9f619 x3nfvp2 x1n2onr6\">\n      {typeof children === 'function' ? children(state) : children}\n      <RACSelectionIndicator className=\"x12w9bfk xnety89 xuoj239 x13dhofw xz4iguh x9f619 x17v02zk x1ey2m1c x17y0mx6 xvueqy4 xnei2rj x10l6tqk xioksi3 x1mxbss1 x1seskgd\" />\n    </span>;\n}\n\n// React Aria renders a tab with `href` as an anchor and any other as a div,\n// and expects a `render` function to return the same element it would have.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its two inputs. See PanelsContext for why the attribute is\n// dropped.\nfunction tabRenderer(hasPanel: boolean, render: TabProps['render']): NonNullable<TabProps['render']> {\n  return (domProps, state) => {\n    const adjusted = hasPanel ? domProps : {\n      ...domProps,\n      'aria-controls': undefined\n    };\n    if (render !== undefined) {\n      return render(adjusted, state);\n    }\n    if ('href' in adjusted) {\n      // oxlint-disable-next-line jsx-a11y/anchor-has-content -- filled by React Aria\n      return <a {...adjusted} />;\n    }\n    return <div {...adjusted} />;\n  };\n}\n\n/**\n * A tab bar and its panels. Selection is React Aria's `selectedKey`: pass\n * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let\n * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through\n * a shared `id`, and a strip may stand alone without panels.\n *\n * Composed rather than configured by props, because the number of tabs and\n * what each panel holds are the call site's to decide — the parts are\n * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.\n */\nfunction Tabs({\n  children,\n  ...props\n}: TabsProps) {\n  const [panels, setPanels] = useState<ReadonlySet<Key>>(NO_PANELS);\n  const register = useCallback((id: Key) => {\n    setPanels(previous => {\n      if (previous.has(id)) {\n        return previous;\n      }\n      const next = new Set(previous);\n      next.add(id);\n      return next;\n    });\n    return () => {\n      setPanels(previous => {\n        if (!previous.has(id)) {\n          return previous;\n        }\n        const next = new Set(previous);\n        next.delete(id);\n        return next;\n      });\n    };\n  }, []);\n  return <RACTabs {...props}>\n      <RegisterPanelContext value={register}>\n        <PanelsContext value={panels}>{children}</PanelsContext>\n      </RegisterPanelContext>\n    </RACTabs>;\n}\nfunction TabsList(props: TabsListProps) {\n  return <TabList {...props} {...mergeStatefulStyles({\n    className: \"xp05xdj x9f619 x78zum5\"\n  }, props)} />;\n}\nfunction TabsPanel(props: TabsPanelProps) {\n  const register = useContext(RegisterPanelContext);\n  const {\n    id\n  } = props;\n  useEffect(() => {\n    if (id === undefined) {\n      return undefined;\n    }\n    return register(id);\n  }, [id, register]);\n  return <TabPanel {...props} {...mergeStatefulStyles({\n    className: \"x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn\"\n  }, props)} />;\n}\nfunction TabsTab({\n  children,\n  render,\n  ...props\n}: TabsTabProps) {\n  const panels = useContext(PanelsContext);\n  const hasPanel = props.id !== undefined && panels.has(props.id);\n  return <Tab {...props} render={tabRenderer(hasPanel, render)} {...mergeStatefulStyles(tabStyles, props)}>\n      {tabContent(children)}\n    </Tab>;\n}\n\n// StyleX cannot target [data-selected] on the element it is styling, so the\n// active tab cannot be chosen in CSS. React Aria's answer is a className that\n// is a function of the tab's own state, the same mechanism Chip uses —\n// mergeStatefulStyles wraps this one so a tab still keeps a className the call\n// site passed.\nfunction tabStyles(state: TabRenderProps) {\n  return {\n    0: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x1p2om7n xjbqb8w x1w5n3ug\"\n    },\n    2: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x1ypdohk x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 x12vej0r x14dcer4 xjbqb8w x1mxwv8y\"\n    },\n    1: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x6s0dn4 xsdox4t xc342km x9f619 x78zum5 x1r8uery x1iyjqo2 xs83m0k xrgwony x12s497w x1szcwkt xl56j7k xo803ec xyl1r0q xeuugli xrgy624 x2ssjo2 x9v5kkp x1t137rt x1de99jn xt970qd x790zyz x1n2onr6 x1hl2dhg x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nTabs.List = TabsList;\nTabs.Panel = TabsPanel;\nTabs.Tab = TabsTab;\ntype TabsListProps = TabListProps<object>;\ntype TabsPanelProps = TabPanelProps;\ntype TabsTabProps = TabProps;\nexport type { TabsListProps, TabsPanelProps, TabsProps, TabsTabProps };\nexport default Tabs;"],"mappings":"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"}

package/dist/index.d.ts

@@ -11,9 +11,12 @@ 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 ColorField, { ColorFieldProps } from "./components/color-field/index.js";
+import ColorPicker, { ColorPickerProps } from "./components/color-picker/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";
+import ColorWheel, { ColorWheelProps } from "./components/color-wheel/index.js";
 import ComboBox, { ComboBoxProps } from "./components/combo-box/index.js";
 import Container, { ContainerProps } from "./components/container/index.js";
 import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
@@ -69,4 +72,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, 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 };
+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, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, 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

@@ -14,9 +14,12 @@ 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 ColorField from "./components/color-field/index.js";
 import ColorSlider from "./components/color-slider/index.js";
 import ColorSwatch from "./components/color-swatch/index.js";
+import ColorPicker from "./components/color-picker/index.js";
 import ColorSwatchPicker from "./components/color-swatch-picker/index.js";
+import ColorWheel from "./components/color-wheel/index.js";
 import ListBox from "./components/list-box/index.js";
 import ComboBox from "./components/combo-box/index.js";
 import Container from "./components/container/index.js";
@@ -68,4 +71,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, 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 };
+export { AppBar, Autocomplete, Avatar, Breadcrumbs, Button, Calendar, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Code, Collection, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, 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/styles.css

@@ -1531,6 +1531,11 @@
     margin-inline-start: var(--x3km7fe);
   }
 
+  .xwjwp01 {
+    -webkit-mask-image: var(--x-maskImage);
+    mask-image: var(--x-maskImage);
+  }
+
   .x19kjcj4 {
     object-fit: contain;
   }
@@ -1902,6 +1907,10 @@
     transition-property: transform;
   }
 
+  .x1mxbss1 {
+    transition-property: translate, inline-size;
+  }
+
   .x16pyfke {
     transition-timing-function: cubic-bezier(.4, 0, .6, 1);
   }
@@ -2412,6 +2421,10 @@
     height: 36px;
   }
 
+  .xuoj239 {
+    height: 3px;
+  }
+
   .x1vqgdyp {
     height: 40px;
   }
@@ -2584,6 +2597,10 @@
     min-width: 112px;
   }
 
+  .xnei2rj {
+    min-width: 24px;
+  }
+
   .x1u2d2a2 {
     min-width: 280px;
   }
@@ -2718,6 +2735,10 @@
     width: 24px;
   }
 
+  .x1dz1jew {
+    width: 280px;
+  }
+
   .xgd8bvy {
     width: 28px;
   }
@@ -2770,6 +2791,10 @@
     width: auto;
   }
 
+  .x17v02zk {
+    width: calc(100% - 2 * var(--x1ug6acx));
+  }
+
   .xeq5yr9 {
     width: fit-content;
   }
@@ -2920,14 +2945,10 @@
     inset-block: -14px;
   }
 
-  .xb7ltuz:after, .xm4btww:before {
+  .xm4btww:before {
     inset-inline: 0;
   }
 
-  .xr7aocx:after {
-    margin-inline: auto;
-  }
-
   @media (width < 600px) {
     .x11ijow0.x11ijow0 {
       max-height: calc(100dvh - 72px);
@@ -2968,18 +2989,6 @@
 }
 
 @layer priority9 {
-  .x1al0t14:after {
-    background-color: var(--x1cjupv7);
-  }
-
-  .x7ap8th:after {
-    border-start-end-radius: var(--x1kmbna2);
-  }
-
-  .x1rrmwk0:after {
-    border-start-start-radius: var(--x1kmbna2);
-  }
-
   .x7ip5l3::placeholder {
     color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),var(--x1dzgr7y));
   }
@@ -2992,7 +3001,7 @@
     color: var(--x28n2pw);
   }
 
-  .x1cpjm7i:before, .x1s928wv:after {
+  .x1cpjm7i:before {
     content: "";
   }
 
@@ -3004,7 +3013,7 @@
     display: none;
   }
 
-  .x1hmns74:before, .x1j6awrg:after {
+  .x1hmns74:before {
     position: absolute;
   }
 
@@ -3013,24 +3022,6 @@
   }
 }
 
-@layer priority10 {
-  .x1xrz1ek:after {
-    bottom: 0;
-  }
-
-  .xar2jh8:after {
-    height: 3px;
-  }
-
-  .x1mcsf00:after {
-    min-width: 24px;
-  }
-
-  .x1lzipow:after {
-    width: calc(100% - 2 * var(--x1ug6acx));
-  }
-}
-
 @property --x-blockSize {
   syntax: "*";
   inherits: false
@@ -3066,6 +3057,11 @@
   inherits: false
 }
 
+@property --x-maskImage {
+  syntax: "*";
+  inherits: false
+}
+
 @property --x-maxInlineSize {
   syntax: "*";
   inherits: false

package/package.json

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