@vaneui/ui 0.2.1-alpha.20250904211915.5efd1b4 → 0.2.2-alpha.20250907183237.5f63365

package/dist/index.js

@@ -34,6 +34,11 @@ const COMPONENT_PROPS_CATEGORY = [
     ...VARIANT,
     'mode',
 ];
+/**
+ * Describes what the @ComponentKeys.appearance can be applied to
+ * @see ComponentKeys.appearance
+ */
+const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent'];
 const ComponentKeys = {
     appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
     border: ['border', 'noBorder'],
@@ -120,231 +125,161 @@ const ComponentCategories = {
 };
 
 class HideTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.hide.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                xsHide: "max-xs:hidden",
-                smHide: "max-sm:hidden",
-                mdHide: "max-md:hidden",
-                lgHide: "max-lg:hidden",
-                xlHide: "max-xl:hidden"
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.xsHide = "max-xs:hidden";
+        this.smHide = "max-sm:hidden";
+        this.mdHide = "max-md:hidden";
+        this.lgHide = "max-lg:hidden";
+        this.xlHide = "max-xl:hidden";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.hide;
-        return [key ? this[key] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.hide) ? this[extractedKeys.hide] : ''];
     }
 }
 
 class ItemsTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.items.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                itemsStart: "items-start",
-                itemsEnd: "items-end",
-                itemsCenter: "items-center",
-                itemsBaseline: "items-baseline",
-                itemsStretch: "items-stretch",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.itemsStart = "items-start";
+        this.itemsEnd = "items-end";
+        this.itemsCenter = "items-center";
+        this.itemsBaseline = "items-baseline";
+        this.itemsStretch = "items-stretch";
     }
     getClasses(extractedKeys) {
-        const pickedKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.items;
-        return [pickedKey && this[pickedKey] ? this[pickedKey] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.items) && this[extractedKeys.items] ? this[extractedKeys.items] : ''];
     }
 }
 
 class JustifyTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.justify.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                justifyStart: "justify-start",
-                justifyEnd: "justify-end",
-                justifyCenter: "justify-center",
-                justifyBetween: "justify-between",
-                justifyAround: "justify-around",
-                justifyEvenly: "justify-evenly",
-                justifyStretch: "justify-stretch",
-                justifyBaseline: "justify-baseline",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.justifyStart = "justify-start";
+        this.justifyEnd = "justify-end";
+        this.justifyCenter = "justify-center";
+        this.justifyBetween = "justify-between";
+        this.justifyAround = "justify-around";
+        this.justifyEvenly = "justify-evenly";
+        this.justifyStretch = "justify-stretch";
+        this.justifyBaseline = "justify-baseline";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.justify;
-        return [key ? this[key] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.justify) ? this[extractedKeys.justify] : ''];
     }
 }
 
 class PositionTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.position.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                relative: "relative",
-                absolute: "absolute",
-                fixed: "fixed",
-                sticky: "sticky",
-                static: "static"
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.relative = "relative";
+        this.absolute = "absolute";
+        this.fixed = "fixed";
+        this.sticky = "sticky";
+        this.static = "static";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.position;
-        return [key ? this[key] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.position) ? this[extractedKeys.position] : ''];
     }
 }
 
 class FontStyleTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.fontStyle.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                italic: "italic",
-                notItalic: "not-italic",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.italic = "italic";
+        this.notItalic = "not-italic";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontStyle;
-        return [key ? this[key] : '']; // No default for font style
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontStyle) ? this[extractedKeys.fontStyle] : ''];
     }
 }
 
 class FontFamilyTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.fontFamily.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                sans: "font-sans",
-                serif: "font-serif",
-                mono: "font-mono",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.sans = "font-sans";
+        this.serif = "font-serif";
+        this.mono = "font-mono";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontFamily;
-        if (key === undefined)
-            return [];
-        return [this[key]];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontFamily) ? [this[extractedKeys.fontFamily]] : [];
     }
 }
 
 class FontWeightTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.fontWeight.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                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",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.thin = "font-thin";
+        this.extralight = "font-extralight";
+        this.light = "font-light";
+        this.normal = "font-normal";
+        this.medium = "font-medium";
+        this.semibold = "font-semibold";
+        this.bold = "font-bold";
+        this.extrabold = "font-extrabold";
+        this.black = "font-black";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontWeight;
-        if (key === undefined)
-            return [];
-        return [this[key]];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.fontWeight) ? [this[extractedKeys.fontWeight]] : [];
     }
 }
 
 class TextDecorationTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.textDecoration.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                underline: "underline",
-                lineThrough: "line-through",
-                noUnderline: "no-underline",
-                overline: "overline",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.underline = "underline";
+        this.lineThrough = "line-through";
+        this.noUnderline = "no-underline";
+        this.overline = "overline";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textDecoration;
-        return [key ? this[key] : '']; // No default for text decoration
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textDecoration) ? this[extractedKeys.textDecoration] : ''];
     }
 }
 
 class TextTransformTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.textTransform.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                uppercase: "uppercase",
-                lowercase: "lowercase",
-                capitalize: "capitalize",
-                normalCase: "normal-case",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.uppercase = "uppercase";
+        this.lowercase = "lowercase";
+        this.capitalize = "capitalize";
+        this.normalCase = "normal-case";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textTransform;
-        return [key ? this[key] : '']; // No default for text transform
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textTransform) ? this[extractedKeys.textTransform] : ''];
     }
 }
 
 class TextAlignTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.textAlign.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                textLeft: "text-left",
-                textCenter: "text-center",
-                textRight: "text-right",
-                textJustify: "text-justify",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.textLeft = "text-left";
+        this.textCenter = "text-center";
+        this.textRight = "text-right";
+        this.textJustify = "text-justify";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textAlign;
-        return [key ? this[key] : '']; // No default for text align
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.textAlign) ? this[extractedKeys.textAlign] : ''];
     }
 }
 
 class DisplayTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.display.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                inline: "inline",
-                block: "block",
-                inlineBlock: "inline-block",
-                flex: "flex",
-                inlineFlex: "inline-flex",
-                grid: "grid",
-                inlineGrid: "inline-grid",
-                contents: "contents",
-                table: "table",
-                tableCell: "table-cell",
-                hidden: "hidden"
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.inline = "inline";
+        this.block = "block";
+        this.inlineBlock = "inline-block";
+        this.flex = "flex";
+        this.inlineFlex = "inline-flex";
+        this.grid = "grid";
+        this.inlineGrid = "inline-grid";
+        this.contents = "contents";
+        this.table = "table";
+        this.tableCell = "table-cell";
+        this.hidden = "hidden";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.display;
-        return [key && this[key] ? this[key] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.display) && this[extractedKeys.display] ? this[extractedKeys.display] : ''];
     }
 }
 
@@ -3060,32 +2995,26 @@ const getDefaultConfig = () => {
 const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 
 class OverflowTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.overflow.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                overflowAuto: 'overflow-auto',
-                overflowHidden: 'overflow-hidden',
-                overflowClip: 'overflow-clip',
-                overflowVisible: 'overflow-visible',
-                overflowScroll: 'overflow-scroll',
-                overflowXAuto: 'overflow-x-auto',
-                overflowYAuto: 'overflow-y-auto',
-                overflowXHidden: 'overflow-x-hidden',
-                overflowYHidden: 'overflow-y-hidden',
-                overflowXClip: 'overflow-x-clip',
-                overflowYClip: 'overflow-y-clip',
-                overflowXVisible: 'overflow-x-visible',
-                overflowYVisible: 'overflow-y-visible',
-                overflowXScroll: 'overflow-x-scroll',
-                overflowYScroll: 'overflow-y-scroll',
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.overflowAuto = 'overflow-auto';
+        this.overflowHidden = 'overflow-hidden';
+        this.overflowClip = 'overflow-clip';
+        this.overflowVisible = 'overflow-visible';
+        this.overflowScroll = 'overflow-scroll';
+        this.overflowXAuto = 'overflow-x-auto';
+        this.overflowYAuto = 'overflow-y-auto';
+        this.overflowXHidden = 'overflow-x-hidden';
+        this.overflowYHidden = 'overflow-y-hidden';
+        this.overflowXClip = 'overflow-x-clip';
+        this.overflowYClip = 'overflow-y-clip';
+        this.overflowXVisible = 'overflow-x-visible';
+        this.overflowYVisible = 'overflow-y-visible';
+        this.overflowXScroll = 'overflow-x-scroll';
+        this.overflowYScroll = 'overflow-y-scroll';
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.overflow;
-        return [key && this[key] ? this[key] : ''];
+        return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.overflow) && this[extractedKeys.overflow] ? this[extractedKeys.overflow] : ''];
     }
 }
 
@@ -3166,7 +3095,7 @@ class ComponentTheme {
         };
         walk(this.themes);
         // Apply extra classes based on extracted keys
-        for (const [key, value] of Object.entries(extractedKeys)) {
+        for (const [, value] of Object.entries(extractedKeys)) {
             if (value && this.extraClasses[value]) {
                 const existingClasses = this.extraClasses[value];
                 if (existingClasses !== undefined) {
@@ -3208,6 +3137,11 @@ class ComponentTheme {
 class SizeTheme extends BaseTheme {
     constructor(sizeMap, useDefaultKey = true) {
         super();
+        this.xs = "";
+        this.sm = "";
+        this.md = "";
+        this.lg = "";
+        this.xl = "";
         this.useDefaultKey = useDefaultKey;
         ComponentKeys.size.forEach((key) => {
             var _a;
@@ -3217,34 +3151,30 @@ class SizeTheme extends BaseTheme {
     getClasses(extractedKeys) {
         var _a;
         const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : (this.useDefaultKey ? 'md' : undefined);
-        if (size !== undefined)
-            return [this[size]];
-        else
-            return [''];
+        return size ? [this[size]] : [''];
     }
 }
 
 class GapTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
-        ComponentKeys.size.forEach((key) => {
-            var _a;
-            this[key] = (_a = sizeMap === null || sizeMap === void 0 ? void 0 : sizeMap[key]) !== null && _a !== void 0 ? _a : {
-                xs: 'gap-2', sm: 'gap-3', md: 'gap-4', lg: 'gap-5', xl: 'gap-6'
-            }[key];
-        });
+        this.xs = 'gap-2';
+        this.sm = 'gap-3';
+        this.md = 'gap-4';
+        this.lg = 'gap-5';
+        this.xl = 'gap-6';
+        if (sizeMap) {
+            ComponentKeys.size.forEach((key) => {
+                if (sizeMap[key] !== undefined) {
+                    this[key] = sizeMap[key];
+                }
+            });
+        }
     }
     getClasses(extractedKeys) {
         var _a;
-        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-        const gap = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap;
-        // If noGap is true, return empty array (no gap classes)
-        if (gap === 'noGap') {
-            return [];
-        }
-        // If gap is true or undefined, apply gap classes based on size
-        if (gap === 'gap') {
-            const gapClass = this[size];
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
+            const gapClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
             return gapClass ? [gapClass] : [];
         }
         return [];
@@ -3276,21 +3206,22 @@ class RadiusTheme extends BaseTheme {
     static createUITheme(customRounded) {
         return new RadiusTheme(customRounded || uiBorderRadiusClasses);
     }
-    static createLayoutTheme(customRounded) {
-        return new RadiusTheme(customRounded || layoutBorderRadiusClasses);
+    static createLayoutTheme() {
+        return new RadiusTheme(layoutBorderRadiusClasses);
     }
     getClasses(extractedKeys) {
         var _a, _b;
-        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-        const shape = (_b = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.shape) !== null && _b !== void 0 ? _b : 'rounded';
+        const size = (_a = extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
+        const shape = (_b = extractedKeys.shape) !== null && _b !== void 0 ? _b : 'rounded';
         switch (shape) {
             case 'pill':
                 return [this.pill];
             case 'sharp':
                 return [this.sharp];
-            case 'rounded':
+            case 'rounded': {
                 const roundedClass = this.rounded[size];
                 return roundedClass ? [roundedClass] : [];
+            }
             default:
                 return [];
         }
@@ -3298,78 +3229,53 @@ class RadiusTheme extends BaseTheme {
 }
 
 class BorderTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.mode.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                base: "border",
-                hover: "",
-                active: "",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.base = "border";
+        this.hover = "";
+        this.active = "";
     }
     getClasses(extractedKeys) {
-        const border = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border;
-        // If noBorder is true, return empty array (no border classes)
-        if (border === 'noBorder') {
-            return [];
-        }
-        // Only apply border classes if border is explicitly true
-        if (border === 'border') {
-            return ComponentKeys.mode.map(mode => this[mode] || '').filter(Boolean);
-        }
-        return [];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border) === "border"
+            ? ComponentKeys.mode.map((mode) => this[mode])
+            : [];
     }
 }
 
 class RingTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.mode.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                base: "ring ring-inset",
-                hover: "hover:ring hover:ring-inset",
-                active: "active:ring active:ring-inset",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.base = "ring ring-inset";
+        this.hover = "";
+        this.active = "";
     }
     getClasses(extractedKeys) {
-        const ring = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.ring;
-        // If noRing is true, return empty array (no ring classes)
-        if (ring === 'noRing') {
-            return [];
-        }
-        // Only apply ring classes if ring is explicitly true
-        if (ring === 'ring') {
-            return ComponentKeys.mode.map(mode => this[mode] || '').filter(Boolean);
-        }
-        return [];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.ring) === 'ring'
+            ? ComponentKeys.mode.map(mode => this[mode] || '').filter(Boolean)
+            : [];
     }
 }
 
 class PaddingTheme extends BaseTheme {
     constructor(initial) {
         super();
-        ComponentKeys.size.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                xs: "", sm: "", md: "", lg: "", xl: ""
-            }[key];
-        });
+        this.xs = "";
+        this.sm = "";
+        this.md = "";
+        this.lg = "";
+        this.xl = "";
+        if (initial) {
+            ComponentKeys.size.forEach((key) => {
+                if (initial[key] !== undefined) {
+                    this[key] = initial[key];
+                }
+            });
+        }
     }
     getClasses(extractedKeys) {
         var _a;
-        const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-        const padding = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding;
-        // If noPadding is true, return empty array (no padding classes)
-        if (padding === 'noPadding') {
-            return [];
-        }
-        // If padding is true or undefined, apply padding classes based on size
-        if (padding === 'padding' || padding === undefined) {
-            const paddingClass = this[size];
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
+            const paddingClass = this[(_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md'];
             return paddingClass ? [paddingClass] : [];
         }
         return [];
@@ -3405,13 +3311,23 @@ class PyTheme extends PaddingTheme {
 }
 
 class AppearanceTheme extends BaseTheme {
-    constructor(config, transparentClasses) {
+    constructor(config, category, transparentClasses) {
         super();
         Object.assign(this, config);
+        this.category = category;
         this.transparentClasses = transparentClasses;
     }
     getClasses(extractedKeys) {
         var _a;
+        if (this.category === 'border' && extractedKeys.border === 'noBorder') {
+            return [];
+        }
+        if (this.category === 'ring' && extractedKeys.ring === 'noRing') {
+            return [];
+        }
+        if (this.category === 'shadow' && extractedKeys.shadow === 'noShadow') {
+            return [];
+        }
         // Check for specific transparent styles first
         if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
             const transparentClass = ((_a = this.transparentClasses) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
@@ -3427,7 +3343,7 @@ class AppearanceTheme extends BaseTheme {
         }
         return [];
     }
-    static createTheme(src = {}) {
+    static createTheme(src = {}, category) {
         const config = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
             textKey,
             Object.fromEntries(ComponentKeys.mode.map(modeKey => {
@@ -3438,7 +3354,7 @@ class AppearanceTheme extends BaseTheme {
                 ];
             })),
         ]));
-        return new AppearanceTheme(config, src.base);
+        return new AppearanceTheme(config, category, src.base);
     }
 }
 
@@ -3754,21 +3670,21 @@ class GenericVariantTheme extends BaseTheme {
     getClasses(extractedKeys) {
         var _a;
         const variantKey = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.variant) !== null && _a !== void 0 ? _a : 'outline';
-        const activeTextAppearanceTheme = this[variantKey];
-        if (!activeTextAppearanceTheme) {
+        const activeTheme = this[variantKey];
+        if (!activeTheme) {
             return [];
         }
-        return activeTextAppearanceTheme.getClasses(extractedKeys);
+        return activeTheme.getClasses(extractedKeys);
     }
     // used for button, bages, chips, etc
     static createUIElementTextTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: textAppearanceClasses
-            }),
+            }, 'text'),
             filled: AppearanceTheme.createTheme({
                 base: filledTextAppearanceClasses
-            })
+            }, 'text')
         });
     }
     static createUIElementShadowTheme() {
@@ -3783,155 +3699,118 @@ class GenericVariantTheme extends BaseTheme {
             filled: ShadowAppearanceTheme.createLayoutTheme({})
         });
     }
-    static createBorderAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
-            filled: AppearanceTheme.createTheme({ base: filledBorderAppearanceClasses })
-        });
-    }
     static createUIElementBorderTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: borderAppearanceClasses
-            }),
+            }, 'border'),
             filled: AppearanceTheme.createTheme({
                 base: filledBorderAppearanceClasses
-            })
+            }, 'border')
         });
     }
     static createUIElementRingTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: ringAppearanceClasses
-            }),
+            }, 'ring'),
             filled: AppearanceTheme.createTheme({
                 base: filledRingAppearanceClasses
-            })
-        });
-    }
-    static createBgAppearanceTheme() {
-        return new GenericVariantTheme({
-            outline: AppearanceTheme.createTheme({
-                base: backgroundAppearanceClasses,
-                hover: hoverBackgroundAppearanceClasses,
-                active: activeBackgroundAppearanceClasses
-            }),
-            filled: AppearanceTheme.createTheme({
-                base: filledBackgroundAppearanceClasses,
-                hover: filledHoverBackgroundAppearanceClasses,
-                active: filledActiveBackgroundAppearanceClasses
-            })
+            }, 'ring')
         });
     }
     static createCheckboxBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            }),
+            }, 'bg'),
             filled: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            })
+            }, 'bg')
         });
     }
-    static createUIElementBgAppearanceTheme() {
+    static createBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
                 hover: hoverBackgroundAppearanceClasses,
                 active: activeBackgroundAppearanceClasses
-            }),
+            }, 'bg'),
             filled: AppearanceTheme.createTheme({
                 base: filledBackgroundAppearanceClasses,
                 hover: filledHoverBackgroundAppearanceClasses,
                 active: filledActiveBackgroundAppearanceClasses
-            })
+            }, 'bg')
         });
     }
     static createSimpleUIElementBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: backgroundAppearanceClasses,
-            }),
+            }, 'bg'),
             filled: AppearanceTheme.createTheme({
                 base: filledBackgroundAppearanceClasses,
-            })
+            }, 'bg')
         });
     }
     static createAccentColorAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: accentColorAppearanceClasses
-            }),
+            }, 'accent'),
             filled: AppearanceTheme.createTheme({
                 base: filledAccentColorAppearanceClasses
-            })
+            }, 'accent')
         });
     }
     static createCheckedAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: checkedBackgroundAppearanceClasses
-            }),
+            }, 'bg'),
             filled: AppearanceTheme.createTheme({
                 base: filledCheckedBackgroundAppearanceClasses
-            })
+            }, 'bg')
         });
     }
     static createLayoutBgAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({
                 base: layoutBackgroundAppearanceClasses
-            }),
+            }, 'bg'),
             filled: AppearanceTheme.createTheme({
                 base: layoutFilledBackgroundAppearanceClasses
-            })
+            }, 'bg')
         });
     }
 }
 
 class WrapTheme extends BaseTheme {
-    constructor(initialConfig) {
-        super();
-        ComponentKeys.wrap.forEach((key) => {
-            var _a;
-            this[key] = (_a = initialConfig === null || initialConfig === void 0 ? void 0 : initialConfig[key]) !== null && _a !== void 0 ? _a : {
-                flexWrap: "flex-wrap",
-                flexNoWrap: "flex-nowrap",
-                flexWrapReverse: "flex-wrap-reverse"
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.flexWrap = "flex-wrap";
+        this.flexNoWrap = "flex-nowrap";
+        this.flexWrapReverse = "flex-wrap-reverse";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.wrap;
-        return key ? [this[key]] : [];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.wrap) ? [this[extractedKeys.wrap]] : [];
     }
 }
 
 class DirectionTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.flexDirection.forEach((key) => {
-            this[key] = (initial === null || initial === void 0 ? void 0 : initial[key]) || {
-                row: "flex-row",
-                column: "flex-col",
-                rowReverse: "flex-row-reverse",
-                columnReverse: "flex-col-reverse",
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.row = "flex-row";
+        this.column = "flex-col";
+        this.rowReverse = "flex-row-reverse";
+        this.columnReverse = "flex-col-reverse";
     }
     getClasses(extractedKeys) {
-        let direction = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.flexDirection;
-        const reverse = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.reverse;
-        if (reverse === 'reverse') {
-            switch (direction) {
-                case "column":
-                    direction = "columnReverse";
-                    break;
-                case "row":
-                    direction = "rowReverse";
-                    break;
-            }
-        }
+        const direction = (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.reverse) === 'reverse'
+            ? ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.flexDirection) === "column" ? "columnReverse"
+                : (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.flexDirection) === "row" ? "rowReverse"
+                    : extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.flexDirection)
+            : extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.flexDirection;
         return direction ? [this[direction]] : [];
     }
 }
@@ -4160,7 +4039,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
     },
     appearance: {
-        background: GenericVariantTheme.createUIElementBgAppearanceTheme(),
+        background: GenericVariantTheme.createBgAppearanceTheme(),
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
@@ -4175,7 +4054,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, themeDefaults.button, BUTTON_CATEGORIES, (props, defaults) => {
+}, themeDefaults.button, BUTTON_CATEGORIES, (props) => {
     // Determine tag based on href prop
     return props.href ? "a" : "button";
 });
@@ -4203,7 +4082,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, themeDefaults.badge, BADGE_CATEGORIES, (props, defaults) => {
+}, themeDefaults.badge, BADGE_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
 });
 
@@ -4230,7 +4109,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, themeDefaults.chip, CHIP_CATEGORIES, (props, defaults) => {
+}, themeDefaults.chip, CHIP_CATEGORIES, (props) => {
     return props.href ? "a" : "span";
 });
 
@@ -4303,7 +4182,7 @@ const deepClone = (source) => {
 };
 const findGroup = (key) => {
     // Check each group in ComponentKeys to find which one contains this key
-    for (const [groupName, group] of Object.entries(ComponentKeys)) {
+    for (const [, group] of Object.entries(ComponentKeys)) {
         if (group.includes(key)) {
             return group;
         }
@@ -4351,15 +4230,10 @@ class PlTheme extends PaddingTheme {
 }
 
 class ListStyleTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.listStyle.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                disc: 'list-disc',
-                decimal: 'list-decimal',
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.disc = 'list-disc';
+        this.decimal = 'list-decimal';
     }
     getClasses(extractedKeys) {
         const listStyle = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.listStyle;
@@ -4381,7 +4255,7 @@ const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap
         },
         typography: defaultTypographyTheme,
         layout: defaultLayoutTheme,
-    }, defaults, TYPOGRAPHY_CATEGORIES, (props, defaults) => {
+    }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
         // Determine tag based on href prop
         return props.href ? "a" : tag;
     });
@@ -4439,34 +4313,25 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
     listStyle: new ListStyleTheme(),
-}, themeDefaults.list, LIST_CATEGORIES, (props, defaults) => {
-    // Determine tag based on list style from props and defaults
+}, themeDefaults.list, LIST_CATEGORIES, (props) => {
+    // Determine tag based on list style from props
     const componentProps = props;
-    const defaultsRecord = defaults;
-    // Check if decimal is set in props or defaults
-    const hasDecimal = (componentProps === null || componentProps === void 0 ? void 0 : componentProps.decimal) || (defaultsRecord === null || defaultsRecord === void 0 ? void 0 : defaultsRecord.decimal);
+    // Check if decimal is set in props
+    const hasDecimal = componentProps === null || componentProps === void 0 ? void 0 : componentProps.decimal;
     return hasDecimal ? "ol" : "ul";
 });
 
 class BreakpointTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        ComponentKeys.breakpoint.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : {
-                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"
-            }[key];
-        });
+    constructor() {
+        super(...arguments);
+        this.xsCol = "max-xs:flex-col";
+        this.smCol = "max-sm:flex-col";
+        this.mdCol = "max-md:flex-col";
+        this.lgCol = "max-lg:flex-col";
+        this.xlCol = "max-xl:flex-col";
     }
     getClasses(extractedKeys) {
-        const key = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.breakpoint;
-        if (!key)
-            return [];
-        return [this[key] || ''];
+        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.breakpoint) ? [this[extractedKeys.breakpoint] || ''] : [];
     }
 }
 
@@ -4505,7 +4370,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
     },
     typography: defaultTypographyTheme,
-}, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
+}, themeDefaults.card, CARD_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4529,7 +4394,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.row, ROW_CATEGORIES, (props, defaults) => {
+}, themeDefaults.row, ROW_CATEGORIES, (props) => {
     // Determine tag based on href prop
     return props.href ? "a" : "div";
 });
@@ -4541,7 +4406,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
     appearance: {
         background: AppearanceTheme.createTheme({
             base: bgBorderAppearanceClasses,
-        }),
+        }, 'bg'),
     },
     layout: defaultLayoutTheme,
 }, themeDefaults.divider, DIVIDER_CATEGORIES);
@@ -4572,7 +4437,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
+}, themeDefaults.container, CONTAINER_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4595,7 +4460,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.col, COL_CATEGORIES, (props, defaults) => {
+}, themeDefaults.col, COL_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4621,7 +4486,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, themeDefaults.stack, STACK_CATEGORIES, (props, defaults) => {
+}, themeDefaults.stack, STACK_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4659,7 +4524,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         ring: new RingTheme(),
         radius: RadiusTheme.createLayoutTheme(),
     },
-}, themeDefaults.section, SECTION_CATEGORIES, (props, defaults) => {
+}, themeDefaults.section, SECTION_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4683,13 +4548,13 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
-const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
-const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, themeDefaults.grid4, GRID_CATEGORIES, (props) => {
     return props.href ? "a" : "div";
 });
 
@@ -4953,15 +4818,25 @@ const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     filled, outline, 
     // Shape props
     pill, sharp, rounded, 
-    // Custom props
-    className, ...inputProps } = props;
+    // Extract input HTML attributes
+    checked, defaultChecked, disabled, name, value, onChange, onBlur, onFocus, required, readOnly, 
+    // Other HTML attributes
+    id, className, tabIndex, 'aria-label': ariaLabel, ...remainingProps } = props;
     const themeProps = {
         xs, sm, md, lg, xl,
         default: defaultProp, accent, primary, secondary, tertiary, success, danger, warning, info, transparent,
         filled, outline,
         pill, sharp, rounded
     };
-    return (jsxRuntime.jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.input, ...props, type: "checkbox" }), jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
+    const inputProps = {
+        type: "checkbox",
+        checked, defaultChecked, disabled, name, value, onChange, onBlur, onFocus, required, readOnly,
+        id, tabIndex, 'aria-label': ariaLabel,
+        className, // Apply className to the input element
+        ...remainingProps,
+        ...themeProps
+    };
+    return (jsxRuntime.jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.input, ...inputProps }), jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
 });
 
 const Label = react.forwardRef(function Label(props, ref) {
@@ -5047,6 +4922,7 @@ const List = react.forwardRef(function List(props, ref) {
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
+exports.APPEARANCE_CATEGORY = APPEARANCE_CATEGORY;
 exports.BADGE_CATEGORIES = BADGE_CATEGORIES;
 exports.BREAKPOINT = BREAKPOINT;
 exports.BUTTON_CATEGORIES = BUTTON_CATEGORIES;