@vaneui/ui 0.0.16 → 0.0.17
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/theme/components/ui/props/keys.d.ts +1 -1
- package/dist/components/theme/components/ui/theme/sectionTheme.d.ts +15 -0
- package/dist/components/theme/index.js +29 -1
- package/dist/components/theme/index.js.map +1 -1
- package/dist/components/ui/props/keys.d.ts +1 -1
- package/dist/components/ui/theme/sectionTheme.d.ts +15 -0
- package/dist/index.esm.js +29 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +29 -1
- package/dist/index.js.map +1 -1
- package/dist/vars.css +139 -0
- package/package.json +9 -3
|
@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
|
|
|
75
75
|
export type DividerKey = typeof DIVIDER_KEYS[number];
|
|
76
76
|
export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap"];
|
|
77
77
|
export type ContainerKey = typeof CONTAINER_KEYS[number];
|
|
78
|
-
export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap"];
|
|
78
|
+
export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
|
|
79
79
|
export type SectionKey = typeof SECTION_KEYS[number];
|
|
@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
|
|
|
5
5
|
import { SectionProps } from "../props/props";
|
|
6
6
|
import { PxTheme } from "./size/pxTheme";
|
|
7
7
|
import { PyTheme } from "./size/pyTheme";
|
|
8
|
+
import { VariantTheme } from "./appearance/variantTheme";
|
|
9
|
+
import { BorderTheme } from "./layout/borderTheme";
|
|
10
|
+
import { RingTheme } from "./layout/ringTheme";
|
|
11
|
+
import { RadiusTheme } from "./layout/radiusTheme";
|
|
12
|
+
import { ShadowTheme } from "./layout/shadowTheme";
|
|
8
13
|
export interface SectionTheme<P> extends BaseComponentTheme<P> {
|
|
9
14
|
size: {
|
|
10
15
|
px: PxTheme;
|
|
11
16
|
py: PyTheme;
|
|
12
17
|
gap: GapTheme;
|
|
18
|
+
shadow: ShadowTheme;
|
|
19
|
+
};
|
|
20
|
+
appearance: {
|
|
21
|
+
background: VariantTheme;
|
|
22
|
+
text: VariantTheme;
|
|
23
|
+
border: VariantTheme;
|
|
24
|
+
ring: VariantTheme;
|
|
13
25
|
};
|
|
14
26
|
layout: DefaultLayoutThemes<P> & {
|
|
15
27
|
wrap: WrapTheme;
|
|
16
28
|
direction: DirectionTheme;
|
|
29
|
+
border: BorderTheme;
|
|
30
|
+
ring: RingTheme;
|
|
31
|
+
radius: RadiusTheme;
|
|
17
32
|
};
|
|
18
33
|
}
|
|
19
34
|
export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;
|
|
@@ -208,7 +208,11 @@ const TYPOGRAPHY_COMPONENT_KEYS = [
|
|
|
208
208
|
...JUSTIFY_KEYS,
|
|
209
209
|
...WRAP_KEYS,
|
|
210
210
|
...BREAKPOINT_KEYS,
|
|
211
|
-
...GAP_KEYS
|
|
211
|
+
...GAP_KEYS,
|
|
212
|
+
...BORDER_KEYS,
|
|
213
|
+
...SHADOW_KEYS,
|
|
214
|
+
...RING_KEYS,
|
|
215
|
+
...SHAPE_KEYS,
|
|
212
216
|
];
|
|
213
217
|
|
|
214
218
|
const rowToColumnBreakpointClasses = {
|
|
@@ -1751,10 +1755,30 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
|
|
|
1751
1755
|
xl: 'gap-16',
|
|
1752
1756
|
}
|
|
1753
1757
|
}),
|
|
1758
|
+
shadow: new ShadowTheme(),
|
|
1759
|
+
},
|
|
1760
|
+
appearance: {
|
|
1761
|
+
background: LayoutAppearanceTheme.createDefaultStyle({
|
|
1762
|
+
base: layoutBackgroundAppearanceClasses,
|
|
1763
|
+
}),
|
|
1764
|
+
text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
|
|
1765
|
+
border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
|
|
1766
|
+
ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
|
|
1754
1767
|
},
|
|
1755
1768
|
layout: {
|
|
1756
1769
|
wrap: new WrapTheme(),
|
|
1757
1770
|
direction: new DirectionTheme(),
|
|
1771
|
+
border: new BorderTheme(),
|
|
1772
|
+
ring: new RingTheme(),
|
|
1773
|
+
radius: new RadiusTheme({
|
|
1774
|
+
rounded: {
|
|
1775
|
+
xs: 'rounded-md',
|
|
1776
|
+
sm: 'rounded-lg',
|
|
1777
|
+
md: 'rounded-xl',
|
|
1778
|
+
lg: 'rounded-2xl',
|
|
1779
|
+
xl: 'rounded-3xl',
|
|
1780
|
+
}
|
|
1781
|
+
}),
|
|
1758
1782
|
},
|
|
1759
1783
|
}, {
|
|
1760
1784
|
md: true,
|
|
@@ -1762,6 +1786,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
|
|
|
1762
1786
|
itemsStart: true,
|
|
1763
1787
|
gap: true,
|
|
1764
1788
|
padding: true,
|
|
1789
|
+
noBorder: true,
|
|
1790
|
+
noRing: true,
|
|
1791
|
+
noShadow: true,
|
|
1792
|
+
sharp: true,
|
|
1765
1793
|
});
|
|
1766
1794
|
|
|
1767
1795
|
const gridDefaults = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
|
|
|
75
75
|
export type DividerKey = typeof DIVIDER_KEYS[number];
|
|
76
76
|
export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap"];
|
|
77
77
|
export type ContainerKey = typeof CONTAINER_KEYS[number];
|
|
78
|
-
export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap"];
|
|
78
|
+
export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
|
|
79
79
|
export type SectionKey = typeof SECTION_KEYS[number];
|
|
@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
|
|
|
5
5
|
import { SectionProps } from "../props/props";
|
|
6
6
|
import { PxTheme } from "./size/pxTheme";
|
|
7
7
|
import { PyTheme } from "./size/pyTheme";
|
|
8
|
+
import { VariantTheme } from "./appearance/variantTheme";
|
|
9
|
+
import { BorderTheme } from "./layout/borderTheme";
|
|
10
|
+
import { RingTheme } from "./layout/ringTheme";
|
|
11
|
+
import { RadiusTheme } from "./layout/radiusTheme";
|
|
12
|
+
import { ShadowTheme } from "./layout/shadowTheme";
|
|
8
13
|
export interface SectionTheme<P> extends BaseComponentTheme<P> {
|
|
9
14
|
size: {
|
|
10
15
|
px: PxTheme;
|
|
11
16
|
py: PyTheme;
|
|
12
17
|
gap: GapTheme;
|
|
18
|
+
shadow: ShadowTheme;
|
|
19
|
+
};
|
|
20
|
+
appearance: {
|
|
21
|
+
background: VariantTheme;
|
|
22
|
+
text: VariantTheme;
|
|
23
|
+
border: VariantTheme;
|
|
24
|
+
ring: VariantTheme;
|
|
13
25
|
};
|
|
14
26
|
layout: DefaultLayoutThemes<P> & {
|
|
15
27
|
wrap: WrapTheme;
|
|
16
28
|
direction: DirectionTheme;
|
|
29
|
+
border: BorderTheme;
|
|
30
|
+
ring: RingTheme;
|
|
31
|
+
radius: RadiusTheme;
|
|
17
32
|
};
|
|
18
33
|
}
|
|
19
34
|
export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;
|
package/dist/index.esm.js
CHANGED
|
@@ -2937,7 +2937,11 @@ const SECTION_KEYS = [
|
|
|
2937
2937
|
...JUSTIFY_KEYS,
|
|
2938
2938
|
...WRAP_KEYS,
|
|
2939
2939
|
...BREAKPOINT_KEYS,
|
|
2940
|
-
...GAP_KEYS
|
|
2940
|
+
...GAP_KEYS,
|
|
2941
|
+
...BORDER_KEYS,
|
|
2942
|
+
...SHADOW_KEYS,
|
|
2943
|
+
...RING_KEYS,
|
|
2944
|
+
...SHAPE_KEYS,
|
|
2941
2945
|
];
|
|
2942
2946
|
|
|
2943
2947
|
const rowToColumnBreakpointClasses = {
|
|
@@ -4480,10 +4484,30 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
|
|
|
4480
4484
|
xl: 'gap-16',
|
|
4481
4485
|
}
|
|
4482
4486
|
}),
|
|
4487
|
+
shadow: new ShadowTheme(),
|
|
4488
|
+
},
|
|
4489
|
+
appearance: {
|
|
4490
|
+
background: LayoutAppearanceTheme.createDefaultStyle({
|
|
4491
|
+
base: layoutBackgroundAppearanceClasses,
|
|
4492
|
+
}),
|
|
4493
|
+
text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
|
|
4494
|
+
border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
|
|
4495
|
+
ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
|
|
4483
4496
|
},
|
|
4484
4497
|
layout: {
|
|
4485
4498
|
wrap: new WrapTheme(),
|
|
4486
4499
|
direction: new DirectionTheme(),
|
|
4500
|
+
border: new BorderTheme(),
|
|
4501
|
+
ring: new RingTheme(),
|
|
4502
|
+
radius: new RadiusTheme({
|
|
4503
|
+
rounded: {
|
|
4504
|
+
xs: 'rounded-md',
|
|
4505
|
+
sm: 'rounded-lg',
|
|
4506
|
+
md: 'rounded-xl',
|
|
4507
|
+
lg: 'rounded-2xl',
|
|
4508
|
+
xl: 'rounded-3xl',
|
|
4509
|
+
}
|
|
4510
|
+
}),
|
|
4487
4511
|
},
|
|
4488
4512
|
}, {
|
|
4489
4513
|
md: true,
|
|
@@ -4491,6 +4515,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
|
|
|
4491
4515
|
itemsStart: true,
|
|
4492
4516
|
gap: true,
|
|
4493
4517
|
padding: true,
|
|
4518
|
+
noBorder: true,
|
|
4519
|
+
noRing: true,
|
|
4520
|
+
noShadow: true,
|
|
4521
|
+
sharp: true,
|
|
4494
4522
|
});
|
|
4495
4523
|
|
|
4496
4524
|
const gridDefaults = {
|