@kanso-labs/kanso-ui 0.33.0 → 0.34.0

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

@@ -1,7 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
 import { c } from "react/compiler-runtime";
@@ -45,7 +45,7 @@ function DateField$1(t0) {
 	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, {
+		t6 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsx(DateInput, {
 			...props(segmentStyles.input),
 			children: renderSegment
 		}) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateFieldProps","RACDateFieldProps","stylex","DateField","RACDateField","DateInput","RACDateInput","FieldVariant","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 type { FieldVariant } from '../../field';\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 = 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>) {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAAK,YAAAyB,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,KAAAlC;CAAY,IAAAmC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,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"}
+{"version":3,"file":"index.js","names":["ReactNode","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","$","_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 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>) {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAAK,YAAAyB,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,KAAAlC;CAAY,IAAAmC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAW1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADD,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;EAdlBmB,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

@@ -4,7 +4,7 @@ import { CalendarGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import Calendar$1 from "../calendar/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
@@ -69,7 +69,7 @@ function DatePicker$1(t0) {
 	} else t8 = $[4];
 	let t9;
 	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(Group, {
+		t9 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsx(Group, {
 			...t8,
 			children: /* @__PURE__ */ jsx(DateInput, {
 				...props(segmentStyles.input),

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

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

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

@@ -3,7 +3,7 @@ import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CalendarGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { overlay } from "../../styles/overlay.js";
 import { picker, triggerClassName } from "../../styles/picker.js";
 import { segmentStyles } from "../../segments/styles.js";
@@ -104,7 +104,7 @@ function DateRangePicker$1(t0) {
 	} else t12 = $[8];
 	let t13;
 	if ($[9] !== t11) {
-		t13 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+		t13 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsxs(Group, {
 			...t9,
 			children: [
 				t10,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\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  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, 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, the same swap `DatePicker` makes.\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 DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<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 per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldValue>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":";;;;;;;;;;;;;;;AAqGA,SAASiD,gBAAgBF,cAAsB;CAC7C,OAAO,oBAAC,QAAD;EAAW,cAAYA;EAAc,WAAWhB;EACnD,UAAA,oBAAC,eAAD,EAAe,GAAI3B,MAAa0B,OAAOqB,YAAY,EAAE,CAAA;CAC5C,CAAA;AACf;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAA1C,kBAAA2C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAA8C,MAAA,EAAAhB,WAAAE,aAAAC,OAAAC,eAAAa,IAAAC,YAAAC,IAAAd,OAAAC,aAAAC,WAAAa,IAAAX,cAAAY,IAAAX,SAAAY,IAAA,GAAAV,YAAAE;CAI5C,MAAAV,gBAAAa,OAAAM,KAAAA,IAAA,OAAAN;CACA,MAAAC,aAAAC,OAAAI,KAAAA,IAAA,QAAAJ;CAGA,MAAAZ,YAAAa,OAAAG,KAAAA,IAAA,MAAAH;CACA,MAAAX,eAAAY,OAAAE,KAAAA,IAAA,wBAAAF;CACA,MAAAX,UAAAY,OAAAC,KAAAA,IAAA,WAAAD;CAGA,MAAAE,qBAA2BvC,2BAA2B;CAC9C,MAAAwC,KAAArD;CAAkB,IAAAsD;CAAA,IAAAX,EAAA,OAAAZ,OAAA;EAAuCuB,KAAA1C,YAAYmB,KAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAyD,MAAAY,KAAArC,oBAAoBxB,MAAaiB,YAAW6C,IAAK,GAAGhB,OAAK;CAAC,IAAAiB;CAAA,IAAAd,EAAA,OAAAN,cAAA;EAe1LoB,KAAAlB,gBAAgBF,YAAY;EAACM,EAAA,KAAAN;EAAAM,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAgB,OAAAC,IAAA,2BAAA,GAAA;EAEnBF,KAAAhE,MAAa0B,OAAMyC,KAAM;EAAClB,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,OAAAgB,OAAAC,IAAA,2BAAA,GAAA;EACtCE,MAAA,oBAAC,WAAD;GAAmB,MAAA;GAAO,GAAKpE,MAAasB,cAAa+C,KAAM;GAC5DhD,UAAAA;EADU,CAAA;EAEE4B,EAAA,KAAAmB;CAAA,OAAAA,MAAAnB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,OAAAR,WAAA;EACf6B,MAAA,oBAAA,QAAA;GAAkB,eAAA;GAAiB,WAAA;GAChC7B,UAAAA;EACI,CAAA;EAAAQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAqB;CAAA,OAAAA,MAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,OAAAgB,OAAAC,IAAA,2BAAA,GAAA;EACPK,MAAA,oBAAC,WAAD;GAAmB,MAAA;GAAK,GAAKvE,MAAasB,cAAa+C,KAAM;GAC1DhD,UAAAA;EADU,CAAA;EAEE4B,EAAA,KAAAsB;CAAA,OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,OAAAqB,KAAA;EAVnBE,MAAA,oBAAC,YAAD,EAAA,UACE,qBAAC,OAAD;GAAS,GAAKR;GAAd,UAAA;IACEI;IAGAE;IAGAC;GAPO;EADA,CAAA,EAAA,CAAA;EAYEtB,EAAA,KAAAqB;EAAArB,EAAA,MAAAuB;CAAA,OAAAA,MAAAvB,EAAA;CAAA,IAAAwB;CAAA,IAAAxB,EAAA,QAAAX,iBAAAW,EAAA,QAAAV,SAAAU,EAAA,QAAAT,eAAAS,EAAA,QAAAuB,OAAAvB,EAAA,QAAAc,MAAAd,EAAA,QAAAL,SAAA;EA3Bf6B,MAAA,oBAAC,UAAD;GAAyBnC;GAU3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAIzB,UAAAuB;GAAwCnB;GAC9C4B,UAAAA;EAfO,CAAA;EA4BEvB,EAAA,MAAAX;EAAAW,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAuB;EAAAvB,EAAA,MAAAc;EAAAd,EAAA,MAAAL;EAAAK,EAAA,MAAAwB;CAAA,OAAAA,MAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAb,eAAAa,EAAA,QAAAZ,OAAA;EACXqC,MAAA,oBAAC,cAAD;GAA2BtC;GAAoBC;EAAK,CAAA;EAAIY,EAAA,MAAAb;EAAAa,EAAA,MAAAZ;EAAAY,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAgB,OAAAC,IAAA,2BAAA,GAAA;EAGjBS,MAAA3E,MAAayB,QAAOmD,OAAQlD,OAAMmD,OAAQ;EAAC5B,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA6B;CAAA,IAAA7B,EAAA,QAAAgB,OAAAC,IAAA,2BAAA,GAAA;EACjEY,MAAA9E,MAAayB,QAAOsD,aAAcxD,MAAKyD,IAAK;EAAC/B,EAAA,MAAA6B;CAAA,OAAAA,MAAA7B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAAV,OAAA;EAA5D0C,MAAA,oBAAC,QAAD;GAAU,GAAKH;GACb,UAAA,oBAAC,iBAAD,EAA2BvC,cAAAA,MAAK,CAAA;EADxB,CAAA;EAEEU,EAAA,MAAAV;EAAAU,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,IAAAiC;CAAA,IAAAjC,EAAA,QAAAf,aAAAe,EAAA,QAAAgC,KAAA;EALdC,MAAA,oBAAC,SAAD;GAEwBhD,0BAAAA;GAAS,GAAMyC;GACrCM,UAAAA;EAHS,CAAA;EAMEhC,EAAA,MAAAf;EAAAe,EAAA,MAAAgC;EAAAhC,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAU,MAAAV,EAAA,QAAAG,cAAAH,EAAA,QAAAH,WAAAG,EAAA,QAAAwB,OAAAxB,EAAA,QAAAyB,OAAAzB,EAAA,QAAAiC,OAAAjC,EAAA,QAAAW,MAAAX,EAAA,QAAAY,MAAAZ,EAAA,QAAAS,oBAAA;EArCVyB,MAAA,qBAAC,IAAD;GAAmC/B;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMZ;GAAK,GAAMe;GAArI,UAAA;IACHY;IA6BAC;IACAQ;GA/BsB;;EAsCHjC,EAAA,MAAAU;EAAAV,EAAA,MAAAG;EAAAH,EAAA,MAAAH;EAAAG,EAAA,MAAAwB;EAAAxB,EAAA,MAAAyB;EAAAzB,EAAA,MAAAiC;EAAAjC,EAAA,MAAAW;EAAAX,EAAA,MAAAY;EAAAZ,EAAA,MAAAS;EAAAT,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAAA,OAtChBkC;AAsCgB"}
+{"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldSegments","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldSegments } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the *modal*\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.*` and `modal.*`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// **The dash is decoration, not content.** It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// **Both segment groups and the trigger sit in one React Aria `Group`.** The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = Omit<RACDateRangePickerProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the picker's render state. */\n  className?: RACDateRangePickerProps<T>['className'];\n  /**\n   * Where to portal the calendar. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the calendar renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** Supporting text under the field. */\n  description?: string;\n  /**\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  /**\n   * What is drawn between the two segment groups. Decoration — a screen\n   * reader is told which group is which by React Aria.\n   * @default '–'\n   */\n  separator?: string;\n  /** A function may compute the style from the picker's render state. */\n  style?: RACDateRangePickerProps<T>['style'];\n  /**\n   * What the button that opens the calendar is called, for a screen reader.\n   * @default 'Choose a date range'\n   */\n  triggerLabel?: string;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n  return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n      <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n    </RACButton>;\n}\n\n/**\n * A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <DateRangePicker\n *   defaultValue={{\n *     end: new CalendarDate(2026, 9, 20),\n *     start: new CalendarDate(2026, 9, 15),\n *   }}\n *   label=\"Label\"\n * />\n * ```\n *\n * The segments are `DateField`'s and the calendar is `RangeCalendar`, 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, the same swap `DatePicker` makes.\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 DateRangePicker<T extends DateValue>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  separator = '–',\n  triggerLabel = 'Choose a date range',\n  variant = 'filled',\n  ...props\n}: DateRangePickerProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACDateRangePicker<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 per segment group, neither carrying a placeholder, so\n    // the CSS half reads as populated on its own; the React half reads\n    // React Aria's input context, which a picker does not provide.\n    // Without this the notch stays shut across segments already showing\n    // `mm/dd/yyyy`.\n    isPopulated label={label} leading={leadingIcon}\n    // In the chrome's trailing slot rather than on the segments' line —\n    // see the same prop on DatePicker for what that slot does and why\n    // the trigger still opens from there.\n    trailing={calendarTrigger(triggerLabel)} variant={variant}>\n        <FieldSegments>\n          <RACGroup {...stylex.props(picker.group)}>\n            <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n            <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n              {separator}\n            </span>\n            <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n              {renderSegment}\n            </RACDateInput>\n          </RACGroup>\n        </FieldSegments>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n        <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n          <RangeCalendar aria-label={label} />\n        </RACDialog>\n      </RACPopover>\n    </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

package/dist/components/text-area/index.d.ts

@@ -1,4 +1,5 @@
 import { FieldVariant } from "../../field/index.js";
+import { ReactNode } from "react";
 import { TextFieldProps } from "react-aria-components";
 //#region src/components/text-area/index.d.ts
 type TextAreaProps = {
@@ -50,12 +51,24 @@ type TextAreaProps = {
    * no label is a box a screen reader cannot name.
    */
   label: string;
+  /**
+   * An icon at the start of the box, before the label and the text: the
+   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes
+   * that size from the slot.
+   */
+  leadingIcon?: ReactNode;
   /**
    * How many lines of text the field shows: the least it shows while it
    * grows, or all it shows when it does not.
    * @default 3
    */
   rows?: number;
+  /**
+   * An icon at the end of the box, after the text: the page's 24dp trailing
+   * icon, in the muted role and the error role while the field has an error.
+   * An icon drawn in `em` takes that size from the slot.
+   */
+  trailingIcon?: ReactNode;
   /**
    * The filled box, or the outlined one: no fill, an outline that thickens
    * and takes the primary role while focused, and the label cutting it once
@@ -71,11 +84,15 @@ type TextAreaProps = {
  * `className` and `style` land on the field as a whole, which is the element
  * a layout positions.
  *
+ * The text fields page's configurations are props: `leadingIcon` and
+ * `trailingIcon` at the box's ends, and `characterCount` opposite the
+ * supporting text, counting against `maxLength`.
+ *
  * The box, label, control and message are the field chrome in `src/field`,
  * shared with every other field; this component is what React Aria's
  * `TextField` puts around them.
  */
-declare function TextArea$1({ autosize, characterCount, characterLimitLabel, description, error, floatingLabel, isDisabled, label, rows, variant, ...props }: TextAreaProps): import("react").JSX.Element;
+declare function TextArea$1({ autosize, characterCount, characterLimitLabel, description, error, floatingLabel, isDisabled, label, leadingIcon, rows, trailingIcon, variant, ...props }: TextAreaProps): import("react").JSX.Element;
 //#endregion
 export { type TextAreaProps, TextArea$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -13,13 +13,17 @@ import { TextField } from "react-aria-components";
 * `className` and `style` land on the field as a whole, which is the element
 * a layout positions.
 *
+* The text fields page's configurations are props: `leadingIcon` and
+* `trailingIcon` at the box's ends, and `characterCount` opposite the
+* supporting text, counting against `maxLength`.
+*
 * The box, label, control and message are the field chrome in `src/field`,
 * shared with every other field; this component is what React Aria's
 * `TextField` puts around them.
 */
 function TextArea$1(t0) {
-	const $ = c(25);
-	const { autosize: t1, characterCount: t2, characterLimitLabel, description, error, floatingLabel: t3, isDisabled: t4, label, rows: t5, variant: t6, ...props$1 } = t0;
+	const $ = c(27);
+	const { autosize: t1, characterCount: t2, characterLimitLabel, description, error, floatingLabel: t3, isDisabled: t4, label, leadingIcon, rows: t5, trailingIcon, variant: t6, ...props$1 } = t0;
 	const autosize = t1 === void 0 ? true : t1;
 	const characterCount = t2 === void 0 ? false : t2;
 	const floatingLabel = t3 === void 0 ? true : t3;
@@ -46,22 +50,26 @@ function TextArea$1(t0) {
 		$[4] = t9;
 	} else t9 = $[4];
 	let t10;
-	if ($[5] !== floatingLabel || $[6] !== label || $[7] !== t9 || $[8] !== variant) {
+	if ($[5] !== floatingLabel || $[6] !== label || $[7] !== leadingIcon || $[8] !== t9 || $[9] !== trailingIcon || $[10] !== variant) {
 		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			label,
+			leading: leadingIcon,
 			multiline: true,
+			trailing: trailingIcon,
 			variant,
 			children: t9
 		});
 		$[5] = floatingLabel;
 		$[6] = label;
-		$[7] = t9;
-		$[8] = variant;
-		$[9] = t10;
-	} else t10 = $[9];
+		$[7] = leadingIcon;
+		$[8] = t9;
+		$[9] = trailingIcon;
+		$[10] = variant;
+		$[11] = t10;
+	} else t10 = $[11];
 	let t11;
-	if ($[10] !== characterCount || $[11] !== characterLimitLabel || $[12] !== description || $[13] !== error || $[14] !== props$1.maxLength) {
+	if ($[12] !== characterCount || $[13] !== characterLimitLabel || $[14] !== description || $[15] !== error || $[16] !== props$1.maxLength) {
 		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			characterCount,
 			characterLimitLabel,
@@ -69,15 +77,15 @@ function TextArea$1(t0) {
 			error,
 			maxLength: props$1.maxLength
 		});
-		$[10] = characterCount;
-		$[11] = characterLimitLabel;
-		$[12] = description;
-		$[13] = error;
-		$[14] = props$1.maxLength;
-		$[15] = t11;
-	} else t11 = $[15];
+		$[12] = characterCount;
+		$[13] = characterLimitLabel;
+		$[14] = description;
+		$[15] = error;
+		$[16] = props$1.maxLength;
+		$[17] = t11;
+	} else t11 = $[17];
 	let t12;
-	if ($[16] !== T0 || $[17] !== isDisabled || $[18] !== props$1 || $[19] !== t10 || $[20] !== t11 || $[21] !== t7 || $[22] !== t8 || $[23] !== validationBehavior) {
+	if ($[18] !== T0 || $[19] !== isDisabled || $[20] !== props$1 || $[21] !== t10 || $[22] !== t11 || $[23] !== t7 || $[24] !== t8 || $[25] !== validationBehavior) {
 		t12 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t7,
@@ -86,16 +94,16 @@ function TextArea$1(t0) {
 			...t8,
 			children: [t10, t11]
 		});
-		$[16] = T0;
-		$[17] = isDisabled;
-		$[18] = props$1;
-		$[19] = t10;
-		$[20] = t11;
-		$[21] = t7;
-		$[22] = t8;
-		$[23] = validationBehavior;
-		$[24] = t12;
-	} else t12 = $[24];
+		$[18] = T0;
+		$[19] = isDisabled;
+		$[20] = props$1;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t7;
+		$[24] = t8;
+		$[25] = validationBehavior;
+		$[26] = t12;
+	} else t12 = $[26];
 	return t12;
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","autosize","characterCount","characterLimitLabel","description","error","floatingLabel","label","rows","variant","Omit","TextArea","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","t11","maxLength","t12"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, underline and message as TextField, holding a\n// text area rather than an input. The page gives the box 56dp by default\n// and 8dp of padding above and below, with the label vertically centred\n// while the field is empty; a box holding more than one line keeps the\n// padding and grows, which is the chrome's `multiline` box. The page draws\n// no resize handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\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 sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  rows = 3,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} multiline variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":";;;;;;;;;;;;;;;;;;;AA8FA,SAAAwB,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAkB,MAAA,EAAAb,UAAAc,IAAAb,gBAAAc,IAAAb,qBAAAC,aAAAC,OAAAC,eAAAW,IAAAC,YAAAC,IAAAZ,OAAAC,MAAAY,IAAAX,SAAAY,IAAA,GAAAC,YAAAV;CAChB,MAAAX,WAAAc,OAAAQ,KAAAA,IAAA,OAAAR;CACA,MAAAb,iBAAAc,OAAAO,KAAAA,IAAA,QAAAP;CAIA,MAAAV,gBAAAW,OAAAM,KAAAA,IAAA,OAAAN;CACA,MAAAC,aAAAC,OAAAI,KAAAA,IAAA,QAAAJ;CAEA,MAAAX,OAAAY,OAAAG,KAAAA,IAAA,IAAAH;CACA,MAAAX,UAAAY,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2B1B,2BAA2B;CAC9C,MAAA2B,KAAAlC;CAAY,IAAAmC;CAAA,IAAAb,EAAA,OAAAR,OAAA;EAAoCqB,KAAA7B,YAAYQ,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAyD,MAAAc,KAAA5B,oBAAoBV,MAAaO,YAAWgC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAhB,EAAA,OAAAZ,YAAAY,EAAA,OAAAL,MAAA;EAEvLqB,KAAA,oBAAC,eAAD;GAAyB5B;GAAgBO;EAAI,CAAA;EAAIK,EAAA,KAAAZ;EAAAY,EAAA,KAAAL;EAAAK,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAgB,MAAAhB,EAAA,OAAAJ,SAAA;EADnDqB,MAAA,oBAAC,UAAD;GAAyBxB;GAAsBC;GAAO,WAAA;GAAmBE;GACvEoB,UAAAA;EADO,CAAA;EAEEhB,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAgB;EAAAhB,EAAA,KAAAJ;EAAAI,EAAA,KAAAiB;CAAA,OAAAA,MAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAX,kBAAAW,EAAA,QAAAV,uBAAAU,EAAA,QAAAT,eAAAS,EAAA,QAAAR,SAAAQ,EAAA,QAAAS,QAAAU,WAAA;EACXD,MAAA,oBAAC,cAAD;GAA8B7B;GAAqCC;GAAkCC;GAAoBC;GAAkB,WAAAiB,QAAKU;EAAU,CAAA;EAAInB,EAAA,MAAAX;EAAAW,EAAA,MAAAV;EAAAU,EAAA,MAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAS,QAAAU;EAAAnB,EAAA,MAAAkB;CAAA,OAAAA,MAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAY,MAAAZ,EAAA,QAAAK,cAAAL,EAAA,QAAAS,WAAAT,EAAA,QAAAiB,OAAAjB,EAAA,QAAAkB,OAAAlB,EAAA,QAAAa,MAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAW,oBAAA;EAJ3JS,MAAA,qBAAC,IAAD;GAA0Bf;GAAuB,WAAAQ;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA5H,UAAA,CACHG,KAGAC,GAJgB;;EAKHlB,EAAA,MAAAY;EAAAZ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAW;EAAAX,EAAA,MAAAoB;CAAA,OAAAA,MAAApB,EAAA;CAAA,OALVoB;AAKU"}
+{"version":3,"file":"index.js","names":["ReactNode","TextFieldProps","RACTextFieldProps","stylex","TextField","RACTextField","FieldVariant","FieldBox","FieldMessage","FieldTextArea","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","TextAreaProps","autosize","characterCount","characterLimitLabel","description","error","floatingLabel","label","leadingIcon","rows","trailingIcon","variant","Omit","TextArea","t0","$","_c","t1","t2","t3","isDisabled","t4","t5","t6","props","undefined","validationBehavior","T0","t7","t8","root","t9","t10","t11","maxLength","t12"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TextFieldProps as RACTextFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { TextField as RACTextField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldTextArea } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The text fields page's multi-line configuration of the filled field: the\n// same box, floating label, icons, underline and message as TextField,\n// holding a text area rather than an input. The page gives the box 56dp by\n// default and 8dp of padding above and below, with the label vertically\n// centred while the field is empty; a box holding more than one line keeps\n// the padding and grows, which is the chrome's `multiline` box, and its\n// icons stay centred in its height as it does. The page draws no resize\n// handle, and none is drawn here.\n//\n// Its own component rather than a prop of TextField, so `rows` and\n// `autosize` stay off TextField's type and `numeric` stays off this one.\n\ntype TextAreaProps = {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  autosize?: boolean;\n  /**\n   * Whether to count the characters the field holds at the end of the\n   * supporting line, against `maxLength` where there is one, as the text\n   * fields page's character counter does.\n   * @default false\n   */\n  characterCount?: boolean;\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field on focus rather than as the value changes, so it\n   * names the limit and not what is left of it. The visible count is hidden\n   * from the tree, which is what this replaces.\n   * @default `Up to ${maxLength} characters`\n   */\n  characterLimitLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\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 sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a text area with\n   * no label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the text: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  rows?: number;\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTextFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled multi-line input. Its value is React Aria's: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own — and\n * `onChange` is handed the string, not the event. The call site's\n * `className` and `style` land on the field as a whole, which is the element\n * a layout positions.\n *\n * The text fields page's configurations are props: `leadingIcon` and\n * `trailingIcon` at the box's ends, and `characterCount` opposite the\n * supporting text, counting against `maxLength`.\n *\n * The box, label, control and message are the field chrome in `src/field`,\n * shared with every other field; this component is what React Aria's\n * `TextField` puts around them.\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  rows = 3,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTextField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <FieldTextArea autosize={autosize} rows={rows} />\n      </FieldBox>\n      <FieldMessage characterCount={characterCount} characterLimitLabel={characterLimitLabel} description={description} error={error} maxLength={props.maxLength} />\n    </RACTextField>;\n}\nexport type { TextAreaProps };\nexport default TextArea;"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
-import { FieldBox, FieldMessage, FieldValue } from "../../field/index.js";
+import { FieldBox, FieldMessage, FieldSegments } from "../../field/index.js";
 import { segmentStyles } from "../../segments/styles.js";
 import { renderSegment } from "../../segments/index.js";
 import { c } from "react/compiler-runtime";
@@ -44,7 +44,7 @@ function TimeField$1(t0) {
 	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, {
+		t6 = /* @__PURE__ */ jsx(FieldSegments, { children: /* @__PURE__ */ jsx(DateInput, {
 			...props(segmentStyles.input),
 			children: renderSegment
 		}) });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TimeFieldProps","RACTimeFieldProps","TimeValue","stylex","DateInput","RACDateInput","TimeField","RACTimeField","FieldVariant","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/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\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 time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue = TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<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?: RACTimeFieldProps<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 time 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 a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\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    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAO,YAAAuB,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,KAAAhC;CAAY,IAAAiC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAM1LF,KAAA,oBAAC,YAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,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;EATfmB,KAAA,oBAAC,UAAD;GAAyBxB;GAI3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EALO,CAAA;EAUEb,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;EAZrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAWAC,EAZgB;;EAaHlB,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,OAbVmB;AAaU"}
+{"version":3,"file":"index.js","names":["ReactNode","TimeFieldProps","RACTimeFieldProps","TimeValue","stylex","DateInput","RACDateInput","TimeField","RACTimeField","FieldVariant","FieldBox","FieldMessage","FieldSegments","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/time-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TimeFieldProps as RACTimeFieldProps, TimeValue } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, TimeField as RACTimeField } 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 time typed a segment at a time. Every part of it is DateField's, from\n// `src/segments` — the segment treatment, the muted placeholder, the filled\n// focus and the punctuation between — so a time on a form and a date on the\n// same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that the date field's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the reader's locale, not a prop.** React\n// Aria decides from the locale whether there is a day-period segment at all,\n// so a field under `I18nProvider` with `en-GB` shows a 24-hour clock and the\n// same field under `en-US` shows AM and PM. Nothing here overrides it, and\n// `hourCycle` is React Aria's own for a page that has to.\n\ntype TimeFieldProps<T extends TimeValue = TimeValue> = Omit<RACTimeFieldProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTimeFieldProps<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?: RACTimeFieldProps<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 time 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 a `Time` from this package's `./date` subpath.\n *\n * ```tsx\n * import { Time } from '@kanso-labs/kanso-ui/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the reader's\n * locale, through React Aria's `I18nProvider`. `granularity` takes it down\n * to seconds, and `minValue` and `maxValue` bound what may be typed.\n *\n * The segments are `DateField`'s, and the box, label and message are the\n * field chrome in `src/field`. The call site's `className` and `style` land\n * on the field as a whole, which is the element a layout positions.\n */\nfunction TimeField<T extends TimeValue>({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TimeFieldProps<T>) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACTimeField<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // Always populated, for the reason DateField's own comment gives: the\n    // box reads an `<input>` to decide, and a segmented field has none —\n    // its segments hold the value's line from the first render.\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    </RACTimeField>;\n}\nexport type { TimeFieldProps };\nexport default TimeField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFA,SAAAO,YAAAuB,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,KAAAhC;CAAY,IAAAiC;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAuCkB,KAAA3B,YAAYS,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAxB,oBAAoBd,MAAaS,YAAW8B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAM1LF,KAAA,oBAAC,eAAD,EAAA,UACE,oBAAC,WAAD;GAAa,GAAKxC,MAAaa,cAAa8B,KAAM;GAC/C/B,UAAAA;EADU,CAAA,EADD,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;EATlBmB,KAAA,oBAAC,UAAD;GAAyBxB;GAI3B,aAAA;GAAmBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC7Ee,UAAAA;EALO,CAAA;EAUEb,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;EAZrDW,KAAA,qBAAC,IAAD;GAA6BhB;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA/H,UAAA,CACHM,IAWAC,EAZgB;;EAaHlB,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,OAbVmB;AAaU"}

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

@@ -9,14 +9,15 @@ type ToolbarProps$1 = Omit<ToolbarProps, 'children' | 'className' | 'style'> & {
   /** A function may compute the style from the toolbar's render state. */
   style?: ToolbarProps['style'];
   /**
-   * Which of the page's two colour schemes the bar takes. `standard` is the
-   * surface container it draws by default; `vibrant` moves it to primary
-   * container, for a bar meant to carry the page's accent.
-   * @default 'standard'
+   * Which of the page's two colour schemes the bar takes. `neutral` is the
+   * page's standard scheme, the surface container it draws by default;
+   * `vibrant` moves it to primary container, for a bar meant to carry the
+   * page's accent.
+   * @default 'neutral'
    */
   tone?: ToolbarTone;
 };
-type ToolbarTone = 'standard' | 'vibrant';
+type ToolbarTone = 'neutral' | 'vibrant';
 /**
  * A container for a set of controls, announced as a toolbar so a screen
  * reader reads them as one group, with the arrow keys moving between them.

package/dist/components/toolbar/index.js

@@ -24,7 +24,7 @@ const styles = {
 		kg3NbH: "x790zyz",
 		$$css: true
 	},
-	standard: {
+	neutral: {
 		kWkggS: "x1mjdul6",
 		$$css: true
 	},
@@ -80,7 +80,7 @@ function Toolbar$1(t0) {
 	if ($[0] !== t0) {
 		const { orientation: t5, tone: t6, ...props$1 } = t0;
 		const orientation = t5 === void 0 ? "horizontal" : t5;
-		const tone = t6 === void 0 ? "standard" : t6;
+		const tone = t6 === void 0 ? "neutral" : t6;
 		const t7 = orientation === "horizontal" ? "vertical" : "horizontal";
 		let t8;
 		if ($[7] !== t7) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ToolbarProps","RACToolbarProps","SeparatorProps","stylex","useMemo","Toolbar","RACToolbar","SeparatorContext","mergeStatefulStyles","colors","radii","spacing","styles","base","kGNEyG","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kOIVth","kjj79g","k3XXqK","$$css","horizontal","kXwgrk","kAzted","k8WAf4","kg3NbH","standard","kWkggS","vertical","k7Eaqz","vibrant","Omit","children","className","style","tone","ToolbarTone","t0","$","_c","T0","T1","t1","t2","t3","t4","orientation","t5","t6","props","undefined","t7","t8","separator"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `standard` is the\n   * surface container it draws by default; `vibrant` moves it to primary\n   * container, for a bar meant to carry the page's accent.\n   * @default 'standard'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'standard' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'standard',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;;AA6CA,MAAMa,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,UAAU;EACRC,QAAQ;EACRP,OAAO;CACT;CACAQ,UAAU;EACRN,QAAQ;EACRO,QAAQ;EACRL,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAU,SAAS;EACPH,QAAQ;EACRZ,QAAQ;EACRK,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,SAAAjB,UAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAiB,MAAA,EAAAS,aAAAC,IAAAZ,MAAAa,IAAA,GAAAC,YAAAZ;EACf,MAAAS,cAAAC,OAAAG,KAAAA,IAAA,eAAAH;EACA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,aAAAF;EAOe,MAAAG,KAAAL,gBAAgB,eAAhB,aAAA;EAAwD,IAAAM;EAAA,IAAAd,EAAA,OAAAa,IAAA;GADtBC,KAAA,EAAAN,aAClCK,GACf;GAACb,EAAA,KAAAa;GAAAb,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFD,MAAAe,YAAiDD;EAGzCX,KAAApC;EAAwBgD,KAAAA;EAC3Bb,KAAApC;EAAwB0C,KAAAA;EAAiBG,KAAAA;EAAWL,KAAAtC,oBAAoBL,MAAaS,OAAMC,MAAOD,OAAOoC,cAAcpC,OAAOyB,KAAK,GAAGc,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAA7IG,KAAA,oBAAC,IAAD;GAAyBD,aAAAA;GAAW,GAAMG;GAAK,GAAML;EAAwF,CAAA;EAAIN,EAAA,KAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAG,MAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAD9IC,KAAA,oBAAC,IAAD;GAAyBK,OAAAA;GAC5BN,UAAAA;EADoB,CAAA;EAEHT,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc"}
+{"version":3,"file":"index.js","names":["ReactNode","ToolbarProps","RACToolbarProps","SeparatorProps","stylex","useMemo","Toolbar","RACToolbar","SeparatorContext","mergeStatefulStyles","colors","radii","spacing","styles","base","kGNEyG","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kOIVth","kjj79g","k3XXqK","$$css","horizontal","kXwgrk","kAzted","k8WAf4","kg3NbH","neutral","kWkggS","vertical","k7Eaqz","vibrant","Omit","children","className","style","tone","ToolbarTone","t0","$","_c","T0","T1","t1","t2","t3","t4","orientation","t5","t6","props","undefined","t7","t8","separator"],"sources":["../../../src/components/toolbar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ToolbarProps as RACToolbarProps, SeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport { Toolbar as RACToolbar, SeparatorContext } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\n\n// The toolbars page's container: a row of frequently used controls, on a\n// surface of its own, with the arrow keys moving between them rather than\n// Tab. The page calls it \"a container with configurable slots\", so nothing\n// here says what goes in one — an icon button, a button, a field or a rule\n// are all the call site's to place.\n//\n// The measurements are the page's, stated there in words: 64dp tall,\n// centred, 8dp between items and 16dp of padding outside them. The two\n// colour schemes are its own too — standard on surface container, vibrant on\n// primary container — and both put the muted content role on what they hold.\n// `tone` spells the standard one `neutral` rather than by the page's name,\n// since that is the word every `tone` in the library uses for its neutral\n// role.\n//\n// Two things are this component's own.\n//\n// **A rule inside it runs across the row, not along it.** React Aria's\n// `Toolbar` sets its orientation on itself and nowhere else, so a\n// `Separator` written among the controls would draw the way it does anywhere\n// else — along the row, where it is invisible. This provides React Aria's\n// separator context with the perpendicular orientation, and `Separator`\n// reads it, so a rule between two controls is correct without the call site\n// saying which way it runs.\n//\n// **Arrow-key navigation is React Aria's and is not wrapped.** The arrows\n// move between the controls, and — worth knowing, since the pattern usually\n// implies otherwise — React Aria leaves every control tabbable rather than\n// giving the bar a roving tabindex, so Tab still steps through them one by\n// one. What the bar adds is the toolbar role, which tells a screen reader\n// the controls belong together, and a second way to move between them.\n//\n// One departure, and it is about the shape. The page gives the container's\n// corner as a token its widget draws rather than writes, so there is no\n// value to read: what it states in words is the height, the alignment and\n// the padding, and nothing else. The fully rounded corner here, and the\n// inline box that goes with it, are the library's own choice for a bar that\n// floats over a page rather than docking to its edge — a docked one spans\n// its container and squares its corner, both from the call site.\n\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x3nfvp2\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"xl56j7k\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  horizontal: {\n    kXwgrk: \"x1q0g3np\",\n    kAzted: \"x8nclml\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  neutral: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  },\n  vertical: {\n    kXwgrk: \"xdt5ytf\",\n    k7Eaqz: \"x4m7ku4\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  },\n  vibrant: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  }\n};\ntype ToolbarProps = Omit<RACToolbarProps, 'children' | 'className' | 'style'> & {\n  /** The controls, and any rule between them. */\n  children?: ReactNode;\n  /** A function may compute the class from the toolbar's render state. */\n  className?: RACToolbarProps['className'];\n  /** A function may compute the style from the toolbar's render state. */\n  style?: RACToolbarProps['style'];\n  /**\n   * Which of the page's two colour schemes the bar takes. `neutral` is the\n   * page's standard scheme, the surface container it draws by default;\n   * `vibrant` moves it to primary container, for a bar meant to carry the\n   * page's accent.\n   * @default 'neutral'\n   */\n  tone?: ToolbarTone;\n};\ntype ToolbarTone = 'neutral' | 'vibrant';\n\n/**\n * A container for a set of controls, announced as a toolbar so a screen\n * reader reads them as one group, with the arrow keys moving between them.\n * Tab still steps through each control: React Aria's toolbar adds the arrows\n * rather than replacing what Tab does.\n *\n * ```tsx\n * <Toolbar aria-label=\"Label\">\n *   <IconButton aria-label=\"First item\">\n *     <FirstIcon />\n *   </IconButton>\n *   <Separator />\n *   <IconButton aria-label=\"Second item\">\n *     <SecondIcon />\n *   </IconButton>\n * </Toolbar>\n * ```\n *\n * Name it with `aria-label` or `aria-labelledby` — nothing here labels it for\n * you, and a toolbar with no name is a group a screen reader cannot announce.\n *\n * `orientation` is React Aria's, and it decides both which arrows move and\n * which way the bar runs. A `Separator` inside draws across that direction\n * without being told.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Toolbar({\n  orientation = 'horizontal',\n  tone = 'neutral',\n  ...props\n}: ToolbarProps) {\n  // The rule runs across the toolbar rather than along it. Memoised because\n  // a fresh object here would be a new context value on every render, which\n  // is what react-perf's no-new-object-as-prop is after.\n  const separator = useMemo<SeparatorProps>(() => ({\n    orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal'\n  }), [orientation]);\n  return <SeparatorContext value={separator}>\n      <RACToolbar orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation], styles[tone]), props)} />\n    </SeparatorContext>;\n}\nexport type { ToolbarProps, ToolbarTone };\nexport default Toolbar;"],"mappings":";;;;;;;AAgDA,MAAMa,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAM,SAAS;EACPC,QAAQ;EACRP,OAAO;CACT;CACAQ,UAAU;EACRN,QAAQ;EACRO,QAAQ;EACRL,QAAQ;EACRC,QAAQ;EACRL,OAAO;CACT;CACAU,SAAS;EACPH,QAAQ;EACRZ,QAAQ;EACRK,OAAO;CACT;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,SAAAjB,UAAAkC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAiB,MAAA,EAAAS,aAAAC,IAAAZ,MAAAa,IAAA,GAAAC,YAAAZ;EACf,MAAAS,cAAAC,OAAAG,KAAAA,IAAA,eAAAH;EACA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,YAAAF;EAOe,MAAAG,KAAAL,gBAAgB,eAAhB,aAAA;EAAwD,IAAAM;EAAA,IAAAd,EAAA,OAAAa,IAAA;GADtBC,KAAA,EAAAN,aAClCK,GACf;GAACb,EAAA,KAAAa;GAAAb,EAAA,KAAAc;EAAA,OAAAA,KAAAd,EAAA;EAFD,MAAAe,YAAiDD;EAGzCX,KAAApC;EAAwBgD,KAAAA;EAC3Bb,KAAApC;EAAwB0C,KAAAA;EAAiBG,KAAAA;EAAWL,KAAAtC,oBAAoBL,MAAaS,OAAMC,MAAOD,OAAOoC,cAAcpC,OAAOyB,KAAK,GAAGc,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAL,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,IAAA;EAA7IG,KAAA,oBAAC,IAAD;GAAyBD,aAAAA;GAAW,GAAMG;GAAK,GAAML;EAAwF,CAAA;EAAIN,EAAA,KAAAE;EAAAF,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAG,MAAAH,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAD9IC,KAAA,oBAAC,IAAD;GAAyBK,OAAAA;GAC5BN,UAAAA;EADoB,CAAA;EAEHT,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFdU;AAEc"}