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

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

@@ -73,62 +73,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     className?: string;
 }
-/**
- * RadioGroup component - Manages a group of related radio buttons
- *
- * The RadioGroup component provides a convenient way to manage multiple
- * radio buttons with shared state, labels, and error handling.
- *
- * @example
- * Basic usage
- * ```tsx
- * <RadioGroup
- *   name="plan"
- *   label="Select your plan"
- *   options={[
- *     { value: 'basic', label: 'Basic' },
- *     { value: 'pro', label: 'Pro' },
- *     { value: 'enterprise', label: 'Enterprise' },
- *   ]}
- * />
- * ```
- *
- * @example
- * Controlled mode
- * ```tsx
- * const [selected, setSelected] = useState('basic');
- * <RadioGroup
- *   name="plan"
- *   label="Plan"
- *   options={options}
- *   value={selected}
- *   onChange={setSelected}
- * />
- * ```
- *
- * @example
- * Horizontal layout
- * ```tsx
- * <RadioGroup
- *   name="answer"
- *   label="Your answer"
- *   options={options}
- *   orientation="horizontal"
- * />
- * ```
- *
- * @example
- * With error state
- * ```tsx
- * <RadioGroup
- *   name="required"
- *   label="Required selection"
- *   options={options}
- *   error
- *   helperText="Please select an option"
- * />
- * ```
- */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupWithParsedClasses: (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { RadioGroupWithParsedClasses as RadioGroup };

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

@@ -107,63 +107,7 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     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 SelectWithParsedClasses: (props: SelectProps & React.RefAttributes<HTMLSelectElement>) => import("react/jsx-runtime").JSX.Element;
+export { SelectWithParsedClasses as Select };
 declare const _default: React.FC<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

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

@@ -1,6 +1,10 @@
 import React from 'react';
 import './SideMenu.css';
 export interface SideMenuItemProps {
+    /**
+     * Unique identifier for the menu item
+     */
+    id: string;
     /**
      * Menu item label
      */
@@ -30,11 +34,19 @@ export interface SideMenuItemProps {
     /**
      * Badge content (number or text)
      */
-    badge?: string | number;
+    badge?: React.ReactNode;
     /**
      * Custom href for links
      */
     href?: string;
+    /**
+     * Description or subtitle
+     */
+    description?: string;
+    /**
+     * Custom data attributes
+     */
+    dataAttributes?: Record<string, string>;
 }
 export interface SideMenuProps {
     /**
@@ -56,12 +68,12 @@ export interface SideMenuProps {
     className?: string;
     /**
      * Sidebar width when expanded
-     * @default '260px'
+     * @default '280px'
      */
     width?: string | number;
     /**
      * Sidebar width when collapsed
-     * @default '80px'
+     * @default '72px'
      */
     collapsedWidth?: string | number;
     /**
@@ -72,47 +84,136 @@ export interface SideMenuProps {
      * Footer content
      */
     footer?: React.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * Visual variant style
+     * @default 'default'
+     */
+    variant?: 'default' | 'compact' | 'modern' | 'enterprise' | 'minimal';
+    /**
+     * Color theme
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark' | 'primary' | 'gradient';
+    /**
+     * Position of the sidebar
+     * @default 'left'
+     */
+    position?: 'left' | 'right';
+    /**
+     * If true, sidebar has elevated shadow
+     * @default true
+     */
+    elevated?: boolean;
+    /**
+     * If true, sidebar has border
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * If true, shows collapse toggle button
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Collapse button position
+     * @default 'bottom'
+     */
+    collapseButtonPosition?: 'top' | 'bottom' | 'header';
+    /**
+     * If true, shows tooltips for collapsed items
+     * @default true
+     */
+    showTooltipsWhenCollapsed?: boolean;
+    /**
+     * If true, allows multiple submenus to be open at once
+     * @default true
+     */
+    allowMultipleExpanded?: boolean;
+    /**
+     * Callback when menu item is clicked
+     */
+    onItemClick?: (item: SideMenuItemProps) => void;
+    /**
+     * Custom style object
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom ref
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Whether the mobile menu is open (overlay mode)
+     * @default false
+     */
+    mobileOpen?: boolean;
+    /**
+     * Mobile menu toggle handler
+     */
+    onMobileToggle?: (open: boolean) => void;
+    /**
+     * Breakpoint for mobile mode (px)
+     * @default 768
+     */
+    mobileBreakpoint?: number;
+    /**
+     * If true, shows backdrop when mobile menu is open
+     * @default true
+     */
+    showBackdrop?: boolean;
+    /**
+     * If true, closes menu when item is clicked on mobile
+     * @default true
+     */
+    closeOnItemClick?: boolean;
 }
 /**
- * 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
+ * MobileMenuButton - Button to toggle mobile menu
  *
- * @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: () => {} }
- *   ]}
- * />
- * ```
+ * A dedicated button component for triggering mobile menu overlay.
+ * Shows only on mobile devices (customizable breakpoint).
  *
  * @example
- * Collapsible sidebar with header
  * ```tsx
- * <SideMenu
- *   collapsed={isCollapsed}
- *   onCollapseToggle={setIsCollapsed}
- *   header={<Logo />}
- *   items={menuItems}
+ * const [mobileOpen, setMobileOpen] = useState(false);
+ *
+ * <MobileMenuButton
+ *   onClick={() => setMobileOpen(true)}
+ *   label="Open navigation"
  * />
  * ```
  */
-export declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+export interface MobileMenuButtonProps {
+    /**
+     * Click handler to open mobile menu
+     */
+    onClick?: () => void;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Button label for accessibility
+     * @default 'Open menu'
+     */
+    label?: string;
+    /**
+     * Button variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'ghost' | 'minimal';
+    /**
+     * Custom style
+     */
+    style?: React.CSSProperties;
+}
+declare const MobileMenuButtonComponent: React.FC<MobileMenuButtonProps>;
+export declare const SideMenu: {
+    Default: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
+    Compact: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
+    Modern: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
+    Enterprise: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
+    Minimal: React.FC<SideMenuProps & React.RefAttributes<HTMLElement>>;
+};
+export { MobileMenuButtonComponent as MobileMenuButton };
+export default SideMenu;

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

@@ -0,0 +1,17 @@
+/**
+ * Example: Responsive Layout with Mobile Overlay
+ *
+ * This example demonstrates a complete responsive layout with:
+ * - Desktop: Sidebar pushes content (collapsible)
+ * - Mobile: Sidebar overlays content (with backdrop)
+ * - Hamburger menu button for mobile
+ */
+export declare const ResponsiveLayoutExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example: Dark Theme Responsive
+ */
+export declare const DarkThemeResponsiveExample: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example: Enterprise Layout
+ */
+export declare const EnterpriseResponsiveExample: () => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -149,63 +149,7 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
      */
     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 TableWithParsedClasses: (props: TableProps<unknown>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<TableProps & React.RefAttributes<HTMLTableElement>>;
 export default _default;
+export { TableWithParsedClasses as Table };

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

@@ -105,56 +105,7 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
      */
     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 TextWithParsedClasses: (props: TextProps & React.RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+export { TextWithParsedClasses as Text };
 declare const _default: React.FC<TextProps & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Timeline.css';
+export interface TimelineStep {
+    /** Label for the step */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional custom icon */
+    icon?: React.ReactNode;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+export interface TimelineProps {
+    /** Array of timeline steps */
+    steps: TimelineStep[] | string[];
+    /** Current active step index (0-based) */
+    currentStep: number;
+    /** Orientation of the timeline */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant */
+    variant?: 'default' | 'circle' | 'numbered' | 'simple';
+    /** Show checkmarks on completed steps */
+    showCheckmarks?: boolean;
+    /** Color scheme for active/completed steps */
+    color?: 'primary' | 'success' | 'info' | 'warning' | 'error';
+    /** Size of the timeline */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

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

@@ -0,0 +1,2 @@
+export { default as Timeline } from './Timeline';
+export type { TimelineProps, TimelineStep } from './Timeline';

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

@@ -1,56 +1,7 @@
 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 ToastWithParsedClasses: (props: ToastProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.FC<ToastProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { ToastWithParsedClasses as Toast };

package/dist/types/hoc/withParsedClasses.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function withParsedClasses<T extends {
+    className?: string;
+}>(Component: React.ComponentType<T>): (props: T) => import("react/jsx-runtime").JSX.Element;

package/dist/types/icons/IconComponents.d.ts

@@ -0,0 +1,50 @@
+export declare const SpinnerIcon: (props: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIcon: import("react-icons/lib").IconType;
+export declare const CloseSmallIcon: (props: {
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChevronDownIcon: import("react-icons/lib").IconType;
+export declare const PlusIcon: import("react-icons/lib").IconType;
+export declare const MinusIcon: import("react-icons/lib").IconType;
+export declare const BellIcon: import("react-icons/lib").IconType;
+export declare const MenuIcon: import("react-icons/lib").IconType;
+export declare const ChevronUpIcon: import("react-icons/lib").IconType;
+export declare const ChevronLeftIcon: import("react-icons/lib").IconType;
+export declare const ChevronRightIcon: import("react-icons/lib").IconType;
+export declare const CheckCircleIcon: import("react-icons/lib").IconType;
+export declare const ErrorIcon: import("react-icons/lib").IconType;
+export declare const WarningIcon: import("react-icons/lib").IconType;
+export declare const InfoIcon: import("react-icons/lib").IconType;
+export declare const NeutralIcon: import("react-icons/lib").IconType;
+export declare const DownloadIcon: import("react-icons/lib").IconType;
+export declare const PackageIcon: import("react-icons/lib").IconType;
+export declare const ShoppingBagIcon: import("react-icons/lib").IconType;
+export declare const ShareIcon: import("react-icons/lib").IconType;
+export declare const EyeIcon: import("react-icons/lib").IconType;
+export declare const CreditCardIcon: import("react-icons/lib").IconType;
+export declare const MessageIcon: import("react-icons/lib").IconType;
+export declare const MapPinIcon: import("react-icons/lib").IconType;
+export declare const PhoneIcon: import("react-icons/lib").IconType;
+export declare const TruckIcon: import("react-icons/lib").IconType;
+export declare const CloseIcon: import("react-icons/lib").IconType;
+export declare const ReturnIcon: import("react-icons/lib").IconType;
+export declare const RefreshIcon: import("react-icons/lib").IconType;
+export declare const StarIcon: import("react-icons/lib").IconType;
+export declare const SearchIcon: import("react-icons/lib").IconType;
+export declare const UserIcon: import("react-icons/lib").IconType;
+export declare const HomeIcon: import("react-icons/lib").IconType;
+export declare const ShoppingCartIcon: import("react-icons/lib").IconType;
+export declare const HeartIcon: import("react-icons/lib").IconType;
+export declare const SettingsIcon: import("react-icons/lib").IconType;
+export declare const HelpCircleIcon: import("react-icons/lib").IconType;
+export declare const LogOutIcon: import("react-icons/lib").IconType;
+export declare const TrendingUpIcon: import("react-icons/lib").IconType;
+export declare const LayersIcon: import("react-icons/lib").IconType;
+export declare const ServerIcon: import("react-icons/lib").IconType;
+export declare const CodeIcon: import("react-icons/lib").IconType;
+export declare const ZapIcon: import("react-icons/lib").IconType;
+export declare const ChartBarIcon: import("react-icons/lib").IconType;
+export declare const InboxIcon: import("react-icons/lib").IconType;
+export declare const DocumentIcon: import("react-icons/lib").IconType;

package/dist/types/icons/index.d.ts

@@ -0,0 +1 @@
+export * from './IconComponents';