@vtx-ui/react 0.0.1-beta.12 → 0.0.1-beta.14

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

@@ -0,0 +1,236 @@
+import React from 'react';
+import './Navbar.css';
+/**
+ * Navigation item configuration
+ */
+export interface NavigationItem {
+    /**
+     * Label to display
+     */
+    label: string;
+    /**
+     * Link URL
+     */
+    href?: string;
+    /**
+     * Click handler (alternative to href)
+     */
+    onClick?: () => void;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Badge to display next to label
+     */
+    badge?: string | number;
+    /**
+     * Badge variant
+     */
+    badgeVariant?: 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * If true, item is marked as active
+     */
+    active?: boolean;
+    /**
+     * If true, item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Submenu items (for dropdown menus)
+     */
+    children?: NavigationItem[];
+    /**
+     * Mega menu columns (for large dropdown menus)
+     */
+    megaMenu?: MegaMenuColumn[];
+}
+/**
+ * Mega menu column configuration
+ */
+export interface MegaMenuColumn {
+    /**
+     * Column title
+     */
+    title?: string;
+    /**
+     * Items in this column
+     */
+    items: NavigationItem[];
+}
+/**
+ * Top bar configuration (above main navbar)
+ */
+export interface TopBarConfig {
+    /**
+     * Left side content/links
+     */
+    left?: React.ReactNode | NavigationItem[];
+    /**
+     * Right side content/links
+     */
+    right?: React.ReactNode | NavigationItem[];
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Text color
+     */
+    textColor?: string;
+}
+interface NavbarBaseProps {
+    /**
+     * Logo image source
+     */
+    logo?: string;
+    /**
+     * Logo alt text
+     */
+    logoAlt?: string;
+    /**
+     * Logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Brand text (shown if no logo)
+     */
+    brandText?: string;
+    /**
+     * Main navigation items
+     */
+    navigationItems?: NavigationItem[];
+    /**
+     * If true, navbar will be sticky at the top
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, navbar has a shadow
+     * @default true
+     */
+    shadow?: boolean;
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Top bar configuration
+     */
+    topBar?: TopBarConfig;
+    /**
+     * User profile section
+     */
+    user?: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+        menuItems?: NavigationItem[];
+    };
+    /**
+     * Search configuration
+     */
+    search?: {
+        placeholder?: string;
+        onSearch?: (query: string) => void;
+    };
+    /**
+     * Search options for autocomplete
+     */
+    searchOptions?: any[];
+    /**
+     * Function to get label from search option
+     */
+    searchGetOptionLabel?: string | ((option: any) => string);
+    /**
+     * Function to get value from search option
+     */
+    searchGetOptionValue?: string | ((option: any) => string);
+    /**
+     * Function to get description from search option
+     */
+    searchGetOptionDescription?: string | ((option: any) => string | undefined);
+    /**
+     * Function to get icon from search option
+     */
+    searchGetOptionIcon?: string | ((option: any) => React.ReactNode);
+    /**
+     * No options message for search
+     */
+    searchNoOptionsMessage?: string;
+    /**
+     * If true, search is in loading state
+     */
+    searchLoading?: boolean;
+    /**
+     * Callback when search option is selected
+     */
+    onSearchSelect?: (value: string, option: any) => void;
+    /**
+     * Notifications badge count
+     */
+    notificationCount?: number;
+    /**
+     * Notification click handler
+     */
+    onNotificationClick?: () => void;
+    /**
+     * Shopping cart badge count
+     */
+    cartCount?: number;
+    /**
+     * Cart click handler
+     */
+    onCartClick?: () => void;
+    /**
+     * Action buttons (e.g., Login, Sign Up)
+     */
+    actions?: React.ReactNode;
+    /**
+     * If true, uses container for content width
+     * @default true
+     */
+    containerized?: boolean;
+}
+export interface NavbarDesktopProps extends NavbarBaseProps {
+    /**
+     * Layout variant
+     * - single-row: Logo, nav, search, and actions in one row
+     * - two-row: Logo/search in first row, nav in second row
+     * - centered: Logo/nav/actions centered
+     * @default 'single-row'
+     */
+    layout?: 'single-row' | 'two-row' | 'centered';
+}
+export interface NavbarMobileProps extends NavbarBaseProps {
+    /**
+     * If true, drawer is open
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when drawer state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+export interface NavbarResponsiveProps extends NavbarBaseProps {
+    /**
+     * Layout variant for desktop
+     * @default 'single-row'
+     */
+    desktopLayout?: 'single-row' | 'two-row' | 'centered';
+    /**
+     * Breakpoint for switching to mobile view (px)
+     * @default 768
+     */
+    mobileBreakpoint?: number;
+}
+export declare const Navbar: React.FC<NavbarResponsiveProps> & {
+    Desktop: React.FC<NavbarDesktopProps>;
+    Mobile: React.FC<NavbarMobileProps>;
+    Responsive: React.FC<NavbarResponsiveProps>;
+};
+export default Navbar;

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

@@ -0,0 +1,2 @@
+export { Navbar, default } from './Navbar';
+export type { NavigationItem, MegaMenuColumn, TopBarConfig, NavbarDesktopProps, NavbarMobileProps, NavbarResponsiveProps, } from './Navbar';

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { Size } from '../../theme';
+import './RichTextEditor.css';
+export interface RichTextEditorProps {
+    /**
+     * Label text displayed above the editor
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the editor
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, editor is shown in error state
+     * Takes precedence over helperText when both are present
+     */
+    error?: string;
+    /**
+     * Success message - when provided, editor is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the editor
+     * @default theme.defaultSize
+     */
+    size?: Size;
+    /**
+     * If true, editor will take full width of its container
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, shows a clear button when editor has content
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * If true, shows a character counter below the editor
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * Maximum character length
+     */
+    maxLength?: number;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Custom class name for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the editor element itself
+     */
+    editorClassName?: string;
+    /**
+     * Custom class name for the toolbar
+     */
+    toolbarClassName?: string;
+    /**
+     * If true, the field is required
+     */
+    required?: boolean;
+    /**
+     * If true, the editor is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * HTML content of the editor
+     */
+    value?: string;
+    /**
+     * Default HTML content
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when content changes
+     */
+    onChange?: (html: string, text: string) => void;
+    /**
+     * Minimum height of the editor area in pixels
+     * @default 200
+     */
+    minHeight?: number;
+    /**
+     * Custom id for the editor
+     */
+    id?: string;
+    /**
+     * If true, hides the toolbar
+     * @default false
+     */
+    hideToolbar?: boolean;
+    /**
+     * Custom toolbar buttons to show
+     * @default all buttons
+     */
+    toolbarButtons?: ToolbarButton[];
+}
+export type ToolbarButton = 'bold' | 'italic' | 'underline' | 'strikethrough' | 'h1' | 'h2' | 'h3' | 'orderedList' | 'unorderedList' | 'link' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'code' | 'clearFormat' | 'undo' | 'redo';
+/**
+ * RichTextEditor component - A WYSIWYG text editor with formatting toolbar
+ *
+ * A comprehensive rich text editor with support for text formatting, lists, links,
+ * alignment, and character counting.
+ *
+ * @example
+ * Basic usage
+ * ```tsx
+ * <RichTextEditor
+ *   label="Article Content"
+ *   placeholder="Start writing..."
+ *   onChange={(html, text) => setContent(html)}
+ * />
+ * ```
+ *
+ * @example
+ * With character limit
+ * ```tsx
+ * <RichTextEditor
+ *   label="Description"
+ *   maxLength={500}
+ *   showCount
+ *   value={description}
+ *   onChange={(html, text) => setDescription(html)}
+ * />
+ * ```
+ *
+ * @example
+ * With validation
+ * ```tsx
+ * <RichTextEditor
+ *   label="Comment"
+ *   required
+ *   error={error}
+ *   value={comment}
+ *   onChange={(html, text) => handleChange(html, text)}
+ * />
+ * ```
+ */
+declare const RichTextEditor: React.ForwardRefExoticComponent<RichTextEditorProps & React.RefAttributes<HTMLDivElement>>;
+export default RichTextEditor;

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

@@ -0,0 +1,2 @@
+export { default as RichTextEditor } from './RichTextEditor';
+export type { RichTextEditorProps, ToolbarButton } from './RichTextEditor';

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

@@ -22,10 +22,16 @@ export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'colo
      */
     align?: TextAlign;
     /**
-     * Text color - accepts CSS color values or theme color tokens
-     * Examples: 'primary.500', '#000', 'rgb(0,0,0)', 'neutral.700'
+     * Semantic text color - applies predefined theme colors via CSS classes
+     * Examples: 'primary', 'secondary', 'success', 'error', 'warning', 'info'
      */
-    color?: string;
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+    /**
+     * Direct text color override - accepts any CSS color value
+     * Examples: '#000', 'rgb(0,0,0)', '#primary.500'
+     * Overrides semantic color if both are provided
+     */
+    textColor?: string;
     /**
      * Font weight override
      */

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

@@ -0,0 +1,81 @@
+import React, { TextareaHTMLAttributes } from 'react';
+import { Size } from '../../theme';
+import './Textarea.css';
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /**
+     * Label text displayed above the textarea
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the textarea
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, textarea is shown in error state
+     * Takes precedence over helperText when both are present
+     */
+    error?: string;
+    /**
+     * Success message - when provided, textarea is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the textarea
+     * @default theme.defaultSize
+     */
+    size?: Size;
+    /**
+     * If true, textarea will take full width of its container
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, shows a clear button when textarea has value
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * If true, shows a character counter below the textarea
+     * When maxLength is provided, it automatically shows the counter
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Custom class name for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the textarea element itself
+     */
+    textareaClassName?: string;
+    /**
+     * If true, textarea will automatically grow in height based on content
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Minimum number of rows to display
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows to display (only used with autoResize)
+     */
+    maxRows?: number;
+}
+declare const TextareaWithParsedClasses: {
+    (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;
+export { TextareaWithParsedClasses as Textarea };

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

@@ -0,0 +1,3 @@
+export { default as Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { Textarea as TextareaComponent } from './Textarea';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { GridConfig } from './types';
+interface IntelligentGridProps {
+    data: any[];
+    grid?: GridConfig;
+    renderItem: (item: any, index: number) => React.ReactNode;
+    className?: string;
+}
+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;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WidgetConfig } from './types';
+export interface WidgetProps {
+    config: WidgetConfig;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Widget: React.FC<WidgetProps>;
+export default Widget;

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

@@ -0,0 +1,16 @@
+export { default as Widget } from './Widget';
+export type { WidgetProps } from './Widget';
+export * from './types';
+export { default as IntelligentGrid } from './IntelligentGrid';
+export type { IntelligentGridProps } from './IntelligentGrid';
+export { default as MetricWidget } from './renderers/MetricWidget';
+export { default as InfoWidget } from './renderers/InfoWidget';
+export { default as ProductWidget } from './renderers/ProductWidget';
+export { default as OrderWidget } from './renderers/OrderWidget';
+export { default as ListWidget } from './renderers/ListWidget';
+export { default as TextWidget } from './renderers/TextWidget';
+export { default as HeaderWidget } from './renderers/HeaderWidget';
+export { default as CarouselWidget } from './renderers/CarouselWidget';
+export { default as TestimonialWidget } from './renderers/TestimonialWidget';
+export { default as GridCarouselWidget } from './renderers/GridCarouselWidget';
+export type { GridCarouselWidgetProps } from './renderers/GridCarouselWidget';

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { CarouselWidgetData, CarouselWidgetSettings } from '../types';
+interface CarouselWidgetProps {
+    data: CarouselWidgetData;
+    settings?: CarouselWidgetSettings;
+    className?: string;
+    theme?: any;
+    variant?: any;
+    size?: any;
+    style?: React.CSSProperties;
+    borderRadius?: boolean;
+    /**
+     * Custom Carousel/Swiper component to use (e.g., Swiper, react-slick)
+     * @example
+     * import { Swiper, SwiperSlide } from 'swiper/react'
+     * <CarouselWidget carouselComponent={Swiper} slideComponent={SwiperSlide} />
+     */
+    carouselComponent?: React.ElementType;
+    /**
+     * Custom Slide component to use with the carousel
+     */
+    slideComponent?: React.ElementType;
+    /**
+     * Custom Image component to use (e.g., Next.js Image, native img)
+     * @example
+     * import Image from 'next/image'
+     * <CarouselWidget imageComponent={Image} />
+     */
+    imageComponent?: React.ElementType;
+    /**
+     * Props to pass to the carousel component
+     */
+    carouselProps?: Record<string, any>;
+    /**
+     * Props to pass to the image component
+     */
+    imageProps?: Record<string, any>;
+}
+declare const CarouselWidget: React.FC<CarouselWidgetProps>;
+export default CarouselWidget;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { ContentBlockWidgetData, WidgetTheme } from '../types';
+export type ContentBlockLayout = 'media-left' | 'media-right' | 'split-equal' | 'media-top' | 'media-bottom' | 'media-background' | 'centered' | 'centered-media-top' | 'grid-2col' | 'grid-3col' | 'sidebar-left' | 'sidebar-right';
+export interface ContentBlockWidgetSettings {
+    layout?: ContentBlockLayout;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    mediaWidth?: '20%' | '30%' | '40%' | '50%' | '60%' | '70%' | 'auto';
+    contentWidth?: 'narrow' | 'medium' | 'wide' | 'full';
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    contentAlign?: 'left' | 'center' | 'right' | 'justify';
+    verticalAlign?: 'start' | 'center' | 'end' | 'stretch';
+    variant?: 'minimal' | 'card' | 'bordered' | 'elevated' | 'outlined' | 'flat';
+    rounded?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    shadow?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'inner';
+    border?: boolean | 'all' | 'left' | 'right' | 'top' | 'bottom';
+    background?: {
+        color?: string;
+        gradient?: string;
+        opacity?: number;
+    };
+    overlay?: {
+        enabled: boolean;
+        color?: string;
+        opacity?: number;
+        blur?: number;
+        gradient?: 'top' | 'bottom' | 'center' | 'none';
+    };
+    grid?: {
+        columns?: number;
+        gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        minItemWidth?: string;
+    };
+    responsive?: {
+        stackOnMobile?: boolean;
+        stackOnTablet?: boolean;
+        reverseOnMobile?: boolean;
+        hideMediaOnMobile?: boolean;
+    };
+    hover?: {
+        enabled?: boolean;
+        effect?: 'lift' | 'glow' | 'scale' | 'none';
+        mediaZoom?: boolean;
+    };
+    animate?: boolean;
+    animationType?: 'fade' | 'slide-up' | 'slide-left' | 'slide-right' | 'zoom' | 'none';
+}
+export interface ContentBlockWidgetProps {
+    data: ContentBlockWidgetData;
+    settings?: ContentBlockWidgetSettings;
+    theme?: WidgetTheme;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ContentBlockWidget: React.FC<ContentBlockWidgetProps>;
+export default ContentBlockWidget;

package/dist/types/components/Widget/renderers/ContentBlockWidget.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Widget from '../Widget';
+declare const meta: Meta<typeof Widget>;
+export default meta;
+type Story = StoryObj<typeof Widget>;
+export declare const EcommerceProductShowcase: Story;
+export declare const EcommerceProductGrid: Story;
+export declare const EcommerceCategoryBanner: Story;
+export declare const BlogFeaturedPost: Story;
+export declare const BlogQuoteBlock: Story;
+export declare const ServiceFeatureHighlight: Story;
+export declare const ServiceTeamMember: Story;
+export declare const ServiceAboutUs: Story;
+export declare const ServiceProcessStep: Story;
+export declare const SaaSFeature: Story;
+export declare const SaaSPricingCard: Story;
+export declare const SaaSCustomerTestimonial: Story;
+export declare const PortfolioProject: Story;
+export declare const CTABanner: Story;
+export declare const SplitLayoutFeature: Story;
+export declare const SidebarLayout: Story;
+export declare const RealEstateProperty: Story;
+export declare const MinimalInfoCard: Story;
+export declare const CompactFeatureList: Story;