@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/Icon/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconNames = exports.iconCatalog = exports.Icon = void 0;
+var Icon_1 = require("./Icon.cjs");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var catalog_1 = require("./catalog.cjs");
+Object.defineProperty(exports, "iconCatalog", { enumerable: true, get: function () { return catalog_1.iconCatalog; } });
+Object.defineProperty(exports, "iconNames", { enumerable: true, get: function () { return catalog_1.iconNames; } });

package/dist/components/Icon/index.js

@@ -0,0 +1,2 @@
+export { Icon } from "./Icon.js";
+export { iconCatalog, iconNames } from "./catalog.js";

package/dist/components/Input/Input.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const inputFrameSize = {
+    xs: "px-2.5 py-2 gap-2",
+    sm: "p-3 gap-3",
+    md: "px-4 py-3 gap-3",
+    lg: "px-4 py-3 gap-3",
+};
+const addonHeight = {
+    xs: "",
+    sm: "h-10",
+    md: "h-12",
+    lg: "h-14",
+};
+exports.Input = (0, react_1.forwardRef)(({ size = "sm", label, helperText, error, success, leadingIcon, trailingIcon, addonRight, leadingAddon, trailingAddon, trailingAction, readOnly, disabled, className, wrapperClassName, id, required, ...rest }, ref) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const hasError = !!error;
+    const hasSuccess = !!success;
+    const hasAddon = !!leadingAddon || !!trailingAddon;
+    const bottomText = hasError
+        ? typeof error === "string"
+            ? error
+            : undefined
+        : hasSuccess
+            ? typeof success === "string"
+                ? success
+                : undefined
+            : helperText;
+    const descriptionId = bottomText ? `${inputId}-description` : undefined;
+    const borderColor = hasError
+        ? "border-error-400 focus-within:border-error-400"
+        : hasSuccess
+            ? "border-success-400 focus-within:border-success-400"
+            : "border-control-border hover:border-primary-100 focus-within:border-primary-400";
+    const inputBg = readOnly ? "bg-grey-100" : disabled ? "bg-grey-50" : "bg-surface";
+    // When addons are present, the container is a flex row with no border — addons and input have their own borders
+    if (hasAddon) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col gap-1 w-full", wrapperClassName), children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-stretch", addonHeight[size]), children: [leadingAddon && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex items-center gap-1 px-3 py-2 bg-grey-50 border border-r-0 border-control-border rounded-l-lg overflow-hidden shrink-0", "text-sm font-medium text-grey-700"), children: leadingAddon })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-1 items-center border overflow-hidden transition-colors", inputFrameSize[size], inputBg, borderColor, !leadingAddon && !trailingAddon && "rounded-lg", leadingAddon && !trailingAddon && "rounded-r-lg", !leadingAddon && trailingAddon && "rounded-l-lg", leadingAddon && trailingAddon && "", disabled && "cursor-not-allowed"), children: [leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: (0, resolveIcon_1.resolveIcon)(leadingIcon, "md") })), (0, jsx_runtime_1.jsx)("input", { ref: ref, id: inputId, readOnly: readOnly, disabled: disabled, required: required, "aria-invalid": hasError || undefined, "aria-required": required || undefined, "aria-describedby": descriptionId, className: (0, cn_1.cn)("flex-1 min-w-0 bg-transparent text-sm text-on-surface placeholder:text-on-surface-muted outline-none disabled:cursor-not-allowed", className), ...rest }), addonRight && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-sm text-on-surface-muted", children: addonRight })), trailingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: (0, resolveIcon_1.resolveIcon)(trailingIcon, "md") })), trailingAction && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: trailingAction })] }), trailingAddon && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex items-center gap-1 px-3 py-2 bg-grey-50 border border-l-0 border-control-border rounded-r-lg overflow-hidden shrink-0", "text-sm font-medium text-grey-700"), children: trailingAddon }))] }), bottomText && ((0, jsx_runtime_1.jsx)("p", { id: descriptionId, className: (0, cn_1.cn)("text-sm leading-[1.45]", hasError
+                        ? "text-feedback-error"
+                        : hasSuccess
+                            ? "text-feedback-success"
+                            : "text-on-surface-muted"), children: bottomText }))] }));
+    }
+    // Standard input (no addons)
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col gap-1 w-full", wrapperClassName), children: [label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center border rounded-lg overflow-hidden transition-colors", inputFrameSize[size], addonHeight[size], readOnly
+                    ? // A read-only input stays in the tab order, but this branch dropped
+                        // focus-within styling while the native input keeps outline-none, so
+                        // focus became invisible. The addon branch always kept it.
+                        "bg-grey-100 border-control-border focus-within:border-primary-400"
+                    : disabled
+                        ? "bg-grey-50 border-grey-200 cursor-not-allowed"
+                        : (0, cn_1.cn)("bg-surface", borderColor)), children: [leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: (0, resolveIcon_1.resolveIcon)(leadingIcon, "md") })), (0, jsx_runtime_1.jsx)("input", { ref: ref, id: inputId, readOnly: readOnly, disabled: disabled, required: required, "aria-invalid": hasError || undefined, "aria-required": required || undefined, "aria-describedby": descriptionId, className: (0, cn_1.cn)("flex-1 min-w-0 bg-transparent text-sm text-on-surface placeholder:text-on-surface-muted outline-none disabled:cursor-not-allowed", className), ...rest }), addonRight && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-sm text-on-surface-muted", children: addonRight })), trailingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: (0, resolveIcon_1.resolveIcon)(trailingIcon, "md") })), trailingAction && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: trailingAction })] }), bottomText && ((0, jsx_runtime_1.jsx)("p", { id: descriptionId, className: (0, cn_1.cn)("text-sm leading-[1.45]", hasError
+                    ? "text-feedback-error"
+                    : hasSuccess
+                        ? "text-feedback-success"
+                        : "text-on-surface-muted"), children: bottomText }))] }));
+});
+exports.Input.displayName = "Input";

package/dist/components/Input/Input.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+const inputFrameSize = {
+    xs: "px-2.5 py-2 gap-2",
+    sm: "p-3 gap-3",
+    md: "px-4 py-3 gap-3",
+    lg: "px-4 py-3 gap-3",
+};
+const addonHeight = {
+    xs: "",
+    sm: "h-10",
+    md: "h-12",
+    lg: "h-14",
+};
+export const Input = forwardRef(({ size = "sm", label, helperText, error, success, leadingIcon, trailingIcon, addonRight, leadingAddon, trailingAddon, trailingAction, readOnly, disabled, className, wrapperClassName, id, required, ...rest }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const hasError = !!error;
+    const hasSuccess = !!success;
+    const hasAddon = !!leadingAddon || !!trailingAddon;
+    const bottomText = hasError
+        ? typeof error === "string"
+            ? error
+            : undefined
+        : hasSuccess
+            ? typeof success === "string"
+                ? success
+                : undefined
+            : helperText;
+    const descriptionId = bottomText ? `${inputId}-description` : undefined;
+    const borderColor = hasError
+        ? "border-error-400 focus-within:border-error-400"
+        : hasSuccess
+            ? "border-success-400 focus-within:border-success-400"
+            : "border-control-border hover:border-primary-100 focus-within:border-primary-400";
+    const inputBg = readOnly ? "bg-grey-100" : disabled ? "bg-grey-50" : "bg-surface";
+    // When addons are present, the container is a flex row with no border — addons and input have their own borders
+    if (hasAddon) {
+        return (_jsxs("div", { className: cn("flex flex-col gap-1 w-full", wrapperClassName), children: [label && (_jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), _jsxs("div", { className: cn("flex items-stretch", addonHeight[size]), children: [leadingAddon && (_jsx("div", { className: cn("flex items-center gap-1 px-3 py-2 bg-grey-50 border border-r-0 border-control-border rounded-l-lg overflow-hidden shrink-0", "text-sm font-medium text-grey-700"), children: leadingAddon })), _jsxs("div", { className: cn("flex flex-1 items-center border overflow-hidden transition-colors", inputFrameSize[size], inputBg, borderColor, !leadingAddon && !trailingAddon && "rounded-lg", leadingAddon && !trailingAddon && "rounded-r-lg", !leadingAddon && trailingAddon && "rounded-l-lg", leadingAddon && trailingAddon && "", disabled && "cursor-not-allowed"), children: [leadingIcon && (_jsx("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: resolveIcon(leadingIcon, "md") })), _jsx("input", { ref: ref, id: inputId, readOnly: readOnly, disabled: disabled, required: required, "aria-invalid": hasError || undefined, "aria-required": required || undefined, "aria-describedby": descriptionId, className: cn("flex-1 min-w-0 bg-transparent text-sm text-on-surface placeholder:text-on-surface-muted outline-none disabled:cursor-not-allowed", className), ...rest }), addonRight && (_jsx("span", { className: "shrink-0 text-sm text-on-surface-muted", children: addonRight })), trailingIcon && (_jsx("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: resolveIcon(trailingIcon, "md") })), trailingAction && _jsx("span", { className: "shrink-0", children: trailingAction })] }), trailingAddon && (_jsx("div", { className: cn("flex items-center gap-1 px-3 py-2 bg-grey-50 border border-l-0 border-control-border rounded-r-lg overflow-hidden shrink-0", "text-sm font-medium text-grey-700"), children: trailingAddon }))] }), bottomText && (_jsx("p", { id: descriptionId, className: cn("text-sm leading-[1.45]", hasError
+                        ? "text-feedback-error"
+                        : hasSuccess
+                            ? "text-feedback-success"
+                            : "text-on-surface-muted"), children: bottomText }))] }));
+    }
+    // Standard input (no addons)
+    return (_jsxs("div", { className: cn("flex flex-col gap-1 w-full", wrapperClassName), children: [label && (_jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), _jsxs("div", { className: cn("flex items-center border rounded-lg overflow-hidden transition-colors", inputFrameSize[size], addonHeight[size], readOnly
+                    ? // A read-only input stays in the tab order, but this branch dropped
+                        // focus-within styling while the native input keeps outline-none, so
+                        // focus became invisible. The addon branch always kept it.
+                        "bg-grey-100 border-control-border focus-within:border-primary-400"
+                    : disabled
+                        ? "bg-grey-50 border-grey-200 cursor-not-allowed"
+                        : cn("bg-surface", borderColor)), children: [leadingIcon && (_jsx("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: resolveIcon(leadingIcon, "md") })), _jsx("input", { ref: ref, id: inputId, readOnly: readOnly, disabled: disabled, required: required, "aria-invalid": hasError || undefined, "aria-required": required || undefined, "aria-describedby": descriptionId, className: cn("flex-1 min-w-0 bg-transparent text-sm text-on-surface placeholder:text-on-surface-muted outline-none disabled:cursor-not-allowed", className), ...rest }), addonRight && (_jsx("span", { className: "shrink-0 text-sm text-on-surface-muted", children: addonRight })), trailingIcon && (_jsx("span", { className: "shrink-0 size-6 text-on-surface-muted", "aria-hidden": "true", children: resolveIcon(trailingIcon, "md") })), trailingAction && _jsx("span", { className: "shrink-0", children: trailingAction })] }), bottomText && (_jsx("p", { id: descriptionId, className: cn("text-sm leading-[1.45]", hasError
+                    ? "text-feedback-error"
+                    : hasSuccess
+                        ? "text-feedback-success"
+                        : "text-on-surface-muted"), children: bottomText }))] }));
+});
+Input.displayName = "Input";

package/dist/components/Input/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+var Input_1 = require("./Input.cjs");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });

package/dist/components/Input/index.js

@@ -0,0 +1 @@
+export { Input } from "./Input.js";

package/dist/components/MetricsCard/MetricsCard.cjs

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsCard = MetricsCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+// ─── Sub-components ──────────────────────────────────────────────
+const sentimentStyles = {
+    // Identical to the former `up` / `down` styles so the defaults render unchanged.
+    positive: "bg-primary-50 text-primary-700",
+    negative: "bg-error-50 text-error-700",
+    neutral: "bg-grey-100 text-grey-700",
+};
+const statusStyles = {
+    success: "bg-success-50 text-success-700",
+    error: "bg-error-50 text-error-700",
+    warning: "bg-warning-50 text-warning-700",
+    info: "bg-secondary-50 text-secondary-700",
+};
+function TrendBadge({ badge }) {
+    const trend = badge.trend ?? "up";
+    const sentiment = badge.sentiment ?? (trend === "down" ? "negative" : "positive");
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("inline-flex items-center gap-1 rounded-xl px-1 text-body-xs font-medium", sentimentStyles[sentiment]), children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trend === "down" ? "arrow-down" : "arrow-up", size: "xs" }), badge.label] }));
+}
+function StatusBadge({ badge }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("inline-flex items-center gap-0.5 rounded-xl px-3 py-0.5 text-body-sm font-medium", statusStyles[badge.variant ?? "success"]), children: badge.label }));
+}
+/** Small bordered icon container (32×32) used in v2, v3, v6 */
+function SmallIcon({ icon }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-grey-200 bg-surface", children: (0, jsx_runtime_1.jsx)("span", { className: "size-4", children: (0, resolveIcon_1.resolveIcon)(icon, "sm") }) }));
+}
+/** Large tinted icon container (48×48) used in v4 */
+function LargeIcon({ icon }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-action-primary-text", children: (0, jsx_runtime_1.jsx)("span", { className: "size-6", children: (0, resolveIcon_1.resolveIcon)(icon, "lg") }) }));
+}
+/** CTA footer bar — grey bg strip at bottom with link text */
+function CtaFooter({ cta, centered = false }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex items-center border-t border-grey-100 bg-grey-50 p-4", centered ? "justify-center" : "justify-between"), children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: cta.onClick, className: "inline-flex items-center gap-1 text-body-xs font-medium text-primary-600 cursor-pointer hover:text-primary-400", children: [cta.label, cta.icon && (0, jsx_runtime_1.jsx)("span", { className: "size-5", children: (0, resolveIcon_1.resolveIcon)(cta.icon, "md") })] }) }));
+}
+/** Inline CTA text link (no footer bar) — used in v1, v5 */
+function CtaInline({ cta }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: cta.onClick, className: "inline-flex items-center text-body-xs font-medium text-primary-600 cursor-pointer hover:text-primary-400", children: cta.label }));
+}
+// ─── Variation Layouts ───────────────────────────────────────────
+/**
+ * Variation 1: Horizontal — label+value+CTA left, date+status right
+ */
+function Variation1({ label, value, secondaryText, statusBadge, cta }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-start justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-8 items-start", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 items-start", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-h3 font-semibold text-grey-800", style: { fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1" }, children: value }), cta && (0, jsx_runtime_1.jsx)(CtaInline, { cta: cta })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end justify-between self-stretch", children: [secondaryText && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium text-on-surface-muted", children: secondaryText })), statusBadge && (0, jsx_runtime_1.jsx)(StatusBadge, { badge: statusBadge })] })] }));
+}
+/**
+ * Variation 2: Vertical — icon+label → value → badge+desc → CTA footer
+ */
+function Variation2({ label, value, icon, trendBadge, description, cta }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-start p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-8 w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [icon && (0, jsx_runtime_1.jsx)(SmallIcon, { icon: icon }), (0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                        fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                    }, children: value }), (trendBadge || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [trendBadge && (0, jsx_runtime_1.jsx)(TrendBadge, { badge: trendBadge }), description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }) }), cta && (0, jsx_runtime_1.jsx)(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 3: Vertical reversed — icon+label → badge+desc → value → CTA footer
+ */
+function Variation3({ label, value, icon, trendBadge, description, cta }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex w-full flex-col items-start p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-3 w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [icon && (0, jsx_runtime_1.jsx)(SmallIcon, { icon: icon }), (0, jsx_runtime_1.jsx)("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label })] }), (trendBadge || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [trendBadge && (0, jsx_runtime_1.jsx)(TrendBadge, { badge: trendBadge }), description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] })), (0, jsx_runtime_1.jsx)("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                            }, children: value })] }) }), cta && (0, jsx_runtime_1.jsx)(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 4: Horizontal body with large icon on right — label+value+badge left, big icon right → CTA footer
+ */
+function Variation4({ label, value, icon, trendBadge, description, cta }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-start justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-2 opacity-80", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                            fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                        }, children: value }), (trendBadge || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [trendBadge && (0, jsx_runtime_1.jsx)(TrendBadge, { badge: trendBadge }), description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }), icon && (0, jsx_runtime_1.jsx)(LargeIcon, { icon: icon })] }), cta && (0, jsx_runtime_1.jsx)(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 5: Compact horizontal — label+value+desc left, badge+CTA right
+ */
+function Variation5({ label, value, trendBadge, description, cta }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-start justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label }), (0, jsx_runtime_1.jsx)("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                            fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                        }, children: value }), description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-end justify-between self-stretch gap-2", children: [trendBadge && (0, jsx_runtime_1.jsx)(TrendBadge, { badge: trendBadge }), cta && (0, jsx_runtime_1.jsx)(CtaInline, { cta: cta })] })] }));
+}
+/**
+ * Variation 6: Centered vertical — icon → label → value(28px) → badge+desc → CTA footer
+ */
+function Variation6({ label, value, icon, trendBadge, description, cta }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col items-center justify-center gap-4 p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [icon && (0, jsx_runtime_1.jsx)(SmallIcon, { icon: icon }), (0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted text-center", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-h4 font-semibold text-grey-800", style: {
+                                    fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                }, children: value }), (trendBadge || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 justify-center", children: [trendBadge && (0, jsx_runtime_1.jsx)(TrendBadge, { badge: trendBadge }), description && ((0, jsx_runtime_1.jsx)("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }), cta && (0, jsx_runtime_1.jsx)(CtaFooter, { cta: cta, centered: true })] }));
+}
+// ─── Main Component ──────────────────────────────────────────────
+function MetricsCard({ variation = "2", className, 
+// Destructure component-specific props to prevent them from being spread to DOM
+label, value, icon, trendBadge, statusBadge, description, secondaryText, cta, ...rest }) {
+    const componentProps = {
+        label,
+        value,
+        icon,
+        trendBadge,
+        statusBadge,
+        description,
+        secondaryText,
+        cta,
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col overflow-clip rounded-xl border border-grey-200 bg-surface shadow-soft-xxs", className), ...rest, children: [variation === "1" && (0, jsx_runtime_1.jsx)(Variation1, { ...componentProps }), variation === "2" && (0, jsx_runtime_1.jsx)(Variation2, { ...componentProps }), variation === "3" && (0, jsx_runtime_1.jsx)(Variation3, { ...componentProps }), variation === "4" && (0, jsx_runtime_1.jsx)(Variation4, { ...componentProps }), variation === "5" && (0, jsx_runtime_1.jsx)(Variation5, { ...componentProps }), variation === "6" && (0, jsx_runtime_1.jsx)(Variation6, { ...componentProps })] }));
+}

package/dist/components/MetricsCard/MetricsCard.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Icon } from "../Icon/index.js";
+// ─── Sub-components ──────────────────────────────────────────────
+const sentimentStyles = {
+    // Identical to the former `up` / `down` styles so the defaults render unchanged.
+    positive: "bg-primary-50 text-primary-700",
+    negative: "bg-error-50 text-error-700",
+    neutral: "bg-grey-100 text-grey-700",
+};
+const statusStyles = {
+    success: "bg-success-50 text-success-700",
+    error: "bg-error-50 text-error-700",
+    warning: "bg-warning-50 text-warning-700",
+    info: "bg-secondary-50 text-secondary-700",
+};
+function TrendBadge({ badge }) {
+    const trend = badge.trend ?? "up";
+    const sentiment = badge.sentiment ?? (trend === "down" ? "negative" : "positive");
+    return (_jsxs("span", { className: cn("inline-flex items-center gap-1 rounded-xl px-1 text-body-xs font-medium", sentimentStyles[sentiment]), children: [_jsx(Icon, { name: trend === "down" ? "arrow-down" : "arrow-up", size: "xs" }), badge.label] }));
+}
+function StatusBadge({ badge }) {
+    return (_jsx("span", { className: cn("inline-flex items-center gap-0.5 rounded-xl px-3 py-0.5 text-body-sm font-medium", statusStyles[badge.variant ?? "success"]), children: badge.label }));
+}
+/** Small bordered icon container (32×32) used in v2, v3, v6 */
+function SmallIcon({ icon }) {
+    return (_jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-grey-200 bg-surface", children: _jsx("span", { className: "size-4", children: resolveIcon(icon, "sm") }) }));
+}
+/** Large tinted icon container (48×48) used in v4 */
+function LargeIcon({ icon }) {
+    return (_jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary-50 text-action-primary-text", children: _jsx("span", { className: "size-6", children: resolveIcon(icon, "lg") }) }));
+}
+/** CTA footer bar — grey bg strip at bottom with link text */
+function CtaFooter({ cta, centered = false }) {
+    return (_jsx("div", { className: cn("flex items-center border-t border-grey-100 bg-grey-50 p-4", centered ? "justify-center" : "justify-between"), children: _jsxs("button", { type: "button", onClick: cta.onClick, className: "inline-flex items-center gap-1 text-body-xs font-medium text-primary-600 cursor-pointer hover:text-primary-400", children: [cta.label, cta.icon && _jsx("span", { className: "size-5", children: resolveIcon(cta.icon, "md") })] }) }));
+}
+/** Inline CTA text link (no footer bar) — used in v1, v5 */
+function CtaInline({ cta }) {
+    return (_jsx("button", { type: "button", onClick: cta.onClick, className: "inline-flex items-center text-body-xs font-medium text-primary-600 cursor-pointer hover:text-primary-400", children: cta.label }));
+}
+// ─── Variation Layouts ───────────────────────────────────────────
+/**
+ * Variation 1: Horizontal — label+value+CTA left, date+status right
+ */
+function Variation1({ label, value, secondaryText, statusBadge, cta }) {
+    return (_jsxs("div", { className: "flex w-full items-start justify-between p-4", children: [_jsxs("div", { className: "flex flex-col gap-8 items-start", children: [_jsx("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label }), _jsxs("div", { className: "flex flex-col gap-2 items-start", children: [_jsx("span", { className: "text-h3 font-semibold text-grey-800", style: { fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1" }, children: value }), cta && _jsx(CtaInline, { cta: cta })] })] }), _jsxs("div", { className: "flex flex-col items-end justify-between self-stretch", children: [secondaryText && (_jsx("span", { className: "text-body-sm font-medium text-on-surface-muted", children: secondaryText })), statusBadge && _jsx(StatusBadge, { badge: statusBadge })] })] }));
+}
+/**
+ * Variation 2: Vertical — icon+label → value → badge+desc → CTA footer
+ */
+function Variation2({ label, value, icon, trendBadge, description, cta }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex w-full flex-col items-start p-4", children: _jsxs("div", { className: "flex flex-col items-start gap-8 w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [icon && _jsx(SmallIcon, { icon: icon }), _jsx("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label })] }), _jsxs("div", { className: "flex flex-col items-start gap-3", children: [_jsx("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                        fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                    }, children: value }), (trendBadge || description) && (_jsxs("div", { className: "flex items-center gap-1", children: [trendBadge && _jsx(TrendBadge, { badge: trendBadge }), description && (_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }) }), cta && _jsx(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 3: Vertical reversed — icon+label → badge+desc → value → CTA footer
+ */
+function Variation3({ label, value, icon, trendBadge, description, cta }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex w-full flex-col items-start p-4", children: _jsxs("div", { className: "flex flex-col items-start gap-3 w-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [icon && _jsx(SmallIcon, { icon: icon }), _jsx("span", { className: "text-body-sm font-medium text-on-surface-muted", children: label })] }), (trendBadge || description) && (_jsxs("div", { className: "flex items-center gap-1", children: [trendBadge && _jsx(TrendBadge, { badge: trendBadge }), description && (_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] })), _jsx("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                            }, children: value })] }) }), cta && _jsx(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 4: Horizontal body with large icon on right — label+value+badge left, big icon right → CTA footer
+ */
+function Variation4({ label, value, icon, trendBadge, description, cta }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-start justify-between p-4", children: [_jsxs("div", { className: "flex flex-col items-start gap-4", children: [_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label }), _jsxs("div", { className: "flex flex-col items-start gap-2 opacity-80", children: [_jsx("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                                            fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                        }, children: value }), (trendBadge || description) && (_jsxs("div", { className: "flex items-center gap-1", children: [trendBadge && _jsx(TrendBadge, { badge: trendBadge }), description && (_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }), icon && _jsx(LargeIcon, { icon: icon })] }), cta && _jsx(CtaFooter, { cta: cta })] }));
+}
+/**
+ * Variation 5: Compact horizontal — label+value+desc left, badge+CTA right
+ */
+function Variation5({ label, value, trendBadge, description, cta }) {
+    return (_jsxs("div", { className: "flex w-full items-start justify-between p-4", children: [_jsxs("div", { className: "flex flex-col items-start gap-1", children: [_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label }), _jsx("span", { className: "text-h3 font-semibold text-grey-800", style: {
+                            fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                        }, children: value }), description && (_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }), _jsxs("div", { className: "flex flex-col items-end justify-between self-stretch gap-2", children: [trendBadge && _jsx(TrendBadge, { badge: trendBadge }), cta && _jsx(CtaInline, { cta: cta })] })] }));
+}
+/**
+ * Variation 6: Centered vertical — icon → label → value(28px) → badge+desc → CTA footer
+ */
+function Variation6({ label, value, icon, trendBadge, description, cta }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full flex-col items-center justify-center gap-4 p-4", children: [_jsxs("div", { className: "flex flex-col items-center gap-2", children: [icon && _jsx(SmallIcon, { icon: icon }), _jsx("span", { className: "text-body-xs font-medium text-on-surface-muted text-center", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: label })] }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("span", { className: "text-h4 font-semibold text-grey-800", style: {
+                                    fontFeatureSettings: "'cv01' 1, 'cv03' 1, 'cv04' 1",
+                                }, children: value }), (trendBadge || description) && (_jsxs("div", { className: "flex items-center gap-1 justify-center", children: [trendBadge && _jsx(TrendBadge, { badge: trendBadge }), description && (_jsx("span", { className: "text-body-xs font-medium text-on-surface-muted", style: { fontFeatureSettings: "'cv03' 1, 'cv04' 1" }, children: description }))] }))] })] }), cta && _jsx(CtaFooter, { cta: cta, centered: true })] }));
+}
+// ─── Main Component ──────────────────────────────────────────────
+export function MetricsCard({ variation = "2", className, 
+// Destructure component-specific props to prevent them from being spread to DOM
+label, value, icon, trendBadge, statusBadge, description, secondaryText, cta, ...rest }) {
+    const componentProps = {
+        label,
+        value,
+        icon,
+        trendBadge,
+        statusBadge,
+        description,
+        secondaryText,
+        cta,
+    };
+    return (_jsxs("div", { className: cn("flex flex-col overflow-clip rounded-xl border border-grey-200 bg-surface shadow-soft-xxs", className), ...rest, children: [variation === "1" && _jsx(Variation1, { ...componentProps }), variation === "2" && _jsx(Variation2, { ...componentProps }), variation === "3" && _jsx(Variation3, { ...componentProps }), variation === "4" && _jsx(Variation4, { ...componentProps }), variation === "5" && _jsx(Variation5, { ...componentProps }), variation === "6" && _jsx(Variation6, { ...componentProps })] }));
+}

package/dist/components/MetricsCard/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricsCard = void 0;
+var MetricsCard_1 = require("./MetricsCard.cjs");
+Object.defineProperty(exports, "MetricsCard", { enumerable: true, get: function () { return MetricsCard_1.MetricsCard; } });

package/dist/components/MetricsCard/index.js

@@ -0,0 +1 @@
+export { MetricsCard } from "./MetricsCard.js";

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useBodyScrollLock_1 = require("../../hooks/useBodyScrollLock.cjs");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const Button_1 = require("../Button/index.cjs");
+const presence_1 = require("../../motion/presence.cjs");
+const useBrowserLayoutEffect = typeof window === "undefined" ? react_1.useEffect : react_1.useLayoutEffect;
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function CloseIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 3L3 9M3 3l6 6" }) }));
+}
+function BoxIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.67 4.67L8 7.33l5.33-2.66M8 14V7.33" }), (0, jsx_runtime_1.jsx)("path", { d: "M13.33 10.67V5.33a1.33 1.33 0 00-.66-1.15L8.67 2a1.33 1.33 0 00-1.34 0L3.33 4.18A1.33 1.33 0 002.67 5.33v5.34a1.33 1.33 0 00.66 1.15L7.33 14a1.33 1.33 0 001.34 0l4-2.18a1.33 1.33 0 00.66-1.15z" })] }));
+}
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const sizeClasses = {
+    sm: "w-full max-w-[400px]",
+    md: "w-full max-w-[500px]",
+    lg: "w-full max-w-[640px]",
+};
+/* ─── Modal ────────────────────────────────────────────────────────────── */
+exports.Modal = (0, react_1.forwardRef)(({ open, motion = false, onClose, size = "sm", title, description, icon, showClose = true, 
+// Defaulted only when there is something for it to do; an inert "Save"
+// used to render whenever the footer appeared.
+primaryLabel: primaryLabelProp, onPrimaryClick, secondaryLabel, onSecondaryClick, footerOrientation = "horizontal", closeOnOverlay = true, closeOnEscape = true, blur = true, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+    const overlayRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(null);
+    const panelRef = (0, react_1.useRef)(null);
+    const titleId = (0, react_1.useId)();
+    const descriptionId = (0, react_1.useId)();
+    // The portal target only exists in a browser; defer it so an initially
+    // open modal can be server-rendered without touching document.
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setMounted(true), []);
+    const { present, preset } = (0, presence_1.useMotionPresence)(open, panelRef, motion, "overlay.pop", mounted);
+    // Native modal dialogs contain focus and make the background inert.
+    useBrowserLayoutEffect(() => {
+        const dialog = overlayRef.current;
+        if (!present || !dialog)
+            return;
+        const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        dialog.showModal();
+        return () => {
+            dialog.close();
+            if (trigger?.isConnected)
+                trigger.focus({ preventScroll: true });
+        };
+    }, [present, mounted]);
+    // ── #30: the portal escapes the provider, so its theme class is copied in.
+    // Copying once on open left an open dialog stuck in the old theme when the
+    // app switched; observe the source element and re-sync on every change.
+    useBrowserLayoutEffect(() => {
+        const dialog = overlayRef.current;
+        if (!present || !dialog)
+            return;
+        const source = anchorRef.current?.closest(".rayden-light, .dark");
+        if (!source)
+            return;
+        const sync = () => {
+            const isLight = source.classList.contains("rayden-light");
+            dialog.classList.toggle("rayden-light", isLight);
+            dialog.classList.toggle("dark", !isLight);
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(source, { attributes: true, attributeFilter: ["class"] });
+        // The theme may also move to a different ancestor, e.g. the documentElement.
+        if (source !== document.documentElement)
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+        return () => observer.disconnect();
+    }, [present, mounted]);
+    (0, useBodyScrollLock_1.useBodyScrollLock)(present && mounted);
+    const handleOverlayClick = (0, react_1.useCallback)((e) => {
+        if (open && closeOnOverlay && e.target === overlayRef.current)
+            onClose();
+    }, [open, closeOnOverlay, onClose]);
+    if (!present || !mounted)
+        return null;
+    const primaryLabel = primaryLabelProp ?? (onPrimaryClick ? "Save" : undefined);
+    const showPrimary = !!primaryLabel;
+    const showSecondary = !!secondaryLabel;
+    const isVertical = footerOrientation === "vertical";
+    const modal = ((0, jsx_runtime_1.jsx)("dialog", { ref: overlayRef, "data-rayden-motion": motion ? preset : undefined, "data-state": open ? "open" : "closed", "aria-label": ariaLabel ?? (!title && !ariaLabelledBy ? "Dialog" : undefined), "aria-labelledby": ariaLabelledBy ?? (title ? titleId : undefined), "aria-describedby": ariaDescribedBy ?? (description ? descriptionId : undefined), className: (0, cn_1.cn)("fixed inset-0 m-0 h-dvh w-screen max-h-none max-w-none border-0 bg-transparent p-4 open:flex items-center justify-center backdrop:bg-black/60", blur && "backdrop:backdrop-blur-md"), onCancel: (event) => {
+            event.preventDefault();
+            if (open && closeOnEscape)
+                onClose();
+        }, onKeyDown: (event) => {
+            if (event.key !== "Tab")
+                return;
+            const dialog = event.currentTarget;
+            const focusable = Array.from(dialog.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]')).filter((element) => element.tabIndex >= 0 &&
+                !element.matches(":disabled") &&
+                !element.closest("[inert]") &&
+                element.getClientRects().length > 0 &&
+                getComputedStyle(element).visibility !== "hidden");
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (!first || !last) {
+                event.preventDefault();
+                dialog.firstElementChild?.focus();
+            }
+            else if (!focusable.includes(document.activeElement) ||
+                (event.shiftKey ? document.activeElement === first : document.activeElement === last)) {
+                event.preventDefault();
+                (event.shiftKey ? last : first).focus();
+            }
+        }, onClick: handleOverlayClick, children: (0, jsx_runtime_1.jsxs)("div", { ref: (element) => {
+                panelRef.current = element;
+                if (typeof ref === "function")
+                    ref(element);
+                else if (ref)
+                    ref.current = element;
+            }, tabIndex: -1, className: (0, cn_1.cn)("relative flex max-h-[calc(100dvh-2rem)] flex-col bg-surface rounded-xl shadow-soft-xl overflow-hidden", sizeClasses[size], className), ...rest, children: [(title || showClose) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2 pt-5 pb-2 px-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 gap-4 items-start min-w-0", children: [icon !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: (0, jsx_runtime_1.jsx)("span", { className: "size-4", children: (0, resolveIcon_1.resolveIcon)(icon, "sm") }) })) : title ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: (0, jsx_runtime_1.jsx)(BoxIcon, { className: "size-4 text-primary-400" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 min-w-0", children: [title && ((0, jsx_runtime_1.jsx)("h2", { id: titleId, className: "text-xl font-semibold text-on-surface-body leading-[1.2] tracking-[-0.4px]", children: title })), description && !!(title || showClose) && ((0, jsx_runtime_1.jsx)("p", { id: descriptionId, className: "text-sm text-on-surface-muted leading-[1.45]", children: description }))] })] }), showClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, "aria-label": "Close modal", className: "shrink-0 flex items-center justify-center p-2 bg-grey-75 text-grey-700 rounded-xl hover:bg-grey-200 transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: (0, jsx_runtime_1.jsx)(CloseIcon, { className: "size-3" }) }))] })), description && !title && !showClose && ((0, jsx_runtime_1.jsx)("p", { id: descriptionId, className: "px-4 pt-5 text-sm text-on-surface-muted leading-[1.45]", children: description })), children && (0, jsx_runtime_1.jsx)("div", { className: "min-h-0 flex-1 px-4 py-4 overflow-y-auto", children: children }), (showPrimary || showSecondary) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("py-5", isVertical
+                        ? "flex flex-col gap-5 items-center px-4"
+                        : "flex items-center justify-end gap-3 px-4"), children: [showSecondary && !isVertical && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", onClick: onSecondaryClick ?? onClose, type: "button", children: secondaryLabel })), showPrimary && ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", onClick: onPrimaryClick, className: isVertical ? "w-full" : undefined, children: primaryLabel })), showSecondary && isVertical && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", onClick: onSecondaryClick ?? onClose, type: "button", className: "w-full", children: secondaryLabel }))] }))] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { ref: anchorRef, hidden: true }), (0, react_dom_1.createPortal)(modal, document.body)] }));
+});
+exports.Modal.displayName = "Modal";