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

package/dist/index.js

@@ -4882,41 +4882,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 +4936,87 @@ 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 Grid3 = react.forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
-    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid3, ...props });
-};
-const 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, ...props });
-};
+    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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.2.1-alpha.20250810113755.26a118a",
+  "version": "0.2.1-alpha.20250811191248.a18a87d",
   "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
   "author": "",
   "license": "ISC",