@hzblj/kara-components 0.0.0-stage → 0.2.0

package/src/atoms/rn-flat-list/rn-flat-list.types.ts

@@ -0,0 +1,11 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {FlatListProps as RNFlatListProps} from 'react-native'
+
+/**
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
+ * gap belong there — the same split as `RnScrollView`.
+ */
+export type RnFlatListProps<TItem> = ResponsiveViewSx &
+  Omit<RNFlatListProps<TItem>, 'contentContainerStyle' | 'style'> & {
+    content?: ResponsiveViewSx
+  }

package/src/atoms/rn-icon/index.ts

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

package/src/atoms/rn-icon/rn-icon.android.tsx

@@ -0,0 +1,28 @@
+import {iconResourceName} from '@hzblj/kara-native'
+import {IconView} from '@hzblj/kara-native/jetpack-compose'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import type {RnIconComponent, RnIconProps} from './rn-icon.types'
+
+/** An `ImageView` over the app's vector drawable — what a list row wants, rather than a Compose host per row. */
+export const RnIcon: RnIconComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+  testID,
+}: RnIconProps) => {
+  const theme = useAppTheme()
+  const style = useMemo(() => ({height: spacing[size], width: spacing[size]}), [size])
+
+  return (
+    <IconView
+      accessibilityLabel={accessibilityLabel}
+      iconColor={theme.color(color)}
+      resourceName={iconResourceName(name)}
+      style={style}
+      testID={testID}
+    />
+  )
+}

package/src/atoms/rn-icon/rn-icon.ios.tsx

@@ -0,0 +1,28 @@
+import {iconResourceName} from '@hzblj/kara-native'
+import {IconView} from '@hzblj/kara-native/swift-ui'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import type {RnIconComponent, RnIconProps} from './rn-icon.types'
+
+/** A `UIImageView` over the app's asset-catalog icon — what a list row wants, rather than a SwiftUI host per row. */
+export const RnIcon: RnIconComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+  testID,
+}: RnIconProps) => {
+  const theme = useAppTheme()
+  const style = useMemo(() => ({height: spacing[size], width: spacing[size]}), [size])
+
+  return (
+    <IconView
+      accessibilityLabel={accessibilityLabel}
+      assetName={iconResourceName(name)}
+      iconColor={theme.color(color)}
+      style={style}
+      testID={testID}
+    />
+  )
+}

package/src/atoms/rn-icon/rn-icon.types.ts

@@ -0,0 +1,8 @@
+import type {ReactNode} from 'react'
+
+import type {IconProps} from '../icon'
+
+/** The same contract as `Icon`, for the React Native tier — anywhere, no `Screen` or `Island` needed. */
+export type RnIconProps = IconProps
+
+export type RnIconComponent = (props: RnIconProps) => ReactNode

package/src/atoms/rn-scroll-view/index.ts

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

package/src/atoms/rn-scroll-view/rn-scroll-view.tsx

@@ -0,0 +1,32 @@
+import {useSplitSx, useSx} from '@hzblj/kara-sx'
+import {ScrollView as RNScrollView} from 'react-native'
+import type {RnScrollViewComponent, RnScrollViewProps} from './rn-scroll-view.types'
+
+/** Stands in for an absent `content`, because a hook cannot be called conditionally. */
+const NO_SX = {}
+
+export const RnScrollView: RnScrollViewComponent = ({
+  axis = 'vertical',
+  children,
+  content,
+  showsIndicators = true,
+  testID,
+  ...props
+}: RnScrollViewProps) => {
+  const [style, rest] = useSplitSx(props)
+  const contentStyle = useSx(content ?? NO_SX)
+
+  return (
+    <RNScrollView
+      contentContainerStyle={content === undefined ? undefined : contentStyle}
+      horizontal={axis === 'horizontal'}
+      showsHorizontalScrollIndicator={showsIndicators}
+      showsVerticalScrollIndicator={showsIndicators}
+      style={style}
+      testID={testID}
+      {...rest}
+    >
+      {children}
+    </RNScrollView>
+  )
+}

package/src/atoms/rn-scroll-view/rn-scroll-view.types.ts

@@ -0,0 +1,22 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ReactNode} from 'react'
+import type {ScrollViewProps as RNScrollViewProps} from 'react-native'
+import type {ScrollViewAxis} from '../scroll-view'
+
+/**
+ * React Native tier scroll container — the sibling of `RnView`/`RnText`. Use it when the
+ * subtree is React Native and native atoms are embedded through `Island`. For a screen that
+ * is native all the way down, reach for the `ScrollView` atom instead.
+ *
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container,
+ * so padding and gap belong there.
+ */
+export type RnScrollViewProps = ResponsiveViewSx &
+  Omit<RNScrollViewProps, 'contentContainerStyle' | 'horizontal' | 'style'> & {
+    axis?: ScrollViewAxis
+    children?: ReactNode
+    content?: ResponsiveViewSx
+    showsIndicators?: boolean
+  }
+
+export type RnScrollViewComponent = (props: RnScrollViewProps) => ReactNode

package/src/atoms/rn-section-list/index.ts

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

package/src/atoms/rn-section-list/rn-section-list.tsx

@@ -0,0 +1,40 @@
+import {useSplitSx, useSx} from '@hzblj/kara-sx'
+import {type DefaultSectionT, SectionList as RNSectionList} from 'react-native'
+
+import type {RnSectionListProps} from './rn-section-list.types'
+
+/** Stands in for an absent `content`, because a hook cannot be called conditionally. */
+const NO_SX = {}
+
+/**
+ * Sectioned list built on React Native's own `VirtualizedList` rather than FlashList.
+ *
+ * FlashList is the default for lists in this codebase and should stay that way for data rows. This
+ * exists for the case it cannot serve: content that hosts native views. FlashList positions its rows
+ * absolutely and recycles their cells, and an `@expo/ui` host does not survive either — the hosted
+ * view ends up drawn where the layout no longer is. `VirtualizedList` renders its cells in normal flow
+ * inside a scroll view, using blank spacers for the range it has not rendered, so a hosted view stays
+ * exactly where the layout put it.
+ *
+ * Sticky headers default off, unlike React Native, where they are on for vertical lists. A header that
+ * detaches and floats over the content is a deliberate effect, not something a list should do unasked.
+ */
+export const RnSectionList = <TItem, TSection = DefaultSectionT>({
+  content,
+  sections,
+  stickySectionHeadersEnabled = false,
+  ...props
+}: RnSectionListProps<TItem, TSection>) => {
+  const [style, rest] = useSplitSx(props as Record<string, unknown>)
+  const contentStyle = useSx(content ?? NO_SX)
+
+  return (
+    <RNSectionList<TItem, TSection>
+      sections={sections}
+      {...rest}
+      contentContainerStyle={content === undefined ? undefined : contentStyle}
+      stickySectionHeadersEnabled={stickySectionHeadersEnabled}
+      style={style}
+    />
+  )
+}

package/src/atoms/rn-section-list/rn-section-list.types.ts

@@ -0,0 +1,11 @@
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {DefaultSectionT, SectionListProps as RNSectionListProps} from 'react-native'
+
+/**
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
+ * gap belong there — the same split as `RnScrollView` and `RnFlatList`.
+ */
+export type RnSectionListProps<TItem, TSection = DefaultSectionT> = ResponsiveViewSx &
+  Omit<RNSectionListProps<TItem, TSection>, 'contentContainerStyle' | 'style'> & {
+    content?: ResponsiveViewSx
+  }

package/src/atoms/rn-text/index.ts

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

package/src/atoms/rn-text/rn-text.tsx

@@ -0,0 +1,33 @@
+import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
+import {Text as RNText, useWindowDimensions} from 'react-native'
+
+import type {RnTextComponent, RnTextProps} from './rn-text.types'
+
+export const RnText: RnTextComponent = ({
+  align,
+  color = 'content.primary',
+  variant = 'body',
+  ...props
+}: RnTextProps) => {
+  const theme = useAppTheme()
+  const {fontScale} = useWindowDimensions()
+  const style = theme.typography[variant]
+
+  /**
+   * React Native scales `fontSize` for the user's setting but leaves `lineHeight` alone, so a grown glyph ends up in
+   * an ungrown line and clips. Scaling it here by the same factor keeps the ratio the variant was designed at — and
+   * by the same ceiling `maxFontSizeMultiplier` caps the glyph with, so the two cannot disagree.
+   *
+   * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
+   * height, which scales with it, and Compose reads `lineHeight` in `sp`.
+   */
+  const lineHeight = style.lineHeight * Math.min(fontScale, MAX_FONT_SCALE)
+
+  return (
+    <RNText
+      maxFontSizeMultiplier={MAX_FONT_SCALE}
+      style={[style, {color: theme.color(color), lineHeight, textAlign: align}]}
+      {...props}
+    />
+  )
+}

package/src/atoms/rn-text/rn-text.types.ts

@@ -0,0 +1,11 @@
+import type {ColorToken, TextVariant} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+import type {TextProps as RNTextProps} from 'react-native'
+
+export type RnTextProps = Omit<RNTextProps, 'style'> & {
+  align?: 'center' | 'left' | 'right'
+  color?: ColorToken
+  variant?: TextVariant
+}
+
+export type RnTextComponent = (props: RnTextProps) => ReactNode

package/src/atoms/rn-view/index.ts

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

package/src/atoms/rn-view/rn-view.android.tsx

@@ -0,0 +1,7 @@
+import {RNHostView} from '@expo/ui/jetpack-compose'
+
+import type {RnViewComponent, RnViewProps} from './rn-view.types'
+
+export const RnView: RnViewComponent = ({children, matchContents = true}: RnViewProps) => (
+  <RNHostView matchContents={matchContents}>{children}</RNHostView>
+)

package/src/atoms/rn-view/rn-view.ios.tsx

@@ -0,0 +1,7 @@
+import {RNHostView} from '@expo/ui/swift-ui'
+
+import type {RnViewComponent, RnViewProps} from './rn-view.types'
+
+export const RnView: RnViewComponent = ({children, matchContents = true}: RnViewProps) => (
+  <RNHostView matchContents={matchContents}>{children}</RNHostView>
+)

package/src/atoms/rn-view/rn-view.types.ts

@@ -0,0 +1,21 @@
+import type {ReactElement, ReactNode} from 'react'
+
+export type RnViewProps = {
+  /**
+   * A single React Native *view*. It may not contain React Native text: a bare string becomes a
+   * `RawText` node, which has no component view, so mounting it across the SwiftUI host boundary
+   * fails the `RCTComponentViewFactory` assertion and takes the whole app down. `@expo/ui` states
+   * the rule itself in `ListItem.ios.tsx` — "SwiftUI hosts can't render bare strings" — and wraps
+   * every raw string in a SwiftUI `Text` before it reaches a host. Do the same: use the `Text` atom
+   * inside the host, and keep `RnText` outside it.
+   */
+  children: ReactElement
+  /**
+   * Sizes the host to the child's measured layout. On by default because a raw RN view has no
+   * intrinsic size and would otherwise stretch to fill the SwiftUI parent.
+   */
+  matchContents?: boolean
+  testID?: string
+}
+
+export type RnViewComponent = (props: RnViewProps) => ReactNode

package/src/atoms/scroll-view/index.ts

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

package/src/atoms/scroll-view/scroll-view.android.tsx

@@ -0,0 +1,62 @@
+import {Column, PullToRefreshBox, Row} from '@expo/ui/jetpack-compose'
+import {
+  horizontalScroll,
+  type ModifierConfig,
+  testID as testIdModifier,
+  verticalScroll,
+} from '@expo/ui/jetpack-compose/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import {useRefreshState} from '../../use-refresh-state'
+import type {ScrollViewComponent, ScrollViewProps} from './scroll-view.types'
+
+export const ScrollView: ScrollViewComponent = ({
+  axis = 'vertical',
+  children,
+  onRefresh,
+  spacing: gap,
+  testID,
+  ...sx
+}: ScrollViewProps) => {
+  useHostGuard('ScrollView')
+
+  const arrangement = gap === undefined ? undefined : {spacedBy: spacing[gap]}
+  const sxModifiers = useSxModifiers(sx)
+  const {isRefreshing, refresh} = useRefreshState(onRefresh)
+  const modifiers = useMemo<ModifierConfig[]>(
+    () => [
+      ...sxModifiers,
+      axis === 'horizontal' ? horizontalScroll() : verticalScroll(),
+      ...(testID ? [testIdModifier(testID)] : []),
+    ],
+    [axis, sxModifiers, testID]
+  )
+
+  if (axis === 'horizontal') {
+    return (
+      <Row horizontalArrangement={arrangement} modifiers={modifiers}>
+        {children}
+      </Row>
+    )
+  }
+
+  const column = (
+    <Column modifiers={modifiers} verticalArrangement={arrangement}>
+      {children}
+    </Column>
+  )
+
+  // Unlike SwiftUI's modifier, Compose's pull-to-refresh is a container — so it wraps rather than
+  // joining `modifiers`, and is left out entirely when nobody asked for it.
+  if (!onRefresh) {
+    return column
+  }
+
+  return (
+    <PullToRefreshBox isRefreshing={isRefreshing} onRefresh={refresh}>
+      {column}
+    </PullToRefreshBox>
+  )
+}

package/src/atoms/scroll-view/scroll-view.ios.tsx

@@ -0,0 +1,42 @@
+import {HStack, ScrollView as SwiftUIScrollView, VStack} from '@expo/ui/swift-ui'
+import {type ModifierConfig, refreshable} from '@expo/ui/swift-ui/modifiers'
+import {useSxModifiers} from '@hzblj/kara-sx'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+import {useHostGuard} from '../../host-context'
+import type {ScrollViewComponent, ScrollViewProps} from './scroll-view.types'
+
+export const ScrollView: ScrollViewComponent = ({
+  axis = 'vertical',
+  children,
+  onRefresh,
+  showsIndicators = true,
+  spacing: gap,
+  testID,
+  ...sx
+}: ScrollViewProps) => {
+  useHostGuard('ScrollView')
+
+  const modifiers = useSxModifiers(sx)
+  const gapPoints = gap === undefined ? undefined : spacing[gap]
+
+  // `refreshable` belongs on the scroll view itself, not on the stack inside it that `sx` styles.
+  const scrollModifiers = useMemo<ModifierConfig[]>(
+    () => (onRefresh && axis === 'vertical' ? [refreshable(onRefresh)] : []),
+    [axis, onRefresh]
+  )
+
+  return (
+    <SwiftUIScrollView axes={axis} modifiers={scrollModifiers} showsIndicators={showsIndicators} testID={testID}>
+      {axis === 'horizontal' ? (
+        <HStack modifiers={modifiers} spacing={gapPoints}>
+          {children}
+        </HStack>
+      ) : (
+        <VStack modifiers={modifiers} spacing={gapPoints}>
+          {children}
+        </VStack>
+      )}
+    </SwiftUIScrollView>
+  )
+}

package/src/atoms/scroll-view/scroll-view.types.ts

@@ -0,0 +1,28 @@
+import type {ResponsiveSx} from '@hzblj/kara-sx'
+import type {SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type ScrollViewAxis = 'horizontal' | 'vertical'
+
+/**
+ * The `sx` props style the scrolling *content* container, not the viewport — `p` behaves
+ * like React Native's `contentContainerStyle` padding and scrolls with the content.
+ */
+export type ScrollViewProps = ResponsiveSx & {
+  axis?: ScrollViewAxis
+  children?: ReactNode
+  /**
+   * Enables pull-to-refresh. Async on purpose: the spinner runs until the promise settles, which is
+   * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from — so
+   * neither platform needs a separate `refreshing` flag to be kept in sync by the caller.
+   *
+   * Only a vertical scroll view can be pulled; on a horizontal one both platforms ignore it.
+   */
+  onRefresh?: () => Promise<void>
+  /** iOS only — Compose exposes no indicator toggle, so Android always shows the native one. */
+  showsIndicators?: boolean
+  spacing?: SpaceSize
+  testID?: string
+}
+
+export type ScrollViewComponent = (props: ScrollViewProps) => ReactNode

package/src/atoms/segmented-control/index.ts

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

package/src/atoms/segmented-control/segmented-control.tsx

@@ -0,0 +1,34 @@
+import {SegmentedControl as NativeSegmentedControl} from '@expo/ui/community/segmented-control'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useCallback} from 'react'
+
+import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
+
+export const SegmentedControl: SegmentedControlComponent = ({
+  disabled = false,
+  onChange,
+  selectedIndex,
+  testID,
+  values,
+}: SegmentedControlProps) => {
+  const theme = useAppTheme()
+
+  const onNativeChange = useCallback(
+    (event: {nativeEvent: {selectedSegmentIndex: number; value: string}}) => {
+      onChange?.(event.nativeEvent.selectedSegmentIndex, event.nativeEvent.value)
+    },
+    [onChange]
+  )
+
+  return (
+    <NativeSegmentedControl
+      appearance={theme.dark ? 'dark' : 'light'}
+      enabled={!disabled}
+      onChange={onNativeChange}
+      selectedIndex={selectedIndex}
+      testID={testID}
+      tintColor={theme.colorString('surface.primary')}
+      values={values}
+    />
+  )
+}

package/src/atoms/segmented-control/segmented-control.types.ts

@@ -0,0 +1,11 @@
+import type {ReactNode} from 'react'
+
+export type SegmentedControlProps = {
+  disabled?: boolean
+  onChange?: (index: number, value: string) => void
+  selectedIndex: number
+  testID?: string
+  values: string[]
+}
+
+export type SegmentedControlComponent = (props: SegmentedControlProps) => ReactNode

package/src/atoms/skeleton/index.ts

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

package/src/atoms/skeleton/skeleton.tsx

@@ -0,0 +1,28 @@
+import {duration, opacity} from '@hzblj/kara-theme'
+import {useEffect} from 'react'
+import {useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
+
+import {ABox} from '../box'
+import type {SkeletonComponent, SkeletonProps} from './skeleton.types'
+
+export const Skeleton: SkeletonComponent = ({borderRadius = 'small', height, testID, width}: SkeletonProps) => {
+  const pulse = useSharedValue<number>(opacity.o40)
+
+  useEffect(() => {
+    pulse.value = withRepeat(withTiming(opacity.o100, {duration: duration.d800}), -1, true)
+  }, [pulse])
+
+  const rStyle = useAnimatedStyle(() => ({opacity: pulse.value}), [])
+
+  return (
+    <ABox
+      bg="fill.quaternary"
+      borderRadius={borderRadius}
+      h={height}
+      style={rStyle}
+      testID={testID}
+      w={width}
+      wide={width === undefined}
+    />
+  )
+}

package/src/atoms/skeleton/skeleton.types.ts

@@ -0,0 +1,11 @@
+import type {RadiiSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+export type SkeletonProps = {
+  borderRadius?: RadiiSize
+  height: number
+  testID?: string
+  width?: number
+}
+
+export type SkeletonComponent = (props: SkeletonProps) => ReactNode

package/src/atoms/slider/index.ts

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

package/src/atoms/slider/slider.android.tsx

@@ -0,0 +1,32 @@
+import {Slider as ComposeSlider} from '@expo/ui/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {SliderComponent, SliderProps} from './slider.types'
+
+export const Slider: SliderComponent = ({
+  disabled = false,
+  max = 1,
+  min = 0,
+  onValueChange,
+  step,
+  value,
+}: SliderProps) => {
+  useHostGuard('Slider')
+  const theme = useAppTheme()
+
+  return (
+    <ComposeSlider
+      colors={{
+        activeTrackColor: theme.color('fill.accent.primary'),
+        thumbColor: theme.color('fill.accent.primary'),
+      }}
+      enabled={!disabled}
+      max={max}
+      min={min}
+      onValueChange={onValueChange}
+      steps={step}
+      value={value}
+    />
+  )
+}

package/src/atoms/slider/slider.ios.tsx

@@ -0,0 +1,33 @@
+import {Slider as SwiftUISlider} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, tint} from '@expo/ui/swift-ui/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {SliderComponent, SliderProps} from './slider.types'
+
+export const Slider: SliderComponent = ({
+  disabled = false,
+  max = 1,
+  min = 0,
+  onValueChange,
+  step,
+  value,
+}: SliderProps) => {
+  useHostGuard('Slider')
+  const theme = useAppTheme()
+
+  const modifiers = useMemo(() => {
+    const list = [tint(theme.color('fill.accent.primary'))]
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    return list
+  }, [disabled, theme])
+
+  return (
+    <SwiftUISlider max={max} min={min} modifiers={modifiers} onValueChange={onValueChange} step={step} value={value} />
+  )
+}

package/src/atoms/slider/slider.types.ts

@@ -0,0 +1,12 @@
+import type {ReactNode} from 'react'
+
+export type SliderProps = {
+  disabled?: boolean
+  max?: number
+  min?: number
+  onValueChange?: (value: number) => void
+  step?: number
+  value: number
+}
+
+export type SliderComponent = (props: SliderProps) => ReactNode

package/src/atoms/spacer/index.ts

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

package/src/atoms/spacer/spacer.android.tsx

@@ -0,0 +1,18 @@
+import {Spacer as ComposeSpacer} from '@expo/ui/jetpack-compose'
+import {defaultMinSize, weight} from '@expo/ui/jetpack-compose/modifiers'
+import {spacing} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
+
+import {useHostGuard} from '../../host-context'
+import type {SpacerComponent, SpacerProps} from './spacer.types'
+
+export const Spacer: SpacerComponent = ({min}: SpacerProps) => {
+  useHostGuard('Spacer')
+
+  const modifiers = useMemo(
+    () => (min === undefined ? [weight(1)] : [weight(1), defaultMinSize({minHeight: spacing[min]})]),
+    [min]
+  )
+
+  return <ComposeSpacer modifiers={modifiers} />
+}

package/src/atoms/spacer/spacer.ios.tsx

@@ -0,0 +1,11 @@
+import {Spacer as SwiftUISpacer} from '@expo/ui/swift-ui'
+import {spacing} from '@hzblj/kara-theme'
+
+import {useHostGuard} from '../../host-context'
+import type {SpacerComponent, SpacerProps} from './spacer.types'
+
+export const Spacer: SpacerComponent = ({min, testID}: SpacerProps) => {
+  useHostGuard('Spacer')
+
+  return <SwiftUISpacer minLength={min === undefined ? undefined : spacing[min]} testID={testID} />
+}