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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","RefObject","StyleProp","TextInput","TextInputKeyPressEvent","TextInputProps","TextInputSubmitEditingEvent","ViewStyle","use","useId","useImperativeHandle","useRef","useState","Pressable","StyleSheet","useWindowDimensions","View","AutocompleteValue","ValidationResult","IconStyle","AutocompleteContext","describedBy","FieldInput","FieldMessage","FieldStates","FieldStroke","useFieldFocus","useStrokeMotion","useFieldValidation","CloseGlyph","SearchGlyph","IconStyleContext","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","IconButton","SearchBarProps","children","clearLabel","control","isDisabled","isFocused","isInvalid","isRequired","onClear","showsClear","SearchFieldProps","Omit","defaultValue","description","error","inputRef","label","name","onChange","value","onSubmit","placeholder","ref","style","validate","ICON_SIZE","MAX_WIDTH","CLEAR_LABEL","stylesOf","colors","radii","spacing","stateLayerOpacity","create","bar","alignItems","backgroundColor","surfaceContainerHigh","borderRadius","pill","flexDirection","gap","lg","maxWidth","paddingEnd","paddingStart","md","barDisabled","onSurface","disabledContainer","clear","marginEnd","xs","ring","bottom","left","pointerEvents","position","right","top","blurThen","onBlur","then","event","clearFrom","current","focus","clearInto","setOwn","onEdit","editInto","text","focusOf","iconStyleOf","color","size","keyInto","onKeyPress","undefined","nativeEvent","key","minHeightOf","minHeight","reportTo","autocomplete","setInputValue","SearchBar","t0","$","_c","theme","styles","fontScale","sizing","typography","t1","t2","corners","disabled","disableRipple","feedback","primary","T0","t3","t4","t5","handlers","onHoverIn","t6","onHoverOut","t7","t8","onPressIn","t9","onPressOut","t10","controlLg","bodyLargeLineHeight","t11","layer","t12","width","t13","onSurfaceVariant","disabledContent","t14","t15","Symbol","for","t16","t17","t18","t19","SearchField","onFocus","onSubmitEditing","props","id","own","inputValue","report","isEmpty","isReadOnly","submitted","validation","shownError","T1","focused","T2","submitInto","t20","t21","t22","t23","_c"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type {\n  StyleProp,\n  TextInput,\n  TextInputKeyPressEvent,\n  TextInputProps,\n  TextInputSubmitEditingEvent,\n  ViewStyle,\n} from 'react-native'\n\nimport { use, useId, useImperativeHandle, useRef, useState } from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\n\nimport type { AutocompleteValue } from '../../autocomplete'\nimport type { ValidationResult } from '../../form'\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport { AutocompleteContext } from '../../autocomplete'\nimport {\n  describedBy,\n  FieldInput,\n  FieldMessage,\n  FieldStates,\n  FieldStroke,\n  useFieldFocus,\n  useStrokeMotion,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { CloseGlyph, SearchGlyph } from '../../glyphs'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// kanso-ui's SearchField: the search page's search bar on its own, rather\n// than the box the other fields share. A pill on surface container high, the\n// page's 24dp magnifier in on surface variant at the start, the value in body\n// large on surface, and a clear button at the end while the field holds\n// anything. The page's 16dp of padding is to a 48dp tap target and the icon\n// sits 12dp inside that, so the magnifier starts 28dp in and the value 4dp\n// past the target, at 68dp. The clear button is the medium icon button, 40dp\n// around a 24dp icon, 4dp in from the padding, so its icon ends 28dp from the\n// end. The bar follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it.\n//\n// The bar is the large control height, 56dp, as web's is, and grows by as\n// much as the value's line does at the device's text size.\n//\n// Under a pointer and while pressed, the bar draws the state layer every\n// control draws through `usePressFeedback`, on surface at the hover and\n// pressed opacities, and a press anywhere on it focuses the control, as a\n// press anywhere on the other fields' boxes does. The page names a focused\n// state and draws nothing for it, so the bar takes the 2dp primary ring the\n// text fields page gives a focused field, inside the pill, as web's does. An\n// error is the text fields page's too, which the search page does not name:\n// the ring in the error role, 1dp at rest and 2dp once focused. The ring is a\n// border on a view of its own over the bar rather than a shadow, so the\n// colour and the width ease together and showing it moves nothing.\n//\n// **Disabled is the chrome's, translucent**, on surface at the disabled\n// opacities over whatever the bar sits on, as the text field's box is, rather\n// than mixed over the surface role as web's is.\n//\n// The label is the control's name and is never drawn, since the bar has no\n// place for one: the placeholder is what a person reads.\n\ntype SearchBarProps = {\n  /** The field's input, between the magnifier and the clear button. */\n  readonly children: ReactNode\n  readonly clearLabel: string\n  /** The control a press on the bar, or on the clear button, focuses. */\n  readonly control: RefObject<ComponentRef<typeof TextInput> | null>\n  readonly isDisabled: boolean\n  readonly isFocused: boolean\n  readonly isInvalid: boolean\n  readonly isRequired: boolean\n  /** Empties the field, from the clear button. */\n  readonly onClear: () => void\n  /** Whether the field holds anything, which shows the clear button. */\n  readonly showsClear: boolean\n}\n\ntype SearchFieldProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'returnKeyType'\n  | 'role'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, it is \"Clear search\", the English name web's takes from React\n   * Aria.\n   */\n  readonly clearLabel?: string\n  /**\n   * The value the field opens with, when it keeps its own. Inside an\n   * `Autocomplete` the autocomplete's is read instead.\n   */\n  readonly defaultValue?: string\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so the\n   * 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 ring in the error role,\n   * and the invalid state a screen reader reads all follow from it. The line\n   * under the bar 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   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input, and its clear\n   * button no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the field has to be filled in, which a screen reader reads.\n   * Inside a `native` form, an empty one holds the submission back and shows\n   * its error once a submission is tried. The bar draws no label, so there\n   * is no asterisk to show it.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field searches, for a screen reader. The bar draws no label, so\n   * this is read and never shown; `placeholder` is what is seen.\n   */\n  readonly label: 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.\n   */\n  readonly name?: string\n  /** Called with the new value as it is edited, and with `''` once cleared. */\n  readonly onChange?: (value: string) => void\n  /** Called once the field is emptied, from its clear button or Escape. */\n  readonly onClear?: () => void\n  /** Called with the value when the keyboard's search key submits it. */\n  readonly onSubmit?: (value: string) => void\n  /** The supporting text in the empty bar, which is what a person reads. */\n  readonly placeholder?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once the field loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: string) => ValidationResult\n  /**\n   * The value, when the call site keeps it. Inside an `Autocomplete` the\n   * autocomplete's `inputValue` is read instead.\n   */\n  readonly value?: string\n}\n\n// The page's icon, which the magnifier is drawn at.\nconst ICON_SIZE = 24\n\n// The widest the page draws a search bar.\nconst MAX_WIDTH = 720\n\n// The clear button's name when the call site gives none, as React Aria names\n// web's in English.\nconst CLEAR_LABEL = 'Clear search'\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    bar: {\n      alignItems: 'center',\n      backgroundColor: colors.surfaceContainerHigh,\n      borderRadius: radii.pill,\n      flexDirection: 'row',\n      gap: spacing.lg,\n      maxWidth: MAX_WIDTH,\n      paddingEnd: spacing.lg,\n      paddingStart: spacing.lg + spacing.md,\n    },\n    barDisabled: {\n      backgroundColor: withOpacity(\n        colors.onSurface,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n    // 4dp in from the padding, so the icon inside the 40dp button ends\n    // 28dp from the end, where the page's 48dp target puts it.\n    clear: {\n      marginEnd: spacing.xs,\n    },\n    // The ring, over the whole bar and its corners. It takes no touches,\n    // so a press lands on the bar under it.\n    ring: {\n      borderRadius: radii.pill,\n      bottom: 0,\n      left: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n// Empties the field: the value goes, and the call site is told twice over.\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Empties the field from its button, and hands focus back to the control, so\n// the next keyword is typed straight in.\nfunction clearFrom(\n  onClear: () => void,\n  control: RefObject<ComponentRef<typeof TextInput> | null>,\n) {\n  return () => {\n    onClear()\n    control.current?.focus()\n  }\n}\n\nfunction clearInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onClear: (() => void) | undefined,\n  onEdit: () => void,\n) {\n  return () => {\n    setOwn('')\n    onEdit()\n    onChange?.('')\n    onClear?.()\n  }\n}\n\n// Keeps an edit as the field's own value and reports it, so a field the call\n// site controls is told and one it does not still shows what was typed, and\n// tells the field's validation it was edited.\nfunction editInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    setOwn(text)\n    onEdit()\n    onChange?.(text)\n  }\n}\n\nfunction focusOf(control: RefObject<ComponentRef<typeof TextInput> | null>) {\n  return () => {\n    control.current?.focus()\n  }\n}\n\nfunction iconStyleOf(color: string): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n// Escape empties a field that holds anything, from a hardware keyboard or\n// under React Native Web, as it does web's. The call site's own handler is\n// called after.\nfunction keyInto(\n  clear: (() => void) | undefined,\n  onKeyPress: TextInputProps['onKeyPress'],\n) {\n  return (event: TextInputKeyPressEvent) => {\n    if (clear !== undefined && event.nativeEvent.key === 'Escape') {\n      clear()\n    }\n    onKeyPress?.(event)\n  }\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\n// Inside an Autocomplete, an edit reaches it as well as the call site, which\n// is what makes the list under the field narrow as it is typed into.\nfunction reportTo(\n  autocomplete: AutocompleteValue | null,\n  onChange: ((value: string) => void) | undefined,\n) {\n  if (autocomplete === null) {\n    return onChange\n  }\n\n  return (value: string) => {\n    autocomplete.setInputValue(value)\n    onChange?.(value)\n  }\n}\n\n/**\n * The bar around the control: the pill with its state layer and ring, the\n * magnifier at the start and the clear button at the end. A press anywhere on\n * it focuses the control.\n */\nfunction SearchBar({\n  children,\n  clearLabel,\n  control,\n  isDisabled,\n  isFocused,\n  isInvalid,\n  isRequired,\n  onClear,\n  showsClear,\n}: SearchBarProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const { fontScale } = useWindowDimensions()\n  const { colors, radii, sizing, stateLayerOpacity, typography } = theme\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.pill },\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const ring = useStrokeMotion(\n    isInvalid ? colors.error : colors.primary,\n    isDisabled ? 0 : isFocused ? 2 : isInvalid ? 1 : 0,\n  )\n\n  return (\n    <Pressable\n      accessible={false}\n      disabled={isDisabled}\n      focusable={false}\n      onHoverIn={feedback.handlers.onHoverIn}\n      onHoverOut={feedback.handlers.onHoverOut}\n      onPress={focusOf(control)}\n      onPressIn={feedback.handlers.onPressIn}\n      onPressOut={feedback.handlers.onPressOut}\n      style={composeStyles<ViewStyle>(\n        styles.bar,\n        isDisabled ? styles.barDisabled : undefined,\n        minHeightOf(\n          sizing.controlLg + typography.bodyLargeLineHeight * (fontScale - 1),\n        ),\n      )}\n    >\n      {feedback.layer}\n      <FieldStroke\n        color={ring.color}\n        sides=\"all\"\n        style={styles.ring}\n        width={ring.width}\n      />\n      <IconStyleContext\n        value={iconStyleOf(\n          isDisabled\n            ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n            : colors.onSurfaceVariant,\n        )}\n      >\n        <SearchGlyph />\n      </IconStyleContext>\n      <FieldStates\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        {children}\n      </FieldStates>\n      {showsClear ? (\n        <IconButton\n          aria-label={clearLabel}\n          isDisabled={isDisabled}\n          onPress={clearFrom(onClear, control)}\n          style={styles.clear}\n        >\n          <CloseGlyph />\n        </IconButton>\n      ) : null}\n    </Pressable>\n  )\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with the keyboard's\n * search key and cleared with its button. Pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own; `onSubmit` is handed\n * the value when the search key is pressed, and `onClear` is called when the\n * field is emptied.\n *\n * The bar is the search page's rather than the box the other fields share;\n * the control and the line under it are the field chrome in `src/field`.\n * React Native's own `TextInput` props reach the control; `style` and `ref`\n * are the field as a whole, and `inputRef` the control. Inside an\n * `Autocomplete`, the field shows what the autocomplete holds and reports\n * each edit to it, which filters the list beside it.\n *\n * ```tsx\n * <SearchField label=\"Label\" placeholder=\"Supporting text\" />\n * ```\n */\nfunction SearchField({\n  clearLabel = CLEAR_LABEL,\n  defaultValue = '',\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  isRequired = false,\n  label,\n  name,\n  onBlur,\n  onChange,\n  onClear,\n  onFocus,\n  onKeyPress,\n  onSubmit,\n  onSubmitEditing,\n  ref,\n  style,\n  validate,\n  value,\n  ...props\n}: SearchFieldProps) {\n  const id = useId()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const autocomplete = use(AutocompleteContext)\n  const [own, setOwn] = useState(defaultValue)\n  const current = autocomplete?.inputValue ?? value ?? own\n  const report = reportTo(autocomplete, onChange)\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: current === '',\n    isReadOnly: false,\n    isRequired,\n    name,\n    submitted: current,\n    validate,\n    value: current,\n  })\n  const focus = useFieldFocus({\n    onBlur: blurThen(validation.onBlur, onBlur),\n    onFocus,\n  })\n  const clear = clearInto(setOwn, report, onClear, validation.onEdit)\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      <SearchBar\n        clearLabel={clearLabel}\n        control={control}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isRequired={isRequired}\n        onClear={clear}\n        showsClear={current !== ''}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled}\n          onChangeText={editInto(setOwn, report, validation.onEdit)}\n          onKeyPress={keyInto(\n            current === '' || isDisabled ? undefined : clear,\n            onKeyPress,\n          )}\n          onSubmitEditing={submitInto(current, onSubmit, onSubmitEditing)}\n          ref={control}\n          returnKeyType=\"search\"\n          role=\"searchbox\"\n          value={current}\n        />\n      </SearchBar>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n// Hands the value to `onSubmit` when the keyboard's search key is pressed,\n// and the event to the call site's own handler after.\nfunction submitInto(\n  value: string,\n  onSubmit: ((value: string) => void) | undefined,\n  onSubmitEditing: TextInputProps['onSubmitEditing'],\n) {\n  return (event: TextInputSubmitEditingEvent) => {\n    onSubmit?.(value)\n    onSubmitEditing?.(event)\n  }\n}\n\nexport { SearchField }\nexport type { SearchFieldProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","RefObject","StyleProp","TextInput","TextInputKeyPressEvent","TextInputProps","TextInputSubmitEditingEvent","ViewStyle","use","useId","useImperativeHandle","useRef","useState","Pressable","StyleSheet","useWindowDimensions","View","AutocompleteValue","ValidationResult","IconStyle","AutocompleteContext","describedBy","FieldInput","FieldMessage","FieldStates","FieldStroke","useFieldFocus","useStrokeMotion","useFieldValidation","CloseGlyph","SearchGlyph","IconStyleContext","useMessages","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","IconButton","SearchBarProps","children","clearLabel","control","isDisabled","isFocused","isInvalid","isRequired","onClear","showsClear","SearchFieldProps","Omit","defaultValue","description","error","inputRef","label","name","onChange","value","onSubmit","placeholder","ref","style","validate","ICON_SIZE","MAX_WIDTH","stylesOf","colors","radii","spacing","stateLayerOpacity","create","bar","alignItems","backgroundColor","surfaceContainerHigh","borderRadius","pill","flexDirection","gap","lg","maxWidth","paddingEnd","paddingStart","md","barDisabled","onSurface","disabledContainer","clear","marginEnd","xs","ring","bottom","left","pointerEvents","position","right","top","blurThen","onBlur","then","event","clearFrom","current","focus","clearInto","setOwn","onEdit","editInto","text","focusOf","iconStyleOf","color","size","keyInto","onKeyPress","undefined","nativeEvent","key","minHeightOf","minHeight","reportTo","autocomplete","setInputValue","SearchBar","t0","$","_c","theme","styles","fontScale","sizing","typography","t1","t2","corners","disabled","disableRipple","feedback","primary","T0","t3","t4","t5","handlers","onHoverIn","t6","onHoverOut","t7","t8","onPressIn","t9","onPressOut","t10","controlLg","bodyLargeLineHeight","t11","layer","t12","width","t13","onSurfaceVariant","disabledContent","t14","t15","Symbol","for","t16","t17","t18","t19","SearchField","onFocus","onSubmitEditing","ownClearLabel","props","messages","clearSearch","id","own","inputValue","report","isEmpty","isReadOnly","submitted","validation","shownError","T1","focused","T2","submitInto","t20","t21","t22","_c"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type {\n  StyleProp,\n  TextInput,\n  TextInputKeyPressEvent,\n  TextInputProps,\n  TextInputSubmitEditingEvent,\n  ViewStyle,\n} from 'react-native'\n\nimport { use, useId, useImperativeHandle, useRef, useState } from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\n\nimport type { AutocompleteValue } from '../../autocomplete'\nimport type { ValidationResult } from '../../form'\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport { AutocompleteContext } from '../../autocomplete'\nimport {\n  describedBy,\n  FieldInput,\n  FieldMessage,\n  FieldStates,\n  FieldStroke,\n  useFieldFocus,\n  useStrokeMotion,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { CloseGlyph, SearchGlyph } from '../../glyphs'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { useMessages } from '../../i18n/provider'\nimport { usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// kanso-ui's SearchField: the search page's search bar on its own, rather\n// than the box the other fields share. A pill on surface container high, the\n// page's 24dp magnifier in on surface variant at the start, the value in body\n// large on surface, and a clear button at the end while the field holds\n// anything. The page's 16dp of padding is to a 48dp tap target and the icon\n// sits 12dp inside that, so the magnifier starts 28dp in and the value 4dp\n// past the target, at 68dp. The clear button is the medium icon button, 40dp\n// around a 24dp icon, 4dp in from the padding, so its icon ends 28dp from the\n// end. The bar follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it.\n//\n// The bar is the large control height, 56dp, as web's is, and grows by as\n// much as the value's line does at the device's text size.\n//\n// Under a pointer and while pressed, the bar draws the state layer every\n// control draws through `usePressFeedback`, on surface at the hover and\n// pressed opacities, and a press anywhere on it focuses the control, as a\n// press anywhere on the other fields' boxes does. The page names a focused\n// state and draws nothing for it, so the bar takes the 2dp primary ring the\n// text fields page gives a focused field, inside the pill, as web's does. An\n// error is the text fields page's too, which the search page does not name:\n// the ring in the error role, 1dp at rest and 2dp once focused. The ring is a\n// border on a view of its own over the bar rather than a shadow, so the\n// colour and the width ease together and showing it moves nothing.\n//\n// **Disabled is the chrome's, translucent**, on surface at the disabled\n// opacities over whatever the bar sits on, as the text field's box is, rather\n// than mixed over the surface role as web's is.\n//\n// The label is the control's name and is never drawn, since the bar has no\n// place for one: the placeholder is what a person reads.\n\ntype SearchBarProps = {\n  /** The field's input, between the magnifier and the clear button. */\n  readonly children: ReactNode\n  readonly clearLabel: string\n  /** The control a press on the bar, or on the clear button, focuses. */\n  readonly control: RefObject<ComponentRef<typeof TextInput> | null>\n  readonly isDisabled: boolean\n  readonly isFocused: boolean\n  readonly isInvalid: boolean\n  readonly isRequired: boolean\n  /** Empties the field, from the clear button. */\n  readonly onClear: () => void\n  /** Whether the field holds anything, which shows the clear button. */\n  readonly showsClear: boolean\n}\n\ntype SearchFieldProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'returnKeyType'\n  | 'role'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, it is the name React Aria gives web's in the `I18nProvider`'s\n   * locale, or the device's outside one, \"Clear search\" in English.\n   */\n  readonly clearLabel?: string\n  /**\n   * The value the field opens with, when it keeps its own. Inside an\n   * `Autocomplete` the autocomplete's is read instead.\n   */\n  readonly defaultValue?: string\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so the\n   * 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 ring in the error role,\n   * and the invalid state a screen reader reads all follow from it. The line\n   * under the bar 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   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input, and its clear\n   * button no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the field has to be filled in, which a screen reader reads.\n   * Inside a `native` form, an empty one holds the submission back and shows\n   * its error once a submission is tried. The bar draws no label, so there\n   * is no asterisk to show it.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field searches, for a screen reader. The bar draws no label, so\n   * this is read and never shown; `placeholder` is what is seen.\n   */\n  readonly label: 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.\n   */\n  readonly name?: string\n  /** Called with the new value as it is edited, and with `''` once cleared. */\n  readonly onChange?: (value: string) => void\n  /** Called once the field is emptied, from its clear button or Escape. */\n  readonly onClear?: () => void\n  /** Called with the value when the keyboard's search key submits it. */\n  readonly onSubmit?: (value: string) => void\n  /** The supporting text in the empty bar, which is what a person reads. */\n  readonly placeholder?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once the field loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: string) => ValidationResult\n  /**\n   * The value, when the call site keeps it. Inside an `Autocomplete` the\n   * autocomplete's `inputValue` is read instead.\n   */\n  readonly value?: string\n}\n\n// The page's icon, which the magnifier is drawn at.\nconst ICON_SIZE = 24\n\n// The widest the page draws a search bar.\nconst MAX_WIDTH = 720\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    bar: {\n      alignItems: 'center',\n      backgroundColor: colors.surfaceContainerHigh,\n      borderRadius: radii.pill,\n      flexDirection: 'row',\n      gap: spacing.lg,\n      maxWidth: MAX_WIDTH,\n      paddingEnd: spacing.lg,\n      paddingStart: spacing.lg + spacing.md,\n    },\n    barDisabled: {\n      backgroundColor: withOpacity(\n        colors.onSurface,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n    // 4dp in from the padding, so the icon inside the 40dp button ends\n    // 28dp from the end, where the page's 48dp target puts it.\n    clear: {\n      marginEnd: spacing.xs,\n    },\n    // The ring, over the whole bar and its corners. It takes no touches,\n    // so a press lands on the bar under it.\n    ring: {\n      borderRadius: radii.pill,\n      bottom: 0,\n      left: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n// Empties the field: the value goes, and the call site is told twice over.\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Empties the field from its button, and hands focus back to the control, so\n// the next keyword is typed straight in.\nfunction clearFrom(\n  onClear: () => void,\n  control: RefObject<ComponentRef<typeof TextInput> | null>,\n) {\n  return () => {\n    onClear()\n    control.current?.focus()\n  }\n}\n\nfunction clearInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onClear: (() => void) | undefined,\n  onEdit: () => void,\n) {\n  return () => {\n    setOwn('')\n    onEdit()\n    onChange?.('')\n    onClear?.()\n  }\n}\n\n// Keeps an edit as the field's own value and reports it, so a field the call\n// site controls is told and one it does not still shows what was typed, and\n// tells the field's validation it was edited.\nfunction editInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    setOwn(text)\n    onEdit()\n    onChange?.(text)\n  }\n}\n\nfunction focusOf(control: RefObject<ComponentRef<typeof TextInput> | null>) {\n  return () => {\n    control.current?.focus()\n  }\n}\n\nfunction iconStyleOf(color: string): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n// Escape empties a field that holds anything, from a hardware keyboard or\n// under React Native Web, as it does web's. The call site's own handler is\n// called after.\nfunction keyInto(\n  clear: (() => void) | undefined,\n  onKeyPress: TextInputProps['onKeyPress'],\n) {\n  return (event: TextInputKeyPressEvent) => {\n    if (clear !== undefined && event.nativeEvent.key === 'Escape') {\n      clear()\n    }\n    onKeyPress?.(event)\n  }\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\n// Inside an Autocomplete, an edit reaches it as well as the call site, which\n// is what makes the list under the field narrow as it is typed into.\nfunction reportTo(\n  autocomplete: AutocompleteValue | null,\n  onChange: ((value: string) => void) | undefined,\n) {\n  if (autocomplete === null) {\n    return onChange\n  }\n\n  return (value: string) => {\n    autocomplete.setInputValue(value)\n    onChange?.(value)\n  }\n}\n\n/**\n * The bar around the control: the pill with its state layer and ring, the\n * magnifier at the start and the clear button at the end. A press anywhere on\n * it focuses the control.\n */\nfunction SearchBar({\n  children,\n  clearLabel,\n  control,\n  isDisabled,\n  isFocused,\n  isInvalid,\n  isRequired,\n  onClear,\n  showsClear,\n}: SearchBarProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const { fontScale } = useWindowDimensions()\n  const { colors, radii, sizing, stateLayerOpacity, typography } = theme\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.pill },\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const ring = useStrokeMotion(\n    isInvalid ? colors.error : colors.primary,\n    isDisabled ? 0 : isFocused ? 2 : isInvalid ? 1 : 0,\n  )\n\n  return (\n    <Pressable\n      accessible={false}\n      disabled={isDisabled}\n      focusable={false}\n      onHoverIn={feedback.handlers.onHoverIn}\n      onHoverOut={feedback.handlers.onHoverOut}\n      onPress={focusOf(control)}\n      onPressIn={feedback.handlers.onPressIn}\n      onPressOut={feedback.handlers.onPressOut}\n      style={composeStyles<ViewStyle>(\n        styles.bar,\n        isDisabled ? styles.barDisabled : undefined,\n        minHeightOf(\n          sizing.controlLg + typography.bodyLargeLineHeight * (fontScale - 1),\n        ),\n      )}\n    >\n      {feedback.layer}\n      <FieldStroke\n        color={ring.color}\n        sides=\"all\"\n        style={styles.ring}\n        width={ring.width}\n      />\n      <IconStyleContext\n        value={iconStyleOf(\n          isDisabled\n            ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n            : colors.onSurfaceVariant,\n        )}\n      >\n        <SearchGlyph />\n      </IconStyleContext>\n      <FieldStates\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        {children}\n      </FieldStates>\n      {showsClear ? (\n        <IconButton\n          aria-label={clearLabel}\n          isDisabled={isDisabled}\n          onPress={clearFrom(onClear, control)}\n          style={styles.clear}\n        >\n          <CloseGlyph />\n        </IconButton>\n      ) : null}\n    </Pressable>\n  )\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with the keyboard's\n * search key and cleared with its button. Pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own; `onSubmit` is handed\n * the value when the search key is pressed, and `onClear` is called when the\n * field is emptied.\n *\n * The bar is the search page's rather than the box the other fields share;\n * the control and the line under it are the field chrome in `src/field`.\n * React Native's own `TextInput` props reach the control; `style` and `ref`\n * are the field as a whole, and `inputRef` the control. Inside an\n * `Autocomplete`, the field shows what the autocomplete holds and reports\n * each edit to it, which filters the list beside it.\n *\n * ```tsx\n * <SearchField label=\"Label\" placeholder=\"Supporting text\" />\n * ```\n */\nfunction SearchField({\n  clearLabel: ownClearLabel,\n  defaultValue = '',\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  isRequired = false,\n  label,\n  name,\n  onBlur,\n  onChange,\n  onClear,\n  onFocus,\n  onKeyPress,\n  onSubmit,\n  onSubmitEditing,\n  ref,\n  style,\n  validate,\n  value,\n  ...props\n}: SearchFieldProps) {\n  const messages = useMessages()\n  const clearLabel = ownClearLabel ?? messages.clearSearch\n  const id = useId()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const autocomplete = use(AutocompleteContext)\n  const [own, setOwn] = useState(defaultValue)\n  const current = autocomplete?.inputValue ?? value ?? own\n  const report = reportTo(autocomplete, onChange)\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: current === '',\n    isReadOnly: false,\n    isRequired,\n    name,\n    submitted: current,\n    validate,\n    value: current,\n  })\n  const focus = useFieldFocus({\n    onBlur: blurThen(validation.onBlur, onBlur),\n    onFocus,\n  })\n  const clear = clearInto(setOwn, report, onClear, validation.onEdit)\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      <SearchBar\n        clearLabel={clearLabel}\n        control={control}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isRequired={isRequired}\n        onClear={clear}\n        showsClear={current !== ''}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled}\n          onChangeText={editInto(setOwn, report, validation.onEdit)}\n          onKeyPress={keyInto(\n            current === '' || isDisabled ? undefined : clear,\n            onKeyPress,\n          )}\n          onSubmitEditing={submitInto(current, onSubmit, onSubmitEditing)}\n          ref={control}\n          returnKeyType=\"search\"\n          role=\"searchbox\"\n          value={current}\n        />\n      </SearchBar>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n// Hands the value to `onSubmit` when the keyboard's search key is pressed,\n// and the event to the call site's own handler after.\nfunction submitInto(\n  value: string,\n  onSubmit: ((value: string) => void) | undefined,\n  onSubmitEditing: TextInputProps['onSubmitEditing'],\n) {\n  return (event: TextInputSubmitEditingEvent) => {\n    onSubmit?.(value)\n    onSubmitEditing?.(event)\n  }\n}\n\nexport { SearchField }\nexport type { SearchFieldProps }\n"],"mappings":"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"}

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

@@ -13,7 +13,8 @@ type SeparatorProps = ViewProps & {
   readonly inset?: SeparatorInset;
   /**
    * Which way the rule runs. A rule takes its length from its parent: a
-   * horizontal one spans a column, and a vertical one a row.
+   * horizontal one spans a column, and a vertical one a row. Inside a
+   * `Toolbar` it runs across the bar unless this says otherwise.
    * @default 'horizontal'
    */
   readonly orientation?: 'horizontal' | 'vertical';
@@ -39,7 +40,7 @@ type SeparatorProps = ViewProps & {
  * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a
  * `style` there applies over the rule's own.
  */
-declare function Separator({ inset, orientation, style, ...props }: SeparatorProps): import("react").JSX.Element;
+declare function Separator({ inset, orientation: own, style, ...props }: SeparatorProps): import("react").JSX.Element;
 //#endregion
 export { Separator, type SeparatorInset, type SeparatorProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.js

@@ -1,7 +1,9 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { SeparatorOrientationContext } from "../../separator/index.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
+import { use } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/index.tsx
 const styles = StyleSheet.create({
@@ -58,50 +60,51 @@ const VERTICAL = { "aria-orientation": "vertical" };
 */
 function Separator(t0) {
 	const $ = c(14);
+	let own;
 	let props;
 	let style;
 	let t1;
-	let t2;
 	if ($[0] !== t0) {
-		({inset: t1, orientation: t2, style, ...props} = t0);
+		({inset: t1, orientation: own, style, ...props} = t0);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = style;
-		$[3] = t1;
-		$[4] = t2;
+		$[1] = own;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
 	} else {
-		props = $[1];
-		style = $[2];
-		t1 = $[3];
-		t2 = $[4];
+		own = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
 	}
 	const inset = t1 === void 0 ? "none" : t1;
-	const orientation = t2 === void 0 ? "horizontal" : t2;
 	const theme = useTheme();
-	const t3 = orientation === "vertical" ? VERTICAL : void 0;
-	let t4;
+	const provided = use(SeparatorOrientationContext);
+	const orientation = own ?? provided ?? "horizontal";
+	const t2 = orientation === "vertical" ? VERTICAL : void 0;
+	let t3;
 	if ($[5] !== inset || $[6] !== orientation || $[7] !== style || $[8] !== theme) {
-		t4 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
+		t3 = composeStyles(styles[orientation], fillOf(theme).rule, insetsOf(theme)[orientation][inset], style);
 		$[5] = inset;
 		$[6] = orientation;
 		$[7] = style;
 		$[8] = theme;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== props || $[11] !== t3 || $[12] !== t4) {
-		t5 = /* @__PURE__ */ jsx(View, {
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== props || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
 			role: "separator",
-			...t3,
+			...t2,
 			...props,
-			style: t4
+			style: t3
 		});
 		$[10] = props;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-	} else t5 = $[13];
-	return t5;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
 }
 //#endregion
 export { Separator };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","StyleSheet","View","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","props","style","t1","t2","undefined","theme","t3","t4","t5","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\n\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation = 'horizontal',\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;AA6BA,MAAMS,SAASL,WAAWM,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bd,WAAWM,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYP,WAAWM,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUX,WAAWM,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAS,IAAAR,aAAAS,IAAAF,OAAA,GAAAD,SAAAH;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,QAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJf,MAAAL,QAAAS,OAAAE,KAAAA,IAAA,SAAAF;CACA,MAAAR,cAAAS,OAAAC,KAAAA,IAAA,eAAAD;CAIA,MAAAE,QAAczC,SAAS;CAKd,MAAA0C,KAAAZ,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAG;CAAA,IAAAT,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAG,SAAAH,EAAA,OAAAO,OAAA;EAE/CE,KAAA1C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BQ,KACF;EAACH,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAO;EAAAP,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAE,SAAAF,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDT,EAAA,MAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAVFU;AAUE"}
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","use","StyleSheet","View","SeparatorOrientationContext","useTheme","composeStyles","themedStyles","styles","create","horizontal","alignSelf","flexShrink","height","vertical","width","fillOf","colors","rule","backgroundColor","outlineVariant","insetsOf","spacing","both","marginEnd","lg","marginStart","none","start","marginBottom","marginTop","VERTICAL","SeparatorInset","SeparatorProps","inset","orientation","ref","Separator","t0","$","_c","own","props","style","t1","undefined","theme","provided","t2","t3","t4","_c"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { use } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { SeparatorOrientationContext } from '../../separator'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own, as on web: the design system treats the two\n// as one decision.\n//\n// Drawn as a filled 1dp view rather than as a border, so the rule is the view\n// itself, which flex `gap` and anything measuring it can see.\n//\n// A rule has no length of its own. `alignSelf: 'stretch'` takes it from the\n// parent's cross axis: a horizontal rule spans a column, which is what a\n// `View` is by default, and a vertical one spans a row. A rule between two\n// rows should match whatever they turn out to be rather than being told a\n// length at the call site, and in a parent running the same way as the rule\n// it has none, which is the documented cost.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The page\n// names them \"inset\" and \"middle-inset\"; the prop says `start` and `both`, as\n// on web, since the two words say which ends move. The inset is a margin on\n// the axis the rule runs along, which shortens a stretched rule rather than\n// pushing it out of its parent. A horizontal rule's is `marginStart`, which\n// React Native puts on the right under right-to-left.\nconst styles = StyleSheet.create({\n  horizontal: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    height: 1,\n  },\n  vertical: {\n    alignSelf: 'stretch',\n    flexShrink: 0,\n    width: 1,\n  },\n})\n\nconst fillOf = themedStyles(({ colors }) =>\n  StyleSheet.create({\n    rule: { backgroundColor: colors.outlineVariant },\n  }),\n)\n\n// The page's 16dp, on the axis the rule runs along.\nconst insetsOf = themedStyles(({ spacing }) => ({\n  horizontal: StyleSheet.create({\n    both: { marginEnd: spacing.lg, marginStart: spacing.lg },\n    none: {},\n    start: { marginStart: spacing.lg },\n  }),\n  vertical: StyleSheet.create({\n    both: { marginBottom: spacing.lg, marginTop: spacing.lg },\n    none: {},\n    start: { marginTop: spacing.lg },\n  }),\n}))\n\n// React Native Web writes `aria-orientation` onto the element, which React\n// Native's types do not name. A horizontal rule needs none, since that is the\n// separator role's own default.\nconst VERTICAL: { readonly 'aria-orientation': 'vertical' } = {\n  'aria-orientation': 'vertical',\n}\n\ntype SeparatorInset = 'both' | 'none' | 'start'\n\ntype SeparatorProps = ViewProps & {\n  /**\n   * How far the rule is held off the ends it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both` holds\n   * it off each end, which is its middle-inset one. The inset follows the\n   * writing direction rather than a fixed side.\n   * @default 'none'\n   */\n  readonly inset?: SeparatorInset\n  /**\n   * Which way the rule runs. A rule takes its length from its parent: a\n   * horizontal one spans a column, and a vertical one a row. Inside a\n   * `Toolbar` it runs across the bar unless this says otherwise.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\n/**\n * A 1dp rule between items, in the outline-variant colour, carrying the\n * separator role.\n *\n * ```tsx\n * <Stack gap=\"none\">\n *   <Text>First item</Text>\n *   <Separator inset=\"start\" />\n *   <Text>Second item</Text>\n * </Stack>\n * ```\n *\n * `inset` holds the rule off the ends it runs between, `start` off the\n * leading one and `both` off each, which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * Web draws the rule again as a border under forced colours, which neither\n * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a\n * `style` there applies over the rule's own.\n */\nfunction Separator({\n  inset = 'none',\n  orientation: own,\n  style,\n  ...props\n}: SeparatorProps) {\n  const theme = useTheme()\n  const provided = use(SeparatorOrientationContext)\n  const orientation = own ?? provided ?? 'horizontal'\n\n  return (\n    <View\n      role=\"separator\"\n      {...(orientation === 'vertical' ? VERTICAL : undefined)}\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles[orientation],\n        fillOf(theme).rule,\n        insetsOf(theme)[orientation][inset],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { SeparatorInset, SeparatorProps }\n\nexport { Separator }\n"],"mappings":";;;;;;;;AA+BA,MAAMW,SAASN,WAAWO,OAAO;CAC/BC,YAAY;EACVC,WAAW;EACXC,YAAY;EACZC,QAAQ;CACV;CACAC,UAAU;EACRH,WAAW;EACXC,YAAY;EACZG,OAAO;CACT;AACF,CAAC;AAED,MAAMC,SAAST,cAAc,EAAEU,aAC7Bf,WAAWO,OAAO,EAChBS,MAAM,EAAEC,iBAAiBF,OAAOG,eAAe,EACjD,CAAC,CACH;AAGA,MAAMC,WAAWd,cAAc,EAAEe,eAAe;CAC9CZ,YAAYR,WAAWO,OAAO;EAC5Bc,MAAM;GAAEC,WAAWF,QAAQG;GAAIC,aAAaJ,QAAQG;EAAG;EACvDE,MAAM,CAAC;EACPC,OAAO,EAAEF,aAAaJ,QAAQG,GAAG;CACnC,CAAC;CACDX,UAAUZ,WAAWO,OAAO;EAC1Bc,MAAM;GAAEM,cAAcP,QAAQG;GAAIK,WAAWR,QAAQG;EAAG;EACxDE,MAAM,CAAC;EACPC,OAAO,EAAEE,WAAWR,QAAQG,GAAG;CACjC,CAAC;AACH,EAAE;AAKF,MAAMM,WAAwD,EAC5D,oBAAoB,WACtB;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAAM,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAmB,CAAA,CAAAJ,OAAAU,IAAAT,aAAAM,KAAAE,OAAA,GAAAD,SAAAJ;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,MAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAI,QAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAJf,MAAAL,QAAAU,OAAAC,KAAAA,IAAA,SAAAD;CAKA,MAAAE,QAAczC,SAAS;CACvB,MAAA0C,WAAiB9C,IAAIG,2BAA2B;CAChD,MAAA+B,cAAoBM,OAAAM,YAAA;CAKX,MAAAC,KAAAb,gBAAgB,aAAhBJ,WAAAc,KAAAA;CAAiD,IAAAI;CAAA,IAAAV,EAAA,OAAAL,SAAAK,EAAA,OAAAJ,eAAAI,EAAA,OAAAI,SAAAJ,EAAA,OAAAO,OAAA;EAE/CG,KAAA3C,cACLE,OAAO2B,cACPnB,OAAO8B,KAAK,CAAC,CAAA5B,MACbG,SAASyB,KAAK,CAAC,CAACX,YAAY,CAACD,QAC7BS,KACF;EAACJ,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;EAAAP,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAG,SAAAH,EAAA,QAAAS,MAAAT,EAAA,QAAAU,IAAA;EATHC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAW,GACXF;GAAiD,GAClDN;GACG,OAAAO;EAKN,CAAA;EACDV,EAAA,MAAAG;EAAAH,EAAA,MAAAS;EAAAT,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAVFW;AAUE"}

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

@@ -116,8 +116,8 @@ declare function SheetFooter({ style, ...props }: SheetPartProps): import("react
 /**
  * The bottom sheet's drag handle, a 32 by 4dp bar centred along its top edge.
  * Where the sheet has two heights it is a button moving it to the other one,
- * named "Drag handle" in the device's locale unless `aria-label` says
- * otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
+ * named "Drag handle" in the `I18nProvider`'s locale, or the device's outside
+ * one, unless `aria-label` says otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
  * none. `style`, `ref` and `testID` land on its view.
  */
 declare function SheetHandle({ 'aria-label': label, style, ...props }: SheetHandleProps): import("react").JSX.Element | null;

package/dist/components/sheet/index.js

@@ -2,9 +2,9 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { useMessages } from "../../i18n/provider.js";
 import { refsOf } from "../../ref/index.js";
 import { ButtonSlotContext } from "../../button/slots.js";
-import { messagesFor } from "../../i18n/index.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
 import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, useModalState, useModalTrigger } from "../../modal/index.js";
 import { c } from "react/compiler-runtime";
@@ -420,12 +420,12 @@ function SheetFooter(t0) {
 /**
 * The bottom sheet's drag handle, a 32 by 4dp bar centred along its top edge.
 * Where the sheet has two heights it is a button moving it to the other one,
-* named "Drag handle" in the device's locale unless `aria-label` says
-* otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
+* named "Drag handle" in the `I18nProvider`'s locale, or the device's outside
+* one, unless `aria-label` says otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
 * none. `style`, `ref` and `testID` land on its view.
 */
 function SheetHandle(t0) {
-	const $ = c(23);
+	const $ = c(21);
 	let label;
 	let props;
 	let style;
@@ -462,6 +462,7 @@ function SheetHandle(t0) {
 	} else t2 = $[8];
 	const feedback = usePressFeedback(t2);
 	const { toggle } = layout;
+	const messages = useMessages();
 	if (!layout.bottom) return null;
 	if (toggle === void 0) return /* @__PURE__ */ jsx(View, {
 		"aria-hidden": true,
@@ -471,23 +472,18 @@ function SheetHandle(t0) {
 	});
 	const T0 = Pressable;
 	const t3 = layout.expanded;
-	let t4;
-	if ($[9] !== label) {
-		t4 = label ?? messagesFor().dragHandle;
-		$[9] = label;
-		$[10] = t4;
-	} else t4 = $[10];
+	const t4 = label ?? messages.dragHandle;
 	const t5 = "button";
 	const t6 = feedback.handlers;
 	const t7 = composeStyles(styles.handle, feedback.ring, style);
 	let t8;
-	if ($[11] !== styles.bar) {
+	if ($[9] !== styles.bar) {
 		t8 = /* @__PURE__ */ jsx(View, { style: styles.bar });
-		$[11] = styles.bar;
-		$[12] = t8;
-	} else t8 = $[12];
+		$[9] = styles.bar;
+		$[10] = t8;
+	} else t8 = $[10];
 	let t9;
-	if ($[13] !== T0 || $[14] !== feedback.handlers || $[15] !== feedback.layer || $[16] !== layout.expanded || $[17] !== props || $[18] !== t4 || $[19] !== t7 || $[20] !== t8 || $[21] !== toggle) {
+	if ($[11] !== T0 || $[12] !== feedback.handlers || $[13] !== feedback.layer || $[14] !== layout.expanded || $[15] !== props || $[16] !== t4 || $[17] !== t7 || $[18] !== t8 || $[19] !== toggle) {
 		t9 = /* @__PURE__ */ jsxs(T0, {
 			"aria-expanded": t3,
 			"aria-label": t4,
@@ -498,17 +494,17 @@ function SheetHandle(t0) {
 			style: t7,
 			children: [feedback.layer, t8]
 		});
-		$[13] = T0;
-		$[14] = feedback.handlers;
-		$[15] = feedback.layer;
-		$[16] = layout.expanded;
-		$[17] = props;
-		$[18] = t4;
-		$[19] = t7;
-		$[20] = t8;
-		$[21] = toggle;
-		$[22] = t9;
-	} else t9 = $[22];
+		$[11] = T0;
+		$[12] = feedback.handlers;
+		$[13] = feedback.layer;
+		$[14] = layout.expanded;
+		$[15] = props;
+		$[16] = t4;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = toggle;
+		$[20] = t9;
+	} else t9 = $[20];
 	return t9;
 }
 /**