@medalsocial/meda 2.2.0 → 2.3.0

package/dist/marketing/index.d.ts

@@ -1,14 +1,19 @@
+export { MarketingAnnouncementBar } from './marketing-announcement-bar.js';
 export { MarketingBentoCard } from './marketing-bento-card.js';
 export { MarketingBentoGrid } from './marketing-bento-grid.js';
 export { MarketingCallout } from './marketing-callout.js';
 export { MarketingContact } from './marketing-contact.js';
+export { MarketingCTA } from './marketing-cta.js';
 export { MarketingCtaList } from './marketing-cta-list.js';
 export { MarketingFAQ } from './marketing-faq.js';
 export { MarketingFooter } from './marketing-footer.js';
 export { MarketingHeader } from './marketing-header.js';
 export { MarketingHeaderLogo } from './marketing-header-logo.js';
+export { MarketingHero } from './marketing-hero.js';
 export { MarketingLeadMagnet } from './marketing-lead-magnet.js';
+export { MarketingMegaMenu } from './marketing-mega-menu.js';
 export { MarketingNavItem } from './marketing-nav-item.js';
+export { MarketingNumberedFeatures } from './marketing-numbered-features.js';
 export { MarketingShell } from './marketing-shell.js';
 export { MarketingTrustBar } from './marketing-trust-bar.js';
-export type { MarketingAlign, MarketingBentoCardProps, MarketingBentoGridProps, MarketingCalloutProps, MarketingCalloutVariant, MarketingContactPerson, MarketingContactProps, MarketingCta, MarketingCtaListProps, MarketingCtaVariant, MarketingFAQItem, MarketingFAQProps, MarketingFooterColumn, MarketingFooterProps, MarketingHeaderProps, MarketingHeaderUser, MarketingLeadMagnetProps, MarketingLeadMagnetVariant, MarketingNavItemDescriptor, MarketingOffice, MarketingShellProps, MarketingTrustBarProps, MarketingTrustStat, } from './types.js';
+export type { MarketingAlign, MarketingAnnouncementBarProps, MarketingBentoCardProps, MarketingBentoGridProps, MarketingCalloutProps, MarketingCalloutVariant, MarketingContactPerson, MarketingContactProps, MarketingCTAProps, MarketingCta, MarketingCtaListProps, MarketingCtaVariant, MarketingFAQItem, MarketingFAQProps, MarketingFooterColumn, MarketingFooterProps, MarketingHeaderProps, MarketingHeaderUser, MarketingHeroProps, MarketingLeadMagnetProps, MarketingLeadMagnetVariant, MarketingMegaMenuFeature, MarketingMegaMenuProps, MarketingNavItemDescriptor, MarketingNumberedFeature, MarketingNumberedFeaturesProps, MarketingOffice, MarketingShellProps, MarketingTrustBarProps, MarketingTrustStat, } from './types.js';

package/dist/marketing/index.js

@@ -1,13 +1,18 @@
+export { MarketingAnnouncementBar } from './marketing-announcement-bar.js';
 export { MarketingBentoCard } from './marketing-bento-card.js';
 export { MarketingBentoGrid } from './marketing-bento-grid.js';
 export { MarketingCallout } from './marketing-callout.js';
 export { MarketingContact } from './marketing-contact.js';
+export { MarketingCTA } from './marketing-cta.js';
 export { MarketingCtaList } from './marketing-cta-list.js';
 export { MarketingFAQ } from './marketing-faq.js';
 export { MarketingFooter } from './marketing-footer.js';
 export { MarketingHeader } from './marketing-header.js';
 export { MarketingHeaderLogo } from './marketing-header-logo.js';
+export { MarketingHero } from './marketing-hero.js';
 export { MarketingLeadMagnet } from './marketing-lead-magnet.js';
+export { MarketingMegaMenu } from './marketing-mega-menu.js';
 export { MarketingNavItem } from './marketing-nav-item.js';
+export { MarketingNumberedFeatures } from './marketing-numbered-features.js';
 export { MarketingShell } from './marketing-shell.js';
 export { MarketingTrustBar } from './marketing-trust-bar.js';

package/dist/marketing/marketing-announcement-bar.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingAnnouncementBarProps } from './types.js';
+export declare function MarketingAnnouncementBar({ href, icon, children, className, }: MarketingAnnouncementBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-announcement-bar.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function MarketingAnnouncementBar({ href, icon, children, className, }) {
+    const Tag = href ? 'a' : 'span';
+    return (_jsxs(Tag, { ...(href ? { href } : {}), className: cx('inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/50 px-4 py-1.5 text-xs font-medium text-foreground/80 backdrop-blur', className), children: [icon, children] }));
+}

package/dist/marketing/marketing-cta.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingCTAProps } from './types.js';
+export declare function MarketingCTA({ eyebrow, title, subtitle, ctas, className }: MarketingCTAProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-cta.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function MarketingCTA({ eyebrow, title, subtitle, ctas, className }) {
+    return (_jsxs("section", { className: cx('mx-auto w-full max-w-4xl px-6 py-24 text-center', className), children: [eyebrow && _jsx("p", { className: "mb-3 text-sm font-semibold text-primary", children: eyebrow }), _jsx("h2", { className: "mx-auto max-w-3xl text-4xl font-semibold sm:text-5xl", children: title }), subtitle && (_jsx("p", { className: "mx-auto mt-4 max-w-xl text-base text-muted-foreground sm:text-lg", children: subtitle })), ctas && _jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: ctas })] }));
+}

package/dist/marketing/marketing-header.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { MarketingNavItem } from './marketing-nav-item.js';
 import { cx } from './utils.js';
 const DEFAULT_SIGN_IN = '/sign-in';
@@ -12,6 +13,7 @@ function DefaultLoggedIn({ appHref }) {
     return (_jsx("a", { href: appHref, className: "inline-flex items-center rounded-full bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90", children: "Open dashboard" }));
 }
 export function MarketingHeader({ logo, navItems = [], user, signInHref = DEFAULT_SIGN_IN, signUpHref = DEFAULT_SIGN_UP, appHref = DEFAULT_APP, rightSlot, toggles, renderLoggedOut, renderLoggedIn, className, }) {
+    const [openId, setOpenId] = useState(null);
     let right;
     if (rightSlot !== undefined) {
         right = rightSlot;
@@ -22,5 +24,7 @@ export function MarketingHeader({ logo, navItems = [], user, signInHref = DEFAUL
     else {
         right = renderLoggedOut ? (renderLoggedOut({ signInHref, signUpHref })) : (_jsx(DefaultLoggedOut, { signInHref: signInHref, signUpHref: signUpHref }));
     }
-    return (_jsxs("nav", { "aria-label": "Primary", className: cx('mx-auto flex w-full max-w-6xl items-center justify-between rounded-full border border-border/60 bg-background/70 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/50', className), children: [_jsxs("div", { className: "flex items-center gap-6", children: [logo, _jsx("ul", { className: "hidden items-center gap-1 md:flex", children: navItems.map((item) => (_jsx("li", { children: _jsx(MarketingNavItem, { ...item }) }, item.id))) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [toggles, right] })] }));
+    const activeItem = navItems.find((i) => i.id === openId);
+    const activePanel = activeItem && 'panel' in activeItem ? activeItem.panel : undefined;
+    return (_jsxs("nav", { "aria-label": "Primary", className: "relative", onMouseLeave: () => setOpenId(null), children: [_jsxs("div", { className: cx('mx-auto flex w-full max-w-6xl items-center justify-between rounded-full border border-border/60 bg-background/70 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/50', className), children: [_jsxs("div", { className: "flex items-center gap-6", children: [logo, _jsx("ul", { className: "hidden items-center gap-1 md:flex", children: navItems.map((item) => (_jsx("li", { children: _jsx(MarketingNavItem, { ...item, open: openId === item.id, onToggle: item.hasMenu ? () => setOpenId(openId === item.id ? null : item.id) : undefined }) }, item.id))) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [toggles, right] })] }), activePanel] }));
 }

package/dist/marketing/marketing-hero.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingHeroProps } from './types.js';
+export declare function MarketingHero({ eyebrow, headline, subtitle, ctas, meta, productMockup, className, }: MarketingHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-hero.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function MarketingHero({ eyebrow, headline, subtitle, ctas, meta, productMockup, className, }) {
+    return (_jsxs("section", { className: cx('mx-auto w-full max-w-6xl px-6 pt-16 pb-24', className), children: [_jsxs("div", { className: "flex flex-col items-center gap-6 text-center", children: [eyebrow, _jsx("h1", { className: "max-w-4xl text-5xl font-semibold leading-[1.05] tracking-tight sm:text-6xl md:text-7xl lg:text-[80px]", children: headline }), subtitle && (_jsx("p", { className: "max-w-2xl text-base text-muted-foreground sm:text-lg", children: subtitle })), ctas && (_jsx("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-3", children: ctas })), meta && _jsx("p", { className: "text-xs text-muted-foreground", children: meta })] }), productMockup && (_jsx("div", { className: "mt-16 overflow-hidden rounded-3xl border border-border bg-card shadow-2xl", children: productMockup }))] }));
+}

package/dist/marketing/marketing-mega-menu.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingMegaMenuProps } from './types.js';
+export declare function MarketingMegaMenu({ triggerId, open, onOpenChange, features, children, className, }: MarketingMegaMenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/marketing/marketing-mega-menu.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function MarketingMegaMenu({ triggerId, open, onOpenChange, features, children, className, }) {
+    if (!open)
+        return null;
+    return (_jsx("div", { role: "dialog", "aria-labelledby": triggerId, onMouseLeave: () => onOpenChange(false), className: cx('absolute left-1/2 top-full mt-3 w-[min(960px,calc(100vw-32px))] -translate-x-1/2 rounded-3xl border border-border bg-card p-6 shadow-2xl backdrop-blur', className), children: children ?? (_jsx("ul", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: features?.map((f) => (_jsx("li", { children: _jsxs("a", { href: f.href, className: "flex items-start gap-3 rounded-xl p-3 hover:bg-muted/40", children: [f.icon && (_jsx("span", { className: "mt-0.5 inline-flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary", children: f.icon })), _jsxs("span", { children: [_jsx("span", { className: "block text-sm font-semibold", children: f.title }), f.description && (_jsx("span", { className: "mt-1 block text-xs text-muted-foreground", children: f.description }))] })] }) }, f.id))) })) }));
+}

package/dist/marketing/marketing-nav-item.d.ts

@@ -1,4 +1,6 @@
 import type { MarketingNavItemDescriptor } from './types.js';
-export declare function MarketingNavItem({ id, label, className, ...rest }: MarketingNavItemDescriptor & {
+export declare function MarketingNavItem({ id, label, className, open, onToggle, ...rest }: MarketingNavItemDescriptor & {
     className?: string;
+    open?: boolean;
+    onToggle?: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-nav-item.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown } from 'lucide-react';
 import { cx } from './utils.js';
-export function MarketingNavItem({ id, label, className, ...rest }) {
+export function MarketingNavItem({ id, label, className, open = false, onToggle, ...rest }) {
     if (rest.hasMenu) {
-        return (_jsxs("button", { type: "button", "data-nav-id": id, "aria-expanded": false, "aria-haspopup": "menu", className: cx('inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-foreground/80 hover:text-foreground', className), children: [label, _jsx(ChevronDown, { "data-chevron": true, className: "h-3.5 w-3.5", "aria-hidden": true })] }));
+        return (_jsxs("button", { type: "button", "data-nav-id": id, id: id, "aria-expanded": open, "aria-haspopup": "menu", onClick: onToggle, className: cx('inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-sm text-foreground/80 hover:text-foreground', className), children: [label, _jsx(ChevronDown, { "data-chevron": true, className: cx('h-3.5 w-3.5 transition', open && 'rotate-180'), "aria-hidden": true })] }));
     }
     return (_jsx("a", { href: rest.href, "data-nav-id": id, className: cx('inline-flex items-center rounded-full px-3 py-1.5 text-sm text-foreground/80 hover:text-foreground', className), children: label }));
 }

package/dist/marketing/marketing-numbered-features.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingNumberedFeaturesProps } from './types.js';
+export declare function MarketingNumberedFeatures({ eyebrow, title, features, className, }: MarketingNumberedFeaturesProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-numbered-features.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './utils.js';
+export function MarketingNumberedFeatures({ eyebrow, title, features, className, }) {
+    return (_jsxs("section", { className: cx('mx-auto w-full max-w-6xl px-6 py-16', className), children: [(eyebrow || title) && (_jsxs("div", { className: "mb-12 flex flex-col items-center gap-2 text-center", children: [eyebrow && _jsx("p", { className: "text-sm font-semibold text-primary", children: eyebrow }), title && _jsx("h2", { className: "max-w-3xl text-3xl font-semibold sm:text-4xl", children: title })] })), _jsx("ol", { className: "grid gap-6 md:grid-cols-3", children: features.map((f) => (_jsxs("li", { className: "rounded-2xl border border-border bg-card p-6", children: [_jsx("div", { className: "text-sm font-semibold text-primary", children: f.index }), _jsx("h3", { className: "mt-2 text-xl font-semibold", children: f.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: f.description })] }, f.id))) })] }));
+}

package/dist/marketing/public.d.ts

@@ -1 +1 @@
-export type { MarketingBentoCardProps, MarketingBentoGridProps, MarketingCalloutProps, MarketingContactPerson, MarketingContactProps, MarketingCta, MarketingFAQItem, MarketingFAQProps, MarketingFooterColumn, MarketingFooterProps, MarketingHeaderProps, MarketingHeaderUser, MarketingLeadMagnetProps, MarketingNavItemDescriptor, MarketingOffice, MarketingShellProps, MarketingTrustBarProps, MarketingTrustStat, } from './types.js';
+export type { MarketingAnnouncementBarProps, MarketingBentoCardProps, MarketingBentoGridProps, MarketingCalloutProps, MarketingContactPerson, MarketingContactProps, MarketingCTAProps, MarketingCta, MarketingFAQItem, MarketingFAQProps, MarketingFooterColumn, MarketingFooterProps, MarketingHeaderProps, MarketingHeaderUser, MarketingHeroProps, MarketingLeadMagnetProps, MarketingMegaMenuFeature, MarketingMegaMenuProps, MarketingNavItemDescriptor, MarketingNumberedFeature, MarketingNumberedFeaturesProps, MarketingOffice, MarketingShellProps, MarketingTrustBarProps, MarketingTrustStat, } from './types.js';

package/dist/marketing/types.d.ts

@@ -163,4 +163,53 @@ export interface MarketingFAQProps {
     defaultOpenId?: string;
     className?: string;
 }
+export interface MarketingMegaMenuFeature {
+    id: string;
+    icon?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    href: string;
+}
+export interface MarketingMegaMenuProps {
+    triggerId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    features?: MarketingMegaMenuFeature[];
+    children?: ReactNode;
+    className?: string;
+}
+export interface MarketingAnnouncementBarProps {
+    href?: string;
+    icon?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+export interface MarketingHeroProps {
+    eyebrow?: ReactNode;
+    headline: ReactNode;
+    subtitle?: ReactNode;
+    ctas?: ReactNode;
+    meta?: ReactNode;
+    productMockup?: ReactNode;
+    className?: string;
+}
+export interface MarketingNumberedFeature {
+    id: string;
+    index: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+}
+export interface MarketingNumberedFeaturesProps {
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    features: MarketingNumberedFeature[];
+    className?: string;
+}
+export interface MarketingCTAProps {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    ctas?: ReactNode;
+    className?: string;
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {