@hzblj/kara-components 0.1.0 → 0.2.1

package/src/atoms/picker/picker.android.tsx

@@ -0,0 +1,88 @@
+import {
+  Text as ComposeText,
+  DropdownMenuItem,
+  ExposedDropdownMenu,
+  ExposedDropdownMenuBox,
+  Host,
+  OutlinedTextField,
+  useNativeState,
+} from '@expo/ui/jetpack-compose'
+import {fillMaxWidth, menuAnchor, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {useAppTheme} from '@hzblj/kara-theme'
+import {useEffect, useMemo, useState} from 'react'
+
+import {Glyph} from '../../glyph'
+import {HostBoundary} from '../../host-context'
+import type {PickerComponent, PickerProps} from './picker.types'
+
+const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
+
+/**
+ * Material's exposed dropdown: a read-only outlined field the width of its container, opening a menu of the options
+ * under it. Its own host, themed like an `Island`, so it drops into React Native layout like the iOS picker does.
+ */
+export const Picker: PickerComponent = ({disabled = false, onValueChange, options, testID, value}: PickerProps) => {
+  const theme = useAppTheme()
+  const [expanded, setExpanded] = useState(false)
+  const selectedLabel = options.find(option => option.value === value)?.label ?? ''
+  const label = useNativeState(selectedLabel)
+  const fieldModifiers = useMemo(() => {
+    const list = [fillMaxWidth(), menuAnchor('primaryNotEditable', !disabled)]
+
+    return testID ? [...list, testIdModifier(testID)] : list
+  }, [disabled, testID])
+
+  // `useNativeState` takes only its initial value; a new selection is pushed to the field.
+  useEffect(() => {
+    label.set(selectedLabel)
+  }, [label, selectedLabel])
+
+  return (
+    <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents={MATCH_HEIGHT_ONLY} seedColor={theme.materialSeed}>
+      <HostBoundary>
+        <ExposedDropdownMenuBox expanded={expanded} onExpandedChange={disabled ? undefined : setExpanded}>
+          <OutlinedTextField
+            enabled={!disabled}
+            modifiers={fieldModifiers}
+            readOnly
+            singleLine
+            textStyle={{
+              color: theme.colorString('content.primary'),
+              fontFamily: theme.typography.body.fontFamily,
+              fontWeight: theme.typography.body.fontWeight,
+            }}
+            value={label}
+          >
+            <OutlinedTextField.TrailingIcon>
+              <Glyph color="content.secondary" name="chevronDown" size="s20" />
+            </OutlinedTextField.TrailingIcon>
+          </OutlinedTextField>
+          <ExposedDropdownMenu
+            containerColor={theme.color('surface.primary')}
+            expanded={expanded}
+            onDismissRequest={() => setExpanded(false)}
+          >
+            {options.map(option => (
+              <DropdownMenuItem
+                key={option.value}
+                onClick={() => {
+                  setExpanded(false)
+                  onValueChange?.(option.value)
+                }}
+              >
+                <DropdownMenuItem.Text>
+                  <ComposeText
+                    color={theme.colorString(option.value === value ? 'content.accent' : 'content.primary')}
+                    style={theme.typography.body}
+                  >
+                    {option.label}
+                  </ComposeText>
+                </DropdownMenuItem.Text>
+              </DropdownMenuItem>
+            ))}
+          </ExposedDropdownMenu>
+        </ExposedDropdownMenuBox>
+      </HostBoundary>
+    </Host>
+  )
+}

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/surface/surface.android.tsx

@@ -1,16 +1,40 @@
-import {Surface as ComposeSurface, Shape} from '@expo/ui/jetpack-compose'
+import {Column, Surface as ComposeSurface, Shape} from '@expo/ui/jetpack-compose'
+import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {radii, useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
 import {useHostGuard} from '../../host-context'
 import type {SurfaceComponent, SurfaceProps} from './surface.types'
 
 const cornerRadii = (radius: number) => ({bottomEnd: radius, bottomStart: radius, topEnd: radius, topStart: radius})
 
-export const Surface: SurfaceComponent = ({children, glass = false, testID, ...sx}: SurfaceProps) => {
+/**
+ * Material's `Surface`, with the padding on a `Column` inside it. Compose applies a `Surface`'s own modifiers before it
+ * draws the shape, so padding there would inset the background instead of the content — and a bare `Surface` stacks
+ * its children on top of each other rather than in a column.
+ */
+export const Surface: SurfaceComponent = ({
+  children,
+  glass = false,
+  p = 's16',
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+  testID,
+  ...sx
+}: SurfaceProps) => {
   useHostGuard('Surface')
 
   const theme = useAppTheme()
-  const modifiers = useSxModifiers({...sx, bg: undefined, p: sx.p ?? 's16'})
+  const sxModifiers = useSxModifiers({...sx, bg: undefined})
+  const modifiers = useMemo(
+    () => (testID ? [...sxModifiers, testIdModifier(testID)] : sxModifiers),
+    [sxModifiers, testID]
+  )
+  const contentModifiers = useSxModifiers({p, pb, pl, pr, pt, px, py, wide: sx.wide})
 
   return (
     <ComposeSurface
@@ -20,7 +44,7 @@ export const Surface: SurfaceComponent = ({children, glass = false, testID, ...s
       shape={Shape.RoundedCorner({cornerRadii: cornerRadii(radii[sx.borderRadius ?? 'large'])})}
       tonalElevation={glass ? 3 : 0}
     >
-      {children}
+      <Column modifiers={contentModifiers}>{children}</Column>
     </ComposeSurface>
   )
 }

package/src/atoms/switch/switch.android.tsx

@@ -1,21 +1,42 @@
 import {Switch as ComposeSwitch, Row, Text} from '@expo/ui/jetpack-compose'
+import {clickable, fillMaxWidth} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
+import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
 import type {SwitchComponent, SwitchProps} from './switch.types'
 
+/**
+ * Material's switch, tinted with the accent like SwiftUI's toggle. With a label it is a full-width row — label at the
+ * start, switch at the end — and the whole row toggles, the way a Material settings row does.
+ */
 export const Switch: SwitchComponent = ({disabled = false, label, onValueChange, value}: SwitchProps) => {
   useHostGuard('Switch')
   const theme = useAppTheme()
-  const control = <ComposeSwitch enabled={!disabled} onCheckedChange={onValueChange} value={value} />
+  const rowModifiers = useMemo(
+    () => (disabled || !onValueChange ? [fillMaxWidth()] : [fillMaxWidth(), clickable(() => onValueChange(!value))]),
+    [disabled, onValueChange, value]
+  )
+  const control = (
+    <ComposeSwitch
+      colors={{
+        checkedBorderColor: theme.color('fill.accent.primary'),
+        checkedThumbColor: theme.color('content.on.bg'),
+        checkedTrackColor: theme.color('fill.accent.primary'),
+      }}
+      enabled={!disabled}
+      onCheckedChange={onValueChange}
+      value={value}
+    />
+  )
 
   if (!label) {
     return control
   }
 
   return (
-    <Row horizontalArrangement="spaceBetween" verticalAlignment="center">
-      <Text color={theme.colorString('content.primary')} style={theme.typography.body}>
+    <Row horizontalArrangement="spaceBetween" modifiers={rowModifiers} verticalAlignment="center">
+      <Text color={theme.colorString(disabled ? 'content.tertiary' : 'content.primary')} style={theme.typography.body}>
         {label}
       </Text>
       {control}

package/src/glyph/glyph-button.android.tsx

@@ -0,0 +1,25 @@
+import {IconButton as ComposeIconButton} from '@expo/ui/jetpack-compose'
+import {GLYPHS} from '@hzblj/kara-native'
+import {DrawableIcon} from '@hzblj/kara-native/jetpack-compose'
+import {useAppTheme} from '@hzblj/kara-theme'
+
+import type {GlyphButtonComponent, GlyphButtonProps} from './glyph-button.types'
+
+export const GlyphButton: GlyphButtonComponent = ({
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress,
+}: GlyphButtonProps) => {
+  const theme = useAppTheme()
+
+  return (
+    <ComposeIconButton enabled={!disabled} onClick={onPress}>
+      <DrawableIcon
+        accessibilityLabel={accessibilityLabel}
+        iconColor={theme.color(disabled ? 'btn.content.disabled' : 'content.primary')}
+        resourceName={GLYPHS[name].android}
+      />
+    </ComposeIconButton>
+  )
+}

package/src/glyph/glyph-button.ios.tsx

@@ -0,0 +1,37 @@
+import {Button} from '@expo/ui/swift-ui'
+import {
+  buttonStyle,
+  disabled as disabledModifier,
+  accessibilityLabel as labelModifier,
+} from '@expo/ui/swift-ui/modifiers'
+import {useMemo} from 'react'
+
+import {Glyph} from './glyph'
+import type {GlyphButtonComponent, GlyphButtonProps} from './glyph-button.types'
+
+export const GlyphButton: GlyphButtonComponent = ({
+  accessibilityLabel,
+  disabled = false,
+  name,
+  onPress,
+}: GlyphButtonProps) => {
+  const modifiers = useMemo(() => {
+    const list = [buttonStyle('plain')]
+
+    if (disabled) {
+      list.push(disabledModifier(true))
+    }
+
+    if (accessibilityLabel) {
+      list.push(labelModifier(accessibilityLabel))
+    }
+
+    return list
+  }, [accessibilityLabel, disabled])
+
+  return (
+    <Button modifiers={modifiers} onPress={onPress}>
+      <Glyph color={disabled ? 'btn.content.disabled' : 'content.primary'} name={name} />
+    </Button>
+  )
+}

package/src/glyph/glyph-button.types.ts

@@ -0,0 +1,12 @@
+import type {GlyphName} from '@hzblj/kara-native'
+import type {ReactNode} from 'react'
+
+/** An icon button over one of kara's glyphs — for the controls its own components build (a stepper, a bar). */
+export type GlyphButtonProps = {
+  accessibilityLabel?: string
+  disabled?: boolean
+  name: GlyphName
+  onPress?: () => void
+}
+
+export type GlyphButtonComponent = (props: GlyphButtonProps) => ReactNode

package/src/glyph/glyph.android.tsx

@@ -0,0 +1,12 @@
+import {GLYPHS} from '@hzblj/kara-native'
+import {DrawableIcon} from '@hzblj/kara-native/jetpack-compose'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+
+import type {GlyphComponent, GlyphProps} from './glyph.types'
+
+/** The Material Symbol `@hzblj/kara-native` ships as a drawable — inside a Compose host. */
+export const Glyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+  const theme = useAppTheme()
+
+  return <DrawableIcon iconColor={theme.color(color)} iconSize={spacing[size]} resourceName={GLYPHS[name].android} />
+}

package/src/glyph/glyph.ios.tsx

@@ -0,0 +1,15 @@
+import {Image} from '@expo/ui/swift-ui'
+import {accessibilityHidden} from '@expo/ui/swift-ui/modifiers'
+import {GLYPHS} from '@hzblj/kara-native'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+
+import type {GlyphComponent, GlyphProps} from './glyph.types'
+
+const DECORATIVE = [accessibilityHidden(true)]
+
+/** The SF Symbol the system already has — inside a SwiftUI host. */
+export const Glyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+  const theme = useAppTheme()
+
+  return <Image color={theme.color(color)} modifiers={DECORATIVE} size={spacing[size]} systemName={GLYPHS[name].ios} />
+}

package/src/glyph/glyph.types.ts

@@ -0,0 +1,15 @@
+import type {GlyphName} from '@hzblj/kara-native'
+import type {ColorToken, SpaceSize} from '@hzblj/kara-theme'
+import type {ReactNode} from 'react'
+
+/**
+ * One of the few glyphs kara's own components draw — a search field's magnifier, a row's chevron. Internal: apps draw
+ * their own icons with `Icon` / `RnIcon`.
+ */
+export type GlyphProps = {
+  color?: ColorToken
+  name: GlyphName
+  size?: SpaceSize
+}
+
+export type GlyphComponent = (props: GlyphProps) => ReactNode

package/src/glyph/index.ts

@@ -0,0 +1,5 @@
+export * from './glyph'
+export * from './glyph.types'
+export * from './glyph-button'
+export * from './glyph-button.types'
+export * from './rn-glyph'

package/src/glyph/rn-glyph.android.tsx

@@ -0,0 +1,14 @@
+import {GLYPHS} 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 {GlyphComponent, GlyphProps} from './glyph.types'
+
+/** The Material Symbol drawable in an `ImageView` — the React Native tier. */
+export const RnGlyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+  const theme = useAppTheme()
+  const style = useMemo(() => ({height: spacing[size], width: spacing[size]}), [size])
+
+  return <IconView iconColor={theme.color(color)} resourceName={GLYPHS[name].android} style={style} />
+}

package/src/glyph/rn-glyph.ios.tsx

@@ -0,0 +1,16 @@
+import {GLYPHS} 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 {GlyphComponent, GlyphProps} from './glyph.types'
+
+/** The SF Symbol in a `UIImageView`, drawn at the size `Glyph` gives it inside a host — the React Native tier. */
+export const RnGlyph: GlyphComponent = ({color = 'content.primary', name, size = 's24'}: GlyphProps) => {
+  const theme = useAppTheme()
+  const style = useMemo(() => ({height: spacing[size], width: spacing[size]}), [size])
+
+  return (
+    <IconView iconColor={theme.color(color)} style={style} symbolSize={spacing[size]} systemName={GLYPHS[name].ios} />
+  )
+}

package/src/molecules/collapsible/collapsible.android.tsx

@@ -2,7 +2,7 @@ import {AnimatedVisibility, Column, Text as ComposeText, Row} from '@expo/ui/jet
 import {clickable} from '@expo/ui/jetpack-compose/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {Icon} from '../../atoms/icon'
+import {Glyph} from '../../glyph'
 import {useHostGuard} from '../../host-context'
 import type {CollapsibleComponent, CollapsibleProps} from './collapsible.types'
 
@@ -17,7 +17,7 @@ export const Collapsible: CollapsibleComponent = ({children, expanded, label, on
         <ComposeText color={theme.colorString('content.primary')} style={theme.typography.body}>
           {label}
         </ComposeText>
-        <Icon name={expanded ? 'chevronDown' : 'chevronRight'} size="s20" />
+        <Glyph name={expanded ? 'chevronDown' : 'chevronRight'} size="s20" />
       </Row>
       <AnimatedVisibility visible={expanded}>{children}</AnimatedVisibility>
     </Column>

package/src/molecules/labeled-content/labeled-content.tsx

@@ -2,6 +2,7 @@ import {HStack} from '../../atoms/h-stack'
 import {Icon} from '../../atoms/icon'
 import {Spacer} from '../../atoms/spacer'
 import {Text} from '../../atoms/text'
+import {Glyph} from '../../glyph'
 import type {LabeledContentComponent, LabeledContentProps} from './labeled-content.types'
 
 const TrailingValue = ({value}: {value: string}) => (
@@ -23,6 +24,6 @@ export const LabeledContent: LabeledContentComponent = ({
     <Text variant="body">{label}</Text>
     <Spacer />
     {children ?? (value === undefined ? null : <TrailingValue value={value} />)}
-    {onPress ? <Icon color="content.quaternary" name="chevronRight" size="s16" /> : null}
+    {onPress ? <Glyph color="content.quaternary" name="chevronRight" size="s16" /> : null}
   </HStack>
 )

package/src/molecules/list-item/list-item.tsx

@@ -3,6 +3,7 @@ import {Icon} from '../../atoms/icon'
 import {Spacer} from '../../atoms/spacer'
 import {Text} from '../../atoms/text'
 import {VStack} from '../../atoms/v-stack'
+import {Glyph} from '../../glyph'
 import type {ListItemComponent, ListItemProps} from './list-item.types'
 
 export const ListItem: ListItemComponent = ({icon, onPress, subtitle, testID, title}: ListItemProps) => (
@@ -17,6 +18,6 @@ export const ListItem: ListItemComponent = ({icon, onPress, subtitle, testID, ti
       ) : null}
     </VStack>
     <Spacer />
-    {onPress ? <Icon color="content.quaternary" name="chevronRight" size="s16" /> : null}
+    {onPress ? <Glyph color="content.quaternary" name="chevronRight" size="s16" /> : null}
   </HStack>
 )

package/src/molecules/navigation-bar/navigation-bar.android.tsx

@@ -1,21 +1,28 @@
 import {HStack} from '../../atoms/h-stack'
-import {IconButton} from '../../atoms/icon-button'
 import {Island} from '../../atoms/island'
 import {Spacer} from '../../atoms/spacer'
 import {Text} from '../../atoms/text'
+import {GlyphButton} from '../../glyph'
 import type {NavigationBarComponent, NavigationBarProps} from './navigation-bar.types'
 
 /**
  * Material's top bar shape — navigation icon, start-aligned title, action at the end — built from the atoms in its own
  * island. Compose's icon buttons take no accessibility identifier, so `backTestID`/`closeTestID` are iOS-only.
  */
-export const NavigationBar: NavigationBarComponent = ({onBack, onClose, testID, title}: NavigationBarProps) => (
+export const NavigationBar: NavigationBarComponent = ({
+  backLabel = 'Back',
+  closeLabel = 'Close',
+  onBack,
+  onClose,
+  testID,
+  title,
+}: NavigationBarProps) => (
   <Island testID={testID}>
     <HStack align="center" px="s4" spacing="s4" wide>
-      {onBack ? <IconButton name="arrowLeft" onPress={onBack} /> : null}
+      {onBack ? <GlyphButton accessibilityLabel={backLabel} name="back" onPress={onBack} /> : null}
       {title ? <Text variant="body">{title}</Text> : null}
       <Spacer />
-      {onClose ? <IconButton name="close" onPress={onClose} /> : null}
+      {onClose ? <GlyphButton accessibilityLabel={closeLabel} name="close" onPress={onClose} /> : null}
     </HStack>
   </Island>
 )

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

@@ -1,4 +1,5 @@
 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'
@@ -12,8 +13,16 @@ export const RadioGroup: RadioGroupComponent = ({onValueChange, options, value}:
   return (
     <VStack spacing="s4" wide>
       {options.map(option => (
-        <Row key={option.value} verticalAlignment="center">
-          <RadioButton onClick={() => onValueChange?.(option.value)} selected={option.value === value} />
+        <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>

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

@@ -1,8 +1,8 @@
 import {HStack} from '../../atoms/h-stack'
-import {Icon} from '../../atoms/icon'
 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'
 
@@ -15,7 +15,7 @@ export const RadioGroup: RadioGroupComponent = ({onValueChange, options, value}:
         <HStack align="center" key={option.value} onPress={() => onValueChange?.(option.value)} py="s8" wide>
           <Text>{option.label}</Text>
           <Spacer />
-          {option.value === value ? <Icon color="content.accent" name="check" size="s20" /> : null}
+          {option.value === value ? <Glyph color="content.accent" name="check" size="s20" /> : null}
         </HStack>
       ))}
     </VStack>

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

@@ -7,6 +7,9 @@ export type {ScrollEdgeEffect, ScrollEdgeScrollableProps} from '@hzblj/kara-nati
 /**
  * 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 & {
   /**

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

@@ -1,10 +1,9 @@
-import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useAppTheme} from '@hzblj/kara-theme'
 import {TextInput} from 'react-native'
 
 import {Box} from '../../atoms/box'
-import {Icon} from '../../atoms/icon'
-import {Island} from '../../atoms/island'
 import {Pressable} from '../../atoms/pressable'
+import {RnGlyph} from '../../glyph'
 import type {SearchBarComponent, SearchBarProps} from './search-bar.types'
 
 export const SearchBar: SearchBarComponent = ({
@@ -27,9 +26,7 @@ export const SearchBar: SearchBarComponent = ({
       testID={testID}
       wide
     >
-      <Island style={{height: spacing.s20, width: spacing.s20}}>
-        <Icon color="content.tertiary" name="search" size="s20" />
-      </Island>
+      <RnGlyph color="content.tertiary" name="search" size="s20" />
       <TextInput
         onChangeText={onChangeText}
         placeholder={placeholder}
@@ -39,9 +36,7 @@ export const SearchBar: SearchBarComponent = ({
       />
       {value.length > 0 ? (
         <Pressable onPress={() => onChangeText?.('')}>
-          <Island style={{height: spacing.s20, width: spacing.s20}}>
-            <Icon color="content.tertiary" name="close" size="s20" />
-          </Island>
+          <RnGlyph color="content.tertiary" name="close" size="s20" />
         </Pressable>
       ) : null}
     </Box>

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

@@ -1,8 +1,8 @@
 import {useCallback} from 'react'
 import {HStack} from '../../atoms/h-stack'
-import {IconButton} from '../../atoms/icon-button'
 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'
 
@@ -23,9 +23,9 @@ export const Stepper: StepperComponent = ({
     <HStack align="center" spacing="s8" wide>
       <Text>{label}</Text>
       <Spacer />
-      <IconButton disabled={value <= min} name="close" onPress={onDecrement} />
+      <GlyphButton accessibilityLabel="Decrement" disabled={value <= min} name="minus" onPress={onDecrement} />
       <Text variant="labelMedium">{String(value)}</Text>
-      <IconButton disabled={value >= max} name="add" onPress={onIncrement} />
+      <GlyphButton accessibilityLabel="Increment" disabled={value >= max} name="plus" onPress={onIncrement} />
     </HStack>
   )
 }