@platform-blocks/ui 0.1.1

package/lib/components/Tabs/types.d.ts

@@ -0,0 +1,182 @@
+import type { ReactNode } from 'react';
+import type { SpacingProps } from '../../core/utils';
+interface RadiusProp {
+    radius?: number | string;
+}
+import type { SizeValue } from '../../core/theme/sizes';
+import type { ViewStyle, TextStyle } from 'react-native';
+/**
+ * Describes a single tab rendered by the {@link Tabs} component.
+ */
+export interface TabItem {
+    /**
+     * Unique identifier for the tab. This is also the value returned in callbacks and
+     * persisted when `persistKey` / `autoPersist` are used.
+     */
+    key: string;
+    /**
+     * Main tab label. Accepts a string or custom React node for iconographic or styled content.
+     */
+    label: string | ReactNode;
+    /**
+     * Optional secondary line displayed beneath the label when supplied.
+     */
+    subLabel?: string | ReactNode;
+    /**
+     * Content rendered when the tab becomes active. Ignored when `navigationOnly` is true.
+     */
+    content: ReactNode;
+    /**
+     * When true the tab is visually disabled and interaction is delegated to `onDisabledTabPress`.
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon rendered alongside the label.
+     */
+    icon?: ReactNode;
+}
+/**
+ * Props for the {@link Tabs} component.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   items={[
+ *     { key: 'overview', label: 'Overview', content: <OverviewScreen /> },
+ *     { key: 'activity', label: 'Activity', content: <ActivityScreen /> },
+ *   ]}
+ *   onTabChange={(key) => console.log('Active tab:', key)}
+ * />
+ * ```
+ */
+export interface TabsProps extends SpacingProps, RadiusProp {
+    /**
+     * Array of tab definitions to render. The first item becomes active by default when uncontrolled.
+     */
+    items: TabItem[];
+    /**
+     * Controlled active tab key. When omitted the component manages internal state.
+     */
+    activeTab?: string;
+    /**
+     * Called whenever the active tab changes. Fires for both controlled and uncontrolled usage.
+     */
+    onTabChange?: (tabKey: string) => void;
+    /**
+     * Invoked when a disabled tab is pressed, allowing custom messaging or recovery flows.
+     */
+    onDisabledTabPress?: (tabKey: string, item: TabItem) => void;
+    /**
+     * Visual style of the tabs.
+     *
+     * @default 'line'
+     */
+    variant?: 'line' | 'chip' | 'card' | 'folder';
+    /**
+     * Size token controlling text and padding.
+     *
+     * @default 'sm'
+     */
+    size?: SizeValue;
+    /**
+     * Theme color token or custom color used for indicators and active states.
+     *
+     * @default 'primary'
+     */
+    color?: 'primary' | 'secondary' | 'gray' | 'tertiary' | string;
+    /**
+     * Orientation of the tab list.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Placement of the tabs relative to their content. Influences indicator positioning.
+     *
+     * @default 'start'
+     */
+    location?: 'start' | 'end';
+    /**
+     * Enables scrolling when tabs overflow the available axis.
+     */
+    scrollable?: boolean;
+    /**
+     * Enables animated indicator transitions between tabs.
+     *
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Duration (ms) for indicator animations when `animated` is true.
+     *
+     * @default 250
+     */
+    animationDuration?: number;
+    /**
+     * Style overrides for the outer container.
+     */
+    style?: ViewStyle;
+    /**
+     * Style overrides applied to each tab pressable.
+     */
+    tabStyle?: ViewStyle;
+    /**
+     * Style for the active tab content wrapper.
+     */
+    contentStyle?: ViewStyle;
+    /**
+     * Additional text style applied to tab labels.
+     */
+    textStyle?: TextStyle;
+    /**
+     * Array of tab keys that should be rendered disabled.
+     */
+    disabledKeys?: string[];
+    /**
+     * Corner radius applied to the tab elements (variant dependent).
+     */
+    tabCornerRadius?: number;
+    /**
+     * Corner radius applied to the content panel. Falls back to theme defaults when omitted.
+     */
+    contentCornerRadius?: number;
+    /**
+     * Thickness (px) of the line indicator. Applies to `line` variant primarily.
+     */
+    indicatorThickness?: number;
+    /**
+     * Gap (px) inserted between tabs.
+     */
+    tabGap?: number;
+    /**
+     * Override background color for the active tab. Accepts theme tokens.
+     */
+    activeTabBackgroundColor?: string;
+    /**
+     * Override background color for inactive tabs.
+     */
+    inactiveTabBackgroundColor?: string;
+    /**
+     * Explicit text color for the active tab label.
+     */
+    activeTabTextColor?: string;
+    /**
+     * Key used to persist the active tab selection across sessions.
+     */
+    persistKey?: string;
+    /**
+     * Determines whether internal persistence should be enabled when `persistKey` is provided.
+     *
+     * @default true
+     */
+    autoPersist?: boolean;
+    /**
+     * When true, the component only renders the tab list and forwards children for custom content.
+     */
+    navigationOnly?: boolean;
+    /**
+     * Optional custom content rendered below the tab list when `navigationOnly` is enabled.
+     */
+    children?: ReactNode;
+}
+export {};

package/lib/components/Text/Text.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { TextProps as RNTextProps } from 'react-native';
+import { SizeValue } from '../../core/theme/sizes';
+import { SpacingProps } from '../../core/utils';
+export type HTMLTextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'small' | 'strong' | 'b' | 'i' | 'em' | 'u' | 'sub' | 'sup' | 'mark' | 'code' | 'kbd' | 'blockquote' | 'cite';
+export type LegacyTextVariant = 'body' | 'caption' | 'heading1' | 'heading2' | 'heading3' | 'subtitle';
+export interface TextProps extends SpacingProps {
+    /** Text node children. Optional if using translation via `tx`. */
+    children?: React.ReactNode;
+    /** Translation key (if provided, overrides children when found) */
+    tx?: string;
+    /** Params for translation interpolation */
+    txParams?: Record<string, any>;
+    /** Text variant (HTML tags or legacy variants) */
+    variant?: HTMLTextVariant | LegacyTextVariant;
+    /** Size can be a size token or number (overrides variant fontSize) */
+    size?: SizeValue;
+    /** Text color (overrides theme text color) */
+    color?: string;
+    /** Semantic color variant (overrides color prop). Supports text palette plus status colors */
+    colorVariant?: 'primary' | 'secondary' | 'muted' | 'disabled' | 'link' | 'success' | 'warning' | 'error' | 'info';
+    /** Font weight (supports all CSS font-weight values) */
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'light' | 'black' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Line height as a multiplier (e.g., 1.5) or absolute value */
+    lineHeight?: number;
+    /** Letter spacing (tracking) in pixels or em units */
+    tracking?: number;
+    /** Convert text to uppercase */
+    uppercase?: boolean;
+    /** Additional styles (overrides computed styles) */
+    style?: any;
+    /** Custom font family (overrides theme font) */
+    fontFamily?: string;
+    /** For platform-specific rendering on web */
+    as?: HTMLTextVariant;
+    /** Whether text is selectable (default: true) */
+    selectable?: boolean;
+    /** Called when text is pressed */
+    onPress?: () => void;
+    /** Called when the text layout is calculated */
+    onLayout?: (event: any) => void;
+    /** Value to display (overrides children, useful for numbers) */
+    value?: string | number;
+    /** Maximum number of lines to display (native + web) */
+    numberOfLines?: RNTextProps['numberOfLines'];
+    /** Ellipsis strategy when text exceeds available space */
+    ellipsizeMode?: RNTextProps['ellipsizeMode'];
+}
+export declare const Text: React.FC<TextProps>;

package/lib/components/Text/aliases.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type TextProps } from './Text';
+export declare const H1: React.FC<Omit<TextProps, 'variant'>>;
+export declare const H2: React.FC<Omit<TextProps, 'variant'>>;
+export declare const H3: React.FC<Omit<TextProps, 'variant'>>;
+export declare const H4: React.FC<Omit<TextProps, 'variant'>>;
+export declare const H5: React.FC<Omit<TextProps, 'variant'>>;
+export declare const H6: React.FC<Omit<TextProps, 'variant'>>;
+export declare const P: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Small: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Strong: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Bold: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Italic: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Emphasis: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Underline: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Code: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Kbd: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Mark: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Blockquote: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Cite: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Sub: React.FC<Omit<TextProps, 'variant'>>;
+export declare const Sup: React.FC<Omit<TextProps, 'variant'>>;

package/lib/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text, type TextProps, type HTMLTextVariant, type LegacyTextVariant } from './Text';
+export { H1, H2, H3, H4, H5, H6, P, Small, Strong, Bold, Italic, Emphasis, Underline, Code, Kbd, Mark, Blockquote, Cite, Sub, Sup } from './aliases';

package/lib/components/TextArea/TextArea.d.ts

@@ -0,0 +1,6 @@
+import { TextInput } from 'react-native';
+import { TextAreaProps } from './types';
+export declare const TextArea: import("../../core/factory/factory").PlatformBlocksComponent<{
+    props: TextAreaProps;
+    ref: TextInput;
+}>;

package/lib/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps, TextAreaStyleProps } from './types';

package/lib/components/TextArea/meta/index.d.ts

@@ -0,0 +1,97 @@
+export declare const TextAreaMeta: {
+    name: string;
+    type: string;
+    description: string;
+    features: string[];
+    props: {
+        value: {
+            type: string;
+            description: string;
+            default: string;
+        };
+        onChangeText: {
+            type: string;
+            description: string;
+            signature: string;
+        };
+        label: {
+            type: string;
+            description: string;
+        };
+        placeholder: {
+            type: string;
+            description: string;
+        };
+        disabled: {
+            type: string;
+            description: string;
+            default: boolean;
+        };
+        required: {
+            type: string;
+            description: string;
+            default: boolean;
+        };
+        error: {
+            type: string;
+            description: string;
+        };
+        helperText: {
+            type: string;
+            description: string;
+        };
+        description: {
+            type: string;
+            description: string;
+        };
+        size: {
+            type: string;
+            description: string;
+            default: string;
+        };
+        rows: {
+            type: string;
+            description: string;
+            default: number;
+        };
+        minRows: {
+            type: string;
+            description: string;
+            default: number;
+        };
+        maxRows: {
+            type: string;
+            description: string;
+        };
+        autoResize: {
+            type: string;
+            description: string;
+            default: boolean;
+        };
+        maxLength: {
+            type: string;
+            description: string;
+        };
+        showCharCounter: {
+            type: string;
+            description: string;
+            default: boolean;
+        };
+        radius: {
+            type: string;
+            description: string;
+            default: string;
+        };
+    };
+    examples: {
+        name: string;
+        code: string;
+    }[];
+    accessibility: {
+        label: string;
+        placeholder: string;
+        error: string;
+        required: string;
+    };
+    related: string[];
+};

package/lib/components/TextArea/styles.d.ts

@@ -0,0 +1,95 @@
+import { TextAreaProps } from './types';
+import { PlatformBlocksTheme, SizeValue } from '../../core/theme/types';
+interface TextAreaStyleProps {
+    size: SizeValue;
+    rows?: number;
+    disabled?: boolean;
+    error?: boolean;
+    focused?: boolean;
+}
+export declare const useTextAreaStyles: (props: TextAreaProps & {
+    theme: PlatformBlocksTheme;
+}) => {
+    getTextAreaStyles: (styleProps: TextAreaStyleProps) => {
+        charCounter: {
+            color: string;
+            fontSize: 12;
+            marginTop: 4;
+            textAlign: "right";
+        };
+        charCounterError: {
+            color: string;
+        };
+        container: {
+            marginBottom: 4;
+        };
+        errorText: {
+            color: string;
+            fontSize: 12;
+            marginTop: 4;
+        };
+        helperText: {
+            color: string;
+            fontSize: 12;
+            marginTop: 4;
+        };
+        inputContainer: {
+            opacity: number;
+            elevation?: number | undefined;
+            boxShadow?: string | undefined;
+            backgroundColor: string;
+            borderColor: string;
+            borderRadius: 8;
+            borderWidth: 2;
+            paddingHorizontal: 8;
+            paddingVertical: 4;
+        };
+        label: {
+            color: string;
+            fontSize: 14;
+            fontWeight: any;
+            marginBottom: 4;
+        };
+        required: {
+            color: string;
+        };
+        textInput: any;
+    };
+    getSizeStyles: (size: SizeValue, rows?: number) => {
+        fontSize: 12;
+        padding: 4;
+        minHeight: number;
+        lineHeight: 16;
+    } | {
+        fontSize: 14;
+        padding: 8;
+        minHeight: number;
+        lineHeight: 20;
+    } | {
+        fontSize: 16;
+        padding: 12;
+        minHeight: number;
+        lineHeight: 24;
+    } | {
+        fontSize: 18;
+        padding: 16;
+        minHeight: number;
+        lineHeight: 28;
+    } | {
+        fontSize: 20;
+        padding: 20;
+        minHeight: number;
+        lineHeight: 32;
+    } | {
+        fontSize: 24;
+        padding: 24;
+        minHeight: number;
+        lineHeight: 36;
+    } | {
+        fontSize: 30;
+        padding: 32;
+        minHeight: number;
+        lineHeight: 42;
+    };
+};
+export {};

package/lib/components/TextArea/types.d.ts

@@ -0,0 +1,33 @@
+import { TextInputProps } from 'react-native';
+import { BaseInputProps } from '../Input/types';
+export interface TextAreaProps extends BaseInputProps {
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Number of rows (height) for the textarea */
+    rows?: number;
+    /** Minimum number of rows */
+    minRows?: number;
+    /** Maximum number of rows */
+    maxRows?: number;
+    /** Whether to automatically resize based on content */
+    autoResize?: boolean;
+    /** Character limit */
+    maxLength?: number;
+    /** Show character counter */
+    showCharCounter?: boolean;
+    /** Fixed height for the TextArea */
+    height?: number;
+    /** Resize behavior */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Additional TextInput props */
+    textInputProps?: Omit<TextInputProps, keyof BaseInputProps>;
+}
+export interface TextAreaStyleProps {
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    focused?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    rows?: number;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    height?: number;
+}

package/lib/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TimePickerProps } from './types';
+export declare const TimePicker: React.FC<TimePickerProps>;

package/lib/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './TimePicker';
+export type { TimePickerProps, TimePickerValue } from './types';

package/lib/components/TimePicker/types.d.ts

@@ -0,0 +1,32 @@
+export interface TimePickerValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+}
+export interface TimePickerProps {
+    value?: TimePickerValue | null;
+    defaultValue?: TimePickerValue | null;
+    onChange?: (next: TimePickerValue | null) => void;
+    format?: 12 | 24;
+    withSeconds?: boolean;
+    allowInput?: boolean;
+    minuteStep?: number;
+    secondStep?: number;
+    panelWidth?: number | string;
+    /** Width of each scroll column (hours/minutes/seconds) */
+    columnWidth?: number;
+    inputWidth?: number | string;
+    disabled?: boolean;
+    size?: any;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    style?: any;
+    onOpen?: () => void;
+    onClose?: () => void;
+    title?: string;
+    autoClose?: boolean;
+    fullWidth?: boolean;
+    clearable?: boolean;
+    clearButtonLabel?: string;
+}

package/lib/components/TimePickerInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker as TimePickerInput } from '../TimePicker/TimePicker';
+export type { TimePickerProps as TimePickerInputProps } from '../TimePicker/types';

package/lib/components/Timeline/Timeline.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { View } from 'react-native';
+import { TimelineProps, TimelineItemProps } from './types';
+declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & {
+    itemIndex?: number;
+    isLastItem?: boolean;
+} & React.RefAttributes<View>>;
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<View>>;
+declare const TimelineWithItems: typeof Timeline & {
+    Item: typeof TimelineItem;
+};
+export { TimelineWithItems as Timeline };
+export type { TimelineProps, TimelineItemProps };

package/lib/components/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { Timeline } from './Timeline';
+export type { TimelineProps, TimelineItemProps } from './types';

package/lib/components/Timeline/types.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export interface TimelineItemProps extends Omit<ViewProps, 'children'> {
+    /** Item content */
+    children?: ReactNode;
+    /** Item title */
+    title?: string;
+    /** Custom bullet content (icon, avatar, etc.) */
+    bullet?: ReactNode;
+    /** Line variant for this item */
+    lineVariant?: 'solid' | 'dashed' | 'dotted';
+    /** Item color (overrides timeline color) */
+    color?: string;
+    /** Item color variant token (e.g. primary.5 or primary) used if color not provided */
+    colorVariant?: string;
+    /** Whether this item is active */
+    active?: boolean;
+    /** Override timeline alignment for this specific item */
+    itemAlign?: 'left' | 'right';
+}
+export interface TimelineProps extends Omit<ViewProps, 'children'> {
+    /** Timeline items */
+    children: ReactNode;
+    /** Active item index - items before this will be highlighted */
+    active?: number;
+    /** Timeline color */
+    color?: string;
+    /** Timeline color variant token (e.g. primary.5) used when color not provided */
+    colorVariant?: string;
+    /** Line width */
+    lineWidth?: number;
+    /** Bullet size */
+    bulletSize?: number;
+    /** Alignment of timeline */
+    align?: 'left' | 'right';
+    /** Reverse active highlighting */
+    reverseActive?: boolean;
+    /** Component size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Center mode renders a single central spine allowing items on both sides via itemAlign prop */
+    centerMode?: boolean;
+}
+export interface TimelineContextValue {
+    active?: number;
+    color: string;
+    lineWidth: number;
+    bulletSize: number;
+    align: 'left' | 'right';
+    reverseActive: boolean;
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Whether layout is split with centered vertical line */
+    centerMode?: boolean;
+}

package/lib/components/Title/Title.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { TitleProps } from './types';
+export declare const Title: React.FC<TitleProps>;
+export default Title;
+export declare const Heading1: React.FC<Omit<TitleProps, 'order'>>;
+export declare const Heading2: React.FC<Omit<TitleProps, 'order'>>;
+export declare const Heading3: React.FC<Omit<TitleProps, 'order'>>;
+export declare const Heading4: React.FC<Omit<TitleProps, 'order'>>;
+export declare const Heading5: React.FC<Omit<TitleProps, 'order'>>;
+export declare const Heading6: React.FC<Omit<TitleProps, 'order'>>;

package/lib/components/Title/index.d.ts

@@ -0,0 +1,2 @@
+export { Title, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6 } from './Title';
+export type { TitleProps } from './types';