@kanso-labs/react-native-kanso-ui 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["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","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","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","pendingLabel","props","t1","t2","t3","t4","t5","t6","type","isPending","undefined","role","fontScale","pending","ringLabel","isToggle","t7","action","colors","feedback","color","content","disabled","radii","resting","pill","shaped","pressed","T0","t8","t9","t10","t11","handlers","t12","t13","t14","t15","t16","container","shadowOf","corner","ring","t17","clip","t18","layer","t19","iconStyleOf","t20","hidden","t21","typography","t22","hovered","lifted","_c","NativeText"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { 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} 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<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  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  shape = 'round',\n  size = 'md',\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    type,\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,\n    onHoverOut,\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      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onLongPress={pending ? undefined : onLongPress}\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","Text","NativeText","StyleSheet","useWindowDimensions","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","ResolvedTheme","TypeRole","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","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","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","colors","feedback","color","content","disabled","radii","resting","pill","shaped","pressed","T0","t9","t10","t11","t12","handlers","t13","t14","t15","t16","t17","container","shadowOf","corner","ring","t18","clip","t19","layer","t20","iconStyleOf","t21","hidden","t22","typography","t23","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} 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  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  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 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,\n    onHoverOut,\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      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]])}\n      onLayout={shaped.onLayout}\n      onLongPress={pending ? undefined : onLongPress}\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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"}

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

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/card/index.d.ts
 type CardBaseProps = {
   readonly children?: ReactNode;
@@ -17,7 +17,7 @@ type CardBaseProps = {
    * @default 'default'
    */
   readonly padding?: 'default' | 'none';
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
   /**
    * How the card separates itself from the page: `elevated` casts a shadow,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","StyleSheet","View","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","CardBaseProps","children","isDisabled","padding","ref","style","variant","CardVariant","CardProps","InteractiveCardForm","StaticCardForm","Omit","href","interactive","onPress","paddings","spacing","create","default","lg","none","stylesOf","colors","radii","shadows","base","borderRadius","md","overflow","elevated","backgroundColor","surfaceContainerLow","filled","surfaceContainerHighest","lifted","boxShadow","elevation2","outlined","surface","borderColor","outlineVariant","borderWidth","resting","elevation1","disabledStylesOf","stateLayerOpacity","content","opacity","disabledContent","outline","disabledContainer","styles","flexGrow","Card","props","$","_c","t0","InteractiveCard","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t1","t2","t3","t4","t5","_interactive","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","undefined","theme","press","onSurface","color","disabled","feedback","T0","handlers","hovered","pressed","ring","own","layer","StaticCard","_isDisabled","_c"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, StyleSheet, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The cards spec page's three variants, as kanso-ui's Card draws them. They\n// differ only in how they separate themselves from the page: elevated casts\n// the level 1 shadow over the low container, filled sits on the highest\n// container, and outlined draws an outline-variant rule over the surface. The\n// corner is the page's 12dp, the medium shape, and content runs 16dp in from\n// it unless `padding` is `none`.\n//\n// An interactive card draws the state layers, the ripple and the focus ring\n// from src/press, in on-surface, the colour web mixes over its container.\n// They lie over the card's content rather than under it, so a child that\n// fills the card, an image or a row with a fill of its own, still shows the\n// press. Under a pointer the elevated card rises to level 2 and settles back\n// to 1 while pressed, as the page and web have it, and switches at once, since\n// web's runs no transition either; the other two stay flat. A phone has no\n// pointer, so there the press itself is what shows.\n//\n// Disabled is the page's: each container at 38%, the outlined card's rule\n// in the outline role at 12%, what the card holds faded to 38%, and the\n// elevated card flat. A card's content is the call site's, so no colour role\n// reaches all of it, and an opacity is the one fade that does.\n\ntype CardBaseProps = {\n  readonly children?: ReactNode\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, and takes no press. It is still announced, as disabled.\n   * Has no effect on a card that is not `interactive`, which cannot be\n   * pressed to begin with.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges, such as a list of rows separated by rules.\n   * @default 'default'\n   */\n  readonly padding?: 'default' | 'none'\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  readonly variant?: CardVariant\n}\n\ntype CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm)\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined'\n\n/**\n * A card that presses as a whole: a `Pressable` announced as a button, or as\n * a link given `href`.\n */\ntype InteractiveCardForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Where the card leads. A press opens it through the `RouterProvider`\n   * around the card, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`, and the card is announced as a\n   * link.\n   */\n  readonly href?: string\n  /**\n   * Makes the card the thing you press: it ripples, draws the state layers,\n   * lifts under a pointer and takes a focus ring. Leave it off for a card\n   * that merely holds content, including one holding buttons of its own.\n   */\n  readonly interactive: true\n}\n\n/** A card that holds content and takes no press: a `View` with no role. */\ntype StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly href?: never\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nconst paddings = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    default: { padding: spacing.lg },\n    none: { padding: 0 },\n  }),\n)\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }) =>\n  StyleSheet.create({\n    // The corner clips what the card holds, so a child running to the edges\n    // is rounded with it. The shadow and the focus ring are drawn outside the\n    // card and are not clipped.\n    base: {\n      borderRadius: radii.md,\n      overflow: 'hidden',\n    },\n    elevated: {\n      backgroundColor: colors.surfaceContainerLow,\n    },\n    filled: {\n      backgroundColor: colors.surfaceContainerHighest,\n    },\n    // Under a pointer, the elevated card's level 2.\n    lifted: {\n      boxShadow: shadows.elevation2,\n    },\n    outlined: {\n      backgroundColor: colors.surface,\n      borderColor: colors.outlineVariant,\n      borderWidth: 1,\n    },\n    // The elevated card's level 1, which no other variant casts.\n    resting: {\n      boxShadow: shadows.elevation1,\n    },\n  }),\n)\n\nconst disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) =>\n  StyleSheet.create({\n    content: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    elevated: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerLow,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    filled: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerHighest,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    outlined: {\n      borderColor: withOpacity(\n        colors.outline,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What an interactive card's children sit in, filling a card stretched\n  // taller than them, as a static card's children are laid out in the card\n  // itself. It is what fades while disabled, apart from the container.\n  content: {\n    flexGrow: 1,\n  },\n})\n\n/**\n * A surface holding related content.\n *\n * ```tsx\n * <Card interactive onPress={open}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * A card is a `View` with no role, unless it is `interactive`: then it is a\n * `Pressable` announced as a button, or as a link given `href`, which presses\n * as a whole. Web's `render` has no counterpart, since native has no element\n * to choose, and `href` is how a card leads somewhere instead. The press\n * props belong to an interactive card alone, so a static card given\n * `onPress` is a compile error rather than a press that never fires.\n *\n * A card fills the column it sits in, as any view in a React Native column\n * does. `style`, `ref` and `testID` land on the card's own view.\n */\nfunction Card(props: CardProps) {\n  return props.interactive === true ? (\n    <InteractiveCard {...props} />\n  ) : (\n    <StaticCard {...props} />\n  )\n}\n\nfunction InteractiveCard({\n  children,\n  href,\n  interactive: _interactive,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPress,\n  onPressIn,\n  onPressOut,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & InteractiveCardForm) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurface,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const own = stylesOf(theme)\n  const disabled = disabledStylesOf(theme)\n  const lifted = feedback.hovered && !feedback.pressed\n\n  return (\n    <Pressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onPress={press}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        paddings(theme)[padding],\n        variant === 'elevated' && !isDisabled\n          ? own[lifted ? 'lifted' : 'resting']\n          : undefined,\n        isDisabled && disabled[variant],\n        feedback.ring,\n        style,\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.content,\n          isDisabled && disabled.content,\n        )}\n      >\n        {children}\n      </View>\n      {feedback.layer}\n    </Pressable>\n  )\n}\n\nfunction StaticCard({\n  interactive: _interactive,\n  isDisabled: _isDisabled,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & StaticCardForm) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        variant === 'elevated' ? own.resting : undefined,\n        paddings(theme)[padding],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { CardProps, CardVariant }\n\nexport { Card }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","ViewProps","ViewStyle","Pressable","StyleSheet","View","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","themedStyles","CardBaseProps","children","isDisabled","padding","ref","style","variant","CardVariant","CardProps","InteractiveCardForm","StaticCardForm","Omit","href","interactive","onPress","paddings","spacing","create","default","lg","none","stylesOf","colors","radii","shadows","base","borderRadius","md","overflow","elevated","backgroundColor","surfaceContainerLow","filled","surfaceContainerHighest","lifted","boxShadow","elevation2","outlined","surface","borderColor","outlineVariant","borderWidth","resting","elevation1","disabledStylesOf","stateLayerOpacity","content","opacity","disabledContent","outline","disabledContainer","styles","flexGrow","Card","props","$","_c","t0","InteractiveCard","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","t1","t2","t3","t4","t5","_interactive","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","undefined","theme","press","onSurface","color","disabled","feedback","T0","handlers","hovered","pressed","ring","own","layer","StaticCard","_isDisabled","_c"],"sources":["../../../src/components/card/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  PressableProps,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Pressable, StyleSheet, View } from 'react-native'\n\nimport { usePressFeedback } from '../../press'\nimport { useLinkPress } from '../../router'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The cards spec page's three variants, as kanso-ui's Card draws them. They\n// differ only in how they separate themselves from the page: elevated casts\n// the level 1 shadow over the low container, filled sits on the highest\n// container, and outlined draws an outline-variant rule over the surface. The\n// corner is the page's 12dp, the medium shape, and content runs 16dp in from\n// it unless `padding` is `none`.\n//\n// An interactive card draws the state layers, the ripple and the focus ring\n// from src/press, in on-surface, the colour web mixes over its container.\n// They lie over the card's content rather than under it, so a child that\n// fills the card, an image or a row with a fill of its own, still shows the\n// press. Under a pointer the elevated card rises to level 2 and settles back\n// to 1 while pressed, as the page and web have it, and switches at once, since\n// web's runs no transition either; the other two stay flat. A phone has no\n// pointer, so there the press itself is what shows.\n//\n// Disabled is the page's: each container at 38%, the outlined card's rule\n// in the outline role at 12%, what the card holds faded to 38%, and the\n// elevated card flat. A card's content is the call site's, so no colour role\n// reaches all of it, and an opacity is the one fade that does.\n\ntype CardBaseProps = {\n  readonly children?: ReactNode\n  /**\n   * Turns an interactive card off: it fades as the cards page draws a\n   * disabled card, and takes no press. It is still announced, as disabled.\n   * Has no effect on a card that is not `interactive`, which cannot be\n   * pressed to begin with.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * `none` removes the card's own padding, for a card whose children run to\n   * its edges, such as a list of rows separated by rules.\n   * @default 'default'\n   */\n  readonly padding?: 'default' | 'none'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * How the card separates itself from the page: `elevated` casts a shadow,\n   * `filled` sits on a darker surface, `outlined` draws a border.\n   * @default 'elevated'\n   */\n  readonly variant?: CardVariant\n}\n\ntype CardProps = CardBaseProps & (InteractiveCardForm | StaticCardForm)\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined'\n\n/**\n * A card that presses as a whole: a `Pressable` announced as a button, or as\n * a link given `href`.\n */\ntype InteractiveCardForm = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * Where the card leads. A press opens it through the `RouterProvider`\n   * around the card, or through the platform for a URL with a scheme of its\n   * own, after the call site's own `onPress`, and the card is announced as a\n   * link.\n   */\n  readonly href?: string\n  /**\n   * Makes the card the thing you press: it ripples, draws the state layers,\n   * lifts under a pointer and takes a focus ring. Leave it off for a card\n   * that merely holds content, including one holding buttons of its own.\n   */\n  readonly interactive: true\n}\n\n/** A card that holds content and takes no press: a `View` with no role. */\ntype StaticCardForm = Omit<ViewProps, 'children' | 'style'> & {\n  readonly href?: never\n  readonly interactive?: false\n  readonly onPress?: never\n}\n\nconst paddings = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    default: { padding: spacing.lg },\n    none: { padding: 0 },\n  }),\n)\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }) =>\n  StyleSheet.create({\n    // The corner clips what the card holds, so a child running to the edges\n    // is rounded with it. The shadow and the focus ring are drawn outside the\n    // card and are not clipped.\n    base: {\n      borderRadius: radii.md,\n      overflow: 'hidden',\n    },\n    elevated: {\n      backgroundColor: colors.surfaceContainerLow,\n    },\n    filled: {\n      backgroundColor: colors.surfaceContainerHighest,\n    },\n    // Under a pointer, the elevated card's level 2.\n    lifted: {\n      boxShadow: shadows.elevation2,\n    },\n    outlined: {\n      backgroundColor: colors.surface,\n      borderColor: colors.outlineVariant,\n      borderWidth: 1,\n    },\n    // The elevated card's level 1, which no other variant casts.\n    resting: {\n      boxShadow: shadows.elevation1,\n    },\n  }),\n)\n\nconst disabledStylesOf = themedStyles(({ colors, stateLayerOpacity }) =>\n  StyleSheet.create({\n    content: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    elevated: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerLow,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    filled: {\n      backgroundColor: withOpacity(\n        colors.surfaceContainerHighest,\n        stateLayerOpacity.disabledContent,\n      ),\n    },\n    outlined: {\n      borderColor: withOpacity(\n        colors.outline,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What an interactive card's children sit in, filling a card stretched\n  // taller than them, as a static card's children are laid out in the card\n  // itself. It is what fades while disabled, apart from the container.\n  content: {\n    flexGrow: 1,\n  },\n})\n\n/**\n * A surface holding related content.\n *\n * ```tsx\n * <Card interactive onPress={open}>\n *   <Text variant=\"titleMedium\">Headline</Text>\n * </Card>\n * ```\n *\n * A card is a `View` with no role, unless it is `interactive`: then it is a\n * `Pressable` announced as a button, or as a link given `href`, which presses\n * as a whole. Web's `render` has no counterpart, since native has no element\n * to choose, and `href` is how a card leads somewhere instead. The press\n * props belong to an interactive card alone, so a static card given\n * `onPress` is a compile error rather than a press that never fires.\n *\n * A card fills the column it sits in, as any view in a React Native column\n * does. `style`, `ref` and `testID` land on the card's own view.\n */\nfunction Card(props: CardProps) {\n  return props.interactive === true ? (\n    <InteractiveCard {...props} />\n  ) : (\n    <StaticCard {...props} />\n  )\n}\n\nfunction InteractiveCard({\n  children,\n  href,\n  interactive: _interactive,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPress,\n  onPressIn,\n  onPressOut,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & InteractiveCardForm) {\n  const theme = useTheme()\n  const press = useLinkPress(href, onPress)\n  const feedback = usePressFeedback({\n    color: theme.colors.onSurface,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  const own = stylesOf(theme)\n  const disabled = disabledStylesOf(theme)\n  const lifted = feedback.hovered && !feedback.pressed\n\n  return (\n    <Pressable\n      role={href === undefined ? 'button' : 'link'}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      onPress={press}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        paddings(theme)[padding],\n        variant === 'elevated' && !isDisabled\n          ? own[lifted ? 'lifted' : 'resting']\n          : undefined,\n        isDisabled && disabled[variant],\n        feedback.ring,\n        style,\n      )}\n    >\n      <View\n        style={composeStyles<ViewStyle>(\n          styles.content,\n          isDisabled && disabled.content,\n        )}\n      >\n        {children}\n      </View>\n      {feedback.layer}\n    </Pressable>\n  )\n}\n\nfunction StaticCard({\n  interactive: _interactive,\n  isDisabled: _isDisabled,\n  padding = 'default',\n  style,\n  variant = 'elevated',\n  ...props\n}: CardBaseProps & StaticCardForm) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        own.base,\n        own[variant],\n        variant === 'elevated' ? own.resting : undefined,\n        paddings(theme)[padding],\n        style,\n      )}\n    />\n  )\n}\n\nexport type { CardProps, CardVariant }\n\nexport { Card }\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/checkbox/index.d.ts
 type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   /**
@@ -47,7 +47,7 @@ type CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {
   readonly isSelected?: boolean;
   /** Called with the new state whenever a press changes it. */
   readonly onChange?: (isSelected: boolean) => void;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","ToggleState","useId","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","IndeterminateGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","Tone","BOX_SIZE","BOX_CORNER","BOX_RULE","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","styles","create","box","borderRadius","borderWidth","height","width","glyph","left","position","top","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","paintOf","paint","useBoxColors","Glyph","t11","t12","t13","handlers","t14","Symbol","for","t15","toggleOf","t16","t17","row","t18","t19","layer","t20","t21","t22","t23","t24","t25","t26","t27","stateLayerOpacity","onSurface","disabledContent","fill","primary","surface","onError","onPrimary","rule","onSurfaceVariant","toggle","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Tone = 'error' | 'marked' | 'unmarked'\n\n// The box's side, its rule and its corner, from the page. The glyph is the\n// box's size and sits over the whole of it, rule included.\nconst BOX_SIZE = 18\nconst BOX_CORNER = 2\nconst BOX_RULE = 2\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    Tone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\nconst styles = StyleSheet.create({\n  box: {\n    borderRadius: BOX_CORNER,\n    borderWidth: BOX_RULE,\n    height: BOX_SIZE,\n    width: BOX_SIZE,\n  },\n  // Over the box rather than inside it, since a box's children are laid out\n  // inside its rule and the glyph covers the rule as well.\n  glyph: {\n    left: (LAYER_SIZE - BOX_SIZE) / 2,\n    position: 'absolute',\n    top: (LAYER_SIZE - BOX_SIZE) / 2,\n  },\n})\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: Tone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n  const paint = paintOf(theme, { active, isDisabled, marked, tone })\n  const box = useBoxColors(paint)\n  const Glyph = isIndeterminate\n    ? IndeterminateGlyph\n    : state.isSelected\n      ? CheckGlyph\n      : null\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.box, box)}\n          />\n          {Glyph === null ? null : (\n            <Glyph color={paint.glyph} size={BOX_SIZE} style={styles.glyph} />\n          )}\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n/**\n * What the box is painted in: its fill, its rule and the glyph's colour.\n * Where the page draws no fill or no rule it is the colour beside it made\n * clear rather than plain transparent black, so the box eases through its\n * own colour rather than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    marked,\n    tone,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly marked: boolean\n    readonly tone: Tone\n  },\n) {\n  const disabled = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (marked) {\n    const fill = isDisabled\n      ? disabled\n      : tone === 'error'\n        ? colors.error\n        : colors.primary\n    const glyph = isDisabled\n      ? colors.surface\n      : tone === 'error'\n        ? colors.onError\n        : colors.onPrimary\n\n    return { fill, glyph, rule: withOpacity(fill, 0) }\n  }\n\n  const rule = isDisabled\n    ? disabled\n    : tone === 'error'\n      ? colors.error\n      : active\n        ? colors.onSurface\n        : colors.onSurfaceVariant\n\n  return { fill: withOpacity(rule, 0), glyph: colors.onPrimary, rule }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\n// The box's fill and rule, eased to as the state changes.\nfunction useBoxColors({ fill, rule }: { fill: string; rule: string }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","ToggleState","useId","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","IndeterminateGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","Tone","BOX_SIZE","BOX_CORNER","BOX_RULE","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","styles","create","box","borderRadius","borderWidth","height","width","glyph","left","position","top","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","paintOf","paint","useBoxColors","Glyph","t11","t12","t13","handlers","t14","Symbol","for","t15","toggleOf","t16","t17","row","t18","t19","layer","t20","t21","t22","t23","t24","t25","t26","t27","stateLayerOpacity","onSurface","disabledContent","fill","primary","surface","onError","onPrimary","rule","onSurfaceVariant","toggle","motion","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","backgroundColor","borderColor","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Tone = 'error' | 'marked' | 'unmarked'\n\n// The box's side, its rule and its corner, from the page. The glyph is the\n// box's size and sits over the whole of it, rule included.\nconst BOX_SIZE = 18\nconst BOX_CORNER = 2\nconst BOX_RULE = 2\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    Tone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\nconst styles = StyleSheet.create({\n  box: {\n    borderRadius: BOX_CORNER,\n    borderWidth: BOX_RULE,\n    height: BOX_SIZE,\n    width: BOX_SIZE,\n  },\n  // Over the box rather than inside it, since a box's children are laid out\n  // inside its rule and the glyph covers the rule as well.\n  glyph: {\n    left: (LAYER_SIZE - BOX_SIZE) / 2,\n    position: 'absolute',\n    top: (LAYER_SIZE - BOX_SIZE) / 2,\n  },\n})\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: Tone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n  const paint = paintOf(theme, { active, isDisabled, marked, tone })\n  const box = useBoxColors(paint)\n  const Glyph = isIndeterminate\n    ? IndeterminateGlyph\n    : state.isSelected\n      ? CheckGlyph\n      : null\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <Animated.View\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.box, box)}\n          />\n          {Glyph === null ? null : (\n            <Glyph color={paint.glyph} size={BOX_SIZE} style={styles.glyph} />\n          )}\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n/**\n * What the box is painted in: its fill, its rule and the glyph's colour.\n * Where the page draws no fill or no rule it is the colour beside it made\n * clear rather than plain transparent black, so the box eases through its\n * own colour rather than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    marked,\n    tone,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly marked: boolean\n    readonly tone: Tone\n  },\n) {\n  const disabled = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (marked) {\n    const fill = isDisabled\n      ? disabled\n      : tone === 'error'\n        ? colors.error\n        : colors.primary\n    const glyph = isDisabled\n      ? colors.surface\n      : tone === 'error'\n        ? colors.onError\n        : colors.onPrimary\n\n    return { fill, glyph, rule: withOpacity(fill, 0) }\n  }\n\n  const rule = isDisabled\n    ? disabled\n    : tone === 'error'\n      ? colors.error\n      : active\n        ? colors.onSurface\n        : colors.onSurfaceVariant\n\n  return { fill: withOpacity(rule, 0), glyph: colors.onPrimary, rule }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\n// The box's fill and rule, eased to as the state changes.\nfunction useBoxColors({ fill, rule }: { fill: string; rule: string }) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;;;;;AA2GA,MAAM8C,WAAW;AACjB,MAAMC,aAAa;AACnB,MAAMC,WAAW;AAIjB,MAAMC,SAQF;CACFZ,OAAO;EAAEe,OAAO;EAASC,SAAS;CAAQ;CAC1CC,QAAQ;EAAEF,OAAO;EAAWC,SAAS;CAAY;CACjDE,UAAU;EAAEH,OAAO;EAAaC,SAAS;CAAU;AACrD;AAEA,MAAMG,SAAS9C,WAAW+C,OAAO;CAC/BC,KAAK;EACHC,cAAcZ;EACda,aAAaZ;EACba,QAAQf;EACRgB,OAAOhB;CACT;CAGAiB,OAAO;EACLC,MAAAA;EACAC,UAAU;EACVC,KAAAA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;AAsBD,SAAAC,SAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAArC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAA8B;CAAA,IAAA5B;CAAA,IAAA6B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAkB,CAAA,CAAA,cAAAG,WAAArC,UAAAC,iBAAAC,aAAAC,OAAAC,YAAAmC,IAAAlC,iBAAAmC,IAAAlC,YAAAmC,IAAAlC,YAAAC,UAAAE,OAAA,GAAA4B,SAAAJ;EAaFC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAnC;EAAAmC,EAAA,KAAAlC;EAAAkC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAhC;EAAAgC,EAAA,KAAA5B;EAAA4B,EAAA,KAAA3B;EAAA2B,EAAA,KAAAG;EAAAH,EAAA,KAAAzB;EAAAyB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAA;EAAAJ,YAAAF,EAAA;EAAAnC,WAAAmC,EAAA;EAAAlC,kBAAAkC,EAAA;EAAAjC,cAAAiC,EAAA;EAAAhC,QAAAgC,EAAA;EAAA5B,aAAA4B,EAAA;EAAA3B,WAAA2B,EAAA;EAAAG,QAAAH,EAAA;EAAAzB,QAAAyB,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAPd,MAAA/B,aAAAmC,OAAAG,KAAAA,IAAA,QAAAH;CACA,MAAAlC,kBAAAmC,OAAAE,KAAAA,IAAA,QAAAF;CACA,MAAAlC,aAAAmC,OAAAC,KAAAA,IAAA,QAAAD;CAMA,MAAAE,QAAc/C,SAAS;CAAC,IAAAgD;CAAA,IAAAT,EAAA,QAAAlC,mBAAAkC,EAAA,QAAA7B,cAAA6B,EAAA,QAAA5B,cAAA4B,EAAA,QAAA3B,UAAA;EACKoC,KAAA;GAAA3C;GAAAK;GAAAC;GAAAC;EAK7B;EAAC2B,EAAA,MAAAlC;EAAAkC,EAAA,MAAA7B;EAAA6B,EAAA,MAAA5B;EAAA4B,EAAA,MAAA3B;EAAA2B,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CALD,MAAAU,QAAc9D,eAAe6D,EAK5B;CACD,MAAAE,YAAkBxE,MAAM;CAExB,MAAA,EAAAyE,QAAAC,UAA0BL;CAC1B,MAAAvB,SAAeyB,MAAKtC,cAALF;CACf,MAAA4C,cAAoB,CAAC7C,cAAD,CAAgBE;CACpC,MAAA4C,OACE/C,UAAUuC,KAAAA,IAAatB,SAAA,WAAA,aAAvB;CAGO,MAAA+B,KAAAJ,OAAOhC,OAAOmC,KAAK,CAAAhC;CAAO,IAAAkC;CAAA,IAAAjB,EAAA,QAAAa,MAAAK,QAAA;EACxBD,KAAA,EAAA3B,cAAgBuB,MAAKK,OAAQ;EAAClB,EAAA,MAAAa,MAAAK;EAAAlB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAC7B,MAAAmB,KAAA,CAACL;CAEG,MAAAM,KAAAR,OAAOhC,OAAOmC,KAAK,CAAA/B;CAAS,IAAAqC;CAAA,IAAArB,EAAA,QAAAgB,MAAAhB,EAAA,QAAAiB,MAAAjB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAoB,IAAA;EALVC,KAAA;GAAAC,OACzBN;GAA0BO,SACxBN;GAA8BO,UAC7BL;GAAYM,MAAAA;GACNC,cACFN;EAChB;EAACpB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;EAAAjB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CAND,MAAA2B,WAAiBpE,iBAAiB8D,EAMjC;CACD,MAAAO,SACED,SAAQE,WAAYF,SAAQ3C,WAAY2C,SAAQG,SAAUvB,KAAAA;CAAS,IAAAwB;CAAA,IAAA/B,EAAA,QAAA4B,UAAA5B,EAAA,QAAA/B,cAAA+B,EAAA,QAAAf,UAAAe,EAAA,QAAAQ,SAAAR,EAAA,QAAAe,MAAA;EACvDgB,MAAAC,QAAQxB,OAAO;GAAAoB;GAAA3D;GAAAgB;GAAA8B;EAAmC,CAAC;EAACf,EAAA,MAAA4B;EAAA5B,EAAA,MAAA/B;EAAA+B,EAAA,MAAAf;EAAAe,EAAA,MAAAQ;EAAAR,EAAA,MAAAe;EAAAf,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAlE,MAAAiC,QAAcF;CACd,MAAA1C,MAAY6C,aAAaD,KAAK;CAC9B,MAAAE,QAAcjE,kBAAAb,qBAEVqD,MAAKtC,aAALhB,aAAA;CAOgB,MAAAgF,MAAAlE,kBAAA,UAA4BwC,MAAKtC;CAAW,IAAAiE;CAAA,IAAArC,EAAA,QAAAjC,eAAAiC,EAAA,QAAAhC,SAAAgC,EAAA,QAAAW,WAAA;EAGtD0B,MAAArF,YAAY2D,WAAWzD,UAAUa,aAAaC,KAAK,CAAC;EAACgC,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhC;EAAAgC,EAAA,MAAAW;EAAAX,EAAA,MAAAqC;CAAA,OAAAA,MAAArC,EAAA;CACrD,MAAAsC,MAAAX,SAAQY;CAAS,IAAAC;CAAA,IAAAxC,EAAA,QAAAyC,OAAAC,IAAA,2BAAA,GAAA;EAEZF,MAAAlF,QAAAA,IAAAA,EAA8B;EAAC0C,EAAA,MAAAwC;CAAA,OAAAA,MAAAxC,EAAA;CAAA,IAAA2C;CAAA,IAAA3C,EAAA,QAAAU,OAAA;EAC/BiC,MAAAC,SAASlC,KAAK;EAACV,EAAA,MAAAU;EAAAV,EAAA,MAAA2C;CAAA,OAAAA,MAAA3C,EAAA;CAAA,IAAA6C;CAAA,IAAA7C,EAAA,QAAAQ,OAAA;EACjBqC,MAAA1F,gBAAgBqD,KAAK;EAACR,EAAA,MAAAQ;EAAAR,EAAA,MAAA6C;CAAA,OAAAA,MAAA7C,EAAA;CAAtB,MAAA8C,MAAAD,IAAsBE;CAAI,IAAAC;CAAA,IAAAhD,EAAA,QAAA2B,SAAAG,QAAA9B,EAAA,QAAAQ,OAAA;EAGxBwC,MAAAtF,cACLP,gBAAgBqD,KAAK,CAAC,CAAAiB,MACtBE,SAAQG,IACV;EAAC9B,EAAA,MAAA2B,SAAAG;EAAA9B,EAAA,MAAAQ;EAAAR,EAAA,MAAAgD;CAAA,OAAAA,MAAAhD,EAAA;CAEA,MAAAiD,MAAAtB,SAAQuB;CAAM,IAAAC;CAAA,IAAAnD,EAAA,QAAAX,KAAA;EAEN8D,MAAAzF,cAAwCyB,OAAME,KAAMA,GAAG;EAACW,EAAA,MAAAX;EAAAW,EAAA,MAAAmD;CAAA,OAAAA,MAAAnD,EAAA;CAAA,IAAAoD;CAAA,IAAApD,EAAA,QAAAmD,KAAA;EADjEC,MAAA,oBAAA,SAAA,MAAA,EACS,OAAAD,IAAwD,CAAA;EAC/DnD,EAAA,MAAAmD;EAAAnD,EAAA,MAAAoD;CAAA,OAAAA,MAAApD,EAAA;CAAA,IAAAqD;CAAA,IAAArD,EAAA,QAAAmC,SAAAnC,EAAA,QAAAiC,OAAA;EACDoB,MAAAlB,UAAU,OAAV,OACC,oBAAC,OAAD;GAAc,OAAAF,MAAKvC;GAAcjB,MAAAA;GAAiB,OAAAU,OAAMO;EAAM,CAAA;EAC/DM,EAAA,MAAAmC;EAAAnC,EAAA,MAAAiC;EAAAjC,EAAA,MAAAqD;CAAA,OAAAA,MAAArD,EAAA;CAAA,IAAAsD;CAAA,IAAAtD,EAAA,QAAA2B,SAAAuB,SAAAlD,EAAA,QAAAgD,OAAAhD,EAAA,QAAAoD,OAAApD,EAAA,QAAAqD,KAAA;EAZHC,MAAA,qBAAC,MAAD;GACS,OAAAN;GADT,UAAA;IAMGC;IACDG;IAGCC;GAVE;;EAaErD,EAAA,MAAA2B,SAAAuB;EAAAlD,EAAA,MAAAgD;EAAAhD,EAAA,MAAAoD;EAAApD,EAAA,MAAAqD;EAAArD,EAAA,MAAAsD;CAAA,OAAAA,MAAAtD,EAAA;CAAA,IAAAuD;CAAA,IAAAvD,EAAA,QAAAnC,YAAAmC,EAAA,QAAA/B,YAAA;EACPsF,MAAA,oBAAC,cAAD;GAA0BtF;GAAaJ;EAA1B,CAAA;EAAkDmC,EAAA,MAAAnC;EAAAmC,EAAA,MAAA/B;EAAA+B,EAAA,MAAAuD;CAAA,OAAAA,MAAAvD,EAAA;CAAA,IAAAwD;CAAA,IAAAxD,EAAA,QAAAE,aAAAF,EAAA,QAAA2B,SAAAY,YAAAvC,EAAA,QAAA/B,cAAA+B,EAAA,QAAAoC,OAAApC,EAAA,QAAAqC,OAAArC,EAAA,QAAA2C,OAAA3C,EAAA,QAAA6C,IAAAE,OAAA/C,EAAA,QAAAsD,OAAAtD,EAAA,QAAAuD,KAAA;EAzBjEC,MAAA,qBAAC,WAAD;GACgB,gBAAApB;GACFlC,cAAAA;GACP,MAAA;GAAU,GACXmC;GAAqD,GACrDC;GACMrE,UAAAA;GACD,SAAAuE;GACA,SAAAG;GACF,OAAAG;GATT,UAAA,CAWEQ,KAcAC,GAzBQ;;EA0BEvD,EAAA,MAAAE;EAAAF,EAAA,MAAA2B,SAAAY;EAAAvC,EAAA,MAAA/B;EAAA+B,EAAA,MAAAoC;EAAApC,EAAA,MAAAqC;EAAArC,EAAA,MAAA2C;EAAA3C,EAAA,MAAA6C,IAAAE;EAAA/C,EAAA,MAAAsD;EAAAtD,EAAA,MAAAuD;EAAAvD,EAAA,MAAAwD;CAAA,OAAAA,MAAAxD,EAAA;CAAA,IAAAyD;CAAA,IAAAzD,EAAA,QAAAjC,eAAAiC,EAAA,QAAAhC,SAAAgC,EAAA,QAAAW,WAAA;EACZ8C,MAAA,oBAAC,gBAAD;GAA6B1F;GAAoBC;GAAW2C,IAAAA;EAAS,CAAA;EAAIX,EAAA,MAAAjC;EAAAiC,EAAA,MAAAhC;EAAAgC,EAAA,MAAAW;EAAAX,EAAA,MAAAyD;CAAA,OAAAA,MAAAzD,EAAA;CAAA,IAAA0D;CAAA,IAAA1D,EAAA,QAAAG,SAAAH,EAAA,QAAAzB,SAAAyB,EAAA,QAAAwD,OAAAxD,EAAA,QAAAyD,KAAA;EA5B3EC,MAAA,qBAAC,MAAD;GAAK,GAAKvD;GAAc5B;GAAxB,UAAA,CACEiF,KA2BAC,GA5BG;;EA6BEzD,EAAA,MAAAG;EAAAH,EAAA,MAAAzB;EAAAyB,EAAA,MAAAwD;EAAAxD,EAAA,MAAAyD;EAAAzD,EAAA,MAAA0D;CAAA,OAAAA,MAAA1D,EAAA;CAAA,OA7BP0D;AA6BO;;;;;;;AAUX,SAAS1B,QACP,EAAEpB,QAAQ+C,qBACV,EACE/B,QACA3D,YACAgB,QACA8B,QAOF;CACA,MAAMS,WAAWhE,YACfoD,OAAOgD,WACPD,kBAAkBE,eACpB;CAEA,IAAI5E,QAAQ;EACV,MAAM6E,OAAO7F,aACTuD,WACAT,SAAS,UACPH,OAAO5C,QACP4C,OAAOmD;EAOb,OAAO;GAAED;GAAMpE,OANDzB,aACV2C,OAAOoD,UACPjD,SAAS,UACPH,OAAOqD,UACPrD,OAAOsD;GAESC,MAAM3G,YAAYsG,MAAM,CAAC;EAAE;CACnD;CAEA,MAAMK,OAAOlG,aACTuD,WACAT,SAAS,UACPH,OAAO5C,QACP4D,SACEhB,OAAOgD,YACPhD,OAAOwD;CAEf,OAAO;EAAEN,MAAMtG,YAAY2G,MAAM,CAAC;EAAGzE,OAAOkB,OAAOsD;EAAWC;CAAK;AACrE;AAKA,SAASvB,SAASlC,OAAoB;CACpC,aAAa;EACXA,MAAM2D,OAAO;CACf;AACF;AAGA,SAAAnC,aAAAnC,IAAA;CAAsB,MAAA,EAAA+D,MAAAK,SAAApE;CACpB,MAAA,EAAAuE,WAAmB7G,SAAS;CAC5B,MAAA8G,eAAqB7H,iBAAiB;CACtC,MAAA8H,SAAe;EAAAC,UACHH,OAAMI;EAAeC,QACvBnI,OAAMoI,OAAO,GAAIN,OAAMO,cAAe;CAChD;CAAC,OAEMpI,uBAAiB;EAAA;EAAA,OAEf;GAAAqI,iBACYP,eAAAT,OAAsBnH,WAAWmH,MAAMU,MAAM;GAACO,aAClDR,eAAAJ,OAAsBxH,WAAWwH,MAAMK,MAAM;EAC5D;CAAC,CACF;AAAC"}

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

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = ChipBaseProps & {
@@ -37,7 +37,7 @@ type ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
    * @default false
    */
   readonly isDisabled?: boolean;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
 };
 /** A filter chip: a two-state button, the default. */

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","useState","AnimatedPressable","toggleState","useButtonAction","ChipGlyph","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","shadowsOf","stylesOf","TARGET_SIZE","usePressFeedback","useTheme","composeStyles","ChipActionProps","ChipBaseProps","defaultSelected","isSelected","onChange","variant","Omit","children","elevated","icon","isDisabled","ref","style","ChipFilterProps","ChipProps","ChipVariant","Chip","t0","$","_c","hitSlop","onBlur","onFocus","onHoverIn","onHoverOut","onLayout","onPress","onPressIn","onPressOut","props","t1","t2","t3","undefined","theme","width","setWidth","isToggle","t4","href","type","action","t5","t6","selected","assist","disabled","paint","eased","t7","radii","sm","borderRadius","t8","layer","color","corners","feedback","t9","t10","handlers","t11","t12","t13","t14","container","hovered","ring","pill","t15","glyph","t16","label","t17","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { PressableProps, StyleProp, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { useState } from 'react'\n\nimport { AnimatedPressable, toggleState, useButtonAction } from '../../button'\nimport {\n  ChipGlyph,\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { shadowsOf, stylesOf } from '../../chip/styles'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// Three of the chips page's four chips, as kanso-ui's Chip draws them. The\n// pill is src/chip's, shared with ChipGroup's chip as on web, which sets out\n// its measurements, colours, motion and target. `variant` picks the chip:\n//\n// - **A filter chip**, the default, is a toggle that reports its state as a\n//   toggle Button does, and takes the secondary container pair and the check\n//   once selected.\n// - **An assist or suggestion chip** is an action, so nothing is reported as\n//   selected and nothing ever is. The two differ in the label alone: on\n//   surface on an assist chip, on surface variant on a suggestion chip as on\n//   a filter one.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = ChipBaseProps & {\n  readonly defaultSelected?: never\n  readonly isSelected?: never\n  readonly onChange?: never\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  readonly variant: 'assist' | 'suggestion'\n}\n\ntype ChipBaseProps = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  readonly children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected filter chip keeps the\n   * secondary container.\n   * @default false\n   */\n  readonly elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role,\n   * which the slot hands it through `useIconStyle()`. A filter chip's check\n   * takes its place while the chip is selected, so the chip keeps its width.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the chip disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps & {\n  /**\n   * Whether the chip starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * Whether the chip is selected, when the call site holds the state. Pass\n   * it with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state when the chip is pressed, after `onPress`. */\n  readonly onChange?: (isSelected: boolean) => void\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  readonly variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\n/**\n * A chip. By default a filter chip, which is a two-state button reporting\n * its state as a toggle Button does: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state.\n *\n * ```tsx\n * <Chip defaultSelected>Label</Chip>\n * ```\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * A column stretches a chip across it, as it does any view; a row of chips is\n * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction Chip({\n  children,\n  defaultSelected,\n  elevated = false,\n  hitSlop,\n  icon,\n  isDisabled = false,\n  isSelected,\n  onBlur,\n  onChange,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onLayout,\n  onPress,\n  onPressIn,\n  onPressOut,\n  style,\n  variant = 'filter',\n  ...props\n}: ChipProps) {\n  const theme = useTheme()\n  // Until the chip is measured it takes no reach across, rather than one\n  // sized for a chip of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n\n  const isToggle = variant === 'filter'\n  const action = useButtonAction({\n    defaultSelected,\n    href: undefined,\n    isSelected,\n    isToggle,\n    onChange,\n    onPress,\n    type: undefined,\n  })\n  const paint = paintOf(theme, {\n    assist: variant === 'assist',\n    disabled: isDisabled,\n    elevated,\n    selected: action.selected,\n  })\n  const eased = useEasedColors(paint)\n\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n\n  return (\n    <AnimatedPressable\n      role=\"button\"\n      {...(isToggle ? toggleState(action.selected) : undefined)}\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      hitSlop={hitSlop ?? targetOf(width, theme)}\n      onLayout={measureThen(setWidth, onLayout)}\n      onPress={action.onPress}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        elevated && !isDisabled\n          ? shadowsOf(theme)[feedback.hovered ? 'elevation2' : 'elevation1']\n          : undefined,\n        feedback.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <ChipGlyph color={paint.glyph} icon={icon} selected={action.selected} />\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\nexport { Chip }\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
-import { ReactElement, ReactNode, Ref } from "react";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/chip-group/index.d.ts
 type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {
@@ -22,7 +22,7 @@ type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' |
    * @default false
    */
   readonly isDisabled?: boolean;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   readonly style?: StyleProp<ViewStyle>;
   /**
    * The chip's text, which names its close target. Read off `children` when
@@ -73,7 +73,7 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
   readonly onRemove?: (keys: Set<Key>) => void;
   /** Called with the selected keys whenever a press changes them. */
   readonly onSelectionChange?: (keys: Selection) => void;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   /**
    * What the close target on each chip is called, for a screen reader. The
    * chip's own text follows it, so this is the verb rather than the whole