@vaneui/ui 0.9.0-alpha.20260107081332.7a31978 → 0.9.0-alpha.20260107153112.7883b1f

package/dist/index.js

@@ -53,6 +53,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,
@@ -66,6 +72,8 @@ const COMPONENT_PROPS_CATEGORY = [
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
+    ...TRANSPARENT,
+    ...RESPONSIVE,
 ];
 /**
  * Describes category for which the appearance can be applied
@@ -133,11 +141,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];
@@ -148,7 +160,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 */
@@ -159,36 +171,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'];
@@ -227,7 +239,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-07T15:31:13.748Z
  */
 const PropDescriptions = {
     "appearance": {
@@ -614,6 +626,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",
@@ -737,6 +758,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",
@@ -3897,12 +3927,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 */
@@ -3910,8 +3942,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];
     }
 }
 
@@ -3932,12 +3969,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 */
@@ -3947,7 +3986,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 [];
     }
@@ -4065,12 +4109,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 */
@@ -4080,19 +4126,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 */
@@ -4102,7 +4155,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 [];
     }
@@ -4151,6 +4209,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 [];
@@ -4811,7 +4873,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,
@@ -4822,17 +4884,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
@@ -6397,6 +6459,7 @@ exports.CHECKBOX_CATEGORIES = CHECKBOX_CATEGORIES;
 exports.CHIP_CATEGORIES = CHIP_CATEGORIES;
 exports.CODE_CATEGORIES = CODE_CATEGORIES;
 exports.COL_CATEGORIES = COL_CATEGORIES;
+exports.COMMON_MODIFIERS = COMMON_MODIFIERS;
 exports.COMPONENT = COMPONENT;
 exports.COMPONENT_PROPS_CATEGORY = COMPONENT_PROPS_CATEGORY;
 exports.CONTAINER_CATEGORIES = CONTAINER_CATEGORIES;
@@ -6439,6 +6502,7 @@ exports.ModeKeys = ModeKeys;
 exports.PADDING = PADDING;
 exports.PageTitle = PageTitle;
 exports.PropDescriptions = PropDescriptions;
+exports.RESPONSIVE = RESPONSIVE;
 exports.RESPONSIVE_BREAKPOINT_KEYS = RESPONSIVE_BREAKPOINT_KEYS;
 exports.ROW_CATEGORIES = ROW_CATEGORIES;
 exports.Row = Row;
@@ -6448,6 +6512,7 @@ exports.STACK_CATEGORIES = STACK_CATEGORIES;
 exports.Section = Section;
 exports.SectionTitle = SectionTitle;
 exports.Stack = Stack;
+exports.TRANSPARENT = TRANSPARENT;
 exports.TYPOGRAPHY_CATEGORIES = TYPOGRAPHY_CATEGORIES;
 exports.TYPOGRAPHY_FULL = TYPOGRAPHY_FULL;
 exports.TYPOGRAPHY_STYLE = TYPOGRAPHY_STYLE;