@kanso-labs/kanso-ui 0.31.1 → 0.33.0

package/dist/chip/index.js

@@ -22,7 +22,19 @@ function chipGlyph(isSelected) {
 		children: /* @__PURE__ */ jsx(CheckGlyph, { ...props(chipStyles.glyphSvg) })
 	});
 }
+/**
+* The label a chip draws, in a span of its own so it can be cut short with an
+* ellipsis rather than wrapped out of the pill; see the header of `./styles`.
+* Shared for the reason `chipGlyph` is, by all three components that draw the
+* pill.
+*/
+function chipLabel(children) {
+	return /* @__PURE__ */ jsx("span", {
+		...props(chipStyles.label),
+		children
+	});
+}
 //#endregion
-export { chipGlyph };
+export { chipGlyph, chipLabel };
 
 //# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\nexport { chipGlyph };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","CheckGlyph","chipStyles","chipGlyph","isSelected","props","glyph","glyphSvg","chipLabel","children","label"],"sources":["../../src/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckGlyph } from '../glyphs';\nimport { chipStyles } from './styles';\n\n/**\n * The check a selected chip draws before its label, and nothing at all while\n * it is not selected. Returns a node rather than letting the type be\n * inferred, since `ReactNode` is a union that includes a promise and an\n * inferred one has to be `async`.\n *\n * Shared rather than written at each of the two call sites: Chip and\n * ChipGroup's chip draw the same pill from `./styles`, and a check written\n * twice is the drift that module exists to stop. Not a component of the\n * library's own and not exported from the package; see `src/row` for the\n * same arrangement around a list's row.\n */\nfunction chipGlyph(isSelected: boolean): ReactNode {\n  if (!isSelected) {\n    return null;\n  }\n  return <span {...stylex.props(chipStyles.glyph)}>\n      <CheckGlyph {...stylex.props(chipStyles.glyphSvg)} />\n    </span>;\n}\n\n/**\n * The label a chip draws, in a span of its own so it can be cut short with an\n * ellipsis rather than wrapped out of the pill; see the header of `./styles`.\n * Shared for the reason `chipGlyph` is, by all three components that draw the\n * pill.\n */\nfunction chipLabel(children: ReactNode): ReactNode {\n  return <span {...stylex.props(chipStyles.label)}>{children}</span>;\n}\nexport { chipGlyph, chipLabel };"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAASI,UAAUC,YAAgC;CACjD,IAAI,CAACA,YACH,OAAO;CAET,OAAO,oBAAC,QAAD;EAAM,GAAIJ,MAAaE,WAAWI,KAAK;EAC1C,UAAA,oBAAC,YAAD,EAAY,GAAIN,MAAaE,WAAWK,QAAQ,EAAE,CAAA;CAC9C,CAAA;AACV;;;;;;;AAQA,SAASC,UAAUC,UAAgC;CACjD,OAAO,oBAAC,QAAD;EAAM,GAAIT,MAAaE,WAAWQ,KAAK;EAAID;CAAe,CAAA;AACnE"}

package/dist/chip/styles.js

@@ -17,6 +17,7 @@ const chipStyles = {
 		kOIVth: "x126z3so",
 		kb6lSQ: "x155f00i",
 		kLWn49: "x1lz68p4",
+		ks0D6T: "x193iq5w",
 		k8WAf4: "xt970qd",
 		kg3NbH: "x790zyz",
 		kIyJzY: "x1qno0dh",
@@ -54,6 +55,13 @@ const chipStyles = {
 		kzqmXN: "xh8yej3",
 		$$css: true
 	},
+	label: {
+		kB7OPa: "x9f619",
+		kVQacm: "xb3r6kr",
+		kg5iWk: "xlyipyv",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	},
 	remove: {
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xy3r1oc x15a1ka xjbqb8w",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AA8CA,MAAMQ,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,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,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL3B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRkB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR9B,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAY,QAAQ;EACNhC,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRlB,OAAO;CACT;CACAmB,aAAa;EACXtC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAoB,UAAU;EACRhB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAqB,YAAY;EACVjB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","k6CgDc","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","ks0D6T","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","glyph","kzqmXN","kjj79g","keTefX","glyphSvg","label","kVQacm","kg5iWk","khDVqt","remove","k71WvV","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","removeGlyph","selected","unselected"],"sources":["../../src/chip/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the three components that draw\n// one: Chip, which is a toggle on its own; ChipGroup's chip, which is one of\n// a set that can also be removed; and TokenField's token, which takes `base`\n// and `unselected` alone — a token is not selectable, so it reaches for\n// neither the selected container nor the check below. The measurements and\n// roles are the page's filter chip — a 32dp container with an 8dp corner and\n// 16dp of inline padding, an outline variant border while unselected, the\n// secondary container pair once selected.\n//\n// **A label with no room on one line is cut short, never wrapped.** The\n// container is a fixed 32dp, so a second line has nowhere to go but out of\n// the pill: a chip or a token in a room narrower than its label drew the\n// rest below its own edge, and a chip in a group's row ran past the row's\n// end instead. The pill is held to the room it is in, and the label sits in\n// a span of its own that ends in an ellipsis where the pill does — a span,\n// because a flex container ignores `text-overflow`, which is also why\n// Material's own chips carry one. The whole label stays in the DOM, so a\n// screen reader still reads all of it.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// A selected chip carries the page's check before its label, which is what\n// makes the selection legible without colour. The two containers differ in\n// colour alone, and under a scheme whose secondary container sits close to\n// the surface — or for a reader who does not see colour — that is no\n// difference at all.\n//\n// The chip widens when the check appears, and that is the page's behaviour\n// rather than a cost of drawing it: a chip is flow content, laid out in a\n// row that wraps, so nothing around it has a width to hold. A segmented\n// button's segments are equal columns of one track, which is a different\n// geometry answering a different question, and the two should not be read\n// across.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x193iq5w\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  glyph: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xmix8c7\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kGuDYH: \"xosj86m\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    keTefX: \"xxuhe3a\",\n    $$css: true\n  },\n  glyphSvg: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  label: {\n    kB7OPa: \"x9f619\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    k71WvV: \"x1kfc2zf\",\n    kjBf7l: \"x14ytart\",\n    kInvED: \"x1y3gkto\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  removeGlyph: {\n    kZKoxP: \"xmix8c7\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  selected: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  }\n};\nexport { chipStyles };"],"mappings":";AAwDA,MAAMQ,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,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,UAAU;EACRC,QAAQ;EACRjB,QAAQ;EACRe,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,OAAO;EACL5B,QAAQ;EACRC,QAAQ;EACRM,QAAQ;EACRC,OAAO;EACPE,QAAQ;EACRmB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,UAAU;EACR/B,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAY,OAAO;EACL5B,QAAQ;EACR6B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,QAAQ;EACNrC,QAAQ;EACRyB,QAAQ;EACRxB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRkB,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPqB,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRtB,OAAO;CACT;CACAuB,aAAa;EACX3C,QAAQ;EACR4B,QAAQ;EACRR,OAAO;CACT;CACAwB,UAAU;EACRpB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAyB,YAAY;EACVrB,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}

package/dist/components/chip/index.js

@@ -3,7 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, toggleButtonRenderer } from "../../render/aria.js";
 import { focus } from "../../styles/focus.js";
 import { chipStyles } from "../../chip/styles.js";
-import { chipGlyph } from "../../chip/index.js";
+import { chipGlyph, chipLabel } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
@@ -70,7 +70,7 @@ function Chip(t0) {
 	return t5;
 }
 function chipContent(children) {
-	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), children] });
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), chipLabel(children)] });
 }
 function propsFor(state) {
 	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {children}\n    </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAe,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAd;EAAqBe,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC3B,UAAU2B,MAAMC,UAAU,GAC1BpB,QACH,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO7B,MAAaG,WAAW4B,MAAMzB,MAAM0B,MAAMH,MAAMC,aAAa3B,WAAW8B,WAAW9B,WAAW+B,YAAYL,MAAMM,cAAchC,WAAWiC,UAAUP,MAAMM,eAAeN,MAAMC,aAAa3B,WAAWkC,mBAAmBlC,WAAWmC,mBAAmB;AAChQ"}
+{"version":3,"file":"index.js","names":["ReactNode","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipGlyph","chipLabel","chipStyles","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","ChipProps","Omit","children","Chip","t0","$","_c","T0","t1","t2","t3","t4","onKeyDown","onKeyUp","render","props","element","aria","propsFor","chipContent","t5","state","isSelected","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToggleButtonProps as RACToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's `ToggleButton` around them, which is what makes a\n// standalone chip a two-state button rather than one of a set.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n\ntype ChipProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode;\n};\n\n/**\n * A chip is a two-state button, so its selected state is React Aria's\n * `isSelected`: pass it with `onChange` to control it, or `defaultSelected` to\n * let it keep its own state. Selection is announced through `aria-pressed`\n * rather than a role of its own.\n */\nfunction Chip({\n  children,\n  onKeyDown,\n  onKeyUp,\n  render,\n  ...props\n}: ChipProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <ToggleButton render={toggleButtonRenderer(element, render)} {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {chipContent(children)}\n    </ToggleButton>;\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected, then the label. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction chipContent(children: ReactNode) {\n  return (state: ToggleButtonRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n    </>;\n}\n\n// StyleX has no way to target [data-selected] on the element it is styling,\n// so the selected styles cannot be chosen in CSS. React Aria's answer is to\n// let className and style be functions of the component's own render state,\n// which is what this is — and it is why an uncontrolled chip styles itself\n// correctly without this component keeping a copy of the state.\n//\n// mergeStatefulStyles takes the function rather than a computed result for\n// exactly that reason, and combines it with whatever the call site passed.\nfunction propsFor(state: ToggleButtonRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nexport type { ChipProps };\nexport default Chip;"],"mappings":";;;;;;;;;;;;;;;;AAyCA,SAAAgB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,UAAAS,IAAAC,WAAAC,SAAAC,QAAA,GAAAC,UAAAX;EAAAF,WAAAS;EAOZ,MAAAK,UAAgB;GAAAC,MACRrB,iBAAiBmB,KAAK;GAACH;GAAAC;EAG/B;EACQN,KAAAf;EAAqBgB,KAAAX,qBAAqBmB,SAASF,MAAM;EAAOC,KAAAA;EAAWL,KAAAX,oBAAoBmB,UAAUH,KAAK;EAACV,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAH,UAAA;EAClHS,KAAAQ,YAAYjB,QAAQ;EAACG,EAAA,KAAAH;EAAAG,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADnBS,KAAA,oBAAC,IAAD;GAAsB,QAAAZ;GAAqC,GAAMO;GAAK,GAAML;GAC9EC,UAAAA;EADe,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAFVe;AAEU;AAOnB,SAASD,YAAYjB,UAAqB;CACxC,QAAQmB,UAAmC,qBAAA,UAAA,EAAA,UAAA,CACtC5B,UAAU4B,MAAMC,UAAU,GAC1B5B,UAAUQ,QAAQ,CACrB,EAAA,CAAA;AACJ;AAUA,SAASgB,SAASG,OAAgC;CAChD,OAAO9B,MAAaI,WAAW4B,MAAMzB,MAAM0B,MAAMH,MAAMC,aAAa3B,WAAW8B,WAAW9B,WAAW+B,YAAYL,MAAMM,cAAchC,WAAWiC,UAAUP,MAAMM,eAAeN,MAAMC,aAAa3B,WAAWkC,mBAAmBlC,WAAWmC,mBAAmB;AAChQ"}

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

@@ -6,7 +6,7 @@ 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 } from "../../chip/index.js";
+import { chipGlyph, chipLabel } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,7 @@ import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 function chipContent(children, removeLabel) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		chipGlyph(state.isSelected),
-		children,
+		chipLabel(children),
 		state.allowsRemoving ? /* @__PURE__ */ jsx(Button, {
 			"aria-label": removeLabel,
 			slot: "remove",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipStyles","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","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } 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 } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\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      {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>) {\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, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","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","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","textOf","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { 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>) {\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, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\n\n// What the chip is worth as text, for the typeahead React Aria drives from a\n// chip's words and for what a screen reader announces. It reads it off the\n// children when they are a string and finds nothing when they are not — and a\n// chip here is always an element once it can be removed. So a plain-string\n// label becomes the text value, and anything else has to say what it is worth\n// through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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