@kanso-labs/kanso-ui 0.20.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/components/calendar/index.d.ts

@@ -0,0 +1,32 @@
+import { CalendarProps, DateValue } from "react-aria-components";
+//#region src/components/calendar/index.d.ts
+type CalendarProps$1<T extends DateValue> = Omit<CalendarProps<T>, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the calendar's render state. */
+  className?: CalendarProps<T>['className'];
+  /** A function may compute the style from the calendar's render state. */
+  style?: CalendarProps<T>['style'];
+};
+/**
+ * A month calendar for picking a date. The value is React Aria's: pass
+ * `value` with `onChange` to control it, or `defaultValue` to let it keep its
+ * own, both as an `@internationalized/date` value from this package's
+ * `./date` subpath.
+ *
+ * ```tsx
+ * import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'
+ *
+ * <Calendar aria-label="Label" defaultValue={today(getLocalTimeZone())} />
+ * ```
+ *
+ * `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.
+ *
+ * The call site's `className` and `style` land on the container, which is the
+ * element a layout positions.
+ */
+declare function Calendar$1<T extends DateValue>(props: CalendarProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type CalendarProps$1 as CalendarProps, Calendar$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.js

@@ -0,0 +1,97 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { calendarStyles } from "../../calendar/styles.js";
+import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
+import { monthOffsets } from "../../calendar/months.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Calendar, CalendarCell, CalendarGrid, CalendarGridBody } from "react-aria-components";
+//#region src/components/calendar/index.tsx
+/**
+* A month calendar for picking a date. The value is React Aria's: pass
+* `value` with `onChange` to control it, or `defaultValue` to let it keep its
+* own, both as an `@internationalized/date` value from this package's
+* `./date` subpath.
+*
+* ```tsx
+* import { today, getLocalTimeZone } from '@kanso-labs/kanso-ui/date'
+*
+* <Calendar aria-label="Label" defaultValue={today(getLocalTimeZone())} />
+* ```
+*
+* `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.
+*
+* The call site's `className` and `style` land on the container, which is the
+* element a layout positions.
+*/
+function Calendar$1(props$1) {
+	const $ = c(12);
+	let t0;
+	if ($[0] !== props$1) {
+		t0 = mergeStatefulStyles(props(calendarStyles.root), props$1);
+		$[0] = props$1;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CalendarHeader, {});
+		t2 = props(calendarStyles.months);
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== props$1.visibleDuration?.months) {
+		t3 = monthOffsets(props$1.visibleDuration?.months ?? 1).map(_temp);
+		$[4] = props$1.visibleDuration?.months;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			...t2,
+			children: t3
+		});
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== props$1 || $[9] !== t0 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Calendar, {
+			...props$1,
+			...t0,
+			children: [t1, t4]
+		});
+		$[8] = props$1;
+		$[9] = t0;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp(offset) {
+	return /* @__PURE__ */ jsxs(CalendarGrid, {
+		offset,
+		...props(calendarStyles.grid),
+		children: [/* @__PURE__ */ jsx(CalendarGridHeader$1, {}), /* @__PURE__ */ jsx(CalendarGridBody, { children: gridCell })]
+	}, offset.months);
+}
+function cellClassName(state) {
+	return props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+}
+function gridCell(date) {
+	return /* @__PURE__ */ jsx(CalendarCell, {
+		className: cellClassName,
+		date
+	});
+}
+//#endregion
+export { Calendar$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["offset","gridCell"],"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,SAAA,WAAA,SAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACwC,KAAA,oBAAoB,MAAa,eAAc,IAAK,GAAG,OAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC/F,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACN,KAAA,MAAa,eAAc,MAAO;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA,iBAAA,QAAA;EACzC,KAAA,aAAa,QAAK,iBAAwB,UAA7B,CAAkC,CAAC,CAAA,IAAK,KAGlC;EAAC,EAAA,KAAA,QAAA,iBAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAJvB,KAAA,oBAAA,OAAA;GAKM,GALG;GACN,UAAA;EAIG,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,WAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAPH,KAAA,qBAAC,UAAD;GAAY,GAAQ;GAAK,GAAM;GAA/B,UAAA,CACH,IACA,EAFe;;EAQH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OART;AAQS;AATlB,SAAA,MAAA,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6C;EAAM,GAAM,MAAa,eAAc,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsB,SAAF,CAAA,CAFwD;CAAM,GAAA,OAAM,MAAZ;AAG5D;AAa5B,SAAS,cAAc,OAIpB;CACD,OAAO,MAAa,eAAe,MAAM,MAAM,WAAW,eAAe,WAAW,MAAM,cAAc,eAAe,cAAc,MAAM,cAAc,eAAe,YAAY,CAAC,CAAC,aAAa;AACrM;AACA,SAAS,SAAS,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAW;EAAqB;CAAK,CAAA;AAC/D"}

package/dist/components/color-slider/index.d.ts

@@ -0,0 +1,41 @@
+import { ColorSliderProps } from "react-aria-components";
+//#region src/components/color-slider/index.d.ts
+type ColorSliderProps$1 = Omit<ColorSliderProps, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the slider's render state. */
+  className?: ColorSliderProps['className'];
+  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */
+  label?: string;
+  /**
+   * Whether the value React Aria announces is also shown, at the end of the
+   * label's line.
+   * @default true
+   */
+  showValue?: boolean;
+  /** A function may compute the style from the slider's render state. */
+  style?: ColorSliderProps['style'];
+};
+/**
+ * A slider over one channel of a colour — hue, saturation, lightness, alpha
+ * and the rest. The value is React Aria's: pass `value` with `onChange` to
+ * control it, or `defaultValue`, as a CSS colour string or a `Color` from
+ * `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * <ColorSlider channel="hue" defaultValue="hsl(200, 100%, 50%)" label="Label" />
+ * ```
+ *
+ * **`channel` has to name a channel the value's own space has.** A hex or
+ * `rgb()` value parses as RGB, which has no hue, so `channel="hue"` against
+ * one throws rather than converting — pass `colorSpace="hsl"` to convert it,
+ * or give the value in the space you mean to slide.
+ *
+ * React Aria paints the gradient and names the value — "200°, cyan blue" —
+ * so the readout beside the label is what it announces.
+ *
+ * The call site's `className` and `style` land on the slider as a whole,
+ * which is the element a layout positions.
+ */
+declare function ColorSlider$1({ isDisabled, label, showValue, ...props }: ColorSliderProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorSliderProps$1 as ColorSliderProps, ColorSlider$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-slider/index.js

@@ -0,0 +1,81 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { FieldLabel } from "../../field/index.js";
+import { chequer } from "../../styles/chequer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ColorSlider, ColorThumb, SliderOutput, SliderTrack } from "react-aria-components";
+//#region src/components/color-slider/index.tsx
+const styles = {
+	trackGround: {
+		kZKoxP: "xlup9mm",
+		kaIpWk: "x1xdvaa9",
+		kB7OPa: "x9f619",
+		kzqmXN: "xh8yej3",
+		kqGvvJ: "x2k5q2m",
+		$$css: true
+	},
+	trackGroundDisabled: {
+		kSiTet: "x1ppv7y9",
+		$$css: true
+	}
+};
+/**
+* A slider over one channel of a colour — hue, saturation, lightness, alpha
+* and the rest. The value is React Aria's: pass `value` with `onChange` to
+* control it, or `defaultValue`, as a CSS colour string or a `Color` from
+* `parseColor`, which this package re-exports.
+*
+* ```tsx
+* <ColorSlider channel="hue" defaultValue="hsl(200, 100%, 50%)" label="Label" />
+* ```
+*
+* **`channel` has to name a channel the value's own space has.** A hex or
+* `rgb()` value parses as RGB, which has no hue, so `channel="hue"` against
+* one throws rather than converting — pass `colorSpace="hsl"` to convert it,
+* or give the value in the space you mean to slide.
+*
+* React Aria paints the gradient and names the value — "200°, cyan blue" —
+* so the readout beside the label is what it announces.
+*
+* The call site's `className` and `style` land on the slider as a whole,
+* which is the element a layout positions.
+*/
+function ColorSlider$1({ isDisabled = false, label, showValue = true, ...props$1 }) {
+	return /* @__PURE__ */ jsxs(ColorSlider, {
+		isDisabled,
+		...props$1,
+		...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3" }, props$1),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "x1pha0wt x78zum5 x126z3so",
+			children: [label === void 0 ? null : /* @__PURE__ */ jsx(FieldLabel, {
+				className: "xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4",
+				children: label
+			}), showValue ? /* @__PURE__ */ jsx(SliderOutput, { className: "x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky" }) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			...props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled),
+			children: /* @__PURE__ */ jsx(SliderTrack, {
+				...{
+					0: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6" },
+					1: { className: "x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc" }
+				}[!!isDisabled << 0],
+				children: /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })
+			})
+		})]
+	});
+}
+function thumbClassName(state) {
+	return {
+		0: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7" },
+		4: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59" },
+		2: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s" },
+		6: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s" },
+		1: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc" },
+		5: { className: "x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc" },
+		3: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc" },
+		7: { className: "x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc" }
+	}[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? "";
+}
+//#endregion
+export { ColorSlider$1 as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ColorThumbRenderProps, ColorSliderProps as RACColorSliderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSlider as RACColorSlider, ColorThumb as RACColorThumb, SliderOutput as RACSliderOutput, SliderTrack as RACSliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { chequer } from '../../styles/chequer';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page's track, carrying one channel of a colour instead of an\n// active and an inactive part: the page's 16dp strip with its 8dp corner,\n// centred in the 44dp a handle takes, and the same label-large label above\n// it. React Aria paints the gradient itself, on the track's own inline\n// `background`, so what runs along the strip is the channel rather than\n// anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.**\n// The page's handle is a mark on a track whose colour it already knows; this\n// one has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It keeps the page's 44dp of height as the target it is\n// centred in.\n//\n// **The handle is ringed rather than filled with primary.** Its fill is the\n// value, so the ring is what has to read against it — and against every\n// other colour the track runs through. It is a surface-coloured ring with a\n// hairline outside it, which reads on a light track and a dark one alike.\n//\n// **There is no stop at the inactive end.** The page puts one 6dp from the\n// end of the inactive part; a channel has no inactive part, so there is no\n// end for it to mark.\n//\n// The alpha channel is the one that needs a chequer, for the reason\n// `src/styles/chequer.ts` gives: a track fading to transparent over a light\n// surface and one fading to white are the same pixels without it.\n\nconst styles = {\n  trackGround: {\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"xh8yej3\",\n    kqGvvJ: \"x2k5q2m\",\n    $$css: true\n  },\n  trackGroundDisabled: {\n    kSiTet: \"x1ppv7y9\",\n    $$css: true\n  }\n};\ntype ColorSliderProps = Omit<RACColorSliderProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the slider's render state. */\n  className?: RACColorSliderProps['className'];\n  /** What the slider is for. Always rendered; React Aria names the channel otherwise. */\n  label?: string;\n  /**\n   * Whether the value React Aria announces is also shown, at the end of the\n   * label's line.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the slider's render state. */\n  style?: RACColorSliderProps['style'];\n};\n\n/**\n * A slider over one channel of a colour — hue, saturation, lightness, alpha\n * and the rest. The value is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value parses as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting — pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * React Aria paints the gradient and names the value — \"200°, cyan blue\" —\n * so the readout beside the label is what it announces.\n *\n * The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions.\n */\nfunction ColorSlider({\n  isDisabled = false,\n  label,\n  showValue = true,\n  ...props\n}: ColorSliderProps) {\n  return <RACColorSlider isDisabled={isDisabled} {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf xzoy561 xh8yej3\"\n  }, props)}>\n      <div className=\"x1pha0wt x78zum5 x126z3so\">\n        {label === undefined ? null : <FieldLabel className=\"xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4\">{label}</FieldLabel>}\n        {showValue ? <RACSliderOutput className=\"x1w5n3ug x1yicsit x1b35g6e xwth0xh xybisxh xvc5jky\" /> : null}\n      </div>\n      <div {...stylex.props(chequer.ground, styles.trackGround, isDisabled && styles.trackGroundDisabled)}>\n        <RACSliderTrack {...{\n        0: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n        },\n        1: {\n          className: \"x1cpjm7i x1mtdikz xm4btww x1hmns74 x5yr21d x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n        }\n      }[!!isDisabled << 0]}>\n          <RACColorThumb className={thumbClassName} />\n        </RACSliderTrack>\n      </div>\n    </RACColorSlider>;\n}\n\n// The handle's classes, from React Aria's render state. StyleX cannot target\n// `[data-dragging]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// `dragging` is applied after `focused`, and StyleX replaces a property\n// whole, so a handle being dragged takes the lifted shadow rather than\n// keeping the resting ring under it.\nfunction thumbClassName(state: ColorThumbRenderProps) {\n  return {\n    0: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7\"\n    },\n    4: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 x1jm3nie xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59\"\n    },\n    2: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut xi9pz9s\"\n    },\n    6: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut xi9pz9s\"\n    },\n    1: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1h6gzvc\"\n    },\n    5: {\n      className: \"x1qx5ct2 x3y1ksm xlzcsym x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1t137rt x1de99jn x1qno0dh xkdsq27 xpc4ca7 x1kr41ut x1h6gzvc\"\n    },\n    7: {\n      className: \"x1qx5ct2 x3y1ksm x9f619 xw4jnvo xwa60dl xrgy624 x2wh2y9 x1de99jn x1qno0dh xkdsq27 xpc4ca7 xaatb59 x1kr41ut x1h6gzvc\"\n    }\n  }[!!state.isFocusVisible << 2 | !!state.isDragging << 1 | !!state.isDisabled << 0].className ?? '';\n}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":";;;;;;;AAsCA,MAAM,SAAS;CACb,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAS,cAAY,EACnB,aAAa,OACb,OACA,YAAY,MACZ,GAAG,WACgB;CACnB,OAAO,qBAAC,aAAD;EAA4B;EAAY,GAAI;EAAO,GAAI,oBAAoB,EAChF,WAAW,yCACb,GAAG,OAAK;EAFD,UAAA,CAGH,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACG,UAAU,KAAA,IAAY,OAAO,oBAAC,YAAD;IAAY,WAAU;IAA+C,UAAA;GAAkB,CAAA,GACpH,YAAY,oBAAC,cAAD,EAAiB,WAAU,qDAAoD,CAAA,IAAM,IAC/F;EACL,CAAA,GAAA,oBAAC,OAAD;GAAK,GAAI,MAAa,QAAQ,QAAQ,OAAO,aAAa,cAAc,OAAO,mBAAmB;GAChG,UAAA,oBAAC,aAAD;IAAgB,GAAI;KACpB,GAAG,EACD,WAAW,8EACb;KACA,GAAG,EACD,WAAW,8EACb;IACF,EAAE,CAAC,CAAC,cAAc;IACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;GAC3B,CAAA;EACb,CAAA,CACS;;AACpB;AASA,SAAS,eAAe,OAA8B;CACpD,OAAO;EACL,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,sHACb;EACA,GAAG,EACD,WAAW,qHACb;EACA,GAAG,EACD,WAAW,uHACb;EACA,GAAG,EACD,WAAW,sHACb;CACF,EAAE,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG"}

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1,37 @@
+import { CSSProperties } from "react";
+import { ColorSwatchProps } from "react-aria-components";
+//#region src/components/color-swatch/index.d.ts
+type ColorSwatchProps$1 = Omit<ColorSwatchProps, 'className' | 'style'> & {
+  /**
+   * Lands on the square around the swatch, which is the element a layout
+   * positions and the one that carries its size.
+   */
+  className?: string;
+  /** Lands on the square around the swatch, as `className` does. */
+  style?: CSSProperties;
+};
+/**
+ * A colour shown as a value: a square of it, with a chequer behind so
+ * transparency reads as transparency. The colour is React Aria's — a CSS
+ * string, or a `Color` from `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * import { parseColor } from '@kanso-labs/kanso-ui'
+ *
+ * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />
+ * ```
+ *
+ * React Aria names it from the colour itself — "light vibrant cyan blue, 60%
+ * transparent" — so it needs no label. Pass `colorName` to say something
+ * else instead.
+ *
+ * The call site's `className` and `style` land on the square around the
+ * swatch rather than on the swatch itself, which is what makes setting a
+ * size from outside work — the colour fills whatever square it is given.
+ * React Aria's function forms are not taken here, since a swatch has no
+ * interactive state for one to read.
+ */
+declare function ColorSwatch$1({ className, style, ...props }: ColorSwatchProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorSwatchProps$1 as ColorSwatchProps, ColorSwatch$1 as default };
+//# sourceMappingURL=index.d.ts.map