@vaneui/ui 0.2.1-alpha.20250830124557.3818ff4 → 0.2.1-alpha.20250830140007.8b4cce3

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.
Files changed (15) hide show
  1. package/dist/components/ui/img.d.ts +2 -0
  2. package/dist/components/ui/label.d.ts +2 -0
  3. package/dist/components/ui/props/keys.d.ts +11 -11
  4. package/dist/components/ui/theme/cardTheme.d.ts +5 -4
  5. package/dist/components/ui/theme/colTheme.d.ts +2 -2
  6. package/dist/components/ui/theme/containerTheme.d.ts +4 -4
  7. package/dist/components/ui/theme/gridTheme.d.ts +3 -2
  8. package/dist/components/ui/theme/labelTheme.d.ts +2 -1
  9. package/dist/components/ui/theme/rowTheme.d.ts +2 -2
  10. package/dist/components/ui/theme/stackTheme.d.ts +2 -2
  11. package/dist/components/ui/theme/typographyTheme.d.ts +3 -2
  12. package/dist/components/ui/typography.d.ts +2 -0
  13. package/dist/index.esm.js +36 -36
  14. package/dist/index.js +36 -36
  15. package/package.json +1 -1
package/dist/components/ui/img.d.ts CHANGED
@@ -77,6 +77,8 @@ export declare const Img: React.ForwardRefExoticComponent<{
77
77
  md?: boolean | undefined;
78
78
  lg?: boolean | undefined;
79
79
  xl?: boolean | undefined;
80
+ filled?: boolean | undefined;
81
+ outline?: boolean | undefined;
80
82
  } & {
81
83
  tag?: React.ElementType;
82
84
  } & React.RefAttributes<HTMLImageElement>>;
package/dist/components/ui/label.d.ts CHANGED
@@ -101,6 +101,8 @@ export declare const Label: React.ForwardRefExoticComponent<{
101
101
  lowercase?: boolean | undefined;
102
102
  capitalize?: boolean | undefined;
103
103
  normalCase?: boolean | undefined;
104
+ filled?: boolean | undefined;
105
+ outline?: boolean | undefined;
104
106
  flexWrap?: boolean | undefined;
105
107
  flexNoWrap?: boolean | undefined;
106
108
  flexWrapReverse?: boolean | undefined;
package/dist/components/ui/props/keys.d.ts CHANGED
@@ -75,19 +75,19 @@ export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "just
75
75
  export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
76
76
  export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
77
77
  export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
78
- export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
79
- export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
80
- export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
81
- export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
82
- export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
83
- export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape"];
84
- export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape"];
85
- export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
78
+ export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "variant"];
79
+ export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding", "variant"];
80
+ export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
81
+ export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
82
+ export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
83
+ export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
84
+ export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
85
+ export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "variant"];
86
86
  export declare const DIVIDER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
87
- export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint"];
87
+ export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint", "variant"];
88
88
  export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
89
- export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
90
- export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape"];
89
+ export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "variant"];
90
+ export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
91
91
  export type CategoryProps = {
92
92
  [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
93
93
  };
package/dist/components/ui/theme/cardTheme.d.ts CHANGED
@@ -8,6 +8,7 @@ import { RadiusTheme } from "./layout/radiusTheme";
8
8
  import { PxTheme } from "./size/pxTheme";
9
9
  import { PyTheme } from "./size/pyTheme";
10
10
  import { AppearanceTheme } from "./appearance/appearanceTheme";
11
+ import { GenericVariantTheme } from "./appearance/genericVariantTheme";
11
12
  import { BreakpointTheme } from "./size/breakpointTheme";
12
13
  import { RingTheme } from "./layout/ringTheme";
13
14
  import { ShadowAppearanceTheme } from "./appearance/shadowAppearanceTheme";
@@ -27,10 +28,10 @@ export interface CardTheme extends BaseTypographyComponentTheme {
27
28
  shadow: ShadowAppearanceTheme;
28
29
  };
29
30
  appearance: {
30
- background: AppearanceTheme;
31
- text: AppearanceTheme;
32
- border: AppearanceTheme;
33
- ring: AppearanceTheme;
31
+ background: GenericVariantTheme<AppearanceTheme>;
32
+ text: GenericVariantTheme<AppearanceTheme>;
33
+ border: GenericVariantTheme<AppearanceTheme>;
34
+ ring: GenericVariantTheme<AppearanceTheme>;
34
35
  };
35
36
  }
36
37
  export declare const defaultCardTheme: ComponentTheme<CardProps, CardTheme>;
package/dist/components/ui/theme/colTheme.d.ts CHANGED
@@ -21,8 +21,8 @@ export interface ColTheme extends BaseComponentTheme {
21
21
  radius: RadiusTheme;
22
22
  };
23
23
  appearance: {
24
- background: AppearanceTheme;
25
- text: AppearanceTheme;
24
+ background: GenericVariantTheme<AppearanceTheme>;
25
+ text: GenericVariantTheme<AppearanceTheme>;
26
26
  border: GenericVariantTheme<AppearanceTheme>;
27
27
  ring: GenericVariantTheme<AppearanceTheme>;
28
28
  shadow: GenericVariantTheme<ShadowAppearanceTheme>;
package/dist/components/ui/theme/containerTheme.d.ts CHANGED
@@ -23,10 +23,10 @@ export interface ContainerTheme extends BaseComponentTheme {
23
23
  radius: RadiusTheme;
24
24
  };
25
25
  appearance: {
26
- background: AppearanceTheme;
27
- text: AppearanceTheme;
28
- border: AppearanceTheme;
29
- ring: AppearanceTheme;
26
+ background: GenericVariantTheme<AppearanceTheme>;
27
+ text: GenericVariantTheme<AppearanceTheme>;
28
+ border: GenericVariantTheme<AppearanceTheme>;
29
+ ring: GenericVariantTheme<AppearanceTheme>;
30
30
  shadow: GenericVariantTheme<ShadowAppearanceTheme>;
31
31
  };
32
32
  }
package/dist/components/ui/theme/gridTheme.d.ts CHANGED
@@ -4,13 +4,14 @@ import { GapTheme } from "./size/gapTheme";
4
4
  import { WrapTheme } from "./layout/wrapTheme";
5
5
  import { DirectionTheme } from "./layout/directionTheme";
6
6
  import { AppearanceTheme } from "./appearance/appearanceTheme";
7
+ import { GenericVariantTheme } from "./appearance/genericVariantTheme";
7
8
  export interface GridTheme extends BaseComponentTheme {
8
9
  size: {
9
10
  gap: GapTheme;
10
11
  };
11
12
  appearance: {
12
- background: AppearanceTheme;
13
- text: AppearanceTheme;
13
+ background: GenericVariantTheme<AppearanceTheme>;
14
+ text: GenericVariantTheme<AppearanceTheme>;
14
15
  };
15
16
  layout: DefaultLayoutThemes & {
16
17
  wrap: WrapTheme;
package/dist/components/ui/theme/labelTheme.d.ts CHANGED
@@ -3,6 +3,7 @@ import { LabelProps } from "../props";
3
3
  import { SizeTheme } from "./size/sizeTheme";
4
4
  import { GapTheme } from "./size/gapTheme";
5
5
  import { AppearanceTheme } from "./appearance/appearanceTheme";
6
+ import { GenericVariantTheme } from "./appearance/genericVariantTheme";
6
7
  import { WrapTheme } from "./layout/wrapTheme";
7
8
  import { DirectionTheme } from "./layout/directionTheme";
8
9
  export interface LabelTheme extends BaseTypographyComponentTheme {
@@ -11,7 +12,7 @@ export interface LabelTheme extends BaseTypographyComponentTheme {
11
12
  gap: GapTheme;
12
13
  };
13
14
  appearance: {
14
- text: AppearanceTheme;
15
+ text: GenericVariantTheme<AppearanceTheme>;
15
16
  };
16
17
  layout: DefaultLayoutThemes & {
17
18
  wrap: WrapTheme;
package/dist/components/ui/theme/rowTheme.d.ts CHANGED
@@ -23,8 +23,8 @@ export interface RowTheme extends BaseComponentTheme {
23
23
  radius: RadiusTheme;
24
24
  };
25
25
  appearance: {
26
- background: AppearanceTheme;
27
- text: AppearanceTheme;
26
+ background: GenericVariantTheme<AppearanceTheme>;
27
+ text: GenericVariantTheme<AppearanceTheme>;
28
28
  border: GenericVariantTheme<AppearanceTheme>;
29
29
  ring: GenericVariantTheme<AppearanceTheme>;
30
30
  shadow: GenericVariantTheme<ShadowAppearanceTheme>;
package/dist/components/ui/theme/stackTheme.d.ts CHANGED
@@ -27,8 +27,8 @@ export interface StackTheme extends BaseComponentTheme {
27
27
  radius: RadiusTheme;
28
28
  };
29
29
  appearance: {
30
- background: AppearanceTheme;
31
- text: AppearanceTheme;
30
+ background: GenericVariantTheme<AppearanceTheme>;
31
+ text: GenericVariantTheme<AppearanceTheme>;
32
32
  border: GenericVariantTheme<AppearanceTheme>;
33
33
  ring: GenericVariantTheme<AppearanceTheme>;
34
34
  shadow: GenericVariantTheme<ShadowAppearanceTheme>;
package/dist/components/ui/theme/typographyTheme.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from "react";
3
3
  import { BaseTypographyComponentTheme, ComponentTheme, DefaultLayoutThemes } from "./common/ComponentTheme";
4
4
  import { SizeTheme } from "./size/sizeTheme";
5
5
  import { AppearanceTheme } from "./appearance/appearanceTheme";
6
+ import { GenericVariantTheme } from "./appearance/genericVariantTheme";
6
7
  import { SizeKey } from "../props";
7
8
  import { PlTheme } from "./size/plTheme";
8
9
  import { ListStyleTheme } from "./list/listStyleTheme";
@@ -11,7 +12,7 @@ export interface TypographyTheme extends BaseTypographyComponentTheme {
11
12
  text: SizeTheme;
12
13
  };
13
14
  appearance: {
14
- text: AppearanceTheme;
15
+ text: GenericVariantTheme<AppearanceTheme>;
15
16
  };
16
17
  layout: DefaultLayoutThemes;
17
18
  }
@@ -28,7 +29,7 @@ export interface ListTheme extends BaseTypographyComponentTheme {
28
29
  paddingLeft: PlTheme;
29
30
  };
30
31
  appearance: {
31
- text: AppearanceTheme;
32
+ text: GenericVariantTheme<AppearanceTheme>;
32
33
  };
33
34
  layout: DefaultLayoutThemes;
34
35
  listStyle: ListStyleTheme;
package/dist/components/ui/typography.d.ts CHANGED
@@ -105,6 +105,8 @@ export declare const List: React.ForwardRefExoticComponent<{
105
105
  lowercase?: boolean | undefined;
106
106
  capitalize?: boolean | undefined;
107
107
  normalCase?: boolean | undefined;
108
+ filled?: boolean | undefined;
109
+ outline?: boolean | undefined;
108
110
  } & {
109
111
  tag?: React.ElementType;
110
112
  } & React.RefAttributes<HTMLUListElement>>;
package/dist/index.esm.js CHANGED
@@ -72,22 +72,22 @@ const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
72
72
  const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
73
73
  const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
74
74
  //typography:
75
- const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE];
76
- const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
75
+ const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
76
+ const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
77
77
  //layout:
78
- const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
79
- const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
80
- const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
81
- const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL];
82
- const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL];
83
- const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING];
78
+ const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
79
+ const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
80
+ const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
81
+ const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...VARIANT];
82
+ const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL, ...VARIANT];
83
+ const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING, ...VARIANT];
84
84
  const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
85
- const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT];
85
+ const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT, ...VARIANT];
86
86
  // Form component categories
87
87
  const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
88
- const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
88
+ const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
89
89
  // Media component categories
90
- const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
90
+ const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
91
91
  const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
92
92
  'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
93
93
  const ComponentCategories = {
@@ -4399,7 +4399,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
4399
4399
  text: new SizeTheme(textSizeMap),
4400
4400
  },
4401
4401
  appearance: {
4402
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4402
+ text: GenericVariantTheme.createUIElementTextTheme(),
4403
4403
  },
4404
4404
  typography: defaultTypographyTheme,
4405
4405
  layout: defaultLayoutTheme,
@@ -4434,7 +4434,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
4434
4434
  text: new SizeTheme(textSizeClasses, false),
4435
4435
  },
4436
4436
  appearance: {
4437
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4437
+ text: GenericVariantTheme.createUIElementTextTheme(),
4438
4438
  },
4439
4439
  typography: defaultTypographyTheme,
4440
4440
  layout: defaultLayoutTheme,
@@ -4445,7 +4445,7 @@ const listItemTheme = new ComponentTheme("li", "", {
4445
4445
  text: new SizeTheme(textSizeClasses, false),
4446
4446
  },
4447
4447
  appearance: {
4448
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4448
+ text: GenericVariantTheme.createUIElementTextTheme(),
4449
4449
  },
4450
4450
  typography: defaultTypographyTheme,
4451
4451
  }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
@@ -4456,7 +4456,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
4456
4456
  paddingLeft: new PlTheme(),
4457
4457
  },
4458
4458
  appearance: {
4459
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4459
+ text: GenericVariantTheme.createUIElementTextTheme(),
4460
4460
  },
4461
4461
  typography: defaultTypographyTheme,
4462
4462
  layout: defaultLayoutTheme,
@@ -4522,10 +4522,10 @@ const defaultCardTheme = new ComponentTheme("div", "", {
4522
4522
  shadow: ShadowAppearanceTheme.createLayoutTheme(),
4523
4523
  },
4524
4524
  appearance: {
4525
- background: AppearanceTheme.createLayoutBgTheme(),
4526
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4527
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4528
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4525
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4526
+ text: GenericVariantTheme.createUIElementTextTheme(),
4527
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4528
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4529
4529
  },
4530
4530
  typography: defaultTypographyTheme,
4531
4531
  }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4546,8 +4546,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
4546
4546
  radius: RadiusTheme.createLayoutTheme(),
4547
4547
  },
4548
4548
  appearance: {
4549
- background: AppearanceTheme.createLayoutBgTheme(),
4550
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4549
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4550
+ text: GenericVariantTheme.createUIElementTextTheme(),
4551
4551
  border: GenericVariantTheme.createUIElementBorderTheme(),
4552
4552
  ring: GenericVariantTheme.createUIElementRingTheme(),
4553
4553
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4589,10 +4589,10 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
4589
4589
  radius: RadiusTheme.createLayoutTheme(),
4590
4590
  },
4591
4591
  appearance: {
4592
- background: AppearanceTheme.createLayoutBgTheme(),
4593
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4594
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4595
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4592
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4593
+ text: GenericVariantTheme.createUIElementTextTheme(),
4594
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4595
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4596
4596
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
4597
4597
  }
4598
4598
  }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4612,8 +4612,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
4612
4612
  radius: RadiusTheme.createLayoutTheme(),
4613
4613
  },
4614
4614
  appearance: {
4615
- background: AppearanceTheme.createLayoutBgTheme(),
4616
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4615
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4616
+ text: GenericVariantTheme.createUIElementTextTheme(),
4617
4617
  border: GenericVariantTheme.createUIElementBorderTheme(),
4618
4618
  ring: GenericVariantTheme.createUIElementRingTheme(),
4619
4619
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4638,8 +4638,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
4638
4638
  radius: RadiusTheme.createLayoutTheme(),
4639
4639
  },
4640
4640
  appearance: {
4641
- background: AppearanceTheme.createLayoutBgTheme(),
4642
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4641
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4642
+ text: GenericVariantTheme.createUIElementTextTheme(),
4643
4643
  border: GenericVariantTheme.createUIElementBorderTheme(),
4644
4644
  ring: GenericVariantTheme.createUIElementRingTheme(),
4645
4645
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4668,10 +4668,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
4668
4668
  breakpoint: new BreakpointTheme(),
4669
4669
  },
4670
4670
  appearance: {
4671
- background: AppearanceTheme.createLayoutBgTheme(),
4672
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4673
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4674
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4671
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4672
+ text: GenericVariantTheme.createUIElementTextTheme(),
4673
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4674
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4675
4675
  shadow: ShadowAppearanceTheme.createLayoutTheme(),
4676
4676
  },
4677
4677
  layout: {
@@ -4697,8 +4697,8 @@ const gridSubThemes = {
4697
4697
  }),
4698
4698
  },
4699
4699
  appearance: {
4700
- background: AppearanceTheme.createLayoutBgTheme(),
4701
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4700
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4701
+ text: GenericVariantTheme.createUIElementTextTheme(),
4702
4702
  },
4703
4703
  layout: {
4704
4704
  ...defaultLayoutTheme,
@@ -4778,7 +4778,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
4778
4778
  gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
4779
4779
  },
4780
4780
  appearance: {
4781
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4781
+ text: GenericVariantTheme.createUIElementTextTheme(),
4782
4782
  },
4783
4783
  typography: defaultTypographyTheme,
4784
4784
  layout: {
package/dist/index.js CHANGED
@@ -74,22 +74,22 @@ const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
74
74
  const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
75
75
  const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
76
76
  //typography:
77
- const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE];
78
- const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
77
+ const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
78
+ const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
79
79
  //layout:
80
- const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
81
- const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
82
- const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
83
- const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL];
84
- const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL];
85
- const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING];
80
+ const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
81
+ const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
82
+ const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
83
+ const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...VARIANT];
84
+ const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL, ...VARIANT];
85
+ const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING, ...VARIANT];
86
86
  const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
87
- const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT];
87
+ const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT, ...VARIANT];
88
88
  // Form component categories
89
89
  const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
90
- const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
90
+ const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
91
91
  // Media component categories
92
- const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
92
+ const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
93
93
  const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
94
94
  'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
95
95
  const ComponentCategories = {
@@ -4401,7 +4401,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
4401
4401
  text: new SizeTheme(textSizeMap),
4402
4402
  },
4403
4403
  appearance: {
4404
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4404
+ text: GenericVariantTheme.createUIElementTextTheme(),
4405
4405
  },
4406
4406
  typography: defaultTypographyTheme,
4407
4407
  layout: defaultLayoutTheme,
@@ -4436,7 +4436,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
4436
4436
  text: new SizeTheme(textSizeClasses, false),
4437
4437
  },
4438
4438
  appearance: {
4439
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4439
+ text: GenericVariantTheme.createUIElementTextTheme(),
4440
4440
  },
4441
4441
  typography: defaultTypographyTheme,
4442
4442
  layout: defaultLayoutTheme,
@@ -4447,7 +4447,7 @@ const listItemTheme = new ComponentTheme("li", "", {
4447
4447
  text: new SizeTheme(textSizeClasses, false),
4448
4448
  },
4449
4449
  appearance: {
4450
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4450
+ text: GenericVariantTheme.createUIElementTextTheme(),
4451
4451
  },
4452
4452
  typography: defaultTypographyTheme,
4453
4453
  }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
@@ -4458,7 +4458,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
4458
4458
  paddingLeft: new PlTheme(),
4459
4459
  },
4460
4460
  appearance: {
4461
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4461
+ text: GenericVariantTheme.createUIElementTextTheme(),
4462
4462
  },
4463
4463
  typography: defaultTypographyTheme,
4464
4464
  layout: defaultLayoutTheme,
@@ -4524,10 +4524,10 @@ const defaultCardTheme = new ComponentTheme("div", "", {
4524
4524
  shadow: ShadowAppearanceTheme.createLayoutTheme(),
4525
4525
  },
4526
4526
  appearance: {
4527
- background: AppearanceTheme.createLayoutBgTheme(),
4528
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4529
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4530
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4527
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4528
+ text: GenericVariantTheme.createUIElementTextTheme(),
4529
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4530
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4531
4531
  },
4532
4532
  typography: defaultTypographyTheme,
4533
4533
  }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4548,8 +4548,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
4548
4548
  radius: RadiusTheme.createLayoutTheme(),
4549
4549
  },
4550
4550
  appearance: {
4551
- background: AppearanceTheme.createLayoutBgTheme(),
4552
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4551
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4552
+ text: GenericVariantTheme.createUIElementTextTheme(),
4553
4553
  border: GenericVariantTheme.createUIElementBorderTheme(),
4554
4554
  ring: GenericVariantTheme.createUIElementRingTheme(),
4555
4555
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4591,10 +4591,10 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
4591
4591
  radius: RadiusTheme.createLayoutTheme(),
4592
4592
  },
4593
4593
  appearance: {
4594
- background: AppearanceTheme.createLayoutBgTheme(),
4595
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4596
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4597
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4594
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4595
+ text: GenericVariantTheme.createUIElementTextTheme(),
4596
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4597
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4598
4598
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
4599
4599
  }
4600
4600
  }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4614,8 +4614,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
4614
4614
  radius: RadiusTheme.createLayoutTheme(),
4615
4615
  },
4616
4616
  appearance: {
4617
- background: AppearanceTheme.createLayoutBgTheme(),
4618
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4617
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4618
+ text: GenericVariantTheme.createUIElementTextTheme(),
4619
4619
  border: GenericVariantTheme.createUIElementBorderTheme(),
4620
4620
  ring: GenericVariantTheme.createUIElementRingTheme(),
4621
4621
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4640,8 +4640,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
4640
4640
  radius: RadiusTheme.createLayoutTheme(),
4641
4641
  },
4642
4642
  appearance: {
4643
- background: AppearanceTheme.createLayoutBgTheme(),
4644
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4643
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4644
+ text: GenericVariantTheme.createUIElementTextTheme(),
4645
4645
  border: GenericVariantTheme.createUIElementBorderTheme(),
4646
4646
  ring: GenericVariantTheme.createUIElementRingTheme(),
4647
4647
  shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4670,10 +4670,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
4670
4670
  breakpoint: new BreakpointTheme(),
4671
4671
  },
4672
4672
  appearance: {
4673
- background: AppearanceTheme.createLayoutBgTheme(),
4674
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4675
- border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
4676
- ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
4673
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4674
+ text: GenericVariantTheme.createUIElementTextTheme(),
4675
+ border: GenericVariantTheme.createUIElementBorderTheme(),
4676
+ ring: GenericVariantTheme.createUIElementRingTheme(),
4677
4677
  shadow: ShadowAppearanceTheme.createLayoutTheme(),
4678
4678
  },
4679
4679
  layout: {
@@ -4699,8 +4699,8 @@ const gridSubThemes = {
4699
4699
  }),
4700
4700
  },
4701
4701
  appearance: {
4702
- background: AppearanceTheme.createLayoutBgTheme(),
4703
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4702
+ background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
4703
+ text: GenericVariantTheme.createUIElementTextTheme(),
4704
4704
  },
4705
4705
  layout: {
4706
4706
  ...defaultLayoutTheme,
@@ -4780,7 +4780,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
4780
4780
  gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
4781
4781
  },
4782
4782
  appearance: {
4783
- text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
4783
+ text: GenericVariantTheme.createUIElementTextTheme(),
4784
4784
  },
4785
4785
  typography: defaultTypographyTheme,
4786
4786
  layout: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.2.1-alpha.20250830124557.3818ff4",
3
+ "version": "0.2.1-alpha.20250830140007.8b4cce3",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",