@vtx-ui/react 0.0.1-beta.15 → 0.0.1-beta.16

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

@@ -72,10 +72,59 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
      */
     maxRows?: number;
 }
-declare const TextareaWithParsedClasses: {
-    (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+/**
+ * Textarea component - Multi-line text input field with label, helper text, validation states, and rich features
+ *
+ * A comprehensive textarea component with support for auto-resizing, character counting,
+ * clear functionality, and various validation states.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <Textarea
+ *   label="Description"
+ *   placeholder="Enter your description"
+ *   helperText="Provide a detailed description"
+ * />
+ * ```
+ *
+ * @example
+ * With error state
+ * ```tsx
+ * <Textarea
+ *   label="Bio"
+ *   error="Bio must be at least 20 characters"
+ *   value={bio}
+ *   onChange={(e) => setBio(e.target.value)}
+ * />
+ * ```
+ *
+ * @example
+ * With character counter
+ * ```tsx
+ * <Textarea
+ *   label="Comment"
+ *   maxLength={500}
+ *   showCount
+ *   value={comment}
+ *   onChange={(e) => setComment(e.target.value)}
+ * />
+ * ```
+ *
+ * @example
+ * Auto-resizing textarea
+ * ```tsx
+ * <Textarea
+ *   label="Notes"
+ *   autoResize
+ *   minRows={3}
+ *   maxRows={10}
+ *   value={notes}
+ *   onChange={(e) => setNotes(e.target.value)}
+ * />
+ * ```
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 declare const _default: React.FC<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default _default;
-export { TextareaWithParsedClasses as Textarea };
+export { Textarea };

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

@@ -31,4 +31,6 @@ export interface TimelineProps {
     style?: React.CSSProperties;
 }
 declare const Timeline: React.FC<TimelineProps>;
-export default Timeline;
+declare const _default: React.FC<TimelineProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { Timeline };

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

@@ -103,6 +103,7 @@ export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'cont
  * </Tooltip>
  * ```
  */
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.FC<TooltipProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
+export { Tooltip };

package/dist/types/components/Widget/IntelligentGrid.d.ts

@@ -11,5 +11,7 @@ export type { IntelligentGridProps };
  * Intelligent grid system that auto-adjusts based on data array length
  * or uses explicit configuration
  */
-export declare const IntelligentGrid: React.FC<IntelligentGridProps>;
-export default IntelligentGrid;
+declare const IntelligentGrid: React.FC<IntelligentGridProps>;
+declare const _default: React.FC<IntelligentGridProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { IntelligentGrid };

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

@@ -6,4 +6,6 @@ export interface WidgetProps {
     style?: React.CSSProperties;
 }
 declare const Widget: React.FC<WidgetProps>;
-export default Widget;
+declare const _default: React.FC<WidgetProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export { Widget };

package/dist/types/index.d.ts

@@ -40,6 +40,8 @@ export { Toast, toast, ToastContainer, useToast } from './components/Toast';
 export type { ToastContainerProps, ToastOptions, ToastProps, ToastVariant, ToastPosition, ToastInstance } from './components/Toast/types';
 export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
+export { Tabs, TabList, Tab, TabPanels, TabPanel } from './components/Tabs';
+export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps, TabsVariant, TabsOrientation } from './components/Tabs';
 export { Widget } from './components/Widget';
 export type { WidgetProps, WidgetConfig, WidgetTheme, WidgetVariant, MetricWidgetData, MetricWidgetSettings, InfoWidgetData, ProductWidgetData, ProductWidgetSettings, OrderWidgetData, ListWidgetData, TextWidgetData, HeaderWidgetData, GridWidgetData, IntelligentGridProps } from './components/Widget';
 export { AdminHeader } from './components/AdminHeader';
@@ -93,7 +95,7 @@ export type { OrderConfirmationProps, OrderConfirmationItem, OrderConfirmationAd
 export { OrderDetails } from './widgets/OrderDetails';
 export type { OrderDetailsProps, OrderDetailsItem, OrderDetailsAddress } from './widgets/OrderDetails';
 export { DashboardCard } from './widgets/DashboardCard';
-export type { DashboardCardProps, DashboardCardTheme, DashboardCardSize, StatCardProps, StatCardData, StatCardSettings, ProgressCardProps, ProgressCardData, ProgressCardSettings, ComparisonCardProps, ComparisonCardData, ComparisonCardSettings, ActivityCardProps, ActivityCardData, ActivityCardSettings, OrderCardProps, OrderCardData, OrderCardSettings, UserCardProps, UserCardData, UserCardSettings, RevenueCardProps, RevenueCardData, RevenueCardSettings, AlertCardProps, AlertCardData, AlertCardSettings, RankingCardProps, RankingCardData, RankingCardSettings, StatusCardProps, StatusCardData, StatusCardSettings, } from './widgets/DashboardCard';
+export type { DashboardCardProps, DashboardCardTheme, DashboardCardSize, StatCardProps, StatCardData, StatCardSettings, ProgressCardProps, ProgressCardData, ProgressCardSettings, ComparisonCardProps, ComparisonCardData, ComparisonCardSettings, } from './widgets/DashboardCard';
 export { Navbar } from './components/Navbar';
 export type { NavigationItem, MegaMenuColumn, TopBarConfig, NavbarDesktopProps, NavbarMobileProps, NavbarResponsiveProps } from './components/Navbar';
 export { Navbar as Header } from './components/Navbar';

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

@@ -2,10 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { SideMenuProps } from '../../components/SideMenu/SideMenu';
 declare const meta: {
     title: string;
-    component: {
-        (props: SideMenuProps & import("react").RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-        displayName: string;
-    };
+    component: import("react").ForwardRefExoticComponent<SideMenuProps & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
         docs: {

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from '../../components/Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Variants: Story;
+export declare const WithIcons: Story;
+export declare const Vertical: Story;
+export declare const Scrollable: Story;
+export declare const WithScrollControls: Story;

package/dist/types/stories/widgets/DashboardCard.stories.d.ts

@@ -6,54 +6,8 @@ type Story = StoryObj<typeof DashboardCard>;
 export declare const StatCardBasic: Story;
 export declare const StatCardWithTrend: Story;
 export declare const StatCardNegativeTrend: Story;
-export declare const StatCardClickable: Story;
 export declare const ProgressCardBasic: Story;
 export declare const ProgressCardOnTrack: Story;
 export declare const ProgressCardAtRisk: Story;
-export declare const ProgressCardExceeded: Story;
 export declare const ComparisonCardHorizontal: Story;
 export declare const ComparisonCardVertical: Story;
-export declare const ActivityCardBasic: Story;
-export declare const ActivityCardCompact: Story;
-export declare const OrderCardDetailed: Story;
-export declare const OrderCardShipped: Story;
-export declare const OrderCardDelivered: Story;
-export declare const OrderCardCancelled: Story;
-export declare const UserCardHorizontal: Story;
-export declare const UserCardAway: Story;
-export declare const UserCardOffline: Story;
-export declare const RevenueCardDetailed: Story;
-export declare const RevenueCardCompact: Story;
-export declare const AlertCardError: Story;
-export declare const AlertCardWarning: Story;
-export declare const AlertCardSuccess: Story;
-export declare const AlertCardInfo: Story;
-export declare const RankingCardProducts: Story;
-export declare const RankingCardEmployees: Story;
-export declare const StatusCardOnline: Story;
-export declare const StatusCardDegraded: Story;
-export declare const StatusCardOffline: Story;
-export declare const StatusCardMaintenance: Story;
-export declare const LoadingState: Story;
-export declare const DashboardGrid: Story;
-export declare const EcommerceDashboard: Story;
-export declare const HRMSDashboard: Story;
-export declare const SystemMonitoringDashboard: Story;
-export declare const FilledStatCards: Story;
-export declare const FilledActivityCard: Story;
-export declare const FilledProgressCard: Story;
-export declare const FilledUserCard: Story;
-export declare const FilledOrderCard: Story;
-export declare const FilledComparison: Story;
-export declare const FilledDashboardMix: Story;
-export declare const MetricCardLineChart: Story;
-export declare const MetricCardBarChart: Story;
-export declare const MetricCardWithComparison: Story;
-export declare const MetricCardNegativeTrend: Story;
-export declare const MetricCardCompact: Story;
-export declare const MetricCardNoChart: Story;
-export declare const FilledMetricCardPrimary: Story;
-export declare const FilledMetricCardSuccess: Story;
-export declare const FilledMetricCardDanger: Story;
-export declare const AnalyticsDashboard: Story;
-export declare const FilledMetricsDashboard: Story;

package/dist/types/stories/widgets/InfoCard.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../..").WidgetProps>;
+    component: import("react").FC<import("../..").WidgetProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/stories/widgets/InfoText.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../..").WidgetProps>;
+    component: import("react").FC<import("../..").WidgetProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Base: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: import("react").FC<import("../..").WidgetProps>;
+    component: import("react").FC<import("../..").WidgetProps & import("react").RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };

package/dist/types/stories/widgets/ProductCard.stories.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: {
     title: string;
-    component: React.FC<import("../..").WidgetProps>;
+    component: React.FC<import("../..").WidgetProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Basic: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,14 @@
 import React from 'react';
-import './DashboardCard.css';
-export type DashboardCardTheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export type DashboardCardTheme = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
 export type DashboardCardSize = 'sm' | 'md' | 'lg';
+type Variant = 'outlined' | 'filled';
 interface BaseDashboardCardProps {
     className?: string;
     style?: React.CSSProperties;
     onClick?: () => void;
     loading?: boolean;
     size?: DashboardCardSize;
-    variant?: 'outlined' | 'filled';
+    variant?: Variant;
 }
 interface TrendData {
     value: number;
@@ -77,199 +77,6 @@ export interface ComparisonCardProps extends BaseDashboardCardProps {
     data: ComparisonCardData;
     settings?: ComparisonCardSettings;
 }
-export interface ActivityCardData {
-    title: string;
-    onViewAll?: () => void;
-    activities: Array<{
-        id: string;
-        label: string;
-        value?: string | number;
-        timestamp?: string;
-        icon?: React.ReactNode;
-        status?: 'success' | 'warning' | 'danger' | 'info';
-    }>;
-}
-export interface ActivityCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    maxItems?: number;
-    showTimestamps?: boolean;
-    showIcons?: boolean;
-    compact?: boolean;
-}
-export interface ActivityCardProps extends BaseDashboardCardProps {
-    type: 'activity';
-    data: ActivityCardData;
-    settings?: ActivityCardSettings;
-}
-export interface OrderCardData {
-    orderId: string;
-    status: 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled';
-    amount: number;
-    currency?: string;
-    customer?: string;
-    items?: number;
-    date?: string;
-    icon?: React.ReactNode;
-}
-export interface OrderCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showCustomer?: boolean;
-    showItems?: boolean;
-    showDate?: boolean;
-    layout?: 'compact' | 'detailed';
-}
-export interface OrderCardProps extends BaseDashboardCardProps {
-    type: 'order';
-    data: OrderCardData;
-    settings?: OrderCardSettings;
-}
-export interface UserCardData {
-    name: string;
-    role?: string;
-    department?: string;
-    avatar?: React.ReactNode;
-    status?: 'active' | 'away' | 'offline';
-    metrics?: Array<{
-        label: string;
-        value: string | number;
-    }>;
-}
-export interface UserCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showStatus?: boolean;
-    showMetrics?: boolean;
-    layout?: 'horizontal' | 'vertical';
-    avatarSize?: 'sm' | 'md' | 'lg';
-}
-export interface UserCardProps extends BaseDashboardCardProps {
-    type: 'user';
-    data: UserCardData;
-    settings?: UserCardSettings;
-}
-export interface RevenueCardData {
-    amount: number;
-    currency?: string;
-    label: string;
-    period?: string;
-    trend?: TrendData;
-    icon?: React.ReactNode;
-    breakdown?: Array<{
-        label: string;
-        value: number;
-        percentage?: number;
-    }>;
-}
-export interface RevenueCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showTrend?: boolean;
-    showBreakdown?: boolean;
-    showPeriod?: boolean;
-    format?: 'compact' | 'detailed';
-}
-export interface RevenueCardProps extends BaseDashboardCardProps {
-    type: 'revenue';
-    data: RevenueCardData;
-    settings?: RevenueCardSettings;
-}
-export interface AlertCardData {
-    title: string;
-    message: string;
-    severity: 'info' | 'warning' | 'error' | 'success';
-    icon?: React.ReactNode;
-    timestamp?: string;
-    actionLabel?: string;
-    onAction?: () => void;
-}
-export interface AlertCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showIcon?: boolean;
-    showTimestamp?: boolean;
-    dismissible?: boolean;
-    onDismiss?: () => void;
-}
-export interface AlertCardProps extends BaseDashboardCardProps {
-    type: 'alert';
-    data: AlertCardData;
-    settings?: AlertCardSettings;
-}
-export interface RankingCardData {
-    title: string;
-    items: Array<{
-        rank: number;
-        label: string;
-        value: string | number;
-        icon?: React.ReactNode;
-        percentage?: number;
-    }>;
-}
-export interface RankingCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    maxItems?: number;
-    showPercentages?: boolean;
-    showBars?: boolean;
-    highlightTop?: number;
-}
-export interface RankingCardProps extends BaseDashboardCardProps {
-    type: 'ranking';
-    data: RankingCardData;
-    settings?: RankingCardSettings;
-}
-export interface MetricCardData {
-    value: string | number;
-    label: string;
-    icon?: React.ReactNode;
-    trend?: TrendData;
-    subtitle?: string;
-    chartData?: Array<number>;
-    chartType?: 'line' | 'bar';
-    targetValue?: number;
-    comparisonValue?: string | number;
-    comparisonLabel?: string;
-}
-export interface MetricCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showChart?: boolean;
-    showTrend?: boolean;
-    showComparison?: boolean;
-    chartHeight?: number;
-    valueSize?: 'sm' | 'md' | 'lg';
-}
-export interface MetricCardProps extends BaseDashboardCardProps {
-    type: 'metric';
-    data: MetricCardData;
-    settings?: MetricCardSettings;
-}
-export interface StatusCardData {
-    service: string;
-    status: 'online' | 'offline' | 'degraded' | 'maintenance';
-    icon?: React.ReactNode;
-    uptime?: string;
-    lastChecked?: string;
-    metrics?: Array<{
-        label: string;
-        value: string | number;
-    }>;
-}
-export interface StatusCardSettings {
-    theme?: DashboardCardTheme;
-    variant?: 'outlined' | 'filled';
-    showMetrics?: boolean;
-    showUptime?: boolean;
-    showLastChecked?: boolean;
-    layout?: 'compact' | 'detailed';
-}
-export interface StatusCardProps extends BaseDashboardCardProps {
-    type: 'status';
-    data: StatusCardData;
-    settings?: StatusCardSettings;
-}
-export type DashboardCardProps = StatCardProps | ProgressCardProps | ComparisonCardProps | ActivityCardProps | OrderCardProps | UserCardProps | RevenueCardProps | AlertCardProps | RankingCardProps | MetricCardProps | StatusCardProps;
+export type DashboardCardProps = StatCardProps | ProgressCardProps | ComparisonCardProps;
 export declare const DashboardCard: <T extends DashboardCardProps>(props: T & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
 export default DashboardCard;

package/dist/types/widgets/DashboardCard/index.d.ts

@@ -1,2 +1,2 @@
 export { DashboardCard, default } from './DashboardCard';
-export type { DashboardCardProps, DashboardCardTheme, DashboardCardSize, StatCardProps, StatCardData, StatCardSettings, ProgressCardProps, ProgressCardData, ProgressCardSettings, ComparisonCardProps, ComparisonCardData, ComparisonCardSettings, ActivityCardProps, ActivityCardData, ActivityCardSettings, OrderCardProps, OrderCardData, OrderCardSettings, UserCardProps, UserCardData, UserCardSettings, RevenueCardProps, RevenueCardData, RevenueCardSettings, AlertCardProps, AlertCardData, AlertCardSettings, RankingCardProps, RankingCardData, RankingCardSettings, StatusCardProps, StatusCardData, StatusCardSettings, } from './DashboardCard';
+export type { DashboardCardProps, DashboardCardTheme, DashboardCardSize, StatCardProps, StatCardData, StatCardSettings, ProgressCardProps, ProgressCardData, ProgressCardSettings, ComparisonCardProps, ComparisonCardData, ComparisonCardSettings } from './DashboardCard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.15",
+  "version": "0.0.1-beta.16",
   "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",