@vaneui/ui 0.1.3 → 0.1.5

package/dist/index.esm.js

@@ -12,8 +12,8 @@ class BaseTheme {
 const MODE_KEYS = ['base', 'hover', 'active'];
 const SIZE_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
 const VARIANT_KEYS = ['filled', 'outline'];
-const APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'transparent'];
-const TEXT_APPEARANCE_KEYS = [...APPEARANCE_KEYS, 'muted', 'link'];
+const BG_APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'transparent'];
+const TEXT_APPEARANCE_KEYS = [...BG_APPEARANCE_KEYS, 'muted', 'link'];
 const FONT_FAMILY_KEYS = ['sans', 'serif', 'mono'];
 const FONT_WEIGHT_KEYS = ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'];
 const FONT_STYLE_KEYS = ['italic', 'notItalic'];
@@ -43,6 +43,7 @@ const EXCLUSIVE_KEY_GROUPS = [
     MODE_KEYS,
     SIZE_KEYS,
     TEXT_APPEARANCE_KEYS,
+    BG_APPEARANCE_KEYS,
     VARIANT_KEYS,
     FONT_FAMILY_KEYS,
     FONT_WEIGHT_KEYS,
@@ -100,13 +101,13 @@ const BUTTON_KEYS = [
     ...GAP_KEYS,
     ...PADDING_KEYS,
     ...VARIANT_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Grid keys
 const GRID_KEYS = [
     ...BASE_COMPONENT_KEYS,
     ...GAP_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Row keys
 const ROW_KEYS = [
@@ -115,7 +116,7 @@ const ROW_KEYS = [
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Col keys
 const COL_KEYS = [
@@ -123,7 +124,7 @@ const COL_KEYS = [
     ...WRAP_KEYS,
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Card keys
 const CARD_KEYS = [
@@ -132,7 +133,7 @@ const CARD_KEYS = [
     ...SHARP_KEYS,
     ...ROUNDED_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...BORDER_KEYS,
     ...RING_KEYS,
     ...SHADOW_KEYS,
@@ -148,7 +149,7 @@ const STACK_KEYS = [
     ...GAP_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...BREAKPOINT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...FLEX_DIRECTION_KEYS,
     ...PADDING_KEYS
 ];
@@ -162,7 +163,7 @@ const BADGE_KEYS = [
     ...RING_KEYS,
     ...GAP_KEYS,
     ...PADDING_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Chip keys
 const CHIP_KEYS = [
@@ -174,17 +175,17 @@ const CHIP_KEYS = [
     ...RING_KEYS,
     ...GAP_KEYS,
     ...PADDING_KEYS,
-    ...APPEARANCE_KEYS
+    ...TEXT_APPEARANCE_KEYS
 ];
 // Divider keys
 const DIVIDER_KEYS = [
     ...BASE_COMPONENT_KEYS,
-    ...APPEARANCE_KEYS
+    ...BG_APPEARANCE_KEYS
 ];
 // Container keys
 const CONTAINER_KEYS = [
     ...BASE_COMPONENT_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...BORDER_KEYS,
     ...SHADOW_KEYS,
     ...RING_KEYS,
@@ -195,7 +196,7 @@ const CONTAINER_KEYS = [
 const SECTION_KEYS = [
     ...BASE_COMPONENT_KEYS,
     ...FLEX_DIRECTION_KEYS,
-    ...APPEARANCE_KEYS,
+    ...BG_APPEARANCE_KEYS,
     ...PADDING_KEYS,
     ...DIRECTION_REVERSE_KEYS,
     ...WRAP_KEYS,
@@ -3546,7 +3547,34 @@ PyTheme.defaultClasses = {
     noPadding: "py-0"
 };
 
-// Text appearance classes for filled buttons (all white text)
+class TextAppearanceTheme extends BaseTheme {
+    constructor(config) {
+        super();
+        Object.assign(this, config);
+    }
+    getClasses(props, defaults) {
+        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, TEXT_APPEARANCE_KEYS) || 'default';
+        const modesForAppearance = this[pickedAppearanceKey];
+        if (!modesForAppearance) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
+    }
+    static createTheme(src = {}) {
+        const finalConfig = Object.fromEntries(TEXT_APPEARANCE_KEYS.map(textKey => [
+            textKey,
+            Object.fromEntries(MODE_KEYS.map(modeKey => {
+                var _a;
+                return [
+                    modeKey,
+                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
+                ];
+            })),
+        ]));
+        return new TextAppearanceTheme(finalConfig);
+    }
+}
+
 const filledTextAppearanceClasses = {
     default: "text-white",
     primary: "text-white",
@@ -3561,7 +3589,6 @@ const filledTextAppearanceClasses = {
     info: "text-white",
     transparent: "text-transparent",
 };
-// Default text appearance classes (for non-button components)
 const textAppearanceClasses = {
     default: "text-(--text-color-default)",
     primary: "text-(--text-color-primary)",
@@ -3576,7 +3603,6 @@ const textAppearanceClasses = {
     info: "text-(--text-color-info)",
     transparent: "text-transparent",
 };
-// Text size classes
 const textSizeClasses = {
     xs: "text-xs",
     sm: "text-sm",
@@ -3585,59 +3611,6 @@ const textSizeClasses = {
     xl: "text-xl",
 };
 
-class TextAppearanceTheme extends BaseTheme {
-    constructor(initialOverrides) {
-        super();
-        TEXT_APPEARANCE_KEYS.forEach((textKey) => {
-            const defaultModesForKey = TextAppearanceTheme.defaultFullConfig[textKey];
-            const overrideModesForKey = initialOverrides === null || initialOverrides === void 0 ? void 0 : initialOverrides[textKey];
-            this[textKey] = {
-                ...defaultModesForKey,
-                ...(overrideModesForKey || {}),
-            };
-        });
-    }
-    getClasses(props, defaults) {
-        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, TEXT_APPEARANCE_KEYS) || 'default';
-        const modesForAppearance = this[pickedAppearanceKey];
-        if (!modesForAppearance) {
-            return MODE_KEYS.map(() => '');
-        }
-        return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
-    }
-    static createDefaultStyle(src = {}) {
-        const initialOverridesForConstructor = {};
-        TEXT_APPEARANCE_KEYS.forEach((textKey) => {
-            const modesForCurrentTextKey = {};
-            let keyHasDataInSrc = false;
-            MODE_KEYS.forEach((modeKey) => {
-                var _a;
-                const classValue = (_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey];
-                if (classValue !== undefined) {
-                    modesForCurrentTextKey[modeKey] = classValue;
-                    keyHasDataInSrc = true;
-                }
-            });
-            if (keyHasDataInSrc) {
-                initialOverridesForConstructor[textKey] = modesForCurrentTextKey;
-            }
-        });
-        return new TextAppearanceTheme(initialOverridesForConstructor);
-    }
-}
-TextAppearanceTheme.defaultFullConfig = (() => {
-    const config = {};
-    TEXT_APPEARANCE_KEYS.forEach((key) => {
-        config[key] = {
-            base: textAppearanceClasses[key] || '',
-            hover: '',
-            active: '',
-        };
-    });
-    return config;
-})();
-
-// Background classes for filled buttons
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
     primary: "bg-(--filled-background-color-primary)",
@@ -3649,10 +3622,7 @@ const filledBackgroundAppearanceClasses = {
     warning: "bg-(--filled-background-color-warning)",
     info: "bg-(--filled-background-color-info)",
     transparent: "bg-transparent",
-    muted: "bg-(--filled-background-color-muted)",
-    link: "bg-(--filled-background-color-link)",
 };
-// Hover background classes for filled buttons
 const filledHoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--filled-background-color-hover-default)",
     primary: "hover:bg-(--filled-background-color-hover-primary)",
@@ -3664,10 +3634,7 @@ const filledHoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--filled-background-color-hover-warning)",
     info: "hover:bg-(--filled-background-color-hover-info)",
     transparent: "hover:bg-transparent",
-    muted: "hover:bg-(--filled-background-color-hover-muted)",
-    link: "hover:bg-(--filled-background-color-hover-link)",
 };
-// Active background classes for filled buttons
 const filledActiveBackgroundAppearanceClasses = {
     default: "active:bg-(--filled-background-color-active-default)",
     primary: "active:bg-(--filled-background-color-active-primary)",
@@ -3679,10 +3646,7 @@ const filledActiveBackgroundAppearanceClasses = {
     warning: "active:bg-(--filled-background-color-active-warning)",
     info: "active:bg-(--filled-background-color-active-info)",
     transparent: "active:bg-transparent",
-    muted: "active:bg-(--filled-background-color-active-muted)",
-    link: "active:bg-(--filled-background-color-active-link)",
 };
-// Default background appearance classes (for non-button components)
 const backgroundAppearanceClasses = {
     default: "bg-(--background-color-default)",
     primary: "bg-(--background-color-primary)",
@@ -3694,10 +3658,7 @@ const backgroundAppearanceClasses = {
     warning: "bg-(--background-color-warning)",
     info: "bg-(--background-color-info)",
     transparent: "bg-transparent",
-    muted: "bg-(--background-color-muted)",
-    link: "bg-(--background-color-link)",
 };
-// Hover background appearance classes for outline buttons
 const hoverBackgroundAppearanceClasses = {
     default: "hover:bg-(--background-color-hover-default)",
     primary: "hover:bg-(--background-color-hover-primary)",
@@ -3709,10 +3670,7 @@ const hoverBackgroundAppearanceClasses = {
     warning: "hover:bg-(--background-color-hover-warning)",
     info: "hover:bg-(--background-color-hover-info)",
     transparent: "hover:bg-transparent",
-    muted: "hover:bg-(--background-color-hover-muted)",
-    link: "hover:bg-(--background-color-hover-link)",
 };
-// Active background appearance classes for outline buttons
 const activeBackgroundAppearanceClasses = {
     default: "active:bg-(--background-color-active-default)",
     primary: "active:bg-(--background-color-active-primary)",
@@ -3724,8 +3682,6 @@ const activeBackgroundAppearanceClasses = {
     warning: "active:bg-(--background-color-active-warning)",
     info: "active:bg-(--background-color-active-info)",
     transparent: "active:bg-transparent",
-    muted: "active:bg-(--background-color-active-muted)",
-    link: "active:bg-(--background-color-active-link)",
 };
 const layoutBackgroundAppearanceClasses = {
     default: "bg-(--layout-background-default)",
@@ -3749,9 +3705,9 @@ const bgBorderAppearanceClasses = {
     danger: "bg-(--border-color-danger)",
     warning: "bg-(--border-color-warning)",
     info: "bg-(--border-color-info)",
-    transparent: "bg-transparent",
     muted: "bg-(--border-color-muted)",
     link: "bg-(--border-color-link)",
+    transparent: "bg-transparent",
 };
 const borderAppearanceClasses = {
     default: "border-(--border-color-default)",
@@ -3763,11 +3719,10 @@ const borderAppearanceClasses = {
     danger: "border-(--border-color-danger)",
     warning: "border-(--border-color-warning)",
     info: "border-(--border-color-info)",
-    transparent: "border-transparent",
     muted: "border-(--border-color-muted)",
     link: "border-(--border-color-link)",
+    transparent: "border-transparent",
 };
-// Border classes for filled elements
 const filledBorderAppearanceClasses = {
     default: "border-(--filled-border-color-default)",
     primary: "border-(--filled-border-color-primary)",
@@ -3778,9 +3733,9 @@ const filledBorderAppearanceClasses = {
     danger: "border-(--filled-border-color-danger)",
     warning: "border-(--filled-border-color-warning)",
     info: "border-(--filled-border-color-info)",
-    transparent: "border-transparent",
     muted: "border-(--filled-border-color-muted)",
     link: "border-(--filled-border-color-link)",
+    transparent: "border-transparent",
 };
 const ringAppearanceClasses = {
     default: "ring-(--border-color-default)",
@@ -3792,11 +3747,10 @@ const ringAppearanceClasses = {
     danger: "ring-(--border-color-danger)",
     warning: "ring-(--border-color-warning)",
     info: "ring-(--border-color-info)",
-    transparent: "ring-transparent",
     muted: "ring-(--border-color-muted)",
     link: "ring-(--border-color-link)",
+    transparent: "ring-transparent",
 };
-// Ring classes for filled elements
 const filledRingAppearanceClasses = {
     default: "ring-(--filled-border-color-default)",
     primary: "ring-(--filled-border-color-primary)",
@@ -3807,70 +3761,75 @@ const filledRingAppearanceClasses = {
     danger: "ring-(--filled-border-color-danger)",
     warning: "ring-(--filled-border-color-warning)",
     info: "ring-(--filled-border-color-info)",
-    transparent: "ring-transparent",
     muted: "ring-(--filled-border-color-muted)",
     link: "ring-(--filled-border-color-link)",
+    transparent: "ring-transparent",
 };
 
-class VariantTheme extends BaseTheme {
-    constructor(variantInstances = VariantTheme.defaultInstances) {
+class GenericVariantTheme extends BaseTheme {
+    constructor(variantInstances) {
         super();
         VARIANT_KEYS.forEach((variantKey) => {
-            this[variantKey] = variantInstances[variantKey] || VariantTheme.defaultInstances[variantKey];
+            this[variantKey] = variantInstances[variantKey];
         });
     }
     getClasses(props, defaults) {
-        const activeVariantKey = pickFirstTruthyKey(props, defaults, VARIANT_KEYS) || 'outline';
-        const activeTextAppearanceTheme = this[activeVariantKey];
+        const variantKey = pickFirstTruthyKey(props, defaults, VARIANT_KEYS) || 'outline';
+        const activeTextAppearanceTheme = this[variantKey];
         if (!activeTextAppearanceTheme) {
             return [];
         }
         return activeTextAppearanceTheme.getClasses(props, defaults);
     }
-    static createDefault(initialInstances) {
-        const fullInitialInstances = {
-            ...VariantTheme.defaultInstances,
-            ...(initialInstances || {})
-        };
-        return new VariantTheme(fullInitialInstances);
+    // used for button, bages, chips, etc
+    static createUIElementTextTheme() {
+        //transparent UI elements have a default text color
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({
+                base: { ...textAppearanceClasses, transparent: textAppearanceClasses.default }
+            }),
+            filled: TextAppearanceTheme.createTheme({
+                base: { ...filledTextAppearanceClasses, transparent: textAppearanceClasses.default }
+            })
+        });
+    }
+    static createBorderAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({ base: borderAppearanceClasses }),
+            filled: TextAppearanceTheme.createTheme({ base: filledBorderAppearanceClasses })
+        });
     }
-    static createDefaultBackground() {
-        return this.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({
+    static createRingAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({ base: ringAppearanceClasses }),
+            filled: TextAppearanceTheme.createTheme({ base: filledRingAppearanceClasses })
+        });
+    }
+    static createBgAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
                 hover: hoverBackgroundAppearanceClasses,
                 active: activeBackgroundAppearanceClasses
             }),
-            filled: TextAppearanceTheme.createDefaultStyle({
+            filled: TextAppearanceTheme.createTheme({
                 base: filledBackgroundAppearanceClasses,
                 hover: filledHoverBackgroundAppearanceClasses,
                 active: filledActiveBackgroundAppearanceClasses
             })
         });
     }
-    static createDefaultText() {
-        return this.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
-            filled: TextAppearanceTheme.createDefaultStyle({ base: filledTextAppearanceClasses })
-        });
-    }
-    static createDefaultBorder() {
-        return this.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
-            filled: TextAppearanceTheme.createDefaultStyle({ base: filledBorderAppearanceClasses })
-        });
-    }
-    static createDefaultRing() {
-        return this.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
-            filled: TextAppearanceTheme.createDefaultStyle({ base: filledRingAppearanceClasses })
+    static createSimpleBgAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({
+                base: backgroundAppearanceClasses,
+            }),
+            filled: TextAppearanceTheme.createTheme({
+                base: filledBackgroundAppearanceClasses,
+            })
         });
     }
 }
-VariantTheme.defaultInstances = Object.fromEntries(VARIANT_KEYS.map(variantKey => [
-    variantKey,
-    new TextAppearanceTheme()
-]));
 
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
@@ -3911,10 +3870,10 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         shadow: new ShadowTheme(),
     },
     appearance: {
-        background: VariantTheme.createDefaultBackground(),
-        text: VariantTheme.createDefaultText(),
-        border: VariantTheme.createDefaultBorder(),
-        ring: VariantTheme.createDefaultRing(),
+        background: GenericVariantTheme.createBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createBorderAppearanceTheme(),
+        ring: GenericVariantTheme.createRingAppearanceTheme(),
     },
     layout: {
         border: new BorderTheme(),
@@ -3986,17 +3945,10 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         shadow: new ShadowTheme(),
     },
     appearance: {
-        background: VariantTheme.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({
-                base: backgroundAppearanceClasses,
-            }),
-            filled: TextAppearanceTheme.createDefaultStyle({
-                base: filledBackgroundAppearanceClasses,
-            })
-        }),
-        text: VariantTheme.createDefaultText(),
-        border: VariantTheme.createDefaultBorder(),
-        ring: VariantTheme.createDefaultRing(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createBorderAppearanceTheme(),
+        ring: GenericVariantTheme.createRingAppearanceTheme(),
     },
     layout: {
         border: new BorderTheme(),
@@ -4065,17 +4017,10 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         shadow: new ShadowTheme(),
     },
     appearance: {
-        background: VariantTheme.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({
-                base: backgroundAppearanceClasses,
-            }),
-            filled: TextAppearanceTheme.createDefaultStyle({
-                base: filledBackgroundAppearanceClasses,
-            })
-        }),
-        text: VariantTheme.createDefaultText(),
-        border: VariantTheme.createDefaultBorder(),
-        ring: VariantTheme.createDefaultRing(),
+        background: GenericVariantTheme.createSimpleBgAppearanceTheme(),
+        text: GenericVariantTheme.createUIElementTextTheme(),
+        border: GenericVariantTheme.createBorderAppearanceTheme(),
+        ring: GenericVariantTheme.createRingAppearanceTheme(),
     },
     layout: {
         radius: new RadiusTheme({
@@ -4117,7 +4062,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
             text: new SizeTheme(textSizeMap),
         },
         appearance: {
-            text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+            text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
         }
     }, defaults);
 };
@@ -4211,57 +4156,26 @@ const commonGaps = {
     xl: 'gap-6',
 };
 
-class LayoutAppearanceTheme extends BaseTheme {
-    constructor(initialOverrides) {
+class BgAppearanceTheme extends BaseTheme {
+    constructor() {
         super();
-        APPEARANCE_KEYS.forEach((textKey) => {
-            const defaultModesForKey = LayoutAppearanceTheme.defaultFullConfig[textKey];
-            const overrideModesForKey = initialOverrides === null || initialOverrides === void 0 ? void 0 : initialOverrides[textKey];
-            this[textKey] = {
-                ...defaultModesForKey,
-                ...(overrideModesForKey || {}),
+        BG_APPEARANCE_KEYS.forEach(key => {
+            this[key] = {
+                base: layoutBackgroundAppearanceClasses[key] || '',
+                hover: '',
+                active: '',
             };
         });
     }
     getClasses(props, defaults) {
-        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, APPEARANCE_KEYS) || 'default';
+        const pickedAppearanceKey = pickFirstTruthyKey(props, defaults, BG_APPEARANCE_KEYS) || 'default';
         const modesForAppearance = this[pickedAppearanceKey];
         if (!modesForAppearance) {
             return MODE_KEYS.map(() => '');
         }
         return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
     }
-    static createDefaultStyle(src = {}) {
-        const initialOverridesForConstructor = {};
-        APPEARANCE_KEYS.forEach((textKey) => {
-            const modesForCurrentTextKey = {};
-            let keyHasDataInSrc = false;
-            MODE_KEYS.forEach((modeKey) => {
-                var _a;
-                const classValue = (_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey];
-                if (classValue !== undefined) {
-                    modesForCurrentTextKey[modeKey] = classValue;
-                    keyHasDataInSrc = true;
-                }
-            });
-            if (keyHasDataInSrc) {
-                initialOverridesForConstructor[textKey] = modesForCurrentTextKey;
-            }
-        });
-        return new LayoutAppearanceTheme(initialOverridesForConstructor);
-    }
 }
-LayoutAppearanceTheme.defaultFullConfig = (() => {
-    const config = {};
-    APPEARANCE_KEYS.forEach((key) => {
-        config[key] = {
-            base: textAppearanceClasses[key] || '',
-            hover: '',
-            active: '',
-        };
-    });
-    return config;
-})();
 
 class BreakpointTheme extends BaseTheme {
     constructor(initial) {
@@ -4326,12 +4240,10 @@ const defaultCardTheme = new ComponentTheme("div", "overflow-hidden", {
         breakpoint: new BreakpointTheme(),
     },
     appearance: {
-        background: LayoutAppearanceTheme.createDefaultStyle({
-            base: layoutBackgroundAppearanceClasses,
-        }),
-        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
-        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
-        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+        background: new BgAppearanceTheme(),
+        text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createTheme({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createTheme({ base: ringAppearanceClasses }),
     }
 }, {
     md: true,
@@ -4363,7 +4275,7 @@ const defaultRowTheme = new ComponentTheme("div", "flex-row", {
 
 const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
     appearance: {
-        background: TextAppearanceTheme.createDefaultStyle({
+        background: TextAppearanceTheme.createTheme({
             base: bgBorderAppearanceClasses,
         }),
     }
@@ -4407,12 +4319,10 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         }),
     },
     appearance: {
-        background: LayoutAppearanceTheme.createDefaultStyle({
-            base: layoutBackgroundAppearanceClasses,
-        }),
-        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
-        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
-        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+        background: new BgAppearanceTheme(),
+        text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createTheme({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createTheme({ base: ringAppearanceClasses }),
     }
 }, {
     transparent: true,
@@ -4509,12 +4419,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         shadow: new ShadowTheme(),
     },
     appearance: {
-        background: LayoutAppearanceTheme.createDefaultStyle({
-            base: layoutBackgroundAppearanceClasses,
-        }),
-        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
-        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
-        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+        background: new BgAppearanceTheme(),
+        text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createTheme({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createTheme({ base: ringAppearanceClasses }),
     },
     layout: {
         wrap: new WrapTheme(),
@@ -4713,5 +4621,5 @@ const List = (props) => {
     return jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
 };
 
-export { APPEARANCE_KEYS, BADGE_KEYS, BASE_COMPONENT_KEYS, BORDER_KEYS, BREAKPOINT_KEYS, BUTTON_KEYS, Badge, Button, CARD_KEYS, CHIP_KEYS, COL_KEYS, COMPONENT_KEYS, CONTAINER_KEYS, Card, Chip, Col, Container, DIRECTION_REVERSE_KEYS, DISPLAY_KEYS, DIVIDER_KEYS, Divider, EXCLUSIVE_KEY_GROUPS, FLEX_DIRECTION_KEYS, FONT_FAMILY_KEYS, FONT_KEYS, FONT_STYLE_KEYS, FONT_WEIGHT_KEYS, GAP_KEYS, GRID_KEYS, Grid3, Grid4, HIDE_KEYS, ITEMS_KEYS, JUSTIFY_KEYS, Link, List, ListItem, MODE_KEYS, PADDING_KEYS, PILL_KEYS, POSITION_KEYS, PageTitle, RING_KEYS, ROUNDED_KEYS, ROW_KEYS, Row, SECTION_KEYS, SHADOW_KEYS, SHAPE_KEYS, SHARP_KEYS, SIZE_KEYS, STACK_KEYS, Section, SectionTitle, Stack, TEXT_ALIGN_KEYS, TEXT_APPEARANCE_KEYS, TEXT_DECORATION_KEYS, TEXT_TRANSFORM_KEYS, TYPOGRAPHY_COMPONENT_KEYS, Text, ThemeProvider, Title, VARIANT_KEYS, WRAP_KEYS, defaultTheme, useTheme };
+export { BADGE_KEYS, BASE_COMPONENT_KEYS, BG_APPEARANCE_KEYS, BORDER_KEYS, BREAKPOINT_KEYS, BUTTON_KEYS, Badge, Button, CARD_KEYS, CHIP_KEYS, COL_KEYS, COMPONENT_KEYS, CONTAINER_KEYS, Card, Chip, Col, Container, DIRECTION_REVERSE_KEYS, DISPLAY_KEYS, DIVIDER_KEYS, Divider, EXCLUSIVE_KEY_GROUPS, FLEX_DIRECTION_KEYS, FONT_FAMILY_KEYS, FONT_KEYS, FONT_STYLE_KEYS, FONT_WEIGHT_KEYS, GAP_KEYS, GRID_KEYS, Grid3, Grid4, HIDE_KEYS, ITEMS_KEYS, JUSTIFY_KEYS, Link, List, ListItem, MODE_KEYS, PADDING_KEYS, PILL_KEYS, POSITION_KEYS, PageTitle, RING_KEYS, ROUNDED_KEYS, ROW_KEYS, Row, SECTION_KEYS, SHADOW_KEYS, SHAPE_KEYS, SHARP_KEYS, SIZE_KEYS, STACK_KEYS, Section, SectionTitle, Stack, TEXT_ALIGN_KEYS, TEXT_APPEARANCE_KEYS, TEXT_DECORATION_KEYS, TEXT_TRANSFORM_KEYS, TYPOGRAPHY_COMPONENT_KEYS, Text, ThemeProvider, Title, VARIANT_KEYS, WRAP_KEYS, defaultTheme, useTheme };
 //# sourceMappingURL=index.esm.js.map