@platform-blocks/ui 0.1.1

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

@@ -0,0 +1,21 @@
+import type { ViewStyle } from 'react-native';
+import type { PlatformBlocksTheme } from '../../core/theme/types';
+export declare const getCarouselStyles: (theme: PlatformBlocksTheme) => {
+    container: ViewStyle;
+    scrollContainer: ViewStyle;
+    contentContainer: ViewStyle;
+    itemContainer: ViewStyle;
+    arrowContainer: ViewStyle;
+    leftArrowInside: ViewStyle;
+    rightArrowInside: ViewStyle;
+    leftArrowOutside: ViewStyle;
+    rightArrowOutside: ViewStyle;
+    arrowButton: ViewStyle;
+    dotsContainer: ViewStyle;
+    dot: ViewStyle;
+    activeDot: ViewStyle;
+};
+export declare const getDotSize: (size: "sm" | "md" | "lg") => {
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { SpacingProps } from '../../core/utils';
+import type { ResponsiveSize } from '../AppShell/types';
+export interface CarouselProps extends SpacingProps {
+    children: React.ReactNode[];
+    /** Orientation of the carousel */
+    orientation?: 'horizontal' | 'vertical';
+    showArrows?: boolean;
+    /** Show navigation dots */
+    showDots?: boolean;
+    /** Enable autoplay */
+    autoPlay?: boolean;
+    /** Autoplay interval in ms */
+    autoPlayInterval?: number;
+    /** Pause autoplay on user interaction */
+    autoPlayPauseOnTouch?: boolean;
+    /** Enable looping */
+    loop?: boolean;
+    /** Number of visible items per page */
+    itemsPerPage?: number;
+    /**
+     * Explicit slide size. Accepts:
+     *  - percentage string: e.g. "70%"
+     *  - fraction (0..1) number: 0.7 -> 70% of container
+     *  - absolute pixel number (>1)
+     * When provided it overrides width derived from itemsPerPage. itemsPerPage still controls cloning + pagination grouping.
+     */
+    slideSize?: number | string | {
+        base?: number | string;
+        xs?: number | string;
+        sm?: number | string;
+        md?: number | string;
+        lg?: number | string;
+        xl?: number | string;
+    };
+    /** Responsive gap between slides (overrides itemGap). Accepts spacing token string or number or responsive map. */
+    slideGap?: ResponsiveSize;
+    itemGap?: number;
+    height?: number;
+    onSlideChange?: (index: number) => void;
+    style?: ViewStyle;
+    itemStyle?: ViewStyle;
+    snapToItem?: boolean;
+    arrowPosition?: 'inside' | 'outside';
+    arrowSize?: 'sm' | 'md' | 'lg';
+    dotSize?: 'sm' | 'md' | 'lg';
+    scrollEnabled?: boolean;
+    reducedMotion?: boolean;
+    windowSize?: number;
+}

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { View } from 'react-native';
+import { CheckboxProps } from './types';
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;

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

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

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

@@ -0,0 +1,71 @@
+import { CheckboxStyleProps } from './types';
+import { PlatformBlocksTheme } from '../../core/theme/types';
+export declare const useCheckboxStyles: (props: CheckboxStyleProps & {
+    theme: PlatformBlocksTheme;
+}) => {
+    checkbox: {
+        transition?: string | undefined;
+        alignItems: "center";
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        height: number;
+        justifyContent: "center";
+        opacity: number;
+        width: number;
+    };
+    checkboxContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        minWidth: number;
+        minHeight: number;
+        padding: number;
+    };
+    checkboxInner: {
+        alignItems: "center";
+        height: "100%";
+        justifyContent: "center";
+        width: "100%";
+    };
+    container: {
+        alignItems: "center";
+        flexDirection: "row";
+        minHeight: number;
+    };
+    containerReverse: {
+        flexDirection: "row-reverse";
+        justifyContent: "flex-end";
+    };
+    description: {
+        color: string;
+        marginTop: number;
+    };
+    error: {
+        color: string;
+        marginTop: number;
+    };
+    label: {
+        userSelect?: any;
+        color: string;
+        lineHeight: number;
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+        marginLeft: number;
+        marginRight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    labelDisabled: {
+        color: string;
+    };
+    labelError: {
+        color: string;
+    };
+    required: {
+        color: string;
+    };
+    spacingProps: {};
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { SizeValue, SpacingProps } from '../../core/theme/types';
+export interface BaseComponentProps extends SpacingProps {
+    /** Component test ID for testing */
+    testID?: string;
+    /** Additional CSS styles */
+    style?: any;
+}
+export interface CheckboxProps extends BaseComponentProps {
+    /** Whether checkbox is checked */
+    checked?: boolean;
+    /** Initial checked value for uncontrolled usage */
+    defaultChecked?: boolean;
+    /** Change handler */
+    onChange?: (checked: boolean) => void;
+    /** Indeterminate state for partial selections */
+    indeterminate?: boolean;
+    /** Custom color override */
+    color?: string;
+    /** Named color variant from theme */
+    colorVariant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+    /** Checkbox size */
+    size?: SizeValue;
+    /** Checkbox label */
+    label?: React.ReactNode;
+    /** Whether checkbox is disabled */
+    disabled?: boolean;
+    /** Whether checkbox is required */
+    required?: boolean;
+    /** Error message */
+    error?: string;
+    /** Helper text */
+    description?: string;
+    /** Icon to show when checked */
+    icon?: React.ReactNode;
+    /** Icon to show when indeterminate */
+    indeterminateIcon?: React.ReactNode;
+    /** Label position relative to checkbox */
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /** Checkbox content/children (alternative to label) */
+    children?: React.ReactNode;
+}
+export interface CheckboxStyleProps {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    error: boolean;
+    size: SizeValue;
+    color?: string;
+    colorVariant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning';
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+}

package/lib/components/Chip/Chip.d.ts

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

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

@@ -0,0 +1,3 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './types';
+export { Chip as default } from './Chip';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { SizeValue } from '../../core/theme/sizes';
+import { SpacingProps } from '../../core/utils';
+import { BorderRadiusProps } from '../../core/theme/radius';
+import { ShadowProps } from '../../core/theme/shadow';
+export interface ChipProps extends SpacingProps, BorderRadiusProps, ShadowProps {
+    children: React.ReactNode;
+    size?: SizeValue;
+    variant?: 'filled' | 'outline' | 'light' | 'subtle';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'gray' | string;
+    onPress?: () => void;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    onRemove?: () => void;
+    removePosition?: 'left' | 'right';
+    disabled?: boolean;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+    radius?: any;
+    shadow?: any;
+}

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { CodeBlockProps } from './types';
+/**
+ * CodeBlock component for displaying formatted code with syntax highlighting.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock title="React Component" language="tsx">
+ *   {`const App = () => {
+ *   return <Text>Hello World</Text>;
+ * };`}
+ * </CodeBlock>
+ * ```
+ */
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export default CodeBlock;

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

@@ -0,0 +1,3 @@
+export { CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './types';
+export { normalizeLanguage, parseHighlightLines, createNativeHighlighter, getSyntaxColors, getSyntaxPatterns } from './utils';

package/lib/components/CodeBlock/type.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { SpacingProps } from '../../core/utils';
+/**
+ * Props for the CodeBlock component; extracted to a separate file for reuse and cleaner component file.
+ */
+export interface CodeBlockProps extends SpacingProps {
+    /** The code content to display */
+    children: string;
+    /** Optional title for the code block */
+    title?: string;
+    /** Optional filename badge (displayed left of copy button, overrides title if both provided) */
+    fileName?: string;
+    /** Optional icon element or name to render beside title/filename */
+    fileIcon?: React.ReactNode;
+    /** Programming language for syntax highlighting */
+    language?: any;
+    /** Whether to show line numbers */
+    showLineNumbers?: boolean;
+    /** Whether to enable syntax highlighting (default: true) */
+    highlight?: boolean;
+    /** Whether code block should fill the full width of its parent container */
+    fullWidth?: boolean;
+    /** Whether to show copy button (default: true) */
+    showCopyButton?: boolean;
+    /** Callback when copy button is pressed */
+    onCopy?: (code: string) => void;
+    /** Custom style for the container */
+    style?: ViewStyle;
+    /** Custom style for the code text */
+    textStyle?: TextStyle;
+    /** Custom style for the title */
+    titleStyle?: TextStyle;
+    /** Added highlightLines prop: accepts array of strings like ['5', '10-15'] */
+    highlightLines?: string[];
+    /** If true, wraps the code content in a Spoiler (collapsible) container */
+    spoiler?: boolean;
+    /** Max height (px) for spoiler collapsed state (only when spoiler=true) */
+    spoilerMaxHeight?: number;
+}

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+import { SpacingProps } from '../../core/utils';
+export interface CodeBlockProps extends SpacingProps {
+    /** Optional language for syntax highlighting */
+    language?: string;
+    children: string;
+    /** Optional title displayed above the code block */
+    title?: string;
+    /** Optional filename displayed next to the title */
+    fileName?: string;
+    /** Optional icon displayed next to the filename */
+    fileIcon?: React.ReactNode;
+    /** Show line numbers in the code block */
+    showLineNumbers?: boolean;
+    /** Enable syntax highlighting */
+    highlight?: boolean;
+    /** Make the code block take the full width of its container */
+    fullWidth?: boolean;
+    /** Show a copy button to copy the code to clipboard */
+    showCopyButton?: boolean;
+    /** Callback when code is copied */
+    onCopy?: (code: string) => void;
+    /** Custom styles for the code block container and text */
+    style?: ViewStyle;
+    /** Custom styles for the code text */
+    textStyle?: TextStyle;
+    /** Custom styles for the title text */
+    titleStyle?: TextStyle;
+    /** Lines to highlight, e.g. ["1", "3-5"] */
+    highlightLines?: string[];
+    /** Show a spoiler for the code block */
+    spoiler?: boolean;
+    /** Maximum height for the spoiler, if exceeded a "Show More" button appears */
+    spoilerMaxHeight?: number;
+    /** Visual variant: default code styling, terminal emulation, or hacker theme */
+    variant?: 'code' | 'terminal' | 'hacker';
+    /** Optional prompt prefix for terminal variant (ignored if lines already prefixed) */
+    promptSymbol?: string;
+    /** GitHub URL to open the code file in GitHub */
+    githubUrl?: string;
+    /** Force a distinct file header bar (even without title) showing the filename */
+    fileHeader?: boolean;
+}

package/lib/components/CodeBlock/utils.d.ts

@@ -0,0 +1,38 @@
+import type { PlatformBlocksTheme } from '../../core/theme/types';
+/**
+ * Normalizes language identifiers to standard values for syntax highlighting
+ */
+export declare function normalizeLanguage(lang: string): string;
+/**
+ * Parses highlight line specifications like "1", "3-5", "7,9-12" into a Set of line numbers
+ */
+export declare function parseHighlightLines(specs: string[] | undefined, total: number): Set<number>;
+/**
+ * Color schemes for different code block variants
+ */
+export declare function getSyntaxColors(theme: PlatformBlocksTheme, isDark: boolean, variant?: 'code' | 'terminal' | 'hacker'): {
+    keyword: string;
+    string: string;
+    comment: string;
+    number: string;
+    function: string;
+    operator: string;
+    punctuation: string;
+    tag: string;
+    attribute: string;
+    className: string;
+};
+/**
+ * Regex patterns for syntax highlighting
+ */
+export declare function getSyntaxPatterns(colors: ReturnType<typeof getSyntaxColors>): {
+    pattern: RegExp;
+    color: string;
+}[];
+/**
+ * Creates a simple syntax highlighter for React Native that returns colored tokens
+ */
+export declare function createNativeHighlighter(theme: PlatformBlocksTheme, isDark: boolean, variant?: 'code' | 'terminal' | 'hacker'): (code: string) => Array<Array<{
+    text: string;
+    color: string;
+}>>;

package/lib/components/ColorPicker/ColorPicker.d.ts

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

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

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

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

@@ -0,0 +1,35 @@
+import { ViewStyle, TextStyle } from 'react-native';
+export declare function useColorPickerStyles(): {
+    container: ViewStyle;
+    label: TextStyle;
+    wrapper: ViewStyle;
+    input: ViewStyle;
+    inputFocused: ViewStyle;
+    inputDisabled: ViewStyle;
+    inputError: ViewStyle;
+    preview: ViewStyle;
+    textInput: TextStyle;
+    dropdownIcon: TextStyle;
+    clearButton: ViewStyle;
+    clearButtonPressed: ViewStyle;
+    dropdownTrigger: ViewStyle;
+    dropdownTriggerPressed: ViewStyle;
+    dropdown: ViewStyle;
+    colorPalette: ViewStyle;
+    paletteTitle: TextStyle;
+    swatchGrid: ViewStyle;
+    swatch: ViewStyle;
+    swatchSelected: ViewStyle;
+    customSection: ViewStyle;
+    hexInput: ViewStyle;
+    hexInputText: TextStyle;
+    error: TextStyle;
+    description: TextStyle;
+    buttonRow: ViewStyle;
+    button: ViewStyle;
+    primaryButton: ViewStyle;
+    secondaryButton: ViewStyle;
+    buttonText: TextStyle;
+    primaryButtonText: TextStyle;
+    secondaryButtonText: TextStyle;
+};

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

@@ -0,0 +1,69 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { SpacingProps } from '../../core/theme/types';
+import { LayoutProps } from '../../core/utils';
+import { BorderRadiusProps } from '../../core/theme/radius';
+import type { PlacementType } from '../../core/utils/positioning-enhanced';
+export interface ColorPickerProps extends SpacingProps, LayoutProps, BorderRadiusProps {
+    /** Current color value in hex format (e.g., "#ff0000") */
+    value?: string;
+    /** Default color value for uncontrolled usage */
+    defaultValue?: string;
+    /** Callback when color changes */
+    onChange?: (color: string) => void;
+    /** Label for the color picker */
+    label?: string;
+    /** Placeholder text when no color is selected */
+    placeholder?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Whether the picker is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Help text to display below the picker */
+    description?: string;
+    /** Size of the picker */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Variant of the picker */
+    variant?: 'default' | 'filled' | 'unstyled';
+    /** Radius of the picker */
+    radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Whether to show the color preview */
+    showPreview?: boolean;
+    /** Whether to show the hex input */
+    showInput?: boolean;
+    /** Predefined color swatches to show */
+    swatches?: string[];
+    /** Whether to show common color swatches */
+    withSwatches?: boolean;
+    /** Format for the color value */
+    format?: 'hex' | 'rgb' | 'hsl';
+    /** Whether to include alpha channel */
+    withAlpha?: boolean;
+    /** Dropdown placement */
+    placement?: PlacementType;
+    /** Whether to flip placement when no space */
+    flip?: boolean;
+    /** Whether to shift position to stay in viewport */
+    shift?: boolean;
+    /** Boundary element for positioning constraints */
+    boundary?: any;
+    /** Offset from anchor element in pixels */
+    offset?: number;
+    /** Whether to automatically reposition on resize/scroll */
+    autoReposition?: boolean;
+    /** Fallback placements to try */
+    fallbackPlacements?: PlacementType[];
+    /** Custom style for the container */
+    style?: ViewStyle;
+    /** Custom style for the preview */
+    previewStyle?: ViewStyle;
+    /** Custom style for the input */
+    inputStyle?: TextStyle;
+    /** Whether the picker should display a clear button */
+    clearable?: boolean;
+    /** Accessible label for the clear button */
+    clearButtonLabel?: string;
+    /** Test ID for testing */
+    testID?: string;
+}

package/lib/components/ColorPicker/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function isValidHex(hex: string): boolean;
+export declare function normalizeHex(hex: string): string;

package/lib/components/ColorSwatch/ColorSwatch.d.ts

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

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

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

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

@@ -0,0 +1,29 @@
+import type { SpacingProps } from '../../core/utils';
+export interface ColorSwatchProps extends SpacingProps {
+    /** The color value to display (hex, rgb, hsl, etc.) */
+    color: string;
+    /** Size of the swatch in pixels */
+    size?: number;
+    /** Whether the swatch is selected/active */
+    selected?: boolean;
+    /** Whether the swatch is disabled */
+    disabled?: boolean;
+    /** Callback when swatch is pressed */
+    onPress?: () => void;
+    /** Show a border around the swatch */
+    showBorder?: boolean;
+    /** Custom border color (defaults to theme color) */
+    borderColor?: string;
+    /** Border width in pixels */
+    borderWidth?: number;
+    /** Border radius in pixels */
+    borderRadius?: number;
+    /** Show a checkmark when selected */
+    showCheckmark?: boolean;
+    /** Custom checkmark color */
+    checkmarkColor?: string;
+    /** Accessibility label */
+    accessibilityLabel?: string;
+    /** Test ID */
+    testID?: string;
+}

package/lib/components/Container/Container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ContainerProps } from './types';
+export declare function Container(props: ContainerProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import type { SpacingProps } from '../../core/utils/spacing';
+export interface ContainerProps extends SpacingProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+    /** Makes container take full available height (flex: 1) */
+    fluid?: boolean;
+    backgroundImage?: {
+        uri: string;
+        opacity?: number;
+        overlay?: {
+            color?: string;
+            opacity?: number;
+        };
+        gradient?: {
+            colors: string[];
+            locations?: number[];
+            start?: {
+                x: number;
+                y: number;
+            };
+            end?: {
+                x: number;
+                y: number;
+            };
+        };
+    };
+    padding?: number;
+    margin?: number;
+}

package/lib/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ContextMenuProps } from './types';
+export type { ContextMenuItem, ContextMenuProps } from './types';
+export declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

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

@@ -0,0 +1,2 @@
+export { ContextMenu } from './ContextMenu';
+export type { ContextMenuProps, ContextMenuItem } from './types';

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

@@ -0,0 +1,36 @@
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    onSelect?: () => void;
+}
+export interface ContextMenuProps {
+    /** Render prop for the trigger */
+    children: (props: {
+        onContextMenu: (e: any) => void;
+        onPressIn: (e: any) => void;
+    }) => React.ReactNode;
+    items: ContextMenuItem[];
+    /** Close after selection (default true) */
+    closeOnSelect?: boolean;
+    /** Long press duration (ms) for native */
+    longPressDelay?: number;
+    /** Optional maximum height (scrolls) */
+    maxHeight?: number;
+    /** Called when menu opens */
+    onOpen?: () => void;
+    /** Called when menu closes */
+    onClose?: () => void;
+    /** Controlled open */
+    open?: boolean;
+    /** Controlled position */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /** Portal target id (web) - simple placeholder for future portal integration */
+    portalId?: string;
+    style?: any;
+}

package/lib/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { CopyButtonProps } from './types';
+/**
+ * Reusable copy control that uses useClipboard & toast toast.
+ * Provides a quick consistent UX across components (CodeBlock, QRCode, etc).
+ */
+export declare function CopyButton({ value, onCopy, iconOnly, label, size, style, tooltip, tooltipPosition, disableToast, toastTitle, toastMessage, mode, buttonVariant, iconName, copiedIconName, iconColor, copiedIconColor, }: CopyButtonProps): React.JSX.Element;
+export declare namespace CopyButton {
+    var displayName: string;
+}