@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.
- package/dist/components/examples/ref-usage-examples.d.ts +29 -0
- package/dist/components/examples/theme-types-strictness-compile-check.d.ts +5 -0
- package/dist/components/tests/ref-support-comprehensive.test.d.ts +1 -0
- package/dist/components/tests/ref-support.test.d.ts +1 -0
- package/dist/components/tests/theme-types-strictness.test.d.ts +1 -0
- package/dist/components/themeContext.d.ts +67 -52
- package/dist/components/themedComponent.d.ts +1 -1
- package/dist/components/ui/badge.d.ts +2 -2
- package/dist/components/ui/button.d.ts +2 -2
- package/dist/components/ui/card.d.ts +2 -2
- package/dist/components/ui/checkbox.d.ts +83 -3
- package/dist/components/ui/chip.d.ts +2 -2
- package/dist/components/ui/code.d.ts +121 -3
- package/dist/components/ui/col.d.ts +2 -2
- package/dist/components/ui/container.d.ts +2 -2
- package/dist/components/ui/divider.d.ts +74 -3
- package/dist/components/ui/grid.d.ts +3 -3
- package/dist/components/ui/img.d.ts +81 -3
- package/dist/components/ui/label.d.ts +109 -3
- package/dist/components/ui/props/keys.d.ts +3 -0
- package/dist/components/ui/row.d.ts +2 -2
- package/dist/components/ui/section.d.ts +2 -2
- package/dist/components/ui/stack.d.ts +2 -2
- package/dist/components/ui/typography.d.ts +110 -9
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +101 -76
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +100 -74
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,109 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
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
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { RowProps } from './props/props';
|
|
3
|
-
export declare const Row:
|
|
3
|
+
export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { SectionProps } from './props/props';
|
|
3
|
-
export declare const Section:
|
|
3
|
+
export declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { StackProps } from './props/props';
|
|
3
|
-
export declare const Stack:
|
|
3
|
+
export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,9 +1,110 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { TypographyProps
|
|
3
|
-
export declare const PageTitle:
|
|
4
|
-
export declare const SectionTitle:
|
|
5
|
-
export declare const Title:
|
|
6
|
-
export declare const Text:
|
|
7
|
-
export declare const Link:
|
|
8
|
-
export declare const ListItem:
|
|
9
|
-
export declare const List:
|
|
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,
|
|
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,
|
|
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
|