@raydenui/ui 0.9.7 → 0.10.1

package/dist/chart.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGradientFill = exports.hexToRgba = exports.chartFont = exports.chartColors = exports.RaydenChart = void 0;
+// Charts live behind their own subpath so that `chart.js` and `react-chartjs-2`
+// — declared optional in peerDependenciesMeta — are only evaluated by consumers
+// that actually import a chart. Re-exporting these from the package root made
+// the optional peers mandatory for every Node/SSR import of `@raydenui/ui`.
+var Chart_1 = require("./components/Chart/index.cjs");
+Object.defineProperty(exports, "RaydenChart", { enumerable: true, get: function () { return Chart_1.RaydenChart; } });
+Object.defineProperty(exports, "chartColors", { enumerable: true, get: function () { return Chart_1.chartColors; } });
+Object.defineProperty(exports, "chartFont", { enumerable: true, get: function () { return Chart_1.chartFont; } });
+Object.defineProperty(exports, "hexToRgba", { enumerable: true, get: function () { return Chart_1.hexToRgba; } });
+Object.defineProperty(exports, "createGradientFill", { enumerable: true, get: function () { return Chart_1.createGradientFill; } });

package/dist/chart.d.cts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+
+/**
+ * Rayna UI chart theme — color palette and defaults for Chart.js components.
+ */
+declare const chartColors: {
+    readonly primary: readonly ["#F56630", "#FA9874", "#FCB59A", "#FCD2C2", "#FFECE5"];
+    readonly semantic: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC"];
+    readonly extended: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC", "#475CCC", "#8D8484", "#F77A4A", "#40B869"];
+    readonly grey: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F0F2F5";
+        readonly 200: "#E4E7EC";
+        readonly 300: "#D0D5DD";
+        readonly 400: "#98A2B3";
+        readonly 500: "#667185";
+        readonly 700: "#344054";
+        readonly 900: "#101928";
+    };
+};
+/** Default font for Chart.js */
+declare const chartFont: {
+    family: string;
+    size: number;
+    weight: "normal";
+};
+/** Create an rgba version of a hex color */
+declare function hexToRgba(hex: string, alpha: number): string;
+/** Generate a gradient fill for area charts */
+declare function createGradientFill(ctx: CanvasRenderingContext2D, color: string, height: number): CanvasGradient;
+
+type ChartType = "line" | "bar" | "pie" | "doughnut" | "radar" | "scatter" | "bubble" | "polar-area";
+interface RaydenChartProps extends HTMLAttributes<HTMLDivElement> {
+    /** Chart type */
+    type: ChartType;
+    /** Chart.js data object */
+    data: ChartData<any>;
+    /** Chart.js options (merged with Rayna defaults) */
+    options?: ChartOptions<any>;
+    /** Chart height */
+    height?: number;
+    /** Chart width */
+    width?: number;
+    /** Accessible name for the chart. Without this the canvas is an unnamed role="img". */
+    title?: string;
+    /** Optional plain-language summary announced alongside the chart. */
+    summary?: string;
+    /**
+     * Render a visually hidden data table equivalent to the chart. Defaults to true
+     * so the underlying numbers are never canvas-only. Set false when an equivalent
+     * table is already present elsewhere on the page.
+     */
+    dataTable?: boolean;
+}
+declare const RaydenChart: react.ForwardRefExoticComponent<RaydenChartProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ChartType, RaydenChart, type RaydenChartProps, chartColors, chartFont, createGradientFill, hexToRgba };

package/dist/chart.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+
+/**
+ * Rayna UI chart theme — color palette and defaults for Chart.js components.
+ */
+declare const chartColors: {
+    readonly primary: readonly ["#F56630", "#FA9874", "#FCB59A", "#FCD2C2", "#FFECE5"];
+    readonly semantic: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC"];
+    readonly extended: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC", "#475CCC", "#8D8484", "#F77A4A", "#40B869"];
+    readonly grey: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F0F2F5";
+        readonly 200: "#E4E7EC";
+        readonly 300: "#D0D5DD";
+        readonly 400: "#98A2B3";
+        readonly 500: "#667185";
+        readonly 700: "#344054";
+        readonly 900: "#101928";
+    };
+};
+/** Default font for Chart.js */
+declare const chartFont: {
+    family: string;
+    size: number;
+    weight: "normal";
+};
+/** Create an rgba version of a hex color */
+declare function hexToRgba(hex: string, alpha: number): string;
+/** Generate a gradient fill for area charts */
+declare function createGradientFill(ctx: CanvasRenderingContext2D, color: string, height: number): CanvasGradient;
+
+type ChartType = "line" | "bar" | "pie" | "doughnut" | "radar" | "scatter" | "bubble" | "polar-area";
+interface RaydenChartProps extends HTMLAttributes<HTMLDivElement> {
+    /** Chart type */
+    type: ChartType;
+    /** Chart.js data object */
+    data: ChartData<any>;
+    /** Chart.js options (merged with Rayna defaults) */
+    options?: ChartOptions<any>;
+    /** Chart height */
+    height?: number;
+    /** Chart width */
+    width?: number;
+    /** Accessible name for the chart. Without this the canvas is an unnamed role="img". */
+    title?: string;
+    /** Optional plain-language summary announced alongside the chart. */
+    summary?: string;
+    /**
+     * Render a visually hidden data table equivalent to the chart. Defaults to true
+     * so the underlying numbers are never canvas-only. Set false when an equivalent
+     * table is already present elsewhere on the page.
+     */
+    dataTable?: boolean;
+}
+declare const RaydenChart: react.ForwardRefExoticComponent<RaydenChartProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type ChartType, RaydenChart, type RaydenChartProps, chartColors, chartFont, createGradientFill, hexToRgba };

package/dist/chart.js

@@ -0,0 +1,5 @@
+// Charts live behind their own subpath so that `chart.js` and `react-chartjs-2`
+// — declared optional in peerDependenciesMeta — are only evaluated by consumers
+// that actually import a chart. Re-exporting these from the package root made
+// the optional peers mandatory for every Node/SSR import of `@raydenui/ui`.
+export { RaydenChart, chartColors, chartFont, hexToRgba, createGradientFill, } from "./components/Chart/index.js";

package/dist/components/Accordion/Accordion.cjs

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = 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 AccordionContext = (0, react_1.createContext)(null);
+const AccordionItemContext = (0, react_1.createContext)(null);
+function useAccordionContext() {
+    const ctx = (0, react_1.useContext)(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion compound components must be used within <Accordion>");
+    return ctx;
+}
+function useAccordionItemContext() {
+    const ctx = (0, react_1.useContext)(AccordionItemContext);
+    if (!ctx)
+        throw new Error("AccordionTrigger/Content must be used within <AccordionItem>");
+    return ctx;
+}
+/* ─── Chevron ──────────────────────────────────────────────────────────── */
+function ChevronDown({ 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: "M6 9l6 6 6-6" }) }));
+}
+/* ─── Accordion Root ───────────────────────────────────────────────────── */
+exports.Accordion = (0, react_1.forwardRef)(({ type = "default", multiple = false, value: controlledValue, defaultValue = [], onValueChange, className, children, ...rest }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(defaultValue);
+    const openItems = controlledValue ?? uncontrolledValue;
+    const toggle = (0, react_1.useCallback)((itemValue) => {
+        const next = openItems.includes(itemValue)
+            ? openItems.filter((v) => v !== itemValue)
+            : multiple
+                ? [...openItems, itemValue]
+                : [itemValue];
+        if (!controlledValue)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [openItems, multiple, controlledValue, onValueChange]);
+    return ((0, jsx_runtime_1.jsx)(AccordionContext.Provider, { value: { type, openItems, toggle }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("w-full", type === "nested" && "flex flex-col gap-3", className), ...rest, children: children }) }));
+});
+exports.Accordion.displayName = "Accordion";
+/* ─── AccordionItem ────────────────────────────────────────────────────── */
+exports.AccordionItem = (0, react_1.forwardRef)(({ value, disabled = false, className, children, ...rest }, ref) => {
+    const { type, openItems } = useAccordionContext();
+    const isOpen = openItems.includes(value);
+    const generatedId = (0, react_1.useId)();
+    const triggerId = `accordion-trigger-${generatedId}`;
+    const contentId = `accordion-content-${generatedId}`;
+    return ((0, jsx_runtime_1.jsx)(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("border-solid transition-colors", type === "default"
+                ? (0, cn_1.cn)("border-b", isOpen ? "border-primary-300" : "border-grey-100")
+                : (0, cn_1.cn)("border rounded-[10px]", isOpen ? "border-primary-300" : "border-grey-75"), className), ...rest, children: children }) }));
+});
+exports.AccordionItem.displayName = "AccordionItem";
+/* ─── AccordionTrigger ─────────────────────────────────────────────────── */
+exports.AccordionTrigger = (0, react_1.forwardRef)(({ leadingIcon, leadingNumber, leadingLogo, badge, hideChevron = false, className, children, onClick, ...rest }, ref) => {
+    const { toggle } = useAccordionContext();
+    // The internal handler is composed AFTER {...rest} so a consumer onClick
+    // cannot replace the toggle; calling preventDefault() cancels it.
+    const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, id: triggerId, type: "button", disabled: disabled, "aria-expanded": isOpen, "aria-controls": contentId, className: (0, cn_1.cn)("flex items-center gap-3 px-4 py-6 w-full text-left transition-colors", !isOpen && !disabled && "hover:bg-grey-50 dark:hover:bg-grey-100", disabled && "opacity-50 cursor-not-allowed", className), ...rest, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                toggle(value);
+        }, children: [leadingNumber && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 flex items-center justify-center bg-grey-700 text-grey-50 text-base font-medium leading-[1.48] rounded-xl px-2 py-1 min-w-[37px]", children: leadingNumber })), leadingLogo && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: leadingLogo }), leadingIcon && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-6 text-grey-500", children: (0, resolveIcon_1.resolveIcon)(leadingIcon, "md") })), (0, jsx_runtime_1.jsx)("span", { className: "flex-1 min-w-0 text-lg font-semibold text-grey-900 leading-[1.54]", children: children }), badge != null && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 bg-primary-50 text-action-primary-text text-sm font-medium rounded-full px-3 py-2 leading-[1.45]", children: badge })), !hideChevron && ((0, jsx_runtime_1.jsx)(ChevronDown, { className: (0, cn_1.cn)("shrink-0 size-6 text-grey-500 transition-transform duration-200", isOpen && "rotate-180") }))] }));
+});
+exports.AccordionTrigger.displayName = "AccordionTrigger";
+/* ─── AccordionContent ─────────────────────────────────────────────────── */
+exports.AccordionContent = (0, react_1.forwardRef)(({ className, children, ...rest }, ref) => {
+    const { isOpen, triggerId, contentId } = useAccordionItemContext();
+    const regionRef = (0, react_1.useRef)(null);
+    const wasOpen = (0, react_1.useRef)(isOpen);
+    // Collapsing is a grid-rows transition, which hides the panel visually but
+    // leaves its descendants focusable and in the accessibility tree. `inert`
+    // closes that gap; if focus was already inside when the panel closed, send
+    // it back to the trigger rather than dropping it on the document.
+    (0, react_1.useEffect)(() => {
+        if (wasOpen.current && !isOpen) {
+            const node = regionRef.current;
+            if (node && node.contains(document.activeElement)) {
+                document.getElementById(triggerId)?.focus();
+            }
+        }
+        wasOpen.current = isOpen;
+    }, [isOpen, triggerId]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: (node) => {
+            regionRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, id: contentId, role: "region", "aria-labelledby": triggerId, inert: !isOpen, className: (0, cn_1.cn)("grid transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("px-4 pb-6 text-base text-grey-500 leading-[1.48]", className), ...rest, children: children }) }) }));
+});
+exports.AccordionContent.displayName = "AccordionContent";

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState, } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+const AccordionContext = createContext(null);
+const AccordionItemContext = createContext(null);
+function useAccordionContext() {
+    const ctx = useContext(AccordionContext);
+    if (!ctx)
+        throw new Error("Accordion compound components must be used within <Accordion>");
+    return ctx;
+}
+function useAccordionItemContext() {
+    const ctx = useContext(AccordionItemContext);
+    if (!ctx)
+        throw new Error("AccordionTrigger/Content must be used within <AccordionItem>");
+    return ctx;
+}
+/* ─── Chevron ──────────────────────────────────────────────────────────── */
+function ChevronDown({ 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: "M6 9l6 6 6-6" }) }));
+}
+/* ─── Accordion Root ───────────────────────────────────────────────────── */
+export const Accordion = forwardRef(({ type = "default", multiple = false, value: controlledValue, defaultValue = [], onValueChange, className, children, ...rest }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const openItems = controlledValue ?? uncontrolledValue;
+    const toggle = useCallback((itemValue) => {
+        const next = openItems.includes(itemValue)
+            ? openItems.filter((v) => v !== itemValue)
+            : multiple
+                ? [...openItems, itemValue]
+                : [itemValue];
+        if (!controlledValue)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    }, [openItems, multiple, controlledValue, onValueChange]);
+    return (_jsx(AccordionContext.Provider, { value: { type, openItems, toggle }, children: _jsx("div", { ref: ref, className: cn("w-full", type === "nested" && "flex flex-col gap-3", className), ...rest, children: children }) }));
+});
+Accordion.displayName = "Accordion";
+/* ─── AccordionItem ────────────────────────────────────────────────────── */
+export const AccordionItem = forwardRef(({ value, disabled = false, className, children, ...rest }, ref) => {
+    const { type, openItems } = useAccordionContext();
+    const isOpen = openItems.includes(value);
+    const generatedId = useId();
+    const triggerId = `accordion-trigger-${generatedId}`;
+    const contentId = `accordion-content-${generatedId}`;
+    return (_jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: _jsx("div", { ref: ref, className: cn("border-solid transition-colors", type === "default"
+                ? cn("border-b", isOpen ? "border-primary-300" : "border-grey-100")
+                : cn("border rounded-[10px]", isOpen ? "border-primary-300" : "border-grey-75"), className), ...rest, children: children }) }));
+});
+AccordionItem.displayName = "AccordionItem";
+/* ─── AccordionTrigger ─────────────────────────────────────────────────── */
+export const AccordionTrigger = forwardRef(({ leadingIcon, leadingNumber, leadingLogo, badge, hideChevron = false, className, children, onClick, ...rest }, ref) => {
+    const { toggle } = useAccordionContext();
+    // The internal handler is composed AFTER {...rest} so a consumer onClick
+    // cannot replace the toggle; calling preventDefault() cancels it.
+    const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+    return (_jsxs("button", { ref: ref, id: triggerId, type: "button", disabled: disabled, "aria-expanded": isOpen, "aria-controls": contentId, className: cn("flex items-center gap-3 px-4 py-6 w-full text-left transition-colors", !isOpen && !disabled && "hover:bg-grey-50 dark:hover:bg-grey-100", disabled && "opacity-50 cursor-not-allowed", className), ...rest, onClick: (event) => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                toggle(value);
+        }, children: [leadingNumber && (_jsx("span", { className: "shrink-0 flex items-center justify-center bg-grey-700 text-grey-50 text-base font-medium leading-[1.48] rounded-xl px-2 py-1 min-w-[37px]", children: leadingNumber })), leadingLogo && _jsx("span", { className: "shrink-0", children: leadingLogo }), leadingIcon && (_jsx("span", { className: "shrink-0 size-6 text-grey-500", children: resolveIcon(leadingIcon, "md") })), _jsx("span", { className: "flex-1 min-w-0 text-lg font-semibold text-grey-900 leading-[1.54]", children: children }), badge != null && (_jsx("span", { className: "shrink-0 bg-primary-50 text-action-primary-text text-sm font-medium rounded-full px-3 py-2 leading-[1.45]", children: badge })), !hideChevron && (_jsx(ChevronDown, { className: cn("shrink-0 size-6 text-grey-500 transition-transform duration-200", isOpen && "rotate-180") }))] }));
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+/* ─── AccordionContent ─────────────────────────────────────────────────── */
+export const AccordionContent = forwardRef(({ className, children, ...rest }, ref) => {
+    const { isOpen, triggerId, contentId } = useAccordionItemContext();
+    const regionRef = useRef(null);
+    const wasOpen = useRef(isOpen);
+    // Collapsing is a grid-rows transition, which hides the panel visually but
+    // leaves its descendants focusable and in the accessibility tree. `inert`
+    // closes that gap; if focus was already inside when the panel closed, send
+    // it back to the trigger rather than dropping it on the document.
+    useEffect(() => {
+        if (wasOpen.current && !isOpen) {
+            const node = regionRef.current;
+            if (node && node.contains(document.activeElement)) {
+                document.getElementById(triggerId)?.focus();
+            }
+        }
+        wasOpen.current = isOpen;
+    }, [isOpen, triggerId]);
+    return (_jsx("div", { ref: (node) => {
+            regionRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, id: contentId, role: "region", "aria-labelledby": triggerId, inert: !isOpen, className: cn("grid transition-[grid-template-rows] duration-200 ease-out", isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), children: _jsx("div", { className: "overflow-hidden", children: _jsx("div", { className: cn("px-4 pb-6 text-base text-grey-500 leading-[1.48]", className), ...rest, children: children }) }) }));
+});
+AccordionContent.displayName = "AccordionContent";

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = void 0;
+var Accordion_1 = require("./Accordion.cjs");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return Accordion_1.AccordionItem; } });
+Object.defineProperty(exports, "AccordionTrigger", { enumerable: true, get: function () { return Accordion_1.AccordionTrigger; } });
+Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return Accordion_1.AccordionContent; } });

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./Accordion.js";

package/dist/components/ActivityFeed/ActivityContent.cjs

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityContent = 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");
+// ─── Style wrapper classes ────────────────────────────────
+const styleClasses = {
+    plain: "",
+    card: "bg-surface rounded-lg p-2 shadow-[0px_2px_5px_-2px_rgba(16,25,40,0.06),0px_2px_7px_0px_rgba(16,25,40,0.05),0px_0px_0px_1px_rgba(16,25,40,0.05)]",
+    container: "bg-grey-50 border border-grey-100 rounded-lg p-3",
+};
+exports.ActivityContent = (0, react_1.forwardRef)(({ variant, contentStyle = "card", 
+// File props
+icon, title, size, fileType, date, 
+// Comment props
+avatar, author, timestamp, comment, attachments, reactions, replies, onReply, 
+// CTA props
+primaryAction, secondaryAction, className, ...rest }, ref) => {
+    // ─── File variant ─────────────────────────────────────
+    if (variant === "file") {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex min-w-0 items-center gap-2", styleClasses[contentStyle], className), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 items-center justify-center size-8 rounded-lg bg-primary-50", children: (0, jsx_runtime_1.jsx)("span", { className: "size-4", children: (0, resolveIcon_1.resolveIcon)(icon ?? "file", "sm") }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-col items-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "min-w-0 text-xs font-semibold text-on-surface-body break-words", children: title }), size && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "size-0.5 shrink-0 rounded-full bg-grey-400", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: size })] }))] }), (fileType || date) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1", children: [fileType && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: fileType })), date && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1", children: [fileType && ((0, jsx_runtime_1.jsx)("span", { className: "size-0.5 shrink-0 rounded-full bg-grey-400", "aria-hidden": "true" })), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: date })] }))] }))] })] }));
+    }
+    // ─── Comment variant ──────────────────────────────────
+    if (variant === "comment") {
+        const commentContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(avatar || author) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 items-center gap-2 w-full", children: [avatar && (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 size-5", children: avatar }), (0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-baseline", children: [author && ((0, jsx_runtime_1.jsx)("span", { className: "min-w-0 text-body-sm font-medium text-on-surface-body break-words", children: author })), timestamp && ((0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 text-xs text-on-surface-muted break-words", children: ["\u30FB", timestamp] }))] })] })), comment && ((0, jsx_runtime_1.jsx)("p", { className: "w-full text-body-sm text-on-surface-secondary leading-5 break-words", children: comment })), attachments && attachments.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-wrap items-start gap-2", children: [attachments.slice(0, 2).map((file) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-grey-100 bg-surface pl-1 pr-2 py-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 items-center justify-center size-6 rounded bg-primary-50 border border-primary-50", children: (0, jsx_runtime_1.jsx)("span", { className: "size-3", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "file", size: "xs" }) }) }), (0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 truncate text-xs text-on-surface-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold", children: file.name }), (0, jsx_runtime_1.jsxs)("span", { className: "text-on-surface-muted", children: [".", file.extension] })] })] }, `${file.name}.${file.extension}`))), attachments.length > 2 && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center size-8 rounded-lg border border-grey-100 bg-surface px-2 py-1", children: (0, jsx_runtime_1.jsxs)("span", { className: "text-xs font-semibold text-on-surface-body", children: ["+", attachments.length - 2] }) }))] })), (reactions != null || replies != null) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start gap-2", children: [reactions != null && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-surface px-2 py-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-body", children: "\uD83E\uDD1D\uD83D\uDD25" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-on-surface-body", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-semibold", children: [reactions, " "] }), "Reactions"] })] })), replies != null && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-surface px-2 py-1 h-8", children: [(0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "message", size: "sm", className: "text-on-surface-muted" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-on-surface-body", children: [(0, jsx_runtime_1.jsxs)("span", { className: "font-semibold", children: [replies, " "] }), "Replies"] })] }))] })), onReply && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onReply, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-3 py-1 text-xs font-semibold text-on-surface-body", children: "Reply" }))] }));
+        if (contentStyle === "plain") {
+            return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex gap-2 items-start", className), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 w-px self-stretch bg-grey-100" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 items-start rounded-lg p-3", children: commentContent })] }));
+        }
+        return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-2 items-start", styleClasses[contentStyle], className), ...rest, children: commentContent }));
+    }
+    // ─── CTA variant ──────────────────────────────────────
+    if (variant === "cta") {
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-wrap items-start gap-3", className), ...rest, children: [primaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: primaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg bg-action-primary px-4 py-2 text-body-sm font-semibold text-white", children: primaryAction.label })), secondaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: secondaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-4 py-2 text-body-sm font-semibold text-on-surface-body", children: secondaryAction.label }))] }));
+    }
+    return null;
+});
+exports.ActivityContent.displayName = "ActivityContent";

package/dist/components/ActivityFeed/ActivityContent.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Icon } from "../Icon/index.js";
+// ─── Style wrapper classes ────────────────────────────────
+const styleClasses = {
+    plain: "",
+    card: "bg-surface rounded-lg p-2 shadow-[0px_2px_5px_-2px_rgba(16,25,40,0.06),0px_2px_7px_0px_rgba(16,25,40,0.05),0px_0px_0px_1px_rgba(16,25,40,0.05)]",
+    container: "bg-grey-50 border border-grey-100 rounded-lg p-3",
+};
+export const ActivityContent = forwardRef(({ variant, contentStyle = "card", 
+// File props
+icon, title, size, fileType, date, 
+// Comment props
+avatar, author, timestamp, comment, attachments, reactions, replies, onReply, 
+// CTA props
+primaryAction, secondaryAction, className, ...rest }, ref) => {
+    // ─── File variant ─────────────────────────────────────
+    if (variant === "file") {
+        return (_jsxs("div", { ref: ref, className: cn("flex min-w-0 items-center gap-2", styleClasses[contentStyle], className), ...rest, children: [_jsx("div", { className: "flex shrink-0 items-center justify-center size-8 rounded-lg bg-primary-50", children: _jsx("span", { className: "size-4", children: resolveIcon(icon ?? "file", "sm") }) }), _jsxs("div", { className: "flex min-w-0 flex-col items-start", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1", children: [_jsx("span", { className: "min-w-0 text-xs font-semibold text-on-surface-body break-words", children: title }), size && (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1", children: [_jsx("span", { className: "size-0.5 shrink-0 rounded-full bg-grey-400", "aria-hidden": "true" }), _jsx("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: size })] }))] }), (fileType || date) && (_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1", children: [fileType && (_jsx("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: fileType })), date && (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1", children: [fileType && (_jsx("span", { className: "size-0.5 shrink-0 rounded-full bg-grey-400", "aria-hidden": "true" })), _jsx("span", { className: "text-xs text-on-surface-muted whitespace-nowrap", children: date })] }))] }))] })] }));
+    }
+    // ─── Comment variant ──────────────────────────────────
+    if (variant === "comment") {
+        const commentContent = (_jsxs(_Fragment, { children: [(avatar || author) && (_jsxs("div", { className: "flex min-w-0 items-center gap-2 w-full", children: [avatar && _jsx("div", { className: "shrink-0 size-5", children: avatar }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline", children: [author && (_jsx("span", { className: "min-w-0 text-body-sm font-medium text-on-surface-body break-words", children: author })), timestamp && (_jsxs("span", { className: "min-w-0 text-xs text-on-surface-muted break-words", children: ["\u30FB", timestamp] }))] })] })), comment && (_jsx("p", { className: "w-full text-body-sm text-on-surface-secondary leading-5 break-words", children: comment })), attachments && attachments.length > 0 && (_jsxs("div", { className: "flex min-w-0 flex-wrap items-start gap-2", children: [attachments.slice(0, 2).map((file) => (_jsxs("div", { className: "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-grey-100 bg-surface pl-1 pr-2 py-1", children: [_jsx("div", { className: "flex shrink-0 items-center justify-center size-6 rounded bg-primary-50 border border-primary-50", children: _jsx("span", { className: "size-3", children: _jsx(Icon, { name: "file", size: "xs" }) }) }), _jsxs("span", { className: "min-w-0 truncate text-xs text-on-surface-body", children: [_jsx("span", { className: "font-semibold", children: file.name }), _jsxs("span", { className: "text-on-surface-muted", children: [".", file.extension] })] })] }, `${file.name}.${file.extension}`))), attachments.length > 2 && (_jsx("div", { className: "flex items-center justify-center size-8 rounded-lg border border-grey-100 bg-surface px-2 py-1", children: _jsxs("span", { className: "text-xs font-semibold text-on-surface-body", children: ["+", attachments.length - 2] }) }))] })), (reactions != null || replies != null) && (_jsxs("div", { className: "flex flex-wrap items-start gap-2", children: [reactions != null && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-surface px-2 py-1", children: [_jsx("span", { className: "text-xs text-on-surface-body", children: "\uD83E\uDD1D\uD83D\uDD25" }), _jsxs("span", { className: "text-xs text-on-surface-body", children: [_jsxs("span", { className: "font-semibold", children: [reactions, " "] }), "Reactions"] })] })), replies != null && (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-grey-100 bg-surface px-2 py-1 h-8", children: [_jsx(Icon, { name: "message", size: "sm", className: "text-on-surface-muted" }), _jsxs("span", { className: "text-xs text-on-surface-body", children: [_jsxs("span", { className: "font-semibold", children: [replies, " "] }), "Replies"] })] }))] })), onReply && (_jsx("button", { type: "button", onClick: onReply, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-3 py-1 text-xs font-semibold text-on-surface-body", children: "Reply" }))] }));
+        if (contentStyle === "plain") {
+            return (_jsxs("div", { ref: ref, className: cn("flex gap-2 items-start", className), ...rest, children: [_jsx("div", { className: "shrink-0 w-px self-stretch bg-grey-100" }), _jsx("div", { className: "flex flex-col gap-2 items-start rounded-lg p-3", children: commentContent })] }));
+        }
+        return (_jsx("div", { ref: ref, className: cn("flex flex-col gap-2 items-start", styleClasses[contentStyle], className), ...rest, children: commentContent }));
+    }
+    // ─── CTA variant ──────────────────────────────────────
+    if (variant === "cta") {
+        return (_jsxs("div", { ref: ref, className: cn("flex flex-wrap items-start gap-3", className), ...rest, children: [primaryAction && (_jsx("button", { type: "button", onClick: primaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg bg-action-primary px-4 py-2 text-body-sm font-semibold text-white", children: primaryAction.label })), secondaryAction && (_jsx("button", { type: "button", onClick: secondaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-4 py-2 text-body-sm font-semibold text-on-surface-body", children: secondaryAction.label }))] }));
+    }
+    return null;
+});
+ActivityContent.displayName = "ActivityContent";

package/dist/components/ActivityFeed/ActivityItem.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+/**
+ * Meta row segments wrap as a group so a separator never starts a line on its own,
+ * and long labels break instead of overflowing into the timestamp.
+ */
+const metaSegmentClasses = "inline-flex max-w-full min-w-0 items-baseline gap-1";
+const metaSeparatorClasses = "text-xs text-grey-500";
+const metaActionClasses = "min-w-0 break-words text-left text-xs font-medium text-action-primary-text underline rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+exports.ActivityItem = (0, react_1.forwardRef)(({ avatar, text, unread = false, date, time, link, badge, connector, children, className, ...rest }, ref) => {
+    const hasConnectorAbove = connector === "middle" || connector === "last";
+    const hasConnectorBelow = connector === "top" || connector === "middle";
+    return ((0, jsx_runtime_1.jsxs)("article", { ref: ref, className: (0, cn_1.cn)("flex gap-3 items-start", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col items-center shrink-0 gap-1 self-stretch", (connector === "last" || !connector) && "justify-start"), children: [hasConnectorAbove && (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-px bg-grey-100", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 size-8", children: avatar }), hasConnectorBelow && (0, jsx_runtime_1.jsx)("div", { className: "flex-1 w-px bg-grey-100", "aria-hidden": "true" })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("@container flex flex-1 flex-col gap-3 items-start min-w-0", !connector && "", connector === "top" && "pb-4", (connector === "middle" || connector === "last") && "py-4"), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: (0, jsx_runtime_1.jsx)("span", { className: "text-body-sm leading-5 text-grey-600 break-words", children: text }) }), unread && ((0, jsx_runtime_1.jsx)("span", { className: "mt-1.5 shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white", "aria-hidden": "true" })), unread && (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Unread" })] }), (date || time || link || badge) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex w-full flex-col gap-0.5 @min-[20rem]:flex-row @min-[20rem]:items-start @min-[20rem]:gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-1 gap-y-0.5", children: [date && (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-grey-500 whitespace-nowrap", children: date }), link && ((0, jsx_runtime_1.jsxs)("span", { className: metaSegmentClasses, children: [date && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: metaSeparatorClasses, children: "\u30FB" })), link.href ? ((0, jsx_runtime_1.jsx)("a", { href: link.href, onClick: link.onClick, className: metaActionClasses, children: link.label })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: link.onClick, className: metaActionClasses, children: link.label }))] })), badge && ((0, jsx_runtime_1.jsxs)("span", { className: metaSegmentClasses, children: [(date || link) && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: metaSeparatorClasses, children: "\u30FB" })), (0, jsx_runtime_1.jsx)("span", { className: "inline-flex min-w-0 items-center justify-center break-words rounded-full bg-action-primary px-2 text-xs font-medium text-white", children: badge })] }))] }), time && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 text-xs text-grey-500 whitespace-nowrap", children: time }))] }))] }), children] })] }));
+});
+exports.ActivityItem.displayName = "ActivityItem";

package/dist/components/ActivityFeed/ActivityItem.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+/**
+ * Meta row segments wrap as a group so a separator never starts a line on its own,
+ * and long labels break instead of overflowing into the timestamp.
+ */
+const metaSegmentClasses = "inline-flex max-w-full min-w-0 items-baseline gap-1";
+const metaSeparatorClasses = "text-xs text-grey-500";
+const metaActionClasses = "min-w-0 break-words text-left text-xs font-medium text-action-primary-text underline rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text";
+export const ActivityItem = forwardRef(({ avatar, text, unread = false, date, time, link, badge, connector, children, className, ...rest }, ref) => {
+    const hasConnectorAbove = connector === "middle" || connector === "last";
+    const hasConnectorBelow = connector === "top" || connector === "middle";
+    return (_jsxs("article", { ref: ref, className: cn("flex gap-3 items-start", className), ...rest, children: [_jsxs("div", { className: cn("flex flex-col items-center shrink-0 gap-1 self-stretch", (connector === "last" || !connector) && "justify-start"), children: [hasConnectorAbove && _jsx("div", { className: "h-2 w-px bg-grey-100", "aria-hidden": "true" }), _jsx("div", { className: "shrink-0 size-8", children: avatar }), hasConnectorBelow && _jsx("div", { className: "flex-1 w-px bg-grey-100", "aria-hidden": "true" })] }), _jsxs("div", { className: cn("@container flex flex-1 flex-col gap-3 items-start min-w-0", !connector && "", connector === "top" && "pb-4", (connector === "middle" || connector === "last") && "py-4"), children: [_jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsxs("div", { className: "flex items-start justify-between gap-2 w-full", children: [_jsx("div", { className: "flex flex-1 items-start gap-1 min-w-0", children: _jsx("span", { className: "text-body-sm leading-5 text-grey-600 break-words", children: text }) }), unread && (_jsx("span", { className: "mt-1.5 shrink-0 size-2 rounded-full bg-[#04802E] border-[1.5px] border-white", "aria-hidden": "true" })), unread && _jsx("span", { className: "sr-only", children: "Unread" })] }), (date || time || link || badge) && (_jsxs("div", { className: "flex w-full flex-col gap-0.5 @min-[20rem]:flex-row @min-[20rem]:items-start @min-[20rem]:gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-1 gap-y-0.5", children: [date && _jsx("span", { className: "text-xs text-grey-500 whitespace-nowrap", children: date }), link && (_jsxs("span", { className: metaSegmentClasses, children: [date && (_jsx("span", { "aria-hidden": "true", className: metaSeparatorClasses, children: "\u30FB" })), link.href ? (_jsx("a", { href: link.href, onClick: link.onClick, className: metaActionClasses, children: link.label })) : (_jsx("button", { type: "button", onClick: link.onClick, className: metaActionClasses, children: link.label }))] })), badge && (_jsxs("span", { className: metaSegmentClasses, children: [(date || link) && (_jsx("span", { "aria-hidden": "true", className: metaSeparatorClasses, children: "\u30FB" })), _jsx("span", { className: "inline-flex min-w-0 items-center justify-center break-words rounded-full bg-action-primary px-2 text-xs font-medium text-white", children: badge })] }))] }), time && (_jsx("span", { className: "shrink-0 text-xs text-grey-500 whitespace-nowrap", children: time }))] }))] }), children] })] }));
+});
+ActivityItem.displayName = "ActivityItem";

package/dist/components/ActivityFeed/index.cjs

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

package/dist/components/ActivityFeed/index.js

@@ -0,0 +1,2 @@
+export { ActivityItem } from "./ActivityItem.js";
+export { ActivityContent } from "./ActivityContent.js";

package/dist/components/Alert/Alert.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = Alert;
+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");
+const stateStyles = {
+    information: {
+        border: "bg-secondary-500",
+        iconBg: "bg-secondary-50",
+        iconBorder: "border-secondary-75",
+        ctaBg: "bg-action-info",
+        ctaText: "text-white",
+    },
+    success: {
+        border: "bg-success-600",
+        iconBg: "bg-success-50",
+        iconBorder: "border-success-75",
+        ctaBg: "bg-action-success",
+        ctaText: "text-white",
+    },
+    warning: {
+        border: "bg-warning-500",
+        iconBg: "bg-warning-50",
+        iconBorder: "border-warning-75",
+        ctaBg: "bg-warning-400",
+        ctaText: "text-black",
+    },
+    error: {
+        border: "bg-error-500",
+        iconBg: "bg-error-50",
+        iconBorder: "border-error-75",
+        ctaBg: "bg-action-danger",
+        ctaText: "text-white",
+    },
+};
+function Alert({ variant = "toast", state = "information", title, description, icon, showIcon = true, onClose, primaryAction, secondaryAction, className, ...rest }) {
+    const styles = stateStyles[state];
+    const isBanner = variant === "banner";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-start overflow-hidden rounded bg-surface", className), role: "alert", ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-1.5 self-stretch shrink-0", styles.border) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-1 items-start border-t border-r border-b border-grey-200 rounded-r", isBanner ? "gap-4 p-5" : "gap-3 px-4 py-3"), children: [showIcon && icon && ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("shrink-0 rounded-lg border flex items-center justify-center", styles.iconBg, styles.iconBorder, isBanner ? "size-8" : "size-6"), children: (0, jsx_runtime_1.jsx)("span", { className: isBanner ? "size-4" : "size-3", children: (0, resolveIcon_1.resolveIcon)(icon, "sm") }) })), isBanner ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col gap-4 justify-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [title && (0, jsx_runtime_1.jsx)("p", { className: "text-base font-semibold text-on-surface", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-on-surface-secondary", children: description })] }), (primaryAction || secondaryAction) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [primaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: primaryAction.onClick, className: (0, cn_1.cn)("inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold cursor-pointer", styles.ctaBg, styles.ctaText), children: primaryAction.label })), secondaryAction && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: secondaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-4 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50", children: secondaryAction.label }))] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col gap-0.5 self-stretch text-sm", children: [title && (0, jsx_runtime_1.jsx)("p", { className: "font-semibold text-on-surface", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "text-on-surface-secondary", children: description })] })), onClose && ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center self-stretch shrink-0", isBanner ? "gap-4" : "gap-3"), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-px self-stretch bg-grey-100" }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "shrink-0 inline-flex items-center justify-center text-on-surface-muted hover:text-on-surface-body cursor-pointer", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "multiply", size: "md" }) })] }))] })] }));
+}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Icon } from "../Icon/index.js";
+const stateStyles = {
+    information: {
+        border: "bg-secondary-500",
+        iconBg: "bg-secondary-50",
+        iconBorder: "border-secondary-75",
+        ctaBg: "bg-action-info",
+        ctaText: "text-white",
+    },
+    success: {
+        border: "bg-success-600",
+        iconBg: "bg-success-50",
+        iconBorder: "border-success-75",
+        ctaBg: "bg-action-success",
+        ctaText: "text-white",
+    },
+    warning: {
+        border: "bg-warning-500",
+        iconBg: "bg-warning-50",
+        iconBorder: "border-warning-75",
+        ctaBg: "bg-warning-400",
+        ctaText: "text-black",
+    },
+    error: {
+        border: "bg-error-500",
+        iconBg: "bg-error-50",
+        iconBorder: "border-error-75",
+        ctaBg: "bg-action-danger",
+        ctaText: "text-white",
+    },
+};
+export function Alert({ variant = "toast", state = "information", title, description, icon, showIcon = true, onClose, primaryAction, secondaryAction, className, ...rest }) {
+    const styles = stateStyles[state];
+    const isBanner = variant === "banner";
+    return (_jsxs("div", { className: cn("flex items-start overflow-hidden rounded bg-surface", className), role: "alert", ...rest, children: [_jsx("div", { className: cn("w-1.5 self-stretch shrink-0", styles.border) }), _jsxs("div", { className: cn("flex flex-1 items-start border-t border-r border-b border-grey-200 rounded-r", isBanner ? "gap-4 p-5" : "gap-3 px-4 py-3"), children: [showIcon && icon && (_jsx("div", { className: cn("shrink-0 rounded-lg border flex items-center justify-center", styles.iconBg, styles.iconBorder, isBanner ? "size-8" : "size-6"), children: _jsx("span", { className: isBanner ? "size-4" : "size-3", children: resolveIcon(icon, "sm") }) })), isBanner ? (_jsxs("div", { className: "flex flex-1 flex-col gap-4 justify-center", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [title && _jsx("p", { className: "text-base font-semibold text-on-surface", children: title }), description && _jsx("p", { className: "text-sm text-on-surface-secondary", children: description })] }), (primaryAction || secondaryAction) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [primaryAction && (_jsx("button", { type: "button", onClick: primaryAction.onClick, className: cn("inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-semibold cursor-pointer", styles.ctaBg, styles.ctaText), children: primaryAction.label })), secondaryAction && (_jsx("button", { type: "button", onClick: secondaryAction.onClick, className: "inline-flex items-center justify-center rounded-lg border border-control-border bg-surface px-4 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50", children: secondaryAction.label }))] }))] })) : (_jsxs("div", { className: "flex flex-1 flex-col gap-0.5 self-stretch text-sm", children: [title && _jsx("p", { className: "font-semibold text-on-surface", children: title }), description && _jsx("p", { className: "text-on-surface-secondary", children: description })] })), onClose && (_jsxs("div", { className: cn("flex items-center self-stretch shrink-0", isBanner ? "gap-4" : "gap-3"), children: [_jsx("div", { className: "w-px self-stretch bg-grey-100" }), _jsx("button", { type: "button", onClick: onClose, className: "shrink-0 inline-flex items-center justify-center text-on-surface-muted hover:text-on-surface-body cursor-pointer", "aria-label": "Close", children: _jsx(Icon, { name: "multiply", size: "md" }) })] }))] })] }));
+}

package/dist/components/Alert/index.cjs

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

package/dist/components/Alert/index.js

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