@platform-blocks/ui 0.1.1

package/lib/components/QRCode/core/tables.d.ts

@@ -0,0 +1,24 @@
+export interface ECBlockGroup {
+    blocks: number;
+    dataCodewords: number;
+}
+export interface ECLvlInfo {
+    totalDataCodewords: number;
+    ecCodewordsPerBlock: number;
+    group1: ECBlockGroup;
+    group2?: ECBlockGroup;
+}
+export interface VersionInfo {
+    size: number;
+    ecc: Record<'L' | 'M' | 'Q' | 'H', ECLvlInfo>;
+}
+export declare const REMAINDER_BITS: Record<number, number>;
+export declare const VERSION_INFO: Record<number, VersionInfo>;
+export declare const MAX_VERSION: number;
+export declare const MODE_INDICATORS: {
+    readonly NUMERIC: 1;
+    readonly ALPHANUMERIC: 2;
+    readonly BYTE: 4;
+};
+export type QRMode = keyof typeof MODE_INDICATORS;
+export declare function getCharCountBits(version: number, mode: QRMode): number;

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

@@ -0,0 +1,3 @@
+export { QRCode } from './QRCode';
+export { QRCodeSVG } from './QRCodeSVG';
+export type { QRCodeProps } from './types';

package/lib/components/QRCode/optimizations.d.ts

@@ -0,0 +1,20 @@
+/**
+* QR Code optimization utilities (Legacy API-based generation)
+*
+* NOTE: This file is now used only for legacy API-based QR generation.
+* The QRCode component no longer uses this API approach by default.
+* Entire file retained only for potential external migration and will be removed.
+* All consumers should rely on <QRCode /> which now always renders the full-spec internal engine.
+*/
+/**
+ * Simple QR code cache for commonly used values
+ */
+declare class QRCodeCache {
+    private cache;
+    private maxSize;
+    getCacheKey(value: string, size: number, bg: string, color: string): string;
+    get(key: string): string | undefined;
+    set(key: string, url: string): void;
+}
+export declare const qrCodeCache: QRCodeCache;
+export {};

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

@@ -0,0 +1,76 @@
+import { ViewStyle } from 'react-native';
+import { SpacingProps, LayoutProps } from '../../core/utils';
+export interface QRCodeProps extends SpacingProps, LayoutProps {
+    /** The data/text to encode in the QR code */
+    value: string;
+    /** Size of the QR code (both width and height) */
+    size?: number;
+    /** Background color of the QR code */
+    backgroundColor?: string;
+    /** Foreground color (the QR code pattern color) */
+    color?: string;
+    /**
+     * Module shape variant for data modules.
+     * Note: Finder patterns (corner anchors) always remain square for optimal scanner compatibility.
+     */
+    moduleShape?: 'square' | 'rounded' | 'diamond';
+    /** Corner (finder) shape variant - DEPRECATED: Finder patterns always remain square */
+    finderShape?: 'square' | 'rounded';
+    /** Rounded corner radius factor (0-1) applied when moduleShape='rounded' */
+    cornerRadius?: number;
+    /** Gradient fill (overrides color) */
+    gradient?: {
+        type?: 'linear' | 'radial';
+        /** Start color */
+        from: string;
+        /** End color */
+        to: string;
+        /** (linear) rotation deg (0=left->right) */
+        rotation?: number;
+    };
+    /** Error correction level */
+    errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
+    /**
+     * Quiet zone size (border modules around the QR code).
+     * Defaults to 1 for compact layouts. Set to 4 for strict QR code standard compliance.
+     * Set to 0 to remove all padding around the code.
+     */
+    quietZone?: number;
+    /** Logo to display in the center of the QR code */
+    logo?: {
+        uri: string;
+        /** Optional React element to render as logo instead of default */
+        element?: React.ReactNode;
+        size?: number;
+        backgroundColor?: string;
+        borderRadius?: number;
+    };
+    /** Custom container style */
+    style?: ViewStyle;
+    /** Test ID for testing */
+    testID?: string;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+    /** Callback when QR code generation fails */
+    onError?: (error: Error) => void;
+    /** Callback when QR code starts loading */
+    onLoadStart?: () => void;
+    /** Callback when QR code finishes loading */
+    onLoadEnd?: () => void;
+    /**
+     * Which QR engine to use.
+     * - internal: new in-house full spec implementation.
+     * - legacy: bundled fallback port (qr-code-ts) for comparative testing.
+     */
+    engine?: 'internal' | 'legacy';
+    /** If true (or object), tapping the QR copies the value (or provided value). */
+    copyOnPress?: boolean | {
+        value?: string;
+    };
+    /** Show a floating copy button overlay */
+    showCopyButton?: boolean;
+    /** Custom toast title when copied */
+    copyToastTitle?: string;
+    /** Custom toast message when copied */
+    copyToastMessage?: string;
+}

package/lib/components/Radio/Radio.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps } from './types';

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

@@ -0,0 +1,81 @@
+import { RadioStyleProps } from './types';
+import { PlatformBlocksTheme } from '../../core/theme/types';
+export declare const useRadioStyles: (props: RadioStyleProps & {
+    theme: PlatformBlocksTheme;
+}) => {
+    container: {
+        alignItems: "flex-start";
+        flexDirection: "row";
+        minHeight: number;
+    };
+    containerReverse: {
+        flexDirection: "row-reverse";
+        justifyContent: "flex-end";
+    };
+    description: {
+        color: string;
+        marginTop: number;
+    };
+    error: {
+        color: string;
+        marginTop: number;
+    };
+    iconWrapper: {
+        alignItems: "center";
+        justifyContent: "center";
+        marginRight: number;
+    };
+    label: {
+        userSelect?: any;
+        color: string;
+        lineHeight: number;
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+        marginLeft: number;
+    };
+    labelContainerLeft: {
+        marginLeft: number;
+        marginRight: number;
+    };
+    labelContent: {
+        alignItems: "center";
+        flexDirection: "row";
+    };
+    labelDisabled: {
+        color: string;
+    };
+    labelError: {
+        color: string;
+    };
+    radio: {
+        transition?: string | undefined;
+        alignItems: "center";
+        backgroundColor: string;
+        borderColor: any;
+        borderRadius: number;
+        borderWidth: number;
+        height: number;
+        justifyContent: "center";
+        opacity: number;
+        width: number;
+    };
+    radioContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
+    };
+    radioInner: {
+        borderRadius: number;
+        elevation?: number | undefined;
+        backgroundColor: any;
+        height: number;
+        overflow: "hidden";
+        width: number;
+    };
+    required: {
+        color: string;
+    };
+};

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

@@ -0,0 +1,79 @@
+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 RadioProps extends BaseComponentProps {
+    /** Radio value */
+    value: string;
+    /** Whether radio is selected */
+    checked?: boolean;
+    /** Change handler */
+    onChange?: (value: string) => void;
+    /** Radio group name */
+    name?: string;
+    /** Radio size */
+    size?: SizeValue;
+    /** Radio color theme */
+    color?: ColorValue;
+    /** Radio label */
+    label?: React.ReactNode;
+    /** Whether radio is disabled */
+    disabled?: boolean;
+    /** Whether radio is required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    description?: string;
+    /** Label position relative to radio */
+    labelPosition?: 'left' | 'right';
+    /** Radio content/children (alternative to label) */
+    children?: React.ReactNode;
+    /** Optional icon displayed alongside the label */
+    icon?: React.ReactNode | string;
+}
+export interface RadioGroupProps extends BaseComponentProps {
+    /** Available options */
+    options: Array<{
+        label: React.ReactNode;
+        value: string;
+        disabled?: boolean;
+        description?: string;
+        icon?: React.ReactNode | string;
+    }>;
+    /** Selected value */
+    value?: string;
+    /** Change handler */
+    onChange?: (value: string) => void;
+    /** Group name for form submission */
+    name?: string;
+    /** Group orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Radio size */
+    size?: SizeValue;
+    /** Radio color theme */
+    color?: ColorValue;
+    /** Group label */
+    label?: React.ReactNode;
+    /** Whether group is disabled */
+    disabled?: boolean;
+    /** Whether group is required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    description?: string;
+    /** Gap between radio options */
+    gap?: SizeValue | number;
+}
+export interface RadioStyleProps {
+    checked: boolean;
+    disabled: boolean;
+    error: boolean;
+    size: SizeValue;
+    color: ColorValue;
+}

package/lib/components/Rating/Rating.d.ts

@@ -0,0 +1,2 @@
+import { RatingFactoryPayload } from './types';
+export declare const Rating: import("../../core/factory").PlatformBlocksComponent<RatingFactoryPayload>;

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

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

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

@@ -0,0 +1,35 @@
+import { View, ViewStyle } from 'react-native';
+import { SpacingProps } from '../../core/utils';
+import { SizeValue } from '../../core/theme/sizes';
+export interface RatingProps extends SpacingProps {
+    /** Current rating value */
+    value?: number;
+    /** Initial rating value for uncontrolled component */
+    defaultValue?: number;
+    count?: number;
+    readOnly?: boolean;
+    allowFraction?: boolean;
+    allowHalf?: boolean;
+    precision?: number;
+    size?: SizeValue | number;
+    color?: string;
+    emptyColor?: string;
+    hoverColor?: string;
+    onChange?: (value: number) => void;
+    onHover?: (value: number) => void;
+    showTooltip?: boolean;
+    character?: string | React.ReactNode;
+    emptyCharacter?: string | React.ReactNode;
+    gap?: SizeValue | number;
+    style?: ViewStyle;
+    testID?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    label?: React.ReactNode;
+    labelPosition?: 'left' | 'right' | 'above' | 'below';
+    labelGap?: SizeValue | number;
+}
+export interface RatingFactoryPayload {
+    props: RatingProps;
+    ref: View;
+}

package/lib/components/Reveal/Reveal.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { RevealProps } from './types';
+declare const Reveal: React.FC<RevealProps>;
+export default Reveal;

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

@@ -0,0 +1,2 @@
+export { default as Reveal } from './Reveal';
+export type { RevealProps } from './types';

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import type { ViewStyle } from 'react-native';
+export interface RevealProps {
+    /**
+     * Whether the content is revealed/expanded
+     */
+    isRevealed: boolean;
+    /**
+     * Content to show/hide
+     */
+    children: ReactNode;
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Animation timing function
+     * @default 'ease-out'
+     */
+    timing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    /**
+     * Style for the container
+     */
+    style?: ViewStyle;
+    /**
+     * Style for the content wrapper
+     */
+    contentStyle?: ViewStyle;
+    /**
+     * Callback fired when animation starts
+     */
+    onAnimationStart?: () => void;
+    /**
+     * Callback fired when animation completes
+     */
+    onAnimationEnd?: () => void;
+    /**
+     * Whether to animate on initial mount
+     * @default false
+     */
+    animateOnMount?: boolean;
+    /**
+     * Custom height when collapsed (useful for partial reveals)
+     * @default 0
+     */
+    collapsedHeight?: number;
+    /**
+     * Whether to fade content in/out along with height animation
+     * @default true
+     */
+    fadeContent?: boolean;
+}

package/lib/components/RichTextEditor/RichTextEditor.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorContent, RichTextEditorFormat, RichTextEditorSelection } from './types';

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

@@ -0,0 +1,61 @@
+export declare function useRichTextEditorStyles(): {
+    characterCount: {
+        fontSize: number;
+        marginTop: number;
+        textAlign: "right";
+    };
+    container: {
+        width: "100%";
+    };
+    disabled: {
+        opacity: number;
+    };
+    editorContainer: {
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        overflow: "hidden";
+    };
+    errorText: {
+        fontSize: number;
+        marginTop: number;
+    };
+    helperText: {
+        fontSize: number;
+        marginTop: number;
+    };
+    textInput: {
+        fontSize: number;
+        lineHeight: number;
+        padding: number;
+    };
+    toolButton: {
+        alignItems: "center";
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        height: number;
+        justifyContent: "center";
+        width: number;
+    };
+    toolSeparator: {
+        backgroundColor: string;
+        height: number;
+        marginHorizontal: number;
+        width: number;
+    };
+    toolbar: {
+        backgroundColor: string;
+        borderBottomColor: string;
+        borderBottomWidth: number;
+    };
+    toolbarContent: {
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};

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

@@ -0,0 +1,150 @@
+import React from 'react';
+import { BaseInputProps } from '../Input/types';
+export interface RichTextEditorFormat {
+    /** Bold text */
+    bold?: boolean;
+    /** Italic text */
+    italic?: boolean;
+    /** Underlined text */
+    underline?: boolean;
+    /** Strikethrough text */
+    strikethrough?: boolean;
+    /** Text color */
+    color?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Font size */
+    fontSize?: number;
+    /** Font family */
+    fontFamily?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** List type */
+    list?: 'ordered' | 'unordered' | null;
+    /** Heading level */
+    heading?: 1 | 2 | 3 | 4 | 5 | 6 | null;
+    /** Link URL */
+    link?: string | null;
+    /** Code formatting */
+    code?: boolean;
+    /** Quote formatting */
+    quote?: boolean;
+}
+export interface RichTextEditorContent {
+    /** Raw HTML content */
+    html: string;
+    /** Plain text content */
+    text: string;
+    /** Delta format (for advanced editors) */
+    delta?: any;
+    /** Custom format */
+    json?: any;
+}
+export interface RichTextEditorSelection {
+    /** Start index */
+    index: number;
+    /** Selection length */
+    length: number;
+    /** Current format */
+    format?: RichTextEditorFormat;
+}
+export interface RichTextEditorProps extends Omit<BaseInputProps, 'value' | 'onChange'> {
+    /** Initial content */
+    defaultValue?: RichTextEditorContent;
+    /** Current content */
+    value?: RichTextEditorContent;
+    /** Content change handler */
+    onChange?: (content: RichTextEditorContent) => void;
+    /** Selection change handler */
+    onSelectionChange?: (selection: RichTextEditorSelection) => void;
+    /** Focus handler */
+    onFocus?: () => void;
+    /** Blur handler */
+    onBlur?: () => void;
+    /** Editor placeholder */
+    placeholder?: string;
+    /** Whether editor is read-only */
+    readOnly?: boolean;
+    /** Toolbar configuration */
+    toolbar?: {
+        /** Show toolbar */
+        enabled?: boolean;
+        /** Toolbar position */
+        position?: 'top' | 'bottom' | 'floating';
+        /** Available tools */
+        tools?: Array<'bold' | 'italic' | 'underline' | 'strikethrough' | 'color' | 'backgroundColor' | 'fontSize' | 'fontFamily' | 'align' | 'list' | 'heading' | 'link' | 'image' | 'code' | 'quote' | 'separator' | {
+            type: 'custom';
+            component: React.ComponentType<any>;
+            props?: any;
+        }>;
+        /** Toolbar groups */
+        groups?: Array<Array<string>>;
+    };
+    /** Format options */
+    formats?: {
+        /** Available font families */
+        fontFamilies?: string[];
+        /** Available font sizes */
+        fontSizes?: number[];
+        /** Available colors */
+        colors?: string[];
+        /** Available heading levels */
+        headings?: Array<1 | 2 | 3 | 4 | 5 | 6>;
+    };
+    /** Image handling */
+    images?: {
+        /** Allow image uploads */
+        enabled?: boolean;
+        /** Upload handler */
+        onUpload?: (file: File) => Promise<string>;
+        /** Maximum image size */
+        maxSize?: number;
+        /** Allowed image types */
+        allowedTypes?: string[];
+        /** Image resize settings */
+        resize?: {
+            maxWidth?: number;
+            maxHeight?: number;
+            quality?: number;
+        };
+    };
+    /** Link handling */
+    links?: {
+        /** Allow links */
+        enabled?: boolean;
+        /** Link validation */
+        validate?: (url: string) => boolean;
+        /** Open links in new tab */
+        openInNewTab?: boolean;
+    };
+    /** Custom plugins */
+    plugins?: Array<{
+        /** Plugin name */
+        name: string;
+        /** Plugin component */
+        component: React.ComponentType<any>;
+        /** Plugin configuration */
+        config?: any;
+    }>;
+    /** Autosave configuration */
+    autosave?: {
+        /** Enable autosave */
+        enabled?: boolean;
+        /** Save interval in milliseconds */
+        interval?: number;
+        /** Save handler */
+        onSave?: (content: RichTextEditorContent) => void;
+    };
+    /** Spell check */
+    spellCheck?: boolean;
+    /** Maximum content length */
+    maxLength?: number;
+    /** Minimum editor height */
+    minHeight?: number;
+    /** Maximum editor height */
+    maxHeight?: number;
+    /** Custom CSS classes */
+    className?: string;
+    /** Theme override */
+    theme?: 'light' | 'dark' | 'auto';
+}

package/lib/components/Search/Search.d.ts

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

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

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

package/lib/components/Search/test-component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TestSearchComponent: () => React.JSX.Element;
+export default TestSearchComponent;

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

@@ -0,0 +1,27 @@
+import type { SizeValue } from '../../core/theme/types';
+export interface SearchProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    placeholder?: string;
+    size?: SizeValue;
+    radius?: any;
+    autoFocus?: boolean;
+    debounce?: number;
+    clearButton?: boolean;
+    loading?: boolean;
+    rightSection?: React.ReactNode;
+    accessibilityLabel?: string;
+    style?: any;
+    /** When true, renders as a button that opens the spotlight instead of a typeable input */
+    buttonMode?: boolean;
+    /** Callback when search button is pressed (only used in buttonMode) */
+    onPress?: () => void;
+    /** Component to render on the right side (useful for button mode to show shortcuts like CMD+K) */
+    rightComponent?: React.ReactNode;
+}
+export interface InternalState {
+    value: string;
+    isControlled: boolean;
+}