@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.0

package/dist/components/segmented-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactElement","ReactNode","Ref","GestureResponderEvent","LayoutChangeEvent","PressableProps","StyleProp","TextStyle","ViewProps","ViewStyle","AnimatedStyle","Key","ToggleGroupState","Children","createContext","Fragment","isValidElement","use","useLayoutEffect","useMemo","useRef","useState","Text","NativeText","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","useToggleGroupState","IconStyle","ResolvedTheme","toggleState","CheckGlyph","IconStyleContext","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","GroupContextValue","basis","count","onPlace","key","place","Place","opening","places","ReadonlyMap","selectionMode","SelectionMode","showSelectedIcon","state","LabelledBy","width","x","SegmentedButtonProps","Omit","children","defaultSelectedKeys","Iterable","disallowEmptySelection","isDisabled","onSelectionChange","keys","Set","ref","selectedKeys","style","SegmentedButtonSegmentProps","disableRipple","icon","id","GLYPH_SIZE","RULE_WIDTH","CHECK","GroupContext","IndexContext","styles","create","glyph","alignItems","flexShrink","height","justifyContent","glyphSlot","overflow","indicator","bottom","position","start","top","label","minWidth","measurer","opacity","pointerEvents","ownIndicator","end","spacer","flexDirection","stylesOf","colors","radii","sizing","spacing","clip","borderRadius","pill","first","borderStartWidth","segment","borderColor","outline","borderWidth","minHeight","controlSm","paddingHorizontal","sm","track","alignSelf","maxWidth","reachOf","basisOf","segments","labels","index","props","entries","labelled","hasLabel","get","undefined","content","reservesGlyph","Math","max","md","ruleOf","containerOf","stateLayerOpacity","disabled","marked","onSurface","disabledContainer","secondaryContainer","secondary","contentOf","selected","disabledContent","onSecondaryContainer","onSecondary","cornersOf","radius","last","Pick","borderBottomEndRadius","borderBottomStartRadius","borderTopEndRadius","borderTopStartRadius","iconStyleOf","color","size","Indicator","t0","$","_c","theme","motion","reduceMotion","rest","setRest","shift","shown","drawnAt","drawn","offset","abs","t1","durationMedium1","easingEmphasized","slide","duration","easing","bezier","current","set","from","moves","t2","motionStyle","transform","translateX","t3","t4","t5","Symbol","for","restThen","t6","t7","backgroundColor","t8","t9","measureThen","setLabels","update","event","nativeEvent","layout","Map","placeThen","onLayout","samePlace","known","SegmentedButton","role","single","segmentsOf","setPlaces","at","chosen","held","setHeld","setOpening","t10","length","context","T0","t11","t12","t13","t14","t15","t16","t17","own","find","map","_temp","t18","t19","t20","own_0","each","SegmentedButtonSegment","onBlur","onFocus","onHoverIn","onHoverOut","onPress","onPressIn","onPressOut","ownHitSlop","ownDisabled","group","several","has","reserves","corners","give","reserve","leading","leadingFloor","trailing","room","useSegmentMotion","fades","filled","feedback","handlers","toggleThen","flexGrow","ring","layer","slot","gap","fill","toArray","flatMap","child","type","toggleKey","timing","durationShort2","easingStandard","Segment","_c","NativeText"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactElement, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  LayoutChangeEvent,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key } from 'react-stately'\nimport type { ToggleGroupState } from 'react-stately/useToggleGroupState'\n\nimport {\n  Children,\n  createContext,\n  Fragment,\n  isValidElement,\n  use,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Text as NativeText, Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleGroupState } from 'react-stately/useToggleGroupState'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { toggleState } from '../../button'\nimport { CheckGlyph } from '../../glyphs'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The segmented buttons page's outlined segmented button, as kanso-ui's\n// SegmentedButton draws it: two to five segments joined into one outlined\n// track, of which one or several are chosen. A segment is Button's default\n// size and type role, a 40dp container with a label-large label, which is\n// what that page gives too.\n//\n// What a screen reader hears follows the selection mode, as on web. Choosing\n// one is a radio group, so the track is a `radiogroup` and each segment a\n// `radio` reporting whether it is checked. Choosing several is a `toolbar` of\n// buttons, each reporting whether it is selected through `toggleState`, as a\n// toggle Button does. The selection is React Stately's toggle group state, as\n// web's is React Aria's, and in a set that chooses one, the chosen segment\n// stays chosen when pressed again unless `disallowEmptySelection` is `false`.\n//\n// **The segments are one track.** Each carries the page's 1dp outline, and\n// each after the first drops its leading edge, so neighbours share one rule.\n// The outer ends take the page's fully rounded shape and the joins are\n// square. Every segment is the same width, as wide as the widest one asks\n// for: the labels are measured off screen, and each segment is handed the\n// widest one's width, so a track squeezed into less room shares it out\n// equally. The track is as wide as that, and never wider than what\n// holds it.\n//\n// **A chosen segment draws a check** in the page's 18dp icon slot, in place\n// of its `icon`. `showSelectedIcon={false}` turns it off, and the chosen\n// segment then takes the secondary role with its label on it, since the\n// page's own chosen container is too faint to say which is chosen by itself.\n// A segment with an icon and no label keeps its icon when chosen, and takes\n// the secondary role too. Every segment that could draw the slot keeps room\n// for it whether or not it does, split either side of the label while\n// nothing is drawn, so the track never changes width with the choice. That\n// room gives way before the label does: a squeezed segment gives back the\n// room first, then 4dp of its 12dp padding, and only then cuts its label\n// short with an ellipsis. The slot and the room around it ease over\n// `durationShort2` on the standard curve, and the check opens from its\n// centre.\n//\n// **The chosen container moves.** In a set that chooses one it is a view of\n// the track's own, behind the segments, so the labels and the rules are\n// drawn over it, and it slides between segments over `durationMedium1` on the\n// emphasized curve. It is drawn inside the track's outline, so it takes the\n// rounded shape at either end and square corners between. It can only be\n// placed once the segments are laid out, so until the choice first moves, the\n// segment the set opened on draws a container of its own in the same place.\n// Without it, the chosen label would stand on the bare surface in the frames\n// before that layout, which is unreadable where no check marks it, since its\n// colour is then the one meant for the secondary role. In a set that chooses\n// several there is no one segment for it to be at, so each segment fades its\n// own in and out where it is, over `durationShort2`. Both happen at once\n// under reduced motion.\n//\n// The state layer, the ripple and the focus ring are src/press's, in the\n// label's colour, over the chosen container. A segment's target reaches 4dp\n// above and below the 40dp track, to the page's 48dp, and not across, since\n// the segments sit flush.\n//\n// **Disabled is the page's colour at an opacity, translucent**, as a\n// button's is: the label on-surface at `disabledContent`, and the rule and a\n// chosen segment's container on-surface at `disabledContainer`.\n//\n// Two departures from web. The arrow keys do not move between the segments\n// or choose one: each segment is a stop of its own for a hardware keyboard,\n// and activating it there chooses it. And a label cut short has no `title` to\n// show it whole, which a screen reader does not need, since it reads all of\n// it.\n\n/** What the set reads from the segments, and a segment from the set. */\ntype GroupContextValue = {\n  /** The basis each segment takes, once every label is measured. */\n  readonly basis: number | undefined\n  readonly count: number\n  /** Records where a segment was laid out, for the chosen container. */\n  readonly onPlace: (key: Key, place: Place) => void\n  /**\n   * The segment a set that chooses one opened on, until the choice first\n   * moves, which draws the chosen container itself meanwhile.\n   */\n  readonly opening: Key | undefined\n  readonly places: ReadonlyMap<Key, Place>\n  readonly selectionMode: SelectionMode\n  readonly showSelectedIcon: boolean\n  readonly state: ToggleGroupState\n}\n\n/** A name for the set: its own label, or the id of what labels it. */\ntype LabelledBy =\n  | { readonly 'aria-label': string; readonly 'aria-labelledby'?: string }\n  | { readonly 'aria-label'?: string; readonly 'aria-labelledby': string }\n\n/** Where a segment was laid out in the track. */\ntype Place = {\n  readonly width: number\n  readonly x: number\n}\n\ntype SegmentedButtonProps = LabelledBy &\n  Omit<ViewProps, 'aria-label' | 'aria-labelledby' | 'children' | 'style'> & {\n    /** The segments, each a `SegmentedButton.Segment` with an `id`. */\n    readonly children?: ReactNode\n    /** The keys chosen at first, when the set keeps its own selection. */\n    readonly defaultSelectedKeys?: Iterable<Key>\n    /**\n     * Whether the chosen segment stays chosen when it is pressed again. On\n     * by default while one is chosen, since a radio group always holds a\n     * choice; `false` lets a press clear it. Off by default while several\n     * may be, where any of them can be turned off.\n     * @default true while one is chosen, false while several may be\n     */\n    readonly disallowEmptySelection?: boolean\n    /**\n     * Disables every segment.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    /** Called with the chosen keys when the choice changes. */\n    readonly onSelectionChange?: (keys: Set<Key>) => void\n    readonly ref?: Ref<View>\n    /** The chosen keys, when the call site holds the selection. */\n    readonly selectedKeys?: Iterable<Key>\n    /**\n     * Whether one segment is chosen at a time, or several.\n     * @default 'single'\n     */\n    readonly selectionMode?: SelectionMode\n    /**\n     * Whether a chosen segment draws a check before its label, as the page\n     * has it. `false` leaves the segment's own icon in place while chosen,\n     * and draws the chosen segment on the stronger secondary container.\n     * @default true\n     */\n    readonly showSelectedIcon?: boolean\n    readonly style?: StyleProp<ViewStyle>\n  }\n\ntype SegmentedButtonSegmentProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'id' | 'style'\n> & {\n  /** The segment's label. */\n  readonly children?: ReactNode\n  /**\n   * Draws no press ripple. The hover and pressed state layers are unaffected.\n   * @default false\n   */\n  readonly disableRipple?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot, which hands it the\n   * label's colour and its size through `useIconStyle()`. Replaced by the\n   * check while the segment is chosen, unless the set turns that off.\n   *\n   * Given with no label, the icon is the segment, centred in it and kept\n   * while chosen; name the segment with `aria-label` then.\n   */\n  readonly icon?: ReactNode\n  /** The key the selection reports the segment by. */\n  readonly id: Key\n  /**\n   * Disables the segment alone.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype SelectionMode = 'multiple' | 'single'\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// and the 8dp gap between it and the label. A literal, as on web: the theme\n// has no scale for icon sizes.\nconst GLYPH_SIZE = 18\n\n// The rule every segment draws.\nconst RULE_WIDTH = 1\n\nconst CHECK = <CheckGlyph />\n\nconst GroupContext = createContext<GroupContextValue | null>(null)\n\n// Where in the track a segment sits, which decides its corners and its rule.\nconst IndexContext = createContext(0)\n\nconst styles = StyleSheet.create({\n  // A glyph sized rather than filling its slot, so a slot part way through\n  // opening clips it instead of squashing it.\n  glyph: {\n    alignItems: 'center',\n    flexShrink: 0,\n    height: GLYPH_SIZE,\n    justifyContent: 'center',\n    width: GLYPH_SIZE,\n  },\n  // Opens from its centre, so the check wipes out from the middle rather\n  // than arriving at full size.\n  glyphSlot: {\n    alignItems: 'center',\n    flexShrink: 0,\n    height: GLYPH_SIZE,\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  // The chosen container of a set that chooses one: the track's own view,\n  // behind the segments, at the start of the track and moved from there to\n  // the chosen segment.\n  indicator: {\n    bottom: 0,\n    position: 'absolute',\n    start: 0,\n    top: 0,\n  },\n  // A label holds its width while the spacers beside it give theirs back,\n  // and is cut short only at the width it is handed.\n  label: {\n    flexShrink: 0,\n    minWidth: 0,\n  },\n  // The labels measured off screen, at their own widths, for the basis.\n  measurer: {\n    alignItems: 'flex-start',\n    opacity: 0,\n    pointerEvents: 'none',\n    position: 'absolute',\n    start: 0,\n    top: 0,\n  },\n  // A segment's own chosen container, inside its rule: in a set that chooses\n  // several, and in the segment a set that chooses one opened on.\n  ownIndicator: {\n    bottom: 0,\n    end: 0,\n    position: 'absolute',\n    start: 0,\n    top: 0,\n  },\n  // Either side of the label, holding the room a glyph needs, given back\n  // before the label is cut.\n  spacer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    flexShrink: 1,\n    justifyContent: 'flex-end',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, sizing, spacing }) =>\n  StyleSheet.create({\n    // What the chosen container of a set that chooses one is drawn in: the\n    // track's own outline, so the container takes an end's rounded shape at\n    // either end and square corners between, wherever it is.\n    clip: {\n      borderRadius: radii.pill,\n      bottom: 0,\n      end: 0,\n      overflow: 'hidden',\n      pointerEvents: 'none',\n      position: 'absolute',\n      start: 0,\n      top: 0,\n    },\n    // The first segment draws the leading rule the others leave to it.\n    first: {\n      borderStartWidth: RULE_WIDTH,\n    },\n    segment: {\n      alignItems: 'center',\n      borderColor: colors.outline,\n      borderStartWidth: 0,\n      borderWidth: RULE_WIDTH,\n      flexDirection: 'row',\n      flexShrink: 1,\n      justifyContent: 'center',\n      minHeight: sizing.controlSm,\n      minWidth: 0,\n      paddingHorizontal: spacing.sm,\n    },\n    // As wide as what is in it and never wider than what holds it, from the\n    // start edge.\n    track: {\n      alignSelf: 'flex-start',\n      flexDirection: 'row',\n      maxWidth: '100%',\n    },\n  }),\n)\n\n// The track reaches as far as its segments' targets, since iOS and Android\n// hand a touch to a view only once its parent has taken it.\nconst reachOf = themedStyles(({ sizing }) => hitSlop(sizing.controlSm))\n\n/**\n * The width every segment takes: the widest one's, which is its label, its\n * padding, the room it keeps for a glyph and its rule. Undefined until every\n * label has been measured.\n */\nfunction basisOf(\n  segments: readonly ReactElement<SegmentedButtonSegmentProps>[],\n  labels: ReadonlyMap<Key, number>,\n  showSelectedIcon: boolean,\n  { spacing }: ResolvedTheme,\n): number | undefined {\n  let basis = 0\n\n  for (const [index, { props }] of segments.entries()) {\n    const labelled = hasLabel(props.children)\n    const label = labels.get(props.id)\n\n    if (labelled && label === undefined) {\n      return undefined\n    }\n\n    const content = labelled\n      ? (label ?? 0) +\n        (reservesGlyph(props, showSelectedIcon) ? GLYPH_SIZE + spacing.sm : 0)\n      : props.icon === undefined\n        ? 0\n        : GLYPH_SIZE\n\n    basis = Math.max(\n      basis,\n      content + spacing.md * 2 + ruleOf(index) + RULE_WIDTH,\n    )\n  }\n\n  return basis\n}\n\n/**\n * The chosen container's colour: the page's secondary container, the\n * stronger secondary where no check marks the choice, and on-surface at the\n * disabled opacity while the segment is disabled.\n */\nfunction containerOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  disabled: boolean,\n  marked: boolean,\n): string {\n  if (disabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer)\n  }\n  return marked ? colors.secondaryContainer : colors.secondary\n}\n\n/**\n * The label's colour, which the glyph, the state layer and the ripple take\n * too.\n */\nfunction contentOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    disabled,\n    marked,\n    selected,\n  }: {\n    readonly disabled: boolean\n    readonly marked: boolean\n    readonly selected: boolean\n  },\n): string {\n  if (disabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  if (!selected) {\n    return colors.onSurface\n  }\n  return marked ? colors.onSecondaryContainer : colors.onSecondary\n}\n\n/** A segment's corners: rounded at the ends of the track, square between. */\nfunction cornersOf(\n  radius: number,\n  first: boolean,\n  last: boolean,\n): Pick<\n  ViewStyle,\n  | 'borderBottomEndRadius'\n  | 'borderBottomStartRadius'\n  | 'borderTopEndRadius'\n  | 'borderTopStartRadius'\n> {\n  return {\n    borderBottomEndRadius: last ? radius : 0,\n    borderBottomStartRadius: first ? radius : 0,\n    borderTopEndRadius: last ? radius : 0,\n    borderTopStartRadius: first ? radius : 0,\n  }\n}\n\n// Whether a segment has a label, rather than an icon alone. An empty string\n// and a `false` from a condition at the call site are no label either.\nfunction hasLabel(children: ReactNode) {\n  return (\n    children !== undefined &&\n    children !== null &&\n    children !== false &&\n    children !== ''\n  )\n}\n\nfunction iconStyleOf(color: string): IconStyle {\n  return { color, size: GLYPH_SIZE }\n}\n\n/**\n * The chosen container of a set that chooses one, which slides to the\n * segment chosen from the one chosen before it, fades in where nothing was\n * chosen, and fades out where nothing now is.\n */\nfunction Indicator({\n  color,\n  place,\n  selected,\n}: {\n  readonly color: string\n  readonly place: Place | undefined\n  readonly selected: Key | undefined\n}) {\n  const theme = useTheme()\n  const { motion } = theme\n  const reduceMotion = useReducedMotion()\n  // Where the container rests before it is moved: the start of the track,\n  // which is its right end under a right-to-left layout, so that where it\n  // rests there depends on how wide it is. It is only read at the width it\n  // was measured at, which keeps a resize from drawing it a frame out of\n  // place.\n  const [rest, setRest] = useState<Place | undefined>(undefined)\n  const shift = useSharedValue(0)\n  const shown = useSharedValue(0)\n  // The key the container was last drawn at, and whether it has been drawn\n  // at all, which tells a choice made on a set already drawn from the first\n  // one the set opens with.\n  const drawnAt = useRef<Key | undefined>(undefined)\n  const drawn = useRef(false)\n\n  const offset =\n    place === undefined ||\n    rest === undefined ||\n    Math.abs(rest.width - place.width) >= 1\n      ? undefined\n      : place.x - rest.x\n\n  useLayoutEffect(() => {\n    const slide = {\n      duration: motion.durationMedium1,\n      easing: Easing.bezier(...motion.easingEmphasized),\n    }\n\n    if (selected === undefined) {\n      if (drawnAt.current !== undefined) {\n        shown.set(reduceMotion ? 0 : withTiming(0, slide))\n      }\n      drawnAt.current = undefined\n      return\n    }\n\n    if (offset === undefined) {\n      return\n    }\n\n    const from = drawnAt.current\n    // A move from another segment slides; a layout that moved under the\n    // same choice, or a choice from nothing, is drawn where it lands.\n    const moves = from !== undefined && from !== selected && !reduceMotion\n\n    shift.set(moves ? withTiming(offset, slide) : offset)\n\n    if (from === undefined) {\n      shown.set(drawn.current && !reduceMotion ? withTiming(1, slide) : 1)\n    }\n\n    drawnAt.current = selected\n    drawn.current = true\n  }, [motion, offset, reduceMotion, selected, shift, shown])\n\n  const motionStyle = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      opacity: shown.get(),\n      transform: [{ translateX: shift.get() }],\n    }\n  })\n\n  return (\n    <View style={stylesOf(theme).clip}>\n      <Animated.View\n        onLayout={restThen(setRest)}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.indicator,\n          { backgroundColor: color, width: place?.width ?? 0 },\n          motionStyle,\n        )}\n      />\n    </View>\n  )\n}\n\n/**\n * Records a label's width off screen, for the basis. Built by a call rather\n * than written inline at the prop, which is what react-perf's\n * jsx-no-new-function-as-prop is after; the React Compiler memoises the\n * result on its inputs.\n */\nfunction measureThen(\n  setLabels: (\n    update: (labels: ReadonlyMap<Key, number>) => ReadonlyMap<Key, number>,\n  ) => void,\n  key: Key,\n) {\n  return (event: LayoutChangeEvent) => {\n    const { width } = event.nativeEvent.layout\n\n    setLabels((labels) =>\n      labels.get(key) === width ? labels : new Map(labels).set(key, width),\n    )\n  }\n}\n\n/**\n * Records where a segment was laid out, then calls the call site's own\n * `onLayout`.\n */\nfunction placeThen(\n  onPlace: (key: Key, place: Place) => void,\n  key: Key,\n  onLayout: PressableProps['onLayout'],\n) {\n  return (event: LayoutChangeEvent) => {\n    const { width, x } = event.nativeEvent.layout\n\n    onPlace(key, { width, x })\n    onLayout?.(event)\n  }\n}\n\n// Whether a segment can ever draw a glyph, and so keeps room for one: a set\n// that draws the check, or an icon of its own. A segment that never needs\n// the slot keeps no room for it, which would be dead space in every segment.\nfunction reservesGlyph(\n  { children, icon }: SegmentedButtonSegmentProps,\n  showSelectedIcon: boolean,\n) {\n  return (showSelectedIcon && hasLabel(children)) || icon !== undefined\n}\n\n/** Records where the chosen container rests before it is moved. */\nfunction restThen(setRest: (rest: Place) => void) {\n  return (event: LayoutChangeEvent) => {\n    const { width, x } = event.nativeEvent.layout\n\n    setRest({ width, x })\n  }\n}\n\n// The leading rule only the first segment draws.\nfunction ruleOf(index: number) {\n  return index === 0 ? RULE_WIDTH : 0\n}\n\nfunction samePlace(known: Place | undefined, place: Place) {\n  return (\n    known !== undefined && known.width === place.width && known.x === place.x\n  )\n}\n\n/**\n * A row of two to five joined segments, of which one, or with\n * `selectionMode=\"multiple\"` several, is chosen. Pass `selectedKeys` with\n * `onSelectionChange` to hold the choice, or `defaultSelectedKeys` to let the\n * set keep its own. Give every segment an `id`, which is the key the choice\n * is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require. Choosing one is announced as a radio group, and choosing\n * several as a toolbar of buttons that each say whether they are selected.\n *\n * `style`, `ref` and `testID` land on the track.\n */\nfunction SegmentedButton({\n  children,\n  defaultSelectedKeys,\n  disallowEmptySelection,\n  isDisabled = false,\n  onSelectionChange,\n  selectedKeys,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  style,\n  ...props\n}: SegmentedButtonProps) {\n  const theme = useTheme()\n  const role = useTypeRole('labelLarge')\n  const single = selectionMode === 'single'\n  const state = useToggleGroupState({\n    defaultSelectedKeys,\n    disallowEmptySelection: disallowEmptySelection ?? single,\n    isDisabled,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode,\n  })\n  const segments = segmentsOf(children)\n  const [labels, setLabels] = useState<ReadonlyMap<Key, number>>(new Map())\n  const [places, setPlaces] = useState<ReadonlyMap<Key, Place>>(new Map())\n\n  // The segment the chosen container is at in a set that chooses one, or\n  // was last at, which it fades out at once the choice is cleared.\n  const chosen = [...state.selectedKeys].at(0)\n  const [held, setHeld] = useState(chosen)\n  if (chosen !== undefined && chosen !== held) {\n    setHeld(chosen)\n  }\n  // The segment the set opened on, until the choice first moves, which draws\n  // the chosen container itself while the track's waits on the layout.\n  const [opening, setOpening] = useState(chosen)\n  if (opening !== undefined && opening !== chosen) {\n    setOpening(undefined)\n  }\n\n  const basis = basisOf(segments, labels, showSelectedIcon, theme)\n  const context = useMemo(\n    () => ({\n      basis,\n      count: segments.length,\n      onPlace: (key: Key, place: Place) => {\n        setPlaces((current) =>\n          samePlace(current.get(key), place)\n            ? current\n            : new Map(current).set(key, place),\n        )\n      },\n      opening,\n      places,\n      selectionMode,\n      showSelectedIcon,\n      state,\n    }),\n    [\n      basis,\n      opening,\n      places,\n      segments.length,\n      selectionMode,\n      setPlaces,\n      showSelectedIcon,\n      state,\n    ],\n  )\n\n  const segment = segments.find(({ props: own }) => own.id === (chosen ?? held))\n\n  return (\n    <View\n      hitSlop={reachOf(theme)}\n      role={single ? 'radiogroup' : 'toolbar'}\n      {...props}\n      style={composeStyles<ViewStyle>(stylesOf(theme).track, style)}\n    >\n      {single ? (\n        <Indicator\n          color={containerOf(\n            theme,\n            isDisabled || segment?.props.isDisabled === true,\n            showSelectedIcon && hasLabel(segment?.props.children),\n          )}\n          place={\n            segment === undefined ? undefined : places.get(segment.props.id)\n          }\n          selected={segment === undefined ? undefined : chosen}\n        />\n      ) : null}\n      <GroupContext value={context}>\n        {segments.map((each, at) => (\n          <IndexContext key={each.props.id} value={at}>\n            {each}\n          </IndexContext>\n        ))}\n      </GroupContext>\n      <View aria-hidden style={styles.measurer}>\n        {segments.map(({ props: own }) =>\n          hasLabel(own.children) ? (\n            <NativeText\n              key={own.id}\n              numberOfLines={1}\n              onLayout={measureThen(setLabels, own.id)}\n              style={role}\n            >\n              {own.children}\n            </NativeText>\n          ) : null,\n        )}\n      </View>\n    </View>\n  )\n}\n\n/**\n * One segment. Its `id` is the key the choice reports it by, and its label is\n * what names it. A chosen segment draws a check before its label; one not\n * chosen draws its `icon`, if it has one. Renders nothing outside a\n * `SegmentedButton`.\n *\n * `style`, `ref` and `testID` land on the segment's `Pressable`.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  icon,\n  id,\n  isDisabled: ownDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  ...props\n}: SegmentedButtonSegmentProps) {\n  const theme = useTheme()\n  const group = use(GroupContext)\n  const index = use(IndexContext)\n  const role = useTypeRole('labelLarge')\n\n  const state = group?.state\n  const several = group?.selectionMode === 'multiple'\n  const showSelectedIcon = group?.showSelectedIcon ?? true\n  const selected = state?.selectedKeys.has(id) ?? false\n  const disabled = ownDisabled || state?.isDisabled === true\n  const labelled = hasLabel(children)\n  const marked = showSelectedIcon && labelled\n  const reserves = reservesGlyph({ children, icon, id }, showSelectedIcon)\n  const glyph = selected && marked ? CHECK : (icon ?? null)\n  const drawn = glyph !== null\n  const first = index === 0\n  const last = index === (group?.count ?? 0) - 1\n\n  const { radii, spacing } = theme\n  const content = contentOf(theme, { disabled, marked, selected })\n  const corners = cornersOf(radii.pill, first, last)\n  const own = stylesOf(theme)\n\n  // The room for a glyph, as the header sets it out: either side of the\n  // label while nothing is drawn, all of it before the label once something\n  // is, and the glyph alone before an icon with no label.\n  const give = spacing.md - spacing.sm\n  const reserve = GLYPH_SIZE + spacing.sm\n  const leading = reserves\n    ? drawn\n      ? give + (labelled ? reserve : GLYPH_SIZE)\n      : give + reserve / 2\n    : give\n  const leadingFloor = drawn ? (labelled ? reserve : GLYPH_SIZE) : 0\n  const trailing = reserves && !drawn ? give + reserve / 2 : give\n  // The most the label takes: what is left of the segment once its rule, its\n  // padding and a drawn glyph are taken out.\n  const width = group?.places.get(id)?.width\n  const room =\n    width === undefined\n      ? undefined\n      : width -\n        ruleOf(index) -\n        RULE_WIDTH -\n        spacing.sm * 2 -\n        (drawn && labelled ? reserve : 0)\n\n  const motion = useSegmentMotion({\n    content,\n    drawn,\n    fades: several,\n    filled: several ? selected : id === group?.opening,\n    labelled,\n    leading,\n    leadingFloor,\n    room,\n    trailing,\n  })\n\n  const feedback = usePressFeedback({\n    color: content,\n    corners,\n    disabled,\n    disableRipple,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  if (group === null) {\n    return null\n  }\n\n  return (\n    <Pressable\n      role={several ? 'button' : 'radio'}\n      {...(several ? toggleState(selected) : { 'aria-checked': selected })}\n      {...props}\n      {...feedback.handlers}\n      disabled={disabled}\n      hitSlop={ownHitSlop ?? reachOf(theme)}\n      onLayout={placeThen(group.onPlace, id, onLayout)}\n      onPress={toggleThen(group.state, id, onPress)}\n      style={composeStyles<ViewStyle>(\n        own.segment,\n        first ? own.first : undefined,\n        corners,\n        disabled\n          ? {\n              borderColor: withOpacity(\n                theme.colors.onSurface,\n                theme.stateLayerOpacity.disabledContainer,\n              ),\n            }\n          : undefined,\n        group.basis === undefined\n          ? undefined\n          : { flexGrow: 0, width: group.basis },\n        feedback.ring,\n        style,\n      )}\n    >\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.ownIndicator,\n          corners,\n          { backgroundColor: containerOf(theme, disabled, marked) },\n          motion.fill,\n        )}\n      />\n      {feedback.layer}\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.spacer,\n          motion.leading,\n        )}\n      >\n        {reserves ? (\n          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(\n              styles.glyphSlot,\n              motion.slot,\n            )}\n          >\n            <IconStyleContext value={iconStyleOf(content)}>\n              <View style={styles.glyph}>{glyph}</View>\n            </IconStyleContext>\n          </Animated.View>\n        ) : null}\n        {reserves ? <Animated.View style={motion.gap} /> : null}\n      </Animated.View>\n      {labelled ? (\n        <Animated.Text\n          numberOfLines={1}\n          style={composeStyles<AnimatedStyle<TextStyle>>(\n            role,\n            styles.label,\n            motion.label,\n          )}\n        >\n          {children}\n        </Animated.Text>\n      ) : null}\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.spacer,\n          motion.trailing,\n        )}\n      />\n    </Pressable>\n  )\n}\n\n/**\n * The segments among a set's children, with any fragment between them opened,\n * so a set can take its segments as one fragment.\n */\nfunction segmentsOf(\n  children: ReactNode,\n): ReactElement<SegmentedButtonSegmentProps>[] {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ readonly children?: ReactNode }>(child)) {\n      return []\n    }\n    if (child.type === Fragment) {\n      return segmentsOf(child.props.children)\n    }\n    return isValidElement<SegmentedButtonSegmentProps>(child) ? [child] : []\n  })\n}\n\n/**\n * A press on a segment: the call site's own `onPress`, then the choice, which\n * chooses the segment, or clears it if it was chosen and the set allows that.\n */\nfunction toggleThen(\n  state: ToggleGroupState,\n  key: Key,\n  onPress: PressableProps['onPress'],\n) {\n  return (event: GestureResponderEvent) => {\n    onPress?.(event)\n    state.toggleKey(key)\n  }\n}\n\n/**\n * What a segment eases: the room either side of its label and the glyph slot\n * between them over `durationShort2`, the label's colour and the most it\n * takes with them, and its own chosen container where it `fades`, in a set\n * that chooses several. All of it is there at once under reduced motion, and\n * the container is in a set that chooses one, where it only stands in for the\n * track's until the choice first moves.\n */\nfunction useSegmentMotion({\n  content,\n  drawn,\n  fades,\n  filled,\n  labelled,\n  leading,\n  leadingFloor,\n  room,\n  trailing,\n}: {\n  readonly content: string\n  readonly drawn: boolean\n  readonly fades: boolean\n  readonly filled: boolean\n  readonly labelled: boolean\n  readonly leading: number\n  readonly leadingFloor: number\n  readonly room: number | undefined\n  readonly trailing: number\n}) {\n  const { motion, spacing } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n  const gap = drawn && labelled ? spacing.sm : 0\n  const slot = drawn ? GLYPH_SIZE : 0\n  const opacity = filled ? 1 : 0\n\n  return {\n    fill: useAnimatedStyle(() => {\n      'worklet'\n      return {\n        opacity: reduceMotion || !fades ? opacity : withTiming(opacity, timing),\n      }\n    }),\n    // A view of its own rather than an end margin on the slot: under React\n    // Native Web, Reanimated writes an animated style to the element without\n    // the step that turns `marginEnd` into a side, so it would never arrive.\n    gap: useAnimatedStyle(() => {\n      'worklet'\n      return { width: reduceMotion ? gap : withTiming(gap, timing) }\n    }),\n    label: useAnimatedStyle(() => {\n      'worklet'\n      return {\n        color: reduceMotion ? content : withTiming(content, timing),\n        ...(room === undefined\n          ? undefined\n          : { maxWidth: reduceMotion ? room : withTiming(room, timing) }),\n      }\n    }),\n    leading: useAnimatedStyle(() => {\n      'worklet'\n      return {\n        minWidth: reduceMotion\n          ? leadingFloor\n          : withTiming(leadingFloor, timing),\n        width: reduceMotion ? leading : withTiming(leading, timing),\n      }\n    }),\n    slot: useAnimatedStyle(() => {\n      'worklet'\n      return { width: reduceMotion ? slot : withTiming(slot, timing) }\n    }),\n    trailing: useAnimatedStyle(() => {\n      'worklet'\n      return { width: reduceMotion ? trailing : withTiming(trailing, timing) }\n    }),\n  }\n}\n\nSegmentedButton.Segment = SegmentedButtonSegment\n\nexport { SegmentedButton, SegmentedButtonSegment }\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/separator/index.d.ts
+type SeparatorInset = 'both' | 'none' | 'start';
+type SeparatorProps = ViewProps & {
+  /**
+   * How far the rule is held off the ends it runs between. `start` holds it
+   * 16dp off the leading end, which is the page's inset divider; `both` holds
+   * it off each end, which is its middle-inset one. The inset follows the
+   * writing direction rather than a fixed side.
+   * @default 'none'
+   */
+  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.
+   * @default 'horizontal'
+   */
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+/**
+ * A 1dp rule between items, in the outline-variant colour, carrying the
+ * separator role.
+ *
+ * ```tsx
+ * <Stack gap="none">
+ *   <Text>First item</Text>
+ *   <Separator inset="start" />
+ *   <Text>Second item</Text>
+ * </Stack>
+ * ```
+ *
+ * `inset` holds the rule off the ends it runs between, `start` off the
+ * leading one and `both` off each, which is what a rule between list rows
+ * takes so it lines up with their text rather than the container's edge.
+ *
+ * Web draws the rule again as a border under forced colours, which neither
+ * 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;
+//#endregion
+export { Separator, type SeparatorInset, type SeparatorProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.js

@@ -0,0 +1,109 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/separator/index.tsx
+const styles = StyleSheet.create({
+	horizontal: {
+		alignSelf: "stretch",
+		flexShrink: 0,
+		height: 1
+	},
+	vertical: {
+		alignSelf: "stretch",
+		flexShrink: 0,
+		width: 1
+	}
+});
+const fillOf = themedStyles(({ colors }) => StyleSheet.create({ rule: { backgroundColor: colors.outlineVariant } }));
+const insetsOf = themedStyles(({ spacing }) => ({
+	horizontal: StyleSheet.create({
+		both: {
+			marginEnd: spacing.lg,
+			marginStart: spacing.lg
+		},
+		none: {},
+		start: { marginStart: spacing.lg }
+	}),
+	vertical: StyleSheet.create({
+		both: {
+			marginBottom: spacing.lg,
+			marginTop: spacing.lg
+		},
+		none: {},
+		start: { marginTop: spacing.lg }
+	})
+}));
+const VERTICAL = { "aria-orientation": "vertical" };
+/**
+* A 1dp rule between items, in the outline-variant colour, carrying the
+* separator role.
+*
+* ```tsx
+* <Stack gap="none">
+*   <Text>First item</Text>
+*   <Separator inset="start" />
+*   <Text>Second item</Text>
+* </Stack>
+* ```
+*
+* `inset` holds the rule off the ends it runs between, `start` off the
+* leading one and `both` off each, which is what a rule between list rows
+* takes so it lines up with their text rather than the container's edge.
+*
+* Web draws the rule again as a border under forced colours, which neither
+* iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a
+* `style` there applies over the rule's own.
+*/
+function Separator(t0) {
+	const $ = c(14);
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({inset: t1, orientation: t2, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = style;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		props = $[1];
+		style = $[2];
+		t1 = $[3];
+		t2 = $[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;
+	if ($[5] !== inset || $[6] !== orientation || $[7] !== style || $[8] !== theme) {
+		t4 = 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, {
+			role: "separator",
+			...t3,
+			...props,
+			style: t4
+		});
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+//#endregion
+export { Separator };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,70 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
+//#region src/components/stack/index.d.ts
+type StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
+type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';
+type StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';
+type StackProps = ViewProps & {
+  /**
+   * How the children line up across the stack: along the width of a column,
+   * along the height of a row. Left unset, they stretch, which is what makes
+   * every card in a column the same width.
+   *
+   * `start` is what a child sized to its content needs in a column, which
+   * spans the whole width otherwise.
+   */
+  readonly align?: StackAlign;
+  /**
+   * Which way the children run.
+   * @default 'column'
+   */
+  readonly direction?: 'column' | 'row';
+  /**
+   * The space between children, as a step of the spacing scale. `none` closes
+   * it entirely.
+   *
+   * Worth setting. The default is a middle step, and how much air a group of
+   * things wants is the one thing a stack cannot work out for itself.
+   * @default 'md'
+   */
+  readonly gap?: StackGap;
+  /**
+   * How leftover space is distributed along the stack. Left unset, the
+   * children sit at the start and the space collects after them.
+   *
+   * `between` is the one that puts a headline at one end of a row and its
+   * actions at the other.
+   */
+  readonly justify?: StackJustify;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Lets a row wrap onto further lines rather than overflowing. Has no effect
+   * on a column, which has as many lines as it has children.
+   * @default false
+   */
+  readonly wrap?: boolean;
+};
+/**
+ * A row or a column of children with one gap between them, taken from the
+ * spacing scale.
+ *
+ * ```tsx
+ * <Stack align="center" direction="row" gap="sm">
+ *   <Text>Label</Text>
+ *   <Text tone="muted">Supporting line</Text>
+ * </Stack>
+ * ```
+ *
+ * Layout only: it paints no surface and wraps no child, so each child is a
+ * flex item exactly as it was written. It is the answer to spacing a group of
+ * things, which is why no component here carries a margin of its own: the
+ * space between two things belongs to whatever holds both of them.
+ *
+ * Web's `render` has no counterpart, since a native view is a `View` whatever
+ * it holds. `style`, `ref` and `testID` land on that `View`, and a `style`
+ * there applies over the stack's own.
+ */
+declare function Stack({ align, direction, gap, justify, style, wrap, ...props }: StackProps): import("react").JSX.Element;
+//#endregion
+export { Stack, type StackAlign, type StackGap, type StackJustify, type StackProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stack/index.js

@@ -0,0 +1,107 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/stack/index.tsx
+const alignments = StyleSheet.create({
+	baseline: { alignItems: "baseline" },
+	center: { alignItems: "center" },
+	end: { alignItems: "flex-end" },
+	start: { alignItems: "flex-start" },
+	stretch: { alignItems: "stretch" }
+});
+const directions = StyleSheet.create({
+	column: { flexDirection: "column" },
+	row: { flexDirection: "row" }
+});
+const justifications = StyleSheet.create({
+	around: { justifyContent: "space-around" },
+	between: { justifyContent: "space-between" },
+	center: { justifyContent: "center" },
+	end: { justifyContent: "flex-end" },
+	start: { justifyContent: "flex-start" }
+});
+const styles = StyleSheet.create({ wrap: { flexWrap: "wrap" } });
+const gapsOf = themedStyles(({ spacing }) => StyleSheet.create({
+	lg: { gap: spacing.lg },
+	md: { gap: spacing.md },
+	none: { gap: 0 },
+	sm: { gap: spacing.sm },
+	xl: { gap: spacing.xl },
+	xs: { gap: spacing.xs },
+	xxl: { gap: spacing.xxl },
+	xxs: { gap: spacing.xxs },
+	xxxl: { gap: spacing.xxxl }
+}));
+/**
+* A row or a column of children with one gap between them, taken from the
+* spacing scale.
+*
+* ```tsx
+* <Stack align="center" direction="row" gap="sm">
+*   <Text>Label</Text>
+*   <Text tone="muted">Supporting line</Text>
+* </Stack>
+* ```
+*
+* Layout only: it paints no surface and wraps no child, so each child is a
+* flex item exactly as it was written. It is the answer to spacing a group of
+* things, which is why no component here carries a margin of its own: the
+* space between two things belongs to whatever holds both of them.
+*
+* Web's `render` has no counterpart, since a native view is a `View` whatever
+* it holds. `style`, `ref` and `testID` land on that `View`, and a `style`
+* there applies over the stack's own.
+*/
+function Stack(t0) {
+	const $ = c(12);
+	let align;
+	let justify;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({align, direction: t1, gap: t2, justify, style, wrap: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = align;
+		$[2] = justify;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		align = $[1];
+		justify = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+	}
+	const direction = t1 === void 0 ? "column" : t1;
+	const gap = t2 === void 0 ? "md" : t2;
+	const wrap = t3 === void 0 ? false : t3;
+	const gaps = gapsOf(useTheme());
+	const T0 = View;
+	const t4 = composeStyles(directions[direction], gaps[gap], align === void 0 ? void 0 : alignments[align], justify === void 0 ? void 0 : justifications[justify], wrap ? styles.wrap : void 0, style);
+	let t5;
+	if ($[8] !== T0 || $[9] !== props || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			style: t4
+		});
+		$[8] = T0;
+		$[9] = props;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+//#endregion
+export { Stack };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","ViewProps","ViewStyle","StyleSheet","View","useTheme","composeStyles","themedStyles","alignments","create","baseline","alignItems","center","end","start","stretch","directions","column","flexDirection","row","justifications","around","justifyContent","between","styles","wrap","flexWrap","gapsOf","spacing","lg","gap","md","none","sm","xl","xs","xxl","xxs","xxxl","StackAlign","StackGap","StackJustify","StackProps","align","direction","justify","ref","Stack","t0","$","_c","props","style","t1","t2","t3","undefined","gaps","T0","t4","t5","_c"],"sources":["../../../src/components/stack/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// Short names rather than the flex values they map to, as on web, so a call\n// site reads `align=\"start\"` instead of `align=\"flex-start\"`.\n//\n// No Material Design page draws a stack. Its gaps are the spacing tokens, the\n// 4dp grid the layout pages space elements on, and `xl` is their 24dp spacer\n// between panes.\n//\n// `start` and `end` are logical. React Native lays a row out from the start\n// edge of the writing direction, so under right-to-left, whether the app's\n// through `I18nManager` or a `direction` style on a view around it, a row runs\n// from the right and `start` is the right-hand edge. Nothing here reverses a\n// row to get that, which is what keeps it so.\nconst alignments = StyleSheet.create({\n  baseline: { alignItems: 'baseline' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'flex-end' },\n  start: { alignItems: 'flex-start' },\n  stretch: { alignItems: 'stretch' },\n})\n\nconst directions = StyleSheet.create({\n  column: { flexDirection: 'column' },\n  row: { flexDirection: 'row' },\n})\n\nconst justifications = StyleSheet.create({\n  around: { justifyContent: 'space-around' },\n  between: { justifyContent: 'space-between' },\n  center: { justifyContent: 'center' },\n  end: { justifyContent: 'flex-end' },\n  start: { justifyContent: 'flex-start' },\n})\n\nconst styles = StyleSheet.create({\n  wrap: { flexWrap: 'wrap' },\n})\n\n// One key per step of the spacing scale, named as the token group names it,\n// so `gaps[gap]` indexes straight off the prop. `none` is the one key with no\n// token behind it: zero is the absence of a spacing decision rather than a\n// step of the scale.\nconst gapsOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    lg: { gap: spacing.lg },\n    md: { gap: spacing.md },\n    none: { gap: 0 },\n    sm: { gap: spacing.sm },\n    xl: { gap: spacing.xl },\n    xs: { gap: spacing.xs },\n    xxl: { gap: spacing.xxl },\n    xxs: { gap: spacing.xxs },\n    xxxl: { gap: spacing.xxxl },\n  }),\n)\n\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch'\n\ntype StackGap =\n  | 'lg'\n  | 'md'\n  | 'none'\n  | 'sm'\n  | 'xl'\n  | 'xs'\n  | 'xxl'\n  | 'xxs'\n  | 'xxxl'\n\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start'\n\ntype StackProps = ViewProps & {\n  /**\n   * How the children line up across the stack: along the width of a column,\n   * along the height of a row. Left unset, they stretch, which is what makes\n   * every card in a column the same width.\n   *\n   * `start` is what a child sized to its content needs in a column, which\n   * spans the whole width otherwise.\n   */\n  readonly align?: StackAlign\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  readonly direction?: 'column' | 'row'\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  readonly gap?: StackGap\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  readonly justify?: StackJustify\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  readonly wrap?: boolean\n}\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * ```tsx\n * <Stack align=\"center\" direction=\"row\" gap=\"sm\">\n *   <Text>Label</Text>\n *   <Text tone=\"muted\">Supporting line</Text>\n * </Stack>\n * ```\n *\n * Layout only: it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * Web's `render` has no counterpart, since a native view is a `View` whatever\n * it holds. `style`, `ref` and `testID` land on that `View`, and a `style`\n * there applies over the stack's own.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  style,\n  wrap = false,\n  ...props\n}: StackProps) {\n  const gaps = gapsOf(useTheme())\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        directions[direction],\n        gaps[gap],\n        align === undefined ? undefined : alignments[align],\n        justify === undefined ? undefined : justifications[justify],\n        wrap ? styles.wrap : undefined,\n        style,\n      )}\n    />\n  )\n}\n\nexport type { StackAlign, StackGap, StackJustify, StackProps }\n\nexport { Stack }\n"],"mappings":"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"}

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

@@ -0,0 +1,76 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref } from "react";
+//#region src/components/switch/index.d.ts
+type SwitchProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * The label, beside the switch. A switch that a row labels some other way
+   * leaves it out and passes `aria-label` instead.
+   */
+  readonly children?: ReactNode;
+  /**
+   * Whether the switch starts on, when it keeps its own state.
+   * @default false
+   */
+  readonly defaultSelected?: boolean;
+  /**
+   * A hint under the label. 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 switch in its error state: the line under the label is the error, in
+   * the error colour.
+   */
+  readonly error?: string;
+  /**
+   * Draws the check in the handle while the switch is on, the page's "icon on
+   * selected switch" form.
+   * @default false
+   */
+  readonly icon?: boolean;
+  /**
+   * Draws the switch disabled, and takes no presses or drags.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the state without letting a press or a drag change it.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Whether the switch is on, for a call site holding the state itself with
+   * `onChange`.
+   */
+  readonly isSelected?: boolean;
+  /** Called with the new state whenever a press or a drag changes it. */
+  readonly onChange?: (isSelected: boolean) => void;
+  readonly ref?: Ref<View>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * A switch that turns a setting on or off, with its label and optionally a
+ * description or an error under it. Its state is React Stately's, as web's
+ * is: pass `isSelected` with `onChange` to control it, or `defaultSelected` to
+ * let it keep its own. A switch takes effect as it is flipped, which is what
+ * sets it apart from a checkbox in a form.
+ *
+ * ```tsx
+ * <Switch defaultSelected description="Supporting line">
+ *   Label
+ * </Switch>
+ * ```
+ *
+ * A screen reader hears it as a switch named by its label, on or off,
+ * followed by the line under it. A press anywhere on the track or the label
+ * flips it, and the handle can be dragged across the track, settling on
+ * whichever side it is let go. `style`, `ref` and `testID` land on the view
+ * holding the row and the line under it, which is the element a layout
+ * positions. With a `testID`, the drag is registered with Gesture Handler as
+ * `<testID>-drag`, which its `getByGestureTestId` finds in a test.
+ */
+declare function Switch({ 'aria-label': ariaLabel, children, defaultSelected, description, error, icon, isDisabled, isReadOnly, isSelected, onChange, style, testID, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+export { Switch, type SwitchProps };
+//# sourceMappingURL=index.d.ts.map