@kanso-labs/kanso-ui 0.35.0 → 0.37.0

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

@@ -25,7 +25,7 @@ import { ColorField } from "react-aria-components";
 * the field as a whole, which is the element a layout positions.
 */
 function ColorField$1(t0) {
-	const $ = c(23);
+	const $ = c(24);
 	const { description, error, floatingLabel: t1, inputRef, isDisabled: t2, label, leadingIcon, trailingIcon, variant: t3, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -46,9 +46,10 @@ function ColorField$1(t0) {
 		$[3] = t6;
 	} else t6 = $[3];
 	let t7;
-	if ($[4] !== floatingLabel || $[5] !== label || $[6] !== leadingIcon || $[7] !== t6 || $[8] !== trailingIcon || $[9] !== variant) {
+	if ($[4] !== floatingLabel || $[5] !== label || $[6] !== leadingIcon || $[7] !== props$1.isRequired || $[8] !== t6 || $[9] !== trailingIcon || $[10] !== variant) {
 		t7 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
+			isRequired: props$1.isRequired,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
@@ -58,23 +59,24 @@ function ColorField$1(t0) {
 		$[4] = floatingLabel;
 		$[5] = label;
 		$[6] = leadingIcon;
-		$[7] = t6;
-		$[8] = trailingIcon;
-		$[9] = variant;
-		$[10] = t7;
-	} else t7 = $[10];
+		$[7] = props$1.isRequired;
+		$[8] = t6;
+		$[9] = trailingIcon;
+		$[10] = variant;
+		$[11] = t7;
+	} else t7 = $[11];
 	let t8;
-	if ($[11] !== description || $[12] !== error) {
+	if ($[12] !== description || $[13] !== error) {
 		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[11] = description;
-		$[12] = error;
-		$[13] = t8;
-	} else t8 = $[13];
+		$[12] = description;
+		$[13] = error;
+		$[14] = t8;
+	} else t8 = $[14];
 	let t9;
-	if ($[14] !== T0 || $[15] !== isDisabled || $[16] !== props$1 || $[17] !== t4 || $[18] !== t5 || $[19] !== t7 || $[20] !== t8 || $[21] !== validationBehavior) {
+	if ($[15] !== T0 || $[16] !== isDisabled || $[17] !== props$1 || $[18] !== t4 || $[19] !== t5 || $[20] !== t7 || $[21] !== t8 || $[22] !== validationBehavior) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t4,
@@ -83,16 +85,16 @@ function ColorField$1(t0) {
 			...t5,
 			children: [t7, t8]
 		});
-		$[14] = T0;
-		$[15] = isDisabled;
-		$[16] = props$1;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = validationBehavior;
-		$[22] = t9;
-	} else t9 = $[22];
+		$[15] = T0;
+		$[16] = isDisabled;
+		$[17] = props$1;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = validationBehavior;
+		$[23] = t9;
+	} else t9 = $[23];
 	return t9;
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","className","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","style","trailingIcon","variant","Omit","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","t7","t8","t9","ColorField","_c","props","RACColorField","stylex.props"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } 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 type { FieldVariant } from '../../field';\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 = {\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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACColorFieldProps, 'children' | 'className' | 'style'>;\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  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps & RefAttributes<HTMLDivElement>) {\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 ref={inputRef} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAAQ,aAAAsB,IAAA;CAAA,MAAAC,IAAA9B,EAAA,EAAA;CAAoB,MAAA,EAAAkB,aAAAC,OAAAC,eAAAW,IAAAV,UAAAW,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAN;CAGlB,MAAAT,gBAAAW,OAAAK,KAAAA,IAAA,OAAAL;CAEA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BtB,2BAA2B;CAC9C,MAAAuB,KAAA9B;CAAa,IAAA+B;CAAA,IAAAT,EAAA,OAAAX,OAAA;EAAoCoB,KAAAzB,YAAYK,KAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAxB,oBAAoBV,MAAaO,YAAW4B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAT,UAAA;EAExLqB,KAAA,oBAAC,YAAD,EAAiBrB,KAAAA,SAAQ,CAAA;EAAIS,EAAA,KAAAT;EAAAS,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAV,iBAAAU,EAAA,OAAAP,SAAAO,EAAA,OAAAN,eAAAM,EAAA,OAAAY,MAAAZ,EAAA,OAAAJ,gBAAAI,EAAA,OAAAH,SAAA;EAD/BgB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBG;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEZ,EAAA,KAAAV;EAAAU,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAY;EAAAZ,EAAA,KAAAJ;EAAAI,EAAA,KAAAH;EAAAG,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAZ,eAAAY,EAAA,QAAAX,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIW,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAa,MAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAO,oBAAA;EAJrDQ,KAAA,qBAAC,IAAD;GAA2Bb;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHG,IAGAC,EAJiB;;EAKHd,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAO;EAAAP,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OALXe;AAKW"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","className","description","error","floatingLabel","inputRef","HTMLInputElement","label","leadingIcon","style","trailingIcon","variant","Omit","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","t7","isRequired","t8","t9","ColorField","_c","props","RACColorField","stylex.props"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } 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 type { FieldVariant } from '../../field';\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 = {\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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACColorFieldProps, 'children' | 'className' | 'style'>;\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  inputRef,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps & RefAttributes<HTMLDivElement>) {\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} isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput ref={inputRef} />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAAQ,aAAAsB,IAAA;CAAA,MAAAC,IAAA9B,EAAA,EAAA;CAAoB,MAAA,EAAAkB,aAAAC,OAAAC,eAAAW,IAAAV,UAAAW,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAN;CAGlB,MAAAT,gBAAAW,OAAAK,KAAAA,IAAA,OAAAL;CAEA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BtB,2BAA2B;CAC9C,MAAAuB,KAAA9B;CAAa,IAAA+B;CAAA,IAAAT,EAAA,OAAAX,OAAA;EAAoCoB,KAAAzB,YAAYK,KAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAxB,oBAAoBV,MAAaO,YAAW4B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAT,UAAA;EAExLqB,KAAA,oBAAC,YAAD,EAAiBrB,KAAAA,SAAQ,CAAA;EAAIS,EAAA,KAAAT;EAAAS,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAV,iBAAAU,EAAA,OAAAP,SAAAO,EAAA,OAAAN,eAAAM,EAAA,OAAAK,QAAAS,cAAAd,EAAA,OAAAY,MAAAZ,EAAA,OAAAJ,gBAAAI,EAAA,QAAAH,SAAA;EAD/BgB,KAAA,oBAAC,UAAD;GAAyBvB;GAA2B,YAAAe,QAAKS;GAAoBrB;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GACzIe,UAAAA;EADO,CAAA;EAEEZ,EAAA,KAAAV;EAAAU,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAK,QAAAS;EAAAd,EAAA,KAAAY;EAAAZ,EAAA,KAAAJ;EAAAI,EAAA,MAAAH;EAAAG,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAZ,eAAAY,EAAA,QAAAX,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIW,EAAA,MAAAZ;EAAAY,EAAA,MAAAX;EAAAW,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAa,MAAAb,EAAA,QAAAe,MAAAf,EAAA,QAAAO,oBAAA;EAJrDS,KAAA,qBAAC,IAAD;GAA2Bd;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHG,IAGAE,EAJiB;;EAKHf,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAO;EAAAP,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OALXgB;AAKW"}

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

@@ -10,12 +10,12 @@ import ColorSlider$1 from "../color-slider/index.js";
 import ColorSwatch$1 from "../color-swatch/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button, ColorPicker, Dialog, DialogTrigger, Popover } from "react-aria-components";
+import { Button, ColorPicker, Dialog, DialogTrigger, Popover, parseColor, useLocale } from "react-aria-components";
 //#region src/components/color-picker/index.tsx
 const triggerStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "xu5m21g x5r8g2b x1vnz5z6",
+		kWkggS: "x1vnz5z6",
 		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
 		kB7OPa: "x9f619",
@@ -37,8 +37,17 @@ const triggerStyles = {
 		kMwMTN: "x1xj74d8",
 		kkrTdU: "x1h6gzvc",
 		$$css: true
+	},
+	hovered: {
+		kWkggS: "x1ei6177",
+		$$css: true
+	},
+	pressed: {
+		kWkggS: "x1vt8e7r",
+		$$css: true
 	}
 };
+const CHANNELS = parseColor("hsl(0, 0%, 0%)");
 /**
 * 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
@@ -64,7 +73,7 @@ const triggerStyles = {
 * element a layout positions.
 */
 function ColorPicker$1(t0) {
-	const $ = c(43);
+	const $ = c(44);
 	let children;
 	let className;
 	let container;
@@ -108,6 +117,7 @@ function ColorPicker$1(t0) {
 	}
 	const alpha = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
+	const { locale } = useLocale();
 	let t3;
 	if ($[13] !== className || $[14] !== style) {
 		t3 = mergeStatefulStyles(_temp, {
@@ -148,7 +158,7 @@ function ColorPicker$1(t0) {
 		$[23] = t7;
 	} else t7 = $[23];
 	let t8;
-	if ($[24] !== alpha || $[25] !== children || $[26] !== isDisabled || $[27] !== label) {
+	if ($[24] !== alpha || $[25] !== children || $[26] !== isDisabled || $[27] !== label || $[28] !== locale) {
 		t8 = children ?? /* @__PURE__ */ jsxs("div", {
 			className: "x9f619 x78zum5 xdt5ytf x1gka490 x1dz1jew x193iq5w xgc26li",
 			children: [
@@ -163,12 +173,12 @@ function ColorPicker$1(t0) {
 					channel: "hue",
 					colorSpace: "hsl",
 					isDisabled,
-					label: "Hue"
+					label: CHANNELS.getChannelName("hue", locale)
 				}),
 				alpha ? /* @__PURE__ */ jsx(ColorSlider$1, {
 					channel: "alpha",
 					isDisabled,
-					label: "Alpha"
+					label: CHANNELS.getChannelName("alpha", locale)
 				}) : null,
 				/* @__PURE__ */ jsx(ColorField$1, {
 					isDisabled,
@@ -180,57 +190,58 @@ function ColorPicker$1(t0) {
 		$[25] = children;
 		$[26] = isDisabled;
 		$[27] = label;
-		$[28] = t8;
-	} else t8 = $[28];
+		$[28] = locale;
+		$[29] = t8;
+	} else t8 = $[29];
 	let t9;
-	if ($[29] !== t8) {
+	if ($[30] !== t8) {
 		t9 = /* @__PURE__ */ jsx(Dialog, {
 			...t7,
 			children: t8
 		});
-		$[29] = t8;
-		$[30] = t9;
-	} else t9 = $[30];
+		$[30] = t8;
+		$[31] = t9;
+	} else t9 = $[31];
 	let t10;
-	if ($[31] !== container || $[32] !== t9) {
+	if ($[32] !== container || $[33] !== t9) {
 		t10 = /* @__PURE__ */ jsx(Popover, {
 			UNSTABLE_portalContainer: container,
 			...t6,
 			children: t9
 		});
-		$[31] = container;
-		$[32] = t9;
-		$[33] = t10;
-	} else t10 = $[33];
+		$[32] = container;
+		$[33] = t9;
+		$[34] = t10;
+	} else t10 = $[34];
 	let t11;
-	if ($[34] !== defaultOpen || $[35] !== isOpen || $[36] !== onOpenChange || $[37] !== t10 || $[38] !== t5) {
+	if ($[35] !== defaultOpen || $[36] !== isOpen || $[37] !== onOpenChange || $[38] !== t10 || $[39] !== t5) {
 		t11 = /* @__PURE__ */ jsxs(DialogTrigger, {
 			defaultOpen,
 			isOpen,
 			onOpenChange,
 			children: [t5, t10]
 		});
-		$[34] = defaultOpen;
-		$[35] = isOpen;
-		$[36] = onOpenChange;
-		$[37] = t10;
-		$[38] = t5;
-		$[39] = t11;
-	} else t11 = $[39];
+		$[35] = defaultOpen;
+		$[36] = isOpen;
+		$[37] = onOpenChange;
+		$[38] = t10;
+		$[39] = t5;
+		$[40] = t11;
+	} else t11 = $[40];
 	let t12;
-	if ($[40] !== props$1 || $[41] !== t11) {
+	if ($[41] !== props$1 || $[42] !== t11) {
 		t12 = /* @__PURE__ */ jsx(ColorPicker, {
 			...props$1,
 			children: t11
 		});
-		$[40] = props$1;
-		$[41] = t11;
-		$[42] = t12;
-	} else t12 = $[42];
+		$[41] = props$1;
+		$[42] = t11;
+		$[43] = t12;
+	} else t12 = $[43];
 	return t12;
 }
 function _temp(state) {
-	return props(triggerStyles.base, focus.ring, state.isDisabled && triggerStyles.disabled);
+	return props(triggerStyles.base, focus.ring, state.isHovered && triggerStyles.hovered, state.isPressed && triggerStyles.pressed, state.isDisabled && triggerStyles.disabled);
 }
 //#endregion
 export { ColorPicker$1 as default };

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

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

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

@@ -45,5 +45,5 @@ declare namespace ColorSwatchPicker$1 {
  */
 declare function ColorSwatchPickerItem$1({ children, ...props }: ColorSwatchPickerItemProps$1): import("react").JSX.Element;
 //#endregion
-export { type ColorSwatchPickerItemProps$1 as ColorSwatchPickerItemProps, type ColorSwatchPickerProps$1 as ColorSwatchPickerProps, ColorSwatchPicker$1 as default };
+export { ColorSwatchPickerItem$1 as ColorSwatchPickerItem, type ColorSwatchPickerItemProps$1 as ColorSwatchPickerItemProps, type ColorSwatchPickerProps$1 as ColorSwatchPickerProps, ColorSwatchPicker$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -8,14 +8,20 @@ import { ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components"
 //#region src/components/color-swatch-picker/index.tsx
 const styles = {
 	item: {
+		kUfP38: "x1upluxz",
+		kbwMcY: "x1v5kskh",
+		kPGmMm: "x1941vk7",
+		kWgvks: "xx38sju",
+		k5JduY: "x1s928wv",
+		kv0HGH: "xramuyw",
+		kloYau: "x2q1x1w",
+		kwXMNM: "x1j6awrg",
 		kaIpWk: "x1tfhd1",
 		kB7OPa: "x9f619",
 		kkrTdU: "x1ypdohk",
 		k1xSpc: "x3nfvp2",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
 		k3XXqK: "x1t137rt",
-		kMeerF: "x1de99jn",
+		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
 	itemDisabled: {
@@ -27,24 +33,22 @@ const styles = {
 		kjBf7l: "xrgy624",
 		kInvED: "x8wkva7",
 		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
 		$$css: true
 	},
 	itemHovered: {
-		kjBf7l: "x1wab145",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59 xq4115o",
+		kXtpa: "x1ek9lwj",
+		kbwMcY: "x86avzo xssfeg4",
 		$$css: true
 	},
 	itemPressed: {
-		kjBf7l: "x5ma03c",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59 xq4115o",
+		kXtpa: "xrwozs3",
+		kbwMcY: "x86avzo xssfeg4",
 		$$css: true
 	},
 	itemSelected: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
+		kXtpa: "xtl7nvb",
+		kbwMcY: "x86avzo",
 		$$css: true
 	}
 };
@@ -141,6 +145,6 @@ function itemStyles(state) {
 }
 ColorSwatchPicker$1.Item = ColorSwatchPickerItem$1;
 //#endregion
-export { ColorSwatchPicker$1 as default };
+export { ColorSwatchPickerItem$1 as ColorSwatchPickerItem, ColorSwatchPicker$1 as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","FORCED_COLORS","styles","item","kaIpWk","kB7OPa","kkrTdU","k1xSpc","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","itemDisabled","kSiTet","itemFocused","itemHovered","itemPressed","itemSelected","Omit","children","className","style","props","$","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","Item","ColorSwatchPicker","_c","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","ColorSwatch","stylex.props"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n//\n// **Hover and press are a ring too, in the slot selection would take.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen:\n// behind it the tint is hidden, over it the tint changes the colour. So an\n// unselected swatch under the pointer takes a ring at the selection ring's\n// offset, drawn in the outline roles rather than primary so it cannot be read\n// as chosen — outline variant while a pointer is over it, and outline while a\n// touch or a pen holds it. Those are the only presses anyone sees: React Aria\n// chooses a swatch the moment a mouse or a key presses it, and on release for\n// a touch, so that press is the one a reader waits through before the swatch\n// is theirs. Under forced colours both roles become one system colour, so the\n// ring turns dashed there, where the selection ring stays solid.\n\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  item: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  itemDisabled: {\n    kkrTdU: \"xt0e3qv\",\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  itemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x8wkva7\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  itemHovered: {\n    kjBf7l: \"x1wab145\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemPressed: {\n    kjBf7l: \"x5ma03c\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59 xq4115o\",\n    $$css: true\n  },\n  itemSelected: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  }\n};\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps & RefAttributes<HTMLDivElement>) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. The hover and press rings come before both, so a chosen or focused\n// swatch keeps the ring that says so. `disabled` is last, so it takes the\n// cursor with it; React Aria reports neither hover nor press on one.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}) {\n  return stylex.props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;AA+CA,MAAMoB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZP,QAAQ;EACRQ,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXP,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAI,aAAa;EACXR,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAK,aAAa;EACXT,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACAM,cAAc;EACZV,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAArB,oBAAAgC,OAAA;CAAA,MAAAC,IAAAzC,EAAA,CAAA;CAAA,IAAA0C;CAAA,IAAAD,EAAA,OAAAD,OAAA;EAC8CE,KAAA9B,oBAAoB,EAAA0B,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAFFC,KAAA,oBAACe,mBAAD;GAAqB,GAAKlB;GAAK,GAAME;EAEnC,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;AAOf,SAAAjC,wBAAAgC,IAAA;CAAA,MAAAD,IAAAzC,EAAA,EAAA;CAAA,IAAA4C;CAAA,IAAAP;CAAA,IAAAM;CAAA,IAAAE;CAAA,IAAAJ,EAAA,OAAAC,IAAA;EAA+B,MAAA,EAAAL,UAAAS,IAAA,GAAAN,UAAAE;EAAAL,WAAAS;EAIrBF,KAAAjC;EAA6B6B,KAAAA;EAAWK,KAAAjC,oBAAoBmC,YAAYP,KAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAG;EAAAH,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAJ,WAAAI,EAAA;EAAAE,KAAAF,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAJ,UAAA;EACjFS,KAAAT,YAAY,oBAACwB,eAAD,CAAY,CAAA;EAAGpB,EAAA,KAAAJ;EAAAI,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKR;GAAK,GAAMK;GAC3CC,UAAAA;EAD2B,CAAA;EAEHL,EAAA,KAAAG;EAAAH,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFtBO;AAEsB;AAa/B,SAASD,WAAWE,OAMjB;CACD,OAAO1C,MAAaY,OAAOC,MAAM6B,MAAMG,aAAajC,OAAOc,aAAagB,MAAMI,aAAalC,OAAOe,aAAae,MAAMK,cAAcnC,OAAOgB,cAAcc,MAAME,kBAAkBhC,OAAOa,aAAaiB,MAAMC,cAAc/B,OAAOW,YAAY;AAC7O;AACAtB,oBAAkB+C,OAAO7C"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ColorSwatchPickerItemProps","RACColorSwatchPickerItemProps","ColorSwatchPickerProps","RACColorSwatchPickerProps","stylex","ColorSwatchPicker","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","mergeStatefulStyles","colors","radii","spacing","stateLayerOpacity","ColorSwatch","FORCED_COLORS","styles","item","kUfP38","kbwMcY","kPGmMm","kWgvks","k5JduY","kv0HGH","kloYau","kwXMNM","kaIpWk","kB7OPa","kkrTdU","k1xSpc","k3XXqK","kVAEAm","$$css","itemDisabled","kSiTet","itemFocused","kjBf7l","kInvED","kMeerF","itemHovered","kXtpa","itemPressed","itemSelected","Omit","children","className","style","props","$","t0","t1","T0","t2","t3","itemStyles","t4","state","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","Item","ColorSwatchPicker","_c","RACColorSwatchPicker","ColorSwatchPickerItem","RACColorSwatchPickerItem","ColorSwatch","stylex.props"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn by different properties.** An element has\n// one outline, so with both drawn in it the second replaced the first, and a\n// keyboard arrowing onto the chosen colour saw a swatch that looked\n// unchosen. The focus ring is the item's outline, 6px out; the selection\n// ring is a border on a box laid 2px around the swatch, inside it. Both are\n// properties forced colours keep, which a box shadow is not.\n//\n// **Hover and press are a ring too, in the slot selection would take.** Every\n// other interactive element here answers the pointer with a state layer, but\n// a state layer is a fill and a swatch's fill is the colour being chosen:\n// behind it the tint is hidden, over it the tint changes the colour. So an\n// unselected swatch under the pointer takes a ring at the selection ring's\n// offset, drawn in the outline roles rather than primary so it cannot be read\n// as chosen — outline variant while a pointer is over it, and outline while a\n// touch or a pen holds it. Those are the only presses anyone sees: React Aria\n// chooses a swatch the moment a mouse or a key presses it, and on release for\n// a touch, so that press is the one a reader waits through before the swatch\n// is theirs. Under forced colours both roles become one system colour, so the\n// ring turns dashed there, where the selection ring stays solid.\n\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  item: {\n    kUfP38: \"x1upluxz\",\n    kbwMcY: \"x1v5kskh\",\n    kPGmMm: \"x1941vk7\",\n    kWgvks: \"xx38sju\",\n    k5JduY: \"x1s928wv\",\n    kv0HGH: \"xramuyw\",\n    kloYau: \"x2q1x1w\",\n    kwXMNM: \"x1j6awrg\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    $$css: true\n  },\n  itemDisabled: {\n    kkrTdU: \"xt0e3qv\",\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  },\n  itemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x8wkva7\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  itemHovered: {\n    kXtpa: \"x1ek9lwj\",\n    kbwMcY: \"x86avzo xssfeg4\",\n    $$css: true\n  },\n  itemPressed: {\n    kXtpa: \"xrwozs3\",\n    kbwMcY: \"x86avzo xssfeg4\",\n    $$css: true\n  },\n  itemSelected: {\n    kXtpa: \"xtl7nvb\",\n    kbwMcY: \"x86avzo\",\n    $$css: true\n  }\n};\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps & RefAttributes<HTMLDivElement>) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item's styles, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters where two styles draw on one property. The hover and\n// press rings come before `selected`, which draws on the same border, so a\n// chosen swatch keeps the ring that says so. `focused` draws on the outline,\n// which nothing else touches, so a swatch that is chosen and focused keeps\n// both. `disabled` is last, so it takes the cursor with it; React Aria\n// reports neither hover nor press on one.\nfunction itemStyles(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}) {\n  return stylex.props(styles.item, state.isHovered && styles.itemHovered, state.isPressed && styles.itemPressed, state.isSelected && styles.itemSelected, state.isFocusVisible && styles.itemFocused, state.isDisabled && styles.itemDisabled);\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport { ColorSwatchPickerItem };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;AAkDA,MAAMoB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZL,QAAQ;EACRM,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRP,QAAQ;EACRQ,QAAQ;EACRN,OAAO;CACT;CACAO,aAAa;EACXC,OAAO;EACPrB,QAAQ;EACRa,OAAO;CACT;CACAS,aAAa;EACXD,OAAO;EACPrB,QAAQ;EACRa,OAAO;CACT;CACAU,cAAc;EACZF,OAAO;EACPrB,QAAQ;EACRa,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAA3B,oBAAA0C,OAAA;CAAA,MAAAC,IAAAnD,EAAA,CAAA;CAAA,IAAAoD;CAAA,IAAAD,EAAA,OAAAD,OAAA;EAC8CE,KAAAxC,oBAAoB,EAAAoC,WACnD,4CACb,GAAGE,KAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAC;CAAA,OAAAA,KAAAD,EAAA;CAAA,IAAAE;CAAA,IAAAF,EAAA,OAAAD,SAAAC,EAAA,OAAAC,IAAA;EAFFC,KAAA,oBAACe,mBAAD;GAAqB,GAAKlB;GAAK,GAAME;EAEnC,CAAA;EAAID,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFNE;AAEM;;;;;AAOf,SAAA3C,wBAAA0C,IAAA;CAAA,MAAAD,IAAAnD,EAAA,EAAA;CAAA,IAAAsD;CAAA,IAAAP;CAAA,IAAAM;CAAA,IAAAE;CAAA,IAAAJ,EAAA,OAAAC,IAAA;EAA+B,MAAA,EAAAL,UAAAS,IAAA,GAAAN,UAAAE;EAAAL,WAAAS;EAIrBF,KAAA3C;EAA6BuC,KAAAA;EAAWK,KAAA3C,oBAAoB6C,YAAYP,KAAK;EAACC,EAAA,KAAAC;EAAAD,EAAA,KAAAG;EAAAH,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAA;EAAAD,KAAAH,EAAA;EAAAJ,WAAAI,EAAA;EAAAE,KAAAF,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAJ,UAAA;EACjFS,KAAAT,YAAY,oBAACwB,eAAD,CAAY,CAAA;EAAGpB,EAAA,KAAAJ;EAAAI,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAE,MAAAF,EAAA,OAAAI,MAAAJ,EAAA,QAAAK,IAAA;EADzBE,KAAA,oBAAC,IAAD;GAAyB,GAAKR;GAAK,GAAMK;GAC3CC,UAAAA;EAD2B,CAAA;EAEHL,EAAA,KAAAG;EAAAH,EAAA,KAAAE;EAAAF,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFtBO;AAEsB;AAa/B,SAASD,WAAWE,OAMjB;CACD,OAAOpD,MAAaY,OAAOC,MAAMuC,MAAMG,aAAa3C,OAAOuB,aAAaiB,MAAMI,aAAa5C,OAAOyB,aAAae,MAAMK,cAAc7C,OAAO0B,cAAcc,MAAME,kBAAkB1C,OAAOmB,aAAaqB,MAAMC,cAAczC,OAAOiB,YAAY;AAC7O;AACA5B,oBAAkByD,OAAOvD"}

package/dist/components/combo-box/index.d.ts

@@ -1,5 +1,5 @@
 import { FieldVariant } from "../../field/index.js";
-import { ReactNode, Ref, RefAttributes } from "react";
+import { ReactElement, ReactNode, Ref, RefAttributes } from "react";
 import { ComboBoxProps } from "react-aria-components";
 //#region src/components/combo-box/index.d.ts
 type ComboBoxProps$1<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {
@@ -51,9 +51,11 @@ type ComboBoxProps$1<T extends object = object, M extends ComboBoxSelectionMode
   leadingIcon?: ReactNode;
   /**
    * The options. `ListBox.Item` for each, and `ListBox.Section` to group
-   * them — the list inside is a ListBox, and takes everything one does.
+   * them — the list inside is a ListBox, and takes everything one does. With
+   * `items` or `defaultItems`, a function from an item to its option, which
+   * React Aria calls for each item the list shows.
    */
-  options?: ReactNode;
+  options?: ((item: T) => ReactElement) | ReactNode;
   /**
    * The filled box, or the outlined one, as the text fields page draws them.
    * @default 'filled'