@vaneui/ui 0.3.1-alpha.20250925201320.8b6a424 → 0.3.1-alpha.20250926201820.1b8c4ca

package/dist/components/ui/theme/layout/radiusTheme.d.ts

@@ -8,6 +8,7 @@ export declare class RadiusTheme extends BaseTheme {
     sharp: string;
     /** Size-based rounded corners - varies by component size */
     rounded: Record<SizeKey, string>;
+    private isUIComponent;
     private constructor();
     static createUITheme(customRounded?: Record<SizeKey, string>): RadiusTheme;
     static createLayoutTheme(): RadiusTheme;

package/dist/components/ui/theme/layout/radiusTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radiusTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/layout/radiusTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,qBAAa,WAAY,SAAQ,SAAS;IACxC,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAkB;IAC9B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAkB;IAC/B,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEjC,OAAO;IAKP,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,WAAW;IAI1E,MAAM,CAAC,iBAAiB,IAAI,WAAW;IAIvC,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;CAiBnD"}
+{"version":3,"file":"radiusTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/layout/radiusTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,qBAAa,WAAY,SAAQ,SAAS;IACxC,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAkB;IAC9B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAkB;IAC/B,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEjC,OAAO,CAAC,aAAa,CAAU;IAE/B,OAAO;IAMP,MAAM,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,WAAW;IAW1E,MAAM,CAAC,iBAAiB,IAAI,WAAW;IAWvC,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;CAkBnD"}

package/dist/components/ui/theme/size/pxTheme.d.ts

@@ -5,7 +5,7 @@ import type { CategoryProps } from "../../props";
 export declare class PxTheme extends PaddingTheme {
     private aspectRatioMap?;
     private isUIComponent?;
-    constructor(sizeMap?: Record<SizeKey, string>, aspectRatioMap?: Record<SizeKey, string>, isUIComponent?: boolean);
+    constructor(aspectRatioMap?: Record<SizeKey, string>, isUIComponent?: boolean);
     getClasses(extractedKeys: CategoryProps): string[];
 }
 //# sourceMappingURL=pxTheme.d.ts.map

package/dist/components/ui/theme/size/pxTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pxTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/pxTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iEAAiE;AACjE,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,cAAc,CAAC,CAA0B;IACjD,OAAO,CAAC,aAAa,CAAC,CAAU;gBAEpB,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,aAAa,UAAQ;IAY9G,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;CAkBnD"}
+{"version":3,"file":"pxTheme.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/theme/size/pxTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,iEAAiE;AACjE,qBAAa,OAAQ,SAAQ,YAAY;IACvC,OAAO,CAAC,cAAc,CAAC,CAA0B;IACjD,OAAO,CAAC,aAAa,CAAC,CAAU;gBAEpB,cAAc,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,aAAa,UAAQ;IAQ3E,UAAU,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,EAAE;CAiBnD"}

package/dist/index.esm.js

@@ -3794,35 +3794,35 @@ class GapTheme extends BaseTheme {
     }
 }
 
-const uiBorderRadiusClasses = {
-    xs: "rounded-(--ui-br-xs)",
-    sm: "rounded-(--ui-br-sm)",
-    md: "rounded-(--ui-br-md)",
-    lg: "rounded-(--ui-br-lg)",
-    xl: "rounded-(--ui-br-xl)",
-};
-const layoutBorderRadiusClasses = {
-    xs: "rounded-(--layout-br-xs)",
-    sm: "rounded-(--layout-br-sm)",
-    md: "rounded-(--layout-br-md)",
-    lg: "rounded-(--layout-br-lg)",
-    xl: "rounded-(--layout-br-xl)",
-};
-
 class RadiusTheme extends BaseTheme {
-    constructor(roundedClasses) {
+    constructor(roundedClasses, isUIComponent = false) {
         super();
         /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
         /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
         this.rounded = roundedClasses;
+        this.isUIComponent = isUIComponent;
     }
     static createUITheme(customRounded) {
-        return new RadiusTheme(customRounded || uiBorderRadiusClasses);
+        const brUnitClasses = {
+            xs: '[--br-unit:1]',
+            sm: '[--br-unit:2]',
+            md: '[--br-unit:3]',
+            lg: '[--br-unit:4]',
+            xl: '[--br-unit:5]'
+        };
+        return new RadiusTheme(customRounded || brUnitClasses, true);
     }
     static createLayoutTheme() {
-        return new RadiusTheme(layoutBorderRadiusClasses);
+        const brUnitClasses = {
+            xs: '[--br-unit:3]',
+            sm: '[--br-unit:4]',
+            md: '[--br-unit:5]',
+            lg: '[--br-unit:6]',
+            xl: '[--br-unit:7]'
+        };
+        return new RadiusTheme(brUnitClasses, false);
     }
     getClasses(extractedKeys) {
         var _a, _b;
@@ -3834,8 +3834,9 @@ class RadiusTheme extends BaseTheme {
             case 'sharp':
                 return [this.sharp];
             case 'rounded': {
-                const roundedClass = this.rounded[size];
-                return roundedClass ? [roundedClass] : [];
+                const brUnitClass = this.rounded[size];
+                const roundedVar = this.isUIComponent ? "rounded-(--ui-br)" : "rounded-(--br)";
+                return brUnitClass ? [brUnitClass, roundedVar] : [];
             }
             default:
                 return [];
@@ -3952,32 +3953,26 @@ class PaddingTheme extends BaseTheme {
 
 /** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
-    constructor(sizeMap, aspectRatioMap, isUIComponent = false) {
-        super(sizeMap);
+    constructor(aspectRatioMap, isUIComponent = false) {
+        super();
         this.aspectRatioMap = aspectRatioMap;
         this.isUIComponent = isUIComponent;
-        // Override with PxTheme's default classes if no custom sizeMap provided
-        if (!sizeMap) {
-            ComponentKeys.size.forEach((key) => {
-                this[key] = layoutPaddingClasses[key];
-            });
-        }
+        // PxTheme should not set any padding classes - that's PyTheme's job
+        // PxTheme only handles aspect-ratio
     }
     getClasses(extractedKeys) {
         var _a, _b;
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
             const size = (_a = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.size) !== null && _a !== void 0 ? _a : 'md';
-            const paddingClass = this[size];
             const aspectRatioClass = (_b = this.aspectRatioMap) === null || _b === void 0 ? void 0 : _b[size];
             const classes = [];
-            if (paddingClass)
-                classes.push(paddingClass);
+            // Only add aspect-ratio class - no padding classes
             if (aspectRatioClass)
                 classes.push(aspectRatioClass);
             // Use UI or layout CSS variables based on component type
             const cssVar = this.isUIComponent ? "px-(--ui-px)" : "px-(--px)";
             classes.push(cssVar);
-            return classes.length > 1 ? classes : [];
+            return classes;
         }
         return [];
     }
@@ -4847,7 +4842,7 @@ const themeDefaults = {
 
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(uiPaddingClasses, buttonAspectRatioClasses, true),
+        px: new PxTheme(buttonAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
         gap: new GapTheme({ xs: '[--gap-unit:1]', sm: '[--gap-unit:1.5]', md: '[--gap-unit:2]', lg: '[--gap-unit:2.5]', xl: '[--gap-unit:3]' }, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
@@ -4877,7 +4872,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
 
 const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(uiPaddingClasses, badgeAspectRatioClasses, true),
+        px: new PxTheme(badgeAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
         gap: new GapTheme({ xs: '[--gap-unit:1]', sm: '[--gap-unit:1.5]', md: '[--gap-unit:2]', lg: '[--gap-unit:2.5]', xl: '[--gap-unit:3]' }, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' })
@@ -4906,7 +4901,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
 
 const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all duration-200 whitespace-nowrap", {
     size: {
-        px: new PxTheme(chipPyClasses, chipAspectRatioClasses, true),
+        px: new PxTheme(chipAspectRatioClasses, true),
         py: new PyTheme(chipPyClasses, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),
         gap: new GapTheme({ xs: '[--gap-unit:1]', sm: '[--gap-unit:1.5]', md: '[--gap-unit:2]', lg: '[--gap-unit:2.5]', xl: '[--gap-unit:3]' }, true)
@@ -4935,7 +4930,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
 
 const defaultCodeTheme = new ComponentTheme("code", "", {
     size: {
-        px: new PxTheme(codePyClasses, codeAspectRatioClasses, true),
+        px: new PxTheme(codeAspectRatioClasses, true),
         py: new PyTheme(codePyClasses, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-sm', lg: 'text-base', xl: 'text-lg' }),
         gap: new GapTheme({ xs: '[--gap-unit:0.5]', sm: '[--gap-unit:1]', md: '[--gap-unit:1.5]', lg: '[--gap-unit:2]', xl: '[--gap-unit:2.5]' }, true)
@@ -5323,7 +5318,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
 
 const defaultSectionTheme = new ComponentTheme("div", "w-full", {
     size: {
-        px: new PxTheme(layoutPaddingClasses, sectionAspectRatioClasses),
+        px: new PxTheme(sectionAspectRatioClasses),
         py: new PyTheme({
             xs: "[--py-unit:4]",
             sm: "[--py-unit:8]",
@@ -5452,7 +5447,7 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
         text: new SizeTheme(textSizeClasses),
-        gap: new GapTheme({ xs: 'gap-1.5', sm: 'gap-2', md: 'gap-2.5', lg: 'gap-3', xl: 'gap-3' }),
+        gap: new GapTheme({ xs: '[--gap-unit:1.5]', sm: '[--gap-unit:2]', md: '[--gap-unit:2.5]', lg: '[--gap-unit:3]', xl: '[--gap-unit:3]' }, true),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -5485,7 +5480,7 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
 
 const defaultInputTheme = new ComponentTheme("input", "w-full transition-all duration-200", {
     size: {
-        px: new PxTheme(uiPaddingClasses, inputAspectRatioClasses, true),
+        px: new PxTheme(inputAspectRatioClasses, true),
         py: new PyTheme(uiPaddingClasses, true),
         gap: new GapTheme({ xs: '[--gap-unit:1]', sm: '[--gap-unit:1.5]', md: '[--gap-unit:2]', lg: '[--gap-unit:2.5]', xl: '[--gap-unit:3]' }, true),
         text: new SizeTheme({ xs: 'text-xs', sm: 'text-sm', md: 'text-base', lg: 'text-lg', xl: 'text-xl' }),