@vtx-ui/react 0.0.1-beta.1

package/dist/components/Divider/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { Divider as DividerComponent } from './Divider';

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import './Flex.css';
+export interface FlexProps {
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Flex direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Flex wrap behavior */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Justify content alignment */
+    justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+    /** Align items alignment */
+    align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+    /** Align content alignment (multi-line) */
+    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
+    /** Gap between items */
+    gap?: number | string;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: number | string;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: number | string;
+    /** Whether the container is inline-flex */
+    inline?: boolean;
+    /** Whether the container takes full width (default: true) */
+    fullWidth?: boolean;
+    /** Flex grow value */
+    grow?: number;
+    /** Flex shrink value */
+    shrink?: number;
+    /** Flex basis value */
+    basis?: string | number;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** HTML element to render as */
+    as?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'main';
+}
+/**
+ * Flex component - A flexible container for flexbox layouts
+ *
+ * @example
+ * ```tsx
+ * // Basic row with gap
+ * <Flex gap={16}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Flex>
+ *
+ * // Centered column
+ * <Flex direction="column" align="center" justify="center">
+ *   <h1>Title</h1>
+ *   <p>Content</p>
+ * </Flex>
+ *
+ * // Space between with wrap
+ * <Flex justify="between" wrap="wrap" gap={8}>
+ *   <button>Button 1</button>
+ *   <button>Button 2</button>
+ *   <button>Button 3</button>
+ * </Flex>
+ * ```
+ */
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<FlexProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/components/Flex/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { Flex as FlexComponent } from './Flex';

package/dist/components/Grid/Grid.d.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+import './Grid.css';
+type GridSize = boolean | 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * If true, the component will have the flex container behavior
+     * @default false
+     */
+    container?: boolean;
+    /**
+     * If true, the component will have the flex item behavior
+     * @default false
+     */
+    item?: boolean;
+    /**
+     * Defines the space between items (applies to container)
+     * @default 0
+     */
+    spacing?: GridSpacing;
+    /**
+     * Defines the row gap between items (applies to container)
+     */
+    rowSpacing?: GridSpacing;
+    /**
+     * Defines the column gap between items (applies to container)
+     */
+    columnSpacing?: GridSpacing;
+    /**
+     * Number of columns (1-12) for all breakpoints
+     */
+    xs?: GridSize;
+    /**
+     * Number of columns (1-12) for small devices (≥600px)
+     */
+    sm?: GridSize;
+    /**
+     * Number of columns (1-12) for medium devices (≥960px)
+     */
+    md?: GridSize;
+    /**
+     * Number of columns (1-12) for large devices (≥1280px)
+     */
+    lg?: GridSize;
+    /**
+     * Number of columns (1-12) for extra large devices (≥1920px)
+     */
+    xl?: GridSize;
+    /**
+     * Defines the justify-content style property
+     */
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    /**
+     * Defines the align-items style property
+     */
+    alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    /**
+     * Defines the align-content style property
+     */
+    alignContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'stretch';
+    /**
+     * Defines the flex-direction style property
+     */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /**
+     * Defines the flex-wrap style property
+     */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * The content of the component
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Grid component - A responsive grid layout system
+ *
+ * The Grid component uses a 12-column responsive grid layout inspired by Material-UI.
+ * It supports five breakpoints (xs, sm, md, lg, xl) and provides flexible spacing,
+ * alignment, and direction options.
+ *
+ * ## Breakpoints
+ * - xs: 0px and up (extra small devices)
+ * - sm: 600px and up (small devices)
+ * - md: 960px and up (medium devices)
+ * - lg: 1280px and up (large devices)
+ * - xl: 1920px and up (extra large devices)
+ *
+ * ## CSS Customization
+ *
+ * You can customize the grid spacing using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --vtx-grid-spacing-unit: 8px;
+ * }
+ * ```
+ *
+ * @example
+ * Basic grid with equal columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 1</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 2</div>
+ *   </Grid>
+ *   <Grid item xs={12} sm={6} md={4}>
+ *     <div>Column 3</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Responsive layout
+ * ```tsx
+ * <Grid container spacing={3}>
+ *   <Grid item xs={12} md={8}>
+ *     <div>Main content</div>
+ *   </Grid>
+ *   <Grid item xs={12} md={4}>
+ *     <div>Sidebar</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * Auto-width columns
+ * ```tsx
+ * <Grid container spacing={2}>
+ *   <Grid item xs="auto">
+ *     <div>Auto width</div>
+ *   </Grid>
+ *   <Grid item xs>
+ *     <div>Fills remaining space</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ *
+ * @example
+ * With alignment
+ * ```tsx
+ * <Grid container spacing={2} justifyContent="center" alignItems="center">
+ *   <Grid item xs={6}>
+ *     <div>Centered content</div>
+ *   </Grid>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<GridProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/components/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { Grid as GridComponent } from './Grid';

package/dist/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/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/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/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/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/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';