@vaneui/ui 0.2.1-alpha.20250810102219.51053cf → 0.2.1-alpha.20250811191248.a18a87d

package/dist/index.js

@@ -93,6 +93,33 @@ const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATIO
 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'];
+const ComponentCategories = {
+    badge: BADGE_CATEGORIES,
+    button: BUTTON_CATEGORIES,
+    card: CARD_CATEGORIES,
+    checkbox: CHECKBOX_CATEGORIES,
+    chip: CHIP_CATEGORIES,
+    code: CODE_CATEGORIES,
+    col: COL_CATEGORIES,
+    container: CONTAINER_CATEGORIES,
+    divider: DIVIDER_CATEGORIES,
+    grid3: GRID_CATEGORIES,
+    grid4: GRID_CATEGORIES,
+    img: IMG_CATEGORIES,
+    label: LABEL_CATEGORIES,
+    link: TYPOGRAPHY_CATEGORIES,
+    list: LIST_CATEGORIES,
+    listItem: TYPOGRAPHY_CATEGORIES,
+    pageTitle: TYPOGRAPHY_CATEGORIES,
+    row: ROW_CATEGORIES,
+    section: SECTION_CATEGORIES,
+    sectionTitle: TYPOGRAPHY_CATEGORIES,
+    stack: STACK_CATEGORIES,
+    text: TYPOGRAPHY_CATEGORIES,
+    title: TYPOGRAPHY_CATEGORIES
+};
 
 class HideTheme extends BaseTheme {
     constructor(initialConfig) {
@@ -4734,8 +4761,6 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
     noRing: true,
 }, IMG_CATEGORIES);
 
-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'];
 const defaultTheme = {
     button: defaultButtonTheme,
     badge: defaultBadgeTheme,
@@ -4857,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 { 
@@ -4911,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;
@@ -5011,6 +5036,7 @@ exports.Checkbox = Checkbox;
 exports.Chip = Chip;
 exports.Code = Code;
 exports.Col = Col;
+exports.ComponentCategories = ComponentCategories;
 exports.ComponentKeys = ComponentKeys;
 exports.Container = Container;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;