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

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

@@ -0,0 +1,308 @@
+import React from 'react';
+import './Navbar.css';
+export interface TopBarConfig {
+    /**
+     * Content to display in the top bar
+     */
+    content?: React.ReactNode;
+    /**
+     * Left-aligned content
+     */
+    leftContent?: React.ReactNode;
+    /**
+     * Right-aligned content
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * Top bar styling variant
+     * @default 'subtle'
+     */
+    variant?: 'subtle' | 'bold' | 'accent' | 'dark' | 'gradient';
+    /**
+     * If true, shows a dismiss button
+     */
+    dismissible?: boolean;
+    /**
+     * Callback when dismiss button is clicked
+     */
+    onDismiss?: () => void;
+}
+export interface MegaMenuColumn {
+    /**
+     * Column title
+     */
+    title?: React.ReactNode;
+    /**
+     * Column items
+     */
+    items: NavigationItem[];
+}
+export interface NavigationItem {
+    /**
+     * Unique identifier for the navigation item
+     */
+    id: string;
+    /**
+     * Label text to display
+     */
+    label: React.ReactNode;
+    /**
+     * URL or path for navigation
+     */
+    href?: string;
+    /**
+     * Icon to display before label
+     */
+    icon?: React.ReactNode;
+    /**
+     * Nested child items for dropdown menus
+     */
+    children?: NavigationItem[];
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * If true, marks this item as active/selected
+     */
+    active?: boolean;
+    /**
+     * If true, disables the item
+     */
+    disabled?: boolean;
+    /**
+     * Badge content to display (e.g., notification count)
+     */
+    badge?: React.ReactNode;
+    /**
+     * If true, renders as a mega menu with columns
+     */
+    megaMenu?: boolean;
+    /**
+     * Mega menu columns (when megaMenu is true)
+     */
+    megaMenuColumns?: MegaMenuColumn[];
+    /**
+     * Description text for mega menu items
+     */
+    description?: React.ReactNode;
+    /**
+     * Featured image for mega menu
+     */
+    image?: string;
+}
+export interface NavbarDesktopProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Logo element or brand name
+     */
+    logo?: React.ReactNode;
+    /**
+     * Array of navigation items
+     */
+    navItems?: NavigationItem[];
+    /**
+     * Action buttons or elements to display on the right
+     */
+    actions?: React.ReactNode;
+    /**
+     * Visual theme variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
+    /**
+     * If true, navbar has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, navbar sticks to top on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, makes navbar full bleed (no max-width)
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, enables search functionality
+     * @default false
+     */
+    searchEnabled?: boolean;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search input handler
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Search suggestions/options for autocomplete
+     */
+    searchOptions?: any[];
+    /**
+     * Property name or function to extract the display label from search option
+     * @default 'label'
+     */
+    searchGetOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from search option
+     * @default 'value'
+     */
+    searchGetOptionValue?: string | ((option: any) => string);
+    /**
+     * Message to display when no search options are available
+     * @default 'No options'
+     */
+    searchNoOptionsMessage?: string;
+    /**
+     * If true, shows loading state in search autocomplete
+     * @default false
+     */
+    searchLoading?: boolean;
+    /**
+     * Callback fired when a search option is selected
+     */
+    onSearchSelect?: (value: string, option: any) => void;
+    /**
+     * Custom logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Layout style for the navbar
+     * @default 'single-row'
+     */
+    layout?: 'single-row' | 'two-row' | 'centered';
+    /**
+     * Two-row bottom styling variant (only applicable when layout='two-row')
+     * @default 'default'
+     */
+    twoRowBottomStyle?: 'default' | 'divider' | 'dark-bottom' | 'gradient-bottom' | 'elevated-bottom';
+    /**
+     * Top bar configuration (displays above main navbar)
+     */
+    topBar?: TopBarConfig;
+    /**
+     * Scroll behavior - 'transparent-to-solid' makes navbar transparent initially and solid on scroll
+     * @default undefined
+     */
+    scrollBehavior?: 'transparent-to-solid';
+    /**
+     * Scroll threshold in pixels before applying scroll effect
+     * @default 50
+     */
+    scrollThreshold?: number;
+    /**
+     * Callback fired when scroll state changes
+     * @param scrolled - true if user has scrolled past threshold, false otherwise
+     */
+    onScrollStateChange?: (scrolled: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface NavbarMobileProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Logo element or brand name
+     */
+    logo?: React.ReactNode;
+    /**
+     * Array of navigation items
+     */
+    navItems?: NavigationItem[];
+    /**
+     * Action buttons or elements to display on the right
+     */
+    actions?: React.ReactNode;
+    /**
+     * Visual theme variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
+    /**
+     * If true, navbar has a shadow effect
+     * @default false
+     */
+    elevated?: boolean;
+    /**
+     * If true, navbar sticks to top on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * If true, enables search functionality in mobile menu
+     * @default false
+     */
+    searchEnabled?: boolean;
+    /**
+     * Search placeholder text
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search input handler
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Search suggestions/options for autocomplete
+     */
+    searchOptions?: any[];
+    /**
+     * Property name or function to extract the display label from search option
+     * @default 'label'
+     */
+    searchGetOptionLabel?: string | ((option: any) => string);
+    /**
+     * Property name or function to extract the value from search option
+     * @default 'value'
+     */
+    searchGetOptionValue?: string | ((option: any) => string);
+    /**
+     * Message to display when no search options are available
+     * @default 'No options'
+     */
+    searchNoOptionsMessage?: string;
+    /**
+     * If true, shows loading state in search autocomplete
+     * @default false
+     */
+    searchLoading?: boolean;
+    /**
+     * Callback fired when a search option is selected
+     */
+    onSearchSelect?: (value: string, option: any) => void;
+    /**
+     * Custom logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Menu open state (controlled)
+     */
+    menuOpen?: boolean;
+    /**
+     * Menu open change handler (controlled)
+     */
+    onMenuOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface NavbarResponsiveProps {
+    /**
+     * Props for desktop navbar
+     */
+    desktopProps: NavbarDesktopProps;
+    /**
+     * Props for mobile navbar
+     */
+    mobileProps: NavbarMobileProps;
+    /**
+     * Breakpoint in pixels to switch between desktop and mobile
+     * @default 768
+     */
+    breakpoint?: number;
+}
+export declare const Navbar: {
+    Desktop: React.FC<NavbarDesktopProps & React.RefAttributes<HTMLElement>>;
+    Mobile: React.FC<NavbarMobileProps & React.RefAttributes<HTMLElement>>;
+    Responsive: React.FC<NavbarResponsiveProps>;
+};
+export default Navbar;

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Widget } from '../../components/Widget';
+declare const meta: Meta<typeof Widget>;
+export default meta;
+type Story = StoryObj<typeof Widget>;
+export declare const Primary: Story;
+export declare const WithSearch: Story;
+export declare const WithActions: Story;
+export declare const NestedMenu: Story;
+export declare const FullFeatured: Story;
+export declare const TwoRowLayout: Story;
+export declare const WithMegaMenu: Story;
+export declare const AdvancedSearchAutocomplete: Story;
+export declare const SearchWithCustomMessages: Story;
+export declare const MobilePrimary: Story;
+export declare const MobileDark: Story;
+export declare const MobileNested: Story;
+export declare const MobileWithSearch: Story;
+export declare const MobileWithActions: Story;
+export declare const ResponsiveBasic: Story;
+export declare const ResponsiveTwoRowWithMegaMenu: Story;
+export declare const ScrollTransparentToSolid: Story;
+export declare const ScrollTwoRowTransparent: Story;

package/dist/types/widgets/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/widgets/OrderCard/OrderCard.d.ts

@@ -5,6 +5,7 @@ export interface OrderItem {
     name: string;
     image?: string;
     quantity?: number;
+    price?: string | number;
 }
 export interface OrderCardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtx-ui/react",
-  "version": "0.0.1-beta.12",
+  "version": "0.0.1-beta.14",
   "description": "A production-ready React + TypeScript UI library with enterprise-grade components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -107,6 +107,7 @@
     "vitest": "^4.0.16"
   },
   "dependencies": {
+    "date-fns": "^4.1.0",
     "react-icons": "^5.5.0",
     "tslib": "^2.8.1"
   }