@gnome-ui/react 1.9.0 → 1.10.0

package/dist/components/ActionRow/ActionRow.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /**
+     * Widget placed at the trailing edge (Switch, Button, Text…).
+     * For interactive end widgets prefer a controlled component and stop
+     * event propagation inside it so the row's own onClick isn't triggered.
+     */
+    trailing?: ReactNode;
+    /**
+     * When true the entire row becomes clickable (renders as `<button>`).
+     * Use for rows that navigate or trigger an action.
+     */
+    interactive?: boolean;
+    /**
+     * `"property"` flips the visual hierarchy: the subtitle becomes the
+     * prominent value and the title shrinks to a dim label above it.
+     * Use for read-only property display (e.g. "OS Version / Ubuntu 24.04").
+     * Mirrors the `.property` style class.
+     */
+    variant?: "default" | "property";
+}
+/**
+ * Standard settings row with title, optional subtitle, and end widget.
+ *
+ * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block
+ * inside a `BoxedList`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare function ActionRow({ title, subtitle, leading, trailing, interactive, variant, className, ...props }: ActionRowProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes } from 'react';
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+/**
+ * Named color palette for the initials fallback.
+ * Mirrors libadwaita's avatar color set.
+ */
+export type AvatarColor = "blue" | "green" | "yellow" | "orange" | "red" | "purple" | "brown" | "teal" | "slate";
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Full name used to generate initials and — when `color` is omitted —
+     * to deterministically pick a background color.
+     */
+    name?: string;
+    /** Image URL. When provided the initials fallback is hidden. */
+    src?: string;
+    /** Alt text for the image. Defaults to `name`. */
+    alt?: string;
+    /** Size of the avatar. Defaults to `"md"`. */
+    size?: AvatarSize;
+    /**
+     * Override the auto-derived background color for the initials fallback.
+     * When omitted a color is derived from `name` via a stable hash.
+     */
+    color?: AvatarColor;
+}
+/**
+ * Circular avatar with image or initials fallback.
+ *
+ * Follows the Adwaita `AdwAvatar` pattern — deterministic color from name,
+ * up to two initials when no image is supplied.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Avatar.html
+ */
+export declare function Avatar({ name, src, alt, size, color, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize, AvatarColor } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type BadgeVariant = "accent" | "success" | "warning" | "error" | "neutral";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual style. Defaults to `"accent"`.
+     * - `accent`  — blue, for counts and highlights.
+     * - `success` — green, for positive status.
+     * - `warning` — yellow, for cautionary status.
+     * - `error`   — red, for failures or urgent counts.
+     * - `neutral` — gray, for inactive or secondary counts.
+     */
+    variant?: BadgeVariant;
+    /**
+     * When true, renders a small dot with no label — used for unread/online indicators.
+     * The `children` are ignored in dot mode.
+     */
+    dot?: boolean;
+    /** Number or short text to display. Keep to 1–3 characters. */
+    children?: ReactNode;
+    /**
+     * When provided, the badge is absolutely positioned over this child element
+     * at the top-right corner. The wrapper becomes `position: relative`.
+     */
+    anchor?: ReactNode;
+}
+/**
+ * Counter or status indicator, optionally overlaid on another element.
+ *
+ * @see https://developer.gnome.org/hig/patterns/feedback/badges.html
+ */
+export declare function Badge({ variant, dot, children, anchor, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type BannerVariant = "info" | "warning" | "error" | "success";
+export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual emphasis level.
+     * - `info` (default) — neutral, accent-colored. Use for tips and notices.
+     * - `warning` — yellow. Use for recoverable problems.
+     * - `error` — red. Use for failures that need attention.
+     * - `success` — green. Use for confirmations.
+     */
+    variant?: BannerVariant;
+    /** The message text. Keep it short — one or two sentences. */
+    children: ReactNode;
+    /**
+     * Label for the optional action button placed at the trailing end.
+     * When provided, `onAction` should also be supplied.
+     */
+    actionLabel?: string;
+    /** Called when the user clicks the action button. */
+    onAction?: () => void;
+    /**
+     * When true a dismiss (×) button is shown at the trailing edge.
+     * Provide `onDismiss` to handle removal from the DOM.
+     */
+    dismissible?: boolean;
+    /** Called when the user clicks the dismiss button. */
+    onDismiss?: () => void;
+}
+/**
+ * Persistent message strip displayed at the top of a view.
+ *
+ * Mirrors the Adwaita `AdwBanner` pattern. Use for important information
+ * that persists until the user acts or explicitly dismisses it.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Banner.html
+ * @see https://developer.gnome.org/hig/patterns/feedback/banners.html
+ */
+export declare function Banner({ variant, children, actionLabel, onAction, dismissible, onDismiss, className, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerVariant } from './Banner';

package/dist/components/Bin/Bin.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BinProps extends HTMLAttributes<HTMLDivElement> {
+    /** Single child. */
+    children?: ReactNode;
+}
+/**
+ * Single-child container with no visual styling.
+ *
+ * A transparent wrapper that constrains its content to one child while
+ * forwarding all HTML div attributes. Useful as a base for custom components
+ * that need a neutral container — e.g. to apply layout or size constraints
+ * without introducing visual chrome.
+ *
+ * Mirrors `AdwBin`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Bin.html
+ */
+export declare function Bin({ children, ...props }: BinProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Whether the sheet is visible. */
+    open: boolean;
+    /**
+     * Optional heading shown in the drag handle area.
+     */
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Called when the user dismisses the sheet (Escape or backdrop click). */
+    onClose?: () => void;
+    /**
+     * Whether clicking the backdrop closes the sheet.
+     * Defaults to `true`.
+     */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * Slide-up panel that overlays content from the bottom edge.
+ *
+ * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on
+ * `document.body`. Traps focus, closes on Escape or backdrop click.
+ * The handle bar is decorative — drag-to-close is not implemented.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html
+ */
+export declare function BottomSheet({ open, title, children, onClose, closeOnBackdrop, className, ...props }: BottomSheetProps): import("react/jsx-runtime").JSX.Element | null;

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

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

package/dist/components/BoxedList/BoxedList.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type BoxedListVariant = "default" | "separate";
+export interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {
+    children?: ReactNode;
+    /**
+     * `"separate"` renders each child as its own standalone rounded card
+     * instead of a single joined list — mirrors `.boxed-list-separate`.
+     * Use when rows are independent items rather than a continuous group.
+     */
+    variant?: BoxedListVariant;
+}
+/**
+ * Rounded bordered list — the most common container pattern in GNOME apps.
+ *
+ * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.
+ * Separators between rows are inserted automatically.
+ * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.
+ *
+ * Use `variant="separate"` to render each child as its own card, mirroring
+ * the `.boxed-list-separate` style class.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare function BoxedList({ children, variant, className, ...props }: BoxedListProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { BoxedList } from './BoxedList';
+export type { BoxedListProps, BoxedListVariant } from './BoxedList';

package/dist/components/BreakpointBin/BreakpointBin.d.ts

@@ -0,0 +1,66 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface BreakpointDefinition {
+    /**
+     * Identifier for this breakpoint, e.g. `"compact"` or `"narrow"`.
+     * Exposed as `data-breakpoint` on the container element for CSS targeting.
+     */
+    name: string;
+    /**
+     * Container width threshold in pixels.
+     * This breakpoint becomes active when the container width is ≤ this value.
+     */
+    maxWidth: number;
+}
+export interface BreakpointBinState {
+    /**
+     * Name of the currently active breakpoint, or `null` when the container
+     * is wider than all defined breakpoints.
+     */
+    activeBreakpoint: string | null;
+    /** Current container width in px (from `ResizeObserver`). */
+    width: number;
+}
+export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Breakpoint definitions sorted by `maxWidth` ascending.
+     * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.
+     */
+    breakpoints: BreakpointDefinition[];
+    /**
+     * Render prop that receives the current breakpoint state.
+     *
+     * @example
+     * ```tsx
+     * <BreakpointBin breakpoints={[{ name: "compact", maxWidth: 400 }]}>
+     *   {({ activeBreakpoint }) =>
+     *     activeBreakpoint === "compact" ? <CompactLayout /> : <WideLayout />
+     *   }
+     * </BreakpointBin>
+     * ```
+     */
+    children: (state: BreakpointBinState) => ReactNode;
+}
+/**
+ * Container that fires layout changes when **its own width** crosses defined
+ * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`
+ * (libadwaita 1.9 / GNOME 50).
+ *
+ * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses
+ * `ResizeObserver` to watch the element itself. This makes it composable:
+ * the same component can behave differently depending on how much space it
+ * is given by its parent, regardless of the viewport size.
+ *
+ * ### How it works
+ * - Breakpoints are evaluated in ascending `maxWidth` order.
+ * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.
+ * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.
+ * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.
+ *
+ * ### CSS targeting
+ * ```css
+ * .myWidget[data-breakpoint="compact"] .layout { flex-direction: column; }
+ * ```
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html
+ */
+export declare function BreakpointBin({ breakpoints, children, className, style, ...props }: BreakpointBinProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { BreakpointBin } from './BreakpointBin';
+export type { BreakpointBinProps, BreakpointDefinition, BreakpointBinState, } from './BreakpointBin';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,34 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = "default" | "suggested" | "destructive" | "flat" | "raised";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonShape = "default" | "pill" | "circular";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style of the button. Follows GNOME HIG button types. */
+    variant?: ButtonVariant;
+    /** Size of the button. */
+    size?: ButtonSize;
+    /** Shape of the button. "pill" for primary actions in open space, "circular" for icon-only buttons. */
+    shape?: ButtonShape;
+    /**
+     * Dark semi-transparent overlay style for buttons placed on top of
+     * media or images — mirrors the `.osd` style class.
+     */
+    osd?: boolean;
+    /** Icon placed before the label. */
+    leadingIcon?: ReactNode;
+    /** Icon placed after the label. */
+    trailingIcon?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Button component following GNOME Human Interface Guidelines.
+ *
+ * Variants:
+ * - `default`     — Standard action, flat appearance with subtle border.
+ * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.
+ * - `destructive` — Dangerous or irreversible action (red). Use sparingly.
+ * - `flat`        — No border or background; ideal for header bars and toolbars.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/buttons.html
+ */
+export declare function Button({ variant, size, shape, osd, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from './Button';

package/dist/components/ButtonContent/ButtonContent.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ButtonContentProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Icon element placed before the label. */
+    icon?: ReactNode;
+    /** Text label. */
+    label: string;
+    /**
+     * Position of the icon relative to the label.
+     * Defaults to `"start"`.
+     */
+    iconPosition?: "start" | "end";
+}
+/**
+ * Icon + label layout helper for buttons that contain both an icon and text.
+ *
+ * Pass as the `children` of a `Button` to get the correct Adwaita spacing
+ * between the icon and label (4 px gap, icon centred vertically with the text).
+ *
+ * Mirrors `AdwButtonContent`.
+ *
+ * @example
+ * ```tsx
+ * <Button>
+ *   <ButtonContent icon={<Icon name="document-save-symbolic" />} label="Save" />
+ * </Button>
+ * ```
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonContent.html
+ */
+export declare function ButtonContent({ icon, label, iconPosition, className, ...props }: ButtonContentProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/ButtonRow/ButtonRow.d.ts

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonRowVariant = "default" | "suggested" | "destructive";
+export interface ButtonRowProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Label displayed centered in the row. */
+    title: string;
+    /** Visual style that colours the title text. */
+    variant?: ButtonRowVariant;
+    /** Icon placed at the leading edge. */
+    leading?: ReactNode;
+    /** Icon placed at the trailing edge. */
+    trailing?: ReactNode;
+}
+/**
+ * Full-width activatable row styled as a button inside a `BoxedList`.
+ *
+ * Mirrors `AdwButtonRow` — use when an entire list row should trigger a single
+ * action. Prefer `ActionRow` with `interactive` when the row also needs a
+ * title/subtitle layout; prefer `ButtonRow` for single-label CTA rows.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ButtonRow.html
+ */
+export declare function ButtonRow({ title, variant, leading, trailing, className, ...props }: ButtonRowProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { ButtonRow } from './ButtonRow';
+export type { ButtonRowProps, ButtonRowVariant } from './ButtonRow';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,24 @@
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
+export type CardPadding = "none" | "sm" | "md" | "lg";
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * When true the card becomes clickable (Adwaita `.activatable`).
+     * Renders as `<button>` by default; override with `as`.
+     */
+    interactive?: boolean;
+    /** Internal spacing. Defaults to `"md"`. */
+    padding?: CardPadding;
+    /** Override the rendered HTML element. */
+    as?: ElementType;
+    children?: ReactNode;
+}
+/**
+ * Card component following the GNOME HIG and Adwaita `.card` style class.
+ *
+ * Use for grouping related content on an elevated surface.
+ * For clickable cards (e.g. grid item, settings shortcut) set `interactive`.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html
+ * @see https://developer.gnome.org/hig/patterns/containers.html
+ */
+export declare function Card({ interactive, padding, as, className, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardPadding } from './Card';

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,64 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Total number of pages. */
+    pages: number;
+    /** Zero-based index of the current page. */
+    currentPage: number;
+    /** Called when the user clicks a dot. */
+    onPageSelected?: (index: number) => void;
+}
+/**
+ * Dot-style page indicator for `Carousel`.
+ * Mirrors `AdwCarouselIndicatorDots`.
+ */
+export declare function CarouselIndicatorDots({ pages, currentPage, onPageSelected, className, ...props }: CarouselIndicatorDotsProps): import("react/jsx-runtime").JSX.Element;
+export interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {
+    /** Total number of pages. */
+    pages: number;
+    /** Zero-based index of the current page. */
+    currentPage: number;
+    /** Called when the user clicks a line. */
+    onPageSelected?: (index: number) => void;
+}
+/**
+ * Line-style page indicator for `Carousel`.
+ * Mirrors `AdwCarouselIndicatorLines`.
+ */
+export declare function CarouselIndicatorLines({ pages, currentPage, onPageSelected, className, ...props }: CarouselIndicatorLinesProps): import("react/jsx-runtime").JSX.Element;
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /**
+     * Scroll orientation.
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Gap between pages in px.
+     * @default 0
+     */
+    spacing?: number;
+    /**
+     * Allow infinite looping (wraps around on the last/first page).
+     * @default false
+     */
+    loop?: boolean;
+    /** Called whenever the visible page changes. */
+    onPageChanged?: (index: number) => void;
+    /**
+     * Controlled current page index.
+     * When omitted the carousel manages page state internally.
+     */
+    page?: number;
+}
+/**
+ * Swipeable content carousel.
+ *
+ * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling
+ * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse
+ * drag via the browser's native scroll handling.
+ *
+ * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html
+ */
+export declare function Carousel({ children, orientation, spacing, loop, onPageChanged, page: controlledPage, className, ...props }: CarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Carousel, CarouselIndicatorDots, CarouselIndicatorLines } from './Carousel';
+export type { CarouselProps, CarouselIndicatorDotsProps, CarouselIndicatorLinesProps, } from './Carousel';

package/dist/components/CheckRow/CheckRow.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface CheckRowProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** Primary label. */
+    title: string;
+    /** Secondary line below the title. */
+    subtitle?: string;
+    /** Icon or image placed at the leading edge. */
+    leading?: ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Initial checked state when uncontrolled. Defaults to `false`. */
+    defaultChecked?: boolean;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Disables the row. */
+    disabled?: boolean;
+}
+/**
+ * Activatable row with an integrated checkbox.
+ *
+ * The entire row is a button — clicking anywhere toggles the checkbox.
+ * Mirrors the `AdwCheckButton`-in-a-row pattern used in list selection contexts.
+ *
+ * Supports both controlled (`checked`) and uncontrolled (`defaultChecked`) modes.
+ *
+ * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.CheckButton.html
+ */
+export declare function CheckRow({ title, subtitle, leading, checked: controlledChecked, defaultChecked, onCheckedChange, disabled, className, onClick, ...props }: CheckRowProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,22 @@
+import { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /**
+     * Indeterminate state — shown when only some children in a group are checked.
+     * Takes visual precedence over `checked`.
+     */
+    indeterminate?: boolean;
+    /** Accessible label. Required when no visible `<label>` is associated. */
+    "aria-label"?: string;
+}
+/**
+ * Checkbox for multi-selection, following the GNOME HIG and Adwaita style.
+ *
+ * Supports three states: unchecked, checked, and indeterminate (mixed).
+ * Use `indeterminate` for "select all" controls when only some items are selected.
+ *
+ * Renders as `<input type="checkbox">` — natively keyboard-accessible and
+ * compatible with standard form libraries.
+ *
+ * @see https://developer.gnome.org/hig/patterns/controls/checkboxes.html
+ */
+export declare function Checkbox({ indeterminate, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+import { IconDefinition } from '@gnome-ui/icons';
+export interface ChipProps extends HTMLAttributes<HTMLElement> {
+    /** Text label displayed inside the chip. */
+    label: string;
+    /** Leading icon from `@gnome-ui/icons`. */
+    icon?: IconDefinition;
+    /**
+     * When provided, renders a remove (×) button and calls this handler.
+     * The chip root becomes a `<span>`; only the remove button is interactive.
+     */
+    onRemove?: () => void;
+    /**
+     * When true the chip renders as a toggle button.
+     * Use `selected` + `onToggle` to control its state.
+     */
+    selectable?: boolean;
+    /** Active/selected state. Only relevant when `selectable` is true. */
+    selected?: boolean;
+    /**
+     * Called when a selectable chip is clicked.
+     * Only relevant when `selectable` is true.
+     */
+    onToggle?: () => void;
+    /** Disabled state — applies to both selectable chips and the remove button. */
+    disabled?: boolean;
+}
+/**
+ * Compact pill-shaped label for tags, filters, and selection states.
+ *
+ * Three usage modes:
+ * - **Static** — just a visual label (no `onRemove`, no `selectable`).
+ * - **Removable** — add `onRemove` to show a × button.
+ * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.
+ *
+ * Pair with `WrapBox` for multi-chip layouts.
+ */
+export declare function Chip({ label, icon, onRemove, selectable, selected, onToggle, disabled, className, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;

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

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