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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","TextStyle","View","ViewStyle","AnimatedStyle","Text","NativeText","StyleSheet","useWindowDimensions","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","ResolvedTheme","TypeRole","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","useSlotTrigger","palettesOf","BUSY","CONCEALED","PendingContent","PendingRing","pendingStyles","usePending","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ButtonForm","variant","Exclude","ButtonVariant","ButtonProps","Omit","children","disableRipple","icon","isDisabled","ref","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","DISABLED","Readonly","Record","elevated","filled","outlined","text","tonal","ICON_SIZES","lg","md","xl","xs","xxl","ROLES","SQUARE_CORNERS","const","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexDirection","justifyContent","maxWidth","flexShrink","label","textAlign","inlinePaddings","spacing","shadowsOf","shadows","elevation1","boxShadow","elevation2","sizesOf","theme","sizing","inline","gap","sm","minHeight","controlLg","paddingHorizontal","paddingVertical","controlSm","controlXl","controlXs","controlXxl","outlinedSizesOf","borderWidth","Button","t0","$","_c","defaultSelected","delayLongPress","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","pendingLabel","props","slot","t1","t2","t3","t4","t5","t6","type","isPending","undefined","role","fontScale","pending","ringLabel","isToggle","t7","t8","action","t9","t10","hoverIn","hoverOut","longPress","triggerProps","colors","feedback","color","content","disabled","radii","resting","pill","shaped","pressed","T0","t11","t12","t13","t14","handlers","t15","t16","t17","t18","t19","container","shadowOf","corner","ring","t20","clip","t21","layer","t22","iconStyleOf","t23","hidden","t24","typography","t25","hovered","lifted","_c","NativeText"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport {\n  Text as NativeText,\n  StyleSheet,\n  useWindowDimensions,\n} from 'react-native'\nimport Animated from 'react-native-reanimated'\n\nimport type {\n  ButtonLinkForm,\n  ButtonPressForm,\n  ButtonToggleForm,\n} from '../../button'\nimport type { PaletteName } from '../../button/palettes'\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { ResolvedTheme } from '../../theme/scope'\nimport type { TypeRole } from '../../typography/roles'\n\nimport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n} from '../../button'\nimport { palettesOf } from '../../button/palettes'\nimport {\n  BUSY,\n  CONCEALED,\n  PendingContent,\n  PendingRing,\n  pendingStyles,\n  usePending,\n} from '../../button/pending'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The buttons spec page's five colour styles, five sizes and two shapes, as\n// kanso-ui's Button draws them. The variant carries colour and the size\n// carries geometry, so the two never argue: the padding belongs to the size\n// alone, and a text button is as wide as a filled one at the same size.\n//\n// The colour pairs are the page's: filled on primary, tonal on secondary\n// container, outlined with an outline-variant rule and an on-surface-variant\n// label, text on primary, and elevated on surface container low with a\n// primary label. Elevated is the one variant whose shadow is part of it: it\n// rests at elevation 1, rises to 2 under a pointer and settles back while\n// pressed, where filled and tonal rest flat and lift to 1 under a pointer\n// only. The shadow is the theme's `boxShadow` value, which React Native draws\n// on iOS and Android as React Native Web draws it in a browser.\n//\n// The state layers, the ripple and the focus ring are src/press's, drawn in\n// the label's colour over the container, as on web.\n//\n// **Disabled is the page's colour at an opacity, translucent.** A container\n// is on-surface at the `disabledContainer` opacity, and the label on-surface\n// at `disabledContent`, over whatever the button sits on rather than mixed\n// over the surface role as web's are; src/button/palettes.ts gives the\n// reason. Disabled drops the shadow, since a shadow says a control is there\n// to press.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it takes the page's second pair of colour\n// roles for its variant: a filled toggle rests on surface container with an\n// on-surface-variant label and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, an elevated one keeps its\n// low surface until it takes primary, and an outlined one swaps its rule for\n// the inverse surface pair. The page gives text no pair, so a text button\n// given those props stays a plain one.\n//\n// **A pending button keeps its place.** Given `isPending` the label and the\n// icon are hidden where they stand, so the button keeps its width, and an\n// indeterminate ring is drawn over them in the label's colour, at the label's\n// type size times the device's text size, which is what web's `1em` reads.\n// The button keeps its focus and its ring and takes no press, so a double tap\n// cannot run the action twice: neither `onPress` nor `onLongPress` is called,\n// and a toggle keeps its state until it clears. It reports itself busy, and\n// src/button's pending.tsx says the change out loud.\n//\n// **The corner is a shape the button morphs between.** `round` rests as the\n// pill and `square` at the size's square corner: 12dp up to the page's S,\n// 16dp at M and 28dp above. A press tightens either to the size's pressed\n// corner, 8dp, 12dp or 16dp, and a toggle trades its shape for the other\n// once selected. The corner eases through Reanimated, as src/button's\n// `useCorner` sets out.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with IconButton.\n\ntype ButtonForm =\n  | ButtonLinkForm\n  | ButtonPressForm\n  | (ButtonToggleForm & {\n      /**\n       * A toggle takes any variant but `text`, which the page gives no\n       * selected colours.\n       */\n      readonly variant?: Exclude<ButtonVariant, 'text'>\n    })\n\ntype ButtonProps = ButtonForm &\n  Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n    /** The label. */\n    readonly children?: ReactNode\n    /**\n     * Draws no press ripple. The state layer is unaffected.\n     * @default false\n     */\n    readonly disableRipple?: boolean\n    /**\n     * An icon before the label, at the page's icon size for the button's\n     * size: 20dp at `xs` and `md`, 24dp at `lg`, 32dp at `xl` and 40dp at\n     * `xxl`. The slot hands it the label's colour and that size through\n     * `useIconStyle()`.\n     */\n    readonly icon?: ReactNode\n    /**\n     * Draws the button disabled, and takes no presses.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    readonly ref?: Ref<ComponentRef<typeof View>>\n    /**\n     * The corner the button rests at: `round` is the pill, `square` the\n     * page's rounded rectangle, 12dp up to `md`, 16dp at `lg` and 28dp above.\n     * Either tightens while pressed, and a toggle trades one for the other\n     * once selected.\n     * @default 'round'\n     */\n    readonly shape?: ButtonShape\n    /**\n     * Control height: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the buttons spec page's XS, S, M, L and XL, each with its own padding\n     * and type role. `md` is the page's default. The height is a floor, so a\n     * label that wraps, or that the device's text size enlarges, grows the\n     * button rather than running out of it.\n     * @default 'md'\n     */\n    readonly size?: ButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * How much weight the button pulls. `filled` and `tonal` carry a container\n     * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n     * a low surface and lifts off it with a shadow, for a button that has to\n     * separate from a busy background rather than from the page.\n     * @default 'filled'\n     */\n    readonly variant?: ButtonVariant\n  }\n\ntype ButtonShape = 'round' | 'square'\n\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal'\n\ntype ToggleVariant = Exclude<ButtonVariant, 'text'>\n\n// The disabled container each variant draws. Filled, tonal and elevated share\n// one, which is the page's single disabled container for all three.\nconst DISABLED: Readonly<Record<ButtonVariant, PaletteName>> = {\n  elevated: 'filledDisabled',\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  text: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size draws, from the page's size token sets. Literals, as on\n// web: they are icon sizes, which the theme has no scale for.\nconst ICON_SIZES: Readonly<Record<ButtonSize, number>> = {\n  lg: 24,\n  md: 20,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// The type role each size sets its label in, taken whole: label-large for the\n// two small sizes, then title-medium, headline-small and headline-large.\nconst ROLES: Readonly<Record<ButtonSize, TypeRole>> = {\n  lg: 'titleMedium',\n  md: 'labelLarge',\n  xl: 'headlineSmall',\n  xs: 'labelLarge',\n  xxl: 'headlineLarge',\n}\n\n// The square corner each size rests at, and a round toggle takes once\n// selected.\nconst SQUARE_CORNERS = {\n  lg: 'lg',\n  md: 'md',\n  xl: 'xl',\n  xs: 'md',\n  xxl: 'xl',\n} as const satisfies Record<ButtonSize, keyof ResolvedTheme['radii']>\n\n// Which container a toggle draws, selected and not.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    ToggleVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  elevated: { selected: 'elevatedToggleSelected', unselected: 'elevated' },\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The label sits in the middle of a button wider than it, one stretched by\n  // a column or given a width, as the page draws every button, and a button\n  // is never wider than what holds it.\n  base: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    maxWidth: '100%',\n  },\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  // A label too long for the row wraps, its lines centred, and grows the\n  // button with it.\n  label: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n})\n\n// Each size's inline padding. The two largest are literals: 48 and 64 are not\n// steps of the spacing scale, and the scale should not grow to fit one\n// component. `xs` pads 12 a side, the extra-small token set's leading and\n// trailing space.\nfunction inlinePaddings({\n  spacing,\n}: ResolvedTheme): Readonly<Record<ButtonSize, number>> {\n  return { lg: spacing.xl, md: spacing.lg, xl: 48, xs: spacing.md, xxl: 64 }\n}\n\nconst shadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation1: { boxShadow: shadows.elevation1 },\n    elevation2: { boxShadow: shadows.elevation2 },\n  }),\n)\n\n// The five sizes, from the page's size token sets: the container height, the\n// padding, and the gap before an icon. The height is a floor rather than a\n// fixed size, and the block padding is what keeps a wrapped label off the\n// pill's edge: a step short of a single line's own inset, so a label on one\n// line still draws exactly the page's height.\nconst sizesOf = themedStyles((theme) => {\n  const { sizing, spacing } = theme\n  const inline = inlinePaddings(theme)\n\n  return StyleSheet.create({\n    lg: {\n      gap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: inline.lg,\n      paddingVertical: spacing.md,\n    },\n    md: {\n      gap: spacing.sm,\n      minHeight: sizing.controlSm,\n      paddingHorizontal: inline.md,\n      paddingVertical: spacing.sm,\n    },\n    xl: {\n      gap: spacing.md,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: inline.xl,\n      paddingVertical: spacing.xl,\n    },\n    xs: {\n      gap: spacing.sm,\n      minHeight: sizing.controlXs,\n      paddingHorizontal: inline.xs,\n      paddingVertical: spacing.xs,\n    },\n    xxl: {\n      gap: spacing.lg,\n      minHeight: sizing.controlXxl,\n      paddingHorizontal: inline.xxl,\n      paddingVertical: spacing.xxl,\n    },\n  })\n})\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the rule takes,\n// so an outlined and a filled button with one label are one width.\nconst outlinedSizesOf = themedStyles((theme) => {\n  const inline = inlinePaddings(theme)\n\n  function outlined(size: ButtonSize): ViewStyle {\n    return {\n      borderWidth: OUTLINE_WIDTHS[size],\n      paddingHorizontal: inline[size] - OUTLINE_WIDTHS[size],\n    }\n  }\n\n  return StyleSheet.create({\n    lg: outlined('lg'),\n    md: outlined('md'),\n    xl: outlined('xl'),\n    xs: outlined('xs'),\n    xxl: outlined('xxl'),\n  })\n})\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square, with web's props and values. Given `href` it is a link with\n * the same appearance, and given `isSelected`, `defaultSelected` or\n * `onChange` it is a toggle, which reports its state to a screen reader and\n * draws the page's second pair of colour roles for its variant.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n *\n * A column stretches a button across it, as it does any view, and as a flex\n * column does a button on web; a column that should hold its buttons at their\n * labels' width says so with `alignItems`.\n *\n * The two sizes under 48dp tall, `xs` and `md`, take presses over a 48dp\n * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Button({\n  children,\n  defaultSelected,\n  delayLongPress,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\n  icon,\n  isDisabled = false,\n  isPending = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onLongPress,\n  onPress,\n  onPressIn,\n  onPressOut,\n  pendingLabel,\n  ref,\n  shape = 'round',\n  size = 'md',\n  slot,\n  style,\n  type,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  const theme = useTheme()\n  const role = useTypeRole(ROLES[size])\n  const { fontScale } = useWindowDimensions()\n  // A link is never pending, as on web, where its props have no such state.\n  const pending = href === undefined && isPending\n  const ringLabel = usePending(pending, pendingLabel)\n\n  // The three props that make this a toggle, read as web reads them. The\n  // types keep them off a `text` button; the check here keeps a call site\n  // that slipped past them a plain button.\n  const isToggle =\n    variant !== 'text' &&\n    (defaultSelected !== undefined ||\n      isSelected !== undefined ||\n      onChange !== undefined)\n  const action = useButtonAction({\n    defaultSelected,\n    href,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    slot: slot ?? 'default',\n    type,\n  })\n  const {\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onLongPress: longPress,\n    ...triggerProps\n  } = useSlotTrigger({\n    delayLongPress,\n    href,\n    onHoverIn,\n    onHoverOut,\n    onLongPress,\n    ref,\n    slot,\n  })\n  const colors =\n    palettesOf(theme)[\n      isDisabled\n        ? DISABLED[variant]\n        : variant !== 'text' && isToggle\n          ? TOGGLE_PALETTES[variant][\n              action.selected ? 'selected' : 'unselected'\n            ]\n          : variant\n    ]\n\n  const feedback = usePressFeedback({\n    color: colors.content,\n    disabled: isDisabled,\n    disableRipple,\n    onBlur,\n    onFocus,\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onPressIn,\n    onPressOut,\n    pending,\n  })\n\n  const { radii } = theme\n  const resting =\n    (shape === 'square') !== action.selected\n      ? radii[SQUARE_CORNERS[size]]\n      : radii.pill\n  const shaped = useCorner(\n    feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting,\n    onLayout,\n  )\n\n  return (\n    <AnimatedPressable\n      role={href === undefined ? 'button' : 'link'}\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...(pending ? BUSY : undefined)}\n      {...props}\n      {...triggerProps}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onLongPress={pending ? undefined : longPress}\n      onPress={pending ? undefined : action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.base,\n        sizesOf(theme)[size],\n        variant === 'outlined' ? outlinedSizesOf(theme)[size] : undefined,\n        colors.container,\n        shadowOf(variant, feedback, isDisabled, theme),\n        shaped.corner,\n        feedback.ring,\n        style,\n      )}\n    >\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          buttonStyles.clip,\n          shaped.corner,\n        )}\n      >\n        {feedback.layer}\n      </Animated.View>\n      {icon === undefined ? null : (\n        <PendingContent isPending={pending}>\n          <IconStyleContext value={iconStyleOf(colors.content, size)}>\n            {icon}\n          </IconStyleContext>\n        </PendingContent>\n      )}\n      {children === undefined ? null : (\n        <NativeText\n          {...(pending ? CONCEALED : undefined)}\n          style={composeStyles<TextStyle>(\n            role,\n            styles.label,\n            colors.label,\n            pending ? pendingStyles.hidden : undefined,\n          )}\n        >\n          {children}\n        </NativeText>\n      )}\n      {pending ? (\n        <PendingRing\n          color={colors.content}\n          diameter={theme.typography[`${ROLES[size]}Size`] * fontScale}\n          label={ringLabel}\n        />\n      ) : null}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: ButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\n// The shadow a variant draws in its state: elevated rests at 1 and rises to 2\n// under a pointer, filled and tonal rest flat and rise to 1, and a press\n// brings each back to where it rests.\nfunction shadowOf(\n  variant: ButtonVariant,\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  const lifted = hovered && !pressed\n\n  if (isDisabled) {\n    return undefined\n  }\n\n  if (variant === 'elevated') {\n    return shadowsOf(theme)[lifted ? 'elevation2' : 'elevation1']\n  }\n\n  return (variant === 'filled' || variant === 'tonal') && lifted\n    ? shadowsOf(theme).elevation1\n    : undefined\n}\n\nexport { Button }\nexport type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","TextStyle","View","ViewStyle","AnimatedStyle","use","Text","NativeText","StyleSheet","useWindowDimensions","Animated","useSharedValue","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","ResolvedTheme","TypeRole","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","pressThen","toggleState","useButtonAction","useCorner","useSlotTrigger","ButtonGroupItemContext","groupCornersOf","groupPressHandlers","groupSelectionOf","groupStyles","groupWidthThen","useGroupShift","palettesOf","BUSY","CONCEALED","PendingContent","PendingRing","pendingStyles","usePending","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","useTypeRole","ButtonForm","variant","Exclude","ButtonVariant","ButtonProps","Omit","children","disableRipple","icon","id","isDisabled","ref","shape","ButtonShape","size","ButtonSize","style","ToggleVariant","DISABLED","Readonly","Record","elevated","filled","outlined","text","tonal","ICON_SIZES","lg","md","xl","xs","xxl","ROLES","SQUARE_CORNERS","const","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexDirection","justifyContent","maxWidth","flexShrink","label","textAlign","inlinePaddings","spacing","shadowsOf","shadows","elevation1","boxShadow","elevation2","sizesOf","theme","sizing","inline","gap","sm","minHeight","controlLg","paddingHorizontal","paddingVertical","controlSm","controlXl","controlXs","controlXxl","outlinedSizesOf","borderWidth","Button","t0","$","_c","accessibilityHint","defaultSelected","delayLongPress","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","ownSize","pendingLabel","props","slot","t1","t2","t3","t4","t5","type","isPending","undefined","ownDisabled","group","membership","role","fontScale","pending","ringLabel","isToggle","t6","t7","action","t8","t9","hoverIn","hoverOut","longPress","pressIn","pressOut","triggerProps","toggles","colors","width","feedback","color","content","disabled","held","radii","resting","pill","shaped","pressed","border","t10","shift","T0","t11","t12","t13","accessibility","t14","t15","handlers","t16","t17","t18","t19","toggle","t20","container","shadowOf","corner","keepsTarget","target","ring","t21","clip","t22","layer","t23","iconStyleOf","t24","hidden","t25","typography","t26","hovered","lifted","_c","NativeText"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { use } from 'react'\nimport {\n  Text as NativeText,\n  StyleSheet,\n  useWindowDimensions,\n} from 'react-native'\nimport Animated, { useSharedValue } from 'react-native-reanimated'\n\nimport type {\n  ButtonLinkForm,\n  ButtonPressForm,\n  ButtonToggleForm,\n} from '../../button'\nimport type { PaletteName } from '../../button/palettes'\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { ResolvedTheme } from '../../theme/scope'\nimport type { TypeRole } from '../../typography/roles'\n\nimport {\n  AnimatedPressable,\n  buttonStyles,\n  HEIGHTS,\n  OUTLINE_WIDTHS,\n  PRESSED_CORNERS,\n  pressThen,\n  toggleState,\n  useButtonAction,\n  useCorner,\n  useSlotTrigger,\n} from '../../button'\nimport {\n  ButtonGroupItemContext,\n  groupCornersOf,\n  groupPressHandlers,\n  groupSelectionOf,\n  groupStyles,\n  groupWidthThen,\n  useGroupShift,\n} from '../../button/group'\nimport { palettesOf } from '../../button/palettes'\nimport {\n  BUSY,\n  CONCEALED,\n  PendingContent,\n  PendingRing,\n  pendingStyles,\n  usePending,\n} from '../../button/pending'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The buttons spec page's five colour styles, five sizes and two shapes, as\n// kanso-ui's Button draws them. The variant carries colour and the size\n// carries geometry, so the two never argue: the padding belongs to the size\n// alone, and a text button is as wide as a filled one at the same size.\n//\n// The colour pairs are the page's: filled on primary, tonal on secondary\n// container, outlined with an outline-variant rule and an on-surface-variant\n// label, text on primary, and elevated on surface container low with a\n// primary label. Elevated is the one variant whose shadow is part of it: it\n// rests at elevation 1, rises to 2 under a pointer and settles back while\n// pressed, where filled and tonal rest flat and lift to 1 under a pointer\n// only. The shadow is the theme's `boxShadow` value, which React Native draws\n// on iOS and Android as React Native Web draws it in a browser.\n//\n// The state layers, the ripple and the focus ring are src/press's, drawn in\n// the label's colour over the container, as on web.\n//\n// **Disabled is the page's colour at an opacity, translucent.** A container\n// is on-surface at the `disabledContainer` opacity, and the label on-surface\n// at `disabledContent`, over whatever the button sits on rather than mixed\n// over the surface role as web's are; src/button/palettes.ts gives the\n// reason. Disabled drops the shadow, since a shadow says a control is there\n// to press.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it takes the page's second pair of colour\n// roles for its variant: a filled toggle rests on surface container with an\n// on-surface-variant label and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, an elevated one keeps its\n// low surface until it takes primary, and an outlined one swaps its rule for\n// the inverse surface pair. The page gives text no pair, so a text button\n// given those props stays a plain one.\n//\n// **A pending button keeps its place.** Given `isPending` the label and the\n// icon are hidden where they stand, so the button keeps its width, and an\n// indeterminate ring is drawn over them in the label's colour, at the label's\n// type size times the device's text size, which is what web's `1em` reads.\n// The button keeps its focus and its ring and takes no press, so a double tap\n// cannot run the action twice: neither `onPress` nor `onLongPress` is called,\n// and a toggle keeps its state until it clears. It reports itself busy, and\n// src/button's pending.tsx says the change out loud.\n//\n// **The corner is a shape the button morphs between.** `round` rests as the\n// pill and `square` at the size's square corner: 12dp up to the page's S,\n// 16dp at M and 28dp above. A press tightens either to the size's pressed\n// corner, 8dp, 12dp or 16dp, and a toggle trades its shape for the other\n// once selected. The corner eases through Reanimated, as src/button's\n// `useCorner` sets out.\n//\n// **A ButtonGroup around it hands it what the group decides**, through\n// src/button's group.ts: its size, unless the button names its own, whether\n// it is disabled, a connected group's corners in place of its own shape, and\n// a standard group's widening while it or a neighbour is pressed, which the\n// button takes as inline padding. In a group that selects, the group keeps\n// the selection by the buttons' `id`s, and a button there is a toggle of the\n// group's whatever its own props say: a radio in a group that chooses one,\n// and a button reporting its state in one that chooses several. A `text`\n// button keeps its plain colours there, and draws its selection by nothing\n// but a connected group's corners, as on web.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with IconButton.\n\ntype ButtonForm =\n  | ButtonLinkForm\n  | ButtonPressForm\n  | (ButtonToggleForm & {\n      /**\n       * A toggle takes any variant but `text`, which the page gives no\n       * selected colours.\n       */\n      readonly variant?: Exclude<ButtonVariant, 'text'>\n    })\n\ntype ButtonProps = ButtonForm &\n  Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n    /** The label. */\n    readonly children?: ReactNode\n    /**\n     * Draws no press ripple. The state layer is unaffected.\n     * @default false\n     */\n    readonly disableRipple?: boolean\n    /**\n     * An icon before the label, at the page's icon size for the button's\n     * size: 20dp at `xs` and `md`, 24dp at `lg`, 32dp at `xl` and 40dp at\n     * `xxl`. The slot hands it the label's colour and that size through\n     * `useIconStyle()`.\n     */\n    readonly icon?: ReactNode\n    /** The key a ButtonGroup that selects reports the button by. */\n    readonly id?: string\n    /**\n     * Draws the button disabled, and takes no presses.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    readonly ref?: Ref<ComponentRef<typeof View>>\n    /**\n     * The corner the button rests at: `round` is the pill, `square` the\n     * page's rounded rectangle, 12dp up to `md`, 16dp at `lg` and 28dp above.\n     * Either tightens while pressed, and a toggle trades one for the other\n     * once selected.\n     * @default 'round'\n     */\n    readonly shape?: ButtonShape\n    /**\n     * Control height: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the buttons spec page's XS, S, M, L and XL, each with its own padding\n     * and type role. `md` is the page's default. The height is a floor, so a\n     * label that wraps, or that the device's text size enlarges, grows the\n     * button rather than running out of it.\n     * @default the size of the ButtonGroup around it, else 'md'\n     */\n    readonly size?: ButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * How much weight the button pulls. `filled` and `tonal` carry a container\n     * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n     * a low surface and lifts off it with a shadow, for a button that has to\n     * separate from a busy background rather than from the page.\n     * @default 'filled'\n     */\n    readonly variant?: ButtonVariant\n  }\n\ntype ButtonShape = 'round' | 'square'\n\ntype ButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype ButtonVariant = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal'\n\ntype ToggleVariant = Exclude<ButtonVariant, 'text'>\n\n// The disabled container each variant draws. Filled, tonal and elevated share\n// one, which is the page's single disabled container for all three.\nconst DISABLED: Readonly<Record<ButtonVariant, PaletteName>> = {\n  elevated: 'filledDisabled',\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  text: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size draws, from the page's size token sets. Literals, as on\n// web: they are icon sizes, which the theme has no scale for.\nconst ICON_SIZES: Readonly<Record<ButtonSize, number>> = {\n  lg: 24,\n  md: 20,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// The type role each size sets its label in, taken whole: label-large for the\n// two small sizes, then title-medium, headline-small and headline-large.\nconst ROLES: Readonly<Record<ButtonSize, TypeRole>> = {\n  lg: 'titleMedium',\n  md: 'labelLarge',\n  xl: 'headlineSmall',\n  xs: 'labelLarge',\n  xxl: 'headlineLarge',\n}\n\n// The square corner each size rests at, and a round toggle takes once\n// selected.\nconst SQUARE_CORNERS = {\n  lg: 'lg',\n  md: 'md',\n  xl: 'xl',\n  xs: 'md',\n  xxl: 'xl',\n} as const satisfies Record<ButtonSize, keyof ResolvedTheme['radii']>\n\n// Which container a toggle draws, selected and not.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    ToggleVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  elevated: { selected: 'elevatedToggleSelected', unselected: 'elevated' },\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The label sits in the middle of a button wider than it, one stretched by\n  // a column or given a width, as the page draws every button, and a button\n  // is never wider than what holds it.\n  base: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n    maxWidth: '100%',\n  },\n  icon: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n  // A label too long for the row wraps, its lines centred, and grows the\n  // button with it.\n  label: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n})\n\n// Each size's inline padding. The two largest are literals: 48 and 64 are not\n// steps of the spacing scale, and the scale should not grow to fit one\n// component. `xs` pads 12 a side, the extra-small token set's leading and\n// trailing space.\nfunction inlinePaddings({\n  spacing,\n}: ResolvedTheme): Readonly<Record<ButtonSize, number>> {\n  return { lg: spacing.xl, md: spacing.lg, xl: 48, xs: spacing.md, xxl: 64 }\n}\n\nconst shadowsOf = themedStyles(({ shadows }) =>\n  StyleSheet.create({\n    elevation1: { boxShadow: shadows.elevation1 },\n    elevation2: { boxShadow: shadows.elevation2 },\n  }),\n)\n\n// The five sizes, from the page's size token sets: the container height, the\n// padding, and the gap before an icon. The height is a floor rather than a\n// fixed size, and the block padding is what keeps a wrapped label off the\n// pill's edge: a step short of a single line's own inset, so a label on one\n// line still draws exactly the page's height.\nconst sizesOf = themedStyles((theme) => {\n  const { sizing, spacing } = theme\n  const inline = inlinePaddings(theme)\n\n  return StyleSheet.create({\n    lg: {\n      gap: spacing.sm,\n      minHeight: sizing.controlLg,\n      paddingHorizontal: inline.lg,\n      paddingVertical: spacing.md,\n    },\n    md: {\n      gap: spacing.sm,\n      minHeight: sizing.controlSm,\n      paddingHorizontal: inline.md,\n      paddingVertical: spacing.sm,\n    },\n    xl: {\n      gap: spacing.md,\n      minHeight: sizing.controlXl,\n      paddingHorizontal: inline.xl,\n      paddingVertical: spacing.xl,\n    },\n    xs: {\n      gap: spacing.sm,\n      minHeight: sizing.controlXs,\n      paddingHorizontal: inline.xs,\n      paddingVertical: spacing.xs,\n    },\n    xxl: {\n      gap: spacing.lg,\n      minHeight: sizing.controlXxl,\n      paddingHorizontal: inline.xxl,\n      paddingVertical: spacing.xxl,\n    },\n  })\n})\n\n// The outlined button draws its rule inside the width the other variants\n// take, as the page's buttons do: the padding gives up what the rule takes,\n// so an outlined and a filled button with one label are one width.\nconst outlinedSizesOf = themedStyles((theme) => {\n  const inline = inlinePaddings(theme)\n\n  function outlined(size: ButtonSize): ViewStyle {\n    return {\n      borderWidth: OUTLINE_WIDTHS[size],\n      paddingHorizontal: inline[size] - OUTLINE_WIDTHS[size],\n    }\n  }\n\n  return StyleSheet.create({\n    lg: outlined('lg'),\n    md: outlined('md'),\n    xl: outlined('xl'),\n    xs: outlined('xs'),\n    xxl: outlined('xxl'),\n  })\n})\n\n/**\n * The design's button, at five emphasis levels and five control heights,\n * round or square, with web's props and values. Given `href` it is a link with\n * the same appearance, and given `isSelected`, `defaultSelected` or\n * `onChange` it is a toggle, which reports its state to a screen reader and\n * draws the page's second pair of colour roles for its variant.\n *\n * ```tsx\n * <Button defaultSelected variant=\"tonal\">\n *   Label\n * </Button>\n * ```\n *\n * A column stretches a button across it, as it does any view, and as a flex\n * column does a button on web; a column that should hold its buttons at their\n * labels' width says so with `alignItems`.\n *\n * The two sizes under 48dp tall, `xs` and `md`, take presses over a 48dp\n * target through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Button({\n  accessibilityHint,\n  children,\n  defaultSelected,\n  delayLongPress,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\n  icon,\n  id,\n  isDisabled: ownDisabled = false,\n  isPending = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onLongPress,\n  onPress,\n  onPressIn,\n  onPressOut,\n  pendingLabel,\n  ref,\n  shape = 'round',\n  size: ownSize,\n  slot,\n  style,\n  type,\n  variant = 'filled',\n  ...props\n}: ButtonProps) {\n  const theme = useTheme()\n  // A ButtonGroup around the button hands it a size, which one named here\n  // still beats, and its part in the group; src/button's group.ts sets it out.\n  const group = use(ButtonGroupItemContext)\n  const size = ownSize ?? group?.size ?? 'md'\n  const isDisabled = ownDisabled || group?.isDisabled === true\n  const membership = groupSelectionOf(group, id)\n  const role = useTypeRole(ROLES[size])\n  const { fontScale } = useWindowDimensions()\n  // A link is never pending, as on web, where its props have no such state.\n  const pending = href === undefined && isPending\n  const ringLabel = usePending(pending, pendingLabel)\n\n  // The three props that make this a toggle, read as web reads them. The\n  // types keep them off a `text` button; the check here keeps a call site\n  // that slipped past them a plain button. A group that selects keeps the\n  // selection itself, so they mean nothing there.\n  const isToggle =\n    membership === undefined &&\n    variant !== 'text' &&\n    (defaultSelected !== undefined ||\n      isSelected !== undefined ||\n      onChange !== undefined)\n  const action = useButtonAction({\n    defaultSelected,\n    href,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    slot: slot ?? 'default',\n    type,\n  })\n  const {\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    onLongPress: longPress,\n    onPressIn: pressIn,\n    onPressOut: pressOut,\n    ...triggerProps\n  } = useSlotTrigger({\n    accessibilityHint,\n    delayLongPress,\n    href,\n    onHoverIn,\n    onHoverOut,\n    onLongPress,\n    onPressIn,\n    onPressOut,\n    ref,\n    slot,\n  })\n  // A text button in a selecting group takes part in its selection but\n  // draws none of it, since the page gives text no selected colours.\n  const toggles = variant !== 'text' && (isToggle || membership !== undefined)\n  const selected = toggles && (membership?.selected ?? action.selected)\n  const colors =\n    palettesOf(theme)[\n      isDisabled\n        ? DISABLED[variant]\n        : variant !== 'text' && toggles\n          ? TOGGLE_PALETTES[variant][selected ? 'selected' : 'unselected']\n          : variant\n    ]\n\n  // The width a standard group widens the button from, recorded as it is\n  // laid out, before the press feedback that tells the group of a press.\n  const width = useSharedValue(0)\n  const feedback = usePressFeedback({\n    color: colors.content,\n    disabled: isDisabled,\n    disableRipple,\n    onBlur,\n    onFocus,\n    onHoverIn: hoverIn,\n    onHoverOut: hoverOut,\n    ...groupPressHandlers(group, width, pressIn, pressOut),\n    held: group?.held,\n    pending,\n  })\n\n  const { radii } = theme\n  const resting =\n    (shape === 'square') !== selected ? radii[SQUARE_CORNERS[size]] : radii.pill\n  const shaped = useCorner(\n    groupCornersOf(group, feedback, membership?.selected ?? action.selected) ??\n      (feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting),\n    groupWidthThen(group, width, onLayout),\n  )\n  const border = variant === 'outlined' ? OUTLINE_WIDTHS[size] : 0\n  const shift = useGroupShift(\n    group,\n    inlinePaddings(theme)[size] - border,\n    'padding',\n  )\n\n  return (\n    <AnimatedPressable\n      id={id}\n      role={href === undefined ? 'button' : 'link'}\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...membership?.accessibility}\n      {...(pending ? BUSY : undefined)}\n      {...props}\n      {...triggerProps}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onLongPress={pending ? undefined : longPress}\n      onPress={\n        pending\n          ? undefined\n          : membership === undefined\n            ? action.onPress\n            : pressThen(action.onPress, membership.toggle)\n      }\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.base,\n        sizesOf(theme)[size],\n        variant === 'outlined' ? outlinedSizesOf(theme)[size] : undefined,\n        group?.style,\n        colors.container,\n        shadowOf(variant, feedback, isDisabled, theme),\n        shaped.corner,\n        shift,\n        group?.keepsTarget === true ? groupStyles.target : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      <Animated.View\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          buttonStyles.clip,\n          shaped.corner,\n        )}\n      >\n        {feedback.layer}\n      </Animated.View>\n      {icon === undefined ? null : (\n        <PendingContent isPending={pending}>\n          <IconStyleContext value={iconStyleOf(colors.content, size)}>\n            {icon}\n          </IconStyleContext>\n        </PendingContent>\n      )}\n      {children === undefined ? null : (\n        <NativeText\n          {...(pending ? CONCEALED : undefined)}\n          style={composeStyles<TextStyle>(\n            role,\n            styles.label,\n            colors.label,\n            pending ? pendingStyles.hidden : undefined,\n          )}\n        >\n          {children}\n        </NativeText>\n      )}\n      {pending ? (\n        <PendingRing\n          color={colors.content}\n          diameter={theme.typography[`${ROLES[size]}Size`] * fontScale}\n          label={ringLabel}\n        />\n      ) : null}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: ButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\n// The shadow a variant draws in its state: elevated rests at 1 and rises to 2\n// under a pointer, filled and tonal rest flat and rise to 1, and a press\n// brings each back to where it rests.\nfunction shadowOf(\n  variant: ButtonVariant,\n  {\n    hovered,\n    pressed,\n  }: { readonly hovered: boolean; readonly pressed: boolean },\n  isDisabled: boolean,\n  theme: ResolvedTheme,\n): undefined | ViewStyle {\n  const lifted = hovered && !pressed\n\n  if (isDisabled) {\n    return undefined\n  }\n\n  if (variant === 'elevated') {\n    return shadowsOf(theme)[lifted ? 'elevation2' : 'elevation1']\n  }\n\n  return (variant === 'filled' || variant === 'tonal') && lifted\n    ? shadowsOf(theme).elevation1\n    : undefined\n}\n\nexport { Button }\nexport type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant }\n"],"mappings":"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"}

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

@@ -0,0 +1,87 @@
+import { ControlSize } from "../../button/index.js";
+import { ButtonShape } 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/button-group/index.d.ts
+type ButtonGroupNaming = {
+  readonly 'aria-label': string;
+  readonly 'aria-labelledby'?: string;
+} | {
+  readonly 'aria-label'?: string;
+  readonly 'aria-labelledby': string;
+};
+type ButtonGroupProps = ButtonGroupNaming & Omit<ViewProps, 'aria-label' | 'aria-labelledby' | 'children' | 'role' | 'style'> & {
+  /**
+   * The buttons: Buttons and IconButtons, each with an `id` in a group
+   * that selects.
+   */
+  readonly children?: ReactNode;
+  /** The keys chosen at first, when the group keeps its own selection. */
+  readonly defaultSelectedKeys?: Iterable<Key>;
+  /**
+   * Whether a press on the last chosen button leaves it chosen rather
+   * than clearing the choice.
+   * @default false
+   */
+  readonly disallowEmptySelection?: boolean;
+  /**
+   * Disables every button in the group.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the chosen keys when the choice changes. */
+  readonly onSelectionChange?: (keys: Set<Key>) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** The chosen keys, when the call site holds the selection. */
+  readonly selectedKeys?: Iterable<Key>;
+  /**
+   * Makes the group select: `single` for one button at a time, `multiple`
+   * for any number. Left out, the group's buttons are plain buttons.
+   */
+  readonly selectionMode?: 'multiple' | 'single';
+  /**
+   * The shape a connected group gives its two ends: `round`, the pill, or
+   * `square`, the size's inner corner, which its inner corners take as
+   * well.
+   * @default 'round'
+   */
+  readonly shape?: ButtonShape;
+  /**
+   * The size every button in the group takes, unless it names its own,
+   * and the size the group spaces and shapes them for.
+   * @default 'md'
+   */
+  readonly size?: ControlSize;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * `standard` sets the buttons apart and widens a pressed one;
+   * `connected` sets them 2dp apart with square inner corners.
+   * @default 'standard'
+   */
+  readonly variant?: ButtonGroupVariant;
+};
+type ButtonGroupVariant = 'connected' | 'standard';
+/**
+ * A row of Buttons and IconButtons drawn as the button groups page's
+ * standard or connected group. Given `selectionMode`, its buttons are
+ * toggles whose selection the group keeps, by their `id`s.
+ *
+ * ```tsx
+ * <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+ *   <Button id="first">First item</Button>
+ *   <Button id="second">Second item</Button>
+ *   <Button id="third">Third item</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * Name the group with `aria-label` or `aria-labelledby`, one of which the
+ * props require. Choosing one is announced as a radio group, choosing
+ * several as a toolbar, and a group that selects nothing as a group.
+ *
+ * `style`, `ref` and `testID` land on the row.
+ */
+declare function ButtonGroup({ children, defaultSelectedKeys, disallowEmptySelection, isDisabled, onSelectionChange, selectedKeys, selectionMode, shape, size, style, variant, ...props }: ButtonGroupProps): import("react").JSX.Element;
+//#endregion
+export { ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,275 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { HEIGHTS } from "../../button/index.js";
+import { ButtonGroupItemContext } from "../../button/group.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { Children, Fragment, isValidElement, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useToggleGroupState } from "react-stately/useToggleGroupState";
+//#region src/components/button-group/index.tsx
+const EXPANDED_RATIO = .15;
+const XS_GAP = 18;
+const styles = StyleSheet.create({ group: {
+	alignItems: "center",
+	alignSelf: "flex-start",
+	flexDirection: "row"
+} });
+const gapsOf = themedStyles(({ spacing }) => StyleSheet.create({
+	connected: { gap: spacing.xxs },
+	lg: { gap: spacing.sm },
+	md: { gap: spacing.md },
+	xl: { gap: spacing.sm },
+	xs: { gap: XS_GAP },
+	xxl: { gap: spacing.sm }
+}));
+const cornersOf = themedStyles(({ radii, sizing }) => {
+	const round = (size) => sizing[HEIGHTS[size]] / 2;
+	return {
+		inner: {
+			lg: radii.sm,
+			md: radii.sm,
+			xl: radii.lg,
+			xs: radii.xs,
+			xxl: 20
+		},
+		pressed: {
+			lg: radii.xs,
+			md: radii.xs,
+			xl: radii.sm,
+			xs: 2,
+			xxl: 10
+		},
+		round: {
+			lg: round("lg"),
+			md: round("md"),
+			xl: round("xl"),
+			xs: round("xs"),
+			xxl: round("xxl")
+		}
+	};
+});
+/**
+* A row of Buttons and IconButtons drawn as the button groups page's
+* standard or connected group. Given `selectionMode`, its buttons are
+* toggles whose selection the group keeps, by their `id`s.
+*
+* ```tsx
+* <ButtonGroup aria-label="Label" selectionMode="single" variant="connected">
+*   <Button id="first">First item</Button>
+*   <Button id="second">Second item</Button>
+*   <Button id="third">Third item</Button>
+* </ButtonGroup>
+* ```
+*
+* Name the group with `aria-label` or `aria-labelledby`, one of which the
+* props require. Choosing one is announced as a radio group, choosing
+* several as a toolbar, and a group that selects nothing as a group.
+*
+* `style`, `ref` and `testID` land on the row.
+*/
+function ButtonGroup(t0) {
+	const $ = c(47);
+	let children;
+	let defaultSelectedKeys;
+	let onSelectionChange;
+	let props;
+	let selectedKeys;
+	let selectionMode;
+	let size;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({children, defaultSelectedKeys, disallowEmptySelection: t1, isDisabled: t2, onSelectionChange, selectedKeys, selectionMode, shape: t3, size, style, variant: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelectedKeys;
+		$[3] = onSelectionChange;
+		$[4] = props;
+		$[5] = selectedKeys;
+		$[6] = selectionMode;
+		$[7] = size;
+		$[8] = style;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else {
+		children = $[1];
+		defaultSelectedKeys = $[2];
+		onSelectionChange = $[3];
+		props = $[4];
+		selectedKeys = $[5];
+		selectionMode = $[6];
+		size = $[7];
+		style = $[8];
+		t1 = $[9];
+		t2 = $[10];
+		t3 = $[11];
+		t4 = $[12];
+	}
+	const disallowEmptySelection = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const shape = t3 === void 0 ? "round" : t3;
+	const variant = t4 === void 0 ? "standard" : t4;
+	const theme = useTheme();
+	const [press, setPress] = useState(null);
+	const t5 = selectionMode ?? "single";
+	let t6;
+	if ($[13] !== defaultSelectedKeys || $[14] !== disallowEmptySelection || $[15] !== isDisabled || $[16] !== onSelectionChange || $[17] !== selectedKeys || $[18] !== t5) {
+		t6 = {
+			defaultSelectedKeys,
+			disallowEmptySelection,
+			isDisabled,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode: t5
+		};
+		$[13] = defaultSelectedKeys;
+		$[14] = disallowEmptySelection;
+		$[15] = isDisabled;
+		$[16] = onSelectionChange;
+		$[17] = selectedKeys;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	const state = useToggleGroupState(t6);
+	let T0;
+	let t10;
+	let t7;
+	let t8;
+	let t9;
+	if ($[20] !== children || $[21] !== isDisabled || $[22] !== press || $[23] !== props || $[24] !== selectionMode || $[25] !== shape || $[26] !== size || $[27] !== state || $[28] !== style || $[29] !== theme || $[30] !== variant) {
+		const items = buttonsOf(children);
+		const sized = size ?? "md";
+		const selection = selectionMode === void 0 ? void 0 : {
+			single: selectionMode === "single",
+			state
+		};
+		T0 = View;
+		t7 = selectionMode === void 0 ? "group" : selection?.single === true ? "radiogroup" : "toolbar";
+		t8 = props;
+		if ($[36] !== sized || $[37] !== style || $[38] !== theme || $[39] !== variant) {
+			t9 = composeStyles(styles.group, gapsOf(theme)[variant === "connected" ? "connected" : sized], style);
+			$[36] = sized;
+			$[37] = style;
+			$[38] = theme;
+			$[39] = variant;
+			$[40] = t9;
+		} else t9 = $[40];
+		t10 = items.map((t11, index) => {
+			const { element, key } = t11;
+			return /* @__PURE__ */ jsx(ButtonGroupItemContext, {
+				value: itemFor({
+					corners: cornersOf(theme),
+					count: items.length,
+					index,
+					isDisabled,
+					press,
+					selection,
+					setPress,
+					shape,
+					size,
+					variant
+				}),
+				children: element
+			}, key);
+		});
+		$[20] = children;
+		$[21] = isDisabled;
+		$[22] = press;
+		$[23] = props;
+		$[24] = selectionMode;
+		$[25] = shape;
+		$[26] = size;
+		$[27] = state;
+		$[28] = style;
+		$[29] = theme;
+		$[30] = variant;
+		$[31] = T0;
+		$[32] = t10;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t9;
+	} else {
+		T0 = $[31];
+		t10 = $[32];
+		t7 = $[33];
+		t8 = $[34];
+		t9 = $[35];
+	}
+	let t11;
+	if ($[41] !== T0 || $[42] !== t10 || $[43] !== t7 || $[44] !== t8 || $[45] !== t9) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			role: t7,
+			...t8,
+			style: t9,
+			children: t10
+		});
+		$[41] = T0;
+		$[42] = t10;
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t9;
+		$[46] = t11;
+	} else t11 = $[46];
+	return t11;
+}
+function buttonsOf(children, prefix = "") {
+	return Children.toArray(children).flatMap((child) => {
+		if (!isValidElement(child)) return [];
+		const key = `${prefix}${String(child.key)}`;
+		return child.type === Fragment ? buttonsOf(child.props.children, `${key}/`) : [{
+			element: child,
+			key
+		}];
+	});
+}
+function connectedCorners(corners, index, count, size, shape, { pressed, selected }) {
+	const outer = shape === "square" ? corners.inner[size] : corners.round[size];
+	const inner = pressed ? corners.pressed[size] : selected ? corners.round[size] : corners.inner[size];
+	return {
+		end: index === count - 1 ? outer : inner,
+		start: index === 0 ? outer : inner
+	};
+}
+function itemFor({ corners, count, index, isDisabled, press, selection, setPress, shape, size, variant }) {
+	const sized = size ?? "md";
+	if (variant === "connected") return {
+		corners: (state) => connectedCorners(corners, index, count, sized, shape, state),
+		isDisabled,
+		keepsTarget: sized === "xs" || sized === "md",
+		selection,
+		shift: 0,
+		size
+	};
+	return {
+		isDisabled,
+		keepsTarget: false,
+		onPressEnd: () => {
+			setPress(null);
+		},
+		onPressStart: (width) => {
+			setPress({
+				delta: width * EXPANDED_RATIO,
+				index
+			});
+		},
+		selection,
+		shift: shiftFor(index, count, press),
+		size
+	};
+}
+function shiftFor(index, count, press) {
+	if (press === null) return 0;
+	if (index === press.index) return press.delta;
+	if (Math.abs(index - press.index) !== 1) return 0;
+	return -(press.index === 0 || press.index === count - 1 ? press.delta : press.delta / 2);
+}
+//#endregion
+export { ButtonGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactElement","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","Key","Children","Fragment","isValidElement","useState","StyleSheet","View","useToggleGroupState","ControlSize","ButtonGroupItem","GroupButtonState","GroupCorners","ResolvedTheme","ButtonShape","HEIGHTS","ButtonGroupItemContext","useTheme","composeStyles","themedStyles","EXPANDED_RATIO","XS_GAP","ButtonGroupNaming","ButtonGroupProps","Omit","children","defaultSelectedKeys","Iterable","disallowEmptySelection","isDisabled","onSelectionChange","keys","Set","ref","selectedKeys","selectionMode","shape","size","style","variant","ButtonGroupVariant","Press","delta","index","styles","create","group","alignItems","alignSelf","flexDirection","gapsOf","spacing","connected","gap","xxs","lg","sm","md","xl","xs","xxl","cornersOf","radii","sizing","round","inner","pressed","Record","Readonly","ButtonGroup","t0","$","_c","props","t1","t2","t3","t4","undefined","theme","press","setPress","t5","t6","state","T0","t10","t7","t8","t9","items","buttonsOf","sized","selection","single","map","t11","element","key","itemFor","corners","count","length","prefix","toArray","flatMap","child","String","type","connectedCorners","ReturnType","selected","outer","end","start","keepsTarget","shift","onPressEnd","onPressStart","width","shiftFor","Math","abs","atEnd","_c"],"sources":["../../../src/components/button-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { Key } from 'react-stately'\n\nimport { Children, Fragment, isValidElement, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { useToggleGroupState } from 'react-stately/useToggleGroupState'\n\nimport type { ControlSize } from '../../button'\nimport type {\n  ButtonGroupItem,\n  GroupButtonState,\n  GroupCorners,\n} from '../../button/group'\nimport type { ResolvedTheme } from '../../theme/scope'\nimport type { ButtonShape } from '../button'\n\nimport { HEIGHTS } from '../../button'\nimport { ButtonGroupItemContext } from '../../button/group'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The button groups page's two groups, around Buttons and IconButtons placed\n// inside, as kanso-ui's ButtonGroup draws them: the standard group, buttons\n// set apart by the page's 18dp, 12dp, 8dp, 8dp and 8dp across the sizes, and\n// the connected group, buttons 2dp apart whose inner corners square off,\n// 4dp, 8dp, 8dp, 16dp and 20dp, while the group's two ends keep the buttons'\n// own round. A square connected group takes the same corner at its ends. The\n// group draws nothing itself; it hands each button its size, its corners and\n// its part in the press interaction through src/button's group.ts.\n//\n// **A press is felt across a standard group.** The pressed button widens by\n// 15% of its width, the share Material Design's own group widens it by, and\n// its neighbours narrow to make the room, so the group's width holds: both\n// neighbours by half the gain each, or the one neighbour of a button at the\n// group's end by all of it. Button takes the change as inline padding and\n// IconButton as width, and both ease it over the motion tokens' short\n// duration on the emphasised curve, or at once under reduced motion.\n//\n// **A connected group answers a press and a selection in the corner\n// instead.** Its buttons stay where they are; a pressed one's inner corners\n// tighten, and a selected one's round off entirely. The page gives the\n// pressed corner for its small group alone, 4dp against the 8dp it rests at;\n// the other sizes press to half their resting corner the same way. The\n// page also gives XS and S buttons in a connected group a 48dp minimum\n// width, which is their touch target. The corners ease as a button's own\n// do, and follow the layout's direction, so a right-to-left group keeps its\n// round end at its start, on the right.\n//\n// Given `selectionMode` the group keeps a selection of its buttons by their\n// `id`s, as web's React Aria `ToggleButtonGroup` does, and every button in\n// it is a toggle of the group's: a radio group for `single`, and a toolbar\n// of buttons that each say whether they are selected for `multiple`.\n// Without it the group is a plain group of buttons.\n\n// The press interaction's share, from Material Design's own button group.\nconst EXPANDED_RATIO = 0.15\n\n// The 18dp a standard group sets its smallest buttons apart by falls between\n// two steps of the spacing scale and is written out, as on web.\nconst XS_GAP = 18\n\ntype ButtonGroupNaming =\n  | { readonly 'aria-label': string; readonly 'aria-labelledby'?: string }\n  | { readonly 'aria-label'?: string; readonly 'aria-labelledby': string }\n\ntype ButtonGroupProps = ButtonGroupNaming &\n  Omit<\n    ViewProps,\n    'aria-label' | 'aria-labelledby' | 'children' | 'role' | 'style'\n  > & {\n    /**\n     * The buttons: Buttons and IconButtons, each with an `id` in a group\n     * that selects.\n     */\n    readonly children?: ReactNode\n    /** The keys chosen at first, when the group keeps its own selection. */\n    readonly defaultSelectedKeys?: Iterable<Key>\n    /**\n     * Whether a press on the last chosen button leaves it chosen rather\n     * than clearing the choice.\n     * @default false\n     */\n    readonly disallowEmptySelection?: boolean\n    /**\n     * Disables every button in the group.\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<ComponentRef<typeof View>>\n    /** The chosen keys, when the call site holds the selection. */\n    readonly selectedKeys?: Iterable<Key>\n    /**\n     * Makes the group select: `single` for one button at a time, `multiple`\n     * for any number. Left out, the group's buttons are plain buttons.\n     */\n    readonly selectionMode?: 'multiple' | 'single'\n    /**\n     * The shape a connected group gives its two ends: `round`, the pill, or\n     * `square`, the size's inner corner, which its inner corners take as\n     * well.\n     * @default 'round'\n     */\n    readonly shape?: ButtonShape\n    /**\n     * The size every button in the group takes, unless it names its own,\n     * and the size the group spaces and shapes them for.\n     * @default 'md'\n     */\n    readonly size?: ControlSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * `standard` sets the buttons apart and widens a pressed one;\n     * `connected` sets them 2dp apart with square inner corners.\n     * @default 'standard'\n     */\n    readonly variant?: ButtonGroupVariant\n  }\n\ntype ButtonGroupVariant = 'connected' | 'standard'\n\ntype Press = { readonly delta: number; readonly index: number }\n\nconst styles = StyleSheet.create({\n  // A row as wide as its buttons, as web's inline-flex group is.\n  group: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    flexDirection: 'row',\n  },\n})\n\n// The space between buttons, by variant and size.\nconst gapsOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    connected: { gap: spacing.xxs },\n    lg: { gap: spacing.sm },\n    md: { gap: spacing.md },\n    xl: { gap: spacing.sm },\n    xs: { gap: XS_GAP },\n    xxl: { gap: spacing.sm },\n  }),\n)\n\n// A connected button's three corners at each size: the inner corner it\n// rests at, the one it presses to, and the round end, half the button's\n// height. Not the pill: a corner larger than half its side scales down every\n// corner beside it, so a pill end beside an 8dp inner corner would shrink\n// the inner one. The 20dp at `xxl` and the 2dp and 10dp halves fall between\n// steps of the radius scale and are written out, as on web.\nconst cornersOf = themedStyles(({ radii, sizing }: ResolvedTheme) => {\n  const round = (size: ControlSize) => sizing[HEIGHTS[size]] / 2\n\n  return {\n    inner: { lg: radii.sm, md: radii.sm, xl: radii.lg, xs: radii.xs, xxl: 20 },\n    pressed: { lg: radii.xs, md: radii.xs, xl: radii.sm, xs: 2, xxl: 10 },\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/**\n * A row of Buttons and IconButtons drawn as the button groups page's\n * standard or connected group. Given `selectionMode`, its buttons are\n * toggles whose selection the group keeps, by their `id`s.\n *\n * ```tsx\n * <ButtonGroup aria-label=\"Label\" selectionMode=\"single\" variant=\"connected\">\n *   <Button id=\"first\">First item</Button>\n *   <Button id=\"second\">Second item</Button>\n *   <Button id=\"third\">Third item</Button>\n * </ButtonGroup>\n * ```\n *\n * Name the group with `aria-label` or `aria-labelledby`, one of which the\n * props require. Choosing one is announced as a radio group, choosing\n * several as a toolbar, and a group that selects nothing as a group.\n *\n * `style`, `ref` and `testID` land on the row.\n */\nfunction ButtonGroup({\n  children,\n  defaultSelectedKeys,\n  disallowEmptySelection = false,\n  isDisabled = false,\n  onSelectionChange,\n  selectedKeys,\n  selectionMode,\n  shape = 'round',\n  size,\n  style,\n  variant = 'standard',\n  ...props\n}: ButtonGroupProps) {\n  const theme = useTheme()\n  const [press, setPress] = useState<null | Press>(null)\n  // The state is kept whether or not the group selects, since a hook cannot\n  // be called conditionally; a group that selects nothing never reads it.\n  const state = useToggleGroupState({\n    defaultSelectedKeys,\n    disallowEmptySelection,\n    isDisabled,\n    onSelectionChange,\n    selectedKeys,\n    selectionMode: selectionMode ?? 'single',\n  })\n  const items = buttonsOf(children)\n  const sized = size ?? 'md'\n  const selection =\n    selectionMode === undefined\n      ? undefined\n      : { single: selectionMode === 'single', state }\n\n  return (\n    <View\n      role={\n        selectionMode === undefined\n          ? 'group'\n          : selection?.single === true\n            ? 'radiogroup'\n            : 'toolbar'\n      }\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles.group,\n        gapsOf(theme)[variant === 'connected' ? 'connected' : sized],\n        style,\n      )}\n    >\n      {items.map(({ element, key }, index) => (\n        <ButtonGroupItemContext\n          key={key}\n          value={itemFor({\n            corners: cornersOf(theme),\n            count: items.length,\n            index,\n            isDisabled,\n            press,\n            selection,\n            setPress,\n            shape,\n            size,\n            variant,\n          })}\n        >\n          {element}\n        </ButtonGroupItemContext>\n      ))}\n    </View>\n  )\n}\n\n// The buttons among a group's children, with any fragment between them\n// opened, so a group can take its buttons as one fragment and still know\n// which is first and which last. Each keeps a key made of its own and its\n// fragments', so two fragments' children never share one.\nfunction buttonsOf(\n  children: ReactNode,\n  prefix = '',\n): { readonly element: ReactElement; readonly key: string }[] {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ readonly children?: ReactNode }>(child)) {\n      return []\n    }\n    const key = `${prefix}${String(child.key)}`\n    return child.type === Fragment\n      ? buttonsOf(child.props.children, `${key}/`)\n      : [{ element: child, key }]\n  })\n}\n\n// A connected button's corners: the group's ends keep the outer shape, and\n// every edge it shares with a neighbour takes the inner corner, tighter\n// while pressed and round once selected; a press wins over a selection.\nfunction connectedCorners(\n  corners: ReturnType<typeof cornersOf>,\n  index: number,\n  count: number,\n  size: ControlSize,\n  shape: ButtonShape,\n  { pressed, selected }: GroupButtonState,\n): GroupCorners {\n  const outer = shape === 'square' ? corners.inner[size] : corners.round[size]\n  const inner = pressed\n    ? corners.pressed[size]\n    : selected\n      ? corners.round[size]\n      : corners.inner[size]\n\n  return {\n    end: index === count - 1 ? outer : inner,\n    start: index === 0 ? outer : inner,\n  }\n}\n\n// One button's part in the group: its size, whether it is disabled, the\n// group's selection, its corners in a connected group, and its share of a\n// press in a standard one.\nfunction itemFor({\n  corners,\n  count,\n  index,\n  isDisabled,\n  press,\n  selection,\n  setPress,\n  shape,\n  size,\n  variant,\n}: {\n  readonly corners: ReturnType<typeof cornersOf>\n  readonly count: number\n  readonly index: number\n  readonly isDisabled: boolean\n  readonly press: null | Press\n  readonly selection: ButtonGroupItem['selection']\n  readonly setPress: (press: null | Press) => void\n  readonly shape: ButtonShape\n  readonly size: ControlSize | undefined\n  readonly variant: ButtonGroupVariant\n}): ButtonGroupItem {\n  const sized = size ?? 'md'\n\n  if (variant === 'connected') {\n    return {\n      corners: (state) =>\n        connectedCorners(corners, index, count, sized, shape, state),\n      isDisabled,\n      keepsTarget: sized === 'xs' || sized === 'md',\n      selection,\n      shift: 0,\n      size,\n    }\n  }\n\n  return {\n    isDisabled,\n    keepsTarget: false,\n    onPressEnd: () => {\n      setPress(null)\n    },\n    onPressStart: (width) => {\n      setPress({ delta: width * EXPANDED_RATIO, index })\n    },\n    selection,\n    shift: shiftFor(index, count, press),\n    size,\n  }\n}\n\n// How far a standard group moves one button's width while a press is held:\n// the pressed button gains the whole share, and its neighbours give it up,\n// half each, or all of it from the one neighbour of a button at an end.\nfunction shiftFor(index: number, count: number, press: null | Press) {\n  if (press === null) {\n    return 0\n  }\n  if (index === press.index) {\n    return press.delta\n  }\n  if (Math.abs(index - press.index) !== 1) {\n    return 0\n  }\n\n  const atEnd = press.index === 0 || press.index === count - 1\n\n  return -(atEnd ? press.delta : press.delta / 2)\n}\n\nexport { ButtonGroup }\nexport type { ButtonGroupProps, ButtonGroupVariant }\n"],"mappings":"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"}

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

@@ -1,11 +1,12 @@
 import { StyleProp, View, ViewStyle } from "react-native";
 import { ComponentRef, Ref } from "react";
+import { DateDuration } from "@internationalized/date";
 import { CalendarProps, DateValue } from "react-stately/useCalendarState";
 //#region src/components/calendar/index.d.ts
 type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, 'defaultFocusedValue' | 'defaultValue' | 'firstDayOfWeek' | 'focusedValue' | 'isDateUnavailable' | 'isDisabled' | 'isReadOnly' | 'maxValue' | 'minValue' | 'onChange' | 'onFocusChange' | 'value'> & {
   /**
-   * The calendar's name. The month shown is added to it, as React Aria adds
-   * it on web.
+   * The calendar's name. The month shown, or the months, is added to it, as
+   * React Aria adds it on web.
    */
   readonly 'aria-label'?: string;
   /**
@@ -27,6 +28,13 @@ type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, '
   readonly showMonthYearMenus?: boolean;
   readonly style?: StyleProp<ViewStyle>;
   readonly testID?: string;
+  /**
+   * How many months the calendar shows at once, and moves by: side by side
+   * from the expanded window size up, one under another below it. Only
+   * `months` is read.
+   * @default { months: 1 }
+   */
+  readonly visibleDuration?: DateDuration;
 };
 /**
  * A month calendar for picking a date. The value is an
@@ -45,7 +53,7 @@ type CalendarProps$1<T extends DateValue = DateValue> = Pick<CalendarProps<T>, '
  *
  * `style`, `ref` and `testID` land on the container.
  */
-declare function Calendar<T extends DateValue = DateValue>({ 'aria-label': ariaLabel, locale, ref, showMonthYearMenus, style, testID, ...props }: CalendarProps$1<T>): import("react").JSX.Element;
+declare function Calendar<T extends DateValue = DateValue>({ 'aria-label': ariaLabel, locale, ref, showMonthYearMenus, style, testID, visibleDuration, ...props }: CalendarProps$1<T>): import("react").JSX.Element;
 //#endregion
 export { Calendar, type CalendarProps$1 as CalendarProps };
 //# sourceMappingURL=index.d.ts.map