@kanso-labs/kanso-ui 0.20.0 → 0.22.0

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

@@ -0,0 +1,70 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { FieldLabel } from "../../field/index.js";
+import { thumbClassName } from "../../styles/color.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 })
+			})
+		})]
+	});
+}
+//#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 { 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 { thumbClassName } from '../../styles/color';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, 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}\nexport type { ColorSliderProps };\nexport default ColorSlider;"],"mappings":";;;;;;;;AAuCA,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"}

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

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

@@ -0,0 +1,88 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { chequer } from "../../styles/chequer.js";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { ColorSwatch } from "react-aria-components";
+//#region src/components/color-swatch/index.tsx
+const styles = { ground: {
+	kZKoxP: "x1vqgdyp",
+	kaIpWk: "x1tfhd1",
+	kB7OPa: "x9f619",
+	k1xSpc: "x1rg5ohu",
+	kzqmXN: "x100vrsf",
+	kVQacm: "xb3r6kr",
+	$$css: true
+} };
+/**
+* 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.
+*/
+function ColorSwatch$1(t0) {
+	const $ = c(12);
+	let className;
+	let props$1;
+	let style;
+	if ($[0] !== t0) {
+		({className, style, ...props$1} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props$1;
+		$[3] = style;
+	} else {
+		className = $[1];
+		props$1 = $[2];
+		style = $[3];
+	}
+	let t1;
+	if ($[4] !== className || $[5] !== style) {
+		t1 = mergeStyles(props(chequer.ground, styles.ground), {
+			className,
+			style
+		});
+		$[4] = className;
+		$[5] = style;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props$1) {
+		t2 = /* @__PURE__ */ jsx(ColorSwatch, {
+			...props$1,
+			className: "x5yr21d x1tfhd1 xbd69nm x9f619 x1lliihq xh8yej3"
+		});
+		$[7] = props$1;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			...t1,
+			children: t2
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+//#endregion
+export { ColorSwatch$1 as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/color-swatch/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { ColorSwatchProps as RACColorSwatchProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatch as RACColorSwatch } from 'react-aria-components';\nimport { chequer } from '../../styles/chequer';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii } from '../../tokens/design.tokens.stylex';\n\n// A single colour, drawn as a square. The design carries no page for this —\n// its colour guidance is about the roles a component takes, not about\n// showing a colour as a value — so the shape here is the library's own,\n// built from what the rest of it already uses.\n//\n// Three things follow from that, and each is a choice rather than a reading.\n//\n// **A swatch is outlined.** Its own colour is the content, so it cannot\n// carry a contrasting one — and a white swatch on a light surface, or a\n// near-black one in dark mode, would otherwise have no edge at all. The\n// outline is the same hairline a field's box takes.\n//\n// **Transparency is drawn against a chequer rather than against the page.**\n// A half-transparent red over a white surface and an opaque pink are the\n// same pixels; the chequer is what tells them apart. It is built from two\n// surface tokens, so it follows the theme rather than being a fixed grey.\n//\n// **The chequer is a layer behind the swatch, not a background on it.**\n// React Aria sets the colour through the element's own inline\n// `background-color`, and CSS paints a background image over a background\n// colour rather than under it — so a chequer on the same element would\n// cover the colour it is there to reveal.\n\nconst SQUARE = '40px';\nconst styles = {\n  ground: {\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1rg5ohu\",\n    kzqmXN: \"x100vrsf\",\n    kVQacm: \"xb3r6kr\",\n    $$css: true\n  }\n};\ntype ColorSwatchProps = Omit<RACColorSwatchProps, 'className' | 'style'> & {\n  /**\n   * Lands on the square around the swatch, 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 swatch, as `className` does. */\n  style?: CSSProperties;\n};\n\n/**\n * A colour shown as a value: a square of it, with a chequer behind so\n * transparency reads as transparency. The colour is React Aria's — a CSS\n * string, or a `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * import { parseColor } from '@kanso-labs/kanso-ui'\n *\n * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />\n * ```\n *\n * React Aria names it from the colour itself — \"light vibrant cyan blue, 60%\n * transparent\" — so it needs no label. Pass `colorName` to say something\n * else instead.\n *\n * The call site's `className` and `style` land on the square around the\n * swatch rather than on the swatch itself, which is what makes setting a\n * size from outside work — the colour fills whatever square it is given.\n * React Aria's function forms are not taken here, since a swatch has no\n * interactive state for one to read.\n */\nfunction ColorSwatch({\n  className,\n  style,\n  ...props\n}: ColorSwatchProps) {\n  return <span {...mergeStyles(stylex.props(chequer.ground, styles.ground), {\n    className,\n    style\n  })}>\n      <RACColorSwatch {...props} className=\"x5yr21d x1tfhd1 xbd69nm x9f619 x1lliihq xh8yej3\" />\n    </span>;\n}\nexport type { ColorSwatchProps };\nexport default ColorSwatch;"],"mappings":";;;;;;;AAiCA,MAAM,SAAS,EACb,QAAQ;CACN,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAA,cAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,CAAA,CAAA,WAAA,OAAA,GAAA,WAAA;EAIF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,YAAA,EAAA;EAAA,UAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,aAAA,EAAA,OAAA,OAAA;EACA,KAAA,YAAY,MAAa,QAAO,QAAS,OAAM,MAAO,GAAG;GAAA;GAAA;EAG1E,CAAC;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACE,KAAA,oBAAC,aAAD;GAAe,GAAK;GAAiB,WAAA;EAAiD,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAJtF,KAAA,oBAAA,QAAA;GAKE,GALQ;GAIb,UAAA;EACK,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OALF;AAKE"}

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

@@ -0,0 +1,49 @@
+import { ReactNode } from "react";
+import { ColorSwatchPickerItemProps, ColorSwatchPickerProps } from "react-aria-components";
+//#region src/components/color-swatch-picker/index.d.ts
+type ColorSwatchPickerItemProps$1 = Omit<ColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {
+  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */
+  children?: ReactNode;
+  /** A function may compute the class from the item's render state. */
+  className?: ColorSwatchPickerItemProps['className'];
+  /** A function may compute the style from the item's render state. */
+  style?: ColorSwatchPickerItemProps['style'];
+};
+type ColorSwatchPickerProps$1 = Omit<ColorSwatchPickerProps, 'className' | 'style'> & {
+  /** A function may compute the class from the picker's render state. */
+  className?: ColorSwatchPickerProps['className'];
+  /** A function may compute the style from the picker's render state. */
+  style?: ColorSwatchPickerProps['style'];
+};
+/**
+ * A row of colours to choose one from, drawn as swatches. 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
+ * <ColorSwatchPicker defaultValue="#6750A4">
+ *   <ColorSwatchPicker.Item color="#6750A4" />
+ *   <ColorSwatchPicker.Item color="#625B71" />
+ * </ColorSwatchPicker>
+ * ```
+ *
+ * It is a listbox, so arrow keys move between colours and the chosen one
+ * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria
+ * calls it "Color swatches" otherwise.
+ *
+ * The call site's `className` and `style` land on the picker, which is the
+ * element a layout positions.
+ */
+declare function ColorSwatchPicker$1(props: ColorSwatchPickerProps$1): import("react").JSX.Element;
+declare namespace ColorSwatchPicker$1 {
+  var Item: typeof ColorSwatchPickerItem$1;
+}
+/**
+ * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its
+ * own `color` unless given different children.
+ */
+declare function ColorSwatchPickerItem$1({ children, ...props }: ColorSwatchPickerItemProps$1): import("react").JSX.Element;
+//#endregion
+export { type ColorSwatchPickerItemProps$1 as ColorSwatchPickerItemProps, type ColorSwatchPickerProps$1 as ColorSwatchPickerProps, ColorSwatchPicker$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-swatch-picker/index.js

@@ -0,0 +1,99 @@
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import ColorSwatch$1 from "../color-swatch/index.js";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { ColorSwatchPicker, ColorSwatchPickerItem } from "react-aria-components";
+//#region src/components/color-swatch-picker/index.tsx
+/**
+* A row of colours to choose one from, drawn as swatches. 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
+* <ColorSwatchPicker defaultValue="#6750A4">
+*   <ColorSwatchPicker.Item color="#6750A4" />
+*   <ColorSwatchPicker.Item color="#625B71" />
+* </ColorSwatchPicker>
+* ```
+*
+* It is a listbox, so arrow keys move between colours and the chosen one
+* carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria
+* calls it "Color swatches" otherwise.
+*
+* The call site's `className` and `style` land on the picker, which is the
+* element a layout positions.
+*/
+function ColorSwatchPicker$1(props) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = mergeStatefulStyles({ className: "x9f619 x78zum5 x1a02dak x126z3so x1t137rt" }, props);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ColorSwatchPicker, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+/**
+* One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its
+* own `color` unless given different children.
+*/
+function ColorSwatchPickerItem$1(t0) {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== children) {
+		t1 = children ?? /* @__PURE__ */ jsx(ColorSwatch$1, {});
+		$[3] = children;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ColorSwatchPickerItem, {
+			...props,
+			className: itemClassName,
+			children: t1
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function itemClassName(state) {
+	return {
+		0: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn" },
+		4: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59" },
+		2: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59" },
+		6: { className: "x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59" },
+		1: { className: "x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9" },
+		5: { className: "x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9" },
+		3: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" },
+		7: { className: "x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9" }
+	}[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? "";
+}
+ColorSwatchPicker$1.Item = ColorSwatchPickerItem$1;
+//#endregion
+export { ColorSwatchPicker$1 as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-swatch-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["itemClassName"],"sources":["../../../src/components/color-swatch-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorSwatchPickerItemProps as RACColorSwatchPickerItemProps, ColorSwatchPickerProps as RACColorSwatchPickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorSwatchPicker as RACColorSwatchPicker, ColorSwatchPickerItem as RACColorSwatchPickerItem } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ColorSwatch from '../color-swatch';\n\n// A row of colours to choose one from. React Aria makes it a listbox of\n// swatches, so it is a selection control rather than a palette: arrow keys\n// move between colours and one of them is selected.\n//\n// The design carries no page for this either, so what an item looks like\n// when it is chosen is the library's own. Three choices, each with its\n// reason.\n//\n// **Selection is a ring around the swatch, not a mark on it.** A tick drawn\n// over a colour has to be readable against every colour in the row, which no\n// single ink is; a ring sits outside the swatch and needs only to read\n// against the surface behind it.\n//\n// **The ring is the primary role, and offset.** It is the same weight and\n// colour the focus ring takes elsewhere, one step out from the swatch so the\n// colour stays whole — a ring drawn on the swatch would eat two pixels of\n// the thing being chosen.\n//\n// **Focus and selection are drawn at different offsets.** A focused\n// selected swatch would otherwise paint one ring over the other and lose\n// whichever came second, so the focus ring sits outside the selection one.\n\ntype ColorSwatchPickerItemProps = Omit<RACColorSwatchPickerItemProps, 'children' | 'className' | 'style'> & {\n  /** What the item draws. A `ColorSwatch` with no `color` of its own by default. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACColorSwatchPickerItemProps['className'];\n  /** A function may compute the style from the item's render state. */\n  style?: RACColorSwatchPickerItemProps['style'];\n};\ntype ColorSwatchPickerProps = Omit<RACColorSwatchPickerProps, 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACColorSwatchPickerProps['className'];\n  /** A function may compute the style from the picker's render state. */\n  style?: RACColorSwatchPickerProps['style'];\n};\n\n/**\n * A row of colours to choose one from, drawn as swatches. The value is React\n * Aria's — pass `value` with `onChange` to control it, or `defaultValue` —\n * as a CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorSwatchPicker defaultValue=\"#6750A4\">\n *   <ColorSwatchPicker.Item color=\"#6750A4\" />\n *   <ColorSwatchPicker.Item color=\"#625B71\" />\n * </ColorSwatchPicker>\n * ```\n *\n * It is a listbox, so arrow keys move between colours and the chosen one\n * carries a ring. Name it with `aria-label` or `aria-labelledby`; React Aria\n * calls it \"Color swatches\" otherwise.\n *\n * The call site's `className` and `style` land on the picker, which is the\n * element a layout positions.\n */\nfunction ColorSwatchPicker(props: ColorSwatchPickerProps) {\n  return <RACColorSwatchPicker {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\"\n  }, props)} />;\n}\n\n/**\n * One swatch in a {@link ColorSwatchPicker}. Renders a `ColorSwatch` of its\n * own `color` unless given different children.\n */\nfunction ColorSwatchPickerItem({\n  children,\n  ...props\n}: ColorSwatchPickerItemProps) {\n  return <RACColorSwatchPickerItem {...props} className={itemClassName}>\n      {children ?? <ColorSwatch />}\n    </RACColorSwatchPickerItem>;\n}\n\n// The item'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. `focused` is applied after `selected`, and StyleX\n// replaces a property whole, so a swatch that is both takes the focus ring's\n// outer offset — which is what keeps the two rings from landing on each\n// other. `disabled` is last, so it takes the cursor with it.\nfunction itemClassName(state: {\n  isDisabled: boolean;\n  isFocusVisible: boolean;\n  isSelected: boolean;\n}) {\n  return {\n    0: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn\"\n    },\n    4: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59\"\n    },\n    2: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    6: {\n      className: \"x1tfhd1 x9f619 x1ypdohk x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59\"\n    },\n    1: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1hl8ikr x1t137rt x1de99jn xt0e3qv x1ppv7y9\"\n    },\n    5: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 xrgy624 x1de99jn x1hl8ikr xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    3: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    },\n    7: {\n      className: \"x1tfhd1 x9f619 x3nfvp2 x1de99jn xrgy624 x8wkva7 xaatb59 xt0e3qv x1ppv7y9\"\n    }\n  }[!!state.isSelected << 2 | !!state.isFocusVisible << 1 | !!state.isDisabled << 0].className ?? '';\n}\nColorSwatchPicker.Item = ColorSwatchPickerItem;\nexport type { ColorSwatchPickerItemProps, ColorSwatchPickerProps };\nexport default ColorSwatchPicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAA,oBAAA,OAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAC8C,KAAA,oBAAoB,EAAA,WACnD,4CACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EAFF,KAAA,oBAAC,mBAAD;GAAqB,GAAK;GAAK,GAAM;EAEnC,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFN;AAEM;;;;;AAOf,SAAA,wBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAA+B,CAAA,CAAA,UAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,WAAA,EAAA;EAAA,QAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA;EAEtB,KAAA,YAAY,oBAAC,eAAD,CAAY,CAAA;EAAG,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA,EAAA,OAAA,IAAA;EADzB,KAAA,oBAAC,uBAAD;GAAyB,GAAK;GAAkBA,WAAA;GAClD,UAAA;EAD2B,CAAA;EAEH,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAFtB;AAEsB;AAW/B,SAAS,cAAc,OAIpB;CACD,OAAO;EACL,GAAG,EACD,WAAW,qEACb;EACA,GAAG,EACD,WAAW,oEACb;EACA,GAAG,EACD,WAAW,mEACb;EACA,GAAG,EACD,WAAW,mEACb;EACA,GAAG,EACD,WAAW,6EACb;EACA,GAAG,EACD,WAAW,4EACb;EACA,GAAG,EACD,WAAW,2EACb;EACA,GAAG,EACD,WAAW,2EACb;CACF,EAAE,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,kBAAkB,IAAI,CAAC,CAAC,MAAM,cAAc,EAAE,CAAC,aAAa;AAClG;AACA,oBAAkB,OAAO"}

package/dist/components/date-field/index.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { DateFieldProps, DateValue } from "react-aria-components";
+//#region src/components/date-field/index.d.ts
+type DateFieldProps$1<T extends DateValue> = Omit<DateFieldProps<T>, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the field's render state. */
+  className?: DateFieldProps<T>['className'];
+  /** Supporting text under the field. */
+  description?: string;
+  /** The message shown instead of the description, which also marks the field invalid. */
+  error?: string;
+  /**
+   * Whether the label floats into the box's top once the field holds a
+   * value, rather than sitting above it.
+   * @default true
+   */
+  floatingLabel?: boolean;
+  /** What the field is for. Always rendered; never a placeholder. */
+  label: string;
+  /** An icon at the box's leading end. */
+  leadingIcon?: ReactNode;
+  /** A function may compute the style from the field's render state. */
+  style?: DateFieldProps<T>['style'];
+  /** An icon at the box's trailing end. */
+  trailingIcon?: ReactNode;
+  /**
+   * Which of the text fields page's two boxes to draw.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+/**
+ * A date typed rather than picked: one segment per part, each its own focus
+ * stop. The value is React Aria's — pass `value` with `onChange` to control
+ * it, or `defaultValue` — as an `@internationalized/date` value from this
+ * package's `./date` subpath.
+ *
+ * ```tsx
+ * import { CalendarDate } from '@kanso-labs/kanso-ui/date'
+ *
+ * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+ * ```
+ *
+ * How many segments there are and what order they come in is the reader's
+ * locale, through React Aria's `I18nProvider` — `granularity` adds time
+ * segments, and `minValue` and `maxValue` bound what may be typed.
+ *
+ * The box, label and message are the field chrome in `src/field`, shared
+ * with every other field. The call site's `className` and `style` land on
+ * the field as a whole, which is the element a layout positions.
+ */
+declare function DateField$1<T extends DateValue>({ description, error, floatingLabel, isDisabled, label, leadingIcon, trailingIcon, variant, ...props }: DateFieldProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type DateFieldProps$1 as DateFieldProps, DateField$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/date-field/index.js

@@ -0,0 +1,58 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { segmentStyles } from "../../segments/styles.js";
+import { renderSegment } from "../../segments/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateField, DateInput } from "react-aria-components";
+//#region src/components/date-field/index.tsx
+/**
+* A date typed rather than picked: one segment per part, each its own focus
+* stop. The value is React Aria's — pass `value` with `onChange` to control
+* it, or `defaultValue` — as an `@internationalized/date` value from this
+* package's `./date` subpath.
+*
+* ```tsx
+* import { CalendarDate } from '@kanso-labs/kanso-ui/date'
+*
+* <DateField defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+* ```
+*
+* How many segments there are and what order they come in is the reader's
+* locale, through React Aria's `I18nProvider` — `granularity` adds time
+* segments, and `minValue` and `maxValue` bound what may be typed.
+*
+* The box, label and message are the field chrome in `src/field`, shared
+* with every other field. The call site's `className` and `style` land on
+* the field as a whole, which is the element a layout positions.
+*/
+function DateField$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, trailingIcon, variant = "filled", ...props$1 }) {
+	const validationBehavior = useFieldValidationBehavior();
+	return /* @__PURE__ */ jsxs(DateField, {
+		isDisabled,
+		isInvalid: invalidFrom(error),
+		validationBehavior,
+		...props$1,
+		...mergeStatefulStyles(props(fieldStyles.root), props$1),
+		children: [/* @__PURE__ */ jsx(FieldBox, {
+			floatingLabel,
+			isPopulated: true,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
+				...props(segmentStyles.input),
+				children: renderSegment
+			}) })
+		}), /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error
+		})]
+	});
+}
+//#endregion
+export { DateField$1 as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/date-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateFieldProps as RACDateFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateField as RACDateField, DateInput as RACDateInput } from 'react-aria-components';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A date typed a segment at a time, rather than picked from a calendar. The\n// box, label and message are the field chrome in `src/field`, shared with\n// every other field, so a date field on a form is the same box as the text\n// field beside it — which is what the date pickers page means by a date in a\n// text field.\n//\n// Three things are this component's own.\n//\n// **Each segment is its own focus stop, and React Aria decides how many.**\n// The order and the count come from the locale rather than from here: a\n// reader under `I18nProvider` with a British locale gets day before month,\n// and `granularity` of `minute` adds two more. So the segments are rendered\n// from what React Aria hands the input, never written out.\n//\n// **A segment not yet filled is muted, and the field still counts as\n// empty.** The placeholder text is the segment's own — `mm`, `dd`, `yyyy` —\n// and it takes the muted role so a half-typed date reads as half-typed. The\n// floating label stays down until a segment holds a real value.\n//\n// **A focused segment is a filled shape rather than a ring.** A caret cannot\n// show which of three spinbuttons has focus, since React Aria hides it — the\n// segment is what has to say so, and it does it the way a selected row does.\n\ntype DateFieldProps<T extends DateValue> = Omit<RACDateFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACDateFieldProps<T>['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 'filled' | 'outlined';\n};\n\n/**\n * A date typed rather than picked: one segment per part, each its own focus\n * stop. The value is React Aria's — pass `value` with `onChange` to control\n * it, or `defaultValue` — as an `@internationalized/date` value from this\n * package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and what order they come in is the reader's\n * locale, through React Aria's `I18nProvider` — `granularity` adds time\n * segments, and `minValue` and `maxValue` bound what may be typed.\n *\n * The box, label and message are the field chrome in `src/field`, shared\n * with every other field. The call site's `className` and `style` land on\n * the field as a whole, which is the element a layout positions.\n */\nfunction DateField<T extends DateValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: DateFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys the outlined notch. The box decides\n    // populated twice over — in CSS for the label's type, and in React\n    // for the notch, since CSS cannot cut an outline to a width it has\n    // no way to measure. React Aria renders a hidden\n    // `<input type=\"date\">` carrying no placeholder, so the CSS half\n    // reads as populated on its own; the React half reads React Aria's\n    // input context, which a date field does not provide. Without this\n    // the notch stays shut across segments already showing `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldValue>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,SAAS,YAA+B,EACtC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,cACA,UAAU,UACV,GAAG,WACiB;CACpB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,WAAD;EAA6B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAxL,UAAA,CACH,oBAAC,UAAD;GAAyB;GAS3B,aAAA;GAAmB;GAAO,SAAS;GAAa,UAAU;GAAuB;GAC7E,UAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;IAAc,GAAI,MAAa,cAAc,KAAK;IAC/C,UAAA;GACW,CAAA,EACJ,CAAA;EACJ,CAAA,GACV,oBAAC,cAAD;GAA2B;GAAoB;EAAM,CAAA,CACzC;;AAClB"}

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,57 @@
+import { ReactNode } from "react";
+import { DatePickerProps, DateValue } from "react-aria-components";
+//#region src/components/date-picker/index.d.ts
+type DatePickerProps$1<T extends DateValue> = Omit<DatePickerProps<T>, 'children' | 'className' | 'style'> & {
+  /** A function may compute the class from the picker's render state. */
+  className?: DatePickerProps<T>['className'];
+  /** Supporting text under the field. */
+  description?: string;
+  /** The message shown instead of the description, which also marks the field invalid. */
+  error?: string;
+  /**
+   * Whether the label floats into the box's top once the field holds a
+   * value, rather than sitting above it.
+   * @default true
+   */
+  floatingLabel?: boolean;
+  /** What the field is for. Always rendered; never a placeholder. */
+  label: string;
+  /** An icon at the box's leading end. */
+  leadingIcon?: ReactNode;
+  /** A function may compute the style from the picker's render state. */
+  style?: DatePickerProps<T>['style'];
+  /**
+   * What the button that opens the calendar is called, for a screen reader.
+   * @default 'Choose a date'
+   */
+  triggerLabel?: string;
+  /**
+   * Which of the text fields page's two boxes to draw.
+   * @default 'filled'
+   */
+  variant?: 'filled' | 'outlined';
+};
+/**
+ * A date typed into a field, or picked from a calendar behind a button. The
+ * value is React Aria's — pass `value` with `onChange` to control it, or
+ * `defaultValue` — as an `@internationalized/date` value from this package's
+ * `./date` subpath.
+ *
+ * ```tsx
+ * import { CalendarDate } from '@kanso-labs/kanso-ui/date'
+ *
+ * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+ * ```
+ *
+ * The segments are `DateField`'s and the calendar is `Calendar`, so
+ * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave
+ * as they do there. Above the medium breakpoint the calendar is docked to
+ * the field; below it, it opens centred, which is the page's modal picker.
+ *
+ * The call site's `className` and `style` land on the picker as a whole,
+ * which is the element a layout positions.
+ */
+declare function DatePicker$1<T extends DateValue>({ description, error, floatingLabel, isDisabled, label, leadingIcon, triggerLabel, variant, ...props }: DatePickerProps$1<T>): import("react").JSX.Element;
+//#endregion
+export { type DatePickerProps$1 as DatePickerProps, DatePicker$1 as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/date-picker/index.js

@@ -0,0 +1,75 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { CalendarGlyph } from "../../glyphs/index.js";
+import Calendar$1 from "../calendar/index.js";
+import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { overlay } from "../../styles/overlay.js";
+import { segmentStyles } from "../../segments/styles.js";
+import { renderSegment } from "../../segments/index.js";
+import { picker, triggerClassName } from "../../styles/picker.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-aria-components";
+//#region src/components/date-picker/index.tsx
+/**
+* A date typed into a field, or picked from a calendar behind a button. The
+* value is React Aria's — pass `value` with `onChange` to control it, or
+* `defaultValue` — as an `@internationalized/date` value from this package's
+* `./date` subpath.
+*
+* ```tsx
+* import { CalendarDate } from '@kanso-labs/kanso-ui/date'
+*
+* <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+* ```
+*
+* The segments are `DateField`'s and the calendar is `Calendar`, so
+* `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave
+* as they do there. Above the medium breakpoint the calendar is docked to
+* the field; below it, it opens centred, which is the page's modal picker.
+*
+* The call site's `className` and `style` land on the picker as a whole,
+* which is the element a layout positions.
+*/
+function DatePicker$1({ description, error, floatingLabel = true, isDisabled = false, label, leadingIcon, triggerLabel = "Choose a date", variant = "filled", ...props$1 }) {
+	const validationBehavior = useFieldValidationBehavior();
+	return /* @__PURE__ */ jsxs(DatePicker, {
+		isDisabled,
+		isInvalid: invalidFrom(error),
+		validationBehavior,
+		...props$1,
+		...mergeStatefulStyles(props(fieldStyles.root), props$1),
+		children: [
+			/* @__PURE__ */ jsx(FieldBox, {
+				floatingLabel,
+				isPopulated: true,
+				label,
+				leading: leadingIcon,
+				variant,
+				children: /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+					...props(picker.group),
+					children: [/* @__PURE__ */ jsx(DateInput, {
+						...props(segmentStyles.input),
+						children: renderSegment
+					}), /* @__PURE__ */ jsx(Button, {
+						"aria-label": triggerLabel,
+						className: triggerClassName,
+						children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
+					})]
+				}) })
+			}),
+			/* @__PURE__ */ jsx(FieldMessage, {
+				description,
+				error
+			}),
+			/* @__PURE__ */ jsx(Popover, {
+				...props(overlay.popup, picker.popover),
+				children: /* @__PURE__ */ jsx(Dialog, { children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label }) })
+			})
+		]
+	});
+}
+//#endregion
+export { DatePicker$1 as default };
+
+//# sourceMappingURL=index.js.map