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

package/dist/index.js

@@ -11,35 +11,28 @@ var react = require('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'],
@@ -61,7 +54,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'],
@@ -72,38 +64,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) {
@@ -3164,7 +3144,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];
         }
@@ -3469,36 +3448,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)",
@@ -3716,10 +3665,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)
             })
         });
@@ -3738,10 +3687,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)
             })
         });
@@ -3754,10 +3703,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)
             })
         });
@@ -3778,12 +3727,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)
@@ -3802,10 +3751,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),
             })
         });
@@ -3815,13 +3764,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: {
@@ -4387,9 +4330,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,
@@ -4397,6 +4345,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", {
@@ -4472,15 +4423,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", "", {
@@ -4509,9 +4468,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,
@@ -4520,6 +4484,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", {
@@ -4761,7 +4728,7 @@ const List = (props) => {
 };
 
 exports.BADGE_CATEGORIES = BADGE_CATEGORIES;
-exports.BASE_COMPONENT_CATEGORIES = BASE_COMPONENT_CATEGORIES;
+exports.BREAKPOINT = BREAKPOINT;
 exports.BUTTON_CATEGORIES = BUTTON_CATEGORIES;
 exports.Badge = Badge;
 exports.Button = Button;
@@ -4778,27 +4745,38 @@ exports.ComponentKeys = ComponentKeys;
 exports.Container = Container;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;
 exports.Divider = Divider;
-exports.FLEX_CONTAINER_CATEGORIES = FLEX_CONTAINER_CATEGORIES;
 exports.GRID_CATEGORIES = GRID_CATEGORIES;
 exports.Grid3 = Grid3;
 exports.Grid4 = Grid4;
 exports.INTERACTIVE_CATEGORIES = INTERACTIVE_CATEGORIES;
+exports.LAYOUT_CORE = LAYOUT_CORE;
+exports.LAYOUT_FLEX = LAYOUT_FLEX;
+exports.LAYOUT_FULL = LAYOUT_FULL;
+exports.LINK = LINK;
 exports.LIST_CATEGORIES = LIST_CATEGORIES;
 exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
+exports.PADDING = PADDING;
 exports.PageTitle = PageTitle;
 exports.ROW_CATEGORIES = ROW_CATEGORIES;
 exports.Row = Row;
 exports.SECTION_CATEGORIES = SECTION_CATEGORIES;
+exports.SHAPE = SHAPE;
 exports.STACK_CATEGORIES = STACK_CATEGORIES;
 exports.Section = Section;
 exports.SectionTitle = SectionTitle;
 exports.Stack = Stack;
 exports.TYPOGRAPHY_CATEGORIES = TYPOGRAPHY_CATEGORIES;
+exports.TYPOGRAPHY_FULL = TYPOGRAPHY_FULL;
+exports.TYPOGRAPHY_STYLE = TYPOGRAPHY_STYLE;
 exports.Text = Text;
 exports.ThemeProvider = ThemeProvider;
 exports.Title = Title;
+exports.VARIANT = VARIANT;
+exports.VISUAL_CORE = VISUAL_CORE;
+exports.VISUAL_DECORATION = VISUAL_DECORATION;
+exports.VISUAL_FULL = VISUAL_FULL;
 exports.defaultTheme = defaultTheme;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map