@platform-blocks/ui 0.1.1

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

@@ -0,0 +1,89 @@
+import type { ViewStyle } from 'react-native';
+import type { LayoutProps } from '../../core/utils';
+export interface OAuthProvider {
+    name: 'google' | 'facebook' | 'apple' | string;
+    displayName: string;
+    icon?: string;
+    color?: string;
+    onPress: () => void;
+}
+export interface LoginFormProps extends LayoutProps {
+    style?: ViewStyle;
+    onLogin?: (email: string, password: string) => void;
+    onSignup?: () => void;
+    onForgotPassword?: () => void;
+    oauthProviders?: OAuthProvider[];
+    loading?: boolean;
+    error?: string;
+    title?: string;
+    subtitle?: string;
+    showSignupLink?: boolean;
+    showForgotPasswordLink?: boolean;
+    primaryButtonText?: string;
+    signupLinkText?: string;
+    forgotPasswordLinkText?: string;
+}
+export interface SignupFormProps extends LayoutProps {
+    style?: ViewStyle;
+    onSignup?: (data: SignupFormData) => void;
+    onLogin?: () => void;
+    oauthProviders?: OAuthProvider[];
+    loading?: boolean;
+    error?: string;
+    title?: string;
+    subtitle?: string;
+    showLoginLink?: boolean;
+    primaryButtonText?: string;
+    loginLinkText?: string;
+    requireTermsAcceptance?: boolean;
+    termsText?: string;
+    onTermsPress?: () => void;
+}
+export interface SignupFormData {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    acceptedTerms?: boolean;
+}
+export interface ForgotPasswordFormProps extends LayoutProps {
+    style?: ViewStyle;
+    onSubmit?: (email: string) => void;
+    onBackToLogin?: () => void;
+    loading?: boolean;
+    error?: string;
+    success?: string;
+    title?: string;
+    subtitle?: string;
+    primaryButtonText?: string;
+    backToLoginText?: string;
+}
+export interface ContactFormProps extends LayoutProps {
+    style?: ViewStyle;
+    onSubmit?: (data: ContactFormData) => void;
+    loading?: boolean;
+    error?: string;
+    success?: string;
+    title?: string;
+    subtitle?: string;
+    primaryButtonText?: string;
+    showSubjectField?: boolean;
+    showPhoneField?: boolean;
+    customFields?: ContactFormField[];
+}
+export interface ContactFormData {
+    name: string;
+    email: string;
+    phone?: string;
+    subject?: string;
+    message: string;
+    [key: string]: any;
+}
+export interface ContactFormField {
+    key: string;
+    label: string;
+    type: 'text' | 'email' | 'phone' | 'textarea';
+    required?: boolean;
+    placeholder?: string;
+}

package/lib/components/Gallery/Gallery.d.ts

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

package/lib/components/Gallery/GalleryControls.d.ts

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

package/lib/components/Gallery/GalleryMetadata.d.ts

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

package/lib/components/Gallery/GalleryNew.d.ts

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

package/lib/components/Gallery/GalleryThumbnails.d.ts

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

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

@@ -0,0 +1,5 @@
+export { Gallery } from './Gallery';
+export { GalleryControls } from './GalleryControls';
+export { GalleryThumbnails } from './GalleryThumbnails';
+export { GalleryMetadata } from './GalleryMetadata';
+export type { GalleryProps, GalleryModalProps, GalleryItem, GalleryThumbnailProps, GalleryControlsProps, GalleryMetadataProps, GalleryImageProps, GalleryNavigationDirection, GalleryGestureState, } from './types';

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

@@ -0,0 +1,68 @@
+export interface GalleryItem {
+    id: string;
+    uri: string;
+    title?: string;
+    description?: string;
+    metadata?: {
+        size?: string;
+        dimensions?: {
+            width: number;
+            height: number;
+        };
+        dateCreated?: string;
+        camera?: string;
+        location?: string;
+        [key: string]: any;
+    };
+}
+export interface GalleryProps {
+    images: GalleryItem[];
+    initialIndex?: number;
+    onClose?: () => void;
+    onImageChange?: (index: number, image: GalleryItem) => void;
+    onDownload?: (image: GalleryItem) => void;
+    showMetadata?: boolean;
+    showThumbnails?: boolean;
+    showDownloadButton?: boolean;
+    allowKeyboardNavigation?: boolean;
+    allowSwipeNavigation?: boolean;
+    overlayOpacity?: number;
+    animationDuration?: number;
+}
+export interface GalleryModalProps extends GalleryProps {
+    visible: boolean;
+}
+export interface GalleryThumbnailProps {
+    images: GalleryItem[];
+    currentIndex: number;
+    onThumbnailPress: (index: number) => void;
+    thumbnailSize?: number;
+}
+export interface GalleryImageProps {
+    image: GalleryItem;
+    onLoad?: () => void;
+    onError?: () => void;
+    resizeMode?: 'contain' | 'cover' | 'stretch' | 'center';
+}
+export interface GalleryControlsProps {
+    currentIndex: number;
+    totalImages: number;
+    onPrevious: () => void;
+    onNext: () => void;
+    onClose: () => void;
+    onDownload?: () => void;
+    showDownloadButton?: boolean;
+    image?: GalleryItem;
+}
+export interface GalleryMetadataProps {
+    image: GalleryItem;
+    visible: boolean;
+}
+export type GalleryNavigationDirection = 'previous' | 'next';
+export interface GalleryGestureState {
+    translationX: number;
+    translationY: number;
+    velocityX: number;
+    velocityY: number;
+    scale: number;
+}

package/lib/components/Gauge/Gauge.d.ts

@@ -0,0 +1,41 @@
+import { View } from 'react-native';
+import { GaugeProps, GaugeTrackProps, GaugeRangeProps, GaugeTicksProps, GaugeLabelsProps, GaugeNeedleProps, GaugeCenterProps } from './types';
+export declare const Gauge: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeProps;
+    ref: View;
+}>;
+export declare const GaugeTrack: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeTrackProps;
+    ref: HTMLDivElement;
+}>;
+export declare const GaugeRange: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeRangeProps;
+    ref: HTMLDivElement;
+}>;
+export declare const GaugeTicks: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeTicksProps;
+    ref: HTMLDivElement;
+}>;
+export declare const GaugeLabels: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeLabelsProps;
+    ref: HTMLDivElement;
+}>;
+export declare const GaugeNeedle: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeNeedleProps;
+    ref: HTMLDivElement;
+}>;
+export declare const GaugeCenter: import("../../core/factory").PlatformBlocksComponent<{
+    props: GaugeCenterProps;
+    ref: HTMLDivElement;
+}>;
+declare const GaugeCompound: typeof Gauge & {
+    Track: typeof GaugeTrack;
+    Range: typeof GaugeRange;
+    Ticks: typeof GaugeTicks;
+    Labels: typeof GaugeLabels;
+    Needle: typeof GaugeNeedle;
+    Center: typeof GaugeCenter;
+};
+export { GaugeCompound as GaugeWithCompound };
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,9 @@
+export { Gauge } from './Gauge';
+export { GaugeTrack } from './Gauge';
+export { GaugeRange } from './Gauge';
+export { GaugeTicks } from './Gauge';
+export { GaugeLabels } from './Gauge';
+export { GaugeNeedle } from './Gauge';
+export { GaugeCenter } from './Gauge';
+export * from './types';
+export * from './utils';

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

@@ -0,0 +1,57 @@
+import { GaugeStyleProps } from './types';
+export declare const useGaugeStyles: (props: GaugeStyleProps) => {
+    container: {
+        position: "relative";
+        width: number;
+        height: number;
+        opacity: number;
+    };
+    svg: {
+        width: string;
+        height: string;
+        overflow: "visible";
+    };
+    track: {
+        fill: string;
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: "round";
+    };
+    range: {
+        fill: string;
+        strokeWidth: number;
+        strokeLinecap: "round";
+        transition: string;
+    };
+    needle: {
+        transformOrigin: string;
+        transition: string;
+    };
+    needleLine: {
+        stroke: string;
+        strokeWidth: number;
+        strokeLinecap: "round";
+    };
+    center: {
+        fill: string;
+    };
+    tick: {
+        stroke: string;
+        strokeLinecap: "round";
+    };
+    majorTick: {
+        strokeWidth: number;
+        stroke: string;
+    };
+    minorTick: {
+        strokeWidth: number;
+        stroke: string;
+    };
+    label: {
+        fill: string;
+        fontSize: number;
+        fontFamily: string;
+        textAnchor: "middle";
+        dominantBaseline: "central";
+    };
+};

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

@@ -0,0 +1,210 @@
+import React from 'react';
+import { 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 GaugeRange {
+    /** Starting value for the range */
+    from: number;
+    /** Ending value for the range */
+    to: number;
+    /** Color for this range */
+    color: string;
+    /** Optional label for the range */
+    label?: string;
+}
+export interface GaugeTicks {
+    /** Number of major ticks */
+    major?: number;
+    /** Number of minor ticks */
+    minor?: number;
+    /** Custom major tick positions */
+    majorPositions?: number[];
+    /** Custom minor tick positions */
+    minorPositions?: number[];
+    /** Major tick length */
+    majorLength?: number;
+    /** Minor tick length */
+    minorLength?: number;
+    /** Tick color */
+    color?: string;
+    /** Tick width */
+    width?: number;
+}
+export interface GaugeLabels {
+    /** Whether to show labels */
+    show?: boolean;
+    /** Custom label positions */
+    positions?: number[];
+    /** Label formatter function */
+    formatter?: (value: number) => string;
+    /** Label color */
+    color?: string;
+    /** Label font size */
+    fontSize?: number;
+    /** Label offset from gauge edge */
+    offset?: number;
+}
+export interface GaugeNeedle {
+    /** Needle color */
+    color?: string;
+    /** Needle width/thickness */
+    width?: number;
+    /** Needle length (0-1, percentage of radius) */
+    length?: number;
+    /** Needle shape */
+    shape?: 'line' | 'arrow' | 'triangle';
+    /** Whether to show center dot */
+    showCenter?: boolean;
+    /** Center dot color */
+    centerColor?: string;
+    /** Center dot size */
+    centerSize?: number;
+}
+export interface GaugeProps extends BaseComponentProps {
+    /** Current value */
+    value: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Gauge size */
+    size?: number | string;
+    /** Track thickness */
+    thickness?: number;
+    /** Start angle in degrees (0° = top) */
+    startAngle?: number;
+    /** End angle in degrees */
+    endAngle?: number;
+    /** Rotation offset in degrees (rotates entire gauge) */
+    rotationOffset?: number;
+    /** Main gauge color */
+    color?: ColorValue | string;
+    /** Background track color */
+    backgroundColor?: string;
+    /** Color ranges */
+    ranges?: GaugeRange[];
+    /** Tick configuration */
+    ticks?: GaugeTicks;
+    /** Label configuration */
+    labels?: GaugeLabels;
+    /** Needle configuration */
+    needle?: GaugeNeedle;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Animation easing */
+    animationEasing?: string;
+    /** Whether the gauge is disabled */
+    disabled?: boolean;
+    /** Accessibility label */
+    'aria-label'?: string;
+    /** Children for compound component pattern */
+    children?: React.ReactNode;
+}
+export interface GaugeTrackProps extends BaseComponentProps {
+    /** Track color */
+    color?: string;
+    /** Track thickness */
+    thickness?: number;
+    /** Track opacity */
+    opacity?: number;
+}
+export interface GaugeRangeProps extends BaseComponentProps {
+    /** Range start value */
+    from: number;
+    /** Range end value */
+    to: number;
+    /** Range color */
+    color: string;
+    /** Range thickness (inherits from parent if not specified) */
+    thickness?: number;
+    /** Range label */
+    label?: string;
+}
+export interface GaugeTicksProps extends BaseComponentProps {
+    /** Tick configuration */
+    config?: GaugeTicks;
+    /** Major tick count */
+    major?: number;
+    /** Minor tick count */
+    minor?: number;
+    /** Custom positions */
+    positions?: number[];
+    /** Tick length */
+    length?: number;
+    /** Tick color */
+    color?: string;
+    /** Tick width */
+    width?: number;
+    /** Tick type */
+    type?: 'major' | 'minor';
+}
+export interface GaugeLabelsProps extends BaseComponentProps {
+    /** Labels configuration */
+    config?: GaugeLabels;
+    /** Custom positions */
+    positions?: number[];
+    /** Label formatter */
+    formatter?: (value: number) => string;
+    /** Label color */
+    color?: string;
+    /** Font size */
+    fontSize?: number;
+    /** Offset from edge */
+    offset?: number;
+}
+export interface GaugeNeedleProps extends BaseComponentProps {
+    /** Needle value (angle will be calculated) */
+    value?: number;
+    /** Direct angle override */
+    angle?: number;
+    /** Needle configuration */
+    config?: GaugeNeedle;
+    /** Needle color */
+    color?: string;
+    /** Needle width */
+    width?: number;
+    /** Needle length */
+    length?: number;
+    /** Needle shape */
+    shape?: 'line' | 'arrow' | 'triangle';
+    /** Animation duration */
+    animationDuration?: number;
+}
+export interface GaugeCenterProps extends BaseComponentProps {
+    /** Center dot color */
+    color?: string;
+    /** Center dot size */
+    size?: number;
+    /** Whether to show center */
+    show?: boolean;
+    /** Custom center content */
+    children?: React.ReactNode;
+}
+export interface GaugeContextValue {
+    value: number;
+    min: number;
+    max: number;
+    size: number;
+    thickness: number;
+    startAngle: number;
+    endAngle: number;
+    rotationOffset: number;
+    center: {
+        x: number;
+        y: number;
+    };
+    radius: number;
+    innerRadius: number;
+    disabled: boolean;
+    animationDuration: number;
+    animationEasing: string;
+}
+export interface GaugeStyleProps {
+    size: number;
+    disabled: boolean;
+    thickness: number;
+}

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

@@ -0,0 +1,72 @@
+export declare function calculateArcMetrics(startAngle: number, endAngle: number, radius: number): {
+    totalAngle: number;
+    circumference: number;
+    arcLength: number;
+};
+/**
+ * Convert a value to an angle within the gauge range
+ */
+export declare function valueToAngle(value: number, min: number, max: number, startAngle: number, endAngle: number): number;
+/**
+ * Convert angle from degrees to radians
+ */
+export declare function degreesToRadians(degrees: number): number;
+/**
+ * Convert radians to degrees
+ */
+export declare function radiansToDegrees(radians: number): number;
+/**
+ * Apply rotation offset to an angle
+ */
+export declare function applyRotationOffset(angle: number, offset?: number): number;
+/**
+ * Calculate point on circle given center, radius, and angle
+ * In gauge coordinates: 0° = top (12 o'clock), 90° = right (3 o'clock)
+ */
+export declare function getPointOnCircle(centerX: number, centerY: number, radius: number, angleInDegrees: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Create SVG arc path
+ */
+export declare function createArcPath(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number, largeArcFlag?: boolean): string;
+/**
+ * Generate tick positions for a gauge
+ */
+export declare function generateTickPositions(min: number, max: number, majorCount: number, minorCount?: number): {
+    major: number[];
+    minor: number[];
+};
+/**
+ * Generate label positions for a gauge
+ */
+export declare function generateLabelPositions(min: number, max: number, count: number): number[];
+/**
+ * Clamp a value between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Linear interpolation between two values
+ */
+export declare function lerp(start: number, end: number, t: number): number;
+/**
+ * Get the appropriate color for a value based on ranges
+ */
+export declare function getColorForValue(value: number, ranges: Array<{
+    from: number;
+    to: number;
+    color: string;
+}>, defaultColor: string): string;
+/**
+ * Calculate the SVG viewBox for a gauge
+ */
+export declare function calculateViewBox(size: number, thickness: number, padding?: number): string;
+/**
+ * Normalize angle to 0-360 range
+ */
+export declare function normalizeAngle(angle: number): number;
+/**
+ * Calculate the shortest angle difference between two angles
+ */
+export declare function angleDifference(angle1: number, angle2: number): number;

package/lib/components/GradientText/GradientText.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View } from 'react-native';
+import { GradientTextProps } from './types';
+/**
+ * GradientText Component
+ *
+ * Renders text with a gradient color effect using linear gradients.
+ * Supports animated gradients that can move from left to right.
+ *
+ * **Note**: For native platforms (iOS/Android), gradient animation is currently
+ * supported on web only. Native platforms show static gradients.
+ *
+ * @example
+ * ```tsx
+ * // Basic gradient
+ * <GradientText colors={['#FF0080', '#7928CA']}>
+ *   Hello World
+ * </GradientText>
+ *
+ * // Animated gradient (web only)
+ * <GradientText
+ *   colors={['#FF0080', '#7928CA', '#4F46E5']}
+ *   animate
+ *   animationDuration={3000}
+ * >
+ *   Animated Text
+ * </GradientText>
+ *
+ * // Custom gradient direction
+ * <GradientText
+ *   colors={['red', 'blue']}
+ *   angle={45}
+ * >
+ *   Diagonal Gradient
+ * </GradientText>
+ *
+ * // Controlled gradient position (web only)
+ * <GradientText
+ *   colors={['#FF0080', '#7928CA']}
+ *   position={0.5}
+ * >
+ *   Mid Position
+ * </GradientText>
+ * ```
+ */
+export declare const GradientText: React.ForwardRefExoticComponent<GradientTextProps & React.RefAttributes<View>>;

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

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

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

@@ -0,0 +1,39 @@
+import { TextProps } from '../Text/Text';
+export interface GradientTextProps extends Omit<TextProps, 'color' | 'colorVariant'> {
+    /** Array of colors for the gradient (at least 2 required) */
+    colors: string[];
+    /** Color stops (0-1) for each color. If not provided, colors are evenly distributed */
+    locations?: number[];
+    /** Gradient direction angle in degrees (0 = left to right, 90 = top to bottom, etc.) */
+    angle?: number;
+    /** Start point [x, y] (0-1). Overrides angle if provided */
+    start?: [number, number];
+    /** End point [x, y] (0-1). Overrides angle if provided */
+    end?: [number, number];
+    /** Gradient position offset (0-1). Animates the gradient from start to end of the line */
+    position?: number;
+    /** Whether to animate the gradient position automatically */
+    animate?: boolean;
+    /** Animation duration in milliseconds (default: 2000) */
+    animationDuration?: number;
+    /** Animation loop behavior: 'loop', 'reverse', or 'once' (default: 'loop') */
+    animationLoop?: 'loop' | 'reverse' | 'once';
+    /** Delay before animation starts in milliseconds (default: 0) */
+    animationDelay?: number;
+    /** Custom testID for testing */
+    testID?: string;
+}
+export interface GradientTextStyleProps {
+    /** Array of colors for the gradient (at least 2 required) */
+    colors: string[];
+    /** Color stops (0-1) for each color. If not provided, colors are evenly distributed */
+    locations?: number[];
+    /** Gradient direction angle in degrees (0 = left to right, 90 = top to bottom, etc.) */
+    angle?: number;
+    /** Start point [x, y] (0-1). Overrides angle if provided */
+    start?: [number, number];
+    /** End point [x, y] (0-1). Overrides angle if provided */
+    end?: [number, number];
+    /** Gradient position offset (0-1) */
+    position: number;
+}

package/lib/components/Grid/Grid.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Grid, GridItem } from './Grid';
+export type { GridProps, GridItemProps } from './types';