@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/Button/Button.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = 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 solidVariants = {
+    primary: "bg-action-primary text-white hover:bg-action-primary-hover",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50",
+    grey: "bg-action-grey text-white hover:bg-action-grey-hover",
+    destructive: "bg-action-danger text-white hover:bg-action-danger-hover",
+    text: "bg-transparent text-action-primary-text hover:underline underline-offset-4",
+    success: "bg-action-success text-white hover:bg-action-success-hover",
+    warning: "bg-action-warning text-white hover:bg-action-warning-hover",
+    info: "bg-action-info text-white hover:bg-action-info-hover",
+};
+const outlinedVariants = {
+    primary: solidVariants.secondary,
+    secondary: solidVariants.secondary,
+    grey: "bg-transparent text-grey-700 border-[1.5px] border-grey-500 hover:bg-grey-100",
+    destructive: "bg-transparent text-action-danger-text border-[1.5px] border-current hover:bg-error-50",
+    text: solidVariants.text,
+    success: solidVariants.success,
+    warning: solidVariants.warning,
+    info: solidVariants.info,
+};
+const sizeClasses = {
+    sm: {
+        base: "h-9 text-sm rounded-lg",
+        none: "px-4 py-2",
+        icon: "px-3 py-2",
+        "icon-only": "p-2",
+    },
+    lg: {
+        base: "h-14 text-base rounded-lg",
+        none: "px-6 py-4",
+        icon: "p-4",
+        "icon-only": "p-4",
+    },
+};
+exports.Button = (0, react_1.forwardRef)(({ variant = "primary", appearance = "solid", size = "sm", icon, iconPosition = "none", className, children, disabled, type = "button", as, asChild = false, href, onClick, ...rest }, ref) => {
+    const variantClasses = appearance === "outlined" ? outlinedVariants[variant] : solidVariants[variant];
+    const sizeConfig = sizeClasses[size];
+    const paddingKey = iconPosition === "icon-only" ? "icon-only" : iconPosition !== "none" ? "icon" : "none";
+    const iconSizeClass = size === "sm" ? "size-5" : "size-6";
+    const resolvedIcon = (0, resolveIcon_1.resolveIcon)(icon, size === "sm" ? "md" : "lg");
+    const rootClassName = (0, cn_1.cn)("inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text cursor-pointer", 
+    // `disabled:` only matches a form control. An anchor or a slotted child carries
+    // aria-disabled instead, so both spellings are present and the visual treatment
+    // is identical either way.
+    "disabled:cursor-not-allowed disabled:opacity-50", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50", sizeConfig.base, sizeConfig[paddingKey], variantClasses, className);
+    const decorate = (label) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconPosition === "leading" && resolvedIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", iconSizeClass), children: resolvedIcon })), iconPosition === "icon-only" && resolvedIcon ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", iconSizeClass), children: resolvedIcon })) : (iconPosition !== "icon-only" && label), iconPosition === "trailing" && resolvedIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", iconSizeClass), children: resolvedIcon }))] }));
+    /**
+     * A disabled anchor does not exist in HTML: `disabled` is a form-control
+     * attribute and an anchor keeps navigating with it. Rather than render a link
+     * that still works, Button drops `href` (so nothing can navigate, including
+     * middle-click and "open in new tab"), keeps the element discoverable and
+     * focusable with `role="link"` + `aria-disabled="true"` + `tabIndex={0}`, and
+     * swallows activation. This is the aria-disabled pattern: still perceivable,
+     * not actionable. The visual treatment matches a disabled `<button>`.
+     */
+    const swallow = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    if (asChild) {
+        const child = react_1.Children.only(children);
+        if (!(0, react_1.isValidElement)(child))
+            return null;
+        const childProps = child.props;
+        return (0, react_1.cloneElement)(child, {
+            ...rest,
+            ...(href !== undefined && !disabled ? { href } : {}),
+            ...(disabled ? { "aria-disabled": true, onClick: swallow, tabIndex: 0 } : { onClick }),
+            ref,
+            className: (0, cn_1.cn)(rootClassName, childProps.className),
+        }, decorate(childProps.children));
+    }
+    if (as === "a") {
+        const anchorState = (disabled
+            ? { role: "link", "aria-disabled": true, tabIndex: 0, onClick: swallow }
+            : { href, onClick });
+        return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...anchorState, className: rootClassName, ...rest, children: decorate(children) }));
+    }
+    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: type, disabled: disabled, onClick: onClick, className: rootClassName, ...rest, children: decorate(children) }));
+});
+exports.Button.displayName = "Button";

package/dist/components/Button/Button.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, Fragment as _Fragment, 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";
+const solidVariants = {
+    primary: "bg-action-primary text-white hover:bg-action-primary-hover",
+    secondary: "bg-transparent text-action-primary-text border-[1.5px] border-current hover:bg-primary-50",
+    grey: "bg-action-grey text-white hover:bg-action-grey-hover",
+    destructive: "bg-action-danger text-white hover:bg-action-danger-hover",
+    text: "bg-transparent text-action-primary-text hover:underline underline-offset-4",
+    success: "bg-action-success text-white hover:bg-action-success-hover",
+    warning: "bg-action-warning text-white hover:bg-action-warning-hover",
+    info: "bg-action-info text-white hover:bg-action-info-hover",
+};
+const outlinedVariants = {
+    primary: solidVariants.secondary,
+    secondary: solidVariants.secondary,
+    grey: "bg-transparent text-grey-700 border-[1.5px] border-grey-500 hover:bg-grey-100",
+    destructive: "bg-transparent text-action-danger-text border-[1.5px] border-current hover:bg-error-50",
+    text: solidVariants.text,
+    success: solidVariants.success,
+    warning: solidVariants.warning,
+    info: solidVariants.info,
+};
+const sizeClasses = {
+    sm: {
+        base: "h-9 text-sm rounded-lg",
+        none: "px-4 py-2",
+        icon: "px-3 py-2",
+        "icon-only": "p-2",
+    },
+    lg: {
+        base: "h-14 text-base rounded-lg",
+        none: "px-6 py-4",
+        icon: "p-4",
+        "icon-only": "p-4",
+    },
+};
+export const Button = forwardRef(({ variant = "primary", appearance = "solid", size = "sm", icon, iconPosition = "none", className, children, disabled, type = "button", as, asChild = false, href, onClick, ...rest }, ref) => {
+    const variantClasses = appearance === "outlined" ? outlinedVariants[variant] : solidVariants[variant];
+    const sizeConfig = sizeClasses[size];
+    const paddingKey = iconPosition === "icon-only" ? "icon-only" : iconPosition !== "none" ? "icon" : "none";
+    const iconSizeClass = size === "sm" ? "size-5" : "size-6";
+    const resolvedIcon = resolveIcon(icon, size === "sm" ? "md" : "lg");
+    const rootClassName = cn("inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text cursor-pointer", 
+    // `disabled:` only matches a form control. An anchor or a slotted child carries
+    // aria-disabled instead, so both spellings are present and the visual treatment
+    // is identical either way.
+    "disabled:cursor-not-allowed disabled:opacity-50", "aria-disabled:cursor-not-allowed aria-disabled:opacity-50", sizeConfig.base, sizeConfig[paddingKey], variantClasses, className);
+    const decorate = (label) => (_jsxs(_Fragment, { children: [iconPosition === "leading" && resolvedIcon && (_jsx("span", { className: cn("shrink-0", iconSizeClass), children: resolvedIcon })), iconPosition === "icon-only" && resolvedIcon ? (_jsx("span", { className: cn("shrink-0", iconSizeClass), children: resolvedIcon })) : (iconPosition !== "icon-only" && label), iconPosition === "trailing" && resolvedIcon && (_jsx("span", { className: cn("shrink-0", iconSizeClass), children: resolvedIcon }))] }));
+    /**
+     * A disabled anchor does not exist in HTML: `disabled` is a form-control
+     * attribute and an anchor keeps navigating with it. Rather than render a link
+     * that still works, Button drops `href` (so nothing can navigate, including
+     * middle-click and "open in new tab"), keeps the element discoverable and
+     * focusable with `role="link"` + `aria-disabled="true"` + `tabIndex={0}`, and
+     * swallows activation. This is the aria-disabled pattern: still perceivable,
+     * not actionable. The visual treatment matches a disabled `<button>`.
+     */
+    const swallow = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    if (asChild) {
+        const child = Children.only(children);
+        if (!isValidElement(child))
+            return null;
+        const childProps = child.props;
+        return cloneElement(child, {
+            ...rest,
+            ...(href !== undefined && !disabled ? { href } : {}),
+            ...(disabled ? { "aria-disabled": true, onClick: swallow, tabIndex: 0 } : { onClick }),
+            ref,
+            className: cn(rootClassName, childProps.className),
+        }, decorate(childProps.children));
+    }
+    if (as === "a") {
+        const anchorState = (disabled
+            ? { role: "link", "aria-disabled": true, tabIndex: 0, onClick: swallow }
+            : { href, onClick });
+        return (_jsx("a", { ref: ref, ...anchorState, className: rootClassName, ...rest, children: decorate(children) }));
+    }
+    return (_jsx("button", { ref: ref, type: type, disabled: disabled, onClick: onClick, className: rootClassName, ...rest, children: decorate(children) }));
+});
+Button.displayName = "Button";

package/dist/components/Button/index.cjs

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

package/dist/components/Button/index.js

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

package/dist/components/ButtonGroup/ButtonGroup.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = ButtonGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+function ButtonGroup({ children, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("inline-flex", className), role: "group", children: children }));
+}

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+export function ButtonGroup({ children, className }) {
+    return (_jsx("div", { className: cn("inline-flex", className), role: "group", children: children }));
+}

package/dist/components/ButtonGroup/ButtonGroupItem.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroupItem = 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");
+exports.ButtonGroupItem = (0, react_1.forwardRef)(({ leadingIcon, trailingIcon, active = false, disabled = false, className, children, type = "button", ...rest }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: type, disabled: disabled, "aria-pressed": active, className: (0, cn_1.cn)("inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors", "border-y border-r border-control-border", "first:rounded-l-lg first:border-l", "last:rounded-r-lg", active
+            ? "bg-action-primary text-white border-action-primary"
+            : disabled
+                ? "bg-surface text-grey-300 cursor-not-allowed"
+                : "bg-surface text-on-surface-secondary hover:bg-grey-100 cursor-pointer", className), ...rest, children: [leadingIcon && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: (0, resolveIcon_1.resolveIcon)(leadingIcon, "md") }), children, trailingIcon && (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: (0, resolveIcon_1.resolveIcon)(trailingIcon, "md") })] }));
+});
+exports.ButtonGroupItem.displayName = "ButtonGroupItem";

package/dist/components/ButtonGroup/ButtonGroupItem.js

@@ -0,0 +1,12 @@
+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";
+export const ButtonGroupItem = forwardRef(({ leadingIcon, trailingIcon, active = false, disabled = false, className, children, type = "button", ...rest }, ref) => {
+    return (_jsxs("button", { ref: ref, type: type, disabled: disabled, "aria-pressed": active, className: cn("inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors", "border-y border-r border-control-border", "first:rounded-l-lg first:border-l", "last:rounded-r-lg", active
+            ? "bg-action-primary text-white border-action-primary"
+            : disabled
+                ? "bg-surface text-grey-300 cursor-not-allowed"
+                : "bg-surface text-on-surface-secondary hover:bg-grey-100 cursor-pointer", className), ...rest, children: [leadingIcon && _jsx("span", { className: "shrink-0 size-5", children: resolveIcon(leadingIcon, "md") }), children, trailingIcon && _jsx("span", { className: "shrink-0 size-5", children: resolveIcon(trailingIcon, "md") })] }));
+});
+ButtonGroupItem.displayName = "ButtonGroupItem";

package/dist/components/ButtonGroup/index.cjs

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

package/dist/components/ButtonGroup/index.js

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

package/dist/components/Card/Card.cjs

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardImage = exports.CardFooter = exports.CardBody = exports.CardHeader = exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const CardContext = (0, react_1.createContext)(null);
+function useCardContext() {
+    const ctx = (0, react_1.useContext)(CardContext);
+    // Return defaults if used outside Card (allows standalone usage)
+    return ctx ?? { size: "md" };
+}
+/* ─── Style Lookups ────────────────────────────────────────────────────── */
+const variantStyles = {
+    default: "border border-grey-200 bg-surface",
+    outlined: "border-2 border-surface-border-strong bg-transparent",
+    elevated: "border border-grey-100 bg-surface shadow-soft-md",
+    ghost: "border-none bg-transparent",
+};
+const sizeStyles = {
+    sm: {
+        header: "px-4 py-3",
+        body: "px-4 py-3",
+        footer: "px-4 py-3",
+    },
+    md: {
+        header: "px-5 py-4",
+        body: "px-5 py-4",
+        footer: "px-5 py-4",
+    },
+    lg: {
+        header: "px-6 py-5",
+        body: "px-6 py-5",
+        footer: "px-6 py-5",
+    },
+};
+const roundedStyles = {
+    sm: "rounded-lg",
+    md: "rounded-[10px]",
+    lg: "rounded-xl",
+    xl: "rounded-2xl",
+    full: "rounded-3xl",
+};
+const shadowStyles = {
+    none: "",
+    sm: "shadow-soft-xxs",
+    md: "shadow-soft-xs",
+    lg: "shadow-soft-sm",
+};
+const footerAlignStyles = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+    between: "justify-between",
+};
+const aspectRatioStyles = {
+    auto: "",
+    video: "aspect-video",
+    square: "aspect-square",
+    portrait: "aspect-[3/4]",
+};
+/* ─── Card ─────────────────────────────────────────────────────────────── */
+exports.Card = (0, react_1.forwardRef)(({ variant = "default", size = "md", rounded = "lg", shadow = "sm", hoverable = false, className, children, ...rest }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(CardContext.Provider, { value: { size }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col overflow-hidden", variantStyles[variant], roundedStyles[rounded], variant !== "elevated" && shadowStyles[shadow], hoverable && "transition-shadow duration-200 hover:shadow-soft-md", className), ...rest, children: children }) }));
+});
+exports.Card.displayName = "Card";
+/* ─── CardHeader ───────────────────────────────────────────────────────── */
+exports.CardHeader = (0, react_1.forwardRef)(({ title, subtitle, actions, bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex items-start justify-between gap-4", sizeStyles[size].header, bordered && "border-b border-grey-200", className), ...rest, children: [(title || subtitle || children) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold leading-[1.45] text-on-surface", children: title })), subtitle && (0, jsx_runtime_1.jsx)("p", { className: "text-sm leading-[1.45] text-on-surface-muted", children: subtitle }), children] })), actions && (0, jsx_runtime_1.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+});
+exports.CardHeader.displayName = "CardHeader";
+/* ─── CardBody ─────────────────────────────────────────────────────────── */
+exports.CardBody = (0, react_1.forwardRef)(({ noPadding = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex-1", !noPadding && sizeStyles[size].body, className), ...rest, children: children }));
+});
+exports.CardBody.displayName = "CardBody";
+/* ─── CardFooter ───────────────────────────────────────────────────────── */
+exports.CardFooter = (0, react_1.forwardRef)(({ align = "right", bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex items-center gap-3", sizeStyles[size].footer, footerAlignStyles[align], bordered && "border-t border-grey-200", className), ...rest, children: children }));
+});
+exports.CardFooter.displayName = "CardFooter";
+/* ─── CardImage ────────────────────────────────────────────────────────── */
+exports.CardImage = (0, react_1.forwardRef)(({ position = "top", aspectRatio = "auto", objectFit = "cover", alt, className, ...rest }, ref) => {
+    const objectFitClasses = {
+        cover: "object-cover",
+        contain: "object-contain",
+        fill: "object-fill",
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-full overflow-hidden", position === "top" && "first:rounded-t-[inherit]", position === "bottom" && "last:rounded-b-[inherit]", position === "full" && "first:rounded-t-[inherit] last:rounded-b-[inherit]"), children: (0, jsx_runtime_1.jsx)("img", { ref: ref, alt: alt, className: (0, cn_1.cn)("w-full", aspectRatioStyles[aspectRatio], objectFitClasses[objectFit], className), ...rest }) }));
+});
+exports.CardImage.displayName = "CardImage";

package/dist/components/Card/Card.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, } from "react";
+import { cn } from "../../utils/cn.js";
+const CardContext = createContext(null);
+function useCardContext() {
+    const ctx = useContext(CardContext);
+    // Return defaults if used outside Card (allows standalone usage)
+    return ctx ?? { size: "md" };
+}
+/* ─── Style Lookups ────────────────────────────────────────────────────── */
+const variantStyles = {
+    default: "border border-grey-200 bg-surface",
+    outlined: "border-2 border-surface-border-strong bg-transparent",
+    elevated: "border border-grey-100 bg-surface shadow-soft-md",
+    ghost: "border-none bg-transparent",
+};
+const sizeStyles = {
+    sm: {
+        header: "px-4 py-3",
+        body: "px-4 py-3",
+        footer: "px-4 py-3",
+    },
+    md: {
+        header: "px-5 py-4",
+        body: "px-5 py-4",
+        footer: "px-5 py-4",
+    },
+    lg: {
+        header: "px-6 py-5",
+        body: "px-6 py-5",
+        footer: "px-6 py-5",
+    },
+};
+const roundedStyles = {
+    sm: "rounded-lg",
+    md: "rounded-[10px]",
+    lg: "rounded-xl",
+    xl: "rounded-2xl",
+    full: "rounded-3xl",
+};
+const shadowStyles = {
+    none: "",
+    sm: "shadow-soft-xxs",
+    md: "shadow-soft-xs",
+    lg: "shadow-soft-sm",
+};
+const footerAlignStyles = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+    between: "justify-between",
+};
+const aspectRatioStyles = {
+    auto: "",
+    video: "aspect-video",
+    square: "aspect-square",
+    portrait: "aspect-[3/4]",
+};
+/* ─── Card ─────────────────────────────────────────────────────────────── */
+export const Card = forwardRef(({ variant = "default", size = "md", rounded = "lg", shadow = "sm", hoverable = false, className, children, ...rest }, ref) => {
+    return (_jsx(CardContext.Provider, { value: { size }, children: _jsx("div", { ref: ref, className: cn("flex flex-col overflow-hidden", variantStyles[variant], roundedStyles[rounded], variant !== "elevated" && shadowStyles[shadow], hoverable && "transition-shadow duration-200 hover:shadow-soft-md", className), ...rest, children: children }) }));
+});
+Card.displayName = "Card";
+/* ─── CardHeader ───────────────────────────────────────────────────────── */
+export const CardHeader = forwardRef(({ title, subtitle, actions, bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return (_jsxs("div", { ref: ref, className: cn("flex items-start justify-between gap-4", sizeStyles[size].header, bordered && "border-b border-grey-200", className), ...rest, children: [(title || subtitle || children) && (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [title && (_jsx("h3", { className: "text-lg font-semibold leading-[1.45] text-on-surface", children: title })), subtitle && _jsx("p", { className: "text-sm leading-[1.45] text-on-surface-muted", children: subtitle }), children] })), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] }));
+});
+CardHeader.displayName = "CardHeader";
+/* ─── CardBody ─────────────────────────────────────────────────────────── */
+export const CardBody = forwardRef(({ noPadding = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return (_jsx("div", { ref: ref, className: cn("flex-1", !noPadding && sizeStyles[size].body, className), ...rest, children: children }));
+});
+CardBody.displayName = "CardBody";
+/* ─── CardFooter ───────────────────────────────────────────────────────── */
+export const CardFooter = forwardRef(({ align = "right", bordered = false, className, children, ...rest }, ref) => {
+    const { size } = useCardContext();
+    return (_jsx("div", { ref: ref, className: cn("flex items-center gap-3", sizeStyles[size].footer, footerAlignStyles[align], bordered && "border-t border-grey-200", className), ...rest, children: children }));
+});
+CardFooter.displayName = "CardFooter";
+/* ─── CardImage ────────────────────────────────────────────────────────── */
+export const CardImage = forwardRef(({ position = "top", aspectRatio = "auto", objectFit = "cover", alt, className, ...rest }, ref) => {
+    const objectFitClasses = {
+        cover: "object-cover",
+        contain: "object-contain",
+        fill: "object-fill",
+    };
+    return (_jsx("div", { className: cn("w-full overflow-hidden", position === "top" && "first:rounded-t-[inherit]", position === "bottom" && "last:rounded-b-[inherit]", position === "full" && "first:rounded-t-[inherit] last:rounded-b-[inherit]"), children: _jsx("img", { ref: ref, alt: alt, className: cn("w-full", aspectRatioStyles[aspectRatio], objectFitClasses[objectFit], className), ...rest }) }));
+});
+CardImage.displayName = "CardImage";

package/dist/components/Card/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardImage = exports.CardFooter = exports.CardBody = exports.CardHeader = exports.Card = void 0;
+var Card_1 = require("./Card.cjs");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return Card_1.CardHeader; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return Card_1.CardBody; } });
+Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return Card_1.CardFooter; } });
+Object.defineProperty(exports, "CardImage", { enumerable: true, get: function () { return Card_1.CardImage; } });

package/dist/components/Card/index.js

@@ -0,0 +1 @@
+export { Card, CardHeader, CardBody, CardFooter, CardImage } from "./Card.js";

package/dist/components/Chart/Chart.cjs

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGradientFill = exports.hexToRgba = exports.chartFont = exports.chartColors = exports.RaydenChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chart_js_1 = require("chart.js");
+const react_chartjs_2_1 = require("react-chartjs-2");
+const cn_1 = require("../../utils/cn.cjs");
+const theme_1 = require("./theme.cjs");
+// Register Chart.js components
+chart_js_1.Chart.register(chart_js_1.CategoryScale, chart_js_1.LinearScale, chart_js_1.PointElement, chart_js_1.LineElement, chart_js_1.BarElement, chart_js_1.ArcElement, chart_js_1.RadialLinearScale, chart_js_1.Filler, chart_js_1.Tooltip, chart_js_1.Legend);
+/* ─── Default Options ──────────────────────────────────────────────────── */
+function getDefaultOptions(type) {
+    const base = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: "bottom",
+                labels: {
+                    font: { ...theme_1.chartFont, size: 12 },
+                    color: theme_1.chartColors.grey[500],
+                    padding: 16,
+                    usePointStyle: true,
+                    pointStyle: "circle",
+                    boxWidth: 8,
+                    boxHeight: 8,
+                },
+            },
+            tooltip: {
+                backgroundColor: theme_1.chartColors.grey[900],
+                titleFont: { ...theme_1.chartFont, weight: "bold", size: 13 },
+                bodyFont: { ...theme_1.chartFont, size: 12 },
+                cornerRadius: 8,
+                padding: 12,
+                boxPadding: 6,
+                usePointStyle: true,
+            },
+        },
+    };
+    if (type === "line" || type === "bar" || type === "scatter" || type === "bubble") {
+        base.scales = {
+            x: {
+                grid: { color: theme_1.chartColors.grey[100], drawTicks: false },
+                ticks: { font: theme_1.chartFont, color: theme_1.chartColors.grey[400], padding: 8 },
+                border: { display: false },
+            },
+            y: {
+                grid: { color: theme_1.chartColors.grey[100], drawTicks: false },
+                ticks: { font: theme_1.chartFont, color: theme_1.chartColors.grey[400], padding: 8 },
+                border: { display: false },
+            },
+        };
+    }
+    if (type === "line") {
+        base.elements = {
+            line: { tension: 0.4, borderWidth: 2 },
+            point: { radius: 0, hoverRadius: 5, hitRadius: 20 },
+        };
+    }
+    if (type === "bar") {
+        base.elements = {
+            bar: { borderRadius: 4 },
+        };
+    }
+    if (type === "radar") {
+        base.scales = {
+            r: {
+                grid: { color: theme_1.chartColors.grey[200] },
+                angleLines: { color: theme_1.chartColors.grey[200] },
+                pointLabels: { font: { ...theme_1.chartFont, size: 11 }, color: theme_1.chartColors.grey[500] },
+                ticks: { display: false },
+            },
+        };
+    }
+    if (type === "polar-area") {
+        base.scales = {
+            r: {
+                grid: { color: theme_1.chartColors.grey[200] },
+                ticks: { display: false },
+            },
+        };
+    }
+    return base;
+}
+/* ─── Merge Options ────────────────────────────────────────────────────── */
+function deepMerge(target, source) {
+    const output = { ...target };
+    for (const key of Object.keys(source)) {
+        if (source[key] &&
+            typeof source[key] === "object" &&
+            !Array.isArray(source[key]) &&
+            target[key] &&
+            typeof target[key] === "object") {
+            output[key] = deepMerge(target[key], source[key]);
+        }
+        else {
+            output[key] = source[key];
+        }
+    }
+    return output;
+}
+/* ─── Chart Component ──────────────────────────────────────────────────── */
+/** Render one dataset value as text for the accessible table. */
+function formatCell(value) {
+    if (value == null)
+        return "—";
+    if (typeof value === "number" || typeof value === "string")
+        return String(value);
+    if (typeof value === "object") {
+        const point = value;
+        if ("y" in point) {
+            const xy = `${String(point.x ?? "")}, ${String(point.y ?? "")}`;
+            return "r" in point ? `${xy}, ${String(point.r)}` : xy;
+        }
+    }
+    return String(value);
+}
+const chartComponentMap = {
+    line: react_chartjs_2_1.Line,
+    bar: react_chartjs_2_1.Bar,
+    pie: react_chartjs_2_1.Pie,
+    doughnut: react_chartjs_2_1.Doughnut,
+    radar: react_chartjs_2_1.Radar,
+    scatter: react_chartjs_2_1.Scatter,
+    bubble: react_chartjs_2_1.Bubble,
+    "polar-area": react_chartjs_2_1.PolarArea,
+};
+exports.RaydenChart = (0, react_1.forwardRef)(({ type, data, options, height = 300, width, className, title, summary, dataTable = true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+    const mergedOptions = (0, react_1.useMemo)(() => deepMerge(getDefaultOptions(type), options ?? {}), [type, options]);
+    const ChartComponent = chartComponentMap[type];
+    const generatedId = (0, react_1.useId)();
+    const summaryId = summary ? `${generatedId}-summary` : undefined;
+    const tableId = `${generatedId}-table`;
+    // react-chartjs-2 hardcodes role="img" on the canvas. Without a name that is an
+    // unlabelled image; without a tabular equivalent the values are canvas-only.
+    const labels = (data?.labels ?? []);
+    const datasets = (data?.datasets ?? []);
+    // Scatter and bubble data carries no `labels` — its points are {x, y} / {x, y, r}
+    // objects. Keying the table off labels alone left those charts with no alternative
+    // at all, so fall back to one row per point index.
+    const rowCount = labels.length || Math.max(0, ...datasets.map((d) => d.data?.length ?? 0));
+    const pointBased = labels.length === 0;
+    const showTable = dataTable && rowCount > 0 && datasets.length > 0;
+    // Last-resort name so the canvas is never an unnamed role="img". Callers should
+    // pass a meaningful `title`; this only keeps the default case from being nameless.
+    const fallbackName = `${type.replace("-", " ")} chart`;
+    const resolvedName = title ?? ariaLabel ?? fallbackName;
+    const describedBy = [ariaDescribedBy, summaryId, showTable ? tableId : undefined].filter(Boolean).join(" ") ||
+        undefined;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("relative", className), style: { height, width }, ...rest, children: [(0, jsx_runtime_1.jsx)(ChartComponent, { data: data, options: mergedOptions, "aria-label": ariaLabelledBy ? undefined : resolvedName, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedBy, fallbackContent: (0, jsx_runtime_1.jsx)("p", { children: resolvedName }) }), summary && ((0, jsx_runtime_1.jsx)("p", { id: summaryId, className: "sr-only", children: summary })), showTable && ((0, jsx_runtime_1.jsxs)("table", { id: tableId, className: "sr-only", children: [(0, jsx_runtime_1.jsx)("caption", { children: `${resolvedName} — data table` }), (0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "col", children: pointBased ? "Point" : "Category" }), datasets.map((set, i) => ((0, jsx_runtime_1.jsx)("th", { scope: "col", children: set.label ?? `Series ${i + 1}` }, i)))] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: Array.from({ length: rowCount }, (_, row) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { scope: "row", children: pointBased ? row + 1 : String(labels[row]) }), datasets.map((set, i) => ((0, jsx_runtime_1.jsx)("td", { children: formatCell(set.data?.[row]) }, i)))] }, row))) })] }))] }));
+});
+exports.RaydenChart.displayName = "RaydenChart";
+/* ─── Re-export theme utilities ────────────────────────────────────────── */
+var theme_2 = require("./theme.cjs");
+Object.defineProperty(exports, "chartColors", { enumerable: true, get: function () { return theme_2.chartColors; } });
+Object.defineProperty(exports, "chartFont", { enumerable: true, get: function () { return theme_2.chartFont; } });
+Object.defineProperty(exports, "hexToRgba", { enumerable: true, get: function () { return theme_2.hexToRgba; } });
+Object.defineProperty(exports, "createGradientFill", { enumerable: true, get: function () { return theme_2.createGradientFill; } });