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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextStyle","ViewStyle","AnimatedStyle","SliderState","NumberFormatter","useState","Text","NativeText","StyleSheet","View","GestureDetector","GestureHandlerRootView","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useSliderState","IconStyle","ResolvedTheme","IconStyleContext","useLocaleOf","ADJUSTABLE","adjustOf","lengthTo","percentOf","seatPlaceOf","seats","useTrackGesture","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","Inset","fraction","px","Metrics","corner","handle","icon","track","Part","active","end","name","start","SliderProps","defaultValue","formatOptions","Intl","NumberFormatOptions","isDisabled","label","maxValue","minValue","onChange","value","onChangeEnd","orientation","ref","showStops","size","SliderSize","step","style","testID","thumbLabels","GAP","HANDLE_WIDTH","HANDLE_PRESSED","CLEAR","STOP","INNER_CORNER","ICON_PADDING","INDICATOR_HEIGHT","INDICATOR_MIN_WIDTH","VERTICAL_HEIGHT","SIZES","Readonly","Record","lg","md","sm","xl","xs","AT_END","NO_STEPS","styles","create","area","flexGrow","indicator","alignItems","height","justifyContent","minWidth","position","indicatorHorizontal","bottom","indicatorVertical","innerEnd","borderBottomEndRadius","borderTopEndRadius","innerEndVertical","borderTopStartRadius","innerStart","borderBottomStartRadius","innerStartVertical","part","overflow","root","width","rootVertical","stop","stopEnd","stopEndVertical","top","stopStart","stopStartVertical","stylesOf","colors","radii","spacing","stateLayerOpacity","disabledContent","onSurface","backgroundColor","primary","activeDisabled","borderRadius","pill","handleDisabled","inactive","secondaryContainer","inactiveDisabled","disabledContainer","inverseSurface","marginBottom","paddingHorizontal","indicatorText","color","inverseOnSurface","textAlign","marginEnd","onSurfaceVariant","gap","onSecondaryContainer","circle","stopActive","onPrimary","stopActiveDisabled","stopDisabled","after","before","Handle","t0","$","_c","index","metrics","state","vertical","own","labelRole","t1","isThumbDragging","dragging","narrowing","useHandleMotion","t2","t3","getThumbMaxValue","t4","getThumbMinValue","t5","getThumbValue","t6","getThumbValueLabel","t7","t8","seatVertical","seat","t9","getThumbPercent","handleLengthOf","undefined","iconPlaceOf","across","iconStyleOf","innerCornersOf","InsetIcon","length","slot","lengthOf","nameOf","group","words","filter","each","join","partColourOf","ReturnType","partOf","partsOf","fractions","values","map","_","first","last","at","range","afterLast","placementOf","marginTop","marginStart","Slider","ariaLabel","theme","locale","numberFormatter","setLength","gesture","parts","stepsOf","steps","hasIcon","T0","t10","T1","t11","trackOf","T2","T3","t12","t14","t15","t16","t13","t17","t18","t19","min","max","push","getValuePercent","stopColourOf","stopOffsetOf","stopPlaceOf","offset","Stops","colour","from","to","inside","atStart","atEnd","centred","fraction_0","minHeight","motion","reduceMotion","thickness","timing","duration","durationShort2","easing","bezier","easingStandard","_c","NativeText"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { SliderState } from 'react-stately/useSliderState'\n\nimport { NumberFormatter } from '@internationalized/number'\nimport { useState } from 'react'\nimport { Text as NativeText, StyleSheet, View } from 'react-native'\nimport {\n  GestureDetector,\n  GestureHandlerRootView,\n} from 'react-native-gesture-handler'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useSliderState } from 'react-stately/useSliderState'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { useLocaleOf } from '../../i18n/provider'\nimport {\n  ADJUSTABLE,\n  adjustOf,\n  lengthTo,\n  percentOf,\n  seatPlaceOf,\n  seats,\n  useTrackGesture,\n} from '../../slider'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's Slider: the sliders page. At the size its tokens call\n// extra-small, the default, a 16dp track with an 8dp corner, the active part\n// in primary and the inactive part in secondary container, a 4dp stop in on\n// secondary container 6dp from the inactive end, and a handle 4dp wide and\n// 44dp tall in primary that narrows to 2dp while it is dragged. The track's\n// parts on each side of the handle stop 6dp short of it, and their corners\n// against it are 2dp where their outer ends are full. Disabled, the active\n// part and the handle are on surface at the disabled content opacity and the\n// inactive part at the disabled container opacity.\n//\n// `size` takes the page's four larger sizes, which thicken the track and\n// round its ends more, and lengthen the handle from M up:\n//\n// | Size | Track | Corner | Handle | Inset icon |\n// | ---- | ----- | ------ | ------ | ---------- |\n// | xs   | 16dp  | 8dp    | 44dp   |            |\n// | sm   | 24dp  | 8dp    | 44dp   |            |\n// | md   | 40dp  | 12dp   | 52dp   | 24dp       |\n// | lg   | 56dp  | 16dp   | 68dp   | 24dp       |\n// | xl   | 96dp  | 28dp   | 108dp  | 32dp       |\n//\n// The handle stays 4dp wide, the corners against it 2dp and the space beside\n// it 6dp at every size.\n//\n// `showStops` is the page's stops configuration: a 4dp stop at every step,\n// in on primary on the active part and on secondary container on the\n// inactive one, so the reader can see where the handle can land. The stops at\n// the two ends sit 6dp in from them, as the single stop does. A part clips\n// what it holds, which is what hides the stops beside the handle: the part\n// ends 6dp short of it.\n//\n// `icon` is the page's inset icon, at the start of the active part in on\n// primary, from M up, 10dp in from the part's start, MDC-Android's padding,\n// since the page gives none. Like MDC-Android it is drawn only while the part\n// has room for it and that padding on both sides, which the track's measured\n// length says, and only for a single handle.\n//\n// The value indicator is the page's label: inverse surface under label large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle, while the handle is dragged. It is hidden from a screen reader,\n// which hears the same words as the handle's value.\n//\n// **The state is React Stately's `useSliderState`**, the one web's React Aria\n// keeps, with a `NumberFormatter` in the provider's locale, so the steps, the\n// handles of a range keeping their order and what each handle reads as\n// behave as they do on web.\n//\n// **A press on the track moves the handle nearest it there.** Gesture\n// Handler's pan takes a drag once it has moved 10dp along the track, and its\n// tap a press that moved less, so a slider inside a scroll view still lets a\n// drag across the track's axis scroll it. The pan follows the finger from\n// where it took over, and `onChangeEnd` comes once, when it lets go. The\n// parts and the handles follow the value from React's render, since every\n// move changes the value and the words the indicator shows, and the handle's\n// narrowing eases on Reanimated over the short2 duration on the standard\n// curve, at once under reduced motion.\n//\n// **Each handle is an adjustable control to a screen reader**, named by its\n// entry in `thumbLabels` and then the slider's label, as React Aria names a\n// range's handles, with its value in the formatter's words and an increment\n// and a decrement action that move it a step. The label drawn above the track\n// is hidden from a screen reader, since every handle already says it.\n//\n// Vertical, the same parts run up the track, with the active part rising\n// from the bottom and the indicator to the start side of the handle. The\n// corners a part turns to the handle are its corners on the handle's side,\n// the bottom ones on the part above it and the top ones on the part below.\n//\n// Under a right-to-left layout the track's start is its right end, as web's\n// is: the parts are placed from their logical edges, and a press reads its\n// place from the right.\n\n/** One end of a part: a fraction of the track's length, and dp on top. */\ntype Inset = {\n  readonly fraction: number\n  readonly px: number\n}\n\n/** A size's measurements, from the page. */\ntype Metrics = {\n  readonly corner: 'lg' | 'md' | 'sm' | 'xl'\n  readonly handle: number\n  /** The inset icon's size, at the sizes the page draws one. */\n  readonly icon?: number\n  readonly track: number\n}\n\n/**\n * A part of the track, by the insets of its two ends from the track's, and\n * which of the three it is: the inactive part before a range's first handle,\n * the active part, or the inactive part after the last handle.\n */\ntype Part = {\n  readonly active: boolean\n  readonly end: Inset\n  readonly name: 'active' | 'after' | 'before'\n  readonly start: Inset\n}\n\ntype SliderProps = {\n  /**\n   * The slider's name for a screen reader, when no `label` is drawn: a\n   * slider that a row labels some other way leaves `label` out and passes\n   * this instead.\n   */\n  readonly 'aria-label'?: string\n  /** The value the slider starts at, when it keeps its own. */\n  readonly defaultValue?: number | number[]\n  /**\n   * How the value reads, in the indicator and to a screen reader, in the\n   * provider's locale.\n   */\n  readonly formatOptions?: Intl.NumberFormatOptions\n  /**\n   * The page's inset icon, at the start of the active part, from `md` up:\n   * the page gives it a size at M, L and XL alone. Drawn for a single\n   * handle, and only while the active part has room for it. It reads its\n   * colour and size through `useIconStyle()`.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the slider disabled, and takes no presses, drags or screen reader\n   * actions.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * What the slider sets. A slider that a row labels some other way leaves\n   * it out and passes `aria-label` instead.\n   */\n  readonly label?: string\n  /**\n   * The largest value.\n   * @default 100\n   */\n  readonly maxValue?: number\n  /**\n   * The smallest value.\n   * @default 0\n   */\n  readonly minValue?: number\n  /** Called with the value as it moves. */\n  readonly onChange?: (value: number | number[]) => void\n  /** Called with the value once a drag, a press or an action has ended. */\n  readonly onChangeEnd?: (value: number | number[]) => void\n  /**\n   * Along which axis the handle moves. A vertical slider is 240dp tall until\n   * `style` says otherwise.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * A stop at every step, the page's stops configuration, so the reader can\n   * see where the handle can land. Meant for a slider with a handful of\n   * steps: each stop is a 4dp dot, and a fine step draws a crowd of them.\n   * @default false\n   */\n  readonly showStops?: boolean\n  /**\n   * The page's sizes, by the track's thickness: 16dp at `xs`, 24dp at `sm`,\n   * 40dp at `md`, 56dp at `lg` and 96dp at `xl`, with the handle 44dp long\n   * up to `sm` and 52dp, 68dp and 108dp past it.\n   * @default 'xs'\n   */\n  readonly size?: SliderSize\n  /**\n   * The distance between two values the handle can land on.\n   * @default 1\n   */\n  readonly step?: number\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * A name for each handle of a range slider, in order, since two handles\n   * named by the same label cannot be told apart.\n   */\n  readonly thumbLabels?: readonly string[]\n  /**\n   * The value, for a call site holding it itself with `onChange`: a number\n   * for one handle, or an array of numbers for a handle each.\n   */\n  readonly value?: number | number[]\n}\n\ntype SliderSize = 'lg' | 'md' | 'sm' | 'xl' | 'xs'\n\n// The sliders page's own measurements, which are constants of the component\n// rather than steps of the consumer's spacing scale, as on web.\nconst GAP = 6\nconst HANDLE_WIDTH = 4\n/** The handle's width while it is dragged. */\nconst HANDLE_PRESSED = 2\n/** How far a part stops short of a handle's centre. */\nconst CLEAR = GAP + HANDLE_WIDTH / 2\n/** A stop's size. */\nconst STOP = 4\n/** The corner a part turns to a handle. */\nconst INNER_CORNER = 2\n/** MDC-Android's padding either side of the inset icon. */\nconst ICON_PADDING = 10\n/** The value indicator's height and its narrowest width. */\nconst INDICATOR_HEIGHT = 44\nconst INDICATOR_MIN_WIDTH = 48\n/** A vertical slider's height when the call site gives it none. */\nconst VERTICAL_HEIGHT = 240\n\nconst SIZES: Readonly<Record<SliderSize, Metrics>> = {\n  lg: { corner: 'lg', handle: 68, icon: 24, track: 56 },\n  md: { corner: 'md', handle: 52, icon: 24, track: 40 },\n  sm: { corner: 'sm', handle: 44, track: 24 },\n  xl: { corner: 'xl', handle: 108, icon: 32, track: 96 },\n  xs: { corner: 'sm', handle: 44, track: 16 },\n}\n\nconst AT_END: Inset = { fraction: 0, px: 0 }\n\n// Hoisted so a slider without stops hands its parts one stable array, which\n// is what react-perf's no-new-array-as-prop is after.\nconst NO_STEPS: readonly number[] = []\n\nconst styles = StyleSheet.create({\n  // What a press is read along: the whole of the track's strip.\n  area: {\n    flexGrow: 1,\n  },\n  // The handle's value, centred on it across the track by its frame.\n  indicator: {\n    alignItems: 'center',\n    height: INDICATOR_HEIGHT,\n    justifyContent: 'center',\n    minWidth: INDICATOR_MIN_WIDTH,\n    position: 'absolute',\n  },\n  // Above the handle.\n  indicatorHorizontal: {\n    bottom: '100%',\n  },\n  // A vertical slider's value, to the start side of its handle.\n  indicatorVertical: {\n    end: '100%',\n  },\n  // The corners a part turns to a handle, which depend on the axis and on\n  // which end of the part meets it.\n  innerEnd: {\n    borderBottomEndRadius: INNER_CORNER,\n    borderTopEndRadius: INNER_CORNER,\n  },\n  // A vertical part's end is its top.\n  innerEndVertical: {\n    borderTopEndRadius: INNER_CORNER,\n    borderTopStartRadius: INNER_CORNER,\n  },\n  innerStart: {\n    borderBottomStartRadius: INNER_CORNER,\n    borderTopStartRadius: INNER_CORNER,\n  },\n  // A vertical part's start is its bottom, where the value starts from.\n  innerStartVertical: {\n    borderBottomEndRadius: INNER_CORNER,\n    borderBottomStartRadius: INNER_CORNER,\n  },\n  // One part of the track. It clips what it holds, which is what keeps a\n  // stop beside the handle from showing.\n  part: {\n    overflow: 'hidden',\n    position: 'absolute',\n  },\n  // A slider fills the width it is given, as web's does.\n  root: {\n    width: '100%',\n  },\n  // A vertical slider needs a height to run along; this is the one a call\n  // site gets without asking, and `style` sets another.\n  rootVertical: {\n    alignItems: 'flex-start',\n    height: VERTICAL_HEIGHT,\n  }, // A stop: 4dp, centred across the strip.\n  stop: {\n    height: STOP,\n    position: 'absolute',\n    width: STOP,\n  },\n  // The stops at the track's two ends, the page's gap in from each.\n  stopEnd: {\n    end: GAP,\n  },\n  stopEndVertical: {\n    top: GAP,\n  },\n  stopStart: {\n    start: GAP,\n  },\n  stopStartVertical: {\n    bottom: GAP,\n  },\n})\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, spacing, stateLayerOpacity }) => {\n    const disabledContent = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return StyleSheet.create({\n      active: {\n        backgroundColor: colors.primary,\n      },\n      activeDisabled: {\n        backgroundColor: disabledContent,\n      },\n      handle: {\n        backgroundColor: colors.primary,\n        borderRadius: radii.pill,\n      },\n      handleDisabled: {\n        backgroundColor: disabledContent,\n      },\n      inactive: {\n        backgroundColor: colors.secondaryContainer,\n      },\n      inactiveDisabled: {\n        backgroundColor: withOpacity(\n          colors.onSurface,\n          stateLayerOpacity.disabledContainer,\n        ),\n      },\n      // The value indicator's surface, its gap above the handle and the room\n      // either side of its words.\n      indicator: {\n        backgroundColor: colors.inverseSurface,\n        borderRadius: radii.pill,\n        marginBottom: spacing.md,\n        paddingHorizontal: spacing.md,\n      },\n      indicatorText: {\n        color: colors.inverseOnSurface,\n        textAlign: 'center',\n      },\n      // To the start side, the same gap.\n      indicatorVertical: {\n        marginBottom: 0,\n        marginEnd: spacing.md,\n      },\n      label: {\n        color: colors.onSurfaceVariant,\n      },\n      root: {\n        gap: spacing.xs,\n      },\n      stop: {\n        backgroundColor: colors.onSecondaryContainer,\n        borderRadius: radii.circle,\n      },\n      // A stop on the active part.\n      stopActive: {\n        backgroundColor: colors.onPrimary,\n      },\n      stopActiveDisabled: {\n        backgroundColor: colors.inverseOnSurface,\n      },\n      stopDisabled: {\n        backgroundColor: disabledContent,\n      },\n    })\n  },\n)\n\n// A part's start inset, clear of a handle at `fraction` of the way along. The\n// fraction lands on the handle's centre, so half the handle's width joins the\n// page's gap to reach its edge.\nfunction after(fraction: number): Inset {\n  return { fraction, px: CLEAR }\n}\n\n// A part's end inset, clear of a handle at `fraction` of the way along.\nfunction before(fraction: number): Inset {\n  return { fraction: 1 - fraction, px: CLEAR }\n}\n\n// One handle: the frame a screen reader adjusts, the handle in it, and the\n// value above it while it is dragged.\nfunction Handle({\n  index,\n  metrics,\n  name,\n  state,\n  vertical,\n}: {\n  readonly index: number\n  readonly metrics: Metrics\n  readonly name: string | undefined\n  readonly state: SliderState\n  readonly vertical: boolean\n}) {\n  const own = stylesOf(useTheme())\n  const labelRole = useTypeRole('labelLarge')\n  const dragging = state.isThumbDragging(index)\n  const narrowing = useHandleMotion(dragging, vertical)\n\n  return (\n    <View\n      accessibilityActions={ADJUSTABLE}\n      accessible\n      aria-disabled={state.isDisabled}\n      aria-label={name}\n      aria-valuemax={state.getThumbMaxValue(index)}\n      aria-valuemin={state.getThumbMinValue(index)}\n      aria-valuenow={state.getThumbValue(index)}\n      aria-valuetext={state.getThumbValueLabel(index)}\n      onAccessibilityAction={adjustOf(state, index)}\n      role=\"slider\"\n      style={composeStyles<ViewStyle>(\n        vertical ? seats.seatVertical : seats.seat,\n        seatPlaceOf(state.getThumbPercent(index), vertical),\n      )}\n    >\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          own.handle,\n          handleLengthOf(metrics, vertical),\n          state.isDisabled ? own.handleDisabled : undefined,\n          narrowing,\n        )}\n      />\n      {dragging ? (\n        <View\n          aria-hidden\n          style={composeStyles<ViewStyle>(\n            styles.indicator,\n            vertical ? styles.indicatorVertical : styles.indicatorHorizontal,\n            own.indicator,\n            vertical ? own.indicatorVertical : undefined,\n          )}\n        >\n          <NativeText\n            numberOfLines={1}\n            style={composeStyles<TextStyle>(labelRole, own.indicatorText)}\n          >\n            {state.getThumbValueLabel(index)}\n          </NativeText>\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n// The handle's length across the track, which is the strip's own thickness.\nfunction handleLengthOf({ handle }: Metrics, vertical: boolean): ViewStyle {\n  return vertical ? { width: handle } : { height: handle }\n}\n\n// Where the inset icon sits: its padding in from the part's start, centred\n// across the strip.\nfunction iconPlaceOf(\n  { track }: Metrics,\n  size: number,\n  vertical: boolean,\n): ViewStyle {\n  const across = (track - size) / 2\n  return {\n    alignItems: 'center',\n    height: size,\n    justifyContent: 'center',\n    position: 'absolute',\n    width: size,\n    ...(vertical\n      ? { bottom: ICON_PADDING, start: across }\n      : { start: ICON_PADDING, top: across }),\n  }\n}\n\nfunction iconStyleOf(color: string, size: number): IconStyle {\n  return { color, size }\n}\n\n// The corners a part turns to a handle, at whichever of its ends meets one.\nfunction innerCornersOf(part: Part, vertical: boolean) {\n  const start = vertical ? styles.innerStartVertical : styles.innerStart\n  const end = vertical ? styles.innerEndVertical : styles.innerEnd\n  return composeStyles<ViewStyle>(\n    part.start === AT_END ? undefined : start,\n    part.end === AT_END ? undefined : end,\n  )\n}\n\n// The inset icon, at the foot of the active part, while the part has room\n// for it and its padding on both sides.\nfunction InsetIcon({\n  icon,\n  isDisabled,\n  length,\n  metrics,\n  part,\n  vertical,\n}: {\n  readonly icon: ReactNode\n  readonly isDisabled: boolean\n  readonly length: number\n  readonly metrics: Metrics\n  readonly part: Part\n  readonly vertical: boolean\n}) {\n  const { colors } = useTheme()\n  const size = metrics.icon ?? 0\n  const slot = iconStyleOf(\n    isDisabled ? colors.inverseOnSurface : colors.onPrimary,\n    size,\n  )\n\n  if (lengthOf(part, length) < size + 2 * ICON_PADDING) {\n    return null\n  }\n  return (\n    <View style={iconPlaceOf(metrics, size, vertical)}>\n      <IconStyleContext value={slot}>{icon}</IconStyleContext>\n    </View>\n  )\n}\n\n// How long a part is on a track `length` long.\nfunction lengthOf({ end, start }: Part, length: number) {\n  return (1 - start.fraction - end.fraction) * length - start.px - end.px\n}\n\n// A handle's name: its own in a range, then the slider's, as React Aria\n// joins them on web.\nfunction nameOf(own: string | undefined, group: string | undefined) {\n  const words = [own, group].filter((each) => each !== undefined && each !== '')\n  return words.length === 0 ? undefined : words.join(' ')\n}\n\nfunction partColourOf(\n  own: ReturnType<typeof stylesOf>,\n  active: boolean,\n  isDisabled: boolean,\n) {\n  if (active) {\n    return isDisabled ? own.activeDisabled : own.active\n  }\n  return isDisabled ? own.inactiveDisabled : own.inactive\n}\n\n// A part's thickness and corner, centred in the strip the handle's length\n// takes.\nfunction partOf(\n  { corner, handle, track }: Metrics,\n  { radii }: ResolvedTheme,\n  vertical: boolean,\n): ViewStyle {\n  const across = (handle - track) / 2\n  return vertical\n    ? { borderRadius: radii[corner], start: across, width: track }\n    : { borderRadius: radii[corner], height: track, top: across }\n}\n\n// The track's parts: an inactive part before the first handle of a range,\n// the active part up to or between the handles, and the inactive part after\n// the last one, which carries the stop.\nfunction partsOf(state: SliderState): Part[] {\n  const fractions = state.values.map((_, index) => state.getThumbPercent(index))\n  const first = fractions[0] ?? 0\n  const last = fractions.at(-1) ?? 0\n  const range = fractions.length > 1\n  const active: Part = {\n    active: true,\n    end: before(last),\n    name: 'active',\n    start: range ? after(first) : AT_END,\n  }\n  const afterLast: Part = {\n    active: false,\n    end: AT_END,\n    name: 'after',\n    start: after(last),\n  }\n  if (!range) {\n    return [active, afterLast]\n  }\n  return [\n    { active: false, end: before(first), name: 'before', start: AT_END },\n    active,\n    afterLast,\n  ]\n}\n\n// Where a part's two ends lie, from the track's ends: a share of its length\n// and the dp past it, each on a logical edge, so a right-to-left layout\n// starts the track from the right.\nfunction placementOf({ end, start }: Part, vertical: boolean): ViewStyle {\n  return vertical\n    ? {\n        bottom: percentOf(start.fraction),\n        marginBottom: start.px,\n        marginTop: end.px,\n        top: percentOf(end.fraction),\n      }\n    : {\n        end: percentOf(end.fraction),\n        marginEnd: end.px,\n        marginStart: start.px,\n        start: percentOf(start.fraction),\n      }\n}\n\n/**\n * A slider for one value, or for a range when the value is an array. Its\n * state is React Stately's, as web's is: pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own, with `minValue`,\n * `maxValue` and `step` to shape it and `formatOptions` to say how it reads.\n *\n * ```tsx\n * <Slider defaultValue={40} label=\"Label\" />\n * ```\n *\n * A press on the track moves the nearest handle there, and a drag carries\n * it. A screen reader hears each handle as an adjustable control named by the\n * label, which it moves a step at a time. `style`, `ref` and `testID` land on\n * the slider as a whole, which is the view a layout positions and the one\n * that gives a vertical slider its height. With a `testID`, the drag and the\n * press are registered with Gesture Handler as `<testID>-pan` and\n * `<testID>-tap`, which its `getByGestureTestId` finds in a test.\n */\nfunction Slider({\n  'aria-label': ariaLabel,\n  defaultValue,\n  formatOptions,\n  icon,\n  isDisabled = false,\n  label,\n  maxValue,\n  minValue,\n  onChange,\n  onChangeEnd,\n  orientation = 'horizontal',\n  ref,\n  showStops = false,\n  size = 'xs',\n  step,\n  style,\n  testID,\n  thumbLabels,\n  value,\n}: SliderProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const state = useSliderState<number | number[]>({\n    defaultValue,\n    isDisabled,\n    maxValue,\n    minValue,\n    numberFormatter: new NumberFormatter(locale, formatOptions),\n    onChange,\n    onChangeEnd,\n    orientation,\n    step,\n    value,\n  })\n  const labelRole = useTypeRole('labelLarge')\n  // The track's length along its axis, which a press is read against and\n  // the stops and the icon are placed by.\n  const [length, setLength] = useState(0)\n  const vertical = orientation === 'vertical'\n  const metrics = SIZES[size]\n  const gesture = useTrackGesture({\n    isDisabled,\n    length,\n    state,\n    testID,\n    vertical,\n  })\n  const parts = partsOf(state)\n  const steps = showStops ? stepsOf(state) : NO_STEPS\n  const hasIcon =\n    icon !== undefined &&\n    icon !== null &&\n    metrics.icon !== undefined &&\n    parts.length === 2\n  const group = label ?? ariaLabel\n\n  return (\n    <View\n      ref={ref}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        vertical ? styles.rootVertical : undefined,\n        own.root,\n        style,\n      )}\n      testID={testID}\n    >\n      {label === undefined ? null : (\n        <NativeText\n          aria-hidden\n          style={composeStyles<TextStyle>(labelRole, own.label)}\n        >\n          {label}\n        </NativeText>\n      )}\n      <GestureHandlerRootView style={trackOf(metrics, vertical)}>\n        <GestureDetector gesture={gesture}>\n          <View onLayout={lengthTo(setLength, vertical)} style={styles.area}>\n            {parts.map((part) => (\n              <View\n                key={part.name}\n                style={composeStyles<ViewStyle>(\n                  styles.part,\n                  partOf(metrics, theme, vertical),\n                  partColourOf(own, part.active, isDisabled),\n                  innerCornersOf(part, vertical),\n                  placementOf(part, vertical),\n                )}\n              >\n                {part.active && hasIcon ? (\n                  <InsetIcon\n                    icon={icon}\n                    isDisabled={isDisabled}\n                    length={length}\n                    metrics={metrics}\n                    part={part}\n                    vertical={vertical}\n                  />\n                ) : null}\n                <Stops\n                  isDisabled={isDisabled}\n                  length={length}\n                  metrics={metrics}\n                  part={part}\n                  showStops={showStops}\n                  steps={steps}\n                  vertical={vertical}\n                />\n              </View>\n            ))}\n            {state.values.map((_, index) => (\n              <Handle\n                index={index}\n                // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n                key={index}\n                metrics={metrics}\n                name={nameOf(thumbLabels?.[index], group)}\n                state={state}\n                vertical={vertical}\n              />\n            ))}\n          </View>\n        </GestureDetector>\n      </GestureHandlerRootView>\n    </View>\n  )\n}\n\n// The fractions of the way along the track that a step lands on, ends left\n// out: those are drawn as the end stops, the page's gap in from each end.\nfunction stepsOf(state: SliderState) {\n  const min = state.getThumbMinValue(0)\n  const max = state.getThumbMaxValue(state.values.length - 1)\n  const fractions: number[] = []\n  if (state.step <= 0) {\n    return fractions\n  }\n  for (let index = 1; min + index * state.step < max; index++) {\n    fractions.push(state.getValuePercent(min + index * state.step))\n  }\n  return fractions\n}\n\nfunction stopColourOf(\n  own: ReturnType<typeof stylesOf>,\n  active: boolean,\n  isDisabled: boolean,\n) {\n  if (active) {\n    return isDisabled ? own.stopActiveDisabled : own.stopActive\n  }\n  return isDisabled ? own.stopDisabled : undefined\n}\n\n// Where a stop at `fraction` of the way along the track starts inside a\n// part, from the part's own start.\nfunction stopOffsetOf(\n  { start }: Part,\n  fraction: number,\n  length: number,\n): number {\n  return (fraction - start.fraction) * length - start.px - STOP / 2\n}\n\n// A stop's place in a part: centred across the strip, and along it either at\n// one of the part's ends or at its offset from the part's start.\nfunction stopPlaceOf(\n  { track }: Metrics,\n  vertical: boolean,\n  offset: number,\n): ViewStyle {\n  const across = (track - STOP) / 2\n  return vertical\n    ? { bottom: offset, start: across }\n    : { start: offset, top: across }\n}\n\n// What a part holds: a stop at each step inside it, and the end stops where\n// it reaches the track's ends. The steps inside are placed by the track's\n// measured length, so they wait for the first layout; the end stops are\n// placed from the part's own ends and need none.\nfunction Stops({\n  isDisabled,\n  length,\n  metrics,\n  part,\n  showStops,\n  steps,\n  vertical,\n}: {\n  readonly isDisabled: boolean\n  readonly length: number\n  readonly metrics: Metrics\n  readonly part: Part\n  readonly showStops: boolean\n  readonly steps: readonly number[]\n  readonly vertical: boolean\n}) {\n  const own = stylesOf(useTheme())\n  const colour = stopColourOf(own, part.active, isDisabled)\n  const across = (metrics.track - STOP) / 2\n  const from = part.start.fraction\n  const to = 1 - part.end.fraction\n  const inside =\n    showStops && length > 0 && to > from\n      ? steps.filter((fraction) => fraction >= from && fraction <= to)\n      : []\n  const atStart = part.start === AT_END\n  // The single stop at the track's end, which only the inactive part after\n  // the last handle reaches, is drawn with or without the stops\n  // configuration; the one at the start is the configuration's own.\n  const atEnd = part.end === AT_END\n  const centred = vertical ? { start: across } : { top: across }\n\n  return (\n    <>\n      {showStops && atStart ? (\n        <View\n          style={composeStyles<ViewStyle>(\n            styles.stop,\n            own.stop,\n            colour,\n            centred,\n            vertical ? styles.stopStartVertical : styles.stopStart,\n          )}\n        />\n      ) : null}\n      {inside.map((fraction) => (\n        <View\n          key={fraction}\n          style={composeStyles<ViewStyle>(\n            styles.stop,\n            own.stop,\n            colour,\n            stopPlaceOf(\n              metrics,\n              vertical,\n              stopOffsetOf(part, fraction, length),\n            ),\n          )}\n        />\n      ))}\n      {atEnd ? (\n        <View\n          style={composeStyles<ViewStyle>(\n            styles.stop,\n            own.stop,\n            colour,\n            centred,\n            vertical ? styles.stopEndVertical : styles.stopEnd,\n          )}\n        />\n      ) : null}\n    </>\n  )\n}\n\n// The strip the handles are placed along: as long across as the handle, so a\n// press anywhere on it lands on the slider. Gesture Handler's root view,\n// sized to the strip rather than to the screen it fills by default.\nfunction trackOf({ handle }: Metrics, vertical: boolean): ViewStyle {\n  return vertical\n    ? { flexGrow: 1, minHeight: 0, width: handle }\n    : { height: handle }\n}\n\n// The handle narrowing to 2dp while it is dragged, over the short2 duration\n// on the standard curve, as web's transition does, and at once under reduced\n// motion.\nfunction useHandleMotion(dragging: boolean, vertical: boolean) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const thickness = dragging ? HANDLE_PRESSED : HANDLE_WIDTH\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    const to = reduceMotion ? thickness : withTiming(thickness, timing)\n    return vertical ? { height: to } : { width: to }\n  })\n}\n\nexport { Slider }\nexport type { SliderProps, SliderSize }\n"],"mappings":"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"}

package/dist/components/split-button/index.d.ts

@@ -0,0 +1,77 @@
+import { ControlSize } from "../../button/index.js";
+import { ButtonProps } from "../button/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/split-button/index.d.ts
+type SplitButtonActionProps = ButtonProps extends (infer Props) ? Props extends unknown ? Omit<Props, 'shape' | 'size' | 'variant'> : never : never;
+type SplitButtonMenuProps = {
+  /** What the menu offers, in words: the trailing half is an icon alone. */
+  readonly 'aria-label': string;
+  /** The menu's items, as `Menu.Item`s and the rest of Menu's parts. */
+  readonly children: ReactNode;
+  /**
+   * Whether the menu starts open, when it keeps its own state.
+   * @default false
+   */
+  readonly defaultOpen?: boolean;
+  /** Whether the trailing half can be pressed. */
+  readonly isDisabled?: boolean;
+  /** Whether the menu is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with an item's `id` when it is chosen. */
+  readonly onAction?: (key: Key) => void;
+  /** Called when the menu opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+};
+type SplitButtonProps = Omit<ViewProps, 'children' | 'role' | 'style'> & {
+  /** What the pair is, in words, for the group around the two halves. */
+  readonly 'aria-label'?: string;
+  /** The two halves: a `SplitButton.Action`, then a `SplitButton.Menu`. */
+  readonly children: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The size both halves take, as Button's: `xs` to `xxl`.
+   * @default 'md'
+   */
+  readonly size?: ControlSize;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * The colour style both halves take: Button's four with a container.
+   * @default 'filled'
+   */
+  readonly variant?: SplitButtonVariant;
+};
+type SplitButtonVariant = 'elevated' | 'filled' | 'outlined' | 'tonal';
+/**
+ * An action and a menu of alternatives beside it, drawn as one control.
+ *
+ * ```tsx
+ * <SplitButton>
+ *   <SplitButton.Action onPress={save}>Label</SplitButton.Action>
+ *   <SplitButton.Menu aria-label="More options">
+ *     <Menu.Item id="first">First item</Menu.Item>
+ *   </SplitButton.Menu>
+ * </SplitButton>
+ * ```
+ *
+ * `style`, `ref` and `testID` land on the group around the two halves.
+ */
+declare function SplitButton({ children, size, style, variant, ...props }: SplitButtonProps): import("react").JSX.Element;
+declare namespace SplitButton {
+  var Action: typeof SplitButtonAction;
+  var Menu: typeof SplitButtonMenu;
+}
+/**
+ * The split button's leading half: a Button, with an icon, a label or both,
+ * in the root's size and variant.
+ */
+declare function SplitButtonAction(props: SplitButtonActionProps): import("react").JSX.Element;
+/**
+ * The split button's trailing half: the down chevron, which opens the menu
+ * of alternatives its children describe, below its end edge.
+ */
+declare function SplitButtonMenu({ 'aria-label': label, children, defaultOpen, isDisabled, isOpen, onAction, onOpenChange }: SplitButtonMenuProps): import("react").JSX.Element;
+//#endregion
+export { SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/split-button/index.js

@@ -0,0 +1,354 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { ChevronDownGlyph } from "../../glyphs/index.js";
+import { HEIGHTS } from "../../button/index.js";
+import { ButtonGroupItemContext } from "../../button/group.js";
+import { Button } from "../button/index.js";
+import { Menu } from "../menu/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { createContext, use, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/split-button/index.tsx
+const TRAILING_PADDING = {
+	lg: 15,
+	md: 13,
+	xl: 29,
+	xs: 13,
+	xxl: 43
+};
+const CLOSED_OFFSET = {
+	lg: 2,
+	md: 1,
+	xl: 3,
+	xs: 1,
+	xxl: 6
+};
+const CHEVRONS = {
+	lg: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 26 }),
+	md: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 22 }),
+	xl: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 38 }),
+	xs: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 22 }),
+	xxl: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: 50 })
+};
+const SplitButtonContext = createContext({
+	size: "md",
+	variant: "filled"
+});
+const groupOf = themedStyles(({ spacing }) => StyleSheet.create({ group: {
+	alignItems: "center",
+	alignSelf: "flex-start",
+	flexDirection: "row",
+	gap: spacing.xxs
+} }));
+const leadingPaddingsOf = themedStyles(({ spacing }) => StyleSheet.create({
+	lg: {
+		paddingEnd: spacing.xl,
+		paddingStart: spacing.xl
+	},
+	md: {
+		paddingEnd: spacing.md,
+		paddingStart: spacing.lg
+	},
+	xl: {
+		paddingEnd: 48,
+		paddingStart: 48
+	},
+	xs: {
+		paddingEnd: 10,
+		paddingStart: spacing.md
+	},
+	xxl: {
+		paddingEnd: 64,
+		paddingStart: 64
+	}
+}));
+const trailingPaddings = {
+	closed: StyleSheet.create(paddingsBy(CLOSED_OFFSET)),
+	open: StyleSheet.create(paddingsBy({
+		lg: 0,
+		md: 0,
+		xl: 0,
+		xs: 0,
+		xxl: 0
+	}))
+};
+const cornersOf = themedStyles(({ radii, sizing }) => {
+	const round = (size) => sizing[HEIGHTS[size]] / 2;
+	return {
+		active: {
+			lg: radii.md,
+			md: radii.md,
+			xl: 20,
+			xs: radii.sm,
+			xxl: 20
+		},
+		inner: {
+			lg: radii.xs,
+			md: radii.xs,
+			xl: radii.sm,
+			xs: radii.xs,
+			xxl: radii.md
+		},
+		round: {
+			lg: round("lg"),
+			md: round("md"),
+			xl: round("xl"),
+			xs: round("xs"),
+			xxl: round("xxl")
+		}
+	};
+});
+function actionItemOf(theme, size) {
+	const corners = cornersOf(theme);
+	return {
+		corners: ({ active }) => ({
+			end: active ? corners.active[size] : corners.inner[size],
+			start: corners.round[size]
+		}),
+		isDisabled: false,
+		keepsTarget: false,
+		shift: 0,
+		size,
+		style: leadingPaddingsOf(theme)[size]
+	};
+}
+function changeThen(setOwnOpen, onOpenChange) {
+	return (next) => {
+		setOwnOpen(next);
+		onOpenChange?.(next);
+	};
+}
+function contextOf(size, variant) {
+	return {
+		size,
+		variant
+	};
+}
+function menuItemOf(theme, size, open) {
+	const corners = cornersOf(theme);
+	return {
+		corners: ({ active }) => ({
+			end: corners.round[size],
+			start: open ? corners.round[size] : active ? corners.active[size] : corners.inner[size]
+		}),
+		held: open,
+		isDisabled: false,
+		keepsTarget: false,
+		shift: 0,
+		size,
+		style: trailingPaddings[open ? "open" : "closed"][size]
+	};
+}
+function paddingsBy(offset) {
+	const by = (size) => ({
+		paddingEnd: TRAILING_PADDING[size] + offset[size],
+		paddingStart: TRAILING_PADDING[size] - offset[size]
+	});
+	return {
+		lg: by("lg"),
+		md: by("md"),
+		xl: by("xl"),
+		xs: by("xs"),
+		xxl: by("xxl")
+	};
+}
+/**
+* An action and a menu of alternatives beside it, drawn as one control.
+*
+* ```tsx
+* <SplitButton>
+*   <SplitButton.Action onPress={save}>Label</SplitButton.Action>
+*   <SplitButton.Menu aria-label="More options">
+*     <Menu.Item id="first">First item</Menu.Item>
+*   </SplitButton.Menu>
+* </SplitButton>
+* ```
+*
+* `style`, `ref` and `testID` land on the group around the two halves.
+*/
+function SplitButton(t0) {
+	const $ = c(19);
+	let children;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, size: t1, style, variant: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = style;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		children = $[1];
+		props = $[2];
+		style = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const size = t1 === void 0 ? "md" : t1;
+	const variant = t2 === void 0 ? "filled" : t2;
+	const theme = useTheme();
+	let t3;
+	if ($[6] !== size || $[7] !== variant) {
+		t3 = contextOf(size, variant);
+		$[6] = size;
+		$[7] = variant;
+		$[8] = t3;
+	} else t3 = $[8];
+	const context = t3;
+	let t4;
+	if ($[9] !== style || $[10] !== theme) {
+		t4 = composeStyles(groupOf(theme).group, style);
+		$[9] = style;
+		$[10] = theme;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== children || $[13] !== props || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(View, {
+			role: "group",
+			...props,
+			style: t4,
+			children
+		});
+		$[12] = children;
+		$[13] = props;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== context || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SplitButtonContext, {
+			value: context,
+			children: t5
+		});
+		$[16] = context;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+/**
+* The split button's leading half: a Button, with an icon, a label or both,
+* in the root's size and variant.
+*/
+function SplitButtonAction(props) {
+	const $ = c(9);
+	const theme = useTheme();
+	const { size, variant } = use(SplitButtonContext);
+	let t0;
+	if ($[0] !== size || $[1] !== theme) {
+		t0 = actionItemOf(theme, size);
+		$[0] = size;
+		$[1] = theme;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== variant) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			...props,
+			variant
+		});
+		$[3] = props;
+		$[4] = variant;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t0 || $[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: t0,
+			children: t1
+		});
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* The split button's trailing half: the down chevron, which opens the menu
+* of alternatives its children describe, below its end edge.
+*/
+function SplitButtonMenu(t0) {
+	const $ = c(22);
+	const { "aria-label": label, children, defaultOpen: t1, isDisabled, isOpen, onAction, onOpenChange } = t0;
+	const defaultOpen = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const { size, variant } = use(SplitButtonContext);
+	const [ownOpen, setOwnOpen] = useState(defaultOpen);
+	const open = isOpen ?? ownOpen;
+	let t2;
+	if ($[0] !== onOpenChange) {
+		t2 = changeThen(setOwnOpen, onOpenChange);
+		$[0] = onOpenChange;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== open || $[3] !== size || $[4] !== theme) {
+		t3 = menuItemOf(theme, size, open);
+		$[2] = open;
+		$[3] = size;
+		$[4] = theme;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = CHEVRONS[size];
+	let t5;
+	if ($[6] !== isDisabled || $[7] !== label || $[8] !== t4 || $[9] !== variant) {
+		t5 = /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			icon: t4,
+			isDisabled,
+			variant
+		});
+		$[6] = isDisabled;
+		$[7] = label;
+		$[8] = t4;
+		$[9] = variant;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t3 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+			value: t3,
+			children: t5
+		});
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== children || $[15] !== onAction) {
+		t7 = /* @__PURE__ */ jsx(Menu.Content, {
+			align: "end",
+			onAction,
+			children
+		});
+		$[14] = children;
+		$[15] = onAction;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== open || $[18] !== t2 || $[19] !== t6 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Menu, {
+			isOpen: open,
+			onOpenChange: t2,
+			children: [t6, t7]
+		});
+		$[17] = open;
+		$[18] = t2;
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+}
+SplitButton.Action = SplitButtonAction;
+SplitButton.Menu = SplitButtonMenu;
+//#endregion
+export { SplitButton, SplitButtonAction, SplitButtonMenu };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","Key","createContext","use","useState","StyleSheet","View","ControlSize","ButtonGroupItem","GroupButtonState","ResolvedTheme","ButtonProps","HEIGHTS","ButtonGroupItemContext","ChevronDownGlyph","useTheme","composeStyles","themedStyles","Button","Menu","SplitButtonActionProps","Props","Omit","SplitButtonMenuProps","children","defaultOpen","isDisabled","isOpen","onAction","key","onOpenChange","SplitButtonProps","ref","size","style","variant","SplitButtonVariant","TRAILING_PADDING","lg","md","xl","xs","xxl","CLOSED_OFFSET","CHEVRONS","Readonly","Record","SplitButtonContext","groupOf","spacing","create","group","alignItems","alignSelf","flexDirection","gap","xxs","leadingPaddingsOf","paddingEnd","paddingStart","trailingPaddings","closed","paddingsBy","open","cornersOf","radii","sizing","round","active","sm","inner","actionItemOf","theme","corners","end","start","keepsTarget","shift","changeThen","setOwnOpen","next","contextOf","menuItemOf","held","offset","by","SplitButton","t0","$","_c","props","t1","t2","undefined","t3","context","t4","t5","t6","SplitButtonAction","SplitButtonMenu","label","ownOpen","t7","t8","Action","_c"],"sources":["../../../src/components/split-button/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { Key } from 'react-stately'\n\nimport { createContext, use, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport type { ControlSize } from '../../button'\nimport type { ButtonGroupItem, GroupButtonState } from '../../button/group'\nimport type { ResolvedTheme } from '../../theme/scope'\nimport type { ButtonProps } from '../button'\n\nimport { HEIGHTS } from '../../button'\nimport { ButtonGroupItemContext } from '../../button/group'\nimport { ChevronDownGlyph } from '../../glyphs'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { Button } from '../button'\nimport { Menu } from '../menu'\n\n// The split button page's split button, as kanso-ui's SplitButton draws it:\n// an action and the menu of alternatives beside it, drawn as two Buttons 2dp\n// apart, which the page calls a special connected button group. The outer\n// ends keep the button's round, and the two edges that meet take the inner\n// corner the size gives them, 4dp up to the page's M, 8dp at L and 12dp at\n// XL, opening out to 8dp, 12dp and 20dp while either half is hovered, shows\n// its focus ring or is pressed. The corners ease as a button's own do, and\n// follow the layout's direction. The values are the page's size token sets,\n// read from Material Design's own split button tokens; the 20dp corner, and\n// the paddings that are not steps of the spacing scale, are written out.\n//\n// **The leading half is a Button**, with an icon, a label or both, and the\n// page's own padding either side of what it holds: 12dp and 10dp at XS, for\n// instance, where a lone Button takes 16dp on both.\n//\n// **The trailing half is the menu's trigger**: a Button holding the down\n// chevron at the size's icon size, 22dp up to 50dp, with the menu below its\n// end edge. The chevron sits a dp or more toward the start while the menu is\n// closed, the page's optical centring, 1dp to 6dp by size, and centres once\n// it opens, when the inner corners round off entirely. The page keeps the\n// colours as they are while the menu is open and lays the pressed state\n// layer over them, which the half draws for as long as the menu shows.\n//\n// Both halves take the variant the root names, out of Button's four with a\n// container: the page gives text no split button. The paddings are the\n// page's whatever the variant, as on web, so an outlined pair's rule sits\n// inside them.\n\n// Omitted form by form: ButtonProps is a union of the plain, link and toggle\n// forms, and an Omit of the whole union keeps only the keys all three share,\n// which would let a link's and a toggle's props back together.\ntype SplitButtonActionProps = ButtonProps extends infer Props\n  ? Props extends unknown\n    ? Omit<Props, 'shape' | 'size' | 'variant'>\n    : never\n  : never\n\ntype SplitButtonMenuProps = {\n  /** What the menu offers, in words: the trailing half is an icon alone. */\n  readonly 'aria-label': string\n  /** The menu's items, as `Menu.Item`s and the rest of Menu's parts. */\n  readonly children: ReactNode\n  /**\n   * Whether the menu starts open, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultOpen?: boolean\n  /** Whether the trailing half can be pressed. */\n  readonly isDisabled?: boolean\n  /** Whether the menu is open, when the call site holds the state. */\n  readonly isOpen?: boolean\n  /** Called with an item's `id` when it is chosen. */\n  readonly onAction?: (key: Key) => void\n  /** Called when the menu opens or closes. */\n  readonly onOpenChange?: (isOpen: boolean) => void\n}\n\ntype SplitButtonProps = Omit<ViewProps, 'children' | 'role' | 'style'> & {\n  /** What the pair is, in words, for the group around the two halves. */\n  readonly 'aria-label'?: string\n  /** The two halves: a `SplitButton.Action`, then a `SplitButton.Menu`. */\n  readonly children: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * The size both halves take, as Button's: `xs` to `xxl`.\n   * @default 'md'\n   */\n  readonly size?: ControlSize\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The colour style both halves take: Button's four with a container.\n   * @default 'filled'\n   */\n  readonly variant?: SplitButtonVariant\n}\n\ntype SplitButtonVariant = 'elevated' | 'filled' | 'outlined' | 'tonal'\n\n// The trailing half's padding either side of the chevron, and how far the\n// chevron sits toward the start while the menu is closed.\nconst TRAILING_PADDING = { lg: 15, md: 13, xl: 29, xs: 13, xxl: 43 }\nconst CLOSED_OFFSET = { lg: 2, md: 1, xl: 3, xs: 1, xxl: 6 }\n\n// The chevron the trailing half holds, at each size's icon size.\nconst CHEVRONS: Readonly<Record<ControlSize, ReactNode>> = {\n  lg: <ChevronDownGlyph size={26} />,\n  md: <ChevronDownGlyph size={22} />,\n  xl: <ChevronDownGlyph size={38} />,\n  xs: <ChevronDownGlyph size={22} />,\n  xxl: <ChevronDownGlyph size={50} />,\n}\n\n// What the root hands its two halves, as `contextOf` builds it.\nconst SplitButtonContext = createContext<{\n  readonly size: ControlSize\n  readonly variant: SplitButtonVariant\n}>({ size: 'md', variant: 'filled' })\n\n// A row as wide as its halves, 2dp apart, as web's inline-flex group is.\nconst groupOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    group: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      flexDirection: 'row',\n      gap: spacing.xxs,\n    },\n  }),\n)\n\n// The leading half's padding either side of what it holds.\nconst leadingPaddingsOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    lg: { paddingEnd: spacing.xl, paddingStart: spacing.xl },\n    md: { paddingEnd: spacing.md, paddingStart: spacing.lg },\n    xl: { paddingEnd: 48, paddingStart: 48 },\n    xs: { paddingEnd: 10, paddingStart: spacing.md },\n    xxl: { paddingEnd: 64, paddingStart: 64 },\n  }),\n)\n\n// The trailing half's padding: centred once the menu is open, and moved\n// toward the start by the page's offset while it is closed.\nconst trailingPaddings = {\n  closed: StyleSheet.create(paddingsBy(CLOSED_OFFSET)),\n  open: StyleSheet.create(paddingsBy({ lg: 0, md: 0, xl: 0, xs: 0, xxl: 0 })),\n}\n\n// The three corners at each size: where the halves meet at rest and while a\n// half is active, and the round end, half the button's height. Not the\n// pill: a corner larger than half its side scales down every corner beside\n// it, so a pill end beside a 4dp inner corner would shrink the inner one.\nconst cornersOf = themedStyles(({ radii, sizing }: ResolvedTheme) => {\n  const round = (size: ControlSize) => sizing[HEIGHTS[size]] / 2\n\n  return {\n    active: { lg: radii.md, md: radii.md, xl: 20, xs: radii.sm, xxl: 20 },\n    inner: {\n      lg: radii.xs,\n      md: radii.xs,\n      xl: radii.sm,\n      xs: radii.xs,\n      xxl: radii.md,\n    },\n    round: {\n      lg: round('lg'),\n      md: round('md'),\n      xl: round('xl'),\n      xs: round('xs'),\n      xxl: round('xxl'),\n    },\n  } satisfies Record<string, Readonly<Record<ControlSize, number>>>\n})\n\n// The leading half's place in the pair: the round end at the start, and the\n// inner corner at the end, opening out while the half is active. Built by a\n// call rather than written at the prop, which is what react-perf's\n// jsx-no-new-object-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction actionItemOf(\n  theme: ResolvedTheme,\n  size: ControlSize,\n): ButtonGroupItem {\n  const corners = cornersOf(theme)\n\n  return {\n    corners: ({ active }: GroupButtonState) => ({\n      end: active ? corners.active[size] : corners.inner[size],\n      start: corners.round[size],\n    }),\n    isDisabled: false,\n    keepsTarget: false,\n    shift: 0,\n    size,\n    style: leadingPaddingsOf(theme)[size],\n  }\n}\n\n// What the menu opening or closing runs: the half's own state, then the call\n// site's handler.\nfunction changeThen(\n  setOwnOpen: (isOpen: boolean) => void,\n  onOpenChange: ((isOpen: boolean) => void) | undefined,\n) {\n  return (next: boolean) => {\n    setOwnOpen(next)\n    onOpenChange?.(next)\n  }\n}\n\n// What the root hands its two halves.\nfunction contextOf(size: ControlSize, variant: SplitButtonVariant) {\n  return { size, variant }\n}\n\n// The trailing half's place in the pair: the round end at the end, and the\n// inner corner at the start, opening out while the half is active and\n// rounding off while the menu is open, when the pressed layer is held too.\nfunction menuItemOf(\n  theme: ResolvedTheme,\n  size: ControlSize,\n  open: boolean,\n): ButtonGroupItem {\n  const corners = cornersOf(theme)\n\n  return {\n    corners: ({ active }: GroupButtonState) => ({\n      end: corners.round[size],\n      start: open\n        ? corners.round[size]\n        : active\n          ? corners.active[size]\n          : corners.inner[size],\n    }),\n    held: open,\n    isDisabled: false,\n    keepsTarget: false,\n    shift: 0,\n    size,\n    style: trailingPaddings[open ? 'open' : 'closed'][size],\n  }\n}\n\n// The trailing half's padding at each size, moved toward the start by\n// `offset`.\nfunction paddingsBy(offset: Readonly<Record<ControlSize, number>>) {\n  const by = (size: ControlSize) => ({\n    paddingEnd: TRAILING_PADDING[size] + offset[size],\n    paddingStart: TRAILING_PADDING[size] - offset[size],\n  })\n\n  return {\n    lg: by('lg'),\n    md: by('md'),\n    xl: by('xl'),\n    xs: by('xs'),\n    xxl: by('xxl'),\n  }\n}\n\n/**\n * An action and a menu of alternatives beside it, drawn as one control.\n *\n * ```tsx\n * <SplitButton>\n *   <SplitButton.Action onPress={save}>Label</SplitButton.Action>\n *   <SplitButton.Menu aria-label=\"More options\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </SplitButton.Menu>\n * </SplitButton>\n * ```\n *\n * `style`, `ref` and `testID` land on the group around the two halves.\n */\nfunction SplitButton({\n  children,\n  size = 'md',\n  style,\n  variant = 'filled',\n  ...props\n}: SplitButtonProps) {\n  const theme = useTheme()\n  const context = contextOf(size, variant)\n\n  return (\n    <SplitButtonContext value={context}>\n      <View\n        role=\"group\"\n        {...props}\n        style={composeStyles<ViewStyle>(groupOf(theme).group, style)}\n      >\n        {children}\n      </View>\n    </SplitButtonContext>\n  )\n}\n\n/**\n * The split button's leading half: a Button, with an icon, a label or both,\n * in the root's size and variant.\n */\nfunction SplitButtonAction(props: SplitButtonActionProps) {\n  const theme = useTheme()\n  const { size, variant } = use(SplitButtonContext)\n\n  return (\n    <ButtonGroupItemContext value={actionItemOf(theme, size)}>\n      <Button {...props} variant={variant} />\n    </ButtonGroupItemContext>\n  )\n}\n\n/**\n * The split button's trailing half: the down chevron, which opens the menu\n * of alternatives its children describe, below its end edge.\n */\nfunction SplitButtonMenu({\n  'aria-label': label,\n  children,\n  defaultOpen = false,\n  isDisabled,\n  isOpen,\n  onAction,\n  onOpenChange,\n}: SplitButtonMenuProps) {\n  const theme = useTheme()\n  const { size, variant } = use(SplitButtonContext)\n  const [ownOpen, setOwnOpen] = useState(defaultOpen)\n  const open = isOpen ?? ownOpen\n\n  return (\n    <Menu isOpen={open} onOpenChange={changeThen(setOwnOpen, onOpenChange)}>\n      <ButtonGroupItemContext value={menuItemOf(theme, size, open)}>\n        <Button\n          aria-label={label}\n          icon={CHEVRONS[size]}\n          isDisabled={isDisabled}\n          variant={variant}\n        />\n      </ButtonGroupItemContext>\n      <Menu.Content align=\"end\" onAction={onAction}>\n        {children}\n      </Menu.Content>\n    </Menu>\n  )\n}\n\nSplitButton.Action = SplitButtonAction\nSplitButton.Menu = SplitButtonMenu\n\nexport { SplitButton, SplitButtonAction, SplitButtonMenu }\nexport type {\n  SplitButtonActionProps,\n  SplitButtonMenuProps,\n  SplitButtonProps,\n  SplitButtonVariant,\n}\n"],"mappings":";;;;;;;;;;;;AAoGA,MAAM0C,mBAAmB;CAAEC,IAAI;CAAIC,IAAI;CAAIC,IAAI;CAAIC,IAAI;CAAIC,KAAK;AAAG;AACnE,MAAMC,gBAAgB;CAAEL,IAAI;CAAGC,IAAI;CAAGC,IAAI;CAAGC,IAAI;CAAGC,KAAK;AAAE;AAG3D,MAAME,WAAqD;CACzDN,IAAI,oBAAC,kBAAD,EAAkB,MAAM,GAAG,CAAA;CAC/BC,IAAI,oBAAC,kBAAD,EAAkB,MAAM,GAAG,CAAA;CAC/BC,IAAI,oBAAC,kBAAD,EAAkB,MAAM,GAAG,CAAA;CAC/BC,IAAI,oBAAC,kBAAD,EAAkB,MAAM,GAAG,CAAA;CAC/BC,KAAK,oBAAC,kBAAD,EAAkB,MAAM,GAAG,CAAA;AAClC;AAGA,MAAMK,qBAAqB7C,cAGxB;CAAE+B,MAAM;CAAME,SAAS;AAAS,CAAC;AAGpC,MAAMa,UAAU/B,cAAc,EAAEgC,cAC9B5C,WAAW6C,OAAO,EAChBC,OAAO;CACLC,YAAY;CACZC,WAAW;CACXC,eAAe;CACfC,KAAKN,QAAQO;AACf,EACF,CAAC,CACH;AAGA,MAAMC,oBAAoBxC,cAAc,EAAEgC,cACxC5C,WAAW6C,OAAO;CAChBZ,IAAI;EAAEoB,YAAYT,QAAQT;EAAImB,cAAcV,QAAQT;CAAG;CACvDD,IAAI;EAAEmB,YAAYT,QAAQV;EAAIoB,cAAcV,QAAQX;CAAG;CACvDE,IAAI;EAAEkB,YAAY;EAAIC,cAAc;CAAG;CACvClB,IAAI;EAAEiB,YAAY;EAAIC,cAAcV,QAAQV;CAAG;CAC/CG,KAAK;EAAEgB,YAAY;EAAIC,cAAc;CAAG;AAC1C,CAAC,CACH;AAIA,MAAMC,mBAAmB;CACvBC,QAAQxD,WAAW6C,OAAOY,WAAWnB,aAAa,CAAC;CACnDoB,MAAM1D,WAAW6C,OAAOY,WAAW;EAAExB,IAAI;EAAGC,IAAI;EAAGC,IAAI;EAAGC,IAAI;EAAGC,KAAK;CAAE,CAAC,CAAC;AAC5E;AAMA,MAAMsB,YAAY/C,cAAc,EAAEgD,OAAOC,aAA4B;CACnE,MAAMC,SAASlC,SAAsBiC,OAAOtD,QAAQqB,SAAS;CAE7D,OAAO;EACLmC,QAAQ;GAAE9B,IAAI2B,MAAM1B;GAAIA,IAAI0B,MAAM1B;GAAIC,IAAI;GAAIC,IAAIwB,MAAMI;GAAI3B,KAAK;EAAG;EACpE4B,OAAO;GACLhC,IAAI2B,MAAMxB;GACVF,IAAI0B,MAAMxB;GACVD,IAAIyB,MAAMI;GACV5B,IAAIwB,MAAMxB;GACVC,KAAKuB,MAAM1B;EACb;EACA4B,OAAO;GACL7B,IAAI6B,MAAM,IAAI;GACd5B,IAAI4B,MAAM,IAAI;GACd3B,IAAI2B,MAAM,IAAI;GACd1B,IAAI0B,MAAM,IAAI;GACdzB,KAAKyB,MAAM,KAAK;EAClB;CACF;AACF,CAAC;AAOD,SAASI,aACPC,OACAvC,MACiB;CACjB,MAAMwC,UAAUT,UAAUQ,KAAK;CAE/B,OAAO;EACLC,UAAU,EAAEL,cAAgC;GAC1CM,KAAKN,SAASK,QAAQL,OAAOnC,QAAQwC,QAAQH,MAAMrC;GACnD0C,OAAOF,QAAQN,MAAMlC;EACvB;EACAP,YAAY;EACZkD,aAAa;EACbC,OAAO;EACP5C;EACAC,OAAOuB,kBAAkBe,KAAK,CAAC,CAACvC;CAClC;AACF;AAIA,SAAS6C,WACPC,YACAjD,cACA;CACA,QAAQkD,SAAkB;EACxBD,WAAWC,IAAI;EACflD,eAAekD,IAAI;CACrB;AACF;AAGA,SAASC,UAAUhD,MAAmBE,SAA6B;CACjE,OAAO;EAAEF;EAAME;CAAQ;AACzB;AAKA,SAAS+C,WACPV,OACAvC,MACA8B,MACiB;CACjB,MAAMU,UAAUT,UAAUQ,KAAK;CAE/B,OAAO;EACLC,UAAU,EAAEL,cAAgC;GAC1CM,KAAKD,QAAQN,MAAMlC;GACnB0C,OAAOZ,OACHU,QAAQN,MAAMlC,QACdmC,SACEK,QAAQL,OAAOnC,QACfwC,QAAQH,MAAMrC;EACtB;EACAkD,MAAMpB;EACNrC,YAAY;EACZkD,aAAa;EACbC,OAAO;EACP5C;EACAC,OAAO0B,iBAAiBG,OAAO,SAAS,SAAS,CAAC9B;CACpD;AACF;AAIA,SAAS6B,WAAWsB,QAA+C;CACjE,MAAMC,MAAMpD,UAAuB;EACjCyB,YAAYrB,iBAAiBJ,QAAQmD,OAAOnD;EAC5C0B,cAActB,iBAAiBJ,QAAQmD,OAAOnD;CAChD;CAEA,OAAO;EACLK,IAAI+C,GAAG,IAAI;EACX9C,IAAI8C,GAAG,IAAI;EACX7C,IAAI6C,GAAG,IAAI;EACX5C,IAAI4C,GAAG,IAAI;EACX3C,KAAK2C,GAAG,KAAK;CACf;AACF;;;;;;;;;;;;;;;AAgBA,SAAAC,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAjE;CAAA,IAAAkE;CAAA,IAAAxD;CAAA,IAAAyD;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAqB,CAAA,CAAA/D,UAAAS,MAAA0D,IAAAzD,OAAAC,SAAAyD,IAAA,GAAAF,SAAAH;EAMFC,EAAA,KAAAD;EAAAC,EAAA,KAAAhE;EAAAgE,EAAA,KAAAE;EAAAF,EAAA,KAAAtD;EAAAsD,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAApE,WAAAgE,EAAA;EAAAE,QAAAF,EAAA;EAAAtD,QAAAsD,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJjB,MAAAvD,OAAA0D,OAAAE,KAAAA,IAAA,OAAAF;CAEA,MAAAxD,UAAAyD,OAAAC,KAAAA,IAAA,WAAAD;CAGA,MAAApB,QAAczD,SAAS;CAAC,IAAA+E;CAAA,IAAAN,EAAA,OAAAvD,QAAAuD,EAAA,OAAArD,SAAA;EACR2D,KAAAb,UAAUhD,MAAME,OAAO;EAACqD,EAAA,KAAAvD;EAAAuD,EAAA,KAAArD;EAAAqD,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAxC,MAAAO,UAAgBD;CAAwB,IAAAE;CAAA,IAAAR,EAAA,OAAAtD,SAAAsD,EAAA,QAAAhB,OAAA;EAO3BwB,KAAAhF,cAAyBgC,QAAQwB,KAAK,CAAC,CAAArB,OAAQjB,KAAK;EAACsD,EAAA,KAAAtD;EAAAsD,EAAA,MAAAhB;EAAAgB,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAhE,YAAAgE,EAAA,QAAAE,SAAAF,EAAA,QAAAQ,IAAA;EAH9DC,KAAA,oBAAC,MAAD;GACO,MAAA;GAAO,GACRP;GACG,OAAAM;GAENxE;EALE,CAAA;EAMEgE,EAAA,MAAAhE;EAAAgE,EAAA,MAAAE;EAAAF,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAO,WAAAP,EAAA,QAAAS,IAAA;EAPTC,KAAA,oBAAC,oBAAD;GAA2BH,OAAAA;GACzBE,UAAAA;EADiB,CAAA;EAQET,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OARrBU;AAQqB;;;;;AAQzB,SAAAC,kBAAAT,OAAA;CAAA,MAAAF,IAAAC,EAAA,CAAA;CACE,MAAAjB,QAAczD,SAAS;CACvB,MAAA,EAAAkB,MAAAE,YAA0BhC,IAAI4C,kBAAkB;CAAC,IAAAwC;CAAA,IAAAC,EAAA,OAAAvD,QAAAuD,EAAA,OAAAhB,OAAA;EAGhBe,KAAAhB,aAAaC,OAAOvC,IAAI;EAACuD,EAAA,KAAAvD;EAAAuD,EAAA,KAAAhB;EAAAgB,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,IAAAG;CAAA,IAAAH,EAAA,OAAAE,SAAAF,EAAA,OAAArD,SAAA;EACtDwD,KAAA,oBAAC,QAAD;GAAO,GAAKD;GAAgBvD;EAAO,CAAA;EAAIqD,EAAA,KAAAE;EAAAF,EAAA,KAAArD;EAAAqD,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAD,MAAAC,EAAA,OAAAG,IAAA;EADzCC,KAAA,oBAAC,wBAAD;GAA+B,OAAAL;GAC7BI,UAAAA;EADqB,CAAA;EAEEH,EAAA,KAAAD;EAAAC,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFzBI;AAEyB;;;;;AAQ7B,SAAAQ,gBAAAb,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAA,cAAAY,OAAA7E,UAAAC,aAAAkE,IAAAjE,YAAAC,QAAAC,UAAAE,iBAAAyD;CAGvB,MAAA9D,cAAAkE,OAAAE,KAAAA,IAAA,QAAAF;CAMA,MAAAnB,QAAczD,SAAS;CACvB,MAAA,EAAAkB,MAAAE,YAA0BhC,IAAI4C,kBAAkB;CAChD,MAAA,CAAAuD,SAAAvB,cAA8B3E,SAASqB,WAAW;CAClD,MAAAsC,OAAapC,UAAA2E;CAAiB,IAAAV;CAAA,IAAAJ,EAAA,OAAA1D,cAAA;EAGM8D,KAAAd,WAAWC,YAAYjD,YAAY;EAAC0D,EAAA,KAAA1D;EAAA0D,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAzB,QAAAyB,EAAA,OAAAvD,QAAAuD,EAAA,OAAAhB,OAAA;EACrCsB,KAAAZ,WAAWV,OAAOvC,MAAM8B,IAAI;EAACyB,EAAA,KAAAzB;EAAAyB,EAAA,KAAAvD;EAAAuD,EAAA,KAAAhB;EAAAgB,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAGlD,MAAAQ,KAAApD,SAASX;CAAK,IAAAgE;CAAA,IAAAT,EAAA,OAAA9D,cAAA8D,EAAA,OAAAa,SAAAb,EAAA,OAAAQ,MAAAR,EAAA,OAAArD,SAAA;EAFtB8D,KAAA,oBAAC,QAAD;GACcI,cAAAA;GACN,MAAAL;GACMtE;GACHS;EAAO,CAAA;EAChBqD,EAAA,KAAA9D;EAAA8D,EAAA,KAAAa;EAAAb,EAAA,KAAAQ;EAAAR,EAAA,KAAArD;EAAAqD,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAM,MAAAN,EAAA,QAAAS,IAAA;EANJC,KAAA,oBAAC,wBAAD;GAA+B,OAAAJ;GAC7BG,UAAAA;EADqB,CAAA;EAOET,EAAA,MAAAM;EAAAN,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAhE,YAAAgE,EAAA,QAAA5D,UAAA;EACzB2E,KAAA,oBAAA,KAAA,SAAA;GAAoB,OAAA;GAAgB3E;GACjCJ;EACH,CAAA;EAAegE,EAAA,MAAAhE;EAAAgE,EAAA,MAAA5D;EAAA4D,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAzB,QAAAyB,EAAA,QAAAI,MAAAJ,EAAA,QAAAU,MAAAV,EAAA,QAAAe,IAAA;EAXjBC,KAAA,qBAAC,MAAD;GAAczC,QAAAA;GAAoB,cAAA6B;GAAlC,UAAA,CACEM,IAQAK,EATG;;EAYEf,EAAA,MAAAzB;EAAAyB,EAAA,MAAAI;EAAAJ,EAAA,MAAAU;EAAAV,EAAA,MAAAe;EAAAf,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,OAZPgB;AAYO;AAIXlB,YAAYmB,SAASN;AACrBb,YAAYnE,OAAOiF"}

package/dist/components/supporting-pane/index.d.ts

@@ -0,0 +1,44 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/supporting-pane/index.d.ts
+type SupportingPaneProps = Omit<ViewProps, 'children'> & {
+  /**
+   * The primary content. Takes whatever width the supporting pane leaves from
+   * the expanded window size up.
+   */
+  readonly main?: ReactNode;
+  /**
+   * Which side of the main pane the supporting one takes from the expanded
+   * window size up. Below it the layout stacks either way, with the
+   * supporting pane under the main one.
+   * @default 'trailing'
+   */
+  readonly placement?: 'leading' | 'trailing';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Content that only means something beside `main`. Sits below it in a
+   * compact or medium window, and beside it at a fixed 360dp from the
+   * expanded window size up.
+   */
+  readonly supporting?: ReactNode;
+};
+/**
+ * Material Design's supporting pane layout: a main pane and a companion that
+ * reflows underneath it when there is no room beside it.
+ *
+ * ```tsx
+ * <SupportingPane main={<Article />} supporting={<Related />} />
+ * ```
+ *
+ * Layout only: neither pane paints a surface or a border of its own, so what
+ * goes in them is composed at the call site out of Cards, lists or plain
+ * content. The main pane comes first in the tree in both shapes, so a screen
+ * reader reaches it before the content that supports it.
+ *
+ * `style`, `ref` and `testID` land on the outer `View`, and a `style` there
+ * applies over the layout's own.
+ */
+declare function SupportingPane({ main, placement, style, supporting, ...props }: SupportingPaneProps): import("react").JSX.Element;
+//#endregion
+export { SupportingPane, type SupportingPaneProps };
+//# sourceMappingURL=index.d.ts.map