@kanso-labs/kanso-ui 0.35.0 → 0.37.0

package/dist/components/currency/index.d.ts

@@ -7,8 +7,9 @@ type CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {
    */
   currency?: string;
   /**
-   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an
-   * app that has not chosen one still formats the way its reader expects.
+   * BCP 47 locale to format for. Defaults to React Aria's `I18nProvider`, as
+   * the date and number fields do, so an amount reads in the locale the app
+   * set — and to the browser's language where there is no provider.
    */
   locale?: string;
   /**
@@ -18,7 +19,7 @@ type CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {
    * only where the direction is already stated some other way.
    * @default 'auto'
    */
-  sign?: SignDisplay;
+  sign?: CurrencySignDisplay;
   /**
    * Which colour role to render in. `auto` follows the sign of `value`, with
    * zero reading as neutral.
@@ -30,13 +31,13 @@ type CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {
    * a custom theme placing one there has to check that pair itself.
    * @default 'auto'
    */
-  tone?: Tone;
+  tone?: CurrencyTone;
   /** The amount, in the currency's major units. */
   value: number;
 };
-type SignDisplay = 'always' | 'auto' | 'never';
-type Tone = 'auto' | 'negative' | 'neutral' | 'positive';
+type CurrencySignDisplay = 'always' | 'auto' | 'never';
+type CurrencyTone = 'auto' | 'negative' | 'neutral' | 'positive';
 declare function Currency({ currency, locale, render, sign, tone, value, ...props }: CurrencyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export { type CurrencyProps, Currency as default };
+export { type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, Currency as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/currency/index.js

@@ -3,6 +3,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";
+import { useLocale } from "react-aria-components";
 //#region src/components/currency/index.tsx
 const styles = { base: {
 	kB7OPa: "x9f619",
@@ -27,82 +28,59 @@ const tones = {
 };
 const MINUS_SIGN = "−";
 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
-			});
-			$[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];
-	}
+	const $ = c(12);
+	const { currency: t1, locale, render, sign: t2, tone: t3, value, ...props$1 } = t0;
+	const currency = t1 === void 0 ? "USD" : t1;
+	const sign = t2 === void 0 ? "auto" : t2;
+	const tone = t3 === void 0 ? "auto" : t3;
+	const provided = useLocale().locale;
+	const t4 = "span";
+	const t5 = locale ?? provided;
 	let t6;
-	if ($[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
-		t6 = {
-			...t1,
-			children: t2,
-			...t3
+	if ($[0] !== currency || $[1] !== sign || $[2] !== t5 || $[3] !== value) {
+		t6 = formatCurrency(value, {
+			currency,
+			locale: t5,
+			sign
+		});
+		$[0] = currency;
+		$[1] = sign;
+		$[2] = t5;
+		$[3] = value;
+		$[4] = t6;
+	} else t6 = $[4];
+	const t7 = mergeStyles(props(styles.base, tones[resolveTone(value, tone)]), props$1);
+	let t8;
+	if ($[5] !== props$1 || $[6] !== t6 || $[7] !== t7) {
+		t8 = {
+			...props$1,
+			children: t6,
+			...t7
 		};
-		$[12] = t1;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t6;
-	} else t6 = $[15];
-	let t7;
-	if ($[16] !== render || $[17] !== t4 || $[18] !== t6) {
-		t7 = {
+		$[5] = props$1;
+		$[6] = t6;
+		$[7] = t7;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== render || $[10] !== t8) {
+		t9 = {
 			defaultTagName: t4,
-			props: t6,
+			props: t8,
 			render
 		};
-		$[16] = render;
-		$[17] = t4;
-		$[18] = t6;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t5(t7);
+		$[9] = render;
+		$[10] = t8;
+		$[11] = t9;
+	} else t9 = $[11];
+	return useRender(t9);
 }
 const formatters = /* @__PURE__ */ new Map();
 function formatCurrency(value, options) {
 	return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map((part) => part.type === "minusSign" ? MINUS_SIGN : part.value).join("");
 }
 function formatterFor(locale, currency, sign) {
-	const key = `${locale ?? ""}|${currency}|${sign}`;
+	const key = `${locale}|${currency}|${sign}`;
 	const cached = formatters.get(key);
 	if (cached) return cached;
 	const formatter = new Intl.NumberFormat(locale, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","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","$","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set","_c","props","stylex.props"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["'use client';\n\nimport * 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   *\n   * The positive and negative roles are guaranteed legible on the surface\n   * family, which is what the library's own tokens and every demo scheme are\n   * held to. Over a container of its own — a selected row, a filled card —\n   * the pair is one colour family on top of another and is not guaranteed, so\n   * a custom theme placing one there has to check that pair itself.\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// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\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 formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string | undefined, currency: string, sign: SignDisplay) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n  // and `sign` is one of three known words, so joining on one cannot make two\n  // different option sets share a key.\n  const key = `${locale ?? ''}|${currency}|${sign}`;\n  const cached = formatters.get(key);\n  if (cached) {\n    return cached;\n  }\n  const formatter = new Intl.NumberFormat(locale, {\n    currency,\n    signDisplay: sign,\n    style: 'currency'\n  });\n  formatters.set(key, formatter);\n  return formatter;\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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"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","CurrencySignDisplay","tone","CurrencyTone","value","Currency","t0","$","t1","render","t2","t3","props","undefined","provided","t4","t5","t6","formatCurrency","t7","resolveTone","t8","children","t9","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set","_c","props","stylex.props"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\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 React Aria's `I18nProvider`, as\n   * the date and number fields do, so an amount reads in the locale the app\n   * set — and to the browser's language where there is no provider.\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?: CurrencySignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   *\n   * The positive and negative roles are guaranteed legible on the surface\n   * family, which is what the library's own tokens and every demo scheme are\n   * held to. Over a container of its own — a selected row, a filled card —\n   * the pair is one colour family on top of another and is not guaranteed, so\n   * a custom theme placing one there has to check that pair itself.\n   * @default 'auto'\n   */\n  tone?: CurrencyTone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype CurrencySignDisplay = 'always' | 'auto' | 'never';\ntype CurrencyTone = '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  // React Aria holds the locale steady through hydration, where the runtime's\n  // default differs between the server and the browser and the amount's text\n  // would not match.\n  const provided = useLocale().locale;\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale: locale ?? provided,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\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;\n  sign: CurrencySignDisplay;\n}) {\n  return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string, currency: string, sign: CurrencySignDisplay) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n  // and `sign` is one of three known words, so joining on one cannot make two\n  // different option sets share a key.\n  const key = `${locale}|${currency}|${sign}`;\n  const cached = formatters.get(key);\n  if (cached) {\n    return cached;\n  }\n  const formatter = new Intl.NumberFormat(locale, {\n    currency,\n    signDisplay: sign,\n    style: 'currency'\n  });\n  formatters.set(key, formatter);\n  return formatter;\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: CurrencyTone) {\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, CurrencySignDisplay, CurrencyTone };\nexport default Currency;"],"mappings":";;;;;;;AAqBA,MAAMS,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AACA,MAAMC,QAAQ;CACZC,UAAU;EACRC,QAAQ;EACRH,OAAO;CACT;CACAI,SAAS;EACPD,QAAQ;EACRH,OAAO;CACT;CACAK,UAAU;EACRF,QAAQ;EACRH,OAAO;CACT;AACF;AAMA,MAAMM,aAAa;AAsCnB,SAAAU,SAAAC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAkB,MAAA,EAAAuB,UAAAU,IAAAT,QAAAU,QAAAT,MAAAU,IAAAR,MAAAS,IAAAP,OAAA,GAAAQ,YAAAN;CAChB,MAAAR,WAAAU,OAAAK,KAAAA,IAAA,QAAAL;CAGA,MAAAR,OAAAU,OAAAG,KAAAA,IAAA,SAAAH;CACA,MAAAR,OAAAS,OAAAE,KAAAA,IAAA,SAAAF;CAOA,MAAAG,WAAiBrC,UAAU,CAAC,CAAAsB;CAEV,MAAAgB,KAAA;CAKJ,MAAAC,KAAAjB,UAAAe;CAAkB,IAAAG;CAAA,IAAAV,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAS,MAAAT,EAAA,OAAAH,OAAA;EAFlBa,KAAAC,eAAed,OAAO;GAAAN;GAAAC,QAEtBiB;GAAkBhB;EAE5B,CAAC;EAACO,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAS;EAAAT,EAAA,KAAAH;EAAAG,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CACC,MAAAY,KAAAvC,YAAYJ,MAAaO,OAAMC,MAAOM,MAAM8B,YAAYhB,OAAOF,IAAI,EAAE,GAAGU,OAAK;CAAC,IAAAS;CAAA,IAAAd,EAAA,OAAAK,WAAAL,EAAA,OAAAU,MAAAV,EAAA,OAAAY,IAAA;EAP5EE,KAAA;GAAA,GACFT;GAAKU,UACEL;GAIR,GACCE;EACL;EAACZ,EAAA,KAAAK;EAAAL,EAAA,KAAAU;EAAAV,EAAA,KAAAY;EAAAZ,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAE,UAAAF,EAAA,QAAAc,IAAA;EAVcE,KAAA;GAAAC,gBACCT;GAAMH,OACfS;GAQNZ;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OAZM5B,UAAU4C,EAYhB;AAAC;AAoBJ,MAAME,6BAAa,IAAIC,IAA+B;AAMtD,SAASR,eAAed,OAAeyB,SAIpC;CACD,OAAOC,aAAaD,QAAQ9B,QAAQ8B,QAAQ/B,UAAU+B,QAAQ7B,IAAI,CAAC,CAAC+B,cAAc3B,KAAK,CAAC,CAAC4B,KAAIC,SAAQA,KAAKC,SAAS,cAAcvC,aAAasC,KAAK7B,KAAK,CAAC,CAAC+B,KAAK,EAAE;AACnK;AACA,SAASL,aAAa/B,QAAgBD,UAAkBE,MAA2B;CAIjF,MAAMoC,MAAM,GAAGrC,OAAM,GAAID,SAAQ,GAAIE;CACrC,MAAMqC,SAASZ,WAAWa,IAAIF,GAAG;CACjC,IAAIC,QACF,OAAOA;CAET,MAAME,YAAY,IAAIZ,KAAKC,aAAa7B,QAAQ;EAC9CD;EACA0C,aAAaxC;EACbyC,OAAO;CACT,CAAC;CACDhB,WAAWiB,IAAIN,KAAKG,SAAS;CAC7B,OAAOA;AACT;AAKA,SAASnB,YAAYhB,OAAeF,MAAoB;CACtD,IAAIA,SAAS,QACX,OAAOA;CAET,IAAIE,QAAQ,GACV,OAAO;CAET,IAAIA,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}

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

@@ -30,7 +30,7 @@ import { DateField, DateInput } from "react-aria-components";
 * the field as a whole, which is the element a layout positions.
 */
 function DateField$1(t0) {
-	const $ = c(21);
+	const $ = c(22);
 	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;
@@ -53,10 +53,11 @@ function DateField$1(t0) {
 		$[2] = t6;
 	} else t6 = $[2];
 	let t7;
-	if ($[3] !== floatingLabel || $[4] !== label || $[5] !== leadingIcon || $[6] !== trailingIcon || $[7] !== variant) {
+	if ($[3] !== floatingLabel || $[4] !== label || $[5] !== leadingIcon || $[6] !== props$1.isRequired || $[7] !== trailingIcon || $[8] !== variant) {
 		t7 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
+			isRequired: props$1.isRequired,
 			label,
 			leading: leadingIcon,
 			trailing: trailingIcon,
@@ -66,22 +67,23 @@ function DateField$1(t0) {
 		$[3] = floatingLabel;
 		$[4] = label;
 		$[5] = leadingIcon;
-		$[6] = trailingIcon;
-		$[7] = variant;
-		$[8] = t7;
-	} else t7 = $[8];
+		$[6] = props$1.isRequired;
+		$[7] = trailingIcon;
+		$[8] = variant;
+		$[9] = t7;
+	} else t7 = $[9];
 	let t8;
-	if ($[9] !== description || $[10] !== error) {
+	if ($[10] !== description || $[11] !== error) {
 		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[9] = description;
-		$[10] = error;
-		$[11] = t8;
-	} else t8 = $[11];
+		$[10] = description;
+		$[11] = error;
+		$[12] = t8;
+	} else t8 = $[12];
 	let t9;
-	if ($[12] !== T0 || $[13] !== isDisabled || $[14] !== props$1 || $[15] !== t4 || $[16] !== t5 || $[17] !== t7 || $[18] !== t8 || $[19] !== validationBehavior) {
+	if ($[13] !== T0 || $[14] !== isDisabled || $[15] !== props$1 || $[16] !== t4 || $[17] !== t5 || $[18] !== t7 || $[19] !== t8 || $[20] !== validationBehavior) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t4,
@@ -90,16 +92,16 @@ function DateField$1(t0) {
 			...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];
+		$[13] = T0;
+		$[14] = isDisabled;
+		$[15] = props$1;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = validationBehavior;
+		$[21] = t9;
+	} else t9 = $[21];
 	return t9;
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","t8","t9","DateField","_c","props","RACDateField","stylex.props","RACDateInput"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } 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 = 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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\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  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\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 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> & RefAttributes<HTMLDivElement>) {\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        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,SAAAQ,YAAAyB,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAwC,MAAA,EAAAwB,aAAAC,OAAAC,eAAAQ,IAAAC,YAAAC,IAAAT,OAAAC,aAAAE,cAAAC,SAAAM,IAAA,GAAAC,YAAAN;CAGtC,MAAAN,gBAAAQ,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAL,UAAAM,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BvB,2BAA2B;CAC9C,MAAAwB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAT,EAAA,OAAAR,OAAA;EAAuCiB,KAAA1B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAvB,oBAAoBd,MAAaS,YAAW6B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAa,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAACY,WAAD;GAAa,GAAKnD,MAAaa,cAAa6B,KAAM;GAC/C9B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdlBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAS3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ec,UAAAA;EAVO,CAAA;EAeEZ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAO,oBAAA;EAjBrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAC,EAjBgB;;EAkBHjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAO;EAAAP,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OAlBVkB;AAkBU"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","renderSegment","segmentStyles","mergeStatefulStyles","Omit","T","className","description","error","floatingLabel","label","leadingIcon","style","trailingIcon","variant","t0","$","t1","isDisabled","t2","t3","props","undefined","validationBehavior","T0","t4","t5","root","t6","Symbol","for","input","t7","isRequired","t8","t9","DateField","_c","props","RACDateField","stylex.props","RACDateInput"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } 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 type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } 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 = 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  /**\n   * The message shown instead of the description, which also marks the\n   * field invalid.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\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  /**\n   * An icon at the box's leading end, in the page's 24dp size. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /**\n   * An icon at the box's trailing end, in the page's 24dp size. An icon\n   * drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\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 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> & RefAttributes<HTMLDivElement>) {\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 isRequired={props.isRequired} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldSegments>\n          <RACDateInput {...stylex.props(segmentStyles.input)}>\n            {renderSegment}\n          </RACDateInput>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACDateField>;\n}\nexport type { DateFieldProps };\nexport default DateField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,SAAAQ,YAAAyB,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAwC,MAAA,EAAAwB,aAAAC,OAAAC,eAAAQ,IAAAC,YAAAC,IAAAT,OAAAC,aAAAE,cAAAC,SAAAM,IAAA,GAAAC,YAAAN;CAGtC,MAAAN,gBAAAQ,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAL,UAAAM,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BvB,2BAA2B;CAC9C,MAAAwB,KAAAjC;CAAY,IAAAkC;CAAA,IAAAT,EAAA,OAAAR,OAAA;EAAuCiB,KAAA1B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAyD,MAAAU,KAAAvB,oBAAoBd,MAAaS,YAAW6B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAZ,EAAA,OAAAa,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAACa,WAAD;GAAa,GAAKpD,MAAaa,cAAa6B,KAAM;GAC/C9B,UAAAA;EADU,CAAA,EADD,CAAA;EAIEe,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAK,QAAAY,cAAAjB,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EAdlBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAS3B,aAAA;GAAwB,YAAAY,QAAKY;GAAoBvB;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Gc,UAAAA;EAVO,CAAA;EAeEZ,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAK,QAAAY;EAAAjB,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAT,eAAAS,EAAA,QAAAR,OAAA;EACX0B,KAAA,oBAAC,cAAD;GAA2B3B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAQ,MAAAR,EAAA,QAAAE,cAAAF,EAAA,QAAAK,WAAAL,EAAA,QAAAS,MAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAgB,MAAAhB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAO,oBAAA;EAjBrDY,KAAA,qBAAC,IAAD;GAA6BjB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAgBAE,EAjBgB;;EAkBHlB,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAO;EAAAP,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OAlBVmB;AAkBU"}

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

@@ -37,11 +37,19 @@ type DatePickerProps$1<T extends DateValue = DateValue> = Omit<DatePickerProps<T
    * in `em` takes that size from the slot.
    */
   leadingIcon?: ReactNode;
+  /**
+   * Whether the calendar's header draws the month and the year as menu
+   * buttons, each opening a list of them in the grid's place — see
+   * `Calendar`.
+   * @default false
+   */
+  showMonthYearMenus?: boolean;
   /** A function may compute the style from the picker's render state. */
   style?: DatePickerProps<T>['style'];
   /**
    * What the button that opens the calendar is called, for a screen reader.
-   * @default 'Choose a date'
+   * Left out, React Aria names it in the reader's locale — "Calendar" in
+   * English, followed by the field's own label.
    */
   triggerLabel?: string;
   /**
@@ -70,7 +78,7 @@ type DatePickerProps$1<T extends DateValue = DateValue> = Omit<DatePickerProps<T
  * The call site's `className` and `style` land on the picker as a whole,
  * which is the element a layout positions.
  */
-declare function DatePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, triggerLabel, variant, ...props }: DatePickerProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function DatePicker$1<T extends DateValue>({ container, description, error, floatingLabel, isDisabled, label, leadingIcon, showMonthYearMenus, triggerLabel, variant, ...props }: DatePickerProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type DatePickerProps$1 as DatePickerProps, DatePicker$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

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