@vaneui/ui 0.3.1-alpha.20250914202143.38eda80 → 0.3.1-alpha.20250916140129.7475230

package/dist/index.js

@@ -52,24 +52,8 @@ const BORDER_Y = 'borderY';
 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 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';
@@ -584,10 +568,15 @@ const ComponentCategories = {
 class HideTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Hide element on extra-small screens and below */
         this.xsHide = "max-xs:hidden";
+        /** Hide element on small screens and below */
         this.smHide = "max-sm:hidden";
+        /** Hide element on medium screens and below */
         this.mdHide = "max-md:hidden";
+        /** Hide element on large screens and below */
         this.lgHide = "max-lg:hidden";
+        /** Hide element on extra-large screens and below */
         this.xlHide = "max-xl:hidden";
     }
     getClasses(extractedKeys) {
@@ -598,10 +587,15 @@ class HideTheme extends BaseTheme {
 class ItemsTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Align flex items to the start of the cross axis */
         this.itemsStart = "items-start";
+        /** Align flex items to the end of the cross axis */
         this.itemsEnd = "items-end";
+        /** Center flex items along the cross axis */
         this.itemsCenter = "items-center";
+        /** Align flex items along their baseline */
         this.itemsBaseline = "items-baseline";
+        /** Stretch flex items to fill the cross axis */
         this.itemsStretch = "items-stretch";
     }
     getClasses(extractedKeys) {
@@ -612,13 +606,21 @@ class ItemsTheme extends BaseTheme {
 class JustifyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Pack flex items toward the start of the main axis */
         this.justifyStart = "justify-start";
+        /** Pack flex items toward the end of the main axis */
         this.justifyEnd = "justify-end";
+        /** Pack flex items around the center of the main axis */
         this.justifyCenter = "justify-center";
+        /** Distribute flex items with equal space between them */
         this.justifyBetween = "justify-between";
+        /** Distribute flex items with equal space around them */
         this.justifyAround = "justify-around";
+        /** Distribute flex items with equal space around them, including edges */
         this.justifyEvenly = "justify-evenly";
+        /** Stretch flex items to fill the main axis */
         this.justifyStretch = "justify-stretch";
+        /** Align flex items along their baseline on the main axis */
         this.justifyBaseline = "justify-baseline";
     }
     getClasses(extractedKeys) {
@@ -629,10 +631,15 @@ class JustifyTheme extends BaseTheme {
 class PositionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Relative positioning - positioned relative to its normal position */
         this.relative = "relative";
+        /** Absolute positioning - positioned relative to its closest positioned ancestor */
         this.absolute = "absolute";
+        /** Fixed positioning - positioned relative to the viewport */
         this.fixed = "fixed";
+        /** Sticky positioning - toggles between relative and fixed based on scroll position */
         this.sticky = "sticky";
+        /** Static positioning - default positioning, not affected by top/left/right/bottom */
         this.static = "static";
     }
     getClasses(extractedKeys) {
@@ -643,7 +650,9 @@ class PositionTheme extends BaseTheme {
 class FontStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Italic font style - slanted text */
         this.italic = "italic";
+        /** Normal font style - upright text (not italic) */
         this.notItalic = "not-italic";
     }
     getClasses(extractedKeys) {
@@ -654,8 +663,11 @@ class FontStyleTheme extends BaseTheme {
 class FontFamilyTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Sans-serif font family - clean, modern fonts without serifs */
         this.sans = "font-sans";
+        /** Serif font family - traditional fonts with serifs */
         this.serif = "font-serif";
+        /** Monospace font family - fixed-width fonts for code and data */
         this.mono = "font-mono";
     }
     getClasses(extractedKeys) {
@@ -666,14 +678,23 @@ class FontFamilyTheme extends BaseTheme {
 class FontWeightTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Thin font weight (100) - lightest weight */
         this.thin = "font-thin";
+        /** Extra-light font weight (200) - very light */
         this.extralight = "font-extralight";
+        /** Light font weight (300) - lighter than normal */
         this.light = "font-light";
+        /** Normal font weight (400) - default font weight */
         this.normal = "font-normal";
+        /** Medium font weight (500) - slightly bold */
         this.medium = "font-medium";
+        /** Semi-bold font weight (600) - moderately bold */
         this.semibold = "font-semibold";
+        /** Bold font weight (700) - standard bold */
         this.bold = "font-bold";
+        /** Extra-bold font weight (800) - very bold */
         this.extrabold = "font-extrabold";
+        /** Black font weight (900) - heaviest weight */
         this.black = "font-black";
     }
     getClasses(extractedKeys) {
@@ -684,9 +705,13 @@ class FontWeightTheme extends BaseTheme {
 class TextDecorationTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Underline text decoration - line below text */
         this.underline = "underline";
+        /** Line-through text decoration - strikethrough */
         this.lineThrough = "line-through";
+        /** Remove underline text decoration */
         this.noUnderline = "no-underline";
+        /** Overline text decoration - line above text */
         this.overline = "overline";
     }
     getClasses(extractedKeys) {
@@ -697,9 +722,13 @@ class TextDecorationTheme extends BaseTheme {
 class TextTransformTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Transform text to UPPERCASE */
         this.uppercase = "uppercase";
+        /** Transform text to lowercase */
         this.lowercase = "lowercase";
+        /** Capitalize First Letter Of Each Word */
         this.capitalize = "capitalize";
+        /** Normal case - no text transformation */
         this.normalCase = "normal-case";
     }
     getClasses(extractedKeys) {
@@ -710,9 +739,13 @@ class TextTransformTheme extends BaseTheme {
 class TextAlignTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Left-align text */
         this.textLeft = "text-left";
+        /** Center-align text */
         this.textCenter = "text-center";
+        /** Right-align text */
         this.textRight = "text-right";
+        /** Justify text - stretch lines to fill width */
         this.textJustify = "text-justify";
     }
     getClasses(extractedKeys) {
@@ -723,16 +756,27 @@ class TextAlignTheme extends BaseTheme {
 class DisplayTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Inline display - element flows with text */
         this.inline = "inline";
+        /** Block display - element takes full width */
         this.block = "block";
+        /** Inline-block display - element flows with text but can have width/height */
         this.inlineBlock = "inline-block";
+        /** Flex display - creates a flex container */
         this.flex = "flex";
+        /** Inline-flex display - creates an inline flex container */
         this.inlineFlex = "inline-flex";
+        /** Grid display - creates a grid container */
         this.grid = "grid";
+        /** Inline-grid display - creates an inline grid container */
         this.inlineGrid = "inline-grid";
+        /** Contents display - element's children behave as if they are direct children of the parent */
         this.contents = "contents";
+        /** Table display - element behaves like a table */
         this.table = "table";
+        /** Table-cell display - element behaves like a table cell */
         this.tableCell = "table-cell";
+        /** Hidden display - element is completely removed from layout */
         this.hidden = "hidden";
     }
     getClasses(extractedKeys) {
@@ -3454,20 +3498,35 @@ const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
 class OverflowTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Auto overflow - adds scrollbars when content overflows */
         this.overflowAuto = 'overflow-auto';
+        /** Hidden overflow - clips content that overflows */
         this.overflowHidden = 'overflow-hidden';
+        /** Clip overflow - clips content without scrollbars */
         this.overflowClip = 'overflow-clip';
+        /** Visible overflow - content overflows and remains visible */
         this.overflowVisible = 'overflow-visible';
+        /** Scroll overflow - always shows scrollbars */
         this.overflowScroll = 'overflow-scroll';
+        /** Auto horizontal overflow - adds horizontal scrollbar when needed */
         this.overflowXAuto = 'overflow-x-auto';
+        /** Auto vertical overflow - adds vertical scrollbar when needed */
         this.overflowYAuto = 'overflow-y-auto';
+        /** Hidden horizontal overflow - clips content horizontally */
         this.overflowXHidden = 'overflow-x-hidden';
+        /** Hidden vertical overflow - clips content vertically */
         this.overflowYHidden = 'overflow-y-hidden';
+        /** Clip horizontal overflow - clips content horizontally without scrollbars */
         this.overflowXClip = 'overflow-x-clip';
+        /** Clip vertical overflow - clips content vertically without scrollbars */
         this.overflowYClip = 'overflow-y-clip';
+        /** Visible horizontal overflow - content overflows horizontally and remains visible */
         this.overflowXVisible = 'overflow-x-visible';
+        /** Visible vertical overflow - content overflows vertically and remains visible */
         this.overflowYVisible = 'overflow-y-visible';
+        /** Scroll horizontal overflow - always shows horizontal scrollbar */
         this.overflowXScroll = 'overflow-x-scroll';
+        /** Scroll vertical overflow - always shows vertical scrollbar */
         this.overflowYScroll = 'overflow-y-scroll';
     }
     getClasses(extractedKeys) {
@@ -3597,10 +3656,15 @@ class ComponentTheme {
 class SizeTheme extends BaseTheme {
     constructor(sizeMap, useDefaultKey = true) {
         super();
+        /** Extra-small size variant */
         this.xs = "";
+        /** Small size variant */
         this.sm = "";
+        /** Medium size variant (default) */
         this.md = "";
+        /** Large size variant */
         this.lg = "";
+        /** Extra-large size variant */
         this.xl = "";
         this.useDefaultKey = useDefaultKey;
         ComponentKeys.size.forEach((key) => {
@@ -3615,14 +3679,27 @@ class SizeTheme extends BaseTheme {
     }
 }
 
+const layoutGapClasses = {
+    xs: "gap-(--layout-gap-xs)",
+    sm: "gap-(--layout-gap-sm)",
+    md: "gap-(--layout-gap-md)",
+    lg: "gap-(--layout-gap-lg)",
+    xl: "gap-(--layout-gap-xl)",
+};
+
 class GapTheme extends BaseTheme {
     constructor(sizeMap) {
         super();
-        this.xs = 'gap-2';
-        this.sm = 'gap-3';
-        this.md = 'gap-4';
-        this.lg = 'gap-5';
-        this.xl = 'gap-6';
+        /** Extra-small gap - uses CSS variable --layout-gap-xs */
+        this.xs = layoutGapClasses.xs;
+        /** Small gap - uses CSS variable --layout-gap-sm */
+        this.sm = layoutGapClasses.sm;
+        /** Medium gap - uses CSS variable --layout-gap-md */
+        this.md = layoutGapClasses.md;
+        /** Large gap - uses CSS variable --layout-gap-lg */
+        this.lg = layoutGapClasses.lg;
+        /** Extra-large gap - uses CSS variable --layout-gap-xl */
+        this.xl = layoutGapClasses.xl;
         if (sizeMap) {
             ComponentKeys.size.forEach((key) => {
                 if (sizeMap[key] !== undefined) {
@@ -3659,7 +3736,9 @@ const layoutBorderRadiusClasses = {
 class RadiusTheme extends BaseTheme {
     constructor(roundedClasses) {
         super();
+        /** Pill shape - fully rounded corners */
         this.pill = "rounded-full";
+        /** Sharp shape - no rounded corners */
         this.sharp = "rounded-none";
         this.rounded = roundedClasses;
     }
@@ -3691,12 +3770,19 @@ class RadiusTheme extends BaseTheme {
 class BorderTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Show border - adds appearance-based border styling */
         this.border = "border";
+        /** Show top border */
         this.borderT = "border-t";
+        /** Show bottom border */
         this.borderB = "border-b";
+        /** Show left border */
         this.borderL = "border-l";
+        /** Show right border */
         this.borderR = "border-r";
+        /** Show horizontal borders (left and right) */
         this.borderX = "border-x";
+        /** Show vertical borders (top and bottom) */
         this.borderY = "border-y";
     }
     getClasses(extractedKeys) {
@@ -3718,10 +3804,15 @@ class BorderTheme extends BaseTheme {
 class RingTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base ring styling - ring with inset positioning */
         this.base = "ring ring-inset";
+        /** Ring styling on hover state */
         this.hover = "";
+        /** Ring styling on active state */
         this.active = "";
+        /** Ring styling on focus state */
         this.focus = "";
+        /** Ring styling on focus-visible state for keyboard navigation */
         this.focusVisible = "";
     }
     getClasses(extractedKeys) {
@@ -3734,10 +3825,15 @@ class RingTheme extends BaseTheme {
 class FocusVisibleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Base focus-visible styling */
         this.base = "";
+        /** Focus-visible styling on hover state */
         this.hover = "";
+        /** Focus-visible styling on active state */
         this.active = "";
+        /** Focus-visible styling on focus state */
         this.focus = "";
+        /** Focus-visible styling for keyboard navigation - outline on focus */
         this.focusVisible = "focus-visible:outline-2 focus-visible:outline-offset-2";
     }
     getClasses(extractedKeys) {
@@ -3750,10 +3846,15 @@ class FocusVisibleTheme extends BaseTheme {
 class PaddingTheme extends BaseTheme {
     constructor(initial) {
         super();
+        /** Extra-small padding - varies by component implementation */
         this.xs = "";
+        /** Small padding - varies by component implementation */
         this.sm = "";
+        /** Medium padding - varies by component implementation */
         this.md = "";
+        /** Large padding - varies by component implementation */
         this.lg = "";
+        /** Extra-large padding - varies by component implementation */
         this.xl = "";
         if (initial) {
             ComponentKeys.size.forEach((key) => {
@@ -3773,6 +3874,7 @@ class PaddingTheme extends BaseTheme {
     }
 }
 
+/** Horizontal padding theme - controls left and right padding */
 class PxTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -3787,6 +3889,7 @@ class PxTheme extends PaddingTheme {
     }
 }
 
+/** Vertical padding theme - controls top and bottom padding */
 class PyTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -4364,8 +4467,11 @@ class GenericVariantTheme extends BaseTheme {
 class WrapTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Allow flex items to wrap to new lines */
         this.flexWrap = "flex-wrap";
+        /** Prevent flex items from wrapping - keep on single line */
         this.flexNoWrap = "flex-nowrap";
+        /** Allow flex items to wrap in reverse order */
         this.flexWrapReverse = "flex-wrap-reverse";
     }
     getClasses(extractedKeys) {
@@ -4376,9 +4482,13 @@ class WrapTheme extends BaseTheme {
 class DirectionTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Horizontal flex direction - items flow left to right */
         this.row = "flex-row";
+        /** Vertical flex direction - items flow top to bottom */
         this.column = "flex-col";
+        /** Reversed horizontal flex direction - items flow right to left */
         this.rowReverse = "flex-row-reverse";
+        /** Reversed vertical flex direction - items flow bottom to top */
         this.columnReverse = "flex-col-reverse";
     }
     getClasses(extractedKeys) {
@@ -4823,6 +4933,7 @@ const mergeDefaults = (baseDefaults, overrideDefaults) => {
     return finalDefaults;
 };
 
+/** Left padding theme - controls left padding only */
 class PlTheme extends PaddingTheme {
     constructor(sizeMap) {
         super(sizeMap);
@@ -4840,7 +4951,9 @@ class PlTheme extends PaddingTheme {
 class ListStyleTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Disc list style - bullet points for unordered lists */
         this.disc = 'list-disc';
+        /** Decimal list style - numbers for ordered lists */
         this.decimal = 'list-decimal';
     }
     getClasses(extractedKeys) {
@@ -4932,10 +5045,15 @@ const listTheme = new ComponentTheme("ul", "list-inside", {
 class BreakpointTheme extends BaseTheme {
     constructor() {
         super(...arguments);
+        /** Switch to column layout on extra-small screens and below */
         this.xsCol = "max-xs:flex-col";
+        /** Switch to column layout on small screens and below */
         this.smCol = "max-sm:flex-col";
+        /** Switch to column layout on medium screens and below */
         this.mdCol = "max-md:flex-col";
+        /** Switch to column layout on large screens and below */
         this.lgCol = "max-lg:flex-col";
+        /** Switch to column layout on extra-large screens and below */
         this.xlCol = "max-xl:flex-col";
     }
     getClasses(extractedKeys) {
@@ -5022,13 +5140,7 @@ const defaultDividerTheme = new ComponentTheme("div", "h-px w-full", {
 
 const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
     size: {
-        gap: new GapTheme({
-            xs: 'gap-2 max-lg:gap-1',
-            sm: 'gap-4 max-lg:gap-3 max-md:gap-2',
-            md: 'gap-6 max-lg:gap-5 max-md:gap-4',
-            lg: 'gap-8 max-lg:gap-7 max-md:gap-6',
-            xl: 'gap-10 max-lg:gap-9 max-md:gap-8',
-        }),
+        gap: new GapTheme(),
         maxWidth: new SizeTheme({ xs: 'max-w-3xl', sm: 'max-w-4xl', md: 'max-w-5xl', lg: 'max-w-6xl', xl: 'max-w-7xl' }),
     },
     layout: {
@@ -5131,13 +5243,7 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full flex-col", {
 
 const gridSubThemes = {
     size: {
-        gap: new GapTheme({
-            xs: "gap-2",
-            sm: "gap-4  max-lg:gap-2",
-            md: "gap-6  max-lg:gap-4",
-            lg: "gap-8  max-lg:gap-6 max-md:gap-4",
-            xl: "gap-10 max-lg:gap-8 max-md:gap-6"
-        }),
+        gap: new GapTheme(),
     },
     appearance: {
         background: GenericVariantTheme.createLayoutBgAppearanceTheme(),
@@ -5578,7 +5684,6 @@ 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;
@@ -5588,19 +5693,13 @@ 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;
@@ -5716,7 +5815,6 @@ 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;