@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.16

package/dist/types/components/Accordion/AccordionItem.d.ts

@@ -1,5 +1,16 @@
 import React from 'react';
 import { AccordionItemComponentProps, AccordionItemProps } from './types';
+/**
+ * AccordionItem component - A single item within an Accordion.
+ *
+ * @example
+ * ```tsx
+ * <AccordionItem id="item1" header="Section 1">Content 1</AccordionItem>
+ * ```
+ */
+declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemComponentProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<AccordionItemComponentProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { AccordionItem };
+export type { AccordionItemComponentProps, AccordionItemProps };
 export declare const AccordionItemWrapper: React.FC<AccordionItemProps>;

package/dist/types/components/AdminHeader/AdminHeader.d.ts

@@ -170,10 +170,41 @@ export interface AdminHeaderProps {
         onClick?: () => void;
     }>;
 }
-declare const AdminHeaderWithParsedClasses: {
-    (props: AdminHeaderProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { AdminHeaderWithParsedClasses as AdminHeader };
+/**
+ * AdminHeader - Professional admin panel header
+ *
+ * Comprehensive header component for admin dashboards with:
+ * - Mobile menu toggle
+ * - Search with suggestions
+ * - Notifications with badge
+ * - Quick actions
+ * - User menu with avatar
+ * - Fully responsive
+ * - Theme support
+ *
+ * @example
+ * ```tsx
+ * <AdminHeader
+ *   logo={<Logo />}
+ *   title="Admin Dashboard"
+ *   onToggleSidebar={() => setMobileOpen(true)}
+ *   showSearch
+ *   searchValue={search}
+ *   onSearchChange={setSearch}
+ *   notifications={notifications}
+ *   userName="John Doe"
+ *   userRole="Administrator"
+ *   userAvatar="/avatar.jpg"
+ *   userMenuItems={[
+ *     { label: 'Profile', icon: <UserIcon />, onClick: () => {} },
+ *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },
+ *     { divider: true },
+ *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger', onClick: () => {} }
+ *   ]}
+ * />
+ * ```
+ */
+declare const AdminHeader: React.ForwardRefExoticComponent<AdminHeaderProps & React.RefAttributes<HTMLElement>>;
 declare const _default: React.FC<AdminHeaderProps & React.RefAttributes<HTMLElement>>;
 export default _default;
+export { AdminHeader };

package/dist/types/components/AdminHeader/index.d.ts

@@ -1,2 +1,2 @@
-export { AdminHeader, default } from './AdminHeader';
+export { default, AdminHeader } from './AdminHeader';
 export type { AdminHeaderProps, NotificationItem, UserMenuItem, QuickAction, SearchSuggestion, } from './AdminHeader';

package/dist/types/components/Alert/Alert.d.ts

@@ -63,10 +63,58 @@ export interface AlertProps {
      */
     role?: string;
 }
-declare const AlertWithParsedClasses: {
-    (props: AlertProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Alert component - Displays important messages and notifications
+ *
+ * A flexible alert component supporting multiple variants, styles, and interactive features.
+ * Can display simple messages or complex content with titles, actions, and custom icons.
+ *
+ * @example
+ * Simple alert with children
+ * ```tsx
+ * <Alert variant="success">
+ *   Your changes have been saved!
+ * </Alert>
+ * ```
+ *
+ * @example
+ * Alert with title and description
+ * ```tsx
+ * <Alert
+ *   variant="error"
+ *   title="Error occurred"
+ *   description="Unable to connect to the server."
+ *   dismissible
+ *   onClose={() => console.log('closed')}
+ * />
+ * ```
+ *
+ * @example
+ * Alert with action button
+ * ```tsx
+ * <Alert
+ *   variant="warning"
+ *   title="Update available"
+ *   style="left-accent"
+ *   action={<Button size="small">Update Now</Button>}
+ * >
+ *   A new version is available. Update to get the latest features.
+ * </Alert>
+ * ```
+ *
+ * @example
+ * Alert with custom icon
+ * ```tsx
+ * <Alert
+ *   variant="info"
+ *   icon={<CustomIcon />}
+ *   title="Custom notification"
+ * >
+ *   This alert uses a custom icon.
+ * </Alert>
+ * ```
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<AlertProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { AlertWithParsedClasses as Alert };
+export { Alert };

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -164,10 +164,48 @@ export interface AutocompleteProps extends Omit<InputHTMLAttributes<HTMLInputEle
      */
     minSearchLength?: number;
 }
-declare const AutocompleteWithParsedClasses: {
-    (props: AutocompleteProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Autocomplete component - Text input with dropdown suggestions
+ *
+ * A comprehensive autocomplete component with support for custom option rendering,
+ * validation states, loading states, and rich features like icons and descriptions.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Autocomplete
+ *   label="Search"
+ *   placeholder="Type to search..."
+ *   options={searchResults}
+ *   onSelect={(value, option) => console.log('Selected:', value, option)}
+ *   onChange={(value) => fetchResults(value)}
+ * />
+ * ```
+ *
+ * @example
+ * With custom getters
+ * ```tsx
+ * <Autocomplete
+ *   options={products}
+ *   getOptionLabel={(opt) => opt.name}
+ *   getOptionValue={(opt) => opt.id}
+ *   getOptionDescription={(opt) => opt.category}
+ *   onSelect={(value, option) => navigate(`/product/${value}`)}
+ * />
+ * ```
+ *
+ * @example
+ * With loading state
+ * ```tsx
+ * <Autocomplete
+ *   loading={isLoading}
+ *   loadingMessage="Searching..."
+ *   options={results}
+ *   showSearchIcon
+ * />
+ * ```
+ */
+declare const Autocomplete: React.ForwardRefExoticComponent<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { AutocompleteWithParsedClasses as Autocomplete };
+export { Autocomplete };

package/dist/types/components/Avatar/Avatar.d.ts

@@ -57,10 +57,7 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     statusIndicator?: React.ReactNode;
     statusPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
-declare const AvatarWithParsedClasses: {
-    (props: AvatarProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<AvatarProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { AvatarWithParsedClasses as Avatar };
+export { Avatar };

package/dist/types/components/Badge/Badge.d.ts

@@ -46,10 +46,37 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      */
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const BadgeWithParsedClasses: {
-    (props: BadgeProps & React.RefAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Badge component - Small labels and indicators for status, counts, or categories
+ *
+ * A versatile badge component that can display status indicators, counts, tags, or any short text
+ * with various visual styles and customization options.
+ *
+ * @example
+ * Basic status badges
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="error" dot>Error</Badge>
+ * <Badge variant="primary" pill>NEW</Badge>
+ * ```
+ *
+ * @example
+ * With icon and outline
+ * ```tsx
+ * <Badge variant="info" icon={<InfoIcon />} outline>
+ *   Information
+ * </Badge>
+ * ```
+ *
+ * @example
+ * Removable badge
+ * ```tsx
+ * <Badge variant="primary" onRemove={(e) => handleRemove()}>
+ *   Tag 1
+ * </Badge>
+ * ```
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 declare const _default: React.FC<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;
-export { BadgeWithParsedClasses as Badge };
+export { Badge };

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -59,10 +59,76 @@ export interface BreadcrumbProps {
      */
     separatorClassName?: string;
 }
-declare const BreadcrumbWithParsedClasses: {
-    (props: BreadcrumbProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Breadcrumb component - Navigation aid showing current location hierarchy
+ *
+ * A flexible breadcrumb component that works with native anchors, React Router, Next.js,
+ * or any custom routing library. Supports icons, custom separators, and collapsing.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Products', href: '/products' },
+ *     { label: 'Electronics', href: '/products/electronics' },
+ *     { label: 'Laptops', active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With React Router
+ * ```tsx
+ * import { Link as RouterLink } from 'react-router-dom'
+ *
+ * <Breadcrumb
+ *   linkComponent={RouterLink}
+ *   items={[
+ *     { label: 'Home', linkProps: { to: '/' } },
+ *     { label: 'Dashboard', linkProps: { to: '/dashboard' }, active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With Next.js
+ * ```tsx
+ * import NextLink from 'next/link'
+ *
+ * <Breadcrumb
+ *   linkComponent={NextLink}
+ *   items={[
+ *     { label: 'Home', linkProps: { href: '/' } },
+ *     { label: 'About', linkProps: { href: '/about' }, active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With icons and custom separator
+ * ```tsx
+ * <Breadcrumb
+ *   separator="›"
+ *   items={[
+ *     { label: 'Home', href: '/', icon: <HomeIcon /> },
+ *     { label: 'Products', href: '/products', icon: <PackageIcon /> },
+ *     { label: 'Current', active: true }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With maxItems (collapsing)
+ * ```tsx
+ * <Breadcrumb
+ *   maxItems={4}
+ *   items={longItemsList}
+ * />
+ * ```
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
 declare const _default: React.FC<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
 export default _default;
-export { BreadcrumbWithParsedClasses as Breadcrumb };
+export { Breadcrumb };

package/dist/types/components/Button/Button.d.ts

@@ -72,10 +72,48 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     darkText?: boolean;
     children?: React.ReactNode;
 }
-declare const ButtonWithParsedClasses: {
-    (props: ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Button component - Primary interactive element for user actions
+ *
+ * A comprehensive button component with multiple variants, sizes, loading states,
+ * and icon support. Can also render as a link with button styling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Button variant="primary" size="medium" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * With icons
+ * ```tsx
+ * <Button variant="primary" leftIcon={<SaveIcon />}>
+ *   Save Changes
+ * </Button>
+ * <Button variant="secondary" rightIcon={<ArrowIcon />}>
+ *   Next
+ * </Button>
+ * ```
+ *
+ * @example
+ * Loading state
+ * ```tsx
+ * <Button loading loadingText="Saving...">
+ *   Save
+ * </Button>
+ * ```
+ *
+ * @example
+ * As link
+ * ```tsx
+ * <Button asLink href="/dashboard" variant="primary">
+ *   Go to Dashboard
+ * </Button>
+ * ```
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 declare const _default: React.FC<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default _default;
-export { ButtonWithParsedClasses as Button };
+export { Button };

package/dist/types/components/Card/Card.d.ts

@@ -54,10 +54,69 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     divider?: boolean;
 }
-declare const CardWithParsedClasses: {
-    (props: CardProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Card component - Container for grouping related content
+ *
+ * A versatile card component with support for variants, padding control,
+ * headers, footers, and interactive states.
+ *
+ * @example
+ * Basic card
+ * ```tsx
+ * <Card>
+ *   <h3>Card Title</h3>
+ *   <p>Card content goes here</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card without padding
+ * ```tsx
+ * <Card noPadding>
+ *   <img src="image.jpg" alt="Full bleed image" />
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with custom padding
+ * ```tsx
+ * <Card padding="32px">
+ *   <p>Card with custom padding</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Card with header and footer
+ * ```tsx
+ * <Card
+ *   header={<h3>Card Header</h3>}
+ *   footer={<button>Action</button>}
+ *   divider
+ * >
+ *   <p>Card content</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Interactive card
+ * ```tsx
+ * <Card hoverable clickable onClick={() => console.log('clicked')}>
+ *   <p>Click me!</p>
+ * </Card>
+ * ```
+ *
+ * @example
+ * Customize appearance with CSS
+ * ```css
+ * .vtx-card {
+ *   --vtx-card-bg: #ffffff;
+ *   --vtx-card-border-radius: 8px;
+ *   --vtx-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ *   --vtx-card-padding: 16px;
+ * }
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<CardProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { CardWithParsedClasses as Card };
+export { Card };

package/dist/types/components/Checkbox/Checkbox.d.ts

@@ -51,10 +51,64 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     inputClassName?: string;
 }
-declare const CheckboxWithParsedClasses: {
-    (props: CheckboxProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Checkbox component - Allows users to select one or more items from a set
+ *
+ * The Checkbox component provides a customizable checkbox input with support
+ * for labels, error states, indeterminate state, and three sizes.
+ *
+ * ## CSS Customization
+ *
+ * You can customize the checkbox appearance using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-checkbox-color: #1976d2;
+ *   --vtx-checkbox-size: 20px;
+ *   --vtx-checkbox-border-width: 2px;
+ *   --vtx-checkbox-border-radius: 4px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic checkbox
+ * ```tsx
+ * <Checkbox label="Accept terms and conditions" />
+ * ```
+ *
+ * @example
+ * Controlled checkbox with size
+ * ```tsx
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox
+ *   checked={checked}
+ *   onChange={(e) => setChecked(e.target.checked)}
+ *   label="Subscribe to newsletter"
+ *   size="lg"
+ *   variant="secondary"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Checkbox
+ *   label="I agree"
+ *   error
+ *   helperText="You must agree to continue"
+ * />
+ * ```
+ *
+ * @example
+ * Indeterminate state
+ * ```tsx
+ * <Checkbox
+ *   label="Select all"
+ *   indeterminate
+ * />
+ * ```
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 declare const _default: React.FC<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { CheckboxWithParsedClasses as Checkbox };
+export { Checkbox };

package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -64,10 +64,59 @@ export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     className?: string;
 }
-declare const CheckboxGroupWithParsedClasses: {
-    (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * CheckboxGroup component - Manages a group of related checkboxes
+ *
+ * The CheckboxGroup component provides a convenient way to manage multiple
+ * checkboxes with shared state, labels, and error handling.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Select your interests"
+ *   options={[
+ *     { value: 'sports', label: 'Sports' },
+ *     { value: 'music', label: 'Music' },
+ *     { value: 'travel', label: 'Travel' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Controlled mode
+ * ```tsx
+ * const [selected, setSelected] = useState(['sports']);
+ * <CheckboxGroup
+ *   label="Interests"
+ *   options={options}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ *
+ * @example
+ * Horizontal layout
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Preferences"
+ *   options={options}
+ *   orientation="horizontal"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <CheckboxGroup
+ *   label="Required selection"
+ *   options={options}
+ *   error
+ *   helperText="Please select at least one option"
+ * />
+ * ```
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { CheckboxGroupWithParsedClasses as CheckboxGroup };
+export { CheckboxGroup };

package/dist/types/components/Chip/Chip.d.ts

@@ -56,10 +56,38 @@ export interface ChipProps {
      */
     'data-testid'?: string;
 }
-declare const ChipWithParsedClasses: {
-    (props: ChipProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Chip component - Compact element for displaying tags, labels, or selections
+ *
+ * A versatile chip component for representing small pieces of information like tags,
+ * filters, selections, or categories with optional delete functionality.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Chip label="React" />
+ * ```
+ *
+ * @example
+ * With delete functionality
+ * ```tsx
+ * <Chip
+ *   label="JavaScript"
+ *   onDelete={() => handleRemove('js')}
+ * />
+ * ```
+ *
+ * @example
+ * With avatar
+ * ```tsx
+ * <Chip
+ *   label="John Doe"
+ *   avatar="https://avatar.url/john.jpg"
+ *   variant="outlined"
+ * />
+ * ```
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { ChipWithParsedClasses as Chip };
+export { Chip };