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

package/dist/components/tests/grid2.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/themeContext.d.ts

@@ -30,6 +30,7 @@ export interface ThemeProps {
     col: ComponentTheme<ColProps, ColTheme>;
     stack: ComponentTheme<StackProps, StackTheme>;
     section: ComponentTheme<SectionProps, SectionTheme>;
+    grid2: ComponentTheme<GridProps, GridTheme>;
     grid3: ComponentTheme<GridProps, GridTheme>;
     grid4: ComponentTheme<GridProps, GridTheme>;
     pageTitle: ComponentTheme<TypographyProps, TypographyTheme>;
@@ -77,6 +78,7 @@ export type ThemeDefaults = {
     col?: Partial<BooleanKeys<ColProps>>;
     stack?: Partial<BooleanKeys<StackProps>>;
     section?: Partial<BooleanKeys<SectionProps>>;
+    grid2?: Partial<BooleanKeys<GridProps>>;
     grid3?: Partial<BooleanKeys<GridProps>>;
     grid4?: Partial<BooleanKeys<GridProps>>;
     pageTitle?: Partial<BooleanKeys<TypographyProps>>;
@@ -106,6 +108,7 @@ export type ThemeExtraClasses = {
     col?: Partial<StringValueKeys<ColProps>>;
     stack?: Partial<StringValueKeys<StackProps>>;
     section?: Partial<StringValueKeys<SectionProps>>;
+    grid2?: Partial<StringValueKeys<GridProps>>;
     grid3?: Partial<StringValueKeys<GridProps>>;
     grid4?: Partial<StringValueKeys<GridProps>>;
     pageTitle?: Partial<StringValueKeys<TypographyProps>>;
@@ -123,13 +126,15 @@ export type ThemeExtraClasses = {
     label?: Partial<StringValueKeys<LabelProps>>;
     img?: Partial<StringValueKeys<ImgProps>>;
 };
+export type MergeStrategy = 'merge' | 'replace';
 export interface ThemeProviderProps {
     children: React.ReactNode;
     theme?: PartialTheme;
     themeDefaults?: ThemeDefaults;
     extraClasses?: ThemeExtraClasses;
     themeOverride?: (theme: ThemeProps) => ThemeProps;
+    mergeStrategy?: MergeStrategy;
 }
-export declare function ThemeProvider({ children, theme: themeObject, themeDefaults, extraClasses, themeOverride }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ children, theme: themeObject, themeDefaults, extraClasses, themeOverride, mergeStrategy }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTheme(): ThemeProps;
 export {};

package/dist/components/ui/grid.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { GridProps } from './props/props';
+export declare const Grid2: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Grid3: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Grid4: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -2,6 +2,6 @@ export { Section } from './section';
 export { Container } from './container';
 export { Col } from './col';
 export { Row } from './row';
-export { Grid3, Grid4 } from './grid';
+export { Grid2, Grid3, Grid4 } from './grid';
 export { Card } from './card';
 export { Stack } from './stack';

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

@@ -93,6 +93,6 @@ export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];
 };
-export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
+export declare const COMPONENT: readonly ["button", "badge", "chip", "code", "card", "divider", "container", "row", "col", "stack", "section", "grid2", "grid3", "grid4", "pageTitle", "sectionTitle", "title", "text", "link", "list", "listItem", "checkbox", "label", "img"];
 export type ComponentKey = typeof COMPONENT[number];
 export declare const ComponentCategories: Record<ComponentKey, readonly string[]>;

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

@@ -16,5 +16,6 @@ export interface GridTheme extends BaseComponentTheme {
         flexDirection: DirectionTheme;
     };
 }
+export declare const defaultGrid2Theme: ComponentTheme<GridProps, GridTheme>;
 export declare const defaultGrid3Theme: ComponentTheme<GridProps, GridTheme>;
 export declare const defaultGrid4Theme: ComponentTheme<GridProps, GridTheme>;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { Code } from "./components/ui/code";
 export { Checkbox } from "./components/ui/checkbox";
 export { Label } from "./components/ui/label";
 export { Img } from "./components/ui/img";
-export { Section, Container, Col, Row, Stack, Grid3, Grid4, Card } from "./components/ui/layout";
+export { Section, Container, Col, Row, Stack, Grid2, Grid3, Grid4, Card } from "./components/ui/layout";
 export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";
 export { COMPONENT, ComponentKeys, ComponentCategories, type ComponentKey, } from "./components/ui/props/keys";
 export { ThemeProvider, useTheme, defaultTheme, type ThemeProps, type ThemeDefaults, type ThemeExtraClasses, type ThemeProviderProps, type PartialTheme, } from './components/themeContext';

package/dist/index.esm.js

@@ -92,7 +92,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,
@@ -103,6 +103,7 @@ const ComponentCategories = {
     col: COL_CATEGORIES,
     container: CONTAINER_CATEGORIES,
     divider: DIVIDER_CATEGORIES,
+    grid2: GRID_CATEGORIES,
     grid3: GRID_CATEGORIES,
     grid4: GRID_CATEGORIES,
     img: IMG_CATEGORIES,
@@ -4641,6 +4642,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";
 });
@@ -4771,6 +4775,7 @@ const defaultTheme = {
     col: defaultColTheme,
     stack: defaultStackTheme,
     section: defaultSectionTheme,
+    grid2: defaultGrid2Theme,
     grid3: defaultGrid3Theme,
     grid4: defaultGrid4Theme,
     pageTitle: pageTitleTheme,
@@ -4850,12 +4855,17 @@ function applyExtraClassesRecursively(themeObject, extraClassesObject) {
     }
 }
 const ThemeContext = createContext(defaultTheme);
-function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extraClasses, themeOverride }) {
+function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extraClasses, themeOverride, mergeStrategy = 'merge' }) {
+    const parentTheme = useContext(ThemeContext);
     const mergedTheme = 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);
@@ -4873,7 +4883,7 @@ function ThemeProvider({ children, theme: themeObject = {}, themeDefaults, extra
             applyExtraClassesRecursively(finalTheme, extraClasses);
         }
         return finalTheme;
-    }, [themeObject, themeDefaults, extraClasses, themeOverride]);
+    }, [themeObject, themeDefaults, extraClasses, themeOverride, mergeStrategy, parentTheme]);
     return (jsx(ThemeContext.Provider, { value: mergedTheme, children: children }));
 }
 function useTheme() {
@@ -4967,6 +4977,10 @@ const Row = forwardRef(function Row(props, ref) {
     return jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
 });
 
+const Grid2 = forwardRef(function Grid2(props, ref) {
+    const theme = useTheme();
+    return jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
+});
 const Grid3 = forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
     return jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
@@ -5016,5 +5030,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, Grid3, Grid4, IMG_CATEGORIES, INTERACTIVE_CATEGORIES, Img, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, 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, LINK, 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 };
 //# sourceMappingURL=index.esm.js.map