@vaneui/ui 0.2.1-alpha.20250811191248.a18a87d → 0.2.1-alpha.20250812182914.4e44540
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/tests/grid2.test.d.ts +1 -0
- package/dist/components/themeContext.d.ts +3 -0
- package/dist/components/ui/grid.d.ts +1 -0
- package/dist/components/ui/layout.d.ts +1 -1
- package/dist/components/ui/props/keys.d.ts +1 -1
- package/dist/components/ui/theme/gridTheme.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +11 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +11 -1
- package/dist/index.js.map +1 -1
- package/dist/ui.css +11 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '@testing-library/jest-dom';
|
|
@@ -30,6 +30,7 @@ export interface ThemeProps {
|
|
|
30
30
|
col: ComponentTheme<ColProps, ColTheme>;
|
|
31
31
|
stack: ComponentTheme<StackProps, StackTheme>;
|
|
32
32
|
section: ComponentTheme<SectionProps, SectionTheme>;
|
|
33
|
+
grid2: ComponentTheme<GridProps, GridTheme>;
|
|
33
34
|
grid3: ComponentTheme<GridProps, GridTheme>;
|
|
34
35
|
grid4: ComponentTheme<GridProps, GridTheme>;
|
|
35
36
|
pageTitle: ComponentTheme<TypographyProps, TypographyTheme>;
|
|
@@ -77,6 +78,7 @@ export type ThemeDefaults = {
|
|
|
77
78
|
col?: Partial<BooleanKeys<ColProps>>;
|
|
78
79
|
stack?: Partial<BooleanKeys<StackProps>>;
|
|
79
80
|
section?: Partial<BooleanKeys<SectionProps>>;
|
|
81
|
+
grid2?: Partial<BooleanKeys<GridProps>>;
|
|
80
82
|
grid3?: Partial<BooleanKeys<GridProps>>;
|
|
81
83
|
grid4?: Partial<BooleanKeys<GridProps>>;
|
|
82
84
|
pageTitle?: Partial<BooleanKeys<TypographyProps>>;
|
|
@@ -106,6 +108,7 @@ export type ThemeExtraClasses = {
|
|
|
106
108
|
col?: Partial<StringValueKeys<ColProps>>;
|
|
107
109
|
stack?: Partial<StringValueKeys<StackProps>>;
|
|
108
110
|
section?: Partial<StringValueKeys<SectionProps>>;
|
|
111
|
+
grid2?: Partial<StringValueKeys<GridProps>>;
|
|
109
112
|
grid3?: Partial<StringValueKeys<GridProps>>;
|
|
110
113
|
grid4?: Partial<StringValueKeys<GridProps>>;
|
|
111
114
|
pageTitle?: Partial<StringValueKeys<TypographyProps>>;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { GridProps } from './props/props';
|
|
3
|
+
export declare const Grid2: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
3
4
|
export declare const Grid3: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
4
5
|
export declare const Grid4: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -2,6 +2,6 @@ export { Section } from './section';
|
|
|
2
2
|
export { Container } from './container';
|
|
3
3
|
export { Col } from './col';
|
|
4
4
|
export { Row } from './row';
|
|
5
|
-
export { Grid3, Grid4 } from './grid';
|
|
5
|
+
export { Grid2, Grid3, Grid4 } from './grid';
|
|
6
6
|
export { Card } from './card';
|
|
7
7
|
export { Stack } from './stack';
|
|
@@ -93,6 +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"];
|
|
96
|
+
export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid2", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
|
|
97
97
|
export type ComponentKey = typeof COMPONENT[number];
|
|
98
98
|
export declare const ComponentCategories: Record<ComponentKey, readonly string[]>;
|
|
@@ -16,5 +16,6 @@ export interface GridTheme extends BaseComponentTheme {
|
|
|
16
16
|
flexDirection: DirectionTheme;
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
+
export declare const defaultGrid2Theme: ComponentTheme<GridProps, GridTheme>;
|
|
19
20
|
export declare const defaultGrid3Theme: ComponentTheme<GridProps, GridTheme>;
|
|
20
21
|
export declare const defaultGrid4Theme: ComponentTheme<GridProps, GridTheme>;
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { Code } from "./components/ui/code";
|
|
|
6
6
|
export { Checkbox } from "./components/ui/checkbox";
|
|
7
7
|
export { Label } from "./components/ui/label";
|
|
8
8
|
export { Img } from "./components/ui/img";
|
|
9
|
-
export { Section, Container, Col, Row, Stack, Grid3, Grid4, Card } from "./components/ui/layout";
|
|
9
|
+
export { Section, Container, Col, Row, Stack, Grid2, Grid3, Grid4, Card } from "./components/ui/layout";
|
|
10
10
|
export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";
|
|
11
11
|
export { COMPONENT, ComponentKeys, ComponentCategories, type ComponentKey, } from "./components/ui/props/keys";
|
|
12
12
|
export { ThemeProvider, useTheme, defaultTheme, type ThemeProps, type ThemeDefaults, type ThemeExtraClasses, type ThemeProviderProps, type PartialTheme, } from './components/themeContext';
|
package/dist/index.esm.js
CHANGED
|
@@ -92,7 +92,7 @@ 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
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'];
|
|
95
|
+
'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
|
|
96
96
|
const ComponentCategories = {
|
|
97
97
|
badge: BADGE_CATEGORIES,
|
|
98
98
|
button: BUTTON_CATEGORIES,
|
|
@@ -103,6 +103,7 @@ const ComponentCategories = {
|
|
|
103
103
|
col: COL_CATEGORIES,
|
|
104
104
|
container: CONTAINER_CATEGORIES,
|
|
105
105
|
divider: DIVIDER_CATEGORIES,
|
|
106
|
+
grid2: GRID_CATEGORIES,
|
|
106
107
|
grid3: GRID_CATEGORIES,
|
|
107
108
|
grid4: GRID_CATEGORIES,
|
|
108
109
|
img: IMG_CATEGORIES,
|
|
@@ -4641,6 +4642,9 @@ const gridSubThemes = {
|
|
|
4641
4642
|
flexDirection: new DirectionTheme(),
|
|
4642
4643
|
},
|
|
4643
4644
|
};
|
|
4645
|
+
const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
|
|
4646
|
+
return props.href ? "a" : "div";
|
|
4647
|
+
});
|
|
4644
4648
|
const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
|
|
4645
4649
|
return props.href ? "a" : "div";
|
|
4646
4650
|
});
|
|
@@ -4771,6 +4775,7 @@ const defaultTheme = {
|
|
|
4771
4775
|
col: defaultColTheme,
|
|
4772
4776
|
stack: defaultStackTheme,
|
|
4773
4777
|
section: defaultSectionTheme,
|
|
4778
|
+
grid2: defaultGrid2Theme,
|
|
4774
4779
|
grid3: defaultGrid3Theme,
|
|
4775
4780
|
grid4: defaultGrid4Theme,
|
|
4776
4781
|
pageTitle: pageTitleTheme,
|
|
@@ -4967,6 +4972,10 @@ const Row = forwardRef(function Row(props, ref) {
|
|
|
4967
4972
|
return jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
|
|
4968
4973
|
});
|
|
4969
4974
|
|
|
4975
|
+
const Grid2 = forwardRef(function Grid2(props, ref) {
|
|
4976
|
+
const theme = useTheme();
|
|
4977
|
+
return jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
|
|
4978
|
+
});
|
|
4970
4979
|
const Grid3 = forwardRef(function Grid3(props, ref) {
|
|
4971
4980
|
const theme = useTheme();
|
|
4972
4981
|
return jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
|
|
@@ -5016,5 +5025,5 @@ const List = forwardRef(function List(props, ref) {
|
|
|
5016
5025
|
return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
|
|
5017
5026
|
});
|
|
5018
5027
|
|
|
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 };
|
|
5028
|
+
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, Grid2, 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 };
|
|
5020
5029
|
//# sourceMappingURL=index.esm.js.map
|