@hzblj/kara-components 0.2.1 → 0.4.0

package/src/organisms/sheet/sheet.tsx

@@ -0,0 +1,140 @@
+import {useAppTheme} from '@hzblj/kara-theme'
+import {type DetentChangeEvent, TrueSheet} from '@lodev09/react-native-true-sheet'
+import {useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef} from 'react'
+import {Platform, StyleSheet, View} from 'react-native'
+import type {SheetComponent, SheetDetent, SheetProps} from './sheet.types'
+import {SheetHeader} from './sheet-header'
+import {SheetScrollContext, SheetScrollView} from './sheet-scroll'
+import {splitSheetChildren} from './split-sheet-children'
+import {useSheetHeader} from './use-sheet-header'
+
+const FIT_CONTENT: SheetDetent[] = ['auto']
+
+/** Material's extra-large shape for a bottom sheet; iOS keeps the system's own, which follows the device's corners. */
+const CORNER_RADIUS = Platform.OS === 'android' ? 28 : undefined
+
+/** Keeps the sheet's own native view out of the layout it is declared in. */
+const styles = StyleSheet.create({
+  host: {position: 'absolute'},
+})
+
+const SheetRoot = ({
+  bg = 'surface.primary',
+  children,
+  detents = FIT_CONTENT,
+  dimmed = true,
+  dismissible = true,
+  draggable = true,
+  footer,
+  grabber = true,
+  onDetentChange,
+  onDismiss,
+  onPresent,
+  ref,
+  scrollable = false,
+  testID,
+  visible,
+}: SheetProps) => {
+  const theme = useAppTheme()
+  const {content, header: headerProps} = useMemo(() => splitSheetChildren(children), [children])
+  const sheetHeader = useSheetHeader({header: headerProps, scrollable})
+  const sheetRef = useRef<TrueSheet>(null)
+  const presented = useRef(false)
+  /** A dismissal we asked for: `onDismiss` reports the user's, never ours. */
+  const programmaticDismiss = useRef(false)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      dismiss: () => {
+        presented.current = false
+        programmaticDismiss.current = true
+        return sheetRef.current?.dismiss() ?? Promise.resolve()
+      },
+      present: detentIndex => {
+        presented.current = true
+        return sheetRef.current?.present(detentIndex) ?? Promise.resolve()
+      },
+      resize: detentIndex => sheetRef.current?.resize(detentIndex) ?? Promise.resolve(),
+    }),
+    []
+  )
+
+  useEffect(() => {
+    if (visible && !presented.current) {
+      presented.current = true
+      void sheetRef.current?.present()
+    } else if (!visible && presented.current) {
+      presented.current = false
+      programmaticDismiss.current = true
+      void sheetRef.current?.dismiss()
+    }
+  }, [visible])
+
+  // A sheet unmounted while presented would otherwise stay on screen, blocking everything under it.
+  useLayoutEffect(() => {
+    const sheet = sheetRef.current
+
+    return () => {
+      if (!presented.current) {
+        return
+      }
+
+      presented.current = false
+      programmaticDismiss.current = true
+      void sheet?.dismiss()
+    }
+  }, [])
+
+  const handleDidDismiss = useCallback(() => {
+    presented.current = false
+
+    if (programmaticDismiss.current) {
+      programmaticDismiss.current = false
+      return
+    }
+
+    onDismiss()
+  }, [onDismiss])
+
+  const handleDetentChange = useCallback(
+    (event: DetentChangeEvent) => onDetentChange?.(event.nativeEvent.index),
+    [onDetentChange]
+  )
+
+  return (
+    <View collapsable={false} pointerEvents="box-none" style={styles.host}>
+      <TrueSheet
+        backgroundColor={theme.color(bg)}
+        cornerRadius={CORNER_RADIUS}
+        detents={detents}
+        dimmed={dimmed}
+        dismissible={dismissible}
+        draggable={draggable}
+        footer={footer}
+        grabber={grabber}
+        header={sheetHeader.header}
+        headerStyle={sheetHeader.headerStyle}
+        onDetentChange={handleDetentChange}
+        onDidDismiss={handleDidDismiss}
+        onDidPresent={onPresent}
+        ref={sheetRef}
+        scrollable={scrollable}
+        scrollableOptions={sheetHeader.scrollableOptions}
+        testID={testID}
+      >
+        <SheetScrollContext.Provider value={sheetHeader.scrollContext}>
+          {sheetHeader.staticLargeTitle}
+          {content}
+        </SheetScrollContext.Provider>
+      </TrueSheet>
+    </View>
+  )
+}
+
+/**
+ * A native sheet with an optional native header. `visible` presents and dismisses it; a swipe or a tap outside calls
+ * `onDismiss`, which should set `visible` back. `<Sheet.Header>` (a direct child) gives it a bar with a title and
+ * items; `<Sheet.ScrollView>` is the body of a `scrollable` sheet.
+ */
+export const Sheet: SheetComponent = Object.assign(SheetRoot, {Header: SheetHeader, ScrollView: SheetScrollView})

package/src/organisms/sheet/sheet.types.ts

@@ -1,10 +1,100 @@
-import type {ReactNode} from 'react'
+import type {ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {ColorToken} from '@hzblj/kara-theme'
+import type {ReactElement, ReactNode, Ref} from 'react'
+import type {NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps} from 'react-native'
+import type {NavigationBarItem, NavigationBarSearch} from '../../molecules/navigation-bar'
 
+/** `auto` fits the content; a number is a fraction of the screen's height. */
+export type SheetDetent = 'auto' | number
+
+/**
+ * `center` is iOS's own, `leading` Material's. `large` puts the title above the content in a large face, and once
+ * that scrolls under the bar the bar's own title fades in — centred on iOS, leading on Android.
+ */
+export type SheetTitleStyle = 'center' | 'large' | 'leading'
+
+/**
+ * The sheet's header: a `NavigationBar` with the title and items, and anything else that should stay put above the
+ * content (`children` — a segmented control, a search hint). On iOS 26 a scrollable sheet's content scrolls under it
+ * with the system's scroll edge effect; elsewhere it sits above the content.
+ */
+export type SheetHeaderProps = {
+  /** Pinned under the bar. */
+  children?: ReactNode
+  /** Light items and title, for a sheet with a dark or image background. */
+  inverted?: boolean
+  /** In screen order, from the leading edge. */
+  leadingItems?: NavigationBarItem[]
+  /** A search field in place of the title (iOS). */
+  search?: NavigationBarSearch
+  title?: string
+  /** `center` by default. */
+  titleStyle?: SheetTitleStyle
+  /** In screen order, toward the trailing edge — the close item, by convention. */
+  trailingItems?: NavigationBarItem[]
+}
+
+export type SheetRef = {
+  dismiss: () => Promise<void>
+  /** Presents at a detent — the first by default. */
+  present: (detentIndex?: number) => Promise<void>
+  /** Moves to another detent. */
+  resize: (detentIndex: number) => Promise<void>
+}
+
+/**
+ * A native sheet — `UISheetPresentationController` on iOS, Material's bottom sheet on Android — with an optional
+ * native header (`<Sheet.Header>` as a direct child). The React Native tier: it needs no host, and must not sit inside
+ * one; native atoms in its content go in an `Island`.
+ */
 export type SheetProps = {
+  /** The sheet's colour. `surface.primary` by default. */
+  bg?: ColorToken
   children: ReactNode
-  fitToContents?: boolean
+  /** Where the sheet can rest, smallest first. `['auto']` — fit the content — by default. */
+  detents?: SheetDetent[]
+  /** Dims what is behind. On by default. */
+  dimmed?: boolean
+  /** A swipe down or a tap outside closes it. On by default. */
+  dismissible?: boolean
+  /** It follows the finger between detents. On by default. */
+  draggable?: boolean
+  /** Pinned to the bottom, above the content and the keyboard. */
+  footer?: ReactElement
+  /** The drag handle. On by default. */
+  grabber?: boolean
+  /** The user dismissed it — `visible` going false does not call this. */
   onDismiss: () => void
+  onDetentChange?: (detentIndex: number) => void
+  onPresent?: () => void
+  ref?: Ref<SheetRef>
+  /**
+   * The content is a scroll view (`<Sheet.ScrollView>`) the sheet drives: dragging past its top resizes the sheet,
+   * and a header scrolls with the iOS 26 edge effect. Off by default — set it with a scrolling body.
+   */
+  scrollable?: boolean
+  testID?: string
   visible: boolean
 }
 
-export type SheetComponent = (props: SheetProps) => ReactNode
+export type SheetScrollHandler = (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+
+/** What a scroll view inside a sheet needs: the room the header takes, the large title, the scroll listener. */
+export type SheetScrollContextValue = {
+  largeTitle: ReactNode
+  onScroll?: SheetScrollHandler
+  topInset: number
+}
+
+export type SheetScrollViewProps = Pick<ScrollViewProps, 'keyboardShouldPersistTaps'> & {
+  children: ReactNode
+  /** Styles the scrolling content — padding and gap belong here, as with `RnScrollView`. */
+  content?: ResponsiveViewSx
+  onScroll?: SheetScrollHandler
+  testID?: string
+}
+
+export type SheetComponent = ((props: SheetProps) => ReactNode) & {
+  Header: (props: SheetHeaderProps) => ReactNode
+  ScrollView: (props: SheetScrollViewProps) => ReactNode
+}

package/src/organisms/sheet/split-sheet-children.ts

@@ -0,0 +1,23 @@
+import {Children, isValidElement, type ReactElement, type ReactNode} from 'react'
+import type {SheetHeaderProps} from './sheet.types'
+import {SheetHeader} from './sheet-header'
+
+type SheetChildren = {
+  content: ReactNode
+  header?: SheetHeaderProps
+}
+
+const isSheetHeader = (child: ReactNode): child is ReactElement<SheetHeaderProps> =>
+  isValidElement(child) && child.type === SheetHeader
+
+/** Takes `<Sheet.Header>` out of the children: its props become the native header, the rest is the content. */
+export const splitSheetChildren = (children: ReactNode): SheetChildren => {
+  const nodes = Children.toArray(children)
+  const header = nodes.find(isSheetHeader)
+
+  if (!header) {
+    return {content: children}
+  }
+
+  return {content: nodes.filter(node => node !== header), header: header.props}
+}

package/src/organisms/sheet/use-sheet-header.tsx

@@ -0,0 +1,135 @@
+import {isScrollEdgeEffectAvailable} from '@hzblj/kara-native'
+import {spacing} from '@hzblj/kara-theme'
+import {useCallback, useMemo, useRef, useState} from 'react'
+import {type LayoutChangeEvent, Platform, type ViewStyle} from 'react-native'
+
+import {Box} from '../../atoms/box'
+import {RnText} from '../../atoms/rn-text'
+import {NavigationBar, type NavigationBarTitleAlignment} from '../../molecules/navigation-bar'
+import type {SheetHeaderProps, SheetScrollContextValue, SheetScrollHandler} from './sheet.types'
+
+type UseSheetHeaderParams = {
+  header?: SheetHeaderProps
+  scrollable: boolean
+}
+
+/** The bar's own height (`NavigationBar`) plus the room above it, before the header has been measured. */
+const ESTIMATED_HEADER_HEIGHT = (Platform.OS === 'ios' ? 56 : 64) + spacing.s16
+
+/** Where a large title's bar title appears once it has scrolled away: the platform's own place for it. */
+const COLLAPSED_TITLE_ALIGNMENT: NavigationBarTitleAlignment = Platform.OS === 'ios' ? 'center' : 'leading'
+
+/** Lays the header over the content so the content can scroll under it — the edge effect needs it there. */
+const OVERLAY_HEADER_STYLE: ViewStyle = {left: 0, position: 'absolute', right: 0, top: 0, zIndex: 1}
+
+const SOFT_EDGE_EFFECTS = {bottomScrollEdgeEffect: 'soft', topScrollEdgeEffect: 'soft'} as const
+
+const SheetLargeTitle = ({onLayout, title}: {onLayout: (event: LayoutChangeEvent) => void; title: string}) => (
+  <Box onLayout={onLayout} pb="s8" pt="s8" px="s16">
+    <RnText accessibilityRole="header" variant="headingM">
+      {title}
+    </RnText>
+  </Box>
+)
+
+/**
+ * Turns `<Sheet.Header>`'s props into what the native sheet takes: its header element, how that is laid out, the scroll
+ * edge effects, and the context a `<Sheet.ScrollView>` reads. On iOS 26 a scrollable sheet's header is laid over the
+ * content (which is then inset by the header's measured height) so the system's soft edge blurs what scrolls under it;
+ * everywhere else the header simply sits above the content.
+ */
+export const useSheetHeader = ({header: headerProps, scrollable}: UseSheetHeaderParams) => {
+  const title = headerProps?.title
+  const titleStyle = headerProps?.titleStyle ?? 'center'
+  const leadingItems = headerProps?.leadingItems
+  const trailingItems = headerProps?.trailingItems
+  const inverted = headerProps?.inverted
+  const search = headerProps?.search
+  const accessory = headerProps?.children
+  const hasBar = title !== undefined || !!leadingItems?.length || !!trailingItems?.length || !!search
+  const hasHeader = hasBar || !!accessory
+  const isOverlay = isScrollEdgeEffectAvailable() && hasHeader && scrollable
+  const isLargeTitle = titleStyle === 'large' && !!title
+
+  const [headerHeight, setHeaderHeight] = useState(hasBar ? ESTIMATED_HEADER_HEIGHT : 0)
+  const [largeTitleScrolledAway, setLargeTitleScrolledAway] = useState(false)
+  const largeTitleHeight = useRef(0)
+
+  const handleHeaderLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeaderHeight(event.nativeEvent.layout.height)
+  }, [])
+
+  const handleLargeTitleLayout = useCallback((event: LayoutChangeEvent) => {
+    largeTitleHeight.current = event.nativeEvent.layout.height
+  }, [])
+
+  const handleScroll = useCallback<SheetScrollHandler>(event => {
+    if (largeTitleHeight.current === 0) {
+      return
+    }
+
+    setLargeTitleScrolledAway(event.nativeEvent.contentOffset.y >= largeTitleHeight.current)
+  }, [])
+
+  const titleAlignment: NavigationBarTitleAlignment = titleStyle === 'large' ? COLLAPSED_TITLE_ALIGNMENT : titleStyle
+  const titleVisible = !isLargeTitle || (scrollable && largeTitleScrolledAway)
+
+  const headerElement = useMemo(() => {
+    if (!hasHeader) {
+      return undefined
+    }
+
+    return (
+      <Box onLayout={isOverlay ? handleHeaderLayout : undefined} pt="s16">
+        {hasBar ? (
+          <NavigationBar
+            inverted={inverted}
+            leadingItems={leadingItems}
+            search={search}
+            title={title}
+            titleAlignment={titleAlignment}
+            titleVisible={titleVisible}
+            trailingItems={trailingItems}
+          />
+        ) : null}
+        {accessory}
+      </Box>
+    )
+  }, [
+    accessory,
+    handleHeaderLayout,
+    hasBar,
+    hasHeader,
+    inverted,
+    isOverlay,
+    leadingItems,
+    search,
+    title,
+    titleAlignment,
+    titleVisible,
+    trailingItems,
+  ])
+
+  const largeTitle = useMemo(
+    () => (title && isLargeTitle ? <SheetLargeTitle onLayout={handleLargeTitleLayout} title={title} /> : null),
+    [handleLargeTitleLayout, isLargeTitle, title]
+  )
+
+  const scrollContext = useMemo<SheetScrollContextValue>(
+    () => ({
+      largeTitle: scrollable ? largeTitle : null,
+      onScroll: scrollable && isLargeTitle ? handleScroll : undefined,
+      topInset: isOverlay ? headerHeight : 0,
+    }),
+    [handleScroll, headerHeight, isLargeTitle, isOverlay, largeTitle, scrollable]
+  )
+
+  return {
+    header: headerElement,
+    headerStyle: isOverlay ? OVERLAY_HEADER_STYLE : undefined,
+    scrollableOptions: isOverlay ? SOFT_EDGE_EFFECTS : undefined,
+    scrollContext,
+    /** Without a scroll view to carry it, a large title simply leads the content. */
+    staticLargeTitle: scrollable ? null : largeTitle,
+  }
+}

package/src/ripple-clip.ts

@@ -0,0 +1,47 @@
+import {StyleSheet, type ViewStyle} from 'react-native'
+
+/** What lays out a view's children — it goes on the pressable inside, so the content sits where the caller put it. */
+const CONTENT_KEYS = new Set<string>([
+  'alignContent',
+  'alignItems',
+  'columnGap',
+  'flexDirection',
+  'flexWrap',
+  'gap',
+  'justifyContent',
+  'padding',
+  'paddingBottom',
+  'paddingEnd',
+  'paddingHorizontal',
+  'paddingLeft',
+  'paddingRight',
+  'paddingStart',
+  'paddingTop',
+  'paddingVertical',
+  'rowGap',
+])
+
+const FILL: ViewStyle = {flexGrow: 1}
+
+/**
+ * Splits a resolved style for a pressable with an Android ripple. The ripple is drawn as the pressable's foreground,
+ * which its own `overflow: hidden` does not clip — so it would spill past rounded corners. A parent clips its
+ * children's foregrounds, though: the outer view takes the shape, background, border and outer layout and clips; the
+ * pressable inside takes the padding and the content layout and fills it, so the ripple covers the whole card and
+ * stops at its corners.
+ */
+export const splitForRipple = (style: ViewStyle | undefined): {inner: ViewStyle[]; outer: ViewStyle} => {
+  const flat = StyleSheet.flatten(style) ?? {}
+  const outer: Record<string, unknown> = {overflow: 'hidden'}
+  const inner: Record<string, unknown> = {}
+
+  for (const [key, value] of Object.entries(flat)) {
+    if (CONTENT_KEYS.has(key)) {
+      inner[key] = value
+    } else if (key !== 'overflow') {
+      outer[key] = value
+    }
+  }
+
+  return {inner: [FILL, inner as ViewStyle], outer: outer as ViewStyle}
+}

package/src/use-stack-modifiers.ts

@@ -0,0 +1,24 @@
+import {clickable, type ModifierConfig, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {type ResponsiveSx, useSxModifiers} from '@hzblj/kara-sx'
+import {useMemo} from 'react'
+
+/**
+ * A Compose stack's modifiers in the order a pressable one needs: its frame, shape and background, then the press,
+ * then its padding. Compose clips a `clickable` to what comes after it, so with the padding first the ripple would stop
+ * at the padding and a row pressed by its edge would light up only in the middle.
+ */
+export const useStackModifiers = (sx: ResponsiveSx, onPress?: () => void, testID?: string): ModifierConfig[] => {
+  const {p, pb, pl, pr, pt, px, py, ...frame} = sx
+  const frameModifiers = useSxModifiers(frame)
+  const paddingModifiers = useSxModifiers({p, pb, pl, pr, pt, px, py})
+
+  return useMemo(
+    () => [
+      ...frameModifiers,
+      ...(testID ? [testIdModifier(testID)] : []),
+      ...(onPress ? [clickable(onPress)] : []),
+      ...paddingModifiers,
+    ],
+    [frameModifiers, onPress, paddingModifiers, testID]
+  )
+}

package/lib/module/organisms/sheet/sheet.android.js

@@ -1,26 +0,0 @@
-"use strict";
-
-import { ModalBottomSheet } from '@expo/ui/jetpack-compose';
-import { useAppTheme } from '@hzblj/kara-theme';
-import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Sheet = ({
-  children,
-  fitToContents = true,
-  onDismiss,
-  visible
-}) => {
-  useHostGuard('Sheet');
-  const theme = useAppTheme();
-  if (!visible) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(ModalBottomSheet, {
-    containerColor: theme.color('surface.primary'),
-    contentColor: theme.color('content.primary'),
-    onDismissRequest: onDismiss,
-    skipPartiallyExpanded: fitToContents,
-    children: children
-  });
-};
-//# sourceMappingURL=sheet.android.js.map

package/lib/module/organisms/sheet/sheet.android.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ModalBottomSheet","useAppTheme","useHostGuard","jsx","_jsx","Sheet","children","fitToContents","onDismiss","visible","theme","containerColor","color","contentColor","onDismissRequest","skipPartiallyExpanded"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.android.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,QAAO,0BAA0B;AACzD,SAAQC,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAEC,SAAS;EAAEC;AAAmB,CAAC,KAAK;EACzGP,YAAY,CAAC,OAAO,CAAC;EACrB,MAAMQ,KAAK,GAAGT,WAAW,CAAC,CAAC;EAE3B,IAAI,CAACQ,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACEL,IAAA,CAACJ,gBAAgB;IACfW,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC,iBAAiB,CAAE;IAC/CC,YAAY,EAAEH,KAAK,CAACE,KAAK,CAAC,iBAAiB,CAAE;IAC7CE,gBAAgB,EAAEN,SAAU;IAC5BO,qBAAqB,EAAER,aAAc;IAAAD,QAAA,EAEpCA;EAAQ,CACO,CAAC;AAEvB,CAAC","ignoreList":[]}

package/lib/module/organisms/sheet/sheet.ios.js

@@ -1,25 +0,0 @@
-"use strict";
-
-import { BottomSheet } from '@expo/ui/swift-ui';
-import { useHostGuard } from "../../host-context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Sheet = ({
-  children,
-  fitToContents = true,
-  onDismiss,
-  visible
-}) => {
-  useHostGuard('Sheet');
-  return /*#__PURE__*/_jsx(BottomSheet, {
-    fitToContents: fitToContents,
-    isPresented: visible,
-    onDismiss: onDismiss,
-    onIsPresentedChange: next => {
-      if (!next) {
-        onDismiss();
-      }
-    },
-    children: children
-  });
-};
-//# sourceMappingURL=sheet.ios.js.map

package/lib/module/organisms/sheet/sheet.ios.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["BottomSheet","useHostGuard","jsx","_jsx","Sheet","children","fitToContents","onDismiss","visible","isPresented","onIsPresentedChange","next"],"sourceRoot":"../../../../src","sources":["organisms/sheet/sheet.ios.tsx"],"mappings":";;AAAA,SAAQA,WAAW,QAAO,mBAAmB;AAE7C,SAAQC,YAAY,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG/C,OAAO,MAAMC,KAAqB,GAAGA,CAAC;EAACC,QAAQ;EAAEC,aAAa,GAAG,IAAI;EAAEC,SAAS;EAAEC;AAAmB,CAAC,KAAK;EACzGP,YAAY,CAAC,OAAO,CAAC;EAErB,oBACEE,IAAA,CAACH,WAAW;IACVM,aAAa,EAAEA,aAAc;IAC7BG,WAAW,EAAED,OAAQ;IACrBD,SAAS,EAAEA,SAAU;IACrBG,mBAAmB,EAAEC,IAAI,IAAI;MAC3B,IAAI,CAACA,IAAI,EAAE;QACTJ,SAAS,CAAC,CAAC;MACb;IACF,CAAE;IAAAF,QAAA,EAEDA;EAAQ,CACE,CAAC;AAElB,CAAC","ignoreList":[]}

package/lib/typescript/organisms/sheet/sheet.ios.d.ts

@@ -1,2 +0,0 @@
-import type { SheetComponent } from './sheet.types';
-export declare const Sheet: SheetComponent;

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

@@ -1,25 +0,0 @@
-import {ModalBottomSheet} from '@expo/ui/jetpack-compose'
-import {useAppTheme} from '@hzblj/kara-theme'
-
-import {useHostGuard} from '../../host-context'
-import type {SheetComponent, SheetProps} from './sheet.types'
-
-export const Sheet: SheetComponent = ({children, fitToContents = true, onDismiss, visible}: SheetProps) => {
-  useHostGuard('Sheet')
-  const theme = useAppTheme()
-
-  if (!visible) {
-    return null
-  }
-
-  return (
-    <ModalBottomSheet
-      containerColor={theme.color('surface.primary')}
-      contentColor={theme.color('content.primary')}
-      onDismissRequest={onDismiss}
-      skipPartiallyExpanded={fitToContents}
-    >
-      {children}
-    </ModalBottomSheet>
-  )
-}

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

@@ -1,23 +0,0 @@
-import {BottomSheet} from '@expo/ui/swift-ui'
-
-import {useHostGuard} from '../../host-context'
-import type {SheetComponent, SheetProps} from './sheet.types'
-
-export const Sheet: SheetComponent = ({children, fitToContents = true, onDismiss, visible}: SheetProps) => {
-  useHostGuard('Sheet')
-
-  return (
-    <BottomSheet
-      fitToContents={fitToContents}
-      isPresented={visible}
-      onDismiss={onDismiss}
-      onIsPresentedChange={next => {
-        if (!next) {
-          onDismiss()
-        }
-      }}
-    >
-      {children}
-    </BottomSheet>
-  )
-}