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

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

@@ -1,10 +1,6 @@
 import React from 'react';
 import './SideMenu.css';
 export interface SideMenuItemProps {
-    /**
-     * Unique identifier for the menu item
-     */
-    id: string;
     /**
      * Menu item label
      */
@@ -34,19 +30,11 @@ export interface SideMenuItemProps {
     /**
      * Badge content (number or text)
      */
-    badge?: React.ReactNode;
+    badge?: string | number;
     /**
      * Custom href for links
      */
     href?: string;
-    /**
-     * Description or subtitle
-     */
-    description?: string;
-    /**
-     * Custom data attributes
-     */
-    dataAttributes?: Record<string, string>;
 }
 export interface SideMenuProps {
     /**
@@ -68,12 +56,12 @@ export interface SideMenuProps {
     className?: string;
     /**
      * Sidebar width when expanded
-     * @default '280px'
+     * @default '260px'
      */
     width?: string | number;
     /**
      * Sidebar width when collapsed
-     * @default '72px'
+     * @default '80px'
      */
     collapsedWidth?: string | number;
     /**
@@ -84,136 +72,18 @@ 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;
 }
 /**
- * MobileMenuButton - Button to toggle mobile menu
- *
- * A dedicated button component for triggering mobile menu overlay.
- * Shows only on mobile devices (customizable breakpoint).
- *
- * @example
- * ```tsx
- * const [mobileOpen, setMobileOpen] = useState(false);
- *
- * <MobileMenuButton
- *   onClick={() => setMobileOpen(true)}
- *   label="Open navigation"
- * />
- * ```
+ * SideMenuItem component - Individual sidebar menu item with submenu support
  */
-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 declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & {
+    collapsed?: boolean;
+    level?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const SideMenuWithParsedClasses: {
+    (props: SideMenuProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-export { MobileMenuButtonComponent as MobileMenuButton };
-export default SideMenu;
+declare const _default: React.FC<SideMenuProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { SideMenuWithParsedClasses as SideMenu };

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

@@ -1,17 +1,18 @@
 /**
- * Example: Responsive Layout with Mobile Overlay
+ * Example: Basic Layout with Collapsible Sidebar
  *
- * This example demonstrates a complete responsive layout with:
- * - Desktop: Sidebar pushes content (collapsible)
- * - Mobile: Sidebar overlays content (with backdrop)
- * - Hamburger menu button for mobile
+ * This example demonstrates a simple layout with:
+ * - Collapsible sidebar
+ * - Nested menu items
+ * - Badges for notifications
+ * - Icons and tooltips
  */
-export declare const ResponsiveLayoutExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicLayoutExample: () => import("react/jsx-runtime").JSX.Element;
 /**
- * Example: Dark Theme Responsive
+ * Example: With Links
  */
-export declare const DarkThemeResponsiveExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithLinksExample: () => import("react/jsx-runtime").JSX.Element;
 /**
- * Example: Enterprise Layout
+ * Example: Simple Sidebar
  */
-export declare const EnterpriseResponsiveExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const SimpleExample: () => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,4 +1,5 @@
 import React, { TableHTMLAttributes } from 'react';
+import { Size } from '../../theme';
 import './Table.css';
 export interface TableColumn<T = unknown> {
     /**
@@ -53,6 +54,19 @@ export interface TableColumn<T = unknown> {
      * Custom class name for header cell
      */
     headerClassName?: string;
+    /**
+     * Enable filtering for this column
+     * @default false
+     */
+    filterable?: boolean;
+    /**
+     * Custom filter function
+     */
+    filterFn?: (row: T, filterValue: string) => boolean;
+    /**
+     * Filter placeholder text
+     */
+    filterPlaceholder?: string;
 }
 export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
     /**
@@ -85,9 +99,9 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
     bordered?: boolean;
     /**
      * Size variant
-     * @default 'medium'
+     * @default theme.defaultSize
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: Size;
     /**
      * Optional caption for the table (improves accessibility)
      */
@@ -148,8 +162,98 @@ export interface TableProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTa
      * Custom class name for table container
      */
     containerClassName?: string;
+    /**
+     * If true, enables row selection with checkboxes
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Array of selected row keys
+     */
+    selectedRows?: (string | number)[];
+    /**
+     * Callback fired when selection changes
+     */
+    onSelectionChange?: (selectedKeys: (string | number)[]) => void;
+    /**
+     * If true, enables pagination
+     * @default false
+     */
+    pagination?: boolean;
+    /**
+     * Current page (zero-indexed)
+     * @default 0
+     */
+    page?: number;
+    /**
+     * Number of rows per page
+     * @default 10
+     */
+    rowsPerPage?: number;
+    /**
+     * Options for rows per page selection
+     * @default [5, 10, 25, 50]
+     */
+    rowsPerPageOptions?: number[];
+    /**
+     * Callback fired when page changes
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Callback fired when rows per page changes
+     */
+    onRowsPerPageChange?: (rowsPerPage: number) => void;
+    /**
+     * Dense mode - reduces padding for compact view
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Enable expandable rows
+     */
+    expandableRows?: boolean;
+    /**
+     * Function to render expanded row content
+     */
+    renderExpandedRow?: (row: T, rowIndex: number) => React.ReactNode;
+    /**
+     * Array of expanded row keys
+     */
+    expandedRows?: (string | number)[];
+    /**
+     * Callback fired when row expansion changes
+     */
+    onExpandRow?: (rowKey: string | number) => void;
+    /**
+     * Sticky header when scrolling
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Show toolbar with title and actions
+     */
+    toolbar?: React.ReactNode | {
+        title?: string;
+        actions?: React.ReactNode;
+    };
+    /**
+     * Enable column filtering
+     * @default false
+     */
+    filterable?: boolean;
+    /**
+     * Current filter values
+     */
+    filters?: Record<string, string>;
+    /**
+     * Callback fired when filters change
+     */
+    onFiltersChange?: (filters: Record<string, string>) => void;
 }
-declare const TableWithParsedClasses: (props: TableProps<unknown>) => import("react/jsx-runtime").JSX.Element;
+declare const TableWithParsedClasses: {
+    (props: TableProps<unknown>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 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,7 +105,10 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
      */
     children?: React.ReactNode;
 }
-declare const TextWithParsedClasses: (props: TextProps & React.RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+declare const TextWithParsedClasses: {
+    (props: TextProps & React.RefAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export { TextWithParsedClasses as Text };
 declare const _default: React.FC<TextProps & React.RefAttributes<HTMLElement>>;
 export default _default;

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

@@ -1,7 +1,10 @@
 import React from 'react';
 import { ToastProps } from './types';
 import './Toast.css';
-declare const ToastWithParsedClasses: (props: ToastProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const ToastWithParsedClasses: {
+    (props: ToastProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<ToastProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { ToastWithParsedClasses as Toast };

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

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

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

@@ -48,3 +48,8 @@ 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;
+export declare const ArrowUpIcon: import("react-icons/lib").IconType;
+export declare const ArrowDownIcon: import("react-icons/lib").IconType;
+export declare const FilterIcon: import("react-icons/lib").IconType;
+export declare const ChevronsLeftIcon: import("react-icons/lib").IconType;
+export declare const ChevronsRightIcon: import("react-icons/lib").IconType;

package/dist/types/index.d.ts

@@ -34,6 +34,8 @@ export { Badge } from './components/Badge';
 export type { BadgeProps } from './components/Badge';
 export { Card } from './components/Card';
 export type { CardProps } from './components/Card';
+export { DataGrid } from './components/DataGrid';
+export type { DataGridColumn, DataGridProps, GridFilterItem, GridFilterModel, GridFilterOperator, GridRowSelectionModel, } from './components/DataGrid';
 export { Divider } from './components/Divider';
 export type { DividerProps } from './components/Divider';
 export { Header } from './components/Header';

package/dist/types/stories/components/DataGrid.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../components/DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInitialFilters: Story;
+export declare const ControlledFilters: Story;
+export declare const CustomRendering: Story;
+export declare const WithRowSelection: Story;
+export declare const CompactDensity: Story;
+export declare const ComfortableDensity: Story;
+export declare const AllColumnTypes: Story;
+export declare const WithoutPagination: Story;
+export declare const DisabledFilters: Story;
+export declare const LoadingState: Story;
+export declare const EmptyState: Story;
+export declare const ComplexFiltering: Story;
+export declare const FullFeatured: Story;
+export declare const PinnedColumns: Story;

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

@@ -2,7 +2,10 @@ import type { StoryObj } from '@storybook/react';
 import { SideMenuProps } from '../../components/SideMenu/SideMenu';
 declare const meta: {
     title: string;
-    component: import("react").FC<SideMenuProps & import("react").RefAttributes<HTMLElement>>;
+    component: {
+        (props: SideMenuProps & import("react").RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
     parameters: {
         layout: string;
         docs: {
@@ -17,40 +20,16 @@ declare const meta: {
             control: "object";
             description: string;
         };
-        variant: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
-        theme: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
-        position: {
-            control: "select";
-            options: string[];
-            description: string;
-        };
         collapsed: {
             control: "boolean";
             description: string;
         };
-        elevated: {
-            control: "boolean";
+        width: {
+            control: "text";
             description: string;
         };
-        bordered: {
-            control: "boolean";
-            description: string;
-        };
-        collapsible: {
-            control: "boolean";
-            description: string;
-        };
-        collapseButtonPosition: {
-            control: "select";
-            options: string[];
+        collapsedWidth: {
+            control: "text";
             description: string;
         };
     };
@@ -58,7 +37,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**
- * Default sidebar with light theme
+ * Default sidebar
  */
 export declare const Default: Story;
 /**
@@ -66,66 +45,18 @@ export declare const Default: Story;
  */
 export declare const Collapsed: Story;
 /**
- * Dark theme sidebar
- */
-export declare const DarkTheme: Story;
-/**
- * Primary theme sidebar
- */
-export declare const PrimaryTheme: Story;
-/**
- * Gradient theme sidebar
- */
-export declare const GradientTheme: Story;
-/**
- * Compact variant - space-efficient sidebar
- */
-export declare const CompactVariant: Story;
-/**
- * Modern variant - contemporary design with animations
- */
-export declare const ModernVariant: Story;
-/**
- * Enterprise variant - professional enterprise look
- */
-export declare const EnterpriseVariant: Story;
-/**
- * Minimal variant - clean and subtle styling
- */
-export declare const MinimalVariant: Story;
-/**
- * Right-positioned sidebar
- */
-export declare const RightPosition: Story;
-/**
- * Custom width sidebar
+ * With custom width
  */
 export declare const CustomWidth: Story;
-/**
- * With item descriptions
- */
-export declare const WithDescriptions: Story;
-/**
- * Collapse button in header
- */
-export declare const CollapseInHeader: Story;
-/**
- * No collapse button
- */
-export declare const NotCollapsible: Story;
 /**
  * Simple menu without header/footer
  */
 export declare const SimpleMenu: Story;
 /**
- * All variants comparison
- */
-export declare const AllVariants: Story;
-/**
- * All themes comparison
+ * With nested menus
  */
-export declare const AllThemes: Story;
+export declare const NestedMenus: Story;
 /**
- * With item click handler
+ * With badges
  */
-export declare const WithClickHandler: Story;
+export declare const WithBadges: Story;

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

@@ -16,3 +16,10 @@ export declare const Loading: Story;
 export declare const Empty: Story;
 export declare const LargeDataset: Story;
 export declare const FixedHeader: Story;
+export declare const WithPagination: Story;
+export declare const Dense: Story;
+export declare const WithToolbar: Story;
+export declare const SelectableWithPagination: Story;
+export declare const ExpandableRows: Story;
+export declare const FullFeatures: Story;
+export declare const WithColumnFilters: Story;

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

@@ -1,6 +1,6 @@
 export { ThemeProvider, useThemeContext } from './ThemeProvider';
 export { tokens } from './tokens';
 export { generateCSSVariables, injectCSSVariables } from './cssVariables';
-export type { Theme, ThemeProviderProps } from './ThemeProvider';
+export type { Theme, ThemeProviderProps, Size } from './ThemeProvider';
 export type { Tokens, ColorScale, ColorShade } from './tokens';
 import './base.css';

package/dist/types/widgets/InfoListCard/InfoListCard.d.ts

@@ -34,7 +34,10 @@ export interface InfoListCardProps extends React.HTMLAttributes<HTMLDivElement>
     /** Inline styles */
     style?: React.CSSProperties;
 }
-declare const InfoListCardWithParsedClasses: (props: InfoListCardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const InfoListCardWithParsedClasses: {
+    (props: InfoListCardProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<InfoListCardProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { InfoListCardWithParsedClasses as InfoListCard };

package/dist/types/widgets/OrderCard/OrderCard.d.ts

@@ -62,7 +62,10 @@ export interface OrderCardProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     style?: React.CSSProperties;
 }
-declare const OrderCardWithParsedClasses: (props: OrderCardProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const OrderCardWithParsedClasses: {
+    (props: OrderCardProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<OrderCardProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { OrderCardWithParsedClasses as OrderCard };

package/dist/types/widgets/OrderConfirmation/OrderConfirmation.d.ts

@@ -76,7 +76,10 @@ export interface OrderConfirmationProps extends React.HTMLAttributes<HTMLDivElem
     className?: string;
     style?: React.CSSProperties;
 }
-declare const OrderConfirmationWithParsedClasses: (props: OrderConfirmationProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const OrderConfirmationWithParsedClasses: {
+    (props: OrderConfirmationProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<OrderConfirmationProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { OrderConfirmationWithParsedClasses as OrderConfirmation };

package/dist/types/widgets/OrderDetails/OrderDetails.d.ts

@@ -82,7 +82,10 @@ export interface OrderDetailsProps extends React.HTMLAttributes<HTMLDivElement>
     className?: string;
     style?: React.CSSProperties;
 }
-declare const OrderDetailsWithParsedClasses: (props: OrderDetailsProps & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+declare const OrderDetailsWithParsedClasses: {
+    (props: OrderDetailsProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 declare const _default: React.FC<OrderDetailsProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 export { OrderDetailsWithParsedClasses as OrderDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -49,6 +49,7 @@
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-v8": "^4.0.16",
     "eslint-plugin-storybook": "^10.1.10",