@raydenui/ui 0.9.6 → 0.10.0

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function CheckIcon({ className }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M5 12l5 5L20 7" }) }));
+}
+/* ─── Step Indicator Circle ────────────────────────────────────────────── */
+const statusText = {
+    completed: "Completed",
+    active: "Current step",
+    incomplete: "Not started",
+    disabled: "Unavailable",
+};
+function StepCircle({ status, indicator, stepNumber, icon, }) {
+    const isCompleted = status === "completed";
+    const isActive = status === "active";
+    const isDisabled = status === "disabled";
+    return (_jsxs("div", { className: cn("shrink-0 flex items-center justify-center rounded-full size-6 border transition-colors", isCompleted && "bg-action-primary border-action-primary text-white", isActive && "bg-primary-50 border-primary-400 text-action-primary-text", !isCompleted && !isActive && !isDisabled && "bg-surface border-grey-300", isDisabled && "bg-grey-100 border-grey-200 text-grey-300"), children: [_jsx("span", { className: "sr-only", children: statusText[status] }), isCompleted ? ((icon ?? _jsx(CheckIcon, { className: "size-3.5" }))) : indicator === "dot" ? (_jsx("div", { className: cn("size-2 rounded-full border", isActive
+                    ? "bg-primary-400 border-primary-400"
+                    : isDisabled
+                        ? "bg-grey-300 border-grey-300"
+                        : "bg-grey-400 border-grey-300") })) : indicator === "number" ? (_jsx("span", { className: cn("text-xs font-medium", isActive ? "text-primary-400" : isDisabled ? "text-grey-300" : "text-on-surface-muted"), children: stepNumber })) : ((icon ?? (_jsx("div", { className: cn("size-2 rounded-full", isActive ? "bg-primary-400" : isDisabled ? "bg-grey-300" : "bg-grey-400") }))))] }));
+}
+/* ─── Connector Line ───────────────────────────────────────────────────── */
+function Connector({ orientation, completed, }) {
+    return orientation === "horizontal" ? (_jsx("div", { className: cn("flex-1 h-0.5 rounded-full", completed ? "bg-primary-400" : "bg-grey-300") })) : (_jsx("div", { className: cn("w-0.5 flex-1 min-h-[20px] ml-[11px] rounded-full", completed ? "bg-primary-400" : "bg-grey-300") }));
+}
+/* ─── Stepper ──────────────────────────────────────────────────────────── */
+function resolveStatuses(steps, activeStep) {
+    if (activeStep !== undefined) {
+        return steps.map((s, i) => {
+            if (s.status === "disabled")
+                return "disabled";
+            if (i < activeStep)
+                return "completed";
+            if (i === activeStep)
+                return "active";
+            return "incomplete";
+        });
+    }
+    return steps.map((s) => s.status ?? "incomplete");
+}
+export const Stepper = forwardRef(({ steps, activeStep, orientation = "horizontal", indicator = "dot", className, ...rest }, ref) => {
+    const statuses = resolveStatuses(steps, activeStep);
+    if (orientation === "vertical") {
+        return (_jsx("div", { ref: ref, className: cn("flex flex-col", className), ...rest, children: steps.map((step, i) => {
+                const status = statuses[i];
+                const isLast = i === steps.length - 1;
+                return (_jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx(StepCircle, { status: status, indicator: indicator, stepNumber: i + 1, icon: step.icon }), !isLast && (_jsx(Connector, { orientation: "vertical", completed: status === "completed" }))] }), _jsxs("div", { className: "flex flex-col pb-6", children: [_jsx("span", { className: cn("text-sm font-medium leading-[1.45]", status === "active"
+                                        ? "text-on-surface"
+                                        : status === "disabled"
+                                            ? "text-grey-300"
+                                            : "text-on-surface-secondary"), children: step.title }), step.description && (_jsx("span", { className: "text-xs text-on-surface-muted leading-[1.45]", children: step.description }))] })] }, i));
+            }) }));
+    }
+    // Horizontal
+    return (_jsx("div", { ref: ref, className: cn("flex items-start w-full", className), ...rest, children: steps.map((step, i) => {
+            const status = statuses[i];
+            const isLast = i === steps.length - 1;
+            return (_jsxs("div", { className: "flex flex-col flex-1 items-center gap-2.5", children: [_jsxs("div", { className: "flex items-center gap-1 w-full", children: [_jsx(Connector, { orientation: "horizontal", completed: i > 0 && statuses[i - 1] === "completed" }), _jsx(StepCircle, { status: status, indicator: indicator, stepNumber: i + 1, icon: step.icon }), _jsx(Connector, { orientation: "horizontal", completed: !isLast && status === "completed" })] }), _jsxs("div", { className: "flex flex-col gap-0.5 text-center w-full", children: [_jsx("span", { className: cn("text-xs font-medium leading-[1.45] tracking-tight", status === "active"
+                                    ? "text-on-surface-body"
+                                    : status === "disabled"
+                                        ? "text-grey-300"
+                                        : "text-on-surface-secondary"), children: step.title }), step.description && (_jsx("span", { className: "text-xs text-on-surface-muted leading-[1.45] truncate", children: step.description }))] })] }, i));
+        }) }));
+});
+Stepper.displayName = "Stepper";
+/* ─── LinearStepper ────────────────────────────────────────────────────── */
+export const LinearStepper = forwardRef(({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    const pct = Math.min(100, Math.max(0, (currentStep / totalSteps) * 100));
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [showLabel && (_jsxs("p", { className: "text-sm font-semibold leading-[1.45]", children: [_jsx("span", { className: "text-on-surface", children: currentStep }), _jsxs("span", { className: "text-on-surface-muted", children: [" / ", totalSteps, " complete"] })] })), _jsx("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", role: "progressbar", "aria-valuenow": currentStep, "aria-valuemin": 0, "aria-valuemax": totalSteps, "aria-valuetext": `Step ${currentStep} of ${totalSteps}`, "aria-label": "Progress", children: _jsx("div", { className: "h-2 bg-primary-400 rounded-[10px] transition-all duration-300", style: { width: `${pct}%` } }) })] }));
+});
+LinearStepper.displayName = "LinearStepper";
+/* ─── SegmentedStepper ─────────────────────────────────────────────────── */
+export const SegmentedStepper = forwardRef(({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-2 w-full", className), ...rest, children: [showLabel && (_jsxs("p", { className: "text-sm font-semibold leading-[1.45]", children: [_jsx("span", { className: "text-on-surface", children: currentStep }), _jsxs("span", { className: "text-on-surface-muted", children: [" / ", totalSteps, " complete"] })] })), _jsx("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", role: "progressbar", "aria-valuenow": currentStep, "aria-valuemin": 0, "aria-valuemax": totalSteps, "aria-valuetext": `Step ${currentStep} of ${totalSteps}`, "aria-label": "Progress", children: _jsx("div", { className: "flex gap-1 h-2 w-full", children: Array.from({ length: totalSteps }, (_, i) => (_jsx("div", { className: cn("flex-1 rounded-[14px] border border-grey-50 transition-colors", i < currentStep ? "bg-primary-400" : "bg-grey-50") }, i))) }) })] }));
+});
+SegmentedStepper.displayName = "SegmentedStepper";

package/dist/components/Stepper/index.cjs

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

package/dist/components/Stepper/index.js

@@ -0,0 +1 @@
+export { Stepper, LinearStepper, SegmentedStepper } from "./Stepper.js";

package/dist/components/Table/Table.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = exports.TableHead = exports.TableRow = exports.TableBody = exports.TableHeader = exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+exports.Table = (0, react_1.forwardRef)(({ className, ...rest }, ref) => ((0, jsx_runtime_1.jsx)("div", { role: "region", "aria-label": rest["aria-label"] ?? "Data table", tabIndex: 0, 
+    // `relative` is load-bearing, not decoration. It makes this scroller the containing
+    // block for absolutely positioned descendants — above all the `sr-only` headings that
+    // label icon-only columns. Without it those resolve against the initial containing
+    // block, so their overflow widens the *document* instead of this element's own scroll
+    // area, and a correctly bounded table still drags the whole page sideways at 320px.
+    className: "relative w-full min-w-0 max-w-full overflow-x-auto rounded focus-visible:outline-2 focus-visible:outline-action-primary-text", children: (0, jsx_runtime_1.jsx)("table", { ref: ref, className: (0, cn_1.cn)("w-full border-collapse", className), ...rest }) })));
+exports.Table.displayName = "Table";
+exports.TableHeader = (0, react_1.forwardRef)(({ className, ...rest }, ref) => (0, jsx_runtime_1.jsx)("thead", { ref: ref, className: (0, cn_1.cn)("", className), ...rest }));
+exports.TableHeader.displayName = "TableHeader";
+exports.TableBody = (0, react_1.forwardRef)(({ className, ...rest }, ref) => (0, jsx_runtime_1.jsx)("tbody", { ref: ref, className: (0, cn_1.cn)("", className), ...rest }));
+exports.TableBody.displayName = "TableBody";
+exports.TableRow = (0, react_1.forwardRef)(({ selected = false, className, ...rest }, ref) => ((0, jsx_runtime_1.jsx)("tr", { ref: ref, "aria-selected": selected || undefined, className: (0, cn_1.cn)("transition-colors", selected ? "bg-primary-50" : "bg-surface", className), ...rest })));
+exports.TableRow.displayName = "TableRow";
+exports.TableHead = (0, react_1.forwardRef)(({ sortable = false, sortDirection, onSort, children, className, ...rest }, ref) => ((0, jsx_runtime_1.jsx)("th", { ref: ref, scope: "col", "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : undefined, className: (0, cn_1.cn)("h-11 px-6 py-3 text-left text-body-xs font-medium text-on-surface-body border-b border-grey-200", "bg-surface hover:bg-grey-50 transition-colors", sortable && "cursor-pointer select-none", className), ...rest, children: sortable ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onSort, className: "flex w-full items-center gap-1 rounded text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [children, sortable && ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: "sm", "aria-hidden": "true", className: (0, cn_1.cn)("shrink-0", sortDirection ? "text-on-surface-body" : "text-on-surface-muted") }))] })) : (children) })));
+exports.TableHead.displayName = "TableHead";
+exports.TableCell = (0, react_1.forwardRef)(({ className, ...rest }, ref) => ((0, jsx_runtime_1.jsx)("td", { ref: ref, className: (0, cn_1.cn)("h-[72px] px-6 py-4 border-b border-grey-200 text-body-sm text-on-surface", className), ...rest })));
+exports.TableCell.displayName = "TableCell";

package/dist/components/Table/Table.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, } from "react";
+import { cn } from "../../utils/cn.js";
+import { Icon } from "../Icon/index.js";
+export const Table = forwardRef(({ className, ...rest }, ref) => (_jsx("div", { role: "region", "aria-label": rest["aria-label"] ?? "Data table", tabIndex: 0, 
+    // `relative` is load-bearing, not decoration. It makes this scroller the containing
+    // block for absolutely positioned descendants — above all the `sr-only` headings that
+    // label icon-only columns. Without it those resolve against the initial containing
+    // block, so their overflow widens the *document* instead of this element's own scroll
+    // area, and a correctly bounded table still drags the whole page sideways at 320px.
+    className: "relative w-full min-w-0 max-w-full overflow-x-auto rounded focus-visible:outline-2 focus-visible:outline-action-primary-text", children: _jsx("table", { ref: ref, className: cn("w-full border-collapse", className), ...rest }) })));
+Table.displayName = "Table";
+export const TableHeader = forwardRef(({ className, ...rest }, ref) => _jsx("thead", { ref: ref, className: cn("", className), ...rest }));
+TableHeader.displayName = "TableHeader";
+export const TableBody = forwardRef(({ className, ...rest }, ref) => _jsx("tbody", { ref: ref, className: cn("", className), ...rest }));
+TableBody.displayName = "TableBody";
+export const TableRow = forwardRef(({ selected = false, className, ...rest }, ref) => (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cn("transition-colors", selected ? "bg-primary-50" : "bg-surface", className), ...rest })));
+TableRow.displayName = "TableRow";
+export const TableHead = forwardRef(({ sortable = false, sortDirection, onSort, children, className, ...rest }, ref) => (_jsx("th", { ref: ref, scope: "col", "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : undefined, className: cn("h-11 px-6 py-3 text-left text-body-xs font-medium text-on-surface-body border-b border-grey-200", "bg-surface hover:bg-grey-50 transition-colors", sortable && "cursor-pointer select-none", className), ...rest, children: sortable ? (_jsxs("button", { type: "button", onClick: onSort, className: "flex w-full items-center gap-1 rounded text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", children: [children, sortable && (_jsx(Icon, { name: sortDirection === "asc" ? "chevron-up" : "chevron-down", size: "sm", "aria-hidden": "true", className: cn("shrink-0", sortDirection ? "text-on-surface-body" : "text-on-surface-muted") }))] })) : (children) })));
+TableHead.displayName = "TableHead";
+export const TableCell = forwardRef(({ className, ...rest }, ref) => (_jsx("td", { ref: ref, className: cn("h-[72px] px-6 py-4 border-b border-grey-200 text-body-sm text-on-surface", className), ...rest })));
+TableCell.displayName = "TableCell";

package/dist/components/Table/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = exports.TableHead = exports.TableRow = exports.TableBody = exports.TableHeader = exports.Table = void 0;
+var Table_1 = require("./Table.cjs");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+Object.defineProperty(exports, "TableHeader", { enumerable: true, get: function () { return Table_1.TableHeader; } });
+Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return Table_1.TableBody; } });
+Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return Table_1.TableRow; } });
+Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return Table_1.TableHead; } });
+Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return Table_1.TableCell; } });

package/dist/components/Table/index.js

@@ -0,0 +1 @@
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "./Table.js";

package/dist/components/Table/useTableSelection.cjs

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableSelection = useTableSelection;
+const react_1 = require("react");
+const EMPTY = [];
+const KEY_SEPARATOR = "\u0000";
+function useTableSelection({ dataIds, scopeIds = dataIds, selectedIds, onSelectionChange, }) {
+    const isControlled = selectedIds !== undefined;
+    const dataKey = dataIds.join(KEY_SEPARATOR);
+    const [state, setState] = (0, react_1.useState)(() => ({
+        key: dataKey,
+        ids: EMPTY,
+    }));
+    // Ids dropped by reconciliation are announced from an effect: the prune itself happens
+    // during render, where calling a consumer's handler would be a side effect.
+    const pendingEmit = (0, react_1.useRef)(null);
+    const notify = (0, react_1.useRef)(onSelectionChange);
+    notify.current = onSelectionChange;
+    let stored = state.ids;
+    if (!isControlled && state.key !== dataKey) {
+        // Adjust state during render rather than in an effect, so this render already shows
+        // the reconciled selection: React re-runs the component before committing.
+        const present = new Set(dataIds);
+        const pruned = stored.filter((id) => present.has(id));
+        if (pruned.length !== stored.length) {
+            stored = pruned;
+            pendingEmit.current = pruned;
+        }
+        setState({ key: dataKey, ids: stored });
+    }
+    (0, react_1.useEffect)(() => {
+        const dropped = pendingEmit.current;
+        if (!dropped)
+            return;
+        pendingEmit.current = null;
+        notify.current?.(dropped);
+    });
+    const current = isControlled ? selectedIds : stored;
+    const currentSet = new Set(current);
+    const scopeSet = new Set(scopeIds);
+    const allSelected = scopeIds.length > 0 && scopeIds.every((id) => currentSet.has(id));
+    const someSelected = !allSelected && scopeIds.some((id) => currentSet.has(id));
+    const commit = (next) => {
+        // This change is already being announced, so the reconciliation effect must not
+        // announce it a second time.
+        pendingEmit.current = null;
+        if (!isControlled)
+            setState({ key: dataKey, ids: next });
+        onSelectionChange?.(next);
+    };
+    return {
+        allSelected,
+        someSelected,
+        isSelected: (id) => currentSet.has(id),
+        toggleRow: (id) => commit(currentSet.has(id) ? current.filter((x) => x !== id) : [...current, id]),
+        toggleAll: () => commit(allSelected
+            ? current.filter((id) => !scopeSet.has(id))
+            : [...current, ...scopeIds.filter((id) => !currentSet.has(id))]),
+    };
+}

package/dist/components/Table/useTableSelection.js

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+const EMPTY = [];
+const KEY_SEPARATOR = "\u0000";
+export function useTableSelection({ dataIds, scopeIds = dataIds, selectedIds, onSelectionChange, }) {
+    const isControlled = selectedIds !== undefined;
+    const dataKey = dataIds.join(KEY_SEPARATOR);
+    const [state, setState] = useState(() => ({
+        key: dataKey,
+        ids: EMPTY,
+    }));
+    // Ids dropped by reconciliation are announced from an effect: the prune itself happens
+    // during render, where calling a consumer's handler would be a side effect.
+    const pendingEmit = useRef(null);
+    const notify = useRef(onSelectionChange);
+    notify.current = onSelectionChange;
+    let stored = state.ids;
+    if (!isControlled && state.key !== dataKey) {
+        // Adjust state during render rather than in an effect, so this render already shows
+        // the reconciled selection: React re-runs the component before committing.
+        const present = new Set(dataIds);
+        const pruned = stored.filter((id) => present.has(id));
+        if (pruned.length !== stored.length) {
+            stored = pruned;
+            pendingEmit.current = pruned;
+        }
+        setState({ key: dataKey, ids: stored });
+    }
+    useEffect(() => {
+        const dropped = pendingEmit.current;
+        if (!dropped)
+            return;
+        pendingEmit.current = null;
+        notify.current?.(dropped);
+    });
+    const current = isControlled ? selectedIds : stored;
+    const currentSet = new Set(current);
+    const scopeSet = new Set(scopeIds);
+    const allSelected = scopeIds.length > 0 && scopeIds.every((id) => currentSet.has(id));
+    const someSelected = !allSelected && scopeIds.some((id) => currentSet.has(id));
+    const commit = (next) => {
+        // This change is already being announced, so the reconciliation effect must not
+        // announce it a second time.
+        pendingEmit.current = null;
+        if (!isControlled)
+            setState({ key: dataKey, ids: next });
+        onSelectionChange?.(next);
+    };
+    return {
+        allSelected,
+        someSelected,
+        isSelected: (id) => currentSet.has(id),
+        toggleRow: (id) => commit(currentSet.has(id) ? current.filter((x) => x !== id) : [...current, id]),
+        toggleAll: () => commit(allSelected
+            ? current.filter((id) => !scopeSet.has(id))
+            : [...current, ...scopeIds.filter((id) => !currentSet.has(id))]),
+    };
+}

package/dist/components/Tabs/Tab.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = Tab;
+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 Tabs_1 = require("./Tabs.cjs");
+/* ─── Size mappings ────────────────────────────────────────────────────── */
+const textSize = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+const iconSize = { sm: "size-4", md: "size-5", lg: "size-6" };
+const iconResolveSize = { sm: "sm", md: "md", lg: "md" };
+const badgeText = { sm: "text-xs", md: "text-xs", lg: "text-sm" };
+const linePadding = {
+    sm: "px-2 pt-1 pb-1.5",
+    md: "px-3 pt-1.5 pb-2",
+    lg: "px-4 pt-2 pb-2.5",
+};
+const pillPadding = {
+    sm: "px-2 py-1",
+    md: "px-3 py-1.5",
+    lg: "px-4 py-2",
+};
+const segmentedPadding = {
+    sm: "px-2 py-1",
+    md: "px-3 py-1.5",
+    lg: "px-4 py-2",
+};
+function Tab({ value, icon, badge, disabled = false, children, className }) {
+    const { activeValue, onSelect, variant, size, orientation, registerTab, motion } = (0, Tabs_1.useTabsContext)();
+    const isActive = activeValue === value;
+    const buttonRef = (0, react_1.useRef)(null);
+    const isVertical = orientation === "vertical";
+    (0, react_1.useEffect)(() => {
+        registerTab(value, buttonRef.current);
+        return () => registerTab(value, null);
+    }, [value, registerTab]);
+    const resolvedIcon = icon ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("shrink-0", iconSize[size]), children: (0, resolveIcon_1.resolveIcon)(icon, iconResolveSize[size]) })) : null;
+    const badgeEl = badge !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("inline-flex items-center justify-center px-1.5 rounded-full font-medium tracking-tight", badgeText[size], variant === "segmented" && isActive
+            ? "bg-action-primary text-white"
+            : isActive
+                ? motion
+                    ? "text-action-primary-text"
+                    : "bg-primary-50 text-action-primary-text"
+                : disabled
+                    ? "bg-grey-200 text-grey-500"
+                    : "bg-grey-100 text-grey-600"), children: badge })) : null;
+    /* ── Segmented ── */
+    if (variant === "segmented") {
+        return ((0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: (0, cn_1.cn)("inline-flex items-center gap-1.5 rounded-md overflow-hidden transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", motion && "relative z-[1]", segmentedPadding[size], textSize[size], isActive
+                ? motion
+                    ? "text-grey-900"
+                    : "bg-primary-50 text-grey-900"
+                : disabled
+                    ? "text-grey-300 cursor-not-allowed"
+                    : "text-grey-500 hover:bg-grey-50", className), children: [resolvedIcon, (0, jsx_runtime_1.jsx)("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children: children }), badgeEl] }));
+    }
+    /* ── Pill ── */
+    if (variant === "pill") {
+        return ((0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: (0, cn_1.cn)("inline-flex items-center gap-1.5 rounded-full transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", motion && "relative z-[1]", pillPadding[size], textSize[size], isActive
+                ? motion
+                    ? "text-action-primary-text"
+                    : "bg-primary-50 text-action-primary-text"
+                : disabled
+                    ? "text-grey-300 cursor-not-allowed"
+                    : "text-grey-500 hover:bg-grey-50", className), children: [resolvedIcon, (0, jsx_runtime_1.jsx)("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children: children }), badgeEl] }));
+    }
+    /* ── Line (default) ── */
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: (0, cn_1.cn)("relative inline-flex cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", isVertical ? "flex-row" : "flex-col items-center", disabled && "cursor-not-allowed", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("flex items-center gap-1.5", linePadding[size]), children: [resolvedIcon, (0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("font-normal leading-[1.45] whitespace-nowrap transition-colors", textSize[size], isActive ? "text-grey-900" : disabled ? "text-grey-300" : "text-grey-500"), children: children }), badgeEl] }), isVertical ? ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-0.5 self-stretch transition-colors", isActive ? (motion ? "bg-transparent" : "bg-primary-400") : "bg-grey-100") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("h-0.5 w-full transition-colors", isActive ? (motion ? "bg-transparent" : "bg-primary-400") : "bg-grey-100") }))] }));
+}

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { resolveIcon } from "../../utils/resolveIcon.js";
+import { useTabsContext } from "./Tabs.js";
+/* ─── Size mappings ────────────────────────────────────────────────────── */
+const textSize = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+const iconSize = { sm: "size-4", md: "size-5", lg: "size-6" };
+const iconResolveSize = { sm: "sm", md: "md", lg: "md" };
+const badgeText = { sm: "text-xs", md: "text-xs", lg: "text-sm" };
+const linePadding = {
+    sm: "px-2 pt-1 pb-1.5",
+    md: "px-3 pt-1.5 pb-2",
+    lg: "px-4 pt-2 pb-2.5",
+};
+const pillPadding = {
+    sm: "px-2 py-1",
+    md: "px-3 py-1.5",
+    lg: "px-4 py-2",
+};
+const segmentedPadding = {
+    sm: "px-2 py-1",
+    md: "px-3 py-1.5",
+    lg: "px-4 py-2",
+};
+export function Tab({ value, icon, badge, disabled = false, children, className }) {
+    const { activeValue, onSelect, variant, size, orientation, registerTab, motion } = useTabsContext();
+    const isActive = activeValue === value;
+    const buttonRef = useRef(null);
+    const isVertical = orientation === "vertical";
+    useEffect(() => {
+        registerTab(value, buttonRef.current);
+        return () => registerTab(value, null);
+    }, [value, registerTab]);
+    const resolvedIcon = icon ? (_jsx("span", { className: cn("shrink-0", iconSize[size]), children: resolveIcon(icon, iconResolveSize[size]) })) : null;
+    const badgeEl = badge !== undefined ? (_jsx("span", { className: cn("inline-flex items-center justify-center px-1.5 rounded-full font-medium tracking-tight", badgeText[size], variant === "segmented" && isActive
+            ? "bg-action-primary text-white"
+            : isActive
+                ? motion
+                    ? "text-action-primary-text"
+                    : "bg-primary-50 text-action-primary-text"
+                : disabled
+                    ? "bg-grey-200 text-grey-500"
+                    : "bg-grey-100 text-grey-600"), children: badge })) : null;
+    /* ── Segmented ── */
+    if (variant === "segmented") {
+        return (_jsxs("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: cn("inline-flex items-center gap-1.5 rounded-md overflow-hidden transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", motion && "relative z-[1]", segmentedPadding[size], textSize[size], isActive
+                ? motion
+                    ? "text-grey-900"
+                    : "bg-primary-50 text-grey-900"
+                : disabled
+                    ? "text-grey-300 cursor-not-allowed"
+                    : "text-grey-500 hover:bg-grey-50", className), children: [resolvedIcon, _jsx("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children: children }), badgeEl] }));
+    }
+    /* ── Pill ── */
+    if (variant === "pill") {
+        return (_jsxs("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: cn("inline-flex items-center gap-1.5 rounded-full transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", motion && "relative z-[1]", pillPadding[size], textSize[size], isActive
+                ? motion
+                    ? "text-action-primary-text"
+                    : "bg-primary-50 text-action-primary-text"
+                : disabled
+                    ? "text-grey-300 cursor-not-allowed"
+                    : "text-grey-500 hover:bg-grey-50", className), children: [resolvedIcon, _jsx("span", { className: "font-normal leading-[1.45] whitespace-nowrap", children: children }), badgeEl] }));
+    }
+    /* ── Line (default) ── */
+    return (_jsxs("button", { ref: buttonRef, type: "button", role: "tab", "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && onSelect(value), className: cn("relative inline-flex cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", isVertical ? "flex-row" : "flex-col items-center", disabled && "cursor-not-allowed", className), children: [_jsxs("div", { className: cn("flex items-center gap-1.5", linePadding[size]), children: [resolvedIcon, _jsx("span", { className: cn("font-normal leading-[1.45] whitespace-nowrap transition-colors", textSize[size], isActive ? "text-grey-900" : disabled ? "text-grey-300" : "text-grey-500"), children: children }), badgeEl] }), isVertical ? (_jsx("div", { className: cn("w-0.5 self-stretch transition-colors", isActive ? (motion ? "bg-transparent" : "bg-primary-400") : "bg-grey-100") })) : (_jsx("div", { className: cn("h-0.5 w-full transition-colors", isActive ? (motion ? "bg-transparent" : "bg-primary-400") : "bg-grey-100") }))] }));
+}

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabsContext = useTabsContext;
+exports.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const SharedLayout_1 = require("../../motion/SharedLayout.cjs");
+const MotionProvider_1 = require("../../motion/MotionProvider.cjs");
+const useBrowserLayoutEffect = typeof window === "undefined" ? react_1.useEffect : react_1.useLayoutEffect;
+const TabsContext = (0, react_1.createContext)(null);
+function useTabsContext() {
+    const ctx = (0, react_1.useContext)(TabsContext);
+    if (!ctx)
+        throw new Error("Tab must be used within Tabs");
+    return ctx;
+}
+function Tabs({ motion = false, variant = "line", size = "sm", orientation = "horizontal", value, defaultValue = "", onValueChange, children, className, }) {
+    const listRef = (0, react_1.useRef)(null);
+    const [indicator, setIndicator] = (0, react_1.useState)(null);
+    const { preset } = (0, MotionProvider_1.useRaydenMotion)(motion);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const enabledValues = [];
+    function collect(nodes) {
+        react_1.Children.forEach(nodes, (node) => {
+            if (!(0, react_1.isValidElement)(node))
+                return;
+            if (typeof node.props.value === "string") {
+                if (!node.props.disabled)
+                    enabledValues.push(node.props.value);
+            }
+            else if (node.props.children)
+                collect(node.props.children);
+        });
+    }
+    collect(children);
+    const requestedValue = value ?? internalValue;
+    const activeValue = enabledValues.includes(requestedValue)
+        ? requestedValue
+        : (enabledValues[0] ?? "");
+    const tabsRef = (0, react_1.useRef)(new Map());
+    const onSelect = (0, react_1.useCallback)((val) => {
+        if (value === undefined)
+            setInternalValue(val);
+        onValueChange?.(val);
+    }, [value, onValueChange]);
+    const registerTab = (0, react_1.useCallback)((tabValue, element) => {
+        if (element) {
+            tabsRef.current.set(tabValue, element);
+        }
+        else {
+            tabsRef.current.delete(tabValue);
+        }
+    }, []);
+    const isVertical = orientation === "vertical";
+    const arrowNext = isVertical ? "ArrowDown" : "ArrowRight";
+    const arrowPrev = isVertical ? "ArrowUp" : "ArrowLeft";
+    useBrowserLayoutEffect(() => {
+        const list = listRef.current;
+        if (!motion || !list)
+            return;
+        const measure = () => {
+            const selected = Array.from(list.querySelectorAll('[role="tab"]')).find((tab) => tab.getAttribute("aria-selected") === "true");
+            if (!selected) {
+                setIndicator(null);
+                return;
+            }
+            const base = {
+                left: selected.offsetLeft,
+                top: selected.offsetTop,
+                width: selected.offsetWidth,
+                height: selected.offsetHeight,
+            };
+            if (variant === "line") {
+                if (isVertical) {
+                    base.left += base.width - 2;
+                    base.width = 2;
+                }
+                else {
+                    base.top += base.height - 2;
+                    base.height = 2;
+                }
+            }
+            setIndicator((previous) => previous &&
+                Object.keys(base).every((key) => base[key] === previous[key])
+                ? previous
+                : base);
+        };
+        measure();
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+        observer?.observe(list);
+        Array.from(list.children).forEach((child) => observer?.observe(child));
+        return () => observer?.disconnect();
+    }, [activeValue, motion, variant, size, isVertical, children]);
+    const handleKeyDown = (e) => {
+        const tabs = Array.from(tabsRef.current.entries())
+            .filter(([, el]) => !el.disabled)
+            .sort((a, b) => a[1].compareDocumentPosition(b[1]) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1)
+            .map(([val, el]) => ({ value: val, element: el }));
+        if (tabs.length === 0)
+            return;
+        const currentIndex = tabs.findIndex((t) => t.element === document.activeElement);
+        let nextIndex;
+        switch (e.key) {
+            case arrowNext:
+                e.preventDefault();
+                nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case arrowPrev:
+                e.preventDefault();
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+                break;
+            case "Home":
+                e.preventDefault();
+                nextIndex = 0;
+                break;
+            case "End":
+                e.preventDefault();
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        const nextTab = tabs[nextIndex];
+        if (nextTab) {
+            nextTab.element.focus();
+            onSelect(nextTab.value);
+        }
+    };
+    const contextValue = (0, react_1.useMemo)(() => ({ activeValue, onSelect, variant, size, orientation, registerTab, motion }), [activeValue, onSelect, variant, size, orientation, registerTab, motion]);
+    return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: listRef, "data-rayden-motion": motion ? preset : undefined, className: (0, cn_1.cn)("inline-flex", motion && "relative isolate", isVertical ? "flex-col" : "", variant === "line" && !isVertical && "border-b border-grey-200", variant === "line" && isVertical && "border-r border-grey-200", variant === "pill" && (isVertical ? "gap-1" : "gap-1"), variant === "segmented" &&
+                "border border-grey-100 bg-grey-50 rounded-lg p-0.5 gap-0.5 overflow-hidden", className), role: "tablist", "aria-orientation": orientation, onKeyDown: handleKeyDown, children: [motion && indicator && ((0, jsx_runtime_1.jsx)(SharedLayout_1.SharedLayout, { "aria-hidden": "true", "data-rayden-tab-indicator": "", motion: motion, layoutKey: `${activeValue}:${indicator.left}:${indicator.top}:${indicator.width}:${indicator.height}`, className: (0, cn_1.cn)("pointer-events-none absolute", variant === "line" ? "bg-primary-400" : "bg-primary-50", variant === "pill" && "rounded-full", variant === "segmented" && "rounded-md"), style: indicator })), children] }) }));
+}