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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,109 @@
1
- import { JSX } from 'react';
2
- import { LabelProps } from './props';
3
- export declare const Label: (props: LabelProps) => JSX.Element;
1
+ import React from 'react';
2
+ export declare const Label: React.ForwardRefExoticComponent<{
3
+ className?: string;
4
+ children?: React.ReactNode;
5
+ } & React.LabelHTMLAttributes<HTMLLabelElement> & {
6
+ transparent?: boolean | undefined;
7
+ gap?: boolean | undefined;
8
+ reverse?: boolean | undefined;
9
+ link?: boolean | undefined;
10
+ default?: boolean | undefined;
11
+ accent?: boolean | undefined;
12
+ primary?: boolean | undefined;
13
+ secondary?: boolean | undefined;
14
+ tertiary?: boolean | undefined;
15
+ success?: boolean | undefined;
16
+ danger?: boolean | undefined;
17
+ warning?: boolean | undefined;
18
+ info?: boolean | undefined;
19
+ inline?: boolean | undefined;
20
+ block?: boolean | undefined;
21
+ inlineBlock?: boolean | undefined;
22
+ flex?: boolean | undefined;
23
+ inlineFlex?: boolean | undefined;
24
+ grid?: boolean | undefined;
25
+ inlineGrid?: boolean | undefined;
26
+ contents?: boolean | undefined;
27
+ table?: boolean | undefined;
28
+ tableCell?: boolean | undefined;
29
+ hidden?: boolean | undefined;
30
+ row?: boolean | undefined;
31
+ column?: boolean | undefined;
32
+ rowReverse?: boolean | undefined;
33
+ columnReverse?: boolean | undefined;
34
+ sans?: boolean | undefined;
35
+ serif?: boolean | undefined;
36
+ mono?: boolean | undefined;
37
+ italic?: boolean | undefined;
38
+ notItalic?: boolean | undefined;
39
+ thin?: boolean | undefined;
40
+ extralight?: boolean | undefined;
41
+ light?: boolean | undefined;
42
+ normal?: boolean | undefined;
43
+ medium?: boolean | undefined;
44
+ semibold?: boolean | undefined;
45
+ bold?: boolean | undefined;
46
+ extrabold?: boolean | undefined;
47
+ black?: boolean | undefined;
48
+ noGap?: boolean | undefined;
49
+ xsHide?: boolean | undefined;
50
+ smHide?: boolean | undefined;
51
+ mdHide?: boolean | undefined;
52
+ lgHide?: boolean | undefined;
53
+ xlHide?: boolean | undefined;
54
+ itemsStart?: boolean | undefined;
55
+ itemsEnd?: boolean | undefined;
56
+ itemsCenter?: boolean | undefined;
57
+ itemsBaseline?: boolean | undefined;
58
+ itemsStretch?: boolean | undefined;
59
+ justifyStart?: boolean | undefined;
60
+ justifyEnd?: boolean | undefined;
61
+ justifyCenter?: boolean | undefined;
62
+ justifyBetween?: boolean | undefined;
63
+ justifyAround?: boolean | undefined;
64
+ justifyEvenly?: boolean | undefined;
65
+ justifyStretch?: boolean | undefined;
66
+ justifyBaseline?: boolean | undefined;
67
+ overflowAuto?: boolean | undefined;
68
+ overflowHidden?: boolean | undefined;
69
+ overflowClip?: boolean | undefined;
70
+ overflowVisible?: boolean | undefined;
71
+ overflowScroll?: boolean | undefined;
72
+ overflowXAuto?: boolean | undefined;
73
+ overflowYAuto?: boolean | undefined;
74
+ overflowXHidden?: boolean | undefined;
75
+ overflowYHidden?: boolean | undefined;
76
+ overflowXClip?: boolean | undefined;
77
+ overflowYClip?: boolean | undefined;
78
+ overflowXVisible?: boolean | undefined;
79
+ overflowYVisible?: boolean | undefined;
80
+ overflowXScroll?: boolean | undefined;
81
+ overflowYScroll?: boolean | undefined;
82
+ relative?: boolean | undefined;
83
+ absolute?: boolean | undefined;
84
+ fixed?: boolean | undefined;
85
+ sticky?: boolean | undefined;
86
+ static?: boolean | undefined;
87
+ xs?: boolean | undefined;
88
+ sm?: boolean | undefined;
89
+ md?: boolean | undefined;
90
+ lg?: boolean | undefined;
91
+ xl?: boolean | undefined;
92
+ textLeft?: boolean | undefined;
93
+ textCenter?: boolean | undefined;
94
+ textRight?: boolean | undefined;
95
+ textJustify?: boolean | undefined;
96
+ underline?: boolean | undefined;
97
+ lineThrough?: boolean | undefined;
98
+ noUnderline?: boolean | undefined;
99
+ overline?: boolean | undefined;
100
+ uppercase?: boolean | undefined;
101
+ lowercase?: boolean | undefined;
102
+ capitalize?: boolean | undefined;
103
+ normalCase?: boolean | undefined;
104
+ flexWrap?: boolean | undefined;
105
+ flexNoWrap?: boolean | undefined;
106
+ flexWrapReverse?: boolean | undefined;
107
+ } & {
108
+ tag?: React.ElementType;
109
+ } & React.RefAttributes<HTMLLabelElement>>;
@@ -93,3 +93,6 @@ export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify
93
93
  export type CategoryProps = {
94
94
  [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
95
95
  };
96
+ export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
97
+ export type ComponentKey = typeof COMPONENT[number];
98
+ export declare const ComponentCategories: Record<ComponentKey, readonly string[]>;
@@ -1,3 +1,3 @@
1
- import { JSX } from 'react';
1
+ import React from 'react';
2
2
  import { RowProps } from './props/props';
3
- export declare const Row: (props: RowProps) => JSX.Element;
3
+ export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,3 +1,3 @@
1
- import { JSX } from 'react';
1
+ import React from 'react';
2
2
  import { SectionProps } from './props/props';
3
- export declare const Section: (props: SectionProps) => JSX.Element;
3
+ export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,3 +1,3 @@
1
- import { JSX } from 'react';
1
+ import React from 'react';
2
2
  import { StackProps } from './props/props';
3
- export declare const Stack: (props: StackProps) => JSX.Element;
3
+ export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,9 +1,110 @@
1
- import { JSX } from 'react';
2
- import { TypographyProps, ListProps } from './props/props';
3
- export declare const PageTitle: (props: TypographyProps) => JSX.Element;
4
- export declare const SectionTitle: (props: TypographyProps) => JSX.Element;
5
- export declare const Title: (props: TypographyProps) => JSX.Element;
6
- export declare const Text: (props: TypographyProps) => JSX.Element;
7
- export declare const Link: (props: TypographyProps) => JSX.Element;
8
- export declare const ListItem: (props: TypographyProps) => JSX.Element;
9
- export declare const List: (props: ListProps) => JSX.Element;
1
+ import React from 'react';
2
+ import { TypographyProps } from './props/props';
3
+ export declare const PageTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
4
+ export declare const SectionTitle: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
5
+ export declare const Title: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLHeadingElement>>;
6
+ export declare const Text: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLParagraphElement>>;
7
+ export declare const Link: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLAnchorElement>>;
8
+ export declare const ListItem: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLLIElement>>;
9
+ export declare const List: React.ForwardRefExoticComponent<{
10
+ className?: string;
11
+ children?: React.ReactNode;
12
+ } & React.HTMLAttributes<HTMLElement> & {
13
+ link?: boolean | undefined;
14
+ table?: boolean | undefined;
15
+ hidden?: boolean | undefined;
16
+ transparent?: boolean | undefined;
17
+ padding?: boolean | undefined;
18
+ default?: boolean | undefined;
19
+ accent?: boolean | undefined;
20
+ primary?: boolean | undefined;
21
+ secondary?: boolean | undefined;
22
+ tertiary?: boolean | undefined;
23
+ success?: boolean | undefined;
24
+ danger?: boolean | undefined;
25
+ warning?: boolean | undefined;
26
+ info?: boolean | undefined;
27
+ inline?: boolean | undefined;
28
+ block?: boolean | undefined;
29
+ inlineBlock?: boolean | undefined;
30
+ flex?: boolean | undefined;
31
+ inlineFlex?: boolean | undefined;
32
+ grid?: boolean | undefined;
33
+ inlineGrid?: boolean | undefined;
34
+ contents?: boolean | undefined;
35
+ tableCell?: boolean | undefined;
36
+ sans?: boolean | undefined;
37
+ serif?: boolean | undefined;
38
+ mono?: boolean | undefined;
39
+ italic?: boolean | undefined;
40
+ notItalic?: boolean | undefined;
41
+ thin?: boolean | undefined;
42
+ extralight?: boolean | undefined;
43
+ light?: boolean | undefined;
44
+ normal?: boolean | undefined;
45
+ medium?: boolean | undefined;
46
+ semibold?: boolean | undefined;
47
+ bold?: boolean | undefined;
48
+ extrabold?: boolean | undefined;
49
+ black?: boolean | undefined;
50
+ xsHide?: boolean | undefined;
51
+ smHide?: boolean | undefined;
52
+ mdHide?: boolean | undefined;
53
+ lgHide?: boolean | undefined;
54
+ xlHide?: boolean | undefined;
55
+ itemsStart?: boolean | undefined;
56
+ itemsEnd?: boolean | undefined;
57
+ itemsCenter?: boolean | undefined;
58
+ itemsBaseline?: boolean | undefined;
59
+ itemsStretch?: boolean | undefined;
60
+ justifyStart?: boolean | undefined;
61
+ justifyEnd?: boolean | undefined;
62
+ justifyCenter?: boolean | undefined;
63
+ justifyBetween?: boolean | undefined;
64
+ justifyAround?: boolean | undefined;
65
+ justifyEvenly?: boolean | undefined;
66
+ justifyStretch?: boolean | undefined;
67
+ justifyBaseline?: boolean | undefined;
68
+ disc?: boolean | undefined;
69
+ decimal?: boolean | undefined;
70
+ overflowAuto?: boolean | undefined;
71
+ overflowHidden?: boolean | undefined;
72
+ overflowClip?: boolean | undefined;
73
+ overflowVisible?: boolean | undefined;
74
+ overflowScroll?: boolean | undefined;
75
+ overflowXAuto?: boolean | undefined;
76
+ overflowYAuto?: boolean | undefined;
77
+ overflowXHidden?: boolean | undefined;
78
+ overflowYHidden?: boolean | undefined;
79
+ overflowXClip?: boolean | undefined;
80
+ overflowYClip?: boolean | undefined;
81
+ overflowXVisible?: boolean | undefined;
82
+ overflowYVisible?: boolean | undefined;
83
+ overflowXScroll?: boolean | undefined;
84
+ overflowYScroll?: boolean | undefined;
85
+ noPadding?: boolean | undefined;
86
+ relative?: boolean | undefined;
87
+ absolute?: boolean | undefined;
88
+ fixed?: boolean | undefined;
89
+ sticky?: boolean | undefined;
90
+ static?: boolean | undefined;
91
+ xs?: boolean | undefined;
92
+ sm?: boolean | undefined;
93
+ md?: boolean | undefined;
94
+ lg?: boolean | undefined;
95
+ xl?: boolean | undefined;
96
+ textLeft?: boolean | undefined;
97
+ textCenter?: boolean | undefined;
98
+ textRight?: boolean | undefined;
99
+ textJustify?: boolean | undefined;
100
+ underline?: boolean | undefined;
101
+ lineThrough?: boolean | undefined;
102
+ noUnderline?: boolean | undefined;
103
+ overline?: boolean | undefined;
104
+ uppercase?: boolean | undefined;
105
+ lowercase?: boolean | undefined;
106
+ capitalize?: boolean | undefined;
107
+ normalCase?: boolean | undefined;
108
+ } & {
109
+ tag?: React.ElementType;
110
+ } & React.RefAttributes<HTMLUListElement>>;
package/dist/index.d.ts CHANGED
@@ -8,6 +8,6 @@ export { Label } from "./components/ui/label";
8
8
  export { Img } from "./components/ui/img";
9
9
  export { Section, Container, Col, Row, Stack, Grid3, Grid4, Card } from "./components/ui/layout";
10
10
  export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";
11
- export { ComponentKeys } from "./components/ui/props/keys";
12
- export { ThemeProvider, useTheme, defaultTheme, COMPONENT, type ThemeProps, type ThemeDefaults, type ThemeExtraClasses, type ThemeProviderProps, type PartialTheme, type ComponentKey, } from './components/themeContext';
11
+ export { COMPONENT, ComponentKeys, ComponentCategories, type ComponentKey, } from "./components/ui/props/keys";
12
+ export { ThemeProvider, useTheme, defaultTheme, type ThemeProps, type ThemeDefaults, type ThemeExtraClasses, type ThemeProviderProps, type PartialTheme, } from './components/themeContext';
13
13
  export * from "./components/ui/props/index";
package/dist/index.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import { jsx, jsxs } from 'react/jsx-runtime';
4
- import { createContext, useMemo, useContext } from 'react';
4
+ import { createContext, useContext, useMemo, forwardRef } from 'react';
5
5
 
6
6
  /**
7
7
  * Base Theme class that all theme types will extend
@@ -91,6 +91,33 @@ const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATIO
91
91
  const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
92
92
  // Media component categories
93
93
  const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
94
+ const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
95
+ 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
96
+ const ComponentCategories = {
97
+ badge: BADGE_CATEGORIES,
98
+ button: BUTTON_CATEGORIES,
99
+ card: CARD_CATEGORIES,
100
+ checkbox: CHECKBOX_CATEGORIES,
101
+ chip: CHIP_CATEGORIES,
102
+ code: CODE_CATEGORIES,
103
+ col: COL_CATEGORIES,
104
+ container: CONTAINER_CATEGORIES,
105
+ divider: DIVIDER_CATEGORIES,
106
+ grid3: GRID_CATEGORIES,
107
+ grid4: GRID_CATEGORIES,
108
+ img: IMG_CATEGORIES,
109
+ label: LABEL_CATEGORIES,
110
+ link: TYPOGRAPHY_CATEGORIES,
111
+ list: LIST_CATEGORIES,
112
+ listItem: TYPOGRAPHY_CATEGORIES,
113
+ pageTitle: TYPOGRAPHY_CATEGORIES,
114
+ row: ROW_CATEGORIES,
115
+ section: SECTION_CATEGORIES,
116
+ sectionTitle: TYPOGRAPHY_CATEGORIES,
117
+ stack: STACK_CATEGORIES,
118
+ text: TYPOGRAPHY_CATEGORIES,
119
+ title: TYPOGRAPHY_CATEGORIES
120
+ };
94
121
 
95
122
  class HideTheme extends BaseTheme {
96
123
  constructor(initialConfig) {
@@ -4732,8 +4759,6 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
4732
4759
  noRing: true,
4733
4760
  }, IMG_CATEGORIES);
4734
4761
 
4735
- const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
4736
- 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
4737
4762
  const defaultTheme = {
4738
4763
  button: defaultButtonTheme,
4739
4764
  badge: defaultBadgeTheme,
@@ -4855,41 +4880,41 @@ function useTheme() {
4855
4880
  return useContext(ThemeContext);
4856
4881
  }
4857
4882
 
4858
- function ThemedComponent(allProps) {
4883
+ const ThemedComponent = forwardRef(function ThemedComponent(allProps, ref) {
4859
4884
  const { theme, ...props } = allProps;
4860
4885
  const { Tag, finalClasses, finalProps } = useMemo(() => {
4861
4886
  // Pass the full allProps and let getComponentConfig handle filtering
4862
4887
  return theme.getComponentConfig(allProps);
4863
4888
  }, [theme, allProps]);
4864
- return (jsx(Tag, { className: finalClasses, ...finalProps, children: props.children }));
4865
- }
4889
+ return (jsx(Tag, { ref: ref, className: finalClasses, ...finalProps, children: props.children }));
4890
+ });
4866
4891
 
4867
- const Button = (props) => {
4892
+ const Button = forwardRef(function Button(props, ref) {
4868
4893
  const theme = useTheme();
4869
- return jsx(ThemedComponent, { theme: theme.button, ...props });
4870
- };
4894
+ return jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
4895
+ });
4871
4896
 
4872
- const Badge = (props) => {
4897
+ const Badge = forwardRef(function Badge(props, ref) {
4873
4898
  const theme = useTheme();
4874
- return jsx(ThemedComponent, { theme: theme.badge, ...props });
4875
- };
4899
+ return jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
4900
+ });
4876
4901
 
4877
- const Divider = (props) => {
4902
+ const Divider = forwardRef(function Divider(props, ref) {
4878
4903
  const theme = useTheme();
4879
- return jsx(ThemedComponent, { theme: theme.divider, ...props });
4880
- };
4904
+ return jsx(ThemedComponent, { theme: theme.divider, ref: ref, ...props });
4905
+ });
4881
4906
 
4882
- const Chip = (props) => {
4907
+ const Chip = forwardRef(function Chip(props, ref) {
4883
4908
  const theme = useTheme();
4884
- return jsx(ThemedComponent, { theme: theme.chip, ...props });
4885
- };
4909
+ return jsx(ThemedComponent, { theme: theme.chip, ref: ref, ...props });
4910
+ });
4886
4911
 
4887
- const Code = (props) => {
4912
+ const Code = forwardRef(function Code(props, ref) {
4888
4913
  const theme = useTheme();
4889
- return jsx(ThemedComponent, { theme: theme.code, ...props });
4890
- };
4914
+ return jsx(ThemedComponent, { theme: theme.code, ref: ref, ...props });
4915
+ });
4891
4916
 
4892
- const Checkbox = (props) => {
4917
+ const Checkbox = forwardRef(function Checkbox(props, ref) {
4893
4918
  const theme = useTheme();
4894
4919
  // Extract only theme-relevant props for wrapper and check components
4895
4920
  const {
@@ -4909,87 +4934,87 @@ const Checkbox = (props) => {
4909
4934
  filled, outline,
4910
4935
  pill, sharp, rounded
4911
4936
  };
4912
- 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() })] }));
4913
- };
4937
+ 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() })] }));
4938
+ });
4914
4939
 
4915
- const Label = (props) => {
4940
+ const Label = forwardRef(function Label(props, ref) {
4916
4941
  const theme = useTheme();
4917
- return jsx(ThemedComponent, { theme: theme.label, ...props });
4918
- };
4942
+ return jsx(ThemedComponent, { theme: theme.label, ref: ref, ...props });
4943
+ });
4919
4944
 
4920
- const Img = (props) => {
4945
+ const Img = forwardRef(function Img(props, ref) {
4921
4946
  const theme = useTheme();
4922
- return (jsx(ThemedComponent, { theme: theme.img, ...props }));
4923
- };
4947
+ return (jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
4948
+ });
4924
4949
 
4925
- const Section = (props) => {
4950
+ const Section = forwardRef(function Section(props, ref) {
4926
4951
  const theme = useTheme();
4927
- return jsx(ThemedComponent, { theme: theme.section, ...props });
4928
- };
4952
+ return jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
4953
+ });
4929
4954
 
4930
- const Container = (props) => {
4955
+ const Container = forwardRef(function Container(props, ref) {
4931
4956
  const theme = useTheme();
4932
- return jsx(ThemedComponent, { theme: theme.container, ...props });
4933
- };
4957
+ return jsx(ThemedComponent, { theme: theme.container, ref: ref, ...props });
4958
+ });
4934
4959
 
4935
- const Col = (props) => {
4960
+ const Col = forwardRef(function Col(props, ref) {
4936
4961
  const theme = useTheme();
4937
- return jsx(ThemedComponent, { theme: theme.col, ...props });
4938
- };
4962
+ return jsx(ThemedComponent, { theme: theme.col, ref: ref, ...props });
4963
+ });
4939
4964
 
4940
- const Row = (props) => {
4965
+ const Row = forwardRef(function Row(props, ref) {
4941
4966
  const theme = useTheme();
4942
- return jsx(ThemedComponent, { theme: theme.row, ...props });
4943
- };
4967
+ return jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
4968
+ });
4944
4969
 
4945
- const Grid3 = (props) => {
4970
+ const Grid3 = forwardRef(function Grid3(props, ref) {
4946
4971
  const theme = useTheme();
4947
- return jsx(ThemedComponent, { theme: theme.grid3, ...props });
4948
- };
4949
- const Grid4 = (props) => {
4972
+ return jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
4973
+ });
4974
+ const Grid4 = forwardRef(function Grid4(props, ref) {
4950
4975
  const theme = useTheme();
4951
- return jsx(ThemedComponent, { theme: theme.grid4, ...props });
4952
- };
4976
+ return jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
4977
+ });
4953
4978
 
4954
- const Card = (props) => {
4979
+ const Card = forwardRef(function Card(props, ref) {
4955
4980
  const theme = useTheme();
4956
- return jsx(ThemedComponent, { theme: theme.card, ...props });
4957
- };
4981
+ return jsx(ThemedComponent, { ref: ref, theme: theme.card, ...props });
4982
+ });
4958
4983
 
4959
- const Stack = (props) => {
4984
+ const Stack = forwardRef(function Stack(props, ref) {
4960
4985
  const theme = useTheme();
4961
4986
  const stackTheme = theme.stack;
4962
- return jsx(ThemedComponent, { theme: stackTheme, ...props });
4963
- };
4987
+ return jsx(ThemedComponent, { theme: stackTheme, ref: ref, ...props });
4988
+ });
4964
4989
 
4965
- const PageTitle = (props) => {
4990
+ const PageTitle = forwardRef(function PageTitle(props, ref) {
4966
4991
  const theme = useTheme();
4967
- return jsx(ThemedComponent, { theme: theme.pageTitle, ...props });
4968
- };
4969
- const SectionTitle = (props) => {
4992
+ return jsx(ThemedComponent, { ref: ref, theme: theme.pageTitle, ...props });
4993
+ });
4994
+ const SectionTitle = forwardRef(function SectionTitle(props, ref) {
4970
4995
  const theme = useTheme();
4971
- return jsx(ThemedComponent, { theme: theme.sectionTitle, ...props });
4972
- };
4973
- const Title = (props) => {
4996
+ return jsx(ThemedComponent, { ref: ref, theme: theme.sectionTitle, ...props });
4997
+ });
4998
+ const Title = forwardRef(function Title(props, ref) {
4974
4999
  const theme = useTheme();
4975
- return jsx(ThemedComponent, { theme: theme.title, ...props });
4976
- };
4977
- const Text = (props) => {
5000
+ return jsx(ThemedComponent, { ref: ref, theme: theme.title, ...props });
5001
+ });
5002
+ const Text = forwardRef(function Text(props, ref) {
4978
5003
  const theme = useTheme();
4979
- return jsx(ThemedComponent, { theme: theme.text, ...props });
4980
- };
4981
- const Link = (props) => {
5004
+ return jsx(ThemedComponent, { ref: ref, theme: theme.text, ...props });
5005
+ });
5006
+ const Link = forwardRef(function Link(props, ref) {
4982
5007
  const theme = useTheme();
4983
- return jsx(ThemedComponent, { theme: theme.link, ...props });
4984
- };
4985
- const ListItem = (props) => {
5008
+ return jsx(ThemedComponent, { ref: ref, theme: theme.link, ...props });
5009
+ });
5010
+ const ListItem = forwardRef(function ListItem(props, ref) {
4986
5011
  const theme = useTheme();
4987
- return jsx(ThemedComponent, { theme: theme.listItem, ...props });
4988
- };
4989
- const List = (props) => {
5012
+ return jsx(ThemedComponent, { ref: ref, theme: theme.listItem, ...props });
5013
+ });
5014
+ const List = forwardRef(function List(props, ref) {
4990
5015
  const theme = useTheme();
4991
- return jsx(ThemedComponent, { theme: theme.list, ...props });
4992
- };
5016
+ return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
5017
+ });
4993
5018
 
4994
- 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, 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 };
5019
+ 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 };
4995
5020
  //# sourceMappingURL=index.esm.js.map