@opensite/ui 0.4.4 → 0.4.6

package/dist/types-COVDidbn.d.cts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+/**
+ * SHARED TYPE INTERFACES FOR ALL NAVBAR COMPONENTS
+ * These types provide a consistent interface across all navbar blocks
+ */
+/**
+ * Logo configuration interface - consistent across all navbars
+ */
+interface LogoConfig {
+    /** URL to navigate to when logo is clicked */
+    url?: string;
+    /** Image source for the logo */
+    src?: string;
+    /** Desktop-specific image source (for responsive logos) */
+    desktopSrc?: string;
+    /** Mobile-specific image source (for responsive logos) */
+    mobileSrc?: string;
+    /** Alt text for the logo image */
+    alt?: string;
+    /** Text title to display (alternative to image) */
+    title?: React.ReactNode;
+    /** Additional CSS classes for the logo */
+    className?: string;
+}
+/**
+ * Base link item - used across all navbar components
+ * Supports both 'href' (preferred) and 'url' (legacy) for URLs
+ */
+interface ILinkItem {
+    /** Display text for the link */
+    label: React.ReactNode;
+    /** Optional description text */
+    description?: React.ReactNode;
+    /** URL the link navigates to (preferred) */
+    href?: string;
+    /** URL the link navigates to (legacy, use href instead) */
+    url?: string;
+    /** Icon element to display */
+    icon?: React.ReactNode;
+    /** Icon name for DynamicIcon component */
+    iconName?: string;
+    /** Image URL for visual representation */
+    image?: string;
+    /** Background color or image for the item */
+    background?: string;
+}
+/**
+ * Group of links with optional metadata
+ */
+interface IMenuLinkGroup {
+    /** Group label/title */
+    label: React.ReactNode;
+    /** Optional group description */
+    description?: string;
+    /** Optional group image */
+    image?: string;
+    /** Links within this group */
+    links: ILinkItem[];
+}
+/**
+ * Layout types for mega menu dropdowns
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "animated-image-preview"
+ *    - Visual: Grid layout with large image preview on left (360px wide), links list on right
+ *    - Behavior: Image changes on hover based on which link is being hovered over
+ *    - Best for: Product showcases, visual content navigation, feature highlights
+ *
+ * 2. "simple-grid"
+ *    - Visual: 2-column responsive grid of cards with icons or images
+ *    - Behavior: Static grid with hover effects on cards
+ *    - Best for: Feature lists, service offerings, general navigation with icons
+ *
+ * 3. "list-with-icons"
+ *    - Visual: Single column list of items with small icons on the left
+ *    - Behavior: Compact list with hover effects
+ *    - Best for: Simple navigation, documentation links, resource lists
+ */
+type MegaMenuLayout = "animated-image-preview" | "simple-grid" | "list-with-icons";
+/**
+ * Menu link configuration with layout-based dropdown options
+ */
+interface IMenuLink {
+    /** Display text for the menu trigger */
+    label: React.ReactNode;
+    /** Direct link URL (for non-dropdown items) */
+    href?: string;
+    /** Layout type for dropdown content */
+    layout?: MegaMenuLayout;
+    /** Links array for dropdown content */
+    links?: ILinkItem[];
+    /** Grouped links for more complex layouts */
+    dropdownGroups?: IMenuLinkGroup[];
+}
+/**
+ * Layout variant types for navbar components
+ *
+ * LAYOUT VARIANT OPTIONS:
+ *
+ * 1. "fullScreenContainerizedLinks" (default)
+ *    - Visual: Full-screen navbar with links inside a standard container (responsive max-width)
+ *    - Behavior: Navbar background spans full width, but logo/links/actions are containerized
+ *    - Best for: Standard websites with consistent content width
+ *
+ * 2. "fullScreenFullWidthLinks"
+ *    - Visual: Full-screen navbar without container constraints on links
+ *    - Behavior: Navbar and all content span full width with custom padding
+ *    - Best for: Wide layouts, edge-to-edge designs
+ *
+ * 3. "floatingBar"
+ *    - Visual: Floating navbar style with rounded borders and shadow
+ *    - Behavior: Navbar appears as a floating bar with border-radius and contained width
+ *    - Best for: Modern, elevated navigation designs
+ */
+type NavbarLayoutVariant = "fullScreenContainerizedLinks" | "fullScreenFullWidthLinks" | "floatingBar";
+
+export type { IMenuLink as I, LogoConfig as L, MegaMenuLayout as M, NavbarLayoutVariant as N, IMenuLinkGroup as a, ILinkItem as b };

package/dist/types-COVDidbn.d.ts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+/**
+ * SHARED TYPE INTERFACES FOR ALL NAVBAR COMPONENTS
+ * These types provide a consistent interface across all navbar blocks
+ */
+/**
+ * Logo configuration interface - consistent across all navbars
+ */
+interface LogoConfig {
+    /** URL to navigate to when logo is clicked */
+    url?: string;
+    /** Image source for the logo */
+    src?: string;
+    /** Desktop-specific image source (for responsive logos) */
+    desktopSrc?: string;
+    /** Mobile-specific image source (for responsive logos) */
+    mobileSrc?: string;
+    /** Alt text for the logo image */
+    alt?: string;
+    /** Text title to display (alternative to image) */
+    title?: React.ReactNode;
+    /** Additional CSS classes for the logo */
+    className?: string;
+}
+/**
+ * Base link item - used across all navbar components
+ * Supports both 'href' (preferred) and 'url' (legacy) for URLs
+ */
+interface ILinkItem {
+    /** Display text for the link */
+    label: React.ReactNode;
+    /** Optional description text */
+    description?: React.ReactNode;
+    /** URL the link navigates to (preferred) */
+    href?: string;
+    /** URL the link navigates to (legacy, use href instead) */
+    url?: string;
+    /** Icon element to display */
+    icon?: React.ReactNode;
+    /** Icon name for DynamicIcon component */
+    iconName?: string;
+    /** Image URL for visual representation */
+    image?: string;
+    /** Background color or image for the item */
+    background?: string;
+}
+/**
+ * Group of links with optional metadata
+ */
+interface IMenuLinkGroup {
+    /** Group label/title */
+    label: React.ReactNode;
+    /** Optional group description */
+    description?: string;
+    /** Optional group image */
+    image?: string;
+    /** Links within this group */
+    links: ILinkItem[];
+}
+/**
+ * Layout types for mega menu dropdowns
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "animated-image-preview"
+ *    - Visual: Grid layout with large image preview on left (360px wide), links list on right
+ *    - Behavior: Image changes on hover based on which link is being hovered over
+ *    - Best for: Product showcases, visual content navigation, feature highlights
+ *
+ * 2. "simple-grid"
+ *    - Visual: 2-column responsive grid of cards with icons or images
+ *    - Behavior: Static grid with hover effects on cards
+ *    - Best for: Feature lists, service offerings, general navigation with icons
+ *
+ * 3. "list-with-icons"
+ *    - Visual: Single column list of items with small icons on the left
+ *    - Behavior: Compact list with hover effects
+ *    - Best for: Simple navigation, documentation links, resource lists
+ */
+type MegaMenuLayout = "animated-image-preview" | "simple-grid" | "list-with-icons";
+/**
+ * Menu link configuration with layout-based dropdown options
+ */
+interface IMenuLink {
+    /** Display text for the menu trigger */
+    label: React.ReactNode;
+    /** Direct link URL (for non-dropdown items) */
+    href?: string;
+    /** Layout type for dropdown content */
+    layout?: MegaMenuLayout;
+    /** Links array for dropdown content */
+    links?: ILinkItem[];
+    /** Grouped links for more complex layouts */
+    dropdownGroups?: IMenuLinkGroup[];
+}
+/**
+ * Layout variant types for navbar components
+ *
+ * LAYOUT VARIANT OPTIONS:
+ *
+ * 1. "fullScreenContainerizedLinks" (default)
+ *    - Visual: Full-screen navbar with links inside a standard container (responsive max-width)
+ *    - Behavior: Navbar background spans full width, but logo/links/actions are containerized
+ *    - Best for: Standard websites with consistent content width
+ *
+ * 2. "fullScreenFullWidthLinks"
+ *    - Visual: Full-screen navbar without container constraints on links
+ *    - Behavior: Navbar and all content span full width with custom padding
+ *    - Best for: Wide layouts, edge-to-edge designs
+ *
+ * 3. "floatingBar"
+ *    - Visual: Floating navbar style with rounded borders and shadow
+ *    - Behavior: Navbar appears as a floating bar with border-radius and contained width
+ *    - Best for: Modern, elevated navigation designs
+ */
+type NavbarLayoutVariant = "fullScreenContainerizedLinks" | "fullScreenFullWidthLinks" | "floatingBar";
+
+export type { IMenuLink as I, LogoConfig as L, MegaMenuLayout as M, NavbarLayoutVariant as N, IMenuLinkGroup as a, ILinkItem as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3345,7 +3345,7 @@
   "optionalDependencies": {
     "valibot": "^1.2.0"
   },
-  "packageManager": "pnpm@9.14.4",
+  "packageManager": "pnpm@10.28.1",
   "engines": {
     "node": ">=18.0.0",
     "pnpm": ">=9.0.0"