@gnome-ui/react 1.45.1 → 1.46.0

package/dist/components/Text.cjs

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

package/dist/components/TextField/TextField.cjs

@@ -1,2 +1,2 @@
-const e=require(`./TextField.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({label:r,helperText:i,error:a,id:o,className:s,disabled:c,...l}){let u=(0,t.useId)(),d=o??u,f=`${d}-help`;return(0,n.jsxs)(`div`,{className:[e.default.wrapper,c?e.default.disabled:null].filter(Boolean).join(` `),children:[r&&(0,n.jsx)(`label`,{htmlFor:d,className:e.default.label,children:r}),(0,n.jsx)(`input`,{id:d,disabled:c,"aria-describedby":a||i?f:void 0,"aria-invalid":a?!0:void 0,className:[e.default.input,a?e.default.errorInput:null,s].filter(Boolean).join(` `),...l}),(a||i)&&(0,n.jsx)(`span`,{id:f,className:[e.default.hint,a?e.default.errorHint:null].filter(Boolean).join(` `),children:a??i})]})}exports.TextField=r;
+const e=require("./TextField.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({label:r,helperText:i,error:a,id:o,className:s,disabled:c,...l})=>{let u=(0,t.useId)(),d=o??u,f=`${d}-help`;return(0,n.jsxs)(`div`,{className:[e.default.wrapper,c?e.default.disabled:null].filter(Boolean).join(` `),children:[r&&(0,n.jsx)(`label`,{htmlFor:d,className:e.default.label,children:r}),(0,n.jsx)(`input`,{id:d,disabled:c,"aria-describedby":a||i?f:void 0,"aria-invalid":a?!0:void 0,className:[e.default.input,a?e.default.errorInput:null,s].filter(Boolean).join(` `),...l}),(a||i)&&(0,n.jsx)(`span`,{id:f,className:[e.default.hint,a?e.default.errorHint:null].filter(Boolean).join(` `),children:a??i})]})};exports.TextField=r;
 //# sourceMappingURL=TextField.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"oGAyBA,SAAgB,EAAU,CACxB,QACA,aACA,QACA,GAAI,EACJ,YACA,WACA,GAAG,GACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAgB,CAChB,EAAK,GAAU,EACf,EAAS,GAAG,EAAG,OAErB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,QAAS,EAAW,EAAA,QAAO,SAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAA7F,CACG,IACC,EAAA,EAAA,KAAC,QAAD,CAAO,QAAS,EAAI,UAAW,EAAA,QAAO,eACnC,EACK,CAAA,EAGV,EAAA,EAAA,KAAC,QAAD,CACM,KACM,WACV,mBAAkB,GAAS,EAAa,EAAS,IAAA,GACjD,eAAc,EAAQ,GAAO,IAAA,GAC7B,UAAW,CAAC,EAAA,QAAO,MAAO,EAAQ,EAAA,QAAO,WAAa,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,EACJ,CAAA,EAEA,GAAS,KACT,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,KAAM,EAAQ,EAAA,QAAO,UAAY,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAElF,GAAS,EACL,CAAA,CAEL"}
+{"version":3,"file":"TextField.cjs","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport const TextField = ({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) => {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"oGAyBA,IAAa,GAAa,CACxB,QACA,aACA,QACA,GAAI,EACJ,YACA,WACA,GAAG,KACiB,CACpB,IAAM,GAAA,EAAA,EAAA,OAAe,EACf,EAAK,GAAU,EACf,EAAS,GAAG,EAAG,OAErB,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,QAAS,EAAW,EAAA,QAAO,SAAW,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,WAA5F,CACG,IACC,EAAA,EAAA,KAAC,QAAD,CAAO,QAAS,EAAI,UAAW,EAAA,QAAO,eACnC,CACI,CAAA,GAGT,EAAA,EAAA,KAAC,QAAD,CACM,KACM,WACV,mBAAkB,GAAS,EAAa,EAAS,IAAA,GACjD,eAAc,EAAQ,GAAO,IAAA,GAC7B,UAAW,CAAC,EAAA,QAAO,MAAO,EAAQ,EAAA,QAAO,WAAa,KAAM,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,CACL,CAAA,GAEC,GAAS,KACT,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,KAAM,EAAQ,EAAA,QAAO,UAAY,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,WAEjF,GAAS,CACN,CAAA,CAEL,GAET"}

package/dist/components/TextField/TextField.d.ts

@@ -19,4 +19,4 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
  *
  * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html
  */
-export declare function TextField({ label, helperText, error, id: idProp, className, disabled, ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ label, helperText, error, id: idProp, className, disabled, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextField/TextField.js

@@ -2,7 +2,7 @@ import e from "./TextField.module.css.js";
 import { useId as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/TextField/TextField.tsx
-function i({ label: i, helperText: a, error: o, id: s, className: c, disabled: l, ...u }) {
+var i = ({ label: i, helperText: a, error: o, id: s, className: c, disabled: l, ...u }) => {
 	let d = t(), f = s ?? d, p = `${f}-help`;
 	return /* @__PURE__ */ r("div", {
 		className: [e.wrapper, l ? e.disabled : null].filter(Boolean).join(" "),
@@ -31,7 +31,7 @@ function i({ label: i, helperText: a, error: o, id: s, className: c, disabled: l
 			})
 		]
 	});
-}
+};
 //#endregion
 export { i as TextField };
 

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport function TextField({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAgB,EAAU,EACxB,UACA,eACA,UACA,IAAI,GACJ,cACA,aACA,GAAG,KACc;CACjB,IAAM,IAAS,GAAO,EAChB,IAAK,KAAU,GACf,IAAS,GAAG,EAAG;AAErB,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,IAAW,EAAO,WAAW,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7F;GACG,KACC,kBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,EAAO;cACnC;IACK,CAAA;GAGV,kBAAC,SAAD;IACM;IACM;IACV,oBAAkB,KAAS,IAAa,IAAS,KAAA;IACjD,gBAAc,IAAQ,KAAO,KAAA;IAC7B,WAAW;KAAC,EAAO;KAAO,IAAQ,EAAO,aAAa;KAAM;KAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;IACJ,CAAA;IAEA,KAAS,MACT,kBAAC,QAAD;IACE,IAAI;IACJ,WAAW,CAAC,EAAO,MAAM,IAAQ,EAAO,YAAY,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cAElF,KAAS;IACL,CAAA;GAEL"}
+{"version":3,"file":"TextField.js","names":[],"sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import { type InputHTMLAttributes, useId } from 'react';\n\nimport styles from './TextField.module.css';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id'> {\n  /** Visible label rendered above the input. */\n  label?: string;\n  /** Helper text rendered below the input. Hidden when `error` is set. */\n  helperText?: string;\n  /**\n   * Error message rendered below the input in place of `helperText`.\n   * Also applies the error visual state to the input border.\n   */\n  error?: string;\n  /** Explicit id. Auto-generated when omitted. */\n  id?: string;\n}\n\n/**\n * Single-line text input with label, helper text, and error state.\n *\n * Follows the Adwaita `GtkEntry` / `.entry` style class.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/text-fields.html\n */\nexport const TextField = ({\n  label,\n  helperText,\n  error,\n  id: idProp,\n  className,\n  disabled,\n  ...props\n}: TextFieldProps) => {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const helpId = `${id}-help`;\n\n  return (\n    <div className={[styles.wrapper, disabled ? styles.disabled : null].filter(Boolean).join(' ')}>\n      {label && (\n        <label htmlFor={id} className={styles.label}>\n          {label}\n        </label>\n      )}\n\n      <input\n        id={id}\n        disabled={disabled}\n        aria-describedby={error || helperText ? helpId : undefined}\n        aria-invalid={error ? true : undefined}\n        className={[styles.input, error ? styles.errorInput : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        {...props}\n      />\n\n      {(error || helperText) && (\n        <span\n          id={helpId}\n          className={[styles.hint, error ? styles.errorHint : null].filter(Boolean).join(' ')}\n        >\n          {error ?? helperText}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAyBA,IAAa,KAAa,EACxB,UACA,eACA,UACA,IAAI,GACJ,cACA,aACA,GAAG,QACiB;CACpB,IAAM,IAAS,EAAM,GACf,IAAK,KAAU,GACf,IAAS,GAAG,EAAG;CAErB,OACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,IAAW,EAAO,WAAW,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;YAA5F;GACG,KACC,kBAAC,SAAD;IAAO,SAAS;IAAI,WAAW,EAAO;cACnC;GACI,CAAA;GAGT,kBAAC,SAAD;IACM;IACM;IACV,oBAAkB,KAAS,IAAa,IAAS,KAAA;IACjD,gBAAc,IAAQ,KAAO,KAAA;IAC7B,WAAW;KAAC,EAAO;KAAO,IAAQ,EAAO,aAAa;KAAM;IAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;IACX,GAAI;GACL,CAAA;IAEC,KAAS,MACT,kBAAC,QAAD;IACE,IAAI;IACJ,WAAW,CAAC,EAAO,MAAM,IAAQ,EAAO,YAAY,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;cAEjF,KAAS;GACN,CAAA;EAEL;;AAET"}

package/dist/components/TextField.cjs

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

package/dist/components/Timeline/Timeline.cjs

@@ -1,2 +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;
+const e=require("./Timeline.module.css.cjs");let t=require("react/jsx-runtime");var 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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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={[styles.root, horizontal ? styles.horizontal : styles.vertical, className]\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 = [styles.line, variant === 'dotted' ? styles.lineDotted : null]\n          .filter(Boolean)\n          .join(' ');\n\n        const node = (\n          <div\n            className={[styles.node, item.icon ? styles.nodeWithIcon : styles.nodeDot]\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                  ]\n                    .filter(Boolean)\n                    .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                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && <div className={lineClass} aria-hidden=\"true\" />}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"gFAgEA,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,CAAC,EAAA,QAAO,KAAM,EAAa,EAAA,QAAO,WAAa,EAAA,QAAO,SAAU,EAAU,CAClF,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAM,IAAM,CACtB,IAAM,EAAU,IAAM,EAChB,EAAS,IAAM,EAAM,OAAS,EAE9B,EAAY,CAAC,EAAA,QAAO,KAAM,IAAY,SAAW,EAAA,QAAO,WAAa,KAAK,CAC7E,OAAO,QAAQ,CACf,KAAK,IAAI,CAEN,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAK,KAAO,EAAA,QAAO,aAAe,EAAA,QAAO,QAAQ,CACvE,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,KAC3C,GAAW,CAAC,EAAW,EAAA,QAAO,cAAgB,KAC/C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,OACZ,CAAA,CACD,GACD,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAY,SAAW,EAAA,QAAO,WAAa,KAC3C,GAAU,CAAC,EAAW,EAAA,QAAO,cAAgB,KAC9C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,OACZ,CAAA,CACE,IAEN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,CACG,EACA,CAAC,GAAU,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAW,cAAY,OAAS,CAAA,CACpE,IAIR,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAK,QAAc,CAAA,CAChD,EA9CI,EA8CJ,EAER,CACE,CAAA"}
+{"version":3,"file":"Timeline.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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 const 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={[styles.root, horizontal ? styles.horizontal : styles.vertical, className]\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 = [styles.line, variant === 'dotted' ? styles.lineDotted : null]\n          .filter(Boolean)\n          .join(' ');\n\n        const node = (\n          <div\n            className={[styles.node, item.icon ? styles.nodeWithIcon : styles.nodeDot]\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                  ]\n                    .filter(Boolean)\n                    .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                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && <div className={lineClass} aria-hidden=\"true\" />}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"gFAgEA,IAAa,GAAY,CACvB,QACA,cAAc,WACd,UAAU,UACV,YACA,GAAG,KACgB,CACnB,IAAM,EAAa,IAAgB,aAC7B,EAAW,IAAY,OAE7B,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,OACL,UAAW,CAAC,EAAA,QAAO,KAAM,EAAa,EAAA,QAAO,WAAa,EAAA,QAAO,SAAU,CAAS,EACjF,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAEH,EAAM,KAAK,EAAM,IAAM,CACtB,IAAM,EAAU,IAAM,EAChB,EAAS,IAAM,EAAM,OAAS,EAE9B,EAAY,CAAC,EAAA,QAAO,KAAM,IAAY,SAAW,EAAA,QAAO,WAAa,IAAI,EAC5E,OAAO,OAAO,EACd,KAAK,GAAG,EAEL,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAK,KAAO,EAAA,QAAO,aAAe,EAAA,QAAO,OAAO,EACtE,OAAO,OAAO,EACd,KAAK,GAAG,WAEV,EAAK,OACJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAU,cAAY,gBAC3C,EAAK,IACF,CAAA,CAEL,CAAA,EAGP,OACE,EAAA,EAAA,MAAC,MAAD,CAAa,KAAK,WAAW,UAAW,EAAA,QAAO,cAA/C,EAKE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAK,OAAa,CAAA,EAGlD,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,KAC3C,GAAW,CAAC,EAAW,EAAA,QAAO,cAAgB,IAChD,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAY,MACb,CAAA,EACA,GACD,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAY,SAAW,EAAA,QAAO,WAAa,KAC3C,GAAU,CAAC,EAAW,EAAA,QAAO,cAAgB,IAC/C,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAY,MACb,CAAA,CACE,KAEL,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,CACG,EACA,CAAC,GAAU,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAW,cAAY,MAAQ,CAAA,CACpE,KAIP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAK,OAAa,CAAA,CAChD,GA9CK,CA8CL,CAET,CAAC,CACE,CAAA,CAET"}

package/dist/components/Timeline/Timeline.d.ts

@@ -52,4 +52,4 @@ export interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
  * <Timeline orientation="horizontal" variant="dotted" items={steps} />
  * ```
  */
-export declare function Timeline({ items, orientation, variant, className, ...props }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: ({ items, orientation, variant, className, ...props }: TimelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Timeline/Timeline.js

@@ -1,7 +1,7 @@
 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 }) {
+var 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",
@@ -64,7 +64,7 @@ function r({ items: r, orientation: i = "vertical", variant: a = "default", clas
 			}, o);
 		})
 	});
-}
+};
 //#endregion
 export { r as Timeline };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Timeline.js","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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={[styles.root, horizontal ? styles.horizontal : styles.vertical, className]\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 = [styles.line, variant === 'dotted' ? styles.lineDotted : null]\n          .filter(Boolean)\n          .join(' ');\n\n        const node = (\n          <div\n            className={[styles.node, item.icon ? styles.nodeWithIcon : styles.nodeDot]\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                  ]\n                    .filter(Boolean)\n                    .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                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && <div className={lineClass} aria-hidden=\"true\" />}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;AAgEA,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;GAAC,EAAO;GAAM,IAAa,EAAO,aAAa,EAAO;GAAU;GAAU,CAClF,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAU,MAAM,GAChB,IAAS,MAAM,EAAM,SAAS,GAE9B,IAAY,CAAC,EAAO,MAAM,MAAY,WAAW,EAAO,aAAa,KAAK,CAC7E,OAAO,QAAQ,CACf,KAAK,IAAI,EAEN,IACJ,kBAAC,OAAD;IACE,WAAW,CAAC,EAAO,MAAM,EAAK,OAAO,EAAO,eAAe,EAAO,QAAQ,CACvE,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;SAC3C,KAAW,CAAC,IAAW,EAAO,gBAAgB;SAC/C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;QACZ,eAAY;QACZ,CAAA;OACD;OACD,kBAAC,OAAD;QACE,WAAW;SACT,EAAO;SACP,MAAY,WAAW,EAAO,aAAa;SAC3C,KAAU,CAAC,IAAW,EAAO,gBAAgB;SAC9C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;QACZ,eAAY;QACZ,CAAA;OACE;UAEN,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACG,GACA,CAAC,KAAU,KAAY,kBAAC,OAAD;OAAK,WAAW;OAAW,eAAY;OAAS,CAAA,CACpE;;KAIR,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU,EAAK;MAAc,CAAA;KAChD;MA9CI,EA8CJ;IAER;EACE,CAAA"}
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\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 const 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={[styles.root, horizontal ? styles.horizontal : styles.vertical, className]\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 = [styles.line, variant === 'dotted' ? styles.lineDotted : null]\n          .filter(Boolean)\n          .join(' ');\n\n        const node = (\n          <div\n            className={[styles.node, item.icon ? styles.nodeWithIcon : styles.nodeDot]\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                  ]\n                    .filter(Boolean)\n                    .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                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  aria-hidden=\"true\"\n                />\n              </div>\n            ) : (\n              <div className={styles.nodeTrack}>\n                {node}\n                {!isLast && showLine && <div className={lineClass} aria-hidden=\"true\" />}\n              </div>\n            )}\n\n            {/* ── Content ── */}\n            <div className={styles.content}>{item.content}</div>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;AAgEA,IAAa,KAAY,EACvB,UACA,iBAAc,YACd,aAAU,WACV,cACA,GAAG,QACgB;CACnB,IAAM,IAAa,MAAgB,cAC7B,IAAW,MAAY;CAE7B,OACE,kBAAC,OAAD;EACE,MAAK;EACL,WAAW;GAAC,EAAO;GAAM,IAAa,EAAO,aAAa,EAAO;GAAU;EAAS,EACjF,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAEH,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAU,MAAM,GAChB,IAAS,MAAM,EAAM,SAAS,GAE9B,IAAY,CAAC,EAAO,MAAM,MAAY,WAAW,EAAO,aAAa,IAAI,EAC5E,OAAO,OAAO,EACd,KAAK,GAAG,GAEL,IACJ,kBAAC,OAAD;IACE,WAAW,CAAC,EAAO,MAAM,EAAK,OAAO,EAAO,eAAe,EAAO,OAAO,EACtE,OAAO,OAAO,EACd,KAAK,GAAG;cAEV,EAAK,QACJ,kBAAC,QAAD;KAAM,WAAW,EAAO;KAAU,eAAY;eAC3C,EAAK;IACF,CAAA;GAEL,CAAA;GAGP,OACE,kBAAC,OAAD;IAAa,MAAK;IAAW,WAAW,EAAO;cAA/C;KAKE,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU,EAAK;KAAa,CAAA;KAGlD,IAMC,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB;OACE,kBAAC,OAAD;QACE,WAAW;SACT,EAAO;SACP,MAAY,WAAW,EAAO,aAAa;SAC3C,KAAW,CAAC,IAAW,EAAO,gBAAgB;QAChD,EACG,OAAO,OAAO,EACd,KAAK,GAAG;QACX,eAAY;OACb,CAAA;OACA;OACD,kBAAC,OAAD;QACE,WAAW;SACT,EAAO;SACP,MAAY,WAAW,EAAO,aAAa;SAC3C,KAAU,CAAC,IAAW,EAAO,gBAAgB;QAC/C,EACG,OAAO,OAAO,EACd,KAAK,GAAG;QACX,eAAY;OACb,CAAA;MACE;UAEL,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACG,GACA,CAAC,KAAU,KAAY,kBAAC,OAAD;OAAK,WAAW;OAAW,eAAY;MAAQ,CAAA,CACpE;;KAIP,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAU,EAAK;KAAa,CAAA;IAChD;MA9CK,CA8CL;EAET,CAAC;CACE,CAAA;AAET"}

package/dist/components/Timeline.cjs

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

package/dist/components/Toast/Toast.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { Close } from '@gnome-ui/icons';\nimport { type HTMLAttributes, type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport { Icon } from '../Icon';\n\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 = useCallback(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const startTimer = useCallback(\n    (ms: number) => {\n      if (ms <= 0 || !onDismiss) {\n        return;\n      }\n\n      clearTimer();\n      startedAtRef.current = Date.now();\n      timerRef.current = setTimeout(() => onDismiss(), ms);\n    },\n    [onDismiss, clearTimer],\n  );\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n\n    return clearTimer;\n  }, [duration, startTimer, clearTimer]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n\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 type=\"button\" className={styles.actionBtn} onClick={handleAction}>\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => {\n                clearTimer();\n                onDismiss?.();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"2JAmCA,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,GAAA,EAAA,EAAA,iBAA+B,CACnC,AAEE,EAAS,WADT,aAAa,EAAS,QAAQ,CACX,OAEpB,EAAE,CAAC,CAEA,GAAA,EAAA,EAAA,aACH,GAAe,CACV,GAAM,GAAK,CAAC,IAIhB,GAAY,CACZ,EAAa,QAAU,KAAK,KAAK,CACjC,EAAS,QAAU,eAAiB,GAAW,CAAE,EAAG,GAEtD,CAAC,EAAW,EAAW,CACxB,EAGD,EAAA,EAAA,gBACM,EAAW,IACb,EAAa,QAAU,EACvB,EAAW,EAAS,EAGf,GACN,CAAC,EAAU,EAAY,EAAW,CAAC,CAGtC,IAAM,MAAyB,CAC7B,GAAI,EAAS,QAAS,CACpB,IAAM,EAAU,KAAK,KAAK,CAAG,EAAa,QAE1C,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,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,UAAW,QAAS,WACzD,EACM,CAAA,CAEV,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,aAAW,UACX,YAAe,CACb,GAAY,CACZ,KAAa,YAGf,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,GAAc,CAAA,CACpC,CAAA,CAEN,GAEL"}
+{"version":3,"file":"Toast.cjs","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { Close } from '@gnome-ui/icons';\nimport { type HTMLAttributes, type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport { Icon } from '../Icon';\n\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 const 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 = useCallback(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const startTimer = useCallback(\n    (ms: number) => {\n      if (ms <= 0 || !onDismiss) {\n        return;\n      }\n\n      clearTimer();\n      startedAtRef.current = Date.now();\n      timerRef.current = setTimeout(() => onDismiss(), ms);\n    },\n    [onDismiss, clearTimer],\n  );\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n\n    return clearTimer;\n  }, [duration, startTimer, clearTimer]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n\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 type=\"button\" className={styles.actionBtn} onClick={handleAction}>\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => {\n                clearTimer();\n                onDismiss?.();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":"2JAmCA,IAAa,GAAS,CACpB,QACA,WAAW,IACX,YACA,cACA,WACA,cAAc,GACd,YACA,GAAG,KACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAwD,IAAI,EAC5D,GAAA,EAAA,EAAA,QAAsB,CAAQ,EAC9B,GAAA,EAAA,EAAA,QAA8B,CAAC,EAE/B,GAAA,EAAA,EAAA,iBAA+B,CACnC,AAEE,EAAS,WADT,aAAa,EAAS,OAAO,EACV,KAEvB,EAAG,CAAC,CAAC,EAEC,GAAA,EAAA,EAAA,aACH,GAAe,CACV,GAAM,GAAK,CAAC,IAIhB,EAAW,EACX,EAAa,QAAU,KAAK,IAAI,EAChC,EAAS,QAAU,eAAiB,EAAU,EAAG,CAAE,EACrD,EACA,CAAC,EAAW,CAAU,CACxB,GAGA,EAAA,EAAA,gBACM,EAAW,IACb,EAAa,QAAU,EACvB,EAAW,CAAQ,GAGd,GACN,CAAC,EAAU,EAAY,CAAU,CAAC,EAGrC,IAAM,MAAyB,CAC7B,GAAI,EAAS,QAAS,CACpB,IAAM,EAAU,KAAK,IAAI,EAAI,EAAa,QAE1C,EAAa,QAAU,KAAK,IAAI,EAAG,EAAa,QAAU,CAAO,EACjE,EAAW,CACb,CACF,EAEM,MAAyB,CAC7B,EAAW,EAAa,OAAO,CACjC,EAEM,MAAqB,CACzB,EAAW,EACX,IAAW,EACX,IAAY,CACd,EAEA,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,SACL,YAAU,SACV,cAAY,OACZ,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,GAAI,WATN,EAWE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,GAE1C,GAAe,KACf,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,CACG,IACC,EAAA,EAAA,KAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,UAAW,QAAS,WACzD,CACK,CAAA,EAET,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,aAAW,UACX,YAAe,CACb,EAAW,EACX,IAAY,CACd,YAEA,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,EAAa,CAAA,CACpC,CAAA,CAEN,GAEL,GAET"}

package/dist/components/Toast/Toast.d.ts

@@ -26,4 +26,4 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Toast.html
  */
-export declare function Toast({ title, duration, onDismiss, actionLabel, onAction, dismissible, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, duration, onDismiss, actionLabel, onAction, dismissible, className, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/Toast.js

@@ -4,7 +4,7 @@ import { useCallback as n, useEffect as r, useRef as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { Close as s } from "@gnome-ui/icons";
 //#region src/components/Toast/Toast.tsx
-function c({ title: c, duration: l = 3e3, onDismiss: u, actionLabel: d, onAction: f, dismissible: p = !1, className: m, ...h }) {
+var c = ({ title: c, duration: l = 3e3, onDismiss: u, actionLabel: d, onAction: f, dismissible: p = !1, className: m, ...h }) => {
 	let g = i(null), _ = i(l), v = i(0), y = n(() => {
 		g.current &&= (clearTimeout(g.current), null);
 	}, []), b = n((e) => {
@@ -60,7 +60,7 @@ function c({ title: c, duration: l = 3e3, onDismiss: u, actionLabel: d, onAction
 			})]
 		})]
 	});
-}
+};
 //#endregion
 export { c as Toast };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { Close } from '@gnome-ui/icons';\nimport { type HTMLAttributes, type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport { Icon } from '../Icon';\n\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 = useCallback(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const startTimer = useCallback(\n    (ms: number) => {\n      if (ms <= 0 || !onDismiss) {\n        return;\n      }\n\n      clearTimer();\n      startedAtRef.current = Date.now();\n      timerRef.current = setTimeout(() => onDismiss(), ms);\n    },\n    [onDismiss, clearTimer],\n  );\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n\n    return clearTimer;\n  }, [duration, startTimer, clearTimer]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n\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 type=\"button\" className={styles.actionBtn} onClick={handleAction}>\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => {\n                clearTimer();\n                onDismiss?.();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmCA,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,IAAa,QAAkB;AACnC,EAEE,EAAS,aADT,aAAa,EAAS,QAAQ,EACX;IAEpB,EAAE,CAAC,EAEA,IAAa,GAChB,MAAe;AACV,OAAM,KAAK,CAAC,MAIhB,GAAY,EACZ,EAAa,UAAU,KAAK,KAAK,EACjC,EAAS,UAAU,iBAAiB,GAAW,EAAE,EAAG;IAEtD,CAAC,GAAW,EAAW,CACxB;AAGD,UACM,IAAW,MACb,EAAa,UAAU,GACvB,EAAW,EAAS,GAGf,IACN;EAAC;EAAU;EAAY;EAAW,CAAC;CAGtC,IAAM,UAAyB;AAC7B,MAAI,EAAS,SAAS;GACpB,IAAM,IAAU,KAAK,KAAK,GAAG,EAAa;AAG1C,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;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAW,SAAS;cACzD;IACM,CAAA,EAEV,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,eAAe;AAEb,KADA,GAAY,EACZ,KAAa;;cAGf,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;KAAK,eAAA;KAAc,CAAA;IACpC,CAAA,CAEN;KAEL"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { Close } from '@gnome-ui/icons';\nimport { type HTMLAttributes, type ReactNode, useCallback, useEffect, useRef } from 'react';\n\nimport { Icon } from '../Icon';\n\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 const 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 = useCallback(() => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n  }, []);\n\n  const startTimer = useCallback(\n    (ms: number) => {\n      if (ms <= 0 || !onDismiss) {\n        return;\n      }\n\n      clearTimer();\n      startedAtRef.current = Date.now();\n      timerRef.current = setTimeout(() => onDismiss(), ms);\n    },\n    [onDismiss, clearTimer],\n  );\n\n  // Start auto-dismiss on mount\n  useEffect(() => {\n    if (duration > 0) {\n      remainingRef.current = duration;\n      startTimer(duration);\n    }\n\n    return clearTimer;\n  }, [duration, startTimer, clearTimer]);\n\n  // Pause timer on hover/focus\n  const handleMouseEnter = () => {\n    if (timerRef.current) {\n      const elapsed = Date.now() - startedAtRef.current;\n\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 type=\"button\" className={styles.actionBtn} onClick={handleAction}>\n              {actionLabel}\n            </button>\n          )}\n          {dismissible && (\n            <button\n              type=\"button\"\n              className={styles.dismissBtn}\n              aria-label=\"Dismiss\"\n              onClick={() => {\n                clearTimer();\n                onDismiss?.();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" aria-hidden />\n            </button>\n          )}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAmCA,IAAa,KAAS,EACpB,UACA,cAAW,KACX,cACA,gBACA,aACA,iBAAc,IACd,cACA,GAAG,QACa;CAChB,IAAM,IAAW,EAA6C,IAAI,GAC5D,IAAe,EAAO,CAAQ,GAC9B,IAAe,EAAe,CAAC,GAE/B,IAAa,QAAkB;EACnC,AAEE,EAAS,aADT,aAAa,EAAS,OAAO,GACV;CAEvB,GAAG,CAAC,CAAC,GAEC,IAAa,GAChB,MAAe;EACV,KAAM,KAAK,CAAC,MAIhB,EAAW,GACX,EAAa,UAAU,KAAK,IAAI,GAChC,EAAS,UAAU,iBAAiB,EAAU,GAAG,CAAE;CACrD,GACA,CAAC,GAAW,CAAU,CACxB;CAGA,SACM,IAAW,MACb,EAAa,UAAU,GACvB,EAAW,CAAQ,IAGd,IACN;EAAC;EAAU;EAAY;CAAU,CAAC;CAGrC,IAAM,UAAyB;EAC7B,IAAI,EAAS,SAAS;GACpB,IAAM,IAAU,KAAK,IAAI,IAAI,EAAa;GAG1C,AADA,EAAa,UAAU,KAAK,IAAI,GAAG,EAAa,UAAU,CAAO,GACjE,EAAW;EACb;CACF,GAEM,UAAyB;EAC7B,EAAW,EAAa,OAAO;CACjC,GAEM,UAAqB;EAGzB,AAFA,EAAW,GACX,IAAW,GACX,IAAY;CACd;CAEA,OACE,kBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,GAAI;YATN,CAWE,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;EAAY,CAAA,IAE1C,KAAe,MACf,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAxB,CACG,KACC,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAW,SAAS;cACzD;GACK,CAAA,GAET,KACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,eAAe;KAEb,AADA,EAAW,GACX,IAAY;IACd;cAEA,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;KAAK,eAAA;IAAa,CAAA;GACpC,CAAA,CAEN;IAEL;;AAET"}

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

@@ -1,2 +1,2 @@
-var e=`_toaster_1poqp_3`,t=`_toasterBottom_1poqp_18`,n=`_toasterTop_1poqp_22`,r=`_toast_1poqp_3`,i=`_title_1poqp_69`,a=`_actions_1poqp_76`,o=`_actionBtn_1poqp_85`,s=`_dismissBtn_1poqp_118`,c={toaster:e,toasterBottom:t,toasterTop:n,toast:r,"toast-in":`_toast-in_1poqp_1`,title:i,actions:a,actionBtn:o,dismissBtn:s};exports.default=c;
+var e={toaster:`_toaster_1poqp_3`,toasterBottom:`_toasterBottom_1poqp_18`,toasterTop:`_toasterTop_1poqp_22`,toast:`_toast_1poqp_3`,"toast-in":`_toast-in_1poqp_1`,title:`_title_1poqp_69`,actions:`_actions_1poqp_76`,actionBtn:`_actionBtn_1poqp_85`,dismissBtn:`_dismissBtn_1poqp_118`};exports.default=e;
 //# sourceMappingURL=Toast.module.css.cjs.map

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

@@ -1,16 +1,15 @@
-//#region src/components/Toast/Toast.module.css
-var e = "_toaster_1poqp_3", t = "_toasterBottom_1poqp_18", n = "_toasterTop_1poqp_22", r = "_toast_1poqp_3", i = "_title_1poqp_69", a = "_actions_1poqp_76", o = "_actionBtn_1poqp_85", s = "_dismissBtn_1poqp_118", c = {
-	toaster: e,
-	toasterBottom: t,
-	toasterTop: n,
-	toast: r,
+var e = {
+	toaster: "_toaster_1poqp_3",
+	toasterBottom: "_toasterBottom_1poqp_18",
+	toasterTop: "_toasterTop_1poqp_22",
+	toast: "_toast_1poqp_3",
 	"toast-in": "_toast-in_1poqp_1",
-	title: i,
-	actions: a,
-	actionBtn: o,
-	dismissBtn: s
+	title: "_title_1poqp_69",
+	actions: "_actions_1poqp_76",
+	actionBtn: "_actionBtn_1poqp_85",
+	dismissBtn: "_dismissBtn_1poqp_118"
 };
 //#endregion
-export { c as default };
+export { e as default };
 
 //# sourceMappingURL=Toast.module.css.js.map

package/dist/components/Toast/Toaster.cjs

@@ -1,2 +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;
+const e=require("./Toast.module.css.cjs");let t=require("react-dom"),n=require("react/jsx-runtime");var 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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.cjs","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\n\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') {\n    return node;\n  }\n\n  return createPortal(node, container ?? document.body);\n}\n"],"mappings":"oGAmCA,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,CAQR,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,GAAa,SAAS,KAAK"}
+{"version":3,"file":"Toaster.cjs","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\n\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 const 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') {\n    return node;\n  }\n\n  return createPortal(node, container ?? document.body);\n};\n"],"mappings":"oGAmCA,IAAa,GAAW,CACtB,WAAW,SACX,WACA,YACA,YACA,GAAG,KACe,CAClB,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,aAAW,gBACX,UAAW,CACT,EAAA,QAAO,QACP,IAAa,MAAQ,EAAA,QAAO,WAAa,EAAA,QAAO,cAChD,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,EAEH,UACE,CAAA,EAQP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,GAAa,SAAS,IAAI,CACtD"}

package/dist/components/Toast/Toaster.d.ts

@@ -27,4 +27,4 @@ export interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
  *   ))}
  * </Toaster>
  */
-export declare function Toaster({ position, children, container, className, ...props }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export declare const Toaster: ({ position, children, container, className, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/Toaster.js

@@ -2,7 +2,7 @@ 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 }) {
+var r = ({ position: r = "bottom", children: i, container: a, className: o, ...s }) => {
 	let c = /* @__PURE__ */ n("div", {
 		"aria-label": "Notifications",
 		className: [
@@ -14,7 +14,7 @@ function r({ position: r = "bottom", children: i, container: a, className: o, ..
 		children: i
 	});
 	return typeof document > "u" ? c : t(c, a ?? document.body);
-}
+};
 //#endregion
 export { r as Toaster };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\n\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') {\n    return node;\n  }\n\n  return createPortal(node, container ?? document.body);\n}\n"],"mappings":";;;;AAmCA,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;AAQR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,KAAa,SAAS,KAAK"}
+{"version":3,"file":"Toaster.js","names":[],"sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport { createPortal } from 'react-dom';\n\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 const 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') {\n    return node;\n  }\n\n  return createPortal(node, container ?? document.body);\n};\n"],"mappings":";;;;AAmCA,IAAa,KAAW,EACtB,cAAW,UACX,aACA,cACA,cACA,GAAG,QACe;CAClB,IAAM,IACJ,kBAAC,OAAD;EACE,cAAW;EACX,WAAW;GACT,EAAO;GACP,MAAa,QAAQ,EAAO,aAAa,EAAO;GAChD;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;EAEH;CACE,CAAA;CAQP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,KAAa,SAAS,IAAI;AACtD"}

package/dist/components/Toast.cjs

@@ -1 +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;
+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/ToggleGroup/ToggleGroup.cjs

@@ -1,2 +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=document.activeElement,r=n instanceof HTMLButtonElement?t.indexOf(n):-1;if(r===-1)return;let i=r;if(e.key===`ArrowRight`||e.key===`ArrowDown`)i=(r+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)i=(r-1+t.length)%t.length;else if(e.key===`Home`)i=0;else if(e.key===`End`)i=t.length-1;else return;e.preventDefault(),t[i].focus(),t[i].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;
+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}var 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=document.activeElement,r=n instanceof HTMLButtonElement?t.indexOf(n):-1;if(r===-1)return;let i=r;if(e.key===`ArrowRight`||e.key===`ArrowDown`)i=(r+1)%t.length;else if(e.key===`ArrowLeft`||e.key===`ArrowUp`)i=(r-1+t.length)%t.length;else if(e.key===`Home`)i=0;else if(e.key===`End`)i=t.length-1;else return;e.preventDefault(),t[i].focus(),t[i].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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\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\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n\n  if (!ctx) {\n    throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  }\n\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>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\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') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\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":"sGAkBA,IAAM,GAAA,EAAA,EAAA,eAAmE,KAAK,CAG9E,SAAgB,GAAiB,CAC/B,IAAM,GAAA,EAAA,EAAA,YAAiB,EAAmB,CAE1C,GAAI,CAAC,EACH,MAAU,MAAM,kDAAkD,CAGpE,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,iBAAoC,8BAA8B,EAAI,EAAE,CAC3F,CACK,EAAgB,SAAS,cACzB,EAAM,aAAyB,kBAAoB,EAAM,QAAQ,EAAc,CAAG,GAExF,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,eAChB,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC5C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,eAC/B,EAAE,MAAQ,OACnB,EAAO,UACE,EAAE,MAAQ,MACnB,EAAO,EAAM,OAAS,OAEtB,OAGF,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"}
+{"version":3,"file":"ToggleGroup.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\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\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n\n  if (!ctx) {\n    throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  }\n\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 const 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>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\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') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\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":"sGAkBA,IAAM,GAAA,EAAA,EAAA,eAAmE,IAAI,EAG7E,SAAgB,GAAiB,CAC/B,IAAM,GAAA,EAAA,EAAA,YAAiB,CAAkB,EAEzC,GAAI,CAAC,EACH,MAAU,MAAM,iDAAiD,EAGnE,OAAO,CACT,CA0BA,IAAa,GAAe,CAC1B,QACA,gBACA,aAAc,EAAY,UAC1B,WACA,YACA,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EAE5C,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,6BAA6B,GAAK,CAAC,CAC3F,EACM,EAAgB,SAAS,cACzB,EAAM,aAAyB,kBAAoB,EAAM,QAAQ,CAAa,EAAI,GAExF,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,EACX,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YACtC,GAAQ,EAAM,GAAK,EAAM,YACpB,GAAI,EAAE,MAAQ,aAAe,EAAE,MAAQ,UAC5C,GAAQ,EAAM,EAAI,EAAM,QAAU,EAAM,YACnC,GAAI,EAAE,MAAQ,OACnB,EAAO,OACF,GAAI,EAAE,MAAQ,MACnB,EAAO,EAAM,OAAS,OAEtB,OAGF,EAAE,eAAe,EACjB,EAAM,GAAM,MAAM,EAClB,EAAM,GAAM,MAAM,CACpB,CAEA,OACE,EAAA,EAAA,KAAC,EAAmB,SAApB,CAA6B,MAAO,CAAE,QAAO,eAAc,YACzD,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,KAAK,aACL,aAAY,EACZ,UAAW,EACX,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,GAAI,EAEH,UACE,CAAA,CACsB,CAAA,CAEjC"}

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -25,5 +25,5 @@ export interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ToggleGroup.html
  */
-export declare function ToggleGroup({ value, onValueChange, 'aria-label': ariaLabel, children, className, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroup: ({ value, onValueChange, "aria-label": ariaLabel, children, className, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -8,7 +8,7 @@ function o() {
 	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 }) {
+var 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 = document.activeElement, r = n instanceof HTMLButtonElement ? t.indexOf(n) : -1;
@@ -36,7 +36,7 @@ function s({ value: t, onValueChange: n, "aria-label": o = "Options", children:
 			children: s
 		})
 	});
-}
+};
 //#endregion
 export { s as ToggleGroup, o as useToggleGroup };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\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\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n\n  if (!ctx) {\n    throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  }\n\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>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\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') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\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":";;;;AAkBA,IAAM,IAAqB,EAA8C,KAAK;AAG9E,SAAgB,IAAiB;CAC/B,IAAM,IAAM,EAAW,EAAmB;AAE1C,KAAI,CAAC,EACH,OAAU,MAAM,kDAAkD;AAGpE,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,iBAAoC,8BAA8B,IAAI,EAAE,CAC3F,EACK,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAM,QAAQ,EAAc,GAAG;AAExF,MAAI,MAAQ,GACV;EAGF,IAAI,IAAO;AACX,MAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,YACtC,MAAQ,IAAM,KAAK,EAAM;WAChB,EAAE,QAAQ,eAAe,EAAE,QAAQ,UAC5C,MAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;WAC/B,EAAE,QAAQ,OACnB,KAAO;WACE,EAAE,QAAQ,MACnB,KAAO,EAAM,SAAS;MAEtB;AAKF,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"}
+{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\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\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useToggleGroup() {\n  const ctx = useContext(ToggleGroupContext);\n\n  if (!ctx) {\n    throw new Error('ToggleGroupItem must be used inside ToggleGroup');\n  }\n\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 const 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>('[role=radio]:not(:disabled)') ?? [],\n    );\n    const activeElement = document.activeElement;\n    const idx = activeElement instanceof HTMLButtonElement ? items.indexOf(activeElement) : -1;\n\n    if (idx === -1) {\n      return;\n    }\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') {\n      next = 0;\n    } else if (e.key === 'End') {\n      next = items.length - 1;\n    } else {\n      return;\n    }\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":";;;;AAkBA,IAAM,IAAqB,EAA8C,IAAI;AAG7E,SAAgB,IAAiB;CAC/B,IAAM,IAAM,EAAW,CAAkB;CAEzC,IAAI,CAAC,GACH,MAAU,MAAM,iDAAiD;CAGnE,OAAO;AACT;AA0BA,IAAa,KAAe,EAC1B,UACA,kBACA,cAAc,IAAY,WAC1B,aACA,cACA,GAAG,QACmB;CACtB,IAAM,IAAW,EAAuB,IAAI;CAE5C,SAAS,EAAc,GAAkC;EACvD,IAAM,IAAQ,MAAM,KAClB,EAAS,SAAS,iBAAoC,6BAA6B,KAAK,CAAC,CAC3F,GACM,IAAgB,SAAS,eACzB,IAAM,aAAyB,oBAAoB,EAAM,QAAQ,CAAa,IAAI;EAExF,IAAI,MAAQ,IACV;EAGF,IAAI,IAAO;EACX,IAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,aACtC,KAAQ,IAAM,KAAK,EAAM;OACpB,IAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAC5C,KAAQ,IAAM,IAAI,EAAM,UAAU,EAAM;OACnC,IAAI,EAAE,QAAQ,QACnB,IAAO;OACF,IAAI,EAAE,QAAQ,OACnB,IAAO,EAAM,SAAS;OAEtB;EAKF,AAFA,EAAE,eAAe,GACjB,EAAM,GAAM,MAAM,GAClB,EAAM,GAAM,MAAM;CACpB;CAEA,OACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;GAAE;GAAO;EAAc;YACzD,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAY;GACZ,WAAW;GACX,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC7D,GAAI;GAEH;EACE,CAAA;CACsB,CAAA;AAEjC"}

package/dist/components/ToggleGroup/ToggleGroupItem.cjs

@@ -1,2 +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;
+const e=require("../Icon/Icon.cjs"),t=require("./ToggleGroup.module.css.cjs"),n=require("./ToggleGroup.cjs");let r=require("react/jsx-runtime");var 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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps 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":"gJAuBA,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"}
+{"version":3,"file":"ToggleGroupItem.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps 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 const 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":"gJAuBA,IAAa,GAAmB,CAC9B,OACA,QACA,OACA,WACA,YACA,GAAG,KACuB,CAC1B,GAAM,CAAE,QAAO,iBAAkB,EAAA,eAAe,EAC1C,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,CAAI,EACjC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,CACpD,GAEZ"}

package/dist/components/ToggleGroup/ToggleGroupItem.d.ts

@@ -14,4 +14,4 @@ export interface ToggleGroupItemProps extends ButtonHTMLAttributes<HTMLButtonEle
  * Can be icon-only, label-only, or icon + label. For icon-only items always
  * provide an `aria-label` so screen readers can identify the option.
  */
-export declare function ToggleGroupItem({ name, label, icon, disabled, className, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ToggleGroupItem: ({ name, label, icon, disabled, className, ...props }: ToggleGroupItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleGroup/ToggleGroupItem.js

@@ -3,7 +3,7 @@ import t from "./ToggleGroup.module.css.js";
 import { useToggleGroup as n } from "./ToggleGroup.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ToggleGroup/ToggleGroupItem.tsx
-function a({ name: a, label: o, icon: s, disabled: c, className: l, ...u }) {
+var a = ({ name: a, label: o, icon: s, disabled: c, className: l, ...u }) => {
 	let { value: d, onValueChange: f } = n(), p = d === a, m = s && !o;
 	return /* @__PURE__ */ i("button", {
 		type: "button",
@@ -31,7 +31,7 @@ function a({ name: a, label: o, icon: s, disabled: c, className: l, ...u }) {
 			children: o
 		})]
 	});
-}
+};
 //#endregion
 export { a as ToggleGroupItem };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps 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":";;;;;AAuBA,SAAgB,EAAgB,EAC9B,SACA,UACA,SACA,aACA,cACA,GAAG,KACoB;CACvB,IAAM,EAAE,UAAO,qBAAkB,GAAgB,EAC3C,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;AAE1B,QACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,EAAK;EAClC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA,EAER,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;GAAa,CAAA,CACpD"}
+{"version":3,"file":"ToggleGroupItem.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroupItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useToggleGroup } from './ToggleGroup';\nimport styles from './ToggleGroup.module.css';\n\nexport interface ToggleGroupItemProps 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 const 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":";;;;;AAuBA,IAAa,KAAmB,EAC9B,SACA,UACA,SACA,aACA,cACA,GAAG,QACuB;CAC1B,IAAM,EAAE,UAAO,qBAAkB,EAAe,GAC1C,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;CAE1B,OACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,CAAI;EACjC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;GAAa,CAAA;EACrC,CAAA,GAEP,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;EAAY,CAAA,CACpD;;AAEZ"}

package/dist/components/ToggleGroup.cjs

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