@platform-blocks/ui 0.1.1

package/lib/components/Spotlight/SpotlightTypes.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export interface SpotlightActionData {
+    /** Unique action identifier */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Action description */
+    description?: string;
+    /** Action keywords for better search matching */
+    keywords?: string[];
+    /** Icon to display */
+    icon?: string | ReactNode;
+    /** Action press handler */
+    onPress?: () => void;
+    /** Whether action is disabled */
+    disabled?: boolean;
+    /** Custom component to render instead of default action */
+    component?: ReactNode;
+}
+export interface SpotlightActionGroupData {
+    /** Group label */
+    group: string;
+    /** Actions in this group */
+    actions: SpotlightActionData[];
+}
+export type SpotlightItem = SpotlightActionData | SpotlightActionGroupData;
+export declare function isActionGroup(item: SpotlightItem): item is SpotlightActionGroupData;
+export declare function isAction(item: SpotlightItem): item is SpotlightActionData;
+export declare function filterActions(items: SpotlightItem[], query: string, limit?: number): SpotlightItem[];

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

@@ -0,0 +1,6 @@
+export { Spotlight } from './Spotlight';
+export { SpotlightProvider, useSpotlightStore, spotlight, createSpotlightStore, useSpotlightStoreInstance, onSpotlightRequested } from './SpotlightStore';
+export { useDirectSpotlightState, directSpotlight } from './DirectSpotlightState';
+export type { SpotlightProps, SpotlightRootProps, SpotlightSearchProps, SpotlightActionsListProps, SpotlightActionProps, SpotlightActionsGroupProps, SpotlightEmptyProps, } from './types';
+export type { SpotlightActionData, SpotlightActionGroupData, SpotlightItem, } from './SpotlightTypes';
+export type { SpotlightState, SpotlightStore, } from './SpotlightStore';

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

@@ -0,0 +1,66 @@
+import { ViewStyle } from 'react-native';
+import React from 'react';
+import { SpotlightItem } from './SpotlightTypes';
+export interface SpotlightProps {
+    actions: SpotlightItem[];
+    nothingFound?: string;
+    highlightQuery?: boolean;
+    limit?: number;
+    scrollable?: boolean;
+    maxHeight?: number;
+    shortcut?: string | string[] | null;
+    searchProps?: any;
+    store?: any;
+    variant?: 'modal' | 'bottomsheet' | 'fullscreen';
+    width?: number;
+    height?: number;
+}
+export interface SpotlightRootProps {
+    query: string;
+    onQueryChange: (query: string) => void;
+    children: React.ReactNode;
+    opened?: boolean;
+    onClose?: () => void;
+    shortcut?: string | string[] | null;
+    style?: ViewStyle;
+}
+export interface SpotlightSearchProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    leftSection?: React.ReactNode;
+    onNavigateUp?: () => void;
+    onNavigateDown?: () => void;
+    onSelectAction?: () => void;
+    onClose?: () => void;
+}
+export interface SpotlightActionsListProps {
+    children: React.ReactNode;
+    scrollable?: boolean;
+    maxHeight?: number;
+    style?: ViewStyle;
+    scrollRef?: any;
+    onScrollChange?: (y: number) => void;
+}
+export interface SpotlightActionProps {
+    label?: string;
+    description?: string;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    selected?: boolean;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    innerRef?: any;
+    onLayout?: (e: any) => void;
+}
+export interface SpotlightActionsGroupProps {
+    label: string;
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+export interface SpotlightEmptyProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}

package/lib/components/Stepper/Stepper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View } from 'react-native';
+import { StepperProps, StepperStepProps, StepperCompletedProps } from './types';
+declare const StepperStep: React.ForwardRefExoticComponent<Omit<StepperStepProps, "ref"> & React.RefAttributes<View>>;
+declare const StepperCompleted: React.FC<StepperCompletedProps>;
+declare const Stepper: React.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & React.RefAttributes<View>>;
+declare const StepperWithSubComponents: typeof Stepper & {
+    Step: typeof StepperStep;
+    Completed: typeof StepperCompleted;
+};
+export { StepperWithSubComponents as Stepper };
+export type { StepperProps, StepperStepProps, StepperCompletedProps };

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

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperStepProps, StepperCompletedProps } from './types';

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

@@ -0,0 +1,68 @@
+import { ReactNode } from 'react';
+export interface StepperStepProps {
+    /** Step content */
+    children?: ReactNode;
+    /** Step label */
+    label?: string;
+    /** Step description */
+    description?: string;
+    /** Custom icon to display instead of the step number */
+    icon?: ReactNode;
+    /** Icon to display when step is completed (overrides global completedIcon) */
+    completedIcon?: ReactNode;
+    /** Whether this step can be selected by clicking */
+    allowStepSelect?: boolean;
+    /** Step color */
+    color?: string;
+    /** Whether the step is loading */
+    loading?: boolean;
+    /** Accessibility label for screen readers */
+    'aria-label'?: string;
+    /** Title attribute for tooltips */
+    title?: string;
+    /** Step reference */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Internal step index (added automatically) */
+    stepIndex?: number;
+}
+export interface StepperProps {
+    /** Active step index */
+    active: number;
+    /** Called when step is clicked */
+    onStepClick?: (stepIndex: number) => void;
+    /** Step orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Icon position relative to step body */
+    iconPosition?: 'left' | 'right';
+    /** Icon size */
+    iconSize?: number;
+    /** Component size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Component color */
+    color?: string;
+    /** Icon to display when step is completed */
+    completedIcon?: ReactNode;
+    /** Whether next steps (steps with higher index) can be selected */
+    allowNextStepsSelect?: boolean;
+    /** Step content */
+    children: ReactNode;
+    /** Accessibility label */
+    'aria-label'?: string;
+    /** Component reference */
+    ref?: React.Ref<HTMLDivElement>;
+}
+export interface StepperCompletedProps {
+    /** Content to display when all steps are completed */
+    children: ReactNode;
+}
+export interface StepperContextValue {
+    active: number;
+    onStepClick?: (stepIndex: number) => void;
+    orientation: 'horizontal' | 'vertical';
+    iconPosition: 'left' | 'right';
+    iconSize: number;
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color: string;
+    completedIcon?: ReactNode;
+    allowNextStepsSelect: boolean;
+}

package/lib/components/Switch/Switch.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './types';

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

@@ -0,0 +1,85 @@
+import { SwitchStyleProps } from './types';
+import { PlatformBlocksTheme } from '../../core/theme/types';
+export declare const useSwitchStyles: (props: SwitchStyleProps & {
+    theme: PlatformBlocksTheme;
+}) => {
+    container: {
+        alignItems: "center";
+        flexDirection: "row";
+        minHeight: number;
+    };
+    containerReverse: {
+        flexDirection: "row-reverse";
+        justifyContent: "flex-end";
+    };
+    description: {
+        color: string;
+        marginTop: 4;
+    };
+    error: {
+        color: string;
+        marginTop: number;
+    };
+    label: {
+        userSelect?: any;
+        color: string;
+        lineHeight: number;
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    labelDisabled: {
+        color: string;
+    };
+    labelError: {
+        color: string;
+    };
+    required: {
+        color: string;
+    };
+    stateLabel: {
+        color: string;
+        fontSize: 12;
+    };
+    stateLabelActive: {
+        color: string;
+        fontWeight: "400" | "600";
+    };
+    stateLabels: {
+        alignItems: "center";
+        flexDirection: "row";
+        marginTop: 4;
+    };
+    switchContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
+    };
+    switchPressable: {
+        height: "100%";
+        position: "relative";
+        width: "100%";
+    };
+    switchThumb: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        position: "absolute";
+        top: number;
+        left: number;
+        elevation: 2;
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)";
+    };
+    switchTrack: {
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: 2;
+        height: number;
+        opacity: number;
+        position: "relative";
+        width: number;
+    };
+};

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { SizeValue, ColorValue, SpacingProps } from '../../core/theme/types';
+export interface BaseComponentProps extends SpacingProps {
+    /** Component test ID for testing */
+    testID?: string;
+    /** Additional CSS styles */
+    style?: any;
+}
+export interface SwitchProps extends BaseComponentProps {
+    /** Whether switch is on */
+    checked?: boolean;
+    /** Initial checked state for uncontrolled usage */
+    defaultChecked?: boolean;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Switch size */
+    size?: SizeValue;
+    /** Switch color theme when on */
+    color?: ColorValue;
+    /** Switch label */
+    label?: React.ReactNode;
+    /** Whether switch is disabled */
+    disabled?: boolean;
+    /** Whether switch is required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    description?: string;
+    /** Label position relative to switch */
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /** Switch content/children (alternative to label) */
+    children?: React.ReactNode;
+    /** Icon to show when on */
+    onIcon?: React.ReactNode;
+    /** Icon to show when off */
+    offIcon?: React.ReactNode;
+    /** Labels for on/off states */
+    onLabel?: string;
+    offLabel?: string;
+    /** Controlled component to show/hide */
+    controls?: string;
+    /** Custom accessibility label (overrides label-based default) */
+    accessibilityLabel?: string;
+    /** Accessibility hint to describe what happens */
+    accessibilityHint?: string;
+}
+export interface SwitchStyleProps {
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    size: SizeValue;
+    color: ColorValue;
+}

package/lib/components/Table/Table.d.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+import { SpacingProps } from '../../core/utils';
+export interface TableData {
+    head?: React.ReactNode[];
+    body?: React.ReactNode[][];
+    foot?: React.ReactNode[];
+    caption?: React.ReactNode;
+}
+export interface TableProps extends SpacingProps {
+    children?: React.ReactNode;
+    /** Table data for automatic generation of rows */
+    data?: TableData;
+    /** Horizontal spacing between cells */
+    horizontalSpacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    /** Vertical spacing between cells */
+    verticalSpacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    /** Add striped styling to rows */
+    striped?: boolean;
+    /** Highlight rows on hover/press */
+    highlightOnHover?: boolean;
+    /** Add borders around table */
+    withTableBorder?: boolean;
+    /** Add borders between columns */
+    withColumnBorders?: boolean;
+    /** Add borders between rows */
+    withRowBorders?: boolean;
+    /** Caption position */
+    captionSide?: 'top' | 'bottom';
+    /** Table layout mode */
+    layout?: 'auto' | 'fixed';
+    /** Variant of table layout */
+    variant?: 'default' | 'vertical';
+    /** Enable tabular numbers for better number alignment */
+    tabularNums?: boolean;
+    /** Make table take full width of container */
+    fullWidth?: boolean;
+    /** Column width configuration for auto-sizing */
+    columns?: Array<{
+        /** Column key for identification */
+        key?: string;
+        /** Column width strategy */
+        width?: number | string | 'auto' | 'min-content' | 'max-content';
+        /** Minimum column width */
+        minWidth?: number;
+        /** Maximum column width */
+        maxWidth?: number;
+        /** Flex grow factor */
+        flex?: number;
+    }>;
+    /** Additional styles */
+    style?: any;
+}
+export interface TableScrollContainerProps extends SpacingProps {
+    children?: React.ReactNode;
+    /** Minimum width before scrolling kicks in */
+    minWidth?: number;
+    /** Maximum height before vertical scrolling */
+    maxHeight?: number;
+    /** Scroll type for web */
+    type?: 'native' | 'custom';
+    style?: any;
+    [key: string]: any;
+}
+export interface TableSectionProps extends SpacingProps {
+    children?: React.ReactNode;
+    style?: any;
+    [key: string]: any;
+}
+export interface TableRowProps extends SpacingProps {
+    children?: React.ReactNode;
+    /** Background color override */
+    bg?: string;
+    /** Row selection state */
+    selected?: boolean;
+    /** Press handler */
+    onPress?: () => void;
+    style?: any;
+    [key: string]: any;
+}
+export interface TableCellProps extends SpacingProps {
+    children?: React.ReactNode;
+    /** Cell width (useful for fixed layout) */
+    w?: number | string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Minimum width for auto-sizing */
+    minWidth?: number;
+    /** Maximum width for auto-sizing */
+    maxWidth?: number;
+    /** Flex grow factor for flexible sizing */
+    flex?: number;
+    /** Width strategy for responsive behavior */
+    widthStrategy?: 'auto' | 'min-content' | 'max-content' | 'fixed';
+    style?: any;
+    [key: string]: any;
+}
+export declare const TableTh: React.FC<TableCellProps>;
+export declare const TableTd: React.FC<TableCellProps>;
+export declare const TableTr: React.FC<TableRowProps>;
+export declare const TableThead: React.FC<TableSectionProps>;
+export declare const TableTbody: React.FC<TableSectionProps>;
+export declare const TableTfoot: React.FC<TableSectionProps>;
+export declare const TableCaption: React.FC<TableSectionProps>;
+export declare const TableScrollContainer: React.FC<TableScrollContainerProps>;
+export declare const Table: React.FC<TableProps> & {
+    Th: typeof TableTh;
+    Td: typeof TableTd;
+    Tr: typeof TableTr;
+    Thead: typeof TableThead;
+    Tbody: typeof TableTbody;
+    Tfoot: typeof TableTfoot;
+    Caption: typeof TableCaption;
+    ScrollContainer: typeof TableScrollContainer;
+};
+export default Table;

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

@@ -0,0 +1 @@
+export { Table, TableTh, TableTd, TableTr, TableThead, TableTbody, TableTfoot, TableCaption, TableScrollContainer, type TableProps, type TableData, type TableScrollContainerProps, type TableSectionProps, type TableRowProps, type TableCellProps } from './Table';

package/lib/components/TableOfContents/TableOfContents.d.ts

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

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

@@ -0,0 +1,2 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps, TocItem } from './types';

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

@@ -0,0 +1,77 @@
+import { SpacingProps } from '../../core/utils/spacing';
+import { BorderRadiusProps } from '../../core/theme/radius';
+import { SizeValue } from '../../core/theme/sizes';
+import { ScrollSpyOptions, UseScrollSpyItem as TocItem } from '../../hooks/useScrollSpy';
+export interface TableOfContentsProps extends SpacingProps, BorderRadiusProps {
+    /**
+     * Visual style variant for the table of contents
+     * @default 'none'
+     */
+    variant?: 'filled' | 'outline' | 'ghost' | 'none';
+    /**
+     * Background color for filled variant. Falls back to theme primary color if not specified
+     */
+    color?: string;
+    /**
+     * Text size for table of contents items
+     * @default 'sm'
+     */
+    size?: SizeValue;
+    /**
+     * Border radius value for the container
+     */
+    radius?: any;
+    /**
+     * Configuration options for scroll spy behavior
+     */
+    scrollSpyOptions?: ScrollSpyOptions;
+    /**
+     * Function to customize props for each table of contents item control
+     * @param payload - Object containing item data, active state, and index
+     * @returns Props to spread onto the control element
+     */
+    getControlProps?: (payload: {
+        data: TocItem;
+        active: boolean;
+        index: number;
+    }) => any;
+    /**
+     * Initial data for table of contents items (useful for SSR or pre-rendering)
+     */
+    initialData?: TocItem[];
+    /**
+     * Minimum depth level at which to start applying depth offset indentation
+     * @default 1
+     */
+    minDepthToOffset?: number;
+    /**
+     * Pixel offset to apply for each depth level (indentation amount)
+     * @default 20
+     */
+    depthOffset?: number;
+    /**
+     * Ref to expose the reinitialize function for manually triggering TOC refresh
+     */
+    reinitializeRef?: React.RefObject<() => void>;
+    /**
+     * Automatically adjust text color for contrast when using filled variant
+     * @default false
+     */
+    autoContrast?: boolean;
+    /**
+     * Additional styles to apply to the container
+     */
+    style?: any;
+    /**
+     * Callback fired when the active item changes
+     * @param id - ID of the newly active item, or null if none
+     * @param item - The complete TocItem object if available
+     */
+    onActiveChange?: (id: string | null, item?: TocItem) => void;
+    /**
+     * CSS selector string or HTMLElement to use as the scroll container
+     * @default 'main, [role="main"], .main-content, #main-content, article, .content, #content'
+     */
+    container?: string | HTMLElement;
+}
+export type { TocItem };

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

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

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

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './types';