@hzblj/kara-components 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,3 @@
+import type { RnIconComponent } from './rn-icon.types';
+/** A `UIImageView` over the app's asset-catalog icon — what a list row wants, rather than a SwiftUI host per row. */
+export declare const RnIcon: RnIconComponent;

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+import type { IconProps } from '../icon';
+/** The same contract as `Icon`, for the React Native tier — anywhere, no `Screen` or `Island` needed. */
+export type RnIconProps = IconProps;
+export type RnIconComponent = (props: RnIconProps) => ReactNode;

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;

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

@@ -0,0 +1,25 @@
+import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type ScrollViewAxis = 'horizontal' | 'vertical';
+/**
+ * The `sx` props style the scrolling *content* container, not the viewport — `p` behaves
+ * like React Native's `contentContainerStyle` padding and scrolls with the content.
+ */
+export type ScrollViewProps = ResponsiveSx & {
+    axis?: ScrollViewAxis;
+    children?: ReactNode;
+    /**
+     * Enables pull-to-refresh. Async on purpose: the spinner runs until the promise settles, which is
+     * what SwiftUI's `refreshable` expects and what Compose's controlled indicator is driven from — so
+     * neither platform needs a separate `refreshing` flag to be kept in sync by the caller.
+     *
+     * Only a vertical scroll view can be pulled; on a horizontal one both platforms ignore it.
+     */
+    onRefresh?: () => Promise<void>;
+    /** iOS only — Compose exposes no indicator toggle, so Android always shows the native one. */
+    showsIndicators?: boolean;
+    spacing?: SpaceSize;
+    testID?: string;
+};
+export type ScrollViewComponent = (props: ScrollViewProps) => ReactNode;

package/lib/typescript/atoms/segmented-control/index.d.ts

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

package/lib/typescript/atoms/segmented-control/segmented-control.d.ts

@@ -0,0 +1,2 @@
+import type { SegmentedControlComponent } from './segmented-control.types';
+export declare const SegmentedControl: SegmentedControlComponent;

package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type SegmentedControlProps = {
+    disabled?: boolean;
+    onChange?: (index: number, value: string) => void;
+    selectedIndex: number;
+    testID?: string;
+    values: string[];
+};
+export type SegmentedControlComponent = (props: SegmentedControlProps) => ReactNode;

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

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

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

@@ -0,0 +1,2 @@
+import type { SkeletonComponent } from './skeleton.types';
+export declare const Skeleton: SkeletonComponent;

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

@@ -0,0 +1,9 @@
+import type { RadiiSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type SkeletonProps = {
+    borderRadius?: RadiiSize;
+    height: number;
+    testID?: string;
+    width?: number;
+};
+export type SkeletonComponent = (props: SkeletonProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { SliderComponent } from './slider.types';
+export declare const Slider: SliderComponent;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type SliderProps = {
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    onValueChange?: (value: number) => void;
+    step?: number;
+    value: number;
+};
+export type SliderComponent = (props: SliderProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { SpacerComponent } from './spacer.types';
+export declare const Spacer: SpacerComponent;

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

@@ -0,0 +1,7 @@
+import type { SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type SpacerProps = {
+    min?: SpaceSize;
+    testID?: string;
+};
+export type SpacerComponent = (props: SpacerProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { SurfaceComponent } from './surface.types';
+export declare const Surface: SurfaceComponent;

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { SwitchComponent } from './switch.types';
+export declare const Switch: SwitchComponent;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+export type TextAlign = 'center' | 'left' | 'right';
+export type TextDecoration = 'none' | 'strikethrough' | 'underline';
+export type TextTransform = 'lowercase' | 'uppercase';
+export type TextProps = {
+    align?: TextAlign;
+    children?: ReactNode;
+    color?: ColorToken;
+    decoration?: TextDecoration;
+    numberOfLines?: number;
+    testID?: string;
+    transform?: TextTransform;
+    variant?: TextVariant;
+};
+export type TextComponent = (props: TextProps) => ReactNode;

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

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

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

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

package/lib/typescript/atoms/text-field/text-field.ios.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldComponent } from './text-field.types';
+export declare const TextField: TextFieldComponent;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export type TextFieldProps = {
+    defaultValue?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: string;
+    multiline?: boolean;
+    onChangeText?: (text: string) => void;
+    secure?: boolean;
+    testID?: string;
+};
+export type TextFieldComponent = (props: TextFieldProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { VStackComponent } from './v-stack.types';
+export declare const VStack: VStackComponent;

package/lib/typescript/atoms/v-stack/v-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 VStackAlign = 'center' | 'end' | 'start';
+export type VStackProps = ResponsiveSx & {
+    align?: VStackAlign;
+    children?: ReactNode;
+    onPress?: () => void;
+    spacing?: SpaceSize;
+    testID?: string;
+};
+export type VStackComponent = (props: VStackProps) => ReactNode;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import type { ZStackComponent } from './z-stack.types';
+export declare const ZStack: ZStackComponent;

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

@@ -0,0 +1,10 @@
+import type { ResponsiveSx } from '@hzblj/kara-sx';
+import type { ReactNode } from 'react';
+export type ZStackAlign = 'bottom' | 'center' | 'top';
+export type ZStackProps = ResponsiveSx & {
+    align?: ZStackAlign;
+    children?: ReactNode;
+    onPress?: () => void;
+    testID?: string;
+};
+export type ZStackComponent = (props: ZStackProps) => ReactNode;

package/lib/typescript/glyph/glyph-button.d.ts

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

package/lib/typescript/glyph/glyph-button.ios.d.ts

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

package/lib/typescript/glyph/glyph-button.types.d.ts

@@ -0,0 +1,10 @@
+import type { GlyphName } from '@hzblj/kara-native';
+import type { ReactNode } from 'react';
+/** An icon button over one of kara's glyphs — for the controls its own components build (a stepper, a bar). */
+export type GlyphButtonProps = {
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    name: GlyphName;
+    onPress?: () => void;
+};
+export type GlyphButtonComponent = (props: GlyphButtonProps) => ReactNode;

package/lib/typescript/glyph/glyph.d.ts

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

package/lib/typescript/glyph/glyph.ios.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphComponent } from './glyph.types';
+/** The SF Symbol the system already has — inside a SwiftUI host. */
+export declare const Glyph: GlyphComponent;

package/lib/typescript/glyph/glyph.types.d.ts

@@ -0,0 +1,13 @@
+import type { GlyphName } from '@hzblj/kara-native';
+import type { ColorToken, SpaceSize } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+/**
+ * One of the few glyphs kara's own components draw — a search field's magnifier, a row's chevron. Internal: apps draw
+ * their own icons with `Icon` / `RnIcon`.
+ */
+export type GlyphProps = {
+    color?: ColorToken;
+    name: GlyphName;
+    size?: SpaceSize;
+};
+export type GlyphComponent = (props: GlyphProps) => ReactNode;

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

@@ -0,0 +1,5 @@
+export * from './glyph';
+export * from './glyph.types';
+export * from './glyph-button';
+export * from './glyph-button.types';
+export * from './rn-glyph';

package/lib/typescript/glyph/rn-glyph.d.ts

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

package/lib/typescript/glyph/rn-glyph.ios.d.ts

@@ -0,0 +1,3 @@
+import type { GlyphComponent } from './glyph.types';
+/** The SF Symbol in a `UIImageView`, drawn at the size `Glyph` gives it inside a host — the React Native tier. */
+export declare const RnGlyph: GlyphComponent;

package/lib/typescript/host-context.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from 'react';
+export declare const HostBoundary: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useHostGuard: (atom: string) => void;

package/lib/typescript/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';

package/lib/typescript/molecules/collapsible/collapsible.d.ts

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

package/lib/typescript/molecules/collapsible/collapsible.ios.d.ts

@@ -0,0 +1,2 @@
+import type { CollapsibleComponent } from './collapsible.types';
+export declare const Collapsible: CollapsibleComponent;

package/lib/typescript/molecules/collapsible/collapsible.types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type CollapsibleProps = {
+    children: ReactNode;
+    expanded: boolean;
+    label: string;
+    onExpandedChange: (expanded: boolean) => void;
+};
+export type CollapsibleComponent = (props: CollapsibleProps) => ReactNode;

package/lib/typescript/molecules/collapsible/index.d.ts

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

package/lib/typescript/molecules/empty-state/empty-state.d.ts

@@ -0,0 +1,2 @@
+import type { EmptyStateComponent } from './empty-state.types';
+export declare const EmptyState: EmptyStateComponent;

package/lib/typescript/molecules/empty-state/empty-state.types.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../../atoms/icon';
+/**
+ * The "nothing here" placeholder for an empty list, a failed search or a cleared inbox.
+ * `action` takes a `Button` so the state can offer a way out.
+ */
+export type EmptyStateProps = {
+    action?: ReactNode;
+    description?: string;
+    icon?: IconName;
+    testID?: string;
+    title: string;
+};
+export type EmptyStateComponent = (props: EmptyStateProps) => ReactNode;

package/lib/typescript/molecules/empty-state/index.d.ts

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

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

@@ -0,0 +1,14 @@
+export * from './collapsible';
+export * from './empty-state';
+export * from './label';
+export * from './labeled-content';
+export * from './link';
+export * from './list-item';
+export * from './navigation-bar';
+export * from './pager';
+export * from './radio-group';
+export * from './rn-tooltip';
+export * from './scroll-edge-container';
+export * from './search-bar';
+export * from './stepper';
+export * from './tooltip';

package/lib/typescript/molecules/label/index.d.ts

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

package/lib/typescript/molecules/label/label.d.ts

@@ -0,0 +1,2 @@
+import type { LabelComponent } from './label.types';
+export declare const Label: LabelComponent;

package/lib/typescript/molecules/label/label.types.d.ts

@@ -0,0 +1,16 @@
+import type { ColorToken, SpaceSize, TextVariant } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+import type { IconName } from '../../atoms/icon';
+/**
+ * An inline icon + text pair — the thing you put inside a button, a menu row or a section
+ * header. For a full tappable row with a subtitle and chevron, use `ListItem`.
+ */
+export type LabelProps = {
+    color?: ColorToken;
+    icon: IconName;
+    iconSize?: SpaceSize;
+    testID?: string;
+    title: string;
+    variant?: TextVariant;
+};
+export type LabelComponent = (props: LabelProps) => ReactNode;

package/lib/typescript/molecules/labeled-content/index.d.ts

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

package/lib/typescript/molecules/labeled-content/labeled-content.d.ts

@@ -0,0 +1,2 @@
+import type { LabeledContentComponent } from './labeled-content.types';
+export declare const LabeledContent: LabeledContentComponent;

package/lib/typescript/molecules/labeled-content/labeled-content.types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../../atoms/icon';
+/**
+ * A label on the leading edge and its value on the trailing edge — the settings/detail row.
+ * Pass `children` instead of `value` when the trailing side is a control rather than text.
+ */
+export type LabeledContentProps = {
+    children?: ReactNode;
+    icon?: IconName;
+    label: string;
+    onPress?: () => void;
+    testID?: string;
+    value?: string;
+};
+export type LabeledContentComponent = (props: LabeledContentProps) => ReactNode;

package/lib/typescript/molecules/link/index.d.ts

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

package/lib/typescript/molecules/link/link.d.ts

@@ -0,0 +1,2 @@
+import type { LinkComponent } from './link.types';
+export declare const Link: LinkComponent;

package/lib/typescript/molecules/link/link.types.d.ts

@@ -0,0 +1,13 @@
+import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+import type { IconName } from '../../atoms/icon';
+/** Opens an external URL in the platform browser or the app that claims the scheme. */
+export type LinkProps = {
+    color?: ColorToken;
+    icon?: IconName;
+    label: string;
+    testID?: string;
+    url: string;
+    variant?: TextVariant;
+};
+export type LinkComponent = (props: LinkProps) => ReactNode;

package/lib/typescript/molecules/list-item/index.d.ts

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

package/lib/typescript/molecules/list-item/list-item.d.ts

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