@vaneui/ui 0.2.1-alpha.20250813194307.2bb87da → 0.2.1-alpha.20250820100624.167a145
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/README.md +125 -10
- package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts +1 -0
- package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +2 -0
- package/dist/index.esm.js +32 -10
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +32 -10
- package/dist/index.js.map +1 -1
- package/dist/ui.css +19 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3771,6 +3771,15 @@ class ShadowAppearanceTheme extends BaseTheme {
|
|
|
3771
3771
|
static createTheme(src = {}) {
|
|
3772
3772
|
return new ShadowAppearanceTheme(src);
|
|
3773
3773
|
}
|
|
3774
|
+
static createLayoutTheme(src = {}) {
|
|
3775
|
+
const theme = new ShadowAppearanceTheme(src);
|
|
3776
|
+
ComponentKeys.appearance.forEach((key) => {
|
|
3777
|
+
if (theme[key] === ShadowAppearanceTheme.defaultShadow) {
|
|
3778
|
+
theme[key] = ShadowAppearanceTheme.layoutShadow;
|
|
3779
|
+
}
|
|
3780
|
+
});
|
|
3781
|
+
return theme;
|
|
3782
|
+
}
|
|
3774
3783
|
}
|
|
3775
3784
|
ShadowAppearanceTheme.defaultShadow = {
|
|
3776
3785
|
xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "" },
|
|
@@ -3779,6 +3788,13 @@ ShadowAppearanceTheme.defaultShadow = {
|
|
|
3779
3788
|
lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "" },
|
|
3780
3789
|
xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "" }
|
|
3781
3790
|
};
|
|
3791
|
+
ShadowAppearanceTheme.layoutShadow = {
|
|
3792
|
+
xs: { base: "shadow-2xs", hover: "", active: "" },
|
|
3793
|
+
sm: { base: "shadow-xs", hover: "", active: "" },
|
|
3794
|
+
md: { base: "shadow-sm", hover: "", active: "" },
|
|
3795
|
+
lg: { base: "shadow-md", hover: "", active: "" },
|
|
3796
|
+
xl: { base: "shadow-lg", hover: "", active: "" }
|
|
3797
|
+
};
|
|
3782
3798
|
|
|
3783
3799
|
class GenericVariantTheme extends BaseTheme {
|
|
3784
3800
|
constructor(variantInstances) {
|
|
@@ -3813,6 +3829,12 @@ class GenericVariantTheme extends BaseTheme {
|
|
|
3813
3829
|
filled: ShadowAppearanceTheme.createTheme({})
|
|
3814
3830
|
});
|
|
3815
3831
|
}
|
|
3832
|
+
static createLayoutShadowTheme() {
|
|
3833
|
+
return new GenericVariantTheme({
|
|
3834
|
+
outline: ShadowAppearanceTheme.createLayoutTheme({}),
|
|
3835
|
+
filled: ShadowAppearanceTheme.createLayoutTheme({})
|
|
3836
|
+
});
|
|
3837
|
+
}
|
|
3816
3838
|
static createBorderAppearanceTheme() {
|
|
3817
3839
|
return new GenericVariantTheme({
|
|
3818
3840
|
outline: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
|
|
@@ -4026,7 +4048,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
|
|
|
4026
4048
|
text: GenericVariantTheme.createUIElementTextTheme(),
|
|
4027
4049
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4028
4050
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4029
|
-
shadow: GenericVariantTheme.
|
|
4051
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme()
|
|
4030
4052
|
},
|
|
4031
4053
|
layout: {
|
|
4032
4054
|
...defaultLayoutTheme,
|
|
@@ -4067,7 +4089,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
|
|
|
4067
4089
|
text: GenericVariantTheme.createUIElementTextTheme(),
|
|
4068
4090
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4069
4091
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4070
|
-
shadow: GenericVariantTheme.
|
|
4092
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme()
|
|
4071
4093
|
},
|
|
4072
4094
|
layout: {
|
|
4073
4095
|
...defaultLayoutTheme,
|
|
@@ -4107,7 +4129,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
|
|
|
4107
4129
|
text: GenericVariantTheme.createUIElementTextTheme(),
|
|
4108
4130
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4109
4131
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4110
|
-
shadow: GenericVariantTheme.
|
|
4132
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme()
|
|
4111
4133
|
},
|
|
4112
4134
|
layout: {
|
|
4113
4135
|
...defaultLayoutTheme,
|
|
@@ -4388,7 +4410,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
|
|
|
4388
4410
|
wrap: new WrapTheme(),
|
|
4389
4411
|
direction: new DirectionTheme(),
|
|
4390
4412
|
breakpoint: new BreakpointTheme(),
|
|
4391
|
-
shadow: ShadowAppearanceTheme.
|
|
4413
|
+
shadow: ShadowAppearanceTheme.createLayoutTheme(),
|
|
4392
4414
|
},
|
|
4393
4415
|
appearance: {
|
|
4394
4416
|
background: AppearanceTheme.createLayoutBgTheme(),
|
|
@@ -4428,7 +4450,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
|
|
|
4428
4450
|
background: AppearanceTheme.createLayoutBgTheme(),
|
|
4429
4451
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4430
4452
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4431
|
-
shadow: GenericVariantTheme.
|
|
4453
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme(),
|
|
4432
4454
|
}
|
|
4433
4455
|
}, {
|
|
4434
4456
|
row: true,
|
|
@@ -4484,7 +4506,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
|
|
|
4484
4506
|
text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
|
|
4485
4507
|
border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
|
|
4486
4508
|
ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
|
|
4487
|
-
shadow: GenericVariantTheme.
|
|
4509
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme(),
|
|
4488
4510
|
}
|
|
4489
4511
|
}, {
|
|
4490
4512
|
noRing: true,
|
|
@@ -4513,7 +4535,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
|
|
|
4513
4535
|
background: AppearanceTheme.createLayoutBgTheme(),
|
|
4514
4536
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4515
4537
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4516
|
-
shadow: GenericVariantTheme.
|
|
4538
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme(),
|
|
4517
4539
|
}
|
|
4518
4540
|
}, {
|
|
4519
4541
|
column: true,
|
|
@@ -4546,7 +4568,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
|
|
|
4546
4568
|
background: AppearanceTheme.createLayoutBgTheme(),
|
|
4547
4569
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4548
4570
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4549
|
-
shadow: GenericVariantTheme.
|
|
4571
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme(),
|
|
4550
4572
|
}
|
|
4551
4573
|
}, {
|
|
4552
4574
|
md: true,
|
|
@@ -4586,7 +4608,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
|
|
|
4586
4608
|
text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
|
|
4587
4609
|
border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
|
|
4588
4610
|
ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
|
|
4589
|
-
shadow: ShadowAppearanceTheme.
|
|
4611
|
+
shadow: ShadowAppearanceTheme.createLayoutTheme(),
|
|
4590
4612
|
},
|
|
4591
4613
|
layout: {
|
|
4592
4614
|
...defaultLayoutTheme,
|
|
@@ -4747,7 +4769,7 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
|
|
|
4747
4769
|
appearance: {
|
|
4748
4770
|
border: GenericVariantTheme.createUIElementBorderTheme(),
|
|
4749
4771
|
ring: GenericVariantTheme.createUIElementRingTheme(),
|
|
4750
|
-
shadow: GenericVariantTheme.
|
|
4772
|
+
shadow: GenericVariantTheme.createLayoutShadowTheme()
|
|
4751
4773
|
}
|
|
4752
4774
|
}, {
|
|
4753
4775
|
rounded: true,
|