@opensite/ui 0.4.0 → 0.4.2

package/dist/navbar-platform-resources.d.cts

@@ -2,28 +2,116 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-CKmytxru.cjs';
+import './button-variants-DJbzb6lO.cjs';
 import 'class-variance-authority/types';
 
-interface SolutionItem {
+/**
+ * Base dropdown item interface
+ */
+interface IDropdownItem {
+    title: string;
+    description?: string;
+    href: string;
+    icon?: string;
+    imgUrl?: string;
+}
+/**
+ * Featured item with image (used in featured layouts)
+ */
+interface IFeaturedItem {
     title: string;
-    description: string;
+    description?: string;
     href: string;
-    icon: string;
+    imgUrl: string;
+    label?: string;
 }
-interface PlatformItem {
+/**
+ * Showcase card item (horizontal card with image)
+ */
+interface IShowcaseItem {
     title: string;
+    description?: string;
     href: string;
-    icon: string;
+    imgUrl: string;
 }
-interface ResourceItem {
+/**
+ * CTA card item (call-to-action card with optional image)
+ */
+interface ICtaCard {
     title: string;
-    description: string;
+    description?: string;
     href: string;
-    icon: string;
+    label?: string;
+    imgUrl?: string;
+    badge?: string;
+}
+/**
+ * Grouped section of dropdown items
+ */
+interface IDropdownSection {
+    label: string;
+    items: IDropdownItem[];
+}
+/**
+ * Layout types for dropdown menus
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "simple-list"
+ *    - Visual: Single column vertical list of items with icons and descriptions
+ *    - Behavior: Clean, straightforward list with hover effects
+ *    - Best for: Basic navigation, simple feature lists, straightforward menus
+ *    - Required data: dropdownItems[] with title, description, href, icon
+ *    - Example use case: Simple "Products" menu with 3-5 product links
+ *
+ * 2. "featured-grid"
+ *    - Visual: Large featured item on left (with image), grid of smaller items on right
+ *    - Behavior: Featured item draws attention, grid items are secondary
+ *    - Best for: Highlighting a primary offering while showing related options
+ *    - Required data: featuredItem with title, description, href, imgUrl, badge (optional)
+ *                     dropdownItems[] for grid items
+ *    - Example use case: "Platform" menu featuring main product with related tools
+ *
+ * 3. "two-column-cta"
+ *    - Visual: Two-column grid of items with a prominent CTA card at the bottom
+ *    - Behavior: Grid layout with call-to-action emphasis
+ *    - Best for: Feature showcases with conversion goal, product listings with trial CTA
+ *    - Required data: dropdownItems[] for grid items
+ *                     ctaCard with title, description, href, imgUrl, badge (optional)
+ *    - Example use case: "Use Cases" menu with CTA for "Start Free Trial"
+ *
+ * 4. "list-showcase"
+ *    - Visual: Left column has vertical list, right column has showcase/highlight cards
+ *    - Behavior: Balanced layout showing main items and special highlights
+ *    - Best for: Developer tools with featured integrations, resources with highlights
+ *    - Required data: dropdownItems[] for main list
+ *                     showcaseItems[] with title, description, href, imgUrl, badge (optional)
+ *    - Example use case: "Developers" menu with API docs list and featured SDKs
+ *
+ * 5. "multi-section"
+ *    - Visual: Multiple labeled sections with grouped items, plus optional CTA card
+ *    - Behavior: Organized sections for complex navigation hierarchies
+ *    - Best for: Resource hubs, documentation, content-heavy navigation
+ *    - Required data: sections[] with label and items[]
+ *                     ctaCard (optional) for promotional content
+ *    - Example use case: "Resources" menu with sections for Blog, News, Case Studies, Customers
+ */
+type DropdownLayout = "simple-list" | "featured-grid" | "two-column-cta" | "list-showcase" | "multi-section";
+/**
+ * Menu link with flexible dropdown configuration
+ */
+interface IMenuLink {
+    title: string;
+    href?: string;
+    dropdownItems?: IDropdownItem[];
+    layout?: DropdownLayout;
+    featuredItem?: IFeaturedItem;
+    showcaseItems?: IShowcaseItem[];
+    ctaCard?: ICtaCard;
+    sections?: IDropdownSection[];
 }
 /**
  * Logo configuration interface
@@ -76,25 +164,13 @@ interface NavbarPlatformResourcesProps {
      */
     logoSlot?: React.ReactNode;
     /**
-     * Solutions for Platform menu
-     */
-    solutions?: SolutionItem[];
-    /**
-     * Platform cases for Platform menu
-     */
-    platformCases?: PlatformItem[];
-    /**
-     * Resources for Resources menu
-     */
-    resources?: ResourceItem[];
-    /**
-     * Authentication action configurations
+     * Navigation menu links with optional dropdown groups
      */
-    authActions?: ActionConfig[];
+    menuLinks?: IMenuLink[];
     /**
-     * Custom slot for auth actions (overrides authActions array)
+     * Actions rendered on the right side (desktop) and bottom (mobile)
      */
-    authActionsSlot?: React.ReactNode;
+    actions?: ActionConfig[];
     /**
      * Background style for the section
      */
@@ -117,13 +193,12 @@ interface NavbarPlatformResourcesProps {
     optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * NavbarPlatformResources - A comprehensive navigation bar with platform solutions and resources dropdowns.
+ * NavbarPlatformResources - A navigation bar with flexible dropdown menus and action buttons.
  *
- * Features two main mega-menu dropdowns: Platform (with solutions and use cases) and Resources
- * (with a 3-column grid of AI-related topics). Each item displays an icon, title, and description.
- * Mobile view uses a full-screen overlay with accordion navigation. Ideal for tech platforms
- * and AI/ML product offerings.
+ * Supports grouped dropdowns or simple links via menuLinks, with dropdown items that can
+ * display icons or images. Mobile view uses a full-screen overlay with accordion navigation.
+ * Ideal for platforms that need configurable navigation and supporting resources.
  */
-declare const NavbarPlatformResources: ({ className, containerClassName, navigationMenuClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, solutions, platformCases, resources, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarPlatformResourcesProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarPlatformResources: ({ className, containerClassName, navigationMenuClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarPlatformResourcesProps) => react_jsx_runtime.JSX.Element;
 
-export { NavbarPlatformResources, type NavbarPlatformResourcesProps };
+export { type IDropdownItem, type IMenuLink, NavbarPlatformResources, type NavbarPlatformResourcesProps };

package/dist/navbar-platform-resources.d.ts

@@ -2,28 +2,116 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
 import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
-import './button-variants-CKmytxru.js';
+import './button-variants-DJbzb6lO.js';
 import 'class-variance-authority/types';
 
-interface SolutionItem {
+/**
+ * Base dropdown item interface
+ */
+interface IDropdownItem {
+    title: string;
+    description?: string;
+    href: string;
+    icon?: string;
+    imgUrl?: string;
+}
+/**
+ * Featured item with image (used in featured layouts)
+ */
+interface IFeaturedItem {
     title: string;
-    description: string;
+    description?: string;
     href: string;
-    icon: string;
+    imgUrl: string;
+    label?: string;
 }
-interface PlatformItem {
+/**
+ * Showcase card item (horizontal card with image)
+ */
+interface IShowcaseItem {
     title: string;
+    description?: string;
     href: string;
-    icon: string;
+    imgUrl: string;
 }
-interface ResourceItem {
+/**
+ * CTA card item (call-to-action card with optional image)
+ */
+interface ICtaCard {
     title: string;
-    description: string;
+    description?: string;
     href: string;
-    icon: string;
+    label?: string;
+    imgUrl?: string;
+    badge?: string;
+}
+/**
+ * Grouped section of dropdown items
+ */
+interface IDropdownSection {
+    label: string;
+    items: IDropdownItem[];
+}
+/**
+ * Layout types for dropdown menus
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "simple-list"
+ *    - Visual: Single column vertical list of items with icons and descriptions
+ *    - Behavior: Clean, straightforward list with hover effects
+ *    - Best for: Basic navigation, simple feature lists, straightforward menus
+ *    - Required data: dropdownItems[] with title, description, href, icon
+ *    - Example use case: Simple "Products" menu with 3-5 product links
+ *
+ * 2. "featured-grid"
+ *    - Visual: Large featured item on left (with image), grid of smaller items on right
+ *    - Behavior: Featured item draws attention, grid items are secondary
+ *    - Best for: Highlighting a primary offering while showing related options
+ *    - Required data: featuredItem with title, description, href, imgUrl, badge (optional)
+ *                     dropdownItems[] for grid items
+ *    - Example use case: "Platform" menu featuring main product with related tools
+ *
+ * 3. "two-column-cta"
+ *    - Visual: Two-column grid of items with a prominent CTA card at the bottom
+ *    - Behavior: Grid layout with call-to-action emphasis
+ *    - Best for: Feature showcases with conversion goal, product listings with trial CTA
+ *    - Required data: dropdownItems[] for grid items
+ *                     ctaCard with title, description, href, imgUrl, badge (optional)
+ *    - Example use case: "Use Cases" menu with CTA for "Start Free Trial"
+ *
+ * 4. "list-showcase"
+ *    - Visual: Left column has vertical list, right column has showcase/highlight cards
+ *    - Behavior: Balanced layout showing main items and special highlights
+ *    - Best for: Developer tools with featured integrations, resources with highlights
+ *    - Required data: dropdownItems[] for main list
+ *                     showcaseItems[] with title, description, href, imgUrl, badge (optional)
+ *    - Example use case: "Developers" menu with API docs list and featured SDKs
+ *
+ * 5. "multi-section"
+ *    - Visual: Multiple labeled sections with grouped items, plus optional CTA card
+ *    - Behavior: Organized sections for complex navigation hierarchies
+ *    - Best for: Resource hubs, documentation, content-heavy navigation
+ *    - Required data: sections[] with label and items[]
+ *                     ctaCard (optional) for promotional content
+ *    - Example use case: "Resources" menu with sections for Blog, News, Case Studies, Customers
+ */
+type DropdownLayout = "simple-list" | "featured-grid" | "two-column-cta" | "list-showcase" | "multi-section";
+/**
+ * Menu link with flexible dropdown configuration
+ */
+interface IMenuLink {
+    title: string;
+    href?: string;
+    dropdownItems?: IDropdownItem[];
+    layout?: DropdownLayout;
+    featuredItem?: IFeaturedItem;
+    showcaseItems?: IShowcaseItem[];
+    ctaCard?: ICtaCard;
+    sections?: IDropdownSection[];
 }
 /**
  * Logo configuration interface
@@ -76,25 +164,13 @@ interface NavbarPlatformResourcesProps {
      */
     logoSlot?: React.ReactNode;
     /**
-     * Solutions for Platform menu
-     */
-    solutions?: SolutionItem[];
-    /**
-     * Platform cases for Platform menu
-     */
-    platformCases?: PlatformItem[];
-    /**
-     * Resources for Resources menu
-     */
-    resources?: ResourceItem[];
-    /**
-     * Authentication action configurations
+     * Navigation menu links with optional dropdown groups
      */
-    authActions?: ActionConfig[];
+    menuLinks?: IMenuLink[];
     /**
-     * Custom slot for auth actions (overrides authActions array)
+     * Actions rendered on the right side (desktop) and bottom (mobile)
      */
-    authActionsSlot?: React.ReactNode;
+    actions?: ActionConfig[];
     /**
      * Background style for the section
      */
@@ -117,13 +193,12 @@ interface NavbarPlatformResourcesProps {
     optixFlowConfig?: OptixFlowConfig;
 }
 /**
- * NavbarPlatformResources - A comprehensive navigation bar with platform solutions and resources dropdowns.
+ * NavbarPlatformResources - A navigation bar with flexible dropdown menus and action buttons.
  *
- * Features two main mega-menu dropdowns: Platform (with solutions and use cases) and Resources
- * (with a 3-column grid of AI-related topics). Each item displays an icon, title, and description.
- * Mobile view uses a full-screen overlay with accordion navigation. Ideal for tech platforms
- * and AI/ML product offerings.
+ * Supports grouped dropdowns or simple links via menuLinks, with dropdown items that can
+ * display icons or images. Mobile view uses a full-screen overlay with accordion navigation.
+ * Ideal for platforms that need configurable navigation and supporting resources.
  */
-declare const NavbarPlatformResources: ({ className, containerClassName, navigationMenuClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, solutions, platformCases, resources, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarPlatformResourcesProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarPlatformResources: ({ className, containerClassName, navigationMenuClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarPlatformResourcesProps) => react_jsx_runtime.JSX.Element;
 
-export { NavbarPlatformResources, type NavbarPlatformResourcesProps };
+export { type IDropdownItem, type IMenuLink, NavbarPlatformResources, type NavbarPlatformResourcesProps };