flexium 0.8.14

package/dist/primitives/layout.d.ts

@@ -0,0 +1,295 @@
+import { F as FNode } from '../renderer-DSLb-FGg.js';
+
+/**
+ * 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 };

package/dist/primitives/layout.js

@@ -0,0 +1,2 @@
+'use strict';var chunk3P6DMEGB_js=require('../chunk-3P6DMEGB.js');require('../chunk-Q7IWDVJ4.js'),require('../chunk-WQFQO5LK.js');Object.defineProperty(exports,"Column",{enumerable:true,get:function(){return chunk3P6DMEGB_js.h}});Object.defineProperty(exports,"Grid",{enumerable:true,get:function(){return chunk3P6DMEGB_js.j}});Object.defineProperty(exports,"Row",{enumerable:true,get:function(){return chunk3P6DMEGB_js.g}});Object.defineProperty(exports,"Spacer",{enumerable:true,get:function(){return chunk3P6DMEGB_js.i}});Object.defineProperty(exports,"Stack",{enumerable:true,get:function(){return chunk3P6DMEGB_js.k}});Object.defineProperty(exports,"getBaseValue",{enumerable:true,get:function(){return chunk3P6DMEGB_js.c}});Object.defineProperty(exports,"mapAlignItems",{enumerable:true,get:function(){return chunk3P6DMEGB_js.f}});Object.defineProperty(exports,"mapJustifyContent",{enumerable:true,get:function(){return chunk3P6DMEGB_js.e}});Object.defineProperty(exports,"mergeStyles",{enumerable:true,get:function(){return chunk3P6DMEGB_js.b}});Object.defineProperty(exports,"stylePropsToCSS",{enumerable:true,get:function(){return chunk3P6DMEGB_js.a}});Object.defineProperty(exports,"toCSSValue",{enumerable:true,get:function(){return chunk3P6DMEGB_js.d}});//# sourceMappingURL=layout.js.map
+//# sourceMappingURL=layout.js.map

package/dist/primitives/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"layout.js"}

package/dist/primitives/layout.mjs

@@ -0,0 +1,2 @@
+export{h as Column,j as Grid,g as Row,i as Spacer,k as Stack,c as getBaseValue,f as mapAlignItems,e as mapJustifyContent,b as mergeStyles,a as stylePropsToCSS,d as toCSSValue}from'../chunk-R5CS7UZG.mjs';import'../chunk-WVEJT7HD.mjs';import'../chunk-KNF5ERPK.mjs';//# sourceMappingURL=layout.mjs.map
+//# sourceMappingURL=layout.mjs.map

package/dist/primitives/layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"layout.mjs"}

package/dist/primitives/motion.d.cts

@@ -0,0 +1,230 @@
+import { A as AnimatableProps } from '../Motion-BrOAJzgH.cjs';
+export { M as MotionController, a as MotionProps, S as SpringConfig, c as cleanupMotionState } from '../Motion-BrOAJzgH.cjs';
+import { F as FNode } from '../renderer-DSLb-FGg.cjs';
+
+/**
+ * Preset animation types
+ */
+type TransitionPreset = 'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'scale' | 'scale-fade';
+/**
+ * Transition timing configuration
+ */
+interface TransitionTiming {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+}
+/**
+ * Transition component props
+ */
+interface TransitionProps {
+    /** Use a preset animation */
+    preset?: TransitionPreset;
+    /** Custom enter animation (from state) */
+    enter?: AnimatableProps;
+    /** Custom enter animation (to state) */
+    enterTo?: AnimatableProps;
+    /** Custom exit animation (to state) */
+    exit?: AnimatableProps;
+    /** Enter timing */
+    enterTiming?: TransitionTiming;
+    /** Exit timing */
+    exitTiming?: TransitionTiming;
+    /** Callback when enter animation starts */
+    onEnterStart?: () => void;
+    /** Callback when enter animation completes */
+    onEnterComplete?: () => void;
+    /** Callback when exit animation starts */
+    onExitStart?: () => void;
+    /** Callback when exit animation completes */
+    onExitComplete?: () => void;
+    /** Children to animate */
+    children: any;
+}
+/**
+ * Transition component for animated enter/exit
+ *
+ * @example
+ * {() => visible() && (
+ *   <Transition preset="fade">
+ *     <div>Content appears with fade</div>
+ *   </Transition>
+ * )}
+ *
+ * @example
+ * <Transition
+ *   enter={{ opacity: 0, y: 50 }}
+ *   enterTo={{ opacity: 1, y: 0 }}
+ *   exit={{ opacity: 0, y: -50 }}
+ *   enterTiming={{ duration: 300, easing: 'ease-out' }}
+ *   exitTiming={{ duration: 200, easing: 'ease-in' }}
+ * >
+ *   <div>Custom animated content</div>
+ * </Transition>
+ */
+declare function Transition(props: TransitionProps): FNode;
+/**
+ * TransitionGroup props
+ */
+interface TransitionGroupProps {
+    /** Delay between each child animation (stagger effect) */
+    stagger?: number;
+    /** Children (should contain Transition components) */
+    children: any;
+}
+/**
+ * TransitionGroup component for staggered animations
+ *
+ * @example
+ * <TransitionGroup stagger={50}>
+ *   <For each={items}>
+ *     {(item) => (
+ *       <Transition preset="slide-up">
+ *         <div>{item.name}</div>
+ *       </Transition>
+ *     )}
+ *   </For>
+ * </TransitionGroup>
+ */
+declare function TransitionGroup(props: TransitionGroupProps): () => any;
+/**
+ * Preset transition configurations
+ */
+declare const transitions: {
+    fade: {
+        preset: "fade";
+    };
+    slideUp: {
+        preset: "slide-up";
+    };
+    slideDown: {
+        preset: "slide-down";
+    };
+    slideLeft: {
+        preset: "slide-left";
+    };
+    slideRight: {
+        preset: "slide-right";
+    };
+    scale: {
+        preset: "scale";
+    };
+    scaleFade: {
+        preset: "scale-fade";
+    };
+    modal: {
+        enter: {
+            opacity: number;
+            scale: number;
+            y: number;
+        };
+        enterTo: {
+            opacity: number;
+            scale: number;
+            y: number;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            y: number;
+        };
+        enterTiming: {
+            duration: number;
+            easing: string;
+        };
+        exitTiming: {
+            duration: number;
+            easing: string;
+        };
+    };
+    dropdown: {
+        enter: {
+            opacity: number;
+            y: number;
+            scale: number;
+        };
+        enterTo: {
+            opacity: number;
+            y: number;
+            scale: number;
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            scale: number;
+        };
+        enterTiming: {
+            duration: number;
+            easing: string;
+        };
+        exitTiming: {
+            duration: number;
+            easing: string;
+        };
+    };
+    tooltip: {
+        enter: {
+            opacity: number;
+            scale: number;
+        };
+        enterTo: {
+            opacity: number;
+            scale: number;
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+        };
+        enterTiming: {
+            duration: number;
+            easing: string;
+        };
+        exitTiming: {
+            duration: number;
+            easing: string;
+        };
+    };
+    notification: {
+        enter: {
+            opacity: number;
+            x: number;
+        };
+        enterTo: {
+            opacity: number;
+            x: number;
+        };
+        exit: {
+            opacity: number;
+            x: number;
+        };
+        enterTiming: {
+            duration: number;
+            easing: string;
+        };
+        exitTiming: {
+            duration: number;
+            easing: string;
+        };
+    };
+    page: {
+        enter: {
+            opacity: number;
+        };
+        enterTo: {
+            opacity: number;
+        };
+        exit: {
+            opacity: number;
+        };
+        enterTiming: {
+            duration: number;
+            easing: string;
+        };
+        exitTiming: {
+            duration: number;
+            easing: string;
+        };
+    };
+};
+
+export { AnimatableProps, Transition, TransitionGroup, type TransitionGroupProps, type TransitionPreset, type TransitionProps, type TransitionTiming, transitions };