@kanso-labs/react-native-kanso-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","RefObject","HostInstance","StyleProp","TextInput","ViewStyle","AnimatedStyle","Key","ComboBoxState","ComboBoxValidationValue","MenuTriggerAction","ListProps","StatelyListProps","ChangeValueType","ValueType","useId","useImperativeHandle","useRef","useState","Platform","Pressable","StyleSheet","View","Animated","useComboBoxState","FieldVariant","ValidationResult","ResolvedTheme","containsIn","CollectionView","focusKeyOf","ResultsStatus","rowCountOf","describedBy","FieldBox","FieldChevron","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","listFor","useLocaleOf","useMessages","Overlay","useAnchoredPlacement","DismissLayer","PANEL_ORIGINS","useBackToClose","useFocusOnPlaced","usePanelMotion","useReturnFocus","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","ComboBoxListProps","anchor","control","isOpen","label","openedBy","setPresent","present","state","ComboBoxSelectionMode","ComboBoxProps","allowsCustomValue","allowsEmptyCollection","defaultFilter","textValue","inputValue","defaultInputValue","defaultItems","Iterable","T","defaultValue","M","description","disabledKeys","error","floatingLabel","formValue","inputRef","isDisabled","isReadOnly","isRequired","items","leadingIcon","menuTrigger","name","onChange","value","onInputChange","onOpenChange","options","item","ref","selectionMode","style","testID","validate","variant","ToggleProps","onPress","TOGGLE_SIZE","TOGGLE_SLOP","SHRINKS","flexGrow","stylesOf","colors","radii","shadows","create","list","backgroundColor","surfaceContainerLow","borderRadius","xs","boxShadow","elevation2","overflow","toggle","alignItems","circle","height","justifyContent","width","ComboBox","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","undefined","id","box","setOpenedBy","messages","locale","children","changed","validation","onEdit","onBlur","trigger","current","focus","shouldCloseOnBlur","OS","chosen","several","t10","t11","t12","t13","t14","t15","t16","t8","t9","selectionManager","keysOf","submitsText","length","map","String","t17","validationValueOf","t18","isEmpty","submitted","t19","setFocused","onFocus","shownError","t20","t21","Symbol","for","T0","T1","t22","focused","t23","t24","t25","t26","showSuggestions","t27","t28","toggleFor","T2","t29","handlers","t30","selectedItems","_temp","t31","t32","t33","editOf","t34","t35","t36","t37","t38","t39","t40","ComboBoxList","styles","align","placement","motion","placed","panel","setPanel","option","setOption","sendsReader","close","anchorFrame","dismissOf","onLayout","anchorWidth","transformOrigin","side","suggestions","ComboBoxPopup","copyOf","blur","text","setInputValue","Toggle","theme","feedback","color","onSurfaceVariant","corners","disabled","disableRipple","ring","props","Omit","selectedKey","_c"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type {\n  ComponentRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  RefObject,\n} from 'react'\nimport type {\n  HostInstance,\n  StyleProp,\n  TextInput,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key } from 'react-stately'\nimport type {\n  ComboBoxState,\n  ComboBoxValidationValue,\n  MenuTriggerAction,\n} from 'react-stately/useComboBoxState'\nimport type { ListProps as StatelyListProps } from 'react-stately/useListState'\nimport type { ChangeValueType, ValueType } from 'react-stately/useSelectState'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useComboBoxState } from 'react-stately/useComboBoxState'\n\nimport type { FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { containsIn } from '../../autocomplete'\nimport {\n  CollectionView,\n  focusKeyOf,\n  ResultsStatus,\n  rowCountOf,\n} from '../../collection'\nimport {\n  describedBy,\n  FieldBox,\n  FieldChevron,\n  FieldInput,\n  FieldMessage,\n  useFieldFocus,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { listFor } from '../../i18n'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { Overlay, useAnchoredPlacement } from '../../overlay'\nimport {\n  DismissLayer,\n  PANEL_ORIGINS,\n  useBackToClose,\n  useFocusOnPlaced,\n  usePanelMotion,\n  useReturnFocus,\n} from '../../overlay/panel'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's ComboBox, the text fields page's autocomplete field: a text\n// field whose typing narrows a list of options under it. Everything above\n// the list is the field chrome in src/field, the box, the label, the input,\n// the supporting line and the error every field here draws, and the list is\n// ListBox's, through src/collection, on the surface every anchored panel\n// here draws, placed by src/overlay exactly as Select's is. What is here is\n// React Stately's combo box state around the two, and the things that are\n// this component's own.\n//\n// It is Select's shape with differences that are web's too. The control is\n// a real input, so typing reaches it and a press on the box focuses it, and\n// only the chevron at the end opens the list on its own: an autocomplete\n// field is a text field with a button on it.\n//\n// **Filtering is on by default,** as on web: `defaultFilter` falls back to a\n// match anywhere in an option's text, compared by an `Intl.Collator` in the\n// `I18nProvider`'s locale, or the device's outside one, at base sensitivity,\n// so case and accents are ignored, which is Autocomplete's filter and what\n// web's `useFilter` makes. Options passed through `items` are the call\n// site's to filter, as on web.\n//\n// **A value that is not in the list is allowed or refused, not corrected.**\n// With `allowsCustomValue` off, the text goes back to the chosen option's as\n// the field loses focus or the list is dismissed.\n//\n// **The keyboard stays up.** Typing opens the list as `menuTrigger` says,\n// and an option is reached on the first tap rather than the one that would\n// otherwise only close the keyboard. A press outside the list closes it and\n// takes the focus out of the field, as a click outside does on web, but a\n// press on the box itself leaves the list open, as a click in the input does\n// there, so a tap that places the caret does not throw away what was typed.\n// Android's back gesture and VoiceOver's escape gesture close it too.\n//\n// **The count is announced,** as React Aria's ComboBox announces it on web:\n// how many options are listed, as the list opens and each time a search\n// changes the number, through a polite live region on Android and under\n// React Native Web and `AccessibilityInfo` on iOS. A screen reader stays in\n// the input while the list opens from typing, so typing goes on, and is\n// sent to the chosen option, or the first, where the chevron opens it, and\n// back to the input as it closes.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input on its line, written as one list in the\n// locale's words, the label floated over them, and keeps the list open as\n// they are chosen.\n//\n// What web's has that this does not, each because React Native has no\n// counterpart: web's arrow keys move through the list while the keyboard\n// stays in the input, through React Aria's virtual focus, which a touch\n// screen has no keys for, as Autocomplete drops it; and web's input tells a\n// screen reader it is a combo box with a listbox, roles React Native does\n// not have, so the chevron is the button that says whether the list is\n// expanded.\n\ntype ComboBoxListProps = {\n  readonly anchor: RefObject<HostInstance | null>\n  readonly control: RefObject<ComponentRef<typeof TextInput> | null>\n  readonly isOpen: boolean\n  readonly label: string\n  readonly openedBy: MenuTriggerAction | undefined\n  readonly setPresent: (present: boolean) => void\n  readonly state: ComboBoxState<object, ComboBoxSelectionMode>\n}\n\ntype ComboBoxProps<\n  T extends object = object,\n  M extends ComboBoxSelectionMode = 'single',\n> = {\n  /**\n   * Lets the field keep text that matches no option. With it on, the text is\n   * what the field holds and submits; with it off, the text goes back to the\n   * chosen option's as the field loses focus.\n   * @default false\n   */\n  readonly allowsCustomValue?: boolean\n  /**\n   * Lets the list open with no options in it, showing its empty state. Left\n   * off, the list closes when a search leaves nothing.\n   * @default false\n   */\n  readonly allowsEmptyCollection?: boolean\n  /**\n   * Which options a search keeps, handed an option's text and what has been\n   * typed. Left out, an option is kept when its text contains what has been\n   * typed anywhere in it, ignoring case and accents.\n   */\n  readonly defaultFilter?: (textValue: string, inputValue: string) => boolean\n  /** The text the field opens with, when it keeps its own. */\n  readonly defaultInputValue?: string\n  /** The items the options are built from, when the field keeps its own. */\n  readonly defaultItems?: Iterable<T>\n  /**\n   * What is chosen at first, when the field keeps its own value: an\n   * option's `id`, or a list of them with `selectionMode=\"multiple\"`.\n   */\n  readonly defaultValue?: ValueType<M>\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /** The `id`s of the options drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\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 error colours, and the\n   * error a screen reader reads with the field all follow from it. The line\n   * under the field arrives with the message, so the field grows when this\n   * does, unless it is inside a `Form`, which keeps the line drawn. It wins\n   * over what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly 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  readonly floatingLabel?: boolean\n  /**\n   * Whether the `Form` around the field submits the chosen option's `id` or\n   * the text in the field. A field allowing a custom value, which may hold\n   * text that is no option's, always submits the text, and one choosing\n   * several always submits the list of their `id`s.\n   * @default 'key'\n   */\n  readonly formValue?: 'key' | 'text'\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to, after a server's error, say. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /** The text in the field, when the call site holds it. */\n  readonly inputValue?: string\n  /**\n   * Draws the field disabled: it takes no focus and no input, and its list\n   * never opens.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input, and its list never\n   * opens.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled. Inside a `native` form, a field with nothing chosen\n   * holds the form back, or with nothing typed where it submits its text.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /** The items the options are built from, when the call site holds them. */\n  readonly items?: Iterable<T>\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a combo box with no label is a box nobody can name.\n   */\n  readonly 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. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * What opens the list besides the chevron: typing into the field, the\n   * field taking focus, or nothing else.\n   * @default 'input'\n   */\n  readonly menuTrigger?: MenuTriggerAction\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by. What is\n   * submitted is set out under `formValue`.\n   */\n  readonly name?: string\n  /**\n   * Called with what is chosen whenever it changes: an option's `id`, or\n   * the list of them with `selectionMode=\"multiple\"`.\n   */\n  readonly onChange?: (value: ChangeValueType<M>) => void\n  /** Called with the text in the field whenever an edit changes it. */\n  readonly onInputChange?: (value: string) => void\n  /**\n   * Called with whether the list is open whenever that changes, and, as it\n   * opens, with what opened it.\n   */\n  readonly onOpenChange?: (\n    isOpen: boolean,\n    menuTrigger?: MenuTriggerAction,\n  ) => void\n  /**\n   * The options, a `ListBox.Item` for each and `ListBox.Section` to group\n   * them. The list is a ListBox's, and draws every slot one does. Give\n   * every option an `id`, which is what the value holds. With `items` or\n   * `defaultItems`, a function from an item to its option.\n   */\n  readonly options?: ((item: T) => ReactElement) | ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether one option is chosen, or several.\n   * @default 'single'\n   */\n  readonly selectionMode?: M\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /** The test id of the field's `TextInput`, which is the control. */\n  readonly testID?: string\n  /**\n   * Checks the value, handed the text in the field and what is chosen, and\n   * returns its problem in words, or several, where there is one, and\n   * `true`, `null` or `undefined` where there is none. Under the default\n   * `aria` validation the error shows as the value changes; inside a\n   * `native` form it shows once a submission is tried, or once the field\n   * loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: ComboBoxValidationValue<M>) => ValidationResult\n  /** What is chosen, when the call site holds it. */\n  readonly value?: ValueType<M>\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// React Stately's combo box takes its own two-value selection mode rather\n// than the collection-wide one, which also has `none`, as web's does.\ntype ComboBoxSelectionMode = 'multiple' | 'single'\n\ntype ToggleProps = {\n  readonly isDisabled: boolean\n  readonly isOpen: boolean\n  readonly label: string\n  readonly onPress: () => void\n}\n\n// The chevron is the page's 24dp trailing icon, which takes a press, and\n// reaches to the 48dp target every control here has.\nconst TOGGLE_SIZE = 24\nconst TOGGLE_SLOP = hitSlop(TOGGLE_SIZE, TOGGLE_SIZE)\n\n// The list never grows past its room, and the rows scroll inside it.\nconst SHRINKS: ViewStyle = { flexGrow: 0 }\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }: ResolvedTheme) =>\n  StyleSheet.create({\n    // The menus page's list surface: surface container low, the\n    // extra-small corner and the second elevation, clipping its rows to\n    // the corner, as Select's list draws it.\n    list: {\n      backgroundColor: colors.surfaceContainerLow,\n      borderRadius: radii.xs,\n      boxShadow: shadows.elevation2,\n      overflow: 'hidden',\n    },\n    // The chevron as a button: the glyph alone, as web draws it, since the\n    // box around it already carries the fill, the indicator and the focus.\n    // Round, for the ring a keyboard's focus draws around it.\n    toggle: {\n      alignItems: 'center',\n      borderRadius: radii.circle,\n      height: TOGGLE_SIZE,\n      justifyContent: 'center',\n      width: TOGGLE_SIZE,\n    },\n  }),\n)\n\n/**\n * A labelled text field that filters a list of options as it is typed. Its\n * value is React Stately's: pass `value` with `onChange` to hold which\n * option is chosen, `inputValue` with `onInputChange` to hold the text, or\n * the `default` forms of either to let it keep its own. The value is an\n * option's `id`, so give every option one; with `selectionMode=\"multiple\"`\n * it is a list of them.\n *\n * ```tsx\n * <ComboBox\n *   label=\"Label\"\n *   options={[\n *     <ListBox.Item id=\"first\" key=\"first\">First item</ListBox.Item>,\n *     <ListBox.Item id=\"second\" key=\"second\">Second item</ListBox.Item>,\n *   ]}\n * />\n * ```\n *\n * The box, the label, the input, the supporting line and the error are the\n * field chrome every field here draws; the list is a ListBox's, on the\n * surface every anchored panel here draws. `style` and `ref` are the field\n * as a whole, and `inputRef` and `testID` its `TextInput`.\n */\nfunction ComboBox<\n  T extends object = object,\n  M extends ComboBoxSelectionMode = 'single',\n>({\n  allowsCustomValue = false,\n  allowsEmptyCollection,\n  defaultFilter,\n  defaultInputValue,\n  defaultItems,\n  defaultValue,\n  description,\n  disabledKeys,\n  error,\n  floatingLabel = true,\n  formValue = 'key',\n  inputRef,\n  inputValue,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  items,\n  label,\n  leadingIcon,\n  menuTrigger,\n  name,\n  onChange,\n  onInputChange,\n  onOpenChange,\n  options,\n  ref,\n  selectionMode,\n  style,\n  testID,\n  validate,\n  value,\n  variant = 'filled',\n}: ComboBoxProps<T, M>) {\n  const id = useId()\n  const box = useRef<HostInstance>(null)\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const [openedBy, setOpenedBy] = useState<MenuTriggerAction | undefined>()\n  const messages = useMessages()\n  const locale = useLocaleOf(undefined)\n  const state = useComboBoxState<T, M>({\n    allowsCustomValue,\n    allowsEmptyCollection,\n    // Each option builds its own entry in the collection, as a ListBox's\n    // does. The collection skips what is not an element, as a ReactNode may\n    // be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: options as StatelyListProps<T>['children'],\n    defaultFilter: defaultFilter ?? containsIn(locale),\n    defaultInputValue,\n    defaultItems,\n    defaultValue,\n    disabledKeys,\n    inputValue,\n    isDisabled,\n    isReadOnly,\n    items,\n    menuTrigger,\n    onChange: (changed) => {\n      // A choice is made once, rather than typed, so it is committed as it\n      // lands, as Select commits one.\n      validation.onEdit()\n      validation.onBlur()\n      onChange?.(changed)\n    },\n    onInputChange,\n    onOpenChange: (isOpen, trigger) => {\n      if (isOpen) {\n        setOpenedBy(trigger)\n      }\n      // The chevron moves the focus into the input as it opens the list, as\n      // web's button does, so what is typed next narrows what it opened.\n      if (isOpen && trigger === 'manual') {\n        control.current?.focus()\n      }\n      onOpenChange?.(isOpen, trigger)\n    },\n    selectionMode,\n    // React Native Web takes the focus out of the input as an option is\n    // clicked, before the click lands, and closing on that blur would close\n    // the list under the pointer. A press outside the list closes it there,\n    // as it does everywhere. iOS and Android keep the focus in the input\n    // through a tap on an option, so the list closes on blur there, as on\n    // web.\n    shouldCloseOnBlur: Platform.OS !== 'web',\n    value,\n  })\n  const chosen = keysOf(state.value)\n  const several = state.selectionManager.selectionMode === 'multiple'\n  const submitsText = !several && (allowsCustomValue || formValue === 'text')\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: submitsText ? state.inputValue === '' : chosen.length === 0,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: several\n      ? chosen.map(String)\n      : submitsText\n        ? state.inputValue\n        : String(chosen[0] ?? ''),\n    validate,\n    value: validationValueOf<M>(state),\n  })\n  const focus = useFieldFocus({\n    onBlur: () => {\n      state.setFocused(false)\n      validation.onBlur()\n    },\n    onFocus: () => {\n      state.setFocused(true)\n    },\n  })\n  const shownError = validation.error\n\n  useImperativeHandle<\n    ComponentRef<typeof TextInput> | null,\n    ComponentRef<typeof TextInput> | null\n  >(inputRef, () => control.current, [])\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        // A list opened from the chevron takes the reader away from the\n        // input, so the box is told it is focused while the list is open,\n        // or its label would fall back over an empty input.\n        isFocused={focus.focused || state.isOpen}\n        isInvalid={shownError !== undefined}\n        isPopulated={state.inputValue !== '' || (several && chosen.length > 0)}\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        ref={box}\n        trailing={toggleFor(state, {\n          isDisabled: isDisabled || isReadOnly,\n          label: `${messages.showSuggestions} ${label}`,\n          onPress: () => {\n            state.toggle(null, 'manual')\n          },\n        })}\n        variant={variant}\n      >\n        <FieldInput\n          {...focus.handlers}\n          aria-label={label}\n          chosen={\n            several\n              ? listFor(\n                  state.selectedItems.map((item) => item.textValue),\n                  locale,\n                )\n              : undefined\n          }\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled && !isReadOnly}\n          onChangeText={editOf(state, validation.onEdit)}\n          ref={control}\n          testID={testID}\n          value={state.inputValue}\n        />\n      </FieldBox>\n      <FieldMessage description={description} error={shownError} id={id} />\n      <ResultsStatus count={state.isOpen ? rowCountOf(state) : null} />\n      <ComboBoxPopup\n        anchor={box}\n        control={control}\n        label={label}\n        openedBy={openedBy}\n        state={state}\n      />\n    </View>\n  )\n}\n\n/**\n * The list, drawn in the overlay host above the screen and placed under the\n * box: as wide as the box, flipped above it at the edge of the window, over\n * a layer that closes it on a press anywhere but the list and the box.\n */\nfunction ComboBoxList({\n  anchor,\n  control,\n  isOpen,\n  label,\n  openedBy,\n  setPresent,\n  state,\n}: ComboBoxListProps) {\n  const styles = stylesOf(useTheme())\n  const messages = useMessages()\n  const placement = useAnchoredPlacement({ align: 'start', anchor })\n  const motion = usePanelMotion(isOpen, placement.placed, setPresent)\n  const [panel, setPanel] = useState<HostInstance | null>(null)\n  const [option, setOption] = useState<HostInstance | null>(null)\n  // Only the chevron sends a screen reader into the list. Typing keeps it in\n  // the input.\n  const sendsReader = openedBy === 'manual'\n  // oxlint-disable-next-line typescript/unbound-method -- React Stately's `close` is a callback, and reads no `this`\n  const close = state.close\n\n  useBackToClose(close, isOpen)\n  // Only while open: a choice moves the focus key to the option just chosen\n  // as the list leaves, and the reader belongs back at the input by then.\n  useFocusOnPlaced(sendsReader && isOpen && placement.placed, option ?? panel)\n\n  return (\n    <>\n      {isOpen ? (\n        <DismissLayer\n          hole={placement.anchorFrame}\n          onPress={dismissOf(control, close)}\n        />\n      ) : null}\n      <Animated.View\n        onAccessibilityEscape={close}\n        onLayout={placement.onLayout}\n        ref={setPanel}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.list,\n          { width: placement.anchorWidth },\n          placement.style,\n          { transformOrigin: PANEL_ORIGINS[placement.side] },\n          motion,\n        )}\n      >\n        <CollectionView\n          aria-label={`${messages.suggestions} ${label}`}\n          focusKey={sendsReader ? focusKeyOf(state) : null}\n          keyboardShouldPersistTaps=\"handled\"\n          kind=\"listbox\"\n          onFocusTarget={setOption}\n          revealFocus={placement.placed}\n          state={state}\n          style={SHRINKS}\n        />\n      </Animated.View>\n    </>\n  )\n}\n\n/**\n * The list while it is open and while its exit runs: mounted the moment the\n * field opens it, and kept until the list has faded out. A screen reader the\n * chevron sent into the list goes back to the input once it has gone.\n */\nfunction ComboBoxPopup({\n  anchor,\n  control,\n  label,\n  openedBy,\n  state,\n}: Omit<ComboBoxListProps, 'isOpen' | 'setPresent'>) {\n  const [present, setPresent] = useState(state.isOpen)\n\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, openedBy !== 'manual', control)\n\n  if (!present) {\n    return null\n  }\n\n  return (\n    <Overlay>\n      <ComboBoxList\n        anchor={anchor}\n        control={control}\n        isOpen={state.isOpen}\n        label={label}\n        openedBy={openedBy}\n        setPresent={setPresent}\n        state={state}\n      />\n    </Overlay>\n  )\n}\n\n// A combo box's value with any list of keys in it copied.\nfunction copyOf(value: Key | null | readonly Key[]): Key | Key[] | null {\n  return typeof value === 'object' && value !== null ? [...value] : value\n}\n\n// A press outside the list closes it and takes the focus out of the input,\n// as a click outside does on web. iOS and Android leave a field focused\n// through a press outside a scroll view, which would keep the keyboard up\n// over a list that has gone.\nfunction dismissOf(\n  control: RefObject<ComponentRef<typeof TextInput> | null>,\n  close: () => void,\n) {\n  return () => {\n    control.current?.blur()\n    close()\n  }\n}\n\n// What an edit of the input does: the text goes to the state, which narrows\n// the list and opens it, and counts as an edit for the field's validation.\nfunction editOf(\n  state: ComboBoxState<object, ComboBoxSelectionMode>,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    state.setInputValue(text)\n    onEdit()\n  }\n}\n\n// The keys a combo box's value holds, one or several, as a list.\nfunction keysOf(value: Key | null | readonly Key[]): readonly Key[] {\n  if (value === null) {\n    return []\n  }\n\n  return typeof value === 'object' ? value : [value]\n}\n\n/**\n * The chevron as the button opening the list, named in React Aria's words\n * before the field's label, saying whether the list is open, and drawing the\n * ring a keyboard's focus draws. It takes its colour from the box's trailing\n * slot, so it follows the field into its error and disabled states.\n */\nfunction Toggle({ isDisabled, isOpen, label, onPress }: ToggleProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurfaceVariant,\n    corners: styles.toggle,\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n\n  return (\n    <Pressable\n      {...feedback.handlers}\n      aria-expanded={isOpen}\n      aria-label={label}\n      disabled={isDisabled}\n      hitSlop={TOGGLE_SLOP}\n      onPress={onPress}\n      role=\"button\"\n      style={composeStyles<ViewStyle>(styles.toggle, feedback.ring)}\n    >\n      <FieldChevron isOpen={isOpen} />\n    </Pressable>\n  )\n}\n\n/**\n * The chevron button for the box's trailing slot, which opens the list with\n * every option in it, whatever has been typed, as web's does, and closes it\n * again. A call rather than JSX written at the prop, which is what\n * react-perf's jsx-no-jsx-as-prop is after.\n */\nfunction toggleFor(\n  state: ComboBoxState<object, ComboBoxSelectionMode>,\n  props: Omit<ToggleProps, 'isOpen'>,\n) {\n  return <Toggle {...props} isOpen={state.isOpen} />\n}\n\n/**\n * What `validate` is handed, as React Aria's ComboBox hands it on web: the\n * text in the field and what is chosen, with the first chosen option's `id`\n * under the older name.\n */\nfunction validationValueOf<M extends ComboBoxSelectionMode>(\n  state: ComboBoxState<object, M>,\n): ComboBoxValidationValue<M> {\n  return {\n    inputValue: state.inputValue,\n    // oxlint-disable-next-line typescript/no-deprecated -- React Aria still hands it to `validate`\n    selectedKey: state.selectedKey,\n    // A list of keys is copied, since `validate` is typed to take one it may\n    // change, and the state's own is read-only.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the value's shape follows the mode, which TypeScript cannot follow through the copy\n    value: copyOf(state.value) as ComboBoxValidationValue<M>['value'],\n  }\n}\n\nexport { ComboBox }\nexport type { ComboBoxProps, ComboBoxSelectionMode }\n"],"mappings":"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"}

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

@@ -0,0 +1,120 @@
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { DateFieldStateOptions, DateValue } from "react-stately/useDateFieldState";
+//#region src/components/date-field/index.d.ts
+type DateFieldProps<T extends DateValue = DateValue> = Pick<DateFieldStateOptions<T>, 'defaultValue' | 'granularity' | 'hideTimeZone' | 'hourCycle' | 'isDateUnavailable' | 'maxValue' | 'minValue' | 'onChange' | 'placeholderValue' | 'shouldForceLeadingZeros' | 'validate' | 'value'> & {
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * invalid state a screen reader reads all follow from it. The line under
+   * the field arrives with the message, so the field grows when this does,
+   * unless it is inside a `Form`, which keeps the line drawn. It wins over
+   * what `validate`, the bounds and the form say.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label floats into the box's top, as the text fields page
+   * draws a field holding a value. The segments always show, their
+   * placeholders while empty, so it floats from the start. `false` keeps it
+   * small at the top.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * Draws the field disabled: it takes no focus and no input.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the value and takes focus, but takes no input.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it, after
+   * each segment's own. Required, since a field with no label is a box
+   * nobody can name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the segments: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The BCP 47 locale the date is written and typed in: the order of its
+   * segments, their placeholders, its digits and its calendar system.
+   * Defaults to the `I18nProvider`'s, or the device's outside one.
+   */
+  readonly locale?: string;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by. The form submits
+   * the date written out as ISO 8601, such as `2026-09-15`, and `''` for an
+   * empty field.
+   */
+  readonly name?: string;
+  /** Called as focus leaves the field, once it has filled what it can. */
+  readonly onBlur?: () => void;
+  /** Called as focus arrives in the field, at whichever segment. */
+  readonly onFocus?: () => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * An icon at the end of the box, after the segments: the page's 24dp
+   * trailing icon, in the muted role and the error role while the field has
+   * an error. The slot hands it that colour and size through
+   * `useIconStyle()`.
+   */
+  readonly trailingIcon?: ReactNode;
+  /**
+   * The filled box, or the outlined one: no fill, an outline that thickens
+   * and takes the primary role while focused, and the label cutting it, the
+   * text fields page's two fields.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+};
+/**
+ * A date typed rather than picked: one segment per part, typed into a digit
+ * at a time. The value is an `@internationalized/date` value, as on web:
+ * pass `value` with `onChange` to control it, or `defaultValue` to let it
+ * keep its own.
+ *
+ * ```tsx
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+ * ```
+ *
+ * How many segments there are and in what order is the locale's, through
+ * the `I18nProvider`: `granularity` adds the time's segments, and `minValue`,
+ * `maxValue` and `isDateUnavailable` say which dates are right, an error
+ * under the field saying so in React Aria's words where they are not. On iOS
+ * and Android a press on a segment raises the keyboard, and VoiceOver and
+ * TalkBack step each segment with a swipe; under React Native Web each
+ * segment is a spin button with React Aria's keys.
+ *
+ * The box, label and message are the field chrome in src/field, shared with
+ * every other field. `style`, `ref` and `testID` land on the field as a
+ * whole.
+ */
+declare function DateField<T extends DateValue = DateValue>({ isDisabled, isReadOnly, isRequired, locale, ...props }: DateFieldProps<T>): import("react").JSX.Element;
+//#endregion
+export { DateField, type DateFieldProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,111 @@
+import { useLocaleOf } from "../../i18n/provider.js";
+import { SegmentedField } from "../../segments/field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { createCalendar } from "@internationalized/date";
+import { useDateFieldState } from "react-stately/useDateFieldState";
+//#region src/components/date-field/index.tsx
+/**
+* A date typed rather than picked: one segment per part, typed into a digit
+* at a time. The value is an `@internationalized/date` value, as on web:
+* pass `value` with `onChange` to control it, or `defaultValue` to let it
+* keep its own.
+*
+* ```tsx
+* import { CalendarDate } from '@internationalized/date'
+*
+* <DateField defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+* ```
+*
+* How many segments there are and in what order is the locale's, through
+* the `I18nProvider`: `granularity` adds the time's segments, and `minValue`,
+* `maxValue` and `isDateUnavailable` say which dates are right, an error
+* under the field saying so in React Aria's words where they are not. On iOS
+* and Android a press on a segment raises the keyboard, and VoiceOver and
+* TalkBack step each segment with a swipe; under React Native Web each
+* segment is a spin button with React Aria's keys.
+*
+* The box, label and message are the field chrome in src/field, shared with
+* every other field. `style`, `ref` and `testID` land on the field as a
+* whole.
+*/
+function DateField(t0) {
+	const $ = c(23);
+	let locale;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({isDisabled: t1, isReadOnly: t2, isRequired: t3, locale, ...props} = t0);
+		$[0] = t0;
+		$[1] = locale;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		locale = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isReadOnly = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const writtenIn = useLocaleOf(locale);
+	let t4;
+	if ($[6] !== isDisabled || $[7] !== isReadOnly || $[8] !== isRequired || $[9] !== props || $[10] !== writtenIn) {
+		t4 = {
+			...props,
+			createCalendar,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn
+		};
+		$[6] = isDisabled;
+		$[7] = isReadOnly;
+		$[8] = isRequired;
+		$[9] = props;
+		$[10] = writtenIn;
+		$[11] = t4;
+	} else t4 = $[11];
+	const state = useDateFieldState(t4);
+	const t5 = state.value === null;
+	let t6;
+	if ($[12] !== state.value) {
+		t6 = state.value?.toString() ?? "";
+		$[12] = state.value;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== isDisabled || $[15] !== isReadOnly || $[16] !== isRequired || $[17] !== props || $[18] !== state || $[19] !== t5 || $[20] !== t6 || $[21] !== writtenIn) {
+		t7 = /* @__PURE__ */ jsx(SegmentedField, {
+			...props,
+			errors: state.realtimeValidation.validationErrors,
+			isDisabled,
+			isEmpty: t5,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn,
+			state,
+			submitted: t6
+		});
+		$[14] = isDisabled;
+		$[15] = isReadOnly;
+		$[16] = isRequired;
+		$[17] = props;
+		$[18] = state;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = writtenIn;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
+}
+//#endregion
+export { DateField };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","View","ViewStyle","DateFieldStateOptions","DateValue","createCalendar","useDateFieldState","FieldVariant","useLocaleOf","SegmentedField","DateFieldProps","Pick","T","description","error","floatingLabel","isDisabled","isReadOnly","isRequired","label","leadingIcon","locale","name","onBlur","onFocus","ref","style","testID","trailingIcon","variant","DateField","t0","$","_c","props","t1","t2","t3","undefined","writtenIn","t4","state","t5","value","t6","toString","t7","realtimeValidation","validationErrors","_c"],"sources":["../../../src/components/date-field/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, View, ViewStyle } from 'react-native'\nimport type {\n  DateFieldStateOptions,\n  DateValue,\n} from 'react-stately/useDateFieldState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { useDateFieldState } from 'react-stately/useDateFieldState'\n\nimport type { FieldVariant } from '../../field'\n\nimport { useLocaleOf } from '../../i18n/provider'\nimport { SegmentedField } from '../../segments/field'\n\n// kanso-ui's DateField: a date typed a segment at a time rather than picked\n// from a calendar, which is what the date pickers page means by a date in a\n// text field. The box, the label and the line under it are the field chrome\n// in src/field, shared with every other field, so a date field on a form is\n// the same box as the text field beside it. The segments and that chrome\n// around them are src/segments, which TimeField draws as well.\n//\n// The value is React Stately's `useDateFieldState`, which web's React Aria\n// field is built on, over `@internationalized/date`, so the segments, their\n// order, the bounds and the calendar a locale counts in are web's.\n//\n// Three things are this component's own, as on web.\n//\n// **How many segments there are, and in what order, is the locale's.** A\n// field under a British locale puts the day before the month, and a\n// `granularity` of `minute` adds two more, so the segments are drawn from\n// the state, never written out.\n//\n// **A segment not yet filled is muted, and the label floats from the start.**\n// Each segment shows its own placeholder, `mm`, `dd` and `yyyy` in English,\n// in the muted role, so a half-typed date reads as half-typed, and the label\n// sits above them even while the field is empty rather than over them.\n//\n// **A focused segment is a filled shape rather than a caret**, in primary,\n// since nothing else says which of the segments is being typed.\n//\n// **The locale is the `I18nProvider`'s**, as web reads it from React Aria's,\n// unless the `locale` prop names another, and the device's under neither.\n\ntype DateFieldProps<T extends DateValue = DateValue> = Pick<\n  DateFieldStateOptions<T>,\n  | 'defaultValue'\n  | 'granularity'\n  | 'hideTimeZone'\n  | 'hourCycle'\n  | 'isDateUnavailable'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'placeholderValue'\n  | 'shouldForceLeadingZeros'\n  | 'validate'\n  | 'value'\n> & {\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly 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 error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate`, the bounds and the form say.\n   */\n  readonly error?: string\n  /**\n   * Whether the label floats into the box's top, as the text fields page\n   * draws a field holding a value. The segments always show, their\n   * placeholders while empty, so it floats from the start. `false` keeps it\n   * small at the top.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * Draws the field disabled: it takes no focus and no input.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it, after\n   * each segment's own. Required, since a field with no label is a box\n   * nobody can name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the segments: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The BCP 47 locale the date is written and typed in: the order of its\n   * segments, their placeholders, its digits and its calendar system.\n   * Defaults to the `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by. The form submits\n   * the date written out as ISO 8601, such as `2026-09-15`, and `''` for an\n   * empty field.\n   */\n  readonly name?: string\n  /** Called as focus leaves the field, once it has filled what it can. */\n  readonly onBlur?: () => void\n  /** Called as focus arrives in the field, at whichever segment. */\n  readonly onFocus?: () => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * An icon at the end of the box, after the segments: the page's 24dp\n   * trailing icon, in the muted role and the error role while the field has\n   * an error. The slot hands it that colour and size through\n   * `useIconStyle()`.\n   */\n  readonly trailingIcon?: ReactNode\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it, the\n   * text fields page's two fields.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n/**\n * A date typed rather than picked: one segment per part, typed into a digit\n * at a time. The value is an `@internationalized/date` value, as on web:\n * pass `value` with `onChange` to control it, or `defaultValue` to let it\n * keep its own.\n *\n * ```tsx\n * import { CalendarDate } from '@internationalized/date'\n *\n * <DateField defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n *\n * How many segments there are and in what order is the locale's, through\n * the `I18nProvider`: `granularity` adds the time's segments, and `minValue`,\n * `maxValue` and `isDateUnavailable` say which dates are right, an error\n * under the field saying so in React Aria's words where they are not. On iOS\n * and Android a press on a segment raises the keyboard, and VoiceOver and\n * TalkBack step each segment with a swipe; under React Native Web each\n * segment is a spin button with React Aria's keys.\n *\n * The box, label and message are the field chrome in src/field, shared with\n * every other field. `style`, `ref` and `testID` land on the field as a\n * whole.\n */\nfunction DateField<T extends DateValue = DateValue>({\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  locale,\n  ...props\n}: DateFieldProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const state = useDateFieldState<T>({\n    ...props,\n    createCalendar,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    locale: writtenIn,\n  })\n\n  return (\n    <SegmentedField\n      {...props}\n      errors={state.realtimeValidation.validationErrors}\n      isDisabled={isDisabled}\n      isEmpty={state.value === null}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      locale={writtenIn}\n      state={state}\n      submitted={state.value?.toString() ?? ''}\n    />\n  )\n}\n\nexport type { DateFieldProps }\n\nexport { DateField }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0KA,SAAAiC,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAZ;CAAA,IAAAa;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAoD,CAAA,CAAAf,YAAAmB,IAAAlB,YAAAmB,IAAAlB,YAAAmB,IAAAhB,QAAA,GAAAa,SAAAH;EAMhCC,EAAA,KAAAD;EAAAC,EAAA,KAAAX;EAAAW,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAhB,SAAAW,EAAA;EAAAE,QAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CALlB,MAAAhB,aAAAmB,OAAAG,KAAAA,IAAA,QAAAH;CACA,MAAAlB,aAAAmB,OAAAE,KAAAA,IAAA,QAAAF;CACA,MAAAlB,aAAAmB,OAAAC,KAAAA,IAAA,QAAAD;CAIA,MAAAE,YAAkB/B,YAAYa,MAAM;CAAC,IAAAmB;CAAA,IAAAR,EAAA,OAAAhB,cAAAgB,EAAA,OAAAf,cAAAe,EAAA,OAAAd,cAAAc,EAAA,OAAAE,SAAAF,EAAA,QAAAO,WAAA;EACFC,KAAA;GAAA,GAC9BN;GAAK7B;GAAAW;GAAAC;GAAAC;GAAAG,QAKAkB;EACV;EAACP,EAAA,KAAAhB;EAAAgB,EAAA,KAAAf;EAAAe,EAAA,KAAAd;EAAAc,EAAA,KAAAE;EAAAF,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAPD,MAAAS,QAAcnC,kBAAqBkC,EAOlC;CAOY,MAAAE,KAAAD,MAAKE,UAAW;CAAI,IAAAC;CAAA,IAAAZ,EAAA,QAAAS,MAAAE,OAAA;EAKlBC,KAAAH,MAAKE,OAAgBE,SAAO,KAA5B;EAA6Bb,EAAA,MAAAS,MAAAE;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAhB,cAAAgB,EAAA,QAAAf,cAAAe,EAAA,QAAAd,cAAAc,EAAA,QAAAE,SAAAF,EAAA,QAAAS,SAAAT,EAAA,QAAAU,MAAAV,EAAA,QAAAY,MAAAZ,EAAA,QAAAO,WAAA;EAT1CO,KAAA,oBAAC,gBAAD;GAAe,GACTZ;GACI,QAAAO,MAAKM,mBAAmBC;GACpBhC;GACH,SAAA0B;GACGzB;GACAC;GACJqB,QAAAA;GACDE;GACI,WAAAG;EAA6B,CAAA;EACxCZ,EAAA,MAAAhB;EAAAgB,EAAA,MAAAf;EAAAe,EAAA,MAAAd;EAAAc,EAAA,MAAAE;EAAAF,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAY;EAAAZ,EAAA,MAAAO;EAAAP,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OAVFc;AAUE"}

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

@@ -0,0 +1,130 @@
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { DateDuration } from "@internationalized/date";
+import { DatePickerStateOptions, DateValue } from "react-stately/useDatePickerState";
+//#region src/components/date-picker/index.d.ts
+type DatePickerProps<T extends DateValue = DateValue> = Pick<DatePickerStateOptions<T>, 'defaultOpen' | 'defaultValue' | 'firstDayOfWeek' | 'granularity' | 'hideTimeZone' | 'hourCycle' | 'isDateUnavailable' | 'isOpen' | 'maxValue' | 'minValue' | 'onChange' | 'onOpenChange' | 'placeholderValue' | 'shouldCloseOnSelect' | 'shouldForceLeadingZeros' | 'validate' | 'value'> & {
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * invalid state a screen reader reads all follow from it. The line under
+   * the field arrives with the message, so the field grows when this does,
+   * unless it is inside a `Form`, which keeps the line drawn. It wins over
+   * what `validate`, the bounds and the form say.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label floats into the box's top, as the text fields page
+   * draws a field holding a value. The segments always show, their
+   * placeholders while empty, so it floats from the start. `false` keeps it
+   * small at the top.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * Draws the picker disabled: the field takes no input and the calendar
+   * does not open.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the value and takes focus, but takes no input, and the calendar
+   * does not open.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it, after
+   * each segment's own. It names the calendar too, and the button opening
+   * it after that button's own name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the segments: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The BCP 47 locale the date is written and typed in, and the calendar
+   * drawn in: the order of the segments, their placeholders, the month and
+   * weekday names, the digits and the calendar system. Defaults to the
+   * `I18nProvider`'s, or the device's outside one.
+   */
+  readonly locale?: string;
+  /**
+   * The name the value is submitted under by the `Form` around the picker,
+   * and the key its `validationErrors` reach it by. The form submits the
+   * date written out as ISO 8601, such as `2026-09-15`, and `''` for an
+   * empty picker.
+   */
+  readonly name?: string;
+  /** Called as focus leaves the field, once it has filled what it can. */
+  readonly onBlur?: () => void;
+  /** Called as focus arrives in the field, at whichever segment. */
+  readonly onFocus?: () => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether the calendar's header draws the month and the year as menu
+   * buttons, each opening a list of them in the grid's place, as the docked
+   * date picker's header does: see `Calendar`.
+   * @default false
+   */
+  readonly showMonthYearMenus?: boolean;
+  /** Positions and sizes the picker as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /**
+   * What the button that opens the calendar is called, for a screen reader,
+   * before the field's label. Left out, it is "Calendar" in the locale's
+   * words, React Aria's.
+   */
+  readonly triggerLabel?: string;
+  /**
+   * The filled box, or the outlined one, as the text fields page draws them.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+  /**
+   * How much of the calendar shows at once: `{ months: 2 }` draws two
+   * months, side by side from the expanded window size up and one under the
+   * other below it: see `Calendar`.
+   * @default { months: 1 }
+   */
+  readonly visibleDuration?: DateDuration;
+};
+/**
+ * A date typed into a field, or picked from a calendar behind a button. The
+ * value is an `@internationalized/date` value, as on web: pass `value` with
+ * `onChange` to control it, or `defaultValue` to let it keep its own.
+ *
+ * ```tsx
+ * import { CalendarDate } from '@internationalized/date'
+ *
+ * <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label="Label" />
+ * ```
+ *
+ * The segments are DateField's and the calendar is Calendar, so
+ * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` behave as
+ * they do there. From the medium window size up the calendar is docked to
+ * the field; below it, it opens centred over a scrim, which is the page's
+ * modal picker.
+ *
+ * `style`, `ref` and `testID` land on the picker as a whole.
+ */
+declare function DatePicker<T extends DateValue = DateValue>({ defaultOpen, defaultValue, firstDayOfWeek, isDateUnavailable, isDisabled, isOpen, isReadOnly, isRequired, label, locale, maxValue, minValue, onChange, onOpenChange, placeholderValue, shouldCloseOnSelect, showMonthYearMenus, triggerLabel, validate, value, visibleDuration, ...props }: DatePickerProps<T>): import("react").JSX.Element;
+//#endregion
+export { DatePicker, type DatePickerProps };
+//# sourceMappingURL=index.d.ts.map