@gnome-ui/react 1.36.1 → 1.36.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.css.cjs","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\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/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color  var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow    var(--gnome-duration-fast) var(--gnome-easing-default);\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.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\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.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+var e = {
+	wrapper: "_wrapper_q91d8_3",
+	disabled: "_disabled_q91d8_9",
+	label: "_label_q91d8_15",
+	input: "_input_q91d8_25",
+	errorInput: "_errorInput_q91d8_74",
+	hint: "_hint_q91d8_89",
+	errorHint: "_errorHint_q91d8_97"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=TextField.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.css.js","names":[],"sources":["../../../src/components/TextField/TextField.module.css"],"sourcesContent":["/* ─── Wrapper ──────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.label {\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/* ─── Input ────────────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  -webkit-appearance: none;\n\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\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-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  background-color: var(--gnome-view-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n\n  transition:\n    border-color  var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow    var(--gnome-duration-fast) var(--gnome-easing-default);\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.input:focus {\n  outline: none;\n}\n\n.input:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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.input:disabled {\n  cursor: not-allowed;\n  /* opacity handled by .disabled wrapper */\n}\n\n/* ─── Error state ──────────────────────────────────────────────────────────── */\n\n.errorInput {\n  border-color: var(--gnome-error-color, #e01b24);\n}\n\n.errorInput:focus-visible {\n  border-color: var(--gnome-error-color, #e01b24);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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-error-color, #e01b24);\n}\n\n/* ─── Hint / error text ────────────────────────────────────────────────────── */\n\n.hint {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\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.errorHint {\n  opacity: 1;\n  color: var(--gnome-error-color, #e01b24);\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .input {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: var(--gnome-border-subtle);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .input {\n    border-width: 2px;\n    box-shadow: none;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/TextField.cjs

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

package/dist/components/TextField.d.ts

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

package/dist/components/TextField.js

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

package/dist/components/Timeline/Timeline.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Timeline.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({items:n,orientation:r=`vertical`,variant:i=`default`,className:a,...o}){let s=r===`horizontal`,c=i!==`none`;return(0,t.jsx)(`div`,{role:`list`,className:[e.default.root,s?e.default.horizontal:e.default.vertical,a].filter(Boolean).join(` `),...o,children:n.map((r,a)=>{let o=a===0,l=a===n.length-1,u=[e.default.line,i===`dotted`?e.default.lineDotted:null].filter(Boolean).join(` `),d=(0,t.jsx)(`div`,{className:[e.default.node,r.icon?e.default.nodeWithIcon:e.default.nodeDot].filter(Boolean).join(` `),children:r.icon&&(0,t.jsx)(`span`,{className:e.default.iconWrap,"aria-hidden":`true`,children:r.icon})});return(0,t.jsxs)(`div`,{role:`listitem`,className:e.default.item,children:[(0,t.jsx)(`div`,{className:e.default.leading,children:r.leading}),s?(0,t.jsxs)(`div`,{className:e.default.nodeTrack,children:[(0,t.jsx)(`div`,{className:[e.default.line,i===`dotted`?e.default.lineDotted:null,o||!c?e.default.lineInvisible:null].filter(Boolean).join(` `),"aria-hidden":`true`}),d,(0,t.jsx)(`div`,{className:[e.default.line,i===`dotted`?e.default.lineDotted:null,l||!c?e.default.lineInvisible:null].filter(Boolean).join(` `),"aria-hidden":`true`})]}):(0,t.jsxs)(`div`,{className:e.default.nodeTrack,children:[d,!l&&c&&(0,t.jsx)(`div`,{className:u,"aria-hidden":`true`})]}),(0,t.jsx)(`div`,{className:e.default.content,children:r.content})]},a)})})}exports.Timeline=n;
+//# sourceMappingURL=Timeline.cjs.map

package/dist/components/Timeline/Timeline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Timeline.module.css\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type TimelineOrientation = \"vertical\" | \"horizontal\";\nexport type TimelineVariant = \"default\" | \"dotted\" | \"none\";\n\nexport interface TimelineItem {\n  /** Icon rendered inside the timeline node. */\n  icon?: ReactNode;\n  /**\n   * Content at the leading edge of the node.\n   * - **Vertical:** rendered to the left of the connector track.\n   * - **Horizontal:** rendered above the node.\n   *\n   * Typical use: timestamp, badge, short label.\n   */\n  leading?: ReactNode;\n  /** Main event content rendered adjacent to the node (title, description…). */\n  content: ReactNode;\n}\n\nexport interface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n  /** Ordered list of timeline events. */\n  items: TimelineItem[];\n  /**\n   * Axis direction of the connector line.\n   * - `\"vertical\"` — events stack top-to-bottom (default).\n   * - `\"horizontal\"` — events flow left-to-right (stepper / progress pattern).\n   */\n  orientation?: TimelineOrientation;\n  /**\n   * Visual style of the connector between nodes.\n   * - `\"default\"` — solid thin line.\n   * - `\"dotted\"` — dotted line; useful for future or pending events.\n   * - `\"none\"` — no connector; each node stands alone.\n   */\n  variant?: TimelineVariant;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Ordered sequence of events connected by a visual timeline.\n *\n * Supports two orientations — vertical (activity feed, history log) and\n * horizontal (stepper, progress indicator) — and three connector styles.\n *\n * ```tsx\n * <Timeline\n *   items={[\n *     {\n *       leading: <Text variant=\"caption\" color=\"dim\">10:32</Text>,\n *       icon: <Icon icon={Check} />,\n *       content: <Text variant=\"body\">Approved</Text>,\n *     },\n *   ]}\n * />\n *\n * <Timeline orientation=\"horizontal\" variant=\"dotted\" items={steps} />\n * ```\n */\nexport function Timeline({\n  items,\n  orientation = \"vertical\",\n  variant = \"default\",\n  className,\n  ...props\n}: TimelineProps) {\n  const horizontal = orientation === \"horizontal\";\n  const showLine = variant !== \"none\";\n\n  return (\n    <div\n      role=\"list\"\n      className={[\n        styles.root,\n        horizontal ? styles.horizontal : styles.vertical,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((item, i) => {\n        const isFirst = i === 0;\n        const isLast = i === items.length - 1;\n\n        const lineClass = [\n          styles.line,\n          variant === \"dotted\" ? styles.lineDotted : null,\n        ]\n          .filter(Boolean)\n          .join(\" \");\n\n        const node = (\n          <div\n            className={[\n              styles.node,\n              item.icon ? styles.nodeWithIcon : styles.nodeDot,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {item.icon && (\n              <span className={styles.iconWrap} aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n          </div>\n        );\n\n        return (\n          <div key={i} role=\"listitem\" className={styles.item}>\n            {/* ── Leading (timestamp / label) ── */}\n            {/* Always rendered — even when empty — so every item has the same\n                3 children (leading · nodeTrack · content) that map to the\n                subgrid columns (vertical) or rows (horizontal). */}\n            <div className={styles.leading}>{item.leading}</div>\n\n            {/* ── Node track ── */}\n            {horizontal ? (\n              /*\n               * Always render both half-lines so the node stays centered in\n               * the item regardless of its position. Edge lines are hidden\n               * with visibility:hidden (take space, invisible).\n               */\n              <div className={styles.nodeTrack}>\n                <div\n                  className={[\n                    styles.line,\n                    variant === \"dotted\" ? styles.lineDotted : null,\n                    (isFirst || !showLine) ? styles.lineInvisible : null,\n                  ].filter(Boolean).join(\" \")}\n                  aria-hidden=\"true\"\n                />\n                {node}\n                <div\n                  className={[\n                    styles.line,\n                    variant === \"dotted\" ? styles.lineDotted : null,\n                    (isLast || !showLine) ? styles.lineInvisible : null,\n                  ].filter(Boolean).join(\" \")}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && (\n                  <div className={lineClass} aria-hidden=\"true\" />\n                )}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"gFA+DA,SAAgB,EAAS,CACvB,QACA,cAAc,WACd,UAAU,UACV,YACA,GAAG,GACa,CAChB,IAAM,EAAa,IAAgB,aAC7B,EAAW,IAAY,OAE7B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,UAAW,CACT,EAAA,QAAO,KACP,EAAa,EAAA,QAAO,WAAa,EAAA,QAAO,SACxC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAM,IAAM,CACtB,IAAM,EAAU,IAAM,EAChB,EAAS,IAAM,EAAM,OAAS,EAE9B,EAAY,CAChB,EAAA,QAAO,KACP,IAAY,SAAW,EAAA,QAAO,WAAa,KAC5C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEN,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAK,KAAO,EAAA,QAAO,aAAe,EAAA,QAAO,QAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,UAEX,EAAK,OACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,cAAY,gBAC3C,EAAK,KACD,CAAA,CAEL,CAAA,CAGR,OACE,EAAA,EAAA,MAAC,MAAD,CAAa,KAAK,WAAW,UAAW,EAAA,QAAO,cAA/C,EAKE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAK,QAAc,CAAA,CAGnD,GAMC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,EACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAY,SAAW,EAAA,QAAO,WAAa,KAC1C,GAAW,CAAC,EAAY,EAAA,QAAO,cAAgB,KACjD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC3B,cAAY,OACZ,CAAA,CACD,GACD,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAY,SAAW,EAAA,QAAO,WAAa,KAC1C,GAAU,CAAC,EAAY,EAAA,QAAO,cAAgB,KAChD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC3B,cAAY,OACZ,CAAA,CACE,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,CACG,EACA,CAAC,GAAU,IACV,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAW,cAAY,OAAS,CAAA,CAE9C,IAIR,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAK,QAAc,CAAA,CAChD,EA5CI,EA4CJ,EAER,CACE,CAAA"}

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,71 @@
+import e from "./Timeline.module.css.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Timeline/Timeline.tsx
+function r({ items: r, orientation: i = "vertical", variant: a = "default", className: o, ...s }) {
+	let c = i === "horizontal", l = a !== "none";
+	return /* @__PURE__ */ t("div", {
+		role: "list",
+		className: [
+			e.root,
+			c ? e.horizontal : e.vertical,
+			o
+		].filter(Boolean).join(" "),
+		...s,
+		children: r.map((i, o) => {
+			let s = o === 0, u = o === r.length - 1, d = [e.line, a === "dotted" ? e.lineDotted : null].filter(Boolean).join(" "), f = /* @__PURE__ */ t("div", {
+				className: [e.node, i.icon ? e.nodeWithIcon : e.nodeDot].filter(Boolean).join(" "),
+				children: i.icon && /* @__PURE__ */ t("span", {
+					className: e.iconWrap,
+					"aria-hidden": "true",
+					children: i.icon
+				})
+			});
+			return /* @__PURE__ */ n("div", {
+				role: "listitem",
+				className: e.item,
+				children: [
+					/* @__PURE__ */ t("div", {
+						className: e.leading,
+						children: i.leading
+					}),
+					c ? /* @__PURE__ */ n("div", {
+						className: e.nodeTrack,
+						children: [
+							/* @__PURE__ */ t("div", {
+								className: [
+									e.line,
+									a === "dotted" ? e.lineDotted : null,
+									s || !l ? e.lineInvisible : null
+								].filter(Boolean).join(" "),
+								"aria-hidden": "true"
+							}),
+							f,
+							/* @__PURE__ */ t("div", {
+								className: [
+									e.line,
+									a === "dotted" ? e.lineDotted : null,
+									u || !l ? e.lineInvisible : null
+								].filter(Boolean).join(" "),
+								"aria-hidden": "true"
+							})
+						]
+					}) : /* @__PURE__ */ n("div", {
+						className: e.nodeTrack,
+						children: [f, !u && l && /* @__PURE__ */ t("div", {
+							className: d,
+							"aria-hidden": "true"
+						})]
+					}),
+					/* @__PURE__ */ t("div", {
+						className: e.content,
+						children: i.content
+					})
+				]
+			}, o);
+		})
+	});
+}
+//#endregion
+export { r as Timeline };
+
+//# sourceMappingURL=Timeline.js.map

package/dist/components/Timeline/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Timeline.module.css\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type TimelineOrientation = \"vertical\" | \"horizontal\";\nexport type TimelineVariant = \"default\" | \"dotted\" | \"none\";\n\nexport interface TimelineItem {\n  /** Icon rendered inside the timeline node. */\n  icon?: ReactNode;\n  /**\n   * Content at the leading edge of the node.\n   * - **Vertical:** rendered to the left of the connector track.\n   * - **Horizontal:** rendered above the node.\n   *\n   * Typical use: timestamp, badge, short label.\n   */\n  leading?: ReactNode;\n  /** Main event content rendered adjacent to the node (title, description…). */\n  content: ReactNode;\n}\n\nexport interface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n  /** Ordered list of timeline events. */\n  items: TimelineItem[];\n  /**\n   * Axis direction of the connector line.\n   * - `\"vertical\"` — events stack top-to-bottom (default).\n   * - `\"horizontal\"` — events flow left-to-right (stepper / progress pattern).\n   */\n  orientation?: TimelineOrientation;\n  /**\n   * Visual style of the connector between nodes.\n   * - `\"default\"` — solid thin line.\n   * - `\"dotted\"` — dotted line; useful for future or pending events.\n   * - `\"none\"` — no connector; each node stands alone.\n   */\n  variant?: TimelineVariant;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Ordered sequence of events connected by a visual timeline.\n *\n * Supports two orientations — vertical (activity feed, history log) and\n * horizontal (stepper, progress indicator) — and three connector styles.\n *\n * ```tsx\n * <Timeline\n *   items={[\n *     {\n *       leading: <Text variant=\"caption\" color=\"dim\">10:32</Text>,\n *       icon: <Icon icon={Check} />,\n *       content: <Text variant=\"body\">Approved</Text>,\n *     },\n *   ]}\n * />\n *\n * <Timeline orientation=\"horizontal\" variant=\"dotted\" items={steps} />\n * ```\n */\nexport function Timeline({\n  items,\n  orientation = \"vertical\",\n  variant = \"default\",\n  className,\n  ...props\n}: TimelineProps) {\n  const horizontal = orientation === \"horizontal\";\n  const showLine = variant !== \"none\";\n\n  return (\n    <div\n      role=\"list\"\n      className={[\n        styles.root,\n        horizontal ? styles.horizontal : styles.vertical,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((item, i) => {\n        const isFirst = i === 0;\n        const isLast = i === items.length - 1;\n\n        const lineClass = [\n          styles.line,\n          variant === \"dotted\" ? styles.lineDotted : null,\n        ]\n          .filter(Boolean)\n          .join(\" \");\n\n        const node = (\n          <div\n            className={[\n              styles.node,\n              item.icon ? styles.nodeWithIcon : styles.nodeDot,\n            ]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {item.icon && (\n              <span className={styles.iconWrap} aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n          </div>\n        );\n\n        return (\n          <div key={i} role=\"listitem\" className={styles.item}>\n            {/* ── Leading (timestamp / label) ── */}\n            {/* Always rendered — even when empty — so every item has the same\n                3 children (leading · nodeTrack · content) that map to the\n                subgrid columns (vertical) or rows (horizontal). */}\n            <div className={styles.leading}>{item.leading}</div>\n\n            {/* ── Node track ── */}\n            {horizontal ? (\n              /*\n               * Always render both half-lines so the node stays centered in\n               * the item regardless of its position. Edge lines are hidden\n               * with visibility:hidden (take space, invisible).\n               */\n              <div className={styles.nodeTrack}>\n                <div\n                  className={[\n                    styles.line,\n                    variant === \"dotted\" ? styles.lineDotted : null,\n                    (isFirst || !showLine) ? styles.lineInvisible : null,\n                  ].filter(Boolean).join(\" \")}\n                  aria-hidden=\"true\"\n                />\n                {node}\n                <div\n                  className={[\n                    styles.line,\n                    variant === \"dotted\" ? styles.lineDotted : null,\n                    (isLast || !showLine) ? styles.lineInvisible : null,\n                  ].filter(Boolean).join(\" \")}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && (\n                  <div className={lineClass} aria-hidden=\"true\" />\n                )}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AA+DA,SAAgB,EAAS,EACvB,UACA,iBAAc,YACd,aAAU,WACV,cACA,GAAG,KACa;CAChB,IAAM,IAAa,MAAgB,cAC7B,IAAW,MAAY;AAE7B,QACE,kBAAC,OAAD;EACE,MAAK;EACL,WAAW;GACT,EAAO;GACP,IAAa,EAAO,aAAa,EAAO;GACxC;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAU,MAAM,GAChB,IAAS,MAAM,EAAM,SAAS,GAE9B,IAAY,CAChB,EAAO,MACP,MAAY,WAAW,EAAO,aAAa,KAC5C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EAEN,IACJ,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,MACP,EAAK,OAAO,EAAO,eAAe,EAAO,QAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;cAEX,EAAK,QACJ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAU,eAAY;eAC3C,EAAK;KACD,CAAA;IAEL,CAAA;AAGR,UACE,kBAAC,OAAD;IAAa,MAAK;IAAW,WAAW,EAAO;cAA/C;KAKE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU,EAAK;MAAc,CAAA;KAGnD,IAMC,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB;OACE,kBAAC,OAAD;QACE,WAAW;SACT,EAAO;SACP,MAAY,WAAW,EAAO,aAAa;SAC1C,KAAW,CAAC,IAAY,EAAO,gBAAgB;SACjD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;QAC3B,eAAY;QACZ,CAAA;OACD;OACD,kBAAC,OAAD;QACE,WAAW;SACT,EAAO;SACP,MAAY,WAAW,EAAO,aAAa;SAC1C,KAAU,CAAC,IAAY,EAAO,gBAAgB;SAChD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;QAC3B,eAAY;QACZ,CAAA;OACE;UAEN,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACG,GACA,CAAC,KAAU,KACV,kBAAC,OAAD;OAAK,WAAW;OAAW,eAAY;OAAS,CAAA,CAE9C;;KAIR,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU,EAAK;MAAc,CAAA;KAChD;MA5CI,EA4CJ;IAER;EACE,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={vertical:`_vertical_12mfk_12`,item:`_item_12mfk_18`,leading:`_leading_12mfk_25`,nodeTrack:`_nodeTrack_12mfk_32`,content:`_content_12mfk_41`,horizontal:`_horizontal_12mfk_65`,node:`_node_12mfk_32`,nodeDot:`_nodeDot_12mfk_114`,nodeWithIcon:`_nodeWithIcon_12mfk_121`,iconWrap:`_iconWrap_12mfk_128`,lineInvisible:`_lineInvisible_12mfk_139`,line:`_line_12mfk_139`,lineDotted:`_lineDotted_12mfk_153`};exports.default=e;
+//# sourceMappingURL=Timeline.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.module.css.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":["/* ─── Vertical orientation ───────────────────────────────────────────────── */\n\n/*\n * Grid: 3 columns shared by every item via subgrid.\n *   col 1 (auto)  → leading: timestamps, labels — sized by widest content\n *   col 2 (24px)  → nodeTrack: node circle + connector line\n *   col 3 (1fr)   → content: event title / description\n *\n * align-self on items defaults to stretch so the nodeTrack cell grows to fill\n * the full row height; the flex line inside it then fills gap between nodes.\n */\n.vertical {\n  display: grid;\n  grid-template-columns: auto 24px 1fr;\n  column-gap: 12px;\n}\n\n.vertical .item {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n}\n\n/* Leading: timestamp / label — left-aligned column, text right-aligned */\n.vertical .leading {\n  padding-top: 4px; /* align text baseline with node center */\n  text-align: end;\n  align-self: start; /* don't stretch; only nodeTrack stretches */\n}\n\n/* Node track: node on top, connector line fills remaining height */\n.vertical .nodeTrack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* align-self defaults to stretch — fills full row height so the line\n     reaches the next item's node without a gap */\n}\n\n/* Content: fills the third column */\n.vertical .content {\n  min-width: 0;\n  padding-top: 2px;\n  align-self: start; /* don't stretch content, only nodeTrack */\n}\n\n/* Space between items — applied only to content so nodeTrack (which draws the\n   connector line) fills the padding area, keeping the line continuous. */\n.vertical .item:not(:last-child) .content {\n  padding-bottom: 20px;\n}\n\n/* ─── Horizontal orientation ──────────────────────────────────────────────── */\n\n/*\n * Grid: 3 rows shared by every item via subgrid.\n *   row 1 (auto) → leading: label / timestamp above the node\n *   row 2 (auto) → nodeTrack: the horizontal line + node\n *   row 3 (auto) → content: label / description below the node\n *\n * grid-auto-flow: column places each item into a new column automatically.\n * All items share the same row heights → leading and content stay vertically\n * aligned regardless of text length.\n */\n.horizontal {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(72px, 1fr);\n  overflow-x: auto;\n}\n\n.horizontal .item {\n  display: grid;\n  grid-row: 1 / -1; /* span all 3 rows */\n  grid-template-rows: subgrid;\n}\n\n/* Leading: label / timestamp — bottom-aligned so it sits close to the node */\n.horizontal .leading {\n  text-align: center;\n  align-self: end;\n  padding-bottom: 8px;\n}\n\n/* Node track: horizontal row — left line · node · right line */\n.horizontal .nodeTrack {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n/* Content: label / description — top-aligned below the node */\n.horizontal .content {\n  text-align: center;\n  padding: 8px 8px 0;\n  align-self: start;\n}\n\n/* ─── Node ────────────────────────────────────────────────────────────────── */\n\n.node {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  position: relative;\n  z-index: 1;\n}\n\n/* Small dot when no icon */\n.nodeDot {\n  width: 12px;\n  height: 12px;\n  background: var(--gnome-accent-bg-color, #3584e4);\n}\n\n/* Larger circle when an icon is provided */\n.nodeWithIcon {\n  width: 28px;\n  height: 28px;\n  background: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #fff);\n}\n\n.iconWrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n/* ─── Invisible line (edge positions in horizontal) ──────────────────────── */\n\n/* Takes the same space as a real line but is invisible — keeps the node\n   centered in horizontal items regardless of whether it's first or last. */\n.lineInvisible {\n  visibility: hidden;\n}\n\n/* ─── Connector line ──────────────────────────────────────────────────────── */\n\n/* Vertical line (inside .vertical .nodeTrack) */\n.vertical .line {\n  width: 2px;\n  flex: 1;\n  min-height: 16px;\n  background: var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n}\n\n.vertical .lineDotted {\n  background: none;\n  border-left: 2px dotted var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n  width: 0;\n}\n\n/* Horizontal line (inside .horizontal .nodeTrack) */\n.horizontal .line {\n  flex: 1;\n  height: 2px;\n  background: var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n}\n\n.horizontal .lineDotted {\n  background: none;\n  border-top: 2px dotted var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n  height: 0;\n  flex: 1;\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .vertical .line,\n  .horizontal .line {\n    background: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n\n  .vertical .lineDotted {\n    border-left-color: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n\n  .horizontal .lineDotted {\n    border-top-color: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,19 @@
+var e = {
+	vertical: "_vertical_12mfk_12",
+	item: "_item_12mfk_18",
+	leading: "_leading_12mfk_25",
+	nodeTrack: "_nodeTrack_12mfk_32",
+	content: "_content_12mfk_41",
+	horizontal: "_horizontal_12mfk_65",
+	node: "_node_12mfk_32",
+	nodeDot: "_nodeDot_12mfk_114",
+	nodeWithIcon: "_nodeWithIcon_12mfk_121",
+	iconWrap: "_iconWrap_12mfk_128",
+	lineInvisible: "_lineInvisible_12mfk_139",
+	line: "_line_12mfk_139",
+	lineDotted: "_lineDotted_12mfk_153"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Timeline.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.module.css.js","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":["/* ─── Vertical orientation ───────────────────────────────────────────────── */\n\n/*\n * Grid: 3 columns shared by every item via subgrid.\n *   col 1 (auto)  → leading: timestamps, labels — sized by widest content\n *   col 2 (24px)  → nodeTrack: node circle + connector line\n *   col 3 (1fr)   → content: event title / description\n *\n * align-self on items defaults to stretch so the nodeTrack cell grows to fill\n * the full row height; the flex line inside it then fills gap between nodes.\n */\n.vertical {\n  display: grid;\n  grid-template-columns: auto 24px 1fr;\n  column-gap: 12px;\n}\n\n.vertical .item {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n}\n\n/* Leading: timestamp / label — left-aligned column, text right-aligned */\n.vertical .leading {\n  padding-top: 4px; /* align text baseline with node center */\n  text-align: end;\n  align-self: start; /* don't stretch; only nodeTrack stretches */\n}\n\n/* Node track: node on top, connector line fills remaining height */\n.vertical .nodeTrack {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* align-self defaults to stretch — fills full row height so the line\n     reaches the next item's node without a gap */\n}\n\n/* Content: fills the third column */\n.vertical .content {\n  min-width: 0;\n  padding-top: 2px;\n  align-self: start; /* don't stretch content, only nodeTrack */\n}\n\n/* Space between items — applied only to content so nodeTrack (which draws the\n   connector line) fills the padding area, keeping the line continuous. */\n.vertical .item:not(:last-child) .content {\n  padding-bottom: 20px;\n}\n\n/* ─── Horizontal orientation ──────────────────────────────────────────────── */\n\n/*\n * Grid: 3 rows shared by every item via subgrid.\n *   row 1 (auto) → leading: label / timestamp above the node\n *   row 2 (auto) → nodeTrack: the horizontal line + node\n *   row 3 (auto) → content: label / description below the node\n *\n * grid-auto-flow: column places each item into a new column automatically.\n * All items share the same row heights → leading and content stay vertically\n * aligned regardless of text length.\n */\n.horizontal {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(72px, 1fr);\n  overflow-x: auto;\n}\n\n.horizontal .item {\n  display: grid;\n  grid-row: 1 / -1; /* span all 3 rows */\n  grid-template-rows: subgrid;\n}\n\n/* Leading: label / timestamp — bottom-aligned so it sits close to the node */\n.horizontal .leading {\n  text-align: center;\n  align-self: end;\n  padding-bottom: 8px;\n}\n\n/* Node track: horizontal row — left line · node · right line */\n.horizontal .nodeTrack {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n}\n\n/* Content: label / description — top-aligned below the node */\n.horizontal .content {\n  text-align: center;\n  padding: 8px 8px 0;\n  align-self: start;\n}\n\n/* ─── Node ────────────────────────────────────────────────────────────────── */\n\n.node {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: 50%;\n  position: relative;\n  z-index: 1;\n}\n\n/* Small dot when no icon */\n.nodeDot {\n  width: 12px;\n  height: 12px;\n  background: var(--gnome-accent-bg-color, #3584e4);\n}\n\n/* Larger circle when an icon is provided */\n.nodeWithIcon {\n  width: 28px;\n  height: 28px;\n  background: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #fff);\n}\n\n.iconWrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n/* ─── Invisible line (edge positions in horizontal) ──────────────────────── */\n\n/* Takes the same space as a real line but is invisible — keeps the node\n   centered in horizontal items regardless of whether it's first or last. */\n.lineInvisible {\n  visibility: hidden;\n}\n\n/* ─── Connector line ──────────────────────────────────────────────────────── */\n\n/* Vertical line (inside .vertical .nodeTrack) */\n.vertical .line {\n  width: 2px;\n  flex: 1;\n  min-height: 16px;\n  background: var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n}\n\n.vertical .lineDotted {\n  background: none;\n  border-left: 2px dotted var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n  width: 0;\n}\n\n/* Horizontal line (inside .horizontal .nodeTrack) */\n.horizontal .line {\n  flex: 1;\n  height: 2px;\n  background: var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n}\n\n.horizontal .lineDotted {\n  background: none;\n  border-top: 2px dotted var(--gnome-border-subtle, rgba(0, 0, 0, 0.15));\n  height: 0;\n  flex: 1;\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .vertical .line,\n  .horizontal .line {\n    background: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n\n  .vertical .lineDotted {\n    border-left-color: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n\n  .horizontal .lineDotted {\n    border-top-color: var(--gnome-border-subtle, rgba(255, 255, 255, 0.15));\n  }\n}\n"],"mappings":""}

package/dist/components/Timeline.cjs

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

package/dist/components/Timeline.d.ts

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

package/dist/components/Timeline.js

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

package/dist/components/Toast/Toast.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/Close.cjs`),n=require(`./Toast.module.css.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`);function a({title:a,duration:o=3e3,onDismiss:s,actionLabel:c,onAction:l,dismissible:u=!1,className:d,...f}){let p=(0,r.useRef)(null),m=(0,r.useRef)(o),h=(0,r.useRef)(0),g=()=>{p.current&&=(clearTimeout(p.current),null)},_=e=>{e<=0||!s||(g(),h.current=Date.now(),p.current=setTimeout(()=>s(),e))};(0,r.useEffect)(()=>(o>0&&(m.current=o,_(o)),g),[o]);let v=()=>{if(p.current){let e=Date.now()-h.current;m.current=Math.max(0,m.current-e),g()}},y=()=>{_(m.current)},b=()=>{g(),l?.(),s?.()};return(0,i.jsxs)(`div`,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,className:[n.default.toast,d].filter(Boolean).join(` `),onMouseEnter:v,onMouseLeave:y,onFocus:v,onBlur:y,...f,children:[(0,i.jsx)(`span`,{className:n.default.title,children:a}),(c||u)&&(0,i.jsxs)(`span`,{className:n.default.actions,children:[c&&(0,i.jsx)(`button`,{type:`button`,className:n.default.actionBtn,onClick:b,children:c}),u&&(0,i.jsx)(`button`,{type:`button`,className:n.default.dismissBtn,"aria-label":`Dismiss`,onClick:()=>{g(),s?.()},children:(0,i.jsx)(e.Icon,{icon:t.e,size:`md`,"aria-hidden":!0})})]})]})}exports.Toast=a;
+//# sourceMappingURL=Toast.cjs.map

package/dist/components/Toast/Toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Toast.module.css\";\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The notification message. Keep it short — one sentence. */\n  title: ReactNode;\n  /**\n   * Auto-dismiss timeout in milliseconds.\n   * - Set to `0` to disable auto-dismiss (user must click action or dismiss).\n   * - Defaults to `3000`.\n   */\n  duration?: number;\n  /** Called when the toast should be removed — after timeout or user action. */\n  onDismiss?: () => void;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Called when the user clicks the action button. */\n  onAction?: () => void;\n  /** Whether to show a manual dismiss (×) button. */\n  dismissible?: boolean;\n}\n\n/**\n * Non-blocking temporary notification following the Adwaita `AdwToast` pattern.\n *\n * - Auto-dismisses after `duration` ms (default 3 s). Set `duration={0}` to disable.\n * - Timer pauses while the toast is hovered or focused.\n * - Use inside `<Toaster>` for correct positioning and stacking.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Toast.html\n */\nexport function Toast({\n  title,\n  duration = 3000,\n  onDismiss,\n  actionLabel,\n  onAction,\n  dismissible = false,\n  className,\n  ...props\n}: ToastProps) {\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const remainingRef = useRef(duration);\n  const startedAtRef = useRef<number>(0);\n\n  const clearTimer = () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const startTimer = (ms: number) => {\n    if (ms <= 0 || !onDismiss) return;\n    clearTimer();\n    startedAtRef.current = Date.now();\n    timerRef.current = setTimeout(() => onDismiss(), ms);\n  };\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n    return clearTimer;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [duration]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed);\n      clearTimer();\n    }\n  };\n\n  const handleMouseLeave = () => {\n    startTimer(remainingRef.current);\n  };\n\n  const handleAction = () => {\n    clearTimer();\n    onAction?.();\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className={[styles.toast, className].filter(Boolean).join(\" \")}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleMouseEnter}\n      onBlur={handleMouseLeave}\n      {...props}\n    >\n      <span className={styles.title}>{title}</span>\n\n      {(actionLabel || dismissible) && (\n        <span className={styles.actions}>\n          {actionLabel && (\n            <button\n              type=\"button\"\n              className={styles.actionBtn}\n              onClick={handleAction}\n            >\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => { clearTimer(); onDismiss?.(); }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"4KAsCA,SAAgB,EAAM,CACpB,QACA,WAAW,IACX,YACA,cACA,WACA,cAAc,GACd,YACA,GAAG,GACU,CACb,IAAM,GAAA,EAAA,EAAA,QAAwD,KAAK,CAC7D,GAAA,EAAA,EAAA,QAAsB,EAAS,CAC/B,GAAA,EAAA,EAAA,QAA8B,EAAE,CAEhC,MAAmB,CACvB,AAEE,EAAS,WADT,aAAa,EAAS,QAAQ,CACX,OAIjB,EAAc,GAAe,CAC7B,GAAM,GAAK,CAAC,IAChB,GAAY,CACZ,EAAa,QAAU,KAAK,KAAK,CACjC,EAAS,QAAU,eAAiB,GAAW,CAAE,EAAG,IAItD,EAAA,EAAA,gBACM,EAAW,IACb,EAAa,QAAU,EACvB,EAAW,EAAS,EAEf,GAEN,CAAC,EAAS,CAAC,CAGd,IAAM,MAAyB,CAC7B,GAAI,EAAS,QAAS,CACpB,IAAM,EAAU,KAAK,KAAK,CAAG,EAAa,QAC1C,EAAa,QAAU,KAAK,IAAI,EAAG,EAAa,QAAU,EAAQ,CAClE,GAAY,GAIV,MAAyB,CAC7B,EAAW,EAAa,QAAQ,EAG5B,MAAqB,CACzB,GAAY,CACZ,KAAY,CACZ,KAAa,EAGf,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,SACL,YAAU,SACV,cAAY,OACZ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,GAAI,WATN,EAWE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,EAE3C,GAAe,KACf,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,UAClB,QAAS,WAER,EACM,CAAA,CAEV,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,aAAW,UACX,YAAe,CAAE,GAAY,CAAE,KAAa,YAE5C,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,EAAO,KAAK,KAAK,cAAA,GAAc,CAAA,CACpC,CAAA,CAEN,GAEL"}

package/dist/components/Toast/Toast.js

@@ -0,0 +1,63 @@
+import { Icon as e } from "../Icon/Icon.js";
+import { e as t } from "../../icons/dist/icons/Close.js";
+import n from "./Toast.module.css.js";
+import { useEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Toast/Toast.tsx
+function s({ title: s, duration: c = 3e3, onDismiss: l, actionLabel: u, onAction: d, dismissible: f = !1, className: p, ...m }) {
+	let h = i(null), g = i(c), _ = i(0), v = () => {
+		h.current &&= (clearTimeout(h.current), null);
+	}, y = (e) => {
+		e <= 0 || !l || (v(), _.current = Date.now(), h.current = setTimeout(() => l(), e));
+	};
+	r(() => (c > 0 && (g.current = c, y(c)), v), [c]);
+	let b = () => {
+		if (h.current) {
+			let e = Date.now() - _.current;
+			g.current = Math.max(0, g.current - e), v();
+		}
+	}, x = () => {
+		y(g.current);
+	}, S = () => {
+		v(), d?.(), l?.();
+	};
+	return /* @__PURE__ */ o("div", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className: [n.toast, p].filter(Boolean).join(" "),
+		onMouseEnter: b,
+		onMouseLeave: x,
+		onFocus: b,
+		onBlur: x,
+		...m,
+		children: [/* @__PURE__ */ a("span", {
+			className: n.title,
+			children: s
+		}), (u || f) && /* @__PURE__ */ o("span", {
+			className: n.actions,
+			children: [u && /* @__PURE__ */ a("button", {
+				type: "button",
+				className: n.actionBtn,
+				onClick: S,
+				children: u
+			}), f && /* @__PURE__ */ a("button", {
+				type: "button",
+				className: n.dismissBtn,
+				"aria-label": "Dismiss",
+				onClick: () => {
+					v(), l?.();
+				},
+				children: /* @__PURE__ */ a(e, {
+					icon: t,
+					size: "md",
+					"aria-hidden": !0
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { s as Toast };
+
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Toast.module.css\";\n\nexport interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** The notification message. Keep it short — one sentence. */\n  title: ReactNode;\n  /**\n   * Auto-dismiss timeout in milliseconds.\n   * - Set to `0` to disable auto-dismiss (user must click action or dismiss).\n   * - Defaults to `3000`.\n   */\n  duration?: number;\n  /** Called when the toast should be removed — after timeout or user action. */\n  onDismiss?: () => void;\n  /** Label for the optional action button. */\n  actionLabel?: string;\n  /** Called when the user clicks the action button. */\n  onAction?: () => void;\n  /** Whether to show a manual dismiss (×) button. */\n  dismissible?: boolean;\n}\n\n/**\n * Non-blocking temporary notification following the Adwaita `AdwToast` pattern.\n *\n * - Auto-dismisses after `duration` ms (default 3 s). Set `duration={0}` to disable.\n * - Timer pauses while the toast is hovered or focused.\n * - Use inside `<Toaster>` for correct positioning and stacking.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Toast.html\n */\nexport function Toast({\n  title,\n  duration = 3000,\n  onDismiss,\n  actionLabel,\n  onAction,\n  dismissible = false,\n  className,\n  ...props\n}: ToastProps) {\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const remainingRef = useRef(duration);\n  const startedAtRef = useRef<number>(0);\n\n  const clearTimer = () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  };\n\n  const startTimer = (ms: number) => {\n    if (ms <= 0 || !onDismiss) return;\n    clearTimer();\n    startedAtRef.current = Date.now();\n    timerRef.current = setTimeout(() => onDismiss(), ms);\n  };\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n    return clearTimer;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [duration]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n      remainingRef.current = Math.max(0, remainingRef.current - elapsed);\n      clearTimer();\n    }\n  };\n\n  const handleMouseLeave = () => {\n    startTimer(remainingRef.current);\n  };\n\n  const handleAction = () => {\n    clearTimer();\n    onAction?.();\n    onDismiss?.();\n  };\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      className={[styles.toast, className].filter(Boolean).join(\" \")}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocus={handleMouseEnter}\n      onBlur={handleMouseLeave}\n      {...props}\n    >\n      <span className={styles.title}>{title}</span>\n\n      {(actionLabel || dismissible) && (\n        <span className={styles.actions}>\n          {actionLabel && (\n            <button\n              type=\"button\"\n              className={styles.actionBtn}\n              onClick={handleAction}\n            >\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => { clearTimer(); onDismiss?.(); }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAsCA,SAAgB,EAAM,EACpB,UACA,cAAW,KACX,cACA,gBACA,aACA,iBAAc,IACd,cACA,GAAG,KACU;CACb,IAAM,IAAW,EAA6C,KAAK,EAC7D,IAAe,EAAO,EAAS,EAC/B,IAAe,EAAe,EAAE,EAEhC,UAAmB;AACvB,EAEE,EAAS,aADT,aAAa,EAAS,QAAQ,EACX;IAIjB,KAAc,MAAe;AAC7B,OAAM,KAAK,CAAC,MAChB,GAAY,EACZ,EAAa,UAAU,KAAK,KAAK,EACjC,EAAS,UAAU,iBAAiB,GAAW,EAAE,EAAG;;AAItD,UACM,IAAW,MACb,EAAa,UAAU,GACvB,EAAW,EAAS,GAEf,IAEN,CAAC,EAAS,CAAC;CAGd,IAAM,UAAyB;AAC7B,MAAI,EAAS,SAAS;GACpB,IAAM,IAAU,KAAK,KAAK,GAAG,EAAa;AAE1C,GADA,EAAa,UAAU,KAAK,IAAI,GAAG,EAAa,UAAU,EAAQ,EAClE,GAAY;;IAIV,UAAyB;AAC7B,IAAW,EAAa,QAAQ;IAG5B,UAAqB;AAGzB,EAFA,GAAY,EACZ,KAAY,EACZ,KAAa;;AAGf,QACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YATN,CAWE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;GAAa,CAAA,GAE3C,KAAe,MACf,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,SAAS;cAER;IACM,CAAA,EAEV,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,eAAe;AAAgB,KAAd,GAAY,EAAE,KAAa;;cAE5C,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;KAAK,eAAA;KAAc,CAAA;IACpC,CAAA,CAEN;KAEL"}

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

@@ -0,0 +1,2 @@
+var e=`_toaster_1tgvb_3`,t=`_toasterBottom_1tgvb_18`,n=`_toasterTop_1tgvb_22`,r=`_toast_1tgvb_3`,i=`_title_1tgvb_69`,a=`_actions_1tgvb_76`,o=`_actionBtn_1tgvb_85`,s=`_dismissBtn_1tgvb_118`,c={toaster:e,toasterBottom:t,toasterTop:n,toast:r,"toast-in":`_toast-in_1tgvb_1`,title:i,actions:a,actionBtn:o,dismissBtn:s};exports.default=c;
+//# sourceMappingURL=Toast.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.css.cjs","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/* ─── Toaster (portal container) ────────────────────────────────────────────── */\n\n.toaster {\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 9999;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  /* Don't intercept pointer events in empty space */\n  pointer-events: none;\n}\n\n.toasterBottom {\n  bottom: var(--gnome-space-4, 24px);\n}\n\n.toasterTop {\n  top: var(--gnome-space-4, 24px);\n}\n\n/* ─── Toast card ─────────────────────────────────────────────────────────────── */\n\n.toast {\n  pointer-events: auto;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n\n  padding: 10px var(--gnome-space-2, 12px) 10px var(--gnome-space-3, 16px);\n  min-height: 44px;\n  max-width: 480px;\n  min-width: 240px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 2px 8px rgba(0, 0, 0, 0.15),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n\n  /* Slide in from bottom */\n  animation: toast-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes toast-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* ─── Title ──────────────────────────────────────────────────────────────────── */\n\n.title {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─── Actions ────────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action button ──────────────────────────────────────────────────────────── */\n\n.actionBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-accent-color, #3584e4);\n  cursor: pointer;\n  padding: 4px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 6px);\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.actionBtn:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 10%, transparent);\n}\n\n.actionBtn:active {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 18%, transparent);\n}\n\n.actionBtn:focus {\n  outline: none;\n}\n\n.actionBtn:focus-visible {\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/* ─── Dismiss button ─────────────────────────────────────────────────────────── */\n\n.dismissBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--gnome-radius-sm, 6px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n\n  transition:\n    opacity          var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.dismissBtn:hover {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.dismissBtn:active {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.dismissBtn:focus {\n  outline: none;\n}\n\n.dismissBtn: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/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .toast {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow:\n      0 2px 12px rgba(0, 0, 0, 0.4),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .toast {\n    animation: none;\n  }\n\n  .actionBtn,\n  .dismissBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+//#region src/components/Toast/Toast.module.css
+var e = "_toaster_1tgvb_3", t = "_toasterBottom_1tgvb_18", n = "_toasterTop_1tgvb_22", r = "_toast_1tgvb_3", i = "_title_1tgvb_69", a = "_actions_1tgvb_76", o = "_actionBtn_1tgvb_85", s = "_dismissBtn_1tgvb_118", c = {
+	toaster: e,
+	toasterBottom: t,
+	toasterTop: n,
+	toast: r,
+	"toast-in": "_toast-in_1tgvb_1",
+	title: i,
+	actions: a,
+	actionBtn: o,
+	dismissBtn: s
+};
+//#endregion
+export { c as default };
+
+//# sourceMappingURL=Toast.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.module.css.js","names":[],"sources":["../../../src/components/Toast/Toast.module.css"],"sourcesContent":["/* ─── Toaster (portal container) ────────────────────────────────────────────── */\n\n.toaster {\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 9999;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  /* Don't intercept pointer events in empty space */\n  pointer-events: none;\n}\n\n.toasterBottom {\n  bottom: var(--gnome-space-4, 24px);\n}\n\n.toasterTop {\n  top: var(--gnome-space-4, 24px);\n}\n\n/* ─── Toast card ─────────────────────────────────────────────────────────────── */\n\n.toast {\n  pointer-events: auto;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n\n  padding: 10px var(--gnome-space-2, 12px) 10px var(--gnome-space-3, 16px);\n  min-height: 44px;\n  max-width: 480px;\n  min-width: 240px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 2px 8px rgba(0, 0, 0, 0.15),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n\n  /* Slide in from bottom */\n  animation: toast-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes toast-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* ─── Title ──────────────────────────────────────────────────────────────────── */\n\n.title {\n  flex: 1;\n  min-width: 0;\n}\n\n/* ─── Actions ────────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action button ──────────────────────────────────────────────────────────── */\n\n.actionBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-accent-color, #3584e4);\n  cursor: pointer;\n  padding: 4px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 6px);\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.actionBtn:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 10%, transparent);\n}\n\n.actionBtn:active {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 18%, transparent);\n}\n\n.actionBtn:focus {\n  outline: none;\n}\n\n.actionBtn:focus-visible {\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/* ─── Dismiss button ─────────────────────────────────────────────────────────── */\n\n.dismissBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--gnome-radius-sm, 6px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n\n  transition:\n    opacity          var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.dismissBtn:hover {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.dismissBtn:active {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.dismissBtn:focus {\n  outline: none;\n}\n\n.dismissBtn: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/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .toast {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow:\n      0 2px 12px rgba(0, 0, 0, 0.4),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .toast {\n    animation: none;\n  }\n\n  .actionBtn,\n  .dismissBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Toast/Toaster.cjs

@@ -0,0 +1,2 @@
+const e=require(`./Toast.module.css.cjs`);let t=require(`react-dom`),n=require(`react/jsx-runtime`);function r({position:r=`bottom`,children:i,container:a,className:o,...s}){let c=(0,n.jsx)(`div`,{"aria-label":`Notifications`,className:[e.default.toaster,r===`top`?e.default.toasterTop:e.default.toasterBottom,o].filter(Boolean).join(` `),...s,children:i});return typeof document>`u`?c:(0,t.createPortal)(c,a??document.body)}exports.Toaster=r;
+//# sourceMappingURL=Toaster.cjs.map

package/dist/components/Toast/Toaster.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.cjs","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Toast.module.css\";\n\nexport interface ToasterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Where to render the toast stack.\n   * - `bottom` (default) — bottom-center, following the GNOME HIG.\n   * - `top` — top-center.\n   */\n  position?: \"bottom\" | \"top\";\n  /** `<Toast>` elements to display. */\n  children?: ReactNode;\n  /**\n   * DOM node to render the portal into.\n   * Defaults to `document.body`.\n   */\n  container?: Element | DocumentFragment;\n}\n\n/**\n * Fixed-position overlay that stacks `<Toast>` notifications.\n *\n * Renders into a portal (default: `document.body`) so it sits above all\n * other content regardless of where you place it in the React tree.\n *\n * @example\n * <Toaster>\n *   {toasts.map(t => (\n *     <Toast key={t.id} title={t.message} onDismiss={() => remove(t.id)} />\n *   ))}\n * </Toaster>\n */\nexport function Toaster({\n  position = \"bottom\",\n  children,\n  container,\n  className,\n  ...props\n}: ToasterProps) {\n  const node = (\n    <div\n      aria-label=\"Notifications\"\n      className={[\n        styles.toaster,\n        position === \"top\" ? styles.toasterTop : styles.toasterBottom,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n\n  // During SSR document is not available — render inline\n  if (typeof document === \"undefined\") return node;\n\n  return createPortal(node, container ?? document.body);\n}\n"],"mappings":"oGAiCA,SAAgB,EAAQ,CACtB,WAAW,SACX,WACA,YACA,YACA,GAAG,GACY,CACf,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,aAAW,gBACX,UAAW,CACT,EAAA,QAAO,QACP,IAAa,MAAQ,EAAA,QAAO,WAAa,EAAA,QAAO,cAChD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,EAEH,WACG,CAAA,CAMR,OAFI,OAAO,SAAa,IAAoB,GAE5C,EAAA,EAAA,cAAoB,EAAM,GAAa,SAAS,KAAK"}

package/dist/components/Toast/Toaster.js

@@ -0,0 +1,21 @@
+import e from "./Toast.module.css.js";
+import { createPortal as t } from "react-dom";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Toast/Toaster.tsx
+function r({ position: r = "bottom", children: i, container: a, className: o, ...s }) {
+	let c = /* @__PURE__ */ n("div", {
+		"aria-label": "Notifications",
+		className: [
+			e.toaster,
+			r === "top" ? e.toasterTop : e.toasterBottom,
+			o
+		].filter(Boolean).join(" "),
+		...s,
+		children: i
+	});
+	return typeof document > "u" ? c : t(c, a ?? document.body);
+}
+//#endregion
+export { r as Toaster };
+
+//# sourceMappingURL=Toaster.js.map

package/dist/components/Toast/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Toast.module.css\";\n\nexport interface ToasterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Where to render the toast stack.\n   * - `bottom` (default) — bottom-center, following the GNOME HIG.\n   * - `top` — top-center.\n   */\n  position?: \"bottom\" | \"top\";\n  /** `<Toast>` elements to display. */\n  children?: ReactNode;\n  /**\n   * DOM node to render the portal into.\n   * Defaults to `document.body`.\n   */\n  container?: Element | DocumentFragment;\n}\n\n/**\n * Fixed-position overlay that stacks `<Toast>` notifications.\n *\n * Renders into a portal (default: `document.body`) so it sits above all\n * other content regardless of where you place it in the React tree.\n *\n * @example\n * <Toaster>\n *   {toasts.map(t => (\n *     <Toast key={t.id} title={t.message} onDismiss={() => remove(t.id)} />\n *   ))}\n * </Toaster>\n */\nexport function Toaster({\n  position = \"bottom\",\n  children,\n  container,\n  className,\n  ...props\n}: ToasterProps) {\n  const node = (\n    <div\n      aria-label=\"Notifications\"\n      className={[\n        styles.toaster,\n        position === \"top\" ? styles.toasterTop : styles.toasterBottom,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n\n  // During SSR document is not available — render inline\n  if (typeof document === \"undefined\") return node;\n\n  return createPortal(node, container ?? document.body);\n}\n"],"mappings":";;;;AAiCA,SAAgB,EAAQ,EACtB,cAAW,UACX,aACA,cACA,cACA,GAAG,KACY;CACf,IAAM,IACJ,kBAAC,OAAD;EACE,cAAW;EACX,WAAW;GACT,EAAO;GACP,MAAa,QAAQ,EAAO,aAAa,EAAO;GAChD;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;EAEH;EACG,CAAA;AAMR,QAFI,OAAO,WAAa,MAAoB,IAErC,EAAa,GAAM,KAAa,SAAS,KAAK"}

package/dist/components/Toast.cjs

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

package/dist/components/Toast.d.ts

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

package/dist/components/Toast.js

@@ -0,0 +1,3 @@
+import { Toast as e } from "./Toast/Toast.js";
+import { Toaster as t } from "./Toast/Toaster.js";
+export { e as Toast, t as Toaster };

package/dist/components/ToggleGroup/ToggleGroup.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ToggleGroup.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.createContext)(null);function i(){let e=(0,t.useContext)(r);if(!e)throw Error(`ToggleGroupItem must be used inside ToggleGroup`);return e}function a({value:i,onValueChange:a,"aria-label":o=`Options`,children:s,className:c,...l}){let u=(0,t.useRef)(null);function d(e){let t=Array.from(u.current?.querySelectorAll(`[role=radio]:not(:disabled)`)??[]),n=t.findIndex(e=>e===document.activeElement);if(n===-1)return;let r=n;if(e.key===`ArrowRight`||e.key===`ArrowDown`)r=(n+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)r=(n-1+t.length)%t.length;else if(e.key===`Home`)r=0;else if(e.key===`End`)r=t.length-1;else return;e.preventDefault(),t[r].focus(),t[r].click()}return(0,n.jsx)(r.Provider,{value:{value:i,onValueChange:a},children:(0,n.jsx)(`div`,{ref:u,role:`radiogroup`,"aria-label":o,onKeyDown:d,className:[e.default.group,c].filter(Boolean).join(` `),...l,children:s})})}exports.ToggleGroup=a,exports.useToggleGroup=i;
+//# sourceMappingURL=ToggleGroup.cjs.map

package/dist/components/ToggleGroup/ToggleGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./ToggleGroup.module.css\";\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n  if (!ctx) throw new Error(\"ToggleGroupItem must be used inside ToggleGroup\");\n  return ctx;\n}\n\n// ─── ToggleGroup ──────────────────────────────────────────────────────────────\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Name of the currently active toggle. */\n  value: string;\n  /** Called with the new value when a toggle is selected. */\n  onValueChange: (value: string) => void;\n  /** Accessible label for the group. */\n  \"aria-label\"?: string;\n  children?: ReactNode;\n}\n\n/**\n * Mutually-exclusive group of toggle buttons for in-place option selection.\n *\n * Mirrors `AdwToggleGroup` (libadwaita 1.7 / GNOME 48).\n *\n * Use for formatting controls, view-mode selectors, and toolbar options —\n * wherever a `ViewSwitcher` would be too heavy or is not placed in a HeaderBar.\n *\n * Compose with `ToggleGroupItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToggleGroup.html\n */\nexport function ToggleGroup({\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel = \"Options\",\n  children,\n  className,\n  ...props\n}: ToggleGroupProps) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=radio]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = items.findIndex((el) => el === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\")\n      next = (idx + 1) % items.length;\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\")\n      next = (idx - 1 + items.length) % items.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <ToggleGroupContext.Provider value={{ value, onValueChange }}>\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[styles.group, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n"],"mappings":"sGAiBA,IAAM,GAAA,EAAA,EAAA,eAAmE,KAAK,CAE9E,SAAgB,GAAiB,CAC/B,IAAM,GAAA,EAAA,EAAA,YAAiB,EAAmB,CAC1C,GAAI,CAAC,EAAK,MAAU,MAAM,kDAAkD,CAC5E,OAAO,EA2BT,SAAgB,EAAY,CAC1B,QACA,gBACA,aAAc,EAAY,UAC1B,WACA,YACA,GAAG,GACgB,CACnB,IAAM,GAAA,EAAA,EAAA,QAAkC,KAAK,CAE7C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,EAAI,EAAE,CACR,CACK,EAAM,EAAM,UAAW,GAAO,IAAO,SAAS,cAAc,CAClE,GAAI,IAAQ,GAAI,OAEhB,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,eAClB,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC1C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eACjC,EAAE,MAAQ,OAAQ,EAAO,UACzB,EAAE,MAAQ,MAAO,EAAO,EAAM,OAAS,OAC3C,OAEL,EAAE,gBAAgB,CAClB,EAAM,GAAM,OAAO,CACnB,EAAM,GAAM,OAAO,CAGrB,OACE,EAAA,EAAA,KAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,QAAO,gBAAe,WAC1D,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EAEH,WACG,CAAA,CACsB,CAAA"}

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,43 @@
+import e from "./ToggleGroup.module.css.js";
+import { createContext as t, useContext as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/ToggleGroup/ToggleGroup.tsx
+var a = t(null);
+function o() {
+	let e = n(a);
+	if (!e) throw Error("ToggleGroupItem must be used inside ToggleGroup");
+	return e;
+}
+function s({ value: t, onValueChange: n, "aria-label": o = "Options", children: s, className: c, ...l }) {
+	let u = r(null);
+	function d(e) {
+		let t = Array.from(u.current?.querySelectorAll("[role=radio]:not(:disabled)") ?? []), n = t.findIndex((e) => e === document.activeElement);
+		if (n === -1) return;
+		let r = n;
+		if (e.key === "ArrowRight" || e.key === "ArrowDown") r = (n + 1) % t.length;
+		else if (e.key === "ArrowLeft" || e.key === "ArrowUp") r = (n - 1 + t.length) % t.length;
+		else if (e.key === "Home") r = 0;
+		else if (e.key === "End") r = t.length - 1;
+		else return;
+		e.preventDefault(), t[r].focus(), t[r].click();
+	}
+	return /* @__PURE__ */ i(a.Provider, {
+		value: {
+			value: t,
+			onValueChange: n
+		},
+		children: /* @__PURE__ */ i("div", {
+			ref: u,
+			role: "radiogroup",
+			"aria-label": o,
+			onKeyDown: d,
+			className: [e.group, c].filter(Boolean).join(" "),
+			...l,
+			children: s
+		})
+	});
+}
+//#endregion
+export { s as ToggleGroup, o as useToggleGroup };
+
+//# sourceMappingURL=ToggleGroup.js.map

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport styles from \"./ToggleGroup.module.css\";\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\ninterface ToggleGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n  if (!ctx) throw new Error(\"ToggleGroupItem must be used inside ToggleGroup\");\n  return ctx;\n}\n\n// ─── ToggleGroup ──────────────────────────────────────────────────────────────\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Name of the currently active toggle. */\n  value: string;\n  /** Called with the new value when a toggle is selected. */\n  onValueChange: (value: string) => void;\n  /** Accessible label for the group. */\n  \"aria-label\"?: string;\n  children?: ReactNode;\n}\n\n/**\n * Mutually-exclusive group of toggle buttons for in-place option selection.\n *\n * Mirrors `AdwToggleGroup` (libadwaita 1.7 / GNOME 48).\n *\n * Use for formatting controls, view-mode selectors, and toolbar options —\n * wherever a `ViewSwitcher` would be too heavy or is not placed in a HeaderBar.\n *\n * Compose with `ToggleGroupItem`. Keyboard: ← / → cycle, Home / End jump.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToggleGroup.html\n */\nexport function ToggleGroup({\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel = \"Options\",\n  children,\n  className,\n  ...props\n}: ToggleGroupProps) {\n  const groupRef = useRef<HTMLDivElement>(null);\n\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const items = Array.from(\n      groupRef.current?.querySelectorAll<HTMLButtonElement>(\n        \"[role=radio]:not(:disabled)\",\n      ) ?? [],\n    );\n    const idx = items.findIndex((el) => el === document.activeElement);\n    if (idx === -1) return;\n\n    let next = idx;\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\")\n      next = (idx + 1) % items.length;\n    else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\")\n      next = (idx - 1 + items.length) % items.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = items.length - 1;\n    else return;\n\n    e.preventDefault();\n    items[next].focus();\n    items[next].click();\n  }\n\n  return (\n    <ToggleGroupContext.Provider value={{ value, onValueChange }}>\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        onKeyDown={handleKeyDown}\n        className={[styles.group, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </ToggleGroupContext.Provider>\n  );\n}\n"],"mappings":";;;;AAiBA,IAAM,IAAqB,EAA8C,KAAK;AAE9E,SAAgB,IAAiB;CAC/B,IAAM,IAAM,EAAW,EAAmB;AAC1C,KAAI,CAAC,EAAK,OAAU,MAAM,kDAAkD;AAC5E,QAAO;;AA2BT,SAAgB,EAAY,EAC1B,UACA,kBACA,cAAc,IAAY,WAC1B,aACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAW,EAAuB,KAAK;CAE7C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAChB,8BACD,IAAI,EAAE,CACR,EACK,IAAM,EAAM,WAAW,MAAO,MAAO,SAAS,cAAc;AAClE,MAAI,MAAQ,GAAI;EAEhB,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YACtC,MAAQ,IAAM,KAAK,EAAM;WAClB,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAC1C,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WACjC,EAAE,QAAQ,OAAQ,KAAO;WACzB,EAAE,QAAQ,MAAO,KAAO,EAAM,SAAS;MAC3C;AAIL,EAFA,EAAE,gBAAgB,EAClB,EAAM,GAAM,OAAO,EACnB,EAAM,GAAM,OAAO;;AAGrB,QACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;GAAE;GAAO;GAAe;YAC1D,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW;GACX,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC9D,GAAI;GAEH;GACG,CAAA;EACsB,CAAA"}

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

@@ -0,0 +1,2 @@
+var e={group:`_group_1fa3l_3`,item:`_item_1fa3l_18`,iconOnly:`_iconOnly_1fa3l_48`,active:`_active_1fa3l_53`,itemIcon:`_itemIcon_1fa3l_86`,itemLabel:`_itemLabel_1fa3l_92`};exports.default=e;
+//# sourceMappingURL=ToggleGroup.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.module.css.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n/* ─── Item ──────────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow       var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* Icon-only: square aspect ratio */\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Focus ─────────────────────────────────────────────────────────────────── */\n\n.item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Active ────────────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n/* ─── Icon ──────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .group {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+var e = {
+	group: "_group_1fa3l_3",
+	item: "_item_1fa3l_18",
+	iconOnly: "_iconOnly_1fa3l_48",
+	active: "_active_1fa3l_53",
+	itemIcon: "_itemIcon_1fa3l_86",
+	itemLabel: "_itemLabel_1fa3l_92"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ToggleGroup.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.module.css.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n/* ─── Item ──────────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow       var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* Icon-only: square aspect ratio */\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Focus ─────────────────────────────────────────────────────────────────── */\n\n.item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Active ────────────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n/* ─── Icon ──────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .group {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n        var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ToggleGroup/ToggleGroupItem.cjs

@@ -0,0 +1,2 @@
+const e=require(`../Icon/Icon.cjs`),t=require(`./ToggleGroup.module.css.cjs`),n=require(`./ToggleGroup.cjs`);let r=require(`react/jsx-runtime`);function i({name:i,label:a,icon:o,disabled:s,className:c,...l}){let{value:u,onValueChange:d}=n.useToggleGroup(),f=u===i,p=o&&!a;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":f,tabIndex:f?0:-1,disabled:s,onClick:()=>d(i),className:[t.default.item,f?t.default.active:null,p?t.default.iconOnly:null,c].filter(Boolean).join(` `),...l,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),a&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a})]})}exports.ToggleGroupItem=i;
+//# sourceMappingURL=ToggleGroupItem.cjs.map

package/dist/components/ToggleGroup/ToggleGroupItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useToggleGroup } from \"./ToggleGroup\";\nimport styles from \"./ToggleGroup.module.css\";\n\nexport interface ToggleGroupItemProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the group's `value` when this item is selected. */\n  name: string;\n  /** Visible label. Omit for icon-only items (provide `aria-label` instead). */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual toggle inside a `ToggleGroup`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the option.\n */\nexport function ToggleGroupItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: ToggleGroupItemProps) {\n  const { value, onValueChange } = useToggleGroup();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n}\n"],"mappings":"gJAsBA,SAAgB,EAAgB,CAC9B,OACA,QACA,OACA,WACA,YACA,GAAG,GACoB,CACvB,GAAM,CAAE,QAAO,iBAAkB,EAAA,gBAAgB,CAC3C,EAAS,IAAU,EACnB,EAAW,GAAQ,CAAC,EAE1B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,EAAK,CAClC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CACpD"}