flexium 0.8.14

package/dist/portal-DBwz7gD0.d.ts

@@ -0,0 +1,206 @@
+import { R as Renderer, E as EventHandler, F as FNode } from './renderer-DSLb-FGg.js';
+import { S as Signal, C as Computed } from './signal-mNtlF8-v.js';
+
+/**
+ * DOM Renderer implementation
+ */
+declare class DOMRenderer implements Renderer {
+    createNode(type: string, props: Record<string, any>): HTMLElement | SVGElement;
+    updateNode(node: HTMLElement | SVGElement, oldProps: Record<string, any>, newProps: Record<string, any>): void;
+    appendChild(parent: Node, child: Node): void;
+    insertBefore(parent: Node, child: Node, beforeChild: Node | null): void;
+    nextSibling(node: Node): Node | null;
+    removeChild(parent: Node, child: Node): void;
+    createTextNode(text: string): Text;
+    updateTextNode(node: Text, text: string): void;
+    addEventListener(node: Node, event: string, handler: EventHandler): void;
+    removeEventListener(node: Node, event: string, _handler: EventHandler): void;
+}
+/**
+ * Default DOM renderer instance
+ */
+declare const domRenderer: DOMRenderer;
+
+/**
+ * JSX Factory Function (f)
+ *
+ * This module provides the JSX factory function for creating Flexium nodes.
+ * It's used by the JSX transpiler to convert JSX syntax into function calls.
+ *
+ * Usage in tsconfig.json:
+ * {
+ *   "compilerOptions": {
+ *     "jsx": "react",
+ *     "jsxFactory": "f",
+ *     "jsxFragmentFactory": "Fragment"
+ *   }
+ * }
+ */
+
+/**
+ * JSX factory function for Flexium
+ * Creates a Flexium node from JSX syntax
+ *
+ * @param type - Element type (string for built-in, function for components)
+ * @param props - Element properties
+ * @param children - Child elements
+ * @returns Flexium node
+ */
+declare function f(type: string | Function, props: Record<string, any> | null, ...children: any[]): FNode;
+/**
+ * Fragment component
+ * Renders children without a wrapper element
+ */
+declare function Fragment(props: {
+    children?: any[];
+}): FNode;
+
+/**
+ * DOM Render Function
+ *
+ * This module provides the main render function for mounting components to the DOM.
+ * It includes simple reconciliation logic for mounting and unmounting components.
+ *
+ * Note: This module uses reactive rendering internally via mountReactive.
+ * For root-level rendering with cleanup support, use createReactiveRoot.
+ */
+
+/**
+ * Render a component to a DOM container with automatic reactivity
+ *
+ * This function uses reactive rendering by default, which means:
+ * - Signals passed as children automatically update the DOM
+ * - Signals in props automatically update element properties
+ * - Component functions automatically re-render when signals change
+ *
+ * @param vnode - Flexium node to render
+ * @returns The rendered DOM node
+ *
+ * @example
+ * const count = signal(0);
+ * render(f('div', {}, [count]), document.body);
+ * // The div will automatically update when count changes
+ */
+/**
+ * Mounts a Flexium node to a container
+ * @param node - Flexium node to render
+ * @param container - DOM element to mount to
+ */
+declare function render(node: FNode | string | number | null | undefined | Function, container: HTMLElement): Node | null;
+/**
+ * Create a root for rendering with automatic reactivity
+ *
+ * This creates a root that supports fine-grained reactive updates.
+ * Signals are automatically tracked and only the affected DOM nodes are updated.
+ *
+ * @param container - DOM element to render into
+ * @returns Root object with render and unmount methods
+ *
+ * @example
+ * const root = createRoot(document.body);
+ * const count = signal(0);
+ * root.render(f('div', {}, [count]));
+ * // Later: count.value++ will automatically update the DOM
+ */
+declare function createRoot(container: HTMLElement): {
+    render(node: FNode): void;
+    unmount(): void;
+};
+
+/**
+ * Getter function that returns the current value (signal-like)
+ */
+type ItemsGetter<T> = () => T[];
+/**
+ * Fixed-height item configuration
+ */
+interface FixedSizeConfig {
+    mode: 'fixed';
+    itemHeight: number;
+}
+/**
+ * Variable-height item configuration
+ */
+interface VariableSizeConfig {
+    mode: 'variable';
+    estimatedItemHeight: number;
+    getItemHeight?: (index: number, item: unknown) => number;
+}
+type SizeConfig = FixedSizeConfig | VariableSizeConfig;
+/**
+ * List component marker
+ */
+interface ListComponent<T> {
+    [key: symbol]: true;
+    each: ItemsGetter<T>;
+    renderItem: (item: T, index: () => number) => FNode;
+    virtual: boolean;
+    height?: number | string;
+    width?: number | string;
+    itemSize?: number | SizeConfig;
+    overscan: number;
+    getKey?: (item: T, index: number) => string | number;
+    onScroll?: (scrollTop: number) => void;
+    onVisibleRangeChange?: (startIndex: number, endIndex: number) => void;
+    class?: string;
+    style?: Record<string, string | number>;
+}
+
+/**
+ * Reactive DOM Rendering
+ *
+ * Integrates the signal system with the DOM renderer to enable fine-grained
+ * reactive updates. Only the specific DOM nodes that depend on changed signals
+ * will be updated, without re-rendering the entire component tree.
+ */
+
+/**
+ * Mount a virtual node reactively to the DOM.
+ *
+ * This is the core rendering function that handles all node types:
+ * - FNodes (both built-in elements and function components)
+ * - Strings and numbers (text nodes)
+ * - Signals and computed values (reactive children)
+ * - StateValues from the state() API
+ * - ListComponents
+ * - Arrays and fragments
+ *
+ * Reactive values are automatically tracked and DOM updates occur
+ * only when the specific values change (fine-grained reactivity).
+ *
+ * @param vnode - The virtual node to mount
+ * @param container - Optional parent node to append to
+ * @returns The created DOM node, or null for empty/boolean values
+ *
+ * @example
+ * ```tsx
+ * // Mount a simple element
+ * const node = mountReactive(<div>Hello</div>, document.body)
+ *
+ * // Mount a reactive signal
+ * const count = signal(0)
+ * mountReactive(() => <span>{count.value}</span>, container)
+ * ```
+ */
+declare function mountReactive(node: FNode | string | number | boolean | Signal<any> | Computed<any> | null | undefined | Function | any[] | ListComponent<any>, container?: Node): Node | null;
+declare function createReactiveRoot(container: HTMLElement): {
+    render(node: FNode): void;
+    unmount(): void;
+};
+
+interface PortalProps {
+    mount?: HTMLElement;
+    children: any;
+}
+/**
+ * <Portal> component renders its children into a different part of the DOM.
+ * Useful for modals, tooltips, etc.
+ *
+ * @example
+ * <Portal mount={document.body}>
+ *   <div class="modal">...</div>
+ * </Portal>
+ */
+declare function Portal(props: PortalProps): Comment | null;
+
+export { DOMRenderer as D, Fragment as F, type ListComponent as L, Portal as P, createReactiveRoot as a, createRoot as c, domRenderer as d, f, mountReactive as m, render as r };

package/dist/primitives/layout.d.cts

@@ -0,0 +1,295 @@
+import { F as FNode } from '../renderer-DSLb-FGg.cjs';
+
+/**
+ * Layout Primitives Types
+ */
+/**
+ * Responsive value type supporting base and breakpoint-specific values
+ */
+type ResponsiveValue<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+};
+/**
+ * CSS Properties type
+ */
+interface CSSProperties {
+    [key: string]: string | number | undefined;
+}
+type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+type JustifyContent = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'flex-start' | 'flex-end';
+type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
+type Position = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+type Display = 'flex' | 'none' | 'block' | 'inline-block' | 'inline' | 'grid' | 'initial';
+type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+type TextAlign = 'left' | 'center' | 'right' | 'justify';
+type FontStyle = 'normal' | 'italic' | 'oblique';
+type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number | string;
+type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
+type TextDecoration = 'none' | 'underline' | 'overline' | 'line-through' | 'blink';
+type WhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
+type TextOverflow = 'clip' | 'ellipsis';
+type WordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word';
+type VerticalAlign = 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | string | number;
+type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | string;
+type Visibility = 'visible' | 'hidden' | 'collapse';
+type BoxSizing = 'content-box' | 'border-box';
+type PointerEvents = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
+interface BaseStyleProps {
+    display?: ResponsiveValue<Display>;
+    flex?: ResponsiveValue<number | string>;
+    flexGrow?: ResponsiveValue<number>;
+    flexShrink?: ResponsiveValue<number>;
+    flexBasis?: ResponsiveValue<string>;
+    flexDirection?: ResponsiveValue<FlexDirection>;
+    justifyContent?: ResponsiveValue<JustifyContent>;
+    alignItems?: ResponsiveValue<AlignItems>;
+    alignSelf?: ResponsiveValue<AlignItems>;
+    gap?: ResponsiveValue<number | string>;
+    flexWrap?: ResponsiveValue<FlexWrap>;
+    padding?: ResponsiveValue<number | string>;
+    paddingTop?: ResponsiveValue<number | string>;
+    paddingRight?: ResponsiveValue<number | string>;
+    paddingBottom?: ResponsiveValue<number | string>;
+    paddingLeft?: ResponsiveValue<number | string>;
+    margin?: ResponsiveValue<number | string>;
+    marginTop?: ResponsiveValue<number | string>;
+    marginRight?: ResponsiveValue<number | string>;
+    marginBottom?: ResponsiveValue<number | string>;
+    marginLeft?: ResponsiveValue<number | string>;
+    width?: ResponsiveValue<number | string>;
+    height?: ResponsiveValue<number | string>;
+    minWidth?: ResponsiveValue<number | string>;
+    maxWidth?: ResponsiveValue<number | string>;
+    minHeight?: ResponsiveValue<number | string>;
+    maxHeight?: ResponsiveValue<number | string>;
+    backgroundColor?: ResponsiveValue<string>;
+    background?: ResponsiveValue<string>;
+    borderRadius?: ResponsiveValue<number | string>;
+    borderWidth?: ResponsiveValue<number | string>;
+    borderColor?: ResponsiveValue<string>;
+    borderStyle?: ResponsiveValue<string>;
+    border?: ResponsiveValue<string>;
+    opacity?: ResponsiveValue<number>;
+    overflow?: ResponsiveValue<Overflow>;
+    boxShadow?: ResponsiveValue<string>;
+    position?: ResponsiveValue<Position>;
+    top?: ResponsiveValue<number | string>;
+    right?: ResponsiveValue<number | string>;
+    bottom?: ResponsiveValue<number | string>;
+    left?: ResponsiveValue<number | string>;
+    zIndex?: ResponsiveValue<number>;
+    color?: ResponsiveValue<string>;
+    fontSize?: ResponsiveValue<number | string>;
+    fontWeight?: ResponsiveValue<FontWeight>;
+    fontFamily?: ResponsiveValue<string>;
+    fontStyle?: ResponsiveValue<FontStyle>;
+    textAlign?: ResponsiveValue<TextAlign>;
+    lineHeight?: ResponsiveValue<number | string>;
+    letterSpacing?: ResponsiveValue<number | string>;
+    textTransform?: ResponsiveValue<TextTransform>;
+    textDecoration?: ResponsiveValue<TextDecoration>;
+    whiteSpace?: ResponsiveValue<WhiteSpace>;
+    textOverflow?: ResponsiveValue<TextOverflow>;
+    wordBreak?: ResponsiveValue<WordBreak>;
+    verticalAlign?: ResponsiveValue<VerticalAlign>;
+    cursor?: ResponsiveValue<Cursor>;
+    visibility?: ResponsiveValue<Visibility>;
+    boxSizing?: ResponsiveValue<BoxSizing>;
+    pointerEvents?: ResponsiveValue<PointerEvents>;
+}
+interface BaseComponentProps extends BaseStyleProps {
+    id?: string;
+    /** CSS class name (unified API) */
+    class?: string;
+    style?: CSSProperties;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    tabIndex?: number;
+    /** Press/click handler (unified API for web and mobile) */
+    onPress?: (event: MouseEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+    children?: any;
+}
+declare function stylePropsToCSS(props: BaseStyleProps): CSSProperties;
+declare function mergeStyles(baseStyles: CSSProperties, userStyles?: CSSProperties): CSSProperties;
+declare function getBaseValue<T>(responsiveValue: ResponsiveValue<T> | undefined): T | undefined;
+declare function toCSSValue(value: number | string | undefined): string | number | undefined;
+/** Map justify shorthand to CSS value */
+declare function mapJustifyContent(value: JustifyContent): string;
+/** Map align shorthand to CSS value */
+declare function mapAlignItems(value: AlignItems): string;
+
+/**
+ * Props for Row component - horizontal flex container
+ */
+interface RowProps extends BaseComponentProps {
+    /** Align items on cross axis (vertical) */
+    align?: ResponsiveValue<AlignItems>;
+    /** Justify items on main axis (horizontal) */
+    justify?: ResponsiveValue<JustifyContent>;
+    /** Enable wrapping of items */
+    wrap?: ResponsiveValue<boolean>;
+    /** Reverse the direction */
+    reverse?: boolean;
+    /** HTML element to render */
+    as?: string;
+}
+/**
+ * Row - Horizontal flex container
+ *
+ * A primitive layout component for arranging children in a horizontal row
+ * using flexbox. Supports alignment, justification, and responsive props.
+ *
+ * @example
+ * ```tsx
+ * <Row gap={16} align="center" justify="between">
+ *   <div>Left</div>
+ *   <div>Right</div>
+ * </Row>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Responsive gap
+ * <Row gap={{ base: 8, md: 16, lg: 24 }}>
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ * </Row>
+ * ```
+ */
+declare function Row(props: RowProps): FNode;
+
+/**
+ * Props for Column component - vertical flex container
+ */
+interface ColumnProps extends BaseComponentProps {
+    /** Align items on cross axis (horizontal) */
+    align?: ResponsiveValue<AlignItems>;
+    /** Justify items on main axis (vertical) */
+    justify?: ResponsiveValue<JustifyContent>;
+    /** Enable wrapping of items */
+    wrap?: ResponsiveValue<boolean>;
+    /** Reverse the direction */
+    reverse?: boolean;
+    /** HTML element to render */
+    as?: string;
+}
+/**
+ * Column - Vertical flex container
+ *
+ * A primitive layout component for arranging children in a vertical column
+ * using flexbox. Supports alignment, justification, and responsive props.
+ *
+ * @example
+ * ```tsx
+ * <Column gap={8} padding={16}>
+ *   <div>Top</div>
+ *   <div>Bottom</div>
+ * </Column>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Center content vertically and horizontally
+ * <Column align="center" justify="center" height="100vh">
+ *   <h1>Centered Content</h1>
+ * </Column>
+ * ```
+ */
+declare function Column(props: ColumnProps): FNode;
+
+interface SpacerProps extends BaseComponentProps {
+    /** Size on main axis (width for Row, height for Column) */
+    size?: ResponsiveValue<number | string>;
+    /** Explicit width */
+    width?: ResponsiveValue<number | string>;
+    /** Explicit height */
+    height?: ResponsiveValue<number | string>;
+    /** Flex grow factor (defaults to 1 if no size specified) */
+    flex?: ResponsiveValue<number>;
+    /** HTML element to render */
+    as?: string;
+}
+/**
+ * Spacer - Flexible spacing component
+ *
+ * Used to create space between elements or push elements apart.
+ * By default, it grows to fill available space using flex: 1.
+ * Can be used in both horizontal (Row) and vertical (Column) layouts.
+ *
+ * @example
+ * ```tsx
+ * <Row>
+ *   <Text>Left</Text>
+ *   <Spacer />
+ *   <Text>Right</Text>
+ * </Row>
+ * ```
+ */
+declare function Spacer(props: SpacerProps): FNode;
+
+interface GridProps extends BaseComponentProps {
+    /** Number of columns or column template */
+    cols?: ResponsiveValue<number | string>;
+    /** Number of rows or row template */
+    rows?: ResponsiveValue<number | string>;
+    /** Column gap */
+    columnGap?: ResponsiveValue<number | string>;
+    /** Row gap */
+    rowGap?: ResponsiveValue<number | string>;
+    /** Grid auto flow */
+    flow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    /** Auto columns size */
+    autoColumns?: ResponsiveValue<string>;
+    /** Auto rows size */
+    autoRows?: ResponsiveValue<string>;
+    as?: string;
+}
+/**
+ * Grid - 2D layout container
+ *
+ * A primitive layout component based on CSS Grid.
+ * Supports responsive columns, rows, gaps, and all standard grid properties.
+ *
+ * @example
+ * ```tsx
+ * // 3-column grid
+ * <Grid cols={3} gap={16}>
+ *   <div />
+ *   <div />
+ *   <div />
+ * </Grid>
+ * ```
+ */
+declare function Grid(props: GridProps): FNode;
+
+interface StackProps extends BaseComponentProps {
+    align?: ResponsiveValue<AlignItems>;
+    justify?: ResponsiveValue<JustifyContent>;
+    as?: string;
+}
+/**
+ * Stack - Layered positioning container
+ *
+ * A primitive layout component for layering children on top of each other.
+ * Uses CSS Grid for perfect overlap.
+ *
+ * @example
+ * ```tsx
+ * <Stack>
+ *   <Image src="bg.jpg" />
+ *   <Text>Overlay</Text>
+ * </Stack>
+ * ```
+ */
+declare function Stack(props: StackProps): FNode;
+
+export { type AlignItems, type BaseComponentProps, type BaseStyleProps, type BoxSizing, type CSSProperties, Column, type ColumnProps, type BaseStyleProps as CommonStyle, type Cursor, type Display, type FlexDirection, type FlexWrap, type FontStyle, type FontWeight, Grid, type GridProps, type JustifyContent, type Overflow, type PointerEvents, type Position, type ResponsiveValue, Row, type RowProps, Spacer, type SpacerProps, Stack, type StackProps, type TextAlign, type TextDecoration, type TextOverflow, type TextTransform, type VerticalAlign, type Visibility, type WhiteSpace, type WordBreak, getBaseValue, mapAlignItems, mapJustifyContent, mergeStyles, stylePropsToCSS, toCSSValue };