@platform-blocks/ui 0.1.1

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

@@ -0,0 +1,145 @@
+import { ViewStyle, ImageStyle } from 'react-native';
+import type { SpacingProps } from '../../core/utils';
+export type VideoSource = {
+    /** Video URL (mp4, webm, etc.) */
+    url?: string;
+    /** YouTube video ID or URL */
+    youtube?: string;
+    /** File buffer (for React Native) */
+    buffer?: ArrayBuffer | string;
+    /** MIME type for buffer */
+    type?: string;
+};
+export type VideoQuality = 'auto' | 'small' | 'medium' | 'large' | 'hd720' | 'hd1080' | 'highres';
+export type VideoPlaybackRate = 0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2;
+export interface VideoControls {
+    /** Show/hide play button */
+    play?: boolean;
+    /** Show/hide pause button */
+    pause?: boolean;
+    /** Show/hide progress bar */
+    progress?: boolean;
+    /** Show/hide time display */
+    time?: boolean;
+    /** Show/hide volume control */
+    volume?: boolean;
+    /** Show/hide fullscreen toggle */
+    fullscreen?: boolean;
+    /** Show/hide playback speed control */
+    playbackRate?: boolean;
+    /** Show/hide quality selector (YouTube) */
+    quality?: boolean;
+    /** Auto-hide controls after inactivity */
+    autoHide?: boolean;
+    /** Auto-hide timeout in milliseconds */
+    autoHideTimeout?: number;
+}
+export interface VideoState {
+    /** Current playback time in seconds */
+    currentTime: number;
+    /** Total duration in seconds */
+    duration: number;
+    /** Is video playing */
+    playing: boolean;
+    /** Is video loading */
+    loading: boolean;
+    /** Is video muted */
+    muted: boolean;
+    /** Volume level (0-1) */
+    volume: number;
+    /** Current playback rate */
+    playbackRate: VideoPlaybackRate;
+    /** Is video in fullscreen */
+    fullscreen: boolean;
+    /** Video quality (YouTube) */
+    quality: VideoQuality;
+    /** Error state */
+    error: string | null;
+    /** Is video buffering */
+    buffering: boolean;
+}
+export interface VideoTimelineEvent {
+    /** Event ID */
+    id: string;
+    /** Time in seconds when event should trigger */
+    time: number;
+    /** Event type */
+    type: 'marker' | 'chapter' | 'annotation' | 'cue' | 'custom';
+    /** Event data */
+    data?: any;
+    /** Callback function */
+    callback?: (event: VideoTimelineEvent, state: VideoState) => void;
+}
+export interface VideoProps extends SpacingProps {
+    /** Video source configuration */
+    source: VideoSource;
+    /** Display and sizing */
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number;
+    poster?: string;
+    /** Playback configuration */
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    playbackRate?: VideoPlaybackRate;
+    quality?: VideoQuality;
+    /** Controls configuration */
+    controls?: boolean | VideoControls;
+    /** Timeline events for synchronization */
+    timeline?: VideoTimelineEvent[];
+    /** YouTube specific options */
+    youtubeOptions?: {
+        /** Start time in seconds */
+        start?: number;
+        /** End time in seconds */
+        end?: number;
+        /** Hide YouTube branding */
+        modestbranding?: boolean;
+        /** Disable related videos */
+        rel?: boolean;
+        /** Show video annotations */
+        iv_load_policy?: number;
+    };
+    /** Event handlers */
+    onPlay?: (state: VideoState) => void;
+    onPause?: (state: VideoState) => void;
+    onSeek?: (time: number, state: VideoState) => void;
+    onTimeUpdate?: (state: VideoState) => void;
+    onDurationChange?: (duration: number) => void;
+    onVolumeChange?: (volume: number) => void;
+    onPlaybackRateChange?: (rate: VideoPlaybackRate) => void;
+    onQualityChange?: (quality: VideoQuality) => void;
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    onError?: (error: string) => void;
+    onLoad?: (state: VideoState) => void;
+    onLoadStart?: () => void;
+    onBuffer?: (buffering: boolean) => void;
+    onTimelineEvent?: (event: VideoTimelineEvent, state: VideoState) => void;
+    /** Styling */
+    style?: ViewStyle;
+    videoStyle?: ImageStyle;
+    controlsStyle?: ViewStyle;
+    /** Accessibility */
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export interface VideoRef {
+    /** Play the video */
+    play: () => void;
+    /** Pause the video */
+    pause: () => void;
+    /** Seek to specific time */
+    seek: (time: number) => void;
+    /** Set volume (0-1) */
+    setVolume: (volume: number) => void;
+    /** Set playback rate */
+    setPlaybackRate: (rate: VideoPlaybackRate) => void;
+    /** Toggle fullscreen */
+    toggleFullscreen: () => void;
+    /** Get current state */
+    getState: () => VideoState;
+    /** Get video element (web) */
+    getVideoElement: () => HTMLVideoElement | null;
+}

package/lib/components/Waveform/Waveform.d.ts

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

package/lib/components/Waveform/WaveformSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface WaveformSkeletonProps {
+    width?: number;
+    height?: number;
+    fullWidth?: boolean;
+    barsCount?: number;
+}
+export declare const WaveformSkeleton: React.FC<WaveformSkeletonProps>;
+export {};

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

@@ -0,0 +1,4 @@
+export { Waveform } from './Waveform';
+export type { WaveformProps, WaveformMarker, PerformanceMetrics } from './types';
+export { WaveformSkeleton } from './WaveformSkeleton';
+export * from './utils';

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

@@ -0,0 +1,53 @@
+import { WaveformStyleProps } from './types';
+import { PlatformBlocksTheme } from '../../core/theme/types';
+export declare const useWaveformStyles: (props: WaveformStyleProps & {
+    theme: PlatformBlocksTheme;
+}) => {
+    bar: {
+        borderRadius?: number | undefined;
+        backgroundColor: string;
+    };
+    barContainer: {
+        alignItems: "center";
+        height: "100%";
+        justifyContent: "center";
+    };
+    container: {
+        cursor?: any;
+        backgroundColor: string;
+        height: number;
+        overflow: "hidden";
+        position: "relative";
+        width: number;
+    };
+    gradientOverlay: {
+        bottom: number;
+        left: number;
+        pointerEvents: "none";
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    lineWaveform: {
+        bottom: number;
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+    progressBar: {
+        backgroundColor: string;
+    };
+    reflection: {
+        opacity: number;
+        transform: {
+            scaleY: number;
+        }[];
+    };
+    waveformContainer: {
+        alignItems: "center";
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "center";
+    };
+};

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

@@ -0,0 +1,124 @@
+import { SizeValue } from '../../core/theme/types';
+import type { ViewProps } from 'react-native';
+export interface WaveformProps extends Omit<ViewProps, 'children'> {
+    /** Array of peak values (normalized between -1 and 1) */
+    peaks: number[];
+    /** Width of the waveform */
+    width?: number;
+    /** Height of the waveform */
+    height?: number;
+    /** Color of the waveform */
+    color?: string;
+    /** Visual variant of the waveform */
+    variant?: 'bars' | 'line' | 'rounded' | 'gradient';
+    /** Width of individual bars (for bar variants) */
+    barWidth?: number;
+    /** Gap between bars (for bar variants) */
+    barGap?: number;
+    /** Stroke width for line variant */
+    strokeWidth?: number;
+    /** Colors for gradient variant */
+    gradientColors?: string[];
+    /** Progress value (0-1) to show playback position */
+    progress?: number;
+    /** Color for the progress indicator */
+    progressColor?: string;
+    /** Whether the waveform is interactive (clickable for seeking) */
+    interactive?: boolean;
+    /** Callback fired when user clicks/seeks to a position */
+    onSeek?: (position: number) => void;
+    /** Callback fired when user starts dragging */
+    onDragStart?: (position: number) => void;
+    /** Callback fired when user is dragging */
+    onDrag?: (position: number) => void;
+    /** Callback fired when user ends dragging */
+    onDragEnd?: (position: number) => void;
+    /** Accessibility label for the waveform */
+    accessibilityLabel?: string;
+    /** Accessibility hint for interactive waveforms */
+    accessibilityHint?: string;
+    /** Minimum height for bars (prevents invisible bars) */
+    minBarHeight?: number;
+    /** Whether to normalize waveform heights so the tallest bar uses full height */
+    normalize?: boolean;
+    /** Whether the waveform should take the full width of its container */
+    fullWidth?: boolean;
+    /** Maximum number of bars to render (for performance with large datasets) */
+    maxVisibleBars?: number;
+    /** Whether to show a vertical progress line indicator */
+    showProgressLine?: boolean;
+    /** Style configuration for the progress line */
+    progressLineStyle?: {
+        color?: string;
+        width?: number;
+        opacity?: number;
+    };
+    /** Whether to show time stamps along the waveform */
+    showTimeStamps?: boolean;
+    /** Duration in seconds for time stamp calculation */
+    duration?: number;
+    /** Time stamp interval in seconds */
+    timeStampInterval?: number;
+    /** Whether the waveform is in a loading state */
+    loading?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Loading progress (0-1) for progressive loading */
+    loadingProgress?: number;
+    /** Selected time range [start, end] in normalized coordinates (0-1) */
+    selection?: [number, number];
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: [number, number]) => void;
+    /** Zoom level (1 = normal, 2 = 2x zoom, etc.) */
+    zoomLevel?: number;
+    /** Zoom center position (0-1) */
+    zoomCenter?: number;
+    /** Callback when zoom changes */
+    onZoomChange?: (zoomLevel: number, center: number) => void;
+    /** Whether to enable smooth animations */
+    enableAnimations?: boolean;
+    /** Whether to show RMS (average) levels alongside peaks */
+    showRMS?: boolean;
+    /** RMS data array (should match peaks length) */
+    rmsData?: number[];
+    /** Custom markers to display on the waveform */
+    markers?: WaveformMarker[];
+    /** Enable performance monitoring */
+    enablePerformanceMonitoring?: boolean;
+    /** Callback for performance metrics */
+    onPerformanceMetrics?: (metrics: PerformanceMetrics) => void;
+}
+export interface WaveformMarker {
+    /** Position on waveform (0-1) */
+    position: number;
+    /** Marker label */
+    label?: string;
+    /** Marker color */
+    color?: string;
+    /** Marker type */
+    type?: 'line' | 'flag' | 'dot';
+    /** Click handler */
+    onPress?: () => void;
+}
+export interface PerformanceMetrics {
+    /** Render time in milliseconds */
+    renderTime: number;
+    /** Number of elements rendered */
+    elementsRendered: number;
+    /** Memory usage estimate */
+    memoryUsage: number;
+    /** FPS during interactions */
+    averageFPS: number;
+}
+export interface WaveformStyleProps {
+    width: number;
+    height: number;
+    color: string;
+    backgroundColor?: string;
+    barWidth: number;
+    barGap: number;
+    variant: WaveformProps['variant'];
+    size: SizeValue;
+    interactive: boolean;
+    minBarHeight: number;
+}

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

@@ -0,0 +1,95 @@
+/**
+ * Utilities for working with waveform data
+ */
+export interface AudioAnalysisOptions {
+    /** Sample rate for analysis */
+    sampleRate?: number;
+    /** Window size for FFT analysis */
+    windowSize?: number;
+    /** Overlap between windows */
+    overlap?: number;
+}
+export interface WaveformDataOptions {
+    /** Number of peaks to generate */
+    length: number;
+    /** Frequency of the primary wave */
+    frequency?: number;
+    /** Amplitude modulation frequency */
+    modulation?: number;
+    /** Add noise to the signal */
+    noise?: number;
+    /** Audio duration in seconds (for realistic data) */
+    duration?: number;
+}
+/**
+ * Generate realistic-looking waveform test data
+ */
+export declare const generateWaveformData: (options: WaveformDataOptions) => {
+    peaks: number[];
+    rms: number[];
+};
+/**
+ * Normalize waveform data to a specific range
+ */
+export declare const normalizeWaveform: (peaks: number[], targetMin?: number, targetMax?: number) => number[];
+/**
+ * Downsample waveform data for performance
+ */
+export declare const downsampleWaveform: (peaks: number[], targetLength: number) => number[];
+/**
+ * Calculate RMS values from peak data
+ */
+export declare const calculateRMS: (peaks: number[], windowSize?: number) => number[];
+/**
+ * Find peaks in waveform data (useful for marker placement)
+ */
+export declare const findPeaks: (peaks: number[], threshold?: number, minDistance?: number) => number[];
+/**
+ * Convert audio buffer to waveform data
+ * (Note: This would typically be used with Web Audio API)
+ */
+export declare const audioBufferToWaveform: (audioBuffer: AudioBuffer, targetLength?: number) => {
+    peaks: number[];
+    rms: number[];
+};
+/**
+ * Generate time-based markers for common audio structures
+ */
+export declare const generateAudioMarkers: (duration: number, structure?: "song" | "podcast" | "speech") => ({
+    position: number;
+    label: string;
+    type: "flag";
+} | {
+    position: number;
+    label: string;
+    type: "line";
+} | {
+    position: number;
+    label: string;
+    type: "dot";
+})[];
+/**
+ * Create test data presets for demos
+ */
+export declare const createTestPresets: () => {
+    musicTrack: {
+        peaks: number[];
+        rms: number[];
+    };
+    podcast: {
+        peaks: number[];
+        rms: number[];
+    };
+    speech: {
+        peaks: number[];
+        rms: number[];
+    };
+    quietAudio: {
+        peaks: number[];
+        rms: number[];
+    };
+    largDataset: {
+        peaks: number[];
+        rms: number[];
+    };
+};

package/lib/components/YearPicker/YearPicker.d.ts

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

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

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

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

@@ -0,0 +1,24 @@
+import type { SizeValue } from '../../core/theme/types';
+import type { ResponsiveProp } from '../../core/theme/breakpoints';
+export interface YearPickerProps {
+    /** Currently selected date */
+    value?: Date | null;
+    /** Called when a year is selected */
+    onChange?: (date: Date | null) => void;
+    /** Decade anchor that should be displayed */
+    decade?: number;
+    /** Called when the visible decade changes */
+    onDecadeChange?: (decade: number) => void;
+    /** Minimum selectable date (inclusive) */
+    minDate?: Date;
+    /** Maximum selectable date (inclusive) */
+    maxDate?: Date;
+    /** Typography size token */
+    size?: SizeValue;
+    /** Responsive override for number of years per row */
+    yearsPerRow?: ResponsiveProp<number>;
+    /** Hide navigation header when embedding the picker */
+    hideHeader?: boolean;
+    /** Total number of years to render (defaults to 20) */
+    totalYears?: number;
+}

package/lib/components/YearPickerInput/YearPickerInput.d.ts

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

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

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

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

@@ -0,0 +1,26 @@
+import type { BaseInputProps } from '../Input/types';
+import type { YearPickerProps } from '../YearPicker/types';
+export interface YearPickerInputProps extends Omit<BaseInputProps, 'value' | 'onChangeText'> {
+    /** Controlled value for the selected year */
+    value?: Date | null;
+    /** Default year when uncontrolled */
+    defaultValue?: Date | null;
+    /** Called when the year selection changes */
+    onChange?: (value: Date | null) => void;
+    /** Custom formatter for the input value */
+    formatValue?: (value: Date) => string;
+    /** Placeholder text when no year is selected */
+    placeholder?: string;
+    /** Show a clear button when a year is selected */
+    clearable?: boolean;
+    /** Close the picker after selecting a year */
+    closeOnSelect?: boolean;
+    /** Additional props forwarded to YearPicker (except value) */
+    yearPickerProps?: Partial<Omit<YearPickerProps, 'value'>>;
+    /** Dialog title text */
+    modalTitle?: string;
+    /** Called when the picker dialog opens */
+    onOpen?: () => void;
+    /** Called when the picker dialog closes */
+    onClose?: () => void;
+}

package/lib/components/_internal/FieldHeader.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { InputStyleProps } from '../Input/types';
+export interface FieldHeaderProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    required?: boolean;
+    withAsterisk?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    size?: InputStyleProps['size'];
+    /** Extra spacing below the block (default auto based on presence) */
+    marginBottom?: number;
+    /** Optional test id */
+    testID?: string;
+}
+/**
+ * Internal utility component to standardize label + description block across field components.
+ * Renders label, required asterisk, and muted description text directly beneath.
+ */
+export declare const FieldHeader: React.FC<FieldHeaderProps>;
+export default FieldHeader;