@vaneui/ui 0.3.1-alpha.20251129115555.bcd1100 → 0.3.1-alpha.20251201135827.a31cb1e

package/dist/index.esm.js

@@ -9,351 +9,6 @@ import { createContext, useContext, useMemo, forwardRef } from 'react';
 class BaseTheme {
 }
 
-/** Default neutral appearance - uses default color variables */
-const DEFAULT = 'default';
-/** Accent appearance - uses accent/rose color variables for brand secondary styling */
-const ACCENT = 'accent';
-/** Primary appearance - uses primary/blue color variables for main brand styling */
-const PRIMARY = 'primary';
-/** Secondary appearance - uses secondary/gray color variables for muted styling */
-const SECONDARY = 'secondary';
-/** Tertiary appearance - uses tertiary/gray color variables for subtle styling */
-const TERTIARY = 'tertiary';
-/** Success appearance - uses success/emerald color variables for positive states */
-const SUCCESS = 'success';
-/** Danger appearance - uses danger/red color variables for error/destructive states */
-const DANGER = 'danger';
-/** Warning appearance - uses warning/amber color variables for caution states */
-const WARNING = 'warning';
-/** Info appearance - uses info/cyan color variables for informational states */
-const INFO = 'info';
-/** Link appearance - uses link/blue color variables for hyperlinks and navigation */
-const LINK = 'link';
-/** All appearance property values */
-const APPEARANCE_VALUES = [DEFAULT, ACCENT, PRIMARY, SECONDARY, TERTIARY, SUCCESS, DANGER, WARNING, INFO, LINK];
-
-/** Show border - adds appearance-based border styling */
-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 - 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 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];
-
-/** Mobile column breakpoint - switch to column layout on mobile devices (max-mobile: 20rem) */
-const MOBILE_COL = 'mobileCol';
-/** Tablet column breakpoint - switch to column layout on tablet devices (max-tablet: 40rem) */
-const TABLET_COL = 'tabletCol';
-/** Laptop column breakpoint - switch to column layout on laptop devices (max-laptop: 64rem) */
-const LAPTOP_COL = 'laptopCol';
-/** Desktop column breakpoint - switch to column layout on desktop devices (max-desktop: 80rem) */
-const DESKTOP_COL = 'desktopCol';
-/** All breakpoint property values */
-const BREAKPOINT_VALUES = [MOBILE_COL, TABLET_COL, LAPTOP_COL, DESKTOP_COL];
-
-/** Inline display - flows with text */
-const INLINE = 'inline';
-/** Block display - takes full width, new line */
-const BLOCK = 'block';
-/** Inline-block display - inline but with block properties */
-const INLINE_BLOCK = 'inlineBlock';
-/** Flex display - flexbox container */
-const FLEX = 'flex';
-/** Inline-flex display - inline flexbox container */
-const INLINE_FLEX = 'inlineFlex';
-/** Grid display - CSS grid container */
-const GRID = 'grid';
-/** Inline-grid display - inline grid container */
-const INLINE_GRID = 'inlineGrid';
-/** Contents display - element's box is removed, children display as if parent didn't exist */
-const CONTENTS = 'contents';
-/** Table display - behaves like table element */
-const TABLE = 'table';
-/** Table-cell display - behaves like td element */
-const TABLE_CELL = 'tableCell';
-/** Hidden display - element is not visible */
-const HIDDEN = 'hidden';
-/** All display property values */
-const DISPLAY_VALUES = [INLINE, BLOCK, INLINE_BLOCK, FLEX, INLINE_FLEX, GRID, INLINE_GRID, CONTENTS, TABLE, TABLE_CELL, HIDDEN];
-
-/** Horizontal flex direction (left to right) */
-const ROW = 'row';
-/** Vertical flex direction (top to bottom) */
-const COLUMN = 'column';
-/** Horizontal flex direction reversed (right to left) */
-const ROW_REVERSE = 'rowReverse';
-/** Vertical flex direction reversed (bottom to top) */
-const COLUMN_REVERSE = 'columnReverse';
-/** All flex direction property values */
-const FLEX_DIRECTION_VALUES = [ROW, COLUMN, ROW_REVERSE, COLUMN_REVERSE];
-
-/** Sans-serif font family - clean, modern typeface without serifs */
-const SANS = 'sans';
-/** Serif font family - traditional typeface with small decorative strokes */
-const SERIF = 'serif';
-/** Monospace font family - fixed-width typeface for code and data */
-const MONO = 'mono';
-/** All font family property values */
-const FONT_FAMILY_VALUES = [SANS, SERIF, MONO];
-
-/** Italic font style - slanted text styling */
-const ITALIC = 'italic';
-/** Normal font style - upright text styling (not italic) */
-const NOT_ITALIC = 'notItalic';
-/** All font style property values */
-const FONT_STYLE_VALUES = [ITALIC, NOT_ITALIC];
-
-/** Thin font weight - CSS font-weight: 100 */
-const THIN = 'thin';
-/** Extra light font weight - CSS font-weight: 200 */
-const EXTRALIGHT = 'extralight';
-/** Light font weight - CSS font-weight: 300 */
-const LIGHT = 'light';
-/** Normal font weight - CSS font-weight: 400 (default) */
-const NORMAL = 'normal';
-/** Medium font weight - CSS font-weight: 500 */
-const MEDIUM = 'medium';
-/** Semibold font weight - CSS font-weight: 600 */
-const SEMIBOLD = 'semibold';
-/** Bold font weight - CSS font-weight: 700 */
-const BOLD = 'bold';
-/** Extra bold font weight - CSS font-weight: 800 */
-const EXTRABOLD = 'extrabold';
-/** Black font weight - CSS font-weight: 900 (heaviest) */
-const BLACK = 'black';
-/** All font weight property values */
-const FONT_WEIGHT_VALUES = [THIN, EXTRALIGHT, LIGHT, NORMAL, MEDIUM, SEMIBOLD, BOLD, EXTRABOLD, BLACK];
-
-/** Enable spacing between flex/grid items - uses size-responsive gap values */
-const GAP = 'gap';
-/** Disable spacing between flex/grid items - no gap applied */
-const NO_GAP = 'noGap';
-/** All gap property values */
-const GAP_VALUES = [GAP, NO_GAP];
-
-/** Hide element on mobile devices and below (max-mobile: 20rem) */
-const MOBILE_HIDE = 'mobileHide';
-/** Hide element on tablet devices and below (max-tablet: 40rem) */
-const TABLET_HIDE = 'tabletHide';
-/** Hide element on laptop devices and below (max-laptop: 64rem) */
-const LAPTOP_HIDE = 'laptopHide';
-/** Hide element on desktop devices and below (max-desktop: 80rem) */
-const DESKTOP_HIDE = 'desktopHide';
-/** All hide property values */
-const HIDE_VALUES = [MOBILE_HIDE, TABLET_HIDE, LAPTOP_HIDE, DESKTOP_HIDE];
-
-/** Align items to the start of the cross axis */
-const ITEMS_START = 'itemsStart';
-/** Align items to the end of the cross axis */
-const ITEMS_END = 'itemsEnd';
-/** Center items along the cross axis */
-const ITEMS_CENTER = 'itemsCenter';
-/** Align items along their baseline */
-const ITEMS_BASELINE = 'itemsBaseline';
-/** Stretch items to fill the cross axis */
-const ITEMS_STRETCH = 'itemsStretch';
-/** All items property values */
-const ITEMS_VALUES = [ITEMS_START, ITEMS_END, ITEMS_CENTER, ITEMS_BASELINE, ITEMS_STRETCH];
-
-/** Pack items toward the start of the main axis */
-const JUSTIFY_START = 'justifyStart';
-/** Pack items toward the end of the main axis */
-const JUSTIFY_END = 'justifyEnd';
-/** Center items along the main axis */
-const JUSTIFY_CENTER = 'justifyCenter';
-/** Distribute items with space between them */
-const JUSTIFY_BETWEEN = 'justifyBetween';
-/** Distribute items with space around them */
-const JUSTIFY_AROUND = 'justifyAround';
-/** Distribute items with equal space around them */
-const JUSTIFY_EVENLY = 'justifyEvenly';
-/** Stretch items to fill the main axis */
-const JUSTIFY_STRETCH = 'justifyStretch';
-/** Align items along their baseline on main axis */
-const JUSTIFY_BASELINE = 'justifyBaseline';
-/** All justify property values */
-const JUSTIFY_VALUES = [JUSTIFY_START, JUSTIFY_END, JUSTIFY_CENTER, JUSTIFY_BETWEEN, JUSTIFY_AROUND, JUSTIFY_EVENLY, JUSTIFY_STRETCH, JUSTIFY_BASELINE];
-
-/** Disc bullet points - circular bullets for list items */
-const DISC = 'disc';
-/** Decimal numbers - numbered list items (1, 2, 3...) */
-const DECIMAL = 'decimal';
-/** All list style property values */
-const LIST_STYLE_VALUES = [DISC, DECIMAL];
-
-/** Auto overflow - show scrollbars if needed */
-const OVERFLOW_AUTO = 'overflowAuto';
-/** Hidden overflow - clip content without scrollbars */
-const OVERFLOW_HIDDEN = 'overflowHidden';
-/** Clip overflow - hard clip without scrollbars */
-const OVERFLOW_CLIP = 'overflowClip';
-/** Visible overflow - content extends beyond bounds */
-const OVERFLOW_VISIBLE = 'overflowVisible';
-/** Scroll overflow - always show scrollbars */
-const OVERFLOW_SCROLL = 'overflowScroll';
-/** Auto overflow on X-axis only */
-const OVERFLOW_X_AUTO = 'overflowXAuto';
-/** Auto overflow on Y-axis only */
-const OVERFLOW_Y_AUTO = 'overflowYAuto';
-/** Hidden overflow on X-axis only */
-const OVERFLOW_X_HIDDEN = 'overflowXHidden';
-/** Hidden overflow on Y-axis only */
-const OVERFLOW_Y_HIDDEN = 'overflowYHidden';
-/** Clip overflow on X-axis only */
-const OVERFLOW_X_CLIP = 'overflowXClip';
-/** Clip overflow on Y-axis only */
-const OVERFLOW_Y_CLIP = 'overflowYClip';
-/** Visible overflow on X-axis only */
-const OVERFLOW_X_VISIBLE = 'overflowXVisible';
-/** Visible overflow on Y-axis only */
-const OVERFLOW_Y_VISIBLE = 'overflowYVisible';
-/** Scroll overflow on X-axis only */
-const OVERFLOW_X_SCROLL = 'overflowXScroll';
-/** Scroll overflow on Y-axis only */
-const OVERFLOW_Y_SCROLL = 'overflowYScroll';
-/** All overflow property values */
-const OVERFLOW_VALUES = [
-    OVERFLOW_AUTO, OVERFLOW_HIDDEN, OVERFLOW_CLIP, OVERFLOW_VISIBLE, OVERFLOW_SCROLL,
-    OVERFLOW_X_AUTO, OVERFLOW_Y_AUTO, OVERFLOW_X_HIDDEN, OVERFLOW_Y_HIDDEN,
-    OVERFLOW_X_CLIP, OVERFLOW_Y_CLIP, OVERFLOW_X_VISIBLE, OVERFLOW_Y_VISIBLE,
-    OVERFLOW_X_SCROLL, OVERFLOW_Y_SCROLL
-];
-
-/** Enable internal padding - uses size-responsive padding values */
-const PADDING$1 = 'padding';
-/** Disable internal padding - no padding applied */
-const NO_PADDING = 'noPadding';
-/** All padding property values */
-const PADDING_VALUES = [PADDING$1, NO_PADDING];
-
-/** Relative positioning - offset from normal position */
-const RELATIVE = 'relative';
-/** Absolute positioning - removed from normal flow */
-const ABSOLUTE = 'absolute';
-/** Fixed positioning - positioned relative to viewport */
-const FIXED = 'fixed';
-/** Sticky positioning - toggles between relative and fixed */
-const STICKY = 'sticky';
-/** Static positioning - normal document flow (default) */
-const STATIC = 'static';
-/** All position property values */
-const POSITION_VALUES = [RELATIVE, ABSOLUTE, FIXED, STICKY, STATIC];
-
-/** Reverse flex direction - converts row to row-reverse or column to column-reverse */
-const REVERSE = 'reverse';
-/** All reverse property values */
-const REVERSE_VALUES = [REVERSE];
-
-/** Show ring - adds decorative ring/outline border around element */
-const RING = 'ring';
-/** Hide ring - removes ring/outline border styling */
-const NO_RING = 'noRing';
-/** All ring property values */
-const RING_VALUES = [RING, NO_RING];
-
-/** Enable drop shadow - adds size-responsive shadow styling */
-const SHADOW = 'shadow';
-/** Disable drop shadow - removes all shadow styling */
-const NO_SHADOW = 'noShadow';
-/** All shadow property values */
-const SHADOW_VALUES = [SHADOW, NO_SHADOW];
-
-/** Show focus-visible outline - adds visible focus indicator for keyboard navigation */
-const FOCUS_VISIBLE_OUTLINE = 'focusVisible';
-/** Hide focus-visible outline - removes focus-visible outline styling */
-const NO_FOCUS_VISIBLE_OUTLINE = 'noFocusVisible';
-/** All focusVisible property values */
-const FOCUS_VISIBLE_VALUES = [FOCUS_VISIBLE_OUTLINE, NO_FOCUS_VISIBLE_OUTLINE];
-
-/** Pill shape - fully rounded corners (rounded-full) */
-const PILL = 'pill';
-/** Sharp shape - no border radius (rounded-none) */
-const SHARP = 'sharp';
-/** Rounded shape - size-responsive border radius (varies by component size) */
-const ROUNDED = 'rounded';
-/** All shape property values */
-const SHAPE_VALUES = [PILL, SHARP, ROUNDED];
-
-/** Extra small size - affects padding, font-size, border-radius, and spacing */
-const XS = 'xs';
-/** Small size - affects padding, font-size, border-radius, and spacing */
-const SM = 'sm';
-/** Medium size (default) - affects padding, font-size, border-radius, and spacing */
-const MD = 'md';
-/** Large size - affects padding, font-size, border-radius, and spacing */
-const LG = 'lg';
-/** Extra large size - affects padding, font-size, border-radius, and spacing */
-const XL = 'xl';
-/** All size property values */
-const SIZE_VALUES = [XS, SM, MD, LG, XL];
-
-/** Left-aligned text */
-const TEXT_LEFT = 'textLeft';
-/** Center-aligned text */
-const TEXT_CENTER = 'textCenter';
-/** Right-aligned text */
-const TEXT_RIGHT = 'textRight';
-/** Justified text */
-const TEXT_JUSTIFY = 'textJustify';
-/** All text align property values */
-const TEXT_ALIGN_VALUES = [TEXT_LEFT, TEXT_CENTER, TEXT_RIGHT, TEXT_JUSTIFY];
-
-/** Add underline decoration below text */
-const UNDERLINE = 'underline';
-/** Add strikethrough/line-through decoration across text */
-const LINE_THROUGH = 'lineThrough';
-/** Remove text decoration (no underline, strikethrough, etc.) */
-const NO_UNDERLINE = 'noUnderline';
-/** Add overline decoration above text */
-const OVERLINE = 'overline';
-/** All text decoration property values */
-const TEXT_DECORATION_VALUES = [UNDERLINE, LINE_THROUGH, NO_UNDERLINE, OVERLINE];
-
-/** Transform text to UPPERCASE */
-const UPPERCASE = 'uppercase';
-/** Transform text to lowercase */
-const LOWERCASE = 'lowercase';
-/** Transform text to Capitalize Each Word */
-const CAPITALIZE = 'capitalize';
-/** Normal case - no transformation */
-const NORMAL_CASE = 'normalCase';
-/** All text transform property values */
-const TEXT_TRANSFORM_VALUES = [UPPERCASE, LOWERCASE, CAPITALIZE, NORMAL_CASE];
-
-/** Make background transparent for layout/UI components or text transparent for typography components */
-const TRANSPARENT = 'transparent';
-/** All transparent property values */
-const TRANSPARENT_VALUES = [TRANSPARENT];
-
-/** Filled variant - solid background with contrasting text color */
-const FILLED = 'filled';
-/** Outline variant - transparent background with border and colored text (default) */
-const OUTLINE = 'outline';
-/** All variant property values */
-const VARIANT_VALUES = [FILLED, OUTLINE];
-
-/** Allow flex items to wrap to new lines when container is too narrow */
-const FLEX_WRAP = 'flexWrap';
-/** Force flex items to stay on single line (may overflow) */
-const FLEX_NO_WRAP = 'flexNoWrap';
-/** Wrap flex items in reverse order (last items wrap first) */
-const FLEX_WRAP_REVERSE = 'flexWrapReverse';
-/** All wrap property values */
-const WRAP_VALUES = [FLEX_WRAP, FLEX_NO_WRAP, FLEX_WRAP_REVERSE];
-
 /** Base state - default resting appearance */
 const BASE = 'base';
 /** Hover state - appearance when cursor hovers over element */
@@ -418,62 +73,69 @@ const APPEARANCE_CATEGORY = ['text', 'border', 'ring', 'shadow', 'bg', 'accent',
 /** Component property keys mapping categories to their available values */
 const ComponentKeys = {
     /** Color appearance options */
-    appearance: APPEARANCE_VALUES,
+    appearance: ['default', 'accent', 'primary', 'secondary', 'tertiary', 'success', 'danger', 'warning', 'info', 'link'],
     /** Border visibility: includes all border variations and noBorder (border, borderT, borderB, etc., noBorder) */
-    border: BORDER_VALUES,
+    border: ['border', 'borderT', 'borderB', 'borderL', 'borderR', 'borderX', 'borderY', 'noBorder'],
     /** Column breakpoints for responsive grid layouts */
-    breakpoint: BREAKPOINT_VALUES,
+    breakpoint: ['mobileCol', 'tabletCol', 'laptopCol', 'desktopCol'],
     /** CSS display property values for element layout behavior */
-    display: DISPLAY_VALUES,
+    display: ['inline', 'block', 'inlineBlock', 'flex', 'inlineFlex', 'grid', 'inlineGrid', 'contents', 'table', 'tableCell', 'hidden'],
     /** Flex direction: row (horizontal), column (vertical), or reversed variants */
-    flexDirection: FLEX_DIRECTION_VALUES,
+    flexDirection: ['row', 'column', 'rowReverse', 'columnReverse'],
     /** Font family types: sans-serif, serif, or monospace */
-    fontFamily: FONT_FAMILY_VALUES,
+    fontFamily: ['sans', 'serif', 'mono'],
     /** Font style: italic or notItalic (normal) */
-    fontStyle: FONT_STYLE_VALUES,
+    fontStyle: ['italic', 'notItalic'],
     /** Font weight from thin (100) to black (900) */
-    fontWeight: FONT_WEIGHT_VALUES,
+    fontWeight: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
     /** Spacing between flex/grid items: gap (enabled) or noGap (disabled) */
-    gap: GAP_VALUES,
+    gap: ['gap', 'noGap'],
     /** Hide elements at specific breakpoint sizes */
-    hide: HIDE_VALUES,
+    hide: ['mobileHide', 'tabletHide', 'laptopHide', 'desktopHide'],
     /** Cross-axis alignment for flex items (align-items) */
-    items: ITEMS_VALUES,
+    items: ['itemsStart', 'itemsEnd', 'itemsCenter', 'itemsBaseline', 'itemsStretch'],
     /** Main-axis alignment for flex items (justify-content) */
-    justify: JUSTIFY_VALUES,
+    justify: ['justifyStart', 'justifyEnd', 'justifyCenter', 'justifyBetween', 'justifyAround', 'justifyEvenly', 'justifyStretch', 'justifyBaseline'],
     /** List bullet/numbering style: disc (bullets) or decimal (numbers) */
-    listStyle: LIST_STYLE_VALUES,
+    listStyle: ['disc', 'decimal'],
     /** Overflow behavior for content that exceeds container bounds */
-    overflow: OVERFLOW_VALUES,
+    overflow: [
+        'overflowAuto', 'overflowHidden', 'overflowClip', 'overflowVisible', 'overflowScroll',
+        'overflowXAuto', 'overflowYAuto', 'overflowXHidden', 'overflowYHidden',
+        'overflowXClip', 'overflowYClip', 'overflowXVisible', 'overflowYVisible',
+        'overflowXScroll', 'overflowYScroll'
+    ],
     /** Internal spacing: padding (enabled) or noPadding (disabled) */
-    padding: PADDING_VALUES,
+    padding: ['padding', 'noPadding'],
     /** CSS positioning: relative, absolute, fixed, sticky, static */
-    position: POSITION_VALUES,
+    position: ['relative', 'absolute', 'fixed', 'sticky', 'static'],
     /** Reverse the order of flex items */
-    reverse: REVERSE_VALUES,
+    reverse: ['reverse'],
     /** Focus ring visibility: ring (show) or noRing (hide) */
-    ring: RING_VALUES,
+    ring: ['ring', 'noRing'],
     /** Drop shadow visibility: shadow (enabled) or noShadow (disabled) */
-    shadow: SHADOW_VALUES,
+    shadow: ['shadow', 'noShadow'],
     /** Focus-visible outline visibility: focusVisible (show) or noFocusVisible (hide) */
-    focusVisible: FOCUS_VISIBLE_VALUES,
+    focusVisible: ['focusVisible', 'noFocusVisible'],
     /** Border radius shape: pill (fully rounded), sharp (no radius), rounded (medium radius) */
-    shape: SHAPE_VALUES,
+    shape: ['pill', 'sharp', 'rounded'],
     /** Size scale from extra-small to extra-large */
-    size: SIZE_VALUES,
+    size: ['xs', 'sm', 'md', 'lg', 'xl'],
     /** Text alignment: left, center, right, justify */
-    textAlign: TEXT_ALIGN_VALUES,
+    textAlign: ['textLeft', 'textCenter', 'textRight', 'textJustify'],
     /** Text decoration: underline, strikethrough (lineThrough), none (noUnderline), overline */
-    textDecoration: TEXT_DECORATION_VALUES,
+    textDecoration: ['underline', 'lineThrough', 'noUnderline', 'overline'],
     /** Text case transformation: UPPERCASE, lowercase, Capitalize, normalCase */
-    textTransform: TEXT_TRANSFORM_VALUES,
+    textTransform: ['uppercase', 'lowercase', 'capitalize', 'normalCase'],
     /** Make background (layout/UI) or text (typography) transparent */
-    transparent: TRANSPARENT_VALUES,
+    transparent: ['transparent'],
     /** Style variant: filled (solid background) or outline (border only) */
-    variant: VARIANT_VALUES,
+    variant: ['filled', 'outline'],
     /** Flex item wrapping behavior: wrap, no-wrap, or wrap-reverse */
-    wrap: WRAP_VALUES,
+    wrap: ['flexWrap', 'flexNoWrap', 'flexWrapReverse'],
 };
+/** All border side keys (excluding noBorder since it doesn't have a CSS class) */
+const BORDER_KEYS = ['border', 'borderT', 'borderB', 'borderL', 'borderR', 'borderX', 'borderY'];
 /** Composite categories built from core blocks */
 /** Complete layout category including core and flex properties */
 const LAYOUT_FULL = [...LAYOUT_CORE, ...LAYOUT_FLEX];
@@ -4047,11 +3709,11 @@ class AppearanceTheme extends BaseTheme {
         var _a;
         if (this.category === 'border') {
             // If noBorder is selected from the border category, don't apply appearance colors
-            if (extractedKeys.border === NO_BORDER) {
+            if (extractedKeys.border === 'noBorder') {
                 return [];
             }
             // Only apply appearance colors if any border prop is set (and not noBorder)
-            const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== NO_BORDER;
+            const hasBorderProps = extractedKeys.border !== undefined && extractedKeys.border !== 'noBorder';
             // If no border props are set, don't apply appearance colors
             if (!hasBorderProps) {
                 return [];
@@ -5747,385 +5409,11 @@ const ThemedComponent = forwardRef(function ThemedComponent(allProps, ref) {
     return (jsx(Tag, { ref: ref, className: finalClasses, ...finalProps, children: props.children }));
 });
 
-/**
- * Button - A clickable button element with customizable appearance and behavior
- *
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- *
- * // With size, appearance, and variant
- * <Button lg primary filled>Submit</Button>
- *
- * // Outlined button
- * <Button outlined secondary>Cancel</Button>
- *
- * // As a link
- * <Button href="/about">Learn More</Button>
- * ```
- *
- * @param props - Button props
- * @param props.children - Button content
- * @param props.className - Additional CSS classes to merge with theme classes
- *
-
- * SIZE PROPS:
- * @param props.xs - Extra small size
- * @param props.sm - Small size
- * @param props.md - Medium size (default)
- * @param props.lg - Large size
- * @param props.xl - Extra large size
- *
-
- * ALIGNMENT PROPS (Cross-axis):
- * @param props.itemsStart - Align items to start (top/left)
- * @param props.itemsEnd - Align items to end (bottom/right)
- * @param props.itemsCenter - Align items to center
- * @param props.itemsBaseline - Align items to baseline
- * @param props.itemsStretch - Stretch items to fill container
- *
-
- * ALIGNMENT PROPS (Main-axis):
- * @param props.justifyStart - Justify content to start
- * @param props.justifyEnd - Justify content to end
- * @param props.justifyCenter - Justify content to center
- * @param props.justifyBetween - Space between items
- * @param props.justifyAround - Space around items
- * @param props.justifyEvenly - Space evenly between items
- *
-
- * POSITION PROPS:
- * @param props.relative - Relative positioning
- * @param props.absolute - Absolute positioning
- * @param props.fixed - Fixed positioning
- * @param props.sticky - Sticky positioning
- * @param props.static - Static positioning
- *
-
- * DISPLAY PROPS:
- * @param props.flex - Display as flex container
- * @param props.block - Display as block
- * @param props.inline - Display as inline
- * @param props.inlineBlock - Display as inline-block
- * @param props.inlineFlex - Display as inline-flex
- * @param props.grid - Display as grid
- * @param props.inlineGrid - Display as inline-grid
- * @param props.contents - Display as contents
- * @param props.hidden - Hide element (display: none)
- *
-
- * OVERFLOW PROPS:
- * @param props.overflowAuto - Auto overflow on both axes
- * @param props.overflowHidden - Hidden overflow on both axes
- * @param props.overflowVisible - Visible overflow on both axes
- * @param props.overflowScroll - Scrollable overflow on both axes
- * @param props.overflowXAuto - Auto overflow on X axis
- * @param props.overflowYAuto - Auto overflow on Y axis
- * @param props.overflowXHidden - Hidden overflow on X axis
- * @param props.overflowYHidden - Hidden overflow on Y axis
- *
-
- * FLEXBOX PROPS:
- * @param props.wrap - Enable flex wrap
- * @param props.reverse - Reverse the order of children
- *
-
- * LAYOUT PROPS:
- * @param props.gap - Enable gap spacing between children
- * @param props.noGap - Disable gap spacing
- * @param props.padding - Enable internal padding
- * @param props.noPadding - Disable internal padding
- *
-
- * FLEXBOX DIRECTION PROPS:
- * @param props.row - Flex direction row (horizontal)
- * @param props.column - Flex direction column (vertical)
- * @param props.rowReverse - Flex direction row-reverse
- * @param props.columnReverse - Flex direction column-reverse
- *
-
- * APPEARANCE PROPS:
- * @param props.default - Default color appearance
- * @param props.primary - Primary color appearance (blue)
- * @param props.secondary - Secondary color appearance (gray)
- * @param props.tertiary - Tertiary color appearance
- * @param props.accent - Accent color appearance (rose)
- * @param props.success - Success color appearance (green)
- * @param props.danger - Danger color appearance (red)
- * @param props.warning - Warning color appearance (amber)
- * @param props.info - Info color appearance (cyan)
- * @param props.link - Link color appearance
- *
-
- * BORDER PROPS:
- * @param props.border - Enable border on all sides
- * @param props.borderT - Enable border on top
- * @param props.borderB - Enable border on bottom
- * @param props.borderL - Enable border on left
- * @param props.borderR - Enable border on right
- * @param props.borderX - Enable border on left and right
- * @param props.borderY - Enable border on top and bottom
- * @param props.noBorder - Disable all borders
- *
-
- * VISUAL DECORATION PROPS:
- * @param props.shadow - Enable drop shadow
- * @param props.noShadow - Disable drop shadow
- * @param props.ring - Enable focus ring
- * @param props.noRing - Disable focus ring
- * @param props.focusVisible - Enable focus-visible outline
- * @param props.noFocusVisible - Disable focus-visible outline
- *
-
- * SHAPE PROPS:
- * @param props.rounded - Medium rounded corners (default)
- * @param props.pill - Fully rounded corners (circular)
- * @param props.sharp - No rounded corners (square)
- *
-
- * FONT WEIGHT PROPS:
- * @param props.thin - Thin font weight (100)
- * @param props.extralight - Extra light font weight (200)
- * @param props.light - Light font weight (300)
- * @param props.normal - Normal font weight (400)
- * @param props.medium - Medium font weight (500)
- * @param props.semibold - Semibold font weight (600)
- * @param props.bold - Bold font weight (700)
- * @param props.extrabold - Extra bold font weight (800)
- * @param props.black - Black font weight (900)
- *
-
- * FONT STYLE PROPS:
- * @param props.italic - Italic font style
- * @param props.notItalic - Not italic (normal) font style
- *
-
- * TEXT DECORATION PROPS:
- * @param props.underline - Underline text decoration
- * @param props.lineThrough - Line-through text decoration
- * @param props.noUnderline - No text decoration
- *
-
- * TEXT TRANSFORM PROPS:
- * @param props.uppercase - Transform text to uppercase
- * @param props.lowercase - Transform text to lowercase
- * @param props.capitalize - Capitalize first letter of each word
- * @param props.normalCase - Normal text case (no transformation)
- *
-
- * FONT FAMILY PROPS:
- * @param props.sans - Sans-serif font family (default)
- * @param props.serif - Serif font family
- * @param props.mono - Monospace font family
- *
-
- * TEXT ALIGNMENT PROPS:
- * @param props.textLeft - Align text to left
- * @param props.textCenter - Align text to center
- * @param props.textRight - Align text to right
- * @param props.textJustify - Justify text
- *
-
- * VARIANT PROPS:
- * @param props.filled - Filled variant with solid background
- * @param props.outlined - Outlined variant with border only
- * @param props.ghost - Ghost variant with minimal styling
- *
- * @see {@link ButtonProps} for the complete type definition
- */
 const Button = forwardRef(function Button(props, ref) {
     const theme = useTheme();
     return jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
 });
 
-/**
- * Badge - A small label for status, categories, counts, or notifications
- *
- * @example
- * ```tsx
- * // Basic badge
- * <Badge>New</Badge>
- *
- * // Status badge with appearance and variant
- * <Badge success filled pill>Active</Badge>
- *
- * // Count badge
- * <Badge danger filled>3</Badge>
- *
- * // As a link
- * <Badge href="/notifications" primary outlined>5 New</Badge>
- * ```
- *
- * @param props - Badge props
- * @param props.children - Badge content
- * @param props.className - Additional CSS classes to merge with theme classes
- *
-
- * SIZE PROPS:
- * @param props.xs - Extra small size
- * @param props.sm - Small size
- * @param props.md - Medium size (default)
- * @param props.lg - Large size
- * @param props.xl - Extra large size
- *
-
- * ALIGNMENT PROPS (Cross-axis):
- * @param props.itemsStart - Align items to start (top/left)
- * @param props.itemsEnd - Align items to end (bottom/right)
- * @param props.itemsCenter - Align items to center
- * @param props.itemsBaseline - Align items to baseline
- * @param props.itemsStretch - Stretch items to fill container
- *
-
- * ALIGNMENT PROPS (Main-axis):
- * @param props.justifyStart - Justify content to start
- * @param props.justifyEnd - Justify content to end
- * @param props.justifyCenter - Justify content to center
- * @param props.justifyBetween - Space between items
- * @param props.justifyAround - Space around items
- * @param props.justifyEvenly - Space evenly between items
- *
-
- * POSITION PROPS:
- * @param props.relative - Relative positioning
- * @param props.absolute - Absolute positioning
- * @param props.fixed - Fixed positioning
- * @param props.sticky - Sticky positioning
- * @param props.static - Static positioning
- *
-
- * DISPLAY PROPS:
- * @param props.flex - Display as flex container
- * @param props.block - Display as block
- * @param props.inline - Display as inline
- * @param props.inlineBlock - Display as inline-block
- * @param props.inlineFlex - Display as inline-flex
- * @param props.grid - Display as grid
- * @param props.inlineGrid - Display as inline-grid
- * @param props.contents - Display as contents
- * @param props.hidden - Hide element (display: none)
- *
-
- * OVERFLOW PROPS:
- * @param props.overflowAuto - Auto overflow on both axes
- * @param props.overflowHidden - Hidden overflow on both axes
- * @param props.overflowVisible - Visible overflow on both axes
- * @param props.overflowScroll - Scrollable overflow on both axes
- * @param props.overflowXAuto - Auto overflow on X axis
- * @param props.overflowYAuto - Auto overflow on Y axis
- * @param props.overflowXHidden - Hidden overflow on X axis
- * @param props.overflowYHidden - Hidden overflow on Y axis
- *
-
- * FLEXBOX PROPS:
- * @param props.wrap - Enable flex wrap
- * @param props.reverse - Reverse the order of children
- *
-
- * LAYOUT PROPS:
- * @param props.gap - Enable gap spacing between children
- * @param props.noGap - Disable gap spacing
- * @param props.padding - Enable internal padding
- * @param props.noPadding - Disable internal padding
- *
-
- * FLEXBOX DIRECTION PROPS:
- * @param props.row - Flex direction row (horizontal)
- * @param props.column - Flex direction column (vertical)
- * @param props.rowReverse - Flex direction row-reverse
- * @param props.columnReverse - Flex direction column-reverse
- *
-
- * APPEARANCE PROPS:
- * @param props.default - Default color appearance
- * @param props.primary - Primary color appearance (blue)
- * @param props.secondary - Secondary color appearance (gray)
- * @param props.tertiary - Tertiary color appearance
- * @param props.accent - Accent color appearance (rose)
- * @param props.success - Success color appearance (green)
- * @param props.danger - Danger color appearance (red)
- * @param props.warning - Warning color appearance (amber)
- * @param props.info - Info color appearance (cyan)
- * @param props.link - Link color appearance
- *
-
- * BORDER PROPS:
- * @param props.border - Enable border on all sides
- * @param props.borderT - Enable border on top
- * @param props.borderB - Enable border on bottom
- * @param props.borderL - Enable border on left
- * @param props.borderR - Enable border on right
- * @param props.borderX - Enable border on left and right
- * @param props.borderY - Enable border on top and bottom
- * @param props.noBorder - Disable all borders
- *
-
- * VISUAL DECORATION PROPS:
- * @param props.shadow - Enable drop shadow
- * @param props.noShadow - Disable drop shadow
- * @param props.ring - Enable focus ring
- * @param props.noRing - Disable focus ring
- * @param props.focusVisible - Enable focus-visible outline
- * @param props.noFocusVisible - Disable focus-visible outline
- *
-
- * SHAPE PROPS:
- * @param props.rounded - Medium rounded corners (default)
- * @param props.pill - Fully rounded corners (circular)
- * @param props.sharp - No rounded corners (square)
- *
-
- * FONT WEIGHT PROPS:
- * @param props.thin - Thin font weight (100)
- * @param props.extralight - Extra light font weight (200)
- * @param props.light - Light font weight (300)
- * @param props.normal - Normal font weight (400)
- * @param props.medium - Medium font weight (500)
- * @param props.semibold - Semibold font weight (600)
- * @param props.bold - Bold font weight (700)
- * @param props.extrabold - Extra bold font weight (800)
- * @param props.black - Black font weight (900)
- *
-
- * FONT STYLE PROPS:
- * @param props.italic - Italic font style
- * @param props.notItalic - Not italic (normal) font style
- *
-
- * TEXT DECORATION PROPS:
- * @param props.underline - Underline text decoration
- * @param props.lineThrough - Line-through text decoration
- * @param props.noUnderline - No text decoration
- *
-
- * TEXT TRANSFORM PROPS:
- * @param props.uppercase - Transform text to uppercase
- * @param props.lowercase - Transform text to lowercase
- * @param props.capitalize - Capitalize first letter of each word
- * @param props.normalCase - Normal text case (no transformation)
- *
-
- * FONT FAMILY PROPS:
- * @param props.sans - Sans-serif font family (default)
- * @param props.serif - Serif font family
- * @param props.mono - Monospace font family
- *
-
- * TEXT ALIGNMENT PROPS:
- * @param props.textLeft - Align text to left
- * @param props.textCenter - Align text to center
- * @param props.textRight - Align text to right
- * @param props.textJustify - Justify text
- *
-
- * VARIANT PROPS:
- * @param props.filled - Filled variant with solid background
- * @param props.outlined - Outlined variant with border only
- * @param props.ghost - Ghost variant with minimal styling
- *
- * @see {@link BadgeProps} for the complete type definition
- */
 const Badge = forwardRef(function Badge(props, ref) {
     const theme = useTheme();
     return jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
@@ -6275,5 +5563,5 @@ const List = forwardRef(function List(props, ref) {
     return jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
 
-export { ABSOLUTE, ACCENT, ACTIVE, APPEARANCE_CATEGORY, APPEARANCE_VALUES, BADGE_CATEGORIES, BASE, BLACK, BLOCK, BOLD, BORDER, BORDER_B, BORDER_KEYS, BORDER_L, BORDER_R, BORDER_T, BORDER_VALUES, BORDER_X, BORDER_Y, BREAKPOINT, BREAKPOINT_VALUES, BUTTON_CATEGORIES, Badge, Button, CAPITALIZE, CARD_CATEGORIES, CHECKBOX_CATEGORIES, CHIP_CATEGORIES, CODE_CATEGORIES, COLUMN, COLUMN_REVERSE, COL_CATEGORIES, COMPONENT, COMPONENT_PROPS_CATEGORY, CONTAINER_CATEGORIES, CONTENTS, Card, Checkbox, Chip, Code, Col, ComponentCategories, ComponentKeys, Container, DANGER, DECIMAL, DEFAULT, DESKTOP_COL, DESKTOP_HIDE, DISC, DISPLAY_VALUES, DIVIDER_CATEGORIES, Divider, EXTRABOLD, EXTRALIGHT, FILLED, FIXED, FLEX, FLEX_DIRECTION_VALUES, FLEX_NO_WRAP, FLEX_WRAP, FLEX_WRAP_REVERSE, FOCUS, FOCUS_VISIBLE, FOCUS_VISIBLE_OUTLINE, FOCUS_VISIBLE_VALUES, FONT_FAMILY_VALUES, FONT_STYLE_VALUES, FONT_WEIGHT_VALUES, GAP, GAP_VALUES, GRID, GRID_CATEGORIES, Grid2, Grid3, Grid4, Grid5, Grid6, HIDDEN, HIDE_VALUES, HOVER, IMG_CATEGORIES, INFO, INLINE, INLINE_BLOCK, INLINE_FLEX, INLINE_GRID, INPUT_CATEGORIES, INTERACTIVE_CATEGORIES, ITALIC, ITEMS_BASELINE, ITEMS_CENTER, ITEMS_END, ITEMS_START, ITEMS_STRETCH, ITEMS_VALUES, Img, Input, JUSTIFY_AROUND, JUSTIFY_BASELINE, JUSTIFY_BETWEEN, JUSTIFY_CENTER, JUSTIFY_END, JUSTIFY_EVENLY, JUSTIFY_START, JUSTIFY_STRETCH, JUSTIFY_VALUES, LABEL_CATEGORIES, LAPTOP_COL, LAPTOP_HIDE, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LG, LIGHT, LINE_THROUGH, LINK, LIST_CATEGORIES, LIST_STYLE, LIST_STYLE_VALUES, LOWERCASE, Label, Link, List, ListItem, MD, MEDIUM, MOBILE_COL, MOBILE_HIDE, MODE_VALUES, MONO, ModeKeys, NORMAL, NORMAL_CASE, NOT_ITALIC, NO_BORDER, NO_FOCUS_VISIBLE_OUTLINE, NO_GAP, NO_PADDING, NO_RING, NO_SHADOW, NO_UNDERLINE, OUTLINE, OVERFLOW_AUTO, OVERFLOW_CLIP, OVERFLOW_HIDDEN, OVERFLOW_SCROLL, OVERFLOW_VALUES, OVERFLOW_VISIBLE, OVERFLOW_X_AUTO, OVERFLOW_X_CLIP, OVERFLOW_X_HIDDEN, OVERFLOW_X_SCROLL, OVERFLOW_X_VISIBLE, OVERFLOW_Y_AUTO, OVERFLOW_Y_CLIP, OVERFLOW_Y_HIDDEN, OVERFLOW_Y_SCROLL, OVERFLOW_Y_VISIBLE, OVERLINE, PADDING, PADDING_VALUES, PILL, POSITION_VALUES, PRIMARY, PageTitle, RELATIVE, REVERSE, REVERSE_VALUES, RING, RING_VALUES, ROUNDED, ROW, ROW_CATEGORIES, ROW_REVERSE, Row, SANS, SECONDARY, SECTION_CATEGORIES, SEMIBOLD, SERIF, SHADOW, SHADOW_VALUES, SHAPE, SHAPE_VALUES, SHARP, SIZE_VALUES, SM, STACK_CATEGORIES, STATIC, STICKY, SUCCESS, Section, SectionTitle, Stack, TABLE, TABLET_COL, TABLET_HIDE, TABLE_CELL, TERTIARY, TEXT_ALIGN_VALUES, TEXT_CENTER, TEXT_DECORATION_VALUES, TEXT_JUSTIFY, TEXT_LEFT, TEXT_RIGHT, TEXT_TRANSFORM_VALUES, THIN, TRANSPARENT, TRANSPARENT_VALUES, TYPOGRAPHY_CATEGORIES, TYPOGRAPHY_FULL, TYPOGRAPHY_STYLE, Text, ThemeProvider, Title, UNDERLINE, UPPERCASE, VARIANT, VARIANT_VALUES, VISUAL_CORE, VISUAL_DECORATION, VISUAL_DECORATION_LAYOUT, VISUAL_FULL, VISUAL_LAYOUT, WARNING, WRAP_VALUES, XL, XS, defaultTheme, 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, 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, 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, themeDefaults, useTheme };
 //# sourceMappingURL=index.esm.js.map