@vaneui/ui 0.3.1-alpha.20251001131502.03a0ce2 → 0.3.1-alpha.20251001142553.9da86c7

package/dist/components/ui/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAa,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,SAAS,gHAKrB,CAAC;AAEF,eAAO,MAAM,YAAY,gHAKxB,CAAC;AAEF,eAAO,MAAM,KAAK,gHAKjB,CAAC;AAEF,eAAO,MAAM,IAAI,kHAKhB,CAAC;AAEF,eAAO,MAAM,IAAI,+GAKhB,CAAC;AAEF,eAAO,MAAM,QAAQ,2GAKpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAKhB,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typography.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAa,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,SAAS,gHAKrB,CAAC;AAEF,eAAO,MAAM,YAAY,gHAKxB,CAAC;AAEF,eAAO,MAAM,KAAK,gHAKjB,CAAC;AAEF,eAAO,MAAM,IAAI,kHAKhB,CAAC;AAEF,eAAO,MAAM,IAAI,+GAKhB,CAAC;AAEF,eAAO,MAAM,QAAQ,2GAKpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAKhB,CAAC"}

package/dist/index.esm.js

@@ -53,18 +53,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';
@@ -146,18 +144,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';
@@ -566,16 +562,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] : ''];
@@ -4695,6 +4689,7 @@ const themeDefaults = {
     container: {
         noRing: true,
         flex: true,
+        column: true,
         md: true,
         itemsCenter: true,
         gap: true,
@@ -5216,16 +5211,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] || ''] : [];
@@ -5234,10 +5227,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,
@@ -5317,7 +5322,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' }),
@@ -5394,11 +5399,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(),
@@ -5862,5 +5867,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, 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, LAYOUT_CORE, LAYOUT_FLEX, LAYOUT_FULL, LG, LG_COL, LG_HIDE, LIGHT, LINE_THROUGH, LINK, LIST_CATEGORIES, LIST_STYLE, LIST_STYLE_VALUES, LOWERCASE, Label, Link, List, ListItem, MD, MD_COL, MD_HIDE, MEDIUM, 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, SM_COL, SM_HIDE, STACK_CATEGORIES, STATIC, STICKY, SUCCESS, Section, SectionTitle, Stack, TABLE, 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, XL_COL, XL_HIDE, XS, XS_COL, XS_HIDE, defaultTheme, themeDefaults, useTheme };
+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 };
 //# sourceMappingURL=index.esm.js.map