@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarGroup = exports.Avatar = 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 Icon_1 = require("../Icon/index.cjs");
+/* ─── Size Tokens ─── */
+const containerSize = {
+    xs: "size-6",
+    sm: "size-8",
+    md: "size-10",
+    lg: "size-12",
+    xl: "size-14",
+    "2xl": "size-16",
+};
+const initialsFontSize = {
+    xs: "text-[10px] leading-[18px]",
+    sm: "text-[14px] leading-[1.45]",
+    md: "text-[16px] leading-[1.45]",
+    lg: "text-[18px] leading-[1.45]",
+    xl: "text-[18px] leading-[1.45]",
+    "2xl": "text-[20px] leading-[1.2] tracking-[-0.4px]",
+};
+const iconSize = {
+    xs: "xs",
+    sm: "sm",
+    md: "md",
+    lg: "md",
+    xl: "lg",
+    "2xl": "lg",
+};
+const statusDotSize = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
+    "2xl": "size-4",
+};
+const verifiedBadgeSize = {
+    xs: "size-2.5",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+    xl: "size-[18px]",
+    "2xl": "size-5",
+};
+/* ─── Verified Badge (SVG checkmark in blue circle) ─── */
+function VerifiedBadge({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [(0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "10", fill: "#1671D9" }), (0, jsx_runtime_1.jsx)("path", { d: "M6 10l3 3 5-6", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/* ─── Status Indicator ─── */
+const statusText = {
+    online: "Online",
+    offline: "Offline",
+    verified: "Verified",
+};
+function StatusIndicator({ status, size, statusLabel, }) {
+    if (status === "none")
+        return null;
+    // An empty string means the caller has declared the status decorative.
+    const text = statusLabel ?? statusText[status];
+    if (status === "verified") {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-0 right-0", children: [(0, jsx_runtime_1.jsx)(VerifiedBadge, { className: verifiedBadgeSize[size] }), text && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: text })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute bottom-0 right-0 rounded-full border-[1.5px] border-white", statusDotSize[size], status === "online" ? "bg-success-600" : "bg-grey-300"), children: text && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: text }) }));
+}
+/* ─── Avatar Component ─── */
+exports.Avatar = (0, react_1.forwardRef)(({ type = "image", size = "md", status = "none", statusLabel, src, alt = "", initials, icon, className, ...rest }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("relative inline-flex shrink-0", containerSize[size], className), ...rest, children: [type === "image" ? ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-full border-[1.5px] border-white overflow-hidden", children: src ? ((0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: "size-full object-cover rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "size-full bg-grey-200 rounded-full" })) })) : ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 rounded-full bg-primary-50" })), type === "icon" && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-grey-900", children: icon ? (0, resolveIcon_1.resolveIcon)(icon, iconSize[size]) : (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "user", size: iconSize[size] }) })), type === "initials" && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute inset-0 flex items-center justify-center font-semibold text-grey-900", initialsFontSize[size]), children: initials })), (0, jsx_runtime_1.jsx)(StatusIndicator, { status: status, size: size, statusLabel: statusLabel })] }));
+});
+exports.Avatar.displayName = "Avatar";
+const groupAvatarSize = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+};
+const groupOverlap = {
+    sm: "-ml-1.5",
+    md: "-ml-1.5",
+    lg: "-ml-[11px]",
+};
+const groupCounterText = {
+    sm: "text-[10px]",
+    md: "text-[14px]",
+    lg: "text-[16px]",
+};
+/* ─── AvatarGroup Component ─── */
+exports.AvatarGroup = (0, react_1.forwardRef)(({ size = "md", max, className, children, ...rest }, ref) => {
+    const childArray = react_1.Children.toArray(children).filter(react_1.isValidElement);
+    const avatarSize = groupAvatarSize[size];
+    const overlap = groupOverlap[size];
+    const visible = max ? childArray.slice(0, max) : childArray;
+    const overflowCount = max ? childArray.length - max : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("inline-flex items-center", className), ...rest, children: [visible.map((child, i) => ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(i > 0 && overlap, "relative"), children: (0, react_1.isValidElement)(child)
+                    ? (0, react_1.cloneElement)(child, { size: avatarSize, status: "none" })
+                    : child }, i))), overflowCount > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)(overlap, "relative"), children: (0, jsx_runtime_1.jsx)(exports.Avatar, { type: "initials", size: avatarSize, initials: `+${overflowCount}` }) }))] }));
+});
+exports.AvatarGroup.displayName = "AvatarGroup";

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Icon } from "../Icon/index.js";
+/* ─── Size Tokens ─── */
+const containerSize = {
+    xs: "size-6",
+    sm: "size-8",
+    md: "size-10",
+    lg: "size-12",
+    xl: "size-14",
+    "2xl": "size-16",
+};
+const initialsFontSize = {
+    xs: "text-[10px] leading-[18px]",
+    sm: "text-[14px] leading-[1.45]",
+    md: "text-[16px] leading-[1.45]",
+    lg: "text-[18px] leading-[1.45]",
+    xl: "text-[18px] leading-[1.45]",
+    "2xl": "text-[20px] leading-[1.2] tracking-[-0.4px]",
+};
+const iconSize = {
+    xs: "xs",
+    sm: "sm",
+    md: "md",
+    lg: "md",
+    xl: "lg",
+    "2xl": "lg",
+};
+const statusDotSize = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
+    "2xl": "size-4",
+};
+const verifiedBadgeSize = {
+    xs: "size-2.5",
+    sm: "size-3",
+    md: "size-3.5",
+    lg: "size-4",
+    xl: "size-[18px]",
+    "2xl": "size-5",
+};
+/* ─── Verified Badge (SVG checkmark in blue circle) ─── */
+function VerifiedBadge({ className }) {
+    return (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [_jsx("circle", { cx: "10", cy: "10", r: "10", fill: "#1671D9" }), _jsx("path", { d: "M6 10l3 3 5-6", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+/* ─── Status Indicator ─── */
+const statusText = {
+    online: "Online",
+    offline: "Offline",
+    verified: "Verified",
+};
+function StatusIndicator({ status, size, statusLabel, }) {
+    if (status === "none")
+        return null;
+    // An empty string means the caller has declared the status decorative.
+    const text = statusLabel ?? statusText[status];
+    if (status === "verified") {
+        return (_jsxs("div", { className: "absolute bottom-0 right-0", children: [_jsx(VerifiedBadge, { className: verifiedBadgeSize[size] }), text && _jsx("span", { className: "sr-only", children: text })] }));
+    }
+    return (_jsx("div", { className: cn("absolute bottom-0 right-0 rounded-full border-[1.5px] border-white", statusDotSize[size], status === "online" ? "bg-success-600" : "bg-grey-300"), children: text && _jsx("span", { className: "sr-only", children: text }) }));
+}
+/* ─── Avatar Component ─── */
+export const Avatar = forwardRef(({ type = "image", size = "md", status = "none", statusLabel, src, alt = "", initials, icon, className, ...rest }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("relative inline-flex shrink-0", containerSize[size], className), ...rest, children: [type === "image" ? (_jsx("div", { className: "absolute inset-0 rounded-full border-[1.5px] border-white overflow-hidden", children: src ? (_jsx("img", { src: src, alt: alt, className: "size-full object-cover rounded-full" })) : (_jsx("div", { className: "size-full bg-grey-200 rounded-full" })) })) : (_jsx("div", { className: "absolute inset-0 rounded-full bg-primary-50" })), type === "icon" && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center text-grey-900", children: icon ? resolveIcon(icon, iconSize[size]) : _jsx(Icon, { name: "user", size: iconSize[size] }) })), type === "initials" && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center font-semibold text-grey-900", initialsFontSize[size]), children: initials })), _jsx(StatusIndicator, { status: status, size: size, statusLabel: statusLabel })] }));
+});
+Avatar.displayName = "Avatar";
+const groupAvatarSize = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+};
+const groupOverlap = {
+    sm: "-ml-1.5",
+    md: "-ml-1.5",
+    lg: "-ml-[11px]",
+};
+const groupCounterText = {
+    sm: "text-[10px]",
+    md: "text-[14px]",
+    lg: "text-[16px]",
+};
+/* ─── AvatarGroup Component ─── */
+export const AvatarGroup = forwardRef(({ size = "md", max, className, children, ...rest }, ref) => {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const avatarSize = groupAvatarSize[size];
+    const overlap = groupOverlap[size];
+    const visible = max ? childArray.slice(0, max) : childArray;
+    const overflowCount = max ? childArray.length - max : 0;
+    return (_jsxs("div", { ref: ref, className: cn("inline-flex items-center", className), ...rest, children: [visible.map((child, i) => (_jsx("div", { className: cn(i > 0 && overlap, "relative"), children: isValidElement(child)
+                    ? cloneElement(child, { size: avatarSize, status: "none" })
+                    : child }, i))), overflowCount > 0 && (_jsx("div", { className: cn(overlap, "relative"), children: _jsx(Avatar, { type: "initials", size: avatarSize, initials: `+${overflowCount}` }) }))] }));
+});
+AvatarGroup.displayName = "AvatarGroup";

package/dist/components/Avatar/index.cjs

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

package/dist/components/Avatar/index.js

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

package/dist/components/Badge/Badge.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const colorStyles = {
+    orange: {
+        filled: "bg-action-primary text-white",
+        accent: "bg-primary-50 text-primary-700",
+        outline: "border border-primary-700 text-primary-700",
+    },
+    blue: {
+        filled: "bg-action-info text-white",
+        accent: "bg-secondary-50 text-secondary-700",
+        outline: "border border-secondary-700 text-secondary-700",
+    },
+    success: {
+        filled: "bg-action-success text-white",
+        accent: "bg-success-50 text-success-700",
+        outline: "border border-success-700 text-success-700",
+    },
+    warning: {
+        filled: "bg-warning-400 text-black",
+        accent: "bg-warning-50 text-warning-700",
+        outline: "border border-warning-700 text-warning-700",
+    },
+    error: {
+        filled: "bg-action-danger text-white",
+        accent: "bg-error-50 text-error-700",
+        outline: "border border-error-700 text-error-700",
+    },
+    neutral: {
+        filled: "bg-grey-900 text-grey-50",
+        accent: "bg-grey-100 text-grey-700",
+        outline: "border border-grey-700 text-grey-700",
+    },
+    disabled: {
+        filled: "bg-grey-300 text-grey-50",
+        accent: "bg-grey-100 text-grey-500",
+        outline: "border border-grey-400 text-grey-500",
+    },
+};
+const sizeStyles = {
+    sm: { container: "h-[22px] px-2 text-xs gap-1", icon: "size-3" },
+    md: { container: "h-6 px-2.5 text-xs gap-1", icon: "size-3" },
+    lg: { container: "h-7 px-3 text-sm gap-1.5", icon: "size-3.5" },
+};
+function Badge({ color = "orange", type = "filled", size = "sm", leadingIcon, trailingIcon, className, children, ...rest }) {
+    const colorClass = colorStyles[color][type];
+    const sizeConfig = sizeStyles[size];
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, cn_1.cn)("inline-flex items-center rounded-xl font-medium whitespace-nowrap", sizeConfig.container, colorClass, className), ...rest, children: [leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", sizeConfig.icon), children: (0, resolveIcon_1.resolveIcon)(leadingIcon, "xs") })), children, trailingIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", sizeConfig.icon), children: (0, resolveIcon_1.resolveIcon)(trailingIcon, "xs") }))] }));
+}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+const colorStyles = {
+    orange: {
+        filled: "bg-action-primary text-white",
+        accent: "bg-primary-50 text-primary-700",
+        outline: "border border-primary-700 text-primary-700",
+    },
+    blue: {
+        filled: "bg-action-info text-white",
+        accent: "bg-secondary-50 text-secondary-700",
+        outline: "border border-secondary-700 text-secondary-700",
+    },
+    success: {
+        filled: "bg-action-success text-white",
+        accent: "bg-success-50 text-success-700",
+        outline: "border border-success-700 text-success-700",
+    },
+    warning: {
+        filled: "bg-warning-400 text-black",
+        accent: "bg-warning-50 text-warning-700",
+        outline: "border border-warning-700 text-warning-700",
+    },
+    error: {
+        filled: "bg-action-danger text-white",
+        accent: "bg-error-50 text-error-700",
+        outline: "border border-error-700 text-error-700",
+    },
+    neutral: {
+        filled: "bg-grey-900 text-grey-50",
+        accent: "bg-grey-100 text-grey-700",
+        outline: "border border-grey-700 text-grey-700",
+    },
+    disabled: {
+        filled: "bg-grey-300 text-grey-50",
+        accent: "bg-grey-100 text-grey-500",
+        outline: "border border-grey-400 text-grey-500",
+    },
+};
+const sizeStyles = {
+    sm: { container: "h-[22px] px-2 text-xs gap-1", icon: "size-3" },
+    md: { container: "h-6 px-2.5 text-xs gap-1", icon: "size-3" },
+    lg: { container: "h-7 px-3 text-sm gap-1.5", icon: "size-3.5" },
+};
+export function Badge({ color = "orange", type = "filled", size = "sm", leadingIcon, trailingIcon, className, children, ...rest }) {
+    const colorClass = colorStyles[color][type];
+    const sizeConfig = sizeStyles[size];
+    return (_jsxs("span", { className: cn("inline-flex items-center rounded-xl font-medium whitespace-nowrap", sizeConfig.container, colorClass, className), ...rest, children: [leadingIcon && (_jsx("span", { className: cn("shrink-0", sizeConfig.icon), children: resolveIcon(leadingIcon, "xs") })), children, trailingIcon && (_jsx("span", { className: cn("shrink-0", sizeConfig.icon), children: resolveIcon(trailingIcon, "xs") }))] }));
+}

package/dist/components/Badge/index.cjs

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

package/dist/components/Badge/index.js

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

package/dist/components/Banner/Banner.cjs

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = 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 statusColors = {
+    information: {
+        bold: { bg: "bg-action-info", divider: "bg-secondary-50" },
+        subtle: {
+            bg: "bg-secondary-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-secondary-500",
+        },
+    },
+    success: {
+        bold: { bg: "bg-action-success", divider: "bg-success-50" },
+        subtle: {
+            bg: "bg-success-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-success-400",
+        },
+    },
+    error: {
+        bold: { bg: "bg-action-danger", divider: "bg-error-50" },
+        subtle: {
+            bg: "bg-error-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-error-400",
+        },
+    },
+    warning: {
+        bold: { bg: "bg-action-warning", divider: "bg-warning-50" },
+        subtle: {
+            bg: "bg-warning-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-warning-700",
+        },
+    },
+    feature: {
+        bold: { bg: "bg-[#101928]", divider: "bg-grey-100" },
+        subtle: {
+            bg: "bg-grey-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-grey-300",
+        },
+    },
+    opportunity: {
+        bold: { bg: "bg-[#475ccc]", divider: "bg-secondary-50" },
+        subtle: {
+            bg: "bg-secondary-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-secondary-500",
+        },
+    },
+};
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function InfoIcon({ className }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16v-4M12 8h.01" })] }));
+}
+function CloseIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }));
+}
+/* ─── Banner ───────────────────────────────────────────────────────────── */
+exports.Banner = (0, react_1.forwardRef)(({ status = "information", emphasis = "subtle", size = "lg", title, description, icon, buttonLabel, onButtonClick, dismissible, onDismiss, className, ...rest }, ref) => {
+    const colors = statusColors[status];
+    const isBold = emphasis === "bold";
+    const colorSet = isBold ? colors.bold : colors.subtle;
+    const textColor = isBold ? "text-white" : colorSet.text;
+    const descColor = isBold ? "text-white" : colorSet.descText;
+    const buttonColor = isBold ? "text-white" : "text-grey-600";
+    const iconSize = size === "sm" ? "size-4" : "size-6";
+    const textSize = size === "sm" ? "text-xs" : "text-sm";
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: "alert", className: (0, cn_1.cn)("flex items-center justify-between gap-3 overflow-hidden rounded-[4px] w-full", colorSet.bg, size === "sm" ? "min-h-10 px-3 py-2" : "min-h-12 px-8 py-3", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex min-w-0 flex-1 flex-wrap items-center gap-y-1", size === "sm" ? "gap-x-2" : "gap-x-3"), children: [icon ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", iconSize, textColor), children: (0, resolveIcon_1.resolveIcon)(icon, size === "sm" ? "sm" : "md") })) : ((0, jsx_runtime_1.jsx)(InfoIcon, { className: (0, cn_1.cn)("shrink-0", iconSize, textColor) })), (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("min-w-0 font-semibold leading-[1.45]", textSize, textColor), children: title }), description && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("min-w-0 leading-[1.45] hidden sm:inline", textSize, descColor), children: description })), buttonLabel && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onButtonClick, className: (0, cn_1.cn)("shrink-0 font-semibold leading-[1.45] whitespace-nowrap cursor-pointer", textSize, buttonColor, isBold && "text-white underline"), children: buttonLabel }))] }), (dismissible ?? !!onDismiss) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 self-stretch shrink-0", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-px self-stretch", colorSet.divider) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss banner", className: (0, cn_1.cn)("shrink-0 box-content p-1 -m-1 cursor-pointer", iconSize, textColor), children: (0, jsx_runtime_1.jsx)(CloseIcon, { className: "size-full" }) })] }))] }));
+});
+exports.Banner.displayName = "Banner";

package/dist/components/Banner/Banner.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+const statusColors = {
+    information: {
+        bold: { bg: "bg-action-info", divider: "bg-secondary-50" },
+        subtle: {
+            bg: "bg-secondary-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-secondary-500",
+        },
+    },
+    success: {
+        bold: { bg: "bg-action-success", divider: "bg-success-50" },
+        subtle: {
+            bg: "bg-success-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-success-400",
+        },
+    },
+    error: {
+        bold: { bg: "bg-action-danger", divider: "bg-error-50" },
+        subtle: {
+            bg: "bg-error-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-error-400",
+        },
+    },
+    warning: {
+        bold: { bg: "bg-action-warning", divider: "bg-warning-50" },
+        subtle: {
+            bg: "bg-warning-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-warning-700",
+        },
+    },
+    feature: {
+        bold: { bg: "bg-[#101928]", divider: "bg-grey-100" },
+        subtle: {
+            bg: "bg-grey-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-grey-300",
+        },
+    },
+    opportunity: {
+        bold: { bg: "bg-[#475ccc]", divider: "bg-secondary-50" },
+        subtle: {
+            bg: "bg-secondary-50",
+            text: "text-grey-900",
+            descText: "text-grey-600",
+            divider: "bg-secondary-500",
+        },
+    },
+};
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function InfoIcon({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4M12 8h.01" })] }));
+}
+function CloseIcon({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12" }) }));
+}
+/* ─── Banner ───────────────────────────────────────────────────────────── */
+export const Banner = forwardRef(({ status = "information", emphasis = "subtle", size = "lg", title, description, icon, buttonLabel, onButtonClick, dismissible, onDismiss, className, ...rest }, ref) => {
+    const colors = statusColors[status];
+    const isBold = emphasis === "bold";
+    const colorSet = isBold ? colors.bold : colors.subtle;
+    const textColor = isBold ? "text-white" : colorSet.text;
+    const descColor = isBold ? "text-white" : colorSet.descText;
+    const buttonColor = isBold ? "text-white" : "text-grey-600";
+    const iconSize = size === "sm" ? "size-4" : "size-6";
+    const textSize = size === "sm" ? "text-xs" : "text-sm";
+    return (_jsxs("div", { ref: ref, role: "alert", className: cn("flex items-center justify-between gap-3 overflow-hidden rounded-[4px] w-full", colorSet.bg, size === "sm" ? "min-h-10 px-3 py-2" : "min-h-12 px-8 py-3", className), ...rest, children: [_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-y-1", size === "sm" ? "gap-x-2" : "gap-x-3"), children: [icon ? (_jsx("span", { className: cn("shrink-0", iconSize, textColor), children: resolveIcon(icon, size === "sm" ? "sm" : "md") })) : (_jsx(InfoIcon, { className: cn("shrink-0", iconSize, textColor) })), _jsx("span", { className: cn("min-w-0 font-semibold leading-[1.45]", textSize, textColor), children: title }), description && (_jsx("span", { className: cn("min-w-0 leading-[1.45] hidden sm:inline", textSize, descColor), children: description })), buttonLabel && (_jsx("button", { type: "button", onClick: onButtonClick, className: cn("shrink-0 font-semibold leading-[1.45] whitespace-nowrap cursor-pointer", textSize, buttonColor, isBold && "text-white underline"), children: buttonLabel }))] }), (dismissible ?? !!onDismiss) && (_jsxs("div", { className: "flex items-center gap-3 self-stretch shrink-0", children: [_jsx("div", { className: cn("w-px self-stretch", colorSet.divider) }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss banner", className: cn("shrink-0 box-content p-1 -m-1 cursor-pointer", iconSize, textColor), children: _jsx(CloseIcon, { className: "size-full" }) })] }))] }));
+});
+Banner.displayName = "Banner";

package/dist/components/Banner/index.cjs

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

package/dist/components/Banner/index.js

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

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = Breadcrumb;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+/* ─── Separator Icons ──────────────────────────────────────────────────── */
+function ChevronRight({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.5 5l5 5-5 5" }) }));
+}
+function DoubleChevronRight({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5.5 5l5 5-5 5M10.5 5l5 5-5 5" }) }));
+}
+function SeparatorElement({ type }) {
+    switch (type) {
+        case "chevron":
+            return (0, jsx_runtime_1.jsx)(ChevronRight, { className: "size-5 text-grey-300" });
+        case "double-chevron":
+            return (0, jsx_runtime_1.jsx)(DoubleChevronRight, { className: "size-5 text-grey-300" });
+        case "slash":
+            return (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-grey-300 w-4 text-center", children: "/" });
+    }
+}
+/* ─── Breadcrumb ───────────────────────────────────────────────────────── */
+function Breadcrumb({ items, separator = "chevron", hasBorders = false, className, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": "Breadcrumb", className: (0, cn_1.cn)("py-2.5", hasBorders && "border-y border-grey-100", className), ...rest, children: (0, jsx_runtime_1.jsx)("ol", { className: "flex items-center gap-4 text-sm font-medium", children: items.map((item, i) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-4", children: [i > 0 && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(SeparatorElement, { type: separator }) })), (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [item.icon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("size-5 shrink-0", item.active
+                                    ? "text-primary-400"
+                                    : item.disabled
+                                        ? "text-grey-300"
+                                        : "text-grey-500 group-hover:text-grey-700"), children: (0, resolveIcon_1.resolveIcon)(item.icon, "sm") })), item.href && !item.disabled && !item.active ? ((0, jsx_runtime_1.jsx)("a", { href: item.href, className: "text-grey-500 hover:text-grey-700 hover:underline transition-colors", children: item.label })) : ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)(item.active && "text-primary-400", item.disabled && "text-grey-300 cursor-not-allowed", !item.active && !item.disabled && "text-grey-500"), "aria-current": item.active ? "page" : undefined, children: item.label }))] })] }, i))) }) }));
+}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+/* ─── Separator Icons ──────────────────────────────────────────────────── */
+function ChevronRight({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M7.5 5l5 5-5 5" }) }));
+}
+function DoubleChevronRight({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5.5 5l5 5-5 5M10.5 5l5 5-5 5" }) }));
+}
+function SeparatorElement({ type }) {
+    switch (type) {
+        case "chevron":
+            return _jsx(ChevronRight, { className: "size-5 text-grey-300" });
+        case "double-chevron":
+            return _jsx(DoubleChevronRight, { className: "size-5 text-grey-300" });
+        case "slash":
+            return _jsx("span", { className: "text-sm font-medium text-grey-300 w-4 text-center", children: "/" });
+    }
+}
+/* ─── Breadcrumb ───────────────────────────────────────────────────────── */
+export function Breadcrumb({ items, separator = "chevron", hasBorders = false, className, ...rest }) {
+    return (_jsx("nav", { "aria-label": "Breadcrumb", className: cn("py-2.5", hasBorders && "border-y border-grey-100", className), ...rest, children: _jsx("ol", { className: "flex items-center gap-4 text-sm font-medium", children: items.map((item, i) => (_jsxs("li", { className: "flex items-center gap-4", children: [i > 0 && (_jsx("span", { "aria-hidden": true, children: _jsx(SeparatorElement, { type: separator }) })), _jsxs("span", { className: "flex items-center gap-2", children: [item.icon && (_jsx("span", { className: cn("size-5 shrink-0", item.active
+                                    ? "text-primary-400"
+                                    : item.disabled
+                                        ? "text-grey-300"
+                                        : "text-grey-500 group-hover:text-grey-700"), children: resolveIcon(item.icon, "sm") })), item.href && !item.disabled && !item.active ? (_jsx("a", { href: item.href, className: "text-grey-500 hover:text-grey-700 hover:underline transition-colors", children: item.label })) : (_jsx("span", { className: cn(item.active && "text-primary-400", item.disabled && "text-grey-300 cursor-not-allowed", !item.active && !item.disabled && "text-grey-500"), "aria-current": item.active ? "page" : undefined, children: item.label }))] })] }, i))) }) }));
+}

package/dist/components/Breadcrumb/index.cjs

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

package/dist/components/Breadcrumb/index.js

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