@kanso-labs/kanso-ui 0.30.4 → 0.31.1

package/dist/chip/styles.js

@@ -1,6 +1,7 @@
 //#region src/chip/styles.ts
 const chipStyles = {
 	base: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kZKoxP: "xig8zya",
 		kaIpWk: "x1xdvaa9",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","chipStyles","base","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    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,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","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"}

package/dist/components/app-bar/index.js

@@ -25,6 +25,7 @@ const HEIGHTS = {
 const COLLAPSED_HEIGHT = HEIGHTS.small.plain;
 const styles = {
 	root: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kWkggS: "x14s9m32",
 		kB7OPa: "x9f619",
@@ -146,7 +147,7 @@ function AppBar(t0) {
 		let t18;
 		if ($[13] !== collapse || $[14] !== headingLevel || $[15] !== headline || $[16] !== size) {
 			t18 = headline === void 0 ? null : /* @__PURE__ */ jsx(Text, {
-				className: "xioksi3 x1nxaspg x1seskgd",
+				className: "x12w9bfk xioksi3 x1nxaspg x1seskgd",
 				render: heading(headingLevel),
 				variant: collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size],
 				children: headline

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","createElement","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","props","collapse","expandedHeight","height","t14","t15","t16","Symbol","for","0","className","1","t17","t18","t19","t20","t21","children","defaultTagName"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   *\n   * Spelled out rather than the `sm`/`md`/`lg` the rest of the library takes\n   * — see AGENTS.md, under Prop vocabularies. It predates that rule, and\n   * renaming a public prop's values is a breaking change of its own rather\n   * than something to fold into other work.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","createElement","RenderComponentProps","useRender","mergeStyles","colors","motion","spacing","Text","HEADLINE_OFFSET","DEFAULT_CONTENT_INSET","HEIGHTS","large","plain","withSubtitle","medium","small","const","COLLAPSED_HEIGHT","styles","root","k6CgDc","kGNEyG","kWkggS","kB7OPa","k1xSpc","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","row","kOIVth","kzqmXN","kUOVxO","scrolled","HEADLINE_VARIANT","HEADINGS","heading","level","index","Math","min","max","round","length","PARAGRAPH","_temp","kAzted","heightStyles","minBlockSize","val","undefined","_temp2","ks0D6T","kg3NbH","rowStyles","contentInset","maxInlineSize","AppBarProps","Omit","align","collapsed","contentMaxInlineSize","headingLevel","headline","leading","size","subtitle","trailing","AppBar","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","props","collapse","expandedHeight","height","t14","t15","t16","Symbol","for","0","className","1","t17","t18","t19","t20","t21","children","defaultTagName"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1> unless the call site says otherwise. `headingLevel` is what says\n// otherwise, and a bar drawn beside another bar — one per pane in a\n// `ListDetail` or a `SupportingPane` — or under a page heading of its own\n// should lower it.\n//\n// Built here rather than kept as a constant per level: `headline` becomes the\n// heading's children, so a call site cannot demote the heading by passing one\n// of its own. `headline={<h2>…</h2>}` renders an h2 inside the h1 — two\n// headings where one was wanted, which React does not warn about.\n//\n// The level is looked up rather than interpolated into a tag name. `h7` is a\n// custom element as far as React is concerned, so it renders without a word\n// said and leaves the outline worse than the default would have. Disclosure's\n// own `headingLevel` hands the number to React Aria, which is why that one\n// needs no equivalent.\nconst HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nfunction heading(level: number) {\n  const index = Math.min(Math.max(Math.round(level), 1), HEADINGS.length) - 1;\n  return createElement(HEADINGS[index]);\n}\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /**\n   * Where the headline sits in the page's outline. A screen reader moves\n   * between headings, so a bar drawn beside another bar, or under a page\n   * heading of its own, should lower it.\n   * @default 1\n   */\n  headingLevel?: number;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   *\n   * Spelled out rather than the `sm`/`md`/`lg` the rest of the library takes\n   * — see AGENTS.md, under Prop vocabularies. It predates that rule, and\n   * renaming a public prop's values is a breaking change of its own rather\n   * than something to fold into other work.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headingLevel = 1,\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"x12w9bfk xioksi3 x1nxaspg x1seskgd\" render={heading(headingLevel)} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}

package/dist/components/checkbox/index.js

@@ -13,6 +13,7 @@ import { CheckboxButton, CheckboxField } from "react-aria-components";
 //#region src/components/checkbox/index.tsx
 const styles = {
 	box: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xjbqb8w",
 		kZKoxP: "xmix8c7",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","styles","box","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","_c","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all 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} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","_c","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all 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} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

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

@@ -222,8 +222,8 @@ function ComboToggle() {
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
-			0: { className: "xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
-			1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
+			0: { className: "x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
+			1: { className: "x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
 		};
 		$[1] = t1;
 	} else t1 = $[1];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x16fbrrb\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x16fbrrb\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all 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   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

package/dist/components/disclosure/index.js

@@ -15,8 +15,8 @@ const styles = { header: {
 } };
 function chevronFor(isExpanded) {
 	return /* @__PURE__ */ jsx(ChevronEndGlyph, { ...{
-		0: { className: "xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
-		1: { className: "xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
+		0: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7" },
+		1: { className: "x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl" }
 	}[!!isExpanded << 0] });
 }
 /**

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

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

package/dist/components/drop-zone/index.js

@@ -5,9 +5,9 @@ import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DropZone, FileTrigger } from "react-aria-components";
 //#region src/components/drop-zone/index.tsx
-function content(children, label) {
+function content(children, label, isDisabled) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [label === void 0 ? null : /* @__PURE__ */ jsx("p", {
-		...props(dropZoneStyles.label),
+		...props(dropZoneStyles.label, isDisabled && dropZoneStyles.labelDisabled),
 		children: label
 	}), children] });
 }
@@ -33,58 +33,47 @@ function content(children, label) {
 * is the element a layout positions.
 */
 function DropZone$1(t0) {
-	const $ = c(16);
+	const $ = c(12);
 	let T0;
-	let children;
-	let label;
 	let t1;
 	let t2;
 	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		const { children: t4, label: t5, ...props } = t0;
-		children = t4;
-		label = t5;
+		const { children, label, ...props } = t0;
 		T0 = DropZone;
 		t1 = props["aria-label"] ?? label;
 		t2 = props;
 		t3 = mergeStatefulStyles(rootStyles, props);
+		t4 = content(children, label, props.isDisabled ?? false);
 		$[0] = t0;
 		$[1] = T0;
-		$[2] = children;
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t2;
-		$[6] = t3;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
 	} else {
 		T0 = $[1];
-		children = $[2];
-		label = $[3];
-		t1 = $[4];
-		t2 = $[5];
-		t3 = $[6];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
 	}
-	let t4;
-	if ($[7] !== children || $[8] !== label) {
-		t4 = content(children, label);
-		$[7] = children;
-		$[8] = label;
-		$[9] = t4;
-	} else t4 = $[9];
 	let t5;
-	if ($[10] !== T0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+	if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			"aria-label": t1,
 			...t2,
 			...t3,
 			children: t4
 		});
-		$[10] = T0;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
 	return t5;
 }
 /**

package/dist/components/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DropZoneProps","RACDropZoneProps","FileTriggerProps","RACFileTriggerProps","stylex","DropZone","RACDropZone","FileTrigger","RACFileTrigger","mergeStatefulStyles","dropZoneStyles","rootStyles","Omit","children","className","label","style","content","undefined","props","t0","$","_c","T0","t1","t2","t3","t4","t5"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label)}>{label}</p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAASkB,QAAQJ,UAAqBE,OAA2B;CAC/D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFA,UAAUG,KAAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAId,MAAaM,eAAeK,KAAK;EAAIA,UAAAA;CAAS,CAAA,GAClFF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAR,WAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAE;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAP,UAAAc,IAAAZ,OAAAa,IAAA,GAAAT,UAAAC;EAAAP,WAAAc;EAAAZ,QAAAa;EAKRL,KAAAjB;EAAwBkB,KAAAL,MAAM,iBAANJ;EAAkCI,KAAAA;EAAWO,KAAAjB,oBAAoBE,YAAYQ,KAAK;EAACE,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAR,WAAAQ,EAAA;EAAAN,QAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAR,YAAAQ,EAAA,OAAAN,OAAA;EAC9GY,KAAAV,QAAQJ,UAAUE,KAAK;EAACM,EAAA,KAAAR;EAAAQ,EAAA,KAAAN;EAAAM,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EADtBC,KAAA,oBAAC,IAAD;GAAyB,cAAAJ;GAA4B,GAAML;GAAK,GAAMO;GACxEC,UAAAA;EADc,CAAA;EAEHN,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFTO;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAArB,cAAAY,OAAA;CAAA,MAAAE,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAF,OAAA;EACSC,KAAA,oBAAC,aAAD,EAAe,GAAKD,MAAK,CAAA;EAAIE,EAAA,KAAAF;EAAAE,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B"}
+{"version":3,"file":"index.js","names":["ReactNode","DropZoneProps","RACDropZoneProps","FileTriggerProps","RACFileTriggerProps","stylex","DropZone","RACDropZone","FileTrigger","RACFileTrigger","mergeStatefulStyles","dropZoneStyles","rootStyles","Omit","children","className","label","style","content","isDisabled","undefined","props","labelDisabled","t0","$","_c","T0","t1","t2","t3","t4","t5"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined, isDisabled: boolean) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label, isDisabled && dropZoneStyles.labelDisabled)}>\n          {label}\n        </p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label, props.isDisabled ?? false)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAASkB,QAAQJ,UAAqBE,OAA2BG,YAAqB;CACpF,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFH,UAAUI,KAAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAIf,MAAaM,eAAeK,OAAOG,cAAcR,eAAeW,aAAa;EAC7GN,UAAAA;CACA,CAAA,GACJF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAR,WAAAiB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAT,UAAAE,OAAA,GAAAK,UAAAE;EAKRG,KAAAnB;EAAwBoB,KAAAN,MAAM,iBAANL;EAAkCK,KAAAA;EAAWQ,KAAAnB,oBAAoBE,YAAYS,KAAK;EAC7GS,KAAAZ,QAAQJ,UAAUE,OAAOK,MAAKF,cAAL,KAAyB;EAACK,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADjDC,KAAA,oBAAC,IAAD;GAAyB,cAAAJ;GAA4B,GAAMN;GAAK,GAAMQ;GACxEC,UAAAA;EADc,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFTO;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAAvB,cAAAa,OAAA;CAAA,MAAAG,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAH,OAAA;EACSE,KAAA,oBAAC,aAAD,EAAe,GAAKF,MAAK,CAAA;EAAIG,EAAA,KAAAH;EAAAG,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B"}