@vtx-ui/react 0.0.1-beta.1 → 0.0.1-beta.4

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

@@ -0,0 +1,176 @@
+import React from 'react';
+import './AdminHeader.css';
+export interface NotificationItem {
+    /** Unique notification ID */
+    id: string;
+    /** Notification title/message */
+    title: string;
+    /** Optional description or body */
+    description?: string;
+    /** Timestamp (e.g., "2 min ago", "Today at 3:00 PM") */
+    time: string;
+    /** Whether notification has been read */
+    read?: boolean;
+    /** Icon element to display */
+    icon?: React.ReactNode;
+    /** Click handler for the notification */
+    onClick?: () => void;
+    /** Notification type for styling */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** Avatar image for the notification */
+    avatar?: string;
+    /** Link URL if notification is clickable */
+    href?: string;
+}
+export interface UserMenuItem {
+    /** Menu item label */
+    label: string;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Visual variant */
+    variant?: 'default' | 'danger' | 'success';
+    /** Show divider after item */
+    divider?: boolean;
+    /** Keyboard shortcut hint */
+    shortcut?: string;
+    /** Badge content */
+    badge?: React.ReactNode;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Link URL */
+    href?: string;
+}
+export interface QuickAction {
+    /** Action ID */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Click handler */
+    onClick?: () => void;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Badge content */
+    badge?: React.ReactNode;
+    /** Whether action is disabled */
+    disabled?: boolean;
+}
+export interface SearchSuggestion {
+    /** Suggestion ID */
+    id: string;
+    /** Suggestion text */
+    label: string;
+    /** Optional icon */
+    icon?: React.ReactNode;
+    /** Category/group */
+    category?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Link URL */
+    href?: string;
+}
+export interface AdminHeaderProps {
+    /** Logo element (image, SVG, component) */
+    logo?: React.ReactNode;
+    /** Application/brand title */
+    title?: string;
+    /** Subtitle or tagline */
+    subtitle?: string;
+    /** Logo click handler */
+    onLogoClick?: () => void;
+    /** Toggle button click handler (opens mobile sidebar) */
+    onToggleSidebar?: () => void;
+    /** Whether to show toggle button */
+    showToggleButton?: boolean;
+    /** Custom toggle icon */
+    toggleIcon?: React.ReactNode;
+    /** Enable search functionality */
+    showSearch?: boolean;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Search value (controlled) */
+    searchValue?: string;
+    /** Search change handler */
+    onSearchChange?: (value: string) => void;
+    /** Search submit handler */
+    onSearchSubmit?: (value: string) => void;
+    /** Search focus handler */
+    onSearchFocus?: () => void;
+    /** Search suggestions/results */
+    searchSuggestions?: SearchSuggestion[];
+    /** Show search loading state */
+    searchLoading?: boolean;
+    /** Custom search icon */
+    searchIcon?: React.ReactNode;
+    /** Notifications list */
+    notifications?: NotificationItem[];
+    /** Notification click handler */
+    onNotificationClick?: (notification: NotificationItem) => void;
+    /** Mark all notifications as read */
+    onMarkAllAsRead?: () => void;
+    /** Clear all notifications */
+    onClearAllNotifications?: () => void;
+    /** View all notifications handler */
+    onViewAllNotifications?: () => void;
+    /** Show notifications bell */
+    showNotifications?: boolean;
+    /** Custom notification icon */
+    notificationIcon?: React.ReactNode;
+    /** Quick action buttons */
+    quickActions?: QuickAction[];
+    /** User's display name */
+    userName?: string;
+    /** User's role, email, or subtitle */
+    userRole?: string;
+    /** User avatar image URL */
+    userAvatar?: string;
+    /** User avatar fallback (initials) */
+    userAvatarFallback?: string;
+    /** User menu dropdown items */
+    userMenuItems?: UserMenuItem[];
+    /** Show user menu */
+    showUserMenu?: boolean;
+    /** User avatar click handler (if no menu) */
+    onUserAvatarClick?: () => void;
+    /** Custom actions/content before user section */
+    actions?: React.ReactNode;
+    /** Custom content in left section (after logo) */
+    leftContent?: React.ReactNode;
+    /** Custom content in center section */
+    centerContent?: React.ReactNode;
+    /** Custom content in right section (before user) */
+    rightContent?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties;
+    /** Visual variant */
+    variant?: 'default' | 'elevated' | 'bordered' | 'minimal' | 'transparent';
+    /** Color theme */
+    theme?: 'light' | 'dark' | 'primary' | 'gradient';
+    /** Whether header is sticky */
+    sticky?: boolean;
+    /** Header height */
+    height?: string | number;
+    /** Whether header has blur effect */
+    blur?: boolean;
+    /** Maximum notification count to display */
+    maxNotifications?: number;
+    /** Whether to auto-hide search on blur */
+    autoHideSearch?: boolean;
+    /** Whether to show breadcrumbs space */
+    showBreadcrumbs?: boolean;
+    /** Breadcrumb items */
+    breadcrumbs?: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }>;
+}
+declare const AdminHeaderWithParsedClasses: (props: AdminHeaderProps & React.RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export { AdminHeaderWithParsedClasses as AdminHeader };
+declare const _default: React.FC<AdminHeaderProps & React.RefAttributes<HTMLElement>>;
+export default _default;

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

@@ -0,0 +1,44 @@
+/**
+ * Widget 1: Complete Admin Dashboard Header
+ * Full-featured header with all components
+ */
+export declare const CompleteDashboardHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 2: Dark Theme Dashboard Header
+ * Professional dark mode header
+ */
+export declare const DarkThemeHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 3: Minimal Clean Header
+ * Simple, clean header for focused interfaces
+ */
+export declare const MinimalHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 4: E-commerce Admin Header
+ * Header optimized for e-commerce admin panels
+ */
+export declare const EcommerceAdminHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 5: Gradient Header
+ * Eye-catching gradient header for modern apps
+ */
+export declare const GradientHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 6: SaaS Application Header
+ * Professional SaaS application header
+ */
+export declare const SaasApplicationHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 7: Compact Mobile-First Header
+ * Optimized for mobile devices
+ */
+export declare const CompactMobileHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Widget 8: Primary Theme Corporate Header
+ * Professional corporate style
+ */
+export declare const CorporateHeader: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Complete Demo Page
+ */
+export declare const AdminHeaderShowcase: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AdminHeader } from './AdminHeader';
+declare const meta: Meta<typeof AdminHeader>;
+export default meta;
+type Story = StoryObj<typeof AdminHeader>;
+/**
+ * Default admin header with all features enabled
+ */
+export declare const Default: Story;
+/**
+ * Interactive example with search functionality
+ */
+export declare const WithSearch: Story;
+/**
+ * Header with dark theme
+ */
+export declare const DarkTheme: Story;
+/**
+ * Header with primary color theme
+ */
+export declare const PrimaryTheme: Story;
+/**
+ * Header with gradient theme
+ */
+export declare const GradientTheme: Story;
+/**
+ * Minimal header without extra features
+ */
+export declare const Minimal: Story;
+/**
+ * Header with breadcrumbs
+ */
+export declare const WithBreadcrumbs: Story;
+/**
+ * Header without avatar (showing fallback)
+ */
+export declare const WithoutAvatar: Story;
+/**
+ * Header with custom quick actions
+ */
+export declare const WithQuickActions: Story;
+/**
+ * Header with transparent variant and blur
+ */
+export declare const TransparentWithBlur: Story;
+/**
+ * Interactive example with notification management
+ */
+export declare const InteractiveNotifications: Story;
+/**
+ * Mobile optimized header
+ */
+export declare const MobileOptimized: Story;

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

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AdminHeader } from './AdminHeader';
+declare const meta: Meta<typeof AdminHeader>;
+export default meta;
+type Story = StoryObj<typeof AdminHeader>;
+/**
+ * Complete Dashboard Header
+ *
+ * Full-featured admin header with all elements:
+ * - Logo and branding
+ * - Search with suggestions
+ * - Quick action buttons
+ * - Notifications panel
+ * - User menu with avatar
+ */
+export declare const CompleteDashboard: Story;
+/**
+ * Dark Theme Header
+ *
+ * Modern dark mode interface perfect for:
+ * - Developer tools
+ * - Late-night admin work
+ * - Reduced eye strain
+ * - Modern aesthetic
+ */
+export declare const DarkTheme: Story;
+/**
+ * Minimal Header
+ *
+ * Clean, distraction-free header for:
+ * - Simple admin panels
+ * - Internal tools
+ * - Minimal interfaces
+ * - Focus-first design
+ */
+export declare const Minimal: Story;
+/**
+ * E-Commerce Admin Header
+ *
+ * Optimized for online store management with:
+ * - Order notifications
+ * - Product quick actions
+ * - Customer insights
+ * - Sales analytics
+ */
+export declare const EcommerceAdmin: Story;
+/**
+ * Gradient Theme Header
+ *
+ * Eye-catching gradient design for:
+ * - Modern dashboards
+ * - Creative tools
+ * - Brand-focused interfaces
+ * - Marketing platforms
+ */
+export declare const GradientHeader: Story;
+/**
+ * SaaS Application Header
+ *
+ * Perfect for Software-as-a-Service platforms with:
+ * - Multi-tenant support
+ * - Workspace switcher
+ * - Breadcrumb navigation
+ * - Team collaboration features
+ */
+export declare const SaasApplication: Story;
+/**
+ * Compact Mobile Header
+ *
+ * Optimized for mobile devices with:
+ * - Compact layout
+ * - Essential features only
+ * - Touch-friendly buttons
+ * - Responsive design
+ */
+export declare const CompactMobile: Story;
+/**
+ * Corporate Enterprise Header
+ *
+ * Professional design for enterprise applications:
+ * - Formal aesthetic
+ * - Comprehensive features
+ * - Multi-level navigation
+ * - Business intelligence focus
+ */
+export declare const CorporateHeader: Story;

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

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

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

@@ -62,58 +62,7 @@ export interface AlertProps {
      */
     role?: 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 AlertWithParsedClasses: (props: AlertProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<AlertProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
-export { Alert };
+export { AlertWithParsedClasses as Alert };

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

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

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

@@ -45,37 +45,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      */
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
-/**
- * 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 BadgeWithParsedClasses: (props: BadgeProps & React.RefAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;
-export { Badge };
+export { BadgeWithParsedClasses as Badge };

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

@@ -71,47 +71,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     darkText?: boolean;
     children?: React.ReactNode;
 }
-/**
- * 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>
- * ```
- */
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+declare const ButtonWithParsedClasses: (props: ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default _default;
+export { ButtonWithParsedClasses as Button };

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

@@ -53,68 +53,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     divider?: boolean;
 }
-/**
- * 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;
- * }
- * ```
- */
-export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+declare const CardWithParsedClasses: (props: CardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<CardProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { CardWithParsedClasses as Card };

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

@@ -51,64 +51,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      */
     inputClassName?: 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 CheckboxWithParsedClasses: (props: CheckboxProps & React.RefAttributes<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;
-export { Checkbox };
+export { CheckboxWithParsedClasses as Checkbox };