@hzblj/kara-components 0.0.0-stage → 0.1.0

package/lib/typescript/atoms/countdown/countdown.types.d.ts

@@ -0,0 +1,21 @@
+import type { CountdownUnits } from '@hzblj/kara-native';
+import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type { CountdownUnits } from '@hzblj/kara-native';
+/**
+ * A live countdown — `2d / 05h / 09m / 41s` — drawn natively, so it ticks and rolls its digits without a React render
+ * per second. The React Native tier: it sizes itself with an invisible React Native text of the same shape, and lays
+ * its own native host over that, so it needs no `Screen` or `Island` around it.
+ */
+export type CountdownProps = {
+    color?: ColorToken;
+    /** The moment it reaches zero, as a `Date` or epoch milliseconds. It stops there. */
+    endsAt: Date | number;
+    /** Picks the unit initials when `units` is not given. The device's locale by default. */
+    locale?: string;
+    testID?: string;
+    /** Overrides the locale's unit initials. */
+    units?: CountdownUnits;
+    variant?: TextVariant;
+};
+export type CountdownComponent = (props: CountdownProps) => ReactNode;

package/lib/typescript/atoms/countdown/index.d.ts

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

package/lib/typescript/atoms/date-picker/date-picker.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerComponent } from './date-picker.types';
+export declare const DatePicker: DatePickerComponent;

package/lib/typescript/atoms/date-picker/date-picker.types.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type DatePickerMode = 'date' | 'datetime' | 'time';
+export type DatePickerProps = {
+    max?: Date;
+    min?: Date;
+    mode?: DatePickerMode;
+    onValueChange?: (date: Date) => void;
+    testID?: string;
+    value: Date;
+};
+export type DatePickerComponent = (props: DatePickerProps) => ReactNode;

package/lib/typescript/atoms/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-picker';
+export * from './date-picker.types';

package/lib/typescript/atoms/divider/divider.d.ts

@@ -0,0 +1 @@
+export * from './divider.ios';

package/lib/typescript/atoms/divider/divider.ios.d.ts

@@ -0,0 +1,2 @@
+import type { DividerComponent } from './divider.types';
+export declare const Divider: DividerComponent;

package/lib/typescript/atoms/divider/divider.types.d.ts

@@ -0,0 +1,7 @@
+import type { ColorToken } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type DividerProps = {
+    color?: ColorToken;
+    testID?: string;
+};
+export type DividerComponent = (props: DividerProps) => ReactNode;

package/lib/typescript/atoms/divider/index.d.ts

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

package/lib/typescript/atoms/fab/fab.d.ts

@@ -0,0 +1 @@
+export * from './fab.ios';

package/lib/typescript/atoms/fab/fab.ios.d.ts

@@ -0,0 +1,2 @@
+import type { FabComponent } from './fab.types';
+export declare const Fab: FabComponent;

package/lib/typescript/atoms/fab/fab.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../icon';
+export type FabProps = {
+    name: IconName;
+    onPress?: () => void;
+    testID?: string;
+};
+export type FabComponent = (props: FabProps) => ReactNode;

package/lib/typescript/atoms/fab/index.d.ts

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,18 @@
+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

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

package/lib/typescript/atoms/glass-view/glass-fallback.d.ts

@@ -0,0 +1,3 @@
+import type { GlassViewProps } from './glass-view.types';
+/** The capsule drawn where there is no Liquid Glass to draw. */
+export declare const GlassFallback: ({ children, interactive: _interactive, tint, ...props }: GlassViewProps) => import("react").JSX.Element;

package/lib/typescript/atoms/glass-view/glass-view.d.ts

@@ -0,0 +1 @@
+export * from './glass-view.ios';

package/lib/typescript/atoms/glass-view/glass-view.ios.d.ts

@@ -0,0 +1,2 @@
+import type { GlassViewComponent } from './glass-view.types';
+export declare const GlassView: GlassViewComponent;

package/lib/typescript/atoms/glass-view/glass-view.types.d.ts

@@ -0,0 +1,18 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { ColorToken } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+/**
+ * iOS 26 Liquid Glass around a React Native subtree, shaped as a capsule — the React Native tier, so it needs no host
+ * and costs next to nothing in a list cell. Where there is no Liquid Glass (Android, and iOS before 26) it draws a
+ * capsule of `tint` instead, or of `fill.tertiary` when there is none.
+ */
+export type GlassViewProps = ResponsiveViewSx & {
+    /** React Native views. Give them `pointerEvents="none"` when `interactive`, so the press reaches the `Pressable`. */
+    children?: ReactNode;
+    /** Swells toward the finger on touch, carrying the children with it. Wrap the view in a `Pressable` for the press. */
+    interactive?: boolean;
+    testID?: string;
+    /** Tints the material. Unset leaves it clear. */
+    tint?: ColorToken;
+};
+export type GlassViewComponent = (props: GlassViewProps) => ReactNode;

package/lib/typescript/atoms/glass-view/index.d.ts

@@ -0,0 +1,3 @@
+export { isLiquidGlassAvailable } from '@hzblj/kara-native';
+export * from './glass-view';
+export * from './glass-view.types';

package/lib/typescript/atoms/h-stack/h-stack.d.ts

@@ -0,0 +1 @@
+export * from './h-stack.ios';

package/lib/typescript/atoms/h-stack/h-stack.ios.d.ts

@@ -0,0 +1,2 @@
+import type { HStackComponent } from './h-stack.types';
+export declare const HStack: HStackComponent;

package/lib/typescript/atoms/h-stack/h-stack.types.d.ts

@@ -0,0 +1,12 @@
+import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type HStackAlign = 'center' | 'end' | 'start';
+export type HStackProps = ResponsiveSx & {
+    align?: HStackAlign;
+    children?: ReactNode;
+    onPress?: () => void;
+    spacing?: SpaceSize;
+    testID?: string;
+};
+export type HStackComponent = (props: HStackProps) => ReactNode;

package/lib/typescript/atoms/h-stack/index.d.ts

@@ -0,0 +1,2 @@
+export * from './h-stack';
+export * from './h-stack.types';

package/lib/typescript/atoms/icon/icon-names.d.ts

@@ -0,0 +1,50 @@
+export declare const SF_SYMBOLS: {
+    readonly add: 'plus';
+    readonly arrowLeft: 'arrow.left';
+    readonly arrowRight: 'arrow.right';
+    readonly calendar: 'calendar';
+    readonly check: 'checkmark';
+    readonly chevronDown: 'chevron.down';
+    readonly chevronRight: 'chevron.right';
+    readonly close: 'xmark';
+    readonly error: 'exclamationmark.octagon';
+    readonly grid: 'square.grid.2x2';
+    readonly heart: 'heart';
+    readonly home: 'house';
+    readonly info: 'info.circle';
+    readonly lock: 'lock';
+    readonly more: 'ellipsis';
+    readonly notification: 'bell';
+    readonly search: 'magnifyingglass';
+    readonly settings: 'gearshape';
+    readonly share: 'square.and.arrow.up';
+    readonly star: 'star';
+    readonly trash: 'trash';
+    readonly user: 'person';
+    readonly warning: 'exclamationmark.triangle';
+};
+export declare const MATERIAL_ICONS: {
+    readonly add: 'add';
+    readonly arrowLeft: 'arrow-back';
+    readonly arrowRight: 'arrow-forward';
+    readonly calendar: 'calendar-today';
+    readonly check: 'check';
+    readonly chevronDown: 'expand-more';
+    readonly chevronRight: 'chevron-right';
+    readonly close: 'close';
+    readonly error: 'error';
+    readonly grid: 'grid-view';
+    readonly heart: 'favorite';
+    readonly home: 'home';
+    readonly info: 'info';
+    readonly lock: 'lock';
+    readonly more: 'more-horiz';
+    readonly notification: 'notifications';
+    readonly search: 'search';
+    readonly settings: 'settings';
+    readonly share: 'share';
+    readonly star: 'star';
+    readonly trash: 'delete';
+    readonly user: 'person';
+    readonly warning: 'warning';
+};

package/lib/typescript/atoms/icon/icon.d.ts

@@ -0,0 +1 @@
+export * from './icon.ios';

package/lib/typescript/atoms/icon/icon.ios.d.ts

@@ -0,0 +1,2 @@
+import type { IconComponent } from './icon.types';
+export declare const Icon: IconComponent;

package/lib/typescript/atoms/icon/icon.types.d.ts

@@ -0,0 +1,10 @@
+import type { ColorToken, SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type IconName = 'add' | 'arrowLeft' | 'arrowRight' | 'calendar' | 'check' | 'chevronDown' | 'chevronRight' | 'close' | 'error' | 'grid' | 'heart' | 'home' | 'info' | 'lock' | 'more' | 'notification' | 'search' | 'settings' | 'share' | 'star' | 'trash' | 'user' | 'warning';
+export type IconProps = {
+    color?: ColorToken;
+    name: IconName;
+    size?: SpaceSize;
+    testID?: string;
+};
+export type IconComponent = (props: IconProps) => ReactNode;

package/lib/typescript/atoms/icon/index.d.ts

@@ -0,0 +1,3 @@
+export * from './icon';
+export * from './icon.types';
+export * from './icon-names';

package/lib/typescript/atoms/icon-button/icon-button.d.ts

@@ -0,0 +1 @@
+export * from './icon-button.ios';

package/lib/typescript/atoms/icon-button/icon-button.ios.d.ts

@@ -0,0 +1,2 @@
+import type { IconButtonComponent } from './icon-button.types';
+export declare const IconButton: IconButtonComponent;

package/lib/typescript/atoms/icon-button/icon-button.types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../icon';
+export type IconButtonProps = {
+    disabled?: boolean;
+    name: IconName;
+    onPress?: () => void;
+    testID?: string;
+};
+export type IconButtonComponent = (props: IconButtonProps) => ReactNode;

package/lib/typescript/atoms/icon-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon-button';
+export * from './icon-button.types';

package/lib/typescript/atoms/image/image.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from 'expo-image';
+import { FC } from 'react';
+declare const Image: FC<ImageProps>;
+export { Image };

package/lib/typescript/atoms/image/index.d.ts

@@ -0,0 +1 @@
+export * from './image';

package/lib/typescript/atoms/index.d.ts

@@ -0,0 +1,40 @@
+export * from './activity-indicator';
+export * from './avatar';
+export * from './badge';
+export * from './box';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './chip';
+export * from './color-picker';
+export * from './countdown';
+export * from './date-picker';
+export * from './divider';
+export * from './fab';
+export * from './flash-list';
+export * from './glass-view';
+export * from './h-stack';
+export * from './icon';
+export * from './icon-button';
+export * from './image';
+export * from './island';
+export * from './list';
+export * from './picker';
+export * from './pressable';
+export * from './progress';
+export * from './rn-flat-list';
+export * from './rn-scroll-view';
+export * from './rn-section-list';
+export * from './rn-text';
+export * from './rn-view';
+export * from './scroll-view';
+export * from './segmented-control';
+export * from './skeleton';
+export * from './slider';
+export * from './spacer';
+export * from './surface';
+export * from './switch';
+export * from './text';
+export * from './text-field';
+export * from './v-stack';
+export * from './z-stack';

package/lib/typescript/atoms/island/index.d.ts

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

package/lib/typescript/atoms/island/island.d.ts

@@ -0,0 +1 @@
+export * from './island.ios';

package/lib/typescript/atoms/island/island.ios.d.ts

@@ -0,0 +1,2 @@
+import type { IslandComponent } from './island.types';
+export declare const Island: IslandComponent;

package/lib/typescript/atoms/island/island.types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type IslandProps = {
+    children?: ReactNode;
+    /**
+     * Sizes the island's height to its native content while the width still comes from the parent, which
+     * is what a full-width card wants. On by default. Only the height is ever measured: auto-sizing the
+     * width maps to `fixedSize(horizontal: true)`, so the native side ignores the proposed width and
+     * resolves a `wide` stack's ideal width as unbounded.
+     *
+     * Turn it off — and give the island an explicit size via `style` — when the subtree contains an
+     * `RnView`: that host drives its SwiftUI frame from the child's Yoga-laid-out bounds while this one
+     * writes its measured size back into the Yoga style, and the two together spin a layout loop that
+     * hangs the main thread as soon as the views lay out on screen.
+     */
+    matchContents?: boolean;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+};
+export type IslandComponent = (props: IslandProps) => ReactNode;

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

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

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

@@ -0,0 +1 @@
+export * from './list.ios';

package/lib/typescript/atoms/list/list.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ListComponent } from './list.types';
+export declare const List: ListComponent;

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type ListProps = {
+    children: ReactNode;
+    /**
+     * Enables pull-to-refresh. Async on purpose — see `ScrollViewProps.onRefresh`: the spinner runs
+     * until the promise settles, so neither platform needs a `refreshing` flag kept in sync by hand.
+     */
+    onRefresh?: () => Promise<void>;
+    testID?: string;
+};
+export type ListComponent = (props: ListProps) => ReactNode;

package/lib/typescript/atoms/picker/index.d.ts

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

package/lib/typescript/atoms/picker/picker.d.ts

@@ -0,0 +1,2 @@
+import type { PickerComponent } from './picker.types';
+export declare const Picker: PickerComponent;

package/lib/typescript/atoms/picker/picker.types.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export type PickerOption = {
+    label: string;
+    value: string;
+};
+export type PickerProps = {
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+    options: PickerOption[];
+    testID?: string;
+    value: string;
+};
+export type PickerComponent = (props: PickerProps) => ReactNode;

package/lib/typescript/atoms/pressable/index.d.ts

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

package/lib/typescript/atoms/pressable/pressable.d.ts

@@ -0,0 +1,2 @@
+import type { PressableComponent } from './pressable.types';
+export declare const Pressable: PressableComponent;

package/lib/typescript/atoms/pressable/pressable.types.d.ts

@@ -0,0 +1,10 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+export type PressableProps = ResponsiveViewSx & {
+    children?: ReactNode;
+    disabled?: boolean;
+    haptic?: boolean;
+    onPress?: () => void;
+    testID?: string;
+};
+export type PressableComponent = (props: PressableProps) => ReactNode;

package/lib/typescript/atoms/progress/index.d.ts

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

package/lib/typescript/atoms/progress/progress.d.ts

@@ -0,0 +1 @@
+export * from './progress.ios';

package/lib/typescript/atoms/progress/progress.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ProgressComponent } from './progress.types';
+export declare const Progress: ProgressComponent;

package/lib/typescript/atoms/progress/progress.types.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type ProgressProps = {
+    circular?: boolean;
+    value?: number;
+};
+export type ProgressComponent = (props: ProgressProps) => ReactNode;

package/lib/typescript/atoms/rn-flat-list/index.d.ts

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

package/lib/typescript/atoms/rn-flat-list/rn-flat-list.d.ts

@@ -0,0 +1,12 @@
+import type { RnFlatListProps } from './rn-flat-list.types';
+/**
+ * Flat list built on React Native's own `VirtualizedList` rather than FlashList.
+ *
+ * FlashList is the default for lists in this codebase and should stay that way for data rows — reach
+ * for this only for the case it cannot serve: content that hosts native views. FlashList positions its
+ * rows absolutely and recycles their cells, and an `@expo/ui` host survives neither — the hosted view
+ * ends up drawn where the layout no longer is. `VirtualizedList` renders its cells in normal flow
+ * inside a scroll view, using blank spacers for the range it has not rendered, so a hosted view stays
+ * exactly where the layout put it. This is `SectionList`'s reason to exist too, without the sections.
+ */
+export declare const RnFlatList: <TItem>({ content, data, renderItem, ...props }: RnFlatListProps<TItem>) => import("react").JSX.Element;

package/lib/typescript/atoms/rn-flat-list/rn-flat-list.types.d.ts

@@ -0,0 +1,9 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { FlatListProps as RNFlatListProps } from 'react-native';
+/**
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
+ * gap belong there — the same split as `RnScrollView`.
+ */
+export type RnFlatListProps<TItem> = ResponsiveViewSx & Omit<RNFlatListProps<TItem>, 'contentContainerStyle' | 'style'> & {
+    content?: ResponsiveViewSx;
+};

package/lib/typescript/atoms/rn-scroll-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rn-scroll-view';
+export * from './rn-scroll-view.types';

package/lib/typescript/atoms/rn-scroll-view/rn-scroll-view.d.ts

@@ -0,0 +1,2 @@
+import type { RnScrollViewComponent } from './rn-scroll-view.types';
+export declare const RnScrollView: RnScrollViewComponent;

package/lib/typescript/atoms/rn-scroll-view/rn-scroll-view.types.d.ts

@@ -0,0 +1,19 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+import type { ScrollViewProps as RNScrollViewProps } from 'react-native';
+import type { ScrollViewAxis } from '../scroll-view';
+/**
+ * React Native tier scroll container — the sibling of `RnView`/`RnText`. Use it when the
+ * subtree is React Native and native atoms are embedded through `Island`. For a screen that
+ * is native all the way down, reach for the `ScrollView` atom instead.
+ *
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container,
+ * so padding and gap belong there.
+ */
+export type RnScrollViewProps = ResponsiveViewSx & Omit<RNScrollViewProps, 'contentContainerStyle' | 'horizontal' | 'style'> & {
+    axis?: ScrollViewAxis;
+    children?: ReactNode;
+    content?: ResponsiveViewSx;
+    showsIndicators?: boolean;
+};
+export type RnScrollViewComponent = (props: RnScrollViewProps) => ReactNode;

package/lib/typescript/atoms/rn-section-list/index.d.ts

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

package/lib/typescript/atoms/rn-section-list/rn-section-list.d.ts

@@ -0,0 +1,16 @@
+import { type DefaultSectionT } from 'react-native';
+import type { RnSectionListProps } from './rn-section-list.types';
+/**
+ * Sectioned list built on React Native's own `VirtualizedList` rather than FlashList.
+ *
+ * FlashList is the default for lists in this codebase and should stay that way for data rows. This
+ * exists for the case it cannot serve: content that hosts native views. FlashList positions its rows
+ * absolutely and recycles their cells, and an `@expo/ui` host does not survive either — the hosted
+ * view ends up drawn where the layout no longer is. `VirtualizedList` renders its cells in normal flow
+ * inside a scroll view, using blank spacers for the range it has not rendered, so a hosted view stays
+ * exactly where the layout put it.
+ *
+ * Sticky headers default off, unlike React Native, where they are on for vertical lists. A header that
+ * detaches and floats over the content is a deliberate effect, not something a list should do unasked.
+ */
+export declare const RnSectionList: <TItem, TSection = DefaultSectionT>({ content, sections, stickySectionHeadersEnabled, ...props }: RnSectionListProps<TItem, TSection>) => import("react").JSX.Element;

package/lib/typescript/atoms/rn-section-list/rn-section-list.types.d.ts

@@ -0,0 +1,9 @@
+import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { DefaultSectionT, SectionListProps as RNSectionListProps } from 'react-native';
+/**
+ * Top-level `sx` styles the viewport; `content` styles the scrolling content container, so padding and
+ * gap belong there — the same split as `RnScrollView` and `RnFlatList`.
+ */
+export type RnSectionListProps<TItem, TSection = DefaultSectionT> = ResponsiveViewSx & Omit<RNSectionListProps<TItem, TSection>, 'contentContainerStyle' | 'style'> & {
+    content?: ResponsiveViewSx;
+};

package/lib/typescript/atoms/rn-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rn-text';
+export * from './rn-text.types';

package/lib/typescript/atoms/rn-text/rn-text.d.ts

@@ -0,0 +1,2 @@
+import type { RnTextComponent } from './rn-text.types';
+export declare const RnText: RnTextComponent;

package/lib/typescript/atoms/rn-text/rn-text.types.d.ts

@@ -0,0 +1,9 @@
+import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+import type { TextProps as RNTextProps } from 'react-native';
+export type RnTextProps = Omit<RNTextProps, 'style'> & {
+    align?: 'center' | 'left' | 'right';
+    color?: ColorToken;
+    variant?: TextVariant;
+};
+export type RnTextComponent = (props: RnTextProps) => ReactNode;

package/lib/typescript/atoms/rn-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rn-view';
+export * from './rn-view.types';

package/lib/typescript/atoms/rn-view/rn-view.d.ts

@@ -0,0 +1 @@
+export * from './rn-view.ios';

package/lib/typescript/atoms/rn-view/rn-view.ios.d.ts

@@ -0,0 +1,2 @@
+import type { RnViewComponent } from './rn-view.types';
+export declare const RnView: RnViewComponent;

package/lib/typescript/atoms/rn-view/rn-view.types.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement, ReactNode } from 'react';
+export type RnViewProps = {
+    /**
+     * A single React Native *view*. It may not contain React Native text: a bare string becomes a
+     * `RawText` node, which has no component view, so mounting it across the SwiftUI host boundary
+     * fails the `RCTComponentViewFactory` assertion and takes the whole app down. `@expo/ui` states
+     * the rule itself in `ListItem.ios.tsx` — "SwiftUI hosts can't render bare strings" — and wraps
+     * every raw string in a SwiftUI `Text` before it reaches a host. Do the same: use the `Text` atom
+     * inside the host, and keep `RnText` outside it.
+     */
+    children: ReactElement;
+    /**
+     * Sizes the host to the child's measured layout. On by default because a raw RN view has no
+     * intrinsic size and would otherwise stretch to fill the SwiftUI parent.
+     */
+    matchContents?: boolean;
+    testID?: string;
+};
+export type RnViewComponent = (props: RnViewProps) => ReactNode;

package/lib/typescript/atoms/scroll-view/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scroll-view';
+export * from './scroll-view.types';

package/lib/typescript/atoms/scroll-view/scroll-view.d.ts

@@ -0,0 +1 @@
+export * from './scroll-view.ios';

package/lib/typescript/atoms/scroll-view/scroll-view.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ScrollViewComponent } from './scroll-view.types';
+export declare const ScrollView: ScrollViewComponent;