@gnome-ui/react 1.8.0 → 1.9.1

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

@@ -0,0 +1,59 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface OverlaySplitViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
+    /**
+     * The sidebar pane.
+     * On wide screens it sits beside the content.
+     * On narrow screens it slides over the content as an overlay.
+     */
+    sidebar: ReactNode;
+    /** The main content pane — always visible. */
+    content: ReactNode;
+    /**
+     * Whether the sidebar is shown.
+     * - Wide screens: always both visible; this prop is ignored.
+     * - Narrow screens (≤ 400 px): controls whether the overlay is open.
+     */
+    showSidebar?: boolean;
+    /**
+     * Called when the user clicks the backdrop (narrow screens only).
+     * Use this to set `showSidebar` to false.
+     */
+    onClose?: () => void;
+    /**
+     * Which side the sidebar appears on. Defaults to `"start"` (left in LTR).
+     */
+    sidebarPosition?: "start" | "end";
+    /**
+     * 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. Defaults to `0.25`.
+     */
+    sidebarWidthFraction?: number;
+}
+/**
+ * Sidebar + content layout where the sidebar becomes a slide-over overlay
+ * on narrow screens, mirroring the Adwaita `AdwOverlaySplitView` pattern.
+ *
+ * On **wide** screens (> 400 px) sidebar and content are side-by-side.
+ * On **narrow** screens (≤ 400 px) the content fills the full width and
+ * the sidebar slides in as an overlay when `showSidebar` is true,
+ * with a translucent backdrop behind it.
+ *
+ * @example
+ * const [open, setOpen] = useState(false);
+ * <OverlaySplitView
+ *   showSidebar={open}
+ *   onClose={() => setOpen(false)}
+ *   sidebar={<Nav />}
+ *   content={<MainContent onMenuClick={() => setOpen(true)} />}
+ * />
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.OverlaySplitView.html
+ */
+export declare function OverlaySplitView({ sidebar, content, showSidebar, onClose, sidebarPosition, minSidebarWidth, maxSidebarWidth, sidebarWidthFraction, className, style, ...props }: OverlaySplitViewProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { EntryRowProps } from '../EntryRow';
+export interface PasswordEntryRowProps extends Omit<EntryRowProps, "type" | "trailing"> {
+    /** Additional trailing widgets placed before the reveal button. */
+    trailing?: ReactNode;
+}
+/**
+ * Password entry row with a built-in reveal/conceal toggle.
+ *
+ * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to
+ * `type="password"` and provides a trailing icon button to reveal or conceal
+ * the entered text. Use inside a `BoxedList` for password settings fields.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html
+ */
+export declare function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,50 @@
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+export interface PopoverProps {
+    /**
+     * The rich content rendered inside the popover panel.
+     * Can include interactive elements (buttons, links, forms).
+     */
+    content: ReactNode;
+    /**
+     * Preferred placement relative to the trigger.
+     * Flips automatically when there is not enough viewport space.
+     * Defaults to `"bottom"`.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Whether the popover is open (controlled mode).
+     * Omit to use uncontrolled mode where the trigger toggles it.
+     */
+    open?: boolean;
+    /**
+     * Called when the popover requests to be closed
+     * (Escape key, outside click, or trigger click while open).
+     */
+    onClose?: () => void;
+    /**
+     * Called when open state should change (controlled mode).
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The trigger element. Must be a single React element that can
+     * receive `ref` and click/keyboard event props.
+     */
+    children: ReactElement<HTMLAttributes<HTMLElement>>;
+}
+/**
+ * Floating panel anchored to a trigger element.
+ *
+ * Unlike `Tooltip`, a Popover can contain rich interactive content
+ * (menus, forms, details). It follows the Adwaita `GtkPopover` pattern.
+ *
+ * - Supports both controlled (`open` + `onClose`) and uncontrolled modes.
+ * - Auto-positions with viewport-aware flip.
+ * - Closes on Escape, outside click, or trigger re-click.
+ * - Focus is moved into the panel on open; returns to the trigger on close.
+ * - `aria-haspopup="dialog"` + `aria-expanded` wired to the trigger.
+ * - `role="dialog"` on the panel with `aria-labelledby` when a heading is present.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html
+ */
+export declare function Popover({ content, placement: preferredPlacement, open: controlledOpen, onClose, onOpenChange, children, }: PopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';

package/dist/components/PreferencesDialog/PreferencesDialog.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface PreferencesDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Called when the user requests to close the dialog. */
+    onClose: () => void;
+    /**
+     * `PreferencesPage` children. Each page appears as a sidebar entry.
+     * When only one page is provided the sidebar is hidden.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to show a search bar in the header.
+     * When `true` the user can filter group/row content by typing.
+     * Defaults to `true`.
+     */
+    searchable?: boolean;
+}
+/**
+ * Multi-page settings dialog using `PreferencesPage` tabs.
+ *
+ * Renders a wide modal with an optional sidebar listing pages. Each
+ * `PreferencesPage` child becomes a navigation entry. Supports built-in
+ * search when `searchable` is `true` (the default).
+ *
+ * Mirrors `AdwPreferencesDialog`.
+ *
+ * @example
+ * ```tsx
+ * <PreferencesDialog open={open} onClose={() => setOpen(false)}>
+ *   <PreferencesPage title="General" iconName="preferences-system-symbolic">
+ *     <PreferencesGroup title="Appearance">
+ *       <BoxedList>
+ *         <SwitchRow title="Dark mode" />
+ *       </BoxedList>
+ *     </PreferencesGroup>
+ *   </PreferencesPage>
+ * </PreferencesDialog>
+ * ```
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesDialog.html
+ */
+export declare function PreferencesDialog({ open, onClose, children, searchable, className, ...props }: PreferencesDialogProps): import('react').ReactPortal | null;

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

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

package/dist/components/PreferencesGroup/PreferencesGroup.d.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Group heading. */
+    title?: string;
+    /** Optional description rendered below the title. */
+    description?: string;
+    /** Widget placed at the trailing edge of the title row (e.g. a reset Button). */
+    headerSuffix?: ReactNode;
+    /** `BoxedList` rows or any row-shaped content. */
+    children?: ReactNode;
+}
+/**
+ * Titled section that wraps a `BoxedList` with an optional description.
+ *
+ * Use inside a `PreferencesPage` to group related settings under a named
+ * heading. The group is purely a layout and labelling wrapper — it does not
+ * render the `BoxedList` itself; pass it as `children`.
+ *
+ * Mirrors `AdwPreferencesGroup`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html
+ */
+export declare function PreferencesGroup({ title, description, headerSuffix, children, className, ...props }: PreferencesGroupProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/PreferencesPage/PreferencesPage.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Page title shown in the sidebar / tab of a `PreferencesDialog`.
+     * Required — used as the navigation label.
+     */
+    title: string;
+    /**
+     * Name of a symbolic icon displayed next to the page title in the sidebar.
+     * Pass a valid icon name from the system icon theme (e.g. `"preferences-system-symbolic"`).
+     */
+    iconName?: string;
+    /** `PreferencesGroup` sections. */
+    children?: ReactNode;
+}
+/**
+ * Scrollable page composed of `PreferencesGroup` sections.
+ *
+ * Use as a child of `PreferencesDialog`. Each page appears as a labelled
+ * navigation entry in the dialog sidebar.
+ *
+ * Mirrors `AdwPreferencesPage`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html
+ */
+export declare function PreferencesPage({ title: _title, iconName: _iconName, children, className, ...props }: PreferencesPageProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).
+     * Omit or set to `undefined` for the indeterminate (pulsing) state.
+     */
+    value?: number;
+    /** Accessible label describing what is loading. */
+    "aria-label"?: string;
+    /** Associates the bar with a visible element that labels it. */
+    "aria-labelledby"?: string;
+}
+/**
+ * Determinate and indeterminate progress bar following the Adwaita style.
+ *
+ * - **Determinate** — pass `value` (0–1) to show exact progress.
+ * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.
+ *
+ * Renders as `role="progressbar"` with `aria-valuenow` / `aria-valuemin` /
+ * `aria-valuemax` for screen readers.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
+ */
+export declare function ProgressBar({ value, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes } from 'react';
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Accessible label. Required when no visible `<label>` is associated. */
+    "aria-label"?: string;
+}
+/**
+ * Single-selection radio button following the GNOME HIG and Adwaita style.
+ *
+ * Group radio buttons by giving them the same `name` attribute.
+ * Renders as `<input type="radio">` — natively keyboard-accessible
+ * (arrow keys cycle within the group) and compatible with standard form libraries.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html
+ */
+export declare function RadioButton({ className, ...props }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,34 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /**
+     * Whether the search bar is visible/expanded.
+     * When `false` the bar collapses to zero height and is hidden from AT.
+     */
+    open: boolean;
+    /** Called when the user presses Escape or clicks the clear button with empty value. */
+    onClose?: () => void;
+    /** Called when the clear (×) button is clicked. Also clears the input value. */
+    onClear?: () => void;
+    /**
+     * Content to render below the search bar (e.g. filter chips).
+     * Only visible while `open` is true.
+     */
+    children?: ReactNode;
+    /**
+     * Removes the header-bar background so the bar blends into any surface.
+     * Use inside cards, content areas, or custom containers.
+     * Mirrors the `.inline` style class.
+     */
+    inline?: boolean;
+}
+/**
+ * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.
+ *
+ * - Slides in/out with a CSS height transition.
+ * - Auto-focuses the input when `open` becomes `true`.
+ * - Escape key calls `onClose`.
+ * - Shows a clear (×) button whenever the input has a value.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html
+ */
+export declare function SearchBar({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+    /** Direction of the dividing line. Defaults to `"horizontal"`. */
+    orientation?: SeparatorOrientation;
+}
+/**
+ * Thin dividing line that separates groups of content.
+ *
+ * Renders as `<hr>` (horizontal) or a `<div role="separator">` (vertical).
+ * Color is driven entirely by design tokens and adapts to dark mode automatically.
+ *
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Separator } from './Separator';
+export type { SeparatorProps, SeparatorOrientation } from './Separator';

package/dist/components/ShortcutLabel/ShortcutLabel.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+export interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Keyboard shortcut string.
+     *
+     * Tokens are separated by `+`. Each token is rendered as its own key cap.
+     * Common modifiers are normalised to their symbol:
+     * - `Ctrl` / `Control` → `⌃`
+     * - `Shift` → `⇧`
+     * - `Alt` / `Option` → `⌥`
+     * - `Super` / `Win` / `Cmd` / `Command` → `⊞`
+     * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`
+     * - `Enter` / `Return` → `↵`
+     * - `Backspace` → `⌫`
+     * - `Delete` → `⌦`
+     * - `Escape` / `Esc` → `⎋`
+     * - `Tab` → `⇥`
+     * - `Space` → `␣`
+     *
+     * @example "Ctrl+S"   →  ⌃ S
+     * @example "Ctrl+Shift+Z" → ⌃ ⇧ Z
+     */
+    shortcut: string;
+    /** When true, modifier tokens are shown as symbols. Defaults to `true`. */
+    symbols?: boolean;
+}
+/**
+ * Read-only display of a keyboard shortcut with per-key key-cap styling.
+ *
+ * Each token in the `shortcut` string (split by `+`) is rendered as a
+ * separate `<kbd>` element. Modifier keys are normalised to their Unicode
+ * symbols by default.
+ *
+ * Mirrors `GtkShortcutLabel`.
+ *
+ * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html
+ */
+export declare function ShortcutLabel({ shortcut, symbols, className, ...props }: ShortcutLabelProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/ShortcutsDialog/ShortcutsDialog.d.ts

@@ -0,0 +1,37 @@
+export interface ShortcutEntry {
+    /**
+     * Key combination tokens, e.g. `["Ctrl", "S"]` or `["F5"]`.
+     * Each token is rendered as a styled `<kbd>` key cap.
+     */
+    keys: string[];
+    /** Human-readable description of what the shortcut does. */
+    description: string;
+}
+export interface ShortcutsSection {
+    /** Section heading, e.g. "File", "Edit". */
+    title: string;
+    shortcuts: ShortcutEntry[];
+}
+export interface ShortcutsDialogProps {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Called when the dialog is dismissed (Escape, close button). */
+    onClose: () => void;
+    /** Dialog heading. Defaults to `"Keyboard Shortcuts"`. */
+    title?: string;
+    /** Shortcut sections to display. */
+    sections: ShortcutsSection[];
+}
+/**
+ * Modal dialog listing keyboard shortcuts, grouped in sections, with
+ * integrated search to filter by description or key name.
+ *
+ * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).
+ *
+ * - Renders into a portal (`document.body`).
+ * - Traps focus; Escape closes.
+ * - Search filters across all sections in real time.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html
+ */
+export declare function ShortcutsDialog({ open, onClose, title, sections, }: ShortcutsDialogProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,2 @@
+export { ShortcutsDialog } from './ShortcutsDialog';
+export type { ShortcutsDialogProps, ShortcutsSection, ShortcutEntry } from './ShortcutsDialog';

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/** Provides the collapsed state to all descendant `SidebarItem` components. */
+export declare const SidebarCollapsedContext: import('react').Context<boolean>;
+/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */
+export declare function useSidebarCollapsed(): boolean;
+/** Provides the active filter string to all descendant `SidebarItem` components. */
+export declare const SidebarFilterContext: import('react').Context<string>;
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /**
+     * When `true`, collapses the sidebar to icon-only mode (rail/mini).
+     * Labels, suffixes, and section titles are hidden; tooltips appear on hover.
+     */
+    collapsed?: boolean;
+    /**
+     * Renders a built-in `SearchBar` inside the sidebar and manages the filter
+     * state internally (uncontrolled). Combine with `filter` + `onFilterChange`
+     * for controlled mode.
+     */
+    searchable?: boolean;
+    /**
+     * Controlled filter string. Items whose `label` does not match
+     * (case-insensitive substring) are hidden. Does not render a `SearchBar`
+     * on its own — use `searchable` for the built-in search input.
+     */
+    filter?: string;
+    /** Called when the built-in search value changes. */
+    onFilterChange?: (value: string) => void;
+    /**
+     * Layout mode:
+     * - `"sidebar"` — fixed-width panel with a border (default).
+     * - `"page"` — full-width boxed-list layout for narrow viewports.
+     *
+     * When omitted the sidebar auto-switches to `"page"` at ≤ 400 sp,
+     * mirroring `AdwSidebar` mobile behaviour.
+     */
+    mode?: "sidebar" | "page";
+}
+/**
+ * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.
+ *
+ * **Tier 11 — libadwaita 1.9 completeness:**
+ * - `searchable` — built-in `SearchBar` with automatic item filtering.
+ * - `filter` / `onFilterChange` — controlled external filtering.
+ * - `mode` — `"sidebar"` (default) or `"page"` (boxed-list layout).
+ *   Auto-switches to `"page"` at ≤ 400 sp when `mode` is unset.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html
+ */
+export declare function Sidebar({ children, collapsed, searchable, filter: controlledFilter, onFilterChange, mode, className, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/SidebarItem.d.ts

@@ -0,0 +1,58 @@
+import { ButtonHTMLAttributes, DragEvent, ReactNode } from 'react';
+import { IconDefinition } from '@gnome-ui/icons';
+export interface SidebarMenuEntry {
+    /** Label shown in the context menu. */
+    label: string;
+    /** Called when the entry is clicked. */
+    onClick: () => void;
+    /** Renders the entry in red. Use for destructive actions. */
+    destructive?: boolean;
+    /** Disables the entry. */
+    disabled?: boolean;
+}
+export interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Primary label. */
+    label: string;
+    /** Icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /** Marks this item as the currently active view. */
+    active?: boolean;
+    /**
+     * Trailing widget — any ReactNode (badge, button, icon…).
+     * Supersedes `badge` when both are provided.
+     */
+    suffix?: ReactNode;
+    /**
+     * @deprecated Use `suffix` instead.
+     */
+    badge?: ReactNode;
+    /**
+     * Short tooltip shown when hovering the item.
+     * Automatically shown when the sidebar is `collapsed`.
+     */
+    tooltip?: string;
+    /**
+     * Context-menu entries shown on right-click or the Menu key.
+     */
+    menuItems?: SidebarMenuEntry[];
+    /**
+     * Called when a dragged item is dropped onto this row.
+     * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).
+     */
+    onDrop?: (e: DragEvent<HTMLButtonElement>) => void;
+    /**
+     * MIME types this row accepts as drop targets (e.g. `["text/plain"]`).
+     * When provided, drops of other types are rejected via `e.preventDefault()`.
+     * When omitted, all types are accepted.
+     */
+    acceptTypes?: string[];
+}
+/**
+ * Individual navigation item inside a `Sidebar` or `SidebarSection`.
+ *
+ * **Tier 11 additions:**
+ * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active
+ *   and the `label` does not match (case-insensitive substring).
+ * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.
+ */
+export declare function SidebarItem({ label, icon, active, suffix, badge, tooltip, menuItems, onDrop, acceptTypes, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/SidebarSection.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Section heading. Rendered in small caps above the items.
+     * Omit for an untitled section (e.g. the first group in a sidebar).
+     */
+    title?: string;
+    children?: ReactNode;
+}
+/**
+ * Named group of `SidebarItem` entries inside a `Sidebar`.
+ *
+ * Sections are separated by a thin divider. The title is optional —
+ * omit it for the primary section when the grouping is self-evident.
+ *
+ * Mirrors the `AdwSidebar` section model (libadwaita 1.9 / GNOME 50).
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarSection title="Mailboxes">
+ *     <SidebarItem label="Inbox" icon={GoHome} active />
+ *     <SidebarItem label="Sent"  icon={Share} />
+ *   </SidebarSection>
+ *   <SidebarSection title="Tags">
+ *     <SidebarItem label="Work"     icon={Star} />
+ *     <SidebarItem label="Personal" icon={Star} />
+ *   </SidebarSection>
+ * </Sidebar>
+ * ```
+ */
+export declare function SidebarSection({ title, children, className, ...props }: SidebarSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export { Sidebar, SidebarCollapsedContext, useSidebarCollapsed } from './Sidebar';
+export type { SidebarProps } from './Sidebar';
+export { SidebarSection } from './SidebarSection';
+export type { SidebarSectionProps } from './SidebarSection';
+export { SidebarItem } from './SidebarItem';
+export type { SidebarItemProps, SidebarMenuEntry } from './SidebarItem';

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Current value. Must be between `min` and `max`. */
+    value: number;
+    /** Called when the value changes. */
+    onChange: (value: number) => void;
+    /** Minimum value. Defaults to `0`. */
+    min?: number;
+    /** Maximum value. Defaults to `100`. */
+    max?: number;
+    /**
+     * Granularity of each step.
+     * - Arrow keys move by one step.
+     * - Page Up/Down move by 10 steps.
+     * Defaults to `1`.
+     */
+    step?: number;
+    /** Disables the control. */
+    disabled?: boolean;
+    /**
+     * Marks to display along the track.
+     * Each mark can have an optional label rendered below the track.
+     */
+    marks?: Array<{
+        value: number;
+        label?: string;
+    }>;
+    /** Accessible label. Required when no visible `<label>` is present. */
+    "aria-label"?: string;
+    /** Associates the control with a visible label element. */
+    "aria-labelledby"?: string;
+    /** `id` of an element that describes the current value (e.g. a live region). */
+    "aria-describedby"?: string;
+}
+/**
+ * Draggable range slider following the Adwaita `GtkScale` pattern.
+ *
+ * - Pointer (mouse / touch / pen) drag to set value continuously.
+ * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.
+ * - Optional tick marks with labels.
+ * - Fills the track from the left up to the thumb (accent colour).
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/sliders.html
+ */
+export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

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

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