@kanso-labs/kanso-ui 0.26.3 → 0.26.5

package/dist/calendar/index.js

@@ -1,5 +1,6 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { ChevronEndGlyph } from "../glyphs/index.js";
+import { focus } from "../styles/focus.js";
 import { calendarStyles } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -72,7 +73,7 @@ function calendarHeaderCell(day) {
 	});
 }
 function chevronClassName() {
-	return props(calendarStyles.chevron).className ?? "";
+	return props(calendarStyles.chevron, focus.ring).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","calendarStyles","$","_c","t0","Symbol","for","calendarHeaderCell","CalendarHeader","props","header","t1","chevronClassName","chevronGlyph","chevronGlyphPrevious","t2","heading","t3","day","headerCell","chevron","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 { 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(calendarStyles.chevron).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;AAWA,SAAAI,uBAAA;CAAA,MAAAQ,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,KAAAb,MAAaU,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,GAAKrB,MAAaU,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,GAAKxB,MAAaU,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,GAAKrB,MAAaU,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,GAAI3B,MAAaU,eAAekB,UAAU;EACnED,UAAAA;CACoB,CAAA;AAC3B;AACA,SAASN,mBAAmB;CAC1B,OAAOrB,MAAaU,eAAemB,OAAO,CAAC,CAACC,aAAa;AAC3D"}
+{"version":3,"file":"index.js","names":["ReactElement","stylex","Button","RACButton","CalendarGridHeader","RACCalendarGridHeader","CalendarHeaderCell","RACCalendarHeaderCell","Heading","RACHeading","ChevronEndGlyph","focus","calendarStyles","$","_c","t0","Symbol","for","calendarHeaderCell","CalendarHeader","props","header","t1","chevronClassName","chevronGlyph","chevronGlyphPrevious","t2","heading","t3","day","headerCell","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 { 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(calendarStyles.chevron, focus.ring).className ?? '';\n}\nexport { CalendarGridHeader, CalendarHeader };"],"mappings":";;;;;;;;AAYA,SAAAI,uBAAA;CAAA,MAAAS,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,KAAAd,MAAaW,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,GAAKtB,MAAaW,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,GAAKzB,MAAaW,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,GAAKtB,MAAaW,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,GAAI5B,MAAaW,eAAekB,UAAU;EACnED,UAAAA;CACoB,CAAA;AAC3B;AACA,SAASN,mBAAmB;CAC1B,OAAOtB,MAAaW,eAAemB,SAASpB,MAAMqB,IAAI,CAAC,CAACC,aAAa;AACvE"}

package/dist/calendar/styles.js

@@ -17,10 +17,6 @@ const calendarStyles = {
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
 		kUOVxO: "x34s64n",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		$$css: true
 	},
 	cellDisabled: {
@@ -73,10 +69,6 @@ const calendarStyles = {
 		kzqmXN: "x100vrsf",
 		kjj79g: "xl56j7k",
 		kUOVxO: "x34s64n",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		kmVPX3: "x1717udv",
 		$$css: true
 	},

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","kjBf7l","kInvED","k3XXqK","kMeerF","$$css","cellDisabled","cellInRange","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","kVAM5u","ksu8eU","kMzoRj","chevron","kmuXW","kmVPX3","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz"],"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\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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: \"x1mh50ju\",\n    kfmiAY: \"x13dhofw\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"xqmr837\",\n    krdFHd: \"xz4iguh\",\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  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kUOVxO: \"x34s64n\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\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    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\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":";AAcA,MAAMM,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,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,cAAc;EACZpB,QAAQ;EACRI,QAAQ;EACRC,QAAQ;EACRc,OAAO;CACT;CACAE,aAAa;EACXrB,QAAQ;EACRE,QAAQ;EACRE,QAAQ;EACRM,QAAQ;EACRI,QAAQ;EACRK,OAAO;CACT;CACAG,cAAc;EACZC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,gBAAgB;EACdC,QAAQ;EACRC,QAAQ;EACRR,OAAO;CACT;CACAS,cAAc;EACZ5B,QAAQ;EACRI,QAAQ;EACRe,OAAO;CACT;CACAU,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR5B,QAAQ;EACRe,OAAO;CACT;CACAc,SAAS;EACPlC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR8B,QAAQ;EACR7B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR4B,OAAO;EACPxB,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,OAAO;CACT;CACAiB,cAAc;EACZnC,QAAQ;EACRS,QAAQ;EACR2B,QAAQ;EACRlB,OAAO;CACT;CACAmB,sBAAsB;EACpBD,QAAQ;EACRlB,OAAO;CACT;CACAoB,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACR/B,QAAQ;EACRS,OAAO;CACT;CACAuB,QAAQ;EACN3C,QAAQ;EACRO,QAAQ;EACRqC,QAAQ;EACRhC,QAAQ;EACRiC,QAAQ;EACRzB,OAAO;CACT;CACA0B,YAAY;EACV5C,QAAQ;EACRG,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRM,OAAO;CACT;CACA2B,SAAS;EACP1C,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRC,QAAQ;EACRkC,QAAQ;EACRC,QAAQ;EACR7B,OAAO;CACT;CACA8B,QAAQ;EACN3C,QAAQ;EACRqC,QAAQ;EACRxB,OAAO;CACT;CACA+B,MAAM;EACJlD,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACR6C,QAAQ;EACRR,QAAQ;EACRjC,QAAQ;EACR0C,QAAQ;EACRjB,QAAQ;EACRhB,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","stateLayerOpacity","typography","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","chevron","kmuXW","kmVPX3","chevronGlyph","k3aq6I","chevronGlyphPrevious","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","heading","kogj98","k9WMMc","months","root","kXwgrk","k7Eaqz"],"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\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\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: \"x1mh50ju\",\n    kfmiAY: \"x13dhofw\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"xqmr837\",\n    krdFHd: \"xz4iguh\",\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  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kUOVxO: \"x34s64n\",\n    kmVPX3: \"x1717udv\",\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    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\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":";AAcA,MAAMM,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,SAAS;EACP9B,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR0B,QAAQ;EACRzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRwB,OAAO;EACPpB,QAAQ;EACRC,QAAQ;EACRG,QAAQ;EACRiB,QAAQ;EACRhB,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;EACNvC,QAAQ;EACRiC,QAAQ;EACRxB,OAAO;CACT;CACA+B,MAAM;EACJ9C,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRyC,QAAQ;EACRR,QAAQ;EACR7B,QAAQ;EACRsC,QAAQ;EACRjB,QAAQ;EACRhB,OAAO;CACT;AACF"}

package/dist/chip/styles.js

@@ -16,10 +16,6 @@ const chipStyles = {
 		kOIVth: "x126z3so",
 		kb6lSQ: "x155f00i",
 		kLWn49: "x1lz68p4",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		k8WAf4: "xt970qd",
 		kg3NbH: "x790zyz",
 		kIyJzY: "x1qno0dh",

package/dist/chip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kjBf7l","kInvED","k3XXqK","kMeerF","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","remove","kzqmXN","kjj79g","k71WvV","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, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x3y1ksm\",\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":";AA+BA,MAAMO,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRpB,QAAQ;EACRkB,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,QAAQ;EACN/B,QAAQ;EACR4B,QAAQ;EACR3B,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRqB,QAAQ;EACRpB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPwB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRnB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRX,OAAO;CACT;CACAY,aAAa;EACXnC,QAAQ;EACR+B,QAAQ;EACRR,OAAO;CACT;CACAa,UAAU;EACRT,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAc,YAAY;EACVV,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}
+{"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","chipStyles","base","kGNEyG","kZKoxP","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","disabledSelected","kWkggS","disabledUnselected","kVAM5u","remove","kzqmXN","kjj79g","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, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The pill the chips page draws, shared by the two components that draw one:\n// Chip, which is a toggle on its own, and ChipGroup's chip, which is one of a\n// set that can also be removed. The measurements and roles are the page's\n// filter chip — a 32dp container with an 8dp corner and 16dp of inline\n// padding, an outline variant border while unselected, the secondary\n// container pair once selected.\n//\n// Each state composites an on-colour over its own container at the\n// interaction state's opacity rather than swapping in a separate hover\n// colour. `calc(<opacity> * 100%)` turns the token's unitless 0-1 ratio into\n// the percentage `color-mix()` takes, and it is inlined at each property\n// because @stylexjs/babel-plugin only statically recognises expressions\n// written directly as property values.\n//\n// The selected chip drops its border rather than recolouring it: it has a\n// container of its own to define its edge, and a border on top of that reads\n// as a second, competing outline.\n//\n// Disabled is applied from render state rather than from `:disabled`. Chip is\n// a button and would match the pseudo-class; a chip in a group is React\n// Aria's `Tag`, which is a div and never will. One mechanism serves both, and\n// StyleX replaces a property whole, so the disabled styles take the hover and\n// pressed branches of whichever state they are applied over.\n//\n// Apart from any component so a chip in a group and a chip on its own cannot\n// drift; see `src/row` for the same arrangement around a list's row.\n\nconst chipStyles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x10w6t97\",\n    kaIpWk: \"x1xdvaa9\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"x126z3so\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x790zyz\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1eaenvl\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  disabledSelected: {\n    kWkggS: \"xepofeg\",\n    $$css: true\n  },\n  disabledUnselected: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  remove: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xy3r1oc x15a1ka xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kaIpWk: \"x3y1ksm\",\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":";AA+BA,MAAMO,aAAa;CACjBC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRhB,QAAQ;EACRc,OAAO;CACT;CACAG,kBAAkB;EAChBC,QAAQ;EACRJ,OAAO;CACT;CACAK,oBAAoB;EAClBD,QAAQ;EACRE,QAAQ;EACRN,OAAO;CACT;CACAO,QAAQ;EACN3B,QAAQ;EACRwB,QAAQ;EACRvB,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRhB,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPoB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,aAAa;EACXnC,QAAQ;EACR2B,QAAQ;EACRR,OAAO;CACT;CACAiB,UAAU;EACRb,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;CACAkB,YAAY;EACVd,QAAQ;EACRE,QAAQ;EACRJ,QAAQ;EACRF,OAAO;CACT;AACF"}

package/dist/components/button/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, linkRenderer } from "../../render/aria.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import ProgressIndicator from "../progress-indicator/index.js";
 import { c } from "react/compiler-runtime";
@@ -21,10 +22,6 @@ const styles = {
 		kOIVth: "x126z3so",
 		kb6lSQ: "x155f00i",
 		kLWn49: "x1lz68p4",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		kVAEAm: "x1n2onr6",
 		kybGjl: "x1hl2dhg",
 		$$css: true
@@ -216,7 +213,7 @@ function Button$1(t0) {
 	const ripple = useRipple(!disableRipple && !isDisabled, t6);
 	let t7;
 	if ($[7] !== size || $[8] !== variant) {
-		t7 = (state) => props(styles.base, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		t7 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 		$[7] = size;
 		$[8] = variant;
 		$[9] = t7;

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","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kjBf7l","kInvED","k3XXqK","kMeerF","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","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"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 { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, 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 order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\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: \"xnnlda6\",\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: \"x1vqgdyp\",\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: \"xjp8j0k\",\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: \"x10w6t97\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\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  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  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, 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} 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":";;;;;;;;;AA+CA,MAAM2B,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRf,QAAQ;EACRc,OAAO;CACT;CACAE,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,kBAAkB;EAChBH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,QAAQ;EACNJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,gBAAgB;EACdL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAS,OAAO;EACLtB,QAAQ;EACRa,OAAO;CACT;CACAU,cAAc;EACZC,QAAQ;EACRX,OAAO;CACT;CACAY,IAAI;EACFC,QAAQ;EACRzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRqB,QAAQ;EACRd,OAAO;CACT;CACAe,IAAI;EACFF,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACRlC,QAAQ;EACRqB,QAAQ;EACRL,OAAO;CACT;CACAmB,kBAAkB;EAChBhB,QAAQ;EACRc,QAAQ;EACRZ,QAAQ;EACRL,OAAO;CACT;CACAoB,SAAS;EACPtC,QAAQ;EACRK,QAAQ;EACRkC,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRE,OAAO;CACT;CACAuB,MAAM;EACJpB,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAwB,cAAc;EACZrB,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAyB,OAAO;EACLtB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACA0B,eAAe;EACbvB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACA2B,IAAI;EACFd,QAAQ;EACRzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRqB,QAAQ;EACRd,OAAO;CACT;CACA4B,IAAI;EACFf,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACA6B,KAAK;EACHhB,QAAQ;EACRzB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRqB,QAAQ;EACRd,OAAO;CACT;AACF;AAMA,MAAM8B,gBAAgB;CACpBlB,IAAI;EACF5B,QAAQ;EACRgB,OAAO;CACT;CACAe,IAAI;EACF/B,QAAQ;EACRgB,OAAO;CACT;CACA2B,IAAI;EACF3C,QAAQ;EACRgB,OAAO;CACT;CACA4B,IAAI;EACF5C,QAAQ;EACRgB,OAAO;CACT;CACA6B,KAAK;EACH7C,QAAQ;EACRgB,OAAO;CACT;AACF;AACA,MAAM+B,iBAAiB;CACrB7B,UAAUtB,OAAO0B;CACjBC,QAAQ3B,OAAO4B;CACfQ,UAAUpC,OAAOuC;CACjBI,MAAM3C,OAAO4C;CACbC,OAAO7C,OAAO8C;AAChB;;;;;;;AAwEA,SAAAhE,SAAAyF,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAgB,MAAA,EAAAhB,UAAAG,eAAAc,IAAAb,MAAAc,YAAAC,IAAAC,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAtB,cAAAuB,IAAAtB,KAAAuB,QAAAtB,MAAAuB,IAAApB,QAAAC,SAAAoB,IAAA,GAAAC,YAAAlB;CAEd,MAAAX,gBAAAc,OAAAgB,KAAAA,IAAA,QAAAhB;CAEA,MAAAC,aAAAC,OAAAc,KAAAA,IAAA,QAAAd;CASA,MAAAd,eAAAuB,OAAAK,KAAAA,IAAA,YAAAL;CAGA,MAAArB,OAAAuB,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAnB,UAAAoB,OAAAE,KAAAA,IAAA,WAAAF;CAAkB,IAAAG;CAAA,IAAAnB,EAAA,OAAAK,WAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAS,mBAAAT,EAAA,OAAAU,iBAAAV,EAAA,OAAAW,kBAAAX,EAAA,OAAAY,aAAA;EAUwDO,KAAA;GAAAd;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAO1E;EAACZ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAoB,SAAe1G,UAA4B,CAAC0E,iBAAD,CAAmBe,YAAYgB,EAOzE;CAAE,IAAAE;CAAA,IAAArB,EAAA,OAAAR,QAAAQ,EAAA,OAAAJ,SAAA;EACoCyB,MAAAC,UAAwBjH,MAAamB,OAAMC,MAAOD,OAAOoE,UAAUpE,OAAOgE,OAAOI,YAAY,cAAclB,cAAcc,OAAO8B,MAAKnB,cAAe3E,OAAMqB,UAAWyE,MAAKnB,cAAexB,eAAeiB,QAAQ;EAACI,EAAA,KAAAR;EAAAQ,EAAA,KAAAJ;EAAAI,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAxP,MAAAuB,aAAmBzG,oBAAoBuG,IAAmNJ,OAAK;CAC/P,MAAAO,UAAgB;EAAAC,MACR9G,iBAAiBsG,OAAK;EAACV;EAAAC;CAG/B;CACA,IAAInB,SAAS6B,KAAAA,GAAS,OACb,qBAAC,MAAD;EAAe7B;EAAkBc;EAAiBZ;EAAa,QAAA1E,aAAa2G,OAAO;EAAW7B;EAAM,GAAMyB,OAAMM;EAAS,GAAMT;EAAK,GAAMM;EAA1I,UAAA,CACFtC,UACAmC,OAAMO,OAFI;;CAKT,MAAAC,KAAArH;CAA0C,MAAAsH,KAAAjH,eAAe4G,SAASV,MAAM;CAAO,MAAAgB,KAAAV,OAAMM;CAAS,IAAAK;CAAA,IAAA/B,EAAA,QAAAf,YAAAe,EAAA,QAAAV,gBAAAU,EAAA,QAAAoB,QAAA;EACjGW,MAAAC,cAAc/C,UAAUK,cAAc8B,MAAM;EAACpB,EAAA,MAAAf;EAAAe,EAAA,MAAAV;EAAAU,EAAA,MAAAoB;EAAApB,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAA4B,MAAA5B,EAAA,QAAAG,cAAAH,EAAA,QAAAiB,WAAAjB,EAAA,QAAAoB,OAAAM,YAAA1B,EAAA,QAAAuB,cAAAvB,EAAA,QAAA+B,OAAA/B,EAAA,QAAA6B,IAAA;EAD3CI,MAAA,oBAAC,IAAD;GAAuB9B;GAAoB,QAAA0B;GAA+B,GAAMC;GAAe,GAAMb;GAAK,GAAMM;GAClHQ,UAAAA;EADY,CAAA;EAEH/B,EAAA,MAAA4B;EAAA5B,EAAA,MAAAG;EAAAH,EAAA,MAAAiB;EAAAjB,EAAA,MAAAoB,OAAAM;EAAA1B,EAAA,MAAAuB;EAAAvB,EAAA,MAAA+B;EAAA/B,EAAA,MAAA6B;EAAA7B,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,OAFPiC;AAEO;AAchB,SAASD,cAAc/C,UAAqBK,cAAsB8B,QAAgB;CAChF,QAAQE,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAI;IACV,GAAG,EACDpC,WAAW,UACb;IACA,GAAG,EACDA,WAAW,kBACb;GACF,EAAE,CAAC,CAACoC,MAAMY,aAAa;GAClBjD;EACG,CAAA;EACLqC,MAAMY,YAAY,oBAAC,QAAD;GAAM,WAAU;GAC/B,UAAA,oBAAC,mBAAD;IAAmB,cAAY5C;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACX8B,OAAOO;CACV,EAAA,CAAA;AACJ"}
+{"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","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","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"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, 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 order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x3y1ksm\",\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: \"xnnlda6\",\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: \"x1vqgdyp\",\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: \"xjp8j0k\",\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: \"x10w6t97\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"xn866dk\",\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  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  const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\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} 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":";;;;;;;;;;AAgDA,MAAM4B,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRX,QAAQ;EACRU,OAAO;CACT;CACAE,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,kBAAkB;EAChBH,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAO,QAAQ;EACNJ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAQ,gBAAgB;EACdL,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAS,OAAO;EACLlB,QAAQ;EACRS,OAAO;CACT;CACAU,cAAc;EACZC,QAAQ;EACRX,OAAO;CACT;CACAY,IAAI;EACFC,QAAQ;EACRrB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRd,OAAO;CACT;CACAe,IAAI;EACFF,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACAgB,UAAU;EACRb,QAAQ;EACRc,QAAQ;EACRC,QAAQ;EACR9B,QAAQ;EACRiB,QAAQ;EACRL,OAAO;CACT;CACAmB,kBAAkB;EAChBhB,QAAQ;EACRc,QAAQ;EACRZ,QAAQ;EACRL,OAAO;CACT;CACAoB,SAAS;EACPlC,QAAQ;EACRK,QAAQ;EACR8B,QAAQ;EACRC,QAAQ;EACRxB,QAAQ;EACRE,OAAO;CACT;CACAuB,MAAM;EACJpB,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAwB,cAAc;EACZrB,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAyB,OAAO;EACLtB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACA0B,eAAe;EACbvB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACA2B,IAAI;EACFd,QAAQ;EACRrB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRd,OAAO;CACT;CACA4B,IAAI;EACFf,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;CACA6B,KAAK;EACHhB,QAAQ;EACRrB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRiB,QAAQ;EACRd,OAAO;CACT;AACF;AAMA,MAAM8B,gBAAgB;CACpBlB,IAAI;EACFxB,QAAQ;EACRY,OAAO;CACT;CACAe,IAAI;EACF3B,QAAQ;EACRY,OAAO;CACT;CACA2B,IAAI;EACFvC,QAAQ;EACRY,OAAO;CACT;CACA4B,IAAI;EACFxC,QAAQ;EACRY,OAAO;CACT;CACA6B,KAAK;EACHzC,QAAQ;EACRY,OAAO;CACT;AACF;AACA,MAAM+B,iBAAiB;CACrB7B,UAAUlB,OAAOsB;CACjBC,QAAQvB,OAAOwB;CACfQ,UAAUhC,OAAOmC;CACjBI,MAAMvC,OAAOwC;CACbC,OAAOzC,OAAO0C;AAChB;;;;;;;AAwEA,SAAA7D,SAAAsF,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAgB,MAAA,EAAAhB,UAAAG,eAAAc,IAAAb,MAAAc,YAAAC,IAAAC,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAtB,cAAAuB,IAAAtB,KAAAuB,QAAAtB,MAAAuB,IAAApB,QAAAC,SAAAoB,IAAA,GAAAC,YAAAlB;CAEd,MAAAX,gBAAAc,OAAAgB,KAAAA,IAAA,QAAAhB;CAEA,MAAAC,aAAAC,OAAAc,KAAAA,IAAA,QAAAd;CASA,MAAAd,eAAAuB,OAAAK,KAAAA,IAAA,YAAAL;CAGA,MAAArB,OAAAuB,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAnB,UAAAoB,OAAAE,KAAAA,IAAA,WAAAF;CAAkB,IAAAG;CAAA,IAAAnB,EAAA,OAAAK,WAAAL,EAAA,OAAAM,iBAAAN,EAAA,OAAAS,mBAAAT,EAAA,OAAAU,iBAAAV,EAAA,OAAAW,kBAAAX,EAAA,OAAAY,aAAA;EAUwDO,KAAA;GAAAd;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAO1E;EAACZ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAY;EAAAZ,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAoB,SAAevG,UAA4B,CAACuE,iBAAD,CAAmBe,YAAYgB,EAOzE;CAAE,IAAAE;CAAA,IAAArB,EAAA,OAAAR,QAAAQ,EAAA,OAAAJ,SAAA;EACoCyB,MAAAC,UAAwB9G,MAAaoB,OAAMC,MAAOZ,MAAKsG,MAAO3F,OAAOgE,UAAUhE,OAAO4D,OAAOI,YAAY,cAAclB,cAAcc,OAAO8B,MAAKnB,cAAevE,OAAMiB,UAAWyE,MAAKnB,cAAexB,eAAeiB,QAAQ;EAACI,EAAA,KAAAR;EAAAQ,EAAA,KAAAJ;EAAAI,EAAA,KAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAApQ,MAAAwB,aAAmBtG,oBAAoBmG,IAA+NJ,OAAK;CAC3Q,MAAAQ,UAAgB;EAAAC,MACR5G,iBAAiBmG,OAAK;EAACV;EAAAC;CAG/B;CACA,IAAInB,SAAS6B,KAAAA,GAAS,OACb,qBAAC,MAAD;EAAe7B;EAAkBc;EAAiBZ;EAAa,QAAAvE,aAAayG,OAAO;EAAW9B;EAAM,GAAMyB,OAAMO;EAAS,GAAMV;EAAK,GAAMO;EAA1I,UAAA,CACFvC,UACAmC,OAAMQ,OAFI;;CAKT,MAAAC,KAAAnH;CAA0C,MAAAoH,KAAA/G,eAAe0G,SAASX,MAAM;CAAO,MAAAiB,KAAAX,OAAMO;CAAS,IAAAK;CAAA,IAAAhC,EAAA,QAAAf,YAAAe,EAAA,QAAAV,gBAAAU,EAAA,QAAAoB,QAAA;EACjGY,MAAAC,cAAchD,UAAUK,cAAc8B,MAAM;EAACpB,EAAA,MAAAf;EAAAe,EAAA,MAAAV;EAAAU,EAAA,MAAAoB;EAAApB,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAA6B,MAAA7B,EAAA,QAAAG,cAAAH,EAAA,QAAAiB,WAAAjB,EAAA,QAAAoB,OAAAO,YAAA3B,EAAA,QAAAwB,cAAAxB,EAAA,QAAAgC,OAAAhC,EAAA,QAAA8B,IAAA;EAD3CI,MAAA,oBAAC,IAAD;GAAuB/B;GAAoB,QAAA2B;GAA+B,GAAMC;GAAe,GAAMd;GAAK,GAAMO;GAClHQ,UAAAA;EADY,CAAA;EAEHhC,EAAA,MAAA6B;EAAA7B,EAAA,MAAAG;EAAAH,EAAA,MAAAiB;EAAAjB,EAAA,MAAAoB,OAAAO;EAAA3B,EAAA,MAAAwB;EAAAxB,EAAA,MAAAgC;EAAAhC,EAAA,MAAA8B;EAAA9B,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,OAFPkC;AAEO;AAchB,SAASD,cAAchD,UAAqBK,cAAsB8B,QAAgB;CAChF,QAAQE,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAI;IACV,GAAG,EACDpC,WAAW,UACb;IACA,GAAG,EACDA,WAAW,kBACb;GACF,EAAE,CAAC,CAACoC,MAAMa,aAAa;GAClBlD;EACG,CAAA;EACLqC,MAAMa,YAAY,oBAAC,QAAD;GAAM,WAAU;GAC/B,UAAA,oBAAC,mBAAD;IAAmB,cAAY7C;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACX8B,OAAOQ;CACV,EAAA,CAAA;AACJ"}

package/dist/components/calendar/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { calendarStyles } from "../../calendar/styles.js";
 import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
@@ -83,7 +84,7 @@ function _temp(offset) {
 	}, offset.months);
 }
 function cellClassName(state) {
-	return props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
 }
 function gridCell(date) {
 	return /* @__PURE__ */ jsx(CalendarCell, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","mergeStatefulStyles","Omit","T","className","style","props","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","cell","cellToday","cellSelected","cellDisabled","date"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not fix: that height is\n// a picker's, counting a headline and an action row the calendar itself does\n// not draw. A month grid is as tall as its weeks, and six-week months are\n// taller than five-week ones — pinning 456 would crop one or pad the other.\n//\n// Three things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAAM,WAAAiB,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EACwCG,KAAAR,oBAAoBb,MAAaY,eAAcU,IAAK,GAAGJ,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EAC/FH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAxB,MAAaY,eAAce,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAD,QAAAW,iBAAAF,QAAA;EACzCC,KAAAjB,aAAaO,QAAKW,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAD,QAAAW,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAD,WAAAC,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,UAAD;GAAY,GAAQf;GAAK,GAAMG;GAA/B,UAAA,CACHE,IACAS,EAFe;;EAQHb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARTc;AAQS;AATlB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMlC,MAAaY,eAAcuB,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBC,SAAF,CAAA,CAFwD;CAAMF,GAAAA,OAAMP,MAAZ;AAG5D;AAa5B,SAASU,cAAcC,OAIpB;CACD,OAAOtC,MAAaY,eAAe8B,MAAMJ,MAAMG,WAAW7B,eAAe+B,WAAWL,MAAME,cAAc5B,eAAegC,cAAcN,MAAMC,cAAc3B,eAAeiC,YAAY,CAAC,CAAC7B,aAAa;AACrM;AACA,SAASoB,SAASU,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWT;EAAqBS;CAAK,CAAA;AAC/D"}
+{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","props","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","gridCell","cellClassName","state","isDisabled","isSelected","isToday","cell","ring","cellToday","cellSelected","cellDisabled","date"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, CalendarProps as RACCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Calendar as RACCalendar, CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's docked calendar: a month grid with a circle on the\n// selected date and an outline on today. Its values are that page's — a\n// 360dp container on the high surface container, 48dp date cells with a 40dp\n// state layer inside them, body-large for both the weekday row and the dates,\n// primary for the selected circle and for today's outline.\n//\n// The page's container is 456dp tall, which this does not fix: that height is\n// a picker's, counting a headline and an action row the calendar itself does\n// not draw. A month grid is as tall as its weeks, and six-week months are\n// taller than five-week ones — pinning 456 would crop one or pad the other.\n//\n// Three things are this component's own.\n//\n// **The cell is a circle in a square.** The page gives the date a 48dp\n// container and a 40dp state layer, which is a 40dp circle with 4dp of room\n// around it. The grid's `border-spacing` is what supplies that room, so the\n// circle is the element and the square is the space between circles — rather\n// than a 48dp box with a 40dp box inside it.\n//\n// **A date from the month either side is faded because it is disabled, not\n// because it is outside.** React Aria marks those cells `data-outside-month`\n// and disables them in the same breath, so a treatment keyed on the first\n// would never draw anything the second had not already drawn. The disabled\n// fade is the page's 38% either way.\n//\n// **Today reads as today whether or not it is selected.** The page gives it\n// an outline and the primary label; selected gives it a filled circle and the\n// on-primary label. A selected today takes the fill, since a circle already\n// says where you are and two rings would say it twice.\n//\n// **The month is moved by IconButton's shape rather than by IconButton.**\n// React Aria wires `slot=\"previous\"` and `slot=\"next\"` on its own `Button`,\n// and IconButton renders React Aria's `Button` too — so nesting one inside\n// the slot would put two buttons where the page draws one. The chevrons take\n// the standard icon button's 40dp square and its state layer instead.\n\ntype CalendarProps<T extends DateValue> = Omit<RACCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACCalendarProps<T>['style'];\n};\n\n/**\n * A month calendar for picking a date. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'\n *\n * <Calendar aria-label=\"Label\" defaultValue={today(getLocalTimeZone())} />\n * ```\n *\n * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual\n * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side\n * by side. Name it with `aria-label` or `aria-labelledby`; React Aria\n * composes the visible month into that name itself.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Calendar<T extends DateValue>(props: CalendarProps<T>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACCalendar>;\n}\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters. `selected` is applied after `today`, so a selected today\n// takes the fill rather than the outline — a circle already says where you\n// are, and two rings would say it twice. `disabled` is last of all, and\n// StyleX replaces a property whole, so it takes the hover branches with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\nexport type { CalendarProps };\nexport default Calendar;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAAM,WAAAkB,SAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EACwCG,KAAAR,oBAAoBd,MAAaY,eAAcW,IAAK,GAAGJ,OAAK;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EAC/FH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAzB,MAAaY,eAAcgB,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAD,QAAAW,iBAAAF,QAAA;EACzCC,KAAAlB,aAAaQ,QAAKW,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAD,QAAAW,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAD,WAAAC,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,UAAD;GAAY,GAAQf;GAAK,GAAMG;GAA/B,UAAA,CACHE,IACAS,EAFe;;EAQHb,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARTc;AAQS;AATlB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMnC,MAAaY,eAAcwB,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBC,SAAF,CAAA,CAFwD;CAAMF,GAAAA,OAAMP,MAAZ;AAG5D;AAa5B,SAASU,cAAcC,OAIpB;CACD,OAAOvC,MAAaY,eAAe+B,MAAM9B,MAAM+B,MAAML,MAAMG,WAAW9B,eAAeiC,WAAWN,MAAME,cAAc7B,eAAekC,cAAcP,MAAMC,cAAc5B,eAAemC,YAAY,CAAC,CAAC9B,aAAa;AACjN;AACA,SAASoB,SAASW,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWV;EAAqBU;CAAK,CAAA;AAC/D"}

package/dist/components/card/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsxs } from "react/jsx-runtime";
@@ -30,10 +31,6 @@ const styles = {
 		kkrTdU: "x1ypdohk",
 		kVVagm: "xln7xf2",
 		kzqmXN: "xh8yej3",
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "x9v5kkp x1t137rt",
-		kMeerF: "x1de99jn",
 		k9WMMc: "x1yc453h",
 		$$css: true
 	},
@@ -122,7 +119,7 @@ function Card(t0) {
 		$[11] = ripple.surface;
 		$[12] = t8;
 	} else t8 = $[12];
-	const t9 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props$1);
+	const t9 = mergeStyles(props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props$1);
 	let t10;
 	if ($[13] !== props$1 || $[14] !== ripple.handlers || $[15] !== t6 || $[16] !== t8 || $[17] !== t9) {
 		t10 = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRipple","useRender","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","kjBf7l","kInvED","k3XXqK","kMeerF","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","_c","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","t10","t11","defaultTagName"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRipple","useRender","focus","mergeStyles","colors","radii","shadows","spacing","stateLayerOpacity","styles","base","kaIpWk","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kVQacm","kVAEAm","kybGjl","$$css","elevated","kWkggS","kGVxlE","filled","interactive","kkrTdU","kVVagm","kzqmXN","k9WMMc","outlined","kVAM5u","ksu8eU","paddingDefault","kmVPX3","paddingNone","interactionStyles","CardProps","padding","variant","CardVariant","Card","t0","$","_c","children","t1","onClick","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","render","t3","props","undefined","t4","ripple","padded","t5","t6","type","t7","handlers","t8","surface","t9","ring","t10","t11","defaultTagName"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useRender } from '../../render/useRender';\nimport { focus } from '../../styles/focus';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The three variants differ only in how they separate themselves from the\n// page: a shadow, a darker fill, or a border. Each therefore sits on a\n// different background, which is why the interaction styles below are keyed\n// by variant too — a state layer composites an 'on-color' over whatever the\n// container already is, so it cannot be written once for all three.\n//\n// color-mix() is inlined at each property rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values. Button's header comment records the same\n// constraint, and the :not(:disabled) guard there applies here for the same\n// reason — stylex's fixed pseudo-class ordering puts :hover after :disabled.\nconst styles = {\n  base: {\n    kaIpWk: \"x62ce2h\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    k1xSpc: \"x1lliihq\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  elevated: {\n    kWkggS: \"x1vnz5z6\",\n    kGVxlE: \"x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1rrhr5q\",\n    $$css: true\n  },\n  interactive: {\n    kkrTdU: \"x1ypdohk\",\n    kVVagm: \"xln7xf2\",\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14s9m32\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  paddingDefault: {\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  paddingNone: {\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\nconst interactionStyles = {\n  elevated: {\n    kWkggS: \"xu5m21g x5r8g2b x1vnz5z6\",\n    kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"x1w49kxs xovjh5a x1rrhr5q\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1jqfdmz x1dmgsxd x14s9m32\",\n    $$css: true\n  }\n};\n\n// Typed as the attributes a <div> accepts, because that is the surface every\n// element this can render shares. Anything element-specific — a button's\n// `type`, an anchor's `href` — would be wrong for the others, and does not\n// need to be here anyway: those are written on the element handed to\n// `render`, where TypeScript checks them against that element's own props.\ntype CardProps = {\n  /**\n   * Makes the card the thing you press: it ripples, lifts on hover, and takes\n   * a focus ring. Renders a `<button>` unless `render` says otherwise. Leave\n   * it off for a card that merely holds content, including one containing its\n   * own buttons.\n   * @default false\n   */\n  interactive?: boolean;\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges — a list of rows separated by rules.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  variant?: CardVariant;\n} & RenderComponentProps<'div'>;\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * A surface holding related content. `render` decides which element that\n * surface is, so a card that navigates can be a real `<a href>` — announced\n * as a link and opening in a new tab on a modifier click, which a `<button>`\n * with an onClick does neither of.\n *\n * `interactive` and `render` are separate axes. `interactive` says the card\n * is pressable and gives it the ripple, the hover lift, and a focus ring;\n * `render` says what it is. A pressable card with no `render` is a\n * `<button>`, which is the right default for one that acts rather than\n * navigates.\n */\nfunction Card({\n  children,\n  interactive = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  padding = 'default',\n  render,\n  variant = 'elevated',\n  ...props\n}: CardProps) {\n  // The consumer's own pointer handlers are handed to useRipple to merge\n  // rather than spread over its handlers afterwards, which is what Button\n  // does and for the same reason: a plain spread means whichever object\n  // comes last silently wins, so an onPointerDown on the call site would\n  // replace the one driving the ripple and the card would stop rippling.\n  const ripple = useRipple(interactive, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: interactive ? 'button' : 'div',\n    props: {\n      ...props,\n      // Only when the default <button> is what renders. On an element the\n      // call site chose, `type` is either meaningless or wrong — an <a>'s\n      // `type` is a hint about the MIME type of what it links to — and that\n      // element's own attributes are the call site's to write.\n      ...(interactive && render === undefined ? {\n        type: 'button'\n      } : undefined),\n      ...ripple.handlers,\n      children: <>\n          {children}\n          {ripple.surface}\n        </>,\n      ...mergeStyles(stylex.props(styles.base, styles[variant], padded, interactive && styles.interactive, interactive && focus.ring, interactive && interactionStyles[variant]), props)\n    },\n    render\n  });\n}\nexport type { CardProps };\nexport default Card;"],"mappings":";;;;;;;;AAoBA,MAAMW,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAK,aAAa;EACXC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRT,OAAO;CACT;CACAU,UAAU;EACRR,QAAQ;EACRS,QAAQ;EACRC,QAAQ;EACRnB,QAAQ;EACRO,OAAO;CACT;CACAa,gBAAgB;EACdC,QAAQ;EACRd,OAAO;CACT;CACAe,aAAa;EACXD,QAAQ;EACRd,OAAO;CACT;AACF;AACA,MAAMgB,oBAAoB;CACxBf,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,QAAQ;EACNF,QAAQ;EACRF,OAAO;CACT;CACAU,UAAU;EACRR,QAAQ;EACRF,OAAO;CACT;AACF;;;;;;;;;;;;;AA2CA,SAAAqB,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAC,UAAApB,aAAAqB,IAAAC,SAAAC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAd,SAAAe,IAAAC,QAAAf,SAAAgB,IAAA,GAAAC,YAAAd;CAEZ,MAAAjB,cAAAqB,OAAAW,KAAAA,IAAA,QAAAX;CAOA,MAAAR,UAAAe,OAAAI,KAAAA,IAAA,YAAAJ;CAEA,MAAAd,UAAAgB,OAAAE,KAAAA,IAAA,aAAAF;CAAoB,IAAAG;CAAA,IAAAf,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAQkBM,KAAA;GAAAX;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAOtC;EAACT,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAPD,MAAAgB,SAAe1D,UAAUwB,aAAaiC,EAOrC;CACD,MAAAE,SAAetB,YAAY,SAAS5B,OAAMyB,cAAezB,OAAMuB;CAE7C,MAAA4B,KAAApC,cAAA,WAAA;CAA8B,IAAAqC;CAAA,IAAAnB,EAAA,OAAAlB,eAAAkB,EAAA,OAAAW,QAAA;EAOxCQ,KAAArC,eAAe6B,WAAWG,KAAAA,IAA1B,EAAAM,MACI,SACI,IAFRN,KAAAA;EAESd,EAAA,KAAAlB;EAAAkB,EAAA,KAAAW;EAAAX,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CACV,MAAAqB,KAAAL,OAAMM;CAAS,IAAAC;CAAA,IAAAvB,EAAA,QAAAE,YAAAF,EAAA,QAAAgB,OAAAQ,SAAA;EACRD,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLrB,UACAc,OAAMQ,OAAQ,EAAA,CAAA;EACdxB,EAAA,MAAAE;EAAAF,EAAA,MAAAgB,OAAAQ;EAAAxB,EAAA,MAAAuB;CAAA,OAAAA,KAAAvB,EAAA;CACF,MAAAyB,KAAAhE,YAAYL,MAAaW,OAAMC,MAAOD,OAAO6B,UAAUqB,QAAQnC,eAAef,OAAMe,aAAcA,eAAetB,MAAKkE,MAAO5C,eAAeW,kBAAkBG,QAAQ,GAAGiB,OAAK;CAAC,IAAAc;CAAA,IAAA3B,EAAA,QAAAa,WAAAb,EAAA,QAAAgB,OAAAM,YAAAtB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAuB,MAAAvB,EAAA,QAAAyB,IAAA;EAd7KE,MAAA;GAAA,GACFd;GAAK,GAKJM;GAES,GACVE;GAAenB,UACRqB;GAGL,GACFE;EACL;EAACzB,EAAA,MAAAa;EAAAb,EAAA,MAAAgB,OAAAM;EAAAtB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAuB;EAAAvB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAAW,UAAAX,EAAA,QAAA2B,OAAA3B,EAAA,QAAAkB,IAAA;EAjBcU,MAAA;GAAAC,gBACCX;GAA8BL,OACvCc;GAeNhB;EAEH;EAACX,EAAA,MAAAW;EAAAX,EAAA,MAAA2B;EAAA3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,OAnBMzC,UAAUqE,GAmBhB;AAAC"}

package/dist/components/checkbox/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
@@ -78,13 +79,7 @@ const styles = {
 		kkrTdU: "x1h6gzvc",
 		$$css: true
 	},
-	controlFocused: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
-		kMeerF: "x1de99jn",
-		$$css: true
-	},
+	controlFocused: { $$css: true },
 	controlReadOnly: {
 		kkrTdU: "xt0e3qv",
 		$$css: true
@@ -126,7 +121,7 @@ function buttonContent(children, ripple) {
 		const active = state.isHovered || state.isPressed || state.isFocusVisible;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
 			...interactive ? ripple.handlers : {},
-			...props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused),
+			...props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused, state.isFocusVisible && focus.ringVisible),
 			children: [/* @__PURE__ */ jsx("span", {
 				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
 				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null

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

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

package/dist/components/chip/index.js

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { chipStyles } from "../../chip/styles.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ function Chip(t0) {
 	return t3;
 }
 function propsFor(state) {
-	return props(chipStyles.base, state.isSelected ? chipStyles.selected : chipStyles.unselected, state.isDisabled && chipStyles.disabled, state.isDisabled && (state.isSelected ? chipStyles.disabledSelected : chipStyles.disabledUnselected));
+	return props(chipStyles.base, 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":["ToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipStyles","mergeStatefulStyles","ChipProps","Chip","t0","$","_c","T0","children","t1","t2","t3","props","propsFor","state","base","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers and its disabled treatment are the chip\n// module's in `src/chip`, shared with the chips a ChipGroup draws; what is\n// 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\ntype ChipProps = ToggleButtonProps;\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  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\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, 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":";;;;;;;;;;;;;AAmBA,SAAAO,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAI,UAAAG,IAAA,GAAAC,UAAAR;EAAAI,WAAAG;EAIJJ,KAAAR;EAAiBa,KAAAA;EAAWF,KAAAT,oBAAoBY,UAAUD,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,WAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,YAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAAjEC,KAAA,oBAAC,IAAD;GAAa,GAAKC;GAAK,GAAMF;GAC/BF;EADe,CAAA;EAEHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFVM;AAEU;AAWnB,SAASE,SAASC,OAAgC;CAChD,OAAOhB,MAAaE,WAAWe,MAAMD,MAAME,aAAahB,WAAWiB,WAAWjB,WAAWkB,YAAYJ,MAAMK,cAAcnB,WAAWoB,UAAUN,MAAMK,eAAeL,MAAME,aAAahB,WAAWqB,mBAAmBrB,WAAWsB,mBAAmB;AACpP"}
+{"version":3,"file":"index.js","names":["ToggleButtonProps","ToggleButtonRenderProps","stylex","ToggleButton","chipStyles","focus","mergeStatefulStyles","ChipProps","Chip","t0","$","_c","T0","children","t1","t2","t3","props","propsFor","state","base","ring","isSelected","selected","unselected","isDisabled","disabled","disabledSelected","disabledUnselected"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ToggleButtonProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ToggleButton } from 'react-aria-components';\nimport { chipStyles } from '../../chip/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The pill, its two containers and its disabled treatment are the chip\n// module's in `src/chip`, shared with the chips a ChipGroup draws; what is\n// 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\ntype ChipProps = ToggleButtonProps;\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  ...props\n}: ChipProps) {\n  return <ToggleButton {...props} {...mergeStatefulStyles(propsFor, props)}>\n      {children}\n    </ToggleButton>;\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":";;;;;;;;;;;;;;AAoBA,SAAAQ,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAI,UAAAG,IAAA,GAAAC,UAAAR;EAAAI,WAAAG;EAIJJ,KAAAT;EAAiBc,KAAAA;EAAWF,KAAAT,oBAAoBY,UAAUD,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,WAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,YAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAAjEC,KAAA,oBAAC,IAAD;GAAa,GAAKC;GAAK,GAAMF;GAC/BF;EADe,CAAA;EAEHH,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFVM;AAEU;AAWnB,SAASE,SAASC,OAAgC;CAChD,OAAOjB,MAAaE,WAAWgB,MAAMf,MAAMgB,MAAMF,MAAMG,aAAalB,WAAWmB,WAAWnB,WAAWoB,YAAYL,MAAMM,cAAcrB,WAAWsB,UAAUP,MAAMM,eAAeN,MAAMG,aAAalB,WAAWuB,mBAAmBvB,WAAWwB,mBAAmB;AAChQ"}