@vtx-ui/react 0.0.1-beta.1

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,169 @@
+import React, { SelectHTMLAttributes } from 'react';
+import './Select.css';
+export interface SelectOption {
+    /**
+     * Value of the option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: string;
+    /**
+     * If true, option cannot be selected
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional group this option belongs to
+     */
+    group?: string;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /**
+     * Label text displayed above the select
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the select
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, select is shown in error state
+     */
+    error?: string;
+    /**
+     * Success message - when provided, select is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the select
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * If true, select will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Options to display in the select dropdown
+     */
+    options: SelectOption[];
+    /**
+     * Placeholder text shown when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * If true, groups options by their group property
+     * @default false
+     */
+    grouped?: boolean;
+    /**
+     * Property name or function to extract the display label from each option
+     * @default 'label'
+     * @example
+     * getOptionLabel="productName" // uses option.productName
+     * getOptionLabel={(option) => option.firstName + ' ' + option.lastName}
+     */
+    getOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from each option
+     * @default 'value'
+     * @example
+     * getOptionValue="id" // uses option.id
+     * getOptionValue={(option) => option.uuid}
+     */
+    getOptionValue?: string | ((option: any) => string | number);
+    /**
+     * Property name or function to determine if an option is disabled
+     * @default 'disabled'
+     * @example
+     * getOptionDisabled="isInactive" // uses option.isInactive
+     * getOptionDisabled={(option) => option.stock === 0}
+     */
+    getOptionDisabled?: string | ((option: any) => boolean);
+    /**
+     * Property name or function to extract the group from each option
+     * @default 'group'
+     * @example
+     * getOptionGroup="category" // uses option.category
+     * getOptionGroup={(option) => option.department}
+     */
+    getOptionGroup?: string | ((option: any) => string);
+    /**
+     * Callback fired when selection changes
+     * Provides both event and selected option
+     */
+    onSelectChange?: (value: string, option: SelectOption | undefined) => void;
+    /**
+     * If true, shows a loading spinner in place of the dropdown icon
+     * @default false
+     */
+    loading?: boolean;
+}
+/**
+ * Select component - Dropdown selection control with label, validation states, and grouping support
+ *
+ * A comprehensive select component with support for grouped options, validation states,
+ * and enhanced accessibility features.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With grouped options
+ * ```tsx
+ * <Select
+ *   label="Framework"
+ *   grouped
+ *   options={[
+ *     { value: 'react', label: 'React', group: 'Frontend' },
+ *     { value: 'vue', label: 'Vue', group: 'Frontend' },
+ *     { value: 'node', label: 'Node.js', group: 'Backend' },
+ *     { value: 'django', label: 'Django', group: 'Backend' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example
+ * With change callback
+ * ```tsx
+ * <Select
+ *   label="Status"
+ *   options={statusOptions}
+ *   onSelectChange={(value, option) => {
+ *     console.log('Selected:', value, option);
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * Customize loading spinner via CSS
+ * ```css
+ * .vtx-select-icon-spinner {
+ *   --vtx-select-loader-color: #10b981;
+ *   --vtx-select-loader-speed: 1.2s;
+ *   --vtx-select-loader-track-opacity: 0.15;
+ *   --vtx-select-loader-path-opacity: 0.85;
+ * }
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export default _default;

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

@@ -0,0 +1,3 @@
+export { default as Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { Select as SelectComponent } from './Select';

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