@raydenui/ui 0.9.7 → 0.10.1

package/dist/components/FileUpload/FileUploadItem.js

@@ -0,0 +1,31 @@
+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 { Icon } from "../Icon/index.js";
+import { ProgressCircle } from "../ProgressCircle/index.js";
+import { FileTypeIcon, getFileType } from "./FileUploadIcons.js";
+// ─── Helpers ─────────────────────────────────────────────────────
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    const value = bytes / Math.pow(k, i);
+    return `${value % 1 === 0 ? value : value.toFixed(1)} ${sizes[i]}`;
+}
+function formatDate(date) {
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+// ─── Component ───────────────────────────────────────────────────
+export const FileUploadItem = forwardRef(({ file, onRemove, onRetry, onDownload, className, ...rest }, ref) => {
+    const fileType = getFileType(file.name);
+    return (_jsxs("div", { ref: ref, className: cn("flex items-center gap-3 py-3 border-b border-grey-100 last:border-b-0", className), ...rest, children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-grey-200 bg-surface", children: _jsx(FileTypeIcon, { type: fileType }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "truncate text-body-sm font-semibold text-grey-800", children: file.name }), file.status === "error" ? (_jsx("span", { className: "text-body-xs font-medium text-feedback-error", children: file.error ?? "Failed to upload" })) : (_jsx("span", { className: "text-body-xs text-on-surface-secondary", children: file.status === "complete" && file.uploadedAt
+                            ? `${formatDate(file.uploadedAt)} \u2022 ${formatFileSize(file.size)}`
+                            : formatFileSize(file.size) }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [file.status === "pending" && (_jsx("button", { type: "button", className: "flex size-7 items-center justify-center rounded-md text-on-surface-muted hover:bg-grey-100 cursor-pointer", "aria-label": `Remove ${file.name}`, onClick: () => onRemove?.(file.id), children: _jsx(Icon, { name: "multiply", size: "md" }) })), file.status === "uploading" && (_jsxs(_Fragment, { children: [_jsx(ProgressCircle, { value: file.progress ?? 0, size: "xs", showText: true, label: `Uploading ${file.name}` }), _jsx("button", { type: "button", onClick: () => onRemove?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Cancel upload", children: _jsx(Icon, { name: "multiply", size: "sm" }) })] })), file.status === "complete" && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onRemove?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Delete file", children: _jsx(Icon, { name: "bin", size: "md" }) }), _jsx("button", { type: "button", onClick: () => onDownload?.(file.id), className: "flex size-7 items-center justify-center rounded-md text-on-surface-secondary hover:bg-grey-100 cursor-pointer", "aria-label": "Download file", children: _jsx(Icon, { name: "download", size: "md" }) })] })), file.status === "error" && (_jsx("button", { type: "button", onClick: () => onRetry?.(file.id), className: "text-body-xs font-semibold text-primary-500 cursor-pointer hover:text-primary-400", children: "Try again" }))] })] }));
+});
+FileUploadItem.displayName = "FileUploadItem";

package/dist/components/FileUpload/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileUploadItem = exports.FileUploadDropZone = exports.FileUpload = void 0;
+var FileUpload_1 = require("./FileUpload.cjs");
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return FileUpload_1.FileUpload; } });
+var FileUploadDropZone_1 = require("./FileUploadDropZone.cjs");
+Object.defineProperty(exports, "FileUploadDropZone", { enumerable: true, get: function () { return FileUploadDropZone_1.FileUploadDropZone; } });
+var FileUploadItem_1 = require("./FileUploadItem.cjs");
+Object.defineProperty(exports, "FileUploadItem", { enumerable: true, get: function () { return FileUploadItem_1.FileUploadItem; } });

package/dist/components/FileUpload/index.js

@@ -0,0 +1,3 @@
+export { FileUpload } from "./FileUpload.js";
+export { FileUploadDropZone } from "./FileUploadDropZone.js";
+export { FileUploadItem } from "./FileUploadItem.js";

package/dist/components/FormControl/Checkbox.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+exports.Checkbox = (0, react_1.forwardRef)(({ label, description, position = "left", indeterminate = false, className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = (0, react_1.useId)();
+    const inputRef = (0, react_1.useRef)(null);
+    // `indeterminate` has no HTML attribute; it must be set on the element.
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current)
+            inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const control = ((0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0 size-5", children: [(0, jsx_runtime_1.jsx)("input", { ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, type: "checkbox", "aria-checked": indeterminate ? "mixed" : undefined, "aria-describedby": description ? descriptionId : undefined, className: (0, cn_1.cn)("peer size-5 appearance-none rounded border-[1.5px] border-control-border bg-surface cursor-pointer", "checked:bg-primary-400 checked:border-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 14", fill: "none", className: "pointer-events-none absolute inset-0 m-auto size-3 hidden peer-checked:block text-white", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.5 3.5L5.5 10L2.5 7", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [label && (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium text-on-surface", children: label }), description && ((0, jsx_runtime_1.jsx)("span", { id: descriptionId, className: "text-sm text-on-surface-muted", children: description }))] }), position === "right" && control] }));
+});
+exports.Checkbox.displayName = "Checkbox";

package/dist/components/FormControl/Checkbox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+export const Checkbox = forwardRef(({ label, description, position = "left", indeterminate = false, className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = useId();
+    const inputRef = useRef(null);
+    // `indeterminate` has no HTML attribute; it must be set on the element.
+    useEffect(() => {
+        if (inputRef.current)
+            inputRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const control = (_jsxs("div", { className: "relative shrink-0 size-5", children: [_jsx("input", { ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function")
+                        ref(node);
+                    else if (ref)
+                        ref.current = node;
+                }, type: "checkbox", "aria-checked": indeterminate ? "mixed" : undefined, "aria-describedby": description ? descriptionId : undefined, className: cn("peer size-5 appearance-none rounded border-[1.5px] border-control-border bg-surface cursor-pointer", "checked:bg-primary-400 checked:border-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), _jsx("svg", { viewBox: "0 0 14 14", fill: "none", className: "pointer-events-none absolute inset-0 m-auto size-3 hidden peer-checked:block text-white", children: _jsx("path", { d: "M11.5 3.5L5.5 10L2.5 7", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return (_jsxs("label", { className: cn("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, _jsxs("div", { className: "flex flex-col", children: [label && _jsx("span", { className: "text-base font-medium text-on-surface", children: label }), description && (_jsx("span", { id: descriptionId, className: "text-sm text-on-surface-muted", children: description }))] }), position === "right" && control] }));
+});
+Checkbox.displayName = "Checkbox";

package/dist/components/FormControl/Radio.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+exports.Radio = (0, react_1.forwardRef)(({ label, description, position = "left", className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = (0, react_1.useId)();
+    const control = ((0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0 size-5", children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, type: "radio", "aria-describedby": description ? descriptionId : undefined, className: (0, cn_1.cn)("peer size-5 appearance-none rounded-full border-[1.5px] border-control-border bg-surface cursor-pointer", "checked:border-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 m-auto size-2.5 rounded-full bg-primary-400 hidden peer-checked:block" })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [label && (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium text-on-surface", children: label }), description && ((0, jsx_runtime_1.jsx)("span", { id: descriptionId, className: "text-sm text-on-surface-muted", children: description }))] }), position === "right" && control] }));
+});
+exports.Radio.displayName = "Radio";

package/dist/components/FormControl/Radio.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../utils/cn.js";
+export const Radio = forwardRef(({ label, description, position = "left", className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = useId();
+    const control = (_jsxs("div", { className: "relative shrink-0 size-5", children: [_jsx("input", { ref: ref, type: "radio", "aria-describedby": description ? descriptionId : undefined, className: cn("peer size-5 appearance-none rounded-full border-[1.5px] border-control-border bg-surface cursor-pointer", "checked:border-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), _jsx("div", { className: "pointer-events-none absolute inset-0 m-auto size-2.5 rounded-full bg-primary-400 hidden peer-checked:block" })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return (_jsxs("label", { className: cn("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, _jsxs("div", { className: "flex flex-col", children: [label && _jsx("span", { className: "text-base font-medium text-on-surface", children: label }), description && (_jsx("span", { id: descriptionId, className: "text-sm text-on-surface-muted", children: description }))] }), position === "right" && control] }));
+});
+Radio.displayName = "Radio";

package/dist/components/FormControl/Toggle.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+exports.Toggle = (0, react_1.forwardRef)(({ label, description, position = "left", className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = (0, react_1.useId)();
+    const control = ((0, jsx_runtime_1.jsxs)("div", { className: "relative shrink-0 w-9 h-5", children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, type: "checkbox", role: "switch", "aria-describedby": description ? descriptionId : undefined, className: (0, cn_1.cn)("peer size-full appearance-none rounded-full bg-grey-200 cursor-pointer transition-colors", "checked:bg-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("pointer-events-none absolute top-0.5 left-0.5 size-4 rounded-full bg-white dark:bg-grey-50 shadow-sm transition-transform", "peer-checked:translate-x-4") })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, cn_1.cn)("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [label && (0, jsx_runtime_1.jsx)("span", { className: "text-base font-medium text-grey-900", children: label }), description && ((0, jsx_runtime_1.jsx)("span", { id: descriptionId, className: "text-sm text-grey-500", children: description }))] }), position === "right" && control] }));
+});
+exports.Toggle.displayName = "Toggle";

package/dist/components/FormControl/Toggle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../utils/cn.js";
+export const Toggle = forwardRef(({ label, description, position = "left", className, wrapperClassName, ...rest }, ref) => {
+    const descriptionId = useId();
+    const control = (_jsxs("div", { className: "relative shrink-0 w-9 h-5", children: [_jsx("input", { ref: ref, type: "checkbox", role: "switch", "aria-describedby": description ? descriptionId : undefined, className: cn("peer size-full appearance-none rounded-full bg-grey-200 cursor-pointer transition-colors", "checked:bg-primary-400", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200", "disabled:cursor-not-allowed disabled:opacity-50", className), ...rest }), _jsx("div", { className: cn("pointer-events-none absolute top-0.5 left-0.5 size-4 rounded-full bg-white dark:bg-grey-50 shadow-sm transition-transform", "peer-checked:translate-x-4") })] }));
+    if (!label && !description) {
+        return control;
+    }
+    return (_jsxs("label", { className: cn("inline-flex items-center gap-3 cursor-pointer", wrapperClassName), children: [position === "left" && control, _jsxs("div", { className: "flex flex-col", children: [label && _jsx("span", { className: "text-base font-medium text-grey-900", children: label }), description && (_jsx("span", { id: descriptionId, className: "text-sm text-grey-500", children: description }))] }), position === "right" && control] }));
+});
+Toggle.displayName = "Toggle";

package/dist/components/FormControl/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = exports.Radio = exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox.cjs");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Radio_1 = require("./Radio.cjs");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+var Toggle_1 = require("./Toggle.cjs");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });

package/dist/components/FormControl/index.js

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox.js";
+export { Radio } from "./Radio.js";
+export { Toggle } from "./Toggle.js";

package/dist/components/Icon/Icon.cjs

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+exports.Icon = (0, react_1.forwardRef)(({ size = "md", color = "currentColor", variant = "outline", className, style, ...rest }, ref) => {
+    // Remove name/icon from rest props before spreading to SVG
+    const { name, icon, ...svgProps } = rest;
+    // Support both name-based (dynamic) and icon-based (tree-shakeable) usage
+    const [loaded, setLoaded] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!name || icon)
+            return;
+        let active = true;
+        // Name lookup is optional: the registry stays outside the initial component bundle.
+        void Promise.resolve().then(() => __importStar(require("./icons.cjs"))).then(({ icons }) => {
+            if (active && icons[name])
+                setLoaded({ name, record: icons[name] });
+        });
+        return () => {
+            active = false;
+        };
+    }, [name, icon]);
+    const iconRecord = icon ?? (loaded?.name === name ? loaded?.record : null);
+    const iconData = iconRecord?.[variant];
+    const px = typeof size === "number" ? size : sizeMap[size];
+    return ((0, jsx_runtime_1.jsx)("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: iconData?.viewBox ?? "0 0 24 24", width: px, height: px, fill: "none", className: (0, cn_1.cn)("shrink-0", className), style: { color, ...style }, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: iconData?.paths ?? "" }, ...svgProps }));
+});
+exports.Icon.displayName = "Icon";

package/dist/components/Icon/Icon.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { cn } from "../../utils/cn.js";
+const sizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+export const Icon = forwardRef(({ size = "md", color = "currentColor", variant = "outline", className, style, ...rest }, ref) => {
+    // Remove name/icon from rest props before spreading to SVG
+    const { name, icon, ...svgProps } = rest;
+    // Support both name-based (dynamic) and icon-based (tree-shakeable) usage
+    const [loaded, setLoaded] = useState(null);
+    useEffect(() => {
+        if (!name || icon)
+            return;
+        let active = true;
+        // Name lookup is optional: the registry stays outside the initial component bundle.
+        void import("./icons.js").then(({ icons }) => {
+            if (active && icons[name])
+                setLoaded({ name, record: icons[name] });
+        });
+        return () => {
+            active = false;
+        };
+    }, [name, icon]);
+    const iconRecord = icon ?? (loaded?.name === name ? loaded?.record : null);
+    const iconData = iconRecord?.[variant];
+    const px = typeof size === "number" ? size : sizeMap[size];
+    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: iconData?.viewBox ?? "0 0 24 24", width: px, height: px, fill: "none", className: cn("shrink-0", className), style: { color, ...style }, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: iconData?.paths ?? "" }, ...svgProps }));
+});
+Icon.displayName = "Icon";