flexium 0.14.1 → 0.14.3

package/dist/chunk-RUYGSYEV.mjs

@@ -0,0 +1,2 @@
+function o(e,n,r){let{children:t,...i}=n||{};return {type:e,props:i,children:Array.isArray(t)?t:t!=null?[t]:[],key:r}}function a(e,n,r){return o(e,n,r)}function d(e,n,r){return o(e,n,r)}function p(e){return e.children}export{o as a,a as b,d as c,p as d};//# sourceMappingURL=chunk-RUYGSYEV.mjs.map
+//# sourceMappingURL=chunk-RUYGSYEV.mjs.map

package/dist/chunk-RUYGSYEV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/jsx-runtime.ts"],"names":["jsx","type","props","key","children","otherProps","jsxs","jsxDEV","Fragment"],"mappings":"AAEO,SAASA,CAAAA,CAAIC,CAAAA,CAAWC,CAAAA,CAAYC,CAAAA,CAAkB,CACzD,GAAM,CAAE,QAAA,CAAAC,CAAAA,CAAU,GAAGC,CAAW,CAAA,CAAIH,CAAAA,EAAS,EAAC,CAC9C,OAAO,CACH,IAAA,CAAAD,CAAAA,CACA,KAAA,CAAOI,CAAAA,CACP,QAAA,CAAU,MAAM,OAAA,CAAQD,CAAQ,CAAA,CAAIA,CAAAA,CAAYA,GAAY,IAAA,CAAO,CAACA,CAAQ,CAAA,CAAI,EAAC,CACjF,GAAA,CAAAD,CACJ,CACJ,CAEO,SAASG,CAAAA,CAAKL,CAAAA,CAAWC,EAAYC,CAAAA,CAAkB,CAC1D,OAAOH,CAAAA,CAAIC,CAAAA,CAAMC,CAAAA,CAAOC,CAAG,CAC/B,CAGO,SAASI,CAAAA,CAAON,CAAAA,CAAWC,CAAAA,CAAYC,CAAAA,CAAkB,CAC5D,OAAOH,CAAAA,CAAIC,EAAMC,CAAAA,CAAOC,CAAG,CAC/B,CAEO,SAASK,CAAAA,CAASN,CAAAA,CAAwB,CAC7C,OAAOA,EAAM,QACjB","file":"chunk-RUYGSYEV.mjs","sourcesContent":["import type { FNode, FNodeChild } from './dom/types'\n\nexport function jsx(type: any, props: any, key?: any): FNode {\n    const { children, ...otherProps } = props || {}\n    return {\n        type,\n        props: otherProps,\n        children: Array.isArray(children) ? children : (children != null ? [children] : []),\n        key\n    }\n}\n\nexport function jsxs(type: any, props: any, key?: any): FNode {\n    return jsx(type, props, key)\n}\n\n// Development version (same as jsx for our purposes)\nexport function jsxDEV(type: any, props: any, key?: any): FNode {\n    return jsx(type, props, key)\n}\n\nexport function Fragment(props: any): FNodeChild {\n    return props.children\n}\n\nexport namespace JSX {\n    export interface IntrinsicElements {\n        [elemName: string]: any\n    }\n    export type Element = FNode | FNodeChild\n    export interface ElementChildrenAttribute {\n        children: {}\n    }\n}\n"]}

package/dist/chunk-TFXBDC6C.js

@@ -0,0 +1,2 @@
+'use strict';function o(e,n,r){let{children:t,...i}=n||{};return {type:e,props:i,children:Array.isArray(t)?t:t!=null?[t]:[],key:r}}function a(e,n,r){return o(e,n,r)}function d(e,n,r){return o(e,n,r)}function p(e){return e.children}exports.a=o;exports.b=a;exports.c=d;exports.d=p;//# sourceMappingURL=chunk-TFXBDC6C.js.map
+//# sourceMappingURL=chunk-TFXBDC6C.js.map

package/dist/chunk-TFXBDC6C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/jsx-runtime.ts"],"names":["jsx","type","props","key","children","otherProps","jsxs","jsxDEV","Fragment"],"mappings":"aAEO,SAASA,CAAAA,CAAIC,CAAAA,CAAWC,CAAAA,CAAYC,CAAAA,CAAkB,CACzD,GAAM,CAAE,QAAA,CAAAC,CAAAA,CAAU,GAAGC,CAAW,CAAA,CAAIH,CAAAA,EAAS,EAAC,CAC9C,OAAO,CACH,IAAA,CAAAD,CAAAA,CACA,KAAA,CAAOI,CAAAA,CACP,QAAA,CAAU,MAAM,OAAA,CAAQD,CAAQ,CAAA,CAAIA,CAAAA,CAAYA,GAAY,IAAA,CAAO,CAACA,CAAQ,CAAA,CAAI,EAAC,CACjF,GAAA,CAAAD,CACJ,CACJ,CAEO,SAASG,CAAAA,CAAKL,CAAAA,CAAWC,EAAYC,CAAAA,CAAkB,CAC1D,OAAOH,CAAAA,CAAIC,CAAAA,CAAMC,CAAAA,CAAOC,CAAG,CAC/B,CAGO,SAASI,CAAAA,CAAON,CAAAA,CAAWC,CAAAA,CAAYC,CAAAA,CAAkB,CAC5D,OAAOH,CAAAA,CAAIC,EAAMC,CAAAA,CAAOC,CAAG,CAC/B,CAEO,SAASK,CAAAA,CAASN,CAAAA,CAAwB,CAC7C,OAAOA,EAAM,QACjB","file":"chunk-TFXBDC6C.js","sourcesContent":["import type { FNode, FNodeChild } from './dom/types'\n\nexport function jsx(type: any, props: any, key?: any): FNode {\n    const { children, ...otherProps } = props || {}\n    return {\n        type,\n        props: otherProps,\n        children: Array.isArray(children) ? children : (children != null ? [children] : []),\n        key\n    }\n}\n\nexport function jsxs(type: any, props: any, key?: any): FNode {\n    return jsx(type, props, key)\n}\n\n// Development version (same as jsx for our purposes)\nexport function jsxDEV(type: any, props: any, key?: any): FNode {\n    return jsx(type, props, key)\n}\n\nexport function Fragment(props: any): FNodeChild {\n    return props.children\n}\n\nexport namespace JSX {\n    export interface IntrinsicElements {\n        [elemName: string]: any\n    }\n    export type Element = FNode | FNodeChild\n    export interface ElementChildrenAttribute {\n        children: {}\n    }\n}\n"]}

package/dist/css.d.cts

@@ -0,0 +1,300 @@
+import { F as FNode } from './types-DH8L3A5z.cjs';
+
+/**
+ * CSS value types
+ */
+type CSSValue = string | number;
+/**
+ * Standard CSS properties with support for numbers (auto-converted to px)
+ */
+interface CSSProperties {
+    display?: CSSValue;
+    position?: CSSValue;
+    top?: CSSValue;
+    right?: CSSValue;
+    bottom?: CSSValue;
+    left?: CSSValue;
+    zIndex?: CSSValue;
+    flex?: CSSValue;
+    flexDirection?: CSSValue;
+    flexWrap?: CSSValue;
+    flexGrow?: CSSValue;
+    flexShrink?: CSSValue;
+    flexBasis?: CSSValue;
+    justifyContent?: CSSValue;
+    alignItems?: CSSValue;
+    alignContent?: CSSValue;
+    alignSelf?: CSSValue;
+    gap?: CSSValue;
+    rowGap?: CSSValue;
+    columnGap?: CSSValue;
+    grid?: CSSValue;
+    gridTemplate?: CSSValue;
+    gridTemplateColumns?: CSSValue;
+    gridTemplateRows?: CSSValue;
+    gridColumn?: CSSValue;
+    gridRow?: CSSValue;
+    gridArea?: CSSValue;
+    width?: CSSValue;
+    height?: CSSValue;
+    minWidth?: CSSValue;
+    minHeight?: CSSValue;
+    maxWidth?: CSSValue;
+    maxHeight?: CSSValue;
+    padding?: CSSValue;
+    paddingTop?: CSSValue;
+    paddingRight?: CSSValue;
+    paddingBottom?: CSSValue;
+    paddingLeft?: CSSValue;
+    margin?: CSSValue;
+    marginTop?: CSSValue;
+    marginRight?: CSSValue;
+    marginBottom?: CSSValue;
+    marginLeft?: CSSValue;
+    border?: CSSValue;
+    borderWidth?: CSSValue;
+    borderStyle?: CSSValue;
+    borderColor?: CSSValue;
+    borderTop?: CSSValue;
+    borderRight?: CSSValue;
+    borderBottom?: CSSValue;
+    borderLeft?: CSSValue;
+    borderRadius?: CSSValue;
+    borderTopLeftRadius?: CSSValue;
+    borderTopRightRadius?: CSSValue;
+    borderBottomLeftRadius?: CSSValue;
+    borderBottomRightRadius?: CSSValue;
+    color?: CSSValue;
+    backgroundColor?: CSSValue;
+    background?: CSSValue;
+    backgroundImage?: CSSValue;
+    backgroundSize?: CSSValue;
+    backgroundPosition?: CSSValue;
+    backgroundRepeat?: CSSValue;
+    opacity?: CSSValue;
+    font?: CSSValue;
+    fontFamily?: CSSValue;
+    fontSize?: CSSValue;
+    fontWeight?: CSSValue;
+    fontStyle?: CSSValue;
+    lineHeight?: CSSValue;
+    letterSpacing?: CSSValue;
+    textAlign?: CSSValue;
+    textDecoration?: CSSValue;
+    textTransform?: CSSValue;
+    whiteSpace?: CSSValue;
+    wordBreak?: CSSValue;
+    overflow?: CSSValue;
+    overflowX?: CSSValue;
+    overflowY?: CSSValue;
+    textOverflow?: CSSValue;
+    boxShadow?: CSSValue;
+    textShadow?: CSSValue;
+    outline?: CSSValue;
+    outlineWidth?: CSSValue;
+    outlineStyle?: CSSValue;
+    outlineColor?: CSSValue;
+    outlineOffset?: CSSValue;
+    visibility?: CSSValue;
+    cursor?: CSSValue;
+    pointerEvents?: CSSValue;
+    userSelect?: CSSValue;
+    transform?: CSSValue;
+    transformOrigin?: CSSValue;
+    transition?: CSSValue;
+    transitionProperty?: CSSValue;
+    transitionDuration?: CSSValue;
+    transitionTimingFunction?: CSSValue;
+    transitionDelay?: CSSValue;
+    animation?: CSSValue;
+    animationName?: CSSValue;
+    animationDuration?: CSSValue;
+    animationTimingFunction?: CSSValue;
+    animationDelay?: CSSValue;
+    animationIterationCount?: CSSValue;
+    animationDirection?: CSSValue;
+    animationFillMode?: CSSValue;
+    content?: CSSValue;
+    objectFit?: CSSValue;
+    objectPosition?: CSSValue;
+    filter?: CSSValue;
+    backdropFilter?: CSSValue;
+    mixBlendMode?: CSSValue;
+    isolation?: CSSValue;
+    contain?: CSSValue;
+    aspectRatio?: CSSValue;
+    [key: string]: CSSValue | StyleObject | undefined;
+}
+/**
+ * Style object with support for nested selectors and at-rules
+ */
+interface StyleObject extends CSSProperties {
+    /** Nested selectors: &:hover, &::before, & > div */
+    [key: `&${string}`]: StyleObject;
+    /** At-rules: @media, @supports, @container */
+    [key: `@${string}`]: StyleObject;
+}
+/**
+ * Keyframes definition
+ */
+interface KeyframeDefinition {
+    [key: string]: CSSProperties;
+}
+/**
+ * Variant configuration for styled()
+ */
+type VariantConfig = {
+    [variantName: string]: {
+        [variantValue: string]: StyleObject;
+    };
+};
+/**
+ * Default variants type
+ */
+type DefaultVariants<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+};
+/**
+ * Styled component configuration
+ */
+interface StyledConfig<V extends VariantConfig = VariantConfig> {
+    base: StyleObject;
+    variants?: V;
+    defaultVariants?: DefaultVariants<V>;
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K];
+    } & {
+        css: StyleObject;
+    }>;
+}
+/**
+ * Props for styled components
+ */
+type StyledProps<V extends VariantConfig = VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+} & {
+    children?: any;
+    className?: string;
+    [key: string]: any;
+};
+
+/**
+ * Create a CSS class from a style object
+ *
+ * @example
+ * ```tsx
+ * const buttonClass = css({
+ *   padding: '8px 16px',
+ *   backgroundColor: 'blue',
+ *   color: 'white',
+ *   '&:hover': {
+ *     backgroundColor: 'darkblue'
+ *   }
+ * })
+ *
+ * <button className={buttonClass}>Click me</button>
+ * ```
+ */
+declare function css(styles: StyleObject): string;
+/**
+ * Combine multiple class names, filtering out falsy values
+ *
+ * @example
+ * ```tsx
+ * const className = cx(
+ *   baseClass,
+ *   isActive && activeClass,
+ *   variant === 'primary' && primaryClass
+ * )
+ * ```
+ */
+declare function cx(...classes: (string | boolean | null | undefined)[]): string;
+
+type HTMLTag = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'menu' | 'meta' | 'meter' | 'nav' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'script' | 'search' | 'section' | 'select' | 'slot' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr';
+/**
+ * Create a styled component with variant support
+ *
+ * @example
+ * ```tsx
+ * const Button = styled('button', {
+ *   base: {
+ *     padding: '8px 16px',
+ *     border: 'none',
+ *     borderRadius: 4,
+ *     cursor: 'pointer'
+ *   },
+ *   variants: {
+ *     variant: {
+ *       primary: { backgroundColor: 'blue', color: 'white' },
+ *       secondary: { backgroundColor: 'gray', color: 'black' }
+ *     },
+ *     size: {
+ *       sm: { padding: '4px 8px', fontSize: 12 },
+ *       md: { padding: '8px 16px', fontSize: 14 },
+ *       lg: { padding: '12px 24px', fontSize: 16 }
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * })
+ *
+ * // Usage
+ * <Button variant="secondary" size="lg">Click me</Button>
+ * ```
+ */
+declare function styled<T extends HTMLTag, V extends VariantConfig = Record<string, never>>(tag: T, config: StyledConfig<V>): StyledComponent<T, V>;
+type StyledComponent<T extends HTMLTag, V extends VariantConfig> = {
+    (props: StyledComponentProps<V>): FNode;
+    displayName: string;
+};
+type StyledComponentProps<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+} & {
+    children?: any;
+    className?: string;
+    [key: string]: any;
+};
+
+/**
+ * Create a keyframes animation
+ *
+ * @example
+ * ```tsx
+ * const fadeIn = keyframes({
+ *   from: { opacity: 0 },
+ *   to: { opacity: 1 }
+ * })
+ *
+ * const slideIn = keyframes({
+ *   '0%': { transform: 'translateX(-100%)' },
+ *   '100%': { transform: 'translateX(0)' }
+ * })
+ *
+ * const className = css({
+ *   animation: `${fadeIn} 0.3s ease-in-out`
+ * })
+ * ```
+ */
+declare function keyframes(definition: KeyframeDefinition): string;
+
+/**
+ * Get all collected styles for SSR
+ */
+declare function getStyles(): string;
+/**
+ * Get styles as a style tag for SSR
+ */
+declare function getStyleTag(): string;
+/**
+ * Reset collected styles and cache (for SSR between requests or testing)
+ */
+declare function resetStyles(): void;
+/**
+ * Hydrate styles on the client
+ * Call this after SSR to sync the cache with server-rendered styles
+ */
+declare function hydrateStyles(): void;
+
+export { type CSSProperties, type CSSValue, type DefaultVariants, type KeyframeDefinition, type StyleObject, type StyledConfig, type StyledProps, type VariantConfig, css, cx, getStyleTag, getStyles, hydrateStyles, keyframes, resetStyles, styled };

package/dist/css.d.ts

@@ -0,0 +1,300 @@
+import { F as FNode } from './types-DH8L3A5z.js';
+
+/**
+ * CSS value types
+ */
+type CSSValue = string | number;
+/**
+ * Standard CSS properties with support for numbers (auto-converted to px)
+ */
+interface CSSProperties {
+    display?: CSSValue;
+    position?: CSSValue;
+    top?: CSSValue;
+    right?: CSSValue;
+    bottom?: CSSValue;
+    left?: CSSValue;
+    zIndex?: CSSValue;
+    flex?: CSSValue;
+    flexDirection?: CSSValue;
+    flexWrap?: CSSValue;
+    flexGrow?: CSSValue;
+    flexShrink?: CSSValue;
+    flexBasis?: CSSValue;
+    justifyContent?: CSSValue;
+    alignItems?: CSSValue;
+    alignContent?: CSSValue;
+    alignSelf?: CSSValue;
+    gap?: CSSValue;
+    rowGap?: CSSValue;
+    columnGap?: CSSValue;
+    grid?: CSSValue;
+    gridTemplate?: CSSValue;
+    gridTemplateColumns?: CSSValue;
+    gridTemplateRows?: CSSValue;
+    gridColumn?: CSSValue;
+    gridRow?: CSSValue;
+    gridArea?: CSSValue;
+    width?: CSSValue;
+    height?: CSSValue;
+    minWidth?: CSSValue;
+    minHeight?: CSSValue;
+    maxWidth?: CSSValue;
+    maxHeight?: CSSValue;
+    padding?: CSSValue;
+    paddingTop?: CSSValue;
+    paddingRight?: CSSValue;
+    paddingBottom?: CSSValue;
+    paddingLeft?: CSSValue;
+    margin?: CSSValue;
+    marginTop?: CSSValue;
+    marginRight?: CSSValue;
+    marginBottom?: CSSValue;
+    marginLeft?: CSSValue;
+    border?: CSSValue;
+    borderWidth?: CSSValue;
+    borderStyle?: CSSValue;
+    borderColor?: CSSValue;
+    borderTop?: CSSValue;
+    borderRight?: CSSValue;
+    borderBottom?: CSSValue;
+    borderLeft?: CSSValue;
+    borderRadius?: CSSValue;
+    borderTopLeftRadius?: CSSValue;
+    borderTopRightRadius?: CSSValue;
+    borderBottomLeftRadius?: CSSValue;
+    borderBottomRightRadius?: CSSValue;
+    color?: CSSValue;
+    backgroundColor?: CSSValue;
+    background?: CSSValue;
+    backgroundImage?: CSSValue;
+    backgroundSize?: CSSValue;
+    backgroundPosition?: CSSValue;
+    backgroundRepeat?: CSSValue;
+    opacity?: CSSValue;
+    font?: CSSValue;
+    fontFamily?: CSSValue;
+    fontSize?: CSSValue;
+    fontWeight?: CSSValue;
+    fontStyle?: CSSValue;
+    lineHeight?: CSSValue;
+    letterSpacing?: CSSValue;
+    textAlign?: CSSValue;
+    textDecoration?: CSSValue;
+    textTransform?: CSSValue;
+    whiteSpace?: CSSValue;
+    wordBreak?: CSSValue;
+    overflow?: CSSValue;
+    overflowX?: CSSValue;
+    overflowY?: CSSValue;
+    textOverflow?: CSSValue;
+    boxShadow?: CSSValue;
+    textShadow?: CSSValue;
+    outline?: CSSValue;
+    outlineWidth?: CSSValue;
+    outlineStyle?: CSSValue;
+    outlineColor?: CSSValue;
+    outlineOffset?: CSSValue;
+    visibility?: CSSValue;
+    cursor?: CSSValue;
+    pointerEvents?: CSSValue;
+    userSelect?: CSSValue;
+    transform?: CSSValue;
+    transformOrigin?: CSSValue;
+    transition?: CSSValue;
+    transitionProperty?: CSSValue;
+    transitionDuration?: CSSValue;
+    transitionTimingFunction?: CSSValue;
+    transitionDelay?: CSSValue;
+    animation?: CSSValue;
+    animationName?: CSSValue;
+    animationDuration?: CSSValue;
+    animationTimingFunction?: CSSValue;
+    animationDelay?: CSSValue;
+    animationIterationCount?: CSSValue;
+    animationDirection?: CSSValue;
+    animationFillMode?: CSSValue;
+    content?: CSSValue;
+    objectFit?: CSSValue;
+    objectPosition?: CSSValue;
+    filter?: CSSValue;
+    backdropFilter?: CSSValue;
+    mixBlendMode?: CSSValue;
+    isolation?: CSSValue;
+    contain?: CSSValue;
+    aspectRatio?: CSSValue;
+    [key: string]: CSSValue | StyleObject | undefined;
+}
+/**
+ * Style object with support for nested selectors and at-rules
+ */
+interface StyleObject extends CSSProperties {
+    /** Nested selectors: &:hover, &::before, & > div */
+    [key: `&${string}`]: StyleObject;
+    /** At-rules: @media, @supports, @container */
+    [key: `@${string}`]: StyleObject;
+}
+/**
+ * Keyframes definition
+ */
+interface KeyframeDefinition {
+    [key: string]: CSSProperties;
+}
+/**
+ * Variant configuration for styled()
+ */
+type VariantConfig = {
+    [variantName: string]: {
+        [variantValue: string]: StyleObject;
+    };
+};
+/**
+ * Default variants type
+ */
+type DefaultVariants<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+};
+/**
+ * Styled component configuration
+ */
+interface StyledConfig<V extends VariantConfig = VariantConfig> {
+    base: StyleObject;
+    variants?: V;
+    defaultVariants?: DefaultVariants<V>;
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K];
+    } & {
+        css: StyleObject;
+    }>;
+}
+/**
+ * Props for styled components
+ */
+type StyledProps<V extends VariantConfig = VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+} & {
+    children?: any;
+    className?: string;
+    [key: string]: any;
+};
+
+/**
+ * Create a CSS class from a style object
+ *
+ * @example
+ * ```tsx
+ * const buttonClass = css({
+ *   padding: '8px 16px',
+ *   backgroundColor: 'blue',
+ *   color: 'white',
+ *   '&:hover': {
+ *     backgroundColor: 'darkblue'
+ *   }
+ * })
+ *
+ * <button className={buttonClass}>Click me</button>
+ * ```
+ */
+declare function css(styles: StyleObject): string;
+/**
+ * Combine multiple class names, filtering out falsy values
+ *
+ * @example
+ * ```tsx
+ * const className = cx(
+ *   baseClass,
+ *   isActive && activeClass,
+ *   variant === 'primary' && primaryClass
+ * )
+ * ```
+ */
+declare function cx(...classes: (string | boolean | null | undefined)[]): string;
+
+type HTMLTag = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | 'cite' | 'code' | 'col' | 'colgroup' | 'data' | 'datalist' | 'dd' | 'del' | 'details' | 'dfn' | 'dialog' | 'div' | 'dl' | 'dt' | 'em' | 'embed' | 'fieldset' | 'figcaption' | 'figure' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'head' | 'header' | 'hgroup' | 'hr' | 'html' | 'i' | 'iframe' | 'img' | 'input' | 'ins' | 'kbd' | 'label' | 'legend' | 'li' | 'link' | 'main' | 'map' | 'mark' | 'menu' | 'meta' | 'meter' | 'nav' | 'noscript' | 'object' | 'ol' | 'optgroup' | 'option' | 'output' | 'p' | 'picture' | 'pre' | 'progress' | 'q' | 'rp' | 'rt' | 'ruby' | 's' | 'samp' | 'script' | 'search' | 'section' | 'select' | 'slot' | 'small' | 'source' | 'span' | 'strong' | 'style' | 'sub' | 'summary' | 'sup' | 'svg' | 'table' | 'tbody' | 'td' | 'template' | 'textarea' | 'tfoot' | 'th' | 'thead' | 'time' | 'title' | 'tr' | 'track' | 'u' | 'ul' | 'var' | 'video' | 'wbr';
+/**
+ * Create a styled component with variant support
+ *
+ * @example
+ * ```tsx
+ * const Button = styled('button', {
+ *   base: {
+ *     padding: '8px 16px',
+ *     border: 'none',
+ *     borderRadius: 4,
+ *     cursor: 'pointer'
+ *   },
+ *   variants: {
+ *     variant: {
+ *       primary: { backgroundColor: 'blue', color: 'white' },
+ *       secondary: { backgroundColor: 'gray', color: 'black' }
+ *     },
+ *     size: {
+ *       sm: { padding: '4px 8px', fontSize: 12 },
+ *       md: { padding: '8px 16px', fontSize: 14 },
+ *       lg: { padding: '12px 24px', fontSize: 16 }
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     variant: 'primary',
+ *     size: 'md'
+ *   }
+ * })
+ *
+ * // Usage
+ * <Button variant="secondary" size="lg">Click me</Button>
+ * ```
+ */
+declare function styled<T extends HTMLTag, V extends VariantConfig = Record<string, never>>(tag: T, config: StyledConfig<V>): StyledComponent<T, V>;
+type StyledComponent<T extends HTMLTag, V extends VariantConfig> = {
+    (props: StyledComponentProps<V>): FNode;
+    displayName: string;
+};
+type StyledComponentProps<V extends VariantConfig> = {
+    [K in keyof V]?: keyof V[K];
+} & {
+    children?: any;
+    className?: string;
+    [key: string]: any;
+};
+
+/**
+ * Create a keyframes animation
+ *
+ * @example
+ * ```tsx
+ * const fadeIn = keyframes({
+ *   from: { opacity: 0 },
+ *   to: { opacity: 1 }
+ * })
+ *
+ * const slideIn = keyframes({
+ *   '0%': { transform: 'translateX(-100%)' },
+ *   '100%': { transform: 'translateX(0)' }
+ * })
+ *
+ * const className = css({
+ *   animation: `${fadeIn} 0.3s ease-in-out`
+ * })
+ * ```
+ */
+declare function keyframes(definition: KeyframeDefinition): string;
+
+/**
+ * Get all collected styles for SSR
+ */
+declare function getStyles(): string;
+/**
+ * Get styles as a style tag for SSR
+ */
+declare function getStyleTag(): string;
+/**
+ * Reset collected styles and cache (for SSR between requests or testing)
+ */
+declare function resetStyles(): void;
+/**
+ * Hydrate styles on the client
+ * Call this after SSR to sync the cache with server-rendered styles
+ */
+declare function hydrateStyles(): void;
+
+export { type CSSProperties, type CSSValue, type DefaultVariants, type KeyframeDefinition, type StyleObject, type StyledConfig, type StyledProps, type VariantConfig, css, cx, getStyleTag, getStyles, hydrateStyles, keyframes, resetStyles, styled };

package/dist/css.js

@@ -0,0 +1,2 @@
+'use strict';function C(e){let t=5381;for(let n=0;n<e.length;n++)t=(t<<5)+t^e.charCodeAt(n);return "fx-"+(t>>>0).toString(36)}var W=new Set(["animationIterationCount","borderImageOutset","borderImageSlice","borderImageWidth","boxFlex","boxFlexGroup","boxOrdinalGroup","columnCount","columns","flex","flexGrow","flexPositive","flexShrink","flexNegative","flexOrder","gridArea","gridRow","gridRowEnd","gridRowSpan","gridRowStart","gridColumn","gridColumnEnd","gridColumnSpan","gridColumnStart","fontWeight","lineClamp","lineHeight","opacity","order","orphans","tabSize","widows","zIndex","zoom","fillOpacity","floodOpacity","stopOpacity","strokeDasharray","strokeDashoffset","strokeMiterlimit","strokeOpacity","strokeWidth"]);function K(e){return e.replace(/[A-Z]/g,t=>"-"+t.toLowerCase())}function P(e,t){return typeof t=="number"&&t!==0&&!W.has(e)?t+"px":String(t)}function k(e,t){let n="",r="";for(let i in e){let a=e[i];if(a!=null)if(i.startsWith("&")){let l=i.replace(/&/g,t);r+=k(a,l);}else if(i.startsWith("@"))r+=`${i}{${k(a,t)}}`;else {if(typeof a=="object")continue;n+=`${K(i)}:${P(i,a)};`;}}let s="";return n&&(s=`${t}{${n}}`),s+=r,s}function z(e,t){let n="";for(let r in t){let s=t[r],i="";for(let a in s){let l=s[a];l!=null&&typeof l!="object"&&(i+=`${K(a)}:${P(a,l)};`);}n+=`${r}{${i}}`;}return `@keyframes ${e}{${n}}`}var g=new Map,v=[],m=null;function M(){return typeof document<"u"&&"adoptedStyleSheets"in document&&typeof CSSStyleSheet<"u"&&"replaceSync"in CSSStyleSheet.prototype}function E(){return M()?(m||(m=new CSSStyleSheet,document.adoptedStyleSheets=[...document.adoptedStyleSheets,m]),m):null}function V(e,t){if(g.has(e))return;g.set(e,true);let n=E();if(n)try{n.insertRule(t,n.cssRules.length);}catch(r){process.env.NODE_ENV!=="production"&&console.warn("[flexium/css] Invalid CSS rule:",t,r);}else v.push(t);}function O(e){return g.has(e)}function D(){return v.join("")}function H(){let e=D();return e?`<style data-flexium-css>${e}</style>`:""}function L(){v=[],g=new Map,m=null;}function A(){if(typeof document>"u")return;let e=document.querySelector("style[data-flexium-css]");if(e){let t=e.textContent||"",n=/\.fx-[a-z0-9]+/g,r;for(;(r=n.exec(t))!==null;){let s=r[0].slice(1);g.set(s,true);}}}M()&&A();function S(e){let t=JSON.stringify(e),n=C(t);if(O(n))return n;let r=k(e,"."+n);return V(n,r),n}function N(...e){return e.filter(Boolean).join(" ")}function q(e,t){let{base:n,variants:r,defaultVariants:s,compoundVariants:i}=t,a=S(n),l=new Map;function I(d,c){let h=`${d}:${c}`,f=l.get(h);return !f&&r?.[d]?.[c]&&(f=S(r[d][c]),l.set(h,f)),f||""}let T=new Map;function $(d){let{children:c,className:h,...f}=d,u={},j={};for(let o in f)r&&o in r?u[o]=f[o]??s?.[o]:j[o]=f[o];if(s)for(let o in s)o in u||(u[o]=String(s[o]));let w=[];for(let[o,x]of Object.entries(u))if(x){let y=I(o,String(x));y&&w.push(y);}if(i)for(let o of i){let{css:x,...y}=o,R=true;for(let[b,p]of Object.entries(y))if(u[b]!==p){R=false;break}if(R){let b=JSON.stringify(y),p=T.get(b);p||(p=S(x),T.set(b,p)),w.push(p);}}let F=N(a,...w,h);return {type:e,props:{...j,className:F},children:Array.isArray(c)?c:c!=null?[c]:[],key:void 0}}return $.displayName=`Styled(${e})`,$}function G(e){let t=JSON.stringify(e),n=C(t);if(O(n))return n;let r=z(n,e);return V(n,r),n}exports.css=S;exports.cx=N;exports.getStyleTag=H;exports.getStyles=D;exports.hydrateStyles=A;exports.keyframes=G;exports.resetStyles=L;exports.styled=q;//# sourceMappingURL=css.js.map
+//# sourceMappingURL=css.js.map