@vaneui/ui 0.2.0 → 0.2.1-alpha.20250802125901.46ffce6

package/dist/index.esm.js

@@ -9,35 +9,28 @@ import { createContext, useMemo, useContext } from 'react';
 class BaseTheme {
 }
 
+const LAYOUT_CORE = ['size', 'hide', 'items', 'justify', 'position', 'display', 'overflow'];
+const LAYOUT_FLEX = ['wrap', 'gap', 'flexDirection', 'reverse'];
+const PADDING = ['padding'];
+const BREAKPOINT = ['breakpoint'];
+const VISUAL_CORE = ['appearance', 'transparent'];
+const VISUAL_DECORATION = ['border', 'shadow', 'ring'];
+const SHAPE = ['shape'];
+const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTransform', 'fontFamily', 'textAlign'];
+const LINK = ['link'];
+const VARIANT = ['variant'];
 const COMPONENT_PROPS_CATEGORY = [
-    'appearance',
-    'border',
-    'breakpoint',
-    'display',
-    'flexDirection',
-    'fontFamily',
-    'fontStyle',
-    'fontWeight',
-    'gap',
-    'hide',
-    'items',
-    'justify',
-    'link',
+    ...VISUAL_CORE,
+    ...LAYOUT_FLEX,
+    ...TYPOGRAPHY_STYLE,
+    ...LAYOUT_CORE,
+    ...BREAKPOINT,
+    ...LINK,
+    ...PADDING,
+    ...VISUAL_DECORATION,
+    ...SHAPE,
+    ...VARIANT,
     'mode',
-    'overflow',
-    'padding',
-    'position',
-    'reverse',
-    'ring',
-    'shadow',
-    'shape',
-    'size',
-    'textAlign',
-    'textDecoration',
-    'textTransform',
-    'transparent',
-    'variant',
-    'wrap'
 ];
 const ComponentKeys = {
     appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info'],
@@ -59,7 +52,6 @@ const ComponentKeys = {
     position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
     reverse: ['reverse'],
     ring: ['ring', 'noRing'],
-    rounded: ['rounded'],
     shadow: ['shadow', 'noShadow'],
     shape: ['pill', 'sharp', 'rounded'],
     size: ['xs', 'sm', 'md', 'lg', 'xl'],
@@ -70,38 +62,26 @@ const ComponentKeys = {
     variant: ['filled', 'outline'],
     wrap: ['flexWrap', 'flexNoWrap', 'flexWrapReverse'],
 };
-// Core building blocks - fundamental categories
-const LAYOUT_CORE = ['size', 'hide', 'items', 'justify', 'position', 'display', 'overflow'];
-const LAYOUT_FLEX = ['wrap', 'gap', 'flexDirection', 'reverse'];
-const LAYOUT_SPACING = ['padding'];
-const LAYOUT_RESPONSIVE = ['breakpoint'];
-const VISUAL_CORE = ['appearance', 'transparent'];
-const VISUAL_DECORATION = ['border', 'shadow', 'ring'];
-const VISUAL_SHAPE = ['shape'];
-const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTransform', 'fontFamily', 'textAlign'];
-const TYPOGRAPHY_SEMANTIC = ['link'];
-const INTERACTION_FORM = ['variant'];
 // Composite categories built from core blocks
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
-const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...VISUAL_SHAPE];
-const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE, ...TYPOGRAPHY_SEMANTIC];
-// Component-specific category combinations
-const BASE_COMPONENT_CATEGORIES = LAYOUT_CORE;
-const TYPOGRAPHY_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...TYPOGRAPHY_FULL];
-const LIST_CATEGORIES = [...TYPOGRAPHY_CATEGORIES, ...LAYOUT_SPACING];
-const INTERACTIVE_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...LAYOUT_SPACING, ...LAYOUT_FLEX, ...INTERACTION_FORM];
+const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE, ...LINK];
+const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT];
 const BUTTON_CATEGORIES = INTERACTIVE_CATEGORIES;
 const BADGE_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
+//typography:
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE];
+const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
+//layout:
+const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
 const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
-const FLEX_CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_CORE];
-const GRID_CATEGORIES = [...LAYOUT_CORE, ...LAYOUT_FLEX, ...VISUAL_CORE];
-const ROW_CATEGORIES = [...FLEX_CONTAINER_CATEGORIES, ...LAYOUT_RESPONSIVE];
-const COL_CATEGORIES = FLEX_CONTAINER_CATEGORIES;
-const STACK_CATEGORIES = [...FLEX_CONTAINER_CATEGORIES, ...LAYOUT_RESPONSIVE, ...LAYOUT_SPACING];
-const CARD_CATEGORIES = [...TYPOGRAPHY_CATEGORIES, ...LAYOUT_FLEX, ...LAYOUT_RESPONSIVE, ...VISUAL_DECORATION, ...VISUAL_SHAPE, ...LAYOUT_SPACING];
-const DIVIDER_CATEGORIES = [...BASE_COMPONENT_CATEGORIES, ...VISUAL_CORE, ...LAYOUT_SPACING];
-const SECTION_CATEGORIES = [...BASE_COMPONENT_CATEGORIES, ...VISUAL_CORE, ...LAYOUT_SPACING, ...LAYOUT_FLEX, ...LAYOUT_RESPONSIVE, ...VISUAL_DECORATION, ...VISUAL_SHAPE];
+const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL];
+const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL];
+const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_FULL];
+const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_FULL, ...PADDING];
+const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...PADDING, ...BREAKPOINT];
 
 class HideTheme extends BaseTheme {
     constructor(initialConfig) {
@@ -3162,7 +3142,6 @@ class ComponentTheme {
         var _a;
         const cleanProps = { ...props };
         const keysToOmit = this.categories.flatMap(category => ComponentKeys[category]);
-        // Remove the component-specific keys
         for (const k of keysToOmit) {
             delete cleanProps[k];
         }
@@ -3467,36 +3446,6 @@ class TextAppearanceTheme extends BaseTheme {
         return new TextAppearanceTheme(finalConfig);
     }
 }
-class UIElementTextAppearanceTheme extends BaseTheme {
-    constructor(config) {
-        super();
-        Object.assign(this, config);
-    }
-    getClasses(extractedKeys) {
-        const appearance = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance;
-        if (!appearance) {
-            return [];
-        }
-        const modes = this[appearance];
-        if (!modes) {
-            return [];
-        }
-        return ComponentKeys.mode.map(mode => modes[mode] || '');
-    }
-    static createTheme(src = {}) {
-        const finalConfig = Object.fromEntries(ComponentKeys.appearance.map(textKey => [
-            textKey,
-            Object.fromEntries(ComponentKeys.mode.map(modeKey => {
-                var _a;
-                return [
-                    modeKey,
-                    ((_a = src[modeKey]) === null || _a === void 0 ? void 0 : _a[textKey]) || ''
-                ];
-            })),
-        ]));
-        return new UIElementTextAppearanceTheme(finalConfig);
-    }
-}
 
 const filledBackgroundAppearanceClasses = {
     default: "bg-(--filled-background-color-default)",
@@ -3714,10 +3663,10 @@ class GenericVariantTheme extends BaseTheme {
     // used for button, bages, chips, etc
     static createUIElementTextTheme() {
         return new GenericVariantTheme({
-            outline: UIElementTextAppearanceTheme.createTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(textAppearanceClasses)
             }),
-            filled: UIElementTextAppearanceTheme.createTheme({
+            filled: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(filledTextAppearanceClasses)
             })
         });
@@ -3736,10 +3685,10 @@ class GenericVariantTheme extends BaseTheme {
     }
     static createUIElementBorderTheme() {
         return new GenericVariantTheme({
-            outline: UIElementTextAppearanceTheme.createTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(borderAppearanceClasses)
             }),
-            filled: UIElementTextAppearanceTheme.createTheme({
+            filled: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(filledBorderAppearanceClasses)
             })
         });
@@ -3752,10 +3701,10 @@ class GenericVariantTheme extends BaseTheme {
     }
     static createUIElementRingTheme() {
         return new GenericVariantTheme({
-            outline: UIElementTextAppearanceTheme.createTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(ringAppearanceClasses)
             }),
-            filled: UIElementTextAppearanceTheme.createTheme({
+            filled: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(filledRingAppearanceClasses)
             })
         });
@@ -3776,12 +3725,12 @@ class GenericVariantTheme extends BaseTheme {
     }
     static createUIElementBgAppearanceTheme() {
         return new GenericVariantTheme({
-            outline: UIElementTextAppearanceTheme.createTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(backgroundAppearanceClasses),
                 hover: this.filterToUIElementKeys(hoverBackgroundAppearanceClasses),
                 active: this.filterToUIElementKeys(activeBackgroundAppearanceClasses)
             }),
-            filled: UIElementTextAppearanceTheme.createTheme({
+            filled: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(filledBackgroundAppearanceClasses),
                 hover: this.filterToUIElementKeys(filledHoverBackgroundAppearanceClasses),
                 active: this.filterToUIElementKeys(filledActiveBackgroundAppearanceClasses)
@@ -3800,10 +3749,10 @@ class GenericVariantTheme extends BaseTheme {
     }
     static createSimpleUIElementBgAppearanceTheme() {
         return new GenericVariantTheme({
-            outline: UIElementTextAppearanceTheme.createTheme({
+            outline: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(backgroundAppearanceClasses),
             }),
-            filled: UIElementTextAppearanceTheme.createTheme({
+            filled: TextAppearanceTheme.createTheme({
                 base: this.filterToUIElementKeys(filledBackgroundAppearanceClasses),
             })
         });
@@ -3813,13 +3762,7 @@ class GenericVariantTheme extends BaseTheme {
 const defaultButtonTheme = new ComponentTheme("button", "w-fit h-fit cursor-pointer transition-all duration-200 whitespace-nowrap", {
     size: {
         px: new PxTheme({
-            padding: {
-                xs: 'px-2',
-                sm: 'px-3',
-                md: 'px-4',
-                lg: 'px-5',
-                xl: 'px-6',
-            }
+            padding: { xs: 'px-2', sm: 'px-3', md: 'px-4', lg: 'px-5', xl: 'px-6', }
         }),
         py: new PyTheme({
             padding: {
@@ -4385,9 +4328,14 @@ const defaultRowTheme = new ComponentTheme("div", "", {
         ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
         background: new BgAppearanceTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     }
 }, {
     row: true,
@@ -4395,6 +4343,9 @@ const defaultRowTheme = new ComponentTheme("div", "", {
     flex: true,
     itemsCenter: true,
     gap: true,
+    noBorder: true,
+    noRing: true,
+    sharp: true,
 }, ROW_CATEGORIES);
 
 const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
@@ -4470,15 +4421,23 @@ const defaultColTheme = new ComponentTheme("div", "", {
         ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
         background: new BgAppearanceTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     }
 }, {
     column: true,
     md: true,
     flex: true,
     gap: true,
+    noBorder: true,
+    noRing: true,
+    sharp: true,
 }, COL_CATEGORIES);
 
 const defaultStackTheme = new ComponentTheme("div", "", {
@@ -4507,9 +4466,14 @@ const defaultStackTheme = new ComponentTheme("div", "", {
         ...defaultLayoutTheme,
         wrap: new WrapTheme(),
         direction: new DirectionTheme(),
+        border: new BorderTheme(),
+        ring: new RingTheme(),
+        radius: new RadiusTheme(),
     },
     appearance: {
         background: new BgAppearanceTheme(),
+        border: GenericVariantTheme.createUIElementBorderTheme(),
+        ring: GenericVariantTheme.createUIElementRingTheme(),
     }
 }, {
     md: true,
@@ -4518,6 +4482,9 @@ const defaultStackTheme = new ComponentTheme("div", "", {
     flexWrap: true,
     gap: true,
     padding: true,
+    noBorder: true,
+    noRing: true,
+    sharp: true,
 }, STACK_CATEGORIES);
 
 const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
@@ -4758,5 +4725,5 @@ const List = (props) => {
     return jsx(ThemedComponent, { theme: theme.list, ...props });
 };
 
-export { BADGE_CATEGORIES, BASE_COMPONENT_CATEGORIES, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHIP_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Chip, Col, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, FLEX_CONTAINER_CATEGORIES, GRID_CATEGORIES, Grid3, Grid4, INTERACTIVE_CATEGORIES, LIST_CATEGORIES, Link, List, ListItem, PageTitle, ROW_CATEGORIES, Row, SECTION_CATEGORIES, STACK_CATEGORIES, Section, SectionTitle, Stack, TYPOGRAPHY_CATEGORIES, Text, ThemeProvider, Title, defaultTheme, useTheme };
+export { BADGE_CATEGORIES, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHIP_CATEGORIES, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Chip, Col, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, GRID_CATEGORIES, Grid3, Grid4, INTERACTIVE_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LINK, LIST_CATEGORIES, 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