@vaneui/ui 0.0.13 → 0.0.14

package/dist/index.js

@@ -1,6 +1,9 @@
+'use client';
+
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 
 const CLASS_PART_SEPARATOR = '-';
 const createClassGroupUtils = config => {
@@ -520,7 +523,7 @@ const getDefaultConfig = () => {
   const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartAndEnd = () => ['auto', {
     span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
-  }, isArbitraryVariable, isArbitraryValue];
+  }, isInteger, isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
   const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
   const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'];
@@ -528,7 +531,7 @@ const getDefaultConfig = () => {
   const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
-  const scaleGradientStopPosition = () => [isPercent, isArbitraryLength];
+  const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
   const scaleRadius = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
@@ -2713,6 +2716,470 @@ const getDefaultConfig = () => {
 };
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
+function buildComponent(props, theme, propsToOmit = []) {
+    var _a;
+    const cleanProps = { ...props };
+    for (const k of propsToOmit) {
+        if (k in cleanProps) {
+            delete cleanProps[k];
+        }
+    }
+    const { className, children, tag, ...other } = cleanProps;
+    const componentTag = (_a = tag !== null && tag !== void 0 ? tag : theme.tag) !== null && _a !== void 0 ? _a : "div";
+    const themeGeneratedClasses = react.useMemo(() => {
+        return theme.getClasses(props);
+    }, [props, theme]);
+    const mergedClasses = twMerge(...themeGeneratedClasses, className);
+    const TagToRender = componentTag;
+    return (jsxRuntime.jsx(TagToRender, { className: mergedClasses, ...other, children: children }));
+}
+
+/**
+ * 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
+const 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
+const GRID_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...GAP_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Row keys
+const ROW_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...ITEMS_KEYS,
+    ...BREAKPOINT_KEYS,
+    ...JUSTIFY_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Col keys
+const COL_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...WRAP_KEYS,
+    ...GAP_KEYS,
+    ...DIRECTION_REVERSE_KEYS,
+    ...ITEMS_KEYS,
+    ...JUSTIFY_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Card keys
+const 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
+const 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
+const 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
+const 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
+const DIVIDER_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...APPEARANCE_KEYS
+];
+// Container keys
+const CONTAINER_KEYS = [
+    ...BASE_COMPONENT_KEYS,
+    ...ITEMS_KEYS,
+    ...APPEARANCE_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...GAP_KEYS,
+];
+// Section keys
+const 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",
@@ -2745,6 +3212,28 @@ const textTransformClasses = {
     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)",
@@ -2757,344 +3246,1424 @@ const textAppearanceClasses = {
     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",
 };
 
-function getBooleanClass(props, classes, fallbackKey) {
-    var _a, _b;
-    if (!classes)
-        return "";
-    for (const key in props) {
-        if (Object.prototype.hasOwnProperty.call(props, key) && props[key]) {
-            return (_a = classes[key]) !== null && _a !== void 0 ? _a : "";
-        }
+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'] || ''];
     }
-    return fallbackKey ? (_b = classes[fallbackKey]) !== null && _b !== void 0 ? _b : "" : "";
 }
-function componentBuilder(baseProps, defaultTag, baseClasses) {
-    const extraClasses = [];
-    const { className, children, tag, ...other } = baseProps;
-    const otherProps = { ...other };
-    const propsToRemove = [];
-    const registerKeys = (keys) => {
-        keys.forEach((key) => propsToRemove.push(key));
-    };
-    const withBooleanProps = (propMap, fallbackKey, settings) => {
-        // Build a subset of props from otherProps for the keys in the map.
-        const propsSubset = {};
-        const keys = Object.keys(propMap);
-        keys.forEach((key) => {
-            if (key in otherProps) {
-                propsSubset[key] = otherProps[key];
+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];
         });
-        if (settings) {
-            const settingsClass = getBooleanClass(settings || {}, propMap);
-            extraClasses.push(settingsClass);
+    }
+    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 [];
         }
-        // Compute the class.
-        const newClass = getBooleanClass(propsSubset, propMap, fallbackKey);
-        extraClasses.push(newClass);
-        // Register all keys found in the map.
-        registerKeys(keys);
-        return builder;
-    };
-    function finalize() {
-        const Tag = tag || defaultTag;
-        const merged = twMerge(baseClasses, ...extraClasses, className);
-        propsToRemove.forEach(key => delete otherProps[key]);
-        return (jsxRuntime.jsx(Tag, { className: merged, ...otherProps, children: children }));
-    }
-    const builder = {
-        withBooleanProps,
-        withSizes: (sizeMap) => withBooleanProps(sizeMap, "md"),
-        withBreakpoints: (breakpointMap) => withBooleanProps(breakpointMap),
-        withReverse: (reverseMap) => withBooleanProps(reverseMap),
-        withItems: (itemsMap) => withBooleanProps(itemsMap),
-        withHide: (hideMap) => withBooleanProps(hideMap),
-        withPosition: (positionMap) => withBooleanProps(positionMap),
-        withFontWeight: (fontWeight, settings) => withBooleanProps(fontWeight, undefined, settings),
-        withFontStyle: (fontStyle, settings) => withBooleanProps(fontStyle, undefined, settings),
-        withFontFamily: (fontFamily, settings) => withBooleanProps(fontFamily, undefined, settings),
-        withTextDecoration: (textDecoration, settings) => withBooleanProps(textDecoration, undefined, settings),
-        withTextTransform: (textTransform, settings) => withBooleanProps(textTransform, undefined, settings),
-        withTextAppearance: (appearance, settings) => withBooleanProps(appearance, "default", settings),
-        withGaps: (gapMap, sizeMap) => otherProps.noGap !== undefined && otherProps.noGap ? withBooleanProps(gapMap) : builder.withSizes(sizeMap),
-        withTypography: (settings) => {
-            var _a, _b, _c, _d, _e, _f;
-            return builder
-                .withFontFamily(fontFamilyClasses, (_a = settings === null || settings === void 0 ? void 0 : settings.fontFamily) !== null && _a !== void 0 ? _a : {})
-                .withFontStyle(fontStyleClasses, (_b = settings === null || settings === void 0 ? void 0 : settings.fontStyle) !== null && _b !== void 0 ? _b : {})
-                .withFontWeight(fontWeightClasses, (_c = settings === null || settings === void 0 ? void 0 : settings.fontWeight) !== null && _c !== void 0 ? _c : {})
-                .withTextDecoration(textDecorationClasses, (_d = settings === null || settings === void 0 ? void 0 : settings.textDecoration) !== null && _d !== void 0 ? _d : {})
-                .withTextTransform(textTransformClasses, (_e = settings === null || settings === void 0 ? void 0 : settings.textTransform) !== null && _e !== void 0 ? _e : {})
-                .withTextAppearance(textAppearanceClasses, (_f = settings === null || settings === void 0 ? void 0 : settings.textAppearance) !== null && _f !== void 0 ? _f : {});
-        },
-        withAppearance: (appearance, settings) => withBooleanProps(appearance, "default", settings),
-        build() {
-            builder.withHide({
-                xsHide: "max-xs:hidden",
-                smHide: "max-sm:hidden",
-                mdHide: "max-md:hidden",
-                lgHide: "max-lg:hidden",
-                xlHide: "max-xl:hidden"
-            });
-            builder.withPosition({
-                relative: "relative",
-                absolute: "absolute",
-                fixed: "fixed",
-                sticky: "sticky",
-                static: "static"
+        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;
+                }
             });
-            return finalize();
-        },
-    };
-    return builder;
+            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 Button = (props) => componentBuilder(props, "button", "w-fit h-fit cursor-pointer flex justify-center items-center border border-gray-200 transition-all duration-300")
-    .withSizes({
-    xs: "px-2 py-1 rounded-sm text-xs",
-    sm: "px-3 py-1 rounded-md text-sm",
-    md: "px-4 py-2 rounded-md text-base",
-    lg: "px-6 py-3 rounded-lg text-lg",
-    xl: "px-8 py-4 rounded-xl text-xl",
-})
-    .withSizes({
-    xs: "shadow-xs hover:shadow-sm",
-    sm: "shadow-xs hover:shadow-sm",
-    md: "shadow-sm hover:shadow-md",
-    lg: "shadow-md hover:shadow-lg",
-    xl: "shadow-lg hover:shadow-xl",
-})
-    .withTypography({
-    fontWeight: { semibold: true },
-})
-    .build();
-
-const Badge = (props) => componentBuilder(props, "span", "rounded-full w-fit")
-    .withSizes({
-    xs: "px-2 py-1 text-xs",
-    sm: "px-3 py-1 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "px-5 py-2 text-lg",
-    xl: "px-6 py-3 text-xl",
-})
-    .withAppearance({
-    default: "bg-gray-200",
-    accent: "bg-gray-200",
-    primary: "bg-blue-200",
-    secondary: "bg-gray-200",
-    tertiary: "bg-gray-200",
-    success: "bg-green-200",
-    danger: "bg-red-200",
-    warning: "bg-yellow-200",
-    info: "bg-blue-200"
-}, {})
-    .withTypography({
-    fontWeight: { semibold: true },
-    fontFamily: { mono: true },
-    textTransform: { uppercase: true },
-    textAppearance: { secondary: true },
-})
-    .build();
-
-const Divider = (props) => componentBuilder(props, "div", "bg-gray-200 w-full h-px")
-    .build();
-
-const Chip = (props) => componentBuilder(props, "span", "rounded-full w-fit h-fit border")
-    .withSizes({
-    xs: "px-1 py-1 rounded-sm text-xs",
-    sm: "px-2 py-1 rounded-md text-sm",
-    md: "px-2 py-1 rounded-lg text-base",
-    lg: "px-3 py-2 rounded-xl text-lg",
-    xl: "px-4 py-3 rounded-2xl text-xl",
-})
-    .withAppearance({
-    default: "bg-gray-100",
-    accent: "bg-gray-200",
-    primary: "bg-blue-200",
-    secondary: "bg-gray-200",
-    tertiary: "bg-gray-200",
-    success: "bg-green-200",
-    danger: "bg-red-200",
-    warning: "bg-yellow-200",
-    info: "bg-blue-200"
-}, {})
-    .withTypography({
-    fontFamily: { mono: true },
-    textAppearance: { secondary: true },
-})
-    .build();
-
-const itemsClasses = {
-    itemsStart: "items-start",
-    itemsEnd: "items-end",
-    itemsCenter: "items-center",
-    itemsBaseline: "items-baseline",
-    itemsStretch: "items-stretch"
-};
-const Section = (props) => componentBuilder(props, "section", "w-full flex flex-col items-start")
-    .withItems(itemsClasses)
-    .withSizes({
-    xs: "py-6  max-lg:py-4  max-md:py-2",
-    sm: "py-8  max-lg:py-6  max-md:py-4",
-    md: "py-10 max-lg:py-8  max-md:py-6",
-    lg: "py-12 max-lg:py-10 max-md:py-8",
-    xl: "py-14 max-lg:py-12 max-md:py-10",
-})
-    .withSizes({
-    xs: "px-4  max-lg:px-2  max-md:px-0",
-    sm: "px-6  max-lg:px-6  max-md:px-2",
-    md: "px-8  max-lg:px-6  max-md:px-4",
-    lg: "px-10 max-lg:px-8  max-md:px-6",
-    xl: "px-12 max-lg:px-10 max-md:px-8",
-})
-    .build();
-const Container = (props) => componentBuilder(props, "div", "flex flex-col mx-auto w-full")
-    .withItems(itemsClasses)
-    .withSizes({
-    xs: "max-w-3xl gap-2  max-lg:gap-1",
-    sm: "max-w-4xl gap-4  max-lg:gap-3 max-md:gap-2",
-    md: "max-w-5xl gap-6  max-lg:gap-5 max-md:gap-4",
-    lg: "max-w-6xl gap-8  max-lg:gap-7 max-md:gap-6",
-    xl: "max-w-7xl gap-10 max-lg:gap-9 max-md:gap-8",
-})
-    .build();
-const commonGaps = {
-    xs: "gap-1",
-    sm: "gap-2 max-lg:gap-1",
-    md: "gap-4 max-lg:gap-3 max-md:gap-2",
-    lg: "gap-6 max-lg:gap-5 max-md:gap-4",
-    xl: "gap-8 max-lg:gap-7 max-md:gap-6",
-};
-const Col = (props) => componentBuilder(props, "div", "flex flex-col")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-    reverse: "flex-col-reverse"
-})
-    .withItems(itemsClasses)
-    .build();
-const Row = (props) => componentBuilder(props, "div", "flex flex-row")
-    .withGaps({ noGap: "gap-0" }, commonGaps)
-    .withReverse({
-    reverse: "flex-row-reverse"
-})
-    .withItems(itemsClasses)
-    .withBreakpoints({
-    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"
-})
-    .withBooleanProps({
-    justifyStart: "justify-start",
-    justifyEnd: "justify-end",
-    justifyCenter: "justify-center",
-    justifyBetween: "justify-between",
-    justifyAround: "justify-around",
-    justifyEvenly: "justify-evenly",
-    justifyStretch: "justify-stretch",
-    justifyBaseline: "justify-baseline",
-})
-    .build();
-const gridGaps = {
-    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 Grid3 = (props) => componentBuilder(props, "div", "w-full grid grid-cols-3 max-lg:grid-cols-2 max-md:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-const Grid4 = (props) => componentBuilder(props, "div", "w-full grid grid-cols-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1")
-    .withGaps({ noGap: "gap-0" }, gridGaps)
-    .build();
-
-const PageTitle = (props) => componentBuilder(props, "h1")
-    .withSizes({
-    xs: "text-3xl",
-    sm: "text-4xl",
-    md: "text-5xl",
-    lg: "text-6xl",
-    xl: "text-7xl",
-})
-    .withTypography({
-    fontWeight: { semibold: true }
-})
-    .build();
-const SectionTitle = (props) => componentBuilder(props, "h2")
-    .withSizes({
-    xs: "text-2xl",
-    sm: "text-3xl",
-    md: "text-4xl",
-    lg: "text-5xl",
-    xl: "text-6xl",
-})
-    .withTypography({
-    fontWeight: { semibold: true }
-})
-    .build();
-const Title = (props) => componentBuilder(props, "h3")
-    .withSizes({
+// 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",
-})
-    .withTypography({
-    fontWeight: { semibold: true }
-})
-    .build();
-const Text = (props) => componentBuilder(props, "p", "p-0 m-0")
-    .withSizes({
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-})
-    .withTypography({
-    textAppearance: { secondary: true }
-})
-    .build();
-const Link = (props) => componentBuilder(props, "a", "hover:underline")
-    .withSizes({
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-})
-    .withTypography({
-    textAppearance: { link: true }
-})
-    .build();
-const ListItem = (props) => componentBuilder(props, "li")
-    .withSizes({
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-})
-    .withTypography({})
-    .build();
-const List = (props) => componentBuilder(props, "ul", "list-disc list-inside")
-    .withSizes({
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-})
-    .withTypography({})
-    .build();
+}, { ...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 w-fit");
+// List specific theme
+const listTheme = createTypographyComponentTheme("ul w-fit", "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 = react.createContext(defaultTheme);
+function ThemeProvider({ children, theme: themeObject = {}, themeOverride }) {
+    const mergedTheme = react.useMemo(() => {
+        let baseTheme = themeObject
+            ? deepMerge(defaultTheme, themeObject)
+            : defaultTheme;
+        if (typeof themeOverride === 'function') {
+            const themeToModify = deepClone(baseTheme);
+            return themeOverride(themeToModify);
+        }
+        return baseTheme;
+    }, [themeObject, themeOverride]);
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
+}
+function useTheme() {
+    return react.useContext(ThemeContext);
+}
+
+const Button = (props) => {
+    const theme = useTheme();
+    const buttonTheme = theme.button;
+    return buildComponent(props, buttonTheme, BUTTON_KEYS);
+};
+
+const Badge = (props) => {
+    const theme = useTheme();
+    const badgeTheme = theme.badge;
+    return buildComponent(props, badgeTheme, BADGE_KEYS);
+};
+
+const Divider = (props) => {
+    const theme = useTheme();
+    const dividerTheme = theme.divider;
+    return buildComponent(props, dividerTheme, DIVIDER_KEYS);
+};
+
+const Chip = (props) => {
+    const theme = useTheme();
+    const chipTheme = theme.chip;
+    return buildComponent(props, chipTheme, CHIP_KEYS);
+};
+
+const Section = (props) => {
+    const theme = useTheme();
+    const sectionTheme = theme.section;
+    return buildComponent(props, sectionTheme, SECTION_KEYS);
+};
+
+const Container = (props) => {
+    const theme = useTheme();
+    const containerTheme = theme.container;
+    return buildComponent(props, containerTheme, CONTAINER_KEYS);
+};
+
+/**
+ * Column component for vertical layouts.
+ * Supports flex-wrap properties for controlling how items wrap.
+ * @param props.wrap - Allows items to wrap (flex-wrap)
+ * @param props.nowrap - Prevents items from wrapping (flex-nowrap)
+ * @param props.wrapReverse - Wraps items onto multiple lines in reverse (flex-wrap-reverse)
+ */
+const Col = (props) => {
+    const theme = useTheme();
+    const colTheme = theme.col;
+    return buildComponent(props, colTheme, COL_KEYS);
+};
+
+const Row = (props) => {
+    const theme = useTheme();
+    const rowTheme = theme.row;
+    return buildComponent(props, rowTheme, ROW_KEYS);
+};
+
+const Grid3 = (props) => {
+    const theme = useTheme();
+    const grid3Theme = theme.grid3;
+    return buildComponent(props, grid3Theme, GRID_KEYS);
+};
+const Grid4 = (props) => {
+    const theme = useTheme();
+    const grid4Theme = theme.grid4;
+    return buildComponent(props, grid4Theme, GRID_KEYS);
+};
+
+const Card = (props) => {
+    const theme = useTheme();
+    const cardTheme = theme.card;
+    return buildComponent(props, cardTheme, CARD_KEYS);
+};
+
+const Stack = (props) => {
+    const theme = useTheme();
+    const stackTheme = theme.stack;
+    return buildComponent(props, stackTheme, STACK_KEYS);
+};
+
+const PageTitle = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.pageTitle, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const SectionTitle = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.sectionTitle, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const Title = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.title, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const Text = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.text, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const Link = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.link, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const ListItem = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.listItem, TYPOGRAPHY_COMPONENT_KEYS);
+};
+const List = (props) => {
+    const theme = useTheme();
+    return buildComponent(props, theme.list, TYPOGRAPHY_COMPONENT_KEYS);
+};
 
 exports.Badge = Badge;
 exports.Button = Button;
+exports.Card = Card;
 exports.Chip = Chip;
 exports.Col = Col;
 exports.Container = Container;
@@ -3108,6 +4677,9 @@ exports.PageTitle = PageTitle;
 exports.Row = Row;
 exports.Section = Section;
 exports.SectionTitle = SectionTitle;
+exports.Stack = Stack;
 exports.Text = Text;
+exports.ThemeProvider = ThemeProvider;
 exports.Title = Title;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map