@kanso-labs/kanso-ui 0.37.0 → 0.38.0

package/dist/calendar/styles.js

@@ -212,8 +212,9 @@ const calendarStyles = {
 	},
 	months: {
 		kGNEyG: "x7a106z",
-		k1xSpc: "x78zum5",
+		k1xSpc: "x78zum5 x1yrkhk",
 		kOIVth: "xj2l1yv",
+		kJBjZk: "x12n7ir1",
 		kAzted: "x1fivsg2",
 		$$css: true
 	},

package/dist/calendar/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["stylex","colors","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\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  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\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  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xj2l1yv\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":["stylex","colors","media","radii","sizing","spacing","stateLayerOpacity","typography","ROW_BLOCK_SIZE","WEEKS_HELD","FORCED_COLORS","calendarStyles","cell","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kzqmXN","kjj79g","kb6lSQ","kLWn49","kUOVxO","$$css","cellDisabled","kAXs8y","cellInRange","kVAM5u","kjBf7l","cellRangeEnd","kT0f0o","kfmiAY","cellRangeStart","kVL7Gh","krdFHd","cellSelected","cellToday","ksu8eU","kMzoRj","cellUnavailable","kMnn75","chevron","chevronGlyph","k3aq6I","chevronGlyphPrevious","chevronHidden","k33iCy","grid","kLvRdT","kheTzg","header","kOIVth","kAzted","headerCell","headerGroup","heading","kogj98","k9WMMc","menuArrow","kmuXW","menuArrowExpanded","menuButton","kg3NbH","menuCheck","menuItem","k3XXqK","menuItemDisabled","menuItemFocused","kInvED","kMeerF","menuItemSelected","menuList","kLZC3w","kPef9Z","kEafiO","kORKVm","months","kJBjZk","root","kXwgrk","k7Eaqz","kmVPX3","dateLayers","inRangeHovered","inRangePressed","plainHovered","plainPressed","selectedHovered","selectedPressed","menuLayers"],"sources":["../../src/calendar/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, radii, sizing, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The styles Calendar and RangeCalendar both draw. Apart from either\n// component so the two cannot drift, and outside `src/components` because a\n// directory there is a public component with stories, a barrel entry and a\n// `styling.test.tsx` case — which shared styles are none of.\n//\n// The values are the date pickers page's docked calendar, named in\n// `src/components/calendar/index.tsx` along with the departures from it. What\n// is only a range's — the band between the two ends — takes its colours from\n// the modal date picker's range-selection tokens instead, since the docked\n// token set stops at the selected date; see `cellInRange`.\n//\n// Under forced colours a selected date and a range's band are fills, which\n// that mode paints in a system colour, so a calendar showed no selection and\n// no range there, only today's outline. Both take `Highlight` with\n// `HighlightText` over it, the pair the mode gives whatever is chosen, which\n// draws a range as one run from its first day to its last.\n//\n// They take the pair with `forced-color-adjust: none`. Left to adjust, the\n// mode lays a `Canvas` backplate behind every run of text, and a date in\n// `HighlightText` on that backplate is a blank box. With it off nothing is\n// forced on those cells, so they name a system colour for everything they\n// draw — the fill, the date, today's outline and the focus ring. A day ruled\n// out or disabled names none, so it hands itself back to the mode.\n\n// One row of the grid. The weekday row and every week of dates are the same\n// 40dp, so `cell`, `headerCell` and the room `months` reserves are all this\n// one number — a date resized without the reservation following it would put\n// the calendar's height back on its month.\nconst ROW_BLOCK_SIZE = '40px';\n\n// The weeks the grid holds room for, which is the most any month occupies: a\n// 31-day month beginning on the last day of a week runs one day, then four\n// whole weeks, then two days. February 2026 is the other end at four. Holding\n// six draws every month in the box the longest one fills.\nconst WEEKS_HELD = 6;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst calendarStyles = {\n  cell: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x16fbrrb\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kzqmXN: \"x100vrsf\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  cellDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    $$css: true\n  },\n  cellInRange: {\n    kWkggS: \"x15dekr4 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kaIpWk: \"x2u8bby\",\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xrxpjvj\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellRangeEnd: {\n    kT0f0o: \"x187kppt\",\n    kfmiAY: \"x1fpsnkq\",\n    $$css: true\n  },\n  cellRangeStart: {\n    kVL7Gh: \"x17kgqx\",\n    krdFHd: \"x1uni95s\",\n    $$css: true\n  },\n  cellSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kVAM5u: \"x1uajy3w x1n2ykn\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    kAXs8y: \"x1g12otp\",\n    kjBf7l: \"xrgy624 x3teovq\",\n    $$css: true\n  },\n  cellToday: {\n    kVAM5u: \"x1uajy3w\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  cellUnavailable: {\n    kWkggS: \"xjbqb8w\",\n    kkrTdU: \"x1h6gzvc\",\n    kAXs8y: \"xr5dkdi\",\n    kMnn75: \"x5lhwog\",\n    $$css: true\n  },\n  chevron: {\n    kUOVxO: \"x34s64n\",\n    $$css: true\n  },\n  chevronGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    k3aq6I: \"x19axjrm x1c071of\",\n    $$css: true\n  },\n  chevronGlyphPrevious: {\n    k3aq6I: \"xdg80k9 xpk2tj9\",\n    $$css: true\n  },\n  chevronHidden: {\n    k33iCy: \"xlshs6z\",\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  headerGroup: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\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  menuArrow: {\n    kZKoxP: \"xmix8c7\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"x1xp8n7a\",\n    $$css: true\n  },\n  menuArrowExpanded: {\n    k3aq6I: \"x19jd1h0\",\n    $$css: true\n  },\n  menuButton: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kOIVth: \"xzoy561\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  menuCheck: {\n    kZKoxP: \"xxk0z11\",\n    kMwMTN: \"x139gbkf\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  menuItem: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xbg5kjn\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"x16svsjw\",\n    kGuDYH: \"x1848etk\",\n    k63SB2: \"x1c52epr\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"x1qn8t5l\",\n    kLWn49: \"xh7dzej\",\n    k3XXqK: \"x1t137rt\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  menuItemDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x9w6zvh\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  menuItemFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  menuItemSelected: {\n    kWkggS: \"xkrgufg\",\n    $$css: true\n  },\n  menuList: {\n    kZKoxP: \"x1mj9p22\",\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    kUOVxO: \"xnx04jz\",\n    k3XXqK: \"x1t137rt\",\n    kORKVm: \"x1odjw0f\",\n    $$css: true\n  },\n  months: {\n    kGNEyG: \"x7a106z\",\n    k1xSpc: \"x78zum5 x1yrkhk\",\n    kOIVth: \"xj2l1yv\",\n    kJBjZk: \"x12n7ir1\",\n    kAzted: \"x1fivsg2\",\n    $$css: true\n  },\n  root: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"xhpdng0\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kOIVth: \"x1gka490\",\n    kzqmXN: \"xeq5yr9\",\n    k7Eaqz: \"x1gvwcb\",\n    kmVPX3: \"xa36j16\",\n    $$css: true\n  }\n};\n\n// A date's hover and pressed layers, one pair per ground it sits on: nothing,\n// the range band, and the selected circle. From React Aria's render state rather than `:hover` and `:active`, for Button's\n// reasons — see its header: a hover layer stayed on after a tap, and no\n// pressed layer showed for a press made from the keyboard.\n// Each layer is written whole for its ground because StyleX replaces a\n// property whole, and the band and the circle keep their forced-colours\n// `Highlight` under the layer.\nconst dateLayers = {\n  inRangeHovered: {\n    kWkggS: \"x3zumxv x1jzqe4\",\n    $$css: true\n  },\n  inRangePressed: {\n    kWkggS: \"x1as5h4c x1jzqe4\",\n    $$css: true\n  },\n  plainHovered: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  plainPressed: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  selectedHovered: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// A list row's hover and pressed layers over the checked row's surface\n// variant. Over nothing a row takes a date's own pair, `dateLayers.plain*`,\n// since the page gives both the same on-surface layer.\nconst menuLayers = {\n  selectedHovered: {\n    kWkggS: \"xgw93rf\",\n    $$css: true\n  },\n  selectedPressed: {\n    kWkggS: \"x113d7pk\",\n    $$css: true\n  }\n};\nexport { calendarStyles, dateLayers, menuLayers };"],"mappings":"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"}

package/dist/carousel/arrangement.d.ts

@@ -0,0 +1,5 @@
+//#region src/carousel/arrangement.d.ts
+type CarouselLayout = 'hero' | 'multi-browse' | 'uncontained';
+//#endregion
+export type { CarouselLayout };
+//# sourceMappingURL=arrangement.d.ts.map

package/dist/carousel/arrangement.js

@@ -0,0 +1,123 @@
+/** The page's small item: 40dp at the least and 56dp at the most. */
+const SMALL_MAX = 56;
+const SMALL_MIN = 40;
+/**
+* The sizes a layout draws its items at in a content box `room` wide, for
+* `count` items and a preferred large width of `itemSize`.
+*/
+function arrange(layout, room, itemSize, count) {
+	if (layout === "uncontained") return {
+		large: Math.min(itemSize, room),
+		largeCount: 0,
+		medium: 0,
+		small: 0,
+		steps: 0
+	};
+	const small = room >= 184 ? SMALL_MAX : SMALL_MIN;
+	if (layout === "hero") return withSteps({
+		large: Math.max(room - 8 - small, small),
+		largeCount: 1,
+		medium: 0,
+		small
+	}, count);
+	const fit = Math.floor((room - small - 8) / (itemSize + 8));
+	const most = Math.max(1, Math.min(fit, count - 2));
+	for (let largeCount = most; largeCount >= 1; largeCount--) {
+		const gaps = (largeCount + 1) * 8;
+		const medium = room - largeCount * itemSize - gaps - small;
+		if (medium >= small && medium <= itemSize) return withSteps({
+			large: itemSize,
+			largeCount,
+			medium,
+			small
+		}, count);
+		const large = (room - gaps - 1.5 * small) / (largeCount + .5);
+		if (large >= small) return withSteps({
+			large,
+			largeCount,
+			medium: (large + small) / 2,
+			small
+		}, count);
+	}
+	return arrange("hero", room, itemSize, count);
+}
+function filledOf(sizes, count) {
+	return Math.min(count, sizes.largeCount + trailingOf(sizes).length);
+}
+/**
+* Where every item is drawn with the carousel `position` rests along: a
+* whole number at a rest, and the fraction between two while it moves.
+* `room` is the content box's width and `padding` the space on each side of
+* it, which an item past the edge is drawn beyond.
+*/
+function placements(layout, arrangement, room, padding, count, position) {
+	if (layout === "uncontained") return Array.from({ length: count }, (_, index) => ({
+		left: index * (arrangement.large + 8),
+		width: arrangement.large
+	}));
+	const clamped = Math.min(Math.max(position, 0), arrangement.steps);
+	const from = Math.floor(clamped);
+	const to = Math.min(from + 1, arrangement.steps);
+	const fraction = clamped - from;
+	const start = rest(arrangement, room, padding, count, from);
+	const end = rest(arrangement, room, padding, count, to);
+	return start.map((placement, index) => {
+		const next = end[index] ?? placement;
+		return {
+			left: placement.left + (next.left - placement.left) * fraction,
+			width: placement.width + (next.width - placement.width) * fraction
+		};
+	});
+}
+function rest(arrangement, room, padding, count, step) {
+	const { large, largeCount, small } = arrangement;
+	const filled = filledOf(arrangement, count);
+	const trailing = trailingOf(arrangement).slice(0, filled - largeCount);
+	const last = count - filled;
+	const turned = Math.max(0, step - last);
+	const kept = trailing.length - turned;
+	const sizes = [
+		...Array.from({ length: turned }, (_, slot) => trailing[trailing.length - 1 - slot] ?? small),
+		...Array.from({ length: Math.min(largeCount, filled) }, () => large),
+		...trailing.slice(0, kept)
+	];
+	const first = Math.min(step, last);
+	const lefts = [];
+	let cursor = 0;
+	for (const size of sizes) {
+		lefts.push(cursor);
+		cursor += size + 8;
+	}
+	const shift = turned > 0 ? room - (cursor - 8) : 0;
+	const away = small > 0 ? small : large;
+	return Array.from({ length: count }, (_, index) => {
+		const slot = index - first;
+		if (slot < 0) return {
+			left: -padding + slot * (away + 8),
+			width: away
+		};
+		if (slot >= sizes.length) return {
+			left: room + padding + 8 + (slot - sizes.length) * (away + 8),
+			width: away
+		};
+		return {
+			left: (lefts[slot] ?? 0) + shift,
+			width: sizes[slot] ?? away
+		};
+	});
+}
+function trailingOf({ medium, small }) {
+	return [medium, small].filter((size) => size > 0);
+}
+function withSteps(sizes, count) {
+	const filled = filledOf(sizes, count);
+	const turning = Math.max(0, filled - sizes.largeCount);
+	return {
+		...sizes,
+		steps: count - filled + turning
+	};
+}
+//#endregion
+export { arrange, placements };
+
+//# sourceMappingURL=arrangement.js.map

package/dist/carousel/arrangement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrangement.js","names":["CarouselLayout","GAP","SMALL_MAX","SMALL_MIN","Arrangement","large","largeCount","medium","small","steps","Placement","left","width","arrange","layout","room","itemSize","count","Math","min","max","withSteps","fit","floor","most","gaps","sizes","filledOf","Omit","trailingOf","length","placements","arrangement","padding","position","Array","from","_","index","clamped","to","fraction","start","rest","end","map","placement","next","step","filled","trailing","slice","last","turned","kept","slot","first","lefts","cursor","size","push","shift","away","filter","turning"],"sources":["../../src/carousel/arrangement.ts"],"sourcesContent":["// The carousel page's layouts as numbers: which items are large, medium and\n// small at each place a carousel comes to rest, and where each is drawn as\n// it moves between two of them. Apart from the component so the arithmetic\n// can be tested without a browser laying anything out, and so the\n// component's file holds what it renders.\n//\n// The model is MDC-Android's keylines, simplified to what the page draws.\n// At rest a multi-browse carousel shows `largeCount` large items, one medium\n// and one small, filling the room exactly; a hero carousel one large and one\n// small. Each rest is one item further along than the last, and once the\n// last item has come into view the rests that remain turn the arrangement\n// round a slot at a time — small, the large ones, medium; then small,\n// medium, the large ones — so every item is drawn large at one rest at\n// least. At rest `s` the large items are always `s` to `s + largeCount - 1`.\n// Between two rests every item's place and width are interpolated, which is\n// what makes an item grow or shrink as it moves rather than jump. Items past\n// either edge are drawn small and out of sight, so they arrive at the size\n// of the slot they enter.\n//\n// Everything is in pixels along the inline axis of the carousel's content\n// box: 0 is its start edge, inside the leading padding.\n\ntype CarouselLayout = 'hero' | 'multi-browse' | 'uncontained'\n\n/** The page's 8dp between items. */\nconst GAP = 8\n\n/** The page's small item: 40dp at the least and 56dp at the most. */\nconst SMALL_MAX = 56\nconst SMALL_MIN = 40\n\ntype Arrangement = {\n  /** The large item's width, which every item is laid out at. */\n  large: number\n  /** How many items are large at rest. */\n  largeCount: number\n  /** The medium item's width, or 0 for a layout without one. */\n  medium: number\n  /** The small item's width, or 0 for a layout without one. */\n  small: number\n  /** The last place the carousel comes to rest, counting from 0. */\n  steps: number\n}\n\n/** Where an item is drawn: the start of what shows of it, and its width. */\ntype Placement = { left: number; width: number }\n\n/**\n * The sizes a layout draws its items at in a content box `room` wide, for\n * `count` items and a preferred large width of `itemSize`.\n */\nfunction arrange(\n  layout: CarouselLayout,\n  room: number,\n  itemSize: number,\n  count: number,\n): Arrangement {\n  if (layout === 'uncontained') {\n    const large = Math.min(itemSize, room)\n    return { large, largeCount: 0, medium: 0, small: 0, steps: 0 }\n  }\n\n  // The small item at its largest unless the room is too narrow for it.\n  const small = room >= 3 * SMALL_MAX + 2 * GAP ? SMALL_MAX : SMALL_MIN\n\n  if (layout === 'hero') {\n    const large = Math.max(room - GAP - small, small)\n    return withSteps({ large, largeCount: 1, medium: 0, small }, count)\n  }\n\n  // As many items at the preferred width as fit beside a medium and a small\n  // one, and no more than leave a medium and a small item to fill those two\n  // slots, so a short run of items still fills the room rather than leaving\n  // its last slots empty. Where what is left for the medium item is not\n  // between the small and the large width, the large width gives way, to\n  // whatever leaves the medium item halfway between the two.\n  const fit = Math.floor((room - small - GAP) / (itemSize + GAP))\n  const most = Math.max(1, Math.min(fit, count - 2))\n  for (let largeCount = most; largeCount >= 1; largeCount--) {\n    const gaps = (largeCount + 1) * GAP\n    const medium = room - largeCount * itemSize - gaps - small\n    if (medium >= small && medium <= itemSize) {\n      return withSteps({ large: itemSize, largeCount, medium, small }, count)\n    }\n    const large = (room - gaps - 1.5 * small) / (largeCount + 0.5)\n    if (large >= small) {\n      const sizes = { large, largeCount, medium: (large + small) / 2, small }\n      return withSteps(sizes, count)\n    }\n  }\n  // Too narrow for three: one large item and one small, as a hero draws.\n  return arrange('hero', room, itemSize, count)\n}\n\n// How many of the slots are filled: all of them, unless there are fewer\n// items, which leaves the last slots empty.\nfunction filledOf(sizes: Omit<Arrangement, 'steps'>, count: number) {\n  return Math.min(count, sizes.largeCount + trailingOf(sizes).length)\n}\n\n/**\n * Where every item is drawn with the carousel `position` rests along: a\n * whole number at a rest, and the fraction between two while it moves.\n * `room` is the content box's width and `padding` the space on each side of\n * it, which an item past the edge is drawn beyond.\n */\nfunction placements(\n  layout: CarouselLayout,\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  position: number,\n): Placement[] {\n  if (layout === 'uncontained') {\n    return Array.from({ length: count }, (_, index) => ({\n      left: index * (arrangement.large + GAP),\n      width: arrangement.large,\n    }))\n  }\n\n  const clamped = Math.min(Math.max(position, 0), arrangement.steps)\n  const from = Math.floor(clamped)\n  const to = Math.min(from + 1, arrangement.steps)\n  const fraction = clamped - from\n  const start = rest(arrangement, room, padding, count, from)\n  const end = rest(arrangement, room, padding, count, to)\n\n  return start.map((placement, index) => {\n    const next = end[index] ?? placement\n    return {\n      left: placement.left + (next.left - placement.left) * fraction,\n      width: placement.width + (next.width - placement.width) * fraction,\n    }\n  })\n}\n\n// Where every item is drawn at one rest.\nfunction rest(\n  arrangement: Arrangement,\n  room: number,\n  padding: number,\n  count: number,\n  step: number,\n) {\n  const { large, largeCount, small } = arrangement\n  const filled = filledOf(arrangement, count)\n  const trailing = trailingOf(arrangement).slice(0, filled - largeCount)\n  // The last rest drawn from the start; past it, how many trailing slots\n  // have turned round to the front, the last of them first.\n  const last = count - filled\n  const turned = Math.max(0, step - last)\n  const kept = trailing.length - turned\n  const sizes = [\n    ...Array.from(\n      { length: turned },\n      (_, slot) => trailing[trailing.length - 1 - slot] ?? small,\n    ),\n    ...Array.from({ length: Math.min(largeCount, filled) }, () => large),\n    ...trailing.slice(0, kept),\n  ]\n  // The item in the first slot. Once the arrangement turns, the slots hold\n  // the last items, whichever way round they are drawn.\n  const first = Math.min(step, last)\n\n  // The slots, laid out from the start edge.\n  const lefts: number[] = []\n  let cursor = 0\n  for (const size of sizes) {\n    lefts.push(cursor)\n    cursor += size + GAP\n  }\n  // A turned arrangement that does not fill the room is set against the end\n  // edge instead, which is where its large items belong.\n  const shift = turned > 0 ? room - (cursor - GAP) : 0\n  const away = small > 0 ? small : large\n\n  return Array.from({ length: count }, (_, index): Placement => {\n    const slot = index - first\n    if (slot < 0) {\n      // Past the start edge, beyond the padding, a small item per place.\n      return { left: -padding + slot * (away + GAP), width: away }\n    }\n    if (slot >= sizes.length) {\n      // Past the end edge, likewise.\n      return {\n        left: room + padding + GAP + (slot - sizes.length) * (away + GAP),\n        width: away,\n      }\n    }\n    return { left: (lefts[slot] ?? 0) + shift, width: sizes[slot] ?? away }\n  })\n}\n\n// The widths that follow the large ones at rest: medium then small, or the\n// small alone for a hero.\nfunction trailingOf({ medium, small }: Omit<Arrangement, 'steps'>) {\n  return [medium, small].filter((size) => size > 0)\n}\n\n// A rest starts at each item while every slot after it is filled, and each\n// trailing slot turning round to the front is one rest more.\nfunction withSteps(\n  sizes: Omit<Arrangement, 'steps'>,\n  count: number,\n): Arrangement {\n  const filled = filledOf(sizes, count)\n  const turning = Math.max(0, filled - sizes.largeCount)\n  return { ...sizes, steps: count - filled + turning }\n}\n\nexport type { Arrangement, CarouselLayout, Placement }\n\nexport { arrange, GAP, placements }\n"],"mappings":"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"}

package/dist/components/calendar/index.d.ts

@@ -29,8 +29,9 @@ type CalendarProps$1<T extends DateValue = DateValue> = Omit<CalendarProps<T>, '
  *
  * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual
  * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side
- * by side. Name it with `aria-label` or `aria-labelledby`; React Aria
- * composes the visible month into that name itself.
+ * by side, stacked below the expanded breakpoint. Name it with `aria-label`
+ * or `aria-labelledby`; React Aria composes the visible month into that name
+ * itself.
  *
  * The call site's `className` and `style` land on the container, which is the
  * element a layout positions.

package/dist/components/calendar/index.js

@@ -23,8 +23,9 @@ import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-ar
 *
 * `minValue` and `maxValue` bound it, `isDateUnavailable` rules individual
 * dates out, and `visibleDuration` of `{ months: 2 }` draws two months side
-* by side. Name it with `aria-label` or `aria-labelledby`; React Aria
-* composes the visible month into that name itself.
+* by side, stacked below the expanded breakpoint. Name it with `aria-label`
+* or `aria-labelledby`; React Aria composes the visible month into that name
+* itself.
 *
 * The call site's `className` and `style` land on the container, which is the
 * element a layout positions.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","props","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","gridCell","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","selectedHovered","plainHovered","selectedPressed","plainPressed","cellUnavailable","cellDisabled","date","Calendar","_c","props","RACCalendar","stylex.props","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } 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 { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } 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 take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was. The parts are in\n// `src/calendar`, shared with RangeCalendar.\n//\n// Five things are this component's own.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year, which would need two names React Aria has no\n// message for — the library writes a word of its own only behind a prop that\n// can replace it, and it would take a pair on four components. The year list\n// reaches any year the bounds allow in one press, and Shift with Page Up or\n// Page Down steps a year from the keyboard.\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 = 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  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\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>({\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\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      </CalendarFrame>\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. The hover and pressed layers come\n// next, over whichever ground the date has, a press over a hover.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, 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":"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"}
+{"version":3,"file":"index.js","names":["c","_c","CalendarDate","ReactElement","RefAttributes","DateValue","CalendarProps","RACCalendarProps","stylex","Calendar","RACCalendar","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","CalendarFrame","CalendarGridHeader","monthOffsets","calendarStyles","dateLayers","focus","mergeStatefulStyles","Omit","T","className","showMonthYearMenus","style","t0","$","T0","T1","t1","t2","t3","t4","t5","t6","props","undefined","root","Symbol","for","months","visibleDuration","map","_temp","t7","t8","offset","grid","gridCell","cellClassName","state","isDisabled","isHovered","isPressed","isSelected","isToday","isUnavailable","cell","ring","cellToday","cellSelected","selectedHovered","plainHovered","selectedPressed","plainPressed","cellUnavailable","cellDisabled","date","Calendar","_c","props","RACCalendar","stylex.props","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody","RACCalendarCell"],"sources":["../../../src/components/calendar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement, RefAttributes } 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 { CalendarFrame, CalendarGridHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles, dateLayers } 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 take: that height\n// is a picker's, counting a headline and an action row the calendar itself\n// does not draw. What is held instead is the grid, at six weeks — the most\n// any month occupies — so the calendar keeps its height as the month moves\n// and a shorter month leaves its last rows empty. `months` in\n// `src/calendar/styles.ts` is where the room is reserved.\n//\n// `showMonthYearMenus` draws the page's docked header instead of one heading:\n// the month's menu button between the chevrons that step it and the year's\n// after them, each opening its list where the grid was. The parts are in\n// `src/calendar`, shared with RangeCalendar.\n//\n// Five things are this component's own.\n//\n// **The year menu has no chevrons of its own.** The page draws a pair either\n// side of it that step a year, which would need two names React Aria has no\n// message for — the library writes a word of its own only behind a prop that\n// can replace it, and it would take a pair on four components. The year list\n// reaches any year the bounds allow in one press, and Shift with Page Up or\n// Page Down steps a year from the keyboard.\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 = 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  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as the docked date picker's\n   * header does, rather than one heading between the chevrons. For a date\n   * far from the one shown, such as a date of birth.\n   * @default false\n   */\n  showMonthYearMenus?: boolean;\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, stacked below the expanded breakpoint. Name it with `aria-label`\n * or `aria-labelledby`; React Aria composes the visible month into that name\n * 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>({\n  showMonthYearMenus = false,\n  ...props\n}: CalendarProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarFrame showMonthYearMenus={showMonthYearMenus}>\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      </CalendarFrame>\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. The hover and pressed layers come\n// next, over whichever ground the date has, a press over a hover.\n// `unavailable` and `disabled` come last, and StyleX replaces a property\n// whole, so they take the layers with them.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isHovered: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isHovered && (state.isSelected ? dateLayers.selectedHovered : dateLayers.plainHovered), state.isPressed && (state.isSelected ? dateLayers.selectedPressed : dateLayers.plainPressed), state.isUnavailable && calendarStyles.cellUnavailable, 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":"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"}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,68 @@
+import { CarouselLayout } from "../../carousel/arrangement.js";
+import { HTMLAttributes, ReactNode, RefAttributes } from "react";
+//#region src/components/carousel/index.d.ts
+type CarouselItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  /** What the item shows: usually an image, which the item masks. */
+  children?: ReactNode;
+};
+type CarouselProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  /** The items: `Carousel.Item` for each. */
+  children?: ReactNode;
+  /**
+   * The large item's preferred width, in pixels. Multi-browse lays out as
+   * many as fit and narrows them where they do not; uncontained draws every
+   * item at it; hero takes its large item's width from the carousel's.
+   * @default 240
+   */
+  itemSize?: number;
+  /**
+   * What the carousel shows, for a screen reader. Required rather than
+   * optional: a carousel is a region, and a region with no name is one a
+   * screen reader cannot introduce.
+   */
+  label: string;
+  /**
+   * Which of the page's layouts the carousel draws.
+   * @default 'multi-browse'
+   */
+  layout?: CarouselLayout;
+  /**
+   * What the next button is called. Left out, the library names it in the
+   * reader's locale — "Next slide" in English.
+   */
+  nextLabel?: string;
+  /**
+   * What the previous button is called. Left out, the library names it in
+   * the reader's locale — "Previous slide" in English.
+   */
+  previousLabel?: string;
+};
+/**
+ * A row of items that scrolls on and off the screen, in the carousel page's
+ * multi-browse, hero or uncontained layout. Name it with `label`, and give it
+ * a `Carousel.Item` for each item.
+ *
+ * ```tsx
+ * <Carousel label="Label">
+ *   <Carousel.Item><img alt="First item" src="…" /></Carousel.Item>
+ *   <Carousel.Item><img alt="Second item" src="…" /></Carousel.Item>
+ * </Carousel>
+ * ```
+ *
+ * The call site's `className` and `style` land on the carousel as a whole,
+ * which is the element a layout positions.
+ */
+declare function Carousel({ children, itemSize, label, layout, nextLabel, previousLabel, ref, ...props }: CarouselProps & RefAttributes<HTMLElement>): import("react").JSX.Element;
+declare namespace Carousel {
+  var Item: typeof CarouselItem;
+}
+/**
+ * One item. It is named by which of how many it is — "2 of 6" — unless it is
+ * given an `aria-label` of its own.
+ *
+ * The call site's `className` and `style` land on the item.
+ */
+declare function CarouselItem({ children, ref, ...props }: CarouselItemProps & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+//#endregion
+export { CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Carousel as default };
+//# sourceMappingURL=index.d.ts.map