@hzblj/kara-components 0.6.0 → 0.7.0

package/src/organisms/swipe-actions/swipe-actions.android.tsx

@@ -1,14 +1,134 @@
-import {warnUnsupported} from '../../platform-support'
-import type {SwipeActionsComponent, SwipeActionsProps} from './swipe-actions.types'
+import {FilledIconButton} from '@expo/ui/jetpack-compose'
+import {size} from '@expo/ui/jetpack-compose/modifiers'
+import {SwipeActionsBox, type SwipeActionsBoxEdge} from '@hzblj/kara-native/jetpack-compose'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+import {useCallback, useEffect, useId, useState, useSyncExternalStore} from 'react'
 
-/** Passes the row straight through, so losing the gesture never costs you the content. */
-const SwipeActionsRoot = ({children}: SwipeActionsProps) => {
-  warnUnsupported('SwipeActions', 'Android')
+import {HStack} from '../../atoms/h-stack'
+import {Icon} from '../../atoms/icon'
+import {Text} from '../../atoms/text'
+import {VStack} from '../../atoms/v-stack'
+import {useHostGuard} from '../../host-context'
+import type {SwipeAction, SwipeActionsComponent, SwipeActionsProps} from './swipe-actions.types'
 
-  return children
+/** A Material 3 Expressive wide icon button: wider than tall, a stadium, the label under it. */
+const BUTTON = [size(52, 32)]
+
+/**
+ * Which row is open, app-wide — SwiftUI's list keeps one row open, and so does this: opening one closes the last.
+ * React state cannot be shared between rows that know nothing of each other, so it lives in the module.
+ */
+let openRow: string | null = null
+
+const listeners = new Set<() => void>()
+
+const setOpenRow = (row: string | null) => {
+  if (openRow === row) {
+    return
+  }
+
+  openRow = row
+
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener)
+
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+const getOpenRow = () => openRow
+
+type ActionButtonProps = {action: SwipeAction; onDone: () => void}
+
+const ActionButton = ({action, onDone}: ActionButtonProps) => {
+  const theme = useAppTheme()
+  const fill = action.tint ?? (action.destructive ? 'fill.destructive.primary' : 'fill.accent.primary')
+  const content = !action.tint && action.destructive ? 'content.on.destructive' : 'content.on.bg'
+
+  const onClick = useCallback(() => {
+    onDone()
+    action.onPress()
+  }, [action, onDone])
+
+  return (
+    <VStack align="center" spacing="s2">
+      <FilledIconButton
+        colors={{containerColor: theme.color(fill), contentColor: theme.color(content)}}
+        modifiers={BUTTON}
+        onClick={onClick}
+      >
+        <Icon accessibilityLabel={action.label} color={content} name={action.icon} size="s20" />
+      </FilledIconButton>
+      <Text color="content.secondary" variant="labelMedium">
+        {action.label}
+      </Text>
+    </VStack>
+  )
 }
 
-/** The buttons belong to a gesture that does not exist here, so they are dropped. */
-const SwipeActionsGroup = () => null
+const Actions = ({actions, onDone}: {actions: SwipeAction[]; onDone: () => void}) => (
+  <HStack align="center" spacing="s8">
+    {actions.map(action => (
+      <ActionButton action={action} key={action.label} onDone={onDone} />
+    ))}
+  </HStack>
+)
+
+const close = () => setOpenRow(null)
 
-export const SwipeActions: SwipeActionsComponent = Object.assign(SwipeActionsRoot, {Actions: SwipeActionsGroup})
+/**
+ * kara's `SwipeActionsBox`: the row slides on an anchored drag and the buttons show in the strip it leaves, fading in.
+ * Controlled from here so one row is open at a time; a press closes the row before the action runs.
+ */
+export const SwipeActions: SwipeActionsComponent = ({children, leading = [], trailing = []}: SwipeActionsProps) => {
+  useHostGuard('SwipeActions')
+  const row = useId()
+  const isOpenRow = useSyncExternalStore(subscribe, getOpenRow) === row
+  const [edge, setEdge] = useState<SwipeActionsBoxEdge | null>(null)
+
+  const onOpenChange = useCallback(
+    (next: SwipeActionsBoxEdge | null) => {
+      setEdge(next)
+
+      if (next) {
+        setOpenRow(row)
+      } else if (openRow === row) {
+        setOpenRow(null)
+      }
+    },
+    [row]
+  )
+
+  // A row that goes away open must not keep the others from opening.
+  useEffect(
+    () => () => {
+      if (openRow === row) {
+        setOpenRow(null)
+      }
+    },
+    [row]
+  )
+
+  return (
+    <SwipeActionsBox actionsSpacing={spacing.s12} onOpenChange={onOpenChange} openEdge={isOpenRow ? edge : null}>
+      {leading.length > 0 ? (
+        <SwipeActionsBox.Leading>
+          <Actions actions={leading} onDone={close} />
+        </SwipeActionsBox.Leading>
+      ) : null}
+      {trailing.length > 0 ? (
+        <SwipeActionsBox.Trailing>
+          {/* The first action sits outermost — at the right-hand end of a trailing row. */}
+          <Actions actions={[...trailing].reverse()} onDone={close} />
+        </SwipeActionsBox.Trailing>
+      ) : null}
+      {children}
+    </SwipeActionsBox>
+  )
+}

package/src/organisms/swipe-actions/swipe-actions.ios.tsx

@@ -1,18 +1,52 @@
-import {SwipeActions as SwiftUISwipeActions} from '@expo/ui/swift-ui'
+import {Button, Image, Label, SwipeActions as SwiftUISwipeActions} from '@expo/ui/swift-ui'
+import {tint} from '@expo/ui/swift-ui/modifiers'
+import {iconResourceName} from '@hzblj/kara-native'
+import {useAppTheme} from '@hzblj/kara-theme'
 
 import {useHostGuard} from '../../host-context'
-import type {SwipeActionsComponent, SwipeActionsGroupProps, SwipeActionsProps} from './swipe-actions.types'
+import type {SwipeAction, SwipeActionsComponent, SwipeActionsProps} from './swipe-actions.types'
 
-const SwipeActionsRoot = ({children, testID}: SwipeActionsProps) => {
-  useHostGuard('SwipeActions')
+type ActionsProps = {actions: SwipeAction[]; allowsFullSwipe: boolean; edge: 'leading' | 'trailing'}
+
+/**
+ * The edge's buttons, a `Label` each — iOS 26 draws its icon on a round button with the title under it; earlier
+ * versions, in a row of the usual height, the icon alone. No `destructive` role: SwiftUI would animate the row out by itself, and whether it goes is
+ * the list's data to say.
+ */
+const Actions = ({actions, allowsFullSwipe, edge}: ActionsProps) => {
+  const theme = useAppTheme()
 
-  return <SwiftUISwipeActions testID={testID}>{children}</SwiftUISwipeActions>
+  return (
+    <SwiftUISwipeActions.Actions allowsFullSwipe={allowsFullSwipe} edge={edge}>
+      {actions.map(action => (
+        <Button
+          key={action.label}
+          modifiers={[
+            tint(theme.color(action.tint ?? (action.destructive ? 'fill.destructive.primary' : 'fill.accent.primary'))),
+          ]}
+          onPress={action.onPress}
+        >
+          <Label icon={<Image assetName={iconResourceName(action.icon)} />} title={action.label} />
+        </Button>
+      ))}
+    </SwiftUISwipeActions.Actions>
+  )
 }
 
-const SwipeActionsGroup = ({allowsFullSwipe = true, children, edge = 'trailing'}: SwipeActionsGroupProps) => (
-  <SwiftUISwipeActions.Actions allowsFullSwipe={allowsFullSwipe} edge={edge}>
-    {children}
-  </SwiftUISwipeActions.Actions>
-)
+export const SwipeActions: SwipeActionsComponent = ({
+  allowsFullSwipe = true,
+  children,
+  leading = [],
+  testID,
+  trailing = [],
+}: SwipeActionsProps) => {
+  useHostGuard('SwipeActions')
 
-export const SwipeActions: SwipeActionsComponent = Object.assign(SwipeActionsRoot, {Actions: SwipeActionsGroup})
+  return (
+    <SwiftUISwipeActions testID={testID}>
+      {children}
+      {leading.length > 0 ? <Actions actions={leading} allowsFullSwipe={allowsFullSwipe} edge="leading" /> : null}
+      {trailing.length > 0 ? <Actions actions={trailing} allowsFullSwipe={allowsFullSwipe} edge="trailing" /> : null}
+    </SwiftUISwipeActions>
+  )
+}

package/src/organisms/swipe-actions/swipe-actions.types.ts

@@ -1,24 +1,47 @@
+import type {ColorToken} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
-export type SwipeActionsEdge = 'leading' | 'trailing'
+import type {IconName} from '../../atoms/icon'
+
+/** One button a swiped row uncovers. */
+export type SwipeAction = {
+  /** Fills the button with `fill.destructive.primary` unless `tint` says otherwise. */
+  destructive?: boolean
+  /** One of the app's icons, on the button — a round one on iOS 26, as in Mail, a filled stadium on Android. */
+  icon: IconName
+  /**
+   * The action's name, written under the button — before iOS 26 a row of the usual height shows the icon alone and
+   * keeps the label for VoiceOver. Actions are keyed by it, so keep labels unique within one row.
+   */
+  label: string
+  /** Called when the button is pressed. The row closes by itself. */
+  onPress: () => void
+  /**
+   * The button's fill — `fill.destructive.primary` for a destructive action, `fill.accent.primary` otherwise. The icon
+   * on it is white, so pick a fill that holds white in both appearances.
+   */
+  tint?: ColorToken
+}
 
 /**
- * Swipe-to-reveal buttons on a row. iOS only — Compose ships no equivalent, so on Android the
- * row renders exactly as it would without this wrapper and the action buttons are dropped.
- * Degrading that way rather than to `null` keeps the content on screen.
+ * A list row with buttons behind it, uncovered by a swipe — SwiftUI's `swipeActions` on iOS, and on Android, where
+ * Compose has none, kara's own: the row slides on an anchored drag and the buttons show in the strip it leaves. One
+ * row is open at a time on both; a tap on an open row closes it. A native organism — it belongs inside a `List`.
  */
 export type SwipeActionsProps = {
-  children: ReactNode
-  testID?: string
-}
-
-export type SwipeActionsGroupProps = {
-  /** Whether swiping all the way performs the first action in the group. */
+  /**
+   * iOS: a swipe all the way across performs the edge's first action, as in Mail. Android has no full swipe. `true`
+   * by default, as in SwiftUI.
+   */
   allowsFullSwipe?: boolean
+  /** The row. */
   children: ReactNode
-  edge?: SwipeActionsEdge
+  /** The buttons at the leading edge, uncovered by a swipe toward the trailing one. The first sits outermost. */
+  leading?: SwipeAction[]
+  /** Test identifier. iOS: on the row. Android: the row is a Compose node, reach it by its content. */
+  testID?: string
+  /** The buttons at the trailing edge, uncovered by a swipe toward the leading one. The first sits outermost. */
+  trailing?: SwipeAction[]
 }
 
-export type SwipeActionsComponent = ((props: SwipeActionsProps) => ReactNode) & {
-  Actions: (props: SwipeActionsGroupProps) => ReactNode
-}
+export type SwipeActionsComponent = (props: SwipeActionsProps) => ReactNode

package/src/templates/screen/screen.android.tsx

@@ -1,24 +1,45 @@
 import {Column, Host} from '@expo/ui/jetpack-compose'
+import {padding} from '@expo/ui/jetpack-compose/modifiers'
 import {useSxModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
-import {StyleSheet} from 'react-native'
+import {useCallback, useMemo, useRef, useState} from 'react'
+import {StatusBar, StyleSheet, View} from 'react-native'
 import {HostBoundary} from '../../host-context'
 import type {ScreenComponent, ScreenProps} from './screen.types'
 
+/**
+ * The content keeps clear of as much of the status bar as the screen covers — all of it when nothing sits above the
+ * screen, none under a navigation bar — the way a SwiftUI host keeps to the safe area. Compose would draw under it:
+ * the app is edge to edge, and `Host` pads for nothing. The background still runs to the edge.
+ */
 export const Screen: ScreenComponent = ({bg = 'surface.base', children, ignoreKeyboardInset, testID}: ScreenProps) => {
   const theme = useAppTheme()
-  const modifiers = useSxModifiers({bg, tall: true, wide: true})
+  const frame = useRef<View>(null)
+  const [statusBarOverlap, setStatusBarOverlap] = useState(0)
+  const sx = useSxModifiers({bg, tall: true, wide: true})
+  const modifiers = useMemo(
+    () => (statusBarOverlap > 0 ? [...sx, padding(0, statusBarOverlap, 0, 0)] : sx),
+    [statusBarOverlap, sx]
+  )
+
+  const onLayout = useCallback(() => {
+    frame.current?.measureInWindow((_x, y) => {
+      setStatusBarOverlap(Math.max(0, Math.round((StatusBar.currentHeight ?? 0) - y)))
+    })
+  }, [])
 
   return (
-    <Host
-      colorScheme={theme.dark ? 'dark' : 'light'}
-      ignoreSafeAreaKeyboardInsets={ignoreKeyboardInset}
-      seedColor={theme.materialSeed}
-      style={StyleSheet.absoluteFill}
-    >
-      <Column modifiers={modifiers}>
-        <HostBoundary>{children}</HostBoundary>
-      </Column>
-    </Host>
+    <View onLayout={onLayout} ref={frame} style={StyleSheet.absoluteFill} testID={testID}>
+      <Host
+        colorScheme={theme.dark ? 'dark' : 'light'}
+        ignoreSafeAreaKeyboardInsets={ignoreKeyboardInset}
+        seedColor={theme.materialSeed}
+        style={StyleSheet.absoluteFill}
+      >
+        <Column modifiers={modifiers}>
+          <HostBoundary>{children}</HostBoundary>
+        </Column>
+      </Host>
+    </View>
   )
 }

package/src/templates/screen/screen.types.ts

@@ -1,10 +1,19 @@
 import type {Sx} from '@hzblj/kara-sx'
 import type {ReactNode} from 'react'
 
+/**
+ * The full-bleed native host a screen starts with — a SwiftUI or Compose `Host` filling its parent, so native atoms
+ * render anywhere inside it. The background runs to the edges; the content keeps clear of the status bar where the
+ * screen covers it (no navigation bar above), on Android as SwiftUI's safe area does on iOS.
+ */
 export type ScreenProps = {
+  /** The screen's colour. `surface.base` by default. */
   bg?: Sx['bg']
+  /** Laid out in a column that fills the screen. */
   children?: ReactNode
+  /** Keeps the content where it is when the keyboard opens, instead of avoiding it. Android reads it once, on mount. */
   ignoreKeyboardInset?: boolean
+  /** Test identifier — on the host view on iOS, on the view around it on Android. */
   testID?: string
 }
 

package/lib/module/atoms/flash-list/flash-list.js

@@ -1,31 +0,0 @@
-"use strict";
-
-import { useSplitSx, useSx } from '@hzblj/kara-sx';
-import { FlashList as ShopifyFlashList } from '@shopify/flash-list';
-import { jsx as _jsx } from "react/jsx-runtime";
-/** Stands in for an absent `content`, because a hook cannot be called conditionally. */
-const NO_SX = {};
-
-/**
- * The default list in this codebase: recycles its rows, so it holds a long list at a steady cost.
- *
- * `RnFlatList` and `RnSectionList` are the alternatives, and only for rows that host native views —
- * see either one for why recycling and absolute positioning cannot carry an `@expo/ui` host.
- */
-export const FlashList = ({
-  content,
-  data,
-  renderItem,
-  ...props
-}) => {
-  const [style, rest] = useSplitSx(props);
-  const contentStyle = useSx(content ?? NO_SX);
-  return /*#__PURE__*/_jsx(ShopifyFlashList, {
-    data: data,
-    renderItem: renderItem,
-    ...rest,
-    contentContainerStyle: content === undefined ? undefined : contentStyle,
-    style: style
-  });
-};
-//# sourceMappingURL=flash-list.js.map

package/lib/module/atoms/flash-list/flash-list.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSplitSx","useSx","FlashList","ShopifyFlashList","jsx","_jsx","NO_SX","content","data","renderItem","props","style","rest","contentStyle","contentContainerStyle","undefined"],"sourceRoot":"../../../../src","sources":["atoms/flash-list/flash-list.tsx"],"mappings":";;AAAA,SAAQA,UAAU,EAAEC,KAAK,QAAO,gBAAgB;AAChD,SAAQC,SAAS,IAAIC,gBAAgB,QAAO,qBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIjE;AACA,MAAMC,KAAK,GAAG,CAAC,CAAC;;AAEhB;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMJ,SAAS,GAAGA,CAAS;EAACK,OAAO;EAAEC,IAAI;EAAEC,UAAU;EAAE,GAAGC;AAA4B,CAAC,KAAK;EACjG,MAAM,CAACC,KAAK,EAAEC,IAAI,CAAC,GAAGZ,UAAU,CAACU,KAAgC,CAAC;EAClE,MAAMG,YAAY,GAAGZ,KAAK,CAACM,OAAO,IAAID,KAAK,CAAC;EAE5C,oBACED,IAAA,CAACF,gBAAgB;IACfK,IAAI,EAAEA,IAAK;IACXC,UAAU,EAAEA,UAAW;IAAA,GACnBG,IAAI;IACRE,qBAAqB,EAAEP,OAAO,KAAKQ,SAAS,GAAGA,SAAS,GAAGF,YAAa;IACxEF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/module/atoms/flash-list/flash-list.types.js

@@ -1,4 +0,0 @@
-"use strict";
-
-export {};
-//# sourceMappingURL=flash-list.types.js.map

package/lib/module/atoms/flash-list/flash-list.types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/flash-list/flash-list.types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/atoms/flash-list/index.js

@@ -1,5 +0,0 @@
-"use strict";
-
-export * from "./flash-list.js";
-export * from "./flash-list.types.js";
-//# sourceMappingURL=index.js.map

package/lib/module/atoms/flash-list/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["atoms/flash-list/index.ts"],"mappings":";;AAAA,cAAc,iBAAc;AAC5B,cAAc,uBAAoB","ignoreList":[]}

package/lib/module/atoms/segmented-control/segmented-control.js

@@ -1,40 +0,0 @@
-"use strict";
-
-import { SegmentedControl as NativeSegmentedControl } from '@expo/ui/community/segmented-control';
-import { useAppTheme } from '@hzblj/kara-theme';
-import { useCallback } from 'react';
-import { Platform } from 'react-native';
-import { haptics } from "../../haptics/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * `UISegmentedControl` on iOS, Material's single-choice segmented buttons on Android. A new segment plays `selection`
- * on Android, whose buttons play nothing of their own; iOS 26's control already gives its own feedback.
- */
-export const SegmentedControl = ({
-  disabled = false,
-  onChange,
-  selectedIndex,
-  testID,
-  values
-}) => {
-  const theme = useAppTheme();
-  const onNativeChange = useCallback(event => {
-    const index = event.nativeEvent.selectedSegmentIndex;
-
-    // Material reports a tap on the segment that is already selected too.
-    if (Platform.OS === 'android' && index !== selectedIndex) {
-      haptics.selection();
-    }
-    onChange?.(index, event.nativeEvent.value);
-  }, [onChange, selectedIndex]);
-  return /*#__PURE__*/_jsx(NativeSegmentedControl, {
-    appearance: theme.dark ? 'dark' : 'light',
-    enabled: !disabled,
-    onChange: onNativeChange,
-    selectedIndex: selectedIndex,
-    testID: testID,
-    tintColor: theme.colorString('surface.primary'),
-    values: values
-  });
-};
-//# sourceMappingURL=segmented-control.js.map

package/lib/module/atoms/segmented-control/segmented-control.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","Platform","haptics","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","onNativeChange","event","index","nativeEvent","selectedSegmentIndex","OS","selection","value","appearance","dark","enabled","tintColor","colorString"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,sCAAsC;AAC/F,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,QAAQ,QAAO,cAAc;AAErC,SAAQC,OAAO,QAAO,wBAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrC;AACA;AACA;AACA;AACA,OAAO,MAAMP,gBAA2C,GAAGA,CAAC;EAC1DQ,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGX,WAAW,CAAC,CAAC;EAE3B,MAAMY,cAAc,GAAGX,WAAW,CAC/BY,KAAmE,IAAK;IACvE,MAAMC,KAAK,GAAGD,KAAK,CAACE,WAAW,CAACC,oBAAoB;;IAEpD;IACA,IAAId,QAAQ,CAACe,EAAE,KAAK,SAAS,IAAIH,KAAK,KAAKN,aAAa,EAAE;MACxDL,OAAO,CAACe,SAAS,CAAC,CAAC;IACrB;IAEAX,QAAQ,GAAGO,KAAK,EAAED,KAAK,CAACE,WAAW,CAACI,KAAK,CAAC;EAC5C,CAAC,EACD,CAACZ,QAAQ,EAAEC,aAAa,CAC1B,CAAC;EAED,oBACEH,IAAA,CAACN,sBAAsB;IACrBqB,UAAU,EAAET,KAAK,CAACU,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC1CC,OAAO,EAAE,CAAChB,QAAS;IACnBC,QAAQ,EAAEK,cAAe;IACzBJ,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfc,SAAS,EAAEZ,KAAK,CAACa,WAAW,CAAC,iBAAiB,CAAE;IAChDd,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}

package/lib/typescript/atoms/flash-list/flash-list.d.ts

@@ -1,8 +0,0 @@
-import type { FlashListProps } from './flash-list.types';
-/**
- * The default list in this codebase: recycles its rows, so it holds a long list at a steady cost.
- *
- * `RnFlatList` and `RnSectionList` are the alternatives, and only for rows that host native views —
- * see either one for why recycling and absolute positioning cannot carry an `@expo/ui` host.
- */
-export declare const FlashList: <TItem>({ content, data, renderItem, ...props }: FlashListProps<TItem>) => import("react").JSX.Element;

package/lib/typescript/atoms/flash-list/flash-list.types.d.ts

@@ -1,18 +0,0 @@
-import type { ResponsiveViewSx } from '@hzblj/kara-sx';
-import type { FlashListRef, FlashListProps as ShopifyFlashListProps } from '@shopify/flash-list';
-import type { Ref } from 'react';
-/**
- * Top-level `sx` styles the viewport; `content` styles the scrolling content container — the same split
- * as `RnScrollView` and the React Native lists.
- *
- * Padding belongs in `content` here and nowhere else. FlashList measures its rows against its own
- * `style`, and padding there throws that measurement off; its docs put it as "margin is okay but padding
- * is not". `content` has no such limit, because it lands on the scroll view's content container.
- *
- * `ref` is declared because this is a wrapper rather than the re-export it used to be — React 19 passes
- * it as a plain prop, and a `FlashListRef` is how a caller reaches `scrollToIndex` and friends.
- */
-export type FlashListProps<TItem> = ResponsiveViewSx & Omit<ShopifyFlashListProps<TItem>, 'contentContainerStyle' | 'style'> & {
-    content?: ResponsiveViewSx;
-    ref?: Ref<FlashListRef<TItem>>;
-};

package/lib/typescript/atoms/flash-list/index.d.ts

@@ -1,2 +0,0 @@
-export * from './flash-list';
-export * from './flash-list.types';

package/src/atoms/flash-list/flash-list.tsx

@@ -1,28 +0,0 @@
-import {useSplitSx, useSx} from '@hzblj/kara-sx'
-import {FlashList as ShopifyFlashList} from '@shopify/flash-list'
-
-import type {FlashListProps} from './flash-list.types'
-
-/** Stands in for an absent `content`, because a hook cannot be called conditionally. */
-const NO_SX = {}
-
-/**
- * The default list in this codebase: recycles its rows, so it holds a long list at a steady cost.
- *
- * `RnFlatList` and `RnSectionList` are the alternatives, and only for rows that host native views —
- * see either one for why recycling and absolute positioning cannot carry an `@expo/ui` host.
- */
-export const FlashList = <TItem,>({content, data, renderItem, ...props}: FlashListProps<TItem>) => {
-  const [style, rest] = useSplitSx(props as Record<string, unknown>)
-  const contentStyle = useSx(content ?? NO_SX)
-
-  return (
-    <ShopifyFlashList
-      data={data}
-      renderItem={renderItem}
-      {...rest}
-      contentContainerStyle={content === undefined ? undefined : contentStyle}
-      style={style}
-    />
-  )
-}

package/src/atoms/flash-list/flash-list.types.ts

@@ -1,20 +0,0 @@
-import type {ResponsiveViewSx} from '@hzblj/kara-sx'
-import type {FlashListRef, FlashListProps as ShopifyFlashListProps} from '@shopify/flash-list'
-import type {Ref} from 'react'
-
-/**
- * Top-level `sx` styles the viewport; `content` styles the scrolling content container — the same split
- * as `RnScrollView` and the React Native lists.
- *
- * Padding belongs in `content` here and nowhere else. FlashList measures its rows against its own
- * `style`, and padding there throws that measurement off; its docs put it as "margin is okay but padding
- * is not". `content` has no such limit, because it lands on the scroll view's content container.
- *
- * `ref` is declared because this is a wrapper rather than the re-export it used to be — React 19 passes
- * it as a plain prop, and a `FlashListRef` is how a caller reaches `scrollToIndex` and friends.
- */
-export type FlashListProps<TItem> = ResponsiveViewSx &
-  Omit<ShopifyFlashListProps<TItem>, 'contentContainerStyle' | 'style'> & {
-    content?: ResponsiveViewSx
-    ref?: Ref<FlashListRef<TItem>>
-  }

package/src/atoms/flash-list/index.ts

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

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

@@ -1,47 +0,0 @@
-import {SegmentedControl as NativeSegmentedControl} from '@expo/ui/community/segmented-control'
-import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback} from 'react'
-import {Platform} from 'react-native'
-
-import {haptics} from '../../haptics'
-import type {SegmentedControlComponent, SegmentedControlProps} from './segmented-control.types'
-
-/**
- * `UISegmentedControl` on iOS, Material's single-choice segmented buttons on Android. A new segment plays `selection`
- * on Android, whose buttons play nothing of their own; iOS 26's control already gives its own feedback.
- */
-export const SegmentedControl: SegmentedControlComponent = ({
-  disabled = false,
-  onChange,
-  selectedIndex,
-  testID,
-  values,
-}: SegmentedControlProps) => {
-  const theme = useAppTheme()
-
-  const onNativeChange = useCallback(
-    (event: {nativeEvent: {selectedSegmentIndex: number; value: string}}) => {
-      const index = event.nativeEvent.selectedSegmentIndex
-
-      // Material reports a tap on the segment that is already selected too.
-      if (Platform.OS === 'android' && index !== selectedIndex) {
-        haptics.selection()
-      }
-
-      onChange?.(index, event.nativeEvent.value)
-    },
-    [onChange, selectedIndex]
-  )
-
-  return (
-    <NativeSegmentedControl
-      appearance={theme.dark ? 'dark' : 'light'}
-      enabled={!disabled}
-      onChange={onNativeChange}
-      selectedIndex={selectedIndex}
-      testID={testID}
-      tintColor={theme.colorString('surface.primary')}
-      values={values}
-    />
-  )
-}