@vaneui/ui 0.2.1-alpha.20250830120134.26927ee → 0.2.1-alpha.20250830140007.8b4cce3

package/dist/index.js

@@ -74,22 +74,22 @@ const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
 //typography:
-const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE];
-const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
+const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
 //layout:
-const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
-const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
-const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
-const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL];
-const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL];
-const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING];
+const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
+const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
+const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...VARIANT];
+const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...VARIANT];
+const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL, ...VARIANT];
+const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING, ...VARIANT];
 const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT, ...VARIANT];
 // Form component categories
 const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
-const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
+const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
 // Media component categories
-const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
     'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
 const ComponentCategories = {
@@ -4090,7 +4090,6 @@ const themeDefaults = {
         md: true,
         flex: true,
         gap: true,
-        default: true,
         sans: true,
         medium: true,
     },
@@ -4109,27 +4108,23 @@ const themeDefaults = {
     },
     text: {
         md: true,
-        default: true,
         sans: true,
         textLeft: true,
     },
     title: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
     },
     pageTitle: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
     },
     sectionTitle: {
         md: true,
-        default: true,
         sans: true,
         semibold: true,
         textLeft: true,
@@ -4144,7 +4139,6 @@ const themeDefaults = {
     },
     list: {
         md: true,
-        default: true,
         sans: true,
         normal: true,
         padding: true,
@@ -4407,7 +4401,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
             text: new SizeTheme(textSizeMap),
         },
         appearance: {
-            text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+            text: GenericVariantTheme.createUIElementTextTheme(),
         },
         typography: defaultTypographyTheme,
         layout: defaultLayoutTheme,
@@ -4442,7 +4436,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4453,7 +4447,7 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: new SizeTheme(textSizeClasses, false),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
@@ -4464,7 +4458,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4530,10 +4524,10 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4554,7 +4548,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4596,10 +4591,10 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4619,7 +4614,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4644,7 +4640,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4673,10 +4670,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
-        border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-        ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
@@ -4702,7 +4699,8 @@ const gridSubThemes = {
         }),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4782,7 +4780,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
         gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: {