npm - @gnome-ui/react - Versions diffs - 1.36.1 → 1.36.3 - Mend

@gnome-ui/react 1.36.1 → 1.36.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (907) hide show

package/dist/components/Dialog/Dialog.js ADDED Viewed

@@ -0,0 +1,78 @@
+import { FOCUSABLE as e, trapFocus as t, useVisualViewport as n } from "./dialogUtils.js";
+import r from "./Dialog.module.css.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
+import { createPortal as c } from "react-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/Dialog/Dialog.tsx
+function d({ open: d, title: f, children: p, buttons: m = [], onClose: h, closeOnBackdrop: g = !0, role: _ = "dialog", responses: v, onResponse: y, className: b, ...x }) {
+	let S = s(null), C = o(), w = s(null), T = !!v, E = n();
+	a(() => {
+		d ? (w.current = document.activeElement, (S.current?.querySelector(e))?.focus()) : w.current?.focus();
+	}, [d]);
+	let D = i(() => {
+		let e = v?.find((e) => e.variant !== "destructive" && !e.disabled);
+		e && y?.(e.id);
+	}, [v, y]), O = T ? D : g ? h : void 0, k = i((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), T ? D() : h?.();
+			return;
+		}
+		t(e, S);
+	}, [
+		T,
+		D,
+		h
+	]);
+	if (!d) return null;
+	let A = () => T && v ? /* @__PURE__ */ l("div", {
+		className: r.footer,
+		children: v.map((e) => /* @__PURE__ */ l("button", {
+			type: "button",
+			disabled: e.disabled,
+			className: [r.btn, r[`btn-${e.variant ?? "default"}`]].filter(Boolean).join(" "),
+			onClick: () => y?.(e.id),
+			children: e.label
+		}, e.id))
+	}) : m.length > 0 ? /* @__PURE__ */ l("div", {
+		className: r.footer,
+		children: m.map((e) => /* @__PURE__ */ l("button", {
+			type: "button",
+			disabled: e.disabled,
+			className: [r.btn, r[`btn-${e.variant ?? "default"}`]].filter(Boolean).join(" "),
+			onClick: e.onClick,
+			children: e.label
+		}, e.label))
+	}) : null, j = /* @__PURE__ */ l("div", {
+		className: r.backdrop,
+		style: E,
+		onClick: O,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ u("div", {
+			ref: S,
+			role: _,
+			"aria-modal": "true",
+			"aria-labelledby": C,
+			className: [r.dialog, b].filter(Boolean).join(" "),
+			onKeyDown: k,
+			onClick: (e) => e.stopPropagation(),
+			...x,
+			children: [
+				f && /* @__PURE__ */ l("div", {
+					id: C,
+					className: r.title,
+					children: f
+				}),
+				p && /* @__PURE__ */ l("div", {
+					className: r.body,
+					children: p
+				}),
+				A()
+			]
+		})
+	});
+	return typeof document > "u" ? j : c(j, document.body);
+}
+//#endregion
+export { d as Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n useEffect,\n useRef,\n useCallback,\n useId,\n type KeyboardEvent,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { trapFocus, FOCUSABLE, useVisualViewport } from \"./dialogUtils\";\nimport styles from \"./Dialog.module.css\";\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = \"default\" | \"suggested\" | \"destructive\";\n\nexport interface AlertDialogResponse {\n /**\n * Unique identifier returned via `onResponse`.\n * Use `\"cancel\"` by convention for the dismissive action.\n */\n id: string;\n /** Button label. */\n label: string;\n /** Visual emphasis. Defaults to `\"default\"`. */\n variant?: AlertDialogResponseVariant;\n /** Disables the button. */\n disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n /** Button label. */\n label: string;\n /** Visual variant. Defaults to `\"default\"`. */\n variant?: \"default\" | \"suggested\" | \"destructive\";\n /** Called when the button is clicked. */\n onClick: () => void;\n /** Whether the button is disabled. */\n disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n /** Whether the dialog is visible. */\n open: boolean;\n\n // ── Standard dialog ──────────────────────────────────────────────────────\n\n /** Dialog heading. */\n title?: ReactNode;\n /** Body content. */\n children?: ReactNode;\n /** Action buttons (standard dialog API). */\n buttons?: DialogButton[];\n /** Called on Escape or backdrop click. */\n onClose?: () => void;\n /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n closeOnBackdrop?: boolean;\n\n // ── AlertDialog extension ─────────────────────────────────────────────────\n\n /**\n * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n * screen readers announce it immediately. Defaults to `\"dialog\"`.\n *\n * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n * over `buttons`/`onClick` for semantic clarity.\n */\n role?: \"dialog\" | \"alertdialog\";\n\n /**\n * Response buttons (AlertDialog API). Alternative to `buttons` — each\n * response has a semantic `id` returned via `onResponse`.\n * Escape and backdrop click fire the first non-destructive response.\n */\n responses?: AlertDialogResponse[];\n\n /**\n * Called with the `id` of the response button clicked.\n * Required when `responses` is provided.\n */\n onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport function Dialog({\n open,\n title,\n children,\n buttons = [],\n onClose,\n closeOnBackdrop = true,\n role = \"dialog\",\n responses,\n onResponse,\n className,\n ...props\n}: DialogProps) {\n const dialogRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element | null>(null);\n\n const isAlert = !!responses;\n const viewportStyle = useVisualViewport();\n\n // ── Focus management ───────────────────────────────────────────────────────\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement | null)?.focus();\n }\n }, [open]);\n\n // ── Dismiss helpers ────────────────────────────────────────────────────────\n const dismissAlert = useCallback(() => {\n const cancel = responses?.find((r) => r.variant !== \"destructive\" && !r.disabled);\n if (cancel) onResponse?.(cancel.id);\n }, [responses, onResponse]);\n\n const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n // ── Keyboard ───────────────────────────────────────────────────────────────\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n if (isAlert) dismissAlert();\n else onClose?.();\n return;\n }\n trapFocus(e, dialogRef);\n },\n [isAlert, dismissAlert, onClose]\n );\n\n if (!open) return null;\n\n // ── Render buttons (standard or alert) ────────────────────────────────────\n const renderButtons = () => {\n if (isAlert && responses) {\n return (\n <div className={styles.footer}>\n {responses.map((r) => (\n <button\n key={r.id}\n type=\"button\"\n disabled={r.disabled}\n className={[styles.btn, styles[`btn-${r.variant ?? \"default\"}`]].filter(Boolean).join(\" \")}\n onClick={() => onResponse?.(r.id)}\n >\n {r.label}\n </button>\n ))}\n </div>\n );\n }\n if (buttons.length > 0) {\n return (\n <div className={styles.footer}>\n {buttons.map((btn) => (\n <button\n key={btn.label}\n type=\"button\"\n disabled={btn.disabled}\n className={[styles.btn, styles[`btn-${btn.variant ?? \"default\"}`]].filter(Boolean).join(\" \")}\n onClick={btn.onClick}\n >\n {btn.label}\n </button>\n ))}\n </div>\n );\n }\n return null;\n };\n\n const node = (\n <div\n className={styles.backdrop}\n style={viewportStyle}\n onClick={handleBackdrop}\n aria-hidden=\"true\"\n >\n <div\n ref={dialogRef}\n role={role}\n aria-modal=\"true\"\n aria-labelledby={titleId}\n className={[styles.dialog, className].filter(Boolean).join(\" \")}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {title && <div id={titleId} className={styles.title}>{title}</div>}\n {children && <div className={styles.body}>{children}</div>}\n {renderButtons()}\n </div>\n </div>\n );\n\n if (typeof document === \"undefined\") return node;\n return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;AAqGA,SAAgB,EAAO,EACrB,SACA,UACA,aACA,aAAU,EAAE,EACZ,YACA,qBAAkB,IAClB,UAAO,UACP,cACA,eACA,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAEhD,IAAU,CAAC,CAAC,GACZ,IAAgB,GAAmB;AAGzC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAU,SAAS,cAA2B,EAAU,GAC/D,OAAO,IAEV,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAS,GAAW,MAAM,MAAM,EAAE,YAAY,iBAAiB,CAAC,EAAE,SAAS;AACjF,EAAI,KAAQ,IAAa,EAAO,GAAG;IAClC,CAAC,GAAW,EAAW,CAAC,EAErB,IAAiB,IAAU,IAAe,IAAkB,IAAU,KAAA,GAGtE,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EACd,IAAS,GAAc,GACtB,KAAW;AAChB;;AAEF,IAAU,GAAG,EAAU;IAEzB;EAAC;EAAS;EAAc;EAAQ,CACjC;AAED,KAAI,CAAC,EAAM,QAAO;CAGlB,IAAM,UACA,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAU,KAAK,MACd,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAE;GACZ,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAE,WAAW,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC1F,eAAe,IAAa,EAAE,GAAG;aAEhC,EAAE;GACI,EAPF,EAAE,GAOA,CACT;EACE,CAAA,GAGN,EAAQ,SAAS,IAEjB,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAI;GACd,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAI,WAAW,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC5F,SAAS,EAAI;aAEZ,EAAI;GACE,EAPF,EAAI,MAOF,CACT;EACE,CAAA,GAGH,MAGH,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS;EACT,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACC;GACN,cAAW;GACX,mBAAiB;GACjB,WAAW,CAAC,EAAO,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC/D,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;GACnC,GAAI;aARN;IAUG,KAAS,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eAAQ;KAAY,CAAA;IACjE,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;KAAe,CAAA;IACzD,GAAe;IACZ;;EACF,CAAA;AAIR,QADI,OAAO,WAAa,MAAoB,IACrC,EAAa,GAAM,SAAS,KAAK"}

package/dist/components/Dialog/Dialog.module.css.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e=`_backdrop_gg1yz_3`,t=`_dialog_gg1yz_26`,n=`_title_gg1yz_56`,r=`_body_gg1yz_68`,i=`_footer_gg1yz_89`,a=`_btn_gg1yz_96`,o={backdrop:e,"backdrop-in":`_backdrop-in_gg1yz_1`,dialog:t,"dialog-in":`_dialog-in_gg1yz_1`,title:n,body:r,footer:i,btn:a,"btn-default":`_btn-default_gg1yz_144`,"btn-suggested":`_btn-suggested_gg1yz_148`,"btn-destructive":`_btn-destructive_gg1yz_153`};exports.default=o;
2	+ //# sourceMappingURL=Dialog.module.css.cjs.map

package/dist/components/Dialog/Dialog.module.css.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialog.module.css.cjs","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n position: relative;\n width: min(480px, calc(100vw - 48px));\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n border-radius: var(--gnome-radius-xl, 16px);\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.25),\n 0 0 0 1px rgba(0, 0, 0, 0.08);\n\n overflow: hidden;\n\n animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.92) translateY(-8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n padding: var(--gnome-space-4, 24px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n text-align: center;\n}\n\n.dialog:has(.body) .title {\n padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) 0 !important;\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: var(--gnome-opacity-dim, 0.7);\n\n text-align: center;\n}\n\n/* ─── Footer (buttons) ──────────────────────────────────────────────────────── */\n\n.footer {\n display: flex;\n flex-direction: column;\n border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n/* Each button gets a full-width row separated by hairlines */\n.btn {\n appearance: none;\n border: none;\n border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n background: transparent;\n width: 100%;\n padding: 14px var(--gnome-space-4, 24px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-accent-color, #3584e4);\n\n cursor: pointer;\n text-align: center;\n\n transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child {\n border-bottom: none;\n}\n\n.btn:hover:not(:disabled) {\n background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n background-color: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.btn:focus {\n outline: none;\n}\n\n.btn:focus-visible {\n outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: -3px;\n}\n\n.btn:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.btn-suggested {\n color: var(--gnome-accent-color, #3584e4);\n font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-destructive {\n color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .dialog {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n .footer {\n border-top-color: rgba(255, 255, 255, 0.08);\n }\n\n .btn {\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .dialog {\n animation: none;\n }\n\n .btn {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/Dialog/Dialog.module.css.js ADDED Viewed

@@ -0,0 +1,18 @@
+//#region src/components/Dialog/Dialog.module.css
+var e = "_backdrop_gg1yz_3", t = "_dialog_gg1yz_26", n = "_title_gg1yz_56", r = "_body_gg1yz_68", i = "_footer_gg1yz_89", a = "_btn_gg1yz_96", o = {
+	backdrop: e,
+	"backdrop-in": "_backdrop-in_gg1yz_1",
+	dialog: t,
+	"dialog-in": "_dialog-in_gg1yz_1",
+	title: n,
+	body: r,
+	footer: i,
+	btn: a,
+	"btn-default": "_btn-default_gg1yz_144",
+	"btn-suggested": "_btn-suggested_gg1yz_148",
+	"btn-destructive": "_btn-destructive_gg1yz_153"
+};
+//#endregion
+export { o as default };
+//# sourceMappingURL=Dialog.module.css.js.map

package/dist/components/Dialog/Dialog.module.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialog.module.css.js","names":[],"sources":["../../../src/components/Dialog/Dialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n position: relative;\n width: min(480px, calc(100vw - 48px));\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n border-radius: var(--gnome-radius-xl, 16px);\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.25),\n 0 0 0 1px rgba(0, 0, 0, 0.08);\n\n overflow: hidden;\n\n animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n from {\n opacity: 0;\n transform: scale(0.92) translateY(-8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n padding: var(--gnome-space-4, 24px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n text-align: center;\n}\n\n.dialog:has(.body) .title {\n padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) 0 !important;\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: var(--gnome-opacity-dim, 0.7);\n\n text-align: center;\n}\n\n/* ─── Footer (buttons) ──────────────────────────────────────────────────────── */\n\n.footer {\n display: flex;\n flex-direction: column;\n border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n/* Each button gets a full-width row separated by hairlines */\n.btn {\n appearance: none;\n border: none;\n border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n background: transparent;\n width: 100%;\n padding: 14px var(--gnome-space-4, 24px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-accent-color, #3584e4);\n\n cursor: pointer;\n text-align: center;\n\n transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child {\n border-bottom: none;\n}\n\n.btn:hover:not(:disabled) {\n background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n background-color: color-mix(in srgb, currentColor 12%, transparent);\n}\n\n.btn:focus {\n outline: none;\n}\n\n.btn:focus-visible {\n outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: -3px;\n}\n\n.btn:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n color: var(--gnome-accent-color, #3584e4);\n}\n\n.btn-suggested {\n color: var(--gnome-accent-color, #3584e4);\n font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-destructive {\n color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .dialog {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 8px 32px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n .footer {\n border-top-color: rgba(255, 255, 255, 0.08);\n }\n\n .btn {\n border-bottom-color: rgba(255, 255, 255, 0.06);\n }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .dialog {\n animation: none;\n }\n\n .btn {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/Dialog/dialogUtils.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ let e=require(`react`);var t=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function n(){let[t,n]=(0,e.useState)({});return(0,e.useEffect)(()=>{let{visualViewport:e}=window;if(!e)return;let t=()=>{let{offsetLeft:t,offsetTop:r,width:i,height:a}=e;n({top:r,left:t,width:i,height:a})};return t(),e.addEventListener(`resize`,t),e.addEventListener(`scroll`,t),()=>{e.removeEventListener(`resize`,t),e.removeEventListener(`scroll`,t)}},[]),t}function r(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)??[]);if(!n.length)return;let r=n[0],i=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),r.focus())}exports.FOCUSABLE=t,exports.trapFocus=r,exports.useVisualViewport=n;
2	+ //# sourceMappingURL=dialogUtils.cjs.map

package/dist/components/Dialog/dialogUtils.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dialogUtils.cjs","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { useState, useEffect, type CSSProperties, type KeyboardEvent, RefObject } from \"react\";\n\nexport const FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n const [style, setStyle] = useState<CSSProperties>({});\n\n useEffect(() => {\n const { visualViewport } = window;\n\n if (!visualViewport) {\n return;\n }\n\n const update = (): void => {\n const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n setStyle({\n top,\n left,\n width,\n height,\n });\n };\n\n update();\n visualViewport.addEventListener(\"resize\", update);\n visualViewport.addEventListener(\"scroll\", update);\n\n return () => {\n visualViewport.removeEventListener(\"resize\", update);\n visualViewport.removeEventListener(\"scroll\", update);\n };\n }, []);\n\n return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n if (e.key !== \"Tab\") {\n return;\n }\n\n const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n if (!focusable.length) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n}\n"],"mappings":"uBAEA,IAAa,EACX,2IAQF,SAAgB,GAAmC,CACjD,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAoC,EAAE,CAAC,CA6BrD,OA3BA,EAAA,EAAA,eAAgB,CACd,GAAM,CAAE,kBAAmB,OAE3B,GAAI,CAAC,EACH,OAGF,IAAM,MAAqB,CACzB,GAAM,CAAE,WAAY,EAAM,UAAW,EAAK,QAAO,UAAW,EAC5D,EAAS,CACP,MACA,OACA,QACA,SACD,CAAC,EAOJ,OAJA,GAAQ,CACR,EAAe,iBAAiB,SAAU,EAAO,CACjD,EAAe,iBAAiB,SAAU,EAAO,KAEpC,CACX,EAAe,oBAAoB,SAAU,EAAO,CACpD,EAAe,oBAAoB,SAAU,EAAO,GAErD,EAAE,CAAC,CAEC,EAGT,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,2IAAwC,EAAI,EAAE,CAAC,CAEzF,GAAI,CAAC,EAAU,OACb,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAK,OAAO,EAGV,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAM,OAAO"}

package/dist/components/Dialog/dialogUtils.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/components/Dialog/dialogUtils.ts
+var n = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function r() {
+	let [n, r] = t({});
+	return e(() => {
+		let { visualViewport: e } = window;
+		if (!e) return;
+		let t = () => {
+			let { offsetLeft: t, offsetTop: n, width: i, height: a } = e;
+			r({
+				top: n,
+				left: t,
+				width: i,
+				height: a
+			});
+		};
+		return t(), e.addEventListener("resize", t), e.addEventListener("scroll", t), () => {
+			e.removeEventListener("resize", t), e.removeEventListener("scroll", t);
+		};
+	}, []), n;
+}
+function i(e, t) {
+	if (e.key !== "Tab") return;
+	let n = Array.from(t.current?.querySelectorAll("button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])") ?? []);
+	if (!n.length) return;
+	let r = n[0], i = n[n.length - 1];
+	e.shiftKey ? document.activeElement === r && (e.preventDefault(), i.focus()) : document.activeElement === i && (e.preventDefault(), r.focus());
+}
+//#endregion
+export { n as FOCUSABLE, i as trapFocus, r as useVisualViewport };
+//# sourceMappingURL=dialogUtils.js.map

package/dist/components/Dialog/dialogUtils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dialogUtils.js","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { useState, useEffect, type CSSProperties, type KeyboardEvent, RefObject } from \"react\";\n\nexport const FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n const [style, setStyle] = useState<CSSProperties>({});\n\n useEffect(() => {\n const { visualViewport } = window;\n\n if (!visualViewport) {\n return;\n }\n\n const update = (): void => {\n const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n setStyle({\n top,\n left,\n width,\n height,\n });\n };\n\n update();\n visualViewport.addEventListener(\"resize\", update);\n visualViewport.addEventListener(\"scroll\", update);\n\n return () => {\n visualViewport.removeEventListener(\"resize\", update);\n visualViewport.removeEventListener(\"scroll\", update);\n };\n }, []);\n\n return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n if (e.key !== \"Tab\") {\n return;\n }\n\n const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n if (!focusable.length) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n}\n"],"mappings":";;AAEA,IAAa,IACX;AAQF,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAwB,EAAE,CAAC;AA6BrD,QA3BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;AAE3B,MAAI,CAAC,EACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;AAC5D,KAAS;IACP;IACA;IACA;IACA;IACD,CAAC;;AAOJ,SAJA,GAAQ,EACR,EAAe,iBAAiB,UAAU,EAAO,EACjD,EAAe,iBAAiB,UAAU,EAAO,QAEpC;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAO,EACpD,EAAe,oBAAoB,UAAU,EAAO;;IAErD,EAAE,CAAC,EAEC;;AAGT,SAAgB,EAAU,GAAkC,GAAuC;AACjG,KAAI,EAAE,QAAQ,MACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,6IAAwC,IAAI,EAAE,CAAC;AAEzF,KAAI,CAAC,EAAU,OACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,CAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO"}

package/dist/components/Dialog.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Dialog/Dialog.cjs`);exports.Dialog=e.Dialog;

package/dist/components/Dialog.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './Dialog/index'
2	+ export {}

package/dist/components/Dialog.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Dialog as e } from "./Dialog/Dialog.js";
2	+ export { e as Dialog };

package/dist/components/Dropdown/Dropdown.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/PanDown.cjs`),n=require(`../../icons/dist/icons/Check.cjs`),r=require(`./Dropdown.module.css.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);function o({options:o,value:s,onChange:c,placeholder:l=`Select an option`,disabled:u,className:d,...f}){let[p,m]=(0,i.useState)(!1),[h,g]=(0,i.useState)(-1),[_,v]=(0,i.useState)(!1),y=(0,i.useId)(),b=(0,i.useId)(),x=(0,i.useRef)(null),S=(0,i.useRef)(null),C=o.find(e=>e.value===s),w=(0,i.useCallback)(()=>{if(!x.current)return;let e=x.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(o.length*48+8,280);v(t<n&&e.top>n)},[o.length]),T=(0,i.useCallback)(()=>{if(u)return;w(),m(!0);let e=o.findIndex(e=>e.value===s&&!e.disabled);g(e>=0?e:o.findIndex(e=>!e.disabled))},[u,w,o,s]),E=(0,i.useCallback)(()=>{m(!1),g(-1),x.current?.focus()},[]),D=(0,i.useCallback)(e=>{e.disabled\|\|(c?.(e.value),E())},[c,E]);(0,i.useEffect)(()=>{!p\|\|h<0\|\|!S.current\|\|S.current.children[h]?.scrollIntoView({block:`nearest`})},[h,p]),(0,i.useEffect)(()=>{if(!p)return;let e=e=>{!x.current?.contains(e.target)&&!S.current?.contains(e.target)&&E()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[p,E]);let O=(0,i.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),T();break;case`ArrowUp`:e.preventDefault(),w(),m(!0),g(o.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[T,w,o]),k=(0,i.useCallback)(e=>{let t=o.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(h);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];g(r??h);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];g(r??h);break}case`Home`:e.preventDefault(),g(t[0]??-1);break;case`End`:e.preventDefault(),g(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),h>=0&&D(o[h]);break;case`Escape`:case`Tab`:E();break}},[o,h,D,E]);return(0,a.jsxs)(`div`,{className:[r.default.wrapper,d].filter(Boolean).join(` `),...f,children:[(0,a.jsxs)(`button`,{ref:x,id:y,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":p,"aria-controls":b,"aria-activedescendant":p&&h>=0?`${b}-opt-${h}`:void 0,disabled:u,className:[r.default.trigger,p?r.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>p?E():T(),onKeyDown:O,children:[(0,a.jsx)(`span`,{className:[r.default.triggerLabel,C?null:r.default.placeholder].filter(Boolean).join(` `),children:C?.label??l}),(0,a.jsx)(e.Icon,{icon:t.e,size:`md`,"aria-hidden":!0,className:[r.default.chevron,p?r.default.chevronOpen:null].filter(Boolean).join(` `)})]}),p&&(0,a.jsx)(`ul`,{ref:S,id:b,role:`listbox`,"aria-labelledby":y,tabIndex:-1,className:[r.default.list,_?r.default.listUp:r.default.listDown].filter(Boolean).join(` `),onKeyDown:k,children:o.map((t,i)=>(0,a.jsxs)(`li`,{id:`${b}-opt-${i}`,role:`option`,"aria-selected":t.value===s,"aria-disabled":t.disabled,className:[r.default.option,t.value===s?r.default.optionSelected:null,i===h?r.default.optionActive:null,t.disabled?r.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!t.disabled&&g(i),onClick:()=>D(t),children:[(0,a.jsxs)(`span`,{className:r.default.optionText,children:[(0,a.jsx)(`span`,{className:r.default.optionLabel,children:t.label}),t.description&&(0,a.jsx)(`span`,{className:r.default.optionDesc,children:t.description})]}),t.value===s&&(0,a.jsx)(e.Icon,{icon:n.e,size:`md`,"aria-hidden":!0,className:r.default.checkIcon})]},t.value))})]})}exports.Dropdown=o;
2	+ //# sourceMappingURL=Dropdown.cjs.map

package/dist/components/Dropdown/Dropdown.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import {\n useState,\n useRef,\n useId,\n useEffect,\n useCallback,\n type KeyboardEvent,\n type HTMLAttributes,\n} from \"react\";\nimport { PanDown, Check } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Dropdown.module.css\";\n\nexport interface DropdownOption<V extends string = string> {\n /** The value submitted / returned on selection. */\n value: V;\n /** Display label shown in the list and trigger. */\n label: string;\n /** Optional descriptive text shown below the label. */\n description?: string;\n /** Whether the option is selectable. */\n disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /** The list of selectable options. */\n options: DropdownOption<V>[];\n /** The currently selected value. */\n value?: V;\n /** Called when the user selects an option. */\n onChange?: (value: V) => void;\n /** Placeholder shown when no option is selected. */\n placeholder?: string;\n /** Accessible label for the control (used as `aria-label`). */\n \"aria-label\"?: string;\n /** Disables the entire control. */\n disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n options,\n value,\n onChange,\n placeholder = \"Select an option\",\n disabled,\n className,\n ...props\n}: DropdownProps<V>) {\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const [flipUp, setFlipUp] = useState(false);\n\n const triggerId = useId();\n const listboxId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n\n const selected = options.find((o) => o.value === value);\n\n // Compute flip direction when opening\n const computeFlip = useCallback(() => {\n if (!triggerRef.current) return;\n const rect = triggerRef.current.getBoundingClientRect();\n const spaceBelow = window.innerHeight - rect.bottom;\n const listH = Math.min(options.length * 48 + 8, 280);\n setFlipUp(spaceBelow < listH && rect.top > listH);\n }, [options.length]);\n\n const openList = useCallback(() => {\n if (disabled) return;\n computeFlip();\n setOpen(true);\n const idx = options.findIndex((o) => o.value === value && !o.disabled);\n setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n }, [disabled, computeFlip, options, value]);\n\n const closeList = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n triggerRef.current?.focus();\n }, []);\n\n const selectOption = useCallback(\n (opt: DropdownOption<V>) => {\n if (opt.disabled) return;\n onChange?.(opt.value);\n closeList();\n },\n [onChange, closeList]\n );\n\n // Scroll active item into view\n useEffect(() => {\n if (!open || activeIndex < 0 || !listRef.current) return;\n const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n item?.scrollIntoView({ block: \"nearest\" });\n }, [activeIndex, open]);\n\n // Close on outside click\n useEffect(() => {\n if (!open) return;\n const handler = (e: MouseEvent) => {\n if (\n !triggerRef.current?.contains(e.target as Node) &&\n !listRef.current?.contains(e.target as Node)\n ) {\n closeList();\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, [open, closeList]);\n\n // Trigger keyboard handler\n const handleTriggerKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n switch (e.key) {\n case \"Enter\":\n case \" \":\n case \"ArrowDown\":\n e.preventDefault();\n openList();\n break;\n case \"ArrowUp\":\n e.preventDefault();\n computeFlip();\n setOpen(true);\n setActiveIndex(\n options.reduce(\n (last, o, i) => (!o.disabled ? i : last),\n -1\n )\n );\n break;\n }\n },\n [openList, computeFlip, options]\n );\n\n // Listbox keyboard handler\n const handleListKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const enabledIndexes = options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n const currentPos = enabledIndexes.indexOf(activeIndex);\n\n switch (e.key) {\n case \"ArrowDown\": {\n e.preventDefault();\n const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n setActiveIndex(next ?? activeIndex);\n break;\n }\n case \"ArrowUp\": {\n e.preventDefault();\n const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n setActiveIndex(prev ?? activeIndex);\n break;\n }\n case \"Home\":\n e.preventDefault();\n setActiveIndex(enabledIndexes[0] ?? -1);\n break;\n case \"End\":\n e.preventDefault();\n setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n break;\n case \"Enter\":\n case \" \": {\n e.preventDefault();\n if (activeIndex >= 0) selectOption(options[activeIndex]);\n break;\n }\n case \"Escape\":\n case \"Tab\":\n closeList();\n break;\n }\n },\n [options, activeIndex, selectOption, closeList]\n );\n\n return (\n <div\n className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n {...props}\n >\n {/* Trigger button */}\n <button\n ref={triggerRef}\n id={triggerId}\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={listboxId}\n aria-activedescendant={\n open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n }\n disabled={disabled}\n className={[styles.trigger, open ? styles.triggerOpen : null]\n .filter(Boolean)\n .join(\" \")}\n onClick={() => (open ? closeList() : openList())}\n onKeyDown={handleTriggerKeyDown}\n >\n <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n .filter(Boolean).join(\" \")}>\n {selected?.label ?? placeholder}\n </span>\n <Icon\n icon={PanDown}\n size=\"md\"\n aria-hidden\n className={[styles.chevron, open ? styles.chevronOpen : null]\n .filter(Boolean).join(\" \")}\n />\n </button>\n\n {/* Listbox */}\n {open && (\n <ul\n ref={listRef}\n id={listboxId}\n role=\"listbox\"\n aria-labelledby={triggerId}\n tabIndex={-1}\n className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n .filter(Boolean)\n .join(\" \")}\n onKeyDown={handleListKeyDown}\n >\n {options.map((opt, i) => (\n <li\n key={opt.value}\n id={`${listboxId}-opt-${i}`}\n role=\"option\"\n aria-selected={opt.value === value}\n aria-disabled={opt.disabled}\n className={[\n styles.option,\n opt.value === value ? styles.optionSelected : null,\n i === activeIndex ? styles.optionActive : null,\n opt.disabled ? styles.optionDisabled : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n onClick={() => selectOption(opt)}\n >\n <span className={styles.optionText}>\n <span className={styles.optionLabel}>{opt.label}</span>\n {opt.description && (\n <span className={styles.optionDesc}>{opt.description}</span>\n )}\n </span>\n {opt.value === value && (\n <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/Dropdown/Dropdown.js ADDED Viewed

@@ -0,0 +1,159 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { e as t } from "../../icons/dist/icons/PanDown.js";
+import { e as n } from "../../icons/dist/icons/Check.js";
+import r from "./Dropdown.module.css.js";
+import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/Dropdown/Dropdown.tsx
+function d({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) {
+	let [v, y] = c(!1), [b, x] = c(-1), [S, C] = c(!1), w = o(), T = o(), E = s(null), D = s(null), O = d.find((e) => e.value === f), k = i(() => {
+		if (!E.current) return;
+		let e = E.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 48 + 8, 280);
+		C(t < n && e.top > n);
+	}, [d.length]), A = i(() => {
+		if (h) return;
+		k(), y(!0);
+		let e = d.findIndex((e) => e.value === f && !e.disabled);
+		x(e >= 0 ? e : d.findIndex((e) => !e.disabled));
+	}, [
+		h,
+		k,
+		d,
+		f
+	]), j = i(() => {
+		y(!1), x(-1), E.current?.focus();
+	}, []), M = i((e) => {
+		e.disabled || (p?.(e.value), j());
+	}, [p, j]);
+	a(() => {
+		!v || b < 0 || !D.current || D.current.children[b]?.scrollIntoView({ block: "nearest" });
+	}, [b, v]), a(() => {
+		if (!v) return;
+		let e = (e) => {
+			!E.current?.contains(e.target) && !D.current?.contains(e.target) && j();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [v, j]);
+	let N = i((e) => {
+		switch (e.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				e.preventDefault(), A();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), k(), y(!0), x(d.reduce((e, t, n) => t.disabled ? e : n, -1));
+				break;
+		}
+	}, [
+		A,
+		k,
+		d
+	]), P = i((e) => {
+		let t = d.map((e, t) => ({
+			o: e,
+			i: t
+		})).filter(({ o: e }) => !e.disabled).map(({ i: e }) => e), n = t.indexOf(b);
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let r = t[Math.min(n + 1, t.length - 1)];
+				x(r ?? b);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let r = t[Math.max(n - 1, 0)];
+				x(r ?? b);
+				break;
+			}
+			case "Home":
+				e.preventDefault(), x(t[0] ?? -1);
+				break;
+			case "End":
+				e.preventDefault(), x(t[t.length - 1] ?? -1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), b >= 0 && M(d[b]);
+				break;
+			case "Escape":
+			case "Tab":
+				j();
+				break;
+		}
+	}, [
+		d,
+		b,
+		M,
+		j
+	]);
+	return /* @__PURE__ */ u("div", {
+		className: [r.wrapper, g].filter(Boolean).join(" "),
+		..._,
+		children: [/* @__PURE__ */ u("button", {
+			ref: E,
+			id: w,
+			type: "button",
+			role: "combobox",
+			"aria-haspopup": "listbox",
+			"aria-expanded": v,
+			"aria-controls": T,
+			"aria-activedescendant": v && b >= 0 ? `${T}-opt-${b}` : void 0,
+			disabled: h,
+			className: [r.trigger, v ? r.triggerOpen : null].filter(Boolean).join(" "),
+			onClick: () => v ? j() : A(),
+			onKeyDown: N,
+			children: [/* @__PURE__ */ l("span", {
+				className: [r.triggerLabel, O ? null : r.placeholder].filter(Boolean).join(" "),
+				children: O?.label ?? m
+			}), /* @__PURE__ */ l(e, {
+				icon: t,
+				size: "md",
+				"aria-hidden": !0,
+				className: [r.chevron, v ? r.chevronOpen : null].filter(Boolean).join(" ")
+			})]
+		}), v && /* @__PURE__ */ l("ul", {
+			ref: D,
+			id: T,
+			role: "listbox",
+			"aria-labelledby": w,
+			tabIndex: -1,
+			className: [r.list, S ? r.listUp : r.listDown].filter(Boolean).join(" "),
+			onKeyDown: P,
+			children: d.map((t, i) => /* @__PURE__ */ u("li", {
+				id: `${T}-opt-${i}`,
+				role: "option",
+				"aria-selected": t.value === f,
+				"aria-disabled": t.disabled,
+				className: [
+					r.option,
+					t.value === f ? r.optionSelected : null,
+					i === b ? r.optionActive : null,
+					t.disabled ? r.optionDisabled : null
+				].filter(Boolean).join(" "),
+				onMouseEnter: () => !t.disabled && x(i),
+				onClick: () => M(t),
+				children: [/* @__PURE__ */ u("span", {
+					className: r.optionText,
+					children: [/* @__PURE__ */ l("span", {
+						className: r.optionLabel,
+						children: t.label
+					}), t.description && /* @__PURE__ */ l("span", {
+						className: r.optionDesc,
+						children: t.description
+					})]
+				}), t.value === f && /* @__PURE__ */ l(e, {
+					icon: n,
+					size: "md",
+					"aria-hidden": !0,
+					className: r.checkIcon
+				})]
+			}, t.value))
+		})]
+	});
+}
+//#endregion
+export { d as Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown/Dropdown.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import {\n useState,\n useRef,\n useId,\n useEffect,\n useCallback,\n type KeyboardEvent,\n type HTMLAttributes,\n} from \"react\";\nimport { PanDown, Check } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Dropdown.module.css\";\n\nexport interface DropdownOption<V extends string = string> {\n /** The value submitted / returned on selection. */\n value: V;\n /** Display label shown in the list and trigger. */\n label: string;\n /** Optional descriptive text shown below the label. */\n description?: string;\n /** Whether the option is selectable. */\n disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n /** The list of selectable options. */\n options: DropdownOption<V>[];\n /** The currently selected value. */\n value?: V;\n /** Called when the user selects an option. */\n onChange?: (value: V) => void;\n /** Placeholder shown when no option is selected. */\n placeholder?: string;\n /** Accessible label for the control (used as `aria-label`). */\n \"aria-label\"?: string;\n /** Disables the entire control. */\n disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n options,\n value,\n onChange,\n placeholder = \"Select an option\",\n disabled,\n className,\n ...props\n}: DropdownProps<V>) {\n const [open, setOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const [flipUp, setFlipUp] = useState(false);\n\n const triggerId = useId();\n const listboxId = useId();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n\n const selected = options.find((o) => o.value === value);\n\n // Compute flip direction when opening\n const computeFlip = useCallback(() => {\n if (!triggerRef.current) return;\n const rect = triggerRef.current.getBoundingClientRect();\n const spaceBelow = window.innerHeight - rect.bottom;\n const listH = Math.min(options.length * 48 + 8, 280);\n setFlipUp(spaceBelow < listH && rect.top > listH);\n }, [options.length]);\n\n const openList = useCallback(() => {\n if (disabled) return;\n computeFlip();\n setOpen(true);\n const idx = options.findIndex((o) => o.value === value && !o.disabled);\n setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n }, [disabled, computeFlip, options, value]);\n\n const closeList = useCallback(() => {\n setOpen(false);\n setActiveIndex(-1);\n triggerRef.current?.focus();\n }, []);\n\n const selectOption = useCallback(\n (opt: DropdownOption<V>) => {\n if (opt.disabled) return;\n onChange?.(opt.value);\n closeList();\n },\n [onChange, closeList]\n );\n\n // Scroll active item into view\n useEffect(() => {\n if (!open || activeIndex < 0 || !listRef.current) return;\n const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n item?.scrollIntoView({ block: \"nearest\" });\n }, [activeIndex, open]);\n\n // Close on outside click\n useEffect(() => {\n if (!open) return;\n const handler = (e: MouseEvent) => {\n if (\n !triggerRef.current?.contains(e.target as Node) &&\n !listRef.current?.contains(e.target as Node)\n ) {\n closeList();\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, [open, closeList]);\n\n // Trigger keyboard handler\n const handleTriggerKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n switch (e.key) {\n case \"Enter\":\n case \" \":\n case \"ArrowDown\":\n e.preventDefault();\n openList();\n break;\n case \"ArrowUp\":\n e.preventDefault();\n computeFlip();\n setOpen(true);\n setActiveIndex(\n options.reduce(\n (last, o, i) => (!o.disabled ? i : last),\n -1\n )\n );\n break;\n }\n },\n [openList, computeFlip, options]\n );\n\n // Listbox keyboard handler\n const handleListKeyDown = useCallback(\n (e: KeyboardEvent<HTMLUListElement>) => {\n const enabledIndexes = options\n .map((o, i) => ({ o, i }))\n .filter(({ o }) => !o.disabled)\n .map(({ i }) => i);\n\n const currentPos = enabledIndexes.indexOf(activeIndex);\n\n switch (e.key) {\n case \"ArrowDown\": {\n e.preventDefault();\n const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n setActiveIndex(next ?? activeIndex);\n break;\n }\n case \"ArrowUp\": {\n e.preventDefault();\n const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n setActiveIndex(prev ?? activeIndex);\n break;\n }\n case \"Home\":\n e.preventDefault();\n setActiveIndex(enabledIndexes[0] ?? -1);\n break;\n case \"End\":\n e.preventDefault();\n setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n break;\n case \"Enter\":\n case \" \": {\n e.preventDefault();\n if (activeIndex >= 0) selectOption(options[activeIndex]);\n break;\n }\n case \"Escape\":\n case \"Tab\":\n closeList();\n break;\n }\n },\n [options, activeIndex, selectOption, closeList]\n );\n\n return (\n <div\n className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n {...props}\n >\n {/* Trigger button */}\n <button\n ref={triggerRef}\n id={triggerId}\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={listboxId}\n aria-activedescendant={\n open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n }\n disabled={disabled}\n className={[styles.trigger, open ? styles.triggerOpen : null]\n .filter(Boolean)\n .join(\" \")}\n onClick={() => (open ? closeList() : openList())}\n onKeyDown={handleTriggerKeyDown}\n >\n <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n .filter(Boolean).join(\" \")}>\n {selected?.label ?? placeholder}\n </span>\n <Icon\n icon={PanDown}\n size=\"md\"\n aria-hidden\n className={[styles.chevron, open ? styles.chevronOpen : null]\n .filter(Boolean).join(\" \")}\n />\n </button>\n\n {/* Listbox */}\n {open && (\n <ul\n ref={listRef}\n id={listboxId}\n role=\"listbox\"\n aria-labelledby={triggerId}\n tabIndex={-1}\n className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n .filter(Boolean)\n .join(\" \")}\n onKeyDown={handleListKeyDown}\n >\n {options.map((opt, i) => (\n <li\n key={opt.value}\n id={`${listboxId}-opt-${i}`}\n role=\"option\"\n aria-selected={opt.value === value}\n aria-disabled={opt.disabled}\n className={[\n styles.option,\n opt.value === value ? styles.optionSelected : null,\n i === activeIndex ? styles.optionActive : null,\n opt.disabled ? styles.optionDisabled : null,\n ]\n .filter(Boolean)\n .join(\" \")}\n onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n onClick={() => selectOption(opt)}\n >\n <span className={styles.optionText}>\n <span className={styles.optionLabel}>{opt.label}</span>\n {opt.description && (\n <span className={styles.optionDesc}>{opt.description}</span>\n )}\n </span>\n {opt.value === value && (\n <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/Dropdown/Dropdown.module.css.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ var e=`_wrapper_1hi05_3`,t=`_trigger_1hi05_11`,n=`_triggerOpen_1hi05_63`,r=`_triggerLabel_1hi05_73`,i=`_placeholder_1hi05_81`,a=`_chevron_1hi05_87`,o=`_chevronOpen_1hi05_94`,s=`_list_1hi05_100`,c=`_listDown_1hi05_129`,l=`_listUp_1hi05_133`,u=`_option_1hi05_145`,d=`_optionActive_1hi05_162`,f=`_optionSelected_1hi05_166`,p=`_optionDisabled_1hi05_170`,m=`_optionText_1hi05_178`,h=`_optionLabel_1hi05_186`,g=`_optionDesc_1hi05_192`,_=`_checkIcon_1hi05_202`,v={wrapper:e,trigger:t,triggerOpen:n,triggerLabel:r,placeholder:i,chevron:a,chevronOpen:o,list:s,"list-in":`_list-in_1hi05_1`,listDown:c,listUp:l,"list-in-up":`_list-in-up_1hi05_1`,option:u,optionActive:d,optionSelected:f,optionDisabled:p,optionText:m,optionLabel:h,optionDesc:g,checkIcon:_};exports.default=v;
2	+ //# sourceMappingURL=Dropdown.module.css.cjs.map

package/dist/components/Dropdown/Dropdown.module.css.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.module.css.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/* ─── Wrapper ────────────────────────────────────────────────────────────────── */\n\n.wrapper {\n position: relative;\n display: inline-block;\n min-width: 160px;\n}\n\n/* ─── Trigger button ─────────────────────────────────────────────────────────── */\n\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gnome-space-1, 6px);\n width: 100%;\n\n padding: 7px var(--gnome-space-2, 12px);\n min-height: 36px;\n\n appearance: none;\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-md, 8px);\n box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0,0,0,0.08));\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n cursor: pointer;\n user-select: none;\n text-align: left;\n\n transition:\n background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.trigger:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n outline: none;\n}\n\n.trigger:focus-visible {\n border-color: var(--gnome-accent-color, #3584e4);\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.triggerOpen {\n border-color: var(--gnome-accent-color, #3584e4);\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ──────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.placeholder {\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron icon ───────────────────────────────────────────────────────────── */\n\n.chevron {\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: var(--gnome-opacity-dim, 0.55);\n transition: transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.chevronOpen {\n transform: rotate(180deg);\n}\n\n/* ─── Listbox ────────────────────────────────────────────────────────────────── */\n\n.list {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1000;\n\n margin: 0;\n padding: 4px 0;\n list-style: none;\n\n background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n border-radius: var(--gnome-radius-md, 8px);\n box-shadow:\n 0 4px 16px rgba(0, 0, 0, 0.12),\n 0 1px 3px rgba(0, 0, 0, 0.08);\n\n max-height: 280px;\n overflow-y: auto;\n overscroll-behavior: contain;\n\n animation: list-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes list-in {\n from { opacity: 0; transform: scaleY(0.95); transform-origin: top center; }\n to { opacity: 1; transform: scaleY(1); transform-origin: top center; }\n}\n\n.listDown {\n top: calc(100% + 4px);\n}\n\n.listUp {\n bottom: calc(100% + 4px);\n animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n from { opacity: 0; transform: scaleY(0.95); transform-origin: bottom center; }\n to { opacity: 1; transform: scaleY(1); transform-origin: bottom center; }\n}\n\n/* ─── Option ─────────────────────────────────────────────────────────────────── */\n\n.option {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 8px var(--gnome-space-2, 12px);\n min-height: 40px;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n cursor: pointer;\n user-select: none;\n\n transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.optionActive {\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ─── Option text block ──────────────────────────────────────────────────────── */\n\n.optionText {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.optionLabel {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.optionDesc {\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ─── Check icon (selected) ──────────────────────────────────────────────────── */\n\n.checkIcon {\n flex-shrink: 0;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .trigger {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: rgba(255, 255, 255, 0.12);\n box-shadow: none;\n }\n\n .trigger:hover:not(:disabled) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n .list {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: rgba(255, 255, 255, 0.1);\n box-shadow:\n 0 4px 16px rgba(0, 0, 0, 0.4),\n 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .trigger,\n .chevron {\n transition: none;\n }\n\n .list {\n animation: none;\n }\n}\n"],"mappings":""}

package/dist/components/Dropdown/Dropdown.module.css.js ADDED Viewed

@@ -0,0 +1,27 @@
+//#region src/components/Dropdown/Dropdown.module.css
+var e = "_wrapper_1hi05_3", t = "_trigger_1hi05_11", n = "_triggerOpen_1hi05_63", r = "_triggerLabel_1hi05_73", i = "_placeholder_1hi05_81", a = "_chevron_1hi05_87", o = "_chevronOpen_1hi05_94", s = "_list_1hi05_100", c = "_listDown_1hi05_129", l = "_listUp_1hi05_133", u = "_option_1hi05_145", d = "_optionActive_1hi05_162", f = "_optionSelected_1hi05_166", p = "_optionDisabled_1hi05_170", m = "_optionText_1hi05_178", h = "_optionLabel_1hi05_186", g = "_optionDesc_1hi05_192", _ = "_checkIcon_1hi05_202", v = {
+	wrapper: e,
+	trigger: t,
+	triggerOpen: n,
+	triggerLabel: r,
+	placeholder: i,
+	chevron: a,
+	chevronOpen: o,
+	list: s,
+	"list-in": "_list-in_1hi05_1",
+	listDown: c,
+	listUp: l,
+	"list-in-up": "_list-in-up_1hi05_1",
+	option: u,
+	optionActive: d,
+	optionSelected: f,
+	optionDisabled: p,
+	optionText: m,
+	optionLabel: h,
+	optionDesc: g,
+	checkIcon: _
+};
+//#endregion
+export { v as default };
+//# sourceMappingURL=Dropdown.module.css.js.map

package/dist/components/Dropdown/Dropdown.module.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.module.css.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/* ─── Wrapper ────────────────────────────────────────────────────────────────── */\n\n.wrapper {\n position: relative;\n display: inline-block;\n min-width: 160px;\n}\n\n/* ─── Trigger button ─────────────────────────────────────────────────────────── */\n\n.trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--gnome-space-1, 6px);\n width: 100%;\n\n padding: 7px var(--gnome-space-2, 12px);\n min-height: 36px;\n\n appearance: none;\n background-color: var(--gnome-card-bg-color, #ffffff);\n border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n border-radius: var(--gnome-radius-md, 8px);\n box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0,0,0,0.08));\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n cursor: pointer;\n user-select: none;\n text-align: left;\n\n transition:\n background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.trigger:hover:not(:disabled) {\n background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n outline: none;\n}\n\n.trigger:focus-visible {\n border-color: var(--gnome-accent-color, #3584e4);\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.triggerOpen {\n border-color: var(--gnome-accent-color, #3584e4);\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ──────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.placeholder {\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron icon ───────────────────────────────────────────────────────────── */\n\n.chevron {\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n opacity: var(--gnome-opacity-dim, 0.55);\n transition: transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.chevronOpen {\n transform: rotate(180deg);\n}\n\n/* ─── Listbox ────────────────────────────────────────────────────────────────── */\n\n.list {\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1000;\n\n margin: 0;\n padding: 4px 0;\n list-style: none;\n\n background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n border-radius: var(--gnome-radius-md, 8px);\n box-shadow:\n 0 4px 16px rgba(0, 0, 0, 0.12),\n 0 1px 3px rgba(0, 0, 0, 0.08);\n\n max-height: 280px;\n overflow-y: auto;\n overscroll-behavior: contain;\n\n animation: list-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes list-in {\n from { opacity: 0; transform: scaleY(0.95); transform-origin: top center; }\n to { opacity: 1; transform: scaleY(1); transform-origin: top center; }\n}\n\n.listDown {\n top: calc(100% + 4px);\n}\n\n.listUp {\n bottom: calc(100% + 4px);\n animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n from { opacity: 0; transform: scaleY(0.95); transform-origin: bottom center; }\n to { opacity: 1; transform: scaleY(1); transform-origin: bottom center; }\n}\n\n/* ─── Option ─────────────────────────────────────────────────────────────────── */\n\n.option {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 8px var(--gnome-space-2, 12px);\n min-height: 40px;\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n cursor: pointer;\n user-select: none;\n\n transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.optionActive {\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ─── Option text block ──────────────────────────────────────────────────────── */\n\n.optionText {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.optionLabel {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.optionDesc {\n font-size: var(--gnome-font-size-caption, 0.8125rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* ─── Check icon (selected) ──────────────────────────────────────────────────── */\n\n.checkIcon {\n flex-shrink: 0;\n color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n .trigger {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: rgba(255, 255, 255, 0.12);\n box-shadow: none;\n }\n\n .trigger:hover:not(:disabled) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n .list {\n background-color: var(--gnome-card-bg-color, #383838);\n border-color: rgba(255, 255, 255, 0.1);\n box-shadow:\n 0 4px 16px rgba(0, 0, 0, 0.4),\n 0 1px 3px rgba(0, 0, 0, 0.3);\n }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .trigger,\n .chevron {\n transition: none;\n }\n\n .list {\n animation: none;\n }\n}\n"],"mappings":""}

package/dist/components/Dropdown.cjs ADDED Viewed

	@@ -0,0 +1 @@
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Dropdown/Dropdown.cjs`);exports.Dropdown=e.Dropdown;

package/dist/components/Dropdown.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './Dropdown/index'
2	+ export {}

package/dist/components/Dropdown.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Dropdown as e } from "./Dropdown/Dropdown.js";
2	+ export { e as Dropdown };

package/dist/components/EntryRow/EntryRow.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const e=require(`./EntryRow.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({title:r,value:i,defaultValue:a=``,onValueChange:o,leading:s,trailing:c,disabled:l,className:u,id:d,onChange:f,...p}){let m=(0,t.useId)(),h=d??m,g=i!==void 0,[_,v]=(0,t.useState)(String(a)),y=g?String(i):_,[b,x]=(0,t.useState)(!1),S=(0,t.useRef)(null),C=b\|\|y.length>0;return(0,n.jsxs)(`div`,{className:[e.default.row,b?e.default.focused:null,l?e.default.disabled:null,u].filter(Boolean).join(` `),onClick:()=>S.current?.focus(),children:[s&&(0,n.jsx)(`span`,{className:e.default.leading,children:s}),(0,n.jsxs)(`span`,{className:e.default.fieldWrap,children:[(0,n.jsx)(`label`,{htmlFor:h,className:[e.default.label,C?e.default.labelFloated:null].filter(Boolean).join(` `),children:r}),(0,n.jsx)(`input`,{ref:S,id:h,className:[e.default.input,C?e.default.inputFloated:null].filter(Boolean).join(` `),value:y,disabled:l,onFocus:()=>x(!0),onBlur:()=>x(!1),onChange:e=>{g\|\|v(e.target.value),o?.(e.target.value),f?.(e)},...p})]}),c&&(0,n.jsx)(`span`,{className:e.default.trailing,children:c})]})}exports.EntryRow=r;
2	+ //# sourceMappingURL=EntryRow.cjs.map

package/dist/components/EntryRow/EntryRow.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"EntryRow.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import { useState, useId, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./EntryRow.module.css\";\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n /**\n * Acts as a floating label: shown small above the input when the field has\n * content or focus, shown as a placeholder when empty and unfocused.\n */\n title: string;\n /** Called when the input value changes. */\n onValueChange?: (value: string) => void;\n /** Icon or widget placed at the leading edge. */\n leading?: ReactNode;\n /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n title,\n value: controlledValue,\n defaultValue = \"\",\n onValueChange,\n leading,\n trailing,\n disabled,\n className,\n id: externalId,\n onChange,\n ...props\n}: EntryRowProps) {\n const generatedId = useId();\n const inputId = externalId ?? generatedId;\n\n const isControlled = controlledValue !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n const floated = focused || inputValue.length > 0;\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (!isControlled) setUncontrolledValue(e.target.value);\n onValueChange?.(e.target.value);\n onChange?.(e);\n };\n\n return (\n <div\n className={[\n styles.row,\n focused ? styles.focused : null,\n disabled ? styles.disabled : null,\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n onClick={() => inputRef.current?.focus()}\n >\n {leading && <span className={styles.leading}>{leading}</span>}\n\n <span className={styles.fieldWrap}>\n <label\n htmlFor={inputId}\n className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(\" \")}\n >\n {title}\n </label>\n <input\n ref={inputRef}\n id={inputId}\n className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(\" \")}\n value={inputValue}\n disabled={disabled}\n onFocus={() => setFocused(true)}\n onBlur={() => setFocused(false)}\n onChange={handleChange}\n {...props}\n />\n </span>\n\n {trailing && <span className={styles.trailing}>{trailing}</span>}\n </div>\n );\n}\n"],"mappings":"mGA0BA,SAAgB,EAAS,CACvB,QACA,MAAO,EACP,eAAe,GACf,gBACA,UACA,WACA,WACA,YACA,GAAI,EACJ,WACA,GAAG,GACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,EAAU,GAAc,EAExB,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,OAAO,EAAa,CAAC,CAC1E,EAAa,EAAe,OAAO,EAAgB,CAAG,EAEtD,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EAAU,GAAW,EAAW,OAAS,EAQ/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,IACP,EAAU,EAAA,QAAO,QAAU,KAC3B,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,YAAe,EAAS,SAAS,OAAO,UAT1C,CAWG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAxB,EACE,EAAA,EAAA,KAAC,QAAD,CACE,QAAS,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAExF,EACK,CAAA,EACR,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACzF,MAAO,EACG,WACV,YAAe,EAAW,GAAK,CAC/B,WAAc,EAAW,GAAM,CAC/B,SAnCc,GAA2C,CAC1D,GAAc,EAAqB,EAAE,OAAO,MAAM,CACvD,IAAgB,EAAE,OAAO,MAAM,CAC/B,IAAW,EAAE,EAiCP,GAAI,EACJ,CAAA,CACG,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}

package/dist/components/EntryRow/EntryRow.js ADDED Viewed

@@ -0,0 +1,50 @@
+import e from "./EntryRow.module.css.js";
+import { useId as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/EntryRow/EntryRow.tsx
+function o({ title: o, value: s, defaultValue: c = "", onValueChange: l, leading: u, trailing: d, disabled: f, className: p, id: m, onChange: h, ...g }) {
+	let _ = t(), v = m ?? _, y = s !== void 0, [b, x] = r(String(c)), S = y ? String(s) : b, [C, w] = r(!1), T = n(null), E = C || S.length > 0;
+	return /* @__PURE__ */ a("div", {
+		className: [
+			e.row,
+			C ? e.focused : null,
+			f ? e.disabled : null,
+			p
+		].filter(Boolean).join(" "),
+		onClick: () => T.current?.focus(),
+		children: [
+			u && /* @__PURE__ */ i("span", {
+				className: e.leading,
+				children: u
+			}),
+			/* @__PURE__ */ a("span", {
+				className: e.fieldWrap,
+				children: [/* @__PURE__ */ i("label", {
+					htmlFor: v,
+					className: [e.label, E ? e.labelFloated : null].filter(Boolean).join(" "),
+					children: o
+				}), /* @__PURE__ */ i("input", {
+					ref: T,
+					id: v,
+					className: [e.input, E ? e.inputFloated : null].filter(Boolean).join(" "),
+					value: S,
+					disabled: f,
+					onFocus: () => w(!0),
+					onBlur: () => w(!1),
+					onChange: (e) => {
+						y || x(e.target.value), l?.(e.target.value), h?.(e);
+					},
+					...g
+				})]
+			}),
+			d && /* @__PURE__ */ i("span", {
+				className: e.trailing,
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { o as EntryRow };
+//# sourceMappingURL=EntryRow.js.map