tempest-react-sdk 0.23.0 → 0.25.0

package/dist/components/Lightbox/Lightbox.js

@@ -0,0 +1,148 @@
+import { cn as e } from "../../utils/cn.js";
+import { useScrollLock as t } from "../../hooks/use-scroll-lock.js";
+import { useFocusTrap as n } from "../../hooks/use-focus-trap.js";
+import { Portal as r } from "../Portal/Portal.js";
+import i from "./Lightbox.module.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { ChevronLeft as d, ChevronRight as f, X as p } from "lucide-react";
+//#region src/components/Lightbox/Lightbox.tsx
+function m({ items: m, open: h, index: g = 0, onIndexChange: _, onClose: v, showThumbnails: y, showCounter: b = !0, loop: x = !0, closeLabel: S = "Close", previousLabel: C = "Previous image", nextLabel: w = "Next image", className: T }) {
+	let E = s(null), [D, O] = c(g), k = _ !== void 0, A = k ? g : D;
+	n(E, h), t(h);
+	let j = a((e) => {
+		if (m.length === 0) return;
+		let t = x ? (e + m.length) % m.length : Math.max(0, Math.min(e, m.length - 1));
+		k || O(t), _?.(t);
+	}, [
+		k,
+		m.length,
+		x,
+		_
+	]);
+	if (o(() => {
+		k || O(g);
+	}, [g, k]), o(() => {
+		if (!h) return;
+		function e(e) {
+			switch (e.key) {
+				case "Escape":
+					v();
+					break;
+				case "ArrowRight":
+					j(A + 1);
+					break;
+				case "ArrowLeft":
+					j(A - 1);
+					break;
+				case "Home":
+					j(0);
+					break;
+				case "End":
+					j(m.length - 1);
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		}
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		A,
+		m.length,
+		j,
+		v,
+		h
+	]), o(() => {
+		if (!(!h || typeof Image > "u")) for (let e of [-1, 1]) {
+			let t = m[(A + e + m.length) % m.length];
+			if (!t) continue;
+			let n = new Image();
+			n.src = t.src;
+		}
+	}, [
+		A,
+		m,
+		h
+	]), !h || m.length === 0) return null;
+	let M = m[Math.max(0, Math.min(A, m.length - 1))], N = y ?? m.length > 1, P = m.length > 1;
+	return /* @__PURE__ */ l(r, { children: /* @__PURE__ */ u("div", {
+		ref: E,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": M.alt,
+		className: e(i.overlay, T),
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: i.topBar,
+				children: [b && P ? /* @__PURE__ */ u("span", {
+					className: i.counter,
+					children: [
+						A + 1,
+						" / ",
+						m.length
+					]
+				}) : /* @__PURE__ */ l("span", {}), /* @__PURE__ */ l("button", {
+					type: "button",
+					className: i.iconButton,
+					"aria-label": S,
+					onClick: v,
+					children: /* @__PURE__ */ l(p, { size: 20 })
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: i.stage,
+				children: [
+					P ? /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e(i.iconButton, i.nav),
+						"aria-label": C,
+						disabled: !x && A === 0,
+						onClick: () => j(A - 1),
+						children: /* @__PURE__ */ l(d, { size: 24 })
+					}) : null,
+					/* @__PURE__ */ u("figure", {
+						className: i.figure,
+						children: [/* @__PURE__ */ l("img", {
+							src: M.src,
+							alt: M.alt,
+							className: i.image
+						}), M.caption ? /* @__PURE__ */ l("figcaption", {
+							className: i.caption,
+							children: M.caption
+						}) : null]
+					}),
+					P ? /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e(i.iconButton, i.nav),
+						"aria-label": w,
+						disabled: !x && A === m.length - 1,
+						onClick: () => j(A + 1),
+						children: /* @__PURE__ */ l(f, { size: 24 })
+					}) : null
+				]
+			}),
+			N && P ? /* @__PURE__ */ l("div", {
+				className: i.thumbnails,
+				role: "tablist",
+				"aria-label": M.alt,
+				children: m.map((t, n) => /* @__PURE__ */ l("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": n === A,
+					"aria-label": t.alt,
+					className: e(i.thumbnail, n === A && i.thumbnailActive),
+					onClick: () => j(n),
+					children: /* @__PURE__ */ l("img", {
+						src: t.thumbnail ?? t.src,
+						alt: "",
+						className: i.thumbnailImage
+					})
+				}, `${t.src}-${n}`))
+			}) : null
+		]
+	}) });
+}
+//#endregion
+export { m as Lightbox };
+
+//# sourceMappingURL=Lightbox.js.map

package/dist/components/Lightbox/Lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { useScrollLock } from \"@/hooks/use-scroll-lock\";\nimport { cn } from \"@/utils/cn\";\nimport { Portal } from \"../Portal\";\nimport styles from \"./Lightbox.module.css\";\n\n/** One item of the gallery. */\nexport interface LightboxItem {\n    /** Full-size image URL. */\n    src: string;\n    /** Alt text. Required: a gallery of unlabeled images is unusable with a screen reader. */\n    alt: string;\n    /** Caption rendered under the image. */\n    caption?: string;\n    /** Thumbnail URL for the strip. Falls back to `src`. */\n    thumbnail?: string;\n}\n\nexport interface LightboxProps {\n    items: LightboxItem[];\n    /** Whether the overlay is open. */\n    open: boolean;\n    /** Index shown while open. Default `0`. */\n    index?: number;\n    onIndexChange?: (index: number) => void;\n    onClose: () => void;\n    /** Renders the thumbnail strip. Default `true` when there is more than one item. */\n    showThumbnails?: boolean;\n    /** Renders the `3 / 12` counter. Default `true`. */\n    showCounter?: boolean;\n    /**\n     * Wrap around at the ends. Default `true` — in a photo viewer, hitting a dead\n     * end at the last image reads as a bug more often than as a boundary.\n     */\n    loop?: boolean;\n    closeLabel?: string;\n    previousLabel?: string;\n    nextLabel?: string;\n    className?: string;\n}\n\n/**\n * Full-screen image viewer with keyboard navigation.\n *\n * `Esc` closes, `←`/`→` walk the gallery, `Home`/`End` jump to the ends. Focus is\n * trapped inside while open and the page behind is scroll-locked, so the overlay\n * behaves like the dialog it is instead of a fancy `<div>` the keyboard can escape.\n *\n * Only the current image is mounted; neighbours are **preloaded** via `Image()` so\n * pressing `→` does not flash an empty frame.\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n * const [index, setIndex] = useState(0);\n *\n * <Lightbox\n *   open={open}\n *   items={photos.map((p) => ({ src: p.url, alt: p.description }))}\n *   index={index}\n *   onIndexChange={setIndex}\n *   onClose={() => setOpen(false)}\n * />\n * ```\n */\nexport function Lightbox({\n    items,\n    open,\n    index = 0,\n    onIndexChange,\n    onClose,\n    showThumbnails,\n    showCounter = true,\n    loop = true,\n    closeLabel = \"Close\",\n    previousLabel = \"Previous image\",\n    nextLabel = \"Next image\",\n    className,\n}: LightboxProps) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [internalIndex, setInternalIndex] = useState(index);\n    const isControlled = onIndexChange !== undefined;\n    const current = isControlled ? index : internalIndex;\n\n    useFocusTrap(containerRef, open);\n    useScrollLock(open);\n\n    const move = useCallback(\n        (next: number): void => {\n            if (items.length === 0) return;\n            const target = loop\n                ? (next + items.length) % items.length\n                : Math.max(0, Math.min(next, items.length - 1));\n            if (!isControlled) setInternalIndex(target);\n            onIndexChange?.(target);\n        },\n        [isControlled, items.length, loop, onIndexChange],\n    );\n\n    useEffect(() => {\n        if (!isControlled) setInternalIndex(index);\n    }, [index, isControlled]);\n\n    useEffect(() => {\n        if (!open) return;\n        function onKeyDown(event: KeyboardEvent): void {\n            switch (event.key) {\n                case \"Escape\":\n                    onClose();\n                    break;\n                case \"ArrowRight\":\n                    move(current + 1);\n                    break;\n                case \"ArrowLeft\":\n                    move(current - 1);\n                    break;\n                case \"Home\":\n                    move(0);\n                    break;\n                case \"End\":\n                    move(items.length - 1);\n                    break;\n                default:\n                    return;\n            }\n            event.preventDefault();\n        }\n        document.addEventListener(\"keydown\", onKeyDown);\n        return () => document.removeEventListener(\"keydown\", onKeyDown);\n    }, [current, items.length, move, onClose, open]);\n\n    useEffect(() => {\n        if (!open || typeof Image === \"undefined\") return;\n        for (const offset of [-1, 1]) {\n            const neighbour = items[(current + offset + items.length) % items.length];\n            if (!neighbour) continue;\n            const preload = new Image();\n            preload.src = neighbour.src;\n        }\n    }, [current, items, open]);\n\n    if (!open || items.length === 0) return null;\n\n    const item = items[Math.max(0, Math.min(current, items.length - 1))];\n    const withThumbnails = showThumbnails ?? items.length > 1;\n    const multiple = items.length > 1;\n\n    return (\n        <Portal>\n            <div\n                ref={containerRef}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={item.alt}\n                className={cn(styles.overlay, className)}\n            >\n                <div className={styles.topBar}>\n                    {showCounter && multiple ? (\n                        <span className={styles.counter}>\n                            {current + 1} / {items.length}\n                        </span>\n                    ) : (\n                        <span />\n                    )}\n                    <button\n                        type=\"button\"\n                        className={styles.iconButton}\n                        aria-label={closeLabel}\n                        onClick={onClose}\n                    >\n                        <X size={20} />\n                    </button>\n                </div>\n\n                <div className={styles.stage}>\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={previousLabel}\n                            disabled={!loop && current === 0}\n                            onClick={() => move(current - 1)}\n                        >\n                            <ChevronLeft size={24} />\n                        </button>\n                    ) : null}\n\n                    <figure className={styles.figure}>\n                        <img src={item.src} alt={item.alt} className={styles.image} />\n                        {item.caption ? (\n                            <figcaption className={styles.caption}>{item.caption}</figcaption>\n                        ) : null}\n                    </figure>\n\n                    {multiple ? (\n                        <button\n                            type=\"button\"\n                            className={cn(styles.iconButton, styles.nav)}\n                            aria-label={nextLabel}\n                            disabled={!loop && current === items.length - 1}\n                            onClick={() => move(current + 1)}\n                        >\n                            <ChevronRight size={24} />\n                        </button>\n                    ) : null}\n                </div>\n\n                {withThumbnails && multiple ? (\n                    <div className={styles.thumbnails} role=\"tablist\" aria-label={item.alt}>\n                        {items.map((entry, entryIndex) => (\n                            <button\n                                key={`${entry.src}-${entryIndex}`}\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-selected={entryIndex === current}\n                                aria-label={entry.alt}\n                                className={cn(\n                                    styles.thumbnail,\n                                    entryIndex === current && styles.thumbnailActive,\n                                )}\n                                onClick={() => move(entryIndex)}\n                            >\n                                <img\n                                    src={entry.thumbnail ?? entry.src}\n                                    alt=\"\"\n                                    className={styles.thumbnailImage}\n                                />\n                            </button>\n                        ))}\n                    </div>\n                ) : null}\n            </div>\n        </Portal>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Lightbox/Lightbox.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_overlay_ZZFy5`,t=`tempest_overlay-in_xSy6S`,n=`tempest_topBar_KFfyo`,r=`tempest_counter_tVBEK`,i=`tempest_iconButton_475l0`,a=`tempest_stage_MkXLd`,o=`tempest_nav_9nijD`,s=`tempest_figure_pZz5C`,c=`tempest_image_fAx-S`,l=`tempest_caption_yB3pA`,u=`tempest_thumbnails_wROsn`,d=`tempest_thumbnail_Vyp-R`,f=`tempest_thumbnailActive_ucTff`,p=`tempest_thumbnailImage_mvEYb`,m={overlay:e,overlayIn:t,topBar:n,counter:r,iconButton:i,stage:a,nav:o,figure:s,image:c,caption:l,thumbnails:u,thumbnail:d,thumbnailActive:f,thumbnailImage:p};exports.caption=l,exports.counter=r,exports.default=m,exports.figure=s,exports.iconButton=i,exports.image=c,exports.nav=o,exports.overlay=e,exports.overlayIn=t,exports.stage=a,exports.thumbnail=d,exports.thumbnailActive=f,exports.thumbnailImage=p,exports.thumbnails=u,exports.topBar=n;
+//# sourceMappingURL=Lightbox.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.module.cjs","names":[],"sources":["../../../src/components/Lightbox/Lightbox.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal);\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3);\n    padding-top: max(var(--tempest-space-3), var(--tempest-safe-area-top));\n    padding-bottom: max(var(--tempest-space-3), var(--tempest-safe-area-bottom));\n    background-color: rgb(0 0 0 / 0.88);\n    animation: overlay-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@keyframes overlay-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n.topBar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    flex: 0 0 auto;\n}\n\n.counter {\n    color: #ffffff;\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.iconButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: rgb(255 255 255 / 0.12);\n    color: #ffffff;\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.iconButton:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.24);\n}\n\n.iconButton:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.iconButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-3);\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.nav {\n    flex: 0 0 auto;\n}\n\n.figure {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    min-width: 0;\n    min-height: 0;\n}\n\n.image {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.caption {\n    color: rgb(255 255 255 / 0.82);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.thumbnails {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-1);\n}\n\n.thumbnail {\n    flex: 0 0 auto;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 2px solid transparent;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    cursor: pointer;\n    opacity: 0.55;\n    transition:\n        opacity var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.thumbnail:hover {\n    opacity: 0.85;\n}\n\n.thumbnailActive {\n    opacity: 1;\n    border-color: #ffffff;\n}\n\n.thumbnail:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.thumbnailImage {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--tempest-radius-sm) - 1px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay {\n        animation: none;\n    }\n\n    .iconButton,\n    .thumbnail {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/Lightbox/Lightbox.module.js

@@ -0,0 +1,21 @@
+//#region src/components/Lightbox/Lightbox.module.css
+var e = "tempest_overlay_ZZFy5", t = "tempest_overlay-in_xSy6S", n = "tempest_topBar_KFfyo", r = "tempest_counter_tVBEK", i = "tempest_iconButton_475l0", a = "tempest_stage_MkXLd", o = "tempest_nav_9nijD", s = "tempest_figure_pZz5C", c = "tempest_image_fAx-S", l = "tempest_caption_yB3pA", u = "tempest_thumbnails_wROsn", d = "tempest_thumbnail_Vyp-R", f = "tempest_thumbnailActive_ucTff", p = "tempest_thumbnailImage_mvEYb", m = {
+	overlay: e,
+	overlayIn: t,
+	topBar: n,
+	counter: r,
+	iconButton: i,
+	stage: a,
+	nav: o,
+	figure: s,
+	image: c,
+	caption: l,
+	thumbnails: u,
+	thumbnail: d,
+	thumbnailActive: f,
+	thumbnailImage: p
+};
+//#endregion
+export { l as caption, r as counter, m as default, s as figure, i as iconButton, c as image, o as nav, e as overlay, t as overlayIn, a as stage, d as thumbnail, f as thumbnailActive, p as thumbnailImage, u as thumbnails, n as topBar };
+
+//# sourceMappingURL=Lightbox.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.module.js","names":[],"sources":["../../../src/components/Lightbox/Lightbox.module.css"],"sourcesContent":[".overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--tempest-z-modal);\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3);\n    padding: var(--tempest-space-3);\n    padding-top: max(var(--tempest-space-3), var(--tempest-safe-area-top));\n    padding-bottom: max(var(--tempest-space-3), var(--tempest-safe-area-bottom));\n    background-color: rgb(0 0 0 / 0.88);\n    animation: overlay-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n@keyframes overlay-in {\n    from {\n        opacity: 0;\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n.topBar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--tempest-space-3);\n    flex: 0 0 auto;\n}\n\n.counter {\n    color: #ffffff;\n    font-size: var(--tempest-text-sm);\n    font-variant-numeric: tabular-nums;\n}\n\n.iconButton {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border: 0;\n    border-radius: var(--tempest-radius-full);\n    background-color: rgb(255 255 255 / 0.12);\n    color: #ffffff;\n    cursor: pointer;\n    transition: background-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.iconButton:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.24);\n}\n\n.iconButton:disabled {\n    opacity: 0.35;\n    cursor: not-allowed;\n}\n\n.iconButton:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.stage {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-3);\n    flex: 1 1 auto;\n    min-height: 0;\n}\n\n.nav {\n    flex: 0 0 auto;\n}\n\n.figure {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--tempest-space-2);\n    margin: 0;\n    min-width: 0;\n    min-height: 0;\n}\n\n.image {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--tempest-radius-sm);\n}\n\n.caption {\n    color: rgb(255 255 255 / 0.82);\n    font-size: var(--tempest-text-sm);\n    text-align: center;\n}\n\n.thumbnails {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    flex: 0 0 auto;\n    overflow-x: auto;\n    overscroll-behavior-x: contain;\n    padding-bottom: var(--tempest-space-1);\n}\n\n.thumbnail {\n    flex: 0 0 auto;\n    width: 56px;\n    height: 56px;\n    padding: 0;\n    border: 2px solid transparent;\n    border-radius: var(--tempest-radius-sm);\n    background: none;\n    cursor: pointer;\n    opacity: 0.55;\n    transition:\n        opacity var(--tempest-duration-fast) var(--tempest-ease-out),\n        border-color var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.thumbnail:hover {\n    opacity: 0.85;\n}\n\n.thumbnailActive {\n    opacity: 1;\n    border-color: #ffffff;\n}\n\n.thumbnail:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid #ffffff;\n    outline-offset: var(--tempest-focus-ring-offset);\n}\n\n.thumbnailImage {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--tempest-radius-sm) - 1px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .overlay {\n        animation: none;\n    }\n\n    .iconButton,\n    .thumbnail {\n        transition: none;\n    }\n}\n"],"mappings":""}

package/dist/components/ListTile/ListTile.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../utils/cn.cjs"),s=require("./ListTile.module.css.cjs");function m({leading:t,title:o,subtitle:a,trailing:l,onClick:n,disabled:i=!1,selected:r=!1,className:f}){const c=e.jsxs(e.Fragment,{children:[t!==void 0&&e.jsx("span",{className:s.default.leading,children:t}),e.jsxs("span",{className:s.default.body,children:[e.jsx("span",{className:s.default.title,children:o}),a!==void 0&&e.jsx("span",{className:s.default.subtitle,children:a})]}),l!==void 0&&e.jsx("span",{className:s.default.trailing,children:l})]}),d=u.cn(s.default.tile,r&&s.default.selected,i&&s.default.disabled,f);return n?e.jsx("button",{type:"button",className:u.cn(d,s.default.interactive),"aria-pressed":r?!0:void 0,disabled:i,onClick:n,children:c}):e.jsx("div",{className:d,children:c})}exports.ListTile=m;
-//# sourceMappingURL=ListTile.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./ListTile.module.cjs");let n=require("react/jsx-runtime");function r({leading:r,title:i,subtitle:a,trailing:o,onClick:s,disabled:c=!1,selected:l=!1,className:u}){let d=(0,n.jsxs)(n.Fragment,{children:[r!==void 0&&(0,n.jsx)(`span`,{className:t.default.leading,children:r}),(0,n.jsxs)(`span`,{className:t.default.body,children:[(0,n.jsx)(`span`,{className:t.default.title,children:i}),a!==void 0&&(0,n.jsx)(`span`,{className:t.default.subtitle,children:a})]}),o!==void 0&&(0,n.jsx)(`span`,{className:t.default.trailing,children:o})]}),f=e.cn(t.default.tile,l&&t.default.selected,c&&t.default.disabled,u);return s?(0,n.jsx)(`button`,{type:`button`,className:e.cn(f,t.default.interactive),"aria-pressed":l?!0:void 0,disabled:c,onClick:s,children:d}):(0,n.jsx)(`div`,{className:f,children:d})}exports.ListTile=r;
+//# sourceMappingURL=ListTile.cjs.map

package/dist/components/ListTile/ListTile.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListTile.cjs","sources":["../../../src/components/ListTile/ListTile.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ListTile.module.css\";\n\nexport interface ListTileProps {\n    /** Left slot — typically an icon or avatar. */\n    leading?: ReactNode;\n    /** Primary line. Required. */\n    title: ReactNode;\n    /** Secondary line rendered under the title. */\n    subtitle?: ReactNode;\n    /** Right slot — typically an icon, switch or meta text. */\n    trailing?: ReactNode;\n    /** When provided, the tile becomes an interactive button. */\n    onClick?: () => void;\n    /** When true, the tile is dimmed and non-interactive. */\n    disabled?: boolean;\n    /** When true, the tile is highlighted as the active row. */\n    selected?: boolean;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * The canonical Material list row: an optional leading slot, a title with an\n * optional subtitle, and an optional trailing slot. When `onClick` is supplied\n * the tile renders as a full-width, keyboard-accessible `<button>`; otherwise it\n * renders as a static `<div>`.\n *\n * @example\n * <ListTile\n *     leading={<User />}\n *     title=\"Maria Silva\"\n *     subtitle=\"maria@example.com\"\n *     trailing={<ChevronRight />}\n *     onClick={() => open(user)}\n * />\n */\nexport function ListTile({\n    leading,\n    title,\n    subtitle,\n    trailing,\n    onClick,\n    disabled = false,\n    selected = false,\n    className,\n}: ListTileProps) {\n    const content = (\n        <>\n            {leading !== undefined && <span className={styles.leading}>{leading}</span>}\n            <span className={styles.body}>\n                <span className={styles.title}>{title}</span>\n                {subtitle !== undefined && <span className={styles.subtitle}>{subtitle}</span>}\n            </span>\n            {trailing !== undefined && <span className={styles.trailing}>{trailing}</span>}\n        </>\n    );\n\n    const rootClassName = cn(\n        styles.tile,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        className,\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                className={cn(rootClassName, styles.interactive)}\n                aria-pressed={selected ? true : undefined}\n                disabled={disabled}\n                onClick={onClick}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n}\n"],"names":["ListTile","leading","title","subtitle","trailing","onClick","disabled","selected","className","content","jsxs","Fragment","jsx","styles","rootClassName","cn"],"mappings":"4LAsCO,SAASA,EAAS,CACrB,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EAAW,GACX,UAAAC,CACJ,EAAkB,CACd,MAAMC,EACFC,EAAAA,KAAAC,EAAAA,SAAA,CACK,SAAA,CAAAV,IAAY,QAAaW,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,QAAO,QAAU,SAAAZ,EAAQ,EACpES,EAAAA,KAAC,OAAA,CAAK,UAAWG,EAAAA,QAAO,KACpB,SAAA,CAAAD,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,QAAO,MAAQ,SAAAX,EAAM,EACrCC,IAAa,QAAaS,EAAAA,IAAC,QAAK,UAAWC,UAAO,SAAW,SAAAV,CAAA,CAAS,CAAA,EAC3E,EACCC,IAAa,QAAaQ,EAAAA,IAAC,QAAK,UAAWC,UAAO,SAAW,SAAAT,CAAA,CAAS,CAAA,EAC3E,EAGEU,EAAgBC,EAAAA,GAClBF,EAAAA,QAAO,KACPN,GAAYM,EAAAA,QAAO,SACnBP,GAAYO,EAAAA,QAAO,SACnBL,CAAA,EAGJ,OAAIH,EAEIO,EAAAA,IAAC,SAAA,CACG,KAAK,SACL,UAAWG,EAAAA,GAAGD,EAAeD,EAAAA,QAAO,WAAW,EAC/C,eAAcN,EAAW,GAAO,OAChC,SAAAD,EACA,QAAAD,EAEC,SAAAI,CAAA,CAAA,EAKNG,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAgB,SAAAL,EAAQ,CACnD"}
+{"version":3,"file":"ListTile.cjs","names":[],"sources":["../../../src/components/ListTile/ListTile.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ListTile.module.css\";\n\nexport interface ListTileProps {\n    /** Left slot — typically an icon or avatar. */\n    leading?: ReactNode;\n    /** Primary line. Required. */\n    title: ReactNode;\n    /** Secondary line rendered under the title. */\n    subtitle?: ReactNode;\n    /** Right slot — typically an icon, switch or meta text. */\n    trailing?: ReactNode;\n    /** When provided, the tile becomes an interactive button. */\n    onClick?: () => void;\n    /** When true, the tile is dimmed and non-interactive. */\n    disabled?: boolean;\n    /** When true, the tile is highlighted as the active row. */\n    selected?: boolean;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * The canonical Material list row: an optional leading slot, a title with an\n * optional subtitle, and an optional trailing slot. When `onClick` is supplied\n * the tile renders as a full-width, keyboard-accessible `<button>`; otherwise it\n * renders as a static `<div>`.\n *\n * @example\n * <ListTile\n *     leading={<User />}\n *     title=\"Maria Silva\"\n *     subtitle=\"maria@example.com\"\n *     trailing={<ChevronRight />}\n *     onClick={() => open(user)}\n * />\n */\nexport function ListTile({\n    leading,\n    title,\n    subtitle,\n    trailing,\n    onClick,\n    disabled = false,\n    selected = false,\n    className,\n}: ListTileProps) {\n    const content = (\n        <>\n            {leading !== undefined && <span className={styles.leading}>{leading}</span>}\n            <span className={styles.body}>\n                <span className={styles.title}>{title}</span>\n                {subtitle !== undefined && <span className={styles.subtitle}>{subtitle}</span>}\n            </span>\n            {trailing !== undefined && <span className={styles.trailing}>{trailing}</span>}\n        </>\n    );\n\n    const rootClassName = cn(\n        styles.tile,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        className,\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                className={cn(rootClassName, styles.interactive)}\n                aria-pressed={selected ? true : undefined}\n                disabled={disabled}\n                onClick={onClick}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n}\n"],"mappings":"4GAsCA,SAAgB,EAAS,CACrB,UACA,QACA,WACA,WACA,UACA,WAAW,GACX,WAAW,GACX,aACc,CACd,IAAM,GACF,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACK,IAAY,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAC1E,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cAAxB,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC3C,IAAa,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CAC3E,IACL,IAAa,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CAC/E,CAAA,CAAA,EAGA,EAAgB,EAAA,GAClB,EAAA,QAAO,KACP,GAAY,EAAA,QAAO,SACnB,GAAY,EAAA,QAAO,SACnB,CACJ,EAgBA,OAdI,GAEI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,GAAG,EAAe,EAAA,QAAO,WAAW,EAC/C,eAAc,EAAW,GAAO,IAAA,GACtB,WACD,mBAER,CACG,CAAA,GAIT,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,WAAgB,CAAa,CAAA,CACxD"}

package/dist/components/ListTile/ListTile.js

@@ -1,42 +1,41 @@
-import { jsx as s, jsxs as d, Fragment as N } from "react/jsx-runtime";
-import { cn as m } from "../../utils/cn.js";
-import e from "./ListTile.module.css.js";
-function b({
-  leading: a,
-  title: p,
-  subtitle: t,
-  trailing: n,
-  onClick: r,
-  disabled: i = !1,
-  selected: l = !1,
-  className: h
-}) {
-  const c = /* @__PURE__ */ d(N, { children: [
-    a !== void 0 && /* @__PURE__ */ s("span", { className: e.leading, children: a }),
-    /* @__PURE__ */ d("span", { className: e.body, children: [
-      /* @__PURE__ */ s("span", { className: e.title, children: p }),
-      t !== void 0 && /* @__PURE__ */ s("span", { className: e.subtitle, children: t })
-    ] }),
-    n !== void 0 && /* @__PURE__ */ s("span", { className: e.trailing, children: n })
-  ] }), o = m(
-    e.tile,
-    l && e.selected,
-    i && e.disabled,
-    h
-  );
-  return r ? /* @__PURE__ */ s(
-    "button",
-    {
-      type: "button",
-      className: m(o, e.interactive),
-      "aria-pressed": l ? !0 : void 0,
-      disabled: i,
-      onClick: r,
-      children: c
-    }
-  ) : /* @__PURE__ */ s("div", { className: o, children: c });
+import { cn as e } from "../../utils/cn.js";
+import t from "./ListTile.module.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ListTile/ListTile.tsx
+function a({ leading: a, title: o, subtitle: s, trailing: c, onClick: l, disabled: u = !1, selected: d = !1, className: f }) {
+	let p = /* @__PURE__ */ i(n, { children: [
+		a !== void 0 && /* @__PURE__ */ r("span", {
+			className: t.leading,
+			children: a
+		}),
+		/* @__PURE__ */ i("span", {
+			className: t.body,
+			children: [/* @__PURE__ */ r("span", {
+				className: t.title,
+				children: o
+			}), s !== void 0 && /* @__PURE__ */ r("span", {
+				className: t.subtitle,
+				children: s
+			})]
+		}),
+		c !== void 0 && /* @__PURE__ */ r("span", {
+			className: t.trailing,
+			children: c
+		})
+	] }), m = e(t.tile, d && t.selected, u && t.disabled, f);
+	return l ? /* @__PURE__ */ r("button", {
+		type: "button",
+		className: e(m, t.interactive),
+		"aria-pressed": d ? !0 : void 0,
+		disabled: u,
+		onClick: l,
+		children: p
+	}) : /* @__PURE__ */ r("div", {
+		className: m,
+		children: p
+	});
 }
-export {
-  b as ListTile
-};
-//# sourceMappingURL=ListTile.js.map
+//#endregion
+export { a as ListTile };
+
+//# sourceMappingURL=ListTile.js.map

package/dist/components/ListTile/ListTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListTile.js","sources":["../../../src/components/ListTile/ListTile.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ListTile.module.css\";\n\nexport interface ListTileProps {\n    /** Left slot — typically an icon or avatar. */\n    leading?: ReactNode;\n    /** Primary line. Required. */\n    title: ReactNode;\n    /** Secondary line rendered under the title. */\n    subtitle?: ReactNode;\n    /** Right slot — typically an icon, switch or meta text. */\n    trailing?: ReactNode;\n    /** When provided, the tile becomes an interactive button. */\n    onClick?: () => void;\n    /** When true, the tile is dimmed and non-interactive. */\n    disabled?: boolean;\n    /** When true, the tile is highlighted as the active row. */\n    selected?: boolean;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * The canonical Material list row: an optional leading slot, a title with an\n * optional subtitle, and an optional trailing slot. When `onClick` is supplied\n * the tile renders as a full-width, keyboard-accessible `<button>`; otherwise it\n * renders as a static `<div>`.\n *\n * @example\n * <ListTile\n *     leading={<User />}\n *     title=\"Maria Silva\"\n *     subtitle=\"maria@example.com\"\n *     trailing={<ChevronRight />}\n *     onClick={() => open(user)}\n * />\n */\nexport function ListTile({\n    leading,\n    title,\n    subtitle,\n    trailing,\n    onClick,\n    disabled = false,\n    selected = false,\n    className,\n}: ListTileProps) {\n    const content = (\n        <>\n            {leading !== undefined && <span className={styles.leading}>{leading}</span>}\n            <span className={styles.body}>\n                <span className={styles.title}>{title}</span>\n                {subtitle !== undefined && <span className={styles.subtitle}>{subtitle}</span>}\n            </span>\n            {trailing !== undefined && <span className={styles.trailing}>{trailing}</span>}\n        </>\n    );\n\n    const rootClassName = cn(\n        styles.tile,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        className,\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                className={cn(rootClassName, styles.interactive)}\n                aria-pressed={selected ? true : undefined}\n                disabled={disabled}\n                onClick={onClick}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n}\n"],"names":["ListTile","leading","title","subtitle","trailing","onClick","disabled","selected","className","content","jsxs","Fragment","jsx","styles","rootClassName","cn"],"mappings":";;;AAsCO,SAASA,EAAS;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC;AACJ,GAAkB;AACd,QAAMC,IACF,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAV,MAAY,UAAa,gBAAAW,EAAC,QAAA,EAAK,WAAWC,EAAO,SAAU,UAAAZ,GAAQ;AAAA,IACpE,gBAAAS,EAAC,QAAA,EAAK,WAAWG,EAAO,MACpB,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,WAAWC,EAAO,OAAQ,UAAAX,GAAM;AAAA,MACrCC,MAAa,UAAa,gBAAAS,EAAC,UAAK,WAAWC,EAAO,UAAW,UAAAV,EAAA,CAAS;AAAA,IAAA,GAC3E;AAAA,IACCC,MAAa,UAAa,gBAAAQ,EAAC,UAAK,WAAWC,EAAO,UAAW,UAAAT,EAAA,CAAS;AAAA,EAAA,GAC3E,GAGEU,IAAgBC;AAAA,IAClBF,EAAO;AAAA,IACPN,KAAYM,EAAO;AAAA,IACnBP,KAAYO,EAAO;AAAA,IACnBL;AAAA,EAAA;AAGJ,SAAIH,IAEI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAWG,EAAGD,GAAeD,EAAO,WAAW;AAAA,MAC/C,gBAAcN,IAAW,KAAO;AAAA,MAChC,UAAAD;AAAA,MACA,SAAAD;AAAA,MAEC,UAAAI;AAAA,IAAA;AAAA,EAAA,IAKN,gBAAAG,EAAC,OAAA,EAAI,WAAWE,GAAgB,UAAAL,GAAQ;AACnD;"}
+{"version":3,"file":"ListTile.js","names":[],"sources":["../../../src/components/ListTile/ListTile.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ListTile.module.css\";\n\nexport interface ListTileProps {\n    /** Left slot — typically an icon or avatar. */\n    leading?: ReactNode;\n    /** Primary line. Required. */\n    title: ReactNode;\n    /** Secondary line rendered under the title. */\n    subtitle?: ReactNode;\n    /** Right slot — typically an icon, switch or meta text. */\n    trailing?: ReactNode;\n    /** When provided, the tile becomes an interactive button. */\n    onClick?: () => void;\n    /** When true, the tile is dimmed and non-interactive. */\n    disabled?: boolean;\n    /** When true, the tile is highlighted as the active row. */\n    selected?: boolean;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * The canonical Material list row: an optional leading slot, a title with an\n * optional subtitle, and an optional trailing slot. When `onClick` is supplied\n * the tile renders as a full-width, keyboard-accessible `<button>`; otherwise it\n * renders as a static `<div>`.\n *\n * @example\n * <ListTile\n *     leading={<User />}\n *     title=\"Maria Silva\"\n *     subtitle=\"maria@example.com\"\n *     trailing={<ChevronRight />}\n *     onClick={() => open(user)}\n * />\n */\nexport function ListTile({\n    leading,\n    title,\n    subtitle,\n    trailing,\n    onClick,\n    disabled = false,\n    selected = false,\n    className,\n}: ListTileProps) {\n    const content = (\n        <>\n            {leading !== undefined && <span className={styles.leading}>{leading}</span>}\n            <span className={styles.body}>\n                <span className={styles.title}>{title}</span>\n                {subtitle !== undefined && <span className={styles.subtitle}>{subtitle}</span>}\n            </span>\n            {trailing !== undefined && <span className={styles.trailing}>{trailing}</span>}\n        </>\n    );\n\n    const rootClassName = cn(\n        styles.tile,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        className,\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                className={cn(rootClassName, styles.interactive)}\n                aria-pressed={selected ? true : undefined}\n                disabled={disabled}\n                onClick={onClick}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n}\n"],"mappings":";;;;AAsCA,SAAgB,EAAS,EACrB,YACA,UACA,aACA,aACA,YACA,cAAW,IACX,cAAW,IACX,gBACc;CACd,IAAM,IACF,kBAAA,GAAA,EAAA,UAAA;EACK,MAAY,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAU;EAAc,CAAA;EAC1E,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACI,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,GAC3C,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;GAAe,CAAA,CAC3E;;EACL,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAW;EAAe,CAAA;CAC/E,EAAA,CAAA,GAGA,IAAgB,EAClB,EAAO,MACP,KAAY,EAAO,UACnB,KAAY,EAAO,UACnB,CACJ;CAgBA,OAdI,IAEI,kBAAC,UAAD;EACI,MAAK;EACL,WAAW,EAAG,GAAe,EAAO,WAAW;EAC/C,gBAAc,IAAW,KAAO,KAAA;EACtB;EACD;YAER;CACG,CAAA,IAIT,kBAAC,OAAD;EAAK,WAAW;YAAgB;CAAa,CAAA;AACxD"}

package/dist/components/ListTile/ListTile.module.cjs

@@ -0,0 +1,2 @@
+var e=`tempest_tile_ZpED6`,t=`tempest_interactive_3ICXQ`,n=`tempest_selected_dMY11`,r=`tempest_disabled_HnXxf`,i=`tempest_leading_gSuBb`,a=`tempest_trailing_cVd1n`,o=`tempest_body_gyEl2`,s=`tempest_title_jWFBN`,c=`tempest_subtitle_GUtn7`,l={tile:e,interactive:t,selected:n,disabled:r,leading:i,trailing:a,body:o,title:s,subtitle:c};exports.body=o,exports.default=l,exports.disabled=r,exports.interactive=t,exports.leading=i,exports.selected=n,exports.subtitle=c,exports.tile=e,exports.title=s,exports.trailing=a;
+//# sourceMappingURL=ListTile.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListTile.module.cjs","names":[],"sources":["../../../src/components/ListTile/ListTile.module.css"],"sourcesContent":[".tile {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    width: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    text-align: left;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n}\n\n.interactive {\n    cursor: pointer;\n    transition: background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.interactive:hover {\n    background: var(--tempest-surface-2);\n}\n\n.interactive:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.selected {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.interactive.selected:hover {\n    background: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n}\n\n.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n}\n\n.leading,\n.trailing {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    line-height: 1;\n}\n\n.trailing {\n    margin-left: auto;\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n.title {\n    line-height: var(--tempest-leading-snug, 1.3);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.subtitle {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug, 1.3);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.selected .subtitle {\n    color: var(--tempest-primary);\n    opacity: 0.8;\n}\n"],"mappings":""}

package/dist/components/ListTile/ListTile.module.js

@@ -0,0 +1,16 @@
+//#region src/components/ListTile/ListTile.module.css
+var e = "tempest_tile_ZpED6", t = "tempest_interactive_3ICXQ", n = "tempest_selected_dMY11", r = "tempest_disabled_HnXxf", i = "tempest_leading_gSuBb", a = "tempest_trailing_cVd1n", o = "tempest_body_gyEl2", s = "tempest_title_jWFBN", c = "tempest_subtitle_GUtn7", l = {
+	tile: e,
+	interactive: t,
+	selected: n,
+	disabled: r,
+	leading: i,
+	trailing: a,
+	body: o,
+	title: s,
+	subtitle: c
+};
+//#endregion
+export { o as body, l as default, r as disabled, t as interactive, i as leading, n as selected, c as subtitle, e as tile, s as title, a as trailing };
+
+//# sourceMappingURL=ListTile.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListTile.module.js","names":[],"sources":["../../../src/components/ListTile/ListTile.module.css"],"sourcesContent":[".tile {\n    display: flex;\n    align-items: center;\n    gap: var(--tempest-space-3);\n    width: 100%;\n    padding: var(--tempest-space-3) var(--tempest-space-4);\n    background: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    text-align: left;\n    border: 0;\n    border-radius: var(--tempest-radius-md);\n}\n\n.interactive {\n    cursor: pointer;\n    transition: background var(--tempest-duration-fast, 120ms) var(--tempest-ease-out, ease-out);\n}\n\n.interactive:hover {\n    background: var(--tempest-surface-2);\n}\n\n.interactive:focus-visible {\n    outline: var(--tempest-focus-ring-width, 2px) solid\n        var(--tempest-focus-ring-color, var(--tempest-primary));\n    outline-offset: var(--tempest-focus-ring-offset, 2px);\n}\n\n.selected {\n    background: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n.interactive.selected:hover {\n    background: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n}\n\n.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n    pointer-events: none;\n}\n\n.leading,\n.trailing {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    line-height: 1;\n}\n\n.trailing {\n    margin-left: auto;\n    color: var(--tempest-text-muted);\n}\n\n.body {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1 1 auto;\n}\n\n.title {\n    line-height: var(--tempest-leading-snug, 1.3);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.subtitle {\n    color: var(--tempest-text-muted);\n    font-size: var(--tempest-text-xs);\n    line-height: var(--tempest-leading-snug, 1.3);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.selected .subtitle {\n    color: var(--tempest-primary);\n    opacity: 0.8;\n}\n"],"mappings":""}

package/dist/components/Menubar/Menubar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),b=require("../../utils/cn.cjs"),s=require("./Menubar.module.css.cjs");function j(a){return"separator"in a}function y({menus:a,className:m,...w}){const[l,i]=u.useState(-1),g=u.useId(),p=u.useRef(null),d=u.useRef([]),f=u.useCallback(()=>{i(-1)},[]);return u.useEffect(()=>{if(l===-1)return;const c=e=>{if(e.key==="Escape"){f(),d.current[l]?.focus();return}if(e.key==="ArrowRight"){e.preventDefault();const o=(l+1)%a.length;i(o),d.current[o]?.focus()}if(e.key==="ArrowLeft"){e.preventDefault();const o=(l-1+a.length)%a.length;i(o),d.current[o]?.focus()}},t=e=>{p.current&&!p.current.contains(e.target)&&f()};return window.addEventListener("keydown",c),window.addEventListener("mousedown",t),()=>{window.removeEventListener("keydown",c),window.removeEventListener("mousedown",t)}},[l,a.length,f]),n.jsx("div",{ref:p,role:"menubar",className:b.cn(s.default.root,m),...w,children:a.map((c,t)=>{const e=l===t,o=`${g}-panel-${t}`;return n.jsxs("div",{className:s.default.menu,children:[n.jsx("button",{ref:r=>{d.current[t]=r},type:"button",role:"menuitem","aria-haspopup":"menu","aria-expanded":e,"aria-controls":e?o:void 0,className:b.cn(s.default.trigger,e&&s.default.triggerOpen),onClick:()=>i(r=>r===t?-1:t),children:c.label}),e&&n.jsx("ul",{id:o,role:"menu",className:s.default.panel,children:c.items.map((r,h)=>j(r)?n.jsx("li",{role:"separator",className:s.default.separator,"aria-hidden":!0},h):n.jsx("li",{role:"none",children:n.jsxs("button",{type:"button",role:"menuitem",className:s.default.item,disabled:r.disabled,onClick:()=>{r.onSelect?.(),f()},children:[n.jsx("span",{className:s.default.itemLabel,children:r.label}),r.shortcut&&n.jsx("span",{className:s.default.shortcut,children:r.shortcut})]})},h))})]},t)})})}exports.Menubar=y;
-//# sourceMappingURL=Menubar.cjs.map
+const e=require("../../utils/cn.cjs"),t=require("./Menubar.module.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e){return`separator`in e}function a({menus:a,className:o,...s}){let[c,l]=(0,n.useState)(-1),u=(0,n.useId)(),d=(0,n.useRef)(null),f=(0,n.useRef)([]),p=(0,n.useCallback)(()=>{l(-1)},[]);return(0,n.useEffect)(()=>{if(c===-1)return;let e=e=>{if(e.key===`Escape`){p(),f.current[c]?.focus();return}if(e.key===`ArrowRight`){e.preventDefault();let t=(c+1)%a.length;l(t),f.current[t]?.focus()}if(e.key===`ArrowLeft`){e.preventDefault();let t=(c-1+a.length)%a.length;l(t),f.current[t]?.focus()}},t=e=>{d.current&&!d.current.contains(e.target)&&p()};return window.addEventListener(`keydown`,e),window.addEventListener(`mousedown`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`mousedown`,t)}},[c,a.length,p]),(0,r.jsx)(`div`,{ref:d,role:`menubar`,className:e.cn(t.default.root,o),...s,children:a.map((n,a)=>{let o=c===a,s=`${u}-panel-${a}`;return(0,r.jsxs)(`div`,{className:t.default.menu,children:[(0,r.jsx)(`button`,{ref:e=>{f.current[a]=e},type:`button`,role:`menuitem`,"aria-haspopup":`menu`,"aria-expanded":o,"aria-controls":o?s:void 0,className:e.cn(t.default.trigger,o&&t.default.triggerOpen),onClick:()=>l(e=>e===a?-1:a),children:n.label}),o&&(0,r.jsx)(`ul`,{id:s,role:`menu`,className:t.default.panel,children:n.items.map((e,n)=>i(e)?(0,r.jsx)(`li`,{role:`separator`,className:t.default.separator,"aria-hidden":!0},n):(0,r.jsx)(`li`,{role:`none`,children:(0,r.jsxs)(`button`,{type:`button`,role:`menuitem`,className:t.default.item,disabled:e.disabled,onClick:()=>{e.onSelect?.(),p()},children:[(0,r.jsx)(`span`,{className:t.default.itemLabel,children:e.label}),e.shortcut&&(0,r.jsx)(`span`,{className:t.default.shortcut,children:e.shortcut})]})},n))})]},a)})})}exports.Menubar=a;
+//# sourceMappingURL=Menubar.cjs.map

package/dist/components/Menubar/Menubar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menubar.cjs","sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n}\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                triggerRefs.current[openIndex]?.focus();\n                return;\n            }\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.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    }, [openIndex, menus.length, close]);\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open && (\n                            <ul id={panelId} role=\"menu\" className={styles.panel}>\n                                {menu.items.map((item, itemIndex) => {\n                                    if (isSeparator(item)) {\n                                        return (\n                                            <li\n                                                key={itemIndex}\n                                                role=\"separator\"\n                                                className={styles.separator}\n                                                aria-hidden\n                                            />\n                                        );\n                                    }\n                                    return (\n                                        <li key={itemIndex} role=\"none\">\n                                            <button\n                                                type=\"button\"\n                                                role=\"menuitem\"\n                                                className={styles.item}\n                                                disabled={item.disabled}\n                                                onClick={() => {\n                                                    item.onSelect?.();\n                                                    close();\n                                                }}\n                                            >\n                                                <span className={styles.itemLabel}>\n                                                    {item.label}\n                                                </span>\n                                                {item.shortcut && (\n                                                    <span className={styles.shortcut}>\n                                                        {item.shortcut}\n                                                    </span>\n                                                )}\n                                            </button>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"names":["isSeparator","item","Menubar","menus","className","props","openIndex","setOpenIndex","useState","baseId","useId","rootRef","useRef","triggerRefs","close","useCallback","useEffect","onKey","event","next","prev","onDown","cn","styles","menu","index","open","panelId","jsxs","jsx","el","itemIndex"],"mappings":"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"}
+{"version":3,"file":"Menubar.cjs","names":[],"sources":["../../../src/components/Menubar/Menubar.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Menubar.module.css\";\n\nexport type MenubarItem =\n    | {\n          /** Visible label for the action. */\n          label: ReactNode;\n          /** Invoked when the action is selected. */\n          onSelect?: () => void;\n          /** Disable the action. */\n          disabled?: boolean;\n          /** Optional shortcut hint rendered right-aligned (e.g. `\"⌘S\"`). */\n          shortcut?: string;\n      }\n    | { separator: true };\n\nexport interface MenubarMenu {\n    /** Top-level menu label (e.g. `\"File\"`). */\n    label: ReactNode;\n    /** Items shown in the menu's dropdown. */\n    items: MenubarItem[];\n}\n\nexport interface MenubarProps extends HTMLAttributes<HTMLDivElement> {\n    /** Top-level menus rendered left-to-right. */\n    menus: MenubarMenu[];\n}\n\nfunction isSeparator(item: MenubarItem): item is { separator: true } {\n    return \"separator\" in item;\n}\n\n/**\n * Application menubar (File / Edit-style).\n *\n * - `role=\"menubar\"`; each menu is a button that opens a dropdown.\n * - Arrow Left/Right moves between menus (wrapping); opening one closes others.\n * - Closes on outside click, Escape, or selecting an item.\n * - Items may carry a `shortcut` (right-aligned) or be a `{ separator: true }`.\n *\n * @example\n * <Menubar\n *     menus={[\n *         {\n *             label: \"File\",\n *             items: [\n *                 { label: \"New\", shortcut: \"⌘N\", onSelect: () => create() },\n *                 { separator: true },\n *                 { label: \"Quit\", onSelect: () => quit() },\n *             ],\n *         },\n *     ]}\n * />\n */\nexport function Menubar({ menus, className, ...props }: MenubarProps) {\n    const [openIndex, setOpenIndex] = useState<number>(-1);\n    const baseId = useId();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n    const close = useCallback((): void => {\n        setOpenIndex(-1);\n    }, []);\n\n    useEffect(() => {\n        if (openIndex === -1) return;\n        const onKey = (event: KeyboardEvent): void => {\n            if (event.key === \"Escape\") {\n                close();\n                triggerRefs.current[openIndex]?.focus();\n                return;\n            }\n            if (event.key === \"ArrowRight\") {\n                event.preventDefault();\n                const next = (openIndex + 1) % menus.length;\n                setOpenIndex(next);\n                triggerRefs.current[next]?.focus();\n            }\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault();\n                const prev = (openIndex - 1 + menus.length) % menus.length;\n                setOpenIndex(prev);\n                triggerRefs.current[prev]?.focus();\n            }\n        };\n        const onDown = (event: MouseEvent): void => {\n            if (rootRef.current && !rootRef.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    }, [openIndex, menus.length, close]);\n\n    return (\n        <div ref={rootRef} role=\"menubar\" className={cn(styles.root, className)} {...props}>\n            {menus.map((menu, index) => {\n                const open = openIndex === index;\n                const panelId = `${baseId}-panel-${index}`;\n                return (\n                    <div key={index} className={styles.menu}>\n                        <button\n                            ref={(el) => {\n                                triggerRefs.current[index] = el;\n                            }}\n                            type=\"button\"\n                            role=\"menuitem\"\n                            aria-haspopup=\"menu\"\n                            aria-expanded={open}\n                            aria-controls={open ? panelId : undefined}\n                            className={cn(styles.trigger, open && styles.triggerOpen)}\n                            onClick={() => setOpenIndex((prev) => (prev === index ? -1 : index))}\n                        >\n                            {menu.label}\n                        </button>\n                        {open && (\n                            <ul id={panelId} role=\"menu\" className={styles.panel}>\n                                {menu.items.map((item, itemIndex) => {\n                                    if (isSeparator(item)) {\n                                        return (\n                                            <li\n                                                key={itemIndex}\n                                                role=\"separator\"\n                                                className={styles.separator}\n                                                aria-hidden\n                                            />\n                                        );\n                                    }\n                                    return (\n                                        <li key={itemIndex} role=\"none\">\n                                            <button\n                                                type=\"button\"\n                                                role=\"menuitem\"\n                                                className={styles.item}\n                                                disabled={item.disabled}\n                                                onClick={() => {\n                                                    item.onSelect?.();\n                                                    close();\n                                                }}\n                                            >\n                                                <span className={styles.itemLabel}>\n                                                    {item.label}\n                                                </span>\n                                                {item.shortcut && (\n                                                    <span className={styles.shortcut}>\n                                                        {item.shortcut}\n                                                    </span>\n                                                )}\n                                            </button>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        )}\n                    </div>\n                );\n            })}\n        </div>\n    );\n}\n"],"mappings":"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"}