@hzblj/kara-components 0.0.0-stage → 0.2.0

package/src/molecules/pager/pager.android.tsx

@@ -0,0 +1,95 @@
+import {HorizontalPager, type HorizontalPagerHandle} from '@expo/ui/jetpack-compose'
+import {fillMaxSize, type ModifierConfig, testID as testIdModifier, weight} from '@expo/ui/jetpack-compose/modifiers'
+import {spacing} from '@hzblj/kara-theme'
+import {Children, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+import {HStack} from '../../atoms/h-stack'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import type {PagerComponent, PagerProps} from './pager.types'
+
+const DOT_SIZE = 6
+
+/** Compose ships no page indicator, so the dots are composed out of atoms. */
+const PagerDots = ({count, current}: {count: number; current: number}) => (
+  <HStack align="center" py="s12" spacing="s6" wide>
+    {Array.from({length: count}, (_, index) => (
+      <VStack
+        bg={index === current ? 'content.primary' : 'fill.tertiary'}
+        borderRadius="full"
+        h={DOT_SIZE}
+        key={index}
+        w={DOT_SIZE}
+      />
+    ))}
+  </HStack>
+)
+
+export const Pager: PagerComponent = ({
+  children,
+  indicators = true,
+  onPageChange,
+  page,
+  pageSpacing,
+  scrollEnabled = true,
+  testID,
+}: PagerProps) => {
+  useHostGuard('Pager')
+
+  const pagerRef = useRef<HorizontalPagerHandle>(null)
+  const settledPage = useRef(page ?? 0)
+  const [currentPage, setCurrentPage] = useState(page ?? 0)
+
+  /**
+   * Compose reads `initialPage` only at mount, so a controlled `page` has to be driven through the
+   * ref. Guarded on the last settled page: without it, the `onSettledPageChange` this component just
+   * reported would come back as a fresh `page` and re-scroll to where the pager already is.
+   */
+  useEffect(() => {
+    if (page === undefined || page === settledPage.current) {
+      return
+    }
+
+    settledPage.current = page
+    void pagerRef.current?.animateScrollToPage(page)
+  }, [page])
+
+  const onSettledPageChange = useCallback(
+    (next: number) => {
+      settledPage.current = next
+      onPageChange?.(next)
+    },
+    [onPageChange]
+  )
+
+  // `weight` only means anything inside the Column the indicators add; standalone, the pager fills.
+  const modifiers = useMemo<ModifierConfig[]>(
+    () => [indicators ? weight(1) : fillMaxSize(), ...(testID ? [testIdModifier(testID)] : [])],
+    [indicators, testID]
+  )
+
+  const pager = (
+    <HorizontalPager
+      initialPage={page ?? 0}
+      modifiers={modifiers}
+      onCurrentPageChange={indicators ? setCurrentPage : undefined}
+      onSettledPageChange={onSettledPageChange}
+      pageSpacing={pageSpacing === undefined ? undefined : spacing[pageSpacing]}
+      ref={pagerRef}
+      userScrollEnabled={scrollEnabled}
+    >
+      {children}
+    </HorizontalPager>
+  )
+
+  if (!indicators) {
+    return pager
+  }
+
+  return (
+    <VStack tall wide>
+      {pager}
+      <PagerDots count={Children.count(children)} current={currentPage} />
+    </VStack>
+  )
+}

package/src/molecules/pager/pager.ios.tsx

@@ -0,0 +1,43 @@
+import {TabView} from '@expo/ui/swift-ui'
+import {type ModifierConfig, tabViewStyle} from '@expo/ui/swift-ui/modifiers'
+import {Children, useCallback, useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {PagerComponent, PagerProps} from './pager.types'
+
+export const Pager: PagerComponent = ({children, indicators = true, onPageChange, page, testID}: PagerProps) => {
+  useHostGuard('Pager')
+
+  const modifiers = useMemo<ModifierConfig[]>(
+    () => [tabViewStyle({indexDisplayMode: indicators ? 'always' : 'never', type: 'page'})],
+    [indicators]
+  )
+
+  const onSelectionChange = useCallback((value: string) => onPageChange?.(Number(value)), [onPageChange])
+
+  /**
+   * A `TabView` identifies its pages by string, so each child's index stands in as its value. The
+   * component also demands at least one element, hence the guard below.
+   */
+  const tabs = Children.toArray(children).map((child, index) => (
+    <TabView.Tab key={index} value={String(index)}>
+      {child}
+    </TabView.Tab>
+  ))
+
+  if (tabs.length === 0) {
+    return null
+  }
+
+  return (
+    <TabView
+      defaultSelection="0"
+      modifiers={modifiers}
+      onSelectionChange={onSelectionChange}
+      selection={page === undefined ? undefined : String(page)}
+      testID={testID}
+    >
+      {tabs}
+    </TabView>
+  )
+}

package/src/molecules/pager/pager.types.ts

@@ -0,0 +1,34 @@
+import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+/**
+ * A swipeable, snapping pager: SwiftUI's `TabView` in its page style, Compose's `HorizontalPager`.
+ *
+ * Pages are addressed by their index rather than by a name, because Compose's pager is index-native
+ * and SwiftUI's tab values are strings — synthesising the string from the child's position is
+ * lossless, whereas inventing indices for named tabs on Compose would not be. Children are therefore
+ * plain nodes with no `Pager.Page` part to wrap them in: a page carries no props of its own, so the
+ * ceremony would buy nothing.
+ */
+export type PagerProps = {
+  children?: ReactNode
+  /**
+   * Page dots. iOS draws SwiftUI's own, over the bottom edge; Compose has no built-in indicator, so
+   * Android composes the dots and places them below the pager, which is where Material puts them.
+   */
+  indicators?: boolean
+  /** Fires once a swipe or a programmatic move has settled, never mid-gesture. */
+  onPageChange?: (page: number) => void
+  /** Zero-based. Controlled when passed; otherwise the pager just starts at 0 and owns its position. */
+  page?: number
+  /** Android only — a SwiftUI page-style `TabView` has no gap between pages. */
+  pageSpacing?: SpaceSize
+  /**
+   * Android only. SwiftUI can only disable a `TabView` as a whole, which would take the pages'
+   * content down with the swipe, so iOS always stays swipeable.
+   */
+  scrollEnabled?: boolean
+  testID?: string
+}
+
+export type PagerComponent = (props: PagerProps) => ReactNode

package/src/molecules/radio-group/index.ts

@@ -0,0 +1,2 @@
+export * from './radio-group'
+export * from './radio-group.types'

package/src/molecules/radio-group/radio-group.android.tsx

@@ -0,0 +1,33 @@
+import {Text as ComposeText, RadioButton, Row} from '@expo/ui/jetpack-compose'
+import {clickable, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import type {RadioGroupComponent, RadioGroupProps} from './radio-group.types'
+
+export const RadioGroup: RadioGroupComponent = ({onValueChange, options, value}: RadioGroupProps) => {
+  useHostGuard('RadioGroup')
+
+  const theme = useAppTheme()
+
+  return (
+    <VStack spacing="s4" wide>
+      {options.map(option => (
+        <Row
+          key={option.value}
+          modifiers={[fillMaxWidth(), clickable(() => onValueChange?.(option.value))]}
+          verticalAlignment="center"
+        >
+          <RadioButton
+            colors={{selectedColor: theme.color('fill.accent.primary')}}
+            onClick={() => onValueChange?.(option.value)}
+            selected={option.value === value}
+          />
+          <ComposeText color={theme.colorString('content.primary')} style={theme.typography.body}>
+            {option.label}
+          </ComposeText>
+        </Row>
+      ))}
+    </VStack>
+  )
+}

package/src/molecules/radio-group/radio-group.ios.tsx

@@ -0,0 +1,23 @@
+import {HStack} from '../../atoms/h-stack'
+import {Spacer} from '../../atoms/spacer'
+import {Text} from '../../atoms/text'
+import {VStack} from '../../atoms/v-stack'
+import {Glyph} from '../../glyph'
+import {useHostGuard} from '../../host-context'
+import type {RadioGroupComponent, RadioGroupProps} from './radio-group.types'
+
+export const RadioGroup: RadioGroupComponent = ({onValueChange, options, value}: RadioGroupProps) => {
+  useHostGuard('RadioGroup')
+
+  return (
+    <VStack spacing="s4" wide>
+      {options.map(option => (
+        <HStack align="center" key={option.value} onPress={() => onValueChange?.(option.value)} py="s8" wide>
+          <Text>{option.label}</Text>
+          <Spacer />
+          {option.value === value ? <Glyph color="content.accent" name="check" size="s20" /> : null}
+        </HStack>
+      ))}
+    </VStack>
+  )
+}

package/src/molecules/radio-group/radio-group.types.ts

@@ -0,0 +1,14 @@
+import type {ReactNode} from 'react'
+
+export type RadioOption = {
+  label: string
+  value: string
+}
+
+export type RadioGroupProps = {
+  onValueChange?: (value: string) => void
+  options: RadioOption[]
+  value: string
+}
+
+export type RadioGroupComponent = (props: RadioGroupProps) => ReactNode

package/src/molecules/rn-tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './rn-tooltip'
+export * from './rn-tooltip.types'

package/src/molecules/rn-tooltip/rn-tooltip.android.tsx

@@ -0,0 +1,95 @@
+import {Text as ComposeText, Host, RNHostView, Row, TextButton} from '@expo/ui/jetpack-compose'
+
+import {TooltipBox} from '@hzblj/kara-native/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {Button} from '../../atoms/button'
+import {HostBoundary} from '../../host-context'
+import type {RnTooltipAction, RnTooltipComponent, RnTooltipProps} from './rn-tooltip.types'
+
+/** Material's rich tooltip width, in dp. */
+const MAX_WIDTH = 280
+
+const ACTIONS_ARRANGEMENT = {spacedBy: 8}
+
+const TooltipActionButton = ({action}: {action: RnTooltipAction}) => {
+  const theme = useAppTheme()
+
+  if (action.variant === 'primary' || action.variant === 'secondary') {
+    return (
+      <Button
+        label={action.label}
+        onPress={action.onPress}
+        variant={action.variant === 'primary' ? 'accent' : 'secondary'}
+        wide={false}
+      />
+    )
+  }
+
+  return (
+    <TextButton onClick={action.onPress}>
+      <ComposeText color={theme.colorString('content.accent')} style={theme.typography.footnoteMedium}>
+        {action.label}
+      </ComposeText>
+    </TextButton>
+  )
+}
+
+/**
+ * Material 3's rich tooltip below the anchor, in its own host — so the anchor is a React Native view carried back in
+ * through `RNHostView`. Any touch outside asks for dismissal, the start of a scroll included; that is Material's
+ * behaviour, where iOS keeps the tooltip through a scroll.
+ */
+export const RnTooltip: RnTooltipComponent = ({
+  actions,
+  actionsAlignment = 'end',
+  boundaryInsets,
+  children,
+  message,
+  onDismiss,
+  onShown,
+  title,
+  visible,
+}: RnTooltipProps) => {
+  const theme = useAppTheme()
+
+  return (
+    <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents seedColor={theme.materialSeed}>
+      <HostBoundary>
+        <TooltipBox
+          actionsAlignment={actionsAlignment}
+          boundaryInsets={boundaryInsets}
+          containerColor={theme.color('surface.primary')}
+          isPresented={visible}
+          maxWidth={MAX_WIDTH}
+          onDismissRequest={onDismiss}
+          onShown={onShown}
+        >
+          {title ? (
+            <TooltipBox.Title>
+              <ComposeText color={theme.colorString('content.primary')} style={theme.typography.subheadlineMedium}>
+                {title}
+              </ComposeText>
+            </TooltipBox.Title>
+          ) : null}
+          {message ? (
+            <TooltipBox.Text>
+              <ComposeText color={theme.colorString('content.secondary')} style={theme.typography.footnote}>
+                {message}
+              </ComposeText>
+            </TooltipBox.Text>
+          ) : null}
+          {actions?.length ? (
+            <TooltipBox.Action>
+              <Row horizontalArrangement={ACTIONS_ARRANGEMENT} verticalAlignment="center">
+                {actions.map(action => (
+                  <TooltipActionButton action={action} key={action.label} />
+                ))}
+              </Row>
+            </TooltipBox.Action>
+          ) : null}
+          <RNHostView matchContents>{children}</RNHostView>
+        </TooltipBox>
+      </HostBoundary>
+    </Host>
+  )
+}

package/src/molecules/rn-tooltip/rn-tooltip.ios.tsx

@@ -0,0 +1,67 @@
+import {
+  Tooltip as NativeTooltip,
+  type TooltipAction as NativeTooltipAction,
+  type TooltipTextStyle,
+} from '@hzblj/kara-native/swift-ui'
+import {type ResolvedTextStyle, resolvePaletteColor, useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useMemo} from 'react'
+import type {RnTooltipComponent, RnTooltipProps} from './rn-tooltip.types'
+
+/** The bubble's width before it is narrowed to fit the window. */
+const BUBBLE_WIDTH = 250
+
+const textStyle = ({fontFamily, fontSize, lineHeight, weight}: ResolvedTextStyle): TooltipTextStyle => ({
+  fontFamily,
+  fontSize,
+  fontWeight: weight,
+  letterSpacing: 0,
+  lineHeight,
+})
+
+export const RnTooltip: RnTooltipComponent = ({
+  actions,
+  actionsAlignment = 'end',
+  boundaryInsets,
+  children,
+  message,
+  onDismiss,
+  onShown,
+  title,
+  visible,
+}: RnTooltipProps) => {
+  const theme = useAppTheme()
+
+  const nativeActions = useMemo<NativeTooltipAction[]>(
+    () => (actions ?? []).map(({label, variant = 'link'}) => ({label, variant})),
+    [actions]
+  )
+
+  const onAction = useCallback((index: number) => actions?.[index]?.onPress(), [actions])
+
+  return (
+    <NativeTooltip
+      actions={nativeActions}
+      actionStyle={textStyle(theme.typography.footnoteMedium)}
+      actionsAlignment={actionsAlignment}
+      boundaryInsets={boundaryInsets}
+      bubbleColor={theme.color('surface.primary')}
+      isPresented={visible}
+      linkColor={theme.color('content.accent')}
+      message={message || undefined}
+      messageColor={theme.color('content.secondary')}
+      messageStyle={textStyle(theme.typography.footnote)}
+      onAction={onAction}
+      onDismissRequest={onDismiss}
+      onShown={onShown}
+      primaryTint={theme.color('fill.accent.primary')}
+      secondaryTint={theme.color('content.primary')}
+      shadowColor={resolvePaletteColor(theme, theme.shadow.snackbar.drop)}
+      title={title || undefined}
+      titleColor={theme.color('content.primary')}
+      titleStyle={textStyle(theme.typography.subheadlineMedium)}
+      width={BUBBLE_WIDTH}
+    >
+      {children}
+    </NativeTooltip>
+  )
+}

package/src/molecules/rn-tooltip/rn-tooltip.types.ts

@@ -0,0 +1,39 @@
+import type {ReactElement, ReactNode} from 'react'
+
+export type RnTooltipActionVariant = 'link' | 'primary' | 'secondary'
+
+export type RnTooltipAction = {
+  label: string
+  onPress: () => void
+  /** `link` by default — an underlined text. `primary`/`secondary` are small filled/outlined buttons. */
+  variant?: RnTooltipActionVariant
+}
+
+/** `outside`: a touch outside the bubble. `anchorHidden`: the anchor's centre left the visible area. */
+export type RnTooltipDismissReason = 'anchorHidden' | 'outside'
+
+/**
+ * A rich tooltip — title, message, actions — anchored below a React Native view, and drawn above every sibling.
+ * Controlled: it never hides itself. `onDismiss` reports why it should, and the caller turns `visible` off. The React
+ * Native tier, unlike `Tooltip`, whose anchor is a native view inside a host.
+ */
+export type RnTooltipProps = {
+  actions?: RnTooltipAction[]
+  /** Which end of the bubble the actions sit at. `end` by default. */
+  actionsAlignment?: 'end' | 'start'
+  /**
+   * Insets from the window's top and bottom that the anchor's centre must stay inside — a header or a tab bar over the
+   * content. Past them the tooltip asks to be dismissed with `anchorHidden`.
+   */
+  boundaryInsets?: {bottom?: number; top?: number}
+  /** The anchor — a single React Native view. */
+  children: ReactElement
+  message?: string
+  onDismiss: (reason: RnTooltipDismissReason) => void
+  /** The appear animation finished. */
+  onShown?: () => void
+  title?: string
+  visible: boolean
+}
+
+export type RnTooltipComponent = (props: RnTooltipProps) => ReactNode

package/src/molecules/scroll-edge-container/index.ts

@@ -0,0 +1,3 @@
+export {isScrollEdgeEffectAvailable} from '@hzblj/kara-native'
+export * from './scroll-edge-container'
+export * from './scroll-edge-container.types'

package/src/molecules/scroll-edge-container/scroll-edge-container.android.tsx

@@ -0,0 +1,22 @@
+import {Box} from '../../atoms/box'
+import type {ScrollEdgeContainerComponent, ScrollEdgeContainerProps} from './scroll-edge-container.types'
+
+/**
+ * Android has no scroll edge effect, and a React Native scroll view there has no `contentInset` to slide content under
+ * a bar with — so the bars stack above and below the scroll view instead of over it. Give them a background.
+ */
+export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
+  automaticInsets: _automaticInsets,
+  bottomBar,
+  children,
+  effect: _effect,
+  testID,
+  topBar,
+  ...sx
+}: ScrollEdgeContainerProps) => (
+  <Box {...sx} testID={testID}>
+    {topBar}
+    <Box flex={1}>{children}</Box>
+    {bottomBar}
+  </Box>
+)

package/src/molecules/scroll-edge-container/scroll-edge-container.ios.tsx

@@ -0,0 +1,32 @@
+import {ScrollEdgeContainer as NativeScrollEdgeContainer} from '@hzblj/kara-native/swift-ui'
+import {useSx} from '@hzblj/kara-sx'
+import type {ScrollEdgeContainerComponent, ScrollEdgeContainerProps} from './scroll-edge-container.types'
+
+/**
+ * Below iOS 26 the native container still lays the bars out as insets, just without the effect — so a bar wants a
+ * background of its own there; `isScrollEdgeEffectAvailable()` says which case applies.
+ */
+export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
+  automaticInsets,
+  bottomBar,
+  children,
+  effect,
+  testID,
+  topBar,
+  ...sx
+}: ScrollEdgeContainerProps) => {
+  const style = useSx(sx)
+
+  return (
+    <NativeScrollEdgeContainer
+      automaticInsets={automaticInsets}
+      bottomBar={bottomBar}
+      effect={effect}
+      style={style}
+      testID={testID}
+      topBar={topBar}
+    >
+      {children}
+    </NativeScrollEdgeContainer>
+  )
+}

package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts

@@ -0,0 +1,29 @@
+import type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ReactElement, ReactNode} from 'react'
+
+export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-native/swift-ui'
+
+/**
+ * Bars over one React Native scroll view, with the iOS 26 scroll edge effect under them — the system's progressive
+ * blur where content scrolls past a bar. The React Native tier: it needs no host.
+ *
+ * A screen-level container: wrap the screen's scroll view with it. Mounted inside a cell of a virtualized list on iOS
+ * it draws only its bottom bar — the hosted scroll view and the top bar stay blank.
+ */
+export type ScrollEdgeContainerProps = ResponsiveViewSx & {
+  /**
+   * iOS: adds the bars' heights to the scroll view's own `contentInset` and starts it at the top of that inset, so the
+   * content begins below the top bar and scrolls under it. On by default.
+   */
+  automaticInsets?: boolean
+  bottomBar?: ReactNode
+  /** Exactly one React Native scroll view — `RnScrollView`, `RnFlatList`, `RnSectionList`. */
+  children: ReactElement<ScrollEdgeScrollableProps>
+  /** iOS 26: how hard the edge cuts. `soft` by default. */
+  effect?: ScrollEdgeEffect
+  testID?: string
+  topBar?: ReactNode
+}
+
+export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode

package/src/molecules/search-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './search-bar'
+export * from './search-bar.types'

package/src/molecules/search-bar/search-bar.tsx

@@ -0,0 +1,44 @@
+import {useAppTheme} from '@hzblj/kara-theme'
+import {TextInput} from 'react-native'
+
+import {Box} from '../../atoms/box'
+import {Pressable} from '../../atoms/pressable'
+import {RnGlyph} from '../../glyph'
+import type {SearchBarComponent, SearchBarProps} from './search-bar.types'
+
+export const SearchBar: SearchBarComponent = ({
+  onChangeText,
+  placeholder = 'Search',
+  testID,
+  value,
+}: SearchBarProps) => {
+  const theme = useAppTheme()
+
+  return (
+    <Box
+      align="center"
+      bg="fill.quaternary"
+      borderRadius="medium"
+      flexDirection="row"
+      gap="s8"
+      px="s12"
+      py="s8"
+      testID={testID}
+      wide
+    >
+      <RnGlyph color="content.tertiary" name="search" size="s20" />
+      <TextInput
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={theme.color('content.quaternary')}
+        style={[theme.typography.body, {color: theme.color('content.primary'), flex: 1, padding: 0}]}
+        value={value}
+      />
+      {value.length > 0 ? (
+        <Pressable onPress={() => onChangeText?.('')}>
+          <RnGlyph color="content.tertiary" name="close" size="s20" />
+        </Pressable>
+      ) : null}
+    </Box>
+  )
+}

package/src/molecules/search-bar/search-bar.types.ts

@@ -0,0 +1,10 @@
+import type {ReactNode} from 'react'
+
+export type SearchBarProps = {
+  onChangeText?: (text: string) => void
+  placeholder?: string
+  testID?: string
+  value: string
+}
+
+export type SearchBarComponent = (props: SearchBarProps) => ReactNode

package/src/molecules/stepper/index.ts

@@ -0,0 +1,2 @@
+export * from './stepper'
+export * from './stepper.types'

package/src/molecules/stepper/stepper.android.tsx

@@ -0,0 +1,31 @@
+import {useCallback} from 'react'
+import {HStack} from '../../atoms/h-stack'
+import {Spacer} from '../../atoms/spacer'
+import {Text} from '../../atoms/text'
+import {GlyphButton} from '../../glyph'
+import {useHostGuard} from '../../host-context'
+import type {StepperComponent, StepperProps} from './stepper.types'
+
+export const Stepper: StepperComponent = ({
+  label,
+  max = Number.MAX_SAFE_INTEGER,
+  min = Number.MIN_SAFE_INTEGER,
+  onValueChange,
+  step = 1,
+  value,
+}: StepperProps) => {
+  useHostGuard('Stepper')
+
+  const onDecrement = useCallback(() => onValueChange(Math.max(min, value - step)), [min, onValueChange, step, value])
+  const onIncrement = useCallback(() => onValueChange(Math.min(max, value + step)), [max, onValueChange, step, value])
+
+  return (
+    <HStack align="center" spacing="s8" wide>
+      <Text>{label}</Text>
+      <Spacer />
+      <GlyphButton accessibilityLabel="Decrement" disabled={value <= min} name="minus" onPress={onDecrement} />
+      <Text variant="labelMedium">{String(value)}</Text>
+      <GlyphButton accessibilityLabel="Increment" disabled={value >= max} name="plus" onPress={onIncrement} />
+    </HStack>
+  )
+}

package/src/molecules/stepper/stepper.ios.tsx

@@ -0,0 +1,10 @@
+import {Stepper as SwiftUIStepper} from '@expo/ui/swift-ui'
+
+import {useHostGuard} from '../../host-context'
+import type {StepperComponent, StepperProps} from './stepper.types'
+
+export const Stepper: StepperComponent = ({label, max, min, onValueChange, step = 1, value}: StepperProps) => {
+  useHostGuard('Stepper')
+
+  return <SwiftUIStepper label={label} max={max} min={min} onValueChange={onValueChange} step={step} value={value} />
+}

package/src/molecules/stepper/stepper.types.ts

@@ -0,0 +1,12 @@
+import type {ReactNode} from 'react'
+
+export type StepperProps = {
+  label: string
+  max?: number
+  min?: number
+  onValueChange: (value: number) => void
+  step?: number
+  value: number
+}
+
+export type StepperComponent = (props: StepperProps) => ReactNode