@vaneui/ui 0.2.1-alpha.20250811191248.a18a87d → 0.2.1-alpha.20250813170000.4050860

package/dist/index.js

@@ -94,7 +94,7 @@ const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE];
 // Media component categories
 const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
-    'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
+    'grid2', 'grid3', 'grid4', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img'];
 const ComponentCategories = {
     badge: BADGE_CATEGORIES,
     button: BUTTON_CATEGORIES,
@@ -105,6 +105,7 @@ const ComponentCategories = {
     col: COL_CATEGORIES,
     container: CONTAINER_CATEGORIES,
     divider: DIVIDER_CATEGORIES,
+    grid2: GRID_CATEGORIES,
     grid3: GRID_CATEGORIES,
     grid4: GRID_CATEGORIES,
     img: IMG_CATEGORIES,
@@ -4643,6 +4644,9 @@ const gridSubThemes = {
         flexDirection: new DirectionTheme(),
     },
 };
+const defaultGrid2Theme = new ComponentTheme("div", "grid-cols-1 md:grid-cols-2", gridSubThemes, gridDefaults, 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) => {
     return props.href ? "a" : "div";
 });
@@ -4773,6 +4777,7 @@ const defaultTheme = {
     col: defaultColTheme,
     stack: defaultStackTheme,
     section: defaultSectionTheme,
+    grid2: defaultGrid2Theme,
     grid3: defaultGrid3Theme,
     grid4: defaultGrid4Theme,
     pageTitle: pageTitleTheme,
@@ -4852,12 +4857,17 @@ function applyExtraClassesRecursively(themeObject, extraClassesObject) {
     }
 }
 const ThemeContext = react.createContext(defaultTheme);
-function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extraClasses, themeOverride }) {
+function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extraClasses, themeOverride, mergeStrategy = 'merge' }) {
+    const parentTheme = react.useContext(ThemeContext);
     const mergedTheme = react.useMemo(() => {
+        // Determine the base theme based on merge strategy
+        const baseTheme = mergeStrategy === 'replace'
+            ? defaultTheme
+            : parentTheme;
         // Always start with a deep clone to ensure isolation
         let finalTheme = themeObject
-            ? deepMerge(deepClone(defaultTheme), themeObject)
-            : deepClone(defaultTheme);
+            ? deepMerge(deepClone(baseTheme), themeObject)
+            : deepClone(baseTheme);
         if (typeof themeOverride === 'function') {
             const themeToModify = deepClone(finalTheme);
             finalTheme = themeOverride(themeToModify);
@@ -4875,7 +4885,7 @@ function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extra
             applyExtraClassesRecursively(finalTheme, extraClasses);
         }
         return finalTheme;
-    }, [themeObject, themeDefaults, extraClasses, themeOverride]);
+    }, [themeObject, themeDefaults, extraClasses, themeOverride, mergeStrategy, parentTheme]);
     return (jsxRuntime.jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
 }
 function useTheme() {
@@ -4969,6 +4979,10 @@ const Row = react.forwardRef(function Row(props, ref) {
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
 });
 
+const Grid2 = react.forwardRef(function Grid2(props, ref) {
+    const theme = useTheme();
+    return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
+});
 const Grid3 = react.forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
@@ -5042,6 +5056,7 @@ exports.Container = Container;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;
 exports.Divider = Divider;
 exports.GRID_CATEGORIES = GRID_CATEGORIES;
+exports.Grid2 = Grid2;
 exports.Grid3 = Grid3;
 exports.Grid4 = Grid4;
 exports.IMG_CATEGORIES = IMG_CATEGORIES;