@vaneui/ui 0.2.1-alpha.20250810113755.26a118a → 0.2.1-alpha.20250811191248.a18a87d

package/dist/components/ui/label.d.ts

@@ -1,3 +1,109 @@
-import { JSX } from 'react';
-import { LabelProps } from './props';
-export declare const Label: (props: LabelProps) => JSX.Element;
+import React from 'react';
+export declare const Label: React.ForwardRefExoticComponent<{
+    className?: string;
+    children?: React.ReactNode;
+} & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    transparent?: boolean | undefined;
+    gap?: boolean | undefined;
+    reverse?: boolean | undefined;
+    link?: boolean | undefined;
+    default?: boolean | undefined;
+    accent?: boolean | undefined;
+    primary?: boolean | undefined;
+    secondary?: boolean | undefined;
+    tertiary?: boolean | undefined;
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    warning?: boolean | undefined;
+    info?: boolean | undefined;
+    inline?: boolean | undefined;
+    block?: boolean | undefined;
+    inlineBlock?: boolean | undefined;
+    flex?: boolean | undefined;
+    inlineFlex?: boolean | undefined;
+    grid?: boolean | undefined;
+    inlineGrid?: boolean | undefined;
+    contents?: boolean | undefined;
+    table?: boolean | undefined;
+    tableCell?: boolean | undefined;
+    hidden?: boolean | undefined;
+    row?: boolean | undefined;
+    column?: boolean | undefined;
+    rowReverse?: boolean | undefined;
+    columnReverse?: boolean | undefined;
+    sans?: boolean | undefined;
+    serif?: boolean | undefined;
+    mono?: boolean | undefined;
+    italic?: boolean | undefined;
+    notItalic?: boolean | undefined;
+    thin?: boolean | undefined;
+    extralight?: boolean | undefined;
+    light?: boolean | undefined;
+    normal?: boolean | undefined;
+    medium?: boolean | undefined;
+    semibold?: boolean | undefined;
+    bold?: boolean | undefined;
+    extrabold?: boolean | undefined;
+    black?: boolean | undefined;
+    noGap?: boolean | undefined;
+    xsHide?: boolean | undefined;
+    smHide?: boolean | undefined;
+    mdHide?: boolean | undefined;
+    lgHide?: boolean | undefined;
+    xlHide?: boolean | undefined;
+    itemsStart?: boolean | undefined;
+    itemsEnd?: boolean | undefined;
+    itemsCenter?: boolean | undefined;
+    itemsBaseline?: boolean | undefined;
+    itemsStretch?: boolean | undefined;
+    justifyStart?: boolean | undefined;
+    justifyEnd?: boolean | undefined;
+    justifyCenter?: boolean | undefined;
+    justifyBetween?: boolean | undefined;
+    justifyAround?: boolean | undefined;
+    justifyEvenly?: boolean | undefined;
+    justifyStretch?: boolean | undefined;
+    justifyBaseline?: boolean | undefined;
+    overflowAuto?: boolean | undefined;
+    overflowHidden?: boolean | undefined;
+    overflowClip?: boolean | undefined;
+    overflowVisible?: boolean | undefined;
+    overflowScroll?: boolean | undefined;
+    overflowXAuto?: boolean | undefined;
+    overflowYAuto?: boolean | undefined;
+    overflowXHidden?: boolean | undefined;
+    overflowYHidden?: boolean | undefined;
+    overflowXClip?: boolean | undefined;
+    overflowYClip?: boolean | undefined;
+    overflowXVisible?: boolean | undefined;
+    overflowYVisible?: boolean | undefined;
+    overflowXScroll?: boolean | undefined;
+    overflowYScroll?: boolean | undefined;
+    relative?: boolean | undefined;
+    absolute?: boolean | undefined;
+    fixed?: boolean | undefined;
+    sticky?: boolean | undefined;
+    static?: boolean | undefined;
+    xs?: boolean | undefined;
+    sm?: boolean | undefined;
+    md?: boolean | undefined;
+    lg?: boolean | undefined;
+    xl?: boolean | undefined;
+    textLeft?: boolean | undefined;
+    textCenter?: boolean | undefined;
+    textRight?: boolean | undefined;
+    textJustify?: boolean | undefined;
+    underline?: boolean | undefined;
+    lineThrough?: boolean | undefined;
+    noUnderline?: boolean | undefined;
+    overline?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    lowercase?: boolean | undefined;
+    capitalize?: boolean | undefined;
+    normalCase?: boolean | undefined;
+    flexWrap?: boolean | undefined;
+    flexNoWrap?: boolean | undefined;
+    flexWrapReverse?: boolean | undefined;
+} & {
+    tag?: React.ElementType;
+} & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/ui/row.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { RowProps } from './props/props';
-export declare const Row: (props: RowProps) => JSX.Element;
+export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/section.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { SectionProps } from './props/props';
-export declare const Section: (props: SectionProps) => JSX.Element;
+export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/stack.d.ts

@@ -1,3 +1,3 @@
-import { JSX } from 'react';
+import React from 'react';
 import { StackProps } from './props/props';
-export declare const Stack: (props: StackProps) => JSX.Element;
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/typography.d.ts

@@ -1,9 +1,110 @@
-import { JSX } from 'react';
-import { TypographyProps, ListProps } from './props/props';
-export declare const PageTitle: (props: TypographyProps) => JSX.Element;
-export declare const SectionTitle: (props: TypographyProps) => JSX.Element;
-export declare const Title: (props: TypographyProps) => JSX.Element;
-export declare const Text: (props: TypographyProps) => JSX.Element;
-export declare const Link: (props: TypographyProps) => JSX.Element;
-export declare const ListItem: (props: TypographyProps) => JSX.Element;
-export declare const List: (props: ListProps) => JSX.Element;
+import React from 'react';
+import { TypographyProps } from './props/props';
+export declare const PageTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SectionTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Title: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Text: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Link: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLLIElement>>;
+export declare const List: React.ForwardRefExoticComponent<{
+    className?: string;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement> & {
+    link?: boolean | undefined;
+    table?: boolean | undefined;
+    hidden?: boolean | undefined;
+    transparent?: boolean | undefined;
+    padding?: boolean | undefined;
+    default?: boolean | undefined;
+    accent?: boolean | undefined;
+    primary?: boolean | undefined;
+    secondary?: boolean | undefined;
+    tertiary?: boolean | undefined;
+    success?: boolean | undefined;
+    danger?: boolean | undefined;
+    warning?: boolean | undefined;
+    info?: boolean | undefined;
+    inline?: boolean | undefined;
+    block?: boolean | undefined;
+    inlineBlock?: boolean | undefined;
+    flex?: boolean | undefined;
+    inlineFlex?: boolean | undefined;
+    grid?: boolean | undefined;
+    inlineGrid?: boolean | undefined;
+    contents?: boolean | undefined;
+    tableCell?: boolean | undefined;
+    sans?: boolean | undefined;
+    serif?: boolean | undefined;
+    mono?: boolean | undefined;
+    italic?: boolean | undefined;
+    notItalic?: boolean | undefined;
+    thin?: boolean | undefined;
+    extralight?: boolean | undefined;
+    light?: boolean | undefined;
+    normal?: boolean | undefined;
+    medium?: boolean | undefined;
+    semibold?: boolean | undefined;
+    bold?: boolean | undefined;
+    extrabold?: boolean | undefined;
+    black?: boolean | undefined;
+    xsHide?: boolean | undefined;
+    smHide?: boolean | undefined;
+    mdHide?: boolean | undefined;
+    lgHide?: boolean | undefined;
+    xlHide?: boolean | undefined;
+    itemsStart?: boolean | undefined;
+    itemsEnd?: boolean | undefined;
+    itemsCenter?: boolean | undefined;
+    itemsBaseline?: boolean | undefined;
+    itemsStretch?: boolean | undefined;
+    justifyStart?: boolean | undefined;
+    justifyEnd?: boolean | undefined;
+    justifyCenter?: boolean | undefined;
+    justifyBetween?: boolean | undefined;
+    justifyAround?: boolean | undefined;
+    justifyEvenly?: boolean | undefined;
+    justifyStretch?: boolean | undefined;
+    justifyBaseline?: boolean | undefined;
+    disc?: boolean | undefined;
+    decimal?: boolean | undefined;
+    overflowAuto?: boolean | undefined;
+    overflowHidden?: boolean | undefined;
+    overflowClip?: boolean | undefined;
+    overflowVisible?: boolean | undefined;
+    overflowScroll?: boolean | undefined;
+    overflowXAuto?: boolean | undefined;
+    overflowYAuto?: boolean | undefined;
+    overflowXHidden?: boolean | undefined;
+    overflowYHidden?: boolean | undefined;
+    overflowXClip?: boolean | undefined;
+    overflowYClip?: boolean | undefined;
+    overflowXVisible?: boolean | undefined;
+    overflowYVisible?: boolean | undefined;
+    overflowXScroll?: boolean | undefined;
+    overflowYScroll?: boolean | undefined;
+    noPadding?: boolean | undefined;
+    relative?: boolean | undefined;
+    absolute?: boolean | undefined;
+    fixed?: boolean | undefined;
+    sticky?: boolean | undefined;
+    static?: boolean | undefined;
+    xs?: boolean | undefined;
+    sm?: boolean | undefined;
+    md?: boolean | undefined;
+    lg?: boolean | undefined;
+    xl?: boolean | undefined;
+    textLeft?: boolean | undefined;
+    textCenter?: boolean | undefined;
+    textRight?: boolean | undefined;
+    textJustify?: boolean | undefined;
+    underline?: boolean | undefined;
+    lineThrough?: boolean | undefined;
+    noUnderline?: boolean | undefined;
+    overline?: boolean | undefined;
+    uppercase?: boolean | undefined;
+    lowercase?: boolean | undefined;
+    capitalize?: boolean | undefined;
+    normalCase?: boolean | undefined;
+} & {
+    tag?: React.ElementType;
+} & React.RefAttributes<HTMLUListElement>>;

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useMemo, useContext } from 'react';
+import { createContext, useContext, useMemo, forwardRef } from 'react';
 
 /**
  * Base Theme class that all theme types will extend
@@ -4880,41 +4880,41 @@ function useTheme() {
     return useContext(ThemeContext);
 }
 
-function ThemedComponent(allProps) {
+const ThemedComponent = forwardRef(function ThemedComponent(allProps, ref) {
     const { theme, ...props } = allProps;
     const { Tag, finalClasses, finalProps } = useMemo(() => {
         // Pass the full allProps and let getComponentConfig handle filtering
         return theme.getComponentConfig(allProps);
     }, [theme, allProps]);
-    return (jsx(Tag, { className: finalClasses, ...finalProps, children: props.children }));
-}
+    return (jsx(Tag, { ref: ref, className: finalClasses, ...finalProps, children: props.children }));
+});
 
-const Button = (props) => {
+const Button = forwardRef(function Button(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.button, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
+});
 
-const Badge = (props) => {
+const Badge = forwardRef(function Badge(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.badge, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
+});
 
-const Divider = (props) => {
+const Divider = forwardRef(function Divider(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.divider, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.divider, ref: ref, ...props });
+});
 
-const Chip = (props) => {
+const Chip = forwardRef(function Chip(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.chip, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.chip, ref: ref, ...props });
+});
 
-const Code = (props) => {
+const Code = forwardRef(function Code(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.code, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.code, ref: ref, ...props });
+});
 
-const Checkbox = (props) => {
+const Checkbox = forwardRef(function Checkbox(props, ref) {
     const theme = useTheme();
     // Extract only theme-relevant props for wrapper and check components
     const { 
@@ -4934,87 +4934,87 @@ const Checkbox = (props) => {
         filled, outline,
         pill, sharp, rounded
     };
-    return (jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ...themeProps, children: [jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
-};
+    return (jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
+});
 
-const Label = (props) => {
+const Label = forwardRef(function Label(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.label, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.label, ref: ref, ...props });
+});
 
-const Img = (props) => {
+const Img = forwardRef(function Img(props, ref) {
     const theme = useTheme();
-    return (jsx(ThemedComponent, { theme: theme.img, ...props }));
-};
+    return (jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
+});
 
-const Section = (props) => {
+const Section = forwardRef(function Section(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.section, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
+});
 
-const Container = (props) => {
+const Container = forwardRef(function Container(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.container, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.container, ref: ref, ...props });
+});
 
-const Col = (props) => {
+const Col = forwardRef(function Col(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.col, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.col, ref: ref, ...props });
+});
 
-const Row = (props) => {
+const Row = forwardRef(function Row(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.row, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
+});
 
-const Grid3 = (props) => {
+const Grid3 = forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.grid3, ...props });
-};
-const Grid4 = (props) => {
+    return jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
+});
+const Grid4 = forwardRef(function Grid4(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.grid4, ...props });
-};
+    return jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
+});
 
-const Card = (props) => {
+const Card = forwardRef(function Card(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.card, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.card, ...props });
+});
 
-const Stack = (props) => {
+const Stack = forwardRef(function Stack(props, ref) {
     const theme = useTheme();
     const stackTheme = theme.stack;
-    return jsx(ThemedComponent, { theme: stackTheme, ...props });
-};
+    return jsx(ThemedComponent, { theme: stackTheme, ref: ref, ...props });
+});
 
-const PageTitle = (props) => {
+const PageTitle = forwardRef(function PageTitle(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.pageTitle, ...props });
-};
-const SectionTitle = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.pageTitle, ...props });
+});
+const SectionTitle = forwardRef(function SectionTitle(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.sectionTitle, ...props });
-};
-const Title = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.sectionTitle, ...props });
+});
+const Title = forwardRef(function Title(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.title, ...props });
-};
-const Text = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.title, ...props });
+});
+const Text = forwardRef(function Text(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.text, ...props });
-};
-const Link = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.text, ...props });
+});
+const Link = forwardRef(function Link(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.link, ...props });
-};
-const ListItem = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.link, ...props });
+});
+const ListItem = forwardRef(function ListItem(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.listItem, ...props });
-};
-const List = (props) => {
+    return jsx(ThemedComponent, { ref: ref, theme: theme.listItem, ...props });
+});
+const List = forwardRef(function List(props, ref) {
     const theme = useTheme();
-    return jsx(ThemedComponent, { theme: theme.list, ...props });
-};
+    return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
+});
 
 export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
 //# sourceMappingURL=index.esm.js.map