@gnome-ui/react 1.36.2 → 1.36.4

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

@@ -0,0 +1,2 @@
+var e={group:`_group_17s4f_3`,header:`_header_17s4f_11`,headerText:`_headerText_17s4f_17`,title:`_title_17s4f_25`,description:`_description_17s4f_33`,suffix:`_suffix_17s4f_42`,content:`_content_17s4f_48`};exports.default=e;
+//# sourceMappingURL=PreferencesGroup.module.css.cjs.map

package/dist/components/PreferencesGroup/PreferencesGroup.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesGroup.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\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.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+var e = {
+	group: "_group_17s4f_3",
+	header: "_header_17s4f_11",
+	headerText: "_headerText_17s4f_17",
+	title: "_title_17s4f_25",
+	description: "_description_17s4f_33",
+	suffix: "_suffix_17s4f_42",
+	content: "_content_17s4f_48"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=PreferencesGroup.module.css.js.map

package/dist/components/PreferencesGroup/PreferencesGroup.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesGroup.module.css.js","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.description {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\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.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}

package/dist/components/PreferencesGroup.cjs

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

package/dist/components/PreferencesGroup.d.ts

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

package/dist/components/PreferencesGroup.js

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

package/dist/components/PreferencesPage/PreferencesPage.cjs

@@ -0,0 +1,2 @@
+const e=require(`./PreferencesPage.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,iconName:r,children:i,className:a,...o}){return(0,t.jsx)(`div`,{className:[e.default.page,a].filter(Boolean).join(` `),role:`tabpanel`,...o,children:(0,t.jsx)(`div`,{className:e.default.inner,children:i})})}exports.PreferencesPage=n;
+//# sourceMappingURL=PreferencesPage.cjs.map

package/dist/components/PreferencesPage/PreferencesPage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesPage.cjs","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PreferencesPage.module.css\";\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport function PreferencesPage({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) {\n  return (\n    <div\n      className={[styles.page, className].filter(Boolean).join(\" \")}\n      role=\"tabpanel\"\n      {...props}\n    >\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"uFA4BA,SAAgB,EAAgB,CAC9B,MAAO,EACP,SAAU,EACV,WACA,YACA,GAAG,GACoB,CACvB,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,KAAK,WACL,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAQ,WAAe,CAAA,CAC1C,CAAA"}

package/dist/components/PreferencesPage/PreferencesPage.js

@@ -0,0 +1,18 @@
+import e from "./PreferencesPage.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/PreferencesPage/PreferencesPage.tsx
+function n({ title: n, iconName: r, children: i, className: a, ...o }) {
+	return /* @__PURE__ */ t("div", {
+		className: [e.page, a].filter(Boolean).join(" "),
+		role: "tabpanel",
+		...o,
+		children: /* @__PURE__ */ t("div", {
+			className: e.inner,
+			children: i
+		})
+	});
+}
+//#endregion
+export { n as PreferencesPage };
+
+//# sourceMappingURL=PreferencesPage.js.map

package/dist/components/PreferencesPage/PreferencesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesPage.js","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PreferencesPage.module.css\";\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport function PreferencesPage({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) {\n  return (\n    <div\n      className={[styles.page, className].filter(Boolean).join(\" \")}\n      role=\"tabpanel\"\n      {...props}\n    >\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;AA4BA,SAAgB,EAAgB,EAC9B,OAAO,GACP,UAAU,GACV,aACA,cACA,GAAG,KACoB;AACvB,QACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7D,MAAK;EACL,GAAI;YAEJ,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ;GAAe,CAAA;EAC1C,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={page:`_page_gt42j_3`,inner:`_inner_gt42j_10`};exports.default=e;
+//# sourceMappingURL=PreferencesPage.module.css.cjs.map

package/dist/components/PreferencesPage/PreferencesPage.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesPage.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.module.css"],"sourcesContent":["/* ─── PreferencesPage ────────────────────────────────────────────────────────── */\n\n.page {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* Centred column, mirrors AdwClamp at ~468 px */\n.inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-4, 24px);\n  max-width: 468px;\n  margin: 0 auto;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n}\n"],"mappings":""}

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

@@ -0,0 +1,8 @@
+var e = {
+	page: "_page_gt42j_3",
+	inner: "_inner_gt42j_10"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=PreferencesPage.module.css.js.map

package/dist/components/PreferencesPage/PreferencesPage.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreferencesPage.module.css.js","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.module.css"],"sourcesContent":["/* ─── PreferencesPage ────────────────────────────────────────────────────────── */\n\n.page {\n  flex: 1;\n  overflow-y: auto;\n  min-height: 0;\n}\n\n/* Centred column, mirrors AdwClamp at ~468 px */\n.inner {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-4, 24px);\n  max-width: 468px;\n  margin: 0 auto;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\n}\n"],"mappings":""}

package/dist/components/PreferencesPage.cjs

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

package/dist/components/PreferencesPage.d.ts

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

package/dist/components/PreferencesPage.js

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

package/dist/components/ProgressBar/ProgressBar.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ProgressBar.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({value:n,variant:r=`accent`,className:i,"aria-label":a,"aria-labelledby":o,...s}){let c=n==null,l=c?void 0:Math.min(1,Math.max(0,n)),u=l===void 0?void 0:l*100;return(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":a,"aria-labelledby":o,"aria-valuenow":l===void 0?void 0:Math.round(u),"aria-valuemin":c?void 0:0,"aria-valuemax":c?void 0:100,className:[e.default.track,i].filter(Boolean).join(` `),...s,children:(0,t.jsx)(`div`,{className:[e.default.fill,e.default[r],c?e.default.indeterminate:null].filter(Boolean).join(` `),style:c?void 0:{width:`${u}%`}})})}exports.ProgressBar=n;
+//# sourceMappingURL=ProgressBar.cjs.map

package/dist/components/ProgressBar/ProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./ProgressBar.module.css\";\n\nexport type ProgressBarVariant = \"accent\" | \"success\" | \"warning\" | \"error\";\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  \"aria-label\"?: string;\n  /** Associates the bar with a visible element that labels it. */\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport function ProgressBar({\n  value,\n  variant = \"accent\",\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: ProgressBarProps) {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <div\n        className={[\n          styles.fill,\n          styles[variant],\n          isIndeterminate ? styles.indeterminate : null,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"mFAoCA,SAAgB,EAAY,CAC1B,QACA,UAAU,SACV,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,GACgB,CACnB,IAAM,EAAkB,GAAiC,KACnD,EAAU,EAAkB,IAAA,GAAY,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,EAAM,CAAC,CACvE,EAAU,IAAY,IAAA,GAA4B,IAAA,GAAhB,EAAU,IAElD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,cACL,aAAY,EACZ,kBAAiB,EACjB,gBAAe,IAAY,IAAA,GAAmC,IAAA,GAAvB,KAAK,MAAM,EAAS,CAC3D,gBAAe,EAAkB,IAAA,GAAY,EAC7C,gBAAe,EAAkB,IAAA,GAAY,IAC7C,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAA,QAAO,GACP,EAAkB,EAAA,QAAO,cAAgB,KAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAQ,EAA6C,IAAA,GAA3B,CAAE,MAAO,GAAG,EAAQ,GAAI,CAClD,CAAA,CACE,CAAA"}

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,28 @@
+import e from "./ProgressBar.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/ProgressBar/ProgressBar.tsx
+function n({ value: n, variant: r = "accent", className: i, "aria-label": a, "aria-labelledby": o, ...s }) {
+	let c = n == null, l = c ? void 0 : Math.min(1, Math.max(0, n)), u = l === void 0 ? void 0 : l * 100;
+	return /* @__PURE__ */ t("div", {
+		role: "progressbar",
+		"aria-label": a,
+		"aria-labelledby": o,
+		"aria-valuenow": l === void 0 ? void 0 : Math.round(u),
+		"aria-valuemin": c ? void 0 : 0,
+		"aria-valuemax": c ? void 0 : 100,
+		className: [e.track, i].filter(Boolean).join(" "),
+		...s,
+		children: /* @__PURE__ */ t("div", {
+			className: [
+				e.fill,
+				e[r],
+				c ? e.indeterminate : null
+			].filter(Boolean).join(" "),
+			style: c ? void 0 : { width: `${u}%` }
+		})
+	});
+}
+//#endregion
+export { n as ProgressBar };
+
+//# sourceMappingURL=ProgressBar.js.map

package/dist/components/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./ProgressBar.module.css\";\n\nexport type ProgressBarVariant = \"accent\" | \"success\" | \"warning\" | \"error\";\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  \"aria-label\"?: string;\n  /** Associates the bar with a visible element that labels it. */\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport function ProgressBar({\n  value,\n  variant = \"accent\",\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: ProgressBarProps) {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <div\n        className={[\n          styles.fill,\n          styles[variant],\n          isIndeterminate ? styles.indeterminate : null,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAoCA,SAAgB,EAAY,EAC1B,UACA,aAAU,UACV,cACA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACgB;CACnB,IAAM,IAAkB,KAAiC,MACnD,IAAU,IAAkB,KAAA,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAM,CAAC,EACvE,IAAU,MAAY,KAAA,IAA4B,KAAA,IAAhB,IAAU;AAElD,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAY,KAAA,IAAmC,KAAA,IAAvB,KAAK,MAAM,EAAS;EAC3D,iBAAe,IAAkB,KAAA,IAAY;EAC7C,iBAAe,IAAkB,KAAA,IAAY;EAC7C,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW;IACT,EAAO;IACP,EAAO;IACP,IAAkB,EAAO,gBAAgB;IAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,OAAQ,IAA6C,KAAA,IAA3B,EAAE,OAAO,GAAG,EAAQ,IAAI;GAClD,CAAA;EACE,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={track:`_track_endpr_3`,fill:`_fill_endpr_14`,accent:`_accent_endpr_23`,success:`_success_endpr_24`,warning:`_warning_endpr_25`,error:`_error_endpr_26`,indeterminate:`_indeterminate_endpr_30`,pulse:`_pulse_endpr_1`};exports.default=e;
+//# sourceMappingURL=ProgressBar.module.css.cjs.map

package/dist/components/ProgressBar/ProgressBar.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.module.css.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent  { background-color: var(--gnome-accent-bg-color,   #3584e4); }\n.success { background-color: var(--gnome-success-bg-color,  #2ec27e); }\n.warning { background-color: var(--gnome-warning-bg-color,  #f6d32d); }\n.error   { background-color: var(--gnome-error-bg-color,    #e01b24); }\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0%   { left: -40%; }\n  100% { left: 100%; }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,14 @@
+var e = {
+	track: "_track_endpr_3",
+	fill: "_fill_endpr_14",
+	accent: "_accent_endpr_23",
+	success: "_success_endpr_24",
+	warning: "_warning_endpr_25",
+	error: "_error_endpr_26",
+	indeterminate: "_indeterminate_endpr_30",
+	pulse: "_pulse_endpr_1"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ProgressBar.module.css.js.map

package/dist/components/ProgressBar/ProgressBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.module.css.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent  { background-color: var(--gnome-accent-bg-color,   #3584e4); }\n.success { background-color: var(--gnome-success-bg-color,  #2ec27e); }\n.warning { background-color: var(--gnome-warning-bg-color,  #f6d32d); }\n.error   { background-color: var(--gnome-error-bg-color,    #e01b24); }\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0%   { left: -40%; }\n  100% { left: 100%; }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}

package/dist/components/ProgressBar.cjs

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

package/dist/components/ProgressBar.d.ts

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

package/dist/components/ProgressBar.js

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

package/dist/components/RadioButton/RadioButton.cjs

@@ -0,0 +1,2 @@
+const e=require(`./RadioButton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({className:n,...r}){return(0,t.jsx)(`input`,{type:`radio`,className:[e.default.radio,n].filter(Boolean).join(` `),...r})}exports.RadioButton=n;
+//# sourceMappingURL=RadioButton.cjs.map

package/dist/components/RadioButton/RadioButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from \"react\";\nimport styles from \"./RadioButton.module.css\";\n\nexport interface RadioButtonProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  \"aria-label\"?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport function RadioButton({ className, ...props }: RadioButtonProps) {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(\" \")}\n      {...props}\n    />\n  );\n}\n"],"mappings":"mFAkBA,SAAgB,EAAY,CAAE,YAAW,GAAG,GAA2B,CACrE,OACE,EAAA,EAAA,KAAC,QAAD,CACE,KAAK,QACL,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EACJ,CAAA"}

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,14 @@
+import e from "./RadioButton.module.css.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/RadioButton/RadioButton.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("input", {
+		type: "radio",
+		className: [e.radio, n].filter(Boolean).join(" "),
+		...r
+	});
+}
+//#endregion
+export { n as RadioButton };
+
+//# sourceMappingURL=RadioButton.js.map

package/dist/components/RadioButton/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from \"react\";\nimport styles from \"./RadioButton.module.css\";\n\nexport interface RadioButtonProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  \"aria-label\"?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport function RadioButton({ className, ...props }: RadioButtonProps) {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(\" \")}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA2B;AACrE,QACE,kBAAC,SAAD;EACE,MAAK;EACL,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EACJ,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={radio:`_radio_1vybt_3`};exports.default=e;
+//# sourceMappingURL=RadioButton.module.css.cjs.map

package/dist/components/RadioButton/RadioButton.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.module.css.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-pill);\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color     var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #ffffff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio:focus-visible {\n  outline: none;\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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, #383838) 85%,\n      white 15%\n    );\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .radio:not(:checked):hover {\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,5 @@
+var e = { radio: "_radio_1vybt_3" };
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=RadioButton.module.css.js.map

package/dist/components/RadioButton/RadioButton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.module.css.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-pill);\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color     var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #ffffff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio:focus-visible {\n  outline: none;\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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, #383838) 85%,\n      white 15%\n    );\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .radio:not(:checked):hover {\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/RadioButton.cjs

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

package/dist/components/RadioButton.d.ts

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

package/dist/components/RadioButton.js

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

package/dist/components/SearchBar/SearchBar.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/Close.cjs`),n=require(`../../icons/dist/icons/Search.cjs`),r=require(`../Spinner/Spinner.cjs`),i=require(`./SearchBar.module.css.cjs`);let a=require(`react`),o=require(`react-dom`),s=require(`react/jsx-runtime`);function c({open:c,onClose:l,onClear:u,children:d,value:f,onChange:p,placeholder:m=`Search…`,disabled:h,inline:g=!1,className:_,suggestions:v,onSuggestionSelect:y,loadingSuggestions:b=!1,renderSuggestion:x,suggestionsLabel:S=`Suggestions`,...C}){let w=(0,a.useRef)(null),T=(0,a.useRef)(null),E=(0,a.useRef)(null),D=(0,a.useId)(),O=(0,a.useId)(),[k,A]=(0,a.useState)(-1),[j,M]=(0,a.useState)(null),N=(v?.length??0)>0,P=c&&(b||N);(0,a.useEffect)(()=>{A(-1)},[v]),(0,a.useEffect)(()=>{if(c){let e=requestAnimationFrame(()=>w.current?.focus());return()=>cancelAnimationFrame(e)}},[c]),(0,a.useEffect)(()=>{if(!P||!T.current){M(null);return}function e(){if(!T.current)return;let e=T.current.getBoundingClientRect();M({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[P]),(0,a.useEffect)(()=>{k<0||!E.current||E.current.children[k]?.scrollIntoView({block:`nearest`})},[k]);let F=(0,a.useCallback)(e=>{if(P&&N&&v){if(e.key===`ArrowDown`){e.preventDefault(),A(e=>Math.min(e+1,v.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),A(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&k>=0){e.preventDefault(),y?.(v[k]);return}}e.key===`Escape`&&(e.preventDefault(),l?.()),C.onKeyDown?.(e)},[l,C,P,N,v,k,y]),I=f!==void 0&&f!==``,L=k>=0&&v?.[k]?`${O}-${v[k].id}`:void 0,R=P&&j?(0,o.createPortal)((0,s.jsxs)(`ul`,{ref:E,role:`listbox`,"aria-label":S,id:D,className:i.default.suggestionsPanel,style:{top:j.top,left:j.left,width:j.width},onMouseDown:e=>e.preventDefault(),children:[b&&(0,s.jsx)(`li`,{role:`presentation`,className:i.default.suggestionsLoading,children:(0,s.jsx)(r.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!b&&v?.map((e,t)=>(0,s.jsx)(`li`,{id:`${O}-${e.id}`,role:`option`,"aria-selected":t===k,className:[i.default.suggestionItem,t===k?i.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>A(t),onMouseLeave:()=>A(-1),onClick:()=>y?.(e),children:x?x(e):e.label},e.id))]}),document.body):null;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(`div`,{ref:T,className:[i.default.wrapper,c?i.default.open:null,_].filter(Boolean).join(` `),"aria-hidden":!c,children:[(0,s.jsxs)(`div`,{className:[i.default.bar,g?i.default.inline:null,h?i.default.disabled:null].filter(Boolean).join(` `),children:[(0,s.jsx)(`span`,{className:i.default.searchIcon,"aria-hidden":!0,children:(0,s.jsx)(e.Icon,{icon:n.e,size:`md`})}),(0,s.jsx)(`input`,{ref:w,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":P,"aria-controls":P?D:void 0,"aria-activedescendant":L,value:f,onChange:p,placeholder:m,disabled:h,tabIndex:c?void 0:-1,className:i.default.input,onKeyDown:F,...C}),I&&(0,s.jsx)(`button`,{type:`button`,className:i.default.clearButton,"aria-label":`Clear search`,tabIndex:c?void 0:-1,disabled:h,onClick:()=>{u?.(),w.current?.focus()},children:(0,s.jsx)(e.Icon,{icon:t.e,size:`md`})})]}),d&&(0,s.jsx)(`div`,{className:i.default.filterRow,children:d})]}),typeof document<`u`&&R]})}exports.SearchBar=c;
+//# sourceMappingURL=SearchBar.cjs.map

package/dist/components/SearchBar/SearchBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/SearchBar/SearchBar.js

@@ -0,0 +1,160 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { e as t } from "../../icons/dist/icons/Close.js";
+import { e as n } from "../../icons/dist/icons/Search.js";
+import { Spinner as r } from "../Spinner/Spinner.js";
+import i from "./SearchBar.module.css.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { createPortal as u } from "react-dom";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/SearchBar/SearchBar.tsx
+function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) {
+	let A = c(null), j = c(null), M = c(null), N = s(), P = s(), [F, I] = l(-1), [L, R] = l(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
+	o(() => {
+		I(-1);
+	}, [w]), o(() => {
+		if (m) {
+			let e = requestAnimationFrame(() => A.current?.focus());
+			return () => cancelAnimationFrame(e);
+		}
+	}, [m]), o(() => {
+		if (!B || !j.current) {
+			R(null);
+			return;
+		}
+		function e() {
+			if (!j.current) return;
+			let e = j.current.getBoundingClientRect();
+			R({
+				top: e.bottom,
+				left: e.left,
+				width: e.width
+			});
+		}
+		return e(), window.addEventListener("scroll", e, {
+			passive: !0,
+			capture: !0
+		}), window.addEventListener("resize", e, { passive: !0 }), () => {
+			window.removeEventListener("scroll", e, { capture: !0 }), window.removeEventListener("resize", e);
+		};
+	}, [B]), o(() => {
+		F < 0 || !M.current || M.current.children[F]?.scrollIntoView({ block: "nearest" });
+	}, [F]);
+	let V = a((e) => {
+		if (B && z && w) {
+			if (e.key === "ArrowDown") {
+				e.preventDefault(), I((e) => Math.min(e + 1, w.length - 1));
+				return;
+			}
+			if (e.key === "ArrowUp") {
+				e.preventDefault(), I((e) => Math.max(e - 1, -1));
+				return;
+			}
+			if (e.key === "Enter" && F >= 0) {
+				e.preventDefault(), T?.(w[F]);
+				return;
+			}
+		}
+		e.key === "Escape" && (e.preventDefault(), h?.()), k.onKeyDown?.(e);
+	}, [
+		h,
+		k,
+		B,
+		z,
+		w,
+		F,
+		T
+	]), H = v !== void 0 && v !== "", U = F >= 0 && w?.[F] ? `${P}-${w[F].id}` : void 0, W = B && L ? u(/* @__PURE__ */ p("ul", {
+		ref: M,
+		role: "listbox",
+		"aria-label": O,
+		id: N,
+		className: i.suggestionsPanel,
+		style: {
+			top: L.top,
+			left: L.left,
+			width: L.width
+		},
+		onMouseDown: (e) => e.preventDefault(),
+		children: [E && /* @__PURE__ */ f("li", {
+			role: "presentation",
+			className: i.suggestionsLoading,
+			children: /* @__PURE__ */ f(r, {
+				size: "sm",
+				label: "Loading suggestions…"
+			})
+		}), !E && w?.map((e, t) => /* @__PURE__ */ f("li", {
+			id: `${P}-${e.id}`,
+			role: "option",
+			"aria-selected": t === F,
+			className: [i.suggestionItem, t === F ? i.suggestionItemActive : null].filter(Boolean).join(" "),
+			onMouseEnter: () => I(t),
+			onMouseLeave: () => I(-1),
+			onClick: () => T?.(e),
+			children: D ? D(e) : e.label
+		}, e.id))]
+	}), document.body) : null;
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", {
+		ref: j,
+		className: [
+			i.wrapper,
+			m ? i.open : null,
+			C
+		].filter(Boolean).join(" "),
+		"aria-hidden": !m,
+		children: [/* @__PURE__ */ p("div", {
+			className: [
+				i.bar,
+				S ? i.inline : null,
+				x ? i.disabled : null
+			].filter(Boolean).join(" "),
+			children: [
+				/* @__PURE__ */ f("span", {
+					className: i.searchIcon,
+					"aria-hidden": !0,
+					children: /* @__PURE__ */ f(e, {
+						icon: n,
+						size: "md"
+					})
+				}),
+				/* @__PURE__ */ f("input", {
+					ref: A,
+					type: "search",
+					role: "combobox",
+					"aria-autocomplete": "list",
+					"aria-expanded": B,
+					"aria-controls": B ? N : void 0,
+					"aria-activedescendant": U,
+					value: v,
+					onChange: y,
+					placeholder: b,
+					disabled: x,
+					tabIndex: m ? void 0 : -1,
+					className: i.input,
+					onKeyDown: V,
+					...k
+				}),
+				H && /* @__PURE__ */ f("button", {
+					type: "button",
+					className: i.clearButton,
+					"aria-label": "Clear search",
+					tabIndex: m ? void 0 : -1,
+					disabled: x,
+					onClick: () => {
+						g?.(), A.current?.focus();
+					},
+					children: /* @__PURE__ */ f(e, {
+						icon: t,
+						size: "md"
+					})
+				})
+			]
+		}), _ && /* @__PURE__ */ f("div", {
+			className: i.filterRow,
+			children: _
+		})]
+	}), typeof document < "u" && W] });
+}
+//#endregion
+export { m as SearchBar };
+
+//# sourceMappingURL=SearchBar.js.map

package/dist/components/SearchBar/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e={wrapper:`_wrapper_ld6g1_3`,open:`_open_ld6g1_13`,bar:`_bar_ld6g1_20`,disabled:`_disabled_ld6g1_31`,searchIcon:`_searchIcon_ld6g1_37`,input:`_input_ld6g1_47`,clearButton:`_clearButton_ld6g1_82`,filterRow:`_filterRow_ld6g1_124`,suggestionsPanel:`_suggestionsPanel_ld6g1_136`,suggestionsLoading:`_suggestionsLoading_ld6g1_160`,suggestionItem:`_suggestionItem_ld6g1_166`,suggestionItemActive:`_suggestionItemActive_ld6g1_176`,inline:`_inline_ld6g1_202`};exports.default=e;
+//# sourceMappingURL=SearchBar.module.css.cjs.map

package/dist/components/SearchBar/SearchBar.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.module.css.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity    var(--gnome-duration-fast,   100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\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}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\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.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,19 @@
+var e = {
+	wrapper: "_wrapper_ld6g1_3",
+	open: "_open_ld6g1_13",
+	bar: "_bar_ld6g1_20",
+	disabled: "_disabled_ld6g1_31",
+	searchIcon: "_searchIcon_ld6g1_37",
+	input: "_input_ld6g1_47",
+	clearButton: "_clearButton_ld6g1_82",
+	filterRow: "_filterRow_ld6g1_124",
+	suggestionsPanel: "_suggestionsPanel_ld6g1_136",
+	suggestionsLoading: "_suggestionsLoading_ld6g1_160",
+	suggestionItem: "_suggestionItem_ld6g1_166",
+	suggestionItemActive: "_suggestionItemActive_ld6g1_176",
+	inline: "_inline_ld6g1_202"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=SearchBar.module.css.js.map

package/dist/components/SearchBar/SearchBar.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.module.css.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity    var(--gnome-duration-fast,   100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\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}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\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.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}