@kanso-labs/kanso-ui 0.19.0 → 0.21.0

package/dist/calendar/index.js

@@ -0,0 +1,80 @@
+import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { ChevronEndGlyph } from "../glyphs/index.js";
+import { calendarStyles } from "./styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Button, CalendarGridHeader, CalendarHeaderCell, Heading } from "react-aria-components";
+//#region src/calendar/index.tsx
+function CalendarGridHeader$1() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(CalendarGridHeader, { children: calendarHeaderCell });
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* The two chevrons with the month between them. React Aria wires
+* `slot="previous"` and `slot="next"` on its own `Button`, and `IconButton`
+* renders React Aria's `Button` too — so nesting one inside a slot would put
+* two buttons where the date pickers page draws one. The chevrons take the
+* icon buttons page's 40dp square and its state layer instead.
+*
+* A plain element rather than a `<header>`: a header is a banner landmark,
+* landmarks may not nest, and React Aria puts a calendar in
+* `role="application"` — axe fails the page on it.
+*/
+function CalendarHeader() {
+	const $ = c(4);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = props(calendarStyles.header);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			className: chevronClassName,
+			slot: "previous",
+			children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...props(calendarStyles.chevronGlyph, calendarStyles.chevronGlyphPrevious) })
+		});
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Heading, { ...props(calendarStyles.heading) });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsxs("div", {
+			...t0,
+			children: [
+				t1,
+				t2,
+				/* @__PURE__ */ jsx(Button, {
+					className: chevronClassName,
+					slot: "next",
+					children: /* @__PURE__ */ jsx(ChevronEndGlyph, { ...props(calendarStyles.chevronGlyph) })
+				})
+			]
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+}
+/** The weekday row, in the type the page gives both it and the dates. */
+function calendarHeaderCell(day) {
+	return /* @__PURE__ */ jsx(CalendarHeaderCell, {
+		...props(calendarStyles.headerCell),
+		children: day
+	});
+}
+function chevronClassName() {
+	return props(calendarStyles.chevron).className ?? "";
+}
+//#endregion
+export { CalendarGridHeader$1 as CalendarGridHeader, CalendarHeader };
+
+//# sourceMappingURL=index.js.map

package/dist/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["calendarHeaderCell","chevronClassName"],"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,SAAA,uBAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACS,KAAA,oBAAC,oBAAD,EAAA,UAAwB,mBAAF,CAAA;EAA6C,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnE;AAAmE;;;;;;;;;;;;AAc5E,SAAA,iBAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACkB,KAAA,MAAa,eAAc,MAAO;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC/C,KAAA,oBAAC,QAAD;GAAsBC,WAAA;GAAuB,MAAA;GAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAK,MAAa,eAAc,cAAe,eAAc,oBAAqB,EAAC,CAAA;EAD3F,CAAA;EAEE,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACZ,KAAA,oBAAC,SAAD,EAAW,GAAK,MAAa,eAAc,OAAQ,EAAC,CAAA;EAAI,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAJrD,KAAA,qBAAA,OAAA;GAQC,GARQ;GAAT,UAAA;IACH;IAGA;IACA,oBAAC,QAAD;KAAsBA,WAAA;KAAuB,MAAA;KAC3C,UAAA,oBAAC,iBAAD,EAAgB,GAAK,MAAa,eAAc,YAAa,EAAC,CAAA;IADtD,CAAA;GAGN;;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OARD;AAQC;;AAIV,SAAS,mBAAmB,KAA2B;CACrD,OAAO,oBAAC,oBAAD;EAAuB,GAAI,MAAa,eAAe,UAAU;EACnE,UAAA;CACoB,CAAA;AAC3B;AACA,SAAS,mBAAmB;CAC1B,OAAO,MAAa,eAAe,OAAO,CAAC,CAAC,aAAa;AAC3D"}

package/dist/calendar/months.js

@@ -0,0 +1,14 @@
+//#region src/calendar/months.ts
+/**
+* One offset per visible month, so `visibleDuration` of more than one draws
+* the months side by side rather than one grid that scrolls between them.
+* React Aria positions each grid from its own offset; the heading names the
+* whole range, which is what its own `Heading` renders.
+*/
+function monthOffsets(months) {
+	return Array.from({ length: Math.max(1, months) }, (_unused, index) => ({ months: index }));
+}
+//#endregion
+export { monthOffsets };
+
+//# sourceMappingURL=months.js.map

package/dist/calendar/months.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"months.js","names":[],"sources":["../../src/calendar/months.ts"],"sourcesContent":["// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n\n/**\n * One offset per visible month, so `visibleDuration` of more than one draws\n * the months side by side rather than one grid that scrolls between them.\n * React Aria positions each grid from its own offset; the heading names the\n * whole range, which is what its own `Heading` renders.\n */\nfunction monthOffsets(months: number) {\n  return Array.from({ length: Math.max(1, months) }, (_unused, index) => ({\n    months: index,\n  }))\n}\n\nexport { monthOffsets }\n"],"mappings":";;;;;;;AASA,SAAS,aAAa,QAAgB;CACpC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EACtE,QAAQ,MACV,EAAE;AACJ"}

package/dist/calendar/styles.js

@@ -0,0 +1,150 @@
+//#region src/calendar/styles.ts
+const calendarStyles = {
+	cell: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kZKoxP: "x1vqgdyp",
+		kaIpWk: "x3y1ksm",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kMv6JI: "x16svsjw",
+		kGuDYH: "x1848etk",
+		k63SB2: "x1c52epr",
+		kzqmXN: "x100vrsf",
+		kjj79g: "xl56j7k",
+		kb6lSQ: "x1qn8t5l",
+		kLWn49: "xh7dzej",
+		kUOVxO: "x34s64n",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	cellDisabled: {
+		kWkggS: "xjbqb8w",
+		kMwMTN: "x9w6zvh",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	cellInRange: {
+		kWkggS: "x1mpme18 x1q7sp4o x15dekr4",
+		kaIpWk: "x2u8bby",
+		kMwMTN: "x1sawysd",
+		kzqmXN: "xh8yej3",
+		kUOVxO: "xrxpjvj",
+		$$css: true
+	},
+	cellRangeEnd: {
+		kT0f0o: "x1mh50ju",
+		kfmiAY: "x13dhofw",
+		$$css: true
+	},
+	cellRangeStart: {
+		kVL7Gh: "xqmr837",
+		krdFHd: "xz4iguh",
+		$$css: true
+	},
+	cellSelected: {
+		kWkggS: "x1nik15g x1q2w5h1 xnety89",
+		kMwMTN: "xwjo7ld",
+		$$css: true
+	},
+	cellToday: {
+		kVAM5u: "x1uajy3w",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kMwMTN: "x1mxwv8y",
+		$$css: true
+	},
+	chevron: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x1dg9itu x1728qcm xjbqb8w",
+		kZKoxP: "x1vqgdyp",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1w5n3ug",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x100vrsf",
+		kjj79g: "xl56j7k",
+		kUOVxO: "x34s64n",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		kmVPX3: "x1717udv",
+		$$css: true
+	},
+	chevronGlyph: {
+		kZKoxP: "xxk0z11",
+		kzqmXN: "xvy4d1p",
+		k3aq6I: "x19axjrm x1c071of",
+		$$css: true
+	},
+	chevronGlyphPrevious: {
+		k3aq6I: "xdg80k9 xpk2tj9",
+		$$css: true
+	},
+	grid: {
+		kLvRdT: "x1vathgz",
+		kheTzg: "x1gukg7c",
+		kzqmXN: "xh8yej3",
+		$$css: true
+	},
+	header: {
+		kGNEyG: "x6s0dn4",
+		k1xSpc: "x78zum5",
+		kOIVth: "x126z3so",
+		kjj79g: "x1qughib",
+		kAzted: "x1ba4aug",
+		$$css: true
+	},
+	headerCell: {
+		kZKoxP: "x1vqgdyp",
+		kMwMTN: "x139gbkf",
+		kMv6JI: "x16svsjw",
+		kGuDYH: "x1848etk",
+		k63SB2: "x1c52epr",
+		kb6lSQ: "x1qn8t5l",
+		kLWn49: "xh7dzej",
+		$$css: true
+	},
+	heading: {
+		kMwMTN: "x1w5n3ug",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		kogj98: "x1ghz6dp",
+		k9WMMc: "x2b8uid",
+		$$css: true
+	},
+	months: {
+		k1xSpc: "x78zum5",
+		kOIVth: "xj2l1yv",
+		$$css: true
+	},
+	root: {
+		kWkggS: "xvkjz1l",
+		kaIpWk: "xhpdng0",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		kOIVth: "x1gka490",
+		kzqmXN: "xeq5yr9",
+		k7Eaqz: "x1gvwcb",
+		kmVPX3: "xa36j16",
+		$$css: true
+	}
+};
+//#endregion
+export { calendarStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/calendar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"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,MAAM,iBAAiB;CACrB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,sBAAsB;EACpB,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/dist/chip/styles.js

@@ -0,0 +1,86 @@
+//#region src/chip/styles.ts
+const chipStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "x10w6t97",
+		kaIpWk: "x1xdvaa9",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x790zyz",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x1eaenvl",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	disabled: {
+		kMwMTN: "x1xj74d8",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	disabledSelected: {
+		kWkggS: "xepofeg",
+		$$css: true
+	},
+	disabledUnselected: {
+		kWkggS: "xjbqb8w",
+		kVAM5u: "xrh88j3",
+		$$css: true
+	},
+	remove: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xy3r1oc x15a1ka xjbqb8w",
+		kZKoxP: "xmix8c7",
+		kaIpWk: "x3y1ksm",
+		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
+		kMwMTN: "x1heor9g",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x1xp8n7a",
+		kjj79g: "xl56j7k",
+		k71WvV: "x1kfc2zf",
+		kjBf7l: "x14ytart",
+		kInvED: "x1y3gkto",
+		k3XXqK: "x9v5kkp x1t137rt",
+		kMeerF: "x1de99jn",
+		kmVPX3: "x1717udv",
+		$$css: true
+	},
+	removeGlyph: {
+		kZKoxP: "xmix8c7",
+		kzqmXN: "x1xp8n7a",
+		$$css: true
+	},
+	selected: {
+		kWkggS: "xnqsvhv xlizrex x15dekr4",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	unselected: {
+		kWkggS: "x83qkoq x1p2om7n xjbqb8w",
+		kVAM5u: "x133yhug",
+		kMwMTN: "x1w5n3ug",
+		$$css: true
+	}
+};
+//#endregion
+export { chipStyles };
+
+//# sourceMappingURL=styles.js.map

package/dist/chip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"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,MAAM,aAAa;CACjB,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,oBAAoB;EAClB,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

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

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { AutocompleteProps } from "react-aria-components";
+//#region src/components/autocomplete/index.d.ts
+type AutocompleteFilter<T extends object = object> = NonNullable<AutocompleteProps<T>['filter']>;
+type AutocompleteProps$1<T extends object = object> = {
+  /**
+   * The search input and the collection it filters, in whatever the page
+   * puts around them. React Aria needs both somewhere inside.
+   */
+  children?: ReactNode;
+  /**
+   * Which options a search keeps. Defaults to a locale-aware contains match
+   * on each option's text — React Aria's own default is to filter nothing,
+   * which is right for a collection that arrives filtered and wrong for one
+   * written out in the page.
+   */
+  filter?: AutocompleteFilter<T>;
+} & Omit<AutocompleteProps<T>, 'children' | 'filter'>;
+/**
+ * A search input that filters the collection under it. Its value is React
+ * Aria's: pass `inputValue` with `onInputChange` to control what has been
+ * typed, or `defaultInputValue` to let it keep its own.
+ *
+ * ```tsx
+ * <Autocomplete>
+ *   <SearchField label="Search" placeholder="Search" />
+ *   <ListBox aria-label="Results">
+ *     <ListBox.Item id="first">First item</ListBox.Item>
+ *   </ListBox>
+ * </Autocomplete>
+ * ```
+ *
+ * It renders no element of its own, so the input and the collection sit
+ * wherever the page puts them — side by side in a panel, in a `Menu.Content`,
+ * or in a `Dialog` as a command palette. That is also why it takes no
+ * `className` or `style`: there is nothing for them to land on.
+ *
+ * Keyboard focus stays in the input while the arrow keys move through the
+ * collection, which is React Aria's virtual focus. `disableVirtualFocus`
+ * turns that off and makes the collection tabbable instead.
+ */
+declare function Autocomplete$1<T extends object = object>({ children, filter, ...props }: AutocompleteProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type AutocompleteFilter, type AutocompleteProps$1 as AutocompleteProps, Autocomplete$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/autocomplete/index.js

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Autocomplete, useFilter } from "react-aria-components";
+//#region src/components/autocomplete/index.tsx
+/**
+* A search input that filters the collection under it. Its value is React
+* Aria's: pass `inputValue` with `onInputChange` to control what has been
+* typed, or `defaultInputValue` to let it keep its own.
+*
+* ```tsx
+* <Autocomplete>
+*   <SearchField label="Search" placeholder="Search" />
+*   <ListBox aria-label="Results">
+*     <ListBox.Item id="first">First item</ListBox.Item>
+*   </ListBox>
+* </Autocomplete>
+* ```
+*
+* It renders no element of its own, so the input and the collection sit
+* wherever the page puts them — side by side in a panel, in a `Menu.Content`,
+* or in a `Dialog` as a command palette. That is also why it takes no
+* `className` or `style`: there is nothing for them to land on.
+*
+* Keyboard focus stays in the input while the arrow keys move through the
+* collection, which is React Aria's virtual focus. `disableVirtualFocus`
+* turns that off and makes the collection tabbable instead.
+*/
+function Autocomplete$1(t0) {
+	const $ = c(12);
+	let children;
+	let filter;
+	let props;
+	if ($[0] !== t0) {
+		({children, filter, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = filter;
+		$[3] = props;
+	} else {
+		children = $[1];
+		filter = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { sensitivity: "base" };
+		$[4] = t1;
+	} else t1 = $[4];
+	const { contains } = useFilter(t1);
+	let t2;
+	if ($[5] !== contains || $[6] !== filter) {
+		t2 = filter ?? containsFilter(contains);
+		$[5] = contains;
+		$[6] = filter;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== props || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Autocomplete, {
+			filter: t2,
+			...props,
+			children
+		});
+		$[8] = children;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function containsFilter(contains) {
+	return (textValue, inputValue) => contains(textValue, inputValue);
+}
+//#endregion
+export { Autocomplete$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["children"],"sources":["../../../src/components/autocomplete/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { AutocompleteProps as RACAutocompleteProps } from 'react-aria-components'\n\nimport {\n  Autocomplete as RACAutocomplete,\n  useFilter,\n} from 'react-aria-components'\n\n// The search page's search with suggestions, as the wrapper React Aria makes\n// it: a search input over a collection, where typing narrows what the\n// collection shows. It draws nothing of its own — the input is SearchField,\n// the collection is ListBox or Menu, and where the two sit is the page's\n// business, which is what lets the same wrapper be a searchable list, a\n// filtered menu and a command palette inside a Dialog.\n//\n// Every other component here is a shape; this one is a behaviour, so it\n// renders no element and takes no `className` or `style`. There is nothing\n// for them to land on, and a wrapper element added to give them somewhere\n// would be a layout decision this component has no business making — the\n// three shapes above want three different ones.\n//\n// One thing is added to React Aria's. **Filtering is on by default.** Their\n// wrapper filters nothing unless it is handed a predicate, on the grounds\n// that a collection fed from a server may already be filtered. A collection\n// written out in the page is the common case here, and a search box that\n// does not search is a puzzle rather than a default, so `filter` falls back\n// to the same locale-aware contains match ComboBox uses. A collection that\n// filters itself passes a predicate that always returns true.\n\n// React Aria's own filter signature. Taken from the prop rather than written\n// out, since its third parameter is a collection node whose type this package\n// does not depend on directly.\ntype AutocompleteFilter<T extends object = object> = NonNullable<\n  RACAutocompleteProps<T>['filter']\n>\n\ntype AutocompleteProps<T extends object = object> = {\n  /**\n   * The search input and the collection it filters, in whatever the page\n   * puts around them. React Aria needs both somewhere inside.\n   */\n  children?: ReactNode\n  /**\n   * Which options a search keeps. Defaults to a locale-aware contains match\n   * on each option's text — React Aria's own default is to filter nothing,\n   * which is right for a collection that arrives filtered and wrong for one\n   * written out in the page.\n   */\n  filter?: AutocompleteFilter<T>\n} & Omit<RACAutocompleteProps<T>, 'children' | 'filter'>\n\n/**\n * A search input that filters the collection under it. Its value is React\n * Aria's: pass `inputValue` with `onInputChange` to control what has been\n * typed, or `defaultInputValue` to let it keep its own.\n *\n * ```tsx\n * <Autocomplete>\n *   <SearchField label=\"Search\" placeholder=\"Search\" />\n *   <ListBox aria-label=\"Results\">\n *     <ListBox.Item id=\"first\">First item</ListBox.Item>\n *   </ListBox>\n * </Autocomplete>\n * ```\n *\n * It renders no element of its own, so the input and the collection sit\n * wherever the page puts them — side by side in a panel, in a `Menu.Content`,\n * or in a `Dialog` as a command palette. That is also why it takes no\n * `className` or `style`: there is nothing for them to land on.\n *\n * Keyboard focus stays in the input while the arrow keys move through the\n * collection, which is React Aria's virtual focus. `disableVirtualFocus`\n * turns that off and makes the collection tabbable instead.\n */\nfunction Autocomplete<T extends object = object>({\n  children,\n  filter,\n  ...props\n}: AutocompleteProps<T>) {\n  const { contains } = useFilter({ sensitivity: 'base' })\n\n  return (\n    <RACAutocomplete<T> filter={filter ?? containsFilter(contains)} {...props}>\n      {children}\n    </RACAutocomplete>\n  )\n}\n\n// React Aria's filter is handed the node as well as the two strings, which a\n// contains match has no use for. Built by a call rather than written inline\n// at the prop, which is what react-perf's no-new-function-as-prop is after;\n// the React Compiler memoises the result on its input.\nfunction containsFilter(\n  contains: (textValue: string, inputValue: string) => boolean,\n) {\n  return (textValue: string, inputValue: string) =>\n    contains(textValue, inputValue)\n}\n\nexport type { AutocompleteFilter, AutocompleteProps }\n\nexport default Autocomplete\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAiD,CAAA,CAAA,UAAA,QAAA,GAAA,SAAA;EAI1B,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,SAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EACU,KAAA,EAAA,aAAe,OAAO;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtD,MAAA,EAAA,aAAqB,UAAU,EAAuB;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA;EAGzB,KAAA,UAAU,eAAe,QAAQ;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,SAAA,EAAA,QAAA,IAAA;EAA9D,KAAA,oBAAC,cAAD;GAA4B,QAAA;GAAkC,GAAM;GACjE;EADa,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFlB;AAEkB;AAQtB,SAAS,eACP,UACA;CACA,QAAQ,WAAmB,eACzB,SAAS,WAAW,UAAU;AAClC"}

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

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+import { BreadcrumbProps, BreadcrumbsProps } from "react-aria-components";
+//#region src/components/breadcrumbs/index.d.ts
+type BreadcrumbsItemProps = Omit<BreadcrumbProps, 'children' | 'className' | 'style'> & {
+  /** The item's label. */
+  children?: ReactNode;
+  /** A function may compute the class from the item's render state. */
+  className?: BreadcrumbProps['className'];
+  /**
+   * Where the item leads. Leave it out on an item the page handles through
+   * the trail's `onAction`, and on the current one, which is never a link.
+   */
+  href?: string;
+  /** The link's `rel`. */
+  rel?: string;
+  /** A function may compute the style from the item's render state. */
+  style?: BreadcrumbProps['style'];
+  /** The link's `target`. */
+  target?: string;
+};
+type BreadcrumbsProps$1<T extends object = object> = Omit<BreadcrumbsProps<T>, 'children'> & {
+  /** The trail, as `Breadcrumbs.Item` entries. */
+  children?: ReactNode;
+};
+/**
+ * A trail of links back up a hierarchy, ending at the page you are on.
+ * React Aria makes the last item the current one and marks it
+ * `aria-current="page"`; everything before it is a link.
+ *
+ * ```tsx
+ * <Breadcrumbs aria-label="Label">
+ *   <Breadcrumbs.Item href="#first">First item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item href="#second">Second item</Breadcrumbs.Item>
+ *   <Breadcrumbs.Item>Third item</Breadcrumbs.Item>
+ * </Breadcrumbs>
+ * ```
+ *
+ * Name it with `aria-label` or `aria-labelledby`. A page that navigates
+ * without an `href` gives each item an `id` and the trail an `onAction`,
+ * which is React Aria's and reports the key that was pressed.
+ *
+ * The call site's `className` and `style` land on the list, which is the
+ * element a layout positions.
+ */
+declare function Breadcrumbs$1<T extends object = object>(props: BreadcrumbsProps$1<T>): import("react").JSX.Element;
+declare namespace Breadcrumbs$1 {
+  var Item: typeof BreadcrumbsItem;
+}
+/**
+ * One entry in the trail. Give it an `href` to navigate, or an `id` and let
+ * the trail's `onAction` handle it. The last entry is the current page and
+ * is drawn as text rather than a link, whatever it is given.
+ */
+declare function BreadcrumbsItem({ children, href, rel, target, ...props }: BreadcrumbsItemProps): import("react").JSX.Element;
+//#endregion
+export { type BreadcrumbsItemProps, type BreadcrumbsProps$1 as BreadcrumbsProps, Breadcrumbs$1 as default };
+//# sourceMappingURL=index.d.ts.map