@raydenui/ui 0.9.7 → 0.10.0

package/dist/blocks/HeaderBlock.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Icon } from "../components/Icon/index.js";
+import { Input } from "../components/Input/index.js";
+const TIER = {
+    sm: {
+        row: "hidden @min-[720px]:flex",
+        block: "hidden @min-[720px]:block",
+        collapsed: "@min-[720px]:hidden",
+    },
+    md: {
+        row: "hidden @min-[880px]:flex",
+        block: "hidden @min-[880px]:block",
+        collapsed: "@min-[880px]:hidden",
+    },
+    lg: {
+        row: "hidden @min-[960px]:flex",
+        block: "hidden @min-[960px]:block",
+        collapsed: "@min-[960px]:hidden",
+    },
+    xl: {
+        row: "hidden @min-[1060px]:flex",
+        block: "hidden @min-[1060px]:block",
+        collapsed: "@min-[1060px]:hidden",
+    },
+    xxl: {
+        row: "hidden @min-[1280px]:flex",
+        block: "hidden @min-[1280px]:block",
+        collapsed: "@min-[1280px]:hidden",
+    },
+};
+const VARIANT_TIER = {
+    1: "sm",
+    2: "lg",
+    3: "md",
+    4: "md",
+    5: "md",
+    6: "sm",
+    7: "xl",
+    8: "xxl",
+    9: "sm",
+    10: "md",
+    11: "sm",
+};
+/**
+ * Shared gutters and a bounded row keep the brand and controls aligned on every variant.
+ * Only the surface and announcement stretch on wider screens.
+ */
+const ROW_PADDING = "mx-auto w-full max-w-[1440px] px-4 py-3 @min-[640px]:px-6 @min-[1140px]:px-10 @min-[1140px]:py-4";
+/** Nav rows tighten up between the collapse threshold and a comfortable desktop. */
+const NAV_GAP = "gap-4 @min-[1140px]:gap-6";
+const PILL_GAP = "gap-5 @min-[1140px]:gap-8";
+/**
+ * A variant that asks for a dark bar has to stay dark in a globally dark document.
+ * The grey ramp inverts under `.dark`, so `bg-grey-900` quietly became a near-white
+ * bar with unreadable navigation on top of it.
+ *
+ * `.rayden-dark` is the shared home for that: it is declared next to `.dark` in
+ * globals.css, pins the same surface / foreground / ramp values, and is matched by
+ * the `dark:` variant, so the same semantic pairs — `bg-surface`/`text-on-surface`
+ * for the bar, `text-on-surface-muted` for muted text — resolve to dark values in
+ * *both* global modes, and nested components inherit the same roles. It replaces a
+ * block-local inline style object, which no nested component could see through.
+ */
+const DARK_ISLAND = "rayden-dark";
+const FOCUS_RING = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+// ─── Sub-components ──────────────────────────────────────────────────
+function NavLink({ link, tone = "default", large, className, onNavigate, }) {
+    // A link with an href must be an anchor, or it is not a link: no middle-click, no
+    // open-in-new-tab, and the wrong role. This holds at every viewport — the collapsed
+    // menu used to rebuild links as buttons and drop the href on the floor.
+    const Tag = link.href ? "a" : "button";
+    return (_jsxs(Tag, { ...(link.href ? { href: link.href } : { type: "button" }), "aria-current": link.active ? "page" : undefined, onClick: () => {
+            link.onClick?.();
+            onNavigate?.();
+        }, className: cn("relative flex min-h-11 items-center gap-2 rounded-md font-medium whitespace-nowrap transition-colors duration-150 motion-reduce:transition-none cursor-pointer", FOCUS_RING, large ? "text-base" : "text-sm", link.active
+            ? "text-action-primary-text after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full after:bg-action-primary"
+            : tone === "muted"
+                ? "text-on-surface-muted hover:text-on-surface"
+                : "text-on-surface-secondary hover:text-on-surface", className), children: [link.label, link.dot && _jsx("span", { className: "size-2 shrink-0 rounded-full bg-primary-400" }), link.hasDropdown && _jsx(Icon, { name: "chevron-down", size: "xs" })] }));
+}
+function NavLinks({ links, large, gap = NAV_GAP, className, }) {
+    if (links.length === 0)
+        return null;
+    return (_jsx("div", { className: cn("flex items-center", gap, className), children: links.map((link, i) => (_jsx(NavLink, { link: link, large: large }, `${link.label}-${i}`))) }));
+}
+/** Same link component, stacked — so an href-only destination is still an anchor. */
+function StackedNavLinks({ links, tone, onNavigate, }) {
+    if (links.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-col gap-1", children: links.map((link, i) => (_jsx(NavLink, { link: link, tone: tone, onNavigate: onNavigate, className: cn("justify-between rounded-lg px-3 py-2.5 text-left after:hidden hover:bg-grey-75", link.active && "bg-primary-50 hover:bg-primary-50") }, `${link.label}-${i}`))) }));
+}
+// ─── Component ───────────────────────────────────────────────────────
+export function HeaderBlock({ variant = 1, logo, links = [], rightLinks = [], actions = [], announcement, searchPlaceholder = "Search for components...", onSearch, switcher, secondaryLinks = [], navLabel = "Main", secondaryNavLabel = "Secondary", className, }) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [internalActiveTab, setActiveTab] = useState(switcher?.defaultActiveIndex ?? 0);
+    /** An index outside the tab list would leave the group with nothing selected. */
+    const clampTab = (index) => Math.min(Math.max(index, 0), Math.max((switcher?.tabs.length ?? 1) - 1, 0));
+    const isSwitcherControlled = typeof switcher?.activeIndex === "number";
+    const activeTab = clampTab(isSwitcherControlled ? switcher.activeIndex : internalActiveTab);
+    /** One place decides both modes, so they can never drift apart. */
+    const selectTab = (index) => {
+        if (index === activeTab)
+            return; // not a change; raise nothing
+        if (!isSwitcherControlled)
+            setActiveTab(index);
+        switcher?.onChange?.(index);
+    };
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuId = useId();
+    const toggleRef = useRef(null);
+    const isDark = variant === 4 || variant === 8;
+    const isLargeLinks = [3, 4, 5, 6, 9, 10, 11].includes(variant);
+    const isRoundedButtons = [5, 6, 7, 8, 9, 10].includes(variant);
+    const hasSearch = variant === 9;
+    const hasSwitcher = (variant === 10 || variant === 11) && !!switcher;
+    const tier = TIER[VARIANT_TIER[variant]];
+    const rowPadding = ROW_PADDING;
+    /** Nothing to collapse means nothing to toggle: do not render an inert control. */
+    const hasMenuContent = links.length > 0 ||
+        rightLinks.length > 0 ||
+        secondaryLinks.length > 0 ||
+        actions.length > 0 ||
+        hasSearch ||
+        hasSwitcher;
+    const closeMenu = () => setMenuOpen(false);
+    function handleKeyDown(event) {
+        if (event.key !== "Escape" || !menuOpen)
+            return;
+        setMenuOpen(false);
+        toggleRef.current?.focus();
+    }
+    // ─── Render a single action button ─────────────────────────────
+    function renderAction(action, index, onNavigate) {
+        const Tag = action.href ? "a" : "button";
+        const actionVariant = action.variant ?? "primary";
+        const isLargeButton = [3, 4, 5, 11].includes(variant);
+        return (_jsx(Tag, { ...(action.href ? { href: action.href } : { type: "button" }), onClick: () => {
+                action.onClick?.();
+                onNavigate?.();
+            }, className: cn("inline-flex min-h-11 cursor-pointer items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-semibold transition-colors duration-150 motion-reduce:transition-none", FOCUS_RING, isRoundedButtons ? "rounded-2xl" : "rounded-lg", actionVariant === "text" &&
+                "rounded-lg text-on-surface-secondary hover:bg-grey-75 hover:text-on-surface active:bg-grey-100", actionVariant === "secondary" &&
+                "border border-surface-border-strong bg-surface text-on-surface hover:bg-grey-75 active:bg-grey-100", actionVariant === "secondary" &&
+                variant === 5 &&
+                "border-transparent bg-primary-50 text-action-primary-text hover:bg-primary-75", actionVariant === "secondary" &&
+                variant === 8 &&
+                "border-transparent bg-grey-100 hover:bg-grey-200", actionVariant === "primary" &&
+                "bg-action-primary text-white hover:bg-action-primary-hover active:bg-action-primary-hover", actionVariant !== "text" && isLargeButton && "px-5 text-base", actionVariant === "primary" && (variant === 3 || variant === 4) && "rounded-full"), children: action.label }, index));
+    }
+    // ─── Actions section ───────────────────────────────────────────
+    const actionsSection = actions.length > 0 && (_jsx("div", { className: "flex shrink-0 items-center gap-2 @min-[1140px]:gap-3", children: actions.map((a, i) => renderAction(a, i)) }));
+    // ─── Search ────────────────────────────────────────────────────
+    function renderSearch(wrapperClassName) {
+        if (!hasSearch)
+            return null;
+        return (_jsx(Input, { size: "sm", type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, leadingIcon: "search", value: searchQuery, onChange: (e) => {
+                setSearchQuery(e.target.value);
+                onSearch?.(e.target.value);
+            }, wrapperClassName: wrapperClassName }));
+    }
+    // ─── Switcher ──────────────────────────────────────────────────
+    function renderSwitcher(className) {
+        if (!switcher || switcher.tabs.length === 0)
+            return null;
+        const switcherLabel = switcher.label ?? "Workspace";
+        if (variant === 11) {
+            // v11: pill-style tabs
+            return (_jsx("div", { role: "group", "aria-label": switcherLabel, className: cn("flex items-center gap-2", className), children: switcher.tabs.map((tab, i) => (_jsx("button", { type: "button", "aria-pressed": i === activeTab, onClick: () => selectTab(i), className: cn("cursor-pointer rounded-lg px-4 py-2 text-sm font-semibold whitespace-nowrap", FOCUS_RING, i === activeTab
+                        ? "bg-primary-50 text-action-primary-text"
+                        : "text-grey-500 hover:text-grey-700"), children: tab }, tab))) }));
+        }
+        // v10: segmented control. The selected chip is a raised surface rather than a
+        // hard-coded white one, so it follows the document's mode.
+        return (_jsx("div", { role: "group", "aria-label": switcherLabel, className: cn("flex items-center", className), children: switcher.tabs.map((tab, i) => (_jsx("button", { type: "button", "aria-pressed": i === activeTab, onClick: () => selectTab(i), className: cn("cursor-pointer px-4 py-2.5 text-sm whitespace-nowrap", FOCUS_RING, i === 0 && "rounded-l-lg", i === switcher.tabs.length - 1 && "rounded-r-lg", i === activeTab
+                    ? "border border-surface-border-strong bg-surface font-semibold text-grey-900"
+                    : "bg-grey-200 font-medium text-grey-600"), children: tab }, tab))) }));
+    }
+    // ─── Pill nav (variants 3, 4) ──────────────────────────────────
+    function renderPillNav() {
+        return (_jsx("div", { className: cn("flex items-center rounded-full px-6 py-1 @min-[1140px]:px-8", PILL_GAP, isDark ? "bg-[#292424]" : "bg-grey-75"), children: links.map((link, i) => (_jsx(NavLink, { link: link, large: true }, `${link.label}-${i}`))) }));
+    }
+    // ─── Collapsed menu toggle ─────────────────────────────────────
+    function renderMenuToggle() {
+        if (!hasMenuContent)
+            return null;
+        return (_jsx("button", { ref: toggleRef, type: "button", onClick: () => setMenuOpen((open) => !open), "aria-expanded": menuOpen, "aria-controls": menuId, "aria-label": menuOpen ? "Close menu" : "Open menu", className: cn("flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-surface-border-strong text-on-surface-secondary transition-colors hover:bg-grey-75 hover:text-on-surface motion-reduce:transition-none", FOCUS_RING, tier.collapsed), children: _jsx(Icon, { name: menuOpen ? "multiply" : "list", size: "md" }) }));
+    }
+    // ─── Collapsed menu ────────────────────────────────────────────
+    /**
+     * Always in the DOM so `aria-controls` resolves to a real element, and carrying the
+     * same destinations, search, switcher and actions the expanded row has.
+     */
+    function renderMenu() {
+        if (!hasMenuContent)
+            return null;
+        const hasNavContent = links.length > 0 || rightLinks.length > 0 || secondaryLinks.length > 0;
+        return (_jsxs("div", { id: menuId, className: cn("flex flex-col gap-4 border-t border-surface-border bg-surface px-4 pt-4 pb-5 @min-[640px]:px-6", tier.collapsed, !menuOpen && "hidden"), children: [renderSearch("w-full"), hasSwitcher && renderSwitcher("w-full flex-wrap"), hasNavContent && (_jsxs("nav", { "aria-label": "Menu", className: "flex flex-col gap-3", children: [_jsx(StackedNavLinks, { links: links, onNavigate: closeMenu }), rightLinks.length > 0 && links.length > 0 && (_jsx("div", { className: "h-px w-full bg-surface-border" })), _jsx(StackedNavLinks, { links: rightLinks, onNavigate: closeMenu }), secondaryLinks.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-px w-full bg-surface-border" }), _jsx(StackedNavLinks, { links: secondaryLinks, tone: "muted", onNavigate: closeMenu })] }))] })), actions.length > 0 && (_jsx("div", { className: "flex flex-col gap-2 border-t border-surface-border pt-4", children: actions.map((action, i) => renderAction(action, i, closeMenu)) }))] }));
+    }
+    const rootProps = {
+        className: cn("@container flex w-full flex-col border-b border-surface-border bg-surface", isDark && DARK_ISLAND, className),
+        onKeyDown: handleKeyDown,
+    };
+    // ═══════════════════════════════════════════════════════════════
+    // VARIANT 11: Double-row header
+    // ═══════════════════════════════════════════════════════════════
+    if (variant === 11) {
+        return (_jsxs("header", { ...rootProps, children: [_jsxs("div", { className: cn("flex items-center justify-between", rowPadding), children: [_jsx("div", { className: tier.block, children: renderSwitcher() }), secondaryLinks.length > 0 && (_jsx("nav", { "aria-label": secondaryNavLabel, className: cn(tier.row, "items-center", NAV_GAP), children: secondaryLinks.map((link, i) => (_jsx(NavLink, { link: link, tone: "muted" }, `${link.label}-${i}`))) })), _jsx("div", { className: cn("min-w-0 flex-1", tier.collapsed), children: logo }), renderMenuToggle()] }), _jsx("div", { className: "h-px w-full bg-surface-border" }), _jsxs("div", { className: cn(tier.row, "items-center justify-between", rowPadding), children: [_jsxs("div", { className: "flex min-w-0 items-center gap-6 @min-[1140px]:gap-10", children: [logo, links.length > 0 && (_jsx("nav", { "aria-label": navLabel, children: _jsx(NavLinks, { links: links, large: true, gap: NAV_GAP }) }))] }), actionsSection] }), renderMenu()] }));
+    }
+    // ═══════════════════════════════════════════════════════════════
+    // VARIANTS 7, 8: Centered logo layout
+    // Left links | Logo (center) | Right links + Actions
+    // ═══════════════════════════════════════════════════════════════
+    if (variant === 7 || variant === 8) {
+        return (_jsxs("header", { ...rootProps, children: [_jsxs("div", { className: cn("flex w-full items-center justify-between gap-4", variant === 7
+                        ? "@min-[1060px]:grid @min-[1060px]:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]"
+                        : "@min-[1280px]:grid @min-[1280px]:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]", rowPadding), children: [_jsx("div", { className: cn(tier.block, "min-w-0"), children: links.length > 0 && (_jsx("nav", { "aria-label": navLabel, children: _jsx(NavLinks, { links: links }) })) }), _jsx("div", { className: "min-w-0", children: logo }), _jsxs("div", { className: "flex items-center justify-self-end gap-4 @min-[1140px]:gap-6", children: [_jsxs("div", { className: cn(tier.row, "items-center gap-4 @min-[1140px]:gap-6"), children: [rightLinks.length > 0 && (_jsx("nav", { "aria-label": secondaryNavLabel, children: _jsx(NavLinks, { links: rightLinks }) })), actionsSection] }), renderMenuToggle()] })] }), renderMenu()] }));
+    }
+    // ═══════════════════════════════════════════════════════════════
+    // ALL OTHER VARIANTS (1–6, 9, 10)
+    // Logo (left) | Links (center) | Actions (right)
+    // ═══════════════════════════════════════════════════════════════
+    return (_jsxs("header", { ...rootProps, children: [variant === 1 && announcement && (_jsxs("div", { className: "flex w-full flex-wrap items-center justify-center gap-x-3 gap-y-1 bg-[#290b00] px-4 py-2.5 text-center", children: [_jsx("span", { className: "text-xs text-white", children: announcement.text }), announcement.linkLabel && (_jsx("button", { type: "button", onClick: announcement.onLinkClick, className: cn("cursor-pointer rounded text-xs font-semibold text-warning-400", FOCUS_RING), children: announcement.linkLabel }))] })), _jsxs("div", { className: cn("flex w-full items-center justify-between gap-4", rowPadding), children: [_jsxs("div", { className: cn("flex items-center gap-4 @min-[1140px]:gap-10", 
+                        // The search field is the one element allowed to absorb the slack, so it
+                        // shrinks instead of pinning the row to a 375px minimum.
+                        hasSearch ? "min-w-0 flex-1" : "shrink-0"), children: [logo, renderSearch(cn(tier.block, "min-w-[200px] max-w-[375px] flex-1")), hasSwitcher && _jsx("div", { className: tier.block, children: renderSwitcher() })] }), (links.length > 0 || variant === 3 || variant === 4) && (_jsx("nav", { "aria-label": navLabel, className: tier.block, children: variant === 3 || variant === 4 ? (renderPillNav()) : (_jsx(NavLinks, { links: links, large: isLargeLinks })) })), _jsxs("div", { className: "flex shrink-0 items-center gap-4 @min-[1140px]:gap-6", children: [rightLinks.length > 0 && (_jsx("nav", { "aria-label": secondaryNavLabel, className: tier.block, children: _jsx(NavLinks, { links: rightLinks, large: isLargeLinks }) })), _jsx("div", { className: cn(tier.row, "items-center"), children: actionsSection }), renderMenuToggle()] })] }), renderMenu()] }));
+}

package/dist/blocks/KpiOverviewBlock.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiOverviewBlock = KpiOverviewBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Alert_1 = require("../components/Alert/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Spinner_1 = require("../components/Spinner/index.cjs");
+/* ─── Change badge ───────────────────────────────────────────────────── */
+const sentimentStyles = {
+    positive: "bg-success-50 text-success-700",
+    negative: "bg-error-50 text-error-700",
+    neutral: "bg-grey-100 text-grey-700",
+};
+const directionIcon = {
+    up: "arrow-up",
+    down: "arrow-down",
+    flat: "minus",
+};
+const directionText = {
+    up: "increased by",
+    down: "decreased by",
+    flat: "unchanged at",
+};
+function ChangeBadge({ change, comparisonLabel }) {
+    const sentiment = change.sentiment ?? "neutral";
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-body-xs font-medium", sentimentStyles[sentiment]), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: directionIcon[change.direction], size: "xs" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: directionText[change.direction] }), (0, jsx_runtime_1.jsx)("span", { children: change.label }), (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: ["compared with ", comparisonLabel] })] }));
+}
+/* ─── Tile ───────────────────────────────────────────────────────────── */
+function MetricTrend({ label, trend }) {
+    if (trend.values.some((value) => !Number.isFinite(value)))
+        return null;
+    const low = Math.min(...trend.values);
+    const range = Math.max(...trend.values) - low || 1;
+    const points = trend.values
+        .map((value, index) => `${2 + (index / (trend.values.length - 1)) * 296},${44 - ((value - low) / range) * 40}`)
+        .join(" ");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 300 48", preserveAspectRatio: "none", "aria-hidden": "true", className: "h-12 w-full text-action-primary-text", children: (0, jsx_runtime_1.jsx)("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }) }), (0, jsx_runtime_1.jsxs)("table", { className: "sr-only", children: [(0, jsx_runtime_1.jsxs)("caption", { children: [label, " trend"] }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "col", children: "Period" }), (0, jsx_runtime_1.jsx)("th", { scope: "col", children: "Value" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: trend.values.map((value, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: trend.labels[index] ?? `Point ${index + 1}` }), (0, jsx_runtime_1.jsx)("td", { children: value })] }, index))) })] })] }));
+}
+function MetricBody({ metric, comparisonLabel, labelId, }) {
+    if (metric.unavailableReason) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("span", { id: labelId, className: "text-body-sm font-medium text-grey-600", children: metric.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-h6 font-semibold text-grey-600", children: "Not available" }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-xs text-grey-600", children: metric.unavailableReason })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [(0, jsx_runtime_1.jsx)("span", { id: labelId, className: "min-w-0 text-body-sm font-medium text-grey-600", children: metric.label }), metric.icon && ((0, jsx_runtime_1.jsx)("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-surface-border text-grey-600", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: metric.icon, size: "sm" }) }))] }), (0, jsx_runtime_1.jsx)("p", { className: "text-h5 font-semibold break-words text-grey-900", children: metric.value }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [metric.change && (0, jsx_runtime_1.jsx)(ChangeBadge, { change: metric.change, comparisonLabel: comparisonLabel }), metric.comparisonValue ? ((0, jsx_runtime_1.jsxs)("span", { className: "text-body-xs text-grey-600", children: ["from ", metric.comparisonValue, " in ", comparisonLabel] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "text-body-xs text-grey-600", children: ["No comparable figure for ", comparisonLabel] }))] }), metric.trend && metric.trend.values.length > 1 && ((0, jsx_runtime_1.jsx)(MetricTrend, { label: metric.label, trend: metric.trend })), metric.description && (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: metric.description })] }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+function KpiOverviewBlock({ title = "Performance overview", description, headingLevel = "h2", period, metrics, periodOptions, selectedPeriodId, onPeriodChange, periodSelectLabel = "Reporting period", status = "idle", errorMessage, onRetry, onSelectMetric, emptyTitle = "No metrics selected", emptyDescription = "Choose the measures you want to follow and they will appear here.", footer, loadingPlaceholderCount = 4, className, }) {
+    const uid = (0, react_1.useId)();
+    const titleId = `${uid}-title`;
+    const periodId = `${uid}-period`;
+    const periodSelectId = `${uid}-period-select`;
+    const Heading = headingLevel;
+    const showPeriodSelector = Boolean(periodOptions && periodOptions.length > 0 && selectedPeriodId && onPeriodChange);
+    // `relative` gives visually hidden, absolutely positioned text inside a tile
+    // a containing block, so it can never escape and widen the document.
+    const tileClass = "relative flex h-full min-w-0 flex-col gap-3 rounded-12 border border-surface-border bg-surface p-4 text-left";
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": titleId, className: (0, cn_1.cn)("@container flex w-full flex-col gap-4", className), children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-col gap-3 @min-[620px]:flex-row @min-[620px]:items-end @min-[620px]:justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), (0, jsx_runtime_1.jsxs)("p", { id: periodId, className: "text-body-sm text-grey-600", children: [period.label, " \u00B7 compared with ", period.comparisonLabel] }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: description })] }), showPeriodSelector && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col gap-1", children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: periodSelectId, className: "text-sm font-medium leading-[1.45] text-grey-900", children: periodSelectLabel }), (0, jsx_runtime_1.jsx)("select", { id: periodSelectId, value: selectedPeriodId, onChange: (event) => onPeriodChange?.(event.target.value), className: (0, cn_1.cn)("h-10 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 @min-[620px]:w-auto", "transition-colors hover:border-primary-100", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text"), children: periodOptions?.map((option) => ((0, jsx_runtime_1.jsx)("option", { value: option.id, children: option.label }, option.id))) })] }))] }), status === "error" ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(Alert_1.Alert, { state: "error", icon: "info-triangle", role: "alert", title: "These metrics could not be loaded", description: errorMessage ?? "The reporting service did not respond. Your filters are unchanged.", className: "bg-surface dark:bg-surface" }), onRetry && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) }))] })) : status === "loading" ? ((0, jsx_runtime_1.jsxs)("div", { "aria-busy": "true", className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsxs)("output", { className: "flex items-center gap-2 pl-1 text-body-sm text-grey-600", children: [(0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: "xs" }), "Loading metrics for ", period.label, "\u2026"] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 gap-4 @min-[560px]:grid-cols-2 @min-[1000px]:grid-cols-4", children: Array.from({ length: loadingPlaceholderCount }, (_, index) => ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": "true", className: (0, cn_1.cn)(tileClass, "gap-3"), children: [(0, jsx_runtime_1.jsx)("span", { className: "h-4 w-2/3 rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("span", { className: "h-7 w-1/2 rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("span", { className: "h-4 w-full rounded bg-grey-100" })] }, index))) })] })) : metrics.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 rounded-12 border border-dashed border-surface-border-strong bg-surface p-6", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-body-md font-semibold text-grey-900", children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-body-sm text-grey-600", children: emptyDescription })] })) : ((0, jsx_runtime_1.jsx)("ul", { role: "list", "aria-describedby": periodId, className: "grid list-none grid-cols-1 gap-4 p-0 @min-[560px]:grid-cols-2 @min-[1000px]:grid-cols-4", children: metrics.map((metric) => {
+                    const labelId = `${uid}-metric-${metric.id}`;
+                    return ((0, jsx_runtime_1.jsxs)("li", { className: (0, cn_1.cn)(tileClass, "min-w-0"), children: [(0, jsx_runtime_1.jsx)(MetricBody, { metric: metric, comparisonLabel: period.comparisonLabel, labelId: labelId }), onSelectMetric && !metric.unavailableReason && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onSelectMetric(metric.id), className: "mt-auto inline-flex cursor-pointer items-center gap-1 self-start rounded pt-1 text-body-xs font-semibold text-action-primary-text hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: ["View details ", (0, jsx_runtime_1.jsxs)("span", { className: "sr-only", children: ["for ", metric.label] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "xs" })] }))] }, metric.id));
+                }) })), footer && (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-3", children: footer })] }));
+}

package/dist/blocks/KpiOverviewBlock.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../utils/cn.js";
+import { Alert } from "../components/Alert/index.js";
+import { Button } from "../components/Button/index.js";
+import { Icon } from "../components/Icon/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Change badge ───────────────────────────────────────────────────── */
+const sentimentStyles = {
+    positive: "bg-success-50 text-success-700",
+    negative: "bg-error-50 text-error-700",
+    neutral: "bg-grey-100 text-grey-700",
+};
+const directionIcon = {
+    up: "arrow-up",
+    down: "arrow-down",
+    flat: "minus",
+};
+const directionText = {
+    up: "increased by",
+    down: "decreased by",
+    flat: "unchanged at",
+};
+function ChangeBadge({ change, comparisonLabel }) {
+    const sentiment = change.sentiment ?? "neutral";
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-body-xs font-medium", sentimentStyles[sentiment]), children: [_jsx(Icon, { name: directionIcon[change.direction], size: "xs" }), _jsx("span", { className: "sr-only", children: directionText[change.direction] }), _jsx("span", { children: change.label }), _jsxs("span", { className: "sr-only", children: ["compared with ", comparisonLabel] })] }));
+}
+/* ─── Tile ───────────────────────────────────────────────────────────── */
+function MetricTrend({ label, trend }) {
+    if (trend.values.some((value) => !Number.isFinite(value)))
+        return null;
+    const low = Math.min(...trend.values);
+    const range = Math.max(...trend.values) - low || 1;
+    const points = trend.values
+        .map((value, index) => `${2 + (index / (trend.values.length - 1)) * 296},${44 - ((value - low) / range) * 40}`)
+        .join(" ");
+    return (_jsxs("div", { className: "relative", children: [_jsx("svg", { viewBox: "0 0 300 48", preserveAspectRatio: "none", "aria-hidden": "true", className: "h-12 w-full text-action-primary-text", children: _jsx("polyline", { points: points, fill: "none", stroke: "currentColor", strokeWidth: "2", vectorEffect: "non-scaling-stroke" }) }), _jsxs("table", { className: "sr-only", children: [_jsxs("caption", { children: [label, " trend"] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Period" }), _jsx("th", { scope: "col", children: "Value" })] }) }), _jsx("tbody", { children: trend.values.map((value, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: trend.labels[index] ?? `Point ${index + 1}` }), _jsx("td", { children: value })] }, index))) })] })] }));
+}
+function MetricBody({ metric, comparisonLabel, labelId, }) {
+    if (metric.unavailableReason) {
+        return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsx("span", { id: labelId, className: "text-body-sm font-medium text-grey-600", children: metric.label }), _jsx("span", { className: "text-h6 font-semibold text-grey-600", children: "Not available" }), _jsx("p", { className: "text-body-xs text-grey-600", children: metric.unavailableReason })] }));
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsx("span", { id: labelId, className: "min-w-0 text-body-sm font-medium text-grey-600", children: metric.label }), metric.icon && (_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-surface-border text-grey-600", children: _jsx(Icon, { name: metric.icon, size: "sm" }) }))] }), _jsx("p", { className: "text-h5 font-semibold break-words text-grey-900", children: metric.value }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [metric.change && _jsx(ChangeBadge, { change: metric.change, comparisonLabel: comparisonLabel }), metric.comparisonValue ? (_jsxs("span", { className: "text-body-xs text-grey-600", children: ["from ", metric.comparisonValue, " in ", comparisonLabel] })) : (_jsxs("span", { className: "text-body-xs text-grey-600", children: ["No comparable figure for ", comparisonLabel] }))] }), metric.trend && metric.trend.values.length > 1 && (_jsx(MetricTrend, { label: metric.label, trend: metric.trend })), metric.description && _jsx("p", { className: "text-body-sm text-grey-600", children: metric.description })] }));
+}
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function KpiOverviewBlock({ title = "Performance overview", description, headingLevel = "h2", period, metrics, periodOptions, selectedPeriodId, onPeriodChange, periodSelectLabel = "Reporting period", status = "idle", errorMessage, onRetry, onSelectMetric, emptyTitle = "No metrics selected", emptyDescription = "Choose the measures you want to follow and they will appear here.", footer, loadingPlaceholderCount = 4, className, }) {
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const periodId = `${uid}-period`;
+    const periodSelectId = `${uid}-period-select`;
+    const Heading = headingLevel;
+    const showPeriodSelector = Boolean(periodOptions && periodOptions.length > 0 && selectedPeriodId && onPeriodChange);
+    // `relative` gives visually hidden, absolutely positioned text inside a tile
+    // a containing block, so it can never escape and widen the document.
+    const tileClass = "relative flex h-full min-w-0 flex-col gap-3 rounded-12 border border-surface-border bg-surface p-4 text-left";
+    return (_jsxs("section", { "aria-labelledby": titleId, className: cn("@container flex w-full flex-col gap-4", className), children: [_jsxs("header", { className: "flex flex-col gap-3 @min-[620px]:flex-row @min-[620px]:items-end @min-[620px]:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), _jsxs("p", { id: periodId, className: "text-body-sm text-grey-600", children: [period.label, " \u00B7 compared with ", period.comparisonLabel] }), description && _jsx("p", { className: "text-body-sm text-grey-600", children: description })] }), showPeriodSelector && (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("label", { htmlFor: periodSelectId, className: "text-sm font-medium leading-[1.45] text-grey-900", children: periodSelectLabel }), _jsx("select", { id: periodSelectId, value: selectedPeriodId, onChange: (event) => onPeriodChange?.(event.target.value), className: cn("h-10 w-full rounded-lg border border-grey-300 bg-surface px-3 text-sm text-grey-900 @min-[620px]:w-auto", "transition-colors hover:border-primary-100", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text"), children: periodOptions?.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id))) })] }))] }), status === "error" ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Alert, { state: "error", icon: "info-triangle", role: "alert", title: "These metrics could not be loaded", description: errorMessage ?? "The reporting service did not respond. Your filters are unchanged.", className: "bg-surface dark:bg-surface" }), onRetry && (_jsx("div", { children: _jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onRetry, children: "Try again" }) }))] })) : status === "loading" ? (_jsxs("div", { "aria-busy": "true", className: "flex flex-col gap-3", children: [_jsxs("output", { className: "flex items-center gap-2 pl-1 text-body-sm text-grey-600", children: [_jsx(Spinner, { size: "xs" }), "Loading metrics for ", period.label, "\u2026"] }), _jsx("div", { className: "grid grid-cols-1 gap-4 @min-[560px]:grid-cols-2 @min-[1000px]:grid-cols-4", children: Array.from({ length: loadingPlaceholderCount }, (_, index) => (_jsxs("div", { "aria-hidden": "true", className: cn(tileClass, "gap-3"), children: [_jsx("span", { className: "h-4 w-2/3 rounded bg-grey-100" }), _jsx("span", { className: "h-7 w-1/2 rounded bg-grey-100" }), _jsx("span", { className: "h-4 w-full rounded bg-grey-100" })] }, index))) })] })) : metrics.length === 0 ? (_jsxs("div", { className: "flex flex-col items-start gap-2 rounded-12 border border-dashed border-surface-border-strong bg-surface p-6", children: [_jsx("p", { className: "text-body-md font-semibold text-grey-900", children: emptyTitle }), _jsx("p", { className: "text-body-sm text-grey-600", children: emptyDescription })] })) : (_jsx("ul", { role: "list", "aria-describedby": periodId, className: "grid list-none grid-cols-1 gap-4 p-0 @min-[560px]:grid-cols-2 @min-[1000px]:grid-cols-4", children: metrics.map((metric) => {
+                    const labelId = `${uid}-metric-${metric.id}`;
+                    return (_jsxs("li", { className: cn(tileClass, "min-w-0"), children: [_jsx(MetricBody, { metric: metric, comparisonLabel: period.comparisonLabel, labelId: labelId }), onSelectMetric && !metric.unavailableReason && (_jsxs("button", { type: "button", onClick: () => onSelectMetric(metric.id), className: "mt-auto inline-flex cursor-pointer items-center gap-1 self-start rounded pt-1 text-body-xs font-semibold text-action-primary-text hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: ["View details ", _jsxs("span", { className: "sr-only", children: ["for ", metric.label] }), _jsx(Icon, { name: "chevron-right", size: "xs" })] }))] }, metric.id));
+                }) })), footer && _jsx("div", { className: "flex flex-wrap items-center gap-3", children: footer })] }));
+}

package/dist/blocks/LoginBlock.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginBlock = LoginBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Input_1 = require("../components/Input/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+const FormControl_1 = require("../components/FormControl/index.cjs");
+const Divider_1 = require("../components/Divider/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+// ─── Google Icon ──────────────────────────────────────────────────────
+function GoogleIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18.17 8.37H17.5V8.33H10V11.67H14.71C14.02 13.61 12.18 15 10 15C7.24 15 5 12.76 5 10C5 7.24 7.24 5 10 5C11.27 5 12.42 5.48 13.3 6.27L15.67 3.9C14.15 2.49 12.18 1.67 10 1.67C5.4 1.67 1.67 5.4 1.67 10C1.67 14.6 5.4 18.33 10 18.33C14.6 18.33 18.33 14.6 18.33 10C18.33 9.44 18.28 8.9 18.17 8.37Z", fill: "#FFC107" }), (0, jsx_runtime_1.jsx)("path", { d: "M2.63 6.12L5.37 8.13C6.12 6.29 7.91 5 10 5C11.27 5 12.42 5.48 13.3 6.27L15.67 3.9C14.15 2.49 12.18 1.67 10 1.67C6.95 1.67 4.31 3.47 2.63 6.12Z", fill: "#FF3D00" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 18.33C12.13 18.33 14.06 17.55 15.56 16.2L12.96 14.01C12.12 14.63 11.09 15 10 15C7.83 15 5.99 13.62 5.3 11.69L2.58 13.78C4.24 16.51 6.91 18.33 10 18.33Z", fill: "#4CAF50" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.17 8.37H17.5V8.33H10V11.67H14.71C14.38 12.59 13.79 13.38 13 13.96L13 13.96L15.56 16.2C15.37 16.37 18.33 14.17 18.33 10C18.33 9.44 18.28 8.9 18.17 8.37Z", fill: "#1976D2" })] }));
+}
+// ─── Twitter / X Icon ────────────────────────────────────────────────
+function TwitterIcon() {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M15.27 1.58H18.08L11.94 8.66L19.17 18.42H13.51L9.08 12.6L4.01 18.42H1.19L7.79 10.84L0.83 1.58H6.63L10.61 6.88L15.27 1.58ZM14.27 16.68H15.83L5.83 3.18H4.17L14.27 16.68Z", fill: "#1DA1F2" }) }));
+}
+// ─── Component ───────────────────────────────────────────────────────
+function LoginBlock({ variant = "standard", title, subtitle, submitLabel, onForgotPassword, onSubmit, socialProviders, onSignUp, signUpPrompt, signUpLabel, showRememberMe = true, rememberMeLabel = "Remember me", pending = false, pendingLabel = "Signing in…", error, className, }) {
+    const [email, setEmail] = (0, react_1.useState)("");
+    const [password, setPassword] = (0, react_1.useState)("");
+    const [showPassword, setShowPassword] = (0, react_1.useState)(false);
+    const [rememberMe, setRememberMe] = (0, react_1.useState)(false);
+    // Defaults per variant
+    const resolvedTitle = title ?? (variant === "work-email" ? "Sign in with your work email" : "Log In");
+    const resolvedSubtitle = subtitle ??
+        (variant === "work-email"
+            ? "Use your work email to sign in to your team workspace"
+            : "Enter your credentials to access your account");
+    const resolvedSubmitLabel = submitLabel ?? (variant === "work-email" ? "Sign in" : "Log into Account");
+    const resolvedSignUpPrompt = signUpPrompt ?? (variant === "work-email" ? "Don't have an account?" : "Are you new here?");
+    const resolvedSignUpLabel = signUpLabel ?? (variant === "work-email" ? "Sign up" : "Create Account");
+    const resolvedProviders = socialProviders ?? [
+        { name: "Google", icon: (0, jsx_runtime_1.jsx)(GoogleIcon, {}) },
+        { name: "Twitter", icon: (0, jsx_runtime_1.jsx)(TwitterIcon, {}) },
+    ];
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Guard duplicate submission: `disabled` does not stop an implicit
+        // Enter-key submit in every browser, and the form may still be reachable
+        // while a request is in flight.
+        if (pending)
+            return;
+        onSubmit?.({ email, password, rememberMe });
+    };
+    const isWorkEmail = variant === "work-email";
+    const isCard = variant === "card";
+    // Social providers start a competing authentication route, so they follow the
+    // pending contract. Provider artwork stays literal brand colour; only the
+    // surrounding interface chrome is themeable.
+    const providerButtonClass = "flex items-center justify-center gap-4 w-full rounded-md border-[1.5px] border-surface-border-strong bg-surface p-4 text-base font-semibold text-grey-700 hover:bg-grey-50 dark:hover:bg-grey-100 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+    const socialSection = resolvedProviders.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3", children: resolvedProviders.map((provider) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: provider.onClick, disabled: pending, className: providerButtonClass, children: [(0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: provider.icon }), "Continue with ", provider.name] }, provider.name))) }));
+    // Password recovery is independent of the remember-me option so every variant
+    // that supplies a handler can offer it.
+    const forgotPasswordAction = onForgotPassword && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onForgotPassword, disabled: pending, className: "rounded text-sm font-medium text-action-primary-text cursor-pointer hover:underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: "Forgot Password?" }));
+    const showRememberMeRow = showRememberMe && !isWorkEmail;
+    const formContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2 text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-h4 font-semibold text-grey-900", children: resolvedTitle }), (0, jsx_runtime_1.jsx)("p", { className: "text-base text-grey-500", children: resolvedSubtitle })] }), isWorkEmail && socialSection && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-10 flex w-full flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: resolvedProviders[0]?.onClick, disabled: pending, className: providerButtonClass, children: [(0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: resolvedProviders[0]?.icon }), `Continue with ${resolvedProviders[0]?.name ?? "Google"}`] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-surface-border" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-grey-500", children: "OR" }), (0, jsx_runtime_1.jsx)("div", { className: "h-px flex-1 bg-surface-border" })] })] })), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: (0, cn_1.cn)("flex flex-col", isWorkEmail ? "gap-6" : "gap-8", !isWorkEmail && "mt-10"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { label: isWorkEmail ? "Email Address" : "EMAIL ADDRESS", placeholder: isWorkEmail ? "" : "Enter Email", size: "lg", type: "email", autoComplete: "email", required: true, disabled: pending, value: email, onChange: (e) => setEmail(e.target.value), trailingIcon: "mail" }), (0, jsx_runtime_1.jsx)(Input_1.Input, { label: "PASSWORD", placeholder: "Enter Password", type: showPassword ? "text" : "password", size: "lg", autoComplete: "current-password", required: true, disabled: pending, value: password, onChange: (e) => setPassword(e.target.value), trailingAction: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, className: "flex size-6 items-center justify-center rounded text-grey-500 hover:text-grey-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: showPassword ? "eye" : "eye-slash", size: "sm" }) }) })] }), (showRememberMeRow || forgotPasswordAction) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center gap-4", showRememberMeRow ? "justify-between" : "justify-end"), children: [showRememberMeRow && ((0, jsx_runtime_1.jsx)(FormControl_1.Checkbox, { label: rememberMeLabel, checked: rememberMe, disabled: pending, onChange: () => setRememberMe(!rememberMe), wrapperClassName: (0, cn_1.cn)(pending && "cursor-not-allowed opacity-50") })), forgotPasswordAction] }))] }), error && ((0, jsx_runtime_1.jsx)("p", { role: "alert", className: "text-sm text-feedback-error leading-[1.45]", children: error })), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", variant: "primary", size: "lg", className: "w-full", disabled: pending, "aria-busy": pending || undefined, children: pending ? pendingLabel : resolvedSubmitLabel })] }), !isWorkEmail && socialSection && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, { variant: "with-label", label: "Or" }), socialSection] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-grey-500", children: resolvedSignUpPrompt }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onSignUp, disabled: pending, className: "rounded text-sm font-medium text-action-primary-text cursor-pointer hover:underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: resolvedSignUpLabel })] })] }));
+    // Card variant wraps in a bordered card
+    if (isCard) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-surface border border-surface-border-strong rounded-10 px-7 py-8 w-full max-w-[432px]", className), children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-8", children: formContent }) }));
+    }
+    // Standard / Work-email: no card wrapper
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex flex-col items-center justify-center gap-6 w-full max-w-[400px] px-4 sm:px-0", className), children: formContent }));
+}

package/dist/blocks/LoginBlock.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../utils/cn.js";
+import { Input } from "../components/Input/index.js";
+import { Button } from "../components/Button/index.js";
+import { Checkbox } from "../components/FormControl/index.js";
+import { Divider } from "../components/Divider/index.js";
+import { Icon } from "../components/Icon/index.js";
+// ─── Google Icon ──────────────────────────────────────────────────────
+function GoogleIcon() {
+    return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [_jsx("path", { d: "M18.17 8.37H17.5V8.33H10V11.67H14.71C14.02 13.61 12.18 15 10 15C7.24 15 5 12.76 5 10C5 7.24 7.24 5 10 5C11.27 5 12.42 5.48 13.3 6.27L15.67 3.9C14.15 2.49 12.18 1.67 10 1.67C5.4 1.67 1.67 5.4 1.67 10C1.67 14.6 5.4 18.33 10 18.33C14.6 18.33 18.33 14.6 18.33 10C18.33 9.44 18.28 8.9 18.17 8.37Z", fill: "#FFC107" }), _jsx("path", { d: "M2.63 6.12L5.37 8.13C6.12 6.29 7.91 5 10 5C11.27 5 12.42 5.48 13.3 6.27L15.67 3.9C14.15 2.49 12.18 1.67 10 1.67C6.95 1.67 4.31 3.47 2.63 6.12Z", fill: "#FF3D00" }), _jsx("path", { d: "M10 18.33C12.13 18.33 14.06 17.55 15.56 16.2L12.96 14.01C12.12 14.63 11.09 15 10 15C7.83 15 5.99 13.62 5.3 11.69L2.58 13.78C4.24 16.51 6.91 18.33 10 18.33Z", fill: "#4CAF50" }), _jsx("path", { d: "M18.17 8.37H17.5V8.33H10V11.67H14.71C14.38 12.59 13.79 13.38 13 13.96L13 13.96L15.56 16.2C15.37 16.37 18.33 14.17 18.33 10C18.33 9.44 18.28 8.9 18.17 8.37Z", fill: "#1976D2" })] }));
+}
+// ─── Twitter / X Icon ────────────────────────────────────────────────
+function TwitterIcon() {
+    return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M15.27 1.58H18.08L11.94 8.66L19.17 18.42H13.51L9.08 12.6L4.01 18.42H1.19L7.79 10.84L0.83 1.58H6.63L10.61 6.88L15.27 1.58ZM14.27 16.68H15.83L5.83 3.18H4.17L14.27 16.68Z", fill: "#1DA1F2" }) }));
+}
+// ─── Component ───────────────────────────────────────────────────────
+export function LoginBlock({ variant = "standard", title, subtitle, submitLabel, onForgotPassword, onSubmit, socialProviders, onSignUp, signUpPrompt, signUpLabel, showRememberMe = true, rememberMeLabel = "Remember me", pending = false, pendingLabel = "Signing in…", error, className, }) {
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [showPassword, setShowPassword] = useState(false);
+    const [rememberMe, setRememberMe] = useState(false);
+    // Defaults per variant
+    const resolvedTitle = title ?? (variant === "work-email" ? "Sign in with your work email" : "Log In");
+    const resolvedSubtitle = subtitle ??
+        (variant === "work-email"
+            ? "Use your work email to sign in to your team workspace"
+            : "Enter your credentials to access your account");
+    const resolvedSubmitLabel = submitLabel ?? (variant === "work-email" ? "Sign in" : "Log into Account");
+    const resolvedSignUpPrompt = signUpPrompt ?? (variant === "work-email" ? "Don't have an account?" : "Are you new here?");
+    const resolvedSignUpLabel = signUpLabel ?? (variant === "work-email" ? "Sign up" : "Create Account");
+    const resolvedProviders = socialProviders ?? [
+        { name: "Google", icon: _jsx(GoogleIcon, {}) },
+        { name: "Twitter", icon: _jsx(TwitterIcon, {}) },
+    ];
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Guard duplicate submission: `disabled` does not stop an implicit
+        // Enter-key submit in every browser, and the form may still be reachable
+        // while a request is in flight.
+        if (pending)
+            return;
+        onSubmit?.({ email, password, rememberMe });
+    };
+    const isWorkEmail = variant === "work-email";
+    const isCard = variant === "card";
+    // Social providers start a competing authentication route, so they follow the
+    // pending contract. Provider artwork stays literal brand colour; only the
+    // surrounding interface chrome is themeable.
+    const providerButtonClass = "flex items-center justify-center gap-4 w-full rounded-md border-[1.5px] border-surface-border-strong bg-surface p-4 text-base font-semibold text-grey-700 hover:bg-grey-50 dark:hover:bg-grey-100 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+    const socialSection = resolvedProviders.length > 0 && (_jsx("div", { className: "flex flex-col gap-3", children: resolvedProviders.map((provider) => (_jsxs("button", { type: "button", onClick: provider.onClick, disabled: pending, className: providerButtonClass, children: [_jsx("span", { className: "shrink-0 size-5", children: provider.icon }), "Continue with ", provider.name] }, provider.name))) }));
+    // Password recovery is independent of the remember-me option so every variant
+    // that supplies a handler can offer it.
+    const forgotPasswordAction = onForgotPassword && (_jsx("button", { type: "button", onClick: onForgotPassword, disabled: pending, className: "rounded text-sm font-medium text-action-primary-text cursor-pointer hover:underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: "Forgot Password?" }));
+    const showRememberMeRow = showRememberMe && !isWorkEmail;
+    const formContent = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [_jsx("h2", { className: "text-h4 font-semibold text-grey-900", children: resolvedTitle }), _jsx("p", { className: "text-base text-grey-500", children: resolvedSubtitle })] }), isWorkEmail && socialSection && (_jsxs("div", { className: "mt-10 flex w-full flex-col gap-4", children: [_jsxs("button", { type: "button", onClick: resolvedProviders[0]?.onClick, disabled: pending, className: providerButtonClass, children: [_jsx("span", { className: "shrink-0 size-5", children: resolvedProviders[0]?.icon }), `Continue with ${resolvedProviders[0]?.name ?? "Google"}`] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-px flex-1 bg-surface-border" }), _jsx("span", { className: "text-sm text-grey-500", children: "OR" }), _jsx("div", { className: "h-px flex-1 bg-surface-border" })] })] })), _jsxs("form", { onSubmit: handleSubmit, className: cn("flex flex-col", isWorkEmail ? "gap-6" : "gap-8", !isWorkEmail && "mt-10"), children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Input, { label: isWorkEmail ? "Email Address" : "EMAIL ADDRESS", placeholder: isWorkEmail ? "" : "Enter Email", size: "lg", type: "email", autoComplete: "email", required: true, disabled: pending, value: email, onChange: (e) => setEmail(e.target.value), trailingIcon: "mail" }), _jsx(Input, { label: "PASSWORD", placeholder: "Enter Password", type: showPassword ? "text" : "password", size: "lg", autoComplete: "current-password", required: true, disabled: pending, value: password, onChange: (e) => setPassword(e.target.value), trailingAction: _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? "Hide password" : "Show password", "aria-pressed": showPassword, className: "flex size-6 items-center justify-center rounded text-grey-500 hover:text-grey-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-400", children: _jsx(Icon, { name: showPassword ? "eye" : "eye-slash", size: "sm" }) }) })] }), (showRememberMeRow || forgotPasswordAction) && (_jsxs("div", { className: cn("flex items-center gap-4", showRememberMeRow ? "justify-between" : "justify-end"), children: [showRememberMeRow && (_jsx(Checkbox, { label: rememberMeLabel, checked: rememberMe, disabled: pending, onChange: () => setRememberMe(!rememberMe), wrapperClassName: cn(pending && "cursor-not-allowed opacity-50") })), forgotPasswordAction] }))] }), error && (_jsx("p", { role: "alert", className: "text-sm text-feedback-error leading-[1.45]", children: error })), _jsx(Button, { type: "submit", variant: "primary", size: "lg", className: "w-full", disabled: pending, "aria-busy": pending || undefined, children: pending ? pendingLabel : resolvedSubmitLabel })] }), !isWorkEmail && socialSection && (_jsxs(_Fragment, { children: [_jsx(Divider, { variant: "with-label", label: "Or" }), socialSection] })), _jsxs("div", { className: "flex items-center justify-center gap-1", children: [_jsx("span", { className: "text-sm text-grey-500", children: resolvedSignUpPrompt }), _jsx("button", { type: "button", onClick: onSignUp, disabled: pending, className: "rounded text-sm font-medium text-action-primary-text cursor-pointer hover:underline underline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: resolvedSignUpLabel })] })] }));
+    // Card variant wraps in a bordered card
+    if (isCard) {
+        return (_jsx("div", { className: cn("bg-surface border border-surface-border-strong rounded-10 px-7 py-8 w-full max-w-[432px]", className), children: _jsx("div", { className: "flex flex-col gap-8", children: formContent }) }));
+    }
+    // Standard / Work-email: no card wrapper
+    return (_jsx("div", { className: cn("flex flex-col items-center justify-center gap-6 w-full max-w-[400px] px-4 sm:px-0", className), children: formContent }));
+}

package/dist/blocks/NotificationsBlock.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsBlock = NotificationsBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const ActivityItem_1 = require("../components/ActivityFeed/ActivityItem.cjs");
+const ActivityContent_1 = require("../components/ActivityFeed/ActivityContent.cjs");
+const Badge_1 = require("../components/Badge/index.cjs");
+// ─── Component ───────────────────────────────────────────────────────
+function NotificationsBlock({ title = "Notifications", headingLevel = 3, unreadCount, items, className, }) {
+    const headingId = (0, react_1.useId)();
+    const Heading = `h${headingLevel}`;
+    return ((0, jsx_runtime_1.jsxs)("section", { "aria-labelledby": headingId, className: (0, cn_1.cn)("bg-white dark:bg-grey-50 rounded-xl shadow-[0px_3px_2px_-2px_rgba(0,0,0,0.06),0px_5px_3px_-2px_rgba(0,0,0,0.02)] pt-4 pb-8", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-1.5 flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Heading, { id: headingId, className: "flex-1 text-lg font-semibold text-grey-700", children: title }), unreadCount != null && unreadCount > 0 && ((0, jsx_runtime_1.jsxs)(Badge_1.Badge, { color: "success", type: "accent", size: "sm", children: [unreadCount, " unread"] }))] }), (0, jsx_runtime_1.jsx)("ul", { role: "list", className: "flex flex-col gap-4 px-6 mt-6 list-none", children: items.map((item) => {
+                    return ((0, jsx_runtime_1.jsx)("li", { className: "min-w-0", children: (0, jsx_runtime_1.jsxs)(ActivityItem_1.ActivityItem, { avatar: item.avatar, text: item.text, date: item.date, time: item.time, unread: item.unread, link: item.link, badge: item.badge, children: [item.content?.type === "file" && ((0, jsx_runtime_1.jsx)(ActivityContent_1.ActivityContent, { variant: "file", contentStyle: "container", title: item.content.title, size: item.content.size, fileType: item.content.fileType, date: item.content.date })), item.content?.type === "comment" && ((0, jsx_runtime_1.jsx)(ActivityContent_1.ActivityContent, { variant: "comment", contentStyle: "container", avatar: item.content.avatar, author: item.content.author, timestamp: item.content.timestamp, comment: item.content.comment, reactions: item.content.reactions, replies: item.content.replies })), item.content?.type === "cta" && ((0, jsx_runtime_1.jsx)(ActivityContent_1.ActivityContent, { variant: "cta", primaryAction: item.content.primaryAction, secondaryAction: item.content.secondaryAction }))] }) }, item.id));
+                }) })] }));
+}

package/dist/blocks/NotificationsBlock.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../utils/cn.js";
+import { ActivityItem } from "../components/ActivityFeed/ActivityItem.js";
+import { ActivityContent } from "../components/ActivityFeed/ActivityContent.js";
+import { Badge } from "../components/Badge/index.js";
+// ─── Component ───────────────────────────────────────────────────────
+export function NotificationsBlock({ title = "Notifications", headingLevel = 3, unreadCount, items, className, }) {
+    const headingId = useId();
+    const Heading = `h${headingLevel}`;
+    return (_jsxs("section", { "aria-labelledby": headingId, className: cn("bg-white dark:bg-grey-50 rounded-xl shadow-[0px_3px_2px_-2px_rgba(0,0,0,0.06),0px_5px_3px_-2px_rgba(0,0,0,0.02)] pt-4 pb-8", className), children: [_jsxs("div", { className: "px-6 py-1.5 flex items-center gap-2", children: [_jsx(Heading, { id: headingId, className: "flex-1 text-lg font-semibold text-grey-700", children: title }), unreadCount != null && unreadCount > 0 && (_jsxs(Badge, { color: "success", type: "accent", size: "sm", children: [unreadCount, " unread"] }))] }), _jsx("ul", { role: "list", className: "flex flex-col gap-4 px-6 mt-6 list-none", children: items.map((item) => {
+                    return (_jsx("li", { className: "min-w-0", children: _jsxs(ActivityItem, { avatar: item.avatar, text: item.text, date: item.date, time: item.time, unread: item.unread, link: item.link, badge: item.badge, children: [item.content?.type === "file" && (_jsx(ActivityContent, { variant: "file", contentStyle: "container", title: item.content.title, size: item.content.size, fileType: item.content.fileType, date: item.content.date })), item.content?.type === "comment" && (_jsx(ActivityContent, { variant: "comment", contentStyle: "container", avatar: item.content.avatar, author: item.content.author, timestamp: item.content.timestamp, comment: item.content.comment, reactions: item.content.reactions, replies: item.content.replies })), item.content?.type === "cta" && (_jsx(ActivityContent, { variant: "cta", primaryAction: item.content.primaryAction, secondaryAction: item.content.secondaryAction }))] }) }, item.id));
+                }) })] }));
+}