@vaneui/ui 0.0.13 → 0.0.15

package/dist/components/theme/index.js

@@ -0,0 +1,1827 @@
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useContext } from 'react';
+
+/**
+ * Base Theme class that all theme types will extend
+ */
+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 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'];
+const TEXT_DECORATION_KEYS = ['underline', 'lineThrough', 'noUnderline', 'overline'];
+const TEXT_TRANSFORM_KEYS = ['uppercase', 'lowercase', 'capitalize', 'normalCase'];
+const TEXT_ALIGN_KEYS = ['textLeft', 'textCenter', 'textRight', 'textJustify'];
+const BORDER_KEYS = ['border', 'noBorder'];
+const SHADOW_KEYS = ['shadow', 'noShadow'];
+const RING_KEYS = ['ring', 'noRing'];
+const PADDING_KEYS = ['padding', 'noPadding'];
+const BREAKPOINT_KEYS = ['xsCol', 'smCol', 'mdCol', 'lgCol', 'xlCol'];
+const HIDE_KEYS = ['xsHide', 'smHide', 'mdHide', 'lgHide', 'xlHide'];
+const POSITION_KEYS = ['relative', 'absolute', 'fixed', 'sticky', 'static'];
+const DIRECTION_REVERSE_KEYS = ['reverse'];
+const GAP_KEYS = ['gap', 'noGap'];
+const PILL_KEYS = ['pill'];
+const SHARP_KEYS = ['sharp'];
+const ROUNDED_KEYS = ['rounded'];
+const SHAPE_KEYS = [...PILL_KEYS, ...SHARP_KEYS, ...ROUNDED_KEYS];
+const FLEX_DIRECTION_KEYS = ['row', 'column', 'rowReverse', 'columnReverse'];
+const ITEMS_KEYS = ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'];
+const JUSTIFY_KEYS = ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'];
+const WRAP_KEYS = ['flexWrap', 'flexNoWrap', 'flexWrapReverse'];
+// A master list of all groups where only one key can be 'true' at a time.
+const EXCLUSIVE_KEY_GROUPS = [
+    MODE_KEYS,
+    SIZE_KEYS,
+    TEXT_APPEARANCE_KEYS,
+    VARIANT_KEYS,
+    FONT_FAMILY_KEYS,
+    FONT_WEIGHT_KEYS,
+    FONT_STYLE_KEYS,
+    TEXT_DECORATION_KEYS,
+    TEXT_TRANSFORM_KEYS,
+    TEXT_ALIGN_KEYS,
+    BORDER_KEYS,
+    SHADOW_KEYS,
+    RING_KEYS,
+    PADDING_KEYS,
+    BREAKPOINT_KEYS,
+    HIDE_KEYS,
+    POSITION_KEYS,
+    DIRECTION_REVERSE_KEYS,
+    GAP_KEYS,
+    SHAPE_KEYS,
+    FLEX_DIRECTION_KEYS,
+    ITEMS_KEYS,
+    JUSTIFY_KEYS,
+    WRAP_KEYS,
+];
+// Base component keys
+const BASE_COMPONENT_KEYS = [
+    ...SIZE_KEYS,
+    ...HIDE_KEYS,
+    ...POSITION_KEYS
+];
+// Font keys
+const FONT_KEYS = [
+    ...FONT_WEIGHT_KEYS,
+    ...FONT_STYLE_KEYS,
+    ...TEXT_DECORATION_KEYS,
+    ...TEXT_TRANSFORM_KEYS,
+    ...FONT_FAMILY_KEYS,
+    ...TEXT_APPEARANCE_KEYS,
+    ...TEXT_ALIGN_KEYS
+];
+// Typography component keys
+const TYPOGRAPHY_COMPONENT_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...FONT_KEYS
+];
+// Button keys
+[
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...VARIANT_KEYS,
+    ...ITEMS_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Grid keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...GAP_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Row keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...ITEMS_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...JUSTIFY_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Col keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...ITEMS_KEYS,
+    ...JUSTIFY_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Card keys
+[
+    ...GAP_KEYS,
+    ...ITEMS_KEYS,
+    ...SHARP_KEYS,
+    ...ROUNDED_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...APPEARANCE_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...SHADOW_KEYS,
+    ...PADDING_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...JUSTIFY_KEYS,
+    ...WRAP_KEYS
+];
+// Stack keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...ITEMS_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...JUSTIFY_KEYS,
+    ...APPEARANCE_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...PADDING_KEYS
+];
+// Badge keys
+[
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...VARIANT_KEYS,
+    ...SHADOW_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...ITEMS_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Chip keys
+[
+    ...TYPOGRAPHY_COMPONENT_KEYS,
+    ...SHAPE_KEYS,
+    ...VARIANT_KEYS,
+    ...SHADOW_KEYS,
+    ...BORDER_KEYS,
+    ...RING_KEYS,
+    ...ITEMS_KEYS,
+    ...GAP_KEYS,
+    ...PADDING_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Divider keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Container keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...ITEMS_KEYS,
+    ...APPEARANCE_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+];
+// Section keys
+[
+    ...BASE_COMPONENT_KEYS,
+    ...FLEX_DIRECTION_KEYS,
+    ...ITEMS_KEYS,
+    ...APPEARANCE_KEYS,
+    ...PADDING_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...JUSTIFY_KEYS,
+    ...WRAP_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...GAP_KEYS
+];
+
+const rowToColumnBreakpointClasses = {
+    xsCol: "max-xs:flex-col",
+    smCol: "max-sm:flex-col",
+    mdCol: "max-md:flex-col",
+    lgCol: "max-lg:flex-col",
+    xlCol: "max-xl:flex-col"
+};
+const justifyClasses = {
+    justifyStart: "justify-start",
+    justifyEnd: "justify-end",
+    justifyCenter: "justify-center",
+    justifyBetween: "justify-between",
+    justifyAround: "justify-around",
+    justifyEvenly: "justify-evenly",
+    justifyStretch: "justify-stretch",
+    justifyBaseline: "justify-baseline",
+};
+const wrapClasses = {
+    flexWrap: "flex-wrap",
+    flexNoWrap: "flex-nowrap",
+    flexWrapReverse: "flex-wrap-reverse"
+};
+const roundedClasses = {
+    xs: "rounded-sm",
+    sm: "rounded-md",
+    md: "rounded-lg",
+    lg: "rounded-xl",
+    xl: "rounded-2xl",
+};
+const hideClasses = {
+    xsHide: "max-xs:hidden",
+    smHide: "max-sm:hidden",
+    mdHide: "max-md:hidden",
+    lgHide: "max-lg:hidden",
+    xlHide: "max-xl:hidden"
+};
+const positionClasses = {
+    relative: "relative",
+    absolute: "absolute",
+    fixed: "fixed",
+    sticky: "sticky",
+    static: "static"
+};
+const shadowClasses = {
+    xs: "shadow-xs",
+    sm: "shadow-sm",
+    md: "shadow-md",
+    lg: "shadow-lg",
+    xl: "shadow-xl"
+};
+const hoverShadowClasses = {
+    xs: "hover:shadow-sm",
+    sm: "hover:shadow-md",
+    md: "hover:shadow-lg",
+    lg: "hover:shadow-xl",
+    xl: "hover:shadow-2xl"
+};
+const activeShadowClasses = {
+    xs: "active:shadow-sm",
+    sm: "active:shadow-md",
+    md: "active:shadow-lg",
+    lg: "active:shadow-xl",
+    xl: "active:shadow-2xl"
+};
+const noRingModeClasses = {
+    base: "ring-0",
+    hover: "hover:ring-0",
+    active: "active:ring-0",
+};
+const ringModeClasses = {
+    base: "ring ring-inset",
+    hover: "hover:ring hover:ring-inset",
+    active: "active:ring active:ring-inset",
+};
+const noShadowModeClasses = {
+    base: "shadow-none",
+    hover: "hover:shadow-none",
+    active: "active:shadow-none",
+};
+
+function pickFirstKeyOptional(props, keys, fallback = undefined) {
+    for (const k of keys) {
+        if (props[k])
+            return k;
+    }
+    return fallback;
+}
+/**
+ * Pick the first truthy key from props, then from defaults, then fallback.
+ */
+function pickKey(props, defaults, keys, fallback) {
+    // 1) explicit user prop
+    const explicit = pickFirstKeyOptional(props, keys);
+    if (explicit)
+        return explicit;
+    // 2) component‐level default
+    const def = pickFirstKeyOptional(defaults, keys);
+    if (def)
+        return def;
+    // 3) built‐in fallback
+    return fallback;
+}
+
+class HideTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        HIDE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : HideTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, HIDE_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+HideTheme.defaultClasses = hideClasses;
+
+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 ItemsTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        ITEMS_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : ItemsTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedKey = pickKey(props, defaults, ITEMS_KEYS);
+        return [pickedKey && this[pickedKey] ? this[pickedKey] : ''];
+    }
+}
+ItemsTheme.defaultClasses = {
+    itemsStart: "items-start",
+    itemsEnd: "items-end",
+    itemsCenter: "items-center",
+    itemsBaseline: "items-baseline",
+    itemsStretch: "items-stretch",
+};
+
+class JustifyTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        JUSTIFY_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : JustifyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, JUSTIFY_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+JustifyTheme.defaultClasses = justifyClasses;
+
+class PositionTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        POSITION_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : PositionTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, POSITION_KEYS);
+        return [key ? this[key] : ''];
+    }
+}
+PositionTheme.defaultClasses = positionClasses;
+
+const fontWeightClasses = {
+    thin: "font-thin",
+    extralight: "font-extralight",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black",
+};
+const fontStyleClasses = {
+    italic: "italic",
+    notItalic: "not-italic",
+};
+const fontFamilyClasses = {
+    sans: "font-sans",
+    serif: "font-serif",
+    mono: "font-mono",
+};
+const textDecorationClasses = {
+    underline: "underline",
+    lineThrough: "line-through",
+    noUnderline: "no-underline",
+    overline: "overline",
+};
+const textTransformClasses = {
+    uppercase: "uppercase",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    normalCase: "normal-case",
+};
+const textAlignClasses = {
+    textLeft: "text-left",
+    textCenter: "text-center",
+    textRight: "text-right",
+    textJustify: "text-justify",
+};
+// Text appearance classes for filled buttons (all white text)
+const filledTextAppearanceClasses = {
+    default: "text-white",
+    primary: "text-white",
+    secondary: "text-white",
+    tertiary: "text-white",
+    muted: "text-white",
+    link: "text-white",
+    accent: "text-white",
+    success: "text-white",
+    danger: "text-white",
+    warning: "text-white",
+    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)",
+    secondary: "text-(--text-color-secondary)",
+    tertiary: "text-(--text-color-tertiary)",
+    muted: "text-(--text-color-muted)",
+    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",
+};
+// Text size classes
+const textSizeClasses = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+    xl: "text-xl",
+};
+
+class FontFamilyTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_FAMILY_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontFamilyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, FONT_FAMILY_KEYS);
+        return [this[key !== null && key !== void 0 ? key : 'sans'] || ''];
+    }
+}
+FontFamilyTheme.defaultClasses = fontFamilyClasses;
+
+class FontWeightTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_WEIGHT_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontWeightTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, FONT_WEIGHT_KEYS);
+        return [this[key !== null && key !== void 0 ? key : 'normal'] || '']; // Default to 'normal' if no key is provided
+    }
+}
+FontWeightTheme.defaultClasses = fontWeightClasses;
+
+class FontStyleTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_STYLE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontStyleTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, FONT_STYLE_KEYS);
+        return [key ? this[key] : '']; // No default for font style
+    }
+}
+FontStyleTheme.defaultClasses = fontStyleClasses;
+
+class TextDecorationTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_DECORATION_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextDecorationTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, TEXT_DECORATION_KEYS);
+        return [key ? this[key] : '']; // No default for text decoration
+    }
+}
+TextDecorationTheme.defaultClasses = textDecorationClasses;
+
+class TextTransformTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_TRANSFORM_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextTransformTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, TEXT_TRANSFORM_KEYS);
+        return [key ? this[key] : '']; // No default for text transform
+    }
+}
+TextTransformTheme.defaultClasses = textTransformClasses;
+
+class TextAlignTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        TEXT_ALIGN_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : TextAlignTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, TEXT_ALIGN_KEYS);
+        return [key ? this[key] : '']; // No default for text align
+    }
+}
+TextAlignTheme.defaultClasses = textAlignClasses;
+
+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(),
+            },
+            typography: {
+                fontFamily: new FontFamilyTheme(),
+                fontWeight: new FontWeightTheme(),
+                fontStyle: new FontStyleTheme(),
+                textDecoration: new TextDecorationTheme(),
+                textTransform: new TextTransformTheme(),
+                textAlign: new TextAlignTheme()
+            }
+        };
+        this.themes = deepMerge(defaultInternalThemes, subThemes);
+    }
+    getClasses(props, defaults = this.defaults) {
+        const user = props;
+        const defs = defaults;
+        const classes = [];
+        if (this.base) {
+            classes.push(...this.base.split(/\s+/));
+        }
+        const walk = (map) => {
+            for (const key of Object.keys(map)) {
+                const node = map[key];
+                if (node instanceof BaseTheme) {
+                    classes.push(...node.getClasses(user, defs));
+                }
+                else if (node && typeof node === "object" && !Array.isArray(node)) {
+                    walk(node);
+                }
+            }
+        };
+        walk(this.themes);
+        return classes.filter(Boolean);
+    }
+}
+
+class SizeTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        SIZE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : SizeTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickKey(props, defaults, SIZE_KEYS);
+        return [this[size !== null && size !== void 0 ? size : 'md'] || ''];
+    }
+}
+SizeTheme.defaultClasses = {
+    xs: '',
+    sm: '',
+    md: '',
+    lg: '',
+    xl: ''
+};
+
+class GapTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        GAP_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : GapTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickKey(props, defaults, GAP_KEYS) || 'noGap';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+GapTheme.defaultClasses = {
+    gap: {
+        xs: 'gap-2',
+        sm: 'gap-3',
+        md: 'gap-4',
+        lg: 'gap-5',
+        xl: 'gap-6',
+    },
+    noGap: "gap-0"
+};
+
+class RadiusTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        SHAPE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : RadiusTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickKey(props, defaults, SIZE_KEYS) || 'md';
+        const shape = pickKey(props, defaults, SHAPE_KEYS) || 'rounded';
+        return [typeof this[shape] === 'string' ? this[shape] : this[shape][size]];
+    }
+}
+RadiusTheme.defaultClasses = {
+    pill: "rounded-full",
+    sharp: "rounded-none",
+    rounded: roundedClasses
+};
+
+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 = pickKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickKey(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: shadowClasses,
+        hover: hoverShadowClasses,
+        active: activeShadowClasses,
+    },
+    noShadow: noShadowModeClasses
+};
+
+class BorderTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        BORDER_KEYS.forEach((key) => {
+            this[key] = {
+                ...BorderTheme.defaultClasses[key],
+                ...((initial === null || initial === void 0 ? void 0 : initial[key]) || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, BORDER_KEYS);
+        if (!key || !this[key]) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => this[key][mode] || '');
+    }
+}
+BorderTheme.defaultClasses = {
+    border: {
+        base: "border",
+        hover: "hover:border",
+        active: "active:border",
+    },
+    noBorder: {
+        base: "border-none",
+        hover: "hover:border-none",
+        active: "active:border-none",
+    },
+};
+
+class RingTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        RING_KEYS.forEach((key) => {
+            this[key] = {
+                ...RingTheme.defaultClasses[key],
+                ...((initial === null || initial === void 0 ? void 0 : initial[key]) || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, RING_KEYS);
+        if (!key || !this[key]) {
+            return MODE_KEYS.map(() => '');
+        }
+        return MODE_KEYS.map(mode => this[key][mode] || '');
+    }
+}
+RingTheme.defaultClasses = {
+    ring: ringModeClasses,
+    noRing: noRingModeClasses,
+};
+
+class PxTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        PADDING_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PxTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickKey(props, defaults, PADDING_KEYS) || 'noPadding';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+PxTheme.defaultClasses = {
+    padding: {
+        xs: "px-2",
+        sm: "px-4",
+        md: "px-6",
+        lg: "px-8",
+        xl: "px-10"
+    },
+    noPadding: "px-0"
+};
+
+class PyTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        PADDING_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : PyTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const size = pickKey(props, defaults, SIZE_KEYS) || 'md';
+        const key = pickKey(props, defaults, PADDING_KEYS) || 'noPadding';
+        return [typeof this[key] === 'string' ? this[key] : this[key][size]];
+    }
+}
+PyTheme.defaultClasses = {
+    padding: {
+        xs: "py-2",
+        sm: "py-4",
+        md: "py-6",
+        lg: "py-8",
+        xl: "py-10"
+    },
+    noPadding: "py-0"
+};
+
+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 = pickKey(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)",
+    secondary: "bg-(--filled-background-color-secondary)",
+    tertiary: "bg-(--filled-background-color-tertiary)",
+    accent: "bg-(--filled-background-color-accent)",
+    success: "bg-(--filled-background-color-success)",
+    danger: "bg-(--filled-background-color-danger)",
+    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)",
+    secondary: "hover:bg-(--filled-background-color-hover-secondary)",
+    tertiary: "hover:bg-(--filled-background-color-hover-tertiary)",
+    accent: "hover:bg-(--filled-background-color-hover-accent)",
+    success: "hover:bg-(--filled-background-color-hover-success)",
+    danger: "hover:bg-(--filled-background-color-hover-danger)",
+    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)",
+    secondary: "active:bg-(--filled-background-color-active-secondary)",
+    tertiary: "active:bg-(--filled-background-color-active-tertiary)",
+    accent: "active:bg-(--filled-background-color-active-accent)",
+    success: "active:bg-(--filled-background-color-active-success)",
+    danger: "active:bg-(--filled-background-color-active-danger)",
+    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)",
+    secondary: "bg-(--background-color-secondary)",
+    tertiary: "bg-(--background-color-tertiary)",
+    accent: "bg-(--background-color-accent)",
+    success: "bg-(--background-color-success)",
+    danger: "bg-(--background-color-danger)",
+    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)",
+    secondary: "hover:bg-(--background-color-hover-secondary)",
+    tertiary: "hover:bg-(--background-color-hover-tertiary)",
+    accent: "hover:bg-(--background-color-hover-accent)",
+    success: "hover:bg-(--background-color-hover-success)",
+    danger: "hover:bg-(--background-color-hover-danger)",
+    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)",
+    secondary: "active:bg-(--background-color-active-secondary)",
+    tertiary: "active:bg-(--background-color-active-tertiary)",
+    accent: "active:bg-(--background-color-active-accent)",
+    success: "active:bg-(--background-color-active-success)",
+    danger: "active:bg-(--background-color-active-danger)",
+    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)",
+    primary: "bg-(--layout-background-primary)",
+    secondary: "bg-(--layout-background-secondary)",
+    tertiary: "bg-(--layout-background-tertiary)",
+    accent: "bg-(--layout-background-accent)",
+    success: "bg-(--layout-background-success)",
+    danger: "bg-(--layout-background-danger)",
+    warning: "bg-(--layout-background-warning)",
+    info: "bg-(--layout-background-info)",
+    transparent: "bg-transparent",
+};
+const dividerAppearanceClasses = {
+    default: "bg-(--border-color-default)",
+    primary: "bg-(--border-color-primary)",
+    secondary: "bg-(--border-color-secondary)",
+    tertiary: "bg-(--border-color-tertiary)",
+    accent: "bg-(--border-color-accent)",
+    success: "bg-(--border-color-success)",
+    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)",
+};
+const borderAppearanceClasses = {
+    default: "border-(--border-color-default)",
+    primary: "border-(--border-color-primary)",
+    secondary: "border-(--border-color-secondary)",
+    tertiary: "border-(--border-color-tertiary)",
+    accent: "border-(--border-color-accent)",
+    success: "border-(--border-color-success)",
+    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)",
+};
+// Border classes for filled elements
+const filledBorderAppearanceClasses = {
+    default: "border-(--filled-border-color-default)",
+    primary: "border-(--filled-border-color-primary)",
+    secondary: "border-(--filled-border-color-secondary)",
+    tertiary: "border-(--filled-border-color-tertiary)",
+    accent: "border-(--filled-border-color-accent)",
+    success: "border-(--filled-border-color-success)",
+    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)",
+};
+const ringAppearanceClasses = {
+    default: "ring-(--border-color-default)",
+    primary: "ring-(--border-color-primary)",
+    secondary: "ring-(--border-color-secondary)",
+    tertiary: "ring-(--border-color-tertiary)",
+    accent: "ring-(--border-color-accent)",
+    success: "ring-(--border-color-success)",
+    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)",
+};
+// Ring classes for filled elements
+const filledRingAppearanceClasses = {
+    default: "ring-(--filled-border-color-default)",
+    primary: "ring-(--filled-border-color-primary)",
+    secondary: "ring-(--filled-border-color-secondary)",
+    tertiary: "ring-(--filled-border-color-tertiary)",
+    accent: "ring-(--filled-border-color-accent)",
+    success: "ring-(--filled-border-color-success)",
+    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)",
+};
+
+class VariantTheme extends BaseTheme {
+    constructor(variantInstances = VariantTheme.defaultInstances) {
+        super();
+        VARIANT_KEYS.forEach((variantKey) => {
+            this[variantKey] = variantInstances[variantKey] || VariantTheme.defaultInstances[variantKey];
+        });
+    }
+    getClasses(props, defaults) {
+        const activeVariantKey = pickKey(props, defaults, VARIANT_KEYS, 'outline');
+        const activeTextAppearanceTheme = this[activeVariantKey];
+        if (!activeTextAppearanceTheme) {
+            return [];
+        }
+        return activeTextAppearanceTheme.getClasses(props, defaults);
+    }
+    static createDefault(initialInstances) {
+        const fullInitialInstances = {
+            ...VariantTheme.defaultInstances,
+            ...(initialInstances || {})
+        };
+        return new VariantTheme(fullInitialInstances);
+    }
+    static createDefaultBackground() {
+        return this.createDefault({
+            outline: TextAppearanceTheme.createDefaultStyle({
+                base: backgroundAppearanceClasses,
+                hover: hoverBackgroundAppearanceClasses,
+                active: activeBackgroundAppearanceClasses
+            }),
+            filled: TextAppearanceTheme.createDefaultStyle({
+                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 })
+        });
+    }
+}
+VariantTheme.defaultInstances = Object.fromEntries(VARIANT_KEYS.map(variantKey => [
+    variantKey,
+    new TextAppearanceTheme()
+]));
+
+const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer inline-flex items-center justify-center transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-2.5',
+                md: 'px-3.5',
+                lg: 'px-5',
+                xl: 'px-6',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-1',
+                sm: 'py-1.5',
+                md: 'py-2',
+                lg: 'py-3',
+                xl: 'py-4',
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-1.5',
+                sm: 'gap-2',
+                md: 'gap-3',
+                lg: 'gap-4',
+                xl: 'gap-5',
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs/5',
+            sm: 'text-sm/5',
+            md: 'text-base',
+            lg: 'text-lg/6',
+            xl: 'text-xl/6',
+        }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: VariantTheme.createDefaultBackground(),
+        text: VariantTheme.createDefaultText(),
+        border: VariantTheme.createDefaultBorder(),
+        ring: VariantTheme.createDefaultRing(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-sm',
+                sm: 'rounded-md',
+                md: 'rounded-md',
+                lg: 'rounded-lg',
+                xl: 'rounded-xl',
+            }
+        }),
+    },
+}, {
+    md: true,
+    outline: true,
+    default: true,
+    rounded: true,
+    sans: true,
+    semibold: true,
+    textCenter: true,
+    noBorder: true,
+    gap: true,
+    padding: true,
+    ring: true,
+    shadow: true,
+});
+
+const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit inline-flex transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: "px-2",
+                sm: "px-2.5",
+                md: "px-3.5",
+                lg: "px-5",
+                xl: "px-6"
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: "py-1",
+                sm: "py-1.5",
+                md: "py-2",
+                lg: "py-3",
+                xl: "py-4"
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: "gap-1",
+                sm: "gap-1.5",
+                md: "gap-2",
+                lg: "gap-2.5",
+                xl: "gap-3"
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs/5',
+            sm: 'text-sm/5',
+            md: 'text-base',
+            lg: 'text-lg/6',
+            xl: 'text-xl/6',
+        }),
+        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(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: "rounded-xs",
+                sm: "rounded-sm",
+                md: "rounded-md",
+                lg: "rounded-lg",
+                xl: "rounded-xl"
+            }
+        }),
+    },
+}, {
+    md: true,
+    outline: true,
+    pill: true,
+    sans: true,
+    semibold: true,
+    uppercase: true,
+    noShadow: true,
+    itemsCenter: true,
+    padding: true,
+    gap: true,
+    ring: true,
+});
+
+const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit inline-flex gap-2 items-center transition-all duration-200 whitespace-nowrap", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-2.5',
+                md: 'px-3.5',
+                lg: 'px-5',
+                xl: 'px-6',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-1',
+                sm: 'py-1.5',
+                md: 'py-2',
+                lg: 'py-3',
+                xl: 'py-4',
+            }
+        }),
+        text: new SizeTheme({
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-sm',
+            lg: 'text-base',
+            xl: 'text-base',
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                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(),
+    },
+    layout: {
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-sm',
+                sm: 'rounded-md',
+                md: 'rounded-lg',
+                lg: 'rounded-xl',
+                xl: 'rounded-2xl',
+            }
+        }),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+    },
+}, {
+    md: true,
+    outline: true,
+    secondary: true,
+    rounded: true,
+    mono: true,
+    normal: true,
+    noShadow: true,
+    padding: true,
+    gap: true,
+    ring: true,
+});
+
+const typographyThemeDefaults = {
+    md: true,
+    default: true,
+    sans: true,
+    normal: true,
+};
+const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = typographyThemeDefaults) => {
+    return new ComponentTheme(tag, base, {
+        size: {
+            text: new SizeTheme(textSizeMap),
+        },
+        appearance: {
+            text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        }
+    }, defaults);
+};
+// Page title specific theme
+const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracking-tighter w-fit", {
+    xs: "text-3xl max-lg:text-2xl max-md:text-xl",
+    sm: "text-4xl max-lg:text-3xl max-md:text-2xl",
+    md: "text-5xl max-lg:text-4xl max-md:text-3xl",
+    lg: "text-6xl max-lg:text-5xl max-md:text-4xl",
+    xl: "text-7xl max-lg:text-6xl max-md:text-5xl",
+}, { ...typographyThemeDefaults, semibold: true });
+// Section title specific theme
+const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-fit", {
+    xs: "text-2xl max-lg:text-xl  max-md:text-lg",
+    sm: "text-3xl max-lg:text-2xl max-md:text-xl",
+    md: "text-4xl max-lg:text-3xl max-md:text-2xl",
+    lg: "text-5xl max-lg:text-4xl max-md:text-3xl",
+    xl: "text-6xl max-lg:text-5xl max-md:text-4xl",
+}, { ...typographyThemeDefaults, semibold: true });
+// Title specific theme
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", {
+    xs: "text-lg",
+    sm: "text-xl",
+    md: "text-2xl",
+    lg: "text-3xl",
+    xl: "text-4xl",
+}, { ...typographyThemeDefaults, semibold: true });
+// Text specific theme
+const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, { ...typographyThemeDefaults, secondary: true });
+// Link specific theme
+const linkTheme = createTypographyComponentTheme("a", "hover:underline w-fit", textSizeClasses, { ...typographyThemeDefaults, link: true });
+// List item specific theme
+const listItemTheme = createTypographyComponentTheme("li");
+// List specific theme
+const listTheme = createTypographyComponentTheme("ul", "list-disc list-inside");
+
+class DirectionTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FLEX_DIRECTION_KEYS.forEach((key) => {
+            this[key] = (initial === null || initial === void 0 ? void 0 : initial[key]) || DirectionTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        var _a;
+        let direction = (_a = pickKey(props, defaults, FLEX_DIRECTION_KEYS)) !== null && _a !== void 0 ? _a : 'column';
+        const reverse = pickKey(props, defaults, DIRECTION_REVERSE_KEYS);
+        if (reverse) {
+            switch (direction) {
+                case "column":
+                    direction = "columnReverse";
+                    break;
+                case "row":
+                    direction = "rowReverse";
+                    break;
+            }
+        }
+        return direction ? [this[direction]] : [];
+    }
+}
+DirectionTheme.defaultClasses = {
+    row: "flex-row",
+    column: "flex-col",
+    rowReverse: "flex-row-reverse",
+    columnReverse: "flex-col-reverse",
+};
+
+class WrapTheme extends BaseTheme {
+    constructor(initialConfig) {
+        super();
+        WRAP_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : WrapTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, WRAP_KEYS);
+        return key ? [this[key]] : [];
+    }
+}
+WrapTheme.defaultClasses = wrapClasses;
+
+const commonGaps = {
+    xs: 'gap-2',
+    sm: 'gap-3',
+    md: 'gap-4',
+    lg: 'gap-5',
+    xl: 'gap-6',
+};
+
+class LayoutAppearanceTheme extends BaseTheme {
+    constructor(initialOverrides) {
+        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 || {}),
+            };
+        });
+    }
+    getClasses(props, defaults) {
+        const pickedAppearanceKey = pickKey(props, defaults, 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) {
+        super();
+        BREAKPOINT_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : BreakpointTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, BREAKPOINT_KEYS);
+        if (!key)
+            return [];
+        return [this[key] || ''];
+    }
+}
+BreakpointTheme.defaultClasses = rowToColumnBreakpointClasses;
+
+const defaultCardTheme = new ComponentTheme("div", "flex overflow-hidden", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-3',
+                sm: 'px-4',
+                md: 'px-5',
+                lg: 'px-6',
+                xl: 'px-8',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-2',
+                sm: 'py-3',
+                md: 'py-4',
+                lg: 'py-5',
+                xl: 'py-6',
+            }
+        }),
+        gap: new GapTheme({ gap: commonGaps }),
+        shadow: new ShadowTheme(),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: "rounded-md",
+                sm: "rounded-lg",
+                md: "rounded-xl",
+                lg: "rounded-2xl",
+                xl: "rounded-3xl"
+            }
+        }),
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+        breakpoint: new BreakpointTheme(),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+    }
+}, {
+    md: true,
+    default: true,
+    rounded: true,
+    normal: true,
+    column: true,
+    border: true,
+    gap: true,
+    padding: true,
+});
+
+const defaultRowTheme = new ComponentTheme("div", "flex flex-row", {
+    size: {
+        gap: new GapTheme({ gap: commonGaps }),
+        breakpoint: new BreakpointTheme(),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+    },
+}, {
+    md: true,
+    transparent: true,
+    itemsCenter: true,
+    gap: true,
+});
+
+const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
+    appearance: {
+        background: TextAppearanceTheme.createDefaultStyle({
+            base: dividerAppearanceClasses,
+        }),
+    }
+}, {
+    md: true,
+    default: true,
+});
+
+const defaultContainerTheme = new ComponentTheme("div", "flex flex-col mx-auto w-full", {
+    size: {
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-2 max-lg:gap-1',
+                sm: 'gap-4 max-lg:gap-3 max-md:gap-2',
+                md: 'gap-6 max-lg:gap-5 max-md:gap-4',
+                lg: 'gap-8 max-lg:gap-7 max-md:gap-6',
+                xl: 'gap-10 max-lg:gap-9 max-md:gap-8',
+            }
+        }),
+        maxWidth: new SizeTheme({
+            xs: 'max-w-3xl',
+            sm: 'max-w-4xl',
+            md: 'max-w-5xl',
+            lg: 'max-w-6xl',
+            xl: 'max-w-7xl',
+        }),
+    },
+    layout: {
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
+    }
+}, {
+    transparent: true,
+    md: true,
+    itemsCenter: true,
+    gap: true,
+});
+
+const defaultColTheme = new ComponentTheme("div", "flex flex-col", {
+    size: {
+        gap: new GapTheme({ gap: commonGaps }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+}, {
+    md: true,
+    transparent: true,
+    gap: true,
+});
+
+const defaultStackTheme = new ComponentTheme("div", "flex", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-2',
+                sm: 'px-3',
+                md: 'px-4',
+                lg: 'px-5',
+                xl: 'px-6',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-2',
+                sm: 'py-3',
+                md: 'py-4',
+                lg: 'py-5',
+                xl: 'py-6',
+            }
+        }),
+        gap: new GapTheme({
+            gap: commonGaps
+        }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+}, {
+    md: true,
+    transparent: true,
+    column: true,
+    flexWrap: true,
+    gap: true,
+    padding: true,
+});
+
+const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
+    size: {
+        px: new PxTheme({
+            padding: {
+                xs: 'px-5 max-lg:px-4 max-md:px-3',
+                sm: 'px-6 max-lg:px-5 max-md:px-4',
+                md: 'px-7 max-lg:px-6 max-md:px-5',
+                lg: 'px-8 max-lg:px-7 max-md:px-6',
+                xl: 'px-9 max-lg:px-8 max-md:px-7',
+            }
+        }),
+        py: new PyTheme({
+            padding: {
+                xs: 'py-3',
+                sm: 'py-5',
+                md: 'py-8 max-md:py-5',
+                lg: 'py-16 max-lg:py-14 max-md:py-12',
+                xl: 'py-20 max-lg:py-16 max-md:py-12',
+            }
+        }),
+        gap: new GapTheme({
+            gap: {
+                xs: 'gap-2',
+                sm: 'gap-4',
+                md: 'gap-6',
+                lg: 'gap-12',
+                xl: 'gap-16',
+            }
+        }),
+    },
+    layout: {
+        wrap: new WrapTheme(),
+        direction: new DirectionTheme(),
+    },
+}, {
+    md: true,
+    default: true,
+    itemsStart: true,
+    gap: true,
+    padding: true,
+});
+
+const gridDefaults = {
+    md: true,
+    gap: true,
+};
+const gridSubThemes = {
+    size: {
+        gap: new GapTheme({
+            gap: {
+                xs: "gap-2",
+                sm: "gap-4  max-lg:gap-2",
+                md: "gap-6  max-lg:gap-4",
+                lg: "gap-8  max-lg:gap-6 max-md:gap-4",
+                xl: "gap-10 max-lg:gap-8 max-md:gap-6"
+            }
+        }),
+    },
+};
+const defaultGrid3Theme = new ComponentTheme("div", "grid grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults);
+const defaultGrid4Theme = new ComponentTheme("div", "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, gridDefaults);
+
+const defaultTheme = {
+    button: defaultButtonTheme,
+    badge: defaultBadgeTheme,
+    chip: defaultChipTheme,
+    card: defaultCardTheme,
+    divider: defaultDividerTheme,
+    container: defaultContainerTheme,
+    row: defaultRowTheme,
+    col: defaultColTheme,
+    stack: defaultStackTheme,
+    section: defaultSectionTheme,
+    grid3: defaultGrid3Theme,
+    grid4: defaultGrid4Theme,
+    pageTitle: pageTitleTheme,
+    sectionTitle: sectionTitleTheme,
+    title: titleTheme,
+    text: textTheme,
+    link: linkTheme,
+    listItem: listItemTheme,
+    list: listTheme,
+};
+const ThemeContext = createContext(defaultTheme);
+function ThemeProvider({ children, theme: themeObject = {}, themeOverride }) {
+    const mergedTheme = useMemo(() => {
+        let baseTheme = themeObject
+            ? deepMerge(defaultTheme, themeObject)
+            : defaultTheme;
+        if (typeof themeOverride === 'function') {
+            const themeToModify = deepClone(baseTheme);
+            return themeOverride(themeToModify);
+        }
+        return baseTheme;
+    }, [themeObject, themeOverride]);
+    return (jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
+}
+function useTheme() {
+    return useContext(ThemeContext);
+}
+
+export { ThemeProvider, useTheme };
+//# sourceMappingURL=index.js.map