@vaneui/ui 0.3.1-alpha.20251201144940.b3e097b → 0.3.1-alpha.20251214132905.c959e96

package/dist/index.js

@@ -5416,7 +5416,7 @@ const ThemedComponent = react.forwardRef(function ThemedComponent(allProps, ref)
  *
  * Supports rendering as a button element or anchor tag when href is provided.
  * Can be styled with different appearances (primary, secondary, success, etc.),
- * sizes (xs to xl), and variants (filled, outlined, ghost).
+ * sizes (xs to xl), and variants (filled, outline).
  *
  * @example
  * ```tsx
@@ -5439,7 +5439,7 @@ const ThemedComponent = react.forwardRef(function ThemedComponent(allProps, ref)
  * @example
  * ```tsx
  * // Danger button with custom styling
- * <Button danger outlined className="w-full">Delete</Button>
+ * <Button danger outline className="w-full">Delete</Button>
  * ```
  *
  * @see {@link ButtonProps} for all available props
@@ -5448,6 +5448,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.
@@ -5477,7 +5478,7 @@ const Button = react.forwardRef(function Button(props, ref) {
  * @example
  * ```tsx
  * // Badge as a link
- * <Badge href="/beta" info outlined>Beta</Badge>
+ * <Badge href="/beta" info outline>Beta</Badge>
  * ```
  *
  * @see {@link BadgeProps} for all available props
@@ -5486,6 +5487,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 +5522,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.
@@ -5543,7 +5546,7 @@ const Divider = react.forwardRef(function Divider(props, ref) {
  * @example
  * ```tsx
  * // Removable tag chip
- * <Chip secondary outlined xs>TypeScript ×</Chip>
+ * <Chip secondary outline xs>TypeScript ×</Chip>
  * ```
  *
  * @example
@@ -5558,6 +5561,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.
@@ -5581,7 +5585,7 @@ const Chip = react.forwardRef(function Chip(props, ref) {
  * @example
  * ```tsx
  * // Code block style
- * <Code secondary outlined lg mono>function hello() {}</Code>
+ * <Code secondary outline lg mono>function hello() {}</Code>
  * ```
  *
  * @example
@@ -5596,6 +5600,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 +5644,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 +5670,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 +5715,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 +5754,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.
@@ -5764,7 +5772,7 @@ const Img = react.forwardRef(function Img(props, ref) {
  * @example
  * ```tsx
  * // Email input with primary styling
- * <Input type="email" primary outlined placeholder="Email address" />
+ * <Input type="email" primary outline placeholder="Email address" />
  * ```
  *
  * @example
@@ -5785,6 +5793,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 +5835,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 +5876,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 +5920,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 +5963,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 +5997,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 +6020,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 +6044,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 +6069,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 +6095,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.
@@ -6098,7 +6116,7 @@ const Grid6 = react.forwardRef(function Grid6(props, ref) {
  * @example
  * ```tsx
  * // Card with styling
- * <Card primary outlined shadow padding gap>
+ * <Card primary outline shadow padding gap>
  *   <Title>Feature</Title>
  *   <Text>Description of the feature</Text>
  *   <Button>Learn More</Button>
@@ -6123,6 +6141,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 +6185,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 +6218,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 +6250,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 +6281,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 +6319,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 +6353,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 +6388,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 +6429,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;