@gnome-ui/react 1.45.1 → 1.46.0

package/dist/components/ShortcutsDialog/ShortcutsDialog.js

@@ -1,128 +1,127 @@
-import e from "./ShortcutsDialog.module.css.js";
-import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
-import { createPortal as a } from "react-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
+import t from "./ShortcutsDialog.module.css.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { createPortal as o } from "react-dom";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/ShortcutsDialog/ShortcutsDialog.tsx
-var c = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function l({ open: l, onClose: u, title: d = "Keyboard Shortcuts", sections: f }) {
-	let [p, m] = i(""), h = r(null), g = r(null), _ = r(null), v = r(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
-	n(() => {
-		l ? (_.current = document.activeElement, requestAnimationFrame(() => g.current?.focus())) : (m(""), _.current?.focus());
-	}, [l]);
-	let y = t((e) => {
+var l = "button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, onClose: d, title: f = "Keyboard Shortcuts", sections: p }) => {
+	let [m, h] = a(""), g = i(null), _ = i(null), v = i(null), y = i(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);
+	e(u), r(() => {
+		u ? (v.current = document.activeElement, requestAnimationFrame(() => _.current?.focus())) : (h(""), v.current?.focus());
+	}, [u]);
+	let b = n((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), u();
+			e.preventDefault(), d();
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(h.current?.querySelectorAll(c) ?? []);
+		let t = Array.from(g.current?.querySelectorAll(l) ?? []);
 		if (t.length === 0) return;
 		let n = t[0], r = t[t.length - 1];
 		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-	}, [u]);
-	if (!l) return null;
-	let b = p.trim().toLowerCase(), x = f.map((e) => ({
+	}, [d]);
+	if (!u) return null;
+	let x = m.trim().toLowerCase(), S = p.map((e) => ({
 		...e,
-		shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !b || e.toLowerCase().includes(b) || t.some((e) => e.toLowerCase().includes(b)))
-	})).filter((e) => e.shortcuts.length > 0), S = /* @__PURE__ */ o("div", {
-		className: e.backdrop,
-		onClick: u,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("div", {
-			ref: h,
+		shortcuts: e.shortcuts.filter(({ description: e, keys: t }) => !x || e.toLowerCase().includes(x) || t.some((e) => e.toLowerCase().includes(x)))
+	})).filter((e) => e.shortcuts.length > 0), C = /* @__PURE__ */ s("div", {
+		className: t.backdrop,
+		onClick: d,
+		children: /* @__PURE__ */ c("div", {
+			ref: g,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": v.current,
-			className: e.dialog,
-			onKeyDown: y,
+			"aria-labelledby": y.current,
+			className: t.dialog,
+			onKeyDown: b,
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ s("div", {
-					className: e.header,
-					children: [/* @__PURE__ */ o("span", {
-						id: v.current,
-						className: e.title,
-						children: d
-					}), /* @__PURE__ */ o("button", {
+				/* @__PURE__ */ c("div", {
+					className: t.header,
+					children: [/* @__PURE__ */ s("span", {
+						id: y.current,
+						className: t.title,
+						children: f
+					}), /* @__PURE__ */ s("button", {
 						type: "button",
-						className: e.closeBtn,
+						className: t.closeBtn,
 						"aria-label": "Close",
-						onClick: u,
+						onClick: d,
 						children: "×"
 					})]
 				}),
-				/* @__PURE__ */ s("div", {
-					className: e.searchRow,
+				/* @__PURE__ */ c("div", {
+					className: t.searchRow,
 					children: [
-						/* @__PURE__ */ o("span", {
-							className: e.searchIcon,
+						/* @__PURE__ */ s("span", {
+							className: t.searchIcon,
 							"aria-hidden": "true",
 							children: "⌕"
 						}),
-						/* @__PURE__ */ o("input", {
-							ref: g,
+						/* @__PURE__ */ s("input", {
+							ref: _,
 							type: "search",
-							className: e.searchInput,
+							className: t.searchInput,
 							placeholder: "Search shortcuts…",
-							value: p,
-							onChange: (e) => m(e.target.value),
+							value: m,
+							onChange: (e) => h(e.target.value),
 							"aria-label": "Search shortcuts"
 						}),
-						p && /* @__PURE__ */ o("button", {
+						m && /* @__PURE__ */ s("button", {
 							type: "button",
-							className: e.searchClear,
+							className: t.searchClear,
 							"aria-label": "Clear search",
 							onClick: () => {
-								m(""), g.current?.focus();
+								h(""), _.current?.focus();
 							},
 							children: "×"
 						})
 					]
 				}),
-				/* @__PURE__ */ o("div", {
-					className: e.body,
+				/* @__PURE__ */ s("div", {
+					className: t.body,
 					role: "list",
-					children: x.length === 0 ? /* @__PURE__ */ s("p", {
-						className: e.empty,
+					children: S.length === 0 ? /* @__PURE__ */ c("p", {
+						className: t.empty,
 						children: [
 							"No shortcuts match \"",
-							p,
+							m,
 							"\""
 						]
-					}) : x.map((t) => /* @__PURE__ */ s("section", {
-						className: e.section,
-						children: [/* @__PURE__ */ o("h3", {
-							className: e.sectionTitle,
-							children: t.title
-						}), /* @__PURE__ */ o("ul", {
-							className: e.list,
-							children: t.shortcuts.map((t) => /* @__PURE__ */ s("li", {
-								className: e.row,
-								children: [/* @__PURE__ */ o("span", {
-									className: e.keys,
-									"aria-label": t.keys.join(" + "),
-									children: t.keys.map((n, r) => /* @__PURE__ */ s("span", {
-										className: e.keyCap,
-										children: [/* @__PURE__ */ o("kbd", { children: n }), r < t.keys.length - 1 && /* @__PURE__ */ o("span", {
-											className: e.plus,
+					}) : S.map((e) => /* @__PURE__ */ c("section", {
+						className: t.section,
+						children: [/* @__PURE__ */ s("h3", {
+							className: t.sectionTitle,
+							children: e.title
+						}), /* @__PURE__ */ s("ul", {
+							className: t.list,
+							children: e.shortcuts.map((e) => /* @__PURE__ */ c("li", {
+								className: t.row,
+								children: [/* @__PURE__ */ s("span", {
+									className: t.keys,
+									"aria-label": e.keys.join(" + "),
+									children: e.keys.map((n, r) => /* @__PURE__ */ c("span", {
+										className: t.keyCap,
+										children: [/* @__PURE__ */ s("kbd", { children: n }), r < e.keys.length - 1 && /* @__PURE__ */ s("span", {
+											className: t.plus,
 											"aria-hidden": "true",
 											children: "+"
 										})]
 									}, r))
-								}), /* @__PURE__ */ o("span", {
-									className: e.description,
-									children: t.description
+								}), /* @__PURE__ */ s("span", {
+									className: t.description,
+									children: e.description
 								})]
-							}, t.description))
+							}, e.description))
 						})]
-					}, t.title))
+					}, e.title))
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? S : a(S, document.body);
-}
+	return typeof document > "u" ? C : o(C, document.body);
+};
 //#endregion
-export { l as ShortcutsDialog };
+export { u as ShortcutsDialog };
 
 //# sourceMappingURL=ShortcutsDialog.js.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\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    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  useBodyScrollLock(open);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\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    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose}>\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_backdrop_16tbw_3`,t=`_dialog_16tbw_30`,n=`_header_16tbw_63`,r=`_title_16tbw_71`,i=`_closeBtn_16tbw_78`,a=`_searchRow_16tbw_117`,o=`_searchIcon_16tbw_129`,s=`_searchInput_16tbw_137`,c=`_searchClear_16tbw_158`,l=`_body_16tbw_183`,u=`_empty_16tbw_191`,d=`_section_16tbw_202`,f=`_sectionTitle_16tbw_208`,p=`_list_16tbw_218`,m=`_row_16tbw_234`,h=`_keys_16tbw_249`,g=`_keyCap_16tbw_256`,_=`_plus_16tbw_286`,v=`_description_16tbw_293`,y={backdrop:e,"backdrop-in":`_backdrop-in_16tbw_1`,dialog:t,"dialog-in":`_dialog-in_16tbw_1`,header:n,title:r,closeBtn:i,searchRow:a,searchIcon:o,searchInput:s,searchClear:c,body:l,empty:u,section:d,sectionTitle:f,list:p,row:m,keys:h,keyCap:g,plus:_,description:v};exports.default=y;
+var e={backdrop:`_backdrop_16tbw_3`,"backdrop-in":`_backdrop-in_16tbw_1`,dialog:`_dialog_16tbw_30`,"dialog-in":`_dialog-in_16tbw_1`,header:`_header_16tbw_63`,title:`_title_16tbw_71`,closeBtn:`_closeBtn_16tbw_78`,searchRow:`_searchRow_16tbw_117`,searchIcon:`_searchIcon_16tbw_129`,searchInput:`_searchInput_16tbw_137`,searchClear:`_searchClear_16tbw_158`,body:`_body_16tbw_183`,empty:`_empty_16tbw_191`,section:`_section_16tbw_202`,sectionTitle:`_sectionTitle_16tbw_208`,list:`_list_16tbw_218`,row:`_row_16tbw_234`,keys:`_keys_16tbw_249`,keyCap:`_keyCap_16tbw_256`,plus:`_plus_16tbw_286`,description:`_description_16tbw_293`};exports.default=e;
 //# sourceMappingURL=ShortcutsDialog.module.css.cjs.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.module.css.js

@@ -1,28 +1,27 @@
-//#region src/components/ShortcutsDialog/ShortcutsDialog.module.css
-var e = "_backdrop_16tbw_3", t = "_dialog_16tbw_30", n = "_header_16tbw_63", r = "_title_16tbw_71", i = "_closeBtn_16tbw_78", a = "_searchRow_16tbw_117", o = "_searchIcon_16tbw_129", s = "_searchInput_16tbw_137", c = "_searchClear_16tbw_158", l = "_body_16tbw_183", u = "_empty_16tbw_191", d = "_section_16tbw_202", f = "_sectionTitle_16tbw_208", p = "_list_16tbw_218", m = "_row_16tbw_234", h = "_keys_16tbw_249", g = "_keyCap_16tbw_256", _ = "_plus_16tbw_286", v = "_description_16tbw_293", y = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_16tbw_3",
 	"backdrop-in": "_backdrop-in_16tbw_1",
-	dialog: t,
+	dialog: "_dialog_16tbw_30",
 	"dialog-in": "_dialog-in_16tbw_1",
-	header: n,
-	title: r,
-	closeBtn: i,
-	searchRow: a,
-	searchIcon: o,
-	searchInput: s,
-	searchClear: c,
-	body: l,
-	empty: u,
-	section: d,
-	sectionTitle: f,
-	list: p,
-	row: m,
-	keys: h,
-	keyCap: g,
-	plus: _,
-	description: v
+	header: "_header_16tbw_63",
+	title: "_title_16tbw_71",
+	closeBtn: "_closeBtn_16tbw_78",
+	searchRow: "_searchRow_16tbw_117",
+	searchIcon: "_searchIcon_16tbw_129",
+	searchInput: "_searchInput_16tbw_137",
+	searchClear: "_searchClear_16tbw_158",
+	body: "_body_16tbw_183",
+	empty: "_empty_16tbw_191",
+	section: "_section_16tbw_202",
+	sectionTitle: "_sectionTitle_16tbw_208",
+	list: "_list_16tbw_218",
+	row: "_row_16tbw_234",
+	keys: "_keys_16tbw_249",
+	keyCap: "_keyCap_16tbw_256",
+	plus: "_plus_16tbw_286",
+	description: "_description_16tbw_293"
 };
 //#endregion
-export { y as default };
+export { e as default };
 
 //# sourceMappingURL=ShortcutsDialog.module.css.js.map

package/dist/components/ShortcutsDialog.cjs

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

package/dist/components/Sidebar/Sidebar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../hooks/useBreakpoint.cjs`),t=require(`../SearchBar/SearchBar.cjs`),n=require(`../StatusPage/StatusPage.cjs`),r=require(`./Sidebar.module.css.cjs`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=(0,i.createContext)(!1);function s(){return(0,i.useContext)(o)}var c=(0,i.createContext)(``);function l(e,t){let n=0;return i.Children.forEach(e,e=>{if(!(0,i.isValidElement)(e))return;let r=e.props;typeof r.label==`string`?r.label.toLowerCase().includes(t.toLowerCase())&&n++:r.children&&(n+=l(r.children,t))}),n}var u={blue:`variantBlue`,green:`variantGreen`,red:`variantRed`,yellow:`variantYellow`,black:`variantBlack`,transparent:`variantTransparent`,blurred:`variantBlurred`};function d({children:s,collapsed:d=!1,searchable:f,filter:p,onFilterChange:m,mode:h,variant:g=`classic`,className:_,...v}){let[y,b]=(0,i.useState)(``),{isNarrow:x}=e.useBreakpoint(),S=p!==void 0,C=S?p:y,w=e=>{S||b(e),m?.(e)},T=C.length>0,E=h??(x?`page`:`sidebar`),D=!T||l(s,C)>0;return(0,a.jsx)(o.Provider,{value:d,children:(0,a.jsx)(c.Provider,{value:C,children:(0,a.jsxs)(`nav`,{className:[r.default.sidebar,d?r.default.collapsed:null,E===`page`?r.default.pageMode:null,g===`classic`?null:r.default[u[g]],_].filter(Boolean).join(` `),...v,children:[f&&(0,a.jsx)(`div`,{className:r.default.searchWrap,children:(0,a.jsx)(t.SearchBar,{open:!0,value:C,onChange:e=>w(e.target.value),onClose:()=>w(``),onClear:()=>w(``),inline:!0})}),T&&!D?(0,a.jsx)(n.StatusPage,{title:`No Results`,description:`No items match your search.`,compact:!0}):s]})})})}exports.Sidebar=d,exports.SidebarCollapsedContext=o,exports.SidebarFilterContext=c,exports.useSidebarCollapsed=s;
+const e=require("../../hooks/useBreakpoint.cjs"),t=require("../SearchBar/SearchBar.cjs"),n=require("../StatusPage/StatusPage.cjs"),r=require("./Sidebar.module.css.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.createContext)(!1);function s(){return(0,i.useContext)(o)}var c=(0,i.createContext)(``);function l(e,t){let n=0;return i.Children.forEach(e,e=>{if(!(0,i.isValidElement)(e))return;let r=e.props;typeof r.label==`string`?r.label.toLowerCase().includes(t.toLowerCase())&&n++:r.children&&(n+=l(r.children,t))}),n}var u={blue:`variantBlue`,green:`variantGreen`,red:`variantRed`,yellow:`variantYellow`,black:`variantBlack`,transparent:`variantTransparent`,blurred:`variantBlurred`},d=({children:s,collapsed:d=!1,searchable:f,filter:p,onFilterChange:m,mode:h,variant:g=`classic`,className:_,...v})=>{let[y,b]=(0,i.useState)(``),{isNarrow:x}=e.useBreakpoint(),S=p!==void 0,C=S?p:y,w=e=>{S||b(e),m?.(e)},T=C.length>0,E=h??(x?`page`:`sidebar`),D=!T||l(s,C)>0;return(0,a.jsx)(o.Provider,{value:d,children:(0,a.jsx)(c.Provider,{value:C,children:(0,a.jsxs)(`nav`,{className:[r.default.sidebar,d?r.default.collapsed:null,E===`page`?r.default.pageMode:null,g===`classic`?null:r.default[u[g]],_].filter(Boolean).join(` `),...v,children:[f&&(0,a.jsx)(`div`,{className:r.default.searchWrap,children:(0,a.jsx)(t.SearchBar,{open:!0,value:C,onChange:e=>w(e.target.value),onClose:()=>w(``),onClear:()=>w(``),inline:!0})}),T&&!D?(0,a.jsx)(n.StatusPage,{title:`No Results`,description:`No items match your search.`,compact:!0}):s]})})})};exports.Sidebar=d,exports.SidebarCollapsedContext=o,exports.SidebarFilterContext=c,exports.useSidebarCollapsed=s;
 //# sourceMappingURL=Sidebar.cjs.map

package/dist/components/Sidebar/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport function Sidebar({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n}\n"],"mappings":"+NAoBA,IAAa,GAAA,EAAA,EAAA,eAAwC,GAAM,CAI3D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,EAAwB,CAK5C,IAAa,GAAA,EAAA,EAAA,eAAqC,GAAG,CAKrD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAC1D,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CAEK,EAKT,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,iBACV,CAwDD,SAAgB,EAAQ,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,GAAG,CAClD,CAAE,YAAa,EAAA,eAAe,CAE9B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GACH,EAAkB,EAAE,CAGtB,IAAiB,EAAE,EAGf,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,EAAY,CAAG,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,MAAM,CACnD,YAAe,EAAmB,GAAG,CACrC,YAAe,EAAmB,GAAG,CACrC,OAAA,GACA,CAAA,CACE,CAAA,CAGP,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,MAAM,aAAa,YAAY,8BAA8B,QAAA,GAAU,CAAA,CAEnF,EAEE,GACwB,CAAA,CACC,CAAA"}
+{"version":3,"file":"Sidebar.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const Sidebar = ({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) => {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n"],"mappings":"+NAoBA,IAAa,GAAA,EAAA,EAAA,eAAwC,EAAK,EAI1D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,CAAuB,CAC3C,CAIA,IAAa,GAAA,EAAA,EAAA,eAAqC,EAAE,EAKpD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,CAAK,EACvB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,GACzD,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,CAAM,EAEnE,CAAC,EAEM,CACT,CAIA,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,gBACX,EAwDa,GAAW,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,KACe,CAClB,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,EAAE,EACjD,CAAE,YAAa,EAAA,cAAc,EAE7B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GACH,EAAkB,CAAC,EAGrB,IAAiB,CAAC,CACpB,EAEM,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,CAAW,EAAI,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,KAAK,EAClD,YAAe,EAAmB,EAAE,EACpC,YAAe,EAAmB,EAAE,EACpC,OAAA,EACD,CAAA,CACE,CAAA,EAGN,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,MAAM,aAAa,YAAY,8BAA8B,QAAA,EAAS,CAAA,EAElF,CAEC,GACwB,CAAA,CACC,CAAA,CAEtC"}

package/dist/components/Sidebar/Sidebar.d.ts

@@ -56,4 +56,4 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
  */
-export declare function Sidebar({ children, collapsed, searchable, filter: controlledFilter, onFilterChange, mode, variant, className, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: ({ children, collapsed, searchable, filter: controlledFilter, onFilterChange, mode, variant, className, ...props }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/Sidebar.js

@@ -26,8 +26,7 @@ var h = {
 	black: "variantBlack",
 	transparent: "variantTransparent",
 	blurred: "variantBlurred"
-};
-function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) {
+}, g = ({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) => {
 	let [b, x] = c(""), { isNarrow: S } = e(), C = s !== void 0, w = C ? s : b, T = (e) => {
 		C || x(e), f?.(e);
 	}, E = w.length > 0, D = g ?? (S ? "page" : "sidebar"), O = !E || m(i, w) > 0;
@@ -62,7 +61,7 @@ function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterC
 			})
 		})
 	});
-}
+};
 //#endregion
 export { g as Sidebar, d as SidebarCollapsedContext, p as SidebarFilterContext, f as useSidebarCollapsed };
 

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport function Sidebar({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,GAAM;AAI3D,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;AAK5C,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;AAKT,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;CACV;AAwDD,SAAgB,EAAQ,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,EAAE,gBAAa,GAAe,EAE9B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;AAKxC,EAJK,KACH,EAAkB,EAAE,EAGtB,IAAiB,EAAE;IAGf,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,EAAY,GAAG;AAElF,QACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;MACnD,eAAe,EAAmB,GAAG;MACrC,eAAe,EAAmB,GAAG;MACrC,QAAA;MACA,CAAA;KACE,CAAA,EAGP,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;KAAU,CAAA,GAEnF,EAEE;;GACwB,CAAA;EACC,CAAA"}
+{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const Sidebar = ({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) => {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,EAAK;AAI1D,SAAgB,IAAsB;CACpC,OAAO,EAAW,CAAuB;AAC3C;AAIA,IAAa,IAAuB,EAAc,EAAE;AAKpD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;CAiBZ,OAhBA,EAAS,QAAQ,IAAW,MAAU;EACpC,IAAI,CAAC,EAAe,CAAK,GACvB;EAGF,IAAM,IAAQ,EAAM;EAEpB,AAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,KACzD,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,CAAM;CAEnE,CAAC,GAEM;AACT;AAIA,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;AACX,GAwDa,KAAW,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,QACe;CAClB,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAE,GACjD,EAAE,gBAAa,EAAc,GAE7B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;EAKxC,AAJK,KACH,EAAkB,CAAC,GAGrB,IAAiB,CAAC;CACpB,GAEM,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,CAAW,IAAI;CAElF,OACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,KAAK;MAClD,eAAe,EAAmB,EAAE;MACpC,eAAe,EAAmB,EAAE;MACpC,QAAA;KACD,CAAA;IACE,CAAA,GAGN,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;IAAS,CAAA,IAElF,CAEC;;EACwB,CAAA;CACC,CAAA;AAEtC"}

package/dist/components/Sidebar/Sidebar.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_sidebar_156vz_3`,t=`_section_156vz_21`,n=`_sectionHeader_156vz_35`,r=`_sectionHeaderIcon_156vz_71`,i=`_sectionTitle_156vz_78`,a=`_sectionChevron_156vz_94`,o=`_sectionBody_156vz_104`,s=`_sectionBodyCollapsed_156vz_110`,c=`_sectionBodyInner_156vz_114`,l=`_list_156vz_120`,u=`_item_156vz_131`,d=`_itemBtn_156vz_137`,f=`_active_156vz_184`,p=`_itemIcon_156vz_200`,m=`_itemLabel_156vz_213`,h=`_itemSuffix_156vz_223`,g=`_contextMenu_156vz_232`,_=`_contextMenuItem_156vz_262`,v=`_contextMenuDestructive_156vz_298`,y=`_searchWrap_156vz_304`,b=`_variantBlue_156vz_315`,x=`_variantGreen_156vz_324`,S=`_variantRed_156vz_333`,C=`_variantYellow_156vz_342`,w=`_variantBlack_156vz_351`,T=`_variantTransparent_156vz_360`,E=`_variantBlurred_156vz_365`,D=`_pageMode_156vz_381`,O=`_dragOver_156vz_388`,k=`_collapsed_156vz_396`,A=`_itemCollapsed_156vz_407`,j={sidebar:e,section:t,sectionHeader:n,sectionHeaderIcon:r,sectionTitle:i,sectionChevron:a,sectionBody:o,sectionBodyCollapsed:s,sectionBodyInner:c,list:l,item:u,itemBtn:d,active:f,itemIcon:p,itemLabel:m,itemSuffix:h,contextMenu:g,"menu-in":`_menu-in_156vz_1`,contextMenuItem:_,contextMenuDestructive:v,searchWrap:y,variantBlue:b,variantGreen:x,variantRed:S,variantYellow:C,variantBlack:w,variantTransparent:T,variantBlurred:E,pageMode:D,dragOver:O,collapsed:k,itemCollapsed:A};exports.default=j;
+var e={sidebar:`_sidebar_156vz_3`,section:`_section_156vz_21`,sectionHeader:`_sectionHeader_156vz_35`,sectionHeaderIcon:`_sectionHeaderIcon_156vz_71`,sectionTitle:`_sectionTitle_156vz_78`,sectionChevron:`_sectionChevron_156vz_94`,sectionBody:`_sectionBody_156vz_104`,sectionBodyCollapsed:`_sectionBodyCollapsed_156vz_110`,sectionBodyInner:`_sectionBodyInner_156vz_114`,list:`_list_156vz_120`,item:`_item_156vz_131`,itemBtn:`_itemBtn_156vz_137`,active:`_active_156vz_184`,itemIcon:`_itemIcon_156vz_200`,itemLabel:`_itemLabel_156vz_213`,itemSuffix:`_itemSuffix_156vz_223`,contextMenu:`_contextMenu_156vz_232`,"menu-in":`_menu-in_156vz_1`,contextMenuItem:`_contextMenuItem_156vz_262`,contextMenuDestructive:`_contextMenuDestructive_156vz_298`,searchWrap:`_searchWrap_156vz_304`,variantBlue:`_variantBlue_156vz_315`,variantGreen:`_variantGreen_156vz_324`,variantRed:`_variantRed_156vz_333`,variantYellow:`_variantYellow_156vz_342`,variantBlack:`_variantBlack_156vz_351`,variantTransparent:`_variantTransparent_156vz_360`,variantBlurred:`_variantBlurred_156vz_365`,pageMode:`_pageMode_156vz_381`,dragOver:`_dragOver_156vz_388`,collapsed:`_collapsed_156vz_396`,itemCollapsed:`_itemCollapsed_156vz_407`};exports.default=e;
 //# sourceMappingURL=Sidebar.module.css.cjs.map

package/dist/components/Sidebar/Sidebar.module.css.js

@@ -1,39 +1,38 @@
-//#region src/components/Sidebar/Sidebar.module.css
-var e = "_sidebar_156vz_3", t = "_section_156vz_21", n = "_sectionHeader_156vz_35", r = "_sectionHeaderIcon_156vz_71", i = "_sectionTitle_156vz_78", a = "_sectionChevron_156vz_94", o = "_sectionBody_156vz_104", s = "_sectionBodyCollapsed_156vz_110", c = "_sectionBodyInner_156vz_114", l = "_list_156vz_120", u = "_item_156vz_131", d = "_itemBtn_156vz_137", f = "_active_156vz_184", p = "_itemIcon_156vz_200", m = "_itemLabel_156vz_213", h = "_itemSuffix_156vz_223", g = "_contextMenu_156vz_232", _ = "_contextMenuItem_156vz_262", v = "_contextMenuDestructive_156vz_298", y = "_searchWrap_156vz_304", b = "_variantBlue_156vz_315", x = "_variantGreen_156vz_324", S = "_variantRed_156vz_333", C = "_variantYellow_156vz_342", w = "_variantBlack_156vz_351", T = "_variantTransparent_156vz_360", E = "_variantBlurred_156vz_365", D = "_pageMode_156vz_381", O = "_dragOver_156vz_388", k = "_collapsed_156vz_396", A = "_itemCollapsed_156vz_407", j = {
-	sidebar: e,
-	section: t,
-	sectionHeader: n,
-	sectionHeaderIcon: r,
-	sectionTitle: i,
-	sectionChevron: a,
-	sectionBody: o,
-	sectionBodyCollapsed: s,
-	sectionBodyInner: c,
-	list: l,
-	item: u,
-	itemBtn: d,
-	active: f,
-	itemIcon: p,
-	itemLabel: m,
-	itemSuffix: h,
-	contextMenu: g,
+var e = {
+	sidebar: "_sidebar_156vz_3",
+	section: "_section_156vz_21",
+	sectionHeader: "_sectionHeader_156vz_35",
+	sectionHeaderIcon: "_sectionHeaderIcon_156vz_71",
+	sectionTitle: "_sectionTitle_156vz_78",
+	sectionChevron: "_sectionChevron_156vz_94",
+	sectionBody: "_sectionBody_156vz_104",
+	sectionBodyCollapsed: "_sectionBodyCollapsed_156vz_110",
+	sectionBodyInner: "_sectionBodyInner_156vz_114",
+	list: "_list_156vz_120",
+	item: "_item_156vz_131",
+	itemBtn: "_itemBtn_156vz_137",
+	active: "_active_156vz_184",
+	itemIcon: "_itemIcon_156vz_200",
+	itemLabel: "_itemLabel_156vz_213",
+	itemSuffix: "_itemSuffix_156vz_223",
+	contextMenu: "_contextMenu_156vz_232",
 	"menu-in": "_menu-in_156vz_1",
-	contextMenuItem: _,
-	contextMenuDestructive: v,
-	searchWrap: y,
-	variantBlue: b,
-	variantGreen: x,
-	variantRed: S,
-	variantYellow: C,
-	variantBlack: w,
-	variantTransparent: T,
-	variantBlurred: E,
-	pageMode: D,
-	dragOver: O,
-	collapsed: k,
-	itemCollapsed: A
+	contextMenuItem: "_contextMenuItem_156vz_262",
+	contextMenuDestructive: "_contextMenuDestructive_156vz_298",
+	searchWrap: "_searchWrap_156vz_304",
+	variantBlue: "_variantBlue_156vz_315",
+	variantGreen: "_variantGreen_156vz_324",
+	variantRed: "_variantRed_156vz_333",
+	variantYellow: "_variantYellow_156vz_342",
+	variantBlack: "_variantBlack_156vz_351",
+	variantTransparent: "_variantTransparent_156vz_360",
+	variantBlurred: "_variantBlurred_156vz_365",
+	pageMode: "_pageMode_156vz_381",
+	dragOver: "_dragOver_156vz_388",
+	collapsed: "_collapsed_156vz_396",
+	itemCollapsed: "_itemCollapsed_156vz_407"
 };
 //#endregion
-export { j as default };
+export { e as default };
 
 //# sourceMappingURL=Sidebar.module.css.js.map

package/dist/components/Sidebar/SidebarItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../Tooltip/Tooltip.cjs`),n=require(`./Sidebar.module.css.cjs`),r=require(`./Sidebar.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
+const e=require("../Icon/Icon.cjs"),t=require("../Tooltip/Tooltip.cjs"),n=require("./Sidebar.module.css.cjs"),r=require("./Sidebar.cjs");let i=require("react"),a=require("react-dom"),o=require("react/jsx-runtime");var s=({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._})=>{let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},onKeyDown:e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:N}):N,O&&!!p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})};exports.SidebarItem=s;
 //# sourceMappingURL=SidebarItem.cjs.map