@vtx-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import './SideMenu.css';
+export interface SideMenuItemProps {
+    /**
+     * Menu item label
+     */
+    label: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item is active/selected
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Submenu items for nested navigation
+     */
+    items?: SideMenuItemProps[];
+    /**
+     * Badge content (number or text)
+     */
+    badge?: string | number;
+    /**
+     * Custom href for links
+     */
+    href?: string;
+}
+export interface SideMenuProps {
+    /**
+     * Menu items configuration
+     */
+    items: SideMenuItemProps[];
+    /**
+     * Whether the sidebar is collapsed
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Collapse toggle handler
+     */
+    onCollapseToggle?: (collapsed: boolean) => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Sidebar width when expanded
+     * @default '260px'
+     */
+    width?: string | number;
+    /**
+     * Sidebar width when collapsed
+     * @default '80px'
+     */
+    collapsedWidth?: string | number;
+    /**
+     * Header content (logo, title)
+     */
+    header?: React.ReactNode;
+    /**
+     * Footer content
+     */
+    footer?: React.ReactNode;
+}
+/**
+ * SideMenuItem component - Individual sidebar menu item with submenu support
+ */
+export declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & {
+    collapsed?: boolean;
+    level?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * SideMenu component - Professional sidebar navigation for admin panels
+ *
+ * @example
+ * Basic sidebar menu
+ * ```tsx
+ * <SideMenu
+ *   items={[
+ *     { label: 'Dashboard', icon: <DashboardIcon />, active: true },
+ *     {
+ *       label: 'Products',
+ *       icon: <ProductIcon />,
+ *       items: [
+ *         { label: 'All Products', onClick: () => {} },
+ *         { label: 'Categories', onClick: () => {} }
+ *       ]
+ *     },
+ *     { label: 'Settings', icon: <SettingsIcon />, onClick: () => {} }
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * Collapsible sidebar with header
+ * ```tsx
+ * <SideMenu
+ *   collapsed={isCollapsed}
+ *   onCollapseToggle={setIsCollapsed}
+ *   header={<Logo />}
+ *   items={menuItems}
+ * />
+ * ```
+ */
+export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,4 @@
+export { default as SideMenu } from './SideMenu';
+export type { SideMenuProps, SideMenuItemProps } from './SideMenu';
+export { SideMenu as SideMenuComponent } from './SideMenu';
+export { SideMenuItem } from './SideMenu';

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

@@ -0,0 +1,211 @@
+import React, { TableHTMLAttributes } from 'react';
+import './Table.css';
+export interface TableColumn<T = unknown> {
+    /**
+     * Unique key for the column - used as React key and for data access
+     */
+    key: string;
+    /**
+     * Column header text or custom header content
+     */
+    header: React.ReactNode;
+    /**
+     * Function to render cell content
+     * If not provided, displays row[key] directly
+     */
+    render?: (row: T, rowIndex: number) => React.ReactNode;
+    /**
+     * Width of the column (CSS value: px, %, rem, etc.)
+     */
+    width?: string;
+    /**
+     * Minimum width of the column
+     */
+    minWidth?: string;
+    /**
+     * Maximum width of the column
+     */
+    maxWidth?: string;
+    /**
+     * Text alignment for the column
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * If true, column can be sorted
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Custom sort function for this column
+     */
+    sortFn?: (a: T, b: T) => number;
+    /**
+     * If true, column will be sticky (fixed) on horizontal scroll
+     * @default false
+     */
+    sticky?: 'left' | 'right' | false;
+    /**
+     * Custom class name for column cells
+     */
+    className?: string;
+    /**
+     * Custom class name for header cell
+     */
+    headerClassName?: string;
+}
+export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
+    /**
+     * Column definitions
+     */
+    columns: TableColumn<T>[];
+    /**
+     * Data rows to display
+     */
+    data: T[];
+    /**
+     * Function to get unique key for each row
+     * Used for React key prop and row identification
+     */
+    getRowKey: (row: T, index: number) => string | number;
+    /**
+     * If true, table will have striped rows for better readability
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * If true, rows will have hover effect
+     * @default true
+     */
+    hoverable?: boolean;
+    /**
+     * If true, adds borders between cells
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Size variant
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Optional caption for the table (improves accessibility)
+     */
+    caption?: string;
+    /**
+     * Custom empty state content or message
+     * @default 'No data available'
+     */
+    emptyMessage?: React.ReactNode;
+    /**
+     * Loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Custom loading content
+     */
+    loadingContent?: React.ReactNode;
+    /**
+     * If true, table will be horizontally scrollable
+     * @default true
+     */
+    scrollable?: boolean;
+    /**
+     * Maximum height for vertical scrolling
+     * Set to enable vertical scrolling with fixed header
+     */
+    maxHeight?: string;
+    /**
+     * Callback fired when a row is clicked
+     */
+    onRowClick?: (row: T, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * Function to determine if a row is selected
+     */
+    isRowSelected?: (row: T, index: number) => boolean;
+    /**
+     * Callback fired when row selection changes (requires isRowSelected)
+     */
+    onRowSelect?: (row: T, index: number) => void;
+    /**
+     * If true, enables column sorting
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Current sort configuration
+     */
+    sortConfig?: {
+        key: string;
+        direction: 'asc' | 'desc';
+    };
+    /**
+     * Callback fired when sort changes
+     */
+    onSortChange?: (key: string, direction: 'asc' | 'desc') => void;
+    /**
+     * Custom class name for table container
+     */
+    containerClassName?: string;
+}
+/**
+ * Table component - Displays data in rows and columns with advanced features
+ *
+ * A comprehensive table component with support for sorting, selection, loading states,
+ * sticky columns, and customizable rendering.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * const columns = [
+ *   { key: 'name', header: 'Name' },
+ *   { key: 'email', header: 'Email' },
+ *   { key: 'role', header: 'Role', align: 'center' },
+ * ];
+ *
+ * const data = [
+ *   { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+ * ];
+ *
+ * <Table
+ *   columns={columns}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   striped
+ * />
+ * ```
+ *
+ * @example
+ * With sorting and row click
+ * ```tsx
+ * <Table
+ *   columns={columns}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   sortable
+ *   onRowClick={(row) => console.log('Clicked:', row)}
+ * />
+ * ```
+ *
+ * @example
+ * With loading state and custom rendering
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', header: 'Name', sticky: 'left' },
+ *     { key: 'status', header: 'Status', render: (row) => <Badge>{row.status}</Badge> }
+ *   ]}
+ *   data={data}
+ *   getRowKey={(row) => row.id}
+ *   loading={isLoading}
+ *   maxHeight="400px"
+ * />
+ * ```
+ */
+export declare function Table<T = unknown>({ columns, data, getRowKey, striped, hoverable, bordered, size, caption, emptyMessage, loading, loadingContent, scrollable, maxHeight, onRowClick, isRowSelected, onRowSelect, sortable, sortConfig, onSortChange, className, containerClassName, ...props }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Table {
+    var displayName: string;
+}
+declare const _default: React.FC<TableProps & React.RefAttributes<HTMLTableElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Table } from './Table';
+export type { TableProps, TableColumn } from './Table';
+export { Table as TableComponent } from './Table';

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

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import './Text.css';
+export type TextVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'subtitle1' | 'subtitle2' | 'caption' | 'overline' | 'button' | 'label';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+export type TextDecoration = 'none' | 'underline' | 'line-through' | 'overline';
+export type TextWeight = 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export type TextAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'strong' | 'em' | 'small';
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    /**
+     * Typography variant that applies preset styles
+     * @default 'body1'
+     */
+    variant?: TextVariant;
+    /**
+     * HTML element to render as
+     * Automatically inferred from variant if not specified
+     */
+    as?: TextAs;
+    /**
+     * Text alignment
+     */
+    align?: TextAlign;
+    /**
+     * Text color - accepts CSS color values or theme color tokens
+     * Examples: 'primary.500', '#000', 'rgb(0,0,0)', 'neutral.700'
+     */
+    color?: string;
+    /**
+     * Font weight override
+     */
+    weight?: TextWeight | number;
+    /**
+     * Text transform
+     */
+    transform?: TextTransform;
+    /**
+     * Text decoration
+     */
+    decoration?: TextDecoration;
+    /**
+     * Enable text truncation with ellipsis
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Number of lines to show before truncating (requires truncate or clamp)
+     * Uses -webkit-line-clamp for multi-line truncation
+     */
+    lineClamp?: number;
+    /**
+     * Enable word break for long words
+     * @default false
+     */
+    breakWord?: boolean;
+    /**
+     * Enable italic style
+     * @default false
+     */
+    italic?: boolean;
+    /**
+     * Enable underline
+     * @default false
+     */
+    underline?: boolean;
+    /**
+     * Enable strikethrough
+     * @default false
+     */
+    strikethrough?: boolean;
+    /**
+     * Make text gradient with specified colors
+     * Example: ['#667eea', '#764ba2']
+     */
+    gradient?: string[];
+    /**
+     * Disable user selection
+     * @default false
+     */
+    noSelect?: boolean;
+    /**
+     * Custom font size (overrides variant)
+     */
+    size?: string | number;
+    /**
+     * Custom line height (overrides variant)
+     */
+    lineHeight?: string | number;
+    /**
+     * Custom letter spacing (overrides variant)
+     */
+    letterSpacing?: string | number;
+    /**
+     * Remove default margin
+     * @default false
+     */
+    noMargin?: boolean;
+    /**
+     * Remove default padding
+     * @default false
+     */
+    noPadding?: boolean;
+    /**
+     * Children content to render
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Text component - Versatile typography component with theme integration
+ *
+ * A comprehensive text component that provides consistent typography across your application
+ * with full theming support and extensive customization options.
+ *
+ * @example
+ * Basic usage with variants
+ * ```tsx
+ * <Text variant="h1">Heading 1</Text>
+ * <Text variant="body1">Regular body text</Text>
+ * <Text variant="caption" color="neutral.500">Small caption text</Text>
+ * ```
+ *
+ * @example
+ * Custom styling
+ * ```tsx
+ * <Text
+ *   variant="body1"
+ *   weight="bold"
+ *   align="center"
+ *   color="primary.600"
+ * >
+ *   Centered bold text
+ * </Text>
+ * ```
+ *
+ * @example
+ * Truncation and line clamping
+ * ```tsx
+ * <Text truncate>This text will be truncated with ellipsis...</Text>
+ * <Text lineClamp={3}>This text will show only 3 lines before truncating...</Text>
+ * ```
+ *
+ * @example
+ * Gradient text
+ * ```tsx
+ * <Text variant="h2" gradient={['#667eea', '#764ba2']}>
+ *   Gradient Heading
+ * </Text>
+ * ```
+ *
+ * @example
+ * Semantic HTML control
+ * ```tsx
+ * <Text variant="h1" as="h2">Visually h1, semantically h2</Text>
+ * <Text variant="body1" as="label" htmlFor="input">Label with body style</Text>
+ * ```
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export { Text };
+declare const _default: React.FC<TextProps & React.RefAttributes<HTMLElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Text } from './Text';
+export type { TextProps, TextVariant, TextAlign, TextTransform, TextDecoration, TextWeight, TextAs, } from './Text';
+export { Text as TextComponent } from './Text';

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ToastProps } from './types';
+import './Toast.css';
+/**
+ * Toast component - Displays brief notifications to users
+ *
+ * A comprehensive toast notification component with auto-dismiss, progress bar,
+ * pause on hover, and various visual variants for different message types.
+ *
+ * @example
+ * Basic success toast
+ * ```tsx
+ * <Toast variant="success">
+ *   Your changes have been saved successfully!
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Toast with action button
+ * ```tsx
+ * <Toast
+ *   variant="warning"
+ *   action={<Button size="sm">Undo</Button>}
+ *   autoClose={false}
+ * >
+ *   Item moved to trash
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Custom toast with icon
+ * ```tsx
+ * <Toast
+ *   variant="info"
+ *   icon={<CustomIcon />}
+ *   progressBar={false}
+ * >
+ *   Update available for download
+ * </Toast>
+ * ```
+ *
+ * @example
+ * Toast with custom auto-close duration
+ * ```tsx
+ * <Toast
+ *   variant="error"
+ *   autoClose={10000}
+ *   pauseOnHover={false}
+ * >
+ *   Failed to connect to server
+ * </Toast>
+ * ```
+ */
+export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.FC<ToastProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/types/components/Toast/ToastContainer.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ToastContainerProps } from './types';
+import './ToastContainer.css';
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+declare const _default: React.FC<ToastContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -0,0 +1,5 @@
+export { default as Toast } from './Toast';
+export { Toast as ToastComponent } from './Toast';
+export { ToastContainer } from './ToastContainer';
+export { useToast, toast } from './useToast';
+export type { ToastProps, ToastVariant, ToastPosition, ToastOptions, ToastInstance } from './types';