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

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

@@ -0,0 +1,173 @@
+import React, { InputHTMLAttributes } from 'react';
+import { Size } from '../../theme';
+import './Autocomplete.css';
+export interface AutocompleteOption {
+    /**
+     * Value of the option
+     */
+    value: string;
+    /**
+     * Display label for the option
+     */
+    label: string;
+    /**
+     * Optional description or secondary text
+     */
+    description?: string;
+    /**
+     * If true, option cannot be selected
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+}
+export interface AutocompleteProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onSelect'> {
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     * Provides additional context or instructions
+     */
+    helperText?: string;
+    /**
+     * Error message - when provided, input is shown in error state
+     * Takes precedence over helperText when both are present
+     */
+    error?: string;
+    /**
+     * Success message - when provided, input is shown in success state
+     */
+    success?: string;
+    /**
+     * Size of the input
+     * @default theme.defaultSize
+     */
+    size?: Size;
+    /**
+     * If true, input will take full width of its container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Options to display in the autocomplete dropdown
+     */
+    options: any[];
+    /**
+     * 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);
+    /**
+     * 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 description from each option
+     * @default 'description'
+     */
+    getOptionDescription?: string | ((option: any) => string | undefined);
+    /**
+     * Property name or function to extract the icon from each option
+     * @default 'icon'
+     */
+    getOptionIcon?: string | ((option: any) => React.ReactNode);
+    /**
+     * Message to display when no options are available
+     * @default 'No options'
+     */
+    noOptionsMessage?: string;
+    /**
+     * If true, shows a loading spinner
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Loading message to display
+     * @default 'Loading...'
+     */
+    loadingMessage?: string;
+    /**
+     * Callback fired when input value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback fired when an option is selected
+     * Provides the selected option and its value
+     */
+    onSelect?: (value: string, option: any) => void;
+    /**
+     * If true, shows search icon on the left
+     * @default false
+     */
+    showSearchIcon?: boolean;
+    /**
+     * If true, shows a clear button when input has value
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked
+     */
+    onClear?: () => void;
+    /**
+     * Custom class name for the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Custom class name for the label element
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the input element itself
+     */
+    inputClassName?: string;
+    /**
+     * Custom class name for the dropdown element
+     */
+    dropdownClassName?: string;
+    /**
+     * Custom render function for options
+     */
+    renderOption?: (option: any, index: number) => React.ReactNode;
+    /**
+     * Input value (controlled)
+     */
+    value?: string;
+    /**
+     * If true, opens dropdown on focus even if input is empty
+     * @default true
+     */
+    openOnFocus?: boolean;
+    /**
+     * Minimum characters to type before showing options
+     * @default 0
+     */
+    minSearchLength?: number;
+}
+declare const AutocompleteWithParsedClasses: {
+    (props: AutocompleteProps & React.RefAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const _default: React.FC<AutocompleteProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export { AutocompleteWithParsedClasses as Autocomplete };

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

@@ -0,0 +1,2 @@
+export { default as Autocomplete } from './Autocomplete';
+export type { AutocompleteProps, AutocompleteOption } from './Autocomplete';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * If true, always use native <img> even if a custom imageComponent is provided in ThemeProvider
+     * @default false
+     */
+    forceNative?: boolean;
+    /**
+     * Custom image component to use (overrides ThemeProvider)
+     */
+    imageComponent?: React.ElementType;
+}
+export declare const Image: React.FC<ImageProps>;
+export default Image;

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

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export type { ImageProps } from './Image';

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

@@ -52,6 +52,11 @@ export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>,
      * @default false
      */
     external?: boolean;
+    /**
+     * If true or string, triggers browser download
+     * @default false
+     */
+    download?: boolean | string;
     children?: React.ReactNode;
 }
 declare const LinkWithParsedClasses: {

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/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/Widget/renderers/CarouselWidget.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { CarouselWidgetData } from '../types';
+import type { CarouselWidgetData, CarouselWidgetSettings } from '../types';
 interface CarouselWidgetProps {
     data: CarouselWidgetData;
+    settings?: CarouselWidgetSettings;
     className?: string;
     theme?: any;
     variant?: any;

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;

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

@@ -1,11 +1,17 @@
 import React from 'react';
-import { HeaderWidgetData, WidgetTheme, WidgetVariant } from '../types';
+import { HeaderWidgetData, HeaderWidgetSettings, WidgetTheme, WidgetVariant } from '../types';
 interface HeaderWidgetProps {
     data: HeaderWidgetData;
-    theme: WidgetTheme;
+    settings?: HeaderWidgetSettings;
+    /** @deprecated Use settings.theme */
+    theme?: WidgetTheme;
+    /** @deprecated Use settings.variant */
     variant?: WidgetVariant;
+    /** @deprecated Use settings.size */
     size?: 'sm' | 'md' | 'lg';
+    /** @deprecated Use settings.className */
     className?: string;
+    /** @deprecated Use settings.style */
     style?: React.CSSProperties;
 }
 declare const HeaderWidget: React.FC<HeaderWidgetProps>;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ImageWidgetData } from '../types';
+import { ButtonProps } from '../../Button';
+import './ImageWidget.css';
+import { TextVariant } from '../../Text';
+export interface ImageWidgetSettings {
+    /**
+     * Overlay theme: 'dark' (light text) or 'light' (dark text)
+     */
+    overlayTheme?: 'dark' | 'light';
+    /**
+     * CTA button variant (uses ButtonProps['variant'] for type safety)
+     */
+    ctaVariant?: ButtonProps['variant'];
+    /**
+     * If true, always use native <img>
+     */
+    forceNative?: boolean;
+    /**
+     * Custom image component to use
+     */
+    imageComponent?: React.ElementType;
+    /**
+     * Height of the image widget
+     */
+    height?: string;
+    /**
+     * Minimum height of the image widget
+     */
+    minHeight?: string;
+    /**
+     * Object fit property for the image
+     */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Text alignment: 'left', 'center', or 'right'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * Overlay horizontal alignment: 'left', 'center', or 'right'
+     */
+    overlayAlign?: 'left' | 'center' | 'right';
+    /**
+     * Text variant for heading
+     */
+    headingVariant?: TextVariant;
+    /**
+     * Text variant for subHeading
+     */
+    subHeadingVariant?: TextVariant;
+    /**
+     * Text variant for description
+     */
+    descriptionVariant?: TextVariant;
+}
+export interface ImageWidgetProps {
+    /**
+     * Image widget data to display
+     */
+    data: ImageWidgetData;
+    /**
+     * Optional settings for additional features
+     */
+    settings?: ImageWidgetSettings;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ImageWidget: React.FC<ImageWidgetProps>;
+export default ImageWidget;

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

@@ -0,0 +1,11 @@
+import { ImageWidgetProps } from './ImageWidget';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<ImageWidgetProps>;
+export default meta;
+type Story = StoryObj<ImageWidgetProps>;
+export declare const Default: Story;
+export declare const LightOverlay: Story;
+export declare const NoCTA: Story;
+export declare const LeftAligned: Story;
+export declare const RightAligned: Story;
+export declare const CustomTextVariants: Story;

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

@@ -1,11 +1,17 @@
 import React from 'react';
-import { InfoWidgetData, WidgetTheme, WidgetVariant } from '../types';
+import { InfoWidgetData, InfoWidgetSettings, WidgetTheme, WidgetVariant } from '../types';
 interface InfoWidgetProps {
     data: InfoWidgetData;
-    theme: WidgetTheme;
+    settings?: InfoWidgetSettings;
+    /** @deprecated Use settings.theme */
+    theme?: WidgetTheme;
+    /** @deprecated Use settings.variant */
     variant?: WidgetVariant;
+    /** @deprecated Use settings.size */
     size?: 'sm' | 'md' | 'lg';
+    /** @deprecated Use settings.className */
     className?: string;
+    /** @deprecated Use settings.style */
     style?: React.CSSProperties;
 }
 declare const InfoWidget: React.FC<InfoWidgetProps>;