@raydenui/ui 0.9.7 → 0.10.0

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useRef, forwardRef, } from "react";
+import { useControllableValue } from "../../hooks/useControllableValue.js";
+import { usePopupList } from "../../hooks/usePopupList.js";
+import { cn } from "../../utils/cn.js";
+import { useCollisionAwareSide } from "../../hooks/useCollisionAwareSide.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+const DropdownMenuContext = createContext(null);
+function useDropdownMenuContext() {
+    const ctx = useContext(DropdownMenuContext);
+    if (!ctx)
+        throw new Error("DropdownMenu compound components must be used within <DropdownMenu>");
+    return ctx;
+}
+export const DropdownMenu = forwardRef(({ open: controlledOpen, defaultOpen = false, onOpenChange, children, className, ...rest }, ref) => {
+    const [open, setOpen] = useControllableValue(controlledOpen, defaultOpen, onOpenChange);
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    const { close, onTriggerKeyDown, onListKeyDown } = usePopupList({
+        open,
+        setOpen,
+        containerRef,
+        triggerRef,
+        listRef: contentRef,
+        role: "menuitem",
+    });
+    return (_jsx(DropdownMenuContext.Provider, { value: {
+            open,
+            setOpen,
+            triggerRef,
+            contentRef,
+            close,
+            onTriggerKeyDown,
+            onListKeyDown,
+        }, children: _jsx("div", { ref: (node) => {
+                containerRef.current = node;
+                if (typeof ref === "function")
+                    ref(node);
+                else if (ref)
+                    ref.current = node;
+            }, ...rest, className: cn("relative inline-flex", className), children: children }) }));
+});
+DropdownMenu.displayName = "DropdownMenu";
+export const DropdownMenuTrigger = forwardRef(({ onClick, onKeyDown, children, className, ...rest }, ref) => {
+    const { open, setOpen, triggerRef, onTriggerKeyDown } = useDropdownMenuContext();
+    return (_jsx("button", { ref: (node) => {
+            triggerRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, type: "button", "aria-expanded": open, "aria-haspopup": "menu", onKeyDown: (event) => {
+            onKeyDown?.(event);
+            onTriggerKeyDown(event);
+        }, onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, className: className, ...rest, children: children }));
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+export const DropdownMenuContent = forwardRef(({ align = "end", sideOffset = 4, children, className, onKeyDown, ...rest }, ref) => {
+    const { open, triggerRef, contentRef, onListKeyDown } = useDropdownMenuContext();
+    // The menu always opened downward, so near the bottom edge it ran off-screen.
+    const menuSide = useCollisionAwareSide("bottom", open, triggerRef, contentRef);
+    if (!open)
+        return null;
+    return (_jsx("div", { ref: (node) => {
+            contentRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, role: "menu", "aria-orientation": "vertical", onKeyDown: (event) => {
+            onKeyDown?.(event);
+            onListKeyDown(event);
+        }, className: cn("absolute z-50 min-w-[200px] overflow-hidden rounded-lg bg-surface py-1", "shadow-lg ring-1 ring-black/5", "animate-in fade-in-0 zoom-in-95", menuSide === "top" ? "bottom-full" : "top-full", align === "end" ? "right-0" : "left-0", className), style: menuSide === "top" ? { marginBottom: sideOffset } : { marginTop: sideOffset }, ...rest, children: children }));
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+export const DropdownMenuGroup = forwardRef(({ className, ...rest }, ref) => (_jsx("div", { ref: ref, role: "group", className: cn("py-1", className), ...rest })));
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+export const DropdownMenuLabel = forwardRef(({ description, children, className, ...rest }, ref) => (_jsxs("div", { ref: ref, className: cn("px-4 py-2", className), ...rest, children: [_jsx("p", { className: "text-body-sm font-semibold text-on-surface", children: children }), description && _jsx("p", { className: "text-body-sm text-on-surface-muted", children: description })] })));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+export const DropdownMenuItem = forwardRef(({ icon, shortcut, selected = false, disabled = false, destructive = false, onSelect, onClick, children, className, ...rest }, ref) => {
+    const { close } = useDropdownMenuContext();
+    const handleClick = (e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+        if (e.defaultPrevented)
+            return;
+        close(true);
+        onSelect?.();
+    };
+    const resolvedIcon = resolveIcon(icon, "md");
+    return (_jsxs("button", { ref: ref, type: "button", role: "menuitem", tabIndex: -1, disabled: disabled, onClick: handleClick, className: cn("flex w-full items-center gap-1 px-4 py-2 text-left text-body-sm outline-none transition-colors", disabled
+            ? "bg-grey-100 text-grey-500 cursor-not-allowed"
+            : destructive
+                ? "text-error-500 hover:bg-error-50 focus:bg-error-100"
+                : "text-on-surface hover:bg-grey-50 focus:bg-grey-100", className), ...rest, children: [_jsxs("div", { className: "flex flex-1 items-center gap-3", children: [resolvedIcon && (_jsx("span", { className: cn("shrink-0 size-5", disabled && "opacity-50"), children: resolvedIcon })), _jsx("span", { className: "flex-1", children: children })] }), shortcut && (_jsx("kbd", { className: "ml-2 shrink-0 rounded bg-grey-50 border border-grey-100 px-1 text-body-sm text-grey-600", children: shortcut })), selected && (_jsx("span", { className: "ml-2 shrink-0", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-[#1671D9]", children: [_jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }), _jsx("path", { d: "M11.5 5.5L6.5 10.5L4.5 8.5", stroke: "white", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] }));
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+export const DropdownMenuSeparator = forwardRef(({ className, ...rest }, ref) => (_jsx("div", { ref: ref, role: "separator", className: cn("my-1 h-px bg-grey-100", className), ...rest })));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";

package/dist/components/DropdownMenu/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenuSeparator = exports.DropdownMenuItem = exports.DropdownMenuLabel = exports.DropdownMenuGroup = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+var DropdownMenu_1 = require("./DropdownMenu.cjs");
+Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenu; } });
+Object.defineProperty(exports, "DropdownMenuTrigger", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuTrigger; } });
+Object.defineProperty(exports, "DropdownMenuContent", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuContent; } });
+Object.defineProperty(exports, "DropdownMenuGroup", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuGroup; } });
+Object.defineProperty(exports, "DropdownMenuLabel", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuLabel; } });
+Object.defineProperty(exports, "DropdownMenuItem", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuItem; } });
+Object.defineProperty(exports, "DropdownMenuSeparator", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenuSeparator; } });

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, } from "./DropdownMenu.js";

package/dist/components/EmptyStateIllustration/EmptyStateIllustration.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyStateIllustration = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const illustrations_1 = require("./illustrations.cjs");
+// ─── Default primary palette used in colored SVGs ──────────────────
+const DEFAULT_PALETTE = [
+    "#FFECE5", // primary-50
+    "#FCD2C2", // primary-75
+    "#FCB59A", // primary-100
+    "#FA9874", // primary-150
+    "#F77A4A", // primary-200
+    "#F56630", // primary-400
+    "#EB5017", // primary-500
+    "#CC400C", // primary-600
+    "#AD3307", // primary-700
+    "#8F2802", // primary-800
+    "#711E00", // primary-900
+];
+// ─── Component ─────────────────────────────────────────────────────
+exports.EmptyStateIllustration = (0, react_1.forwardRef)(({ name, colored = true, palette, size = 150, className, ...rest }, ref) => {
+    const rawSvg = colored ? illustrations_1.coloredIllustrations[name] : illustrations_1.greyIllustrations[name];
+    // Apply custom palette via string replacement
+    const svgContent = (0, react_1.useMemo)(() => {
+        if (!colored || !palette || palette.length === 0)
+            return rawSvg;
+        let result = rawSvg;
+        const len = Math.min(palette.length, DEFAULT_PALETTE.length);
+        for (let i = 0; i < len; i++) {
+            const from = DEFAULT_PALETTE[i];
+            const to = palette[i];
+            if (from !== to) {
+                result = result.split(from).join(to.toUpperCase());
+            }
+        }
+        return result;
+    }, [rawSvg, colored, palette]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("inline-flex shrink-0 items-center justify-center", className), ...rest, children: (0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 150 150", fill: "none", xmlns: "http://www.w3.org/2000/svg", dangerouslySetInnerHTML: { __html: svgContent } }) }));
+});
+exports.EmptyStateIllustration.displayName = "EmptyStateIllustration";

package/dist/components/EmptyStateIllustration/EmptyStateIllustration.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { cn } from "../../utils/cn.js";
+import { coloredIllustrations, greyIllustrations } from "./illustrations.js";
+// ─── Default primary palette used in colored SVGs ──────────────────
+const DEFAULT_PALETTE = [
+    "#FFECE5", // primary-50
+    "#FCD2C2", // primary-75
+    "#FCB59A", // primary-100
+    "#FA9874", // primary-150
+    "#F77A4A", // primary-200
+    "#F56630", // primary-400
+    "#EB5017", // primary-500
+    "#CC400C", // primary-600
+    "#AD3307", // primary-700
+    "#8F2802", // primary-800
+    "#711E00", // primary-900
+];
+// ─── Component ─────────────────────────────────────────────────────
+export const EmptyStateIllustration = forwardRef(({ name, colored = true, palette, size = 150, className, ...rest }, ref) => {
+    const rawSvg = colored ? coloredIllustrations[name] : greyIllustrations[name];
+    // Apply custom palette via string replacement
+    const svgContent = useMemo(() => {
+        if (!colored || !palette || palette.length === 0)
+            return rawSvg;
+        let result = rawSvg;
+        const len = Math.min(palette.length, DEFAULT_PALETTE.length);
+        for (let i = 0; i < len; i++) {
+            const from = DEFAULT_PALETTE[i];
+            const to = palette[i];
+            if (from !== to) {
+                result = result.split(from).join(to.toUpperCase());
+            }
+        }
+        return result;
+    }, [rawSvg, colored, palette]);
+    return (_jsx("div", { ref: ref, className: cn("inline-flex shrink-0 items-center justify-center", className), ...rest, children: _jsx("svg", { width: size, height: size, viewBox: "0 0 150 150", fill: "none", xmlns: "http://www.w3.org/2000/svg", dangerouslySetInnerHTML: { __html: svgContent } }) }));
+});
+EmptyStateIllustration.displayName = "EmptyStateIllustration";