@vaneui/ui 0.1.4 → 0.1.6

package/dist/index.esm.js

@@ -12,9 +12,8 @@ class BaseTheme {
 const MODE_KEYS = ['base', 'hover', 'active'];
 const SIZE_KEYS = ['xs', 'sm', 'md', 'lg', 'xl'];
 const VARIANT_KEYS = ['filled', 'outline'];
-const UI_APPEARANCE_KEYS = ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'];
-const BG_APPEARANCE_KEYS = [...UI_APPEARANCE_KEYS, 'transparent'];
-const TEXT_APPEARANCE_KEYS = [...UI_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'];
@@ -45,7 +44,6 @@ const EXCLUSIVE_KEY_GROUPS = [
     SIZE_KEYS,
     TEXT_APPEARANCE_KEYS,
     BG_APPEARANCE_KEYS,
-    UI_APPEARANCE_KEYS,
     VARIANT_KEYS,
     FONT_FAMILY_KEYS,
     FONT_WEIGHT_KEYS,
@@ -439,75 +437,6 @@ TextAlignTheme.defaultClasses = {
     textJustify: "text-justify",
 };
 
-const isObject = (item) => {
-    return item !== null && typeof item === 'object' && !Array.isArray(item);
-};
-const deepMerge = (target, source) => {
-    const output = Object.assign(Object.create(Object.getPrototypeOf(target)), target);
-    for (const key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-            const sourceValue = source[key];
-            const targetValue = output[key];
-            if (sourceValue === undefined) {
-                continue;
-            }
-            // Special case: If the key is 'defaults', use the contextual mergeDefaults function.
-            if (key === 'defaults' &&
-                isObject(targetValue) &&
-                isObject(sourceValue)) {
-                output[key] = mergeDefaults(targetValue, sourceValue);
-            }
-            // For all other objects, use the standard recursive deep merge.
-            else if (isObject(targetValue) && isObject(sourceValue)) {
-                output[key] = deepMerge(targetValue, sourceValue);
-            }
-            // For non-object values, just assign the value from the source.
-            else {
-                output[key] = sourceValue;
-            }
-        }
-    }
-    return output;
-};
-const deepClone = (source) => {
-    if (!isObject(source)) {
-        return source;
-    }
-    const output = Object.assign(Object.create(Object.getPrototypeOf(source)), source);
-    for (const key in output) {
-        if (Object.prototype.hasOwnProperty.call(output, key)) {
-            output[key] = deepClone(output[key]);
-        }
-    }
-    return output;
-};
-const findGroup = (key) => EXCLUSIVE_KEY_GROUPS.find(group => group.includes(key));
-const mergeDefaults = (baseDefaults, overrideDefaults) => {
-    const finalDefaults = { ...baseDefaults };
-    // Iterate over the override keys to apply them.
-    for (const key in overrideDefaults) {
-        if (Object.prototype.hasOwnProperty.call(overrideDefaults, key)) {
-            const overrideValue = overrideDefaults[key];
-            // If the override is setting a key to true...
-            if (overrideValue) {
-                // Find the exclusive group this key belongs to (e.g., SIZE_KEYS).
-                const group = findGroup(key);
-                // If the key is part of an exclusive group...
-                if (group) {
-                    // ...set all other keys in that group to false.
-                    group.forEach(groupKey => {
-                        if (groupKey !== key) {
-                            finalDefaults[groupKey] = false;
-                        }
-                    });
-                }
-            }
-            finalDefaults[key] = overrideValue;
-        }
-    }
-    return finalDefaults;
-};
-
 class DisplayTheme extends BaseTheme {
     constructor(initialConfig) {
         super();
@@ -3246,29 +3175,27 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
+const defaultLayoutTheme = {
+    hide: new HideTheme(),
+    items: new ItemsTheme(),
+    justify: new JustifyTheme(),
+    position: new PositionTheme(),
+    display: new DisplayTheme()
+};
+const defaultTypographyTheme = {
+    fontFamily: new FontFamilyTheme(),
+    fontWeight: new FontWeightTheme(),
+    fontStyle: new FontStyleTheme(),
+    textDecoration: new TextDecorationTheme(),
+    textTransform: new TextTransformTheme(),
+    textAlign: new TextAlignTheme()
+};
 class ComponentTheme {
     constructor(tag, base, subThemes, defaults = {}) {
         this.tag = tag;
         this.base = base;
         this.defaults = defaults;
-        const defaultInternalThemes = {
-            layout: {
-                hide: new HideTheme(),
-                items: new ItemsTheme(),
-                justify: new JustifyTheme(),
-                position: new PositionTheme(),
-                display: new DisplayTheme()
-            },
-            typography: {
-                fontFamily: new FontFamilyTheme(),
-                fontWeight: new FontWeightTheme(),
-                fontStyle: new FontStyleTheme(),
-                textDecoration: new TextDecorationTheme(),
-                textTransform: new TextTransformTheme(),
-                textAlign: new TextAlignTheme()
-            }
-        };
-        this.themes = deepMerge(defaultInternalThemes, subThemes);
+        this.themes = subThemes;
     }
     getClasses(props, defaults = this.defaults) {
         const user = props;
@@ -3381,57 +3308,6 @@ RadiusTheme.defaultClasses = {
     }
 };
 
-class ShadowTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        SHADOW_KEYS.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : ShadowTheme.defaultClasses[key];
-        });
-    }
-    getClasses(props, defaults) {
-        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
-        const key = pickFirstTruthyKey(props, defaults, SHADOW_KEYS);
-        if (key === undefined) {
-            return [];
-        }
-        const isModeStringMap = MODE_KEYS.every(m => typeof this[key][m] === "string");
-        return MODE_KEYS.map(mode => isModeStringMap
-            ? this[key][mode]
-            : this[key][mode][size]);
-    }
-}
-ShadowTheme.defaultClasses = {
-    shadow: {
-        base: {
-            xs: "shadow-2xs",
-            sm: "shadow-xs",
-            md: "shadow-sm",
-            lg: "shadow-md",
-            xl: "shadow-lg"
-        },
-        hover: {
-            xs: "hover:shadow-xs",
-            sm: "hover:shadow-sm",
-            md: "hover:shadow-md",
-            lg: "hover:shadow-lg",
-            xl: "hover:shadow-xl"
-        },
-        active: {
-            xs: "active:shadow-xs",
-            sm: "active:shadow-sm",
-            md: "active:shadow-md",
-            lg: "active:shadow-lg",
-            xl: "active:shadow-xl"
-        },
-    },
-    noShadow: {
-        base: "shadow-none",
-        hover: "hover:shadow-none",
-        active: "active:shadow-none",
-    }
-};
-
 class BorderTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -3549,6 +3425,34 @@ PyTheme.defaultClasses = {
     noPadding: "py-0"
 };
 
+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,6 +3465,7 @@ const filledTextAppearanceClasses = {
     danger: "text-white",
     warning: "text-white",
     info: "text-white",
+    transparent: "text-transparent",
 };
 const textAppearanceClasses = {
     default: "text-(--text-color-default)",
@@ -3574,6 +3479,7 @@ const textAppearanceClasses = {
     danger: "text-(--text-color-danger)",
     warning: "text-(--text-color-warning)",
     info: "text-(--text-color-info)",
+    transparent: "text-transparent",
 };
 const textSizeClasses = {
     xs: "text-xs",
@@ -3583,58 +3489,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;
-})();
-
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
     primary: "bg-(--filled-background-color-primary)",
@@ -3731,6 +3585,7 @@ const bgBorderAppearanceClasses = {
     info: "bg-(--border-color-info)",
     muted: "bg-(--border-color-muted)",
     link: "bg-(--border-color-link)",
+    transparent: "bg-transparent",
 };
 const borderAppearanceClasses = {
     default: "border-(--border-color-default)",
@@ -3744,6 +3599,7 @@ const borderAppearanceClasses = {
     info: "border-(--border-color-info)",
     muted: "border-(--border-color-muted)",
     link: "border-(--border-color-link)",
+    transparent: "border-transparent",
 };
 const filledBorderAppearanceClasses = {
     default: "border-(--filled-border-color-default)",
@@ -3757,6 +3613,7 @@ const filledBorderAppearanceClasses = {
     info: "border-(--filled-border-color-info)",
     muted: "border-(--filled-border-color-muted)",
     link: "border-(--filled-border-color-link)",
+    transparent: "border-transparent",
 };
 const ringAppearanceClasses = {
     default: "ring-(--border-color-default)",
@@ -3770,6 +3627,7 @@ const ringAppearanceClasses = {
     info: "ring-(--border-color-info)",
     muted: "ring-(--border-color-muted)",
     link: "ring-(--border-color-link)",
+    transparent: "ring-transparent",
 };
 const filledRingAppearanceClasses = {
     default: "ring-(--filled-border-color-default)",
@@ -3783,67 +3641,109 @@ const filledRingAppearanceClasses = {
     info: "ring-(--filled-border-color-info)",
     muted: "ring-(--filled-border-color-muted)",
     link: "ring-(--filled-border-color-link)",
+    transparent: "ring-transparent",
 };
 
-class VariantTheme extends BaseTheme {
-    constructor(variantInstances = VariantTheme.defaultInstances) {
+class ShadowAppearanceTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_APPEARANCE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : ShadowAppearanceTheme.defaultShadow;
+        });
+    }
+    getClasses(props, defaults) {
+        const appearance = pickFirstTruthyKey(props, defaults, TEXT_APPEARANCE_KEYS) || 'default';
+        const size = pickFirstTruthyKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickFirstTruthyKey(props, defaults, SHADOW_KEYS);
+        if (key === undefined || key === 'noShadow') {
+            return [];
+        }
+        return MODE_KEYS.map(mode => { var _a, _b, _c; return (_c = (_b = (_a = this[appearance]) === null || _a === void 0 ? void 0 : _a[size]) === null || _b === void 0 ? void 0 : _b[mode]) !== null && _c !== void 0 ? _c : ""; });
+    }
+    static createTheme(src = {}) {
+        return new ShadowAppearanceTheme(src);
+    }
+}
+ShadowAppearanceTheme.defaultShadow = {
+    xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "" },
+    sm: { base: "shadow-xs", hover: "hover:shadow-sm", active: "" },
+    md: { base: "shadow-sm", hover: "hover:shadow-md", active: "" },
+    lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "" },
+    xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "" }
+};
+
+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 createDefaultBackground() {
-        return this.createDefault({
-            outline: TextAppearanceTheme.createDefaultStyle({
+    static createUIElementShadowTheme() {
+        //transparent UI elements won't have a shadow
+        return new GenericVariantTheme({
+            outline: ShadowAppearanceTheme.createTheme({ transparent: undefined, link: undefined }),
+            filled: ShadowAppearanceTheme.createTheme({ transparent: undefined, link: undefined })
+        });
+    }
+    static createBorderAppearanceTheme() {
+        return new GenericVariantTheme({
+            outline: TextAppearanceTheme.createTheme({ base: borderAppearanceClasses }),
+            filled: TextAppearanceTheme.createTheme({ base: filledBorderAppearanceClasses })
+        });
+    }
+    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: {
@@ -3881,15 +3781,16 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
             lg: 'text-lg',
             xl: 'text-xl',
         }),
-        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(),
+        shadow: GenericVariantTheme.createUIElementShadowTheme()
     },
     layout: {
+        ...defaultLayoutTheme,
         border: new BorderTheme(),
         ring: new RingTheme(),
         radius: new RadiusTheme({
@@ -3902,6 +3803,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
             }
         }),
     },
+    typography: defaultTypographyTheme,
 }, {
     md: true,
     inlineFlex: true,
@@ -3955,23 +3857,17 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
             md: 'text-base',
             lg: 'text-lg',
             xl: 'text-xl',
-        }),
-        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(),
+        shadow: GenericVariantTheme.createUIElementShadowTheme()
     },
     layout: {
+        ...defaultLayoutTheme,
         border: new BorderTheme(),
         ring: new RingTheme(),
         radius: new RadiusTheme({
@@ -3984,6 +3880,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
             }
         }),
     },
+    typography: defaultTypographyTheme,
 }, {
     md: true,
     inlineFlex: true,
@@ -4034,23 +3931,17 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
                 lg: 'gap-2.5',
                 xl: 'gap-3',
             }
-        }),
-        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(),
+        shadow: GenericVariantTheme.createUIElementShadowTheme()
     },
     layout: {
+        ...defaultLayoutTheme,
         radius: new RadiusTheme({
             rounded: {
                 xs: 'rounded-sm',
@@ -4063,6 +3954,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         border: new BorderTheme(),
         ring: new RingTheme(),
     },
+    typography: defaultTypographyTheme,
 }, {
     md: true,
     inlineFlex: true,
@@ -4078,6 +3970,75 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
     ring: true,
 });
 
+const isObject = (item) => {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+};
+const deepMerge = (target, source) => {
+    const output = Object.assign(Object.create(Object.getPrototypeOf(target)), target);
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = output[key];
+            if (sourceValue === undefined) {
+                continue;
+            }
+            // Special case: If the key is 'defaults', use the contextual mergeDefaults function.
+            if (key === 'defaults' &&
+                isObject(targetValue) &&
+                isObject(sourceValue)) {
+                output[key] = mergeDefaults(targetValue, sourceValue);
+            }
+            // For all other objects, use the standard recursive deep merge.
+            else if (isObject(targetValue) && isObject(sourceValue)) {
+                output[key] = deepMerge(targetValue, sourceValue);
+            }
+            // For non-object values, just assign the value from the source.
+            else {
+                output[key] = sourceValue;
+            }
+        }
+    }
+    return output;
+};
+const deepClone = (source) => {
+    if (!isObject(source)) {
+        return source;
+    }
+    const output = Object.assign(Object.create(Object.getPrototypeOf(source)), source);
+    for (const key in output) {
+        if (Object.prototype.hasOwnProperty.call(output, key)) {
+            output[key] = deepClone(output[key]);
+        }
+    }
+    return output;
+};
+const findGroup = (key) => EXCLUSIVE_KEY_GROUPS.find(group => group.includes(key));
+const mergeDefaults = (baseDefaults, overrideDefaults) => {
+    const finalDefaults = { ...baseDefaults };
+    // Iterate over the override keys to apply them.
+    for (const key in overrideDefaults) {
+        if (Object.prototype.hasOwnProperty.call(overrideDefaults, key)) {
+            const overrideValue = overrideDefaults[key];
+            // If the override is setting a key to true...
+            if (overrideValue) {
+                // Find the exclusive group this key belongs to (e.g., SIZE_KEYS).
+                const group = findGroup(key);
+                // If the key is part of an exclusive group...
+                if (group) {
+                    // ...set all other keys in that group to false.
+                    group.forEach(groupKey => {
+                        if (groupKey !== key) {
+                            finalDefaults[groupKey] = false;
+                        }
+                    });
+                }
+            }
+            finalDefaults[key] = overrideValue;
+        }
+    }
+    return finalDefaults;
+};
+
 const typographyThemeDefaults = {
     md: true,
     default: true,
@@ -4090,8 +4051,9 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
             text: new SizeTheme(textSizeMap),
         },
         appearance: {
-            text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
-        }
+            text: TextAppearanceTheme.createTheme({ base: textAppearanceClasses }),
+        },
+        typography: defaultTypographyTheme,
     }, defaults);
 };
 // Page title specific theme
@@ -4184,15 +4146,14 @@ const commonGaps = {
     xl: 'gap-6',
 };
 
-class LayoutAppearanceTheme extends BaseTheme {
-    constructor(initialOverrides) {
+class BgAppearanceTheme extends BaseTheme {
+    constructor() {
         super();
-        BG_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: '',
             };
         });
     }
@@ -4204,37 +4165,7 @@ class LayoutAppearanceTheme extends BaseTheme {
         }
         return MODE_KEYS.map(mode => modesForAppearance[mode] || '');
     }
-    static createDefaultStyle(src = {}) {
-        const initialOverridesForConstructor = {};
-        BG_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 = {};
-    BG_APPEARANCE_KEYS.forEach((key) => {
-        config[key] = {
-            base: backgroundAppearanceClasses[key] || '',
-            hover: '',
-            active: '',
-        };
-    });
-    return config;
-})();
 
 class BreakpointTheme extends BaseTheme {
     constructor(initial) {
@@ -4259,30 +4190,30 @@ BreakpointTheme.defaultClasses = {
     xlCol: "max-xl:flex-col"
 };
 
-const defaultCardTheme = new ComponentTheme("div", "overflow-hidden", {
+const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
         px: new PxTheme({
             padding: {
-                xs: 'px-3',
-                sm: 'px-4',
-                md: 'px-5',
-                lg: 'px-6',
-                xl: 'px-8',
+                xs: "px-2",
+                sm: "px-3 max-lg:px-2",
+                md: "px-4 max-lg:px-3",
+                lg: "px-5 max-lg:px-4 max-md:px-3",
+                xl: "px-6 max-lg:px-5 max-md:px-4"
             }
         }),
         py: new PyTheme({
             padding: {
-                xs: 'py-2',
-                sm: 'py-3',
-                md: 'py-4',
-                lg: 'py-5',
-                xl: 'py-6',
+                xs: "py-2",
+                sm: "py-3 max-lg:py-2",
+                md: "py-4 max-lg:py-3",
+                lg: "py-5 max-lg:py-4 max-md:py-3",
+                xl: "py-6 max-lg:py-5 max-md:py-4"
             }
         }),
         gap: new GapTheme({ gap: commonGaps }),
-        shadow: new ShadowTheme(),
     },
     layout: {
+        ...defaultLayoutTheme,
         border: new BorderTheme(),
         ring: new RingTheme(),
         radius: new RadiusTheme({
@@ -4297,14 +4228,13 @@ const defaultCardTheme = new ComponentTheme("div", "overflow-hidden", {
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         breakpoint: new BreakpointTheme(),
+        shadow: ShadowAppearanceTheme.createTheme(),
     },
     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,
@@ -4324,6 +4254,7 @@ const defaultRowTheme = new ComponentTheme("div", "flex-row", {
         breakpoint: new BreakpointTheme(),
     },
     layout: {
+        ...defaultLayoutTheme,
         wrap: new WrapTheme(),
     },
 }, {
@@ -4336,7 +4267,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,
         }),
     }
@@ -4365,6 +4296,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         }),
     },
     layout: {
+        ...defaultLayoutTheme,
         border: new BorderTheme(),
         ring: new RingTheme(),
         wrap: new WrapTheme(),
@@ -4380,12 +4312,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,
@@ -4402,6 +4332,7 @@ const defaultColTheme = new ComponentTheme("div", "flex-col", {
         gap: new GapTheme({ gap: commonGaps }),
     },
     layout: {
+        ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
     },
@@ -4437,6 +4368,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         }),
     },
     layout: {
+        ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
     },
@@ -4479,17 +4411,16 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
                 xl: 'gap-16',
             }
         }),
-        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 }),
+        shadow: ShadowAppearanceTheme.createTheme(),
     },
     layout: {
+        ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         border: new BorderTheme(),
@@ -4686,5 +4617,5 @@ const List = (props) => {
     return jsx(ThemedComponent, { theme: theme.list, propsToOmit: TYPOGRAPHY_COMPONENT_KEYS, ...props });
 };
 
-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, UI_APPEARANCE_KEYS, 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