tempest-react-sdk 0.22.0 → 0.24.0

package/dist/components/Command/Command.js

@@ -0,0 +1,149 @@
+import { cn as e } from "../../utils/cn.js";
+import { useFocusTrap as t } from "../../hooks/use-focus-trap.js";
+import n from "./Command.module.js";
+import { useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
+//#region src/components/Command/Command.tsx
+function u(e, t) {
+	return t === "" || e.label.toLowerCase().includes(t) ? !0 : (e.keywords ?? []).some((e) => e.toLowerCase().includes(t));
+}
+function d(e) {
+	let t = [], n = /* @__PURE__ */ new Map();
+	for (let r of e) {
+		let e = n.get(r.group);
+		e === void 0 ? (n.set(r.group, t.length), t.push({
+			name: r.group,
+			items: [r]
+		})) : t[e].items.push(r);
+	}
+	return t;
+}
+function f({ open: f, onOpenChange: m, items: h, placeholder: g = "Type a command…", emptyMessage: _ = "No results", className: v }) {
+	let y = a(null), [b, x] = o(""), [S, C] = o(0), w = "tempest-command-list";
+	t(y, f);
+	let T = i(() => {
+		let e = b.trim().toLowerCase();
+		return d(h.filter((t) => u(t, e))).flatMap((e) => e.items);
+	}, [h, b]), E = i(() => d(T), [T]);
+	if (r(() => {
+		f && (x(""), C(0));
+	}, [f]), r(() => {
+		C((e) => T.length === 0 ? 0 : Math.min(e, T.length - 1));
+	}, [T.length]), !f || typeof document > "u") return null;
+	function D(e) {
+		e.onSelect(), m(!1);
+	}
+	function O(e) {
+		if (e.key === "Escape") {
+			e.preventDefault(), m(!1);
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			if (e.preventDefault(), T.length === 0) return;
+			C((e) => (e + 1) % T.length);
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			if (e.preventDefault(), T.length === 0) return;
+			C((e) => (e - 1 + T.length) % T.length);
+			return;
+		}
+		if (e.key === "Enter") {
+			e.preventDefault();
+			let t = T[S];
+			t && D(t);
+		}
+	}
+	let k = -1;
+	return l(/* @__PURE__ */ s("div", {
+		className: n.overlay,
+		role: "presentation",
+		onClick: () => m(!1),
+		children: /* @__PURE__ */ c("div", {
+			ref: y,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Command palette",
+			className: e(n.dialog, v),
+			onClick: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ c("div", {
+				className: n.inputRow,
+				children: [/* @__PURE__ */ s(p, {}), /* @__PURE__ */ s("input", {
+					type: "text",
+					role: "combobox",
+					"aria-expanded": "true",
+					"aria-controls": w,
+					"aria-autocomplete": "list",
+					autoFocus: !0,
+					className: n.input,
+					placeholder: g,
+					value: b,
+					onChange: (e) => x(e.target.value),
+					onKeyDown: O
+				})]
+			}), /* @__PURE__ */ s("ul", {
+				id: w,
+				role: "listbox",
+				className: n.list,
+				children: T.length === 0 ? /* @__PURE__ */ s("li", {
+					className: n.empty,
+					children: _
+				}) : E.map((t) => /* @__PURE__ */ c("li", {
+					className: n.group,
+					children: [t.name && /* @__PURE__ */ s("div", {
+						className: n.groupHeading,
+						children: t.name
+					}), /* @__PURE__ */ s("ul", {
+						role: "presentation",
+						className: n.groupList,
+						children: t.items.map((t) => {
+							k += 1;
+							let r = k === S, i = k;
+							return /* @__PURE__ */ c("li", {
+								role: "option",
+								"aria-selected": r,
+								className: e(n.option, r && n.active),
+								onMouseMove: () => C(i),
+								onClick: () => D(t),
+								children: [t.icon && /* @__PURE__ */ s("span", {
+									className: n.icon,
+									children: t.icon
+								}), /* @__PURE__ */ s("span", {
+									className: n.label,
+									children: t.label
+								})]
+							}, t.id);
+						})
+					})]
+				}, t.name ?? "__ungrouped__"))
+			})]
+		})
+	}), document.body);
+}
+function p() {
+	return /* @__PURE__ */ c("svg", {
+		className: n.searchIcon,
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "11",
+			cy: "11",
+			r: "7",
+			stroke: "currentColor",
+			strokeWidth: "2"
+		}), /* @__PURE__ */ s("path", {
+			d: "M20 20l-3.5-3.5",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+export { f as Command };
+
+//# sourceMappingURL=Command.js.map

package/dist/components/Command/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","names":[],"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport styles from \"./Command.module.css\";\n\nexport interface CommandItem {\n    /** Stable unique identifier for the item. */\n    id: string;\n    /** Human-readable label shown in the list and matched against the query. */\n    label: string;\n    /** Optional group heading; items sharing a group are rendered together. */\n    group?: string;\n    /** Extra terms matched against the query in addition to `label`. */\n    keywords?: string[];\n    /** Invoked when the item is chosen (click or Enter on the active row). */\n    onSelect: () => void;\n    /** Optional leading icon. */\n    icon?: ReactNode;\n}\n\nexport interface CommandProps {\n    /** Whether the palette is visible. */\n    open: boolean;\n    /** Called with the next open state (Escape, selection, backdrop click). */\n    onOpenChange: (open: boolean) => void;\n    /** Candidate items to filter and display. */\n    items: CommandItem[];\n    /** Placeholder for the search input. */\n    placeholder?: string;\n    /** Rendered when no item matches the current query. */\n    emptyMessage?: ReactNode;\n    /** Forwarded to the dialog element. */\n    className?: string;\n}\n\ninterface CommandGroup {\n    name: string | undefined;\n    items: CommandItem[];\n}\n\n/**\n * Case-insensitively test whether `item` matches `query` by substring against\n * its label and any keywords. An empty query matches everything.\n *\n * @param item - The candidate command item.\n * @param query - The lowercased search query.\n * @returns `true` when the item should be shown.\n */\nfunction matchesQuery(item: CommandItem, query: string): boolean {\n    if (query === \"\") return true;\n    if (item.label.toLowerCase().includes(query)) return true;\n    return (item.keywords ?? []).some((keyword) => keyword.toLowerCase().includes(query));\n}\n\n/**\n * Partition a flat item list into ordered groups, preserving first-seen order\n * for both groups and the items within them.\n *\n * @param items - The (already filtered) items to group.\n * @returns An ordered list of groups.\n */\nfunction groupItems(items: CommandItem[]): CommandGroup[] {\n    const groups: CommandGroup[] = [];\n    const indexByName = new Map<string | undefined, number>();\n    for (const item of items) {\n        const existing = indexByName.get(item.group);\n        if (existing === undefined) {\n            indexByName.set(item.group, groups.length);\n            groups.push({ name: item.group, items: [item] });\n        } else {\n            groups[existing]!.items.push(item);\n        }\n    }\n    return groups;\n}\n\n/**\n * A ⌘K-style command palette: an overlay dialog with a search input that\n * substring-filters items by label and keywords, groups results, and supports\n * full keyboard navigation (Arrow up/down, Enter, Escape). Traps focus while\n * open.\n */\nexport function Command({\n    open,\n    onOpenChange,\n    items,\n    placeholder = \"Type a command…\",\n    emptyMessage = \"No results\",\n    className,\n}: CommandProps) {\n    const dialogRef = useRef<HTMLDivElement>(null);\n    const [query, setQuery] = useState<string>(\"\");\n    const [activeIndex, setActiveIndex] = useState<number>(0);\n    const listId = \"tempest-command-list\";\n\n    useFocusTrap(dialogRef, open);\n\n    const filtered = useMemo<CommandItem[]>(() => {\n        const normalized = query.trim().toLowerCase();\n        const visible = items.filter((item) => matchesQuery(item, normalized));\n        return groupItems(visible).flatMap((group) => group.items);\n    }, [items, query]);\n\n    const groups = useMemo<CommandGroup[]>(() => groupItems(filtered), [filtered]);\n\n    // Reset transient state whenever the palette opens.\n    useEffect(() => {\n        if (open) {\n            setQuery(\"\");\n            setActiveIndex(0);\n        }\n    }, [open]);\n\n    // Keep the active index within bounds as the filtered list shrinks/grows.\n    useEffect(() => {\n        setActiveIndex((index) => {\n            if (filtered.length === 0) return 0;\n            return Math.min(index, filtered.length - 1);\n        });\n    }, [filtered.length]);\n\n    if (!open || typeof document === \"undefined\") return null;\n\n    function selectItem(item: CommandItem): void {\n        item.onSelect();\n        onOpenChange(false);\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n        if (event.key === \"Escape\") {\n            event.preventDefault();\n            onOpenChange(false);\n            return;\n        }\n        if (event.key === \"ArrowDown\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index + 1) % filtered.length);\n            return;\n        }\n        if (event.key === \"ArrowUp\") {\n            event.preventDefault();\n            if (filtered.length === 0) return;\n            setActiveIndex((index) => (index - 1 + filtered.length) % filtered.length);\n            return;\n        }\n        if (event.key === \"Enter\") {\n            event.preventDefault();\n            const item = filtered[activeIndex];\n            if (item) selectItem(item);\n        }\n    }\n\n    let renderIndex = -1;\n\n    return createPortal(\n        <div className={styles.overlay} role=\"presentation\" onClick={() => onOpenChange(false)}>\n            <div\n                ref={dialogRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label=\"Command palette\"\n                className={cn(styles.dialog, className)}\n                onClick={(event) => event.stopPropagation()}\n            >\n                <div className={styles.inputRow}>\n                    <SearchIcon />\n                    <input\n                        type=\"text\"\n                        role=\"combobox\"\n                        aria-expanded=\"true\"\n                        aria-controls={listId}\n                        aria-autocomplete=\"list\"\n                        autoFocus\n                        className={styles.input}\n                        placeholder={placeholder}\n                        value={query}\n                        onChange={(event) => setQuery(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                    />\n                </div>\n                <ul id={listId} role=\"listbox\" className={styles.list}>\n                    {filtered.length === 0 ? (\n                        <li className={styles.empty}>{emptyMessage}</li>\n                    ) : (\n                        groups.map((group) => (\n                            <li key={group.name ?? \"__ungrouped__\"} className={styles.group}>\n                                {group.name && (\n                                    <div className={styles.groupHeading}>{group.name}</div>\n                                )}\n                                <ul role=\"presentation\" className={styles.groupList}>\n                                    {group.items.map((item) => {\n                                        renderIndex += 1;\n                                        const isActive = renderIndex === activeIndex;\n                                        const index = renderIndex;\n                                        return (\n                                            <li\n                                                key={item.id}\n                                                role=\"option\"\n                                                aria-selected={isActive}\n                                                className={cn(\n                                                    styles.option,\n                                                    isActive && styles.active,\n                                                )}\n                                                onMouseMove={() => setActiveIndex(index)}\n                                                onClick={() => selectItem(item)}\n                                            >\n                                                {item.icon && (\n                                                    <span className={styles.icon}>{item.icon}</span>\n                                                )}\n                                                <span className={styles.label}>{item.label}</span>\n                                            </li>\n                                        );\n                                    })}\n                                </ul>\n                            </li>\n                        ))\n                    )}\n                </ul>\n            </div>\n        </div>,\n        document.body,\n    );\n}\n\nfunction SearchIcon() {\n    return (\n        <svg\n            className={styles.searchIcon}\n            width=\"18\"\n            height=\"18\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n        >\n            <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n            <path d=\"M20 20l-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Command/Command.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_overlay_drnPW`,t=`tempest_tempest-fade-in_bCqn0`,n=`tempest_dialog_lPl6k`,r=`tempest_tempest-modal-in_uDcF6`,i=`tempest_inputRow_KxWoQ`,a=`tempest_searchIcon_8PULr`,o=`tempest_input_D3HQr`,s=`tempest_list_5UzZU`,c=`tempest_group_vLaWy`,l=`tempest_groupHeading_d01fo`,u=`tempest_groupList_QFMjK`,d=`tempest_option_doqib`,f=`tempest_active_LdCIJ`,p=`tempest_icon_CyCCx`,m=`tempest_label_QePT-`,h=`tempest_empty_al68D`,g={overlay:e,tempestFadeIn:t,dialog:n,tempestModalIn:r,inputRow:i,searchIcon:a,input:o,list:s,group:c,groupHeading:l,groupList:u,option:d,active:f,icon:p,label:m,empty:h};exports.active=f,exports.default=g,exports.dialog=n,exports.empty=h,exports.group=c,exports.groupHeading=l,exports.groupList=u,exports.icon=p,exports.input=o,exports.inputRow=i,exports.label=m,exports.list=s,exports.option=d,exports.overlay=e,exports.searchIcon=a,exports.tempestFadeIn=t,exports.tempestModalIn=r;
+//# sourceMappingURL=Command.module.cjs.map

package/dist/components/Command/Command.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.module.cjs","names":[],"sources":["../../../src/components/Command/Command.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding: max(10vh, var(--tempest-safe-area-top)) var(--tempest-space-4) var(--tempest-space-4)\n        var(--tempest-space-4);\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    border: 1px solid var(--tempest-border);\n    width: 100%;\n    max-width: 640px;\n    max-height: 70vh;\n    max-height: 70dvh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.inputRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.searchIcon {\n    color: var(--tempest-text-muted);\n    flex-shrink: 0;\n}\n\n.input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-normal);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-muted);\n}\n\n.list {\n    list-style: none;\n    margin: 0;\n    padding: var(--tempest-space-2);\n    overflow-y: auto;\n}\n\n.group {\n    list-style: none;\n}\n\n.group + .group {\n    margin-top: var(--tempest-space-2);\n}\n\n.groupHeading {\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--tempest-text-muted);\n}\n\n.groupList {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text);\n    transition: var(--tempest-transition-color);\n}\n\n.option.active {\n    background-color: var(--tempest-surface);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n    flex-shrink: 0;\n}\n\n.label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.empty {\n    list-style: none;\n    padding: var(--tempest-space-6) var(--tempest-space-3);\n    text-align: center;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(-12px) scale(0.98);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Command/Command.module.js

@@ -0,0 +1,23 @@
+//#region src/components/Command/Command.module.css
+var e = "tempest_overlay_drnPW", t = "tempest_tempest-fade-in_bCqn0", n = "tempest_dialog_lPl6k", r = "tempest_tempest-modal-in_uDcF6", i = "tempest_inputRow_KxWoQ", a = "tempest_searchIcon_8PULr", o = "tempest_input_D3HQr", s = "tempest_list_5UzZU", c = "tempest_group_vLaWy", l = "tempest_groupHeading_d01fo", u = "tempest_groupList_QFMjK", d = "tempest_option_doqib", f = "tempest_active_LdCIJ", p = "tempest_icon_CyCCx", m = "tempest_label_QePT-", h = "tempest_empty_al68D", g = {
+	overlay: e,
+	tempestFadeIn: t,
+	dialog: n,
+	tempestModalIn: r,
+	inputRow: i,
+	searchIcon: a,
+	input: o,
+	list: s,
+	group: c,
+	groupHeading: l,
+	groupList: u,
+	option: d,
+	active: f,
+	icon: p,
+	label: m,
+	empty: h
+};
+//#endregion
+export { f as active, g as default, n as dialog, h as empty, c as group, l as groupHeading, u as groupList, p as icon, o as input, i as inputRow, m as label, s as list, d as option, e as overlay, a as searchIcon, t as tempestFadeIn, r as tempestModalIn };
+
+//# sourceMappingURL=Command.module.js.map

package/dist/components/Command/Command.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.module.js","names":[],"sources":["../../../src/components/Command/Command.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgba(15, 23, 42, 0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    padding: max(10vh, var(--tempest-safe-area-top)) var(--tempest-space-4) var(--tempest-space-4)\n        var(--tempest-space-4);\n    z-index: var(--tempest-z-modal);\n    animation: tempest-fade-in var(--tempest-duration-base) var(--tempest-ease-out);\n}\n\n.dialog {\n    background-color: var(--tempest-bg);\n    color: var(--tempest-text);\n    border-radius: var(--tempest-radius-xl);\n    box-shadow: var(--tempest-shadow-xl);\n    border: 1px solid var(--tempest-border);\n    width: 100%;\n    max-width: 640px;\n    max-height: 70vh;\n    max-height: 70dvh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: tempest-modal-in var(--tempest-duration-base) var(--tempest-ease-emphasized);\n}\n\n.inputRow {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-4) var(--tempest-space-5);\n    border-bottom: 1px solid var(--tempest-border);\n}\n\n.searchIcon {\n    color: var(--tempest-text-muted);\n    flex-shrink: 0;\n}\n\n.input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    background: transparent;\n    color: var(--tempest-text);\n    font-size: var(--tempest-text-base);\n    line-height: var(--tempest-leading-normal);\n}\n\n.input::placeholder {\n    color: var(--tempest-text-muted);\n}\n\n.list {\n    list-style: none;\n    margin: 0;\n    padding: var(--tempest-space-2);\n    overflow-y: auto;\n}\n\n.group {\n    list-style: none;\n}\n\n.group + .group {\n    margin-top: var(--tempest-space-2);\n}\n\n.groupHeading {\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-semibold);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--tempest-text-muted);\n}\n\n.groupList {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.option {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    border-radius: var(--tempest-radius-md);\n    cursor: pointer;\n    color: var(--tempest-text);\n    transition: var(--tempest-transition-color);\n}\n\n.option.active {\n    background-color: var(--tempest-surface);\n}\n\n.icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--tempest-text-muted);\n    flex-shrink: 0;\n}\n\n.label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.empty {\n    list-style: none;\n    padding: var(--tempest-space-6) var(--tempest-space-3);\n    text-align: center;\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-sm);\n}\n\n@keyframes tempest-fade-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes tempest-modal-in {\n    from {\n        opacity: 0;\n        transform: translateY(-12px) scale(0.98);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay,\n    .dialog {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/ConditionalWrapper/ConditionalWrapper.cjs

@@ -0,0 +1,2 @@
+let e=require("react/jsx-runtime");function t({condition:t,wrapper:n,children:r}){return t?n(r):(0,e.jsx)(e.Fragment,{children:r})}exports.ConditionalWrapper=t;
+//# sourceMappingURL=ConditionalWrapper.cjs.map

package/dist/components/ConditionalWrapper/ConditionalWrapper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.cjs","names":[],"sources":["../../../src/components/ConditionalWrapper/ConditionalWrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport interface ConditionalWrapperProps {\n    /** When `true`, the children are passed through `wrapper`. */\n    condition: boolean;\n    /** Wrapping function applied to the children when `condition` is `true`. */\n    wrapper: (children: ReactNode) => ReactNode;\n    /** Content that may be wrapped. */\n    children: ReactNode;\n}\n\n/**\n * Conditionally wraps its children with `wrapper`.\n *\n * Renders `wrapper(children)` when `condition` is `true`, otherwise renders the\n * children unchanged. Avoids duplicating a subtree just to add an optional\n * wrapping element (e.g. a link, tooltip or boundary).\n *\n * @param props - The conditional-wrapper props.\n * @returns The wrapped children when `condition` is `true`, else the children.\n */\nexport function ConditionalWrapper({\n    condition,\n    wrapper,\n    children,\n}: ConditionalWrapperProps): ReactNode {\n    return condition ? wrapper(children) : <>{children}</>;\n}\n"],"mappings":"mCAqBA,SAAgB,EAAmB,CAC/B,YACA,UACA,YACmC,CACnC,OAAO,EAAY,EAAQ,CAAQ,GAAI,EAAA,EAAA,IAAA,CAAA,EAAA,SAAA,CAAG,UAAW,CAAA,CACzD"}

package/dist/components/ConditionalWrapper/ConditionalWrapper.js

@@ -0,0 +1,9 @@
+import { Fragment as e, jsx as t } from "react/jsx-runtime";
+//#region src/components/ConditionalWrapper/ConditionalWrapper.tsx
+function n({ condition: n, wrapper: r, children: i }) {
+	return n ? r(i) : /* @__PURE__ */ t(e, { children: i });
+}
+//#endregion
+export { n as ConditionalWrapper };
+
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist/components/ConditionalWrapper/ConditionalWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.js","names":[],"sources":["../../../src/components/ConditionalWrapper/ConditionalWrapper.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport interface ConditionalWrapperProps {\n    /** When `true`, the children are passed through `wrapper`. */\n    condition: boolean;\n    /** Wrapping function applied to the children when `condition` is `true`. */\n    wrapper: (children: ReactNode) => ReactNode;\n    /** Content that may be wrapped. */\n    children: ReactNode;\n}\n\n/**\n * Conditionally wraps its children with `wrapper`.\n *\n * Renders `wrapper(children)` when `condition` is `true`, otherwise renders the\n * children unchanged. Avoids duplicating a subtree just to add an optional\n * wrapping element (e.g. a link, tooltip or boundary).\n *\n * @param props - The conditional-wrapper props.\n * @returns The wrapped children when `condition` is `true`, else the children.\n */\nexport function ConditionalWrapper({\n    condition,\n    wrapper,\n    children,\n}: ConditionalWrapperProps): ReactNode {\n    return condition ? wrapper(children) : <>{children}</>;\n}\n"],"mappings":";;AAqBA,SAAgB,EAAmB,EAC/B,cACA,YACA,eACmC;CACnC,OAAO,IAAY,EAAQ,CAAQ,IAAI,kBAAA,GAAA,EAAG,YAAW,CAAA;AACzD"}

package/dist/components/ConfirmDialog/ConfirmDialog.cjs

@@ -0,0 +1,2 @@
+const e=require("../Button/Button.cjs"),t=require("../Modal/Modal.cjs");let n=require("react/jsx-runtime");function r({open:r,title:i,description:a,confirmLabel:o=`Confirmar`,cancelLabel:s=`Cancelar`,variant:c=`primary`,loading:l=!1,onConfirm:u,onCancel:d}){return(0,n.jsx)(t.Modal,{open:r,onClose:d,title:i,size:`sm`,footer:(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.Button,{variant:`secondary`,onClick:d,disabled:l,children:s}),(0,n.jsx)(e.Button,{variant:c,loading:l,onClick:()=>void u(),children:o})]}),children:a})}exports.ConfirmDialog=r;
+//# sourceMappingURL=ConfirmDialog.cjs.map

package/dist/components/ConfirmDialog/ConfirmDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.cjs","names":[],"sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { Modal } from \"@/components/Modal\";\n\nexport interface ConfirmDialogProps {\n    open: boolean;\n    title: ReactNode;\n    description?: ReactNode;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    variant?: \"primary\" | \"danger\";\n    loading?: boolean;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n}\n\n/**\n * Quick confirmation prompt built on top of {@link Modal}. Use for destructive\n * actions with `variant=\"danger\"`.\n */\nexport function ConfirmDialog({\n    open,\n    title,\n    description,\n    confirmLabel = \"Confirmar\",\n    cancelLabel = \"Cancelar\",\n    variant = \"primary\",\n    loading = false,\n    onConfirm,\n    onCancel,\n}: ConfirmDialogProps) {\n    return (\n        <Modal\n            open={open}\n            onClose={onCancel}\n            title={title}\n            size=\"sm\"\n            footer={\n                <>\n                    <Button variant=\"secondary\" onClick={onCancel} disabled={loading}>\n                        {cancelLabel}\n                    </Button>\n                    <Button variant={variant} loading={loading} onClick={() => void onConfirm()}>\n                        {confirmLabel}\n                    </Button>\n                </>\n            }\n        >\n            {description}\n        </Modal>\n    );\n}\n"],"mappings":"2GAoBA,SAAgB,EAAc,CAC1B,OACA,QACA,cACA,eAAe,YACf,cAAc,WACd,UAAU,UACV,UAAU,GACV,YACA,YACmB,CACnB,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACU,OACN,QAAS,EACF,QACP,KAAK,KACL,QACI,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAQ,QAAQ,YAAY,QAAS,EAAU,SAAU,WACpD,CACG,CAAA,GACR,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAiB,UAAkB,UAAS,YAAe,KAAK,EAAU,WACrE,CACG,CAAA,CACV,CAAA,CAAA,WAGL,CACE,CAAA,CAEf"}

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,28 @@
+import { Button as e } from "../Button/Button.js";
+import { Modal as t } from "../Modal/Modal.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ConfirmDialog/ConfirmDialog.tsx
+function a({ open: a, title: o, description: s, confirmLabel: c = "Confirmar", cancelLabel: l = "Cancelar", variant: u = "primary", loading: d = !1, onConfirm: f, onCancel: p }) {
+	return /* @__PURE__ */ r(t, {
+		open: a,
+		onClose: p,
+		title: o,
+		size: "sm",
+		footer: /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+			variant: "secondary",
+			onClick: p,
+			disabled: d,
+			children: l
+		}), /* @__PURE__ */ r(e, {
+			variant: u,
+			loading: d,
+			onClick: () => void f(),
+			children: c
+		})] }),
+		children: s
+	});
+}
+//#endregion
+export { a as ConfirmDialog };
+
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/components/ConfirmDialog/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","names":[],"sources":["../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Button } from \"@/components/Button\";\nimport { Modal } from \"@/components/Modal\";\n\nexport interface ConfirmDialogProps {\n    open: boolean;\n    title: ReactNode;\n    description?: ReactNode;\n    confirmLabel?: string;\n    cancelLabel?: string;\n    variant?: \"primary\" | \"danger\";\n    loading?: boolean;\n    onConfirm: () => void | Promise<void>;\n    onCancel: () => void;\n}\n\n/**\n * Quick confirmation prompt built on top of {@link Modal}. Use for destructive\n * actions with `variant=\"danger\"`.\n */\nexport function ConfirmDialog({\n    open,\n    title,\n    description,\n    confirmLabel = \"Confirmar\",\n    cancelLabel = \"Cancelar\",\n    variant = \"primary\",\n    loading = false,\n    onConfirm,\n    onCancel,\n}: ConfirmDialogProps) {\n    return (\n        <Modal\n            open={open}\n            onClose={onCancel}\n            title={title}\n            size=\"sm\"\n            footer={\n                <>\n                    <Button variant=\"secondary\" onClick={onCancel} disabled={loading}>\n                        {cancelLabel}\n                    </Button>\n                    <Button variant={variant} loading={loading} onClick={() => void onConfirm()}>\n                        {confirmLabel}\n                    </Button>\n                </>\n            }\n        >\n            {description}\n        </Modal>\n    );\n}\n"],"mappings":";;;;AAoBA,SAAgB,EAAc,EAC1B,SACA,UACA,gBACA,kBAAe,aACf,iBAAc,YACd,aAAU,WACV,aAAU,IACV,cACA,eACmB;CACnB,OACI,kBAAC,GAAD;EACU;EACN,SAAS;EACF;EACP,MAAK;EACL,QACI,kBAAA,GAAA,EAAA,UAAA,CACI,kBAAC,GAAD;GAAQ,SAAQ;GAAY,SAAS;GAAU,UAAU;aACpD;EACG,CAAA,GACR,kBAAC,GAAD;GAAiB;GAAkB;GAAS,eAAe,KAAK,EAAU;aACrE;EACG,CAAA,CACV,EAAA,CAAA;YAGL;CACE,CAAA;AAEf"}

package/dist/components/ContextMenu/ContextMenu.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("../Portal/Portal.cjs"),n=require("./ContextMenu.module.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(e){return`separator`in e&&e.separator===!0}function o({items:o,children:s,className:c}){let[l,u]=(0,r.useState)(!1),[d,f]=(0,r.useState)({x:0,y:0}),[p,m]=(0,r.useState)(-1),h=(0,r.useId)(),g=(0,r.useRef)(null),_=(0,r.useRef)([]),v=o.map((e,t)=>!a(e)&&!e.disabled?t:-1).filter(e=>e!==-1),y=(0,r.useCallback)(()=>{u(!1),m(-1)},[]),b=e=>{e.preventDefault(),f({x:e.clientX,y:e.clientY}),m(-1),u(!0)};(0,r.useEffect)(()=>{if(!l)return;let e=e=>{if(e.key===`Escape`){y();return}if(e.key===`ArrowDown`){e.preventDefault();let t=v.indexOf(p),n=v[(t+1)%v.length]??-1;m(n),_.current[n]?.focus()}if(e.key===`ArrowUp`){e.preventDefault();let t=v.indexOf(p),n=v[(t-1+v.length)%v.length]??-1;m(n),_.current[n]?.focus()}},t=e=>{g.current&&!g.current.contains(e.target)&&y()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[l,p,v,y]);let x=e=>{e.onSelect?.(),y()};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`span`,{className:n.default.root,onContextMenu:b,children:s}),l&&(0,i.jsx)(t.Portal,{children:(0,i.jsx)(`ul`,{ref:g,id:h,role:`menu`,className:e.cn(n.default.menu,c),style:{top:d.y,left:d.x},children:o.map((t,r)=>a(t)?(0,i.jsx)(`li`,{role:`separator`,className:n.default.separator,"aria-hidden":!0},`separator-${r}`):(0,i.jsx)(`li`,{role:`none`,children:(0,i.jsx)(`button`,{ref:e=>{_.current[r]=e},type:`button`,role:`menuitem`,className:e.cn(n.default.item,t.danger&&n.default.danger,p===r&&n.default.active),disabled:t.disabled,onClick:()=>x(t),onMouseEnter:()=>m(r),children:t.label})},`item-${r}`))})})]})}exports.ContextMenu=o;
+//# sourceMappingURL=ContextMenu.cjs.map

package/dist/components/ContextMenu/ContextMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Right-click context menu.\n *\n * - Opens at the cursor position on `onContextMenu` (default browser menu suppressed).\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking contexts.\n * - Closes on outside click, Escape, or item selection.\n * - Arrow Up/Down move focus across selectable items; Enter activates the focused item.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({ items, children, className }: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const menuRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        event.preventDefault();\n        setPosition({ x: event.clientX, y: event.clientY });\n        setActiveIndex(-1);\n        setOpen(true);\n    };\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            if (event.key === \"ArrowDown\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowUp\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const prev =\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1;\n                setActiveIndex(prev);\n                itemRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuRef.current && !menuRef.current.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [open, activeIndex, selectableIndexes, close]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span className={styles.root} onContextMenu={handleContextMenu}>\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={menuRef}\n                        id={id}\n                        role=\"menu\"\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n"],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,91 @@
+import { cn as e } from "../../utils/cn.js";
+import { Portal as t } from "../Portal/Portal.js";
+import n from "./ContextMenu.module.js";
+import { useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/ContextMenu/ContextMenu.tsx
+function d(e) {
+	return "separator" in e && e.separator === !0;
+}
+function f({ items: f, children: p, className: m }) {
+	let [h, g] = s(!1), [_, v] = s({
+		x: 0,
+		y: 0
+	}), [y, b] = s(-1), x = a(), S = o(null), C = o([]), w = f.map((e, t) => !d(e) && !e.disabled ? t : -1).filter((e) => e !== -1), T = r(() => {
+		g(!1), b(-1);
+	}, []), E = (e) => {
+		e.preventDefault(), v({
+			x: e.clientX,
+			y: e.clientY
+		}), b(-1), g(!0);
+	};
+	i(() => {
+		if (!h) return;
+		let e = (e) => {
+			if (e.key === "Escape") {
+				T();
+				return;
+			}
+			if (e.key === "ArrowDown") {
+				e.preventDefault();
+				let t = w.indexOf(y), n = w[(t + 1) % w.length] ?? -1;
+				b(n), C.current[n]?.focus();
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = w.indexOf(y), n = w[(t - 1 + w.length) % w.length] ?? -1;
+				b(n), C.current[n]?.focus();
+			}
+		}, t = (e) => {
+			S.current && !S.current.contains(e.target) && T();
+		};
+		return window.addEventListener("keydown", e), window.addEventListener("mousedown", t), () => {
+			window.removeEventListener("keydown", e), window.removeEventListener("mousedown", t);
+		};
+	}, [
+		h,
+		y,
+		w,
+		T
+	]);
+	let D = (e) => {
+		e.onSelect?.(), T();
+	};
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
+		className: n.root,
+		onContextMenu: E,
+		children: p
+	}), h && /* @__PURE__ */ l(t, { children: /* @__PURE__ */ l("ul", {
+		ref: S,
+		id: x,
+		role: "menu",
+		className: e(n.menu, m),
+		style: {
+			top: _.y,
+			left: _.x
+		},
+		children: f.map((t, r) => d(t) ? /* @__PURE__ */ l("li", {
+			role: "separator",
+			className: n.separator,
+			"aria-hidden": !0
+		}, `separator-${r}`) : /* @__PURE__ */ l("li", {
+			role: "none",
+			children: /* @__PURE__ */ l("button", {
+				ref: (e) => {
+					C.current[r] = e;
+				},
+				type: "button",
+				role: "menuitem",
+				className: e(n.item, t.danger && n.danger, y === r && n.active),
+				disabled: t.disabled,
+				onClick: () => D(t),
+				onMouseEnter: () => b(r),
+				children: t.label
+			})
+		}, `item-${r}`))
+	}) })] });
+}
+//#endregion
+export { f as ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/components/ContextMenu/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"@/components/Portal\";\nimport styles from \"./ContextMenu.module.css\";\n\nexport type ContextMenuItem =\n    | {\n          label: ReactNode;\n          onSelect?: () => void;\n          disabled?: boolean;\n          danger?: boolean;\n      }\n    | { separator: true };\n\nexport interface ContextMenuProps {\n    /** Menu entries — selectable items and separators. */\n    items: ContextMenuItem[];\n    /** Trigger area. Right-clicking anywhere within opens the menu at the cursor. */\n    children: ReactNode;\n    /** Extra class names forwarded to the menu element. */\n    className?: string;\n}\n\ninterface Position {\n    x: number;\n    y: number;\n}\n\nfunction isSeparator(item: ContextMenuItem): item is { separator: true } {\n    return \"separator\" in item && item.separator === true;\n}\n\n/**\n * Right-click context menu.\n *\n * - Opens at the cursor position on `onContextMenu` (default browser menu suppressed).\n * - Rendered through a {@link Portal} so it escapes parent overflow/stacking contexts.\n * - Closes on outside click, Escape, or item selection.\n * - Arrow Up/Down move focus across selectable items; Enter activates the focused item.\n *\n * @param props - The context menu props.\n * @returns The trigger wrapper plus the portalled menu when open.\n */\nexport function ContextMenu({ items, children, className }: ContextMenuProps) {\n    const [open, setOpen] = useState(false);\n    const [position, setPosition] = useState<Position>({ x: 0, y: 0 });\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const id = useId();\n    const menuRef = useRef<HTMLUListElement>(null);\n    const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const selectableIndexes = items\n        .map((item, index) => (!isSeparator(item) && !item.disabled ? index : -1))\n        .filter((i) => i !== -1);\n\n    const close = useCallback((): void => {\n        setOpen(false);\n        setActiveIndex(-1);\n    }, []);\n\n    const handleContextMenu = (event: React.MouseEvent): void => {\n        event.preventDefault();\n        setPosition({ x: event.clientX, y: event.clientY });\n        setActiveIndex(-1);\n        setOpen(true);\n    };\n\n    useEffect(() => {\n        if (!open) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                return;\n            }\n            if (event.key === \"ArrowDown\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const next = selectableIndexes[(current + 1) % selectableIndexes.length] ?? -1;\n                setActiveIndex(next);\n                itemRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowUp\") {\n                event.preventDefault();\n                const current = selectableIndexes.indexOf(activeIndex);\n                const prev =\n                    selectableIndexes[\n                        (current - 1 + selectableIndexes.length) % selectableIndexes.length\n                    ] ?? -1;\n                setActiveIndex(prev);\n                itemRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (menuRef.current && !menuRef.current.contains(event.target as Node)) close();\n        };\n        window.addEventListener(\"keydown\", onKey);\n        window.addEventListener(\"mousedown\", onDown);\n        return () => {\n            window.removeEventListener(\"keydown\", onKey);\n            window.removeEventListener(\"mousedown\", onDown);\n        };\n    }, [open, activeIndex, selectableIndexes, close]);\n\n    const handleSelect = (item: Extract<ContextMenuItem, { label: ReactNode }>): void => {\n        item.onSelect?.();\n        close();\n    };\n\n    return (\n        <>\n            <span className={styles.root} onContextMenu={handleContextMenu}>\n                {children}\n            </span>\n            {open && (\n                <Portal>\n                    <ul\n                        ref={menuRef}\n                        id={id}\n                        role=\"menu\"\n                        className={cn(styles.menu, className)}\n                        style={{ top: position.y, left: position.x }}\n                    >\n                        {items.map((item, index) => {\n                            if (isSeparator(item)) {\n                                return (\n                                    <li\n                                        key={`separator-${index}`}\n                                        role=\"separator\"\n                                        className={styles.separator}\n                                        aria-hidden\n                                    />\n                                );\n                            }\n                            return (\n                                <li key={`item-${index}`} role=\"none\">\n                                    <button\n                                        ref={(el) => {\n                                            itemRefs.current[index] = el;\n                                        }}\n                                        type=\"button\"\n                                        role=\"menuitem\"\n                                        className={cn(\n                                            styles.item,\n                                            item.danger && styles.danger,\n                                            activeIndex === index && styles.active,\n                                        )}\n                                        disabled={item.disabled}\n                                        onClick={() => handleSelect(item)}\n                                        onMouseEnter={() => setActiveIndex(index)}\n                                    >\n                                        {item.label}\n                                    </button>\n                                </li>\n                            );\n                        })}\n                    </ul>\n                </Portal>\n            )}\n        </>\n    );\n}\n"],"mappings":"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"}

package/dist/components/ContextMenu/ContextMenu.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_root_OxRHj`,t=`tempest_menu_MDn4t`,n=`tempest_tempest-context-menu-in_fNuOl`,r=`tempest_item_PoiMY`,i=`tempest_active_ATcDu`,a=`tempest_danger_COgly`,o=`tempest_separator_omuCz`,s={root:e,menu:t,tempestContextMenuIn:n,item:r,active:i,danger:a,separator:o};exports.active=i,exports.danger=a,exports.default=s,exports.item=r,exports.menu=t,exports.root=e,exports.separator=o,exports.tempestContextMenuIn=n;
+//# sourceMappingURL=ContextMenu.module.cjs.map

package/dist/components/ContextMenu/ContextMenu.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.cjs","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n    display: contents;\n}\n\n.menu {\n    position: fixed;\n    z-index: var(--tempest-z-popover);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n    from {\n        opacity: 0;\n        transform: scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/ContextMenu/ContextMenu.module.js

@@ -0,0 +1,14 @@
+//#region src/components/ContextMenu/ContextMenu.module.css
+var e = "tempest_root_OxRHj", t = "tempest_menu_MDn4t", n = "tempest_tempest-context-menu-in_fNuOl", r = "tempest_item_PoiMY", i = "tempest_active_ATcDu", a = "tempest_danger_COgly", o = "tempest_separator_omuCz", s = {
+	root: e,
+	menu: t,
+	tempestContextMenuIn: n,
+	item: r,
+	active: i,
+	danger: a,
+	separator: o
+};
+//#endregion
+export { i as active, a as danger, s as default, r as item, t as menu, e as root, o as separator, n as tempestContextMenuIn };
+
+//# sourceMappingURL=ContextMenu.module.js.map

package/dist/components/ContextMenu/ContextMenu.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.module.js","names":[],"sources":["../../../src/components/ContextMenu/ContextMenu.module.css"],"sourcesContent":[".root {\n    display: contents;\n}\n\n.menu {\n    position: fixed;\n    z-index: var(--tempest-z-popover);\n    min-width: 180px;\n    max-width: 320px;\n    background-color: var(--tempest-bg);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-lg);\n    box-shadow: var(--tempest-shadow-lg);\n    padding: var(--tempest-space-1);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-base);\n    list-style: none;\n    margin: 0;\n    animation: tempest-context-menu-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.item {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    width: 100%;\n    padding: var(--tempest-space-2) var(--tempest-space-3);\n    background: none;\n    border: none;\n    border-radius: var(--tempest-radius-sm);\n    color: var(--tempest-text);\n    font-family: inherit;\n    font-size: inherit;\n    line-height: var(--tempest-leading-snug);\n    text-align: left;\n    cursor: pointer;\n    transition: var(--tempest-transition-color);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover:not(:disabled) {\n        background-color: var(--tempest-surface);\n    }\n}\n\n.item:focus,\n.item.active {\n    outline: none;\n    background-color: var(--tempest-surface);\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.item.danger {\n    color: var(--tempest-danger);\n}\n\n.separator {\n    height: 1px;\n    background-color: var(--tempest-border);\n    margin: var(--tempest-space-1) 0;\n}\n\n@keyframes tempest-context-menu-in {\n    from {\n        opacity: 0;\n        transform: scale(0.96);\n    }\n    to {\n        opacity: 1;\n        transform: scale(1);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .menu {\n        animation: none;\n    }\n}\n"],"mappings":""}

package/dist/components/CopyButton/CopyButton.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("./CopyButton.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({value:i,timeout:a=2e3,children:o,onCopied:s,className:c,onClick:l,...u}){let[d,f]=(0,n.useState)(!1),p=(0,n.useRef)(null);(0,n.useEffect)(()=>()=>{p.current!==null&&clearTimeout(p.current)},[]);let m=(0,n.useCallback)(async e=>{l?.(e);try{await navigator.clipboard.writeText(i),f(!0),s?.(),p.current!==null&&clearTimeout(p.current),p.current=setTimeout(()=>f(!1),a)}catch{}},[i,a,s,l]);return(0,r.jsx)(`button`,{type:`button`,className:e.cn(t.default.button,d&&t.default.copied,c),"data-copied":d||void 0,onClick:m,...u,children:o??(d?`Copied`:`Copy`)})}exports.CopyButton=i;
+//# sourceMappingURL=CopyButton.cjs.map

package/dist/components/CopyButton/CopyButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.cjs","names":[],"sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./CopyButton.module.css\";\n\nexport interface CopyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Text written to the clipboard when the button is clicked. */\n    value: string;\n    /** How long (ms) the \"copied\" state stays active before resetting. Defaults to 2000. */\n    timeout?: number;\n    /** Optional label. Falls back to \"Copy\" / \"Copied\" based on state. */\n    children?: ReactNode;\n    /** Called after a successful clipboard write. */\n    onCopied?: () => void;\n}\n\n/**\n * Button that copies a string to the clipboard and shows a transient \"copied\"\n * state for `timeout` milliseconds.\n *\n * When `children` are provided they are rendered in both states; otherwise the\n * label toggles between \"Copy\" and \"Copied\". The reset timer is cleared on\n * unmount to avoid setting state on an unmounted component.\n *\n * @example\n * <CopyButton value=\"npm i tempest-react-sdk\" />\n */\nexport function CopyButton({\n    value,\n    timeout = 2000,\n    children,\n    onCopied,\n    className,\n    onClick,\n    ...props\n}: CopyButtonProps) {\n    const [copied, setCopied] = useState(false);\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        return () => {\n            if (timerRef.current !== null) clearTimeout(timerRef.current);\n        };\n    }, []);\n\n    const handleClick = useCallback(\n        async (event: React.MouseEvent<HTMLButtonElement>) => {\n            onClick?.(event);\n            try {\n                await navigator.clipboard.writeText(value);\n                setCopied(true);\n                onCopied?.();\n                if (timerRef.current !== null) clearTimeout(timerRef.current);\n                timerRef.current = setTimeout(() => setCopied(false), timeout);\n            } catch {\n                /* clipboard unavailable — silently ignore */\n            }\n        },\n        [value, timeout, onCopied, onClick],\n    );\n\n    return (\n        <button\n            type=\"button\"\n            className={cn(styles.button, copied && styles.copied, className)}\n            data-copied={copied || undefined}\n            onClick={handleClick}\n            {...props}\n        >\n            {children ?? (copied ? \"Copied\" : \"Copy\")}\n        </button>\n    );\n}\n"],"mappings":"iIA2BA,SAAgB,EAAW,CACvB,QACA,UAAU,IACV,WACA,WACA,YACA,UACA,GAAG,GACa,CAChB,GAAM,CAAC,EAAQ,IAAA,EAAA,EAAA,SAAA,CAAsB,EAAK,EACpC,GAAA,EAAA,EAAA,OAAA,CAAwD,IAAI,GAElE,EAAA,EAAA,UAAA,SACiB,CACL,EAAS,UAAY,MAAM,aAAa,EAAS,OAAO,CAChE,EACD,CAAC,CAAC,EAEL,IAAM,GAAA,EAAA,EAAA,YAAA,CACF,KAAO,IAA+C,CAClD,IAAU,CAAK,EACf,GAAI,CACA,MAAM,UAAU,UAAU,UAAU,CAAK,EACzC,EAAU,EAAI,EACd,IAAW,EACP,EAAS,UAAY,MAAM,aAAa,EAAS,OAAO,EAC5D,EAAS,QAAU,eAAiB,EAAU,EAAK,EAAG,CAAO,CACjE,MAAQ,CAER,CACJ,EACA,CAAC,EAAO,EAAS,EAAU,CAAO,CACtC,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,GAAU,EAAA,QAAO,OAAQ,CAAS,EAC/D,cAAa,GAAU,IAAA,GACvB,QAAS,EACT,GAAI,WAEH,IAAa,EAAS,SAAW,OAC9B,CAAA,CAEhB"}

package/dist/components/CopyButton/CopyButton.js

@@ -0,0 +1,34 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "./CopyButton.module.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/CopyButton/CopyButton.tsx
+function s({ value: s, timeout: c = 2e3, children: l, onCopied: u, className: d, onClick: f, ...p }) {
+	let [m, h] = a(!1), g = i(null);
+	r(() => () => {
+		g.current !== null && clearTimeout(g.current);
+	}, []);
+	let _ = n(async (e) => {
+		f?.(e);
+		try {
+			await navigator.clipboard.writeText(s), h(!0), u?.(), g.current !== null && clearTimeout(g.current), g.current = setTimeout(() => h(!1), c);
+		} catch {}
+	}, [
+		s,
+		c,
+		u,
+		f
+	]);
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		className: e(t.button, m && t.copied, d),
+		"data-copied": m || void 0,
+		onClick: _,
+		...p,
+		children: l ?? (m ? "Copied" : "Copy")
+	});
+}
+//#endregion
+export { s as CopyButton };
+
+//# sourceMappingURL=CopyButton.js.map

package/dist/components/CopyButton/CopyButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.js","names":[],"sources":["../../../src/components/CopyButton/CopyButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./CopyButton.module.css\";\n\nexport interface CopyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n    /** Text written to the clipboard when the button is clicked. */\n    value: string;\n    /** How long (ms) the \"copied\" state stays active before resetting. Defaults to 2000. */\n    timeout?: number;\n    /** Optional label. Falls back to \"Copy\" / \"Copied\" based on state. */\n    children?: ReactNode;\n    /** Called after a successful clipboard write. */\n    onCopied?: () => void;\n}\n\n/**\n * Button that copies a string to the clipboard and shows a transient \"copied\"\n * state for `timeout` milliseconds.\n *\n * When `children` are provided they are rendered in both states; otherwise the\n * label toggles between \"Copy\" and \"Copied\". The reset timer is cleared on\n * unmount to avoid setting state on an unmounted component.\n *\n * @example\n * <CopyButton value=\"npm i tempest-react-sdk\" />\n */\nexport function CopyButton({\n    value,\n    timeout = 2000,\n    children,\n    onCopied,\n    className,\n    onClick,\n    ...props\n}: CopyButtonProps) {\n    const [copied, setCopied] = useState(false);\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        return () => {\n            if (timerRef.current !== null) clearTimeout(timerRef.current);\n        };\n    }, []);\n\n    const handleClick = useCallback(\n        async (event: React.MouseEvent<HTMLButtonElement>) => {\n            onClick?.(event);\n            try {\n                await navigator.clipboard.writeText(value);\n                setCopied(true);\n                onCopied?.();\n                if (timerRef.current !== null) clearTimeout(timerRef.current);\n                timerRef.current = setTimeout(() => setCopied(false), timeout);\n            } catch {\n                /* clipboard unavailable — silently ignore */\n            }\n        },\n        [value, timeout, onCopied, onClick],\n    );\n\n    return (\n        <button\n            type=\"button\"\n            className={cn(styles.button, copied && styles.copied, className)}\n            data-copied={copied || undefined}\n            onClick={handleClick}\n            {...props}\n        >\n            {children ?? (copied ? \"Copied\" : \"Copy\")}\n        </button>\n    );\n}\n"],"mappings":";;;;;AA2BA,SAAgB,EAAW,EACvB,UACA,aAAU,KACV,aACA,aACA,cACA,YACA,GAAG,KACa;CAChB,IAAM,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAW,EAA6C,IAAI;CAElE,cACiB;EACT,AAAI,EAAS,YAAY,QAAM,aAAa,EAAS,OAAO;CAChE,GACD,CAAC,CAAC;CAEL,IAAM,IAAc,EAChB,OAAO,MAA+C;EAClD,IAAU,CAAK;EACf,IAAI;GAKA,AAJA,MAAM,UAAU,UAAU,UAAU,CAAK,GACzC,EAAU,EAAI,GACd,IAAW,GACP,EAAS,YAAY,QAAM,aAAa,EAAS,OAAO,GAC5D,EAAS,UAAU,iBAAiB,EAAU,EAAK,GAAG,CAAO;EACjE,QAAQ,CAER;CACJ,GACA;EAAC;EAAO;EAAS;EAAU;CAAO,CACtC;CAEA,OACI,kBAAC,UAAD;EACI,MAAK;EACL,WAAW,EAAG,EAAO,QAAQ,KAAU,EAAO,QAAQ,CAAS;EAC/D,eAAa,KAAU,KAAA;EACvB,SAAS;EACT,GAAI;YAEH,MAAa,IAAS,WAAW;CAC9B,CAAA;AAEhB"}

package/dist/components/CopyButton/CopyButton.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_button_58f9i`,t=`tempest_copied_WkLgR`,n={button:e,copied:t};exports.button=e,exports.copied=t,exports.default=n;
+//# sourceMappingURL=CopyButton.module.cjs.map

package/dist/components/CopyButton/CopyButton.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.module.cjs","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.copied {\n    color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n}\n"],"mappings":""}

package/dist/components/CopyButton/CopyButton.module.js

@@ -0,0 +1,9 @@
+//#region src/components/CopyButton/CopyButton.module.css
+var e = "tempest_button_58f9i", t = "tempest_copied_WkLgR", n = {
+	button: e,
+	copied: t
+};
+//#endregion
+export { e as button, t as copied, n as default };
+
+//# sourceMappingURL=CopyButton.module.js.map

package/dist/components/CopyButton/CopyButton.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyButton.module.js","names":[],"sources":["../../../src/components/CopyButton/CopyButton.module.css"],"sourcesContent":[".button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-1);\n    padding: var(--tempest-space-1) var(--tempest-space-3);\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-sm);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.button:hover {\n    background-color: var(--tempest-surface-2);\n}\n\n.copied {\n    color: var(--tempest-primary-foreground, var(--tempest-text-on-primary));\n    background-color: var(--tempest-primary);\n    border-color: var(--tempest-primary);\n}\n"],"mappings":""}

package/dist/components/DataList/DataList.cjs

@@ -0,0 +1,2 @@
+const e=require("../../utils/cn.cjs"),t=require("./DataList.module.cjs");let n=require("react/jsx-runtime");function r({items:r,renderItem:i,keyExtractor:a,empty:o,className:s,...c}){return r.length===0?(0,n.jsx)(n.Fragment,{children:o??null}):(0,n.jsx)(`ul`,{className:e.cn(t.default.list,s),...c,children:r.map((e,r)=>(0,n.jsx)(`li`,{className:t.default.item,children:i(e,r)},a?a(e,r):r))})}exports.DataList=r;
+//# sourceMappingURL=DataList.cjs.map

package/dist/components/DataList/DataList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.cjs","names":[],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./DataList.module.css\";\n\nexport interface DataListProps<T> extends HTMLAttributes<HTMLUListElement> {\n    /** The collection to render, one `<li>` per item. */\n    items: readonly T[];\n    /** Renders the contents of each list item. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Derives a stable React key for each item (defaults to the index). */\n    keyExtractor?: (item: T, index: number) => string | number;\n    /** Node rendered in place of the list when `items` is empty. */\n    empty?: ReactNode;\n}\n\n/**\n * Generic, typed list that renders a `<ul>` with one `<li>` per item.\n *\n * The component is generic over the item type so `renderItem` and\n * `keyExtractor` infer their argument types from `items`. When `items` is\n * empty it renders `empty` (or nothing) instead of an empty list.\n *\n * @param items - The collection to render.\n * @param renderItem - Renders the contents of each list item.\n * @param keyExtractor - Optional stable key derivation (defaults to index).\n * @param empty - Optional node shown when there are no items.\n * @returns The rendered list, or the `empty` node when there are no items.\n */\nexport function DataList<T>({\n    items,\n    renderItem,\n    keyExtractor,\n    empty,\n    className,\n    ...props\n}: DataListProps<T>) {\n    if (items.length === 0) {\n        return <>{empty ?? null}</>;\n    }\n\n    return (\n        <ul className={cn(styles.list, className)} {...props}>\n            {items.map((item, index) => (\n                <li key={keyExtractor ? keyExtractor(item, index) : index} className={styles.item}>\n                    {renderItem(item, index)}\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":"4GA4BA,SAAgB,EAAY,CACxB,QACA,aACA,eACA,QACA,YACA,GAAG,GACc,CAKjB,OAJI,EAAM,SAAW,GACV,EAAA,EAAA,IAAA,CAAA,EAAA,SAAA,CAAA,SAAG,GAAS,IAAO,CAAA,GAI1B,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EAAG,GAAI,WAC1C,EAAM,KAAK,EAAM,KACd,EAAA,EAAA,IAAA,CAAC,KAAD,CAA2D,UAAW,EAAA,QAAO,cACxE,EAAW,EAAM,CAAK,CACvB,EAFK,EAAe,EAAa,EAAM,CAAK,EAAI,CAEhD,CACP,CACD,CAAA,CAEZ"}

package/dist/components/DataList/DataList.js

@@ -0,0 +1,18 @@
+import { cn as e } from "../../utils/cn.js";
+import t from "./DataList.module.js";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+//#region src/components/DataList/DataList.tsx
+function i({ items: i, renderItem: a, keyExtractor: o, empty: s, className: c, ...l }) {
+	return i.length === 0 ? /* @__PURE__ */ r(n, { children: s ?? null }) : /* @__PURE__ */ r("ul", {
+		className: e(t.list, c),
+		...l,
+		children: i.map((e, n) => /* @__PURE__ */ r("li", {
+			className: t.item,
+			children: a(e, n)
+		}, o ? o(e, n) : n))
+	});
+}
+//#endregion
+export { i as DataList };
+
+//# sourceMappingURL=DataList.js.map

package/dist/components/DataList/DataList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.js","names":[],"sources":["../../../src/components/DataList/DataList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./DataList.module.css\";\n\nexport interface DataListProps<T> extends HTMLAttributes<HTMLUListElement> {\n    /** The collection to render, one `<li>` per item. */\n    items: readonly T[];\n    /** Renders the contents of each list item. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Derives a stable React key for each item (defaults to the index). */\n    keyExtractor?: (item: T, index: number) => string | number;\n    /** Node rendered in place of the list when `items` is empty. */\n    empty?: ReactNode;\n}\n\n/**\n * Generic, typed list that renders a `<ul>` with one `<li>` per item.\n *\n * The component is generic over the item type so `renderItem` and\n * `keyExtractor` infer their argument types from `items`. When `items` is\n * empty it renders `empty` (or nothing) instead of an empty list.\n *\n * @param items - The collection to render.\n * @param renderItem - Renders the contents of each list item.\n * @param keyExtractor - Optional stable key derivation (defaults to index).\n * @param empty - Optional node shown when there are no items.\n * @returns The rendered list, or the `empty` node when there are no items.\n */\nexport function DataList<T>({\n    items,\n    renderItem,\n    keyExtractor,\n    empty,\n    className,\n    ...props\n}: DataListProps<T>) {\n    if (items.length === 0) {\n        return <>{empty ?? null}</>;\n    }\n\n    return (\n        <ul className={cn(styles.list, className)} {...props}>\n            {items.map((item, index) => (\n                <li key={keyExtractor ? keyExtractor(item, index) : index} className={styles.item}>\n                    {renderItem(item, index)}\n                </li>\n            ))}\n        </ul>\n    );\n}\n"],"mappings":";;;;AA4BA,SAAgB,EAAY,EACxB,UACA,eACA,iBACA,UACA,cACA,GAAG,KACc;CAKjB,OAJI,EAAM,WAAW,IACV,kBAAA,GAAA,EAAA,UAAG,KAAS,KAAO,CAAA,IAI1B,kBAAC,MAAD;EAAI,WAAW,EAAG,EAAO,MAAM,CAAS;EAAG,GAAI;YAC1C,EAAM,KAAK,GAAM,MACd,kBAAC,MAAD;GAA2D,WAAW,EAAO;aACxE,EAAW,GAAM,CAAK;EACvB,GAFK,IAAe,EAAa,GAAM,CAAK,IAAI,CAEhD,CACP;CACD,CAAA;AAEZ"}

package/dist/components/DataList/DataList.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_list_bAP4Q`,t=`tempest_item_oRy5T`,n={list:e,item:t};exports.default=n,exports.item=t,exports.list=e;
+//# sourceMappingURL=DataList.module.cjs.map