@gnome-ui/react 1.44.0 → 1.45.1

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Link } from './Link';
 export type { LinkProps } from './Link';
+export { Link } from './Link';

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\";\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({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) {\n  const classes = [\n    styles.linked,\n    vertical ? styles.vertical : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mFAiCA,SAAgB,EAAY,CAC1B,WACA,WAAW,GACX,YACA,GAAG,GACgB,CASnB,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UATS,CACd,EAAA,QAAO,OACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,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 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"}

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\";\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({\n  children,\n  vertical = false,\n  className,\n  ...props\n}: LinkedGroupProps) {\n  const classes = [\n    styles.linked,\n    vertical ? styles.vertical : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAiCA,SAAgB,EAAY,EAC1B,aACA,cAAW,IACX,cACA,GAAG,KACgB;AASnB,QACE,kBAAC,OAAD;EAAK,WATS;GACd,EAAO;GACP,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,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 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"}

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

@@ -1,2 +1,2 @@
-var e={linked:`_linked_1tser_3`,vertical:`_vertical_1tser_9`};exports.default=e;
+var e={linked:`_linked_1uy8a_3`,vertical:`_vertical_1uy8a_9`};exports.default=e;
 //# sourceMappingURL=LinkedGroup.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.module.css.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0 !important;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-top-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"LinkedGroup.module.css.cjs","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-bottom-left-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-top-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 var e = {
-	linked: "_linked_1tser_3",
-	vertical: "_vertical_1tser_9"
+	linked: "_linked_1uy8a_3",
+	vertical: "_vertical_1uy8a_9"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"LinkedGroup.module.css.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0 !important;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md) !important;\n  border-top-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md) !important;\n  border-bottom-right-radius: var(--gnome-radius-md) !important;\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"LinkedGroup.module.css.js","names":[],"sources":["../../../src/components/LinkedGroup/LinkedGroup.module.css"],"sourcesContent":["/* ─── Container ─────────────────────────────────────────────────────────────── */\n\n.linked {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.vertical {\n  flex-direction: column;\n}\n\n/* ─── Strip inner border-radius from all children ───────────────────────────── */\n\n.linked > :global(*) {\n  border-radius: 0;\n  flex-shrink: 0;\n}\n\n/* ─── Collapse shared borders (horizontal) ──────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:not(:first-child)) {\n  margin-left: -1px;\n}\n\n/* ─── Collapse shared borders (vertical) ───────────────────────────────────── */\n\n.linked.vertical > :global(*:not(:first-child)) {\n  margin-top: -1px;\n}\n\n/* ─── Restore radius — first child ─────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-bottom-left-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:first-child) {\n  border-top-left-radius: var(--gnome-radius-md);\n  border-top-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Restore radius — last child ──────────────────────────────────────────── */\n\n.linked:not(.vertical) > :global(*:last-child) {\n  border-top-right-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n.linked.vertical > :global(*:last-child) {\n  border-bottom-left-radius: var(--gnome-radius-md);\n  border-bottom-right-radius: var(--gnome-radius-md);\n}\n\n/* ─── Bring hovered / focused child to the front so its border shows ────────── */\n\n.linked > :global(*:hover),\n.linked > :global(*:focus-visible) {\n  position: relative;\n  z-index: 1;\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { LinkedGroup } from './LinkedGroup';
 export type { LinkedGroupProps } from './LinkedGroup';
+export { LinkedGroup } from './LinkedGroup';

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./NavigationSplitView.module.css\";\n\nexport interface NavigationSplitViewProps\n  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 =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.collapsed : styles.expanded,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.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":"sIA2DA,SAAgB,EAAoB,CAClC,UACA,UACA,cAAc,GACd,kBAAkB,IAClB,kBAAkB,IAClB,uBAAuB,IACvB,YACA,QACA,GAAG,GACwB,CAC3B,GAAM,CAAE,YAAa,EAAA,eAAe,CAG9B,EACJ,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,KAEjF,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,UAAY,EAAA,QAAO,SACrC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CAAE,kBAAmB,EAAc,GAAG,EAAO,CACpD,GAAI,WATN,EAYE,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 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"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
+export interface NavigationSplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
      * The sidebar / list pane (left side on wide screens).
      * On narrow screens this is the "list" view shown when `showContent` is false.

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./NavigationSplitView.module.css\";\n\nexport interface NavigationSplitViewProps\n  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 =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  return (\n    <div\n      className={[\n        styles.root,\n        isNarrow ? styles.collapsed : styles.expanded,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--sidebar-width\": sidebarWidth, ...style } as React.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":";;;;AA2DA,SAAgB,EAAoB,EAClC,YACA,YACA,iBAAc,IACd,qBAAkB,KAClB,qBAAkB,KAClB,0BAAuB,KACvB,cACA,UACA,GAAG,KACwB;CAC3B,IAAM,EAAE,gBAAa,GAAe,EAG9B,IACJ,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAEjF,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAW,EAAO,YAAY,EAAO;GACrC;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,OAAO;GAAE,mBAAmB;GAAc,GAAG;GAAO;EACpD,GAAI;YATN;GAYE,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 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"}

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

@@ -1,2 +1,2 @@
-export { NavigationSplitView } from './NavigationSplitView';
 export type { NavigationSplitViewProps } from './NavigationSplitView';
+export { NavigationSplitView } from './NavigationSplitView';

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\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. */\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({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n  if (currentTag !== tag) return null;\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) return;\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\n        className={[styles.view, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":"yGAwBA,IAAM,GAAA,EAAA,EAAA,eAA0D,CAC9D,aAAgB,GAChB,QAAW,GACX,UAAW,GACX,WAAY,GACZ,UAAW,UACZ,CAAC,CAGF,SAAgB,GAAgB,CAC9B,OAAA,EAAA,EAAA,YAAkB,EAAkB,CAiBtC,SAAgB,EAAe,CAC7B,MACA,QACA,WACA,YACA,GAAG,GACmB,CACtB,GAAM,CAAE,aAAY,cAAA,EAAA,EAAA,YAAyB,EAAkB,CAG/D,OAFI,IAAe,GAGjB,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,GAjBuB,KAkDjC,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,CAazE,OACE,EAAA,EAAA,KAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,SAZrB,GAAgB,CAChC,EAAa,UAAU,CACvB,EAAU,GAAM,CAAC,GAAG,EAAG,EAAI,CAAC,EAUmB,QAP/B,CACZ,EAAM,QAAU,IACpB,EAAa,OAAO,CACpB,EAAU,GAAM,EAAE,MAAM,EAAG,GAAG,CAAC,GAIqB,YAAW,aAAY,YAAW,WACpF,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC7D,GAAI,EAEH,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 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"}

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

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 interface NavigationContextValue {
     /** Navigate to a page by its `tag`. Pushes onto the stack. */
     navigate: (tag: string) => void;
@@ -9,7 +9,7 @@ interface NavigationContextValue {
     /** Tag of the currently visible page. */
     currentTag: string;
     /** Direction of the last transition (`"forward"` or `"back"`). */
-    direction: "forward" | "back";
+    direction: 'forward' | 'back';
 }
 /** Access the nearest `NavigationView`'s navigation functions. */
 export declare function useNavigation(): NavigationContextValue;

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\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. */\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({\n  tag,\n  title,\n  children,\n  className,\n  ...props\n}: NavigationPageProps) {\n  const { currentTag, direction } = useContext(NavigationContext);\n  if (currentTag !== tag) return null;\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) return;\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\n        className={[styles.view, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {children}\n      </div>\n    </NavigationContext.Provider>\n  );\n}\n"],"mappings":";;;;AAwBA,IAAM,IAAoB,EAAsC;CAC9D,gBAAgB;CAChB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ,CAAC;AAGF,SAAgB,IAAgB;AAC9B,QAAO,EAAW,EAAkB;;AAiBtC,SAAgB,EAAe,EAC7B,QACA,UACA,aACA,cACA,GAAG,KACmB;CACtB,IAAM,EAAE,eAAY,iBAAc,EAAW,EAAkB;AAG/D,QAFI,MAAe,IAGjB,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;MAjBuB;;AAkDjC,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;AAazE,QACE,kBAAC,EAAkB,UAAnB;EAA4B,OAAO;GAAE,WAZrB,MAAgB;AAEhC,IADA,EAAa,UAAU,EACvB,GAAU,MAAM,CAAC,GAAG,GAAG,EAAI,CAAC;;GAUmB,WAP/B;AACZ,MAAM,UAAU,MACpB,EAAa,OAAO,EACpB,GAAU,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC;;GAIqB;GAAW;GAAY;GAAW;YACpF,kBAAC,OAAD;GACE,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC7D,GAAI;GAEH;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 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"}

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

@@ -1,2 +1,2 @@
-var e=`_view_1r1om_3`,t=`_page_1r1om_12`,n=`_pageHeader_1r1om_23`,r=`_pageTitle_1r1om_34`,i=`_pageContent_1r1om_43`,a=`_enterForward_1r1om_52`,o=`_enterBack_1r1om_56`,s={view:e,page:t,pageHeader:n,pageTitle:r,pageContent:i,enterForward:a,"slide-in-right":`_slide-in-right_1r1om_1`,enterBack:o,"slide-in-left":`_slide-in-left_1r1om_1`};exports.default=s;
+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;
 //# sourceMappingURL=NavigationView.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes slide-in-right {\n  from { transform: translateX(40px); opacity: 0; }\n  to   { transform: translateX(0);    opacity: 1; }\n}\n\n@keyframes slide-in-left {\n  from { transform: translateX(-40px); opacity: 0; }\n  to   { transform: translateX(0);     opacity: 1; }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes slide-in-right {\n  from {\n    transform: translateX(40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slide-in-left {\n  from {\n    transform: translateX(-40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 //#region src/components/NavigationView/NavigationView.module.css
-var e = "_view_1r1om_3", t = "_page_1r1om_12", n = "_pageHeader_1r1om_23", r = "_pageTitle_1r1om_34", i = "_pageContent_1r1om_43", a = "_enterForward_1r1om_52", o = "_enterBack_1r1om_56", s = {
+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_1r1om_1",
+	"slide-in-right": "_slide-in-right_18zs8_1",
 	enterBack: o,
-	"slide-in-left": "_slide-in-left_1r1om_1"
+	"slide-in-left": "_slide-in-left_18zs8_1"
 };
 //#endregion
 export { s as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.module.css.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes slide-in-right {\n  from { transform: translateX(40px); opacity: 0; }\n  to   { transform: translateX(0);    opacity: 1; }\n}\n\n@keyframes slide-in-left {\n  from { transform: translateX(-40px); opacity: 0; }\n  to   { transform: translateX(0);     opacity: 1; }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationView.module.css.js","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes slide-in-right {\n  from {\n    transform: translateX(40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slide-in-left {\n  from {\n    transform: translateX(-40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { NavigationView, NavigationPage, useNavigation } from './NavigationView';
-export type { NavigationViewProps, NavigationPageProps } from './NavigationView';
+export type { NavigationPageProps, NavigationViewProps } from './NavigationView';
+export { NavigationPage, NavigationView, useNavigation } from './NavigationView';

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

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./OverlaySplitView.module.css\";\n\nexport interface OverlaySplitViewProps\n  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 =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handler);\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) return;\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\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) return;\n    const el = sidebarRef.current;\n    if (!el) return;\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => { startX = e.touches[0].clientX; };\n    const onTouchEnd   = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n      if (closeSwipe) onClose?.();\n    };\n\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n    el.addEventListener(\"touchend\",   onTouchEnd,   { passive: true });\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 React.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\n            ? showSidebar ? styles.sidebarOpen : styles.sidebarClosed\n            : 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}>\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"sJAqEA,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,EACJ,SAAS,EAAgB,MAAM,EAAuB,IAAI,KAAK,EAAgB,MAGjF,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAAa,OAC/B,IAAM,EAAW,GAAqB,CAChC,EAAE,MAAQ,UAAU,KAAW,EAGrC,OADA,SAAS,iBAAiB,UAAW,EAAQ,KAChC,SAAS,oBAAoB,UAAW,EAAQ,EAC5D,CAAC,EAAU,EAAa,EAAQ,CAAC,EAGpC,EAAA,EAAA,eAAgB,CACV,CAAC,GAAY,CAAC,IACJ,EAAW,SAAS,cAChC,2EACD,GACM,OAAO,EACb,CAAC,EAAU,EAAY,CAAC,CAE3B,IAAM,EAAQ,IAAoB,MA0BlC,OAvBA,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAY,CAAC,EAAa,OAC/B,IAAM,EAAK,EAAW,QACtB,GAAI,CAAC,EAAI,OAET,IAAI,EAAS,EAGP,EAAgB,GAAkB,CAAE,EAAS,EAAE,QAAQ,GAAG,SAC1D,EAAgB,GAAkB,CACtC,IAAM,EAAK,EAAE,eAAe,GAAG,QAAU,GACtB,EAAQ,EAAK,GAAY,EAAK,MACjC,KAAW,EAK7B,OAFA,EAAG,iBAAiB,aAAc,EAAc,CAAE,QAAS,GAAM,CAAC,CAClE,EAAG,iBAAiB,WAAc,EAAc,CAAE,QAAS,GAAM,CAAC,KACrD,CACX,EAAG,oBAAoB,aAAc,EAAa,CAClD,EAAG,oBAAoB,WAAc,EAAW,GAEjD,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,EACI,EAAc,EAAA,QAAO,YAAc,EAAA,QAAO,cAC1C,KACL,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,GAAY,CAAC,WAEzB,EACG,CAAA,EAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBACpB,EACG,CAAA,CACF"}
+{"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"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
+export interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
      * The sidebar pane.
      * On wide screens it sits beside the content.
@@ -28,7 +28,7 @@ export interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElemen
     /**
      * Which side the sidebar appears on. Defaults to `"start"` (left in LTR).
      */
-    sidebarPosition?: "start" | "end";
+    sidebarPosition?: 'start' | 'end';
     /**
      * Minimum sidebar width in px. Defaults to `180`.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.tsx"],"sourcesContent":["import { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./OverlaySplitView.module.css\";\n\nexport interface OverlaySplitViewProps\n  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 =\n    `clamp(${minSidebarWidth}px, ${sidebarWidthFraction * 100}%, ${maxSidebarWidth}px)`;\n\n  // Close on Escape in overlay mode\n  useEffect(() => {\n    if (!isNarrow || !showSidebar) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose?.();\n    };\n    document.addEventListener(\"keydown\", handler);\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) return;\n    const first = sidebarRef.current?.querySelector<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\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) return;\n    const el = sidebarRef.current;\n    if (!el) return;\n\n    let startX = 0;\n    const THRESHOLD = 80;\n\n    const onTouchStart = (e: TouchEvent) => { startX = e.touches[0].clientX; };\n    const onTouchEnd   = (e: TouchEvent) => {\n      const dx = e.changedTouches[0].clientX - startX;\n      const closeSwipe = isEnd ? dx > THRESHOLD : dx < -THRESHOLD;\n      if (closeSwipe) onClose?.();\n    };\n\n    el.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n    el.addEventListener(\"touchend\",   onTouchEnd,   { passive: true });\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 React.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\n            ? showSidebar ? styles.sidebarOpen : styles.sidebarClosed\n            : 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}>\n        {content}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAqEA,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,IACJ,SAAS,EAAgB,MAAM,IAAuB,IAAI,KAAK,EAAgB;AAajF,CAVA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAAa;EAC/B,IAAM,KAAW,MAAqB;AACpC,GAAI,EAAE,QAAQ,YAAU,KAAW;;AAGrC,SADA,SAAS,iBAAiB,WAAW,EAAQ,QAChC,SAAS,oBAAoB,WAAW,EAAQ;IAC5D;EAAC;EAAU;EAAa;EAAQ,CAAC,EAGpC,QAAgB;AACV,GAAC,KAAY,CAAC,MACJ,EAAW,SAAS,cAChC,6EACD,GACM,OAAO;IACb,CAAC,GAAU,EAAY,CAAC;CAE3B,IAAM,IAAQ,MAAoB;AA0BlC,QAvBA,QAAgB;AACd,MAAI,CAAC,KAAY,CAAC,EAAa;EAC/B,IAAM,IAAK,EAAW;AACtB,MAAI,CAAC,EAAI;EAET,IAAI,IAAS,GAGP,KAAgB,MAAkB;AAAE,OAAS,EAAE,QAAQ,GAAG;KAC1D,KAAgB,MAAkB;GACtC,IAAM,IAAK,EAAE,eAAe,GAAG,UAAU;AAEzC,IADmB,IAAQ,IAAK,KAAY,IAAK,QACjC,KAAW;;AAK7B,SAFA,EAAG,iBAAiB,cAAc,GAAc,EAAE,SAAS,IAAM,CAAC,EAClE,EAAG,iBAAiB,YAAc,GAAc,EAAE,SAAS,IAAM,CAAC,QACrD;AAEX,GADA,EAAG,oBAAoB,cAAc,EAAa,EAClD,EAAG,oBAAoB,YAAc,EAAW;;IAEjD;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,IACI,IAAc,EAAO,cAAc,EAAO,gBAC1C,KACL,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAa,KAAY,CAAC;cAEzB;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB;IACG,CAAA;GACF"}
+{"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"}

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

@@ -1,2 +1,2 @@
-var e={root:`_root_1nzki_3`,wide:`_wide_1nzki_13`,end:`_end_1nzki_17`,sidebar:`_sidebar_1nzki_21`,collapsed:`_collapsed_1nzki_28`,content:`_content_1nzki_32`,narrow:`_narrow_1nzki_40`,start:`_start_1nzki_60`,sidebarOpen:`_sidebarOpen_1nzki_64`,sidebarClosed:`_sidebarClosed_1nzki_65`,backdrop:`_backdrop_1nzki_77`,backdropVisible:`_backdropVisible_1nzki_88`};exports.default=e;
+var e={root:`_root_11ym4_3`,wide:`_wide_11ym4_13`,end:`_end_11ym4_17`,sidebar:`_sidebar_11ym4_21`,collapsed:`_collapsed_11ym4_28`,content:`_content_11ym4_32`,narrow:`_narrow_11ym4_40`,start:`_start_11ym4_60`,sidebarOpen:`_sidebarOpen_11ym4_64`,sidebarClosed:`_sidebarClosed_11ym4_67`,backdrop:`_backdrop_11ym4_85`,backdropVisible:`_backdropVisible_11ym4_96`};exports.default=e;
 //# sourceMappingURL=OverlaySplitView.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.module.css.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-overlay-width, clamp(180px, 75%, 280px)));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"OverlaySplitView.module.css.cjs","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-overlay-width, clamp(180px, 75%, 280px)));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen {\n  transform: translateX(0);\n}\n.narrow.start .sidebarClosed {\n  transform: translateX(-100%);\n}\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen {\n  transform: translateX(0);\n}\n.narrow.end .sidebarClosed {\n  transform: translateX(100%);\n}\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,16 +1,16 @@
 var e = {
-	root: "_root_1nzki_3",
-	wide: "_wide_1nzki_13",
-	end: "_end_1nzki_17",
-	sidebar: "_sidebar_1nzki_21",
-	collapsed: "_collapsed_1nzki_28",
-	content: "_content_1nzki_32",
-	narrow: "_narrow_1nzki_40",
-	start: "_start_1nzki_60",
-	sidebarOpen: "_sidebarOpen_1nzki_64",
-	sidebarClosed: "_sidebarClosed_1nzki_65",
-	backdrop: "_backdrop_1nzki_77",
-	backdropVisible: "_backdropVisible_1nzki_88"
+	root: "_root_11ym4_3",
+	wide: "_wide_11ym4_13",
+	end: "_end_11ym4_17",
+	sidebar: "_sidebar_11ym4_21",
+	collapsed: "_collapsed_11ym4_28",
+	content: "_content_11ym4_32",
+	narrow: "_narrow_11ym4_40",
+	start: "_start_11ym4_60",
+	sidebarOpen: "_sidebarOpen_11ym4_64",
+	sidebarClosed: "_sidebarClosed_11ym4_67",
+	backdrop: "_backdrop_11ym4_85",
+	backdropVisible: "_backdropVisible_11ym4_96"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"OverlaySplitView.module.css.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-overlay-width, clamp(180px, 75%, 280px)));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen  { transform: translateX(0); }\n.narrow.start .sidebarClosed { transform: translateX(-100%); }\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen  { transform: translateX(0); }\n.narrow.end .sidebarClosed { transform: translateX(100%); }\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"OverlaySplitView.module.css.js","names":[],"sources":["../../../src/components/OverlaySplitView/OverlaySplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Wide — side by side ────────────────────────────────────────────────────── */\n\n.wide {\n  flex-direction: row;\n}\n\n.wide.end {\n  flex-direction: row-reverse;\n}\n\n.wide .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n.wide.collapsed .sidebar {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n}\n\n.wide .content {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow — overlay mode ──────────────────────────────────────────────────── */\n\n.narrow .content {\n  width: 100%;\n  overflow-y: auto;\n}\n\n.narrow .sidebar {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-overlay-width, clamp(180px, 75%, 280px)));\n  overflow-y: auto;\n  z-index: 100;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);\n\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Start (left) sidebar */\n.narrow.start .sidebar {\n  left: 0;\n}\n\n.narrow.start .sidebarOpen {\n  transform: translateX(0);\n}\n.narrow.start .sidebarClosed {\n  transform: translateX(-100%);\n}\n\n/* End (right) sidebar */\n.narrow.end .sidebar {\n  right: 0;\n}\n\n.narrow.end .sidebarOpen {\n  transform: translateX(0);\n}\n.narrow.end .sidebarClosed {\n  transform: translateX(100%);\n}\n\n/* ─── Backdrop ───────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  z-index: 99;\n  background-color: rgba(0, 0, 0, 0.35);\n\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n.backdropVisible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .narrow .sidebar {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.5);\n  }\n\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.55);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .narrow .sidebar,\n  .backdrop {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { OverlaySplitView } from './OverlaySplitView';
 export type { OverlaySplitViewProps } from './OverlaySplitView';
+export { OverlaySplitView } from './OverlaySplitView';

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"4MAoBA,SAAgB,EAAiB,CAAE,WAAU,WAAU,GAAG,GAAgC,CACxF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CAEzC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAM,CAAC,EAAE,EAExB,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,KAAM,EAAW,EAAA,YAAc,EAAA,WAC/B,KAAK,KACL,cAAA,GACA,CAAA,CACK,CAAA,CAGX,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,EACA,CAAA,CAAA,CAEL,CAAA"}
+{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"4MAsBA,SAAgB,EAAiB,CAAE,WAAU,WAAU,GAAG,GAAgC,CACxF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CAEzC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAM,CAAC,EAAE,EAExB,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAW,EAAA,YAAc,EAAA,WAAY,KAAK,KAAK,cAAA,GAAc,CAAA,CAClE,CAAA,CAGX,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,EACA,CAAA,CAAA,CAEL,CAAA"}

package/dist/components/PasswordEntryRow/PasswordEntryRow.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { EntryRowProps } from '../EntryRow';
-export interface PasswordEntryRowProps extends Omit<EntryRowProps, "type" | "trailing"> {
+export interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {
     /** Additional trailing widgets placed before the reveal button. */
     trailing?: ReactNode;
 }

package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,EAAiB,EAAE,aAAU,aAAU,GAAG,KAAgC;CACxF,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;AAEd,GADA,EAAE,iBAAiB,EACnB,GAAa,MAAM,CAAC,EAAE;;EAExB,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GACE,MAAM,IAAW,IAAc;GAC/B,MAAK;GACL,eAAA;GACA,CAAA;EACK,CAAA;AAGX,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL,CAAA"}
+{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAsBA,SAAgB,EAAiB,EAAE,aAAU,aAAU,GAAG,KAAgC;CACxF,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;AAEd,GADA,EAAE,iBAAiB,EACnB,GAAa,MAAM,CAAC,EAAE;;EAExB,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GAAM,MAAM,IAAW,IAAc;GAAY,MAAK;GAAK,eAAA;GAAc,CAAA;EAClE,CAAA;AAGX,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={revealButton:`_revealButton_1j8z0_3`};exports.default=e;
+var e={revealButton:`_revealButton_1s4rs_3`};exports.default=e;
 //# sourceMappingURL=PasswordEntryRow.module.css.cjs.map