@vaneui/ui 0.2.1-alpha.20250830124557.3818ff4 → 0.2.1-alpha.20250831120721.fd71f6f

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 = {
@@ -3422,6 +3422,78 @@ class PyTheme extends PaddingTheme {
     }
 }
 
+class AppearanceTheme extends BaseTheme {
+    constructor(config, transparentClasses) {
+        super();
+        Object.assign(this, config);
+        this.transparentClasses = transparentClasses;
+    }
+    getClasses(extractedKeys) {
+        var _a;
+        // Check for specific transparent styles first
+        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
+            const transparentClass = ((_a = this.transparentClasses) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
+            return [transparentClass];
+        }
+        // Use appearance (now includes link as an appearance option)
+        const pickedAppearanceKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
+        if (pickedAppearanceKey) {
+            const modes = this[pickedAppearanceKey];
+            if (modes) {
+                return ComponentKeys.mode.map(mode => modes[mode] || '');
+            }
+        }
+        return [];
+    }
+    static createTheme(src = {}) {
+        const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
+            textKey,
+            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
+                var _a;
+                return [
+                    modeKey,
+                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
+                ];
+            })),
+        ]));
+        return new AppearanceTheme(config, src.base);
+    }
+}
+
+const filledTextAppearanceClasses = {
+    default: "text-(--filled-text-color-default)",
+    primary: "text-(--filled-text-color-primary)",
+    secondary: "text-(--filled-text-color-secondary)",
+    tertiary: "text-(--filled-text-color-tertiary)",
+    link: "text-(--filled-text-color-link)",
+    accent: "text-(--filled-text-color-accent)",
+    success: "text-(--filled-text-color-success)",
+    danger: "text-(--filled-text-color-danger)",
+    warning: "text-(--filled-text-color-warning)",
+    info: "text-(--filled-text-color-info)",
+    transparent: "text-(--filled-text-color-transparent)",
+};
+const textAppearanceClasses = {
+    default: "text-(--text-color-default)",
+    primary: "text-(--text-color-primary)",
+    secondary: "text-(--text-color-secondary)",
+    tertiary: "text-(--text-color-tertiary)",
+    link: "text-(--text-color-link)",
+    accent: "text-(--text-color-accent)",
+    success: "text-(--text-color-success)",
+    danger: "text-(--text-color-danger)",
+    warning: "text-(--text-color-warning)",
+    info: "text-(--text-color-info)",
+    transparent: "text-transparent",
+};
+const textSizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+};
+
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
     primary: "bg-(--filled-background-color-primary)",
@@ -3513,6 +3585,19 @@ const layoutBackgroundAppearanceClasses = {
     transparent: "bg-transparent",
     link: "bg-(--layout-background-link)",
 };
+const layoutFilledBackgroundAppearanceClasses = {
+    default: "bg-(--layout-filled-background-color-default)",
+    primary: "bg-(--layout-filled-background-color-primary)",
+    secondary: "bg-(--layout-filled-background-color-secondary)",
+    tertiary: "bg-(--layout-filled-background-color-tertiary)",
+    accent: "bg-(--layout-filled-background-color-accent)",
+    success: "bg-(--layout-filled-background-color-success)",
+    danger: "bg-(--layout-filled-background-color-danger)",
+    warning: "bg-(--layout-filled-background-color-warning)",
+    info: "bg-(--layout-filled-background-color-info)",
+    transparent: "bg-transparent",
+    link: "bg-(--layout-filled-background-color-link)",
+};
 const bgBorderAppearanceClasses = {
     default: "bg-(--border-color-default)",
     primary: "bg-(--border-color-primary)",
@@ -3631,90 +3716,6 @@ const filledCheckedBackgroundAppearanceClasses = {
     link: "checked:bg-(--filled-background-color-link)",
 };
 
-class AppearanceTheme extends BaseTheme {
-    constructor(config, transparentClasses) {
-        super();
-        Object.assign(this, config);
-        this.transparentClasses = transparentClasses;
-    }
-    getClasses(extractedKeys) {
-        var _a;
-        // Check for specific transparent styles first
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
-            const transparentClass = ((_a = this.transparentClasses) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
-            return [transparentClass];
-        }
-        // Use appearance (now includes link as an appearance option)
-        const pickedAppearanceKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
-        if (pickedAppearanceKey) {
-            const modes = this[pickedAppearanceKey];
-            if (modes) {
-                return ComponentKeys.mode.map(mode => modes[mode] || '');
-            }
-        }
-        return [];
-    }
-    static createTheme(src = {}) {
-        const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
-            textKey,
-            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
-                var _a;
-                return [
-                    modeKey,
-                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
-                ];
-            })),
-        ]));
-        return new AppearanceTheme(config, src.base);
-    }
-    static createLayoutBgTheme() {
-        // Creates a theme for layout backgrounds, replacing BgAppearanceTheme
-        const config = Object.fromEntries(ComponentKeys.appearance.map(key => [
-            key,
-            {
-                base: layoutBackgroundAppearanceClasses[key] || '',
-                hover: '',
-                active: '',
-            }
-        ]));
-        return new AppearanceTheme(config, layoutBackgroundAppearanceClasses);
-    }
-}
-
-const filledTextAppearanceClasses = {
-    default: "text-white",
-    primary: "text-white",
-    secondary: "text-white",
-    tertiary: "text-white",
-    link: "text-white",
-    accent: "text-white",
-    success: "text-white",
-    danger: "text-white",
-    warning: "text-white",
-    info: "text-white",
-    transparent: "text-transparent",
-};
-const textAppearanceClasses = {
-    default: "text-(--text-color-default)",
-    primary: "text-(--text-color-primary)",
-    secondary: "text-(--text-color-secondary)",
-    tertiary: "text-(--text-color-tertiary)",
-    link: "text-(--text-color-link)",
-    accent: "text-(--text-color-accent)",
-    success: "text-(--text-color-success)",
-    danger: "text-(--text-color-danger)",
-    warning: "text-(--text-color-warning)",
-    info: "text-(--text-color-info)",
-    transparent: "text-transparent",
-};
-const textSizeClasses = {
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-    xl: "text-xl",
-};
-
 class ShadowAppearanceTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -3904,6 +3905,16 @@ class GenericVariantTheme extends BaseTheme {
             })
         });
     }
+    static createLayoutBgAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: layoutBackgroundAppearanceClasses
+            }),
+            filled: AppearanceTheme.createTheme({
+                base: layoutFilledBackgroundAppearanceClasses
+            })
+        });
+    }
 }
 
 class WrapTheme extends BaseTheme {
@@ -4401,7 +4412,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,
@@ -4436,7 +4447,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,
@@ -4447,7 +4458,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);
@@ -4458,7 +4469,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
         paddingLeft: new PlTheme(),
     },
     appearance: {
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
@@ -4524,10 +4535,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.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     },
     typography: defaultTypographyTheme,
 }, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
@@ -4548,8 +4559,8 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4591,10 +4602,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.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
 }, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
@@ -4614,8 +4625,8 @@ const defaultColTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4640,8 +4651,8 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
@@ -4670,10 +4681,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.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
@@ -4699,8 +4710,8 @@ const gridSubThemes = {
         }),
     },
     appearance: {
-        background: AppearanceTheme.createLayoutBgTheme(),
-        text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4780,7 +4791,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: {