@medalsocial/meda 2.2.0 → 2.4.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/dist/primitives/card.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type CardProps = ComponentPropsWithoutRef<'div'>;
+export type CardHeaderProps = ComponentPropsWithoutRef<'div'>;
+export type CardBodyProps = ComponentPropsWithoutRef<'div'>;
+export type CardFooterProps = ComponentPropsWithoutRef<'div'>;
+declare function CardRoot({ children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ children, className, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function CardBody({ children, className, ...props }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ children, className, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+export {};

package/dist/primitives/card.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+function CardRoot({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card", className: cn('flex flex-col rounded-xl border border-border bg-card text-card-foreground', className), ...props, children: children }));
+}
+function CardHeader({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col gap-1 border-b border-border px-4 py-3 last:border-b-0', className), ...props, children: children }));
+}
+function CardBody({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-body", className: cn('px-4 py-3', className), ...props, children: children }));
+}
+function CardFooter({ children, className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center justify-end gap-2 border-t border-border px-4 py-3 first:border-t-0', className), ...props, children: children }));
+}
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Body: CardBody,
+    Footer: CardFooter,
+});

package/dist/primitives/index.d.ts

@@ -1,6 +1,10 @@
+export type { CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, } from './card.js';
+export { Card } from './card.js';
 export type { EmptyStateProps, EmptyStateVariant } from './empty-state.js';
 export { EmptyState } from './empty-state.js';
 export type { FilterRailGroupProps, FilterRailProps } from './filter-rail.js';
 export { FilterRail } from './filter-rail.js';
 export type { SkeletonProps } from './skeleton.js';
 export { Skeleton } from './skeleton.js';
+export type { StatusPillProps, StatusPillSize, StatusPillTone } from './status-pill.js';
+export { StatusPill } from './status-pill.js';

package/dist/primitives/index.js

@@ -1,3 +1,5 @@
+export { Card } from './card.js';
 export { EmptyState } from './empty-state.js';
 export { FilterRail } from './filter-rail.js';
 export { Skeleton } from './skeleton.js';
+export { StatusPill } from './status-pill.js';

package/dist/primitives/markdown-view-entry.d.ts

@@ -0,0 +1,2 @@
+export type { MarkdownViewProps } from './markdown-view.js';
+export { MarkdownView } from './markdown-view.js';

package/dist/primitives/markdown-view-entry.js

@@ -0,0 +1,7 @@
+// Dedicated subpath entry for MarkdownView.
+//
+// Importing `@medalsocial/meda/markdown-view` opts the consumer into the
+// react-markdown / remark-gfm / rehype-highlight peer chain. Consumers who
+// don't need markdown rendering should import from `@medalsocial/meda` /
+// `@medalsocial/meda/primitives` instead — neither pulls these peers in.
+export { MarkdownView } from './markdown-view.js';

package/dist/primitives/markdown-view.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef } from 'react';
+import { type Components } from 'react-markdown';
+export interface MarkdownViewProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children: string;
+    /**
+     * Override or extend the default react-markdown component map.
+     * Spread defaults are applied first, so caller overrides win.
+     */
+    components?: Components;
+}
+/**
+ * MarkdownView wraps `react-markdown` with `remark-gfm` and `rehype-highlight`,
+ * and applies a consistent prose stylesheet using meda design tokens.
+ *
+ * The markdown libraries are listed as **optional peer dependencies**. Install
+ * them in your app if you import this component:
+ *
+ * ```bash
+ * pnpm add react-markdown remark-gfm rehype-highlight
+ * ```
+ */
+export declare function MarkdownView({ children, className, components, ...props }: MarkdownViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/markdown-view.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+import { cn } from '../lib/utils.js';
+// remark-gfm renders task-list `[ ]` / `[x]` as unlabelled disabled checkboxes,
+// which fails the axe `label` rule. Override the `input` renderer to add an
+// aria-label derived from the checked state — keeps the checkbox semantics
+// for AT users while satisfying the contrast/label gate.
+const DEFAULT_COMPONENTS = {
+    input: ({ type, checked, ...rest }) => {
+        if (type === 'checkbox') {
+            return (_jsx("input", { type: "checkbox", checked: checked, "aria-label": checked ? 'task complete' : 'task incomplete', ...rest }));
+        }
+        return _jsx("input", { type: type, ...rest });
+    },
+};
+/**
+ * MarkdownView wraps `react-markdown` with `remark-gfm` and `rehype-highlight`,
+ * and applies a consistent prose stylesheet using meda design tokens.
+ *
+ * The markdown libraries are listed as **optional peer dependencies**. Install
+ * them in your app if you import this component:
+ *
+ * ```bash
+ * pnpm add react-markdown remark-gfm rehype-highlight
+ * ```
+ */
+export function MarkdownView({ children, className, components, ...props }) {
+    return (_jsx("div", { "data-slot": "markdown-view", className: cn(
+        // Base prose
+        'text-sm leading-relaxed text-foreground', 
+        // Trim outer block margins: only the first/last *child* of the
+        // wrapper should lose its top/bottom margin. The earlier shape
+        // `first:[&_h1]:mt-0` selects all descendant h1s when the wrapper
+        // itself is :first-child of its parent — which then collapses the
+        // margin on every nested h1, not just the leading one.
+        '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0', 
+        // Headings
+        '[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:text-xl [&_h1]:font-semibold [&_h1]:text-foreground', '[&_h2]:mt-5 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-semibold [&_h2]:text-foreground', '[&_h3]:mt-4 [&_h3]:mb-2 [&_h3]:text-base [&_h3]:font-semibold [&_h3]:text-foreground', '[&_h4]:mt-3 [&_h4]:mb-1.5 [&_h4]:text-sm [&_h4]:font-semibold [&_h4]:text-foreground', 
+        // Paragraphs and inline
+        '[&_p]:my-3', '[&_strong]:font-semibold [&_strong]:text-foreground', '[&_em]:italic', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 hover:[&_a]:no-underline', 
+        // Lists
+        '[&_ul]:my-3 [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:space-y-1', '[&_ol]:my-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:space-y-1', '[&_li]:text-foreground', 
+        // Blockquote
+        '[&_blockquote]:my-3 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-3 [&_blockquote]:text-muted-foreground', 
+        // Code
+        '[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.875em] [&_code]:text-foreground', '[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-md [&_pre]:border [&_pre]:border-border [&_pre]:bg-muted [&_pre]:p-3', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', 
+        // Tables (GFM)
+        '[&_table]:my-3 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm', '[&_th]:border [&_th]:border-border [&_th]:bg-muted [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:font-semibold', '[&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1', 
+        // Horizontal rule
+        '[&_hr]:my-6 [&_hr]:border-border', 
+        // Images
+        '[&_img]:my-3 [&_img]:rounded-md [&_img]:border [&_img]:border-border', className), ...props, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], components: { ...DEFAULT_COMPONENTS, ...components }, children: children }) }));
+}

package/dist/primitives/status-pill.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+export type StatusPillTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type StatusPillSize = 'sm' | 'md';
+export interface StatusPillProps extends ComponentPropsWithoutRef<'span'> {
+    tone?: StatusPillTone;
+    size?: StatusPillSize;
+    /**
+     * Show a leading dot. Defaults to true; pass `false` to hide.
+     */
+    dot?: boolean;
+}
+export declare function StatusPill({ tone, size, dot, className, children, ...props }: StatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/primitives/status-pill.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+// Tone classes use solid backgrounds + their semantic foreground tokens.
+// Tinted backgrounds (e.g. `bg-info/15 text-info`) failed WCAG AA contrast on
+// the 11px size (~3:1 vs. the 4.5:1 minimum) — see vitest-axe a11y gate. The
+// solid pairing is what existing meda status pills (e.g. voice-status-pill)
+// use, and theme tokens already guarantee AA in both light and dark modes.
+const TONE_CLASSES = {
+    neutral: 'bg-muted text-muted-foreground',
+    info: 'bg-info text-info-foreground',
+    success: 'bg-success text-success-foreground',
+    warning: 'bg-warning text-warning-foreground',
+    danger: 'bg-destructive text-destructive-foreground',
+};
+const SIZE_CLASSES = {
+    sm: 'gap-1 px-2 py-0.5 text-[11px]',
+    md: 'gap-1.5 px-2.5 py-1 text-xs',
+};
+const DOT_SIZE = {
+    sm: 'size-1.5',
+    md: 'size-2',
+};
+export function StatusPill({ tone = 'neutral', size = 'sm', dot = true, className, children, ...props }) {
+    return (_jsxs("span", { "data-slot": "status-pill", "data-tone": tone, "data-size": size, className: cn('inline-flex items-center rounded-full font-medium', TONE_CLASSES[tone], SIZE_CLASSES[size], className), ...props, children: [dot ? (_jsx("span", { "data-slot": "status-pill-dot", "aria-hidden": "true", className: cn('rounded-full bg-current', DOT_SIZE[size]) })) : null, children] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -107,6 +107,10 @@
     "./theme": {
       "types": "./dist/theme/index.d.ts",
       "default": "./dist/theme/index.js"
+    },
+    "./markdown-view": {
+      "types": "./dist/primitives/markdown-view-entry.d.ts",
+      "default": "./dist/primitives/markdown-view-entry.js"
     }
   },
   "sideEffects": [
@@ -125,7 +129,10 @@
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.0",
     "react": ">=19",
-    "react-dom": ">=19"
+    "react-dom": ">=19",
+    "react-markdown": "^10.0.0",
+    "rehype-highlight": "^7.0.0",
+    "remark-gfm": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@dnd-kit/core": {
@@ -145,6 +152,15 @@
     },
     "next-themes": {
       "optional": true
+    },
+    "react-markdown": {
+      "optional": true
+    },
+    "rehype-highlight": {
+      "optional": true
+    },
+    "remark-gfm": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -192,6 +208,9 @@
     "playwright": "1.59.1",
     "react": "19.2.5",
     "react-dom": "19.2.5",
+    "react-markdown": "10.1.0",
+    "rehype-highlight": "7.0.2",
+    "remark-gfm": "4.0.1",
     "size-limit": "12.1.0",
     "storybook": "10.3.6",
     "tailwindcss": "4.2.4",