@vaneui/ui 0.9.0-alpha.20260107081332.7a31978 → 0.9.0-alpha.20260107161941.dfd1c72

package/dist/index.esm.js

@@ -51,6 +51,12 @@ const TYPOGRAPHY_STYLE = ['fontWeight', 'fontStyle', 'textDecoration', 'textTran
 const LIST_STYLE = ['listStyle'];
 /** Variant properties for filled/outline styling modes */
 const VARIANT = ['variant'];
+/** Transparent background property */
+const TRANSPARENT = ['transparent'];
+/** Responsive sizing property for breakpoint-specific sizing */
+const RESPONSIVE = ['responsive'];
+/** Common modifier properties available to all components */
+const COMMON_MODIFIERS = [...TRANSPARENT, ...RESPONSIVE];
 /** All available component property categories combined */
 const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_CORE,
@@ -64,6 +70,8 @@ const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
+    ...TRANSPARENT,
+    ...RESPONSIVE,
 ];
 /**
  * Describes category for which the appearance can be applied
@@ -131,11 +139,15 @@ const ComponentKeys = {
     variant: ['filled', 'outline'],
     /** Flex item wrapping behavior: wrap, no-wrap, or wrap-reverse */
     wrap: ['flexWrap', 'flexNoWrap', 'flexWrapReverse'],
+    /** Transparent background: disables background color when true */
+    transparent: ['transparent'],
+    /** Responsive sizing: enables breakpoint-specific py/px/gap/fs when true */
+    responsive: ['responsive'],
 };
 /** All border side keys (excluding noBorder since it doesn't have a CSS class) */
 const BORDER_KEYS = ['border', 'borderT', 'borderB', 'borderL', 'borderR', 'borderX', 'borderY'];
-/** Common responsive breakpoint keys used across all themes */
-const RESPONSIVE_BREAKPOINT_KEYS = ['desktop', 'tablet', 'mobile'];
+/** Common responsive breakpoint keys used across all themes (includes 'base' for non-responsive mode) */
+const RESPONSIVE_BREAKPOINT_KEYS = ['base', 'desktop', 'tablet', 'mobile'];
 /** Composite categories built from core blocks */
 /** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
@@ -146,7 +158,7 @@ const VISUAL_LAYOUT = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION_LAYOUT, .
 /** Complete typography category for text styling */
 const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 /** Categories for interactive components like buttons, badges, chips */
-const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT];
+const INTERACTIVE_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_FULL, ...TYPOGRAPHY_STYLE, ...PADDING, ...VARIANT, ...COMMON_MODIFIERS];
 /** Button component categories */
 const BUTTON_CATEGORIES = INTERACTIVE_CATEGORIES;
 /** Badge component categories */
@@ -157,36 +169,36 @@ const CHIP_CATEGORIES = INTERACTIVE_CATEGORIES;
 const CODE_CATEGORIES = INTERACTIVE_CATEGORIES;
 /** Typography component categories */
 /** Categories for typography components like Text, Title, Link */
-const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT];
+const TYPOGRAPHY_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_CORE, ...VISUAL_CORE, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for list components with typography and list-specific styling */
-const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
+const LIST_CATEGORIES = [...TYPOGRAPHY_FULL, ...LIST_STYLE, ...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT, ...COMMON_MODIFIERS];
 /** Layout component categories */
 /** Categories for grid layout components */
-const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
+const GRID_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for container layout components */
-const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
+const CONTAINER_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for column layout components */
-const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT];
+const COL_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for row layout components with responsive breakpoints */
-const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...VARIANT];
+const ROW_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for stack layout components with responsive and padding support */
-const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_LAYOUT, ...VARIANT];
+const STACK_CATEGORIES = [...LAYOUT_FULL, ...BREAKPOINT, ...PADDING, ...VISUAL_LAYOUT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for card components with full typography and layout support */
-const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...PADDING, ...VARIANT];
+const CARD_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...BREAKPOINT, ...VISUAL_LAYOUT, ...PADDING, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for divider components with basic layout and visual properties */
-const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT];
+const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for section layout components with full responsive support */
-const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
+const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT, ...COMMON_MODIFIERS];
 /** Form component categories */
 /** Categories for checkbox form components */
-const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for label form components with typography support */
-const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
+const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT, ...COMMON_MODIFIERS];
 /** Categories for input form components with interactive and form-specific properties */
 const INPUT_CATEGORIES = [...INTERACTIVE_CATEGORIES];
 /** Media component categories */
 /** Categories for image media components */
-const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT, ...COMMON_MODIFIERS];
 /** All available component names in the library */
 const COMPONENT = ['button', 'badge', 'chip', 'code', 'card', 'divider', 'container', 'row', 'col', 'stack', 'section',
     'grid2', 'grid3', 'grid4', 'grid5', 'grid6', 'pageTitle', 'sectionTitle', 'title', 'text', 'link', 'list', 'listItem', 'checkbox', 'label', 'img', 'input'];
@@ -225,7 +237,7 @@ const ComponentCategories = {
  * Auto-generated prop descriptions from JSDoc comments.
  * DO NOT EDIT MANUALLY - Run 'npm run props:generate' to regenerate.
  *
- * Generated on: 2026-01-07T08:13:34.116Z
+ * Generated on: 2026-01-07T16:19:42.428Z
  */
 const PropDescriptions = {
     "appearance": {
@@ -612,6 +624,15 @@ const PropDescriptions = {
             }
         }
     },
+    "responsive": {
+        "name": "Responsive",
+        "description": "Responsive prop for enabling breakpoint-specific sizing",
+        "props": {
+            "responsive": {
+                "description": "Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap"
+            }
+        }
+    },
     "reverse": {
         "name": "Reverse",
         "description": "Reverse props for reversing child order",
@@ -735,6 +756,15 @@ const PropDescriptions = {
             }
         }
     },
+    "transparent": {
+        "name": "Transparent",
+        "description": "Transparent prop for disabling background color",
+        "props": {
+            "transparent": {
+                "description": "Disable background color - makes component background transparent"
+            }
+        }
+    },
     "variant": {
         "name": "Variant",
         "description": "Variant props for controlling component style variations",
@@ -3895,12 +3925,14 @@ class ComponentTheme {
 }
 
 /**
- * Font size theme - applies text size using pre-computed breakpoint variables.
- * CSS computes --fs-desktop/tablet/mobile from --fs-unit (with fallbacks for responsive overrides).
+ * Font size theme - applies text size using CSS variables.
+ * Uses breakpoint-specific variables when responsive=true, otherwise uses simple --fs variable.
  */
 class FontSizeTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base: apply font size using --fs (non-responsive) */
+        this.base = "text-(length:--fs)";
         /** Desktop: apply font size using --fs-desktop */
         this.desktop = "text-(length:--fs-desktop)";
         /** Tablet: apply font size using --fs-tablet */
@@ -3908,8 +3940,13 @@ class FontSizeTheme extends BaseTheme {
         /** Mobile: apply font size using --fs-mobile */
         this.mobile = "max-mobile:text-(length:--fs-mobile)";
     }
-    getClasses(_extractedKeys) {
-        return [this.desktop, this.tablet, this.mobile];
+    getClasses(extractedKeys) {
+        // Use breakpoint-specific classes if responsive=true
+        if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+            return [this.desktop, this.tablet, this.mobile];
+        }
+        // Otherwise use simple --fs variable
+        return [this.base];
     }
 }
 
@@ -3930,12 +3967,14 @@ class LineHeightTheme extends BaseTheme {
 }
 
 /**
- * Gap theme - applies gap using pre-computed breakpoint variables.
- * CSS computes --gap-desktop/tablet/mobile from --gap-unit (with fallbacks for responsive overrides).
+ * Gap theme - applies gap using CSS variables.
+ * Uses breakpoint-specific variables when responsive=true, otherwise uses simple --gap variable.
  */
 class GapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base: apply gap using --gap (non-responsive) */
+        this.base = "gap-(--gap)";
         /** Desktop: apply gap using --gap-desktop */
         this.desktop = "gap-(--gap-desktop)";
         /** Tablet: apply gap using --gap-tablet */
@@ -3945,7 +3984,12 @@ class GapTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.gap) === 'gap') {
-            return [this.desktop, this.tablet, this.mobile];
+            // Use breakpoint-specific classes if responsive=true
+            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+                return [this.desktop, this.tablet, this.mobile];
+            }
+            // Otherwise use simple --gap variable
+            return [this.base];
         }
         return [];
     }
@@ -4063,12 +4107,14 @@ class FocusVisibleTheme extends BaseTheme {
 }
 
 /**
- * Horizontal padding theme - applies px using pre-computed breakpoint variables.
- * CSS computes --px-desktop/tablet/mobile from --py-unit and --aspect-ratio.
+ * Horizontal padding theme - applies px using CSS variables.
+ * Uses breakpoint-specific variables when responsive=true, otherwise uses simple --px variable.
  */
 class PxTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base: apply horizontal padding using --px (non-responsive) */
+        this.base = "px-(--px)";
         /** Desktop: apply horizontal padding using --px-desktop */
         this.desktop = "px-(--px-desktop)";
         /** Tablet: apply horizontal padding using --px-tablet */
@@ -4078,19 +4124,26 @@ class PxTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            return [this.desktop, this.tablet, this.mobile];
+            // Use breakpoint-specific classes if responsive=true
+            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+                return [this.desktop, this.tablet, this.mobile];
+            }
+            // Otherwise use simple --px variable
+            return [this.base];
         }
         return [];
     }
 }
 
 /**
- * Vertical padding theme - applies py using pre-computed breakpoint variables.
- * CSS computes --py-desktop/tablet/mobile from --py-unit (with fallbacks for responsive overrides).
+ * Vertical padding theme - applies py using CSS variables.
+ * Uses breakpoint-specific variables when responsive=true, otherwise uses simple --py variable.
  */
 class PyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base: apply vertical padding using --py (non-responsive) */
+        this.base = "py-(--py)";
         /** Desktop: apply vertical padding using --py-desktop */
         this.desktop = "py-(--py-desktop)";
         /** Tablet: apply vertical padding using --py-tablet */
@@ -4100,7 +4153,12 @@ class PyTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === 'padding' || (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.padding) === undefined) {
-            return [this.desktop, this.tablet, this.mobile];
+            // Use breakpoint-specific classes if responsive=true
+            if ((extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.responsive) === 'responsive') {
+                return [this.desktop, this.tablet, this.mobile];
+            }
+            // Otherwise use simple --py variable
+            return [this.base];
         }
         return [];
     }
@@ -4149,6 +4207,10 @@ class SimpleConsumerTheme extends BaseTheme {
         if (this.category === 'focusVisible' && (extractedKeys.focusVisible === 'noFocusVisible' || extractedKeys.focusVisible === undefined)) {
             return [];
         }
+        // Handle transparent prop - don't output background classes if transparent is true
+        if (this.category === 'bg' && extractedKeys.transparent === 'transparent') {
+            return [];
+        }
         // Only output classes if an appearance is set (unless alwaysOutput is true)
         if (!this.alwaysOutput && !(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.appearance)) {
             return [];
@@ -4331,6 +4393,7 @@ const themeDefaults = {
         noRing: true,
         noShadow: true,
         sharp: true,
+        responsive: true,
     },
     stack: {
         md: true,
@@ -4452,6 +4515,7 @@ const themeDefaults = {
         textLeft: true,
         outline: true,
         primary: true,
+        responsive: true,
     },
     pageTitle: {
         md: true,
@@ -4460,6 +4524,7 @@ const themeDefaults = {
         textLeft: true,
         outline: true,
         primary: true,
+        responsive: true,
     },
     sectionTitle: {
         md: true,
@@ -4468,6 +4533,7 @@ const themeDefaults = {
         textLeft: true,
         outline: true,
         primary: true,
+        responsive: true,
     },
     link: {
         md: true,
@@ -4809,7 +4875,7 @@ class ListStyleTheme extends BaseTheme {
     }
 }
 
-const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme = new LineHeightTheme()) => {
+const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeTheme = new FontSizeTheme(), defaults = {}, lineHeightTheme = new LineHeightTheme(), categories = TYPOGRAPHY_CATEGORIES) => {
     return new ComponentTheme(tag, base, {
         size: {
             text: fontSizeTheme,
@@ -4820,17 +4886,17 @@ const createTypographyComponentTheme = (tag, base = "text-balance", fontSizeThem
         },
         typography: defaultTypographyThemes,
         layout: defaultLayoutsThemes,
-    }, defaults, TYPOGRAPHY_CATEGORIES, (props) => {
+    }, defaults, categories, (props) => {
         // Determine tag based on href prop
         return props.href ? "a" : tag;
     });
 };
 // Page title specific theme - uses responsive font size
-const pageTitleTheme = createTypographyComponentTheme("h1", "vane-page-title text-balance tracking-tight w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.pageTitle, { semibold: true }), new LineHeightTheme());
+const pageTitleTheme = createTypographyComponentTheme("h1", "vane-page-title text-balance tracking-tight w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.pageTitle, { semibold: true }), new LineHeightTheme(), TYPOGRAPHY_CATEGORIES);
 // Section title specific theme - uses responsive font size
-const sectionTitleTheme = createTypographyComponentTheme("h2", "vane-section-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.sectionTitle, { semibold: true }), new LineHeightTheme());
+const sectionTitleTheme = createTypographyComponentTheme("h2", "vane-section-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.sectionTitle, { semibold: true }), new LineHeightTheme(), TYPOGRAPHY_CATEGORIES);
 // Title specific theme - uses responsive font size
-const titleTheme = createTypographyComponentTheme("h3", "vane-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.title, { semibold: true }), new LineHeightTheme());
+const titleTheme = createTypographyComponentTheme("h3", "vane-title text-balance w-fit", new FontSizeTheme(), mergeDefaults(themeDefaults.title, { semibold: true }), new LineHeightTheme(), TYPOGRAPHY_CATEGORIES);
 // Text specific theme
 const textTheme = createTypographyComponentTheme("p", "vane-text p-0 m-0 w-fit", new FontSizeTheme(), themeDefaults.text);
 // Link specific theme - uses LinkVariantTheme for link-specific colors
@@ -6380,5 +6446,5 @@ const List = forwardRef(function List(props, ref) {
 });
 List.displayName = 'List';
 
-export { ACTIVE, APPEARANCE_CATEGORY, BADGE_CATEGORIES, BASE, BORDER, BORDER_KEYS, 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, FOCUS, FOCUS_VISIBLE, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HOVER, IMG_CATEGORIES, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, Img, Input, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, MODE_VALUES, ModeKeys, PADDING, PageTitle, PropDescriptions, RESPONSIVE_BREAKPOINT_KEYS, 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_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, defaultTheme, getCategoryDescription, getCategoryName, getPropDescription, themeDefaults, useTheme };
+export { ACTIVE, APPEARANCE_CATEGORY, BADGE_CATEGORIES, BASE, BORDER, BORDER_KEYS, BREAKPOINT, BUTTON_CATEGORIES, Badge, Button, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COL_CATEGORIES, COMMON_MODIFIERS, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DIVIDER_CATEGORIES, Divider, FOCUS, FOCUS_VISIBLE, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HOVER, IMG_CATEGORIES, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, Img, Input, LABEL_CATEGORIES, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LIST_CATEGORIES, LIST_STYLE, Label, Link, List, ListItem, MODE_VALUES, ModeKeys, PADDING, PageTitle, PropDescriptions, RESPONSIVE, RESPONSIVE_BREAKPOINT_KEYS, ROW_CATEGORIES, Row, SECTION_CATEGORIES, SHAPE, STACK_CATEGORIES, Section, SectionTitle, Stack, TRANSPARENT, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, VARIANT, VISUAL_CORE, VISUAL_DECORATION, VISUAL_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, defaultTheme, getCategoryDescription, getCategoryName, getPropDescription, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map