@vaneui/ui 0.2.1-alpha.20250820100624.167a145 → 0.2.1-alpha.20250820170702.e0272da

package/dist/index.js

@@ -3160,7 +3160,10 @@ class ComponentTheme {
         const defaults = this.defaults;
         const extractedKeys = {};
         for (const category of this.categories) {
-            extractedKeys[category] = pickFirstTruthyKeyByCategory(componentProps, defaults, category);
+            const key = pickFirstTruthyKeyByCategory(componentProps, defaults, category);
+            if (key !== undefined) {
+                extractedKeys[category] = key;
+            }
         }
         const walk = (map) => {
             for (const key of Object.keys(map)) {
@@ -3177,7 +3180,11 @@ class ComponentTheme {
         // Apply extra classes based on extracted keys
         for (const [key, value] of Object.entries(extractedKeys)) {
             if (value && this.extraClasses[value]) {
-                classes.push(...this.extraClasses[value].split(/\s+/));
+                const existingClasses = this.extraClasses[value];
+                if (existingClasses !== undefined) {
+                    const cs = existingClasses.split(/\s+/);
+                    classes.push(...cs);
+                }
             }
         }
         return classes.filter(Boolean);
@@ -3990,6 +3997,223 @@ DirectionTheme.defaultClasses = {
     columnReverse: "flex-col-reverse",
 };
 
+/**
+ * Default props for all components using the existing ThemeDefaults type
+ */
+const themeDefaults = {
+    button: {
+        md: true,
+        inlineFlex: true,
+        itemsCenter: true,
+        justifyCenter: true,
+        outline: true,
+        default: true,
+        rounded: true,
+        sans: true,
+        semibold: true,
+        textCenter: true,
+        noBorder: true,
+        gap: true,
+        padding: true,
+        ring: true,
+        shadow: true,
+    },
+    card: {
+        md: true,
+        flex: true,
+        default: true,
+        rounded: true,
+        normal: true,
+        column: true,
+        border: true,
+        gap: true,
+        padding: true,
+    },
+    chip: {
+        md: true,
+        inlineFlex: true,
+        itemsCenter: true,
+        outline: true,
+        secondary: true,
+        rounded: true,
+        mono: true,
+        normal: true,
+        noShadow: true,
+        padding: true,
+        gap: true,
+        ring: true,
+    },
+    badge: {
+        md: true,
+        default: true,
+        inlineFlex: true,
+        outline: true,
+        pill: true,
+        sans: true,
+        semibold: true,
+        uppercase: true,
+        noShadow: true,
+        itemsCenter: true,
+        padding: true,
+        gap: true,
+        ring: true,
+    },
+    container: {
+        noRing: true,
+        flex: true,
+        md: true,
+        itemsCenter: true,
+        gap: true,
+        sharp: true,
+    },
+    section: {
+        md: true,
+        flex: true,
+        default: true,
+        itemsStart: true,
+        gap: true,
+        padding: true,
+        noBorder: true,
+        noRing: true,
+        noShadow: true,
+        sharp: true,
+    },
+    stack: {
+        md: true,
+        flex: true,
+        column: true,
+        flexWrap: true,
+        gap: true,
+        padding: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    row: {
+        row: true,
+        md: true,
+        flex: true,
+        itemsCenter: true,
+        gap: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    col: {
+        column: true,
+        md: true,
+        flex: true,
+        gap: true,
+        noBorder: true,
+        noRing: true,
+        sharp: true,
+    },
+    grid2: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    grid3: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    grid4: {
+        md: true,
+        grid: true,
+        gap: true,
+    },
+    divider: {
+        md: true,
+        default: true,
+        noPadding: true,
+    },
+    label: {
+        md: true,
+        flex: true,
+        gap: true,
+        default: true,
+        sans: true,
+        medium: true,
+    },
+    img: {
+        rounded: true,
+    },
+    code: {
+        md: true,
+        mono: true,
+        semibold: true,
+        rounded: true,
+        inline: true,
+        padding: true,
+        default: true,
+        ring: true,
+    },
+    text: {
+        md: true,
+        default: true,
+        sans: true,
+        textLeft: true,
+    },
+    title: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    pageTitle: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    sectionTitle: {
+        md: true,
+        default: true,
+        sans: true,
+        semibold: true,
+        textLeft: true,
+    },
+    link: {
+        underline: true,
+        link: true,
+        sans: true,
+    },
+    listItem: {
+        sans: true,
+    },
+    list: {
+        md: true,
+        default: true,
+        sans: true,
+        normal: true,
+        padding: true,
+        disc: true,
+    },
+    checkbox: {
+        input: {
+            md: true,
+            default: true,
+            border: true,
+            rounded: true,
+            noRing: true,
+            noShadow: true,
+            filled: true,
+        },
+        check: {
+            default: true,
+        },
+        wrapper: {
+            md: true,
+            inlineGrid: true,
+            itemsCenter: true,
+            justifyCenter: true,
+        },
+    },
+};
+
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
         px: new PxTheme({
@@ -4015,23 +4239,7 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    inlineFlex: true,
-    itemsCenter: true,
-    justifyCenter: true,
-    outline: true,
-    default: true,
-    rounded: true,
-    sans: true,
-    semibold: true,
-    textCenter: true,
-    noBorder: true,
-    gap: true,
-    padding: true,
-    ring: true,
-    shadow: true,
-}, BUTTON_CATEGORIES, (props, defaults) => {
+}, themeDefaults.button, BUTTON_CATEGORIES, (props, defaults) => {
     // Determine tag based on href prop
     return props.href ? "a" : "button";
 });
@@ -4059,21 +4267,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    default: true,
-    inlineFlex: true,
-    outline: true,
-    pill: true,
-    sans: true,
-    semibold: true,
-    uppercase: true,
-    noShadow: true,
-    itemsCenter: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, BADGE_CATEGORIES, (props, defaults) => {
+}, themeDefaults.badge, BADGE_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "span";
 });
 
@@ -4100,20 +4294,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    inlineFlex: true,
-    itemsCenter: true,
-    outline: true,
-    secondary: true,
-    rounded: true,
-    mono: true,
-    normal: true,
-    noShadow: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, CHIP_CATEGORIES, (props, defaults) => {
+}, themeDefaults.chip, CHIP_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "span";
 });
 
@@ -4140,16 +4321,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
         flexDirection: new DirectionTheme(),
     },
     typography: defaultTypographyTheme,
-}, {
-    inline: true,
-    outline: true,
-    default: true,
-    rounded: true,
-    mono: true,
-    padding: true,
-    gap: true,
-    ring: true,
-}, CODE_CATEGORIES);
+}, themeDefaults.code, CODE_CATEGORIES);
 
 const isObject = (item) => {
     return item !== null && typeof item === 'object' && !Array.isArray(item);
@@ -4268,12 +4440,7 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const typographyThemeDefaults = {
-    md: true,
-    default: true,
-    sans: true,
-};
-const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = typographyThemeDefaults) => {
+const createTypographyComponentTheme = (tag, base = "text-balance", textSizeMap = textSizeClasses, defaults = {}) => {
     return new ComponentTheme(tag, base, {
         size: {
             text: new SizeTheme(textSizeMap),
@@ -4295,7 +4462,7 @@ const pageTitleTheme = createTypographyComponentTheme("h1", "text-balance tracki
     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"
-}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+}, mergeDefaults(themeDefaults.pageTitle, { 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",
@@ -4303,11 +4470,11 @@ const sectionTitleTheme = createTypographyComponentTheme("h2", "text-balance w-f
     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"
-}, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+}, mergeDefaults(themeDefaults.sectionTitle, { 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" }, mergeDefaults(typographyThemeDefaults, { semibold: true }));
+const titleTheme = createTypographyComponentTheme("h3", "text-balance w-fit", { xs: "text-lg", sm: "text-xl", md: "text-2xl", lg: "text-3xl", xl: "text-4xl" }, mergeDefaults(themeDefaults.title, { semibold: true }));
 // Text specific theme
-const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses);
+const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", textSizeClasses, themeDefaults.text);
 // Link specific theme
 const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
     size: {
@@ -4318,10 +4485,7 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     },
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
-}, {
-    link: true,
-    sans: true,
-}, TYPOGRAPHY_CATEGORIES);
+}, themeDefaults.link, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listItemTheme = new ComponentTheme("li", "", {
     size: {
@@ -4331,8 +4495,7 @@ const listItemTheme = new ComponentTheme("li", "", {
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
     },
     typography: defaultTypographyTheme,
-}, {}, //keep empty to apply parent style
-TYPOGRAPHY_CATEGORIES);
+}, themeDefaults.listItem, TYPOGRAPHY_CATEGORIES);
 // List specific theme
 const listTheme = new ComponentTheme("ul", "list-inside", {
     size: {
@@ -4345,14 +4508,7 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
     typography: defaultTypographyTheme,
     layout: defaultLayoutTheme,
     listStyle: new ListStyleTheme(),
-}, {
-    md: true,
-    default: true,
-    sans: true,
-    normal: true,
-    padding: true,
-    disc: true,
-}, LIST_CATEGORIES, (props, defaults) => {
+}, themeDefaults.list, LIST_CATEGORIES, (props, defaults) => {
     // Determine tag based on list style from props and defaults
     const componentProps = props;
     const defaultsRecord = defaults;
@@ -4419,17 +4575,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
     },
     typography: defaultTypographyTheme,
-}, {
-    md: true,
-    flex: true,
-    default: true,
-    rounded: true,
-    normal: true,
-    column: true,
-    border: true,
-    gap: true,
-    padding: true,
-}, CARD_CATEGORIES, (props, defaults) => {
+}, themeDefaults.card, CARD_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4452,16 +4598,7 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    row: true,
-    md: true,
-    flex: true,
-    itemsCenter: true,
-    gap: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, ROW_CATEGORIES, (props, defaults) => {
+}, themeDefaults.row, ROW_CATEGORIES, (props, defaults) => {
     // Determine tag based on href prop
     return props.href ? "a" : "div";
 });
@@ -4476,11 +4613,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
         }),
     },
     layout: defaultLayoutTheme,
-}, {
-    md: true,
-    default: true,
-    noPadding: true,
-}, DIVIDER_CATEGORIES);
+}, themeDefaults.divider, DIVIDER_CATEGORIES);
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
@@ -4508,14 +4641,7 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    noRing: true,
-    flex: true,
-    md: true,
-    itemsCenter: true,
-    gap: true,
-    sharp: true,
-}, CONTAINER_CATEGORIES, (props, defaults) => {
+}, themeDefaults.container, CONTAINER_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4537,15 +4663,7 @@ const defaultColTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    column: true,
-    md: true,
-    flex: true,
-    gap: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, COL_CATEGORIES, (props, defaults) => {
+}, themeDefaults.col, COL_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4570,17 +4688,7 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme(),
     }
-}, {
-    md: true,
-    flex: true,
-    column: true,
-    flexWrap: true,
-    gap: true,
-    padding: true,
-    noBorder: true,
-    noRing: true,
-    sharp: true,
-}, STACK_CATEGORIES, (props, defaults) => {
+}, themeDefaults.stack, STACK_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
@@ -4618,26 +4726,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         ring: new RingTheme(),
         radius: RadiusTheme.createLayoutTheme(),
     },
-}, {
-    md: true,
-    flex: true,
-    default: true,
-    itemsStart: true,
-    gap: true,
-    padding: true,
-    noBorder: true,
-    noRing: true,
-    noShadow: true,
-    sharp: true,
-}, SECTION_CATEGORIES, (props, defaults) => {
+}, themeDefaults.section, SECTION_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
 
-const gridDefaults = {
-    md: true,
-    gap: true,
-    grid: true,
-};
 const gridSubThemes = {
     size: {
         gap: new GapTheme({
@@ -4657,16 +4749,17 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
-const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, themeDefaults.grid2, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
-const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, gridDefaults, GRID_CATEGORIES, (props, defaults) => {
+const defaultGrid3Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-3", gridSubThemes, themeDefaults.grid3, GRID_CATEGORIES, (props, defaults) => {
     return props.href ? "a" : "div";
 });
-const defaultGrid4Theme = new ComponentTheme("div", "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", gridSubThemes, gridDefaults, 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, defaults) => {
     return props.href ? "a" : "div";
 });
 
+var _a, _b, _c;
 const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-start-1 cursor-pointer appearance-none ring-transparent", {
     size: {
         size: new SizeTheme({
@@ -4698,25 +4791,14 @@ const defaultCheckboxTheme = new ComponentTheme("input", "peer col-start-1 row-s
         check: GenericVariantTheme.createCheckedAppearanceTheme(),
         shadow: GenericVariantTheme.createUIElementShadowTheme(),
     }
-}, {
-    md: true,
-    default: true,
-    border: true,
-    rounded: true,
-    noRing: true,
-    noShadow: true,
-    filled: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_a = themeDefaults.checkbox) === null || _a === void 0 ? void 0 : _a.input) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckTheme = new ComponentTheme("span", "invisible col-start-1 row-start-1 peer-checked:visible", {
     checkElement: () => jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: jsxRuntime.jsx("path", { d: "M3 8L6 11L11 3.5", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", stroke: "currentColor" }) }),
     appearance: {
         color: GenericVariantTheme.createUIElementTextTheme()
     },
     layout: defaultLayoutTheme,
-}, {
-    default: true,
-    filled: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_b = themeDefaults.checkbox) === null || _b === void 0 ? void 0 : _b.check) || {}, CHECKBOX_CATEGORIES);
 const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
     size: {
         height: new SizeTheme({
@@ -4728,12 +4810,7 @@ const defaultCheckboxWrapperTheme = new ComponentTheme("span", "", {
         })
     },
     layout: defaultLayoutTheme,
-}, {
-    md: true,
-    inlineGrid: true,
-    itemsCenter: true,
-    justifyCenter: true,
-}, CHECKBOX_CATEGORIES);
+}, ((_c = themeDefaults.checkbox) === null || _c === void 0 ? void 0 : _c.wrapper) || {}, CHECKBOX_CATEGORIES);
 
 const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointer cursor-default", {
     size: {
@@ -4749,14 +4826,7 @@ const defaultLabelTheme = new ComponentTheme("label", "has-[input]:cursor-pointe
         wrap: new WrapTheme(),
         flexDirection: new DirectionTheme(),
     },
-}, {
-    md: true,
-    flex: true,
-    gap: true,
-    default: true,
-    sans: true,
-    medium: true,
-}, LABEL_CATEGORIES);
+}, themeDefaults.label, LABEL_CATEGORIES);
 
 const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to cover for better image display
 {
@@ -4771,12 +4841,7 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
         ring: GenericVariantTheme.createUIElementRingTheme(),
         shadow: GenericVariantTheme.createLayoutShadowTheme()
     }
-}, {
-    rounded: true,
-    noShadow: true,
-    noBorder: true,
-    noRing: true,
-}, IMG_CATEGORIES);
+}, themeDefaults.img, IMG_CATEGORIES);
 
 const defaultTheme = {
     button: defaultButtonTheme,
@@ -5106,5 +5171,6 @@ exports.VISUAL_CORE = VISUAL_CORE;
 exports.VISUAL_DECORATION = VISUAL_DECORATION;
 exports.VISUAL_FULL = VISUAL_FULL;
 exports.defaultTheme = defaultTheme;
+exports.themeDefaults = themeDefaults;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map