@vaneui/ui 0.3.1-alpha.20251001131502.03a0ce2 → 0.3.1-alpha.20251001144233.cfeb345

package/dist/index.js

@@ -55,18 +55,16 @@ const BORDER_VALUES = [BORDER$1, BORDER_T, BORDER_B, BORDER_L, BORDER_R, 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];
 
-/** Extra-small column breakpoint - responsive grid column sizing for xs screens */
-const XS_COL = 'xsCol';
-/** Small column breakpoint - responsive grid column sizing for sm screens */
-const SM_COL = 'smCol';
-/** Medium column breakpoint - responsive grid column sizing for md screens */
-const MD_COL = 'mdCol';
-/** Large column breakpoint - responsive grid column sizing for lg screens */
-const LG_COL = 'lgCol';
-/** Extra-large column breakpoint - responsive grid column sizing for xl screens */
-const XL_COL = 'xlCol';
+/** 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 = [XS_COL, SM_COL, MD_COL, LG_COL, XL_COL];
+const BREAKPOINT_VALUES = [MOBILE_COL, TABLET_COL, LAPTOP_COL, DESKTOP_COL];
 
 /** Inline display - flows with text */
 const INLINE = 'inline';
@@ -148,18 +146,16 @@ const NO_GAP = 'noGap';
 /** All gap property values */
 const GAP_VALUES = [GAP, NO_GAP];
 
-/** Hide element on extra-small screens and up - visible only on mobile */
-const XS_HIDE = 'xsHide';
-/** Hide element on small screens and up - visible only on extra-small mobile */
-const SM_HIDE = 'smHide';
-/** Hide element on medium screens and up - visible only on small screens and below */
-const MD_HIDE = 'mdHide';
-/** Hide element on large screens and up - visible only on medium screens and below */
-const LG_HIDE = 'lgHide';
-/** Hide element on extra-large screens and up - visible only on large screens and below */
-const XL_HIDE = 'xlHide';
+/** 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 = [XS_HIDE, SM_HIDE, MD_HIDE, LG_HIDE, XL_HIDE];
+const HIDE_VALUES = [MOBILE_HIDE, TABLET_HIDE, LAPTOP_HIDE, DESKTOP_HIDE];
 
 /** Align items to the start of the cross axis */
 const ITEMS_START = 'itemsStart';
@@ -568,16 +564,14 @@ 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";
+        /** Hide element on mobile devices and below (max-mobile: 20rem) */
+        this.mobileHide = "max-mobile:hidden";
+        /** Hide element on tablet devices and below (max-tablet: 40rem) */
+        this.tabletHide = "max-tablet:hidden";
+        /** Hide element on laptop devices and below (max-laptop: 64rem) */
+        this.laptopHide = "max-laptop:hidden";
+        /** Hide element on desktop devices and below (max-desktop: 80rem) */
+        this.desktopHide = "max-desktop:hidden";
     }
     getClasses(extractedKeys) {
         return [(extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.hide) ? this[extractedKeys.hide] : ''];
@@ -3684,29 +3678,29 @@ class FontSizeTheme extends BaseTheme {
     // Static factory methods for different text size ranges
     static createForPageTitle() {
         return new FontSizeTheme({
-            xs: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
-            sm: "[--fs-unit:18]", // text-4xl: 2.25rem = 18 * 0.125rem
-            md: "[--fs-unit:24]", // text-5xl: 3rem = 24 * 0.125rem
-            lg: "[--fs-unit:30]", // text-6xl: 3.75rem = 30 * 0.125rem
-            xl: "[--fs-unit:36]" // text-7xl: 4.5rem = 36 * 0.125rem
+            xs: "[--fs-unit:15] max-laptop:[--fs-unit:12] max-tablet:[--fs-unit:9]", // text-3xl: 1.875rem = 15 * 0.125rem
+            sm: "[--fs-unit:18] max-laptop:[--fs-unit:15] max-tablet:[--fs-unit:12]", // text-4xl: 2.25rem = 18 * 0.125rem
+            md: "[--fs-unit:24] max-laptop:[--fs-unit:21] max-tablet:[--fs-unit:18]", // text-5xl: 3rem = 24 * 0.125rem
+            lg: "[--fs-unit:30] max-laptop:[--fs-unit:27] max-tablet:[--fs-unit:24]", // text-6xl: 3.75rem = 30 * 0.125rem
+            xl: "[--fs-unit:36] max-laptop:[--fs-unit:33] max-tablet:[--fs-unit:30]" // text-7xl: 4.5rem = 36 * 0.125rem
         });
     }
     static createForSectionTitle() {
         return new FontSizeTheme({
-            xs: "[--fs-unit:12]", // text-2xl: 1.5rem = 12 * 0.125rem
-            sm: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
-            md: "[--fs-unit:18]", // text-4xl: 2.25rem = 18 * 0.125rem
-            lg: "[--fs-unit:24]", // text-5xl: 3rem = 24 * 0.125rem
-            xl: "[--fs-unit:30]" // text-6xl: 3.75rem = 30 * 0.125rem
+            xs: "[--fs-unit:12] max-laptop:[--fs-unit:10] max-tablet:[--fs-unit:8]", // text-2xl: 1.5rem = 12 * 0.125rem
+            sm: "[--fs-unit:15] max-laptop:[--fs-unit:13] max-tablet:[--fs-unit:11]", // text-3xl: 1.875rem = 15 * 0.125rem
+            md: "[--fs-unit:18] max-laptop:[--fs-unit:16] max-tablet:[--fs-unit:14]", // text-4xl: 2.25rem = 18 * 0.125rem
+            lg: "[--fs-unit:24] max-laptop:[--fs-unit:22] max-tablet:[--fs-unit:20]", // text-5xl: 3rem = 24 * 0.125rem
+            xl: "[--fs-unit:30] max-laptop:[--fs-unit:28] max-tablet:[--fs-unit:26]" // text-6xl: 3.75rem = 30 * 0.125rem
         });
     }
     static createForTitle() {
         return new FontSizeTheme({
-            xs: "[--fs-unit:9]", // text-lg: 1.125rem = 9 * 0.125rem
-            sm: "[--fs-unit:10]", // text-xl: 1.25rem = 10 * 0.125rem
-            md: "[--fs-unit:12]", // text-2xl: 1.5rem = 12 * 0.125rem
-            lg: "[--fs-unit:15]", // text-3xl: 1.875rem = 15 * 0.125rem
-            xl: "[--fs-unit:18]" // text-4xl: 2.25rem = 18 * 0.125rem
+            xs: "[--fs-unit:9]  max-laptop:[--fs-unit:8]  max-tablet:[--fs-unit:7]", // text-lg: 1.125rem = 9 * 0.125rem
+            sm: "[--fs-unit:10] max-laptop:[--fs-unit:9]  max-tablet:[--fs-unit:8]", // text-xl: 1.25rem = 10 * 0.125rem
+            md: "[--fs-unit:12] max-laptop:[--fs-unit:11] max-tablet:[--fs-unit:10]", // text-2xl: 1.5rem = 12 * 0.125rem
+            lg: "[--fs-unit:15] max-laptop:[--fs-unit:14] max-tablet:[--fs-unit:13]", // text-3xl: 1.875rem = 15 * 0.125rem
+            xl: "[--fs-unit:18] max-laptop:[--fs-unit:17] max-tablet:[--fs-unit:16]" // text-4xl: 2.25rem = 18 * 0.125rem
         });
     }
 }
@@ -4697,6 +4691,7 @@ const themeDefaults = {
     container: {
         noRing: true,
         flex: true,
+        column: true,
         md: true,
         itemsCenter: true,
         gap: true,
@@ -5218,16 +5213,14 @@ 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";
+        /** Switch to column layout on mobile devices and below (max-mobile: 20rem) */
+        this.mobileCol = "max-mobile:flex-col";
+        /** Switch to column layout on tablet devices and below (max-tablet: 40rem) */
+        this.tabletCol = "max-tablet:flex-col";
+        /** Switch to column layout on laptop devices and below (max-laptop: 64rem) */
+        this.laptopCol = "max-laptop:flex-col";
+        /** Switch to column layout on desktop devices and below (max-desktop: 80rem) */
+        this.desktopCol = "max-desktop:flex-col";
     }
     getClasses(extractedKeys) {
         return (extractedKeys === null || extractedKeys === void 0 ? void 0 : extractedKeys.breakpoint) ? [this[extractedKeys.breakpoint] || ''] : [];
@@ -5236,10 +5229,22 @@ class BreakpointTheme extends BaseTheme {
 
 const defaultCardTheme = new ComponentTheme("div", "", {
     size: {
-        px: new PxTheme(),
-        py: new PyTheme(),
+        px: new PxTheme({
+            xs: "[--aspect-ratio:1]",
+            sm: "[--aspect-ratio:1]",
+            md: "[--aspect-ratio:1]",
+            lg: "[--aspect-ratio:1]",
+            xl: "[--aspect-ratio:1]",
+        }),
+        py: new PyTheme({
+            xs: "[--py-unit:2]",
+            sm: "[--py-unit:4]",
+            md: "[--py-unit:6]",
+            lg: "[--py-unit:8]",
+            xl: "[--py-unit:10]",
+        }),
         lineHeight: LineHeightTheme.createDefault(),
-        gap: new GapTheme(true),
+        gap: new GapTheme(false),
     },
     layout: {
         ...defaultLayoutsThemes,
@@ -5319,7 +5324,7 @@ class SizeTheme extends BaseTheme {
     }
 }
 
-const defaultContainerTheme = new ComponentTheme("div", "flex-col mx-auto w-full", {
+const defaultContainerTheme = new ComponentTheme("div", "mx-auto w-full", {
     size: {
         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' }),
@@ -5396,11 +5401,11 @@ const defaultSectionTheme = new ComponentTheme("div", "w-full", {
             xl: "[--aspect-ratio:1.5]",
         }),
         py: new PyTheme({
-            xs: "[--py-unit:4]",
-            sm: "[--py-unit:8]",
-            md: "[--py-unit:12]",
-            lg: "[--py-unit:16]",
-            xl: "[--py-unit:20]",
+            xs: "[--py-unit:4]  max-laptop:[--py-unit:3]  max-tablet:[--py-unit:2]",
+            sm: "[--py-unit:8]  max-laptop:[--py-unit:4]  max-tablet:[--py-unit:2]",
+            md: "[--py-unit:12] max-laptop:[--py-unit:6]  max-tablet:[--py-unit:2]",
+            lg: "[--py-unit:16] max-laptop:[--py-unit:8]  max-tablet:[--py-unit:2]",
+            xl: "[--py-unit:20] max-laptop:[--py-unit:10] max-tablet:[--py-unit:4]",
         }),
         gap: new GapTheme(),
         breakpoint: new BreakpointTheme(),
@@ -5911,6 +5916,8 @@ exports.Container = Container;
 exports.DANGER = DANGER;
 exports.DECIMAL = DECIMAL;
 exports.DEFAULT = DEFAULT;
+exports.DESKTOP_COL = DESKTOP_COL;
+exports.DESKTOP_HIDE = DESKTOP_HIDE;
 exports.DISC = DISC;
 exports.DISPLAY_VALUES = DISPLAY_VALUES;
 exports.DIVIDER_CATEGORIES = DIVIDER_CATEGORIES;
@@ -5970,12 +5977,12 @@ exports.JUSTIFY_START = JUSTIFY_START;
 exports.JUSTIFY_STRETCH = JUSTIFY_STRETCH;
 exports.JUSTIFY_VALUES = JUSTIFY_VALUES;
 exports.LABEL_CATEGORIES = LABEL_CATEGORIES;
+exports.LAPTOP_COL = LAPTOP_COL;
+exports.LAPTOP_HIDE = LAPTOP_HIDE;
 exports.LAYOUT_CORE = LAYOUT_CORE;
 exports.LAYOUT_FLEX = LAYOUT_FLEX;
 exports.LAYOUT_FULL = LAYOUT_FULL;
 exports.LG = LG;
-exports.LG_COL = LG_COL;
-exports.LG_HIDE = LG_HIDE;
 exports.LIGHT = LIGHT;
 exports.LINE_THROUGH = LINE_THROUGH;
 exports.LINK = LINK;
@@ -5988,9 +5995,9 @@ exports.Link = Link;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.MD = MD;
-exports.MD_COL = MD_COL;
-exports.MD_HIDE = MD_HIDE;
 exports.MEDIUM = MEDIUM;
+exports.MOBILE_COL = MOBILE_COL;
+exports.MOBILE_HIDE = MOBILE_HIDE;
 exports.MODE_VALUES = MODE_VALUES;
 exports.MONO = MONO;
 exports.ModeKeys = ModeKeys;
@@ -6050,8 +6057,6 @@ exports.SHAPE_VALUES = SHAPE_VALUES;
 exports.SHARP = SHARP;
 exports.SIZE_VALUES = SIZE_VALUES;
 exports.SM = SM;
-exports.SM_COL = SM_COL;
-exports.SM_HIDE = SM_HIDE;
 exports.STACK_CATEGORIES = STACK_CATEGORIES;
 exports.STATIC = STATIC;
 exports.STICKY = STICKY;
@@ -6060,6 +6065,8 @@ exports.Section = Section;
 exports.SectionTitle = SectionTitle;
 exports.Stack = Stack;
 exports.TABLE = TABLE;
+exports.TABLET_COL = TABLET_COL;
+exports.TABLET_HIDE = TABLET_HIDE;
 exports.TABLE_CELL = TABLE_CELL;
 exports.TERTIARY = TERTIARY;
 exports.TEXT_ALIGN_VALUES = TEXT_ALIGN_VALUES;
@@ -6090,11 +6097,7 @@ exports.VISUAL_LAYOUT = VISUAL_LAYOUT;
 exports.WARNING = WARNING;
 exports.WRAP_VALUES = WRAP_VALUES;
 exports.XL = XL;
-exports.XL_COL = XL_COL;
-exports.XL_HIDE = XL_HIDE;
 exports.XS = XS;
-exports.XS_COL = XS_COL;
-exports.XS_HIDE = XS_HIDE;
 exports.defaultTheme = defaultTheme;
 exports.themeDefaults = themeDefaults;
 exports.useTheme = useTheme;