@kanso-labs/kanso-ui 0.26.2 → 0.26.4

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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,MAAM,kBAAkB;;;;;;AAwCxB,SAAS,UAAU,EACjB,cAAc,UACd,YAAY,QACZ,UACA,OACA,GAAG,SACc;CACjB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAIzE,sBAAsB;EACpB,aAAa,MAAM,OAAO;CAC5B,GAAG,CAAA,CAAE;CACL,MAAM,aAAa,kBAAkB;EACnC,MAAM,QAAQ,YAAY;GACxB,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;GAC3C,QAAQ;IAKN,UAAU,KAAK;IACf;GACF;GACA,UAAU,IAAI;GACd,WAAW,KAAK;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB;IAC/B,UAAU,KAAK;GACjB,GAAG,eAAe;EACpB;EACA,MAAW;CACb,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,OAAO,qBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,EACrC,WAAW,+FACb,GAAG,KAAK;EAFD,UAAA;GAGH,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,MAAD,EAAA,UAAO,MAAY,CAAA;GACf,CAAA;GACN,oBAAC,QAAD;IAAQ,SAAS;IAAY,MAAK;IAAK,SAAQ;IAC5C,UAAA,SAAS,cAAc;GAClB,CAAA;GAIR,oBAAC,UAAD;IAAQ,WAAU;IACf,UAAA,SAAS,cAAc;GAClB,CAAA;EACL;;AACT"}
+{"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"}

package/dist/components/currency/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { c } from "react/compiler-runtime";
 //#region src/components/currency/index.tsx
 const styles = { base: {
 	kB7OPa: "x9f619",
@@ -24,20 +25,76 @@ const tones = {
 	}
 };
 const MINUS_SIGN = "−";
-function Currency({ currency = "USD", locale, render, sign = "auto", tone = "auto", value, ...props$1 }) {
-	return useRender({
-		defaultTagName: "span",
-		props: {
-			...props$1,
-			children: formatCurrency(value, {
+function Currency(t0) {
+	const $ = c(20);
+	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		const { currency: t6, locale, render: t7, sign: t8, tone: t9, value, ...props$1 } = t0;
+		render = t7;
+		const currency = t6 === void 0 ? "USD" : t6;
+		const sign = t8 === void 0 ? "auto" : t8;
+		const tone = t9 === void 0 ? "auto" : t9;
+		t5 = useRender;
+		t4 = "span";
+		t1 = props$1;
+		if ($[7] !== currency || $[8] !== locale || $[9] !== sign || $[10] !== value) {
+			t2 = formatCurrency(value, {
 				currency,
 				locale,
 				sign
-			}),
-			...mergeStyles(props(styles.base, tones[resolveTone(value, tone)]), props$1)
-		},
-		render
-	});
+			});
+			$[7] = currency;
+			$[8] = locale;
+			$[9] = sign;
+			$[10] = value;
+			$[11] = t2;
+		} else t2 = $[11];
+		t3 = mergeStyles(props(styles.base, tones[resolveTone(value, tone)]), props$1);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+		t5 = $[6];
+	}
+	let t6;
+	if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+		t6 = {
+			...t1,
+			children: t2,
+			...t3
+		};
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== render || $[17] !== t4 || $[18] !== t6) {
+		t7 = {
+			defaultTagName: t4,
+			props: t6,
+			render
+		};
+		$[16] = render;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t5(t7);
 }
 function formatCurrency(value, options) {
 	return new Intl.NumberFormat(options.locale, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":";;;;AAkBA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AACA,MAAM,QAAQ;CACZ,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,aAAa;AA+BnB,SAAS,SAAS,EAChB,WAAW,OACX,QACA,QACA,OAAO,QACP,OAAO,QACP,OACA,GAAG,WACa;CAChB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,YAAY,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE,GAAG,OAAK;EAClF;EACA;CACF,CAAC;AACH;AAMA,SAAS,eAAe,OAAe,SAIpC;CACD,OAAO,IAAI,KAAK,aAAa,QAAQ,QAAQ;EAC3C,UAAU,QAAQ;EAClB,aAAa,QAAQ;EACrB,OAAO;CACT,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,KAAI,SAAQ,KAAK,SAAS,cAAc,aAAa,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE;AAClG;AAKA,SAAS,YAAY,OAAe,MAAY;CAC9C,IAAI,SAAS,QACX,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","options","Intl","NumberFormat","signDisplay","style","formatToParts","map","part","type","join"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../fiel
 import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateField, DateInput } from "react-aria-components";
 //#region src/components/date-field/index.tsx
@@ -27,30 +28,78 @@ import { DateField, DateInput } from "react-aria-components";
 * 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 }) {
+function DateField$1(t0) {
+	const $ = c(21);
+	const { description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, trailingIcon, variant: t3, ...props$1 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "filled" : t3;
 	const validationBehavior = useFieldValidationBehavior();
-	return /* @__PURE__ */ jsxs(DateField, {
-		isDisabled,
-		isInvalid: invalidFrom(error),
-		validationBehavior,
-		...props$1,
-		...mergeStatefulStyles(props(fieldStyles.root), props$1),
-		children: [/* @__PURE__ */ jsx(FieldBox, {
+	const T0 = DateField;
+	let t4;
+	if ($[0] !== error) {
+		t4 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	let t6;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(DateInput, {
+			...props(segmentStyles.input),
+			children: renderSegment
+		}) });
+		$[2] = t6;
+	} else t6 = $[2];
+	let t7;
+	if ($[3] !== floatingLabel || $[4] !== label || $[5] !== leadingIcon || $[6] !== trailingIcon || $[7] !== variant) {
+		t7 = /* @__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, {
+			children: t6
+		});
+		$[3] = floatingLabel;
+		$[4] = label;
+		$[5] = leadingIcon;
+		$[6] = trailingIcon;
+		$[7] = variant;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== description || $[10] !== error) {
+		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
-		})]
-	});
+		});
+		$[9] = description;
+		$[10] = error;
+		$[11] = t8;
+	} else t8 = $[11];
+	let t9;
+	if ($[12] !== T0 || $[13] !== isDisabled || $[14] !== props$1 || $[15] !== t4 || $[16] !== t5 || $[17] !== t7 || $[18] !== t8 || $[19] !== validationBehavior) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t4,
+			validationBehavior,
+			...props$1,
+			...t5,
+			children: [t7, t8]
+		});
+		$[12] = T0;
+		$[13] = isDisabled;
+		$[14] = props$1;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = validationBehavior;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
 }
 //#endregion
 export { DateField$1 as default };

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

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","_c","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9"],"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,SAAAK,YAAAwB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwC,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGtC,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BxB,2BAA2B;CAC9C,MAAAyB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBb,MAAaQ,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKvC,MAAaY,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADJ,CAAA;EAIEe,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EAVO,CAAA;EAeEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAQ,oBAAA;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHlB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}

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

@@ -8,6 +8,7 @@ import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
+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
@@ -31,46 +32,128 @@ import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-ari
 * 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 }) {
+function DatePicker$1(t0) {
+	const $ = c(30);
+	const { 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;
+	const triggerLabel = t3 === void 0 ? "Choose a date" : t3;
+	const variant = t4 === void 0 ? "filled" : t4;
 	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, {
-					...props(overlay.popupDialog),
-					children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
-				})
+	const T0 = DatePicker;
+	let t5;
+	if ($[0] !== error) {
+		t5 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t5;
+	} 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];
+	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
+			})]
+		}) });
+		$[5] = triggerLabel;
+		$[6] = t10;
+	} else t10 = $[6];
+	let t11;
+	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== t10 || $[11] !== variant) {
+		t11 = /* @__PURE__ */ jsx(FieldBox, {
+			floatingLabel,
+			isPopulated: true,
+			label,
+			leading: leadingIcon,
+			variant,
+			children: t10
+		});
+		$[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, {
+			description,
+			error
+		});
+		$[13] = description;
+		$[14] = error;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = props(overlay.popup, picker.popover);
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = props(overlay.popupDialog);
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] !== label) {
+		t15 = /* @__PURE__ */ jsx(Popover, {
+			...t13,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...t14,
+				children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
 			})
-		]
-	});
+		});
+		$[18] = label;
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== props$1 || $[23] !== t11 || $[24] !== t12 || $[25] !== t15 || $[26] !== t5 || $[27] !== t6 || $[28] !== validationBehavior) {
+		t16 = /* @__PURE__ */ jsxs(T0, {
+			isDisabled,
+			isInvalid: t5,
+			validationBehavior,
+			...props$1,
+			...t6,
+			children: [
+				t11,
+				t12,
+				t15
+			]
+		});
+		$[20] = T0;
+		$[21] = isDisabled;
+		$[22] = props$1;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t15;
+		$[26] = t5;
+		$[27] = t6;
+		$[28] = validationBehavior;
+		$[29] = t16;
+	} else t16 = $[29];
+	return t16;
 }
 //#endregion
 export { DatePicker$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 { 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 { 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> = 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  /** 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?: 'filled' | 'outlined';\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  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 {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAS,aAAgC,EACvC,aACA,OACA,gBAAgB,MAChB,aAAa,OACb,OACA,aACA,eAAe,iBACf,UAAU,UACV,GAAG,WACkB;CACrB,MAAM,qBAAqB,2BAA2B;CACtD,OAAO,qBAAC,YAAD;EAA8B;EAAY,WAAW,YAAY,KAAK;EAAuB;EAAoB,GAAI;EAAO,GAAI,oBAAoB,MAAa,YAAY,IAAI,GAAG,OAAK;EAAzL,UAAA;GACH,oBAAC,UAAD;IAAyB;IAU3B,aAAA;IAAmB;IAAO,SAAS;IAAsB;IACrD,UAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;KAAU,GAAI,MAAa,OAAO,KAAK;KAAvC,UAAA,CACE,oBAAC,WAAD;MAAc,GAAI,MAAa,cAAc,KAAK;MAC/C,UAAA;KACW,CAAA,GACd,oBAAC,QAAD;MAAW,cAAY;MAAc,WAAW;MAC9C,UAAA,oBAAC,eAAD,EAAe,GAAI,MAAa,OAAO,YAAY,EAAE,CAAA;KAC5C,CAAA,CACH;IACA,CAAA,EAAA,CAAA;GACJ,CAAA;GACV,oBAAC,cAAD;IAA2B;IAAoB;GAAM,CAAA;GACrD,oBAAC,SAAD;IAAY,GAAI,MAAa,QAAQ,OAAO,OAAO,OAAO;IACxD,UAAA,oBAAC,QAAD;KAAW,GAAI,MAAa,QAAQ,WAAW;KAC7C,UAAA,oBAAC,YAAD,EAAU,cAAY,MAAM,CAAA;IACnB,CAAA;GACD,CAAA;EACC;;AACnB"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","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","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 { 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 { 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> = 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  /** 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?: 'filled' | 'outlined';\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  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 {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog)}>\n          <Calendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}