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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","GestureResponderEvent","HostInstance","LayoutChangeEvent","ModalProps","ScrollViewProps","StyleProp","TextProps","TextStyle","ViewProps","ViewStyle","AnimatedStyle","EdgeInsets","OverlayTriggerState","createContext","use","useCallback","useEffect","useId","useLayoutEffect","useMemo","useRef","useState","AccessibilityInfo","Modal","Text","NativeText","Platform","ScrollView","StyleSheet","useWindowDimensions","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaInsetsContext","useOverlayTriggerState","ButtonSlots","ResolvedTheme","AnimatedPressable","ButtonSlotContext","useWindowSizeClass","OverlayHost","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","MIN_WIDTH","MAX_WIDTH","SCALE_FROM","RISE_FROM","SCRIM_OPACITY","NO_INSETS","bottom","left","right","top","ORIENTATIONS","NO_PARTS","Readonly","Record","DialogPart","footer","header","title","stylesOf","colors","radii","shadows","sizing","spacing","create","actions","alignItems","flexDirection","flexShrink","flexWrap","gap","sm","justifyContent","padding","xl","actionsFull","borderTopColor","outlineVariant","borderTopWidth","minHeight","rowSm","paddingVertical","xs","bodyText","color","onSurfaceVariant","container","backgroundColor","surfaceContainerHigh","overflow","containerBasic","borderRadius","boxShadow","elevation3","maxHeight","maxWidth","minWidth","width","containerFull","flex","md","paddingBottom","lg","paddingHorizontal","paddingTop","headerFull","borderBottomColor","borderBottomWidth","layout","pointerEvents","position","layoutFull","scrim","onSurface","DialogLayout","basic","parts","register","part","setTitle","node","titleId","DialogTrigger","state","trigger","DialogLayoutContext","DialogTriggerContext","DialogBodyProps","ref","DialogContentProps","DialogOpenProps","Omit","children","isDismissable","isKeyboardDismissDisabled","role","style","defaultOpen","isOpen","onOpenChange","DialogPartProps","DialogProps","DialogTitleProps","bodyPaddingOf","Dialog","t0","$","_c","t1","setTrigger","t2","context","t3","default","event","target","currentTarget","open","slots","t4","t5","DialogBody","contentContainerStyle","onContentSizeChange","onLayout","props","useLayout","theme","styles","text","content","setContent","room","setRoom","height","measureContent","nativeEvent","measureRoom","T0","t6","DialogContent","undefined","outer","own","insets","sizeClass","setParts","Symbol","for","registerOf","present","setPresent","motion","useDialogMotion","close","t7","t8","useReturnFocus","labelledBy","web","OS","t9","focusOf","t10","t11","t12","panelRoleOf","t13","t14","insetsOf","panel","t15","t16","t17","t18","ignore","DialogFooter","DialogHeader","DialogTitle","refsOf","sendAccessibilityEvent","paddingLeft","paddingRight","Pick","T","other","current","update","reduceMotion","durationMedium1","durationShort2","durationShort3","easingEmphasizedAccelerate","easingEmphasizedDecelerate","easingStandard","fade","duration","easing","bezier","set","timer","setTimeout","Math","max","clearTimeout","shown","get","opacity","transform","scale","translateY","Error","gone","Body","Content","Footer","Header","Title","_c","NativeText"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  LayoutChangeEvent,\n  ModalProps,\n  ScrollViewProps,\n  StyleProp,\n  TextProps,\n  TextStyle,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { EdgeInsets } from 'react-native-safe-area-context'\nimport type { OverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport {\n  AccessibilityInfo,\n  Modal,\n  Text as NativeText,\n  Platform,\n  ScrollView,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\nimport { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport type { ButtonSlots } from '../../button/slots'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { AnimatedPressable } from '../../button'\nimport { ButtonSlotContext } from '../../button/slots'\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { OverlayHost } from '../../overlay'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// The dialogs spec page's two dialogs, as kanso-ui's Dialog draws them: one\n// component, since the page pairs them by window size rather than offering a\n// choice. In a medium window or wider it is the basic dialog, a container on\n// surface container high with the 28dp corner, between 280 and 560dp wide,\n// centred over the scrim, with 24dp of padding all round, 16dp between the\n// headline and the body and 24dp between the body and the actions. In a\n// compact window, below 600dp, the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline in\n// title large and a divider under it, and a 56dp action bar over a divider,\n// both inside the device's safe area.\n//\n// An alert dialog, `role=\"alertdialog\"`, is a question with two or three\n// answers rather than a task, and stays the basic dialog at every width, as\n// on web, where a question filling a phone read as a headline at the top of\n// the screen and its answers at the bottom with nothing between them.\n//\n// **It is drawn in a React Native `Modal`**, which keeps React context, so\n// the dialog keeps the `ThemeScope` around it, and which is a window of its\n// own on iOS and Android, above the screen and its overlays. The `Modal`\n// therefore hosts overlays of its own, so a snackbar or a popover raised from\n// inside the dialog draws above it rather than under it.\n//\n// **It animates out as well as in**, from the motion tokens: the panel scales\n// up from 90% on the emphasised decelerating curve, or rises 3% of the window\n// when it fills it, and leaves on the emphasised accelerating one, while the\n// scrim fades on the standard curve. Web only animates in, since React Aria\n// keeps a closing surface mounted only while a CSS animation runs; here the\n// dialog stays mounted until its exit has run. Under reduced motion the\n// panel appears and leaves at once, and the scrim still fades, which is what\n// says the dialog came and went.\n//\n// **A press on the scrim closes it**, unless `isDismissable` is false, and\n// Android's back gesture and VoiceOver's escape gesture close it, unless\n// `isKeyboardDismissDisabled`, the prop that keeps Escape from closing it on\n// web, which is the key React Native Web's `Modal` hands the same handler.\n// A button inside `Dialog` and outside its content opens it, and one given\n// `slot=\"close\"` inside the content closes it, through src/button's\n// slots.ts.\n//\n// **Focus moves into the dialog and back.** On iOS and Android the screen\n// reader is sent to the headline once the dialog shows, and back to the\n// button that opened it once it has gone. React Native Web's `Modal` traps\n// focus and restores it itself, and is the dialog element there, so on web it\n// takes the dialog's name and the panel takes no role of its own. That\n// `Modal` sets its role itself, so an alert dialog is announced as a dialog\n// in the web Storybook; kanso-ui, the library for web apps, keeps the role.\n\n// The panel's width bounds, the page's, and how far it travels as it\n// arrives: it scales up from 90% as the basic dialog, or rises 3% of the\n// window as the full-screen one, as web's keyframes have it.\nconst MIN_WIDTH = 280\nconst MAX_WIDTH = 560\nconst SCALE_FROM = 0.9\nconst RISE_FROM = 0.03\n\n// The scrim is the scrim role at 32%, the opacity Material Design gives a\n// modal's scrim and web mixes in.\nconst SCRIM_OPACITY = 0.32\n\n// Outside a SafeAreaProvider the insets are unknown, and the window's own edge\n// is the best bound there is.\nconst NO_INSETS = { bottom: 0, left: 0, right: 0, top: 0 }\n\n// iOS presents a `Modal` in portrait alone unless told otherwise, which would\n// turn an app held sideways round as the dialog opened.\nconst ORIENTATIONS: ModalProps['supportedOrientations'] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\nconst NO_PARTS: Readonly<Record<DialogPart, number>> = {\n  footer: 0,\n  header: 0,\n  title: 0,\n}\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, shadows, sizing, spacing }: ResolvedTheme) =>\n    StyleSheet.create({\n      // The page's 24dp between the body and the actions, and 8dp between\n      // the buttons. Actions that do not fit on one row wrap onto another,\n      // still at the trailing edge.\n      actions: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexShrink: 0,\n        flexWrap: 'wrap',\n        gap: spacing.sm,\n        justifyContent: 'flex-end',\n        padding: spacing.xl,\n      },\n      // Full screen, the actions are the page's bottom action bar: 56dp at\n      // least, over a divider, so an action whose label wraps grows the bar\n      // rather than meeting the divider.\n      actionsFull: {\n        borderTopColor: colors.outlineVariant,\n        borderTopWidth: 1,\n        minHeight: sizing.rowSm,\n        paddingVertical: spacing.xs,\n      },\n      // The text a body is handed as a string, in the page's body medium on\n      // on-surface variant, which is what web's body sets for its text.\n      bodyText: {\n        color: colors.onSurfaceVariant,\n      },\n      // Both dialogs' container, whose corner, where it has one, clips the\n      // body's scroll.\n      container: {\n        backgroundColor: colors.surfaceContainerHigh,\n        overflow: 'hidden',\n      },\n      // The basic dialog's container, centred over the scrim and only as\n      // tall as the room the scrim's padding leaves, so the body scrolls\n      // rather than running off the screen.\n      containerBasic: {\n        borderRadius: radii.xl,\n        boxShadow: shadows.elevation3,\n        maxHeight: '100%',\n        maxWidth: MAX_WIDTH,\n        minWidth: MIN_WIDTH,\n        width: '100%',\n      },\n      // Full screen, the container fills the window with square corners, and\n      // its fill runs on under the safe area its content keeps out of.\n      containerFull: {\n        flex: 1,\n      },\n      // The page's 24dp above the headline and 16dp between it and the body,\n      // with the headline beside whatever else the header holds, a close\n      // button for one.\n      header: {\n        alignItems: 'center',\n        flexDirection: 'row',\n        flexShrink: 0,\n        gap: spacing.md,\n        justifyContent: 'space-between',\n        paddingBottom: spacing.lg,\n        paddingHorizontal: spacing.xl,\n        paddingTop: spacing.xl,\n      },\n      // Full screen, the header is the page's own 56dp bar, at least, under\n      // a divider.\n      headerFull: {\n        borderBottomColor: colors.outlineVariant,\n        borderBottomWidth: 1,\n        minHeight: sizing.rowSm,\n        paddingBottom: spacing.xs,\n        paddingTop: spacing.xs,\n      },\n      // The scrim centres the container, which is what makes the dialog a\n      // dialog rather than a sheet. Full screen it has no room to give. It\n      // takes no touches itself, so a press around the container reaches the\n      // scrim under it.\n      layout: {\n        alignItems: 'center',\n        bottom: 0,\n        justifyContent: 'center',\n        left: 0,\n        padding: spacing.xl,\n        pointerEvents: 'box-none',\n        position: 'absolute',\n        right: 0,\n        top: 0,\n      },\n      layoutFull: {\n        alignItems: 'stretch',\n        padding: 0,\n      },\n      scrim: {\n        backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),\n        bottom: 0,\n        left: 0,\n        position: 'absolute',\n        right: 0,\n        top: 0,\n      },\n      // The headline gives way to whatever shares its row.\n      title: {\n        color: colors.onSurface,\n        flexShrink: 1,\n      },\n    }),\n)\n\n// What the content's parts read: which of the two dialogs is drawn, which\n// parts are there, and the headline's name and node.\ntype DialogLayout = {\n  readonly basic: boolean\n  readonly parts: Readonly<Record<DialogPart, number>>\n  readonly register: (part: DialogPart) => () => void\n  readonly setTitle: (node: HostInstance | null) => void\n  readonly titleId: string\n}\n\ntype DialogPart = 'footer' | 'header' | 'title'\n\n// What `Dialog` hands its content: the open state, and the button that last\n// opened it, for focus to return to.\ntype DialogTrigger = {\n  readonly state: OverlayTriggerState\n  readonly trigger: HostInstance | null\n}\n\nconst DialogLayoutContext = createContext<DialogLayout | null>(null)\nconst DialogTriggerContext = createContext<DialogTrigger | null>(null)\n\ntype DialogBodyProps = ScrollViewProps & {\n  readonly ref?: Ref<ComponentRef<typeof ScrollView>>\n}\n\ntype DialogContentProps = DialogOpenProps &\n  Omit<ViewProps, 'children' | 'role' | 'style'> & {\n    readonly children?: ReactNode\n    /**\n     * Whether a press on the scrim, outside the container, closes the\n     * dialog. Android's back gesture is `isKeyboardDismissDisabled`'s, and\n     * this says nothing about it, so a dialog that has to be answered from\n     * one of its actions turns off both.\n     * @default true\n     */\n    readonly isDismissable?: boolean\n    /**\n     * Keeps Android's back gesture, VoiceOver's escape gesture, and Escape on\n     * web, from closing the dialog.\n     * @default false\n     */\n    readonly isKeyboardDismissDisabled?: boolean\n    readonly ref?: Ref<ComponentRef<typeof View>>\n    /**\n     * `alertdialog` for a dialog interrupting with something that has to be\n     * answered before the app carries on. It also keeps the dialog the basic\n     * one in a compact window, centred and sized to its content, where a\n     * dialog of the default role fills the window.\n     * @default 'dialog'\n     */\n    readonly role?: 'alertdialog' | 'dialog'\n    readonly style?: StyleProp<ViewStyle>\n  }\n\ntype DialogOpenProps = {\n  /** Whether the dialog starts open, when it keeps its own state. */\n  readonly defaultOpen?: boolean\n  /** Whether the dialog is open, when the call site holds the state. */\n  readonly isOpen?: boolean\n  /** Called with the new state as the dialog opens or closes. */\n  readonly onOpenChange?: (isOpen: boolean) => void\n}\n\ntype DialogPartProps = ViewProps & {\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\ntype DialogProps = DialogOpenProps & {\n  /** The button that opens the dialog, and `Dialog.Content`. */\n  readonly children?: ReactNode\n}\n\ntype DialogTitleProps = Omit<TextProps, 'role'> & {\n  readonly ref?: Ref<HostInstance>\n}\n\n// The body's padding. The page's 24dp all round is spent by whichever part\n// is at each end, so the body takes the top of it when no header is there\n// and the bottom when no footer is. Full screen, it keeps 24dp under the\n// header's divider as well, which is the content padding the page gives the\n// full-screen dialog.\nfunction bodyPaddingOf(\n  { basic, parts }: DialogLayout,\n  spacing: ResolvedTheme['spacing'],\n): ViewStyle {\n  return {\n    gap: spacing.lg,\n    paddingBottom: parts.footer > 0 ? 0 : spacing.xl,\n    paddingHorizontal: spacing.xl,\n    paddingTop: basic && parts.header > 0 ? 0 : spacing.xl,\n  }\n}\n\n/**\n * A modal dialog centred over the screen, and the same dialog filling the\n * window in a compact window, the dialogs spec page's basic and full-screen\n * dialogs, paired by window size as the page pairs them. An alert dialog\n * stays the basic one at every width. Pass `isOpen` with `onOpenChange` to\n * hold the open state, or `defaultOpen` to let it keep its own.\n *\n * ```tsx\n * <Dialog>\n *   <Button>Open</Button>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Headline</Dialog.Title>\n *     </Dialog.Header>\n *     <Dialog.Body>Supporting text</Dialog.Body>\n *     <Dialog.Footer>\n *       <Button slot=\"close\" variant=\"text\">Cancel</Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n * ```\n *\n * Composed rather than configured by props, as web's is, since a dialog's\n * header, body and actions all take arbitrary content. A `Button` or\n * `IconButton` inside `Dialog` and outside its content opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it. A dialog nothing on\n * the screen opens leaves `Dialog` out and passes `isOpen` and\n * `onOpenChange` to `Dialog.Content` instead.\n */\nfunction Dialog({ children, defaultOpen, isOpen, onOpenChange }: DialogProps) {\n  const state = useOverlayTriggerState({ defaultOpen, isOpen, onOpenChange })\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const context = useMemo(() => ({ state, trigger }), [state, trigger])\n  // The default slot a button inside `Dialog` fills: it records\n  // itself as the button focus returns to, and opens the dialog. React\n  // Native types the target as a bare view tag too, which focus cannot be\n  // sent to, so such a press records nothing.\n  const slots = useMemo<ButtonSlots>(\n    () => ({\n      default: (event: GestureResponderEvent) => {\n        const target = event.currentTarget\n\n        setTrigger(typeof target === 'number' ? null : target)\n        state.open()\n      },\n    }),\n    [state],\n  )\n\n  return (\n    <DialogTriggerContext value={context}>\n      <ButtonSlotContext value={slots}>{children}</ButtonSlotContext>\n    </DialogTriggerContext>\n  )\n}\n\n/**\n * What the dialog shows, as a body that scrolls when its content runs past\n * the room it has. A string is drawn in the page's body medium on on-surface\n * variant; anything else draws itself. `style`, `ref` and `testID` land on\n * the `ScrollView`.\n *\n * A body its content runs past takes focus, as web's is a tab stop, so a\n * keyboard can scroll it when nothing inside it takes focus; a call site's\n * own `focusable` still wins.\n */\nfunction DialogBody({\n  children,\n  contentContainerStyle,\n  onContentSizeChange,\n  onLayout,\n  ...props\n}: DialogBodyProps) {\n  const layout = useLayout('Dialog.Body')\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const text = useTypeRole('bodyMedium')\n  const { spacing } = theme\n  const [content, setContent] = useState(0)\n  const [room, setRoom] = useState(0)\n  const measureContent = useCallback(\n    (width: number, height: number) => {\n      setContent(height)\n      onContentSizeChange?.(width, height)\n    },\n    [onContentSizeChange],\n  )\n  const measureRoom = useCallback(\n    (event: LayoutChangeEvent) => {\n      setRoom(event.nativeEvent.layout.height)\n      onLayout?.(event)\n    },\n    [onLayout],\n  )\n\n  return (\n    <ScrollView\n      focusable={content > room}\n      onContentSizeChange={measureContent}\n      onLayout={measureRoom}\n      {...props}\n      contentContainerStyle={composeStyles<ViewStyle>(\n        bodyPaddingOf(layout, spacing),\n        contentContainerStyle,\n      )}\n    >\n      {typeof children === 'string' ? (\n        <NativeText style={composeStyles<TextStyle>(text, styles.bodyText)}>\n          {children}\n        </NativeText>\n      ) : (\n        children\n      )}\n    </ScrollView>\n  )\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the button that opens it stays outside it.\n *\n * Inside `Dialog`, the open state is the trigger's. On its own it is this\n * part's: `isOpen` with `onOpenChange` holds it, and a `slot=\"close\"`\n * button, the scrim and the back gesture all report through `onOpenChange`.\n * `style`, `ref` and `testID` land on the container.\n */\nfunction DialogContent({\n  children,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled = false,\n  isOpen,\n  onOpenChange,\n  role = 'dialog',\n  style,\n  ...props\n}: DialogContentProps) {\n  const outer = use(DialogTriggerContext)\n  const own = useOverlayTriggerState({ defaultOpen, isOpen, onOpenChange })\n  const state = outer?.state ?? own\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const insets = use(SafeAreaInsetsContext) ?? NO_INSETS\n  const sizeClass = useWindowSizeClass()\n  const basic = role === 'alertdialog' || sizeClass !== 'compact'\n  const titleId = useId()\n  const [parts, setParts] = useState(NO_PARTS)\n  const [register] = useState(() => registerOf(setParts))\n  const [title, setTitle] = useState<HostInstance | null>(null)\n  const [present, setPresent] = useState(state.isOpen)\n  const motion = useDialogMotion(state.isOpen, present, setPresent, basic)\n  const close = useCallback(() => {\n    state.close()\n  }, [state])\n  const slots = useMemo<ButtonSlots>(() => ({ close }), [close])\n  const layout = useMemo<DialogLayout>(\n    () => ({ basic, parts, register, setTitle, titleId }),\n    [basic, parts, register, titleId],\n  )\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, outer)\n\n  if (!present) {\n    return null\n  }\n\n  const labelledBy = parts.title > 0 ? titleId : undefined\n  const web = Platform.OS === 'web'\n\n  return (\n    <Modal\n      animationType=\"none\"\n      aria-labelledby={web ? labelledBy : undefined}\n      navigationBarTranslucent\n      onRequestClose={isKeyboardDismissDisabled ? ignore : close}\n      onShow={focusOf(title)}\n      statusBarTranslucent\n      supportedOrientations={ORIENTATIONS}\n      transparent\n      visible\n    >\n      {/* Nothing in the window takes the trigger's slot, the overlays this\n          one hosts included, so a button in a snackbar raised from the dialog\n          opens nothing; only the panel's buttons take the close slot. */}\n      <ButtonSlotContext value={null}>\n        <OverlayHost>\n          {/* A screen reader and a keyboard skip the scrim: the first closes\n            the dialog with the back or escape gesture, the second with\n            Escape. React Native Web's Pressable is a tab stop unless told\n            otherwise, whatever `focusable` says. */}\n          <AnimatedPressable\n            accessible={false}\n            aria-hidden\n            focusable={false}\n            onPress={isDismissable && state.isOpen ? close : undefined}\n            style={composeStyles<AnimatedStyle<ViewStyle>>(\n              styles.scrim,\n              motion.scrim,\n            )}\n            tabIndex={-1}\n          />\n          <View\n            style={composeStyles<ViewStyle>(\n              styles.layout,\n              basic ? undefined : styles.layoutFull,\n            )}\n          >\n            <Animated.View\n              {...(web ? undefined : panelRoleOf(role, labelledBy))}\n              onAccessibilityEscape={\n                isKeyboardDismissDisabled ? undefined : close\n              }\n              {...props}\n              style={composeStyles<AnimatedStyle<ViewStyle>>(\n                styles.container,\n                basic ? styles.containerBasic : styles.containerFull,\n                basic ? undefined : insetsOf(insets),\n                motion.panel,\n                style,\n              )}\n            >\n              <DialogLayoutContext value={layout}>\n                <ButtonSlotContext value={slots}>{children}</ButtonSlotContext>\n              </DialogLayoutContext>\n            </Animated.View>\n          </View>\n        </OverlayHost>\n      </ButtonSlotContext>\n    </Modal>\n  )\n}\n\n/**\n * The dialog's actions, at the trailing edge and wrapping onto another row\n * when they do not fit on one. Full screen they are the page's bottom action\n * bar. `style`, `ref` and `testID` land on its view.\n */\nfunction DialogFooter({ style, ...props }: DialogPartProps) {\n  const layout = useLayout('Dialog.Footer')\n  const styles = stylesOf(useTheme())\n  const { register } = layout\n\n  useLayoutEffect(() => register('footer'), [register])\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles.actions,\n        layout.basic ? undefined : styles.actionsFull,\n        style,\n      )}\n    />\n  )\n}\n\n/**\n * The dialog's header: its `Dialog.Title`, and anything beside it, such as a\n * close button. Full screen it is the page's header bar. `style`, `ref` and\n * `testID` land on its view.\n */\nfunction DialogHeader({ style, ...props }: DialogPartProps) {\n  const layout = useLayout('Dialog.Header')\n  const styles = stylesOf(useTheme())\n  const { register } = layout\n\n  useLayoutEffect(() => register('header'), [register])\n\n  return (\n    <View\n      {...props}\n      style={composeStyles<ViewStyle>(\n        styles.header,\n        layout.basic ? undefined : styles.headerFull,\n        style,\n      )}\n    />\n  )\n}\n\n/**\n * Names the dialog: the container is labelled by it, and a screen reader is\n * sent to it once the dialog shows. In headline small as the basic dialog,\n * and title large as the full-screen one, where it shares a 56dp bar.\n * `style`, `ref` and `testID` land on React Native's own Text.\n */\nfunction DialogTitle({ ref, style, ...props }: DialogTitleProps) {\n  const layout = useLayout('Dialog.Title')\n  const styles = stylesOf(useTheme())\n  const role = useTypeRole(layout.basic ? 'headlineSmall' : 'titleLarge')\n  const { register, setTitle } = layout\n\n  useLayoutEffect(() => register('title'), [register])\n\n  return (\n    <NativeText\n      {...props}\n      nativeID={layout.titleId}\n      ref={refsOf(setTitle, ref)}\n      role=\"heading\"\n      style={composeStyles<TextStyle>(role, styles.title, style)}\n    />\n  )\n}\n\n// Sends the screen reader to the headline once the dialog has shown. React\n// Native Web's `Modal` moves focus into itself.\nfunction focusOf(title: HostInstance | null) {\n  return () => {\n    if (title !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(title, 'focus')\n    }\n  }\n}\n\n// What the back gesture does on a dialog it may not close: nothing, rather\n// than leaving the handler out, which Android warns about.\nfunction ignore() {}\n\nfunction insetsOf(insets: EdgeInsets): ViewStyle {\n  return {\n    paddingBottom: insets.bottom,\n    paddingLeft: insets.left,\n    paddingRight: insets.right,\n    paddingTop: insets.top,\n  }\n}\n\n// The panel's role and name on iOS and Android. On web React Native Web's\n// `Modal` is the dialog element, so the panel takes neither there.\nfunction panelRoleOf(\n  role: 'alertdialog' | 'dialog',\n  labelledBy: string | undefined,\n): Pick<ViewProps, 'aria-labelledby' | 'aria-modal' | 'role'> {\n  return { 'aria-labelledby': labelledBy, 'aria-modal': true, role }\n}\n\n// Every ref a node is handed to, the part's own and the call site's.\nfunction refsOf<T>(own: (node: null | T) => void, other: Ref<T> | undefined) {\n  return (node: null | T) => {\n    own(node)\n    if (typeof other === 'function') {\n      other(node)\n    } else if (other !== null && other !== undefined) {\n      other.current = node\n    }\n  }\n}\n\n// Counts each part as it mounts and unmounts, so the body knows which ends\n// it has to pad.\nfunction registerOf(\n  setParts: (\n    update: (\n      parts: Readonly<Record<DialogPart, number>>,\n    ) => Readonly<Record<DialogPart, number>>,\n  ) => void,\n) {\n  return (part: DialogPart) => {\n    setParts((parts) => ({ ...parts, [part]: parts[part] + 1 }))\n\n    return () => {\n      setParts((parts) => ({ ...parts, [part]: parts[part] - 1 }))\n    }\n  }\n}\n\n/**\n * The scrim's and the panel's motion, and the timer that unmounts the dialog\n * once its exit has run. The panel arrives over the medium duration on the\n * emphasised decelerating curve and leaves over the short one on the\n * accelerating curve, and the scrim fades over the short one on the standard\n * curve, both ways. Under reduced motion the panel arrives and leaves at once.\n */\nfunction useDialogMotion(\n  isOpen: boolean,\n  present: boolean,\n  setPresent: (present: boolean) => void,\n  basic: boolean,\n) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const { height } = useWindowDimensions()\n  const panel = useSharedValue(0)\n  const scrim = useSharedValue(0)\n\n  useEffect(() => {\n    const fade = {\n      duration: motion.durationShort2,\n      easing: Easing.bezier(...motion.easingStandard),\n    }\n\n    if (isOpen) {\n      scrim.set(withTiming(1, fade))\n      panel.set(\n        reduceMotion\n          ? 1\n          : withTiming(1, {\n              duration: motion.durationMedium1,\n              easing: Easing.bezier(...motion.easingEmphasizedDecelerate),\n            }),\n      )\n      return undefined\n    }\n\n    if (!present) {\n      return undefined\n    }\n\n    scrim.set(withTiming(0, fade))\n    panel.set(\n      reduceMotion\n        ? 0\n        : withTiming(0, {\n            duration: motion.durationShort3,\n            easing: Easing.bezier(...motion.easingEmphasizedAccelerate),\n          }),\n    )\n    const timer = setTimeout(\n      () => {\n        setPresent(false)\n      },\n      reduceMotion\n        ? motion.durationShort2\n        : Math.max(motion.durationShort2, motion.durationShort3),\n    )\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [isOpen, motion, panel, present, reduceMotion, scrim, setPresent])\n\n  return {\n    panel: useAnimatedStyle(() => {\n      'worklet'\n      const shown = panel.get()\n\n      return basic\n        ? {\n            opacity: shown,\n            transform: [{ scale: SCALE_FROM + (1 - SCALE_FROM) * shown }],\n          }\n        : {\n            opacity: shown,\n            transform: [{ translateY: (1 - shown) * RISE_FROM * height }],\n          }\n    }),\n    scrim: useAnimatedStyle(() => {\n      'worklet'\n      return { opacity: scrim.get() }\n    }),\n  }\n}\n\nfunction useLayout(part: string) {\n  const layout = use(DialogLayoutContext)\n\n  if (layout === null) {\n    throw new Error(`${part} is drawn inside Dialog.Content.`)\n  }\n\n  return layout\n}\n\n// Sends the screen reader back to the button that opened the dialog once the\n// dialog has gone. React Native Web's `Modal` restores focus itself.\nfunction useReturnFocus(present: boolean, outer: DialogTrigger | null) {\n  const shown = useRef(present)\n\n  useEffect(() => {\n    const trigger = outer?.trigger ?? null\n    const gone = shown.current && !present\n\n    shown.current = present\n    if (gone && trigger !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(trigger, 'focus')\n    }\n  }, [outer, present])\n}\n\nDialog.Body = DialogBody\nDialog.Content = DialogContent\nDialog.Footer = DialogFooter\nDialog.Header = DialogHeader\nDialog.Title = DialogTitle\n\nexport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n}\nexport type {\n  DialogBodyProps,\n  DialogContentProps,\n  DialogPartProps,\n  DialogProps,\n  DialogTitleProps,\n}\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { ButtonLinkForm, ButtonPressForm, ButtonToggleForm } from "../../button/index.js";
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/icon-button/index.d.ts
 type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {
   /**
@@ -24,7 +24,7 @@ type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & O
    * @default false
    */
   readonly isDisabled?: boolean;
-  readonly ref?: Ref<View>;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
   /**
    * Control size: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,
    * the icon buttons spec page's XS to XL, and the same heights `Button`
@@ -62,7 +62,7 @@ type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
  * through `hitSlop`, which a `hitSlop` of the call site's own replaces.
  * `style`, `ref` and `testID` land on the `Pressable`.
  */
-declare function IconButton({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, size, style, type, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+declare function IconButton({ children, defaultSelected, disableRipple, hitSlop: ownHitSlop, href, isDisabled, isPending, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, size, slot, style, type, variant, ...props }: IconButtonProps): import("react").JSX.Element;
 //#endregion
 export { IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant };
 //# sourceMappingURL=index.d.ts.map

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

@@ -88,7 +88,7 @@ const sizesOf = themedStyles(({ sizing }) => {
 * `style`, `ref` and `testID` land on the `Pressable`.
 */
 function IconButton(t0) {
-	const $ = c(73);
+	const $ = c(75);
 	let children;
 	let defaultSelected;
 	let href;
@@ -106,6 +106,7 @@ function IconButton(t0) {
 	let ownHitSlop;
 	let pendingLabel;
 	let props;
+	let slot;
 	let style;
 	let t1;
 	let t2;
@@ -114,7 +115,7 @@ function IconButton(t0) {
 	let t5;
 	let type;
 	if ($[0] !== t0) {
-		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, size: t4, style, type, variant: t5, ...props} = t0);
+		({children, defaultSelected, disableRipple: t1, hitSlop: ownHitSlop, href, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, size: t4, slot, style, type, variant: t5, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = defaultSelected;
@@ -133,13 +134,14 @@ function IconButton(t0) {
 		$[15] = ownHitSlop;
 		$[16] = pendingLabel;
 		$[17] = props;
-		$[18] = style;
-		$[19] = t1;
-		$[20] = t2;
-		$[21] = t3;
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = type;
+		$[18] = slot;
+		$[19] = style;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = type;
 	} else {
 		children = $[1];
 		defaultSelected = $[2];
@@ -158,13 +160,14 @@ function IconButton(t0) {
 		ownHitSlop = $[15];
 		pendingLabel = $[16];
 		props = $[17];
-		style = $[18];
-		t1 = $[19];
-		t2 = $[20];
-		t3 = $[21];
-		t4 = $[22];
-		t5 = $[23];
-		type = $[24];
+		slot = $[18];
+		style = $[19];
+		t1 = $[20];
+		t2 = $[21];
+		t3 = $[22];
+		t4 = $[23];
+		t5 = $[24];
+		type = $[25];
 	}
 	const disableRipple = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -175,27 +178,30 @@ function IconButton(t0) {
 	const pending = href === void 0 && isPending;
 	const ringLabel = usePending(pending, pendingLabel);
 	const isToggle = defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0;
-	let t6;
-	if ($[25] !== defaultSelected || $[26] !== href || $[27] !== isSelected || $[28] !== isToggle || $[29] !== onChange || $[30] !== onPress || $[31] !== type) {
-		t6 = {
+	const t6 = slot ?? "default";
+	let t7;
+	if ($[26] !== defaultSelected || $[27] !== href || $[28] !== isSelected || $[29] !== isToggle || $[30] !== onChange || $[31] !== onPress || $[32] !== t6 || $[33] !== type) {
+		t7 = {
 			defaultSelected,
 			href,
 			isSelected,
 			isToggle,
 			onChange,
 			onPress,
+			slot: t6,
 			type
 		};
-		$[25] = defaultSelected;
-		$[26] = href;
-		$[27] = isSelected;
-		$[28] = isToggle;
-		$[29] = onChange;
-		$[30] = onPress;
-		$[31] = type;
+		$[26] = defaultSelected;
+		$[27] = href;
+		$[28] = isSelected;
+		$[29] = isToggle;
+		$[30] = onChange;
+		$[31] = onPress;
 		$[32] = t6;
-	} else t6 = $[32];
-	const action = useButtonAction(t6);
+		$[33] = type;
+		$[34] = t7;
+	} else t7 = $[34];
+	const action = useButtonAction(t7);
 	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : isToggle ? TOGGLE_PALETTES[variant][action.selected ? "selected" : "unselected"] : variant];
 	const feedback = usePressFeedback({
 		color: colors.content,
@@ -213,119 +219,119 @@ function IconButton(t0) {
 	const edge = sizing[HEIGHTS[size]];
 	const shaped = useCorner(feedback.pressed || action.selected ? radii[PRESSED_CORNERS[size]] : radii.pill, onLayout);
 	const T0 = AnimatedPressable;
-	const t7 = href === void 0 ? "button" : "link";
-	let t8;
-	if ($[33] !== action || $[34] !== isToggle) {
-		t8 = isToggle ? toggleState(action.selected) : void 0;
-		$[33] = action;
-		$[34] = isToggle;
-		$[35] = t8;
-	} else t8 = $[35];
-	const t9 = pending ? BUSY : void 0;
-	const t10 = feedback.handlers;
-	let t11;
-	if ($[36] !== edge || $[37] !== ownHitSlop) {
-		t11 = ownHitSlop ?? hitSlop(edge, edge);
-		$[36] = edge;
-		$[37] = ownHitSlop;
-		$[38] = t11;
-	} else t11 = $[38];
-	const t12 = shaped.onLayout;
-	const t13 = pending ? void 0 : onLongPress;
-	const t14 = pending ? void 0 : action.onPress;
-	const t15 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlineWidths[size] : void 0, colors.container, shaped.corner, feedback.ring, style);
-	let t16;
-	if ($[39] !== shaped.corner) {
-		t16 = composeStyles(buttonStyles.clip, shaped.corner);
-		$[39] = shaped.corner;
-		$[40] = t16;
-	} else t16 = $[40];
+	const t8 = href === void 0 ? "button" : "link";
+	let t9;
+	if ($[35] !== action || $[36] !== isToggle) {
+		t9 = isToggle ? toggleState(action.selected) : void 0;
+		$[35] = action;
+		$[36] = isToggle;
+		$[37] = t9;
+	} else t9 = $[37];
+	const t10 = pending ? BUSY : void 0;
+	const t11 = feedback.handlers;
+	let t12;
+	if ($[38] !== edge || $[39] !== ownHitSlop) {
+		t12 = ownHitSlop ?? hitSlop(edge, edge);
+		$[38] = edge;
+		$[39] = ownHitSlop;
+		$[40] = t12;
+	} else t12 = $[40];
+	const t13 = shaped.onLayout;
+	const t14 = pending ? void 0 : onLongPress;
+	const t15 = pending ? void 0 : action.onPress;
+	const t16 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlineWidths[size] : void 0, colors.container, shaped.corner, feedback.ring, style);
 	let t17;
-	if ($[41] !== feedback.layer || $[42] !== t16) {
-		t17 = /* @__PURE__ */ jsx(Animated.View, {
-			style: t16,
+	if ($[41] !== shaped.corner) {
+		t17 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[41] = shaped.corner;
+		$[42] = t17;
+	} else t17 = $[42];
+	let t18;
+	if ($[43] !== feedback.layer || $[44] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t17,
 			children: feedback.layer
 		});
-		$[41] = feedback.layer;
-		$[42] = t16;
-		$[43] = t17;
-	} else t17 = $[43];
+		$[43] = feedback.layer;
+		$[44] = t17;
+		$[45] = t18;
+	} else t18 = $[45];
 	const T1 = PendingContent;
 	const T2 = IconStyleContext;
-	const t18 = iconStyleOf(colors.content, size);
-	let t19;
-	if ($[44] !== T2 || $[45] !== children || $[46] !== t18) {
-		t19 = /* @__PURE__ */ jsx(T2, {
-			value: t18,
+	const t19 = iconStyleOf(colors.content, size);
+	let t20;
+	if ($[46] !== T2 || $[47] !== children || $[48] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T2, {
+			value: t19,
 			children
 		});
-		$[44] = T2;
-		$[45] = children;
-		$[46] = t18;
-		$[47] = t19;
-	} else t19 = $[47];
-	let t20;
-	if ($[48] !== T1 || $[49] !== pending || $[50] !== t19) {
-		t20 = /* @__PURE__ */ jsx(T1, {
+		$[46] = T2;
+		$[47] = children;
+		$[48] = t19;
+		$[49] = t20;
+	} else t20 = $[49];
+	let t21;
+	if ($[50] !== T1 || $[51] !== pending || $[52] !== t20) {
+		t21 = /* @__PURE__ */ jsx(T1, {
 			isPending: pending,
-			children: t19
+			children: t20
 		});
-		$[48] = T1;
-		$[49] = pending;
-		$[50] = t19;
-		$[51] = t20;
-	} else t20 = $[51];
-	let t21;
-	if ($[52] !== colors || $[53] !== pending || $[54] !== ringLabel || $[55] !== size) {
-		t21 = pending ? /* @__PURE__ */ jsx(PendingRing, {
+		$[50] = T1;
+		$[51] = pending;
+		$[52] = t20;
+		$[53] = t21;
+	} else t21 = $[53];
+	let t22;
+	if ($[54] !== colors || $[55] !== pending || $[56] !== ringLabel || $[57] !== size) {
+		t22 = pending ? /* @__PURE__ */ jsx(PendingRing, {
 			color: colors.content,
 			diameter: ICON_SIZES[size],
 			label: ringLabel
 		}) : null;
-		$[52] = colors;
-		$[53] = pending;
-		$[54] = ringLabel;
-		$[55] = size;
-		$[56] = t21;
-	} else t21 = $[56];
-	let t22;
-	if ($[57] !== T0 || $[58] !== feedback.handlers || $[59] !== isDisabled || $[60] !== props || $[61] !== shaped.onLayout || $[62] !== t11 || $[63] !== t13 || $[64] !== t14 || $[65] !== t15 || $[66] !== t17 || $[67] !== t20 || $[68] !== t21 || $[69] !== t7 || $[70] !== t8 || $[71] !== t9) {
-		t22 = /* @__PURE__ */ jsxs(T0, {
-			role: t7,
-			...t8,
+		$[54] = colors;
+		$[55] = pending;
+		$[56] = ringLabel;
+		$[57] = size;
+		$[58] = t22;
+	} else t22 = $[58];
+	let t23;
+	if ($[59] !== T0 || $[60] !== feedback.handlers || $[61] !== isDisabled || $[62] !== props || $[63] !== shaped.onLayout || $[64] !== t10 || $[65] !== t12 || $[66] !== t14 || $[67] !== t15 || $[68] !== t16 || $[69] !== t18 || $[70] !== t21 || $[71] !== t22 || $[72] !== t8 || $[73] !== t9) {
+		t23 = /* @__PURE__ */ jsxs(T0, {
+			role: t8,
 			...t9,
-			...props,
 			...t10,
+			...props,
+			...t11,
 			disabled: isDisabled,
-			hitSlop: t11,
-			onLayout: t12,
-			onLongPress: t13,
-			onPress: t14,
-			style: t15,
+			hitSlop: t12,
+			onLayout: t13,
+			onLongPress: t14,
+			onPress: t15,
+			style: t16,
 			children: [
-				t17,
-				t20,
-				t21
+				t18,
+				t21,
+				t22
 			]
 		});
-		$[57] = T0;
-		$[58] = feedback.handlers;
-		$[59] = isDisabled;
-		$[60] = props;
-		$[61] = shaped.onLayout;
-		$[62] = t11;
-		$[63] = t13;
-		$[64] = t14;
-		$[65] = t15;
-		$[66] = t17;
-		$[67] = t20;
-		$[68] = t21;
-		$[69] = t7;
-		$[70] = t8;
-		$[71] = t9;
-		$[72] = t22;
-	} else t22 = $[72];
-	return t22;
+		$[59] = T0;
+		$[60] = feedback.handlers;
+		$[61] = isDisabled;
+		$[62] = props;
+		$[63] = shaped.onLayout;
+		$[64] = t10;
+		$[65] = t12;
+		$[66] = t14;
+		$[67] = t15;
+		$[68] = t16;
+		$[69] = t18;
+		$[70] = t21;
+		$[71] = t22;
+		$[72] = t8;
+		$[73] = t9;
+		$[74] = t23;
+	} else t23 = $[74];
+	return t23;
 }
 function iconStyleOf(color, size) {
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","StyleSheet","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","palettesOf","BUSY","PendingContent","PendingRing","usePending","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","IconButtonProps","Omit","children","disableRipple","isDisabled","ref","size","IconButtonSize","style","variant","IconButtonVariant","DISABLED","Readonly","Record","filled","outlined","standard","tonal","ICON_SIZES","lg","md","xl","xs","xxl","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexShrink","justifyContent","outlineWidths","borderWidth","sizesOf","sizing","square","edge","height","width","IconButton","t0","$","_c","defaultSelected","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","pendingLabel","props","t1","t2","t3","t4","t5","type","isPending","undefined","theme","pending","ringLabel","isToggle","t6","action","colors","feedback","color","content","disabled","radii","shaped","pressed","pill","T0","t7","t8","t9","t10","handlers","t11","t12","t13","t14","t15","container","corner","ring","t16","clip","t17","layer","T1","T2","t18","iconStyleOf","t19","t20","t21","t22","_c"],"sources":["../../../src/components/icon-button/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 { StyleSheet } 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'\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  PendingContent,\n  PendingRing,\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'\n\n// The icon buttons spec page's four styles at its five sizes, as kanso-ui's\n// IconButton draws them: Button's chrome around a single icon. The pairs are\n// the page's: filled on primary, tonal on secondary container, outlined with\n// an outline-variant rule and an on-surface-variant icon, and standard,\n// transparent, with the same icon over whatever it sits on. Disabled is\n// Button's, on-surface at the two disabled opacities, and a standard button\n// takes the text button's colour since neither has a container.\n//\n// The sizes are the page's XS to XL at Button's five heights, so the two line\n// up in a row: a square of 32, 40, 56, 96 or 136dp holding an icon of 20, 24,\n// 24, 32 or 40dp. The two middle sizes share one icon, and the container\n// alone grows between them. The two smallest take presses over a 48dp target\n// through `hitSlop`, which is the page's floor for them.\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 icon and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, a standard one stays\n// transparent while its icon moves to primary, and an outlined one swaps its\n// rule for the inverse surface pair. So a selected filled toggle looks like a\n// plain filled button, and an unselected one does not.\n//\n// **A pending button keeps its place**, as Button's does: the icon is hidden\n// where it stands and an indeterminate ring is drawn over it, in the icon's\n// colour and at the icon's size, which is what web's `1em` reads there. The\n// button keeps its focus and its ring, reports itself busy and takes no\n// press until it clears, and src/button's pending.tsx says the change out\n// loud.\n//\n// **The corner morphs from a circle to a rounded square.** A press tightens\n// it to the size's pressed corner, 8dp for the two small sizes, 12dp at\n// `lg` and 16dp at the two large, and a selected toggle rests there, which is\n// the page's round-to-square morph. It eases as Button's does.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with Button.\n\ntype IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) &\n  Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {\n    /**\n     * What the button does, in words. Required rather than optional: an icon\n     * on its own has no accessible name, so without this the control\n     * announces nothing at all.\n     */\n    readonly 'aria-label': string\n    /**\n     * The icon. The button hands it its colour and the page's icon size for\n     * the button's size through `useIconStyle()`.\n     */\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     * Draws the button disabled, and takes no presses.\n     * @default false\n     */\n    readonly isDisabled?: boolean\n    readonly ref?: Ref<View>\n    /**\n     * Control size: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the icon buttons spec page's XS to XL, and the same heights `Button`\n     * uses, so the two line up beside each other in a row. The icon is 20dp,\n     * 24dp, 24dp, 32dp and 40dp in turn.\n     * @default 'md'\n     */\n    readonly size?: IconButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * `standard` is transparent and tints what it sits on; `outlined` is\n     * transparent with a rule around it; `filled` and `tonal` carry a\n     * container of their own.\n     * @default 'standard'\n     */\n    readonly variant?: IconButtonVariant\n  }\n\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal'\n\n// The disabled container each variant draws. Filled and tonal share the\n// page's one disabled container, and standard draws the text button's\n// colour, which is the icon alone.\nconst DISABLED: Readonly<Record<IconButtonVariant, PaletteName>> = {\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  standard: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size holds, 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<IconButtonSize, number>> = {\n  lg: 24,\n  md: 24,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// Which container a toggle draws, selected and not. An unselected outlined,\n// standard or tonal toggle is the plain button of that variant.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    IconButtonVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  standard: { selected: 'standardToggleSelected', unselected: 'standard' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The icon sits in the middle of a square that a row never squeezes.\n  base: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n// The outlined rule's width at each size, Button's.\nconst outlineWidths = StyleSheet.create({\n  lg: { borderWidth: OUTLINE_WIDTHS.lg },\n  md: { borderWidth: OUTLINE_WIDTHS.md },\n  xl: { borderWidth: OUTLINE_WIDTHS.xl },\n  xs: { borderWidth: OUTLINE_WIDTHS.xs },\n  xxl: { borderWidth: OUTLINE_WIDTHS.xxl },\n})\n\n// Square, so one control height sets both edges.\nconst sizesOf = themedStyles(({ sizing }) => {\n  function square(size: IconButtonSize): ViewStyle {\n    const edge = sizing[HEIGHTS[size]]\n\n    return { height: edge, width: edge }\n  }\n\n  return StyleSheet.create({\n    lg: square('lg'),\n    md: square('md'),\n    xl: square('xl'),\n    xs: square('xs'),\n    xxl: square('xxl'),\n  })\n})\n\n/**\n * A button that is an icon, at five control heights, with web's props and\n * values. Given `href` it is a link with the same appearance, and given\n * `isSelected`, `defaultSelected` or `onChange` it is a toggle, which reports\n * its state to a screen reader and draws the page's second pair of colour\n * roles for its variant. The three forms are exclusive, so a toggle given\n * `href` does not compile.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <Icon />\n * </IconButton>\n * ```\n *\n * The two sizes under 48dp, `xs` and `md`, take presses over a 48dp target\n * through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\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  size = 'md',\n  style,\n  type,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  const theme = useTheme()\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.\n  const isToggle =\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        : 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, sizing } = theme\n  const edge = sizing[HEIGHTS[size]]\n  const shaped = useCorner(\n    feedback.pressed || action.selected\n      ? radii[PRESSED_CORNERS[size]]\n      : radii.pill,\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(edge, edge)}\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' ? outlineWidths[size] : undefined,\n        colors.container,\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      <PendingContent isPending={pending}>\n        <IconStyleContext value={iconStyleOf(colors.content, size)}>\n          {children}\n        </IconStyleContext>\n      </PendingContent>\n      {pending ? (\n        <PendingRing\n          color={colors.content}\n          diameter={ICON_SIZES[size]}\n          label={ringLabel}\n        />\n      ) : null}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: IconButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\nexport { IconButton }\nexport type { IconButtonProps, IconButtonSize, IconButtonVariant }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","PressableProps","StyleProp","View","ViewStyle","AnimatedStyle","StyleSheet","Animated","ButtonLinkForm","ButtonPressForm","ButtonToggleForm","PaletteName","IconStyle","AnimatedPressable","buttonStyles","HEIGHTS","OUTLINE_WIDTHS","PRESSED_CORNERS","toggleState","useButtonAction","useCorner","palettesOf","BUSY","PendingContent","PendingRing","usePending","IconStyleContext","hitSlop","usePressFeedback","useTheme","composeStyles","themedStyles","IconButtonProps","Omit","children","disableRipple","isDisabled","ref","size","IconButtonSize","style","variant","IconButtonVariant","DISABLED","Readonly","Record","filled","outlined","standard","tonal","ICON_SIZES","lg","md","xl","xs","xxl","TOGGLE_PALETTES","selected","unselected","styles","create","base","alignItems","flexShrink","justifyContent","outlineWidths","borderWidth","sizesOf","sizing","square","edge","height","width","IconButton","t0","$","_c","defaultSelected","href","isSelected","onBlur","onChange","onFocus","onHoverIn","onHoverOut","onLayout","onLongPress","onPress","onPressIn","onPressOut","ownHitSlop","pendingLabel","props","slot","t1","t2","t3","t4","t5","type","isPending","undefined","theme","pending","ringLabel","isToggle","t6","t7","action","colors","feedback","color","content","disabled","radii","shaped","pressed","pill","T0","t8","t9","t10","t11","handlers","t12","t13","t14","t15","t16","container","corner","ring","t17","clip","t18","layer","T1","T2","t19","iconStyleOf","t20","t21","t22","t23","_c"],"sources":["../../../src/components/icon-button/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 { StyleSheet } 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'\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  PendingContent,\n  PendingRing,\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'\n\n// The icon buttons spec page's four styles at its five sizes, as kanso-ui's\n// IconButton draws them: Button's chrome around a single icon. The pairs are\n// the page's: filled on primary, tonal on secondary container, outlined with\n// an outline-variant rule and an on-surface-variant icon, and standard,\n// transparent, with the same icon over whatever it sits on. Disabled is\n// Button's, on-surface at the two disabled opacities, and a standard button\n// takes the text button's colour since neither has a container.\n//\n// The sizes are the page's XS to XL at Button's five heights, so the two line\n// up in a row: a square of 32, 40, 56, 96 or 136dp holding an icon of 20, 24,\n// 24, 32 or 40dp. The two middle sizes share one icon, and the container\n// alone grows between them. The two smallest take presses over a 48dp target\n// through `hitSlop`, which is the page's floor for them.\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 icon and takes primary once selected, a tonal one moves\n// from the secondary container pair to secondary, a standard one stays\n// transparent while its icon moves to primary, and an outlined one swaps its\n// rule for the inverse surface pair. So a selected filled toggle looks like a\n// plain filled button, and an unselected one does not.\n//\n// **A pending button keeps its place**, as Button's does: the icon is hidden\n// where it stands and an indeterminate ring is drawn over it, in the icon's\n// colour and at the icon's size, which is what web's `1em` reads there. The\n// button keeps its focus and its ring, reports itself busy and takes no\n// press until it clears, and src/button's pending.tsx says the change out\n// loud.\n//\n// **The corner morphs from a circle to a rounded square.** A press tightens\n// it to the size's pressed corner, 8dp for the two small sizes, 12dp at\n// `lg` and 16dp at the two large, and a selected toggle rests there, which is\n// the page's round-to-square morph. It eases as Button's does.\n//\n// The forms, the toggle's state, what a press does and the corner's ease are\n// src/button's, shared with Button.\n\ntype IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) &\n  Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {\n    /**\n     * What the button does, in words. Required rather than optional: an icon\n     * on its own has no accessible name, so without this the control\n     * announces nothing at all.\n     */\n    readonly 'aria-label': string\n    /**\n     * The icon. The button hands it its colour and the page's icon size for\n     * the button's size through `useIconStyle()`.\n     */\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     * 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     * Control size: `xs` 32dp, `md` 40dp, `lg` 56dp, `xl` 96dp, `xxl` 136dp,\n     * the icon buttons spec page's XS to XL, and the same heights `Button`\n     * uses, so the two line up beside each other in a row. The icon is 20dp,\n     * 24dp, 24dp, 32dp and 40dp in turn.\n     * @default 'md'\n     */\n    readonly size?: IconButtonSize\n    readonly style?: StyleProp<ViewStyle>\n    /**\n     * `standard` is transparent and tints what it sits on; `outlined` is\n     * transparent with a rule around it; `filled` and `tonal` carry a\n     * container of their own.\n     * @default 'standard'\n     */\n    readonly variant?: IconButtonVariant\n  }\n\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl'\n\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal'\n\n// The disabled container each variant draws. Filled and tonal share the\n// page's one disabled container, and standard draws the text button's\n// colour, which is the icon alone.\nconst DISABLED: Readonly<Record<IconButtonVariant, PaletteName>> = {\n  filled: 'filledDisabled',\n  outlined: 'outlinedDisabled',\n  standard: 'textDisabled',\n  tonal: 'filledDisabled',\n}\n\n// The icon each size holds, 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<IconButtonSize, number>> = {\n  lg: 24,\n  md: 24,\n  xl: 32,\n  xs: 20,\n  xxl: 40,\n}\n\n// Which container a toggle draws, selected and not. An unselected outlined,\n// standard or tonal toggle is the plain button of that variant.\nconst TOGGLE_PALETTES: Readonly<\n  Record<\n    IconButtonVariant,\n    Readonly<Record<'selected' | 'unselected', PaletteName>>\n  >\n> = {\n  filled: { selected: 'filledToggleSelected', unselected: 'filledToggle' },\n  outlined: { selected: 'outlinedToggleSelected', unselected: 'outlined' },\n  standard: { selected: 'standardToggleSelected', unselected: 'standard' },\n  tonal: { selected: 'tonalToggleSelected', unselected: 'tonal' },\n}\n\nconst styles = StyleSheet.create({\n  // The icon sits in the middle of a square that a row never squeezes.\n  base: {\n    alignItems: 'center',\n    flexShrink: 0,\n    justifyContent: 'center',\n  },\n})\n\n// The outlined rule's width at each size, Button's.\nconst outlineWidths = StyleSheet.create({\n  lg: { borderWidth: OUTLINE_WIDTHS.lg },\n  md: { borderWidth: OUTLINE_WIDTHS.md },\n  xl: { borderWidth: OUTLINE_WIDTHS.xl },\n  xs: { borderWidth: OUTLINE_WIDTHS.xs },\n  xxl: { borderWidth: OUTLINE_WIDTHS.xxl },\n})\n\n// Square, so one control height sets both edges.\nconst sizesOf = themedStyles(({ sizing }) => {\n  function square(size: IconButtonSize): ViewStyle {\n    const edge = sizing[HEIGHTS[size]]\n\n    return { height: edge, width: edge }\n  }\n\n  return StyleSheet.create({\n    lg: square('lg'),\n    md: square('md'),\n    xl: square('xl'),\n    xs: square('xs'),\n    xxl: square('xxl'),\n  })\n})\n\n/**\n * A button that is an icon, at five control heights, with web's props and\n * values. Given `href` it is a link with the same appearance, and given\n * `isSelected`, `defaultSelected` or `onChange` it is a toggle, which reports\n * its state to a screen reader and draws the page's second pair of colour\n * roles for its variant. The three forms are exclusive, so a toggle given\n * `href` does not compile.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <Icon />\n * </IconButton>\n * ```\n *\n * The two sizes under 48dp, `xs` and `md`, take presses over a 48dp target\n * through `hitSlop`, which a `hitSlop` of the call site's own replaces.\n * `style`, `ref` and `testID` land on the `Pressable`.\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  hitSlop: ownHitSlop,\n  href,\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  size = 'md',\n  slot,\n  style,\n  type,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  const theme = useTheme()\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.\n  const isToggle =\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        : 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, sizing } = theme\n  const edge = sizing[HEIGHTS[size]]\n  const shaped = useCorner(\n    feedback.pressed || action.selected\n      ? radii[PRESSED_CORNERS[size]]\n      : radii.pill,\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(edge, edge)}\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' ? outlineWidths[size] : undefined,\n        colors.container,\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      <PendingContent isPending={pending}>\n        <IconStyleContext value={iconStyleOf(colors.content, size)}>\n          {children}\n        </IconStyleContext>\n      </PendingContent>\n      {pending ? (\n        <PendingRing\n          color={colors.content}\n          diameter={ICON_SIZES[size]}\n          label={ringLabel}\n        />\n      ) : null}\n    </AnimatedPressable>\n  )\n}\n\nfunction iconStyleOf(color: string, size: IconButtonSize): IconStyle {\n  return { color, size: ICON_SIZES[size] }\n}\n\nexport { IconButton }\nexport type { IconButtonProps, IconButtonSize, IconButtonVariant }\n"],"mappings":"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"}

package/dist/components/link/index.js

@@ -178,7 +178,7 @@ function webPropsOf(isDisabled, setHovered, setRingShown) {
 			if (!isDisabled && event.key === "Enter" && !event.repeat) event.currentTarget.click();
 		},
 		onPointerEnter: (event) => {
-			setHovered(event.pointerType !== "touch");
+			setHovered(event.nativeEvent.pointerType !== "touch");
 		},
 		onPointerLeave: () => {
 			setHovered(false);