@kanso-labs/kanso-ui 0.34.9 → 0.34.10

package/dist/calendar/index.js

@@ -73,8 +73,8 @@ function calendarHeaderCell(day) {
 		children: day
 	});
 }
-function chevronClassName() {
-	return props(iconButton.chrome, calendarStyles.chevron, focus.ring).className ?? "";
+function chevronClassName(state) {
+	return props(iconButton.chrome, calendarStyles.chevron, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? "";
 }
 //#endregion
 export { CalendarGridHeader$1 as CalendarGridHeader, CalendarHeader };

package/dist/calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactElement","stylex","Button","RACButton","CalendarGridHeader","RACCalendarGridHeader","CalendarHeaderCell","RACCalendarHeaderCell","Heading","RACHeading","ChevronEndGlyph","focus","iconButton","calendarStyles","$","_c","t0","Symbol","for","calendarHeaderCell","CalendarHeader","props","header","t1","chevronClassName","chevronGlyph","chevronGlyphPrevious","t2","heading","t3","day","headerCell","chrome","chevron","ring","className"],"sources":["../../src/calendar/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../glyphs';\nimport { focus } from '../styles/focus';\nimport { iconButton } from '../styles/icon-button';\nimport { calendarStyles } from './styles';\n\n// The parts Calendar and RangeCalendar both render: the row that moves the\n// month, the weekday header, and the offsets that put more than one month\n// side by side. Apart from either component so the two cannot drift, and\n// outside `src/components` for the reason ./styles.ts gives.\n\nfunction CalendarGridHeader(): ReactElement {\n  return <RACCalendarGridHeader>{calendarHeaderCell}</RACCalendarGridHeader>;\n}\n\n/**\n * The two chevrons with the month between them. React Aria wires\n * `slot=\"previous\"` and `slot=\"next\"` on its own `Button`, and `IconButton`\n * renders React Aria's `Button` too — so nesting one inside a slot would put\n * two buttons where the date pickers page draws one. The chevrons take the\n * icon buttons page's 40dp square and its state layer instead.\n *\n * A plain element rather than a `<header>`: a header is a banner landmark,\n * landmarks may not nest, and React Aria puts a calendar in\n * `role=\"application\"` — axe fails the page on it.\n */\nfunction CalendarHeader(): ReactElement {\n  return <div {...stylex.props(calendarStyles.header)}>\n      <RACButton className={chevronClassName} slot=\"previous\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph, calendarStyles.chevronGlyphPrevious)} />\n      </RACButton>\n      <RACHeading {...stylex.props(calendarStyles.heading)} />\n      <RACButton className={chevronClassName} slot=\"next\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph)} />\n      </RACButton>\n    </div>;\n}\n\n/** The weekday row, in the type the page gives both it and the dates. */\nfunction calendarHeaderCell(day: string): ReactElement {\n  return <RACCalendarHeaderCell {...stylex.props(calendarStyles.headerCell)}>\n      {day}\n    </RACCalendarHeaderCell>;\n}\nfunction chevronClassName() {\n  return stylex.props(iconButton.chrome, calendarStyles.chevron, focus.ring).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;;;AAaA,SAAAI,uBAAA;CAAA,MAAAU,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACSF,KAAA,oBAAC,oBAAD,EAAA,UAAwBG,mBAAF,CAAA;EAA6CL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAAnEE;AAAmE;;;;;;;;;;;;AAc5E,SAAAI,iBAAA;CAAA,MAAAN,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACkBF,KAAAf,MAAaY,eAAcS,MAAO;EAACR,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAC/CK,KAAA,oBAAC,QAAD;GAAsBC,WAAAA;GAAuB,MAAA;GAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKvB,MAAaY,eAAcY,cAAeZ,eAAca,oBAAqB,EAAC,CAAA;EAD3F,CAAA;EAEEZ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACZS,KAAA,oBAAC,SAAD,EAAW,GAAK1B,MAAaY,eAAce,OAAQ,EAAC,CAAA;EAAId,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAJrDW,KAAA,qBAAA,OAAA;GAQC,GARQb;GAAT,UAAA;IACHO;IAGAI;IACA,oBAAC,QAAD;KAAsBH,WAAAA;KAAuB,MAAA;KAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKvB,MAAaY,eAAcY,YAAa,EAAC,CAAA;IADtD,CAAA;GAGN;;EAAAX,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OARDe;AAQC;;AAIV,SAASV,mBAAmBW,KAA2B;CACrD,OAAO,oBAAC,oBAAD;EAAuB,GAAI7B,MAAaY,eAAekB,UAAU;EACnED,UAAAA;CACoB,CAAA;AAC3B;AACA,SAASN,mBAAmB;CAC1B,OAAOvB,MAAaW,WAAWoB,QAAQnB,eAAeoB,SAAStB,MAAMuB,IAAI,CAAC,CAACC,aAAa;AAC1F"}
+{"version":3,"file":"index.js","names":["ReactElement","stylex","Button","RACButton","CalendarGridHeader","RACCalendarGridHeader","CalendarHeaderCell","RACCalendarHeaderCell","Heading","RACHeading","ChevronEndGlyph","focus","iconButton","calendarStyles","$","_c","t0","Symbol","for","calendarHeaderCell","CalendarHeader","props","header","t1","chevronClassName","chevronGlyph","chevronGlyphPrevious","t2","heading","t3","day","headerCell","state","isDisabled","chrome","chevron","ring","chromeDisabled","className"],"sources":["../../src/calendar/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, CalendarGridHeader as RACCalendarGridHeader, CalendarHeaderCell as RACCalendarHeaderCell, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../glyphs';\nimport { focus } from '../styles/focus';\nimport { iconButton } from '../styles/icon-button';\nimport { calendarStyles } from './styles';\n\n// The parts Calendar and RangeCalendar both render: the row that moves the\n// month, the weekday header, and the offsets that put more than one month\n// side by side. Apart from either component so the two cannot drift, and\n// outside `src/components` for the reason ./styles.ts gives.\n\nfunction CalendarGridHeader(): ReactElement {\n  return <RACCalendarGridHeader>{calendarHeaderCell}</RACCalendarGridHeader>;\n}\n\n/**\n * The two chevrons with the month between them. React Aria wires\n * `slot=\"previous\"` and `slot=\"next\"` on its own `Button`, and `IconButton`\n * renders React Aria's `Button` too — so nesting one inside a slot would put\n * two buttons where the date pickers page draws one. The chevrons take the\n * icon buttons page's 40dp square and its state layer instead.\n *\n * A plain element rather than a `<header>`: a header is a banner landmark,\n * landmarks may not nest, and React Aria puts a calendar in\n * `role=\"application\"` — axe fails the page on it.\n */\nfunction CalendarHeader(): ReactElement {\n  return <div {...stylex.props(calendarStyles.header)}>\n      <RACButton className={chevronClassName} slot=\"previous\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph, calendarStyles.chevronGlyphPrevious)} />\n      </RACButton>\n      <RACHeading {...stylex.props(calendarStyles.heading)} />\n      <RACButton className={chevronClassName} slot=\"next\">\n        <ChevronEndGlyph {...stylex.props(calendarStyles.chevronGlyph)} />\n      </RACButton>\n    </div>;\n}\n\n/** The weekday row, in the type the page gives both it and the dates. */\nfunction calendarHeaderCell(day: string): ReactElement {\n  return <RACCalendarHeaderCell {...stylex.props(calendarStyles.headerCell)}>\n      {day}\n    </RACCalendarHeaderCell>;\n}\n\n// A chevron's classes, from React Aria's own render state. React Aria\n// disables one when the month it would move to is outside `minValue` and\n// `maxValue`, or the whole calendar is disabled, and a press on it then does\n// nothing — so it takes the shared fade, which drops the state layer too.\nfunction chevronClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, calendarStyles.chevron, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;;;AAaA,SAAAI,uBAAA;CAAA,MAAAU,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACSF,KAAA,oBAAC,oBAAD,EAAA,UAAwBG,mBAAF,CAAA;EAA6CL,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAAnEE;AAAmE;;;;;;;;;;;;AAc5E,SAAAI,iBAAA;CAAA,MAAAN,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACkBF,KAAAf,MAAaY,eAAcS,MAAO;EAACR,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAC/CK,KAAA,oBAAC,QAAD;GAAsBC,WAAAA;GAAuB,MAAA;GAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKvB,MAAaY,eAAcY,cAAeZ,eAAca,oBAAqB,EAAC,CAAA;EAD3F,CAAA;EAEEZ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACZS,KAAA,oBAAC,SAAD,EAAW,GAAK1B,MAAaY,eAAce,OAAQ,EAAC,CAAA;EAAId,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAJrDW,KAAA,qBAAA,OAAA;GAQC,GARQb;GAAT,UAAA;IACHO;IAGAI;IACA,oBAAC,QAAD;KAAsBH,WAAAA;KAAuB,MAAA;KAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAKvB,MAAaY,eAAcY,YAAa,EAAC,CAAA;IADtD,CAAA;GAGN;;EAAAX,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OARDe;AAQC;;AAIV,SAASV,mBAAmBW,KAA2B;CACrD,OAAO,oBAAC,oBAAD;EAAuB,GAAI7B,MAAaY,eAAekB,UAAU;EACnED,UAAAA;CACoB,CAAA;AAC3B;AAMA,SAASN,iBAAiBQ,OAEvB;CACD,OAAO/B,MAAaW,WAAWsB,QAAQrB,eAAesB,SAASxB,MAAMyB,MAAMJ,MAAMC,cAAcrB,WAAWyB,cAAc,CAAC,CAACC,aAAa;AACzI"}

package/dist/calendar/styles.js

@@ -23,14 +23,18 @@ const calendarStyles = {
 		kWkggS: "xjbqb8w",
 		kMwMTN: "x9w6zvh",
 		kkrTdU: "x1h6gzvc",
+		kAXs8y: "xr5dkdi",
 		$$css: true
 	},
 	cellInRange: {
-		kWkggS: "x1mpme18 x1q7sp4o x15dekr4",
+		kWkggS: "x12abq7s x41qtu3 x15dekr4 x1jzqe4",
+		kVAM5u: "x1uajy3w x1n2ykn",
 		kaIpWk: "x2u8bby",
-		kMwMTN: "x1sawysd",
+		kMwMTN: "x1sawysd x1k5gbb1",
+		kAXs8y: "x1g12otp",
 		kzqmXN: "xh8yej3",
 		kUOVxO: "xrxpjvj",
+		kjBf7l: "xrgy624 x3teovq",
 		$$css: true
 	},
 	cellRangeEnd: {
@@ -44,8 +48,11 @@ const calendarStyles = {
 		$$css: true
 	},
 	cellSelected: {
-		kWkggS: "x1nik15g x1q2w5h1 xnety89",
-		kMwMTN: "xwjo7ld",
+		kWkggS: "xpky1to xyf7a0q xnety89 x1jzqe4",
+		kVAM5u: "x1uajy3w x1n2ykn",
+		kMwMTN: "xwjo7ld x1k5gbb1",
+		kAXs8y: "x1g12otp",
+		kjBf7l: "xrgy624 x3teovq",
 		$$css: true
 	},
 	cellToday: {
@@ -58,6 +65,7 @@ const calendarStyles = {
 	cellUnavailable: {
 		kWkggS: "xjbqb8w",
 		kkrTdU: "x1h6gzvc",
+		kAXs8y: "xr5dkdi",
 		kMnn75: "x5lhwog",
 		$$css: true
 	},

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — is marked as the\n// library's own where it is defined, since the page tokenises no such thing.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x1mpme18 x1q7sp4o x15dekr4\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"x1nik15g x1q2w5h1 xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AAyBA,MAAMQ,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRU,OAAO;CACT;CACAE,aAAa;EACXjB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRC,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZxB,QAAQ;EACRI,QAAQ;EACRW,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRW,OAAO;CACT;CACAc,iBAAiB;EACf7B,QAAQ;EACRK,QAAQ;EACRyB,QAAQ;EACRf,OAAO;CACT;CACAgB,SAAS;EACPjB,QAAQ;EACRC,OAAO;CACT;CACAiB,cAAc;EACZ/B,QAAQ;EACRS,QAAQ;EACRuB,QAAQ;EACRlB,OAAO;CACT;CACAmB,sBAAsB;EACpBD,QAAQ;EACRlB,OAAO;CACT;CACAoB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACR3B,QAAQ;EACRK,OAAO;CACT;CACAuB,QAAQ;EACNvC,QAAQ;EACRO,QAAQ;EACRiC,QAAQ;EACR5B,QAAQ;EACR6B,QAAQ;EACRzB,OAAO;CACT;CACA0B,YAAY;EACVxC,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACA2B,SAAS;EACPtC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACR7B,OAAO;CACT;CACA8B,QAAQ;EACN9C,QAAQ;EACRO,QAAQ;EACRiC,QAAQ;EACRC,QAAQ;EACRzB,OAAO;CACT;CACA+B,MAAM;EACJ9C,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRyC,QAAQ;EACRR,QAAQ;EACR7B,QAAQ;EACRsC,QAAQ;EACRC,QAAQ;EACRlC,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz","kmVPX3"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x12abq7s x41qtu3 x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xpky1to xyf7a0q xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  grid: {\n    kLvRdT: \"x1vathgz\",\n    kheTzg: \"x1gukg7c\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x1qughib\",\n    kAzted: \"x1ba4aug\",\n    $$css: true\n  },\n  headerCell: {\n    kZKoxP: \"x1vqgdyp\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    $$css: true\n  },\n  heading: {\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kogj98: \"x1ghz6dp\",\n    k9WMMc: \"x2b8uid\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\nexport { calendarStyles };"],"mappings":";AA6CA,MAAMS,iBAAiB;CACrBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZhB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRY,QAAQ;EACRF,OAAO;CACT;CACAG,aAAa;EACXlB,QAAQ;EACRmB,QAAQ;EACRjB,QAAQ;EACRE,QAAQ;EACRa,QAAQ;EACRP,QAAQ;EACRI,QAAQ;EACRM,QAAQ;EACRL,OAAO;CACT;CACAM,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZ3B,QAAQ;EACRmB,QAAQ;EACRf,QAAQ;EACRa,QAAQ;EACRG,QAAQ;EACRL,OAAO;CACT;CACAa,WAAW;EACTT,QAAQ;EACRU,QAAQ;EACRC,QAAQ;EACR1B,QAAQ;EACRW,OAAO;CACT;CACAgB,iBAAiB;EACf/B,QAAQ;EACRK,QAAQ;EACRY,QAAQ;EACRe,QAAQ;EACRjB,OAAO;CACT;CACAkB,SAAS;EACPnB,QAAQ;EACRC,OAAO;CACT;CACAmB,cAAc;EACZjC,QAAQ;EACRS,QAAQ;EACRyB,QAAQ;EACRpB,OAAO;CACT;CACAqB,sBAAsB;EACpBD,QAAQ;EACRpB,OAAO;CACT;CACAsB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACR7B,QAAQ;EACRK,OAAO;CACT;CACAyB,QAAQ;EACNzC,QAAQ;EACRO,QAAQ;EACRmC,QAAQ;EACR9B,QAAQ;EACR+B,QAAQ;EACR3B,OAAO;CACT;CACA4B,YAAY;EACV1C,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRE,OAAO;CACT;CACA6B,SAAS;EACPxC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRgC,QAAQ;EACRC,QAAQ;EACR/B,OAAO;CACT;CACAgC,QAAQ;EACNhD,QAAQ;EACRO,QAAQ;EACRmC,QAAQ;EACRC,QAAQ;EACR3B,OAAO;CACT;CACAiC,MAAM;EACJhD,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACR2C,QAAQ;EACRR,QAAQ;EACR/B,QAAQ;EACRwC,QAAQ;EACRC,QAAQ;EACRpC,OAAO;CACT;AACF"}

package/dist/chip/styles.js

@@ -63,6 +63,9 @@ const chipStyles = {
 		$$css: true
 	},
 	remove: {
+		kgeoSG: "x1cpjm7i",
+		kFcpXp: "xtu493u",
+		kEoFBp: "x1hmns74",
 		kGNEyG: "x6s0dn4",
 		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
 		kZKoxP: "xmix8c7",
@@ -81,6 +84,7 @@ const chipStyles = {
 		k3XXqK: "x9v5kkp x1t137rt",
 		kMeerF: "x1de99jn",
 		kmVPX3: "x1717udv",
+		kVAEAm: "x1n2onr6",
 		$$css: true
 	},
 	removeGlyph: {
@@ -94,6 +98,18 @@ const chipStyles = {
 		kMwMTN: "x1sawysd",
 		$$css: true
 	},
+	target: {
+		kgeoSG: "x1cpjm7i",
+		kGOzcv: "xouqwce",
+		kpsdNU: "xm4btww",
+		kEoFBp: "x1hmns74",
+		kVAEAm: "x1n2onr6",
+		$$css: true
+	},
+	targetInGroup: {
+		kGOzcv: "x1xkszu9",
+		$$css: true
+	},
 	unselected: {
 		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
 		kVAM5u: "x133yhug",

package/dist/chip/styles.js.map

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

package/dist/collection/styles.js

@@ -59,7 +59,7 @@ const collectionStyles = {
 */
 function rowItemStyles(supporting, overline, extra) {
 	const lines = (overline === void 0 ? 0 : 1) + (supporting === void 0 ? 0 : 1);
-	return (state) => props(rowStyles.base, rowStyles.list, rowStyles.interactive, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);
+	return (state) => props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);
 }
 //#endregion
 export { collectionStyles, rowItemStyles };

package/dist/collection/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","interactive","twoLine","threeLine","selectedList","disabled"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AA8BA,SAASmB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+BvC,MAAaC,UAAUwC,MAAMxC,UAAUyC,MAAMzC,UAAU0C,aAAaR,OAAOE,UAAU,KAAKpC,UAAU2C,SAASP,UAAU,KAAKpC,UAAU4C,WAAWN,MAAMR,cAAc9B,UAAU6C,cAAcP,MAAMT,cAAc7B,UAAU8C,QAAQ;AAC5Q"}
+{"version":3,"file":"styles.js","names":["ReactNode","stylex","rowStyles","colors","sizing","spacing","typography","collectionStyles","container","kB7OPa","k1xSpc","kXwgrk","k3XXqK","k8WAf4","$$css","header","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kGO01o","kLKAdn","kg3NbH","loading","kGNEyG","kjj79g","kAzted","section","CollectionItemState","isDisabled","isFocusVisible","isHovered","isPressed","isSelected","rowItemStyles","supporting","overline","extra","StyleXStyles","lines","undefined","state","props","base","list","twoLine","threeLine","selectedList","hovered","focusVisible","pressed","disabled"],"sources":["../../src/collection/styles.ts"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from '../row/styles';\nimport '../tokens/design.tokens.stylex';\nimport { colors, sizing, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// The chrome around the row. `src/row` was extracted so a list, menu, tree and\n// drawer draw the same row; everything wrapped around it stayed behind in each\n// component, so a change to the subhead over a list was three edits with\n// nothing failing if one were missed.\n//\n// Two of these are shared by four components and two by three, and the split\n// is the Material Design spec pages rather than convenience:\n//\n// - `container` and `section` are the box and the grouping, which List,\n//   ListBox, Tree and NavigationTree all draw the same way.\n// - `header` and `loading` are the lists page's, so they are shared by the\n//   three components that follow it. Menu and NavigationTree keep their own,\n//   because the menus page and the navigation drawer page give different\n//   values — a subhead tighter to the items above it, a label role rather\n//   than a title role, and an inset that lines up with pill-shaped rows.\n//   Those are the specs disagreeing rather than the code drifting, so each\n//   stays where its comment explaining it is.\nconst collectionStyles = {\n  container: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  header: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kGO01o: \"xw3mh6e\",\n    kLKAdn: \"x1clyivc\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  loading: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kAzted: \"xyax5pk\",\n    $$css: true\n  },\n  section: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  }\n};\n\n/**\n * The render state every collection item this covers reports. Each of React\n * Aria's own is wider than this, and this is the part the three share.\n */\ntype CollectionItemState = {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n};\n\n/**\n * The styles a selectable row in a list takes, as the function React Aria's\n * `className` prop wants.\n *\n * Which of the lists page's three items the row is, read from the content\n * rather than taken as a prop: a row holding all three lines already says it\n * is three lines, and a word for it would be a second place to get it wrong.\n * `ListItem` does the same arithmetic for the static row, and this is where\n * the collection forms share it.\n *\n * The three-line item is the only row whose slots move, which is why it alone\n * carries an alignment as well as a height.\n *\n * `extra` is the one difference between the three callers — Tree passes its\n * indent, which is why it sits where Tree already had it rather than at the\n * end. NavigationTree is not a caller: it draws the drawer variant, branches\n * on an ancestor being current, and reads `isCurrent` where these read\n * `isSelected`.\n */\nfunction rowItemStyles(supporting: ReactNode, overline: ReactNode, extra?: stylex.StyleXStyles) {\n  const lines = (overline === undefined ? 0 : 1) + (supporting === undefined ? 0 : 1);\n  return (state: CollectionItemState) => stylex.props(rowStyles.base, rowStyles.list, extra, lines === 1 && rowStyles.twoLine, lines === 2 && rowStyles.threeLine, state.isSelected && rowStyles.selectedList, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\nexport type { CollectionItemState };\nexport { collectionStyles, rowItemStyles };"],"mappings":";;;AAuBA,MAAMO,mBAAmB;CACvBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;CACAW,SAAS;EACPC,QAAQ;EACRjB,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAe,SAAS;EACPpB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;AAiCA,SAASsB,cAAcC,YAAuBC,UAAqBC,OAA6B;CAC9F,MAAME,SAASH,aAAaI,KAAAA,IAAY,IAAI,MAAML,eAAeK,KAAAA,IAAY,IAAI;CACjF,QAAQC,UAA+B1C,MAAaC,UAAU2C,MAAM3C,UAAU4C,MAAMP,OAAOE,UAAU,KAAKvC,UAAU6C,SAASN,UAAU,KAAKvC,UAAU8C,WAAWL,MAAMR,cAAcjC,UAAU+C,cAAcN,MAAMV,aAAa/B,UAAUgD,SAASP,MAAMX,kBAAkB9B,UAAUiD,cAAcR,MAAMT,aAAahC,UAAUkD,SAAST,MAAMZ,cAAc7B,UAAUmD,QAAQ;AACjX"}

package/dist/components/button/index.js

@@ -11,8 +11,10 @@ import { Button, Link } from "react-aria-components";
 const styles = {
 	base: {
 		kGNEyG: "x6s0dn4",
+		kVAM5u: "x1ylmb6m",
 		kaIpWk: "x1dkaolv",
-		kMzoRj: "xc342km",
+		ksu8eU: "xx61lck",
+		kMzoRj: "xc342km x13rsnn2",
 		kB7OPa: "x9f619",
 		kkrTdU: "x1ypdohk",
 		k1xSpc: "x3nfvp2",
@@ -38,8 +40,9 @@ const styles = {
 	},
 	elevatedDisabled: {
 		kWkggS: "xepofeg",
+		kVAM5u: "xmnqt3w",
 		kGVxlE: "x1gnnqk1",
-		kMwMTN: "x1xj74d8",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
 	filled: {
@@ -50,8 +53,9 @@ const styles = {
 	},
 	filledDisabled: {
 		kWkggS: "xepofeg",
+		kVAM5u: "xmnqt3w",
 		kGVxlE: "x1gnnqk1",
-		kMwMTN: "x1xj74d8",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
 	label: {
@@ -73,6 +77,10 @@ const styles = {
 		$$css: true
 	},
 	md: {
+		kgeoSG: "x1cpjm7i",
+		kGOzcv: "x1gvacq5",
+		kpsdNU: "xm4btww",
+		kEoFBp: "x1hmns74",
 		kZKoxP: "x1rv7mn0",
 		kg3NbH: "x790zyz",
 		$$css: true
@@ -87,8 +95,8 @@ const styles = {
 	},
 	outlinedDisabled: {
 		kWkggS: "xjbqb8w",
-		kVAM5u: "xrh88j3",
-		kMwMTN: "x1xj74d8",
+		kVAM5u: "xrh88j3 xmnqt3w",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
 	pending: {
@@ -101,12 +109,13 @@ const styles = {
 	},
 	text: {
 		kWkggS: "x12vej0r x598nmq x14dcer4 xjbqb8w",
+		kMzoRj: "xc342km",
 		kMwMTN: "x1mxwv8y",
 		$$css: true
 	},
 	textDisabled: {
 		kWkggS: "xjbqb8w",
-		kMwMTN: "x1xj74d8",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
 	tonal: {
@@ -117,8 +126,9 @@ const styles = {
 	},
 	tonalDisabled: {
 		kWkggS: "xepofeg",
+		kVAM5u: "xmnqt3w",
 		kGVxlE: "x1gnnqk1",
-		kMwMTN: "x1xj74d8",
+		kMwMTN: "x1xj74d8 x1bhcspo",
 		$$css: true
 	},
 	xl: {
@@ -133,6 +143,10 @@ const styles = {
 		$$css: true
 	},
 	xs: {
+		kgeoSG: "x1cpjm7i",
+		kGOzcv: "x1arwny6",
+		kpsdNU: "xm4btww",
+		kEoFBp: "x1hmns74",
 		kZKoxP: "xig8zya",
 		kg3NbH: "x790zyz",
 		$$css: true

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","isPending","t3","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t4","render","t5","t6","props","undefined","t7","ripple","t8","state","ring","styleProps","element","aria","handlers","surface","T0","t9","t10","t11","buttonContent","t12"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  isPending = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  //\n  // Off while pending for the same reason, and for a second one. React Aria\n  // nulls out the handlers it derived itself while pending — the click among\n  // them — but not the separate copy of the global pointer events that\n  // carries ours, so a press still reached the ripple and started it while\n  // the click that would have ended it never arrived. The ripple stayed at\n  // its pressed opacity until some later press completed a cycle of its own.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\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\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","sizing","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","TARGET_SIZE","FORCED_COLORS","styles","base","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","kgeoSG","kGOzcv","kpsdNU","kEoFBp","outlined","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","isPending","t3","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t4","render","t5","t6","props","undefined","t7","ripple","t8","state","ring","styleProps","element","aria","handlers","surface","T0","t9","t10","t11","buttonContent","t12"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// **Elevated is the one variant whose shadow is part of its identity.** The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// **Under forced colours a container is drawn as a rule.** That mode drops\n// the shadow and paints author backgrounds in a system colour, which left a\n// filled, tonal or elevated button as a label with nothing round it. `base`\n// draws a 1px `ButtonText` border there instead. Outlined keeps its own rule,\n// and text stays without one, as the page draws it. The mode repaints a\n// disabled button's fade at full strength as well. Chromium greys a disabled\n// `<button>` there by itself, but not the `<span>` React Aria renders for a\n// disabled link, so the disabled styles name `GrayText` for the label and\n// the edge rather than leave it to the browser.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n/**\n * The press area the buttons page requires, which its two smallest sizes are\n * drawn under. A literal rather than `sizing.controlMd`, which holds the same\n * number, for the reason IconButton's `TARGET_SIZE` gives: a consumer\n * resizing their medium controls should not shrink a target the page states\n * as a floor.\n */\nconst TARGET_SIZE = '48px';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  elevatedDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kMv6JI: \"x46eyla\",\n    kGuDYH: \"x5ehqhr\",\n    k63SB2: \"xrf6cl6\",\n    kb6lSQ: \"x1g135zh\",\n    kLWn49: \"x1ggk5va\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1gvacq5\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  text: {\n    kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  textDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n    kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kGVxlE: \"x1gnnqk1\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kMv6JI: \"x1fz0g89\",\n    kGuDYH: \"xkb6epg\",\n    k63SB2: \"x76yrz5\",\n    kOIVth: \"x1gka490\",\n    kb6lSQ: \"x1s1qhaa\",\n    kLWn49: \"x1voeury\",\n    kg3NbH: \"x1sdxjpb\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x1arwny6\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kMv6JI: \"x1vsmgmf\",\n    kGuDYH: \"xh9c4x\",\n    k63SB2: \"x1y15vu6\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xoqu3bc\",\n    kLWn49: \"x10x9d6x\",\n    kg3NbH: \"x1dao9b2\",\n    $$css: true\n  }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\nconst disabledStyles = {\n  elevated: styles.elevatedDisabled,\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  text: styles.textDisabled,\n  tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The hover/pressed background state layer is\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only.\n   */\n  href?: string;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows.\n   * @default 'Loading'\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the buttons spec page's XS, S, M, L and XL, each with its own inline\n   * padding and type role. `md` is the page's default.\n   * @default 'md'\n   */\n  size?: ButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * How much weight the button pulls. `filled` and `tonal` carry a container\n   * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n   * a low surface and lifts off it with a shadow, for a button that has to\n   * separate from a busy background rather than from the page.\n   * @default 'filled'\n   */\n  variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' | 'onClick' | 'onFocus'>;\n\n/**\n * The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-*` prop is\n * forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n  children,\n  disableRipple = false,\n  href,\n  isDisabled = false,\n  isPending = false,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled: React Aria still forwards\n  // pointer events to a disabled element, and a press that changes nothing\n  // should not look like one.\n  //\n  // Off while pending for the same reason, and for a second one. React Aria\n  // nulls out the handlers it derived itself while pending — the click among\n  // them — but not the separate copy of the global pointer events that\n  // carries ours, so a press still reached the ripple and started it while\n  // the click that would have ended it never arrived. The ripple stayed at\n  // its pressed opacity until some later press completed a cycle of its own.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={isDisabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\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\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\n    </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/chip/index.js

@@ -73,7 +73,7 @@ function chipContent(children) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [chipGlyph(state.isSelected), chipLabel(children)] });
 }
 function propsFor(state) {
-	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+	return props(chipStyles.base, chipStyles.target, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
 }
 //#endregion
 export { Chip as default };

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

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

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

@@ -203,7 +203,7 @@ function ChipGroupChip(t0) {
 	return t4;
 }
 function chipPropsFor(state) {
-	return props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+	return props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
 }
 ChipGroup.Chip = ChipGroupChip;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","focus","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","style","ChipGroupProps","description","error","label","removeLabel","Pick","T","chipContent","state","isSelected","allowsRemoving","props","remove","removeGlyph","RemoveLabelContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","_c","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","undefined","root","ChipGroupChip","textValue","chipPropsFor","base","target","targetInGroup","ring","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected","Chip"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /** The chips, each with an `id` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\".\n   * @default 'Remove'\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check is the chip module's, so a chip in a group and a chip on its own\n// draw the same one. The close target is drawn only where the group allows\n// removing, which React Aria reports rather than the call site saying so on\n// every chip.\nfunction chipContent(children: ReactNode, removeLabel: string) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state.isSelected)}\n      {chipLabel(children)}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} slot=\"remove\" {...stylex.props(chipStyles.remove)}>\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift.\nconst RemoveLabelContext = createContext('Remove');\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\nfunction ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel = 'Remove',\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  ...props\n}: ChipGroupChipProps) {\n  const removeLabel = useContext(RemoveLabelContext);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(chipPropsFor, props)}>\n      {chipContent(children, removeLabel)}\n    </RACTag>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// chip's state comes from the render state React Aria hands its className.\n// Disabled is applied last so it wins over both containers, and StyleX\n// replaces a property whole, so it takes their hover branches with it.\nfunction chipPropsFor(state: TagRenderProps) {\n  return stylex.props(chipStyles.base, chipStyles.target, chipStyles.targetInGroup, focus.ring, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport default ChipGroup;"],"mappings":";;;;;;;;;;;;;;;AAmGA,SAAS4C,YAAYV,UAAqBO,aAAqB;CAC7D,QAAQI,UAA0B,qBAAA,YAAA,EAAA,UAAA;EAC7B1B,UAAU0B,MAAMC,UAAU;EAC1B1B,UAAUc,QAAQ;EAClBW,MAAME,iBAAiB,oBAAC,QAAD;GAAW,cAAYN;GAAa,MAAK;GAAS,GAAIjC,MAAaa,WAAW4B,MAAM;GACxG,UAAA,oBAAC,YAAD,EAAY,GAAIzC,MAAaa,WAAW6B,WAAW,EAAE,CAAA;EAC5C,CAAA,IAAI;CACnB,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMC,qBAAqB1C,cAAc,QAAQ;AAGjD,MAAM2C,oBAAoB,EACxBC,WAAW,MACb;AACA,MAAMC,sBAAsB,EAC1BD,WAAW,KACb;AACA,SAAAE,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAzB;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAArB;CAAA,IAAAC;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAA8C,MAAA,EAAAtB,UAAA+B,IAAA3B,aAAA4B,IAAA3B,OAAA4B,IAAAN,OAAAO,IAAA5B,OAAA6B,IAAA5B,aAAA6B,IAAAR,kBAAAS,IAAA,GAAAvB,YAAAQ;EAAAtB,WAAA+B;EAAA3B,cAAA4B;EAAA3B,QAAA4B;EAAAN,QAAAO;EAAA5B,QAAA6B;EAAAP,mBAAAS;EAM5C9B,cAAA6B,OAAAE,KAAAA,IAAA,WAAAF;EAIAV,UAAgBnC,YAAYc,KAAK;EACzBoB,KAAA3C;EAAgBgC,KAAAA;EAAWgB,KAAAlC,YAAYtB,MAAakB,YAAW+C,IAAK,GAAGzB,OAAK;EAACS,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAvB;EAAAuB,EAAA,KAAAnB;EAAAmB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAjB;EAAAiB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAvB,WAAAuB,EAAA;EAAAnB,cAAAmB,EAAA;EAAAlB,QAAAkB,EAAA;EAAAG,UAAAH,EAAA;EAAAI,QAAAJ,EAAA;EAAAjB,QAAAiB,EAAA;EAAAhB,cAAAgB,EAAA;EAAAK,mBAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAI9D,MAAAQ,KAAAL,UAAAN,sBAAAF;CAAiD,IAAAc;CAAA,IAAAT,EAAA,QAAAjB,SAAAiB,EAAA,QAAAQ,IAAA;EAApEC,KAAA,oBAAC,YAAD;GAAmB,OAAAD;GAA2D,SAAA;GAC3EzB,UAAAA;EADQ,CAAA;EAEEiB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAvB,YAAAuB,EAAA,QAAAI,SAAAJ,EAAA,QAAAK,kBAAA;EAEXK,KAAA,oBAAC,SAAD;GAAsBN;GAAyBC;GAA4B,WAAA;GACxE5B;EADQ,CAAA;EAEEuB,EAAA,MAAAvB;EAAAuB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAhB,eAAAgB,EAAA,QAAAU,IAAA;EAHfC,KAAA,oBAAC,oBAAD;GAA2B3B,OAAAA;GACzB0B,UAAAA;EADiB,CAAA;EAIEV,EAAA,MAAAhB;EAAAgB,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAnB,eAAAmB,EAAA,QAAAlB,OAAA;EACrB8B,KAAA,oBAAC,cAAD;GAA2B/B;GAAoBC;GAAc,OAAA;EAAK,CAAA;EAAIkB,EAAA,MAAAnB;EAAAmB,EAAA,MAAAlB;EAAAkB,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,QAAAE,MAAAF,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAS,MAAAT,EAAA,QAAAW,MAAAX,EAAA,QAAAY,IAAA;EAZnEC,KAAA,qBAAC,IAAD;GAAY,GAAKtB;GAAK,GAAMgB;GAA5B,UAAA;IAIHE;IAGAE;IAKAC;GAZe;;EAaHZ,EAAA,MAAAE;EAAAF,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,OAbTa;AAaS;;;;;AAOlB,SAAAI,cAAAlB,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAuB,MAAA,EAAAxB,UAAA,GAAAc,UAAAQ;CAIrB,MAAAf,cAAoB/B,WAAWyC,kBAAkB;CACzC,MAAAQ,KAAA7C;CAAkB,MAAAiD,KAAAf,MAAK2B,aAAcrD,OAAOY,QAAQ;CAAkB,MAAA8B,KAAAnC,oBAAoB+C,cAAc5B,KAAK;CAAC,IAAAiB;CAAA,IAAAR,EAAA,OAAAvB,YAAAuB,EAAA,OAAAhB,aAAA;EACjHwB,KAAArB,YAAYV,UAAUO,WAAW;EAACgB,EAAA,KAAAvB;EAAAuB,EAAA,KAAAhB;EAAAgB,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAT,SAAAS,EAAA,OAAAM,MAAAN,EAAA,OAAAO,MAAAP,EAAA,OAAAQ,IAAA;EADhCC,KAAA,oBAAC,IAAD;GAAmB,WAAAH;GAAmC,GAAMf;GAAK,GAAMgB;GACzEC,UAAAA;EADS,CAAA;EAEHR,EAAA,KAAAE;EAAAF,EAAA,KAAAT;EAAAS,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFJS;AAEI;AAOb,SAASU,aAAa/B,OAAuB;CAC3C,OAAOrC,MAAaa,WAAWwD,MAAMxD,WAAWyD,QAAQzD,WAAW0D,eAAenD,MAAMoD,MAAMnC,MAAMC,aAAazB,WAAW4D,WAAW5D,WAAW6D,YAAYrC,MAAMsC,cAAc9D,WAAW+D,UAAUvC,MAAMsC,eAAetC,MAAMC,aAAazB,WAAWgE,mBAAmBhE,WAAWiE,mBAAmB;AAC7S;AACA/B,UAAUgC,OAAOb"}