@vaneui/ui 0.2.1-alpha.20250810113755.26a118a → 0.2.1-alpha.20250812182914.4e44540

package/dist/index.js

@@ -94,7 +94,7 @@ const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
 // Media component categories
 const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
-    'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
+    'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
 const ComponentCategories = {
     badge: BADGE_CATEGORIES,
     button: BUTTON_CATEGORIES,
@@ -105,6 +105,7 @@ const ComponentCategories = {
     col: COL_CATEGORIES,
     container: CONTAINER_CATEGORIES,
     divider: DIVIDER_CATEGORIES,
+    grid2: GRID_CATEGORIES,
     grid3: GRID_CATEGORIES,
     grid4: GRID_CATEGORIES,
     img: IMG_CATEGORIES,
@@ -4643,6 +4644,9 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+    return props.href ? "a" : "div";
+});
 const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
@@ -4773,6 +4777,7 @@ const defaultTheme = {
     col: defaultColTheme,
     stack: defaultStackTheme,
     section: defaultSectionTheme,
+    grid2: defaultGrid2Theme,
     grid3: defaultGrid3Theme,
     grid4: defaultGrid4Theme,
     pageTitle: pageTitleTheme,
@@ -4882,41 +4887,41 @@ function useTheme() {
     return react.useContext(ThemeContext);
 }
 
-function ThemedComponent(allProps) {
+const ThemedComponent = react.forwardRef(function ThemedComponent(allProps, ref) {
     const { theme, ...props } = allProps;
     const { Tag, finalClasses, finalProps } = react.useMemo(() => {
         // Pass the full allProps and let getComponentConfig handle filtering
         return theme.getComponentConfig(allProps);
     }, [theme, allProps]);
-    return (jsxRuntime.jsx(Tag, { className: finalClasses, ...finalProps, children: props.children }));
-}
+    return (jsxRuntime.jsx(Tag, { ref: ref, className: finalClasses, ...finalProps, children: props.children }));
+});
 
-const Button = (props) => {
+const Button = react.forwardRef(function Button(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.button, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
+});
 
-const Badge = (props) => {
+const Badge = react.forwardRef(function Badge(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.badge, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
+});
 
-const Divider = (props) => {
+const Divider = react.forwardRef(function Divider(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.divider, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.divider, ref: ref, ...props });
+});
 
-const Chip = (props) => {
+const Chip = react.forwardRef(function Chip(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.chip, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.chip, ref: ref, ...props });
+});
 
-const Code = (props) => {
+const Code = react.forwardRef(function Code(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.code, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.code, ref: ref, ...props });
+});
 
-const Checkbox = (props) => {
+const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     const theme = useTheme();
     // Extract only theme-relevant props for wrapper and check components
     const { 
@@ -4936,87 +4941,91 @@ const Checkbox = (props) => {
         filled, outline,
         pill, sharp, rounded
     };
-    return (jsxRuntime.jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ...themeProps, children: [jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
-};
+    return (jsxRuntime.jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
+});
 
-const Label = (props) => {
+const Label = react.forwardRef(function Label(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.label, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.label, ref: ref, ...props });
+});
 
-const Img = (props) => {
+const Img = react.forwardRef(function Img(props, ref) {
     const theme = useTheme();
-    return (jsxRuntime.jsx(ThemedComponent, { theme: theme.img, ...props }));
-};
+    return (jsxRuntime.jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
+});
 
-const Section = (props) => {
+const Section = react.forwardRef(function Section(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.section, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
+});
 
-const Container = (props) => {
+const Container = react.forwardRef(function Container(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.container, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.container, ref: ref, ...props });
+});
 
-const Col = (props) => {
+const Col = react.forwardRef(function Col(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.col, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.col, ref: ref, ...props });
+});
 
-const Row = (props) => {
+const Row = react.forwardRef(function Row(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.row, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
+});
 
-const Grid3 = (props) => {
+const Grid2 = react.forwardRef(function Grid2(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid3, ...props });
-};
-const Grid4 = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
+});
+const Grid3 = react.forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid4, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
+});
+const Grid4 = react.forwardRef(function Grid4(props, ref) {
+    const theme = useTheme();
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
+});
 
-const Card = (props) => {
+const Card = react.forwardRef(function Card(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.card, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.card, ...props });
+});
 
-const Stack = (props) => {
+const Stack = react.forwardRef(function Stack(props, ref) {
     const theme = useTheme();
     const stackTheme = theme.stack;
-    return jsxRuntime.jsx(ThemedComponent, { theme: stackTheme, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { theme: stackTheme, ref: ref, ...props });
+});
 
-const PageTitle = (props) => {
+const PageTitle = react.forwardRef(function PageTitle(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.pageTitle, ...props });
-};
-const SectionTitle = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.pageTitle, ...props });
+});
+const SectionTitle = react.forwardRef(function SectionTitle(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.sectionTitle, ...props });
-};
-const Title = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.sectionTitle, ...props });
+});
+const Title = react.forwardRef(function Title(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.title, ...props });
-};
-const Text = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.title, ...props });
+});
+const Text = react.forwardRef(function Text(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.text, ...props });
-};
-const Link = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.text, ...props });
+});
+const Link = react.forwardRef(function Link(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.link, ...props });
-};
-const ListItem = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.link, ...props });
+});
+const ListItem = react.forwardRef(function ListItem(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.listItem, ...props });
-};
-const List = (props) => {
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.listItem, ...props });
+});
+const List = react.forwardRef(function List(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.list, ...props });
-};
+    return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
+});
 
 exports.BADGE_CATEGORIES = BADGE_CATEGORIES;
 exports.BREAKPOINT = BREAKPOINT;
@@ -5042,6 +5051,7 @@ exports.Container = Container;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;
 exports.Divider = Divider;
 exports.GRID_CATEGORIES = GRID_CATEGORIES;
+exports.Grid2 = Grid2;
 exports.Grid3 = Grid3;
 exports.Grid4 = Grid4;
 exports.IMG_CATEGORIES = IMG_CATEGORIES;