@vaneui/ui 0.2.1-alpha.20250812182914.4e44540 → 0.2.1-alpha.20250813194307.2bb87da

package/dist/components/themeContext.d.ts

@@ -126,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/checkbox.d.ts

@@ -16,6 +16,7 @@ export declare const Checkbox: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -19,6 +19,7 @@ export declare const Code: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -14,6 +14,7 @@ export declare const Divider: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;
     inlineBlock?: boolean | undefined;

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

@@ -16,6 +16,7 @@ export declare const Img: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     noBorder?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;

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

@@ -6,7 +6,6 @@ export declare const Label: React.ForwardRefExoticComponent<{
     transparent?: boolean | undefined;
     gap?: boolean | undefined;
     reverse?: boolean | undefined;
-    link?: boolean | undefined;
     default?: boolean | undefined;
     accent?: boolean | undefined;
     primary?: boolean | undefined;
@@ -16,6 +15,7 @@ export declare const Label: React.ForwardRefExoticComponent<{
     danger?: boolean | undefined;
     warning?: boolean | undefined;
     info?: boolean | undefined;
+    link?: boolean | undefined;
     inline?: boolean | undefined;
     block?: boolean | undefined;
     inlineBlock?: boolean | undefined;

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

@@ -7,12 +7,11 @@ export declare const VISUAL_DECORATION: readonly ["border", "shadow", "ring"];
 export declare const SHAPE: readonly ["shape"];
 export declare const TYPOGRAPHY_STYLE: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
 export declare const LIST_STYLE: readonly ["listStyle"];
-export declare const LINK: readonly ["link"];
 export declare const VARIANT: readonly ["variant"];
-export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "link", "padding", "border", "shadow", "ring", "shape", "variant", "mode"];
+export declare const COMPONENT_PROPS_CATEGORY: readonly ["appearance", "transparent", "wrap", "gap", "flexDirection", "reverse", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "breakpoint", "padding", "border", "shadow", "ring", "shape", "variant", "mode"];
 export type ComponentCategoryKey = typeof COMPONENT_PROPS_CATEGORY[number];
 export declare const ComponentKeys: {
-    readonly appearance: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info"];
+    readonly appearance: readonly ["default", "accent", "primary", "secondary", "tertiary", "success", "danger", "warning", "info", "link"];
     readonly border: readonly ["border", "noBorder"];
     readonly breakpoint: readonly ["xsCol", "smCol", "mdCol", "lgCol", "xlCol"];
     readonly display: readonly ["inline", "block", "inlineBlock", "flex", "inlineFlex", "grid", "inlineGrid", "contents", "table", "tableCell", "hidden"];
@@ -24,7 +23,6 @@ export declare const ComponentKeys: {
     readonly hide: readonly ["xsHide", "smHide", "mdHide", "lgHide", "xlHide"];
     readonly items: readonly ["itemsStart", "itemsEnd", "itemsCenter", "itemsBaseline", "itemsStretch"];
     readonly justify: readonly ["justifyStart", "justifyEnd", "justifyCenter", "justifyBetween", "justifyAround", "justifyEvenly", "justifyStretch", "justifyBaseline"];
-    readonly link: readonly ["link"];
     readonly listStyle: readonly ["disc", "decimal"];
     readonly mode: readonly ["base", "hover", "active"];
     readonly overflow: readonly ["overflowAuto", "overflowHidden", "overflowClip", "overflowVisible", "overflowScroll", "overflowXAuto", "overflowYAuto", "overflowXHidden", "overflowYHidden", "overflowXClip", "overflowYClip", "overflowXVisible", "overflowYVisible", "overflowXScroll", "overflowYScroll"];
@@ -52,7 +50,7 @@ export type GapKey = typeof ComponentKeys.gap[number];
 export type VariantKey = typeof ComponentKeys.variant[number];
 export type AppearanceKey = typeof ComponentKeys.appearance[number];
 export type TransparentKey = typeof ComponentKeys.transparent[number];
-export type LinkKey = typeof ComponentKeys.link[number];
+export type LinkKey = 'link';
 export type ListStyleKey = typeof ComponentKeys.listStyle[number];
 export type FontFamilyKey = typeof ComponentKeys.fontFamily[number];
 export type FontWeightKey = typeof ComponentKeys.fontWeight[number];
@@ -71,24 +69,24 @@ export type DisplayKey = typeof ComponentKeys.display[number];
 export type OverflowKey = typeof ComponentKeys.overflow[number];
 export declare const LAYOUT_FULL: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse"];
 export declare const VISUAL_FULL: readonly ["appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const TYPOGRAPHY_FULL: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link"];
+export declare const TYPOGRAPHY_FULL: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign"];
 export declare const INTERACTIVE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const BUTTON_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const BADGE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CHIP_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
 export declare const CODE_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "padding", "variant"];
-export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
-export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
+export declare const TYPOGRAPHY_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent"];
+export declare const LIST_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "listStyle", "size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
 export declare const GRID_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
 export declare const CONTAINER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const COL_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const ROW_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export declare const STACK_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "padding", "appearance", "transparent", "border", "shadow", "ring", "shape"];
-export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
+export declare const CARD_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "breakpoint", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding"];
 export declare const DIVIDER_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "padding"];
 export declare const SECTION_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent", "border", "shadow", "ring", "shape", "padding", "breakpoint"];
 export declare const CHECKBOX_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape", "variant"];
-export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "link", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
+export declare const LABEL_CATEGORIES: readonly ["fontWeight", "fontStyle", "textDecoration", "textTransform", "fontFamily", "textAlign", "size", "hide", "items", "justify", "position", "display", "overflow", "wrap", "gap", "flexDirection", "reverse", "appearance", "transparent"];
 export declare const IMG_CATEGORIES: readonly ["size", "hide", "items", "justify", "position", "display", "overflow", "appearance", "transparent", "border", "shadow", "ring", "shape"];
 export type CategoryProps = {
     [K in ComponentCategoryKey]?: (typeof ComponentKeys)[K][number];

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

@@ -1,5 +1,5 @@
 import { BaseTypographyComponentTheme, ComponentTheme, DefaultLayoutThemes } from "./common/ComponentTheme";
-import { ButtonProps } from "../props/props";
+import { ButtonProps } from "../props";
 import { SizeTheme } from "./size/sizeTheme";
 import { GapTheme } from "./size/gapTheme";
 import { RadiusTheme } from "./layout/radiusTheme";

package/dist/index.esm.js

@@ -18,7 +18,6 @@ const VISUAL_DECORATION = ['border', 'shadow', 'ring'];
 const SHAPE = ['shape'];
 const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTransform', 'fontFamily', 'textAlign'];
 const LIST_STYLE = ['listStyle'];
-const LINK = ['link'];
 const VARIANT = ['variant'];
 const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_CORE,
@@ -27,7 +26,6 @@ const COMPONENT_PROPS_CATEGORY = [
     ...LIST_STYLE,
     ...LAYOUT_CORE,
     ...BREAKPOINT,
-    ...LINK,
     ...PADDING,
     ...VISUAL_DECORATION,
     ...SHAPE,
@@ -35,7 +33,7 @@ const COMPONENT_PROPS_CATEGORY = [
     'mode',
 ];
 const ComponentKeys = {
-    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
+    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
     border: ['border', 'noBorder'],
     breakpoint: ['xsCol', 'smCol', 'mdCol', 'lgCol', 'xlCol'],
     display: ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'],
@@ -47,7 +45,6 @@ const ComponentKeys = {
     hide: ['xsHide', 'smHide', 'mdHide', 'lgHide', 'xlHide'],
     items: ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'],
     justify: ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'],
-    link: ['link'],
     listStyle: ['disc', 'decimal'],
     mode: ['base', 'hover', 'active'],
     overflow: ['overflowAuto', 'overflowHidden', 'overflowClip', 'overflowVisible', 'overflowScroll', 'overflowXAuto', 'overflowYAuto', 'overflowXHidden', 'overflowYHidden', 'overflowXClip', 'overflowYClip', 'overflowXVisible', 'overflowYVisible', 'overflowXScroll', 'overflowYScroll'],
@@ -68,7 +65,7 @@ const ComponentKeys = {
 // Composite categories built from core blocks
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
 const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
-const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE, ...LINK];
+const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT];
 const BUTTON_CATEGORIES = INTERACTIVE_CATEGORIES;
 const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
@@ -3665,26 +3662,21 @@ class AppearanceTheme extends BaseTheme {
         this.linkClassSource = options === null || options === void 0 ? void 0 : options.linkClassSource;
     }
     getClasses(extractedKeys) {
-        var _a, _b;
-        // Check for specific transparent or link styles first
+        var _a;
+        // Check for specific transparent styles first
         if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.transparent) {
             const transparentClass = ((_a = this.transparentClassSource) === null || _a === void 0 ? void 0 : _a[extractedKeys.transparent]) || '';
             return [transparentClass];
         }
-        if (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.link) {
-            const linkClass = ((_b = this.linkClassSource) === null || _b === void 0 ? void 0 : _b[extractedKeys.link]) || '';
-            return [linkClass];
-        }
-        // Use regular appearance
+        // Use appearance (now includes link as an appearance option)
         const pickedAppearanceKey = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
-        if (!pickedAppearanceKey) {
-            return [];
-        }
-        const modes = this[pickedAppearanceKey];
-        if (!modes) {
-            return [];
+        if (pickedAppearanceKey) {
+            const modes = this[pickedAppearanceKey];
+            if (modes) {
+                return ComponentKeys.mode.map(mode => modes[mode] || '');
+            }
         }
-        return ComponentKeys.mode.map(mode => modes[mode] || '');
+        return [];
     }
     static createTheme(src = {}, options) {
         const finalConfig = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
@@ -4304,7 +4296,6 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     layout: defaultLayoutTheme,
 }, {
     link: true,
-    default: true,
     sans: true,
 }, TYPOGRAPHY_CATEGORIES);
 // List specific theme
@@ -4855,12 +4846,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);
@@ -4878,7 +4874,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() {
@@ -5025,5 +5021,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, 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, 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