@hzblj/kara-components 0.20.0 → 0.21.0

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

@@ -3,7 +3,7 @@ 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 {useHostGuard} from '../../hooks/host-context'
 import type {ScrollViewComponent, ScrollViewProps} from './scroll-view.types'
 
 export const ScrollView: ScrollViewComponent = ({

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

@@ -6,7 +6,7 @@ import {DrawableIcon, NativeImage} from '@hzblj/kara-native/jetpack-compose'
 import {spacing as spacingTokens, type TextVariant, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import {HStack} from '../h-stack'
 import type {SegmentedControlComponent, SegmentedControlProps, SegmentedControlSegment} from './segmented-control.types'
 import {imageUri, segmentOf} from './segments'

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

@@ -4,7 +4,7 @@ import {SegmentedControl as NativeSegmentedControl} from '@hzblj/kara-native/swi
 import {spacing as spacingTokens, useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
-import {useInsideHost} from '../../host-context'
+import {useInsideHost} from '../../hooks/host-context'
 import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
 import {imageUri, segmentOf} from './segments'
 

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

@@ -4,7 +4,7 @@ import {haptics} from '@hzblj/expo-rich-haptics'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useEffect, useMemo, useRef} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SliderComponent, SliderProps} from './slider.types'
 
 /**

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

@@ -3,7 +3,7 @@ import {disabled as disabledModifier, tint} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo, useRef} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SliderComponent, SliderProps} from './slider.types'
 
 /**

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

@@ -3,7 +3,7 @@ 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 {useHostGuard} from '../../hooks/host-context'
 import type {SpacerComponent, SpacerProps} from './spacer.types'
 
 export const Spacer: SpacerComponent = ({min}: SpacerProps) => {

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

@@ -1,7 +1,7 @@
 import {Spacer as SwiftUISpacer} from '@expo/ui/swift-ui'
 import {spacing} from '@hzblj/kara-theme'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SpacerComponent, SpacerProps} from './spacer.types'
 
 export const Spacer: SpacerComponent = ({min, testID}: SpacerProps) => {

package/src/atoms/surface/surface.android.tsx

@@ -3,7 +3,7 @@ import {testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {radii, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SurfaceComponent, SurfaceProps} from './surface.types'
 
 const cornerRadii = (radius: number) => ({bottomEnd: radius, bottomStart: radius, topEnd: radius, topStart: radius})

package/src/atoms/surface/surface.ios.tsx

@@ -1,7 +1,7 @@
 import {GlassEffectContainer, VStack} from '@expo/ui/swift-ui'
 import {splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SurfaceComponent, SurfaceProps} from './surface.types'
 
 export const Surface: SurfaceComponent = ({children, glass = false, testID, ...props}: SurfaceProps) => {

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

@@ -4,7 +4,7 @@ import {haptics} from '@hzblj/expo-rich-haptics'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {SwitchComponent, SwitchProps} from './switch.types'
 
 /** Stands in for a missing handler: Material drops its 48dp touch target without one, and the switch moves. */

package/src/atoms/switch/switch.ios.tsx

@@ -3,7 +3,7 @@ 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 {useHostGuard} from '../../hooks/host-context'
 import type {SwitchComponent, SwitchProps} from './switch.types'
 
 export const Switch: SwitchComponent = ({disabled = false, label, onValueChange, testID, value}: SwitchProps) => {

package/src/atoms/text/text.android.tsx

@@ -11,7 +11,7 @@ import {
 import {duration, easing, springPhysics, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {spansOf, textOf} from './spans'
 import type {TextComponent, TextDecoration, TextProps, TextTransform, TextTruncation} from './text.types'
 

package/src/atoms/text/text.ios.tsx

@@ -22,7 +22,7 @@ import {
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {spansKey, spansOf} from './spans'
 import type {TextAlign, TextComponent, TextProps} from './text.types'
 

package/src/atoms/text-field/text-field.android.tsx

@@ -12,8 +12,8 @@ import {semantics, testID as testIdModifier} from '@expo/ui/jetpack-compose/modi
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useImperativeHandle, useMemo, useRef} from 'react'
-import {Glyph} from '../../glyph'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
+import {Glyph} from '../glyph'
 import type {TextFieldComponent, TextFieldContentType, TextFieldKeyboard, TextFieldProps} from './text-field.types'
 import {autoCorrectFor, capitalizationFor, ignoreDetachedView} from './text-field-input'
 

package/src/atoms/text-field/text-field.ios.tsx

@@ -18,7 +18,7 @@ import {
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {type ColorToken, spacing} from '@hzblj/kara-theme'
 import {useImperativeHandle, useMemo, useRef} from 'react'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {Text} from '../text'
 import type {TextFieldAutoCapitalize, TextFieldComponent, TextFieldKeyboard, TextFieldProps} from './text-field.types'
 import {autoCorrectFor, capitalizationFor, ignoreDetachedView} from './text-field-input'

package/src/atoms/v-stack/v-stack.android.tsx

@@ -1,7 +1,7 @@
 import {Column} from '@expo/ui/jetpack-compose'
 import {spacing} from '@hzblj/kara-theme'
-import {useHostGuard} from '../../host-context'
-import {useStackModifiers} from '../../use-stack-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {useStackModifiers} from '../../hooks/use-stack-modifiers'
 import type {VStackAlign, VStackComponent, VStackProps} from './v-stack.types'
 
 const ALIGNMENT = {

package/src/atoms/v-stack/v-stack.ios.tsx

@@ -2,8 +2,8 @@ import {VStack as SwiftUIVStack} from '@expo/ui/swift-ui'
 import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {spacing} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
-import {tapModifiers} from '../../tap-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {tapModifiers} from '../../utils/tap-modifiers'
 import type {VStackAlign, VStackComponent, VStackProps} from './v-stack.types'
 
 const ALIGNMENT = {

package/src/atoms/z-stack/z-stack.android.tsx

@@ -1,6 +1,6 @@
 import {Box} from '@expo/ui/jetpack-compose'
-import {useHostGuard} from '../../host-context'
-import {useStackModifiers} from '../../use-stack-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {useStackModifiers} from '../../hooks/use-stack-modifiers'
 import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
 
 const ALIGNMENT = {

package/src/atoms/z-stack/z-stack.ios.tsx

@@ -1,8 +1,8 @@
 import {ZStack as SwiftUIZStack} from '@expo/ui/swift-ui'
 import {type FrameAlignment, splitAccessibility, useAccessibilityModifiers, useSxModifiers} from '@hzblj/kara-sx'
 import {useMemo} from 'react'
-import {useHostGuard} from '../../host-context'
-import {tapModifiers} from '../../tap-modifiers'
+import {useHostGuard} from '../../hooks/host-context'
+import {tapModifiers} from '../../utils/tap-modifiers'
 import type {ZStackAlign, ZStackComponent, ZStackProps} from './z-stack.types'
 
 const ALIGNMENT = {

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

@@ -19,8 +19,8 @@ import {
 import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {duration, useAppTheme, useReducedMotion} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
-import {Glyph} from '../../glyph'
-import {useHostGuard} from '../../host-context'
+import {Glyph} from '../../atoms/glyph'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CollapsibleComponent, CollapsibleProps} from './collapsible.types'
 
 /** Material's standard easing, at the length a chevron turning takes. */

package/src/molecules/collapsible/collapsible.ios.tsx

@@ -1,6 +1,6 @@
 import {DisclosureGroup} from '@expo/ui/swift-ui'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {CollapsibleComponent, CollapsibleProps} from './collapsible.types'
 
 export const Collapsible: CollapsibleComponent = ({

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

@@ -1,8 +1,8 @@
+import {Glyph} from '../../atoms/glyph'
 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}) => (

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

@@ -1,11 +1,10 @@
 import {Platform} from 'react-native'
-
+import {Glyph} from '../../atoms/glyph'
 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 type {ListItemComponent, ListItemProps} from './list-item.types'
 
 /**

package/src/molecules/navigation-bar/navigation-bar.constants.ts

@@ -0,0 +1,2 @@
+/** A `stacked` search's own row under the bar (iOS); the native view centres the field on it. */
+export const SEARCH_ROW_HEIGHT = 52

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

@@ -7,21 +7,26 @@ import {
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useImperativeHandle, useMemo, useRef} from 'react'
 import {StyleSheet} from 'react-native'
+import type {IconName} from '../../atoms/icon'
+import {SEARCH_ROW_HEIGHT} from './navigation-bar.constants'
 import type {NavigationBarComponent, NavigationBarItem, NavigationBarProps} from './navigation-bar.types'
 
-/** Fits iOS 26's 44 pt glass items with the bar's own margin; the bar centres itself vertically in it. */
+/** Fits iOS 26's 44 pt glass items with the bar's own margin; the bar centres its item row vertically in it. */
 const BAR_HEIGHT = 56
 
 const styles = StyleSheet.create({
   bar: {height: BAR_HEIGHT, width: '100%'},
+  stackedSearchBar: {height: BAR_HEIGHT + SEARCH_ROW_HEIGHT, width: '100%'},
 })
 
-const DEFAULT_LABELS = {back: 'Back', close: 'Close'} as const
+const DEFAULT_LABELS = {back: 'Back', cancel: 'Cancel', close: 'Close', search: 'Search'} as const
+
+const toImageName = (icon?: IconName) => (icon ? iconResourceName(icon) : undefined)
 
 const toNativeItem = (item: NavigationBarItem): NativeNavigationBarItem =>
   item.type === 'icon'
     ? {...item, imageName: iconResourceName(item.icon), type: 'icon'}
-    : {...item, label: item.label ?? DEFAULT_LABELS[item.type]}
+    : {...item, imageName: toImageName(item.icon), label: item.label ?? DEFAULT_LABELS[item.type]}
 
 const ignoreDetachedView = () => undefined
 
@@ -42,12 +47,30 @@ export const NavigationBar: NavigationBarComponent = ({
 
   useImperativeHandle(
     search?.ref,
-    () => ({clear: () => barRef.current?.clearSearchText().catch(ignoreDetachedView)}),
+    () => ({
+      clear: () => barRef.current?.clearSearchText().catch(ignoreDetachedView),
+      setText: (text: string) => barRef.current?.setSearchText(text).catch(ignoreDetachedView),
+    }),
     []
   )
 
+  const voice = search?.voice
+  const clearIcon = search?.clearIcon
+  const nativeVoice = useMemo(
+    () =>
+      voice && {
+        ...voice,
+        clearImageName: toImageName(voice.clearIcon ?? clearIcon),
+        color: voice.color ?? color,
+        microphoneImageName: toImageName(voice.microphoneIcon),
+        stopImageName: toImageName(voice.stopIcon),
+      },
+    [clearIcon, color, voice]
+  )
+
   const nativeLeadingItems = useMemo(() => leadingItems?.map(toNativeItem), [leadingItems])
   const nativeTrailingItems = useMemo(() => trailingItems?.map(toNativeItem), [trailingItems])
+  const isStackedSearch = !!search && search.placement !== 'integratedButton'
 
   return (
     <NativeNavigationBar
@@ -58,9 +81,16 @@ export const NavigationBar: NavigationBarComponent = ({
       onSearchFocusChange={search?.onFocusChange}
       onSearchTextChange={search?.onChangeText}
       ref={barRef}
+      searchButtonImageName={toImageName(search?.buttonIcon)}
+      searchButtonLabel={search ? (search.buttonLabel ?? DEFAULT_LABELS.search) : undefined}
+      searchCancelImageName={toImageName(search?.cancelIcon)}
+      searchCancelLabel={search ? (search.cancelLabel ?? DEFAULT_LABELS.cancel) : undefined}
+      searchClearImageName={toImageName(clearIcon)}
       searchPlaceholder={search?.placeholder}
+      searchPlacement={search?.placement}
       searchTestID={search?.testID}
-      style={styles.bar}
+      searchVoice={nativeVoice}
+      style={isStackedSearch ? styles.stackedSearchBar : styles.bar}
       testID={testID}
       title={title}
       titleAlignment={titleAlignment}

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

@@ -1,7 +1,45 @@
+import type {SearchVoiceMeter} from '@hzblj/kara-native'
 import type {ReactNode, Ref} from 'react'
+import type {ColorValue} from 'react-native'
 
 import type {IconName} from '../../atoms/icon'
 
+/**
+ * A search field's voice: a microphone while the field is empty, the clear button in its place once it holds text, and
+ * while `listening` a live waveform of `meter` beside a stop button. Nothing records here: the app runs the dictation
+ * (`@hzblj/expo-speech`'s `SpeechTranscriber`, whose `Transcription` is the `meter`, or anything else) and writes what
+ * it hears into the field through the search's `setText`. The icons are the app's; unset, the platform's glyphs.
+ */
+export type SearchFieldVoice = {
+  /** The clear button that takes the microphone's place once the field holds text. */
+  clearIcon?: IconName
+  /** The clear button's accessibility label. */
+  clearLabel?: string
+  /** Tints the microphone, the clear button, the waveform and the stop glyph (iOS). The bar's item colour by default. */
+  color?: ColorValue
+  /** Dictation is running: the waveform and the stop button replace the microphone. */
+  listening: boolean
+  /**
+   * The transcription to draw, a native shared object that posts its level (`@hzblj/expo-speech`'s `Transcription`), so
+   * no level crosses to JavaScript. Without one the waveform stays flat.
+   */
+  meter?: SearchVoiceMeter | null
+  /** The microphone. */
+  microphoneIcon?: IconName
+  /** The microphone's accessibility label. */
+  microphoneLabel: string
+  /** The search ended while listening (cancelled, or typed over): drop the dictation. */
+  onCancel?: () => void
+  /** The microphone was pressed. The field is focused first, so the search opens as if typed into. */
+  onStart: () => void
+  /** The stop button was pressed. */
+  onStop: () => void
+  /** The glyph in the stop button. */
+  stopIcon?: IconName
+  /** The stop button's accessibility label. */
+  stopLabel: string
+}
+
 type NavigationBarItemBase = {
   /** Called when the item is pressed. */
   onPress: () => void
@@ -16,30 +54,56 @@ type NavigationBarItemBase = {
 
 /**
  * One item of the bar. `back` and `close` are the platform's own (a chevron and the system close item on iOS, the
- * Material arrow and cross on Android), with `Back` / `Close` as their labels unless given others. `icon` is one of the
- * app's icons and names itself for VoiceOver and TalkBack.
+ * Material arrow and cross on Android), with `Back` / `Close` as their labels unless given others; on iOS `icon` puts
+ * one of the app's icons in place of the system glyph. An `icon` item is one of the app's icons and names itself for
+ * VoiceOver and TalkBack.
  */
 export type NavigationBarItem =
-  | (NavigationBarItemBase & {label?: string; type: 'back' | 'close'})
+  | (NavigationBarItemBase & {icon?: IconName; label?: string; type: 'back' | 'close'})
   | (NavigationBarItemBase & {icon: IconName; label: string; type: 'icon'})
 
 export type NavigationBarSearchRef = {
   /** Empties the field and ends editing. */
   clear: () => void
+  /** Sets the field's text without `onChangeText`, the way dictation fills it in. */
+  setText: (text: string) => void
 }
 
-/** A search field in place of the title. iOS only for now; Android keeps the title. */
+/**
+ * Where the search field goes on iOS, as a native-stack header places its search: `stacked` in a row of its own under
+ * the title, `integratedButton` as a search item beside the trailing items that turns the bar into the field.
+ */
+export type NavigationBarSearchPlacement = 'integratedButton' | 'stacked'
+
+/**
+ * A search field in the bar. iOS only for now; Android keeps the title. A focused field gets a cancel item that
+ * empties it and ends the search, a bar item like the others.
+ */
 export type NavigationBarSearch = {
+  /** `integratedButton`: the search item's icon, one of the app's icons; the system magnifying glass unset. */
+  buttonIcon?: IconName
+  /** `integratedButton`: the search item's label for VoiceOver. `Search` by default. */
+  buttonLabel?: string
+  /** The cancel item's icon, one of the app's icons; the system cross unset. */
+  cancelIcon?: IconName
+  /** The cancel item's label for VoiceOver. `Cancel` by default. */
+  cancelLabel?: string
+  /** The field's clear button, one of the app's icons; the system's unset. */
+  clearIcon?: IconName
   /** Every edit of the field's text. */
   onChangeText: (text: string) => void
   /** The field gained or lost focus. */
   onFocusChange?: (focused: boolean) => void
   /** Shown while the field is empty. */
   placeholder: string
+  /** `stacked` (a row under the title) by default. */
+  placement?: NavigationBarSearchPlacement
   /** Imperative `clear`. */
   ref?: Ref<NavigationBarSearchRef>
   /** Test identifier, forwarded to the native search field. */
   testID?: string
+  /** A microphone in the field: see `SearchFieldVoice`. */
+  voice?: SearchFieldVoice
 }
 
 export type NavigationBarTitleAlignment = 'center' | 'leading'
@@ -56,7 +120,7 @@ export type NavigationBarProps = {
   inverted?: boolean
   /** In screen order, from the leading edge. */
   leadingItems?: NavigationBarItem[]
-  /** Replaces the title with a search field (iOS). */
+  /** A search field (iOS): under the title, or behind a search item beside the trailing items. */
   search?: NavigationBarSearch
   /** Test identifier, forwarded to the native bar. iOS only; Android ignores it. */
   testID?: string

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

@@ -6,7 +6,7 @@ import {Children, useCallback, useEffect, useMemo, useRef, useState} from 'react
 import {HStack} from '../../atoms/h-stack'
 import {Spacer} from '../../atoms/spacer'
 import {VStack} from '../../atoms/v-stack'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {PagerComponent, PagerProps} from './pager.types'
 
 const DOT_SIZE = 6

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

@@ -2,7 +2,7 @@ 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 {useHostGuard} from '../../hooks/host-context'
 import type {PagerComponent, PagerProps} from './pager.types'
 
 export const Pager: PagerComponent = ({children, indicators = true, onPageChange, page, testID}: PagerProps) => {

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

@@ -2,7 +2,7 @@ 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 {useHostGuard} from '../../hooks/host-context'
 import type {RadioGroupComponent, RadioGroupProps} from './radio-group.types'
 
 /**

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

@@ -1,9 +1,9 @@
+import {Glyph} from '../../atoms/glyph'
 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 {useHostGuard} from '../../hooks/host-context'
 import type {RadioGroupComponent, RadioGroupProps} from './radio-group.types'
 
 export const RadioGroup: RadioGroupComponent = ({

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

@@ -4,9 +4,9 @@ import {useMemo} from 'react'
 import {Platform, Pressable, type PressableStateCallbackType} from 'react-native'
 
 import {Box} from '../../atoms/box'
+import {RnGlyph} from '../../atoms/glyph'
 import {RnIcon} from '../../atoms/rn-icon'
 import {RnText} from '../../atoms/rn-text'
-import {RnGlyph} from '../../glyph'
 import type {RnListItemComponent, RnListItemProps} from './rn-list-item.types'
 
 export const RnListItem: RnListItemComponent = ({

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

@@ -3,7 +3,7 @@ import {Text as ComposeText, Host, RNHostView, Row, TextButton} from '@expo/ui/j
 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 {HostBoundary} from '../../hooks/host-context'
 import type {RnTooltipAction, RnTooltipComponent, RnTooltipProps} from './rn-tooltip.types'
 
 /** Material's rich tooltip width, in dp. */

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

@@ -2,8 +2,8 @@ import {useAppTheme} from '@hzblj/kara-theme'
 import {Platform, TextInput} from 'react-native'
 
 import {Box} from '../../atoms/box'
+import {RnGlyph} from '../../atoms/glyph'
 import {Pressable} from '../../atoms/pressable'
-import {RnGlyph} from '../../glyph'
 import type {SearchBarComponent, SearchBarProps} from './search-bar.types'
 
 export const SearchBar: SearchBarComponent = ({

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

@@ -1,9 +1,9 @@
 import {useCallback} from 'react'
+import {GlyphButton} from '../../atoms/glyph'
 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 {useHostGuard} from '../../hooks/host-context'
 import type {StepperComponent, StepperProps} from './stepper.types'
 
 export const Stepper: StepperComponent = ({

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

@@ -6,7 +6,7 @@ import {useRef} from 'react'
 import {HStack} from '../../atoms/h-stack'
 import {Spacer} from '../../atoms/spacer'
 import {Text} from '../../atoms/text'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {StepperComponent, StepperProps} from './stepper.types'
 
 /** The label stays VoiceOver's, on the control; on screen it is the row's own text. */

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

@@ -3,7 +3,7 @@ import {TooltipBox} from '@hzblj/kara-native/jetpack-compose'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback} from 'react'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {TooltipComponent, TooltipProps} from './tooltip.types'
 
 /**

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

@@ -1,7 +1,7 @@
 import {Popover} from '@expo/ui/swift-ui'
 import {Text} from '../../atoms/text'
 import {VStack} from '../../atoms/v-stack'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {TooltipComponent, TooltipProps} from './tooltip.types'
 
 export const Tooltip: TooltipComponent = ({children, onDismiss, text, visible}: TooltipProps) => {

package/src/organisms/action-sheet/action-sheet.android.tsx

@@ -3,7 +3,7 @@ import {Icon} from '../../atoms/icon'
 import {Island} from '../../atoms/island'
 import {Text} from '../../atoms/text'
 import {VStack} from '../../atoms/v-stack'
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import {menuActionColor} from '../menu/menu-parts'
 import {Sheet} from '../sheet'
 import type {ActionSheetComponent, ActionSheetProps} from './action-sheet.types'

package/src/organisms/action-sheet/action-sheet.ios.tsx

@@ -1,7 +1,7 @@
 import {Button, ConfirmationDialog, Spacer, Text as SwiftUIText} from '@expo/ui/swift-ui'
 import {disabled, frame} from '@expo/ui/swift-ui/modifiers'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {ActionSheetComponent, ActionSheetProps} from './action-sheet.types'
 
 /**

package/src/organisms/alert/alert.android.tsx

@@ -1,7 +1,7 @@
 import {AlertDialog, Text as ComposeText, TextButton} from '@expo/ui/jetpack-compose'
 import {useAppTheme} from '@hzblj/kara-theme'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {AlertComponent, AlertProps} from './alert.types'
 
 /**

package/src/organisms/alert/alert.ios.tsx

@@ -1,7 +1,7 @@
 import {Button, Spacer, Alert as SwiftUIAlert, Text as SwiftUIText} from '@expo/ui/swift-ui'
 import {frame} from '@expo/ui/swift-ui/modifiers'
 
-import {useHostGuard} from '../../host-context'
+import {useHostGuard} from '../../hooks/host-context'
 import type {AlertComponent, AlertProps} from './alert.types'
 
 /**

package/src/organisms/context-menu/context-menu.android.tsx

@@ -5,8 +5,8 @@ import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useMemo, useRef, useState} from 'react'
 import {type GestureResponderEvent, Pressable, StyleSheet, View} from 'react-native'
 import {Icon} from '../../atoms/icon'
-import {HostBoundary} from '../../host-context'
-import {splitForRipple} from '../../ripple-clip'
+import {HostBoundary} from '../../hooks/host-context'
+import {splitForRipple} from '../../utils/ripple-clip'
 import type {MenuAction} from '../menu'
 import {menuActionColor} from '../menu/menu-parts'
 import type {ContextMenuComponent, ContextMenuExclusionProps, ContextMenuProps} from './context-menu.types'