@kanso-labs/kanso-ui 0.20.0 → 0.22.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-area/index.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from "react";
+import { ColorAreaProps } from "react-aria-components";
+//#region src/components/color-area/index.d.ts
+type ColorAreaProps$1 = Omit<ColorAreaProps, 'children' | 'className' | 'style'> & {
+  /**
+   * Lands on the square around the plane, which is the element a layout
+   * positions and the one that carries its size.
+   */
+  className?: string;
+  /** Lands on the square around the plane, as `className` does. */
+  style?: CSSProperties;
+};
+/**
+ * Two channels of a colour as a plane, with a handle where they meet. 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
+ * <ColorArea
+ *   defaultValue="hsl(200, 100%, 50%)"
+ *   xChannel="saturation"
+ *   yChannel="lightness"
+ * />
+ * ```
+ *
+ * **`xChannel` and `yChannel` have to name channels the value's own space
+ * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so
+ * naming one against it throws rather than converting — pass `colorSpace` to
+ * convert it, or give the value in the space you mean to work in. The same
+ * trap `ColorSlider` documents.
+ *
+ * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria
+ * quietly draws the saturation and lightness plane instead, so a plane that
+ * will not fade is the only sign anything was ignored.
+ *
+ * React Aria names the handle "Color picker" and announces both channels;
+ * pass `aria-label` to say what the plane is for instead.
+ *
+ * The call site's `className` and `style` land on the square around the
+ * plane rather than on the plane itself, so setting an `inlineSize` is what
+ * resizes one — and it stays square, since two channels sharing a box want
+ * equal travel. React Aria's function forms are not taken here for the same
+ * reason `ColorSwatch` does not take them: the element they would read
+ * state for is not the one a layout reaches.
+ */
+declare function ColorArea$1({ className, isDisabled, style, ...props }: ColorAreaProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorAreaProps$1 as ColorAreaProps, ColorArea$1 as default };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,63 @@
+import { mergeStyles } from "../../styles/merge.js";
+import { thumbClassName } from "../../styles/color.js";
+import { jsx } from "react/jsx-runtime";
+import { ColorArea, ColorThumb } from "react-aria-components";
+//#region src/components/color-area/index.tsx
+/**
+* Two channels of a colour as a plane, with a handle where they meet. 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
+* <ColorArea
+*   defaultValue="hsl(200, 100%, 50%)"
+*   xChannel="saturation"
+*   yChannel="lightness"
+* />
+* ```
+*
+* **`xChannel` and `yChannel` have to name channels the value's own space
+* has.** A hex or `rgb()` value parses as RGB, which has no saturation, so
+* naming one against it throws rather than converting — pass `colorSpace` to
+* convert it, or give the value in the space you mean to work in. The same
+* trap `ColorSlider` documents.
+*
+* **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria
+* quietly draws the saturation and lightness plane instead, so a plane that
+* will not fade is the only sign anything was ignored.
+*
+* React Aria names the handle "Color picker" and announces both channels;
+* pass `aria-label` to say what the plane is for instead.
+*
+* The call site's `className` and `style` land on the square around the
+* plane rather than on the plane itself, so setting an `inlineSize` is what
+* resizes one — and it stays square, since two channels sharing a box want
+* equal travel. React Aria's function forms are not taken here for the same
+* reason `ColorSwatch` does not take them: the element they would read
+* state for is not the one a layout reaches.
+*/
+function ColorArea$1({ className, isDisabled = false, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...mergeStyles({
+			0: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3" },
+			1: { className: "x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9" }
+		}[!!isDisabled << 0], {
+			className,
+			style
+		}),
+		children: /* @__PURE__ */ jsx(ColorArea, {
+			isDisabled,
+			...props,
+			...{
+				0: { className: "x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3" },
+				1: { className: "x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc" }
+			}[!!isDisabled << 0],
+			children: /* @__PURE__ */ jsx(ColorThumb, { className: thumbClassName })
+		})
+	});
+}
+//#endregion
+export { ColorArea$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-area/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorAreaProps as RACColorAreaProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorArea as RACColorArea, ColorThumb as RACColorThumb } from 'react-aria-components';\nimport { thumbClassName } from '../../styles/color';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Two channels of a colour at once, as a plane: one runs along the inline\n// axis and one along the block axis, and the handle sits where they meet.\n// React Aria paints both gradients on the plane's own inline `background`\n// and moves the handle in two axes, so what is here is the plane's shape and\n// the handle `ColorSlider` already draws, from `src/styles/color.ts`.\n//\n// The design carries no page for this, so the two choices below are the\n// library's own.\n//\n// **It is square, and takes the width it is given.** A plane has no natural\n// size, and a box that was not square would give its two channels unequal\n// travel — the same drag would move one further than the other, which is a\n// difference a reader cannot see and would feel as the control being wrong.\n//\n// **It carries no chequer, unlike a swatch or a colour slider's alpha\n// track.** Those two show the surface behind them where a colour thins out,\n// and a plane does not: React Aria stacks its gradients so the topmost is\n// opaque across the whole box, so nothing laid behind the plane is ever\n// seen. A chequer here was written first and then taken out, because it\n// could not be made to show under any pairing tried — including the RGB\n// alpha pairing whose gradient really does carry a `rgba(0, 0, 0, 0)` stop.\n//\n// **Alpha is a channel here only in RGB, and even there it does not thin\n// the plane.** Asked for it in HSL, React Aria draws the saturation and\n// lightness plane instead and says nothing — the gradients come out\n// identical to the pair it would have drawn anyway. It does not throw the\n// way an unknown channel does, so the only sign is a plane that will not\n// change, which is why it is written down here.\n\ntype ColorAreaProps = Omit<RACColorAreaProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Lands on the square around the plane, which is the element a layout\n   * positions and the one that carries its size.\n   */\n  className?: string;\n  /** Lands on the square around the plane, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * Two channels of a colour as a plane, with a handle where they meet. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,\n * which this package re-exports.\n *\n * ```tsx\n * <ColorArea\n *   defaultValue=\"hsl(200, 100%, 50%)\"\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n *\n * **`xChannel` and `yChannel` have to name channels the value's own space\n * has.** A hex or `rgb()` value parses as RGB, which has no saturation, so\n * naming one against it throws rather than converting — pass `colorSpace` to\n * convert it, or give the value in the space you mean to work in. The same\n * trap `ColorSlider` documents.\n *\n * **`alpha` is a channel here only in RGB.** Asked for it in HSL, React Aria\n * quietly draws the saturation and lightness plane instead, so a plane that\n * will not fade is the only sign anything was ignored.\n *\n * React Aria names the handle \"Color picker\" and announces both channels;\n * pass `aria-label` to say what the plane is for instead.\n *\n * The call site's `className` and `style` land on the square around the\n * plane rather than on the plane itself, so setting an `inlineSize` is what\n * resizes one — and it stays square, since two channels sharing a box want\n * equal travel. React Aria's function forms are not taken here for the same\n * reason `ColorSwatch` does not take them: the element they would read\n * state for is not the one a layout reaches.\n */\nfunction ColorArea({\n  className,\n  isDisabled = false,\n  style,\n  ...props\n}: ColorAreaProps) {\n  return <div {...mergeStyles({\n    0: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3\"\n    },\n    1: {\n      className: \"x1plog1 x1xdvaa9 x9f619 xh8yej3 x1ppv7y9\"\n    }\n  }[!!isDisabled << 0], {\n    className,\n    style\n  })}>\n      <RACColorArea isDisabled={isDisabled} {...props} {...{\n      0: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xsid9ct xh8yej3 x5ve5x3\"\n      },\n      1: {\n        className: \"x5yr21d x1xdvaa9 x9f619 xh8yej3 x5ve5x3 x1h6gzvc\"\n      }\n    }[!!isDisabled << 0]}>\n        <RACColorThumb className={thumbClassName} />\n      </RACColorArea>\n    </div>;\n}\nexport type { ColorAreaProps };\nexport default ColorArea;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,SAAS,YAAU,EACjB,WACA,aAAa,OACb,OACA,GAAG,SACc;CACjB,OAAO,oBAAC,OAAD;EAAK,GAAI,YAAY;GAC1B,GAAG,EACD,WAAW,kCACb;GACA,GAAG,EACD,WAAW,2CACb;EACF,EAAE,CAAC,CAAC,cAAc,IAAI;GACpB;GACA;EACF,CAAC;EACG,UAAA,oBAAC,WAAD;GAA0B;GAAY,GAAI;GAAO,GAAI;IACrD,GAAG,EACD,WAAW,kDACb;IACA,GAAG,EACD,WAAW,mDACb;GACF,EAAE,CAAC,CAAC,cAAc;GACd,UAAA,oBAAC,YAAD,EAAe,WAAW,eAAe,CAAA;EAC7B,CAAA;CACX,CAAA;AACT"}

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