@vaneui/ui 0.3.1-alpha.20251213103636.79707b4 → 0.3.1-alpha.20251214141144.6dd59c5

package/dist/index.js

@@ -4850,6 +4850,7 @@ const textTheme = createTypographyComponentTheme("p", "p-0 m-0 w-fit", new FontS
 const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer", {
     size: {
         text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -4857,10 +4858,11 @@ const linkTheme = new ComponentTheme("a", "hover:underline w-fit cursor-pointer"
     typography: defaultTypographyThemes,
     layout: defaultLayoutsThemes,
 }, themeDefaults.link, TYPOGRAPHY_CATEGORIES);
-// List specific theme
+// ListItem specific theme
 const listItemTheme = new ComponentTheme("li", "", {
     size: {
         text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
     },
     appearance: {
         text: GenericVariantTheme.createTypographyTextTheme(),
@@ -4872,6 +4874,7 @@ const listItemTheme = new ComponentTheme("li", "", {
 const listTheme = new ComponentTheme("ul", "list-inside", {
     size: {
         text: new FontSizeTheme(),
+        lineHeight: LineHeightTheme.createDefault(),
         paddingLeft: new PlTheme(),
     },
     appearance: {
@@ -5448,6 +5451,7 @@ const Button = react.forwardRef(function Button(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.button, ...props });
 });
+Button.displayName = 'Button';
 
 /**
  * A compact badge component for displaying status, labels, or counts.
@@ -5486,6 +5490,7 @@ const Badge = react.forwardRef(function Badge(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.badge, ref: ref, ...props });
 });
+Badge.displayName = 'Badge';
 
 /**
  * A visual separator component for dividing content sections.
@@ -5520,6 +5525,7 @@ const Divider = react.forwardRef(function Divider(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.divider, ref: ref, ...props });
 });
+Divider.displayName = 'Divider';
 
 /**
  * A chip component for displaying tags, filters, or selections.
@@ -5558,6 +5564,7 @@ const Chip = react.forwardRef(function Chip(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.chip, ref: ref, ...props });
 });
+Chip.displayName = 'Chip';
 
 /**
  * An inline code component for displaying code snippets or technical terms.
@@ -5596,6 +5603,7 @@ const Code = react.forwardRef(function Code(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.code, ref: ref, ...props });
 });
+Code.displayName = 'Code';
 
 /**
  * A styled checkbox component for forms and selections.
@@ -5639,7 +5647,7 @@ const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     const { 
     // Size props
     xs, sm, md, lg, xl, 
-    // Appearance props  
+    // Appearance props
     default: defaultProp, accent, primary, secondary, tertiary, success, danger, warning, info, transparent, 
     // Variant props
     filled, outline, 
@@ -5665,6 +5673,7 @@ const Checkbox = react.forwardRef(function Checkbox(props, ref) {
     };
     return (jsxRuntime.jsxs(ThemedComponent, { theme: theme.checkbox.wrapper, ref: ref, ...themeProps, children: [jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.input, ...inputProps }), jsxRuntime.jsx(ThemedComponent, { theme: theme.checkbox.check, ...themeProps, children: theme.checkbox.check.themes.checkElement() })] }));
 });
+Checkbox.displayName = 'Checkbox';
 
 /**
  * A label component for form fields and inputs.
@@ -5709,6 +5718,7 @@ const Label = react.forwardRef(function Label(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.label, ref: ref, ...props });
 });
+Label.displayName = 'Label';
 
 /**
  * An image component with styling and layout support.
@@ -5747,6 +5757,7 @@ const Img = react.forwardRef(function Img(props, ref) {
     const theme = useTheme();
     return (jsxRuntime.jsx(ThemedComponent, { theme: theme.img, ref: ref, ...props }));
 });
+Img.displayName = 'Img';
 
 /**
  * A text input field component for forms and user data entry.
@@ -5785,6 +5796,7 @@ const Input = react.forwardRef(function Input(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.input, ...props });
 });
+Input.displayName = 'Input';
 
 /**
  * A semantic section container for grouping related content.
@@ -5826,6 +5838,7 @@ const Section = react.forwardRef(function Section(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.section, ref: ref, ...props });
 });
+Section.displayName = 'Section';
 
 /**
  * A page-level content wrapper with maximum width constraints.
@@ -5866,6 +5879,7 @@ const Container = react.forwardRef(function Container(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.container, ref: ref, ...props });
 });
+Container.displayName = 'Container';
 
 /**
  * A column flex container for vertical content organization.
@@ -5909,6 +5923,7 @@ const Col = react.forwardRef(function Col(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.col, ref: ref, ...props });
 });
+Col.displayName = 'Col';
 
 /**
  * A horizontal flex container for arranging elements side-by-side.
@@ -5951,6 +5966,7 @@ const Row = react.forwardRef(function Row(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.row, ref: ref, ...props });
 });
+Row.displayName = 'Row';
 
 /**
  * A 2-column CSS grid container.
@@ -5984,6 +6000,7 @@ const Grid2 = react.forwardRef(function Grid2(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid2, ref: ref, ...props });
 });
+Grid2.displayName = 'Grid2';
 /**
  * A 3-column CSS grid container.
  *
@@ -6006,6 +6023,7 @@ const Grid3 = react.forwardRef(function Grid3(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid3, ref: ref, ...props });
 });
+Grid3.displayName = 'Grid3';
 /**
  * A 4-column CSS grid container.
  *
@@ -6029,6 +6047,7 @@ const Grid4 = react.forwardRef(function Grid4(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid4, ref: ref, ...props });
 });
+Grid4.displayName = 'Grid4';
 /**
  * A 5-column CSS grid container.
  *
@@ -6053,6 +6072,7 @@ const Grid5 = react.forwardRef(function Grid5(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid5, ref: ref, ...props });
 });
+Grid5.displayName = 'Grid5';
 /**
  * A 6-column CSS grid container.
  *
@@ -6078,6 +6098,7 @@ const Grid6 = react.forwardRef(function Grid6(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { theme: theme.grid6, ref: ref, ...props });
 });
+Grid6.displayName = 'Grid6';
 
 /**
  * A container component for grouping related content with padding and borders.
@@ -6123,6 +6144,7 @@ const Card = react.forwardRef(function Card(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.card, ...props });
 });
+Card.displayName = 'Card';
 
 /**
  * A vertical flex container for stacking elements.
@@ -6166,6 +6188,7 @@ const Stack = react.forwardRef(function Stack(props, ref) {
     const stackTheme = theme.stack;
     return jsxRuntime.jsx(ThemedComponent, { theme: stackTheme, ref: ref, ...props });
 });
+Stack.displayName = 'Stack';
 
 /**
  * A top-level page heading component (h1).
@@ -6198,6 +6221,7 @@ const PageTitle = react.forwardRef(function PageTitle(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.pageTitle, ...props });
 });
+PageTitle.displayName = 'PageTitle';
 /**
  * A section heading component (h2).
  *
@@ -6229,6 +6253,7 @@ const SectionTitle = react.forwardRef(function SectionTitle(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.sectionTitle, ...props });
 });
+SectionTitle.displayName = 'SectionTitle';
 /**
  * A subsection heading component (h3).
  *
@@ -6259,6 +6284,7 @@ const Title = react.forwardRef(function Title(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.title, ...props });
 });
+Title.displayName = 'Title';
 /**
  * A body text component (p).
  *
@@ -6296,6 +6322,7 @@ const Text = react.forwardRef(function Text(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.text, ...props });
 });
+Text.displayName = 'Text';
 /**
  * An anchor link component (a).
  *
@@ -6329,6 +6356,7 @@ const Link = react.forwardRef(function Link(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.link, ...props });
 });
+Link.displayName = 'Link';
 /**
  * A list item component (li).
  *
@@ -6363,6 +6391,7 @@ const ListItem = react.forwardRef(function ListItem(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.listItem, ...props });
 });
+ListItem.displayName = 'ListItem';
 /**
  * A list container component (ul or ol).
  *
@@ -6403,6 +6432,7 @@ const List = react.forwardRef(function List(props, ref) {
     const theme = useTheme();
     return jsxRuntime.jsx(ThemedComponent, { ref: ref, theme: theme.list, ...props });
 });
+List.displayName = 'List';
 
 exports.ACTIVE = ACTIVE;
 exports.APPEARANCE_CATEGORY = APPEARANCE_CATEGORY;