@gnome-ui/react 1.9.0 → 1.9.1

package/dist/components/Clamp/Clamp.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ClampProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Maximum content width in pixels.
+     * The element shrinks freely below this value.
+     * Defaults to `600` — the Adwaita recommended narrow-content width.
+     */
+    maximumSize?: number;
+    /**
+     * Fractional width (0–1) of the viewport to use when the viewport is
+     * narrower than `maximumSize`. Useful for keeping a comfortable margin
+     * on medium-width screens. Set to `1` (default) to always fill the width.
+     */
+    tighteningThreshold?: number;
+    children?: ReactNode;
+}
+/**
+ * Constrains its child to a maximum width while allowing it to shrink freely,
+ * mirroring the Adwaita `AdwClamp` widget.
+ *
+ * Use this to keep readable line lengths and comfortable reading widths on
+ * large screens while still filling the available space on narrow screens.
+ *
+ * @example
+ * // Settings page — content never wider than 600 px
+ * <Clamp maximumSize={600}>
+ *   <BoxedList>…</BoxedList>
+ * </Clamp>
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html
+ */
+export declare function Clamp({ maximumSize, children, className, style, ...props }: ClampProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Clamp } from './Clamp';
+export type { ClampProps } from './Clamp';

package/dist/components/ComboRow/ComboRow.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ComboRowOption<V extends string = string> {
+    value: V;
+    label: string;
+    disabled?: boolean;
+}
+export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** The list of selectable options. */
+    options: ComboRowOption<V>[];
+    /** The currently selected value (controlled). */
+    value?: V;
+    /** Initial value when uncontrolled. */
+    defaultValue?: V;
+    /** Called when the user selects an option. */
+    onValueChange?: (value: V) => void;
+    /** Disables the row. */
+    disabled?: boolean;
+}
+/**
+ * Settings row with an inline combo selector at the trailing edge.
+ *
+ * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown
+ * for choosing among a set of options. The dropdown opens inline in the row
+ * and follows the same keyboard patterns as the standalone `Dropdown`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html
+ */
+export declare function ComboRow<V extends string = string>({ title, subtitle, leading, options, value: controlledValue, defaultValue, onValueChange, disabled, className, ...props }: ComboRowProps<V>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ComboRow } from './ComboRow';
+export type { ComboRowProps, ComboRowOption } from './ComboRow';

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,119 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AlertDialogResponseVariant = "default" | "suggested" | "destructive";
+export interface AlertDialogResponse {
+    /**
+     * Unique identifier returned via `onResponse`.
+     * Use `"cancel"` by convention for the dismissive action.
+     */
+    id: string;
+    /** Button label. */
+    label: string;
+    /** Visual emphasis. Defaults to `"default"`. */
+    variant?: AlertDialogResponseVariant;
+    /** Disables the button. */
+    disabled?: boolean;
+}
+export interface AboutDialogLink {
+    label: string;
+    url: string;
+}
+export interface DialogButton {
+    /** Button label. */
+    label: string;
+    /** Visual variant. Defaults to `"default"`. */
+    variant?: "default" | "suggested" | "destructive";
+    /** Called when the button is clicked. */
+    onClick: () => void;
+    /** Whether the button is disabled. */
+    disabled?: boolean;
+}
+export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Dialog heading. */
+    title?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Action buttons (standard dialog API). */
+    buttons?: DialogButton[];
+    /** Called on Escape or backdrop click. */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+    /**
+     * ARIA role. Use `"alertdialog"` for confirmations and destructive warnings —
+     * screen readers announce it immediately. Defaults to `"dialog"`.
+     *
+     * When using `role="alertdialog"`, prefer the `responses`/`onResponse` API
+     * over `buttons`/`onClick` for semantic clarity.
+     */
+    role?: "dialog" | "alertdialog";
+    /**
+     * Response buttons (AlertDialog API). Alternative to `buttons` — each
+     * response has a semantic `id` returned via `onResponse`.
+     * Escape and backdrop click fire the first non-destructive response.
+     */
+    responses?: AlertDialogResponse[];
+    /**
+     * Called with the `id` of the response button clicked.
+     * Required when `responses` is provided.
+     */
+    onResponse?: (id: string) => void;
+    /**
+     * Set to `"about"` to render as an application info dialog.
+     * When `variant="about"`, `title`/`buttons`/`children` are ignored in favour
+     * of the about-specific props below.
+     */
+    variant?: "about";
+    /** Application name (required when `variant="about"`). */
+    applicationName?: string;
+    /** Icon rendered above the app name. */
+    applicationIcon?: ReactNode;
+    /** Version string (e.g. `"1.0.0"`). */
+    version?: string;
+    /** One-sentence description. */
+    comments?: string;
+    /** Developer or organisation name. */
+    developerName?: string;
+    /** Application website URL. */
+    website?: string;
+    /** Label for the website link. Defaults to the URL. */
+    websiteLabel?: string;
+    /** Developer names shown in the Credits tab. */
+    developers?: string[];
+    /** Designer names shown in the Credits tab. */
+    designers?: string[];
+    /** Artist names shown in the Credits tab. */
+    artists?: string[];
+    /** Copyright notice (e.g. `"© 2024 Jane Smith"`). */
+    copyright?: string;
+    /** SPDX identifier or short name (e.g. `"GPL-3.0"`). */
+    licenseType?: string;
+    /** Full license text shown in the Legal tab. */
+    licenseText?: string;
+    /** Extra links shown in the Details section. */
+    links?: AboutDialogLink[];
+}
+/**
+ * Blocking modal dialog following the Adwaita pattern.
+ *
+ * Three modes in one component:
+ *
+ * **Standard** — `title` + `children` + `buttons[]`.
+ *
+ * **Alert** — add `role="alertdialog"` + `responses[]` + `onResponse`.
+ * Uses a semantic response id instead of per-button `onClick`.
+ * Escape / backdrop fire the first non-destructive response.
+ * Mirrors `AdwAlertDialog`.
+ *
+ * **About** — add `variant="about"` + `applicationName` + info props.
+ * Renders app icon, version, details/credits/legal tabs.
+ * Mirrors `AdwAboutDialog`.
+ *
+ * All modes share the same portal, focus-trap, and card/backdrop styles.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html
+ */
+export declare function Dialog({ open, title, children, buttons, onClose, closeOnBackdrop, role, responses, onResponse, variant, applicationName, applicationIcon, version, comments, developerName, website, websiteLabel, developers, designers, artists, copyright, licenseType, licenseText, links, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+export { Dialog } from './Dialog';
+export type { DialogProps, DialogButton, AlertDialogResponse, AlertDialogResponseVariant, AboutDialogLink, } from './Dialog';

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from 'react';
+export interface DropdownOption<V extends string = string> {
+    /** The value submitted / returned on selection. */
+    value: V;
+    /** Display label shown in the list and trigger. */
+    label: string;
+    /** Optional descriptive text shown below the label. */
+    description?: string;
+    /** Whether the option is selectable. */
+    disabled?: boolean;
+}
+export interface DropdownProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** The list of selectable options. */
+    options: DropdownOption<V>[];
+    /** The currently selected value. */
+    value?: V;
+    /** Called when the user selects an option. */
+    onChange?: (value: V) => void;
+    /** Placeholder shown when no option is selected. */
+    placeholder?: string;
+    /** Accessible label for the control (used as `aria-label`). */
+    "aria-label"?: string;
+    /** Disables the entire control. */
+    disabled?: boolean;
+}
+/**
+ * Expandable option list following the Adwaita combo-row / drop-down pattern.
+ *
+ * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.
+ * - Uses `role="combobox"` + `role="listbox"` + `role="option"` ARIA pattern.
+ * - Closes when clicking outside or pressing Escape.
+ * - The list flips above the trigger when there is not enough space below.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html
+ */
+export declare function Dropdown<V extends string = string>({ options, value, onChange, placeholder, disabled, className, ...props }: DropdownProps<V>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';

package/dist/components/EntryRow/EntryRow.d.ts

@@ -0,0 +1,24 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Acts as a floating label: shown small above the input when the field has
+     * content or focus, shown as a placeholder when empty and unfocused.
+     */
+    title: string;
+    /** Called when the input value changes. */
+    onValueChange?: (value: string) => void;
+    /** Icon or widget placed at the leading edge. */
+    leading?: ReactNode;
+    /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */
+    trailing?: ReactNode;
+}
+/**
+ * Row with an inline text entry field.
+ *
+ * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the
+ * field is focused or has content, acting as a placeholder when empty and
+ * unfocused. Use inside a `BoxedList` for inline settings that require text input.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html
+ */
+export declare function EntryRow({ title, value: controlledValue, defaultValue, onValueChange, leading, trailing, disabled, className, id: externalId, onChange, ...props }: EntryRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { EntryRow } from './EntryRow';
+export type { EntryRowProps } from './EntryRow';

package/dist/components/ExpanderRow/ExpanderRow.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge of the header row. */
+    leading?: ReactNode;
+    /**
+     * Widget placed at the trailing edge of the header row, before the chevron
+     * (e.g. a value label or a Switch). Stop event propagation inside it so the
+     * row's toggle isn't triggered.
+     */
+    trailing?: ReactNode;
+    /**
+     * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any
+     * row-shaped element — separators are inserted automatically.
+     */
+    children?: ReactNode;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled. Defaults to `false`. */
+    defaultExpanded?: boolean;
+    /** Called when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+}
+/**
+ * Collapsible `ActionRow` that reveals nested rows on activation.
+ *
+ * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing
+ * child rows. Supports both controlled and uncontrolled expand state.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html
+ */
+export declare function ExpanderRow({ title, subtitle, leading, trailing, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, ...props }: ExpanderRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ExpanderRow } from './ExpanderRow';
+export type { ExpanderRowProps } from './ExpanderRow';

package/dist/components/Frame/Frame.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FrameProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * Simple bordered surface with border-radius but no background fill.
+ *
+ * Use to visually delimit a region without adding the elevated appearance
+ * of a `Card`. Mirrors `GtkFrame` default styling and the libadwaita
+ * `.frame` style class.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class
+ */
+export declare function Frame({ children, className, ...props }: FrameProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Frame } from './Frame';
+export type { FrameProps } from './Frame';

package/dist/components/HeaderBar/HeaderBar.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface HeaderBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Centered title. Pass a string or a custom element. */
+    title?: ReactNode;
+    /** Controls placed at the leading (left) edge — back button, menu, etc. */
+    start?: ReactNode;
+    /** Controls placed at the trailing (right) edge — actions, overflow menu, etc. */
+    end?: ReactNode;
+    /**
+     * When true the header bar blends into the window chrome
+     * (no bottom border, slightly transparent background).
+     * Use for the topmost bar of a full-window layout.
+     */
+    flat?: boolean;
+}
+/**
+ * Title bar with centered title and leading/trailing action slots.
+ *
+ * Mirrors the Adwaita `AdwHeaderBar` pattern. Use `flat` buttons
+ * (`<Button variant="flat">`) inside the header bar per GNOME HIG.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.HeaderBar.html
+ * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html
+ */
+export declare function HeaderBar({ title, start, end, flat, className, ...props }: HeaderBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { HeaderBar } from './HeaderBar';
+export type { HeaderBarProps } from './HeaderBar';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,30 @@
+import { SVGAttributes } from 'react';
+import { IconDefinition } from '@gnome-ui/icons';
+export type IconSize = "sm" | "md" | "lg";
+export interface IconProps extends SVGAttributes<SVGSVGElement> {
+    /** Icon definition imported from `@gnome-ui/icons`. */
+    icon: IconDefinition;
+    /**
+     * Rendered size.
+     * - `sm` — 12 px
+     * - `md` — 16 px (default)
+     * - `lg` — 20 px
+     *
+     * Override with `width`/`height` for non-standard sizes.
+     */
+    size?: IconSize;
+    /** Accessible label. Omit for decorative icons — they are hidden from screen readers. */
+    label?: string;
+}
+/**
+ * Renders an `@gnome-ui/icons` definition as an inline SVG.
+ *
+ * Uses `currentColor` so the icon inherits the text color of its parent.
+ * Pass `label` only when the icon conveys meaning on its own;
+ * omit it when a sibling text label already describes the action.
+ *
+ * @example
+ * import { Search } from "@gnome-ui/icons";
+ * <Icon icon={Search} label="Search" />
+ */
+export declare function Icon({ icon, size, label, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconSize } from './Icon';

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

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type InlineViewSwitcherVariant = "default" | "flat" | "round";
+interface InlineViewSwitcherContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+}
+export declare function useInlineViewSwitcher(): InlineViewSwitcherContextValue;
+export interface InlineViewSwitcherProps extends HTMLAttributes<HTMLDivElement> {
+    /** Currently active view name. */
+    value: string;
+    /** Called with the new value when a view is selected. */
+    onValueChange: (value: string) => void;
+    /**
+     * Visual style of the switcher.
+     * - `default` — card background with border and shadow (same as `ToggleGroup`).
+     * - `flat`    — no background or border; active indicator only.
+     * - `round`   — pill-shaped container and items.
+     */
+    variant?: InlineViewSwitcherVariant;
+    /** Accessible label for the group. */
+    "aria-label"?: string;
+    children?: ReactNode;
+}
+/**
+ * Compact inline view switcher for placing inside content areas, cards, or
+ * toolbars — wherever `ViewSwitcher` (header-bar sized) would be too heavy.
+ *
+ * Built on `ToggleGroup` internals with `flat` and `round` style variants.
+ * Mirrors `AdwInlineViewSwitcher` (libadwaita 1.7 / GNOME 48).
+ *
+ * Compose with `InlineViewSwitcherItem`. Keyboard: ← / → cycle, Home / End jump.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.InlineViewSwitcher.html
+ */
+export declare function InlineViewSwitcher({ value, onValueChange, variant, "aria-label": ariaLabel, children, className, ...props }: InlineViewSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconDefinition } from '@gnome-ui/icons';
+export interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** String identifier — used as the switcher's `value` when this item is active. */
+    name: string;
+    /** Visible label. */
+    label?: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+}
+/**
+ * Individual view option inside an `InlineViewSwitcher`.
+ *
+ * Can be icon-only, label-only, or icon + label. For icon-only items always
+ * provide an `aria-label` so screen readers can identify the view.
+ */
+export declare function InlineViewSwitcherItem({ name, label, icon, disabled, className, ...props }: InlineViewSwitcherItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { InlineViewSwitcher } from './InlineViewSwitcher';
+export type { InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
+export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';
+export type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';

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

@@ -0,0 +1,18 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * When true the link is treated as external: opens in a new tab,
+     * adds `rel="noopener noreferrer"`, and shows a trailing ↗ icon.
+     */
+    external?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Inline hyperlink following GNOME HIG.
+ *
+ * - Uses the accent colour and shows an underline on hover.
+ * - `external` opens a new tab safely and appends a visual ↗ indicator.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/links.html
+ */
+export declare function Link({ external, children, className, target, rel, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface LinkedGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * Stack children vertically instead of horizontally.
+     * Useful for stacked input or button groups.
+     */
+    vertical?: boolean;
+}
+/**
+ * Renders children as a single visually-connected unit with no gap and
+ * merged borders — the canonical GNOME pattern for button groups and
+ * segmented inputs.
+ *
+ * Mirrors the libadwaita `.linked` style class.
+ *
+ * - First child gets left (or top) border radius.
+ * - Last child gets right (or bottom) border radius.
+ * - Adjacent borders are collapsed to a single pixel.
+ * - Hover and focus bring the active child to the front via `z-index`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#linked-style-class
+ *
+ * @example
+ * <LinkedGroup>
+ *   <Button>Cut</Button>
+ *   <Button>Copy</Button>
+ *   <Button>Paste</Button>
+ * </LinkedGroup>
+ */
+export declare function LinkedGroup({ children, vertical, className, ...props }: LinkedGroupProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode } from 'react';
+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.
+     */
+    sidebar: ReactNode;
+    /**
+     * The detail / content pane (right side on wide screens).
+     * On narrow screens this is the "detail" view shown when `showContent` is true.
+     */
+    content: ReactNode;
+    /**
+     * Controls which pane is visible on narrow screens (≤ 400 px).
+     * - `false` (default) — show the sidebar list.
+     * - `true`            — show the content detail.
+     *
+     * Has no effect on wide screens where both panes are visible simultaneously.
+     */
+    showContent?: boolean;
+    /**
+     * Minimum sidebar width in px. Defaults to `180`.
+     */
+    minSidebarWidth?: number;
+    /**
+     * Maximum sidebar width in px. Defaults to `280`.
+     */
+    maxSidebarWidth?: number;
+    /**
+     * Fraction of total width given to the sidebar (0–1). Defaults to `0.25`.
+     */
+    sidebarWidthFraction?: number;
+}
+/**
+ * Two-pane sidebar + content layout following the Adwaita
+ * `AdwNavigationSplitView` pattern.
+ *
+ * On **wide** screens (> 400 px) both panes are visible side-by-side.
+ * On **narrow** screens (≤ 400 px) only one pane is shown at a time;
+ * use `showContent` to switch between the sidebar list and the detail view.
+ *
+ * The sidebar width is constrained between `minSidebarWidth` and
+ * `maxSidebarWidth`, gravitating toward `sidebarWidthFraction` of the total.
+ *
+ * @example
+ * const [showContent, setShowContent] = useState(false);
+ * <NavigationSplitView
+ *   showContent={showContent}
+ *   sidebar={<MailList onSelect={() => setShowContent(true)} />}
+ *   content={<MailDetail onBack={() => setShowContent(false)} />}
+ * />
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationSplitView.html
+ */
+export declare function NavigationSplitView({ sidebar, content, showContent, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: NavigationSplitViewProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,55 @@
+import { ReactNode, HTMLAttributes } from 'react';
+interface NavigationContextValue {
+    /** Navigate to a page by its `tag`. Pushes onto the stack. */
+    navigate: (tag: string) => void;
+    /** Go back one page. No-op if already at the root. */
+    pop: () => void;
+    /** `true` when there is at least one page to go back to. */
+    canGoBack: boolean;
+    /** Tag of the currently visible page. */
+    currentTag: string;
+    /** Direction of the last transition (`"forward"` or `"back"`). */
+    direction: "forward" | "back";
+}
+/** Access the nearest `NavigationView`'s navigation functions. */
+export declare function useNavigation(): NavigationContextValue;
+export interface NavigationPageProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier used with `navigate()`. */
+    tag: string;
+    /** Page heading shown in a `HeaderBar`-style title bar. */
+    title: string;
+    children?: ReactNode;
+}
+/**
+ * A single page inside a `NavigationView`.
+ * Only visible when its `tag` matches the current page in the stack.
+ */
+export declare function NavigationPage({ tag, title, children, className, ...props }: NavigationPageProps): import("react/jsx-runtime").JSX.Element | null;
+export interface NavigationViewProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tag of the first page to show. */
+    initialPage: string;
+    children?: ReactNode;
+}
+/**
+ * Single-pane push/pop navigation stack.
+ *
+ * Mirrors `AdwNavigationView` — the mobile-first counterpart to
+ * `NavigationSplitView`. Each "screen" is a `NavigationPage` with a unique
+ * `tag`. Use `useNavigation()` inside pages to call `navigate(tag)` and `pop()`.
+ *
+ * @example
+ * ```tsx
+ * <NavigationView initialPage="home">
+ *   <NavigationPage tag="home" title="Home">
+ *     <Button onClick={() => navigate("details")}>Open</Button>
+ *   </NavigationPage>
+ *   <NavigationPage tag="details" title="Details">
+ *     <Button onClick={pop}>Back</Button>
+ *   </NavigationPage>
+ * </NavigationView>
+ * ```
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.NavigationView.html
+ */
+export declare function NavigationView({ initialPage, children, className, ...props }: NavigationViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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