@kanso-labs/kanso-ui 0.35.0 → 0.36.0

package/dist/components/chip-group/index.js

@@ -2,12 +2,11 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { CloseGlyph } from "../../glyphs/index.js";
-import { focus } from "../../styles/focus.js";
 import { invalidFrom } from "../../field/root.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
-import { chipGlyph, chipLabel } from "../../chip/index.js";
+import { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from "../../chip/index.js";
 import { textOf } from "../../collection/text.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -20,8 +19,8 @@ function chipContent(children, removeLabel) {
 		chipLabel(children),
 		state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
 			"aria-label": removeLabel,
+			className: chipRemoveClassName,
 			slot: "remove",
-			...props(chipStyles.remove),
 			children: /* @__PURE__ */ jsx(CloseGlyph, { ...props(chipStyles.removeGlyph) })
 		}) : null
 	] });
@@ -47,7 +46,7 @@ function chipContent(children, removeLabel) {
 * The call site's `className` and `style` land on the group as a whole,
 * which is the element a layout positions.
 */
-const RemoveLabelContext = createContext("Remove");
+const RemoveLabelContext = createContext(void 0);
 const LABEL_STATE_VALID = { isInvalid: false };
 const LABEL_STATE_INVALID = { isInvalid: true };
 function ChipGroup(t0) {
@@ -70,8 +69,8 @@ function ChipGroup(t0) {
 		error = t5;
 		items = t6;
 		label = t7;
+		removeLabel = t8;
 		renderEmptyState = t9;
-		removeLabel = t8 === void 0 ? "Remove" : t8;
 		invalid = invalidFrom(error);
 		T0 = TagGroup;
 		t1 = props$1;
@@ -178,7 +177,7 @@ function ChipGroupChip(t0) {
 	const removeLabel = useContext(RemoveLabelContext);
 	const T0 = Tag;
 	const t1 = props.textValue ?? textOf(children);
-	const t2 = mergeStatefulStyles(chipPropsFor, props);
+	const t2 = mergeStatefulStyles(groupChipPropsFor, props);
 	let t3;
 	if ($[0] !== children || $[1] !== removeLabel) {
 		t3 = chipContent(children, removeLabel);
@@ -203,11 +202,11 @@ function ChipGroupChip(t0) {
 	} else t4 = $[8];
 	return t4;
 }
-function chipPropsFor(state) {
-	return props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+function groupChipPropsFor(state) {
+	return chipPropsFor(state, true);
 }
 ChipGroup.Chip = ChipGroupChip;
 //#endregion
-export { ChipGroup as default };
+export { ChipGroupChip, ChipGroup as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/chip-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","target","targetInGroup","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\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   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipPropsFor","chipRemoveClassName","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","removeGlyph","RemoveLabelContext","undefined","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","root","ChipGroupChip","textValue","groupChipPropsFor","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\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   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\". Left out, React\n   * Aria names it in the reader's locale — \"Remove\" in English.\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string | undefined) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} className={chipRemoveClassName} slot=\"remove\">\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift. Undefined unless the group is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst RemoveLabelContext = createContext<string | undefined>(undefined);\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(groupChipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// The pill a standalone Chip draws, from `src/chip`, with the touch target a\n// chip in a group takes instead.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, true);\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}

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