@kanso-labs/kanso-ui 0.28.3 → 0.28.5

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

@@ -12,7 +12,7 @@ const COPIED_RESET_MS = 2e3;
 * on the button itself.
 */
 function CopyField(t0) {
-	const $ = c(18);
+	const $ = c(31);
 	const { copiedLabel: t1, copyLabel: t2, onCopied, value, ...props } = t0;
 	const copiedLabel = t1 === void 0 ? "Copied" : t1;
 	const copyLabel = t2 === void 0 ? "Copy" : t2;
@@ -66,48 +66,101 @@ function CopyField(t0) {
 		$[5] = value;
 		$[6] = t7;
 	} else t7 = $[6];
-	const t8 = copied ? copiedLabel : copyLabel;
+	const t8 = copied || void 0;
 	let t9;
-	if ($[7] !== handleCopy || $[8] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Button, {
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			0: { className: "x15r89dc" },
+			1: { className: "x15r89dc xlshs6z" }
+		};
+		$[7] = t9;
+	} else t9 = $[7];
+	const t10 = t9[!!copied << 0];
+	let t11;
+	if ($[8] !== copyLabel || $[9] !== t10 || $[10] !== t8) {
+		t11 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": t8,
+			...t10,
+			children: copyLabel
+		});
+		$[8] = copyLabel;
+		$[9] = t10;
+		$[10] = t8;
+		$[11] = t11;
+	} else t11 = $[11];
+	const t12 = !copied || void 0;
+	let t13;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = {
+			0: { className: "x15r89dc" },
+			1: { className: "x15r89dc xlshs6z" }
+		};
+		$[12] = t13;
+	} else t13 = $[12];
+	const t14 = t13[!!!copied << 0];
+	let t15;
+	if ($[13] !== copiedLabel || $[14] !== t12 || $[15] !== t14) {
+		t15 = /* @__PURE__ */ jsx("span", {
+			"aria-hidden": t12,
+			...t14,
+			children: copiedLabel
+		});
+		$[13] = copiedLabel;
+		$[14] = t12;
+		$[15] = t14;
+		$[16] = t15;
+	} else t15 = $[16];
+	let t16;
+	if ($[17] !== t11 || $[18] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("span", {
+			className: "xrvj5dj x1o2pa38",
+			children: [t11, t15]
+		});
+		$[17] = t11;
+		$[18] = t15;
+		$[19] = t16;
+	} else t16 = $[19];
+	let t17;
+	if ($[20] !== handleCopy || $[21] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Button, {
 			onClick: handleCopy,
 			size: "xs",
 			variant: "text",
-			children: t8
+			children: t16
 		});
-		$[7] = handleCopy;
-		$[8] = t8;
-		$[9] = t9;
-	} else t9 = $[9];
-	const t10 = copied ? copiedLabel : "";
-	let t11;
-	if ($[10] !== t10) {
-		t11 = /* @__PURE__ */ jsx("output", {
+		$[20] = handleCopy;
+		$[21] = t16;
+		$[22] = t17;
+	} else t17 = $[22];
+	const t18 = copied ? copiedLabel : "";
+	let t19;
+	if ($[23] !== t18) {
+		t19 = /* @__PURE__ */ jsx("output", {
 			className: "xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft",
-			children: t10
+			children: t18
 		});
-		$[10] = t10;
-		$[11] = t11;
-	} else t11 = $[11];
-	let t12;
-	if ($[12] !== props || $[13] !== t11 || $[14] !== t6 || $[15] !== t7 || $[16] !== t9) {
-		t12 = /* @__PURE__ */ jsxs("div", {
+		$[23] = t18;
+		$[24] = t19;
+	} else t19 = $[24];
+	let t20;
+	if ($[25] !== props || $[26] !== t17 || $[27] !== t19 || $[28] !== t6 || $[29] !== t7) {
+		t20 = /* @__PURE__ */ jsxs("div", {
 			...props,
 			...t6,
 			children: [
 				t7,
-				t9,
-				t11
+				t17,
+				t19
 			]
 		});
-		$[12] = props;
-		$[13] = t11;
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t9;
-		$[17] = t12;
-	} else t12 = $[17];
-	return t12;
+		$[25] = props;
+		$[26] = t17;
+		$[27] = t19;
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t20;
+	} else t20 = $[30];
+	return t20;
 }
 //#endregion
 export { CopyField as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HTMLAttributes","stylex","useCallback","useEffect","useRef","useState","mergeStyles","colors","radii","spacing","typography","Button","Code","COPIED_RESET_MS","CopyFieldProps","copiedLabel","copyLabel","onCopied","value","Omit","HTMLDivElement","CopyField","t0","$","_c","t1","t2","props","undefined","copied","setCopied","timer","t3","t4","Symbol","for","clearTimeout","current","t5","write","navigator","clipboard","writeText","setTimeout","handleCopy","t6","className","t7","t8","t9","t10","t11","t12"],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\n\n// No Material Design page draws a read-only value with a copy control. It\n// follows the outlined text field: the 1dp rule in the outline role, the\n// surface behind it, and the control at its trailing end. The value is\n// body-small beside a 32dp text button, so the box is shorter than the\n// field's 56, which suits a value that is read rather than edited, and its\n// corner is the shape scale's small step for the same reason.\n\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u\"\n  }, props)}>\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        {copied ? copiedLabel : copyLabel}\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":";;;;;;;AAaA,MAAMa,kBAAkB;;;;;;AAwCxB,SAAAQ,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAT,aAAAU,IAAAT,WAAAU,IAAAT,UAAAC,OAAA,GAAAS,UAAAL;CACjB,MAAAP,cAAAU,OAAAG,KAAAA,IAAA,WAAAH;CACA,MAAAT,YAAAU,OAAAE,KAAAA,IAAA,SAAAF;CAKA,MAAA,CAAAG,QAAAC,aAA4BzB,SAAS,KAAK;CAC1C,MAAA0B,QAAc3B,OAAkDwB,KAAAA,CAAS;CAAE,IAAAI;CAAA,IAAAC;CAAA,IAAAV,EAAA,OAAAW,OAAAC,IAAA,2BAAA,GAAA;EAIjEH,iBAAM;GACdI,aAAaL,MAAKM,OAAQ;EAAC;EAC1BJ,KAAA,CAAA;EAAEV,EAAA,KAAAS;EAAAT,EAAA,KAAAU;CAAA,OAAA;EAAAD,KAAAT,EAAA;EAAAU,KAAAV,EAAA;CAAA;CAFLpB,UAAU6B,IAEPC,EAAE;CAAC,IAAAK;CAAA,IAAAf,EAAA,OAAAN,YAAAM,EAAA,OAAAL,OAAA;EACyBoB,WAAA;GAC7B,MAAAC,QAAc,YAAA;IACZ,IAAA;KACE,MAAMC,UAASC,UAAUC,UAAWxB,KAAK;IAAC,QAAA;KAM1CY,UAAU,KAAK;KAAC;IAAA;IAGlBA,UAAU,IAAI;IACdb,WAAWC,KAAK;IAChBkB,aAAaL,MAAKM,OAAQ;IAC1BN,MAAKM,UAAWM,iBAAW;KACzBb,UAAU,KAAK;IAAC,GACfjB,eAAe;GAFL;GAIV0B,MAAM;EAAC;EACbhB,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CApBD,MAAAqB,aAAmBN;CAqBQ,MAAAO,KAAAvC,YAAY,EAAAwC,WAC1B,+FACb,GAAGnB,KAAK;CAAC,IAAAoB;CAAA,IAAAxB,EAAA,OAAAL,OAAA;EACL6B,KAAA,oBAAA,QAAA;GAAgB,WAAA;GACd,UAAA,oBAAC,MAAD,EAAA,UAAO7B,MAAF,CAAA;EACA,CAAA;EAAAK,EAAA,KAAAL;EAAAK,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAEJ,MAAAyB,KAAAnB,SAAAd,cAAAC;CAAgC,IAAAiC;CAAA,IAAA1B,EAAA,OAAAqB,cAAArB,EAAA,OAAAyB,IAAA;EADnCC,KAAA,oBAAC,QAAD;GAAiBL,SAAAA;GAAiB,MAAA;GAAa,SAAA;GAC5CI,UAAAA;EADI,CAAA;EAEEzB,EAAA,KAAAqB;EAAArB,EAAA,KAAAyB;EAAAzB,EAAA,KAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAKN,MAAA2B,MAAArB,SAAAd,cAAA;CAAyB,IAAAoC;CAAA,IAAA5B,EAAA,QAAA2B,KAAA;EAD5BC,MAAA,oBAAA,UAAA;GAAkB,WAAA;GACfD,UAAAA;EACM,CAAA;EAAA3B,EAAA,MAAA2B;EAAA3B,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,IAAA6B;CAAA,IAAA7B,EAAA,QAAAI,SAAAJ,EAAA,QAAA4B,OAAA5B,EAAA,QAAAsB,MAAAtB,EAAA,QAAAwB,MAAAxB,EAAA,QAAA0B,IAAA;EAdNG,MAAA,qBAAA,OAAA;GAeC,GAfQzB;GAAK,GAAMkB;GAApB,UAAA;IAGHE;IAGAE;IAMAE;GAGI;;EAAA5B,EAAA,MAAAI;EAAAJ,EAAA,MAAA4B;EAAA5B,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA6B;CAAA,OAAAA,MAAA7B,EAAA;CAAA,OAfD6B;AAeC"}
+{"version":3,"file":"index.js","names":["HTMLAttributes","stylex","useCallback","useEffect","useRef","useState","mergeStyles","colors","radii","spacing","typography","Button","Code","COPIED_RESET_MS","CopyFieldProps","copiedLabel","copyLabel","onCopied","value","Omit","HTMLDivElement","CopyField","t0","$","_c","t1","t2","props","undefined","copied","setCopied","timer","t3","t4","Symbol","for","clearTimeout","current","t5","write","navigator","clipboard","writeText","setTimeout","handleCopy","t6","className","t7","t8","t9","0","1","t10","t11","t12","t13","t14","t15","t16","t17","t18","t19","t20"],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\n\n// No Material Design page draws a read-only value with a copy control. It\n// follows the outlined text field: the 1dp rule in the outline role, the\n// surface behind it, and the control at its trailing end. The value is\n// body-small beside a 32dp text button, so the box is shorter than the\n// field's 56, which suits a value that is read rather than edited, and its\n// corner is the shape scale's small step for the same reason.\n\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u\"\n  }, props)}>\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        <span className=\"xrvj5dj x1o2pa38\">\n          <span aria-hidden={copied || undefined} {...{\n          0: {\n            className: \"x15r89dc\"\n          },\n          1: {\n            className: \"x15r89dc xlshs6z\"\n          }\n        }[!!copied << 0]}>\n            {copyLabel}\n          </span>\n          <span aria-hidden={!copied || undefined} {...{\n          0: {\n            className: \"x15r89dc\"\n          },\n          1: {\n            className: \"x15r89dc xlshs6z\"\n          }\n        }[!!!copied << 0]}>\n            {copiedLabel}\n          </span>\n        </span>\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":"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"}

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

@@ -13,6 +13,13 @@ import { c } from "react/compiler-runtime";
 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
+function calendarTrigger(triggerLabel) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": triggerLabel,
+		className: triggerClassName,
+		children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
+	});
+}
 /**
 * 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
@@ -34,7 +41,7 @@ import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-ari
 * which is the element a layout positions.
 */
 function DatePicker$1(t0) {
-	const $ = c(33);
+	const $ = c(32);
 	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, triggerLabel: t3, variant: t4, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -50,119 +57,111 @@ function DatePicker$1(t0) {
 	} else t5 = $[1];
 	const t6 = mergeStatefulStyles(props(fieldStyles.root), props$1);
 	let t7;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(picker.group);
-		$[2] = t7;
-	} else t7 = $[2];
+	if ($[2] !== triggerLabel) {
+		t7 = calendarTrigger(triggerLabel);
+		$[2] = triggerLabel;
+		$[3] = t7;
+	} else t7 = $[3];
 	let t8;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(DateInput, {
-			...props(segmentStyles.input),
-			children: renderSegment
-		});
-		$[3] = t8;
-	} else t8 = $[3];
-	let t9;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) });
-		$[4] = t9;
-	} else t9 = $[4];
-	let t10;
-	if ($[5] !== triggerLabel) {
-		t10 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
-			...t7,
-			children: [t8, /* @__PURE__ */ jsx(Button, {
-				"aria-label": triggerLabel,
-				className: triggerClassName,
-				children: t9
-			})]
+		t8 = props(picker.group);
+		$[4] = t8;
+	} else t8 = $[4];
+	let t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(Group, {
+			...t8,
+			children: /* @__PURE__ */ jsx(DateInput, {
+				...props(segmentStyles.input),
+				children: renderSegment
+			})
 		}) });
-		$[5] = triggerLabel;
-		$[6] = t10;
-	} else t10 = $[6];
-	let t11;
-	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== t10 || $[11] !== variant) {
-		t11 = /* @__PURE__ */ jsx(FieldBox, {
+		$[5] = t9;
+	} else t9 = $[5];
+	let t10;
+	if ($[6] !== floatingLabel || $[7] !== label || $[8] !== leadingIcon || $[9] !== t7 || $[10] !== variant) {
+		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
 			label,
 			leading: leadingIcon,
+			trailing: t7,
 			variant,
-			children: t10
+			children: t9
 		});
-		$[7] = floatingLabel;
-		$[8] = label;
-		$[9] = leadingIcon;
-		$[10] = t10;
-		$[11] = variant;
-		$[12] = t11;
-	} else t11 = $[12];
-	let t12;
-	if ($[13] !== description || $[14] !== error) {
-		t12 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[6] = floatingLabel;
+		$[7] = label;
+		$[8] = leadingIcon;
+		$[9] = t7;
+		$[10] = variant;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== description || $[13] !== error) {
+		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[13] = description;
-		$[14] = error;
+		$[12] = description;
+		$[13] = error;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = props(overlay.popup, picker.popover);
 		$[15] = t12;
 	} else t12 = $[15];
 	let t13;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = props(overlay.popup, picker.popover);
+		t13 = props(overlay.popupDialog, focus.ring);
 		$[16] = t13;
 	} else t13 = $[16];
 	let t14;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = props(overlay.popupDialog, focus.ring);
-		$[17] = t14;
-	} else t14 = $[17];
-	let t15;
-	if ($[18] !== label) {
-		t15 = /* @__PURE__ */ jsx(Dialog, {
-			...t14,
+	if ($[17] !== label) {
+		t14 = /* @__PURE__ */ jsx(Dialog, {
+			...t13,
 			children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
 		});
-		$[18] = label;
-		$[19] = t15;
-	} else t15 = $[19];
-	let t16;
-	if ($[20] !== container || $[21] !== t15) {
-		t16 = /* @__PURE__ */ jsx(Popover, {
+		$[17] = label;
+		$[18] = t14;
+	} else t14 = $[18];
+	let t15;
+	if ($[19] !== container || $[20] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Popover, {
 			UNSTABLE_portalContainer: container,
-			...t13,
-			children: t15
+			...t12,
+			children: t14
 		});
-		$[20] = container;
+		$[19] = container;
+		$[20] = t14;
 		$[21] = t15;
-		$[22] = t16;
-	} else t16 = $[22];
-	let t17;
-	if ($[23] !== T0 || $[24] !== isDisabled || $[25] !== props$1 || $[26] !== t11 || $[27] !== t12 || $[28] !== t16 || $[29] !== t5 || $[30] !== t6 || $[31] !== validationBehavior) {
-		t17 = /* @__PURE__ */ jsxs(T0, {
+	} else t15 = $[21];
+	let t16;
+	if ($[22] !== T0 || $[23] !== isDisabled || $[24] !== props$1 || $[25] !== t10 || $[26] !== t11 || $[27] !== t15 || $[28] !== t5 || $[29] !== t6 || $[30] !== validationBehavior) {
+		t16 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t5,
 			validationBehavior,
 			...props$1,
 			...t6,
 			children: [
+				t10,
 				t11,
-				t12,
-				t16
+				t15
 			]
 		});
-		$[23] = T0;
-		$[24] = isDisabled;
-		$[25] = props$1;
+		$[22] = T0;
+		$[23] = isDisabled;
+		$[24] = props$1;
+		$[25] = t10;
 		$[26] = t11;
-		$[27] = t12;
-		$[28] = t16;
-		$[29] = t5;
-		$[30] = t6;
-		$[31] = validationBehavior;
-		$[32] = t17;
-	} else t17 = $[32];
-	return t17;
+		$[27] = t15;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = validationBehavior;
+		$[31] = t16;
+	} else t16 = $[31];
+	return t16;
 }
 //#endregion
 export { DatePicker$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","t0","$","_c","t1","isDisabled","t2","t3","t4","props","undefined","validationBehavior","T0","t5","t6","root","t7","Symbol","for","group","t8","input","t9","triggerGlyph","t10","t11","t12","t13","popup","popover","t14","popupDialog","ring","t15","t16","t17"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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 picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <RACButton aria-label={triggerLabel} className={triggerClassName}>\n              <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n            </RACButton>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","t8","Symbol","for","group","t9","input","t10","t11","t12","popup","popover","t13","popupDialog","ring","t14","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// **The picker is one field, not a field beside a button.** React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// **It is docked above the medium breakpoint and modal below it**, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDatePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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 picker's render state. */\n  style?: RACDatePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n *\n * The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  triggerLabel = 'Choose a date',\n  variant = 'filled',\n  ...props\n}: DatePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, which buys exactly one thing: the outlined\n    // notch. The box decides populated twice over — in CSS for the\n    // label's type, and in React for the notch, since CSS cannot cut an\n    // outline to a width it has no way to measure. React Aria renders a\n    // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n    // half reads as populated on its own; the React half reads React\n    // Aria's input context, which a picker does not provide. Without\n    // this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line,\n    // which is where Select and ComboBox put their chevron. The slot\n    // cancels the box's top padding and stretches to its full height, so\n    // it centres the 40dp trigger in the box; on the line the trigger\n    // was taller than the row that held it and hung past the underline,\n    // and the segments centred on it rather than on their own line.\n    //\n    // React Aria's `DatePicker` is what gives the trigger its press\n    // behaviour, through context, so the slot reaches it as well as the\n    // group did.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}