@raydenui/ui 0.9.7 → 0.10.0

package/dist/blocks/CreateAccountBlock.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../utils/cn.js";
+import { Alert } from "../components/Alert/index.js";
+import { Button } from "../components/Button/index.js";
+import { Checkbox } from "../components/FormControl/index.js";
+import { Icon } from "../components/Icon/index.js";
+import { Input } from "../components/Input/index.js";
+import { Spinner } from "../components/Spinner/index.js";
+/* ─── Defaults ───────────────────────────────────────────────────────── */
+export const defaultCreateAccountPasswordRules = [
+    { id: "length", label: "At least 8 characters", test: (v) => v.length >= 8 },
+    {
+        id: "case",
+        label: "An upper and a lower case letter",
+        test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v),
+    },
+    { id: "number", label: "At least one number", test: (v) => /\d/.test(v) },
+];
+// Deliberately permissive: the authority on a deliverable address is the
+// consuming application, not a regular expression.
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const emptyValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+};
+/* ─── Component ──────────────────────────────────────────────────────── */
+export function CreateAccountBlock({ title = "Create your account", description = "Set up a free workspace. No card required.", headingLevel = "h2", onSubmit, status = "idle", errorMessage, successMessage, fieldErrors, defaultValues, passwordRules = defaultCreateAccountPasswordRules, requireConfirmPassword = true, consentLabel, consentErrorMessage = "Please accept the terms before creating an account.", signIn, submitLabel = "Create account", submittingLabel = "Creating account…", disabled = false, disabledMessage = "Account creation is currently unavailable.", labels, className, }) {
+    const uid = useId();
+    const titleId = `${uid}-title`;
+    const consentId = `${uid}-consent`;
+    const consentTextId = `${uid}-consent-text`;
+    const consentErrorId = `${uid}-consent-error`;
+    const passwordRulesId = `${uid}-password-rules`;
+    const passwordErrorId = `${uid}-password-error`;
+    const unsavedRegionId = `${uid}-form-status`;
+    const [values, setValues] = useState({
+        ...emptyValues,
+        ...defaultValues,
+    });
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [consent, setConsent] = useState(false);
+    const [touched, setTouched] = useState({});
+    const [submitAttempted, setSubmitAttempted] = useState(false);
+    const [revealPassword, setRevealPassword] = useState(false);
+    const fieldRefs = useRef({});
+    const pending = status === "submitting";
+    const succeeded = status === "success";
+    const loading = status === "loading";
+    const locked = disabled || pending || succeeded;
+    const ruleResults = useMemo(() => passwordRules.map((rule) => ({ ...rule, met: rule.test(values.password) })), [passwordRules, values.password]);
+    const localErrors = useMemo(() => {
+        const next = {};
+        if (!values.firstName.trim())
+            next.firstName = "Enter your first name.";
+        if (!values.lastName.trim())
+            next.lastName = "Enter your last name.";
+        if (!values.email.trim())
+            next.email = "Enter your email address.";
+        else if (!EMAIL_PATTERN.test(values.email.trim()))
+            next.email = "Enter an email address such as name@example.com.";
+        if (!values.password)
+            next.password = "Choose a password.";
+        else if (ruleResults.some((rule) => !rule.met))
+            next.password = "Your password does not meet all of the requirements below.";
+        if (requireConfirmPassword) {
+            if (!confirmPassword)
+                next.confirmPassword = "Type your password again.";
+            else if (confirmPassword !== values.password)
+                next.confirmPassword = "The two passwords do not match.";
+        }
+        if (!consent)
+            next.consent = consentErrorMessage;
+        return next;
+    }, [values, confirmPassword, consent, consentErrorMessage, requireConfirmPassword, ruleResults]);
+    const errorFor = useCallback((field) => {
+        const serverError = fieldErrors?.[field];
+        if (serverError)
+            return serverError;
+        if (!submitAttempted && !touched[field])
+            return undefined;
+        return localErrors[field];
+    }, [fieldErrors, localErrors, submitAttempted, touched]);
+    const markTouched = useCallback((field) => setTouched((prev) => ({ ...prev, [field]: true })), []);
+    const handleSubmit = useCallback((event) => {
+        event.preventDefault();
+        // Guard duplicate submission: a second attempt while one is in flight is
+        // dropped rather than queued.
+        if (locked)
+            return;
+        setSubmitAttempted(true);
+        const order = [
+            "firstName",
+            "lastName",
+            "email",
+            "password",
+            "confirmPassword",
+            "consent",
+        ];
+        const firstInvalid = order.find((field) => localErrors[field]);
+        if (firstInvalid) {
+            fieldRefs.current[firstInvalid]?.focus();
+            return;
+        }
+        onSubmit({ ...values, consent });
+    }, [consent, localErrors, locked, onSubmit, values]);
+    const Heading = headingLevel;
+    const passwordError = errorFor("password");
+    const consentError = errorFor("consent");
+    const resolvedConsentLabel = consentLabel ?? "I agree to the terms of service and privacy policy.";
+    return (
+    // `@container` makes the block adapt to the column it is placed in, not
+    // to the viewport: a 360px settings column at 1440px behaves like a phone.
+    _jsx("section", { "aria-labelledby": titleId, className: cn("@container w-full", className), children: _jsxs("div", { className: "flex flex-col gap-6 rounded-12 border border-surface-border bg-surface p-4 @min-[420px]:p-6", children: [_jsxs("header", { className: "flex flex-col gap-2", children: [_jsx(Heading, { id: titleId, className: "text-h6 font-semibold text-grey-900", children: title }), description && _jsx("p", { className: "text-body-sm text-grey-600", children: description })] }), disabled && (_jsx(Alert, { state: "information", icon: "info-circle", role: "status", title: disabledMessage, className: "bg-surface dark:bg-surface" })), status === "error" && errorMessage && (_jsx(Alert, { state: "error", icon: "info-triangle", role: "alert", title: "We could not create your account", description: errorMessage, className: "bg-surface dark:bg-surface" })), succeeded && successMessage && (_jsx(Alert, { state: "success", icon: "check-circle", role: "status", title: successMessage, className: "bg-surface dark:bg-surface" })), loading ? (_jsx("div", { "aria-busy": "true", className: "flex min-h-40 flex-col items-center justify-center gap-3 rounded-8 border border-dashed border-surface-border-strong p-6", children: _jsx(Spinner, { size: "md", label: "Preparing the sign-up form\u2026", labelPosition: "below" }) })) : (_jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "flex flex-col gap-5", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 @min-[520px]:grid-cols-2", children: [_jsx(Input, { id: `${uid}-firstName`, ref: (node) => {
+                                        fieldRefs.current.firstName = node;
+                                    }, name: "firstName", label: labels?.firstName ?? "First name", autoComplete: "given-name", required: true, size: "md", disabled: locked, value: values.firstName, error: errorFor("firstName"), onChange: (e) => setValues((p) => ({ ...p, firstName: e.target.value })), onBlur: () => markTouched("firstName") }), _jsx(Input, { id: `${uid}-lastName`, ref: (node) => {
+                                        fieldRefs.current.lastName = node;
+                                    }, name: "lastName", label: labels?.lastName ?? "Last name", autoComplete: "family-name", required: true, size: "md", disabled: locked, value: values.lastName, error: errorFor("lastName"), onChange: (e) => setValues((p) => ({ ...p, lastName: e.target.value })), onBlur: () => markTouched("lastName") })] }), _jsx(Input, { id: `${uid}-email`, ref: (node) => {
+                                fieldRefs.current.email = node;
+                            }, name: "email", type: "email", inputMode: "email", label: labels?.email ?? "Work email", placeholder: "name@example.com", autoComplete: "email", required: true, size: "md", disabled: locked, value: values.email, error: errorFor("email"), onChange: (e) => setValues((p) => ({ ...p, email: e.target.value })), onBlur: () => markTouched("email") }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { id: `${uid}-password`, ref: (node) => {
+                                        fieldRefs.current.password = node;
+                                    }, name: "password", type: revealPassword ? "text" : "password", label: labels?.password ?? "Password", autoComplete: "new-password", required: true, size: "md", disabled: locked, value: values.password, 
+                                    // Boolean error: the message and the guidance list are rendered
+                                    // here so a single `aria-describedby` can reference both.
+                                    error: Boolean(passwordError), "aria-describedby": [passwordError ? passwordErrorId : null, passwordRulesId]
+                                        .filter(Boolean)
+                                        .join(" "), onChange: (e) => setValues((p) => ({ ...p, password: e.target.value })), onBlur: () => markTouched("password"), trailingAction: _jsxs("button", { type: "button", 
+                                        // Stays available while a submission is in flight: it only
+                                        // changes how an already-entered value is displayed.
+                                        onClick: () => setRevealPassword((v) => !v), className: "inline-flex cursor-pointer items-center rounded p-1 text-grey-500 hover:text-grey-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [_jsx(Icon, { name: revealPassword ? "eye-slash" : "eye", size: "md" }), _jsx("span", { className: "sr-only", children: revealPassword ? "Hide password" : "Show password" })] }) }), passwordError && (_jsx("p", { id: passwordErrorId, className: "text-body-sm text-feedback-error", children: passwordError })), _jsx("ul", { id: passwordRulesId, role: "list", className: "flex flex-col gap-1", children: ruleResults.map((rule) => (_jsxs("li", { className: cn("flex items-center gap-2 text-body-sm", rule.met ? "text-feedback-success" : "text-grey-600"), children: [_jsx(Icon, { name: rule.met ? "check-circle" : "minus-circle", size: "sm" }), _jsx("span", { children: rule.label }), _jsx("span", { className: "sr-only", children: rule.met ? "— met" : "— not met yet" })] }, rule.id))) })] }), requireConfirmPassword && (_jsx(Input, { id: `${uid}-confirmPassword`, ref: (node) => {
+                                fieldRefs.current.confirmPassword = node;
+                            }, name: "confirmPassword", type: revealPassword ? "text" : "password", label: labels?.confirmPassword ?? "Confirm password", autoComplete: "new-password", required: true, size: "md", disabled: locked, value: confirmPassword, error: errorFor("confirmPassword"), onChange: (e) => setConfirmPassword(e.target.value), onBlur: () => markTouched("confirmPassword") })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "pt-0.5", children: _jsx(Checkbox, { id: consentId, ref: (node) => {
+                                                    fieldRefs.current.consent = node;
+                                                }, name: "consent", checked: consent, disabled: locked, required: true, "aria-labelledby": consentTextId, "aria-invalid": consentError ? true : undefined, "aria-describedby": consentError ? consentErrorId : undefined, onChange: (e) => {
+                                                    setConsent(e.target.checked);
+                                                    markTouched("consent");
+                                                } }) }), _jsx("label", { id: consentTextId, htmlFor: consentId, className: cn("text-body-sm text-grey-700", locked ? "opacity-60" : "cursor-pointer"), children: resolvedConsentLabel })] }), consentError && (_jsx("p", { id: consentErrorId, className: "text-body-sm text-feedback-error", children: consentError }))] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Button, { type: "submit", size: "lg", variant: "primary", className: "w-full", disabled: locked, children: pending ? submittingLabel : submitLabel }), _jsx("output", { id: unsavedRegionId, className: "sr-only", children: pending ? submittingLabel : "" }), signIn && (_jsxs("p", { className: "text-center text-body-sm text-grey-600", children: ["Already have an account?", " ", _jsx("a", { href: signIn.href, "aria-disabled": pending || undefined, tabIndex: pending ? -1 : undefined, onClick: (event) => {
+                                                if (pending)
+                                                    event.preventDefault();
+                                            }, className: cn("rounded font-semibold text-action-primary-text underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", pending && "pointer-events-none opacity-60"), children: signIn.label })] }))] })] }))] }) }));
+}

package/dist/blocks/EmptyStateBlock.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateBlock = EmptyStateBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../utils/cn.cjs");
+const EmptyStateIllustration_1 = require("../components/EmptyStateIllustration/index.cjs");
+const Button_1 = require("../components/Button/index.cjs");
+// ─── Component ───────────────────────────────────────────────────────
+function EmptyStateBlock({ illustration, illustrationColored = true, illustrationPalette, illustrationSize = 130, title, description, action, variant = "inline", className, }) {
+    const content = ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center text-center gap-4", children: [(0, jsx_runtime_1.jsx)(EmptyStateIllustration_1.EmptyStateIllustration, { name: illustration, colored: illustrationColored, palette: illustrationPalette, size: illustrationSize }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-grey-900", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-grey-600 whitespace-pre-line", children: description })] }), action && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", icon: action.icon, iconPosition: action.icon ? "leading" : "none", onClick: action.onClick, 
+                /* Content-driven width: fits the supplied label on one line, wraps
+                   intentionally past a safe maximum, and keeps the one-line height
+                   as a floor so a wrapped label grows instead of being clipped. */
+                className: "h-auto min-h-9 w-auto max-w-64 whitespace-normal text-balance", children: action.label }))] }));
+    if (variant === "card") {
+        return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("bg-surface rounded-16 p-8 inline-flex max-w-full", className), children: content }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: className, children: content });
+}

package/dist/blocks/EmptyStateBlock.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.js";
+import { EmptyStateIllustration } from "../components/EmptyStateIllustration/index.js";
+import { Button } from "../components/Button/index.js";
+// ─── Component ───────────────────────────────────────────────────────
+export function EmptyStateBlock({ illustration, illustrationColored = true, illustrationPalette, illustrationSize = 130, title, description, action, variant = "inline", className, }) {
+    const content = (_jsxs("div", { className: "flex flex-col items-center text-center gap-4", children: [_jsx(EmptyStateIllustration, { name: illustration, colored: illustrationColored, palette: illustrationPalette, size: illustrationSize }), _jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [_jsx("h3", { className: "text-base font-semibold text-grey-900", children: title }), _jsx("p", { className: "text-xs text-grey-600 whitespace-pre-line", children: description })] }), action && (_jsx(Button, { variant: "primary", size: "sm", icon: action.icon, iconPosition: action.icon ? "leading" : "none", onClick: action.onClick, 
+                /* Content-driven width: fits the supplied label on one line, wraps
+                   intentionally past a safe maximum, and keeps the one-line height
+                   as a floor so a wrapped label grows instead of being clipped. */
+                className: "h-auto min-h-9 w-auto max-w-64 whitespace-normal text-balance", children: action.label }))] }));
+    if (variant === "card") {
+        return (_jsx("div", { className: cn("bg-surface rounded-16 p-8 inline-flex max-w-full", className), children: content }));
+    }
+    return _jsx("div", { className: className, children: content });
+}

package/dist/blocks/FeatureOverviewBlock.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureOverviewBlock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Badge_1 = require("../components/Badge/index.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const HEADING_ORDER = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function nextHeadingLevel(level) {
+    const index = HEADING_ORDER.indexOf(level);
+    return HEADING_ORDER[Math.min(index + 1, HEADING_ORDER.length - 1)];
+}
+function isLinkCta(cta) {
+    return typeof cta.href === "string";
+}
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const COLUMN_CLASS = {
+    2: "@min-[600px]:grid-cols-2",
+    3: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-3",
+    4: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-4",
+};
+const INLINE_CTA_CLASS = "inline-flex max-w-full items-center gap-1.5 rounded text-sm font-semibold break-words text-action-primary-text no-underline hover:underline underline-offset-4 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const SECTION_CTA_CLASS = "inline-flex max-w-full items-center justify-center gap-2 min-h-11 rounded-lg border-[1.5px] border-current bg-transparent px-5 py-2.5 text-sm font-semibold break-words text-center text-action-primary-text no-underline transition-colors hover:bg-primary-50 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+function FeatureCta({ cta, className, trailingIcon = false }) {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [cta.icon && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: cta.icon, size: "sm", className: "shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: cta.label }), trailingIcon && !cta.icon && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-right", size: "sm", className: "shrink-0", "aria-hidden": "true" }))] }));
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return ((0, jsx_runtime_1.jsxs)("a", { href: cta.href, onClick: cta.onClick, className: className, ...externalAttributes, children: [content, cta.external && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cta.onClick, className: className, children: content }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Feature Overview — lets a visitor scan differentiated capabilities and follow
+ * the details that matter to them.
+ *
+ * States: `default`, `loading`, `empty`, `error`. There is no success state:
+ * the block submits nothing. When `state` is left undefined it resolves to
+ * `empty` for an empty `features` array and `default` otherwise, so an empty
+ * source is never silently rendered as a blank grid.
+ */
+exports.FeatureOverviewBlock = (0, react_1.forwardRef)(({ eyebrow, title, description, headingLevel = "h2", features, columns = 3, variant = "card", footerCta, state, loadingItemCount = 3, loadingLabel = "Loading features", emptyState, errorTitle = "We could not load these features", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = (0, react_1.useId)();
+    const Heading = headingLevel;
+    const ItemHeading = nextHeadingLevel(headingLevel);
+    const resolvedState = state ?? (features.length === 0 ? "empty" : "default");
+    const isCard = variant === "card";
+    const itemClass = (0, cn_1.cn)("flex min-w-0 flex-col gap-3", isCard && "rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6");
+    return ((0, jsx_runtime_1.jsx)("section", { ref: ref, "aria-labelledby": headingId, "aria-busy": resolvedState === "loading" || undefined, className: (0, cn_1.cn)("@container relative w-full", className), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-8 px-4 py-12 @min-[600px]:gap-10 @min-[600px]:px-8 @min-[600px]:py-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 max-w-[68ch] flex-col gap-3", children: [eyebrow && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold break-words text-action-primary-text", children: eyebrow })), (0, jsx_runtime_1.jsx)(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-balance text-grey-900 @min-[600px]:text-h3", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-base break-words text-grey-600 @min-[600px]:text-body-lg", children: description }))] }), resolvedState === "loading" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { role: "status", className: "sr-only", children: loadingLabel }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("grid grid-cols-1 gap-5 @min-[600px]:gap-6", COLUMN_CLASS[columns]), "aria-hidden": "true", children: Array.from({ length: Math.max(1, loadingItemCount) }).map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)(itemClass, !isCard && "gap-3"), children: [(0, jsx_runtime_1.jsx)("div", { className: "size-11 rounded-lg bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 w-3/5 rounded bg-grey-200" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-full rounded bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 w-4/5 rounded bg-grey-100" })] }, `feature-skeleton-${index}`))) })] })), resolvedState === "error" && ((0, jsx_runtime_1.jsxs)("div", { role: "alert", className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-error-50 text-action-danger-text", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "info-triangle", size: "lg", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-base font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: errorDescription })), onRetry && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onRetry, className: SECTION_CTA_CLASS, children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "refresh", size: "sm", className: "shrink-0", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "min-w-0", children: retryLabel })] }))] })), resolvedState === "empty" && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface p-6 @min-[600px]:p-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-grey-100 text-grey-600", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "layer", size: "lg", "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-base font-semibold break-words text-grey-900", children: emptyState?.title ?? "No features to show yet" }), emptyState?.description && ((0, jsx_runtime_1.jsx)("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: emptyState.description })), emptyState?.cta && ((0, jsx_runtime_1.jsx)(FeatureCta, { cta: emptyState.cta, className: SECTION_CTA_CLASS }))] })), resolvedState === "default" && features.length > 0 && ((0, jsx_runtime_1.jsx)("ul", { className: (0, cn_1.cn)("grid list-none grid-cols-1 gap-5 p-0 @min-[600px]:gap-6", COLUMN_CLASS[columns]), children: features.map((feature) => ((0, jsx_runtime_1.jsxs)("li", { className: itemClass, children: [feature.icon && ((0, jsx_runtime_1.jsx)("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-action-primary-text", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: feature.icon, size: "lg", "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [(0, jsx_runtime_1.jsx)(ItemHeading, { className: "min-w-0 text-base font-semibold break-words text-grey-900 @min-[600px]:text-body-lg", children: feature.title }), feature.badge && ((0, jsx_runtime_1.jsx)(Badge_1.Badge, { color: "neutral", type: "accent", size: "sm", children: feature.badge }))] }), feature.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm break-words text-grey-600 @min-[600px]:text-base", children: feature.description })), feature.cta && ((0, jsx_runtime_1.jsx)(FeatureCta, { cta: feature.cta, className: INLINE_CTA_CLASS, trailingIcon: true }))] }, feature.id))) })), footerCta && resolvedState === "default" && ((0, jsx_runtime_1.jsx)("div", { className: "flex min-w-0", children: (0, jsx_runtime_1.jsx)(FeatureCta, { cta: footerCta, className: SECTION_CTA_CLASS }) }))] }) }));
+});
+exports.FeatureOverviewBlock.displayName = "FeatureOverviewBlock";

package/dist/blocks/FeatureOverviewBlock.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, } from "react";
+import { cn } from "../utils/cn.js";
+import { Badge } from "../components/Badge/index.js";
+import { Icon } from "../components/Icon/index.js";
+const HEADING_ORDER = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function nextHeadingLevel(level) {
+    const index = HEADING_ORDER.indexOf(level);
+    return HEADING_ORDER[Math.min(index + 1, HEADING_ORDER.length - 1)];
+}
+function isLinkCta(cta) {
+    return typeof cta.href === "string";
+}
+/* ─── Appearance ───────────────────────────────────────────────────────── */
+const COLUMN_CLASS = {
+    2: "@min-[600px]:grid-cols-2",
+    3: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-3",
+    4: "@min-[600px]:grid-cols-2 @min-[1136px]:grid-cols-4",
+};
+const INLINE_CTA_CLASS = "inline-flex max-w-full items-center gap-1.5 rounded text-sm font-semibold break-words text-action-primary-text no-underline hover:underline underline-offset-4 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+const SECTION_CTA_CLASS = "inline-flex max-w-full items-center justify-center gap-2 min-h-11 rounded-lg border-[1.5px] border-current bg-transparent px-5 py-2.5 text-sm font-semibold break-words text-center text-action-primary-text no-underline transition-colors hover:bg-primary-50 cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+function FeatureCta({ cta, className, trailingIcon = false }) {
+    const content = (_jsxs(_Fragment, { children: [cta.icon && _jsx(Icon, { name: cta.icon, size: "sm", className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0", children: cta.label }), trailingIcon && !cta.icon && (_jsx(Icon, { name: "arrow-right", size: "sm", className: "shrink-0", "aria-hidden": "true" }))] }));
+    if (isLinkCta(cta)) {
+        const externalAttributes = cta.external
+            ? { target: "_blank", rel: "noreferrer" }
+            : {};
+        return (_jsxs("a", { href: cta.href, onClick: cta.onClick, className: className, ...externalAttributes, children: [content, cta.external && _jsx("span", { className: "sr-only", children: "(opens in a new tab)" })] }));
+    }
+    return (_jsx("button", { type: "button", onClick: cta.onClick, className: className, children: content }));
+}
+/* ─── Block ────────────────────────────────────────────────────────────── */
+/**
+ * Feature Overview — lets a visitor scan differentiated capabilities and follow
+ * the details that matter to them.
+ *
+ * States: `default`, `loading`, `empty`, `error`. There is no success state:
+ * the block submits nothing. When `state` is left undefined it resolves to
+ * `empty` for an empty `features` array and `default` otherwise, so an empty
+ * source is never silently rendered as a blank grid.
+ */
+export const FeatureOverviewBlock = forwardRef(({ eyebrow, title, description, headingLevel = "h2", features, columns = 3, variant = "card", footerCta, state, loadingItemCount = 3, loadingLabel = "Loading features", emptyState, errorTitle = "We could not load these features", errorDescription, onRetry, retryLabel = "Try again", className, ...rest }, ref) => {
+    const headingId = useId();
+    const Heading = headingLevel;
+    const ItemHeading = nextHeadingLevel(headingLevel);
+    const resolvedState = state ?? (features.length === 0 ? "empty" : "default");
+    const isCard = variant === "card";
+    const itemClass = cn("flex min-w-0 flex-col gap-3", isCard && "rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6");
+    return (_jsx("section", { ref: ref, "aria-labelledby": headingId, "aria-busy": resolvedState === "loading" || undefined, className: cn("@container relative w-full", className), ...rest, children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1136px] flex-col gap-8 px-4 py-12 @min-[600px]:gap-10 @min-[600px]:px-8 @min-[600px]:py-16", children: [_jsxs("div", { className: "flex min-w-0 max-w-[68ch] flex-col gap-3", children: [eyebrow && (_jsx("p", { className: "text-sm font-semibold break-words text-action-primary-text", children: eyebrow })), _jsx(Heading, { id: headingId, className: "text-h5 font-semibold break-words text-balance text-grey-900 @min-[600px]:text-h3", children: title }), description && (_jsx("p", { className: "text-base break-words text-grey-600 @min-[600px]:text-body-lg", children: description }))] }), resolvedState === "loading" && (_jsxs(_Fragment, { children: [_jsx("p", { role: "status", className: "sr-only", children: loadingLabel }), _jsx("div", { className: cn("grid grid-cols-1 gap-5 @min-[600px]:gap-6", COLUMN_CLASS[columns]), "aria-hidden": "true", children: Array.from({ length: Math.max(1, loadingItemCount) }).map((_, index) => (_jsxs("div", { className: cn(itemClass, !isCard && "gap-3"), children: [_jsx("div", { className: "size-11 rounded-lg bg-grey-200" }), _jsx("div", { className: "h-5 w-3/5 rounded bg-grey-200" }), _jsx("div", { className: "h-4 w-full rounded bg-grey-100" }), _jsx("div", { className: "h-4 w-4/5 rounded bg-grey-100" })] }, `feature-skeleton-${index}`))) })] })), resolvedState === "error" && (_jsxs("div", { role: "alert", className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-surface-border bg-surface p-5 @min-[600px]:p-6", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-error-50 text-action-danger-text", children: _jsx(Icon, { name: "info-triangle", size: "lg", "aria-hidden": "true" }) }), _jsx("p", { className: "text-base font-semibold break-words text-grey-900", children: errorTitle }), errorDescription && (_jsx("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: errorDescription })), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, className: SECTION_CTA_CLASS, children: [_jsx(Icon, { name: "refresh", size: "sm", className: "shrink-0", "aria-hidden": "true" }), _jsx("span", { className: "min-w-0", children: retryLabel })] }))] })), resolvedState === "empty" && (_jsxs("div", { className: "flex min-w-0 flex-col items-start gap-3 rounded-xl border border-dashed border-surface-border-strong bg-surface p-6 @min-[600px]:p-8", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-grey-100 text-grey-600", children: _jsx(Icon, { name: "layer", size: "lg", "aria-hidden": "true" }) }), _jsx("p", { className: "text-base font-semibold break-words text-grey-900", children: emptyState?.title ?? "No features to show yet" }), emptyState?.description && (_jsx("p", { className: "max-w-[60ch] text-sm break-words text-grey-600", children: emptyState.description })), emptyState?.cta && (_jsx(FeatureCta, { cta: emptyState.cta, className: SECTION_CTA_CLASS }))] })), resolvedState === "default" && features.length > 0 && (_jsx("ul", { className: cn("grid list-none grid-cols-1 gap-5 p-0 @min-[600px]:gap-6", COLUMN_CLASS[columns]), children: features.map((feature) => (_jsxs("li", { className: itemClass, children: [feature.icon && (_jsx("span", { className: "flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-action-primary-text", children: _jsx(Icon, { name: feature.icon, size: "lg", "aria-hidden": "true" }) })), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(ItemHeading, { className: "min-w-0 text-base font-semibold break-words text-grey-900 @min-[600px]:text-body-lg", children: feature.title }), feature.badge && (_jsx(Badge, { color: "neutral", type: "accent", size: "sm", children: feature.badge }))] }), feature.description && (_jsx("p", { className: "text-sm break-words text-grey-600 @min-[600px]:text-base", children: feature.description })), feature.cta && (_jsx(FeatureCta, { cta: feature.cta, className: INLINE_CTA_CLASS, trailingIcon: true }))] }, feature.id))) })), footerCta && resolvedState === "default" && (_jsx("div", { className: "flex min-w-0", children: _jsx(FeatureCta, { cta: footerCta, className: SECTION_CTA_CLASS }) }))] }) }));
+});
+FeatureOverviewBlock.displayName = "FeatureOverviewBlock";

package/dist/blocks/HeaderBlock.cjs

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderBlock = HeaderBlock;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../utils/cn.cjs");
+const Icon_1 = require("../components/Icon/index.cjs");
+const Input_1 = require("../components/Input/index.cjs");
+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 ((0, jsx_runtime_1.jsxs)(Tag, { ...(link.href ? { href: link.href } : { type: "button" }), "aria-current": link.active ? "page" : undefined, onClick: () => {
+            link.onClick?.();
+            onNavigate?.();
+        }, className: (0, cn_1.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 && (0, jsx_runtime_1.jsx)("span", { className: "size-2 shrink-0 rounded-full bg-primary-400" }), link.hasDropdown && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: "xs" })] }));
+}
+function NavLinks({ links, large, gap = NAV_GAP, className, }) {
+    if (links.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex items-center", gap, className), children: links.map((link, i) => ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1", children: links.map((link, i) => ((0, jsx_runtime_1.jsx)(NavLink, { link: link, tone: tone, onNavigate: onNavigate, className: (0, cn_1.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 ───────────────────────────────────────────────────────
+function HeaderBlock({ variant = 1, logo, links = [], rightLinks = [], actions = [], announcement, searchPlaceholder = "Search for components...", onSearch, switcher, secondaryLinks = [], navLabel = "Main", secondaryNavLabel = "Secondary", className, }) {
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)("");
+    const [internalActiveTab, setActiveTab] = (0, react_1.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] = (0, react_1.useState)(false);
+    const menuId = (0, react_1.useId)();
+    const toggleRef = (0, react_1.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 ((0, jsx_runtime_1.jsx)(Tag, { ...(action.href ? { href: action.href } : { type: "button" }), onClick: () => {
+                action.onClick?.();
+                onNavigate?.();
+            }, className: (0, cn_1.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 && ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(Input_1.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 ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-label": switcherLabel, className: (0, cn_1.cn)("flex items-center gap-2", className), children: switcher.tabs.map((tab, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-pressed": i === activeTab, onClick: () => selectTab(i), className: (0, cn_1.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 ((0, jsx_runtime_1.jsx)("div", { role: "group", "aria-label": switcherLabel, className: (0, cn_1.cn)("flex items-center", className), children: switcher.tabs.map((tab, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-pressed": i === activeTab, onClick: () => selectTab(i), className: (0, cn_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.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) => ((0, jsx_runtime_1.jsx)(NavLink, { link: link, large: true }, `${link.label}-${i}`))) }));
+    }
+    // ─── Collapsed menu toggle ─────────────────────────────────────
+    function renderMenuToggle() {
+        if (!hasMenuContent)
+            return null;
+        return ((0, jsx_runtime_1.jsx)("button", { ref: toggleRef, type: "button", onClick: () => setMenuOpen((open) => !open), "aria-expanded": menuOpen, "aria-controls": menuId, "aria-label": menuOpen ? "Close menu" : "Open menu", className: (0, cn_1.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: (0, jsx_runtime_1.jsx)(Icon_1.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 ((0, jsx_runtime_1.jsxs)("div", { id: menuId, className: (0, cn_1.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 && ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": "Menu", className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(StackedNavLinks, { links: links, onNavigate: closeMenu }), rightLinks.length > 0 && links.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "h-px w-full bg-surface-border" })), (0, jsx_runtime_1.jsx)(StackedNavLinks, { links: rightLinks, onNavigate: closeMenu }), secondaryLinks.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "h-px w-full bg-surface-border" }), (0, jsx_runtime_1.jsx)(StackedNavLinks, { links: secondaryLinks, tone: "muted", onNavigate: closeMenu })] }))] })), actions.length > 0 && ((0, jsx_runtime_1.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: (0, cn_1.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 ((0, jsx_runtime_1.jsxs)("header", { ...rootProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center justify-between", rowPadding), children: [(0, jsx_runtime_1.jsx)("div", { className: tier.block, children: renderSwitcher() }), secondaryLinks.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": secondaryNavLabel, className: (0, cn_1.cn)(tier.row, "items-center", NAV_GAP), children: secondaryLinks.map((link, i) => ((0, jsx_runtime_1.jsx)(NavLink, { link: link, tone: "muted" }, `${link.label}-${i}`))) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("min-w-0 flex-1", tier.collapsed), children: logo }), renderMenuToggle()] }), (0, jsx_runtime_1.jsx)("div", { className: "h-px w-full bg-surface-border" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)(tier.row, "items-center justify-between", rowPadding), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 items-center gap-6 @min-[1140px]:gap-10", children: [logo, links.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": navLabel, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("header", { ...rootProps, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.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: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(tier.block, "min-w-0"), children: links.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": navLabel, children: (0, jsx_runtime_1.jsx)(NavLinks, { links: links }) })) }), (0, jsx_runtime_1.jsx)("div", { className: "min-w-0", children: logo }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-self-end gap-4 @min-[1140px]:gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)(tier.row, "items-center gap-4 @min-[1140px]:gap-6"), children: [rightLinks.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": secondaryNavLabel, children: (0, jsx_runtime_1.jsx)(NavLinks, { links: rightLinks }) })), actionsSection] }), renderMenuToggle()] })] }), renderMenu()] }));
+    }
+    // ═══════════════════════════════════════════════════════════════
+    // ALL OTHER VARIANTS (1–6, 9, 10)
+    // Logo (left) | Links (center) | Actions (right)
+    // ═══════════════════════════════════════════════════════════════
+    return ((0, jsx_runtime_1.jsxs)("header", { ...rootProps, children: [variant === 1 && announcement && ((0, jsx_runtime_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-white", children: announcement.text }), announcement.linkLabel && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: announcement.onLinkClick, className: (0, cn_1.cn)("cursor-pointer rounded text-xs font-semibold text-warning-400", FOCUS_RING), children: announcement.linkLabel }))] })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex w-full items-center justify-between gap-4", rowPadding), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.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((0, cn_1.cn)(tier.block, "min-w-[200px] max-w-[375px] flex-1")), hasSwitcher && (0, jsx_runtime_1.jsx)("div", { className: tier.block, children: renderSwitcher() })] }), (links.length > 0 || variant === 3 || variant === 4) && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": navLabel, className: tier.block, children: variant === 3 || variant === 4 ? (renderPillNav()) : ((0, jsx_runtime_1.jsx)(NavLinks, { links: links, large: isLargeLinks })) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex shrink-0 items-center gap-4 @min-[1140px]:gap-6", children: [rightLinks.length > 0 && ((0, jsx_runtime_1.jsx)("nav", { "aria-label": secondaryNavLabel, className: tier.block, children: (0, jsx_runtime_1.jsx)(NavLinks, { links: rightLinks, large: isLargeLinks }) })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(tier.row, "items-center"), children: actionsSection }), renderMenuToggle()] })] }), renderMenu()] }));
+}