@vaneui/ui 0.2.1-alpha.20250813194307.2bb87da → 0.2.1-alpha.20250820170702.e0272da

package/dist/index.esm.js

@@ -3158,7 +3158,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)) {
@@ -3175,7 +3178,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);
@@ -3769,6 +3776,15 @@ class ShadowAppearanceTheme extends BaseTheme {
     static createTheme(src = {}) {
         return new ShadowAppearanceTheme(src);
     }
+    static createLayoutTheme(src = {}) {
+        const theme = new ShadowAppearanceTheme(src);
+        ComponentKeys.appearance.forEach((key) => {
+            if (theme[key] === ShadowAppearanceTheme.defaultShadow) {
+                theme[key] = ShadowAppearanceTheme.layoutShadow;
+            }
+        });
+        return theme;
+    }
 }
 ShadowAppearanceTheme.defaultShadow = {
     xs: { base: "shadow-2xs", hover: "hover:shadow-xs", active: "" },
@@ -3777,6 +3793,13 @@ ShadowAppearanceTheme.defaultShadow = {
     lg: { base: "shadow-md", hover: "hover:shadow-lg", active: "" },
     xl: { base: "shadow-lg", hover: "hover:shadow-xl", active: "" }
 };
+ShadowAppearanceTheme.layoutShadow = {
+    xs: { base: "shadow-2xs", hover: "", active: "" },
+    sm: { base: "shadow-xs", hover: "", active: "" },
+    md: { base: "shadow-sm", hover: "", active: "" },
+    lg: { base: "shadow-md", hover: "", active: "" },
+    xl: { base: "shadow-lg", hover: "", active: "" }
+};
 
 class GenericVariantTheme extends BaseTheme {
     constructor(variantInstances) {
@@ -3811,6 +3834,12 @@ class GenericVariantTheme extends BaseTheme {
             filled: ShadowAppearanceTheme.createTheme({})
         });
     }
+    static createLayoutShadowTheme() {
+        return new GenericVariantTheme({
+            outline: ShadowAppearanceTheme.createLayoutTheme({}),
+            filled: ShadowAppearanceTheme.createLayoutTheme({})
+        });
+    }
     static createBorderAppearanceTheme() {
         return new GenericVariantTheme({
             outline: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
@@ -3966,6 +3995,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({
@@ -3991,23 +4237,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";
 });
@@ -4024,7 +4254,7 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4035,21 +4265,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";
 });
 
@@ -4065,7 +4281,7 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit transition-all
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4076,20 +4292,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";
 });
 
@@ -4105,7 +4308,7 @@ const defaultCodeTheme = new ComponentTheme("code", "", {
         text: GenericVariantTheme.createUIElementTextTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4116,16 +4319,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);
@@ -4244,12 +4438,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),
@@ -4271,7 +4460,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",
@@ -4279,11 +4468,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: {
@@ -4294,10 +4483,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: {
@@ -4307,8 +4493,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: {
@@ -4321,14 +4506,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;
@@ -4386,7 +4564,7 @@ const defaultCardTheme = new ComponentTheme("div", "", {
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
         breakpoint: new BreakpointTheme(),
-        shadow: ShadowAppearanceTheme.createTheme(),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     appearance: {
         background: AppearanceTheme.createLayoutBgTheme(),
@@ -4395,17 +4573,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";
 });
 
@@ -4426,18 +4594,9 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        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";
 });
@@ -4452,11 +4611,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: {
@@ -4482,16 +4637,9 @@ const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
         border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        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";
 });
 
@@ -4511,17 +4659,9 @@ const defaultColTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        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";
 });
 
@@ -4544,19 +4684,9 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         background: AppearanceTheme.createLayoutBgTheme(),
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme(),
+        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";
 });
 
@@ -4584,7 +4714,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
         text: AppearanceTheme.createTheme({ base: textAppearanceClasses }),
         border: AppearanceTheme.createTheme({ base: borderAppearanceClasses }),
         ring: AppearanceTheme.createTheme({ base: ringAppearanceClasses }),
-        shadow: ShadowAppearanceTheme.createTheme(),
+        shadow: ShadowAppearanceTheme.createLayoutTheme(),
     },
     layout: {
         ...defaultLayoutTheme,
@@ -4594,26 +4724,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({
@@ -4633,16 +4747,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({
@@ -4674,25 +4789,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: () => jsx("svg", { viewBox: "0 0 14 14", fill: "none", children: 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({
@@ -4704,12 +4808,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: {
@@ -4725,14 +4824,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
 {
@@ -4745,14 +4837,9 @@ const defaultImgTheme = new ComponentTheme("img", "object-cover", // Default to
     appearance: {
         border: GenericVariantTheme.createUIElementBorderTheme(),
         ring: GenericVariantTheme.createUIElementRingTheme(),
-        shadow: GenericVariantTheme.createUIElementShadowTheme()
+        shadow: GenericVariantTheme.createLayoutShadowTheme()
     }
-}, {
-    rounded: true,
-    noShadow: true,
-    noBorder: true,
-    noRing: true,
-}, IMG_CATEGORIES);
+}, themeDefaults.img, IMG_CATEGORIES);
 
 const defaultTheme = {
     button: defaultButtonTheme,
@@ -5021,5 +5108,5 @@ const List = forwardRef(function List(props, ref) {
     return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
-export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, useTheme };
+export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid2, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, PADDING, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_FULL, defaultTheme, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map