@medalsocial/meda 0.3.0 → 1.0.0

package/README.md

@@ -52,6 +52,7 @@ See the [demo app](./demo) for a live playground.
 
 - `@medalsocial/meda` — curated public API (components + helpers)
 - `@medalsocial/meda/shell` — shell-only subpath
+- `@medalsocial/meda/marketing` — marketing sections and campaign blocks
 - `@medalsocial/meda/styles.css` — design tokens + base styles
 
 ## Alternative: shadcn registry
@@ -73,10 +74,35 @@ The registry index is at `https://meda.medalsocial.com/registry.json`. Source JS
 pnpm install
 pnpm build             # compile dist/
 pnpm test              # vitest (jsdom)
+pnpm typecheck
+pnpm lint
 pnpm registry:validate
 pnpm demo:dev          # run the playground locally
+pnpm storybook         # http://localhost:6006
+pnpm storybook:build   # storybook-static/
+pnpm size-limit        # bundle-size gate
 ```
 
+## Storybook + Chromatic
+
+Stories are colocated as `Component.stories.tsx` next to each primitive. Build
+the static bundle with:
+
+```bash
+pnpm storybook:build
+```
+
+Visual review runs via **Chromatic**. The `Chromatic` GitHub workflow publishes
+Storybook on pushes and pull requests targeting `dev` or `prod`, using the
+repository secret `CHROMATIC_PROJECT_TOKEN`.
+
+```bash
+pnpm chromatic
+```
+
+Chromatic handles UI diffs and review state, so visual snapshot baselines are
+not committed to this repository.
+
 ## Release
 
 Changesets + GitHub Actions (OIDC trusted publishing). Add a changeset with `pnpm changeset`, merge to the release branch, and the `Release` workflow handles npm publish with provenance.

package/dist/brand/index.d.ts

@@ -0,0 +1,2 @@
+export type { MedalSocialMarkProps } from './medal-social-mark.js';
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/index.js

@@ -0,0 +1 @@
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/medal-social-mark.d.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react';
+export interface MedalSocialMarkProps extends SVGProps<SVGSVGElement> {
+    title?: string;
+    backgroundColor?: string;
+    markColor?: string;
+}
+export declare function MedalSocialMark({ title, backgroundColor, markColor, role, focusable, 'aria-hidden': ariaHidden, ...props }: MedalSocialMarkProps): import("react/jsx-runtime").JSX.Element;

package/dist/brand/medal-social-mark.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MedalSocialMark({ title, backgroundColor = 'hsl(0, 0%, 10%)', markColor = 'hsl(0, 0%, 90%)', role, focusable = 'false', 'aria-hidden': ariaHidden, ...props }) {
+    const accessibleTitle = title?.trim();
+    const hasAccessibleName = Boolean(accessibleTitle || props['aria-label'] || props['aria-labelledby']);
+    return (_jsxs("svg", { ...props, viewBox: "0 0 48 48", fill: "none", role: hasAccessibleName ? (role ?? 'img') : role, "aria-hidden": hasAccessibleName ? ariaHidden : (ariaHidden ?? true), focusable: focusable, children: [_jsx("title", { children: accessibleTitle || 'Medal Social' }), _jsx("circle", { cx: "24", cy: "24", r: "23", fill: backgroundColor }), _jsx("path", { d: "M8 24L24 8L40 24L24 40L8 24Z", stroke: markColor, strokeWidth: "1.3", fill: "none" }), _jsx("circle", { cx: "24", cy: "8.5", r: "2.5", fill: markColor }), _jsx("circle", { cx: "39.5", cy: "24", r: "2.5", fill: markColor }), _jsx("circle", { cx: "24", cy: "39.5", r: "2.5", fill: markColor }), _jsx("circle", { cx: "8.5", cy: "24", r: "2.5", fill: markColor }), _jsx("g", { transform: "translate(12, 12) scale(1)", children: _jsx("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z", fill: "none", stroke: markColor, strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+}

package/dist/brand/public.d.ts

@@ -0,0 +1,2 @@
+export type { MedalSocialMarkProps } from './medal-social-mark.js';
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/brand/public.js

@@ -0,0 +1 @@
+export { MedalSocialMark } from './medal-social-mark.js';

package/dist/chat/latency-badge.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Tones use 700-shade variants so 11px badge text clears WCAG AA (4.5:1)
+// against the white/card background. The 400/500 shades chosen for visual
+// consistency with the colored bar segments don't satisfy contrast at this
+// size, so the *bar* keeps the lighter shade and the *label* uses the darker.
 const KIND = {
-    stt: { label: 'STT', tone: 'text-sky-400' },
+    stt: { label: 'STT', tone: 'text-sky-700' },
     claude: { label: 'Claude', tone: 'text-primary' },
-    tts: { label: 'TTS', tone: 'text-emerald-500' },
+    tts: { label: 'TTS', tone: 'text-emerald-700' },
 };
 function fmt(ms) {
     if (ms >= 1000)

package/dist/chat/tool-call-block.js

@@ -15,5 +15,5 @@ export function ToolCallBlock({ call, className }) {
     return (_jsxs("div", { className: [
             'mt-3 rounded-md border border-border border-l-2 border-l-amber-500 bg-card p-3 font-mono text-xs',
             className ?? '',
-        ].join(' '), children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2 text-[11px]", children: [_jsx(Zap, { className: "size-3 text-amber-500" }), _jsx("strong", { className: "font-semibold text-foreground", children: call.name }), call.latencyMs != null && (_jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [call.latencyMs, "ms"] }))] }), _jsxs("div", { className: "text-muted-foreground", children: [Object.entries(call.args && typeof call.args === 'object' ? call.args : {}).map(([k, v], i) => (_jsxs("span", { children: [i > 0 && ', ', _jsx("span", { className: "text-primary", children: k }), ": ", '', _jsx("span", { className: "text-emerald-500", children: safeStringify(v) })] }, k))), call.resultSummary && (_jsxs("span", { className: "text-muted-foreground", children: [" \u2192 ", call.resultSummary] }))] })] }));
+        ].join(' '), children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-2 text-[11px]", children: [_jsx(Zap, { className: "size-3 text-amber-500" }), _jsx("strong", { className: "font-semibold text-foreground", children: call.name }), call.latencyMs != null && (_jsxs("span", { className: "ml-auto tabular-nums text-muted-foreground", children: [call.latencyMs, "ms"] }))] }), _jsxs("div", { className: "text-muted-foreground", children: [Object.entries(call.args && typeof call.args === 'object' ? call.args : {}).map(([k, v], i) => (_jsxs("span", { children: [i > 0 && ', ', _jsx("span", { className: "text-primary", children: k }), ": ", '', _jsx("span", { className: "text-emerald-700", children: safeStringify(v) })] }, k))), call.resultSummary && (_jsxs("span", { className: "text-muted-foreground", children: [" \u2192 ", call.resultSummary] }))] })] }));
 }

package/dist/chat/turn-card.js

@@ -11,10 +11,12 @@ const SPEAKER_LABEL = {
 export function TurnCard({ turn, startedAtRef, tz, onPlay, className }) {
     const label = turn.speakerLabel ?? SPEAKER_LABEL[turn.speaker];
     const offset = turn.startedAt - startedAtRef;
+    // amber-700 (not -500) for the 11px system speaker label so it clears
+    // WCAG AA (4.5:1) against the card background.
     const speakerColor = turn.speaker === 'assistant'
         ? 'text-primary'
         : turn.speaker === 'system'
-            ? 'text-amber-500'
+            ? 'text-amber-700'
             : 'text-foreground';
     return (_jsxs("div", { className: [
             'grid grid-cols-[64px_1fr] gap-5 border-b border-border py-4 last:border-b-0',

package/dist/components/ui/command.d.ts

@@ -0,0 +1,19 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type * as React from 'react';
+import { Dialog } from './dialog.js';
+declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, children, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/ui/command.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.js';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('flex size-full flex-col overflow-hidden bg-popover text-popover-foreground', className), ...props }));
+}
+function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = false, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('top-[38%] overflow-hidden rounded-xl! p-0 sm:max-w-2xl', className), showCloseButton: showCloseButton, children: children })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex items-center gap-3 border-b px-4 py-3", children: [_jsx(SearchIcon, { className: "size-5 shrink-0 text-muted-foreground/60" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground/60 disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('no-scrollbar max-h-[400px] scroll-py-1 overflow-y-auto overflow-x-hidden p-2 outline-none', className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn('py-6 text-center text-sm', className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn(
+        // group heading uses solid muted-foreground (not /70) so 12px
+        // labels meet WCAG AA contrast on the popover background.
+        'overflow-hidden text-foreground [&:first-child_[cmdk-group-heading]]:pt-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-4 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('-mx-1 h-px bg-border', className), ...props }));
+}
+function CommandItem({ className, children, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("group/command-item relative flex cursor-default select-none items-center gap-3 rounded-lg px-3 py-2 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-selected:bg-accent data-selected:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg:not([class*='size-'])]:size-5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground data-selected:[&_svg]:text-accent-foreground", className), ...props, children: children }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('ml-auto text-muted-foreground text-xs tracking-widest group-data-selected/command-item:text-foreground', className), ...props }));
+}
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/ui/dialog.d.ts

@@ -0,0 +1,26 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import type * as React from 'react';
+interface DialogProps extends DialogPrimitive.Root.Props {
+    /**
+     * When false, prevents closing via backdrop/outside clicks.
+     * Escape key and X button still work (WCAG compliance).
+     * @default true
+     */
+    dismissible?: boolean;
+}
+declare function Dialog({ dismissible, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+interface DialogTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>, 'render'> {
+    render?: React.ReactElement;
+}
+declare function DialogTrigger({ render, children, ...props }: DialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: DialogPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: DialogPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: DialogPrimitive.Popup.Props & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, children, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/dialog.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+import { XIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+function Dialog({ dismissible = true, ...props }) {
+    return (_jsx(DialogPrimitive.Root, { "data-slot": "dialog", disablePointerDismissal: !dismissible, ...props }));
+}
+function DialogTrigger({ render, children, ...props }) {
+    if (render) {
+        return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", render: render, ...props, children: children }));
+    }
+    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props, children: children }));
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-overlay", className: cn('data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/20 duration-100 data-closed:animate-out data-open:animate-in motion-reduce:duration-0 supports-backdrop-filter:backdrop-blur-xs dark:bg-black/40', className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg bg-background p-4 text-sm outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in motion-reduce:duration-0 sm:max-w-sm overscroll-behavior-y-contain dark:ring-border', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-2 right-2 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: [_jsx(XIcon, { size: 16 }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2', className), ...props }));
+}
+function DialogFooter({ className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn('-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end dark:bg-muted/70', className), ...props, children: children }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('font-semibold text-base leading-snug tracking-tight', className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-muted-foreground text-sm *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, showOverlay, overlayClassName, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+    showOverlay?: boolean;
+    overlayClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/drawer.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from '../../lib/utils.js';
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return _jsx(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: cn('data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 data-closed:animate-out data-open:animate-in supports-backdrop-filter:backdrop-blur-xs dark:bg-black/40', className), ...props }));
+}
+function DrawerContent({ className, children, showOverlay = true, overlayClassName, ...props }) {
+    return (_jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [showOverlay ? _jsx(DrawerOverlay, { className: overlayClassName }) : null, _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: cn('group/drawer-content fixed z-50 flex h-auto flex-col bg-card text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=right]:border-l border-border data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm', className), ...props, children: [_jsx("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left', className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn('mt-auto flex flex-col gap-2 p-4', className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('font-semibold text-base text-foreground leading-snug tracking-tight', className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,32 @@
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import type * as React from 'react';
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): import("react/jsx-runtime").JSX.Element;
+interface DropdownMenuTriggerProps extends Omit<MenuPrimitive.Trigger.Props, 'render'> {
+    render?: React.ReactElement | MenuPrimitive.Trigger.Props['render'];
+}
+declare function DropdownMenuTrigger({ render, children, ...props }: DropdownMenuTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+interface MenuItemProps extends Omit<MenuPrimitive.Item.Props, 'render' | 'onClick' | 'onSelect'> {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+    render?: React.ReactElement;
+    onClick?: MenuPrimitive.Item.Props['onClick'];
+    onSelect?: MenuPrimitive.Item.Props['onClick'];
+}
+declare function DropdownMenuItem({ className, inset, variant, render, onClick, onSelect, children, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: MenuPrimitive.CheckboxItem.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type MenuItemProps, };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,68 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ render, children, ...props }) {
+    // Function render is passed through directly to Base UI
+    if (typeof render === 'function') {
+        return (_jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", render: render, ...props, children: children }));
+    }
+    if (render) {
+        return (_jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", render: render, ...props, children: children }));
+    }
+    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props, children: children }));
+}
+function DropdownMenuContent({ align = 'start', alignOffset = 0, side = 'bottom', sideOffset = 4, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn('data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md outline-none ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in data-closed:overflow-hidden', className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-1.5 py-1 font-medium text-muted-foreground text-xs data-[inset]:pl-8', className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = 'default', render, onClick, onSelect, children, ...props }) {
+    const handleClick = onClick || onSelect
+        ? (event) => {
+            onSelect?.(event);
+            onClick?.(event);
+        }
+        : undefined;
+    const itemClassName = cn("focus:bg-accent focus:text-accent-foreground focus:*:[svg]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:*:[svg]:text-destructive data-[variant=destructive]:focus:bg-destructive data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:focus:*:[svg]:text-destructive-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0", className);
+    if (render) {
+        return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: itemClassName, render: render, onClick: handleClick, ...props, children: children }));
+    }
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: itemClassName, onClick: handleClick, ...props, children: children }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-open:bg-accent data-[inset]:pl-8 data-open:text-accent-foreground [&>[data-chevron]]:transition-transform [&>[data-chevron]]:duration-200 data-open:[&>[data-chevron]]:rotate-90 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(ChevronRightIcon, { "data-chevron": "", className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = 'start', alignOffset = -3, side = 'right', sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn('data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-open:animate-in', className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex cursor-default select-none items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [_jsx("span", { className: "pointer-events-none pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('-mx-1 my-1 h-px bg-border', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('ml-auto text-muted-foreground text-xs tracking-widest group-focus/dropdown-menu-item:text-accent-foreground', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react/jsx-runtime").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/ui/tooltip.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+import { cn } from '../../lib/utils.js';
+function TooltipProvider({ delay = 0, ...props }) {
+    return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn('data-open:fade-in-0 data-open:zoom-in-95 data-closed:fade-out-0 data-closed:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2', 'z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md', 'bg-foreground px-3 py-1.5 text-background text-xs', 'data-closed:animate-out data-open:animate-in', 'dark:bg-card dark:text-foreground dark:ring-1 dark:ring-border', className), role: "tooltip", ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: cn('z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]', 'bg-foreground fill-foreground', 'data-[side=bottom]:top-1 data-[side=top]:-bottom-2.5', 'data-[side=left]:-right-1 data-[side=right]:-left-1', 'data-[side=inline-start]:-right-1 data-[side=inline-end]:-left-1', 'data-[side=inline-end]:top-1/2! data-[side=inline-start]:top-1/2!', 'data-[side=left]:top-1/2! data-[side=right]:top-1/2!', 'data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-translate-y-1/2', 'data-[side=left]:-translate-y-1/2 data-[side=right]:-translate-y-1/2', 'dark:bg-card dark:fill-card') })] }) }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+export * from './brand/public.js';
 export * from './chat/public.js';
+export * from './marketing/public.js';
 export * from './panel/public.js';
-export * from './shell/public.js';
+export * from './shell/index.js';
 export * from './timeline/public.js';

package/dist/index.js

@@ -1,4 +1,6 @@
+export * from './brand/public.js';
 export * from './chat/public.js';
+export * from './marketing/public.js';
 export * from './panel/public.js';
-export * from './shell/public.js';
+export * from './shell/index.js'; // v2 surface
 export * from './timeline/public.js';

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/marketing/index.d.ts

@@ -0,0 +1,5 @@
+export { MarketingCallout } from './marketing-callout.js';
+export { MarketingContact } from './marketing-contact.js';
+export { MarketingCtaList } from './marketing-cta-list.js';
+export { MarketingLeadMagnet } from './marketing-lead-magnet.js';
+export type { MarketingAlign, MarketingCalloutProps, MarketingCalloutVariant, MarketingContactPerson, MarketingContactProps, MarketingCta, MarketingCtaListProps, MarketingCtaVariant, MarketingLeadMagnetProps, MarketingLeadMagnetVariant, MarketingOffice, } from './types.js';

package/dist/marketing/index.js

@@ -0,0 +1,4 @@
+export { MarketingCallout } from './marketing-callout.js';
+export { MarketingContact } from './marketing-contact.js';
+export { MarketingCtaList } from './marketing-cta-list.js';
+export { MarketingLeadMagnet } from './marketing-lead-magnet.js';

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

@@ -0,0 +1,2 @@
+import type { MarketingCalloutProps } from './types.js';
+export declare function MarketingCallout({ eyebrow, title, description, children, ctas, variant, align, className, }: MarketingCalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-callout.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MarketingCtaList } from './marketing-cta-list.js';
+import { cx } from './utils.js';
+export function MarketingCallout({ eyebrow, title, description, children, ctas, variant = 'band', align = 'center', className, }) {
+    const isCard = variant === 'card';
+    return (_jsx("section", { className: cx('relative overflow-hidden border border-border bg-card text-card-foreground', isCard ? 'rounded-lg px-6 py-8 shadow-sm' : 'px-6 py-14 sm:px-8 sm:py-16', className), children: _jsxs("div", { className: cx('mx-auto flex max-w-4xl flex-col gap-5', align === 'center' ? 'items-center text-center' : 'items-start text-left'), children: [eyebrow && _jsx("p", { className: "text-sm font-semibold text-primary", children: eyebrow }), _jsx("h2", { className: "max-w-3xl text-3xl font-bold leading-tight text-foreground sm:text-4xl", children: title }), description && (_jsx("p", { className: "max-w-2xl text-base leading-7 text-muted-foreground sm:text-lg", children: description })), children && (_jsx("div", { className: "max-w-2xl text-base leading-7 text-muted-foreground", children: children })), _jsx(MarketingCtaList, { ctas: ctas, align: align, className: "mt-1" })] }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { MarketingContactProps } from './types.js';
+export declare function MarketingContact({ intro, form, office, contactPerson, compact, className, }: MarketingContactProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-contact.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock, Mail, MapPin, Phone, Smartphone } from 'lucide-react';
+import { cx, toTelHref } from './utils.js';
+function InfoRow({ icon: Icon, label, children }) {
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "mt-0.5 inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: _jsx(Icon, { className: "size-4", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "mb-1 text-sm font-semibold text-foreground", children: label }), _jsx("div", { className: "text-sm leading-6 text-muted-foreground", children: children })] })] }));
+}
+function DetailCard({ title, children }) {
+    return (_jsxs("section", { className: "rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm", children: [title && _jsx("h3", { className: "mb-5 text-lg font-semibold text-foreground", children: title }), children] }));
+}
+function OfficeInfo({ office }) {
+    return (_jsx(DetailCard, { title: office.title ?? 'Office', children: _jsxs("div", { className: "space-y-5", children: [office.address && (_jsx(InfoRow, { icon: MapPin, label: "Address", children: office.address })), office.email && (_jsx(InfoRow, { icon: Mail, label: "Email", children: _jsx("a", { className: "hover:text-foreground", href: `mailto:${office.email}`, children: office.email }) })), office.phone && (_jsx(InfoRow, { icon: Phone, label: "Phone", children: _jsx("a", { className: "hover:text-foreground", href: toTelHref(office.phone), children: office.phone }) })), office.hours && (_jsx(InfoRow, { icon: Clock, label: "Opening hours", children: office.hours }))] }) }));
+}
+function ContactPerson({ person }) {
+    return (_jsx(DetailCard, { title: person.title ?? 'Direct contact', children: _jsxs("div", { className: "flex flex-col gap-5 sm:flex-row", children: [person.image && _jsx("div", { className: "shrink-0 overflow-hidden rounded-lg", children: person.image }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h4", { className: "text-lg font-semibold text-foreground", children: person.name }), person.role && _jsx("p", { className: "mt-1 text-sm font-semibold text-primary", children: person.role }), person.description && (_jsx("p", { className: "mt-3 text-sm leading-6 text-muted-foreground", children: person.description })), (person.email || person.phone) && (_jsxs("div", { className: "mt-4 space-y-2 text-sm text-muted-foreground", children: [person.email && (_jsxs("a", { className: "flex items-center gap-2 hover:text-foreground", href: `mailto:${person.email}`, children: [_jsx(Mail, { className: "size-4", "aria-hidden": true }), person.email] })), person.phone && (_jsxs("a", { className: "flex items-center gap-2 hover:text-foreground", href: toTelHref(person.phone), children: [_jsx(Smartphone, { className: "size-4", "aria-hidden": true }), person.phone] }))] }))] })] }) }));
+}
+export function MarketingContact({ intro, form, office, contactPerson, compact = false, className, }) {
+    return (_jsx("section", { className: cx('bg-background px-6 py-12 text-foreground sm:px-8', className), children: _jsxs("div", { className: "mx-auto max-w-6xl", children: [intro && (_jsx("div", { className: cx('mx-auto max-w-3xl text-center', compact ? 'mb-8' : 'mb-12'), children: _jsx("div", { className: "text-base leading-7 text-muted-foreground sm:text-lg", children: intro }) })), _jsxs("div", { className: cx('grid items-start gap-6', compact ? 'grid-cols-1' : 'lg:grid-cols-[minmax(0,1fr)_420px]'), children: [_jsx("div", { className: "rounded-lg border border-border bg-card p-6 shadow-sm", children: form }), (office || contactPerson) && (_jsxs("div", { className: "space-y-6", children: [office && _jsx(OfficeInfo, { office: office }), contactPerson && _jsx(ContactPerson, { person: contactPerson })] }))] })] }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { MarketingCtaListProps } from './types.js';
+export declare function MarketingCtaList({ ctas, align, className }: MarketingCtaListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/marketing/marketing-cta-list.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './utils.js';
+const baseCtaClass = 'inline-flex min-h-10 items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+const ctaVariantClass = {
+    primary: 'bg-primary text-primary-foreground hover:opacity-90',
+    secondary: 'border border-border bg-transparent text-foreground hover:bg-surface-highlight hover:text-foreground',
+};
+export function MarketingCtaList({ ctas, align = 'center', className }) {
+    if (!ctas?.length)
+        return null;
+    return (_jsx("div", { className: cx('flex flex-wrap gap-3', align === 'center' ? 'justify-center' : 'justify-start', className), children: ctas.map((cta, index) => {
+            const variant = cta.variant ?? (index === 0 ? 'primary' : 'secondary');
+            const className = cx(baseCtaClass, ctaVariantClass[variant]);
+            const key = typeof cta.label === 'string' ? `${cta.label}-${index}` : `marketing-cta-${index}`;
+            if (cta.href) {
+                return (_jsx("a", { href: cta.href, "aria-label": cta.ariaLabel, className: className, target: cta.target, rel: cta.rel, children: cta.label }, key));
+            }
+            return (_jsx("button", { type: "button", "aria-label": cta.ariaLabel, className: className, onClick: cta.onClick, children: cta.label }, key));
+        }) }));
+}

package/dist/marketing/marketing-lead-magnet.d.ts

@@ -0,0 +1,2 @@
+import type { MarketingLeadMagnetProps } from './types.js';
+export declare function MarketingLeadMagnet({ title, description, benefits, image, buttonText, formTitle, form, variant, open, defaultOpen, onOpenChange, className, }: MarketingLeadMagnetProps): import("react/jsx-runtime").JSX.Element;

package/dist/marketing/marketing-lead-magnet.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from '@base-ui/react/dialog';
+import { CheckCircle2, X } from 'lucide-react';
+import { cx } from './utils.js';
+export function MarketingLeadMagnet({ title, description, benefits = [], image, buttonText = 'Download now', formTitle = 'Get the resource', form, variant = 'featured', open, defaultOpen, onOpenChange, className, }) {
+    const isSidebar = variant === 'sidebar';
+    return (_jsx("section", { className: cx('overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm', isSidebar ? 'p-6' : 'p-6 sm:p-8 lg:p-10', className), children: _jsxs("div", { className: cx('grid gap-8', isSidebar ? 'grid-cols-1' : 'lg:grid-cols-[0.8fr_1fr]'), children: [!isSidebar && image && _jsx("div", { className: "overflow-hidden rounded-lg bg-muted", children: image }), _jsxs("div", { className: "flex min-w-0 flex-col items-start justify-center", children: [_jsx("h2", { className: "text-2xl font-bold leading-tight text-foreground sm:text-3xl", children: title }), description && (_jsx("p", { className: "mt-3 text-base leading-7 text-muted-foreground", children: description })), benefits.length > 0 && (_jsx("ul", { className: "mt-5 space-y-3", children: benefits.map((benefit, index) => (_jsxs("li", { className: "flex items-start gap-3 text-sm leading-6 text-muted-foreground", children: [_jsx(CheckCircle2, { className: "mt-0.5 size-4 shrink-0 text-primary", "aria-hidden": true }), _jsx("span", { children: benefit })] }, typeof benefit === 'string' ? `${benefit}-${index}` : `benefit-${index}`))) })), _jsxs(Dialog.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: (nextOpen) => onOpenChange?.(nextOpen), children: [_jsx(Dialog.Trigger, { className: "mt-6 inline-flex min-h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", children: buttonText }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: "fixed inset-0 z-modal bg-background/80 backdrop-blur-sm" }), _jsxs(Dialog.Popup, { className: "fixed left-1/2 top-1/2 z-modal w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg focus-visible:outline-none", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-border px-6 py-5", children: [_jsx(Dialog.Title, { className: "text-lg font-semibold text-foreground", children: formTitle }), _jsxs(Dialog.Close, { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(X, { className: "size-4", "aria-hidden": true })] })] }), _jsx("div", { className: "p-6", children: form })] })] })] })] })] }) }));
+}

package/dist/marketing/public.d.ts

@@ -0,0 +1 @@
+export type { MarketingCalloutProps, MarketingContactPerson, MarketingContactProps, MarketingCta, MarketingLeadMagnetProps, MarketingOffice, } from './types.js';

package/dist/marketing/public.js

@@ -0,0 +1 @@
+export {};