@vaneui/ui 0.2.2-alpha.20250913214402.427a7ea → 0.3.1-alpha.20250914202143.38eda80

package/dist/index.js

@@ -35,11 +35,41 @@ const LINK = 'link';
 const APPEARANCE_VALUES = [DEFAULT, ACCENT, PRIMARY, SECONDARY, TERTIARY, SUCCESS, DANGER, WARNING, INFO, LINK];
 
 /** Show border - adds appearance-based border styling */
-const BORDER = 'border';
+const BORDER$1 = 'border';
+/** Show top border */
+const BORDER_T = 'borderT';
+/** Show bottom border */
+const BORDER_B = 'borderB';
+/** Show left border */
+const BORDER_L = 'borderL';
+/** Show right border */
+const BORDER_R = 'borderR';
+/** Show horizontal borders (left and right) */
+const BORDER_X = 'borderX';
+/** Show vertical borders (top and bottom) */
+const BORDER_Y = 'borderY';
 /** Hide border - removes border styling (overrides appearance colors) */
 const NO_BORDER = 'noBorder';
-/** All border property values */
-const BORDER_VALUES = [BORDER, NO_BORDER];
+/** All border property values - includes all border variations and noBorder */
+const BORDER_VALUES = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y, NO_BORDER];
+/** All borderT property values */
+const BORDER_T_VALUES = [BORDER_T];
+/** All borderB property values */
+const BORDER_B_VALUES = [BORDER_B];
+/** All borderL property values */
+const BORDER_L_VALUES = [BORDER_L];
+/** All borderR property values */
+const BORDER_R_VALUES = [BORDER_R];
+/** All borderX property values */
+const BORDER_X_VALUES = [BORDER_X];
+/** All borderY property values */
+const BORDER_Y_VALUES = [BORDER_Y];
+/** All noBorder property values */
+const NO_BORDER_VALUES = [NO_BORDER];
+/** All border side keys (excluding noBorder since it doesn't have a CSS class) */
+const BORDER_KEYS = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, BORDER_X, BORDER_Y];
+/** All border keys including noBorder for category purposes */
+const ALL_BORDER_KEYS = [...BORDER_KEYS, NO_BORDER];
 
 /** Extra-small column breakpoint - responsive grid column sizing for xs screens */
 const XS_COL = 'xsCol';
@@ -374,10 +404,12 @@ const PADDING = ['padding'];
 const BREAKPOINT = ['breakpoint'];
 /** Core visual properties including appearance colors and transparency */
 const VISUAL_CORE = ['appearance', 'transparent'];
-/** Visual decoration properties for borders, shadows, and focus rings */
-const VISUAL_DECORATION = ['border', 'shadow', 'ring', 'focusVisible'];
+/** Border properties for visual decoration */
+const BORDER = ['border'];
+/** Visual decoration properties for shadows and focus rings */
+const VISUAL_DECORATION = ['shadow', 'ring', 'focusVisible'];
 /** Layout-specific visual decoration (excluding focusVisible for non-interactive elements) */
-const VISUAL_DECORATION_LAYOUT = ['border', 'shadow', 'ring'];
+const VISUAL_DECORATION_LAYOUT = ['shadow', 'ring'];
 /** Shape properties for border radius and corner rounding */
 const SHAPE = ['shape'];
 /** Typography styling properties for text appearance and formatting */
@@ -395,6 +427,7 @@ const COMPONENT_PROPS_CATEGORY = [
     ...LAYOUT_CORE,
     ...BREAKPOINT,
     ...PADDING,
+    ...BORDER,
     ...VISUAL_DECORATION,
     ...SHAPE,
     ...VARIANT,
@@ -408,7 +441,7 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 const ComponentKeys = {
     /** Color appearance options */
     appearance: APPEARANCE_VALUES,
-    /** Border visibility: border (show) or noBorder (hide) */
+    /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
     border: BORDER_VALUES,
     /** Column breakpoints for responsive grid layouts */
     breakpoint: BREAKPOINT_VALUES,
@@ -467,9 +500,9 @@ const ComponentKeys = {
 /** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
 /** Complete visual category including core, decoration, and shape properties */
-const VISUAL_FULL = [...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE];
+const VISUAL_FULL = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE];
 /** Layout-specific visual category (excludes focusVisible for non-interactive elements) */
-const VISUAL_LAYOUT = [...VISUAL_CORE, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
+const VISUAL_LAYOUT = [...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION_LAYOUT, ...SHAPE];
 /** Complete typography category for text styling */
 const TYPOGRAPHY_FULL = [...TYPOGRAPHY_STYLE];
 /** Categories for interactive components like buttons, badges, chips */
@@ -506,14 +539,14 @@ const DIVIDER_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...PADDING];
 const SECTION_CATEGORIES = [...LAYOUT_FULL, ...VISUAL_LAYOUT, ...PADDING, ...BREAKPOINT, ...VARIANT];
 /** Form component categories */
 /** Categories for checkbox form components */
-const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const CHECKBOX_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** Categories for label form components with typography support */
 const LABEL_CATEGORIES = [...TYPOGRAPHY_FULL, ...LAYOUT_FULL, ...VISUAL_CORE, ...VARIANT];
 /** 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, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
+const IMG_CATEGORIES = [...LAYOUT_CORE, ...VISUAL_CORE, ...BORDER, ...VISUAL_DECORATION, ...SHAPE, ...VARIANT];
 /** 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'];
@@ -3506,6 +3539,9 @@ class ComponentTheme {
                 extractedKeys[category] = key;
             }
         }
+        // No need for border/noBorder mutual exclusion logic anymore
+        // since noBorder is now part of the border category and 
+        // pickFirstTruthyKeyByCategory handles the priority naturally
         const walk = (map) => {
             for (const key of Object.keys(map)) {
                 const node = map[key];
@@ -3655,16 +3691,27 @@ class RadiusTheme extends BaseTheme {
 class BorderTheme extends BaseTheme {
     constructor() {
         super(...arguments);
-        this.base = "border";
-        this.hover = "";
-        this.active = "";
-        this.focus = "";
-        this.focusVisible = "";
+        this.border = "border";
+        this.borderT = "border-t";
+        this.borderB = "border-b";
+        this.borderL = "border-l";
+        this.borderR = "border-r";
+        this.borderX = "border-x";
+        this.borderY = "border-y";
     }
     getClasses(extractedKeys) {
-        return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border) === "border"
-            ? ModeKeys.mode.map((mode) => this[mode])
-            : [];
+        const classes = [];
+        // Now all border variations and noBorder come through the 'border' category
+        const borderValue = extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.border;
+        // If noBorder is selected, don't apply any border classes
+        if (borderValue === "noBorder") {
+            return [];
+        }
+        // Check if the border value matches any of our border keys (BORDER_KEYS excludes noBorder)
+        if (borderValue && BORDER_KEYS.includes(borderValue)) {
+            classes.push(this[borderValue]);
+        }
+        return classes;
     }
 }
 
@@ -3764,8 +3811,17 @@ class AppearanceTheme extends BaseTheme {
     }
     getClasses(extractedKeys) {
         var _a;
-        if (this.category === 'border' && (extractedKeys.border === 'noBorder' || extractedKeys.border === undefined)) {
-            return [];
+        if (this.category === 'border') {
+            // If noBorder is selected from the border category, don't apply appearance colors
+            if (extractedKeys.border === NO_BORDER) {
+                return [];
+            }
+            // Only apply appearance colors if any border prop is set (and not noBorder)
+            const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== NO_BORDER;
+            // If no border props are set, don't apply appearance colors
+            if (!hasBorderProps) {
+                return [];
+            }
         }
         if (this.category === 'ring' && (extractedKeys.ring === 'noRing' || extractedKeys.ring === undefined)) {
             return [];
@@ -5522,6 +5578,7 @@ const List = react.forwardRef(function List(props, ref) {
 exports.ABSOLUTE = ABSOLUTE;
 exports.ACCENT = ACCENT;
 exports.ACTIVE = ACTIVE;
+exports.ALL_BORDER_KEYS = ALL_BORDER_KEYS;
 exports.APPEARANCE_CATEGORY = APPEARANCE_CATEGORY;
 exports.APPEARANCE_VALUES = APPEARANCE_VALUES;
 exports.BADGE_CATEGORIES = BADGE_CATEGORIES;
@@ -5530,7 +5587,20 @@ exports.BLACK = BLACK;
 exports.BLOCK = BLOCK;
 exports.BOLD = BOLD;
 exports.BORDER = BORDER;
+exports.BORDER_B = BORDER_B;
+exports.BORDER_B_VALUES = BORDER_B_VALUES;
+exports.BORDER_KEYS = BORDER_KEYS;
+exports.BORDER_L = BORDER_L;
+exports.BORDER_L_VALUES = BORDER_L_VALUES;
+exports.BORDER_R = BORDER_R;
+exports.BORDER_R_VALUES = BORDER_R_VALUES;
+exports.BORDER_T = BORDER_T;
+exports.BORDER_T_VALUES = BORDER_T_VALUES;
 exports.BORDER_VALUES = BORDER_VALUES;
+exports.BORDER_X = BORDER_X;
+exports.BORDER_X_VALUES = BORDER_X_VALUES;
+exports.BORDER_Y = BORDER_Y;
+exports.BORDER_Y_VALUES = BORDER_Y_VALUES;
 exports.BREAKPOINT = BREAKPOINT;
 exports.BREAKPOINT_VALUES = BREAKPOINT_VALUES;
 exports.BUTTON_CATEGORIES = BUTTON_CATEGORIES;
@@ -5646,6 +5716,7 @@ exports.NORMAL = NORMAL;
 exports.NORMAL_CASE = NORMAL_CASE;
 exports.NOT_ITALIC = NOT_ITALIC;
 exports.NO_BORDER = NO_BORDER;
+exports.NO_BORDER_VALUES = NO_BORDER_VALUES;
 exports.NO_FOCUS_VISIBLE_OUTLINE = NO_FOCUS_VISIBLE_OUTLINE;
 exports.NO_GAP = NO_GAP;
 exports.NO_PADDING = NO_PADDING;