@vaneui/ui 0.0.16 → 0.0.18

package/dist/components/theme/index.js

@@ -208,7 +208,11 @@ const TYPOGRAPHY_COMPONENT_KEYS = [
     ...JUSTIFY_KEYS,
     ...WRAP_KEYS,
     ...BREAKPOINT_KEYS,
-    ...GAP_KEYS
+    ...GAP_KEYS,
+    ...BORDER_KEYS,
+    ...SHADOW_KEYS,
+    ...RING_KEYS,
+    ...SHAPE_KEYS,
 ];
 
 const rowToColumnBreakpointClasses = {
@@ -255,25 +259,25 @@ const positionClasses = {
     static: "static"
 };
 const shadowClasses = {
-    xs: "shadow-xs",
-    sm: "shadow-sm",
-    md: "shadow-md",
-    lg: "shadow-lg",
-    xl: "shadow-xl"
+    xs: "shadow-2xs",
+    sm: "shadow-xs",
+    md: "shadow-sm",
+    lg: "shadow-md",
+    xl: "shadow-lg"
 };
 const hoverShadowClasses = {
-    xs: "hover:shadow-sm",
-    sm: "hover:shadow-md",
-    md: "hover:shadow-lg",
-    lg: "hover:shadow-xl",
-    xl: "hover:shadow-2xl"
+    xs: "hover:shadow-xs",
+    sm: "hover:shadow-sm",
+    md: "hover:shadow-md",
+    lg: "hover:shadow-lg",
+    xl: "hover:shadow-xl"
 };
 const activeShadowClasses = {
-    xs: "active:shadow-sm",
-    sm: "active:shadow-md",
-    md: "active:shadow-lg",
-    lg: "active:shadow-xl",
-    xl: "active:shadow-2xl"
+    xs: "active:shadow-xs",
+    sm: "active:shadow-sm",
+    md: "active:shadow-md",
+    lg: "active:shadow-lg",
+    xl: "active:shadow-xl"
 };
 const noRingModeClasses = {
     base: "ring-0",
@@ -329,75 +333,6 @@ class HideTheme extends BaseTheme {
 }
 HideTheme.defaultClasses = hideClasses;
 
-const isObject = (item) => {
-    return item !== null && typeof item === 'object' && !Array.isArray(item);
-};
-const deepMerge = (target, source) => {
-    const output = Object.assign(Object.create(Object.getPrototypeOf(target)), target);
-    for (const key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-            const sourceValue = source[key];
-            const targetValue = output[key];
-            if (sourceValue === undefined) {
-                continue;
-            }
-            // Special case: If the key is 'defaults', use the contextual mergeDefaults function.
-            if (key === 'defaults' &&
-                isObject(targetValue) &&
-                isObject(sourceValue)) {
-                output[key] = mergeDefaults(targetValue, sourceValue);
-            }
-            // For all other objects, use the standard recursive deep merge.
-            else if (isObject(targetValue) && isObject(sourceValue)) {
-                output[key] = deepMerge(targetValue, sourceValue);
-            }
-            // For non-object values, just assign the value from the source.
-            else {
-                output[key] = sourceValue;
-            }
-        }
-    }
-    return output;
-};
-const deepClone = (source) => {
-    if (!isObject(source)) {
-        return source;
-    }
-    const output = Object.assign(Object.create(Object.getPrototypeOf(source)), source);
-    for (const key in output) {
-        if (Object.prototype.hasOwnProperty.call(output, key)) {
-            output[key] = deepClone(output[key]);
-        }
-    }
-    return output;
-};
-const findGroup = (key) => EXCLUSIVE_KEY_GROUPS.find(group => group.includes(key));
-const mergeDefaults = (baseDefaults, overrideDefaults) => {
-    const finalDefaults = { ...baseDefaults };
-    // Iterate over the override keys to apply them.
-    for (const key in overrideDefaults) {
-        if (Object.prototype.hasOwnProperty.call(overrideDefaults, key)) {
-            const overrideValue = overrideDefaults[key];
-            // If the override is setting a key to true...
-            if (overrideValue) {
-                // Find the exclusive group this key belongs to (e.g., SIZE_KEYS).
-                const group = findGroup(key);
-                // If the key is part of an exclusive group...
-                if (group) {
-                    // ...set all other keys in that group to false.
-                    group.forEach(groupKey => {
-                        if (groupKey !== key) {
-                            finalDefaults[groupKey] = false;
-                        }
-                    });
-                }
-            }
-            finalDefaults[key] = overrideValue;
-        }
-    }
-    return finalDefaults;
-};
-
 class ItemsTheme extends BaseTheme {
     constructor(initialConfig) {
         super();
@@ -526,6 +461,21 @@ const textSizeClasses = {
     xl: "text-xl",
 };
 
+class FontStyleTheme extends BaseTheme {
+    constructor(initial) {
+        super();
+        FONT_STYLE_KEYS.forEach((key) => {
+            var _a;
+            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontStyleTheme.defaultClasses[key];
+        });
+    }
+    getClasses(props, defaults) {
+        const key = pickKey(props, defaults, FONT_STYLE_KEYS);
+        return [key ? this[key] : '']; // No default for font style
+    }
+}
+FontStyleTheme.defaultClasses = fontStyleClasses;
+
 class FontFamilyTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -556,21 +506,6 @@ class FontWeightTheme extends BaseTheme {
 }
 FontWeightTheme.defaultClasses = fontWeightClasses;
 
-class FontStyleTheme extends BaseTheme {
-    constructor(initial) {
-        super();
-        FONT_STYLE_KEYS.forEach((key) => {
-            var _a;
-            this[key] = (_a = initial === null || initial === void 0 ? void 0 : initial[key]) !== null && _a !== void 0 ? _a : FontStyleTheme.defaultClasses[key];
-        });
-    }
-    getClasses(props, defaults) {
-        const key = pickKey(props, defaults, FONT_STYLE_KEYS);
-        return [key ? this[key] : '']; // No default for font style
-    }
-}
-FontStyleTheme.defaultClasses = fontStyleClasses;
-
 class TextDecorationTheme extends BaseTheme {
     constructor(initial) {
         super();
@@ -616,6 +551,75 @@ class TextAlignTheme extends BaseTheme {
 }
 TextAlignTheme.defaultClasses = textAlignClasses;
 
+const isObject = (item) => {
+    return item !== null && typeof item === 'object' && !Array.isArray(item);
+};
+const deepMerge = (target, source) => {
+    const output = Object.assign(Object.create(Object.getPrototypeOf(target)), target);
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = output[key];
+            if (sourceValue === undefined) {
+                continue;
+            }
+            // Special case: If the key is 'defaults', use the contextual mergeDefaults function.
+            if (key === 'defaults' &&
+                isObject(targetValue) &&
+                isObject(sourceValue)) {
+                output[key] = mergeDefaults(targetValue, sourceValue);
+            }
+            // For all other objects, use the standard recursive deep merge.
+            else if (isObject(targetValue) && isObject(sourceValue)) {
+                output[key] = deepMerge(targetValue, sourceValue);
+            }
+            // For non-object values, just assign the value from the source.
+            else {
+                output[key] = sourceValue;
+            }
+        }
+    }
+    return output;
+};
+const deepClone = (source) => {
+    if (!isObject(source)) {
+        return source;
+    }
+    const output = Object.assign(Object.create(Object.getPrototypeOf(source)), source);
+    for (const key in output) {
+        if (Object.prototype.hasOwnProperty.call(output, key)) {
+            output[key] = deepClone(output[key]);
+        }
+    }
+    return output;
+};
+const findGroup = (key) => EXCLUSIVE_KEY_GROUPS.find(group => group.includes(key));
+const mergeDefaults = (baseDefaults, overrideDefaults) => {
+    const finalDefaults = { ...baseDefaults };
+    // Iterate over the override keys to apply them.
+    for (const key in overrideDefaults) {
+        if (Object.prototype.hasOwnProperty.call(overrideDefaults, key)) {
+            const overrideValue = overrideDefaults[key];
+            // If the override is setting a key to true...
+            if (overrideValue) {
+                // Find the exclusive group this key belongs to (e.g., SIZE_KEYS).
+                const group = findGroup(key);
+                // If the key is part of an exclusive group...
+                if (group) {
+                    // ...set all other keys in that group to false.
+                    group.forEach(groupKey => {
+                        if (groupKey !== key) {
+                            finalDefaults[groupKey] = false;
+                        }
+                    });
+                }
+            }
+            finalDefaults[key] = overrideValue;
+        }
+    }
+    return finalDefaults;
+};
+
 class ComponentTheme {
     constructor(tag, base, subThemes, defaults = {}) {
         this.tag = tag;
@@ -782,10 +786,15 @@ BorderTheme.defaultClasses = {
         active: "active:border",
     },
     noBorder: {
-        base: "border-none",
-        hover: "hover:border-none",
-        active: "active:border-none",
+        base: "",
+        hover: "",
+        active: "",
     },
+    //noBorder: {
+    //  base: "border-none",
+    //  hover: "hover:border-none",
+    //  active: "active:border-none",
+    //},
 };
 
 class RingTheme extends BaseTheme {
@@ -1153,8 +1162,8 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
         px: new PxTheme({
             padding: {
                 xs: 'px-2',
-                sm: 'px-2.5',
-                md: 'px-3.5',
+                sm: 'px-3',
+                md: 'px-4',
                 lg: 'px-5',
                 xl: 'px-6',
             }
@@ -1164,25 +1173,25 @@ const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-poin
                 xs: 'py-1',
                 sm: 'py-1.5',
                 md: 'py-2',
-                lg: 'py-3',
-                xl: 'py-4',
+                lg: 'py-2.5',
+                xl: 'py-3',
             }
         }),
         gap: new GapTheme({
             gap: {
-                xs: 'gap-1.5',
-                sm: 'gap-2',
-                md: 'gap-3',
-                lg: 'gap-4',
-                xl: 'gap-5',
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                lg: 'gap-2.5',
+                xl: 'gap-3',
             }
         }),
         text: new SizeTheme({
-            xs: 'text-xs/5',
-            sm: 'text-sm/5',
+            xs: 'text-xs',
+            sm: 'text-sm',
             md: 'text-base',
-            lg: 'text-lg/6',
-            xl: 'text-xl/6',
+            lg: 'text-lg',
+            xl: 'text-xl',
         }),
         shadow: new ShadowTheme(),
     },
@@ -1225,36 +1234,36 @@ const defaultBadgeTheme = new ComponentTheme("span", "w-fit h-fit inline-flex tr
         px: new PxTheme({
             padding: {
                 xs: "px-2",
-                sm: "px-2.5",
-                md: "px-3.5",
+                sm: "px-3",
+                md: "px-4",
                 lg: "px-5",
                 xl: "px-6"
             }
         }),
         py: new PyTheme({
             padding: {
-                xs: "py-1",
-                sm: "py-1.5",
-                md: "py-2",
-                lg: "py-3",
-                xl: "py-4"
+                xs: 'py-1',
+                sm: 'py-1.5',
+                md: 'py-2',
+                lg: 'py-2.5',
+                xl: 'py-3',
             }
         }),
         gap: new GapTheme({
             gap: {
-                xs: "gap-1",
-                sm: "gap-1.5",
-                md: "gap-2",
-                lg: "gap-2.5",
-                xl: "gap-3"
+                xs: 'gap-1',
+                sm: 'gap-1.5',
+                md: 'gap-2',
+                lg: 'gap-2.5',
+                xl: 'gap-3',
             }
         }),
         text: new SizeTheme({
-            xs: 'text-xs/5',
-            sm: 'text-sm/5',
+            xs: 'text-xs',
+            sm: 'text-sm',
             md: 'text-base',
-            lg: 'text-lg/6',
-            xl: 'text-xl/6',
+            lg: 'text-lg',
+            xl: 'text-xl',
         }),
         shadow: new ShadowTheme(),
     },
@@ -1304,26 +1313,26 @@ const defaultChipTheme = new ComponentTheme("span", "w-fit h-fit inline-flex gap
             padding: {
                 xs: 'px-2',
                 sm: 'px-2.5',
-                md: 'px-3.5',
-                lg: 'px-5',
-                xl: 'px-6',
+                md: 'px-3',
+                lg: 'px-3.5',
+                xl: 'px-4',
             }
         }),
         py: new PyTheme({
             padding: {
-                xs: 'py-1',
-                sm: 'py-1.5',
-                md: 'py-2',
-                lg: 'py-3',
-                xl: 'py-4',
+                xs: 'py-0.5',
+                sm: 'py-1',
+                md: 'py-1.5',
+                lg: 'py-2',
+                xl: 'py-2.5',
             }
         }),
         text: new SizeTheme({
             xs: 'text-xs',
             sm: 'text-sm',
-            md: 'text-sm',
-            lg: 'text-base',
-            xl: 'text-base',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
         }),
         gap: new GapTheme({
             gap: {
@@ -1735,26 +1744,46 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
         }),
         py: new PyTheme({
             padding: {
-                xs: 'py-3',
-                sm: 'py-5',
-                md: 'py-8 max-md:py-5',
+                xs: 'py-4 max-md:py-3',
+                sm: 'py-8 max-md:py-6',
+                md: 'py-12 max-md:py-6',
                 lg: 'py-16 max-lg:py-14 max-md:py-12',
                 xl: 'py-20 max-lg:py-16 max-md:py-12',
             }
         }),
         gap: new GapTheme({
             gap: {
-                xs: 'gap-2',
-                sm: 'gap-4',
-                md: 'gap-6',
+                xs: 'gap-4',
+                sm: 'gap-6',
+                md: 'gap-8',
                 lg: 'gap-12',
                 xl: 'gap-16',
             }
         }),
+        shadow: new ShadowTheme(),
+    },
+    appearance: {
+        background: LayoutAppearanceTheme.createDefaultStyle({
+            base: layoutBackgroundAppearanceClasses,
+        }),
+        text: TextAppearanceTheme.createDefaultStyle({ base: textAppearanceClasses }),
+        border: TextAppearanceTheme.createDefaultStyle({ base: borderAppearanceClasses }),
+        ring: TextAppearanceTheme.createDefaultStyle({ base: ringAppearanceClasses }),
     },
     layout: {
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme({
+            rounded: {
+                xs: 'rounded-md',
+                sm: 'rounded-lg',
+                md: 'rounded-xl',
+                lg: 'rounded-2xl',
+                xl: 'rounded-3xl',
+            }
+        }),
     },
 }, {
     md: true,
@@ -1762,6 +1791,10 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex flex-col", {
     itemsStart: true,
     gap: true,
     padding: true,
+    noBorder: true,
+    noRing: true,
+    noShadow: true,
+    sharp: true,
 });
 
 const gridDefaults = {
@@ -1806,16 +1839,27 @@ const defaultTheme = {
     list: listTheme,
 };
 const ThemeContext = createContext(defaultTheme);
-function ThemeProvider({ children, theme: themeObject = {}, themeOverride }) {
+function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, themeOverride }) {
     const mergedTheme = useMemo(() => {
-        let baseTheme = themeObject
+        let finalTheme = themeObject
             ? deepMerge(defaultTheme, themeObject)
             : defaultTheme;
         if (typeof themeOverride === 'function') {
-            const themeToModify = deepClone(baseTheme);
-            return themeOverride(themeToModify);
+            const themeToModify = deepClone(finalTheme);
+            finalTheme = themeOverride(themeToModify);
+        }
+        if (themeDefaults !== undefined) {
+            for (const key in themeDefaults) {
+                const componentKey = key;
+                const componentTheme = finalTheme[componentKey];
+                const themeDefault = themeDefaults[componentKey];
+                if (themeDefault !== undefined) {
+                    finalTheme[componentKey].defaults =
+                        mergeDefaults(componentTheme.defaults, themeDefaults[componentKey]);
+                }
+            }
         }
-        return baseTheme;
+        return finalTheme;
     }, [themeObject, themeOverride]);
     return (jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
 }

package/dist/components/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/theme/themeContext.d.ts

@@ -12,9 +12,11 @@ import { ColTheme } from '../ui/theme/colTheme';
 import { StackTheme } from '../ui/theme/stackTheme';
 import { SectionTheme } from "../ui/theme/sectionTheme";
 import { GridTheme } from "../ui/theme/gridTheme";
-import { ButtonProps, GridProps, TypographyComponentProps, CardProps, RowProps, ColProps, StackProps, BadgeProps, ChipProps, DividerProps, ContainerProps, SectionProps } from "../ui/props/props";
+import { BadgeProps, ButtonProps, CardProps, ChipProps, ColProps, ContainerProps, DividerProps, GridProps, RowProps, SectionProps, StackProps, TypographyComponentProps } from "../ui/props/props";
 import { DeepPartial } from "../utils/deepPartial";
-export interface ThemeProps {
+export declare const COMPONENT_KEYS: readonly ["button", "badge", "chip", "card", "divider", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem"];
+export type ComponentKey = typeof COMPONENT_KEYS[number];
+export interface ThemeProps extends Record<ComponentKey, ComponentTheme<object, object>> {
     button: ComponentTheme<ButtonProps, ButtonTheme<ButtonProps>>;
     badge: ComponentTheme<BadgeProps, BadgeTheme<BadgeProps>>;
     chip: ComponentTheme<ChipProps, ChipTheme<ChipProps>>;
@@ -32,15 +34,17 @@ export interface ThemeProps {
     title: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     text: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     link: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
-    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
     list: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
+    listItem: ComponentTheme<TypographyComponentProps, TypographyComponentTheme<TypographyComponentProps>>;
 }
 export type PartialTheme = DeepPartial<ThemeProps>;
 export declare const defaultTheme: ThemeProps;
+export type ThemeDefaults = Partial<Record<ComponentKey, Record<string, boolean>>>;
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: PartialTheme;
+    themeDefaults?: ThemeDefaults;
     themeOverride?: (theme: ThemeProps) => ThemeProps;
 }
-export declare function ThemeProvider({ children, theme: themeObject, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, theme: themeObject, themeDefaults, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeProps;

package/dist/components/ui/props/keys.d.ts

@@ -75,5 +75,5 @@ export declare const DIVIDER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHi
 export type DividerKey = typeof DIVIDER_KEYS[number];
 export declare const CONTAINER_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "gap", "noGap"];
 export type ContainerKey = typeof CONTAINER_KEYS[number];
-export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap"];
+export declare const SECTION_KEYS: readonly ["xs", "sm", "md", "lg", "xl", "xsHide", "smHide", "mdHide", "lgHide", "xlHide", "relative", "absolute", "fixed", "sticky", "static", "row", "column", "rowReverse", "columnReverse", "itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch", "default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "transparent", "padding", "noPadding", "reverse", "justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline", "flexWrap", "flexNoWrap", "flexWrapReverse", "xsCol", "smCol", "mdCol", "lgCol", "xlCol", "gap", "noGap", "border", "noBorder", "shadow", "noShadow", "ring", "noRing", "pill", "sharp", "rounded"];
 export type SectionKey = typeof SECTION_KEYS[number];

package/dist/components/ui/theme/common/ComponentTheme.d.ts

@@ -4,9 +4,9 @@ import { HideTheme } from "../layout/hideTheme";
 import { ItemsTheme } from "../layout/itemsTheme";
 import { JustifyTheme } from "../layout/justifyTheme";
 import { PositionTheme } from "../layout/positionTheme";
+import { FontStyleTheme } from "../typography/fontStyleTheme";
 import { FontFamilyTheme } from "../typography/fontFamilyTheme";
 import { FontWeightTheme } from "../typography/fontWeightTheme";
-import { FontStyleTheme } from "../typography/fontStyleTheme";
 import { TextDecorationTheme } from "../typography/textDecorationTheme";
 import { TextTransformTheme } from "../typography/textTransformTheme";
 import { TextAlignTheme } from "../typography/textAlignTheme";
@@ -36,8 +36,8 @@ export interface BaseComponentTheme<P> {
 export declare class ComponentTheme<P extends object, TThemes extends object> {
     readonly tag: React.ElementType;
     readonly base: string;
-    readonly defaults: Partial<P>;
     readonly themes: TThemes;
+    defaults: Partial<P>;
     constructor(tag: React.ElementType, base: string, subThemes: DeepPartial<TThemes>, defaults?: Partial<P>);
     getClasses(props: P, defaults?: Partial<P>): string[];
 }

package/dist/components/ui/theme/sectionTheme.d.ts

@@ -5,15 +5,30 @@ import { WrapTheme } from "./layout/wrapTheme";
 import { SectionProps } from "../props/props";
 import { PxTheme } from "./size/pxTheme";
 import { PyTheme } from "./size/pyTheme";
+import { VariantTheme } from "./appearance/variantTheme";
+import { BorderTheme } from "./layout/borderTheme";
+import { RingTheme } from "./layout/ringTheme";
+import { RadiusTheme } from "./layout/radiusTheme";
+import { ShadowTheme } from "./layout/shadowTheme";
 export interface SectionTheme<P> extends BaseComponentTheme<P> {
     size: {
         px: PxTheme;
         py: PyTheme;
         gap: GapTheme;
+        shadow: ShadowTheme;
+    };
+    appearance: {
+        background: VariantTheme;
+        text: VariantTheme;
+        border: VariantTheme;
+        ring: VariantTheme;
     };
     layout: DefaultLayoutThemes<P> & {
         wrap: WrapTheme;
         direction: DirectionTheme;
+        border: BorderTheme;
+        ring: RingTheme;
+        radius: RadiusTheme;
     };
 }
 export declare const defaultSectionTheme: ComponentTheme<SectionProps, SectionTheme<SectionProps>>;