@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts

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

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js

@@ -3,7 +3,7 @@ import t from "./InlineViewSwitcher.module.css.js";
 import { useInlineViewSwitcher as n } from "./InlineViewSwitcher.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/InlineViewSwitcher/InlineViewSwitcherItem.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 InlineViewSwitcherItem };
 

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\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 view.\n */\nexport function InlineViewSwitcherItem({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) {\n  const { value, onValueChange } = useInlineViewSwitcher();\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,EAAuB,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,KAC2B;CAC9B,IAAM,EAAE,UAAO,qBAAkB,GAAuB,EAClD,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":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\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 view.\n */\nexport const InlineViewSwitcherItem = ({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) => {\n  const { value, onValueChange } = useInlineViewSwitcher();\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,KAA0B,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,QAC8B;CACjC,IAAM,EAAE,UAAO,qBAAkB,EAAsB,GACjD,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/InlineViewSwitcher.cjs

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

package/dist/components/Link/Link.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Link.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({external:n=!1,children:r,className:i,target:a,rel:o,...s}){let c=n||a===`_blank`;return(0,t.jsxs)(`a`,{className:[e.default.link,i].filter(Boolean).join(` `),target:c?`_blank`:a,rel:c?`noopener noreferrer`:o,...s,children:[r,c&&(0,t.jsx)(`span`,{className:e.default.externalIcon,"aria-label":`(opens in new tab)`,children:`↗`})]})}exports.Link=n;
+const e=require("./Link.module.css.cjs");let t=require("react/jsx-runtime");var n=({external:n=!1,children:r,className:i,target:a,rel:o,...s})=>{let c=n||a===`_blank`;return(0,t.jsxs)(`a`,{className:[e.default.link,i].filter(Boolean).join(` `),target:c?`_blank`:a,rel:c?`noopener noreferrer`:o,...s,children:[r,c&&(0,t.jsx)(`span`,{className:e.default.externalIcon,"aria-label":`(opens in new tab)`,children:`↗`})]})};exports.Link=n;
 //# sourceMappingURL=Link.cjs.map

package/dist/components/Link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({ external = false, children, className, target, rel, ...props }: LinkProps) {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":"4EAqBA,SAAgB,EAAK,CAAE,WAAW,GAAO,WAAU,YAAW,SAAQ,MAAK,GAAG,GAAoB,CAChG,IAAM,EAAa,GAAY,IAAW,SAE1C,OACE,EAAA,EAAA,MAAC,IAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,OAAQ,EAAa,SAAW,EAChC,IAAK,EAAa,sBAAwB,EAC1C,GAAI,WAJN,CAMG,EACA,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aAAc,aAAW,8BAAqB,IAE/D,CAAA,CAEP"}
+{"version":3,"file":"Link.cjs","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport const Link = ({\n  external = false,\n  children,\n  className,\n  target,\n  rel,\n  ...props\n}: LinkProps) => {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n};\n"],"mappings":"4EAqBA,IAAa,GAAQ,CACnB,WAAW,GACX,WACA,YACA,SACA,MACA,GAAG,KACY,CACf,IAAM,EAAa,GAAY,IAAW,SAE1C,OACE,EAAA,EAAA,MAAC,IAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC5D,OAAQ,EAAa,SAAW,EAChC,IAAK,EAAa,sBAAwB,EAC1C,GAAI,WAJN,CAMG,EACA,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,aAAc,aAAW,8BAAqB,GAEhE,CAAA,CAEP,GAEP"}

package/dist/components/Link/Link.d.ts

@@ -15,4 +15,4 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/controls/links.html
  */
-export declare function Link({ external, children, className, target, rel, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ external, children, className, target, rel, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Link/Link.js

@@ -1,7 +1,7 @@
 import e from "./Link.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Link/Link.tsx
-function r({ external: r = !1, children: i, className: a, target: o, rel: s, ...c }) {
+var r = ({ external: r = !1, children: i, className: a, target: o, rel: s, ...c }) => {
 	let l = r || o === "_blank";
 	return /* @__PURE__ */ n("a", {
 		className: [e.link, a].filter(Boolean).join(" "),
@@ -14,7 +14,7 @@ function r({ external: r = !1, children: i, className: a, target: o, rel: s, ...
 			children: "↗"
 		})]
 	});
-}
+};
 //#endregion
 export { r as Link };
 

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport function Link({ external = false, children, className, target, rel, ...props }: LinkProps) {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n}\n"],"mappings":";;;AAqBA,SAAgB,EAAK,EAAE,cAAW,IAAO,aAAU,cAAW,WAAQ,QAAK,GAAG,KAAoB;CAChG,IAAM,IAAa,KAAY,MAAW;AAE1C,QACE,kBAAC,KAAD;EACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7D,QAAQ,IAAa,WAAW;EAChC,KAAK,IAAa,wBAAwB;EAC1C,GAAI;YAJN,CAMG,GACA,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAc,cAAW;aAAqB;GAE/D,CAAA,CAEP"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Link.module.css';\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * When true the link is treated as external: opens in a new tab,\n   * adds `rel=\"noopener noreferrer\"`, and shows a trailing ↗ icon.\n   */\n  external?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Inline hyperlink following GNOME HIG.\n *\n * - Uses the accent colour and shows an underline on hover.\n * - `external` opens a new tab safely and appends a visual ↗ indicator.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/links.html\n */\nexport const Link = ({\n  external = false,\n  children,\n  className,\n  target,\n  rel,\n  ...props\n}: LinkProps) => {\n  const isExternal = external || target === '_blank';\n\n  return (\n    <a\n      className={[styles.link, className].filter(Boolean).join(' ')}\n      target={isExternal ? '_blank' : target}\n      rel={isExternal ? 'noopener noreferrer' : rel}\n      {...props}\n    >\n      {children}\n      {isExternal && (\n        <span className={styles.externalIcon} aria-label=\"(opens in new tab)\">\n          ↗\n        </span>\n      )}\n    </a>\n  );\n};\n"],"mappings":";;;AAqBA,IAAa,KAAQ,EACnB,cAAW,IACX,aACA,cACA,WACA,QACA,GAAG,QACY;CACf,IAAM,IAAa,KAAY,MAAW;CAE1C,OACE,kBAAC,KAAD;EACE,WAAW,CAAC,EAAO,MAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC5D,QAAQ,IAAa,WAAW;EAChC,KAAK,IAAa,wBAAwB;EAC1C,GAAI;YAJN,CAMG,GACA,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;GAAc,cAAW;aAAqB;EAEhE,CAAA,CAEP;;AAEP"}

package/dist/components/Link.cjs

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

package/dist/components/LinkedGroup/LinkedGroup.cjs

@@ -1,2 +1,2 @@
-const e=require(`./LinkedGroup.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({children:n,vertical:r=!1,className:i,...a}){return(0,t.jsx)(`div`,{className:[e.default.linked,r?e.default.vertical:null,i].filter(Boolean).join(` `),...a,children:n})}exports.LinkedGroup=n;
+const e=require("./LinkedGroup.module.css.cjs");let t=require("react/jsx-runtime");var n=({children:n,vertical:r=!1,className:i,...a})=>(0,t.jsx)(`div`,{className:[e.default.linked,r?e.default.vertical:null,i].filter(Boolean).join(` `),...a,children:n});exports.LinkedGroup=n;
 //# sourceMappingURL=LinkedGroup.cjs.map

package/dist/components/LinkedGroup/LinkedGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({ children, vertical = false, className, ...props }: LinkedGroupProps) {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mFAkCA,SAAgB,EAAY,CAAE,WAAU,WAAW,GAAO,YAAW,GAAG,GAA2B,CAKjG,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UALS,CAAC,EAAA,QAAO,OAAQ,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAI,EAC1B,WACG,CAAA"}
+{"version":3,"file":"LinkedGroup.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport const LinkedGroup = ({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) => {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":"mFAkCA,IAAa,GAAe,CAC1B,WACA,WAAW,GACX,YACA,GAAG,MAOD,EAAA,EAAA,KAAC,MAAD,CAAK,UALS,CAAC,EAAA,QAAO,OAAQ,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAGU,EAAS,GAAI,EAC1B,UACE,CAAA"}

package/dist/components/LinkedGroup/LinkedGroup.d.ts

@@ -28,4 +28,4 @@ export interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {
  *   <Button>Paste</Button>
  * </LinkedGroup>
  */
-export declare function LinkedGroup({ children, vertical, className, ...props }: LinkedGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const LinkedGroup: ({ children, vertical, className, ...props }: LinkedGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LinkedGroup/LinkedGroup.js

@@ -1,17 +1,15 @@
 import e from "./LinkedGroup.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/LinkedGroup/LinkedGroup.tsx
-function n({ children: n, vertical: r = !1, className: i, ...a }) {
-	return /* @__PURE__ */ t("div", {
-		className: [
-			e.linked,
-			r ? e.vertical : null,
-			i
-		].filter(Boolean).join(" "),
-		...a,
-		children: n
-	});
-}
+var n = ({ children: n, vertical: r = !1, className: i, ...a }) => /* @__PURE__ */ t("div", {
+	className: [
+		e.linked,
+		r ? e.vertical : null,
+		i
+	].filter(Boolean).join(" "),
+	...a,
+	children: n
+});
 //#endregion
 export { n as LinkedGroup };
 

package/dist/components/LinkedGroup/LinkedGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport function LinkedGroup({ children, vertical = false, className, ...props }: LinkedGroupProps) {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAY,EAAE,aAAU,cAAW,IAAO,cAAW,GAAG,KAA2B;AAKjG,QACE,kBAAC,OAAD;EAAK,WALS;GAAC,EAAO;GAAQ,IAAW,EAAO,WAAW;GAAM;GAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAI;EAC1B;EACG,CAAA"}
+{"version":3,"file":"LinkedGroup.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './LinkedGroup.module.css';\n\nexport interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Stack children vertically instead of horizontally.\n   * Useful for stacked input or button groups.\n   */\n  vertical?: boolean;\n}\n\n/**\n * Renders children as a single visually-connected unit with no gap and\n * merged borders — the canonical GNOME pattern for button groups and\n * segmented inputs.\n *\n * Mirrors the libadwaita `.linked` style class.\n *\n * - First child gets left (or top) border radius.\n * - Last child gets right (or bottom) border radius.\n * - Adjacent borders are collapsed to a single pixel.\n * - Hover and focus bring the active child to the front via `z-index`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class\n *\n * @example\n * <LinkedGroup>\n *   <Button>Cut</Button>\n *   <Button>Copy</Button>\n *   <Button>Paste</Button>\n * </LinkedGroup>\n */\nexport const LinkedGroup = ({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) => {\n  const classes = [styles.linked, vertical ? styles.vertical : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAkCA,IAAa,KAAe,EAC1B,aACA,cAAW,IACX,cACA,GAAG,QAOD,kBAAC,OAAD;CAAK,WALS;EAAC,EAAO;EAAQ,IAAW,EAAO,WAAW;EAAM;CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAGU;CAAS,GAAI;CAC1B;AACE,CAAA"}

package/dist/components/LinkedGroup.cjs

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

package/dist/components/NavigationSplitView/NavigationSplitView.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../hooks/useBreakpoint.cjs`),t=require(`./NavigationSplitView.module.css.cjs`);let n=require(`react/jsx-runtime`);function r({sidebar:r,content:i,showContent:a=!1,minSidebarWidth:o=180,maxSidebarWidth:s=280,sidebarWidthFraction:c=.25,className:l,style:u,...d}){let{isNarrow:f}=e.useBreakpoint(),p=`clamp(${o}px, ${c*100}%, ${s}px)`;return(0,n.jsxs)(`div`,{className:[t.default.root,f?t.default.collapsed:t.default.expanded,l].filter(Boolean).join(` `),style:{"--sidebar-width":p,...u},...d,children:[(0,n.jsx)(`div`,{className:[t.default.sidebar,f&&a?t.default.paneHidden:t.default.paneVisible].filter(Boolean).join(` `),"aria-hidden":f&&a,children:r}),!f&&(0,n.jsx)(`div`,{className:t.default.divider,"aria-hidden":`true`}),(0,n.jsx)(`div`,{className:[t.default.contentPane,f&&!a?t.default.paneHidden:t.default.paneVisible].filter(Boolean).join(` `),"aria-hidden":f&&!a,children:i})]})}exports.NavigationSplitView=r;
+const e=require("../../hooks/useBreakpoint.cjs"),t=require("./NavigationSplitView.module.css.cjs");let n=require("react/jsx-runtime");var r=({sidebar:r,content:i,showContent:a=!1,minSidebarWidth:o=180,maxSidebarWidth:s=280,sidebarWidthFraction:c=.25,className:l,style:u,...d})=>{let{isNarrow:f}=e.useBreakpoint(),p=`clamp(${o}px, ${c*100}%, ${s}px)`;return(0,n.jsxs)(`div`,{className:[t.default.root,f?t.default.collapsed:t.default.expanded,l].filter(Boolean).join(` `),style:{"--sidebar-width":p,...u},...d,children:[(0,n.jsx)(`div`,{className:[t.default.sidebar,f&&a?t.default.paneHidden:t.default.paneVisible].filter(Boolean).join(` `),"aria-hidden":f&&a,children:r}),!f&&(0,n.jsx)(`div`,{className:t.default.divider,"aria-hidden":`true`}),(0,n.jsx)(`div`,{className:[t.default.contentPane,f&&!a?t.default.paneHidden:t.default.paneVisible].filter(Boolean).join(` `),"aria-hidden":f&&!a,children:i})]})};exports.NavigationSplitView=r;
 //# sourceMappingURL=NavigationSplitView.cjs.map

package/dist/components/NavigationSplitView/NavigationSplitView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sIA4DA,SAAgB,EAAoB,CAClC,UACA,UACA,cAAc,GACd,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACwB,CAC3B,GAAM,CAAE,YAAa,EAAA,eAAe,CAG9B,EAAe,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,KAEpG,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,UAAY,EAAA,QAAO,SAAU,EAAU,CAC/E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WALN,EAQE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,GAAY,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,WAExB,EACG,CAAA,CAGL,CAAC,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,cAAY,OAAS,CAAA,EAGnE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,YACP,GAAY,CAAC,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,CACF"}
+{"version":3,"file":"NavigationSplitView.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport const NavigationSplitView = ({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) => {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"sIA4DA,IAAa,GAAuB,CAClC,UACA,UACA,cAAc,GACd,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,KAC2B,CAC9B,GAAM,CAAE,YAAa,EAAA,cAAc,EAG7B,EAAe,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,KAEpG,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,UAAY,EAAA,QAAO,SAAU,CAAS,EAC9E,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,kBAAmB,EAAc,GAAG,CAAM,EACnD,GAAI,WALN,EAQE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,GAAY,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,WACvD,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,GAAY,WAExB,CACE,CAAA,EAGJ,CAAC,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,cAAY,MAAQ,CAAA,GAGlE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,YACP,GAAY,CAAC,EAAc,EAAA,QAAO,WAAa,EAAA,QAAO,WACxD,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,GAAY,CAAC,WAEzB,CACE,CAAA,CACF,GAET"}

package/dist/components/NavigationSplitView/NavigationSplitView.d.ts

@@ -52,4 +52,4 @@ export interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivEle
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html
  */
-export declare function NavigationSplitView({ sidebar, content, showContent, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: NavigationSplitViewProps): import("react/jsx-runtime").JSX.Element;
+export declare const NavigationSplitView: ({ sidebar, content, showContent, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: NavigationSplitViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NavigationSplitView/NavigationSplitView.js

@@ -2,7 +2,7 @@ import { useBreakpoint as e } from "../../hooks/useBreakpoint.js";
 import t from "./NavigationSplitView.module.css.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/NavigationSplitView/NavigationSplitView.tsx
-function i({ sidebar: i, content: a, showContent: o = !1, minSidebarWidth: s = 180, maxSidebarWidth: c = 280, sidebarWidthFraction: l = .25, className: u, style: d, ...f }) {
+var i = ({ sidebar: i, content: a, showContent: o = !1, minSidebarWidth: s = 180, maxSidebarWidth: c = 280, sidebarWidthFraction: l = .25, className: u, style: d, ...f }) => {
 	let { isNarrow: p } = e(), m = `clamp(${s}px, ${l * 100}%, ${c}px)`;
 	return /* @__PURE__ */ r("div", {
 		className: [
@@ -32,7 +32,7 @@ function i({ sidebar: i, content: a, showContent: o = !1, minSidebarWidth: s = 1
 			})
 		]
 	});
-}
+};
 //#endregion
 export { i as NavigationSplitView };
 

package/dist/components/NavigationSplitView/NavigationSplitView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport function NavigationSplitView({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA4DA,SAAgB,EAAoB,EAClC,YACA,YACA,iBAAc,IACd,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACwB;CAC3B,IAAM,EAAE,gBAAa,GAAe,EAG9B,IAAe,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAEpG,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,YAAY,EAAO;GAAU;GAAU,CAC/E,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YALN;GAQE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,SACP,KAAY,IAAc,EAAO,aAAa,EAAO,YACtD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY;cAExB;IACG,CAAA;GAGL,CAAC,KAAY,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,eAAY;IAAS,CAAA;GAGnE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,aACP,KAAY,CAAC,IAAc,EAAO,aAAa,EAAO,YACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GACF"}
+{"version":3,"file":"NavigationSplitView.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './NavigationSplitView.module.css';\n\nexport interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar / list pane (left side on wide screens).\n   * On narrow screens this is the \"list\" view shown when `showContent` is false.\n   */\n  sidebar: ReactNode;\n  /**\n   * The detail / content pane (right side on wide screens).\n   * On narrow screens this is the \"detail\" view shown when `showContent` is true.\n   */\n  content: ReactNode;\n  /**\n   * Controls which pane is visible on narrow screens (≤ 400 px).\n   * - `false` (default) — show the sidebar list.\n   * - `true`            — show the content detail.\n   *\n   * Has no effect on wide screens where both panes are visible simultaneously.\n   */\n  showContent?: boolean;\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Two-pane sidebar + content layout following the Adwaita\n * `AdwNavigationSplitView` pattern.\n *\n * On **wide** screens (> 400 px) both panes are visible side-by-side.\n * On **narrow** screens (≤ 400 px) only one pane is shown at a time;\n * use `showContent` to switch between the sidebar list and the detail view.\n *\n * The sidebar width is constrained between `minSidebarWidth` and\n * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.\n *\n * @example\n * const [showContent, setShowContent] = useState(false);\n * <NavigationSplitView\n *   showContent={showContent}\n *   sidebar={<MailList onSelect={() => setShowContent(true)} />}\n *   content={<MailDetail onBack={() => setShowContent(false)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html\n */\nexport const NavigationSplitView = ({\n  sidebar,\n  content,\n  showContent = false,\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: NavigationSplitViewProps) => {\n  const { isNarrow } = useBreakpoint();\n\n  // CSS custom property drives the sidebar width clamp\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[styles.root, isNarrow ? styles.collapsed : styles.expanded, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Sidebar pane */}\n      <div\n        className={[\n          styles.sidebar,\n          isNarrow && showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && showContent}\n      >\n        {sidebar}\n      </div>\n\n      {/* Separator — only on wide screens */}\n      {!isNarrow && <div className={styles.divider} aria-hidden=\"true\" />}\n\n      {/* Content pane */}\n      <div\n        className={[\n          styles.contentPane,\n          isNarrow && !showContent ? styles.paneHidden : styles.paneVisible,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showContent}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AA4DA,IAAa,KAAuB,EAClC,YACA,YACA,iBAAc,IACd,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,QAC2B;CAC9B,IAAM,EAAE,gBAAa,EAAc,GAG7B,IAAe,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;CAEpG,OACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,YAAY,EAAO;GAAU;EAAS,EAC9E,OAAO,OAAO,EACd,KAAK,GAAG;EACX,OAAO;GAAE,mBAAmB;GAAc,GAAG;EAAM;EACnD,GAAI;YALN;GAQE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,SACP,KAAY,IAAc,EAAO,aAAa,EAAO,WACvD,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,eAAa,KAAY;cAExB;GACE,CAAA;GAGJ,CAAC,KAAY,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS,eAAY;GAAQ,CAAA;GAGlE,kBAAC,OAAD;IACE,WAAW,CACT,EAAO,aACP,KAAY,CAAC,IAAc,EAAO,aAAa,EAAO,WACxD,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,eAAa,KAAY,CAAC;cAEzB;GACE,CAAA;EACF;;AAET"}

package/dist/components/NavigationSplitView.cjs

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

package/dist/components/NavigationView/NavigationView.cjs

@@ -1,2 +1,2 @@
-const e=require(`./NavigationView.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.createContext)({navigate:()=>{},pop:()=>{},canGoBack:!1,currentTag:``,direction:`forward`});function i(){return(0,t.useContext)(r)}function a({tag:i,title:a,children:o,className:s,...c}){let{currentTag:l,direction:u}=(0,t.useContext)(r);return l===i?(0,n.jsxs)(`div`,{className:[e.default.page,u===`forward`?e.default.enterForward:e.default.enterBack,s].filter(Boolean).join(` `),...c,children:[(0,n.jsx)(`div`,{className:e.default.pageHeader,children:(0,n.jsx)(`span`,{className:e.default.pageTitle,children:a})}),(0,n.jsx)(`div`,{className:e.default.pageContent,children:o})]}):null}function o({initialPage:i,children:a,className:o,...s}){let[c,l]=(0,t.useState)([i]),u=c[c.length-1],d=c.length>1,[f,p]=(0,t.useState)(`forward`);return(0,n.jsx)(r.Provider,{value:{navigate:e=>{p(`forward`),l(t=>[...t,e])},pop:()=>{c.length<=1||(p(`back`),l(e=>e.slice(0,-1)))},canGoBack:d,currentTag:u,direction:f},children:(0,n.jsx)(`div`,{className:[e.default.view,o].filter(Boolean).join(` `),...s,children:a})})}exports.NavigationPage=a,exports.NavigationView=o,exports.useNavigation=i;
+const e=require("./NavigationView.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.createContext)({navigate:()=>{},pop:()=>{},canGoBack:!1,currentTag:``,direction:`forward`});function i(){return(0,t.useContext)(r)}var a=({tag:i,title:a,children:o,className:s,...c})=>{let{currentTag:l,direction:u}=(0,t.useContext)(r);return l===i?(0,n.jsxs)(`div`,{className:[e.default.page,u===`forward`?e.default.enterForward:e.default.enterBack,s].filter(Boolean).join(` `),...c,children:[(0,n.jsx)(`div`,{className:e.default.pageHeader,children:(0,n.jsx)(`span`,{className:e.default.pageTitle,children:a})}),(0,n.jsx)(`div`,{className:e.default.pageContent,children:o})]}):null},o=({initialPage:i,children:a,className:o,...s})=>{let[c,l]=(0,t.useState)([i]),u=c[c.length-1],d=c.length>1,[f,p]=(0,t.useState)(`forward`);return(0,n.jsx)(r.Provider,{value:{navigate:e=>{p(`forward`),l(t=>[...t,e])},pop:()=>{c.length<=1||(p(`back`),l(e=>e.slice(0,-1)))},canGoBack:d,currentTag:u,direction:f},children:(0,n.jsx)(`div`,{className:[e.default.view,o].filter(Boolean).join(` `),...s,children:a})})};exports.NavigationPage=a,exports.NavigationView=o,exports.useNavigation=i;
 //# sourceMappingURL=NavigationView.cjs.map

package/dist/components/NavigationView/NavigationView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":"yGAmBA,IAAM,GAAA,EAAA,EAAA,eAA0D,CAC9D,aAAgB,GAChB,QAAW,GACX,UAAW,GACX,WAAY,GACZ,UAAW,UACZ,CAAC,CAIF,SAAgB,GAAgB,CAC9B,OAAA,EAAA,EAAA,YAAkB,EAAkB,CAiBtC,SAAgB,EAAe,CAAE,MAAK,QAAO,WAAU,YAAW,GAAG,GAA8B,CACjG,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,YAAyB,EAAkB,CAM/D,OAJI,IAAe,GAKjB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAc,UAAY,EAAA,QAAO,aAAe,EAAA,QAAO,UACvD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WARN,EAUE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAC7C,CAAA,EACN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YAAc,WAAe,CAAA,CAChD,GAlBC,KAmDX,SAAgB,EAAe,CAC7B,cACA,WACA,YACA,GAAG,GACmB,CACtB,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+B,CAAC,EAAY,CAAC,CAErD,EAAa,EAAM,EAAM,OAAS,GAClC,EAAY,EAAM,OAAS,EAC3B,CAAC,EAAW,IAAA,EAAA,EAAA,UAA6C,UAAU,CAgBzE,OACE,EAAA,EAAA,KAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,SAfrB,GAAgB,CAChC,EAAa,UAAU,CACvB,EAAU,GAAM,CAAC,GAAG,EAAG,EAAI,CAAC,EAamB,QAV/B,CACZ,EAAM,QAAU,IAIpB,EAAa,OAAO,CACpB,EAAU,GAAM,EAAE,MAAM,EAAG,GAAG,CAAC,GAIqB,YAAW,aAAY,YAAW,WACpF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,EACrE,WACG,CAAA,CACqB,CAAA"}
+{"version":3,"file":"NavigationView.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport const NavigationPage = ({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) => {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n};\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport const NavigationView = ({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) => {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n};\n"],"mappings":"yGAmBA,IAAM,GAAA,EAAA,EAAA,eAA0D,CAC9D,aAAgB,CAAC,EACjB,QAAW,CAAC,EACZ,UAAW,GACX,WAAY,GACZ,UAAW,SACb,CAAC,EAID,SAAgB,GAAgB,CAC9B,OAAA,EAAA,EAAA,YAAkB,CAAiB,CACrC,CAgBA,IAAa,GAAkB,CAC7B,MACA,QACA,WACA,YACA,GAAG,KACsB,CACzB,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,YAAyB,CAAiB,EAM9D,OAJI,IAAe,GAKjB,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,IAAc,UAAY,EAAA,QAAO,aAAe,EAAA,QAAO,UACvD,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WARN,EAUE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,CAC7C,CAAA,GACL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,YAAc,UAAc,CAAA,CAChD,IAlBE,IAoBX,EA+Ba,GAAkB,CAC7B,cACA,WACA,YACA,GAAG,KACsB,CACzB,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAA+B,CAAC,CAAW,CAAC,EAEpD,EAAa,EAAM,EAAM,OAAS,GAClC,EAAY,EAAM,OAAS,EAC3B,CAAC,EAAW,IAAA,EAAA,EAAA,UAA6C,SAAS,EAgBxE,OACE,EAAA,EAAA,KAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,SAfrB,GAAgB,CAChC,EAAa,SAAS,EACtB,EAAU,GAAM,CAAC,GAAG,EAAG,CAAG,CAAC,CAC7B,EAYiD,QAV/B,CACZ,EAAM,QAAU,IAIpB,EAAa,MAAM,EACnB,EAAU,GAAM,EAAE,MAAM,EAAG,EAAE,CAAC,EAChC,EAGsD,YAAW,aAAY,WAAU,YACnF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,GAAI,EACrE,UACE,CAAA,CACqB,CAAA,CAEhC"}

package/dist/components/NavigationView/NavigationView.d.ts

@@ -24,7 +24,7 @@ export interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {
  * A single page inside a `NavigationView`.
  * Only visible when its `tag` matches the current page in the stack.
  */
-export declare function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const NavigationPage: ({ tag, title, children, className, ...props }: NavigationPageProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {
     /** Tag of the first page to show. */
     initialPage: string;
@@ -51,5 +51,5 @@ export interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html
  */
-export declare function NavigationView({ initialPage, children, className, ...props }: NavigationViewProps): import("react/jsx-runtime").JSX.Element;
+export declare const NavigationView: ({ initialPage, children, className, ...props }: NavigationViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NavigationView/NavigationView.js

@@ -12,7 +12,7 @@ var o = t({
 function s() {
 	return n(o);
 }
-function c({ tag: t, title: r, children: s, className: c, ...l }) {
+var c = ({ tag: t, title: r, children: s, className: c, ...l }) => {
 	let { currentTag: u, direction: d } = n(o);
 	return u === t ? /* @__PURE__ */ a("div", {
 		className: [
@@ -32,8 +32,7 @@ function c({ tag: t, title: r, children: s, className: c, ...l }) {
 			children: s
 		})]
 	}) : null;
-}
-function l({ initialPage: t, children: n, className: a, ...s }) {
+}, l = ({ initialPage: t, children: n, className: a, ...s }) => {
 	let [c, l] = r([t]), u = c[c.length - 1], d = c.length > 1, [f, p] = r("forward");
 	return /* @__PURE__ */ i(o.Provider, {
 		value: {
@@ -53,7 +52,7 @@ function l({ initialPage: t, children: n, className: a, ...s }) {
 			children: n
 		})
 	});
-}
+};
 //#endregion
 export { c as NavigationPage, l as NavigationView, s as useNavigation };
 

package/dist/components/NavigationView/NavigationView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n}\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport function NavigationView({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":";;;;AAmBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB;CAChB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,CAAC;AAIF,SAAgB,IAAgB;AAC9B,QAAO,EAAW,EAAkB;;AAiBtC,SAAgB,EAAe,EAAE,QAAK,UAAO,aAAU,cAAW,GAAG,KAA8B;CACjG,IAAM,EAAE,eAAY,iBAAc,EAAW,EAAkB;AAM/D,QAJI,MAAe,IAKjB,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,MAAc,YAAY,EAAO,eAAe,EAAO;GACvD;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YARN,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;IAAa,CAAA;GAC7C,CAAA,EACN,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAc;GAAe,CAAA,CAChD;MAlBC;;AAmDX,SAAgB,EAAe,EAC7B,gBACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,CAAC,GAAO,KAAY,EAAmB,CAAC,EAAY,CAAC,EAErD,IAAa,EAAM,EAAM,SAAS,IAClC,IAAY,EAAM,SAAS,GAC3B,CAAC,GAAW,KAAgB,EAA6B,UAAU;AAgBzE,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAfrB,MAAgB;AAEhC,IADA,EAAa,UAAU,EACvB,GAAU,MAAM,CAAC,GAAG,GAAG,EAAI,CAAC;;GAamB,WAV/B;AACZ,MAAM,UAAU,MAIpB,EAAa,OAAO,EACpB,GAAU,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;;GAIqB;GAAW;GAAY;GAAW;YACpF,kBAAC,OAAD;GAAK,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAAE,GAAI;GACrE;GACG,CAAA;EACqB,CAAA"}
+{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import { createContext, type HTMLAttributes, type ReactNode, useContext, useState } from 'react';\n\nimport styles from './NavigationView.module.css';\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface NavigationContextValue {\n  /** Navigate to a page by its `tag`. Pushes onto the stack. */\n  navigate: (tag: string) => void;\n  /** Go back one page. No-op if already at the root. */\n  pop: () => void;\n  /** `true` when there is at least one page to go back to. */\n  canGoBack: boolean;\n  /** Tag of the currently visible page. */\n  currentTag: string;\n  /** Direction of the last transition (`\"forward\"` or `\"back\"`). */\n  direction: 'forward' | 'back';\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  navigate: () => {},\n  pop: () => {},\n  canGoBack: false,\n  currentTag: '',\n  direction: 'forward',\n});\n\n/** Access the nearest `NavigationView`'s navigation functions. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useNavigation() {\n  return useContext(NavigationContext);\n}\n\n// ─── NavigationPage ───────────────────────────────────────────────────────────\n\nexport interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {\n  /** Unique identifier used with `navigate()`. */\n  tag: string;\n  /** Page heading shown in a `HeaderBar`-style title bar. */\n  title: string;\n  children?: ReactNode;\n}\n\n/**\n * A single page inside a `NavigationView`.\n * Only visible when its `tag` matches the current page in the stack.\n */\nexport const NavigationPage = ({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) => {\n  const { currentTag, direction } = useContext(NavigationContext);\n\n  if (currentTag !== tag) {\n    return null;\n  }\n\n  return (\n    <div\n      className={[\n        styles.page,\n        direction === 'forward' ? styles.enterForward : styles.enterBack,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <div className={styles.pageHeader}>\n        <span className={styles.pageTitle}>{title}</span>\n      </div>\n      <div className={styles.pageContent}>{children}</div>\n    </div>\n  );\n};\n\n// ─── NavigationView ───────────────────────────────────────────────────────────\n\nexport interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tag of the first page to show. */\n  initialPage: string;\n  children?: ReactNode;\n}\n\n/**\n * Single-pane push/pop navigation stack.\n *\n * Mirrors `AdwNavigationView` — the mobile-first counterpart to\n * `NavigationSplitView`. Each \"screen\" is a `NavigationPage` with a unique\n * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.\n *\n * @example\n * ```tsx\n * <NavigationView initialPage=\"home\">\n *   <NavigationPage tag=\"home\" title=\"Home\">\n *     <Button onClick={() => navigate(\"details\")}>Open</Button>\n *   </NavigationPage>\n *   <NavigationPage tag=\"details\" title=\"Details\">\n *     <Button onClick={pop}>Back</Button>\n *   </NavigationPage>\n * </NavigationView>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html\n */\nexport const NavigationView = ({\n  initialPage,\n  children,\n  className,\n  ...props\n}: NavigationViewProps) => {\n  const [stack, setStack] = useState<string[]>([initialPage]);\n\n  const currentTag = stack[stack.length - 1];\n  const canGoBack = stack.length > 1;\n  const [direction, setDirection] = useState<'forward' | 'back'>('forward');\n\n  const navigate = (tag: string) => {\n    setDirection('forward');\n    setStack((s) => [...s, tag]);\n  };\n\n  const pop = () => {\n    if (stack.length <= 1) {\n      return;\n    }\n\n    setDirection('back');\n    setStack((s) => s.slice(0, -1));\n  };\n\n  return (\n    <NavigationContext.Provider value={{ navigate, pop, canGoBack, currentTag, direction }}>\n      <div className={[styles.view, className].filter(Boolean).join(' ')} {...props}>\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n};\n"],"mappings":";;;;AAmBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB,CAAC;CACjB,WAAW,CAAC;CACZ,WAAW;CACX,YAAY;CACZ,WAAW;AACb,CAAC;AAID,SAAgB,IAAgB;CAC9B,OAAO,EAAW,CAAiB;AACrC;AAgBA,IAAa,KAAkB,EAC7B,QACA,UACA,aACA,cACA,GAAG,QACsB;CACzB,IAAM,EAAE,eAAY,iBAAc,EAAW,CAAiB;CAM9D,OAJI,MAAe,IAKjB,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,MAAc,YAAY,EAAO,eAAe,EAAO;GACvD;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YARN,CAUE,kBAAC,OAAD;GAAK,WAAW,EAAO;aACrB,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;GAAY,CAAA;EAC7C,CAAA,GACL,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAc;EAAc,CAAA,CAChD;MAlBE;AAoBX,GA+Ba,KAAkB,EAC7B,gBACA,aACA,cACA,GAAG,QACsB;CACzB,IAAM,CAAC,GAAO,KAAY,EAAmB,CAAC,CAAW,CAAC,GAEpD,IAAa,EAAM,EAAM,SAAS,IAClC,IAAY,EAAM,SAAS,GAC3B,CAAC,GAAW,KAAgB,EAA6B,SAAS;CAgBxE,OACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAfrB,MAAgB;IAEhC,AADA,EAAa,SAAS,GACtB,GAAU,MAAM,CAAC,GAAG,GAAG,CAAG,CAAC;GAC7B;GAYiD,WAV/B;IACZ,EAAM,UAAU,MAIpB,EAAa,MAAM,GACnB,GAAU,MAAM,EAAE,MAAM,GAAG,EAAE,CAAC;GAChC;GAGsD;GAAW;GAAY;EAAU;YACnF,kBAAC,OAAD;GAAK,WAAW,CAAC,EAAO,MAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAAG,GAAI;GACrE;EACE,CAAA;CACqB,CAAA;AAEhC"}

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

@@ -1,2 +1,2 @@
-var e=`_view_18zs8_3`,t=`_page_18zs8_12`,n=`_pageHeader_18zs8_23`,r=`_pageTitle_18zs8_34`,i=`_pageContent_18zs8_43`,a=`_enterForward_18zs8_52`,o=`_enterBack_18zs8_57`,s={view:e,page:t,pageHeader:n,pageTitle:r,pageContent:i,enterForward:a,"slide-in-right":`_slide-in-right_18zs8_1`,enterBack:o,"slide-in-left":`_slide-in-left_18zs8_1`};exports.default=s;
+var e={view:`_view_18zs8_3`,page:`_page_18zs8_12`,pageHeader:`_pageHeader_18zs8_23`,pageTitle:`_pageTitle_18zs8_34`,pageContent:`_pageContent_18zs8_43`,enterForward:`_enterForward_18zs8_52`,"slide-in-right":`_slide-in-right_18zs8_1`,enterBack:`_enterBack_18zs8_57`,"slide-in-left":`_slide-in-left_18zs8_1`};exports.default=e;
 //# sourceMappingURL=NavigationView.module.css.cjs.map

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

@@ -1,16 +1,15 @@
-//#region src/components/NavigationView/NavigationView.module.css
-var e = "_view_18zs8_3", t = "_page_18zs8_12", n = "_pageHeader_18zs8_23", r = "_pageTitle_18zs8_34", i = "_pageContent_18zs8_43", a = "_enterForward_18zs8_52", o = "_enterBack_18zs8_57", s = {
-	view: e,
-	page: t,
-	pageHeader: n,
-	pageTitle: r,
-	pageContent: i,
-	enterForward: a,
+var e = {
+	view: "_view_18zs8_3",
+	page: "_page_18zs8_12",
+	pageHeader: "_pageHeader_18zs8_23",
+	pageTitle: "_pageTitle_18zs8_34",
+	pageContent: "_pageContent_18zs8_43",
+	enterForward: "_enterForward_18zs8_52",
 	"slide-in-right": "_slide-in-right_18zs8_1",
-	enterBack: o,
+	enterBack: "_enterBack_18zs8_57",
 	"slide-in-left": "_slide-in-left_18zs8_1"
 };
 //#endregion
-export { s as default };
+export { e as default };
 
 //# sourceMappingURL=NavigationView.module.css.js.map

package/dist/components/NavigationView.cjs

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

package/dist/components/OverlaySplitView/OverlaySplitView.cjs

@@ -1,2 +1,2 @@
-const e=require(`../../hooks/useBreakpoint.cjs`),t=require(`./OverlaySplitView.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({sidebar:i,content:a,showSidebar:o=!1,onClose:s,collapsed:c=!1,sidebarPosition:l=`start`,minSidebarWidth:u=180,maxSidebarWidth:d=280,sidebarWidthFraction:f=.25,className:p,style:m,...h}){let{isNarrow:g}=e.useBreakpoint(),_=(0,n.useRef)(null),v=`clamp(${u}px, ${f*100}%, ${d}px)`;(0,n.useEffect)(()=>{if(!g||!o)return;let e=e=>{e.key===`Escape`&&s?.()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[g,o,s]),(0,n.useEffect)(()=>{!g||!o||(_.current?.querySelector(`button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])`))?.focus()},[g,o]);let y=l===`end`;return(0,n.useEffect)(()=>{if(!g||!o)return;let e=_.current;if(!e)return;let t=0,n=e=>{t=e.touches[0].clientX},r=e=>{let n=e.changedTouches[0].clientX-t;(y?n>80:n<-80)&&s?.()};return e.addEventListener(`touchstart`,n,{passive:!0}),e.addEventListener(`touchend`,r,{passive:!0}),()=>{e.removeEventListener(`touchstart`,n),e.removeEventListener(`touchend`,r)}},[g,o,y,s]),(0,r.jsxs)(`div`,{className:[t.default.root,g?t.default.narrow:t.default.wide,!g&&c?t.default.collapsed:null,y?t.default.end:t.default.start,p].filter(Boolean).join(` `),style:{"--sidebar-width":v,...m},...h,children:[g&&(0,r.jsx)(`div`,{className:[t.default.backdrop,o?t.default.backdropVisible:null].filter(Boolean).join(` `),"aria-hidden":`true`,onClick:s}),(0,r.jsx)(`div`,{ref:_,className:[t.default.sidebar,g?o?t.default.sidebarOpen:t.default.sidebarClosed:null].filter(Boolean).join(` `),"aria-hidden":g&&!o,children:i}),(0,r.jsx)(`div`,{className:t.default.content,children:a})]})}exports.OverlaySplitView=i;
+const e=require("../../hooks/useBreakpoint.cjs"),t=require("./OverlaySplitView.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=({sidebar:i,content:a,showSidebar:o=!1,onClose:s,collapsed:c=!1,sidebarPosition:l=`start`,minSidebarWidth:u=180,maxSidebarWidth:d=280,sidebarWidthFraction:f=.25,className:p,style:m,...h})=>{let{isNarrow:g}=e.useBreakpoint(),_=(0,n.useRef)(null),v=`clamp(${u}px, ${f*100}%, ${d}px)`;(0,n.useEffect)(()=>{if(!g||!o)return;let e=e=>{e.key===`Escape`&&s?.()};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[g,o,s]),(0,n.useEffect)(()=>{!g||!o||(_.current?.querySelector(`button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])`))?.focus()},[g,o]);let y=l===`end`;return(0,n.useEffect)(()=>{if(!g||!o)return;let e=_.current;if(!e)return;let t=0,n=e=>{t=e.touches[0].clientX},r=e=>{let n=e.changedTouches[0].clientX-t;(y?n>80:n<-80)&&s?.()};return e.addEventListener(`touchstart`,n,{passive:!0}),e.addEventListener(`touchend`,r,{passive:!0}),()=>{e.removeEventListener(`touchstart`,n),e.removeEventListener(`touchend`,r)}},[g,o,y,s]),(0,r.jsxs)(`div`,{className:[t.default.root,g?t.default.narrow:t.default.wide,!g&&c?t.default.collapsed:null,y?t.default.end:t.default.start,p].filter(Boolean).join(` `),style:{"--sidebar-width":v,...m},...h,children:[g&&(0,r.jsx)(`div`,{className:[t.default.backdrop,o?t.default.backdropVisible:null].filter(Boolean).join(` `),"aria-hidden":`true`,onClick:s}),(0,r.jsx)(`div`,{ref:_,className:[t.default.sidebar,g?o?t.default.sidebarOpen:t.default.sidebarClosed:null].filter(Boolean).join(` `),"aria-hidden":g&&!o,children:i}),(0,r.jsx)(`div`,{className:t.default.content,children:a})]})};exports.OverlaySplitView=i;
 //# sourceMappingURL=OverlaySplitView.cjs.map

package/dist/components/OverlaySplitView/OverlaySplitView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './OverlaySplitView.module.css';\n\nexport interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: 'start' | 'end';\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport function OverlaySplitView({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = 'start',\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handler);\n\n    return () => document.removeEventListener('keydown', handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === 'end';\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const el = sidebarRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => {\n      startX = e.touches[0].clientX;\n    };\n    const onTouchEnd = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n\n      if (closeSwipe) {\n        onClose?.();\n      }\n    };\n\n    el.addEventListener('touchstart', onTouchStart, { passive: true });\n    el.addEventListener('touchend', onTouchEnd, { passive: true });\n\n    return () => {\n      el.removeEventListener('touchstart', onTouchStart);\n      el.removeEventListener('touchend', onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow ? (showSidebar ? styles.sidebarOpen : styles.sidebarClosed) : null,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>{content}</div>\n    </div>\n  );\n}\n"],"mappings":"sJAsEA,SAAgB,EAAiB,CAC/B,UACA,UACA,cAAc,GACd,UACA,YAAY,GACZ,kBAAkB,QAClB,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACqB,CACxB,GAAM,CAAE,YAAa,EAAA,eAAe,CAC9B,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EAAe,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,MAGpG,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAChB,OAGF,IAAM,EAAW,GAAqB,CAChC,EAAE,MAAQ,UACZ,KAAW,EAMf,OAFA,SAAS,iBAAiB,UAAW,EAAQ,KAEhC,SAAS,oBAAoB,UAAW,EAAQ,EAC5D,CAAC,EAAU,EAAa,EAAQ,CAAC,EAGpC,EAAA,EAAA,eAAgB,CACV,CAAC,GAAY,CAAC,IAIJ,EAAW,SAAS,cAChC,2EACD,GAEM,OAAO,EACb,CAAC,EAAU,EAAY,CAAC,CAE3B,IAAM,EAAQ,IAAoB,MAsClC,OAnCA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAChB,OAGF,IAAM,EAAK,EAAW,QAEtB,GAAI,CAAC,EACH,OAGF,IAAI,EAAS,EAGP,EAAgB,GAAkB,CACtC,EAAS,EAAE,QAAQ,GAAG,SAElB,EAAc,GAAkB,CACpC,IAAM,EAAK,EAAE,eAAe,GAAG,QAAU,GACtB,EAAQ,EAAK,GAAY,EAAK,MAG/C,KAAW,EAOf,OAHA,EAAG,iBAAiB,aAAc,EAAc,CAAE,QAAS,GAAM,CAAC,CAClE,EAAG,iBAAiB,WAAY,EAAY,CAAE,QAAS,GAAM,CAAC,KAEjD,CACX,EAAG,oBAAoB,aAAc,EAAa,CAClD,EAAG,oBAAoB,WAAY,EAAW,GAE/C,CAAC,EAAU,EAAa,EAAO,EAAQ,CAAC,EAGzC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,OAAS,EAAA,QAAO,KAClC,CAAC,GAAY,EAAY,EAAA,QAAO,UAAY,KAC5C,EAAQ,EAAA,QAAO,IAAM,EAAA,QAAO,MAC5B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WAXN,CAcG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAc,EAAA,QAAO,gBAAkB,KAAK,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,OACZ,QAAS,EACT,CAAA,EAIJ,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAc,EAAA,QAAO,YAAc,EAAA,QAAO,cAAiB,KACxE,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAc,CAAA,CAC3C"}
+{"version":3,"file":"OverlaySplitView.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './OverlaySplitView.module.css';\n\nexport interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: 'start' | 'end';\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport const OverlaySplitView = ({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = 'start',\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) => {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handler);\n\n    return () => document.removeEventListener('keydown', handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === 'end';\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const el = sidebarRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => {\n      startX = e.touches[0].clientX;\n    };\n    const onTouchEnd = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n\n      if (closeSwipe) {\n        onClose?.();\n      }\n    };\n\n    el.addEventListener('touchstart', onTouchStart, { passive: true });\n    el.addEventListener('touchend', onTouchEnd, { passive: true });\n\n    return () => {\n      el.removeEventListener('touchstart', onTouchStart);\n      el.removeEventListener('touchend', onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow ? (showSidebar ? styles.sidebarOpen : styles.sidebarClosed) : null,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>{content}</div>\n    </div>\n  );\n};\n"],"mappings":"sJAsEA,IAAa,GAAoB,CAC/B,UACA,UACA,cAAc,GACd,UACA,YAAY,GACZ,kBAAkB,QAClB,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,KACwB,CAC3B,GAAM,CAAE,YAAa,EAAA,cAAc,EAC7B,GAAA,EAAA,EAAA,QAAoC,IAAI,EAExC,EAAe,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,MAGpG,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAChB,OAGF,IAAM,EAAW,GAAqB,CAChC,EAAE,MAAQ,UACZ,IAAU,CAEd,EAIA,OAFA,SAAS,iBAAiB,UAAW,CAAO,MAE/B,SAAS,oBAAoB,UAAW,CAAO,CAC9D,EAAG,CAAC,EAAU,EAAa,CAAO,CAAC,GAGnC,EAAA,EAAA,eAAgB,CACV,CAAC,GAAY,CAAC,IAIJ,EAAW,SAAS,cAChC,0EACF,IAEO,MAAM,CACf,EAAG,CAAC,EAAU,CAAW,CAAC,EAE1B,IAAM,EAAQ,IAAoB,MAsClC,OAnCA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAChB,OAGF,IAAM,EAAK,EAAW,QAEtB,GAAI,CAAC,EACH,OAGF,IAAI,EAAS,EAGP,EAAgB,GAAkB,CACtC,EAAS,EAAE,QAAQ,GAAG,OACxB,EACM,EAAc,GAAkB,CACpC,IAAM,EAAK,EAAE,eAAe,GAAG,QAAU,GACtB,EAAQ,EAAK,GAAY,EAAK,MAG/C,IAAU,CAEd,EAKA,OAHA,EAAG,iBAAiB,aAAc,EAAc,CAAE,QAAS,EAAK,CAAC,EACjE,EAAG,iBAAiB,WAAY,EAAY,CAAE,QAAS,EAAK,CAAC,MAEhD,CACX,EAAG,oBAAoB,aAAc,CAAY,EACjD,EAAG,oBAAoB,WAAY,CAAU,CAC/C,CACF,EAAG,CAAC,EAAU,EAAa,EAAO,CAAO,CAAC,GAGxC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,OAAS,EAAA,QAAO,KAClC,CAAC,GAAY,EAAY,EAAA,QAAO,UAAY,KAC5C,EAAQ,EAAA,QAAO,IAAM,EAAA,QAAO,MAC5B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,kBAAmB,EAAc,GAAG,CAAM,EACnD,GAAI,WAXN,CAcG,IACC,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAc,EAAA,QAAO,gBAAkB,IAAI,EACrE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAY,OACZ,QAAS,CACV,CAAA,GAIH,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAc,EAAA,QAAO,YAAc,EAAA,QAAO,cAAiB,IACzE,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,GAAY,CAAC,WAEzB,CACE,CAAA,GAGL,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,CAAa,CAAA,CAC3C,GAET"}

package/dist/components/OverlaySplitView/OverlaySplitView.d.ts

@@ -62,4 +62,4 @@ export interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElemen
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html
  */
-export declare function OverlaySplitView({ sidebar, content, showSidebar, onClose, collapsed, sidebarPosition, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: OverlaySplitViewProps): import("react/jsx-runtime").JSX.Element;
+export declare const OverlaySplitView: ({ sidebar, content, showSidebar, onClose, collapsed, sidebarPosition, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: OverlaySplitViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OverlaySplitView/OverlaySplitView.js

@@ -3,7 +3,7 @@ import t from "./OverlaySplitView.module.css.js";
 import { useEffect as n, useRef as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/OverlaySplitView/OverlaySplitView.tsx
-function o({ sidebar: o, content: s, showSidebar: c = !1, onClose: l, collapsed: u = !1, sidebarPosition: d = "start", minSidebarWidth: f = 180, maxSidebarWidth: p = 280, sidebarWidthFraction: m = .25, className: h, style: g, ..._ }) {
+var o = ({ sidebar: o, content: s, showSidebar: c = !1, onClose: l, collapsed: u = !1, sidebarPosition: d = "start", minSidebarWidth: f = 180, maxSidebarWidth: p = 280, sidebarWidthFraction: m = .25, className: h, style: g, ..._ }) => {
 	let { isNarrow: v } = e(), y = r(null), b = `clamp(${f}px, ${m * 100}%, ${p}px)`;
 	n(() => {
 		if (!v || !c) return;
@@ -68,7 +68,7 @@ function o({ sidebar: o, content: s, showSidebar: c = !1, onClose: l, collapsed:
 			})
 		]
 	});
-}
+};
 //#endregion
 export { o as OverlaySplitView };
 

package/dist/components/OverlaySplitView/OverlaySplitView.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './OverlaySplitView.module.css';\n\nexport interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: 'start' | 'end';\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport function OverlaySplitView({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = 'start',\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handler);\n\n    return () => document.removeEventListener('keydown', handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === 'end';\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const el = sidebarRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => {\n      startX = e.touches[0].clientX;\n    };\n    const onTouchEnd = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n\n      if (closeSwipe) {\n        onClose?.();\n      }\n    };\n\n    el.addEventListener('touchstart', onTouchStart, { passive: true });\n    el.addEventListener('touchend', onTouchEnd, { passive: true });\n\n    return () => {\n      el.removeEventListener('touchstart', onTouchStart);\n      el.removeEventListener('touchend', onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow ? (showSidebar ? styles.sidebarOpen : styles.sidebarClosed) : null,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>{content}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsEA,SAAgB,EAAiB,EAC/B,YACA,YACA,iBAAc,IACd,YACA,eAAY,IACZ,qBAAkB,SAClB,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACqB;CACxB,IAAM,EAAE,gBAAa,GAAe,EAC9B,IAAa,EAAuB,KAAK,EAEzC,IAAe,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAoBpG,CAjBA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAChB;EAGF,IAAM,KAAW,MAAqB;AACpC,GAAI,EAAE,QAAQ,YACZ,KAAW;;AAMf,SAFA,SAAS,iBAAiB,WAAW,EAAQ,QAEhC,SAAS,oBAAoB,WAAW,EAAQ;IAC5D;EAAC;EAAU;EAAa;EAAQ,CAAC,EAGpC,QAAgB;AACV,GAAC,KAAY,CAAC,MAIJ,EAAW,SAAS,cAChC,6EACD,GAEM,OAAO;IACb,CAAC,GAAU,EAAY,CAAC;CAE3B,IAAM,IAAQ,MAAoB;AAsClC,QAnCA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAChB;EAGF,IAAM,IAAK,EAAW;AAEtB,MAAI,CAAC,EACH;EAGF,IAAI,IAAS,GAGP,KAAgB,MAAkB;AACtC,OAAS,EAAE,QAAQ,GAAG;KAElB,KAAc,MAAkB;GACpC,IAAM,IAAK,EAAE,eAAe,GAAG,UAAU;AAGzC,IAFmB,IAAQ,IAAK,KAAY,IAAK,QAG/C,KAAW;;AAOf,SAHA,EAAG,iBAAiB,cAAc,GAAc,EAAE,SAAS,IAAM,CAAC,EAClE,EAAG,iBAAiB,YAAY,GAAY,EAAE,SAAS,IAAM,CAAC,QAEjD;AAEX,GADA,EAAG,oBAAoB,cAAc,EAAa,EAClD,EAAG,oBAAoB,YAAY,EAAW;;IAE/C;EAAC;EAAU;EAAa;EAAO;EAAQ,CAAC,EAGzC,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAW,EAAO,SAAS,EAAO;GAClC,CAAC,KAAY,IAAY,EAAO,YAAY;GAC5C,IAAQ,EAAO,MAAM,EAAO;GAC5B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YAXN;GAcG,KACC,kBAAC,OAAD;IACE,WAAW,CAAC,EAAO,UAAU,IAAc,EAAO,kBAAkB,KAAK,CACtE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAY;IACZ,SAAS;IACT,CAAA;GAIJ,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,CACT,EAAO,SACP,IAAY,IAAc,EAAO,cAAc,EAAO,gBAAiB,KACxE,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAc,CAAA;GAC3C"}
+{"version":3,"file":"OverlaySplitView.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport styles from './OverlaySplitView.module.css';\n\nexport interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {\n  /**\n   * The sidebar pane.\n   * On wide screens it sits beside the content.\n   * On narrow screens it slides over the content as an overlay.\n   */\n  sidebar: ReactNode;\n  /** The main content pane — always visible. */\n  content: ReactNode;\n  /**\n   * Whether the sidebar is shown.\n   * - Wide screens: always both visible; this prop is ignored.\n   * - Narrow screens (≤ 400 px): controls whether the overlay is open.\n   */\n  showSidebar?: boolean;\n  /**\n   * Called when the user clicks the backdrop (narrow screens only).\n   * Use this to set `showSidebar` to false.\n   */\n  onClose?: () => void;\n  /**\n   * When `true`, collapses the sidebar to icon-only width on wide screens.\n   * Has no effect in narrow (overlay) mode.\n   * Pair with `collapsed` on the inner `<Sidebar>` component to hide labels.\n   */\n  collapsed?: boolean;\n  /**\n   * Which side the sidebar appears on. Defaults to `\"start\"` (left in LTR).\n   */\n  sidebarPosition?: 'start' | 'end';\n  /**\n   * Minimum sidebar width in px. Defaults to `180`.\n   */\n  minSidebarWidth?: number;\n  /**\n   * Maximum sidebar width in px. Defaults to `280`.\n   */\n  maxSidebarWidth?: number;\n  /**\n   * Fraction of total width given to the sidebar. Defaults to `0.25`.\n   */\n  sidebarWidthFraction?: number;\n}\n\n/**\n * Sidebar + content layout where the sidebar becomes a slide-over overlay\n * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.\n *\n * On **wide** screens (> 400 px) sidebar and content are side-by-side.\n * On **narrow** screens (≤ 400 px) the content fills the full width and\n * the sidebar slides in as an overlay when `showSidebar` is true,\n * with a translucent backdrop behind it.\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <OverlaySplitView\n *   showSidebar={open}\n *   onClose={() => setOpen(false)}\n *   sidebar={<Nav />}\n *   content={<MainContent onMenuClick={() => setOpen(true)} />}\n * />\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html\n */\nexport const OverlaySplitView = ({\n  sidebar,\n  content,\n  showSidebar = false,\n  onClose,\n  collapsed = false,\n  sidebarPosition = 'start',\n  minSidebarWidth = 180,\n  maxSidebarWidth = 280,\n  sidebarWidthFraction = 0.25,\n  className,\n  style,\n  ...props\n}: OverlaySplitViewProps) => {\n  const { isNarrow } = useBreakpoint();\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const sidebarWidth = `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handler);\n\n    return () => document.removeEventListener('keydown', handler);\n  }, [isNarrow, showSidebar, onClose]);\n\n  // Trap focus inside sidebar when open in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n\n    first?.focus();\n  }, [isNarrow, showSidebar]);\n\n  const isEnd = sidebarPosition === 'end';\n\n  // Swipe-to-dismiss: drag the sidebar in the close direction to trigger onClose\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) {\n      return;\n    }\n\n    const el = sidebarRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => {\n      startX = e.touches[0].clientX;\n    };\n    const onTouchEnd = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n\n      if (closeSwipe) {\n        onClose?.();\n      }\n    };\n\n    el.addEventListener('touchstart', onTouchStart, { passive: true });\n    el.addEventListener('touchend', onTouchEnd, { passive: true });\n\n    return () => {\n      el.removeEventListener('touchstart', onTouchStart);\n      el.removeEventListener('touchend', onTouchEnd);\n    };\n  }, [isNarrow, showSidebar, isEnd, onClose]);\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.narrow : styles.wide,\n        !isNarrow && collapsed ? styles.collapsed : null,\n        isEnd ? styles.end : styles.start,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--sidebar-width': sidebarWidth, ...style } as CSSProperties}\n      {...props}\n    >\n      {/* Backdrop — narrow mode only */}\n      {isNarrow && (\n        <div\n          className={[styles.backdrop, showSidebar ? styles.backdropVisible : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n          onClick={onClose}\n        />\n      )}\n\n      {/* Sidebar */}\n      <div\n        ref={sidebarRef}\n        className={[\n          styles.sidebar,\n          isNarrow ? (showSidebar ? styles.sidebarOpen : styles.sidebarClosed) : null,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        aria-hidden={isNarrow && !showSidebar}\n      >\n        {sidebar}\n      </div>\n\n      {/* Content */}\n      <div className={styles.content}>{content}</div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAsEA,IAAa,KAAoB,EAC/B,YACA,YACA,iBAAc,IACd,YACA,eAAY,IACZ,qBAAkB,SAClB,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,QACwB;CAC3B,IAAM,EAAE,gBAAa,EAAc,GAC7B,IAAa,EAAuB,IAAI,GAExC,IAAe,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;CAoBpG,AAjBA,QAAgB;EACd,IAAI,CAAC,KAAY,CAAC,GAChB;EAGF,IAAM,KAAW,MAAqB;GACpC,AAAI,EAAE,QAAQ,YACZ,IAAU;EAEd;EAIA,OAFA,SAAS,iBAAiB,WAAW,CAAO,SAE/B,SAAS,oBAAoB,WAAW,CAAO;CAC9D,GAAG;EAAC;EAAU;EAAa;CAAO,CAAC,GAGnC,QAAgB;EACV,CAAC,KAAY,CAAC,MAIJ,EAAW,SAAS,cAChC,4EACF,IAEO,MAAM;CACf,GAAG,CAAC,GAAU,CAAW,CAAC;CAE1B,IAAM,IAAQ,MAAoB;CAsClC,OAnCA,QAAgB;EACd,IAAI,CAAC,KAAY,CAAC,GAChB;EAGF,IAAM,IAAK,EAAW;EAEtB,IAAI,CAAC,GACH;EAGF,IAAI,IAAS,GAGP,KAAgB,MAAkB;GACtC,IAAS,EAAE,QAAQ,GAAG;EACxB,GACM,KAAc,MAAkB;GACpC,IAAM,IAAK,EAAE,eAAe,GAAG,UAAU;GAGzC,CAFmB,IAAQ,IAAK,KAAY,IAAK,QAG/C,IAAU;EAEd;EAKA,OAHA,EAAG,iBAAiB,cAAc,GAAc,EAAE,SAAS,GAAK,CAAC,GACjE,EAAG,iBAAiB,YAAY,GAAY,EAAE,SAAS,GAAK,CAAC,SAEhD;GAEX,AADA,EAAG,oBAAoB,cAAc,CAAY,GACjD,EAAG,oBAAoB,YAAY,CAAU;EAC/C;CACF,GAAG;EAAC;EAAU;EAAa;EAAO;CAAO,CAAC,GAGxC,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAW,EAAO,SAAS,EAAO;GAClC,CAAC,KAAY,IAAY,EAAO,YAAY;GAC5C,IAAQ,EAAO,MAAM,EAAO;GAC5B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,OAAO;GAAE,mBAAmB;GAAc,GAAG;EAAM;EACnD,GAAI;YAXN;GAcG,KACC,kBAAC,OAAD;IACE,WAAW,CAAC,EAAO,UAAU,IAAc,EAAO,kBAAkB,IAAI,EACrE,OAAO,OAAO,EACd,KAAK,GAAG;IACX,eAAY;IACZ,SAAS;GACV,CAAA;GAIH,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,CACT,EAAO,SACP,IAAY,IAAc,EAAO,cAAc,EAAO,gBAAiB,IACzE,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,eAAa,KAAY,CAAC;cAEzB;GACE,CAAA;GAGL,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;GAAa,CAAA;EAC3C;;AAET"}