@hzblj/kara-components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,28 @@
+import type { ColorToken, Theme } from '@hzblj/kara-theme';
+import type { ButtonVariant } from './button.types';
+export declare const buttonTokens: (variant: ButtonVariant, disabled: boolean, theme: Theme) => {
+    readonly content: 'content.on.bg';
+    readonly fill: 'fill.accent.primary';
+    readonly shadow: 'btn.accent';
+} | {
+    readonly content: 'content.on.destructive';
+    readonly fill: 'fill.destructive.primary';
+    readonly shadow: 'btn.destructive';
+} | {
+    readonly content: 'content.primary';
+    readonly fill: 'btn.bg.glass.base';
+    readonly shadow: 'btn.glass';
+} | {
+    readonly content: 'content.primary';
+    readonly fill: 'btn.bg.secondary.base';
+    readonly shadow: 'btn.secondary';
+} | {
+    readonly content: 'btn.content.disabled';
+    readonly fill: "btn.bg.glass.disabled" | "btn.bg.secondary.disabled" | "fill.accent.disabled" | "fill.destructive.disabled";
+    readonly shadow: "btn.accent" | "btn.destructive" | "btn.glass" | "btn.secondary";
+};
+/**
+ * The label for a button filled with an arbitrary `tint`: the on-accent white over a strong colour, the primary
+ * content colour over a pale one (`fill.accent.base`) — the light container tokens pair with it in both appearances.
+ */
+export declare const contentOnTint: (tint: ColorToken, theme: Theme) => ColorToken;

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

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

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

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

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

@@ -0,0 +1,30 @@
+import type { ColorToken } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type ButtonVariant = 'accent' | 'destructive' | 'glass' | 'secondary';
+/**
+ * SwiftUI `ButtonStyle`. iOS only — Compose has no equivalent, so Android ignores it and keeps
+ * rendering the variant's tokens.
+ */
+export type ButtonStyleName = 'automatic' | 'bordered' | 'borderedProminent' | 'borderless' | 'glass' | 'glassProminent' | 'plain';
+/**
+ * SwiftUI `ControlSize`. iOS only, and it has no `automatic` member — leave it unset to inherit
+ * whatever the surrounding SwiftUI environment provides.
+ */
+export type ButtonControlSize = 'extraLarge' | 'large' | 'mini' | 'regular' | 'small';
+export type ButtonProps = {
+    buttonStyle?: ButtonStyleName;
+    controlSize?: ButtonControlSize;
+    disabled?: boolean;
+    label: string;
+    onPress?: () => void;
+    testID?: string;
+    /**
+     * Overrides the variant's own tint. A prominent style takes it as the fill and picks a contrasting
+     * label. `glass` has to reach the material through `glassEffect` instead, so tinting one costs it
+     * the stock `.glass` style — see the iOS implementation.
+     */
+    tint?: ColorToken;
+    variant?: ButtonVariant;
+    wide?: boolean;
+};
+export type ButtonComponent = (props: ButtonProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { CardComponent } from './card.types';
+export declare const Card: CardComponent;

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

@@ -0,0 +1,7 @@
+import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+export type CardProps = ResponsiveSx & {
+    children?: ReactNode;
+    testID?: string;
+};
+export type CardComponent = (props: CardProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { CheckboxComponent } from './checkbox.types';
+export declare const Checkbox: CheckboxComponent;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type CheckboxProps = {
+    disabled?: boolean;
+    label?: string;
+    onValueChange?: (value: boolean) => void;
+    value: boolean;
+};
+export type CheckboxComponent = (props: CheckboxProps) => ReactNode;

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

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

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

@@ -0,0 +1,2 @@
+import type { ChipComponent } from './chip.types';
+export declare const Chip: ChipComponent;

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type ChipProps = {
+    label: string;
+    onPress?: () => void;
+    selected?: boolean;
+    testID?: string;
+};
+export type ChipComponent = (props: ChipProps) => ReactNode;

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

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

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

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

package/lib/typescript/atoms/color-picker/color-picker.ios.d.ts

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

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+/**
+ * The system colour picker. iOS only — Compose ships no equivalent, so on Android this
+ * renders nothing and says so in dev. Branch on `Platform.OS` if the screen needs a fallback.
+ */
+export type ColorPickerProps = {
+    label?: string;
+    onValueChange?: (color: string) => void;
+    supportsOpacity?: boolean;
+    testID?: string;
+    /** `#RRGGBB` or `#RRGGBBAA`. */
+    value: string | null;
+};
+export type ColorPickerComponent = (props: ColorPickerProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,3 @@
+import type { DatePickerComponent } from './date-picker.types';
+/** The system's compact date picker, inline: a tap on it opens the calendar popover UIKit owns. */
+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,6 @@
+import type { GlassViewProps } from './glass-view.types';
+/**
+ * The capsule drawn where there is no Liquid Glass to draw: the glass buttons' own translucent fill, so whatever sits
+ * on the glass — usually content meant for a colourful backdrop — stays readable, the way it would on real glass.
+ */
+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 the glass buttons' translucent fill (`btn.bg.glass.base`) 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.d.ts

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

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

@@ -0,0 +1,6 @@
+import type { IconComponent } from './icon.types';
+/**
+ * The app's icon from its asset catalog — the template image set the config plugin generated from the SVG, vector data
+ * kept, so `resizable()` scales it crisply to the token size and the platform tints it.
+ */
+export declare const Icon: IconComponent;

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

@@ -0,0 +1,27 @@
+import type { ColorToken, SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+declare global {
+    /**
+     * The app's icon names, one key per SVG in its icon folder. Written by the config plugin
+     * (`plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]`) into `kara-icons.d.ts`, or by
+     * `npx kara-icons`. Empty until then. Global, so the declaration reaches it without resolving any kara package.
+     */
+    interface KaraIcons {
+    }
+}
+type DeclaredIconName = keyof KaraIcons & string;
+/**
+ * One of the app's icons. Once the plugin has written `kara-icons.d.ts` only those names type-check — an icon removed
+ * from the folder fails at every call site. Before that, any string, so a project can adopt icons gradually.
+ */
+export type IconName = [DeclaredIconName] extends [never] ? string : DeclaredIconName;
+export type IconProps = {
+    /** What a screen reader says. Unset, the icon is decorative and hidden from it. */
+    accessibilityLabel?: string;
+    color?: ColorToken;
+    name: IconName;
+    size?: SpaceSize;
+    testID?: string;
+};
+export type IconComponent = (props: IconProps) => ReactNode;
+export {};

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

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

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 './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-icon';
+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,20 @@
+import type { ReactNode } from 'react';
+/**
+ * A scrolling list — SwiftUI `List`, Compose `LazyColumn`. It has no height of its own, so it needs one from outside:
+ * a `Screen`, or an `Island` with `matchContents={false}` and a height. In an island that sizes itself to its content
+ * Compose measures it against an infinite height and throws ("Vertically scrollable component was measured with an
+ * infinity maximum height"); SwiftUI shows nothing. For a handful of rows that should not scroll, use a `VStack`.
+ *
+ * Rows are separated for you — SwiftUI's own separators, a `Divider` between rows on Android — so a `Divider` among
+ * the children is one too many: on iOS it becomes an empty row of its own.
+ */
+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 @@
+export * from './picker.ios';

package/lib/typescript/atoms/picker/picker.ios.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-icon/index.d.ts

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

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

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