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

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

@@ -1,211 +0,0 @@
-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/components/Table/index.d.ts

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

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

@@ -1,160 +0,0 @@
-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/components/Text/index.d.ts

@@ -1,3 +0,0 @@
-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/components/Toast/Toast.d.ts

@@ -1,56 +0,0 @@
-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/components/Toast/ToastContainer.d.ts

@@ -1,6 +0,0 @@
-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/components/Toast/index.d.ts

@@ -1,5 +0,0 @@
-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';

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

@@ -1,148 +0,0 @@
-import { ReactNode } from 'react';
-export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'default' | 'primary';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface ToastOptions {
-    /**
-     * Auto close duration in milliseconds
-     * Set to false to disable auto close
-     * @default 5000
-     */
-    autoClose?: number | false;
-    /**
-     * Show close button
-     * @default true
-     */
-    closeButton?: boolean;
-    /**
-     * Show progress bar
-     * @default true
-     */
-    progressBar?: boolean;
-    /**
-     * Pause on hover
-     * @default true
-     */
-    pauseOnHover?: boolean;
-    /**
-     * Pause on focus loss
-     * @default true
-     */
-    pauseOnFocusLoss?: boolean;
-    /**
-     * Toast variant/type
-     * @default 'default'
-     */
-    variant?: ToastVariant;
-    /**
-     * Custom icon or false to hide icon
-     */
-    icon?: ReactNode | false;
-    /**
-     * Custom action button
-     */
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Custom styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * Toast ID for updates/dismissal
-     */
-    toastId?: string | number;
-    /**
-     * Callback when toast is closed
-     */
-    onClose?: () => void;
-    /**
-     * Callback when toast is opened
-     */
-    onOpen?: () => void;
-    /**
-     * Rich content with title and description
-     */
-    title?: string;
-    description?: string;
-    /**
-     * Animation duration in milliseconds
-     * @default 300
-     */
-    animationDuration?: number;
-}
-export interface ToastProps extends ToastOptions {
-    /**
-     * Toast content
-     */
-    children: ReactNode;
-    /**
-     * Whether toast is visible
-     */
-    isVisible: boolean;
-    /**
-     * Function to close the toast
-     */
-    onDismiss: () => void;
-    /**
-     * Unique toast ID
-     */
-    id: string | number;
-    /**
-     * Creation timestamp
-     */
-    createdAt: number;
-}
-export interface ToastContainerProps {
-    /**
-     * Children components to render alongside the toast container
-     */
-    children?: ReactNode;
-    /**
-     * Container position
-     * @default 'top-right'
-     */
-    position?: ToastPosition;
-    /**
-     * Maximum number of toasts to show
-     * @default 5
-     */
-    limit?: number;
-    /**
-     * Gap between toasts in pixels
-     * @default 12
-     */
-    gap?: number;
-    /**
-     * Container margin from viewport edge
-     * @default 16
-     */
-    margin?: number;
-    /**
-     * Custom className for container
-     */
-    className?: string;
-    /**
-     * Custom styles for container
-     */
-    style?: React.CSSProperties;
-    /**
-     * Enable stacked layout for mobile
-     * @default true
-     */
-    stacked?: boolean;
-    /**
-     * Custom theme
-     */
-    theme?: 'light' | 'dark' | 'auto';
-}
-export interface ToastInstance extends ToastOptions {
-    id: string | number;
-    content: ReactNode;
-    createdAt: number;
-    isVisible: boolean;
-}

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

@@ -1,34 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ToastInstance, ToastOptions } from './types';
-interface ToastContextValue {
-    toasts: ToastInstance[];
-    addToast: (content: ReactNode, options?: ToastOptions) => string | number;
-    removeToast: (id: string | number) => void;
-    clearAllToasts: () => void;
-    updateToast: (id: string | number, options: Partial<ToastOptions>) => void;
-}
-export declare const useToast: () => ToastContextValue;
-interface ToastProviderProps {
-    children: ReactNode;
-}
-export declare const ToastProvider: React.FC<ToastProviderProps>;
-declare class ToastManager {
-    private static instance;
-    private addToastFn;
-    private removeToastFn;
-    private clearAllToastsFn;
-    private updateToastFn;
-    static getInstance(): ToastManager;
-    setMethods(addToast: (content: ReactNode, options?: ToastOptions) => string | number, removeToast: (id: string | number) => void, clearAllToasts: () => void, updateToast: (id: string | number, options: Partial<ToastOptions>) => void): void;
-    show(content: ReactNode, options?: ToastOptions): string | number;
-    success(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
-    error(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
-    warning(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
-    info(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
-    primary(content: ReactNode, options?: Omit<ToastOptions, 'variant'>): string | number;
-    dismiss(id: string | number): void;
-    dismissAll(): void;
-    update(id: string | number, options: Partial<ToastOptions>): void;
-}
-export declare const toast: ToastManager;
-export {};