@kanso-labs/kanso-ui 0.28.4 → 0.28.6

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

@@ -17,11 +17,18 @@ type ColorFieldProps$1 = Omit<ColorFieldProps, 'children' | 'className' | 'style
   floatingLabel?: boolean;
   /** What the field is for. Always rendered; never a placeholder. */
   label: string;
-  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */
+  /**
+   * An icon at the box's leading end, in the page's 24dp size. A
+   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size
+   * from the slot.
+   */
   leadingIcon?: ReactNode;
   /** A function may compute the style from the field's render state. */
   style?: ColorFieldProps['style'];
-  /** An icon at the box's trailing end. */
+  /**
+   * An icon at the box's trailing end, in the page's 24dp size. An icon
+   * drawn in `em` takes that size from the slot.
+   */
   trailingIcon?: ReactNode;
   /**
    * Which of the text fields page's two boxes to draw.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","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","t7","t8","t9"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. A `ColorSwatch` shows the value. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n};\n\n/**\n * A colour typed into a field. The value is React Aria's — pass `value` with\n * `onChange` to control it, or `defaultValue` — as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\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 ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAAI,aAAAoB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGlB,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BrB,2BAA2B;CAC9C,MAAAsB,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,YAAW2B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAExLF,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGb,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EADhBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAQ,oBAAA;EAJrDU,KAAA,qBAAC,IAAD;GAA2Bf;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHK,IAGAC,EAJiB;;EAKHjB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OALXkB;AAKW"}
+{"version":3,"file":"index.js","names":["ReactNode","ColorFieldProps","RACColorFieldProps","stylex","ColorField","RACColorField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","mergeStatefulStyles","Omit","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","t7","t8","t9"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColorFieldProps as RACColorFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ColorField as RACColorField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A colour typed rather than picked. React Aria renders a plain text input\n// holding the colour's own notation, so this is the text fields page's box\n// with nothing added — the same chrome `TextField` draws through, which is\n// what makes a colour field on a form the same shape as the field beside\n// it.\n//\n// Two things are worth knowing about what it holds.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour — `#6750A4` — and parses what is typed. With one\n// it holds that channel alone, as a number a reader can step, which is what\n// a picker's three boxes beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// passing a `ColorSwatch` there is what makes the field show the colour it\n// holds. It is left to the call site rather than drawn here, since a field\n// inside a picker sits beside a swatch already.\n\ntype ColorFieldProps = Omit<RACColorFieldProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the field's render state. */\n  className?: RACColorFieldProps['className'];\n  /** Supporting text under the field. */\n  description?: string;\n  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\n   * An icon at the box's leading end, in the page's 24dp size. A\n   * `ColorSwatch` shows the value. An icon drawn in `em` takes that size\n   * from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACColorFieldProps['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 colour typed into a field. The value is React Aria's — pass `value` with\n * `onChange` to control it, or `defaultValue` — as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour and parses what is\n * typed; with one it holds that channel alone as a number. `colorSpace`\n * decides which space a channel belongs to, the same as on `ColorSlider`.\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 ColorField({\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: ColorFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACColorField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} label={label} leading={leadingIcon} trailing={trailingIcon} variant={variant}>\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACColorField>;\n}\nexport type { ColorFieldProps };\nexport default ColorField;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,SAAAI,aAAAoB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAAV,aAAAC,OAAAC,eAAAS,IAAAC,YAAAC,IAAAV,OAAAC,aAAAE,cAAAC,SAAAO,IAAA,GAAAC,YAAAP;CAGlB,MAAAN,gBAAAS,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAN,UAAAO,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BrB,2BAA2B;CAC9C,MAAAsB,KAAA7B;CAAa,IAAA8B;CAAA,IAAAV,EAAA,OAAAR,OAAA;EAAoCkB,KAAAxB,YAAYM,KAAK;EAACQ,EAAA,KAAAR;EAAAQ,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAyD,MAAAW,KAAAvB,oBAAoBV,MAAaO,YAAW2B,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAb,EAAA,OAAAc,OAAAC,IAAA,2BAAA,GAAA;EAExLF,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGb,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,OAAAP,iBAAAO,EAAA,OAAAN,SAAAM,EAAA,OAAAL,eAAAK,EAAA,OAAAH,gBAAAG,EAAA,OAAAF,SAAA;EADhBkB,KAAA,oBAAC,UAAD;GAAyBvB;GAAsBC;GAAgBC,SAAAA;GAAuBE,UAAAA;GAAuBC;GAC3Ge,UAAAA;EADO,CAAA;EAEEb,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAL;EAAAK,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAT,eAAAS,EAAA,QAAAR,OAAA;EACXyB,KAAA,oBAAC,cAAD;GAA2B1B;GAAoBC;EAAK,CAAA;EAAIQ,EAAA,KAAAT;EAAAS,EAAA,MAAAR;EAAAQ,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAS,MAAAT,EAAA,QAAAG,cAAAH,EAAA,QAAAM,WAAAN,EAAA,QAAAU,MAAAV,EAAA,QAAAW,MAAAX,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAQ,oBAAA;EAJrDU,KAAA,qBAAC,IAAD;GAA2Bf;GAAuB,WAAAO;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAA7H,UAAA,CACHK,IAGAC,EAJiB;;EAKHjB,EAAA,MAAAS;EAAAT,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAQ;EAAAR,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OALXkB;AAKW"}

package/dist/components/combo-box/index.d.ts

@@ -36,7 +36,8 @@ type ComboBoxProps$1<T extends object = object, M extends ComboBoxSelectionMode
   label: string;
   /**
    * An icon at the start of the box, before the label and the value: the
-   * page's 24dp leading icon, in the muted role.
+   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes
+   * that size from the slot.
    */
   leadingIcon?: ReactNode;
   /**

package/dist/components/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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  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. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box 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 value: the\n   * page's 24dp leading icon, in the muted role.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMgC,SAAS,oBAAC,aAAD,CAAY,CAAA;AAC3B,MAAMC,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRV,QAAQ;EACRW,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,QAAQ;EACRe,QAAQ;EACRC,QAAQ;EACRV,OAAO;CACT;AACF;;;;;;AA4DA,SAAAwB,eAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACSF,KAAA,oBAAC,YAAD;GAAsB,WAAA;GACzB,UAAA,oBAAC,eAAD,CAAiB,CAAA;EADH,CAAA;EAEHF,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAFRE;AAEQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCjB,SAAA7D,WAAA6D,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAyF,MAAA,EAAAd,WAAAE,aAAAC,OAAAC,eAAAc,IAAAC,YAAAC,IAAAf,OAAAC,aAAAC,SAAAC,SAAAa,IAAA,GAAAC,YAAAP;CAIvF,MAAAX,gBAAAc,OAAAK,KAAAA,IAAA,OAAAL;CACA,MAAAC,aAAAC,OAAAG,KAAAA,IAAA,QAAAH;CAIA,MAAAZ,UAAAa,OAAAE,KAAAA,IAAA,WAAAF;CAGA,MAAAG,qBAA2BzD,2BAA2B;CAGtD,MAAA0D,SAAe3E,OAAuB,IAAI;CAClC,MAAA4E,KAAAvE;CAAW,IAAAwE;CAAA,IAAAd,EAAA,OAAAV,OAAA;EAA0CwB,KAAA7D,YAAYqC,KAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAyD,MAAAe,KAAA1D,oBAAoBtB,MAAaiB,YAAWgE,IAAK,GAAGP,OAAK;CAAC,IAAAQ;CAAA,IAAAjB,EAAA,OAAAV,OAAA;EAK7J2B,KAAAhE,YAAYqC,KAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,OAAAS,QAAAU,eAAA;EAChDD,KAAAT,QAAKU,kBAAmB,aAAa,oBAAC,cAAD,CAAa,CAAA,IAAlD;EAA4DnB,EAAA,KAAAS,QAAAU;EAAAnB,EAAA,KAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EAC7DgB,KAAA,oBAAC,YAAD,CAAW,CAAA;EAAGpB,EAAA,KAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAAA,IAAAqB;CAAA,IAAArB,EAAA,OAAAT,iBAAAS,EAAA,OAAAM,cAAAN,EAAA,OAAAR,SAAAQ,EAAA,QAAAP,eAAAO,EAAA,QAAAiB,MAAAjB,EAAA,QAAAkB,MAAAlB,EAAA,QAAAL,SAAA;EANhB0B,KAAA,qBAAC,UAAD;GAAyB9B;GAIfe;GAAuB,WAAAW;GAA2BzB;GAAgBC,SAAAA;GAAkBmB,KAAAA;GAAkBhD,UAAAA;GAAiB+B;GAJjI,UAAA,CAKGuB,IACDE,EANO;;EAOEpB,EAAA,KAAAT;EAAAS,EAAA,KAAAM;EAAAN,EAAA,KAAAR;EAAAQ,EAAA,MAAAP;EAAAO,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAL;EAAAK,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAAA,IAAAsB;CAAA,IAAAtB,EAAA,QAAAX,eAAAW,EAAA,QAAAV,OAAA;EACXgC,MAAA,oBAAC,cAAD;GAA2BjC;GAAoBC;EAAK,CAAA;EAAIU,EAAA,MAAAX;EAAAW,EAAA,MAAAV;EAAAU,EAAA,MAAAsB;CAAA,OAAAA,MAAAtB,EAAA;CAAA,IAAAuB;CAAA,IAAAvB,EAAA,QAAAG,OAAAC,IAAA,2BAAA,GAAA;EAGjBmB,MAAAxF,MAAauB,QAAOkE,OAAQ3D,OAAMC,IAAK;EAACkC,EAAA,MAAAuB;CAAA,OAAAA,MAAAvB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,QAAAN,SAAA;EAC7E+B,MAAA,oBAAC,WAAD,EAAA,UAAU/B,QAAF,CAAA;EAAoBM,EAAA,MAAAN;EAAAM,EAAA,MAAAyB;CAAA,OAAAA,MAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAb,aAAAa,EAAA,QAAAyB,KAAA;EAH9BC,MAAA,oBAAC,SAAD;GAAwBd,YAAAA;GAEAzB,0BAAAA;GAAS,GAAMoC;GACrCE,UAAAA;EAHS,CAAA;EAIEzB,EAAA,MAAAb;EAAAa,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,MAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAa,MAAAb,EAAA,QAAAM,cAAAN,EAAA,QAAAS,WAAAT,EAAA,QAAAsB,OAAAtB,EAAA,QAAA0B,OAAA1B,EAAA,QAAAc,MAAAd,EAAA,QAAAe,MAAAf,EAAA,QAAAqB,MAAArB,EAAA,QAAAW,oBAAA;EAdVgB,MAAA,qBAAC,IAAD;GAA+BrB;GAAuB,WAAAQ;GAAwCH;GAAkB,GAAMF;GAAK,GAAMM;GAAjI,UAAA;IACHM;IAQAC;IACAI;GAVe;;EAeH1B,EAAA,MAAAa;EAAAb,EAAA,MAAAM;EAAAN,EAAA,MAAAS;EAAAT,EAAA,MAAAsB;EAAAtB,EAAA,MAAA0B;EAAA1B,EAAA,MAAAc;EAAAd,EAAA,MAAAe;EAAAf,EAAA,MAAAqB;EAAArB,EAAA,MAAAW;EAAAX,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OAfT2B;AAeS;;;;;;;;AAUlB,SAAAC,cAAA;CAAA,MAAA5B,IAAAC,EAAA,CAAA;CACE,MAAA4B,QAAc7F,WAAWE,oBAAoB;CAAE,IAAAgE;CAAA,IAAAF,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACzBF,KAAAnE,MAAa8B,OAAMW,QAASpB,MAAK0E,IAAK;EAAC9B,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAG,OAAAC,IAAA,2BAAA,GAAA;EACpCC,KAAA;GAAA0B,GAClB,EAAAC,WACU,oDACb;GAACC,GACE,EAAAD,WACU,mDACb;EACF;EAAChC,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAPsB,MAAAO,KAAAF,GAOrB,CAAC,EAAEwB,OAAKK,WAAa,SAAS;CAAE,IAAA1B;CAAA,IAAAR,EAAA,OAAAO,IAAA;EAR7BC,KAAA,oBAAC,QAAD;GAAU,GAAKN;GAClB,UAAA,oBAAC,iBAAD,EAAgB,GAAKK,GAOW,CAAA;EARnB,CAAA;EASHP,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OATPQ;AASO"}
+{"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// **Filtering is React Aria's, and stays theirs.** `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n  list: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    kzqmXN: \"xlvufjm\",\n    kskxy: \"xedcshv\",\n    ks0D6T: \"x1x1rfll\",\n    k7Eaqz: \"xeuugli\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  },\n  toggle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xxk0z11\",\n    kaIpWk: \"x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kzqmXN: \"xvy4d1p\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n  /**\n   * Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\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  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. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a combo box 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 value: 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   * The options. `ListBox.Item` for each, and `ListBox.Section` to group\n   * them — the list inside is a ListBox, and takes everything one does.\n   */\n  options?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACComboBoxProps<T, M>, 'children' | 'defaultSelectedKey' | 'isInvalid' | 'onSelectionChange' | 'selectedKey' | 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' | 'single';\n\n/**\n * The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n */\nfunction ChosenValues() {\n  return <FieldValue className=\"x2lah0s\">\n      <RACComboBoxValue />\n    </FieldValue>;\n}\n\n/**\n * A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={\n *     <>\n *       <ListBox.Item id=\"first\">First item</ListBox.Item>\n *       <ListBox.Item id=\"second\">Second item</ListBox.Item>\n *     </>\n *   }\n * />\n * ```\n *\n * Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n *\n * The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n  container,\n  description,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  label,\n  leadingIcon,\n  options,\n  variant = 'filled',\n  ...props\n}: ComboBoxProps<T, M>) {\n  const validationBehavior = useFieldValidationBehavior();\n  // What the list is anchored to and takes its width from: the box, not the\n  // button inside it, which is a 24dp icon.\n  const boxRef = useRef<HTMLDivElement>(null);\n  return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `ComboBox` does not, so the box\n    // is told outright or its label and its underline never turn.\n    isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n        {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n        <FieldInput />\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n      <RACPopover triggerRef={boxRef}\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, styles.list)}>\n        <ListBox>{options}</ListBox>\n      </RACPopover>\n    </RACComboBox>;\n}\n\n/**\n * The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n  const state = useContext(ComboBoxStateContext);\n  return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n      }\n    }[!!(state?.isOpen === true) << 0]} />\n    </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}

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

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

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

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

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

@@ -22,6 +22,12 @@ type CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {
   /**
    * Which colour role to render in. `auto` follows the sign of `value`, with
    * zero reading as neutral.
+   *
+   * The positive and negative roles are guaranteed legible on the surface
+   * family, which is what the library's own tokens and every demo scheme are
+   * held to. Over a container of its own — a selected row, a filled card —
+   * the pair is one colour family on top of another and is not guaranteed, so
+   * a custom theme placing one there has to check that pair itself.
    * @default 'auto'
    */
   tone?: Tone;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string | undefined, currency: string, sign: SignDisplay) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n  // and `sign` is one of three known words, so joining on one cannot make two\n  // different option sets share a key.\n  const key = `${locale ?? ''}|${currency}|${sign}`;\n  const cached = formatters.get(key);\n  if (cached) {\n    return cached;\n  }\n  const formatter = new Intl.NumberFormat(locale, {\n    currency,\n    signDisplay: sign,\n    style: 'currency'\n  });\n  formatters.set(key, formatter);\n  return formatter;\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","typography","styles","base","kB7OPa","kMv6JI","kcqcaj","k63SB2","$$css","tones","negative","kMwMTN","neutral","positive","MINUS_SIGN","CurrencyProps","Omit","currency","locale","sign","SignDisplay","tone","Tone","value","Currency","t0","$","_c","render","t1","t2","t3","t4","t5","t6","t7","t8","t9","props","undefined","formatCurrency","resolveTone","children","defaultTagName","formatters","Map","Intl","NumberFormat","options","formatterFor","formatToParts","map","part","type","join","key","cached","get","formatter","signDisplay","style","set"],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\n//\n// No Material Design page draws an amount. It is type alone: the mono face\n// and medium weight from the type tokens, tabular figures, and the on surface\n// role for the neutral tone. Positive and negative are the library's own\n// roles, the pair Tag draws from as well.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   *\n   * The positive and negative roles are guaranteed legible on the surface\n   * family, which is what the library's own tokens and every demo scheme are\n   * held to. Over a container of its own — a selected row, a filled card —\n   * the pair is one colour family on top of another and is not guaranteed, so\n   * a custom theme placing one there has to check that pair itself.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// Constructing an Intl.NumberFormat resolves the locale, loads the currency's\n// data and builds the pattern; formatToParts on one already built skips all\n// three, which measures about ten times cheaper per value. An instance is\n// stateless once constructed, so one can be shared across every component\n// asking for the same three options.\n//\n// What this saves is a mount and a changing amount, not an idle re-render:\n// the React Compiler already memoises the call below on the four things it\n// reads, so a component re-rendered with the same props never reaches here.\n// That cache belongs to one component instance and counts `value` among its\n// keys, which leaves two cases it cannot cover — a column of rows, where every\n// instance has a cache of its own and each builds a formatter, and a single\n// amount that ticks, where each new value misses.\n//\n// Unbounded on purpose. The keys are the option sets an app actually uses —\n// its locales times its currencies times the three sign settings — so the map\n// settles at that size rather than growing with renders or with values.\nconst formatters = new Map<string, Intl.NumberFormat>();\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return formatterFor(options.locale, options.currency, options.sign).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\nfunction formatterFor(locale: string | undefined, currency: string, sign: SignDisplay) {\n  // Neither a BCP 47 locale nor an ISO 4217 code can contain a vertical bar\n  // and `sign` is one of three known words, so joining on one cannot make two\n  // different option sets share a key.\n  const key = `${locale ?? ''}|${currency}|${sign}`;\n  const cached = formatters.get(key);\n  if (cached) {\n    return cached;\n  }\n  const formatter = new Intl.NumberFormat(locale, {\n    currency,\n    signDisplay: sign,\n    style: 'currency'\n  });\n  formatters.set(key, formatter);\n  return formatter;\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":"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"}

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

@@ -17,11 +17,17 @@ type DateFieldProps$1<T extends DateValue = DateValue> = Omit<DateFieldProps<T>,
   floatingLabel?: boolean;
   /** What the field is for. Always rendered; never a placeholder. */
   label: string;
-  /** An icon at the box's leading end. */
+  /**
+   * An icon at the box's leading end, in the page's 24dp size. An icon drawn
+   * in `em` takes that size from the slot.
+   */
   leadingIcon?: ReactNode;
   /** A function may compute the style from the field's render state. */
   style?: DateFieldProps<T>['style'];
-  /** An icon at the box's trailing end. */
+  /**
+   * An icon at the box's trailing end, in the page's 24dp size. An icon
+   * drawn in `em` takes that size from the slot.
+   */
   trailingIcon?: ReactNode;
   /**
    * Which of the text fields page's two boxes to draw.

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  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /** An icon at the box's leading end. */\n  leadingIcon?: ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACDateFieldProps<T>['style'];\n  /** An icon at the box's trailing end. */\n  trailingIcon?: ReactNode;\n  /**\n   * Which of the text fields page's two boxes to draw.\n   * @default 'filled'\n   */\n  variant?: 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,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","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  /** The message shown instead of the description, which also marks the field invalid. */\n  error?: string;\n  /**\n   * Whether the label floats into the box's top once the field holds a\n   * value, rather than sitting above it.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /** What the field is for. Always rendered; never a placeholder. */\n  label: string;\n  /**\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,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"}

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

@@ -25,7 +25,10 @@ type DatePickerProps$1<T extends DateValue = DateValue> = Omit<DatePickerProps<T
   floatingLabel?: boolean;
   /** What the field is for. Always rendered; never a placeholder. */
   label: string;
-  /** An icon at the box's leading end. */
+  /**
+   * An icon at the box's leading end, in the page's 24dp size. An icon drawn
+   * in `em` takes that size from the slot.
+   */
   leadingIcon?: ReactNode;
   /** A function may compute the style from the picker's render state. */
   style?: DatePickerProps<T>['style'];

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

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

@@ -2,7 +2,7 @@ import { FieldVariant } from "../../field/index.js";
 import { ReactNode } from "react";
 import { DateRangePickerProps, DateValue } from "react-aria-components";
 //#region src/components/date-range-picker/index.d.ts
-type DateRangePickerProps$1<T extends DateValue = DateValue> = {
+type DateRangePickerProps$1<T extends DateValue = DateValue> = Omit<DateRangePickerProps<T>, 'children' | 'className' | 'style'> & {
   /** A function may compute the class from the picker's render state. */
   className?: DateRangePickerProps<T>['className'];
   /**
@@ -25,7 +25,10 @@ type DateRangePickerProps$1<T extends DateValue = DateValue> = {
   floatingLabel?: boolean;
   /** What the field is for. Always rendered; never a placeholder. */
   label: string;
-  /** An icon at the box's leading end. */
+  /**
+   * An icon at the box's leading end, in the page's 24dp size. An icon drawn
+   * in `em` takes that size from the slot.
+   */
   leadingIcon?: ReactNode;
   /**
    * What is drawn between the two segment groups. Decoration — a screen
@@ -45,7 +48,7 @@ type DateRangePickerProps$1<T extends DateValue = DateValue> = {
    * @default 'filled'
    */
   variant?: FieldVariant;
-} & Omit<DateRangePickerProps<T>, 'children' | 'className' | 'style'>;
+};
 /**
  * A date range typed into a field, or picked from a calendar behind a
  * button. The value is React Aria's — pass `value` with `onChange` to