@vaneui/ui 0.2.1-alpha.20250830140007.8b4cce3 → 0.2.1-alpha.20250901145552.64cbaea

package/dist/components/ui/classes/appearanceClasses.d.ts

@@ -6,6 +6,7 @@ export declare const backgroundAppearanceClasses: Record<AppearanceKey | Transpa
 export declare const hoverBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const activeBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const layoutBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
+export declare const layoutFilledBackgroundAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const bgBorderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const borderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;
 export declare const filledBorderAppearanceClasses: Record<AppearanceKey | TransparentKey | LinkKey, string>;

package/dist/components/ui/theme/appearance/appearanceTheme.d.ts

@@ -8,5 +8,4 @@ export declare class AppearanceTheme extends BaseTheme {
     private constructor();
     getClasses(extractedKeys: CategoryProps): string[];
     static createTheme(src?: Partial<Record<ModeKey, Partial<Record<AppearanceKey, string>>>>): AppearanceTheme;
-    static createLayoutBgTheme(): AppearanceTheme;
 }

package/dist/components/ui/theme/appearance/genericVariantTheme.d.ts

@@ -21,4 +21,5 @@ export declare class GenericVariantTheme<T extends BaseTheme> extends BaseTheme
     static createSimpleUIElementBgAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
     static createAccentColorAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
     static createCheckedAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
+    static createLayoutBgAppearanceTheme(): GenericVariantTheme<AppearanceTheme>;
 }

package/dist/index.esm.js

@@ -3420,6 +3420,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)",
@@ -3511,6 +3583,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)",
@@ -3629,90 +3714,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();
@@ -3902,6 +3903,16 @@ class GenericVariantTheme extends BaseTheme {
             })
         });
     }
+    static createLayoutBgAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: AppearanceTheme.createTheme({
+                base: layoutBackgroundAppearanceClasses
+            }),
+            filled: AppearanceTheme.createTheme({
+                base: layoutFilledBackgroundAppearanceClasses
+            })
+        });
+    }
 }
 
 class WrapTheme extends BaseTheme {
@@ -4522,7 +4533,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4546,7 +4557,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4589,7 +4600,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4612,7 +4623,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4638,7 +4649,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         radius: RadiusTheme.createLayoutTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4668,7 +4679,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4697,7 +4708,7 @@ const gridSubThemes = {
         }),
     },
     appearance: {
-        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
     },
     layout: {