flexium/dist/utils-CaoZsuqU.d.ts

A lightweight, signals-based UI framework with cross-platform renderers

import { S as Signal } from './canvas-BarP3tEC.js';

/**
 * Core Flexium types
 */
/**
 * Virtual Node - internal representation of UI elements
 */
interface VNode {
    type: string;
    props: Record<string, any>;
    children: VNode[];
}

/**
 * Cross-platform Primitives Type Definitions
 *
 * These types work across web (DOM) and React Native
 */

/**
 * Common style properties that work on both web and React Native
 * Based on Flexbox layout model
 */
interface CommonStyle {
    display?: 'flex' | 'none';
    flex?: number;
    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
    alignSelf?: 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch';
    gap?: number;
    padding?: number;
    paddingTop?: number;
    paddingRight?: number;
    paddingBottom?: number;
    paddingLeft?: number;
    paddingHorizontal?: number;
    paddingVertical?: number;
    margin?: number;
    marginTop?: number;
    marginRight?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginHorizontal?: number;
    marginVertical?: number;
    width?: number | string;
    height?: number | string;
    minWidth?: number;
    maxWidth?: number;
    minHeight?: number;
    maxHeight?: number;
    backgroundColor?: string;
    borderRadius?: number;
    borderTopLeftRadius?: number;
    borderTopRightRadius?: number;
    borderBottomLeftRadius?: number;
    borderBottomRightRadius?: number;
    opacity?: number;
    borderWidth?: number;
    borderColor?: string;
    borderTopWidth?: number;
    borderRightWidth?: number;
    borderBottomWidth?: number;
    borderLeftWidth?: number;
    position?: 'relative' | 'absolute';
    top?: number;
    right?: number;
    bottom?: number;
    left?: number;
    zIndex?: number;
    transform?: string;
}
/**
 * Text-specific style properties
 */
interface TextStyle extends CommonStyle {
    color?: string;
    fontSize?: number;
    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | number;
    fontFamily?: string;
    fontStyle?: 'normal' | 'italic';
    textAlign?: 'left' | 'center' | 'right' | 'justify';
    textDecoration?: 'none' | 'underline' | 'line-through';
    lineHeight?: number;
    letterSpacing?: number;
}
/**
 * View component props
 * Universal container component
 */
interface ViewProps {
    children?: any;
    style?: CommonStyle;
    onClick?: () => void;
    onPress?: () => void;
    class?: string;
    className?: string;
    id?: string;
}
/**
 * Text component props
 * Universal text display
 */
interface TextProps {
    children?: any;
    style?: TextStyle;
    onClick?: () => void;
    onPress?: () => void;
    class?: string;
    className?: string;
}
/**
 * Image component props
 */
interface ImageProps {
    src: string;
    alt?: string;
    width?: number;
    height?: number;
    style?: CommonStyle;
    onLoad?: () => void;
    onError?: () => void;
}
/**
 * Pressable component props
 * Universal touchable/clickable element
 */
interface PressableProps {
    children?: any;
    onPress: () => void;
    onPressIn?: () => void;
    onPressOut?: () => void;
    disabled?: boolean;
    style?: CommonStyle;
    activeOpacity?: number;
}
/**
 * ScrollView component props
 */
interface ScrollViewProps {
    children?: any;
    style?: CommonStyle;
    horizontal?: boolean;
    showsHorizontalScrollIndicator?: boolean;
    showsVerticalScrollIndicator?: boolean;
}
/**
 * Canvas container props
 */
interface CanvasProps {
    width: number;
    height: number;
    children?: any;
    style?: CommonStyle;
    id?: string;
}
/**
 * Rectangle drawing props
 */
interface RectProps {
    x: number | Signal<number>;
    y: number | Signal<number>;
    width: number | Signal<number>;
    height: number | Signal<number>;
    fill?: string | Signal<string>;
    stroke?: string | Signal<string>;
    strokeWidth?: number | Signal<number>;
    opacity?: number | Signal<number>;
}
/**
 * Circle drawing props
 */
interface CircleProps {
    x: number | Signal<number>;
    y: number | Signal<number>;
    radius: number | Signal<number>;
    fill?: string | Signal<string>;
    stroke?: string | Signal<string>;
    strokeWidth?: number | Signal<number>;
    opacity?: number | Signal<number>;
}
/**
 * Path drawing props
 */
interface PathProps {
    d: string | Signal<string>;
    fill?: string | Signal<string>;
    stroke?: string | Signal<string>;
    strokeWidth?: number | Signal<number>;
    opacity?: number | Signal<number>;
}
/**
 * Canvas text drawing props
 */
interface CanvasTextProps {
    x: number | Signal<number>;
    y: number | Signal<number>;
    text: string | Signal<string>;
    fill?: string | Signal<string>;
    fontSize?: number | Signal<number>;
    fontFamily?: string;
    fontWeight?: 'normal' | 'bold' | number;
    textAlign?: 'left' | 'center' | 'right';
    textBaseline?: 'top' | 'middle' | 'bottom' | 'alphabetic';
}
/**
 * Line drawing props
 */
interface LineProps {
    x1: number | Signal<number>;
    y1: number | Signal<number>;
    x2: number | Signal<number>;
    y2: number | Signal<number>;
    stroke?: string | Signal<string>;
    strokeWidth?: number | Signal<number>;
    opacity?: number | Signal<number>;
}
/**
 * Arc drawing props
 */
interface ArcProps {
    x: number | Signal<number>;
    y: number | Signal<number>;
    radius: number | Signal<number>;
    startAngle: number | Signal<number>;
    endAngle: number | Signal<number>;
    counterclockwise?: boolean;
    fill?: string | Signal<string>;
    stroke?: string | Signal<string>;
    strokeWidth?: number | Signal<number>;
    opacity?: number | Signal<number>;
}

/**
 * View - Universal container component
 *
 * Maps to:
 * - Web: <div>
 * - React Native: <View>
 *
 * @example
 * ```tsx
 * <View style={{ flex: 1, padding: 20 }}>
 *   <Text>Hello World</Text>
 * </View>
 * ```
 */

declare function View(props: ViewProps): VNode;

/**
 * Text - Universal text display component
 *
 * Maps to:
 * - Web: <span>
 * - React Native: <Text>
 *
 * @example
 * ```tsx
 * <Text style={{ color: 'blue', fontSize: 16 }}>
 *   Hello World
 * </Text>
 * ```
 */

declare function Text(props: TextProps): VNode;

/**
 * Image - Universal image component
 *
 * Maps to:
 * - Web: <img>
 * - React Native: <Image>
 *
 * @example
 * ```tsx
 * <Image
 *   src="/logo.png"
 *   alt="Logo"
 *   width={100}
 *   height={100}
 * />
 * ```
 */

declare function Image(props: ImageProps): VNode;

/**
 * Pressable - Universal touchable/clickable component
 *
 * Maps to:
 * - Web: <button>
 * - React Native: <Pressable>
 *
 * @example
 * ```tsx
 * <Pressable
 *   onPress={() => console.log('pressed')}
 *   style={{ padding: 10 }}
 * >
 *   <Text>Click Me</Text>
 * </Pressable>
 * ```
 */

declare function Pressable(props: PressableProps): VNode;

/**
 * ScrollView - Universal scrollable container
 *
 * Maps to:
 * - Web: <div> with overflow
 * - React Native: <ScrollView>
 *
 * @example
 * ```tsx
 * <ScrollView style={{ height: 300 }}>
 *   <View>...</View>
 *   <View>...</View>
 * </ScrollView>
 * ```
 */

declare function ScrollView(props: ScrollViewProps): VNode;

/**
 * Canvas - Declarative canvas container with JSX drawing
 *
 * Supports Signal-based reactive rendering
 *
 * @example
 * ```tsx
 * const x = signal(50)
 *
 * <Canvas width={300} height={200}>
 *   <Rect x={x} y={50} width={100} height={50} fill="blue" />
 *   <Circle x={150} y={100} radius={30} fill="red" />
 * </Canvas>
 * ```
 */

declare function Canvas(props: CanvasProps): VNode;

/**
 * Rect - Canvas rectangle primitive
 *
 * @example
 * ```tsx
 * <Rect x={10} y={10} width={100} height={50} fill="blue" />
 * ```
 */

declare function Rect(props: RectProps): VNode;

/**
 * Circle - Canvas circle primitive
 *
 * @example
 * ```tsx
 * <Circle x={100} y={100} radius={50} fill="red" />
 * ```
 */

declare function Circle(props: CircleProps): VNode;

/**
 * Path - Canvas path primitive
 *
 * @example
 * ```tsx
 * <Path d="M 10 10 L 100 100" stroke="black" strokeWidth={2} />
 * ```
 */

declare function Path(props: PathProps): VNode;

/**
 * CanvasText - Canvas text primitive
 *
 * @example
 * ```tsx
 * <CanvasText x={50} y={50} text="Hello Canvas" fontSize={20} fill="black" />
 * ```
 */

declare function CanvasText(props: CanvasTextProps): VNode;

/**
 * Line - Canvas line primitive
 *
 * @example
 * ```tsx
 * <Line x1={10} y1={10} x2={100} y2={100} stroke="black" strokeWidth={2} />
 * ```
 */

declare function Line(props: LineProps): VNode;

/**
 * Arc - Canvas arc primitive
 *
 * @example
 * ```tsx
 * <Arc x={100} y={100} radius={50} startAngle={0} endAngle={Math.PI} fill="green" />
 * ```
 */

declare function Arc(props: ArcProps): VNode;

/**
 * Primitive utilities
 */

/**
 * Normalize CommonStyle to CSS properties
 */
declare function normalizeStyle(style?: CommonStyle | TextStyle): Record<string, any>;

export { Arc as A, Canvas as C, Image as I, Line as L, Pressable as P, Rect as R, ScrollView as S, Text as T, View as V, Circle as a, Path as b, CanvasText as c, type ViewProps as d, type TextProps as e, type ImageProps as f, type PressableProps as g, type ScrollViewProps as h, type CommonStyle as i, type TextStyle as j, type RectProps as k, type CircleProps as l, type PathProps as m, normalizeStyle as n, type CanvasTextProps as o, type LineProps as p, type ArcProps as q, type CanvasProps as r };