@hzblj/kara-components 0.2.0 → 0.3.0

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

@@ -1,26 +1,65 @@
-import type {ReactNode} from 'react'
+import type {ReactNode, Ref} from 'react'
+
+import type {IconName} from '../../atoms/icon'
+
+type NavigationBarItemBase = {
+  onPress: () => void
+  /**
+   * iOS 26: neighbouring items on one side share a glass capsule; this gives the item its own. A close next to
+   * actions usually wants it. Material has no grouped capsules, so Android ignores it.
+   */
+  separated?: boolean
+  /** iOS: the item's accessibility identifier; Android: its test tag. */
+  testID?: string
+}
+
+/**
+ * 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.
+ */
+export type NavigationBarItem =
+  | (NavigationBarItemBase & {label?: string; type: 'back' | 'close'})
+  | (NavigationBarItemBase & {icon: IconName; label: string; type: 'icon'})
+
+export type NavigationBarSearchRef = {
+  /** Empties the field and ends editing. */
+  clear: () => void
+}
+
+/** A search field in place of the title — iOS only for now; Android keeps the title. */
+export type NavigationBarSearch = {
+  onChangeText: (text: string) => void
+  onFocusChange?: (focused: boolean) => void
+  placeholder: string
+  ref?: Ref<NavigationBarSearchRef>
+  testID?: string
+}
+
+export type NavigationBarTitleAlignment = 'center' | 'leading'
 
 /**
- * A title with back and close items, for a sheet that is not a navigation screen. On iOS a standalone
- * `UINavigationBar`, so the items press and render exactly like a native-stack header's — on iOS 26 they share the
- * bar's glass instead of swelling as standalone glass buttons do. On Android a Material row of icon buttons. The React
- * Native tier: it needs no host.
+ * A title with items on either side, for a header that is not a navigation screen's — `Sheet.Header` is built on it.
+ * On iOS a standalone `UINavigationBar`, so the items press and render exactly like a native-stack header's: on iOS 26
+ * neighbours share a glass capsule instead of swelling as standalone glass buttons do. On Android Material's top app
+ * bar. Where an item goes is the caller's choice — the bar places nothing by itself, so a close can sit on either side.
+ * The React Native tier: it needs no host.
  */
 export type NavigationBarProps = {
-  /** The back item's accessibility label. `Back` by default. */
-  backLabel?: string
-  /** iOS: the back item's accessibility identifier. */
-  backTestID?: string
-  /** The close item's accessibility label. `Close` by default. */
-  closeLabel?: string
-  /** iOS: the close item's accessibility identifier. */
-  closeTestID?: string
-  /** Shows the back item. */
-  onBack?: () => void
-  /** Shows the close item. */
-  onClose?: () => void
+  /** Light items and title, for a bar laid over an image or a dark hero. */
+  inverted?: boolean
+  /** In screen order, from the leading edge. */
+  leadingItems?: NavigationBarItem[]
+  /** Replaces the title with a search field (iOS). */
+  search?: NavigationBarSearch
   testID?: string
   title?: string
+  /** `center` by default — iOS's own; `leading` is Material's top app bar. */
+  titleAlignment?: NavigationBarTitleAlignment
+  /** Fades the title out and in without moving the items — for a large title that scrolls under the bar. */
+  titleVisible?: boolean
+  /** In screen order, toward the trailing edge. */
+  trailingItems?: NavigationBarItem[]
 }
 
 export type NavigationBarComponent = (props: NavigationBarProps) => ReactNode

package/src/organisms/sheet/index.ts

@@ -1,2 +1,3 @@
 export * from './sheet'
 export * from './sheet.types'
+export {useSheetScroll} from './sheet-scroll'

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

@@ -0,0 +1,6 @@
+import type {SheetHeaderProps} from './sheet.types'
+
+/** A slot, never rendered: `Sheet` reads its props and builds the header into the native sheet's own header area. */
+export const SheetHeader = (_props: SheetHeaderProps): never => {
+  throw new Error('[kara-ui] <Sheet.Header> must be a direct child of <Sheet>.')
+}

package/src/organisms/sheet/sheet-scroll.tsx

@@ -0,0 +1,69 @@
+import {useSx} from '@hzblj/kara-sx'
+import {createContext, useCallback, useContext, useMemo} from 'react'
+import {ScrollView} from 'react-native'
+
+import type {SheetScrollContextValue, SheetScrollHandler, SheetScrollViewProps} from './sheet.types'
+
+export const SheetScrollContext = createContext<SheetScrollContextValue | null>(null)
+
+/**
+ * For a scroll view of your own inside a sheet (a `RnFlatList`, say): pad its content by `topInset`, render
+ * `largeTitle` first, and forward `onScroll` — which is what `<Sheet.ScrollView>` does.
+ */
+export const useSheetScroll = (): SheetScrollContextValue => {
+  const context = useContext(SheetScrollContext)
+
+  if (context === null) {
+    throw new Error('[kara-ui] useSheetScroll and <Sheet.ScrollView> must be used inside <Sheet>.')
+  }
+
+  return context
+}
+
+const NO_SX = {}
+
+/** The sheet's scrolling body: starts below the header on iOS 26, carries a large title, and reports its scroll. */
+export const SheetScrollView = ({
+  children,
+  content,
+  keyboardShouldPersistTaps,
+  onScroll,
+  testID,
+}: SheetScrollViewProps) => {
+  const {largeTitle, onScroll: onSheetScroll, topInset} = useSheetScroll()
+  const contentStyle = useSx(content ?? NO_SX)
+  // The header's room goes on top of the content's own top padding, not in place of it.
+  const containerStyle = useMemo(() => {
+    if (topInset === 0) {
+      return contentStyle
+    }
+
+    const ownTop = typeof contentStyle.paddingTop === 'number' ? contentStyle.paddingTop : 0
+
+    return [contentStyle, {paddingTop: topInset + ownTop}]
+  }, [contentStyle, topInset])
+
+  const handleScroll = useCallback<SheetScrollHandler>(
+    event => {
+      onSheetScroll?.(event)
+      onScroll?.(event)
+    },
+    [onScroll, onSheetScroll]
+  )
+
+  return (
+    <ScrollView
+      contentContainerStyle={containerStyle}
+      contentInsetAdjustmentBehavior="never"
+      keyboardShouldPersistTaps={keyboardShouldPersistTaps}
+      nestedScrollEnabled
+      onScroll={onSheetScroll || onScroll ? handleScroll : undefined}
+      overScrollMode="always"
+      scrollEventThrottle={16}
+      testID={testID}
+    >
+      {largeTitle}
+      {children}
+    </ScrollView>
+  )
+}

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/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>
-  )
-}