@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,138 @@
+import React from 'react';
+import './Header.css';
+export interface NotificationItem {
+    /**
+     * Notification ID
+     */
+    id: string;
+    /**
+     * Notification title
+     */
+    title: string;
+    /**
+     * Notification description
+     */
+    description?: string;
+    /**
+     * Timestamp or time ago string
+     */
+    time: string;
+    /**
+     * Whether notification is read
+     * @default false
+     */
+    read?: boolean;
+    /**
+     * Notification icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Notification type for styling
+     */
+    type?: 'info' | 'success' | 'warning' | 'error';
+}
+export interface HeaderProps {
+    /**
+     * Logo or brand element
+     */
+    logo?: React.ReactNode;
+    /**
+     * Title text
+     */
+    title?: string;
+    /**
+     * Toggle button click handler (for sidebar)
+     */
+    onToggleSidebar?: () => void;
+    /**
+     * Whether to show toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+    /**
+     * Notifications list
+     */
+    notifications?: NotificationItem[];
+    /**
+     * Notification click handler
+     */
+    onNotificationClick?: (notification: NotificationItem) => void;
+    /**
+     * Mark all as read handler
+     */
+    onMarkAllAsRead?: () => void;
+    /**
+     * User name
+     */
+    userName?: string;
+    /**
+     * User email or role
+     */
+    userSubtitle?: string;
+    /**
+     * User avatar image URL
+     */
+    userAvatar?: string;
+    /**
+     * User menu items
+     */
+    userMenuItems?: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        onClick?: () => void;
+        variant?: 'default' | 'danger';
+        divider?: boolean;
+    }>;
+    /**
+     * Custom actions (buttons, search, etc.)
+     */
+    actions?: React.ReactNode;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Whether header is sticky
+     * @default true
+     */
+    sticky?: boolean;
+}
+/**
+ * Header component - Professional admin panel header with notifications and user menu
+ *
+ * @example
+ * Basic header
+ * ```tsx
+ * <Header
+ *   title="Admin Dashboard"
+ *   userName="John Doe"
+ *   userSubtitle="Admin"
+ *   onToggleSidebar={() => setCollapsed(!collapsed)}
+ * />
+ * ```
+ *
+ * @example
+ * With notifications
+ * ```tsx
+ * <Header
+ *   title="Dashboard"
+ *   notifications={[
+ *     { id: '1', title: 'New order received', time: '2 min ago', read: false },
+ *     { id: '2', title: 'User registered', time: '1 hour ago', read: true }
+ *   ]}
+ *   userName="John Doe"
+ *   userMenuItems={[
+ *     { label: 'Profile', icon: <UserIcon /> },
+ *     { label: 'Settings', icon: <SettingsIcon /> },
+ *     { label: 'Logout', icon: <LogoutIcon />, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Header: React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<HeaderProps & React.RefAttributes<HTMLElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Header } from './Header';
+export type { HeaderProps, NotificationItem } from './Header';
+export { Header as HeaderComponent } from './Header';

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

@@ -0,0 +1,129 @@
+import React, { InputHTMLAttributes } from 'react';
+import './Input.css';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, input is shown in error state
+     * Takes precedence over helperText when both are present
+     */
+    error?: string;
+    /**
+     * Success message - when provided, input is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the input
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * If true, input will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon or element to display at the start of the input
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon or element to display at the end of the input
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * If true, shows a clear button when input has value
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * If true, adds a character counter below the input
+     * Requires maxLength prop to be set
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Custom class name for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the input element itself
+     */
+    inputClassName?: string;
+    /**
+     * Prefix text to display before input value
+     */
+    prefix?: string;
+    /**
+     * Suffix text to display after input value
+     */
+    suffix?: string;
+}
+/**
+ * Input component - Text input field with label, helper text, validation states, and rich features
+ *
+ * A comprehensive input component with support for icons, prefixes, suffixes, character counting,
+ * clear functionality, and various validation states.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   helperText="We'll never share your email"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Input
+ *   label="Username"
+ *   error="Username is already taken"
+ *   value={username}
+ *   onChange={(e) => setUsername(e.target.value)}
+ * />
+ * ```
+ *
+ * @example
+ * With icons and clear button
+ * ```tsx
+ * <Input
+ *   label="Search"
+ *   leftIcon={<SearchIcon />}
+ *   clearable
+ *   onClear={() => setSearch('')}
+ * />
+ * ```
+ *
+ * @example
+ * With character counter
+ * ```tsx
+ * <Input
+ *   label="Bio"
+ *   maxLength={100}
+ *   showCount
+ *   value={bio}
+ *   onChange={(e) => setBio(e.target.value)}
+ * />
+ * ```
+ */
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.FC<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Input } from './Input';
+export type { InputProps } from './Input';
+export { Input as InputComponent } from './Input';

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

@@ -0,0 +1,114 @@
+import React from 'react';
+import './Menu.css';
+export interface MenuItemProps {
+    /**
+     * Menu item label
+     */
+    label: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon to display after label
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item is active/selected
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Item variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * Keyboard shortcut to display
+     */
+    shortcut?: string;
+    /**
+     * Divider after this item
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Submenu items for multi-level menus
+     */
+    items?: MenuItemProps[];
+}
+export interface MenuProps {
+    /**
+     * Menu items configuration
+     */
+    items?: MenuItemProps[];
+    /**
+     * Custom children (MenuItem components)
+     */
+    children?: React.ReactNode;
+    /**
+     * Menu orientation
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Whether menu is responsive (converts to hamburger on mobile)
+     * @default true
+     */
+    responsive?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Menu width (for vertical menus)
+     */
+    width?: string | number;
+}
+/**
+ * MenuItem component - Individual menu item with submenu support
+ */
+export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Menu component - Navigation or action menu with responsive support
+ *
+ * @example
+ * Basic menu with items array
+ * ```tsx
+ * <Menu
+ *   items={[
+ *     { label: 'Profile', icon: <UserIcon />, onClick: () => {} },
+ *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} },
+ *     { label: 'Logout', icon: <LogoutIcon />, onClick: () => {}, variant: 'danger' }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Horizontal menu with custom children
+ * ```tsx
+ * <Menu orientation="horizontal">
+ *   <MenuItem label="Home" active />
+ *   <MenuItem label="Products" />
+ *   <MenuItem label="About" />
+ * </Menu>
+ * ```
+ *
+ * @example
+ * Responsive menu (hamburger on mobile)
+ * ```tsx
+ * <Menu responsive items={menuItems} />
+ * ```
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<MenuProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,4 @@
+export { default as Menu } from './Menu';
+export type { MenuProps, MenuItemProps } from './Menu';
+export { Menu as MenuComponent } from './Menu';
+export { MenuItem } from './Menu';

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import './Modal.css';
+export interface ModalFooterButton {
+    /**
+     * Button label text
+     */
+    label: string;
+    /**
+     * Click handler for the button
+     */
+    onClick: () => void;
+    /**
+     * Button variant
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'warning';
+    /**
+     * Button size
+     * @default 'medium'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback fired when the modal requests to be closed
+     * Called on backdrop click, escape key, or close button click
+     */
+    onClose: () => void;
+    /**
+     * Modal title displayed in header
+     */
+    title?: string;
+    /**
+     * Optional subtitle or description below the title
+     */
+    description?: string;
+    /**
+     * Modal content
+     */
+    children: React.ReactNode;
+    /**
+     * Optional header content to replace the default title area
+     * When provided, title and description are ignored
+     */
+    header?: React.ReactNode;
+    /**
+     * Optional footer content (typically action buttons)
+     * Can be a ReactNode or an array of button configurations
+     */
+    footer?: React.ReactNode;
+    /**
+     * Array of footer buttons to auto-generate footer
+     * If provided, footer prop is ignored
+     */
+    footerButtons?: ModalFooterButton[];
+    /** Size of the modal ('sm', 'md', 'lg', 'fullscreen', 'auto'). Defaults to theme defaultSize */
+    size?: 'sm' | 'md' | 'lg' | 'fullscreen' | 'auto';
+    /**
+     * If false, clicking the backdrop won't close the modal
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * If false, pressing Escape won't close the modal
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * If false, hides the close button in the header
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * If true, modal backdrop will be transparent
+     * @default false
+     */
+    transparentBackdrop?: boolean;
+    /**
+     * Custom class name for the modal content
+     */
+    className?: string;
+    /**
+     * Custom class name for the modal backdrop
+     */
+    backdropClassName?: string;
+    /**
+     * Prevents body scroll when modal is open
+     * @default true
+     */
+    preventScroll?: boolean;
+    /**
+     * Animation variant for modal entrance
+     * @default 'fade'
+     */
+    animation?: 'fade' | 'slide-up' | 'slide-down' | 'zoom' | 'none';
+    /**
+     * Callback fired after modal opens (after animation completes)
+     */
+    onAfterOpen?: () => void;
+    /**
+     * Callback fired after modal closes (after animation completes)
+     */
+    onAfterClose?: () => void;
+    /**
+     * If true, modal will be scrollable inside
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * If true, centers the modal vertically
+     * @default true
+     */
+    centered?: boolean;
+}
+/**
+ * Modal component - Overlay dialog for focused user interactions
+ *
+ * A feature-rich modal component with accessibility features including focus trap,
+ * body scroll lock, keyboard navigation, and customizable animations.
+ *
+ * @example
+ * Basic confirmation modal with footerButtons array
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   description="Are you sure you want to proceed with this action?"
+ *   footerButtons={[
+ *     { label: 'Cancel', onClick: () => setIsOpen(false), variant: 'outline' },
+ *     { label: 'Confirm', onClick: handleConfirm, variant: 'primary' }
+ *   ]}
+ * >
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Custom footer with ReactNode
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Custom Footer"
+ *   footer={
+ *     <>
+ *       <Button onClick={() => setIsOpen(false)}>Cancel</Button>
+ *       <Button variant="primary">Save</Button>
+ *     </>
+ *   }
+ * >
+ *   <p>Custom content here.</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Form modal with custom header
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="large"
+ *   header={<CustomHeader />}
+ *   scrollable
+ * >
+ *   <FormContent />
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Fullscreen modal without backdrop close
+ * ```tsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="fullscreen"
+ *   closeOnBackdropClick={false}
+ *   animation="slide-up"
+ * >
+ *   <FullscreenContent />
+ * </Modal>
+ * ```
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

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

@@ -0,0 +1,3 @@
+export { default as Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { Modal as ModalComponent } from './Modal';