@raydenui/ui 0.9.7 → 0.10.1

package/dist/components/Modal/Modal.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBodyScrollLock } from "../../hooks/useBodyScrollLock.js";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { Button } from "../Button/index.js";
+import { useMotionPresence } from "../../motion/presence.js";
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function CloseIcon({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M9 3L3 9M3 3l6 6" }) }));
+}
+function BoxIcon({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M2.67 4.67L8 7.33l5.33-2.66M8 14V7.33" }), _jsx("path", { d: "M13.33 10.67V5.33a1.33 1.33 0 00-.66-1.15L8.67 2a1.33 1.33 0 00-1.34 0L3.33 4.18A1.33 1.33 0 002.67 5.33v5.34a1.33 1.33 0 00.66 1.15L7.33 14a1.33 1.33 0 001.34 0l4-2.18a1.33 1.33 0 00.66-1.15z" })] }));
+}
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const sizeClasses = {
+    sm: "w-full max-w-[400px]",
+    md: "w-full max-w-[500px]",
+    lg: "w-full max-w-[640px]",
+};
+/* ─── Modal ────────────────────────────────────────────────────────────── */
+export const Modal = forwardRef(({ open, motion = false, onClose, size = "sm", title, description, icon, showClose = true, 
+// Defaulted only when there is something for it to do; an inert "Save"
+// used to render whenever the footer appeared.
+primaryLabel: primaryLabelProp, onPrimaryClick, secondaryLabel, onSecondaryClick, footerOrientation = "horizontal", closeOnOverlay = true, closeOnEscape = true, blur = true, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
+    const overlayRef = useRef(null);
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const titleId = useId();
+    const descriptionId = useId();
+    // The portal target only exists in a browser; defer it so an initially
+    // open modal can be server-rendered without touching document.
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    const { present, preset } = useMotionPresence(open, panelRef, motion, "overlay.pop", mounted);
+    // Native modal dialogs contain focus and make the background inert.
+    useBrowserLayoutEffect(() => {
+        const dialog = overlayRef.current;
+        if (!present || !dialog)
+            return;
+        const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        dialog.showModal();
+        return () => {
+            dialog.close();
+            if (trigger?.isConnected)
+                trigger.focus({ preventScroll: true });
+        };
+    }, [present, mounted]);
+    // ── #30: the portal escapes the provider, so its theme class is copied in.
+    // Copying once on open left an open dialog stuck in the old theme when the
+    // app switched; observe the source element and re-sync on every change.
+    useBrowserLayoutEffect(() => {
+        const dialog = overlayRef.current;
+        if (!present || !dialog)
+            return;
+        const source = anchorRef.current?.closest(".rayden-light, .dark");
+        if (!source)
+            return;
+        const sync = () => {
+            const isLight = source.classList.contains("rayden-light");
+            dialog.classList.toggle("rayden-light", isLight);
+            dialog.classList.toggle("dark", !isLight);
+        };
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(source, { attributes: true, attributeFilter: ["class"] });
+        // The theme may also move to a different ancestor, e.g. the documentElement.
+        if (source !== document.documentElement)
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ["class"],
+            });
+        return () => observer.disconnect();
+    }, [present, mounted]);
+    useBodyScrollLock(present && mounted);
+    const handleOverlayClick = useCallback((e) => {
+        if (open && closeOnOverlay && e.target === overlayRef.current)
+            onClose();
+    }, [open, closeOnOverlay, onClose]);
+    if (!present || !mounted)
+        return null;
+    const primaryLabel = primaryLabelProp ?? (onPrimaryClick ? "Save" : undefined);
+    const showPrimary = !!primaryLabel;
+    const showSecondary = !!secondaryLabel;
+    const isVertical = footerOrientation === "vertical";
+    const modal = (_jsx("dialog", { ref: overlayRef, "data-rayden-motion": motion ? preset : undefined, "data-state": open ? "open" : "closed", "aria-label": ariaLabel ?? (!title && !ariaLabelledBy ? "Dialog" : undefined), "aria-labelledby": ariaLabelledBy ?? (title ? titleId : undefined), "aria-describedby": ariaDescribedBy ?? (description ? descriptionId : undefined), className: cn("fixed inset-0 m-0 h-dvh w-screen max-h-none max-w-none border-0 bg-transparent p-4 open:flex items-center justify-center backdrop:bg-black/60", blur && "backdrop:backdrop-blur-md"), onCancel: (event) => {
+            event.preventDefault();
+            if (open && closeOnEscape)
+                onClose();
+        }, onKeyDown: (event) => {
+            if (event.key !== "Tab")
+                return;
+            const dialog = event.currentTarget;
+            const focusable = Array.from(dialog.querySelectorAll('a[href], button, input, select, textarea, [tabindex], [contenteditable="true"]')).filter((element) => element.tabIndex >= 0 &&
+                !element.matches(":disabled") &&
+                !element.closest("[inert]") &&
+                element.getClientRects().length > 0 &&
+                getComputedStyle(element).visibility !== "hidden");
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (!first || !last) {
+                event.preventDefault();
+                dialog.firstElementChild?.focus();
+            }
+            else if (!focusable.includes(document.activeElement) ||
+                (event.shiftKey ? document.activeElement === first : document.activeElement === last)) {
+                event.preventDefault();
+                (event.shiftKey ? last : first).focus();
+            }
+        }, onClick: handleOverlayClick, children: _jsxs("div", { ref: (element) => {
+                panelRef.current = element;
+                if (typeof ref === "function")
+                    ref(element);
+                else if (ref)
+                    ref.current = element;
+            }, tabIndex: -1, className: cn("relative flex max-h-[calc(100dvh-2rem)] flex-col bg-surface rounded-xl shadow-soft-xl overflow-hidden", sizeClasses[size], className), ...rest, children: [(title || showClose) && (_jsxs("div", { className: "flex items-start gap-2 pt-5 pb-2 px-4", children: [_jsxs("div", { className: "flex flex-1 gap-4 items-start min-w-0", children: [icon !== undefined ? (_jsx("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: _jsx("span", { className: "size-4", children: resolveIcon(icon, "sm") }) })) : title ? (_jsx("span", { className: "shrink-0 flex items-center justify-center p-2.5 bg-primary-50 rounded-[20px]", children: _jsx(BoxIcon, { className: "size-4 text-primary-400" }) })) : null, _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [title && (_jsx("h2", { id: titleId, className: "text-xl font-semibold text-on-surface-body leading-[1.2] tracking-[-0.4px]", children: title })), description && !!(title || showClose) && (_jsx("p", { id: descriptionId, className: "text-sm text-on-surface-muted leading-[1.45]", children: description }))] })] }), showClose && (_jsx("button", { type: "button", onClick: onClose, "aria-label": "Close modal", className: "shrink-0 flex items-center justify-center p-2 bg-grey-75 text-grey-700 rounded-xl hover:bg-grey-200 transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: _jsx(CloseIcon, { className: "size-3" }) }))] })), description && !title && !showClose && (_jsx("p", { id: descriptionId, className: "px-4 pt-5 text-sm text-on-surface-muted leading-[1.45]", children: description })), children && _jsx("div", { className: "min-h-0 flex-1 px-4 py-4 overflow-y-auto", children: children }), (showPrimary || showSecondary) && (_jsxs("div", { className: cn("py-5", isVertical
+                        ? "flex flex-col gap-5 items-center px-4"
+                        : "flex items-center justify-end gap-3 px-4"), children: [showSecondary && !isVertical && (_jsx(Button, { variant: "secondary", onClick: onSecondaryClick ?? onClose, type: "button", children: secondaryLabel })), showPrimary && (_jsx(Button, { type: "button", onClick: onPrimaryClick, className: isVertical ? "w-full" : undefined, children: primaryLabel })), showSecondary && isVertical && (_jsx(Button, { variant: "secondary", onClick: onSecondaryClick ?? onClose, type: "button", className: "w-full", children: secondaryLabel }))] }))] }) }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: anchorRef, hidden: true }), createPortal(modal, document.body)] }));
+});
+Modal.displayName = "Modal";

package/dist/components/Modal/index.cjs

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

package/dist/components/Modal/index.js

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

package/dist/components/Pagination/Pagination.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = Pagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+function range(start, end) {
+    const arr = [];
+    for (let i = start; i <= end; i++)
+        arr.push(i);
+    return arr;
+}
+function getPageNumbers(currentPage, totalPages, siblingCount) {
+    const totalNumbers = siblingCount * 2 + 5; // siblings + first + last + current + 2 dots
+    if (totalPages <= totalNumbers) {
+        return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftDots = leftSiblingIndex > 2;
+    const showRightDots = rightSiblingIndex < totalPages - 1;
+    if (!showLeftDots && showRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = range(1, leftItemCount);
+        return [...leftRange, "...", totalPages];
+    }
+    if (showLeftDots && !showRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = range(totalPages - rightItemCount + 1, totalPages);
+        return [1, "...", ...rightRange];
+    }
+    const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+    return [1, "...", ...middleRange, "...", totalPages];
+}
+const ChevronLeft = () => (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-left", size: "md" });
+const ChevronRight = () => (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-right", size: "md" });
+function Pagination({ currentPage, totalPages, onPageChange, showPrevNext = true, siblingCount = 1, className, ...rest }) {
+    const pages = getPageNumbers(currentPage, totalPages, siblingCount);
+    return ((0, jsx_runtime_1.jsx)("nav", { className: (0, cn_1.cn)("rayden-pagination min-w-0", className), "aria-label": "Pagination", ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-center gap-2", children: [showPrevNext && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onPageChange(currentPage - 1), disabled: currentPage <= 1, className: "inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-action-primary-text border border-control-border bg-surface px-3 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Previous page", children: [(0, jsx_runtime_1.jsx)(ChevronLeft, {}), (0, jsx_runtime_1.jsx)("span", { className: "rayden-pagination-word", children: "Previous" })] })), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("items-center justify-center gap-1 flex-wrap", showPrevNext ? "rayden-pagination-pages" : "flex"), children: pages.map((page, i) => page === "..." ? ((0, jsx_runtime_1.jsx)("span", { className: "flex items-center justify-center size-6 text-sm text-on-surface-muted", children: "..." }, `dots-${i}`)) : ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onPageChange(page), className: (0, cn_1.cn)("flex items-center justify-center min-w-9 h-11 px-2 rounded-md text-sm cursor-pointer", page === currentPage
+                            ? "border border-action-primary-text text-action-primary-text font-medium"
+                            : "text-on-surface-secondary hover:bg-grey-100"), "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))) }), showPrevNext && ((0, jsx_runtime_1.jsxs)("span", { className: "rayden-pagination-compact text-sm text-on-surface-body", "aria-live": "polite", children: ["Page ", currentPage, " of ", totalPages] })), showPrevNext && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-action-primary-text border border-control-border bg-surface px-3 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Next page", children: [(0, jsx_runtime_1.jsx)("span", { className: "rayden-pagination-word", children: "Next" }), (0, jsx_runtime_1.jsx)(ChevronRight, {})] }))] }) }));
+}

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { Icon } from "../Icon/index.js";
+function range(start, end) {
+    const arr = [];
+    for (let i = start; i <= end; i++)
+        arr.push(i);
+    return arr;
+}
+function getPageNumbers(currentPage, totalPages, siblingCount) {
+    const totalNumbers = siblingCount * 2 + 5; // siblings + first + last + current + 2 dots
+    if (totalPages <= totalNumbers) {
+        return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftDots = leftSiblingIndex > 2;
+    const showRightDots = rightSiblingIndex < totalPages - 1;
+    if (!showLeftDots && showRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = range(1, leftItemCount);
+        return [...leftRange, "...", totalPages];
+    }
+    if (showLeftDots && !showRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = range(totalPages - rightItemCount + 1, totalPages);
+        return [1, "...", ...rightRange];
+    }
+    const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+    return [1, "...", ...middleRange, "...", totalPages];
+}
+const ChevronLeft = () => _jsx(Icon, { name: "chevron-left", size: "md" });
+const ChevronRight = () => _jsx(Icon, { name: "chevron-right", size: "md" });
+export function Pagination({ currentPage, totalPages, onPageChange, showPrevNext = true, siblingCount = 1, className, ...rest }) {
+    const pages = getPageNumbers(currentPage, totalPages, siblingCount);
+    return (_jsx("nav", { className: cn("rayden-pagination min-w-0", className), "aria-label": "Pagination", ...rest, children: _jsxs("div", { className: "flex w-full items-center justify-center gap-2", children: [showPrevNext && (_jsxs("button", { type: "button", onClick: () => onPageChange(currentPage - 1), disabled: currentPage <= 1, className: "inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-action-primary-text border border-control-border bg-surface px-3 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Previous page", children: [_jsx(ChevronLeft, {}), _jsx("span", { className: "rayden-pagination-word", children: "Previous" })] })), _jsx("div", { className: cn("items-center justify-center gap-1 flex-wrap", showPrevNext ? "rayden-pagination-pages" : "flex"), children: pages.map((page, i) => page === "..." ? (_jsx("span", { className: "flex items-center justify-center size-6 text-sm text-on-surface-muted", children: "..." }, `dots-${i}`)) : (_jsx("button", { type: "button", onClick: () => onPageChange(page), className: cn("flex items-center justify-center min-w-9 h-11 px-2 rounded-md text-sm cursor-pointer", page === currentPage
+                            ? "border border-action-primary-text text-action-primary-text font-medium"
+                            : "text-on-surface-secondary hover:bg-grey-100"), "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))) }), showPrevNext && (_jsxs("span", { className: "rayden-pagination-compact text-sm text-on-surface-body", "aria-live": "polite", children: ["Page ", currentPage, " of ", totalPages] })), showPrevNext && (_jsxs("button", { type: "button", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "inline-flex min-h-11 shrink-0 items-center gap-2 rounded-lg focus-visible:outline-2 focus-visible:outline-action-primary-text border border-control-border bg-surface px-3 py-2 text-sm font-semibold text-on-surface-body cursor-pointer hover:bg-grey-50 disabled:opacity-50 disabled:cursor-not-allowed", "aria-label": "Next page", children: [_jsx("span", { className: "rayden-pagination-word", children: "Next" }), _jsx(ChevronRight, {})] }))] }) }));
+}

package/dist/components/Pagination/index.cjs

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

package/dist/components/Pagination/index.js

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

package/dist/components/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = ProgressBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const SEGMENT_COUNT = 10;
+const trackHeight = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3",
+};
+const clampValue = (value) => Math.min(100, Math.max(0, value));
+function ProgressBar({ value = 0, size = "lg", type = "basic", label, metadata, showPercentage = true, percentagePosition = "bottom", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }) {
+    const clamped = clampValue(value);
+    const generatedId = (0, react_1.useId)();
+    const labelId = label ? `${generatedId}-label` : undefined;
+    // Naming and value semantics belong on the same element as the progressbar
+    // role. Spreading them onto the wrapper left every bar unnamed, and the
+    // visible label had no id to point at.
+    const namedBy = ariaLabelledBy ?? labelId;
+    const progressAria = {
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-labelledby": namedBy,
+        "aria-label": namedBy ? undefined : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+    };
+    const filledSegments = Math.round((clamped / 100) * SEGMENT_COUNT);
+    const metadataItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-col gap-2 w-full", className), ...rest, children: [(label || (showPercentage && percentagePosition === "top")) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [label && ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "flex-1 text-sm font-medium text-grey-900 leading-[1.45]", children: label })), showPercentage && percentagePosition === "top" && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-grey-500 leading-[1.45]", children: [Math.round(clamped), "%"] }))] })), type === "basic" ? ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-full rounded-full bg-grey-200", trackHeight[size]), ...progressAria, children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("rounded-full bg-primary-400 transition-all duration-300", trackHeight[size]), style: { width: `${clamped}%` } }) })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex gap-0.5 w-full", trackHeight[size]), ...progressAria, children: Array.from({ length: SEGMENT_COUNT }, (_, i) => ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex-1 rounded-full transition-colors duration-300", i < filledSegments ? "bg-primary-400" : "bg-grey-100") }, i))) })), (metadataItems.length > 0 || (showPercentage && percentagePosition === "bottom")) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [metadataItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 items-center gap-1", children: metadataItems.map((item, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "contents", children: [i > 0 && (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-grey-500 leading-[1.45]", children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })] }, i))) })), showPercentage && percentagePosition === "bottom" && ((0, jsx_runtime_1.jsxs)("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(clamped), "%"] }))] }))] }));
+}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../utils/cn.js";
+const SEGMENT_COUNT = 10;
+const trackHeight = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3",
+};
+const clampValue = (value) => Math.min(100, Math.max(0, value));
+export function ProgressBar({ value = 0, size = "lg", type = "basic", label, metadata, showPercentage = true, percentagePosition = "bottom", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }) {
+    const clamped = clampValue(value);
+    const generatedId = useId();
+    const labelId = label ? `${generatedId}-label` : undefined;
+    // Naming and value semantics belong on the same element as the progressbar
+    // role. Spreading them onto the wrapper left every bar unnamed, and the
+    // visible label had no id to point at.
+    const namedBy = ariaLabelledBy ?? labelId;
+    const progressAria = {
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-labelledby": namedBy,
+        "aria-label": namedBy ? undefined : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+    };
+    const filledSegments = Math.round((clamped / 100) * SEGMENT_COUNT);
+    const metadataItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+    return (_jsxs("div", { className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [(label || (showPercentage && percentagePosition === "top")) && (_jsxs("div", { className: "flex items-center gap-2", children: [label && (_jsx("span", { id: labelId, className: "flex-1 text-sm font-medium text-grey-900 leading-[1.45]", children: label })), showPercentage && percentagePosition === "top" && (_jsxs("span", { className: "text-sm font-semibold text-grey-500 leading-[1.45]", children: [Math.round(clamped), "%"] }))] })), type === "basic" ? (_jsx("div", { className: cn("w-full rounded-full bg-grey-200", trackHeight[size]), ...progressAria, children: _jsx("div", { className: cn("rounded-full bg-primary-400 transition-all duration-300", trackHeight[size]), style: { width: `${clamped}%` } }) })) : (_jsx("div", { className: cn("flex gap-0.5 w-full", trackHeight[size]), ...progressAria, children: Array.from({ length: SEGMENT_COUNT }, (_, i) => (_jsx("div", { className: cn("flex-1 rounded-full transition-colors duration-300", i < filledSegments ? "bg-primary-400" : "bg-grey-100") }, i))) })), (metadataItems.length > 0 || (showPercentage && percentagePosition === "bottom")) && (_jsxs("div", { className: "flex items-center justify-between", children: [metadataItems.length > 0 && (_jsx("div", { className: "flex flex-1 items-center gap-1", children: metadataItems.map((item, i) => (_jsxs("span", { className: "contents", children: [i > 0 && _jsx("span", { className: "text-xs text-grey-500 leading-[1.45]", children: "\u2022" }), _jsx("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })] }, i))) })), showPercentage && percentagePosition === "bottom" && (_jsxs("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(clamped), "%"] }))] }))] }));
+}

package/dist/components/ProgressBar/index.cjs

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

package/dist/components/ProgressBar/index.js

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

package/dist/components/ProgressCircle/ProgressCircle.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCircle = ProgressCircle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../utils/cn.cjs");
+const sizeConfig = {
+    xs: { dimension: 48, strokeWidth: 4, fontSize: 12 },
+    sm: { dimension: 56, strokeWidth: 5, fontSize: 12 },
+    md: { dimension: 72, strokeWidth: 6, fontSize: 14 },
+    lg: { dimension: 90, strokeWidth: 7, fontSize: 16 },
+    xl: { dimension: 120, strokeWidth: 8, fontSize: 18 },
+};
+const SEGMENT_COUNT = 10;
+const SEGMENT_GAP_DEGREES = 6;
+const clampValue = (value) => Math.min(100, Math.max(0, value));
+function ProgressCircle({ value = 0, size = "md", variant = "default", showText = true, className, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }) {
+    const clamped = clampValue(value);
+    const config = sizeConfig[size];
+    const radius = (config.dimension - config.strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    if (variant === "segmented") {
+        const filledSegments = Math.round((clamped / 100) * SEGMENT_COUNT);
+        const totalGapDegrees = SEGMENT_COUNT * SEGMENT_GAP_DEGREES;
+        const segmentDegrees = (360 - totalGapDegrees) / SEGMENT_COUNT;
+        const segmentLength = (segmentDegrees / 360) * circumference;
+        const gapLength = (SEGMENT_GAP_DEGREES / 360) * circumference;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative inline-flex items-center justify-center", className), style: { width: config.dimension, height: config.dimension }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelledBy ? undefined : (label ?? ariaLabel ?? "Progress"), ...rest, children: [(0, jsx_runtime_1.jsx)("svg", { width: config.dimension, height: config.dimension, className: "-rotate-90", children: Array.from({ length: SEGMENT_COUNT }, (_, i) => {
+                        const segmentOffset = i * ((segmentLength + gapLength) / circumference) * circumference;
+                        return ((0, jsx_runtime_1.jsx)("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: i < filledSegments ? "#F56630" : "#F0F2F5", strokeWidth: config.strokeWidth, strokeLinecap: "round", strokeDasharray: `${segmentLength} ${circumference - segmentLength}`, strokeDashoffset: -segmentOffset, className: "transition-colors duration-300" }, i));
+                    }) }), showText && ((0, jsx_runtime_1.jsxs)("span", { className: "absolute font-semibold text-grey-900", style: { fontSize: config.fontSize }, children: [Math.round(clamped), "%"] }))] }));
+    }
+    const offset = circumference - (clamped / 100) * circumference;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("relative inline-flex items-center justify-center", className), style: { width: config.dimension, height: config.dimension }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelledBy ? undefined : (label ?? ariaLabel ?? "Progress"), ...rest, children: [(0, jsx_runtime_1.jsxs)("svg", { width: config.dimension, height: config.dimension, className: "-rotate-90", children: [(0, jsx_runtime_1.jsx)("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: "#F0F2F5", strokeWidth: config.strokeWidth }), (0, jsx_runtime_1.jsx)("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: "#F56630", strokeWidth: config.strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: offset, className: "transition-all duration-300" })] }), showText && ((0, jsx_runtime_1.jsxs)("span", { className: "absolute font-semibold text-grey-900", style: { fontSize: config.fontSize }, children: [Math.round(clamped), "%"] }))] }));
+}

package/dist/components/ProgressCircle/ProgressCircle.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const sizeConfig = {
+    xs: { dimension: 48, strokeWidth: 4, fontSize: 12 },
+    sm: { dimension: 56, strokeWidth: 5, fontSize: 12 },
+    md: { dimension: 72, strokeWidth: 6, fontSize: 14 },
+    lg: { dimension: 90, strokeWidth: 7, fontSize: 16 },
+    xl: { dimension: 120, strokeWidth: 8, fontSize: 18 },
+};
+const SEGMENT_COUNT = 10;
+const SEGMENT_GAP_DEGREES = 6;
+const clampValue = (value) => Math.min(100, Math.max(0, value));
+export function ProgressCircle({ value = 0, size = "md", variant = "default", showText = true, className, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }) {
+    const clamped = clampValue(value);
+    const config = sizeConfig[size];
+    const radius = (config.dimension - config.strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    if (variant === "segmented") {
+        const filledSegments = Math.round((clamped / 100) * SEGMENT_COUNT);
+        const totalGapDegrees = SEGMENT_COUNT * SEGMENT_GAP_DEGREES;
+        const segmentDegrees = (360 - totalGapDegrees) / SEGMENT_COUNT;
+        const segmentLength = (segmentDegrees / 360) * circumference;
+        const gapLength = (SEGMENT_GAP_DEGREES / 360) * circumference;
+        return (_jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), style: { width: config.dimension, height: config.dimension }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelledBy ? undefined : (label ?? ariaLabel ?? "Progress"), ...rest, children: [_jsx("svg", { width: config.dimension, height: config.dimension, className: "-rotate-90", children: Array.from({ length: SEGMENT_COUNT }, (_, i) => {
+                        const segmentOffset = i * ((segmentLength + gapLength) / circumference) * circumference;
+                        return (_jsx("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: i < filledSegments ? "#F56630" : "#F0F2F5", strokeWidth: config.strokeWidth, strokeLinecap: "round", strokeDasharray: `${segmentLength} ${circumference - segmentLength}`, strokeDashoffset: -segmentOffset, className: "transition-colors duration-300" }, i));
+                    }) }), showText && (_jsxs("span", { className: "absolute font-semibold text-grey-900", style: { fontSize: config.fontSize }, children: [Math.round(clamped), "%"] }))] }));
+    }
+    const offset = circumference - (clamped / 100) * circumference;
+    return (_jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), style: { width: config.dimension, height: config.dimension }, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabelledBy ? undefined : (label ?? ariaLabel ?? "Progress"), ...rest, children: [_jsxs("svg", { width: config.dimension, height: config.dimension, className: "-rotate-90", children: [_jsx("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: "#F0F2F5", strokeWidth: config.strokeWidth }), _jsx("circle", { cx: config.dimension / 2, cy: config.dimension / 2, r: radius, fill: "none", stroke: "#F56630", strokeWidth: config.strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: offset, className: "transition-all duration-300" })] }), showText && (_jsxs("span", { className: "absolute font-semibold text-grey-900", style: { fontSize: config.fontSize }, children: [Math.round(clamped), "%"] }))] }));
+}

package/dist/components/ProgressCircle/index.cjs

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

package/dist/components/ProgressCircle/index.js

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

package/dist/components/Select/Select.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+exports.useSelectContext = useSelectContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useControllableValue_1 = require("../../hooks/useControllableValue.cjs");
+const usePopupList_1 = require("../../hooks/usePopupList.cjs");
+const cn_1 = require("../../utils/cn.cjs");
+const useCollisionAwareSide_1 = require("../../hooks/useCollisionAwareSide.cjs");
+const resolveIcon_1 = require("../../utils/resolveIcon.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const SelectContext = (0, react_1.createContext)(null);
+function useSelectContext() {
+    const ctx = (0, react_1.useContext)(SelectContext);
+    if (!ctx)
+        throw new Error("SelectOption must be used within <Select>");
+    return ctx;
+}
+function findSelectedOption(children, value) {
+    let found = null;
+    react_1.Children.forEach(children, (child) => {
+        if (found)
+            return;
+        if ((0, react_1.isValidElement)(child) && child.props.value === value) {
+            found = {
+                label: child.props.children,
+                icon: child.props.icon,
+                avatar: child.props.avatar,
+                statusColor: child.props.statusColor,
+                description: child.props.description,
+            };
+        }
+        else if ((0, react_1.isValidElement)(child) && child.props.children) {
+            found = findSelectedOption(child.props.children, value);
+        }
+    });
+    return found;
+}
+exports.Select = (0, react_1.forwardRef)(({ value: controlledValue, defaultValue = "", onValueChange, placeholder = "Select an option", label, helperText, error, disabled = false, children, className, wrapperClassName, ...rest }, ref) => {
+    const [value, setValue] = (0, useControllableValue_1.useControllableValue)(controlledValue, defaultValue, onValueChange);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const hasError = error !== undefined && error !== false;
+    const bottomText = hasError ? (typeof error === "string" ? error : undefined) : helperText;
+    const listboxId = (0, react_1.useId)();
+    const labelId = (0, react_1.useId)();
+    const helperId = (0, react_1.useId)();
+    const containerRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    // The listbox always opened downward, so near the bottom edge it ran off-screen.
+    const listSide = (0, useCollisionAwareSide_1.useCollisionAwareSide)("bottom", open, triggerRef, listRef);
+    const { close, onTriggerKeyDown, onListKeyDown } = (0, usePopupList_1.usePopupList)({
+        open,
+        setOpen,
+        containerRef,
+        triggerRef,
+        listRef,
+        role: "option",
+        selected: true,
+    });
+    const onSelect = (0, react_1.useCallback)((val) => {
+        close(true);
+        setValue(val);
+    }, [close, setValue]);
+    // Find selected option info for trigger display
+    const selectedOption = value ? findSelectedOption(children, value) : null;
+    // Resolve leading element for trigger
+    const triggerLeading = selectedOption ? (selectedOption.avatar ? (selectedOption.avatar) : selectedOption.statusColor ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-2 rounded-full border-[1.5px] border-white", style: { backgroundColor: selectedOption.statusColor } })) : selectedOption.icon ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: (0, resolveIcon_1.resolveIcon)(selectedOption.icon, "md") })) : null) : null;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, ...rest, className: (0, cn_1.cn)("relative flex flex-col gap-2 w-full", wrapperClassName), children: [label && ((0, jsx_runtime_1.jsx)("label", { id: labelId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-describedby": bottomText ? helperId : undefined, "aria-invalid": hasError || undefined, disabled: disabled, onKeyDown: onTriggerKeyDown, onClick: () => !disabled && setOpen(!open), className: (0, cn_1.cn)("flex h-14 w-full items-center gap-3 rounded-md border px-4 transition-colors", disabled
+                    ? "bg-grey-100 border-control-border-disabled cursor-not-allowed"
+                    : hasError
+                        ? "bg-surface border-error-400"
+                        : open
+                            ? "bg-surface border-[#1671D9]"
+                            : "bg-surface border-control-border hover:border-[#B6D8FF]", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 items-center gap-2 min-w-0", children: [triggerLeading, (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("truncate text-body-sm", selectedOption ? "text-on-surface" : "text-on-surface-muted"), children: selectedOption ? selectedOption.label : placeholder })] }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "chevron-down", size: "md", "aria-hidden": "true", className: (0, cn_1.cn)("shrink-0 transition-transform", open && "rotate-180", disabled ? "text-grey-300" : "text-on-surface-muted") })] }), bottomText && ((0, jsx_runtime_1.jsx)("p", { id: helperId, className: (0, cn_1.cn)("text-sm leading-[1.45]", hasError ? "text-feedback-error" : "text-on-surface-muted"), children: bottomText })), open && ((0, jsx_runtime_1.jsx)(SelectContext.Provider, { value: { value, onSelect, open }, children: (0, jsx_runtime_1.jsx)("div", { ref: listRef, id: listboxId, role: "listbox", onKeyDown: onListKeyDown, className: (0, cn_1.cn)("absolute left-0 right-0 z-50 max-h-[320px] overflow-y-auto rounded-lg border border-grey-200 bg-surface py-1 shadow-[0px_3px_2px_-2px_rgba(0,0,0,0.06),0px_5px_3px_-2px_rgba(0,0,0,0.02)]", listSide === "top" ? "bottom-full mb-2" : "top-full mt-2"), children: children }) }))] }));
+});
+exports.Select.displayName = "Select";

package/dist/components/Select/Select.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useId, useRef, useState, forwardRef, Children, isValidElement, } 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";
+import { Icon } from "../Icon/index.js";
+const SelectContext = createContext(null);
+export function useSelectContext() {
+    const ctx = useContext(SelectContext);
+    if (!ctx)
+        throw new Error("SelectOption must be used within <Select>");
+    return ctx;
+}
+function findSelectedOption(children, value) {
+    let found = null;
+    Children.forEach(children, (child) => {
+        if (found)
+            return;
+        if (isValidElement(child) && child.props.value === value) {
+            found = {
+                label: child.props.children,
+                icon: child.props.icon,
+                avatar: child.props.avatar,
+                statusColor: child.props.statusColor,
+                description: child.props.description,
+            };
+        }
+        else if (isValidElement(child) && child.props.children) {
+            found = findSelectedOption(child.props.children, value);
+        }
+    });
+    return found;
+}
+export const Select = forwardRef(({ value: controlledValue, defaultValue = "", onValueChange, placeholder = "Select an option", label, helperText, error, disabled = false, children, className, wrapperClassName, ...rest }, ref) => {
+    const [value, setValue] = useControllableValue(controlledValue, defaultValue, onValueChange);
+    const [open, setOpen] = useState(false);
+    const hasError = error !== undefined && error !== false;
+    const bottomText = hasError ? (typeof error === "string" ? error : undefined) : helperText;
+    const listboxId = useId();
+    const labelId = useId();
+    const helperId = useId();
+    const containerRef = useRef(null);
+    const triggerRef = useRef(null);
+    const listRef = useRef(null);
+    // The listbox always opened downward, so near the bottom edge it ran off-screen.
+    const listSide = useCollisionAwareSide("bottom", open, triggerRef, listRef);
+    const { close, onTriggerKeyDown, onListKeyDown } = usePopupList({
+        open,
+        setOpen,
+        containerRef,
+        triggerRef,
+        listRef,
+        role: "option",
+        selected: true,
+    });
+    const onSelect = useCallback((val) => {
+        close(true);
+        setValue(val);
+    }, [close, setValue]);
+    // Find selected option info for trigger display
+    const selectedOption = value ? findSelectedOption(children, value) : null;
+    // Resolve leading element for trigger
+    const triggerLeading = selectedOption ? (selectedOption.avatar ? (selectedOption.avatar) : selectedOption.statusColor ? (_jsx("span", { className: "shrink-0 size-2 rounded-full border-[1.5px] border-white", style: { backgroundColor: selectedOption.statusColor } })) : selectedOption.icon ? (_jsx("span", { className: "shrink-0 size-5", children: resolveIcon(selectedOption.icon, "md") })) : null) : null;
+    return (_jsxs("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, ...rest, className: cn("relative flex flex-col gap-2 w-full", wrapperClassName), children: [label && (_jsx("label", { id: labelId, className: "text-sm font-medium text-on-surface leading-[1.45]", children: label })), _jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-describedby": bottomText ? helperId : undefined, "aria-invalid": hasError || undefined, disabled: disabled, onKeyDown: onTriggerKeyDown, onClick: () => !disabled && setOpen(!open), className: cn("flex h-14 w-full items-center gap-3 rounded-md border px-4 transition-colors", disabled
+                    ? "bg-grey-100 border-control-border-disabled cursor-not-allowed"
+                    : hasError
+                        ? "bg-surface border-error-400"
+                        : open
+                            ? "bg-surface border-[#1671D9]"
+                            : "bg-surface border-control-border hover:border-[#B6D8FF]", className), children: [_jsxs("div", { className: "flex flex-1 items-center gap-2 min-w-0", children: [triggerLeading, _jsx("span", { className: cn("truncate text-body-sm", selectedOption ? "text-on-surface" : "text-on-surface-muted"), children: selectedOption ? selectedOption.label : placeholder })] }), _jsx(Icon, { name: "chevron-down", size: "md", "aria-hidden": "true", className: cn("shrink-0 transition-transform", open && "rotate-180", disabled ? "text-grey-300" : "text-on-surface-muted") })] }), bottomText && (_jsx("p", { id: helperId, className: cn("text-sm leading-[1.45]", hasError ? "text-feedback-error" : "text-on-surface-muted"), children: bottomText })), open && (_jsx(SelectContext.Provider, { value: { value, onSelect, open }, children: _jsx("div", { ref: listRef, id: listboxId, role: "listbox", onKeyDown: onListKeyDown, className: cn("absolute left-0 right-0 z-50 max-h-[320px] overflow-y-auto rounded-lg border border-grey-200 bg-surface py-1 shadow-[0px_3px_2px_-2px_rgba(0,0,0,0.06),0px_5px_3px_-2px_rgba(0,0,0,0.02)]", listSide === "top" ? "bottom-full mb-2" : "top-full mt-2"), children: children }) }))] }));
+});
+Select.displayName = "Select";

package/dist/components/Select/SelectOption.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectOption = 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 Select_1 = require("./Select.cjs");
+exports.SelectOption = (0, react_1.forwardRef)(({ value, icon, avatar, statusColor, description, disabled = false, children, className, onClick, ...rest }, ref) => {
+    const ctx = (0, Select_1.useSelectContext)();
+    const isSelected = ctx.value === value;
+    const handleClick = (e) => {
+        if (disabled)
+            return;
+        onClick?.(e);
+        if (!e.defaultPrevented)
+            ctx.onSelect(value);
+    };
+    const resolvedIcon = (0, resolveIcon_1.resolveIcon)(icon, "md");
+    // Determine leading element
+    const leading = avatar ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-5", children: avatar })) : statusColor ? ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 size-2 rounded-full border-[1.5px] border-white", style: { backgroundColor: statusColor } })) : resolvedIcon ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0 size-5", disabled && "opacity-50"), children: resolvedIcon })) : null;
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", role: "option", tabIndex: -1, "aria-selected": isSelected, disabled: disabled, onClick: handleClick, className: (0, cn_1.cn)("flex w-full items-center px-4 py-2 text-left text-body-sm outline-none transition-colors", statusColor ? "gap-2" : "gap-3", disabled
+            ? "bg-grey-100 text-grey-500 cursor-not-allowed"
+            : "text-grey-900 hover:bg-grey-50 focus:bg-grey-100 focus:font-medium", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex flex-1 items-center", statusColor ? "gap-2" : "gap-3"), children: [leading, (0, jsx_runtime_1.jsx)("span", { className: "shrink-0", children: children }), description && (0, jsx_runtime_1.jsx)("span", { className: "text-grey-500 truncate", children: description })] }), isSelected && !disabled && ((0, jsx_runtime_1.jsx)("span", { className: "ml-2 shrink-0", children: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-[#1671D9]", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }), (0, jsx_runtime_1.jsx)("path", { d: "M11.5 5.5L6.5 10.5L4.5 8.5", stroke: "white", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })] }) }))] }));
+});
+exports.SelectOption.displayName = "SelectOption";