@vhyxui/react 0.1.0-alpha.1

package/dist/index.d.ts

@@ -0,0 +1,1184 @@
+import { ComponentContract } from '@vhyxui/core';
+import { default as default_2 } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { FormState } from 'react-hook-form';
+import { UseFormRegister } from 'react-hook-form';
+import { UseFormReturn } from 'react-hook-form';
+
+export declare const Alert: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<AlertProps> & default_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the Alert component. */
+export declare interface AlertProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Semantic variant. @default 'default' */
+    variant?: AlertVariant;
+    /** Optional title rendered in bold above the message. */
+    title?: string;
+    /** Icon override. Defaults to a variant-appropriate symbol when omitted. */
+    icon?: default_2.ReactNode;
+    /** When true, renders a Dismiss button. @default false */
+    dismissible?: boolean;
+    /** Callback fired when the Dismiss button is clicked. */
+    onDismiss?: () => void;
+    /** VhyxSeal contract override. Merged on top of the default alertContract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Visual variant of the Alert. */
+export declare type AlertVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
+
+export declare const Badge: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<BadgeProps> & default_2.RefAttributes<HTMLSpanElement>>;
+
+/** Props for the Badge component. */
+export declare interface BadgeProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    /** Visual variant. @default 'default' */
+    variant?: BadgeVariant;
+    /** Size of the badge. @default 'md' */
+    size?: BadgeSize;
+    /**
+     * When true, renders a small circular dot indicator with no text.
+     * Useful for notification indicators.
+     */
+    dot?: boolean;
+    /**
+     * Numeric count to display. When count exceeds max, displays "{max}+".
+     * Ignored when dot=true.
+     */
+    count?: number;
+    /** Maximum count before truncation. @default 99 */
+    max?: number;
+}
+
+/** Size of the Badge. */
+export declare type BadgeSize = 'sm' | 'md' | 'lg';
+
+/** Visual variant of the Badge. */
+export declare type BadgeVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'outline';
+
+export declare const Breadcrumb: default_2.ComponentType<BreadcrumbProps & default_2.RefAttributes<HTMLElement>> & {
+    Item: typeof BreadcrumbItem;
+    Link: typeof BreadcrumbLink;
+    Page: typeof BreadcrumbPage;
+    Ellipsis: typeof BreadcrumbEllipsis;
+};
+
+/** Collapsed items indicator — rendered when maxItems is exceeded. */
+declare function BreadcrumbEllipsis({ className, ...rest }: BreadcrumbEllipsisProps): default_2.ReactElement;
+
+declare namespace BreadcrumbEllipsis {
+    var displayName: string;
+}
+
+export declare interface BreadcrumbEllipsisProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+}
+
+/**
+ * A single item in the breadcrumb list.
+ * Renders as an `<li>` with the separator automatically appended.
+ */
+declare function BreadcrumbItem({ children, className, ...rest }: BreadcrumbItemProps): default_2.ReactElement;
+
+declare namespace BreadcrumbItem {
+    var displayName: string;
+}
+
+export declare interface BreadcrumbItemProps extends default_2.LiHTMLAttributes<HTMLLIElement> {
+    children?: default_2.ReactNode;
+}
+
+/** An ancestor page link in the breadcrumb trail. */
+declare function BreadcrumbLink({ children, className, asChild, ...rest }: BreadcrumbLinkProps): default_2.ReactElement;
+
+declare namespace BreadcrumbLink {
+    var displayName: string;
+}
+
+export declare interface BreadcrumbLinkProps extends default_2.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * When true, renders as the child element via Slot instead of <a>.
+     * Use with Next.js Link or other routing components.
+     */
+    asChild?: boolean;
+    children?: default_2.ReactNode;
+}
+
+/**
+ * The current page in the breadcrumb hierarchy.
+ * Not a link — receives aria-current="page".
+ */
+declare function BreadcrumbPage({ children, className, ...rest }: BreadcrumbPageProps): default_2.ReactElement;
+
+declare namespace BreadcrumbPage {
+    var displayName: string;
+}
+
+export declare interface BreadcrumbPageProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Breadcrumb compound component. */
+export declare interface BreadcrumbProps extends default_2.HTMLAttributes<HTMLElement> {
+    /**
+     * Separator element rendered between items. Defaults to "/" (aria-hidden).
+     */
+    separator?: default_2.ReactNode;
+    /**
+     * When set, collapses the middle items with an ellipsis when
+     * the item count exceeds this number. Not yet implemented — reserved.
+     */
+    maxItems?: number;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+    children?: default_2.ReactNode;
+}
+
+export declare const Button: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ButtonProps> & default_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the Button component. */
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style of the button. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size of the button, maps to --vhyx-size-* height tokens. @default 'md' */
+    size?: ButtonSize;
+    /** When true, shows a spinner and disables interaction. */
+    loading?: boolean;
+    /** Optional icon element rendered alongside button text. */
+    icon?: default_2.ReactNode;
+    /** Side the icon appears on. @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** When true, renders icon only with no text. Requires aria-label for accessibility. */
+    iconOnly?: boolean;
+    /**
+     * When true, renders as the child element instead of a <button>.
+     * All Button props are merged onto the child via Slot.
+     * Use for navigation links or custom trigger elements.
+     */
+    asChild?: boolean;
+    /** VhyxSeal contract override — merged with the default button contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Button component. */
+export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/** All variants available on the Button component. */
+export declare type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+
+export declare const Card: default_2.ComponentType<CardProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+    Image: typeof CardImage;
+};
+
+declare function CardBody({ children, className, ...rest }: CardBodyProps): default_2.ReactElement;
+
+declare namespace CardBody {
+    var displayName: string;
+}
+
+export declare interface CardBodyProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function CardFooter({ children, className, ...rest }: CardFooterProps): default_2.ReactElement;
+
+declare namespace CardFooter {
+    var displayName: string;
+}
+
+export declare interface CardFooterProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function CardHeader({ children, className, ...rest }: CardHeaderProps): default_2.ReactElement;
+
+declare namespace CardHeader {
+    var displayName: string;
+}
+
+export declare interface CardHeaderProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function CardImage({ children, className, ...rest }: CardImageProps): default_2.ReactElement;
+
+declare namespace CardImage {
+    var displayName: string;
+}
+
+export declare interface CardImageProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Padding size applied to the Card. */
+export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+
+/** Root props for the Card compound component. */
+export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Visual variant. @default 'default' */
+    variant?: CardVariant;
+    /** Padding inside the card. @default 'md' */
+    padding?: CardPadding;
+    /**
+     * When true, adds hover and active states — use for clickable cards.
+     * Add onClick and role="button" or wrap with a link separately.
+     */
+    interactive?: boolean;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Visual variant of the Card. */
+export declare type CardVariant = 'default' | 'outline' | 'ghost' | 'elevated';
+
+export declare const Checkbox: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<CheckboxProps> & default_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the Checkbox component. */
+export declare interface CheckboxProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'defaultChecked'> {
+    /** Controlled checked state. */
+    checked?: CheckedState;
+    /** Uncontrolled default checked state. @default false */
+    defaultChecked?: CheckedState;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: CheckedState) => void;
+    /** When true, renders the indeterminate state (dash mark). */
+    indeterminate?: boolean;
+    /** Size of the checkbox. @default 'md' */
+    size?: CheckboxSize;
+    /**
+     * When true, renders as the child element instead of <button role="checkbox">.
+     * ARIA attributes and click handler are merged onto the child via Slot.
+     */
+    asChild?: boolean;
+    /** VhyxSeal contract override — merged with the default checkbox contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Checkbox component. */
+export declare type CheckboxSize = 'sm' | 'md' | 'lg';
+
+/** Checkbox checked value — boolean or 'indeterminate'. */
+declare type CheckedState = boolean | 'indeterminate';
+
+export declare const Dialog: default_2.ComponentType<DialogProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Trigger: default_2.ForwardRefExoticComponent<DialogTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof DialogPortal;
+    Overlay: default_2.ForwardRefExoticComponent<DialogOverlayProps & default_2.RefAttributes<HTMLDivElement>>;
+    Content: default_2.ForwardRefExoticComponent<DialogContentProps & default_2.RefAttributes<HTMLDivElement>>;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: default_2.ForwardRefExoticComponent<DialogCloseProps & default_2.RefAttributes<HTMLButtonElement>>;
+};
+
+export declare interface DialogCloseProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: default_2.ReactNode;
+    /**
+     * When true, renders as the child element via Slot instead of <button>.
+     * Use to avoid nested interactive elements when composing with Button.
+     */
+    asChild?: boolean;
+}
+
+export declare interface DialogContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Override the accessible label for the close button inside. */
+    closeLabel?: string;
+}
+
+/** Optional accessible description. */
+declare function DialogDescription({ children, className, ...rest }: DialogDescriptionProps): default_2.ReactElement;
+
+declare namespace DialogDescription {
+    var displayName: string;
+}
+
+export declare interface DialogDescriptionProps extends default_2.HTMLAttributes<HTMLParagraphElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Optional layout wrapper for the dialog footer (actions). */
+declare function DialogFooter({ children, className, ...rest }: DialogFooterProps): default_2.ReactElement;
+
+declare namespace DialogFooter {
+    var displayName: string;
+}
+
+export declare interface DialogFooterProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Optional layout wrapper for the dialog header area. */
+declare function DialogHeader({ children, className, ...rest }: DialogHeaderProps): default_2.ReactElement;
+
+declare namespace DialogHeader {
+    var displayName: string;
+}
+
+export declare interface DialogHeaderProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+export declare interface DialogOverlayProps extends default_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/** Renders its children in document.body. */
+declare function DialogPortal({ children }: DialogPortalProps): default_2.ReactPortal | null;
+
+declare namespace DialogPortal {
+    var displayName: string;
+}
+
+export declare interface DialogPortalProps {
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Dialog compound component. */
+export declare interface DialogProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Default open state for uncontrolled mode. @default false */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** When true, blocks interaction with the rest of the page. @default true */
+    modal?: boolean;
+    /** Controls the maximum width of the dialog panel. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+    /** Dialog sub-components as children. */
+    children: default_2.ReactNode;
+}
+
+/** The dialog's accessible title. Required for screen reader announcement. */
+declare function DialogTitle({ children, className, ...rest }: DialogTitleProps): default_2.ReactElement;
+
+declare namespace DialogTitle {
+    var displayName: string;
+}
+
+export declare interface DialogTitleProps extends default_2.HTMLAttributes<HTMLHeadingElement> {
+    children?: default_2.ReactNode;
+}
+
+export declare interface DialogTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** When true, renders as the child element via Slot instead of <button>. */
+    asChild?: boolean;
+    children?: default_2.ReactNode;
+}
+
+export declare const Drawer: default_2.ComponentType<DrawerProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Trigger: default_2.ForwardRefExoticComponent<DrawerTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Portal: typeof DrawerPortal;
+    Overlay: default_2.ForwardRefExoticComponent<DrawerOverlayProps & default_2.RefAttributes<HTMLDivElement>>;
+    Content: default_2.ForwardRefExoticComponent<DrawerContentProps & default_2.RefAttributes<HTMLDivElement>>;
+    Header: typeof DrawerHeader;
+    Footer: typeof DrawerFooter;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    Close: default_2.ForwardRefExoticComponent<DrawerCloseProps & default_2.RefAttributes<HTMLButtonElement>>;
+};
+
+export declare interface DrawerCloseProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: default_2.ReactNode;
+    /**
+     * When true, renders as the child element via Slot instead of <button>.
+     * Use to avoid nested interactive elements when composing with Button.
+     */
+    asChild?: boolean;
+}
+
+export declare interface DrawerContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+}
+
+declare function DrawerDescription({ children, className, ...rest }: DrawerDescriptionProps): default_2.ReactElement;
+
+declare namespace DrawerDescription {
+    var displayName: string;
+}
+
+export declare interface DrawerDescriptionProps extends default_2.HTMLAttributes<HTMLParagraphElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function DrawerFooter({ children, className, ...rest }: DrawerFooterProps): default_2.ReactElement;
+
+declare namespace DrawerFooter {
+    var displayName: string;
+}
+
+export declare interface DrawerFooterProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function DrawerHeader({ children, className, ...rest }: DrawerHeaderProps): default_2.ReactElement;
+
+declare namespace DrawerHeader {
+    var displayName: string;
+}
+
+export declare interface DrawerHeaderProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+export declare interface DrawerOverlayProps extends default_2.HTMLAttributes<HTMLDivElement> {
+}
+
+/** Renders its children in document.body when the drawer is open. */
+declare function DrawerPortal({ children }: DrawerPortalProps): default_2.ReactPortal | null;
+
+declare namespace DrawerPortal {
+    var displayName: string;
+}
+
+export declare interface DrawerPortalProps {
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Drawer compound component. */
+export declare interface DrawerProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Side the drawer slides in from. @default 'right' */
+    side?: DrawerSide;
+    /** Size of the drawer panel. @default 'md' */
+    size?: DrawerSize;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+    /** Drawer sub-components as children. */
+    children: default_2.ReactNode;
+}
+
+/** Side the Drawer slides in from. */
+export declare type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+
+/** Size of the Drawer panel. */
+export declare type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+
+declare function DrawerTitle({ children, className, ...rest }: DrawerTitleProps): default_2.ReactElement;
+
+declare namespace DrawerTitle {
+    var displayName: string;
+}
+
+export declare interface DrawerTitleProps extends default_2.HTMLAttributes<HTMLHeadingElement> {
+    children?: default_2.ReactNode;
+}
+
+export declare interface DrawerTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** When true, renders as the child element via Slot instead of <button>. */
+    asChild?: boolean;
+    children?: default_2.ReactNode;
+}
+
+/**
+ * Field — the missing layer. Label + input + hint + error in one first-class component.
+ *
+ * Automatically:
+ * - Generates unique IDs and connects label htmlFor → input id
+ * - Wires aria-describedby from input → hint and/or error text
+ * - Propagates aria-invalid and data-error to the child when an error is set
+ * - Reads validation errors from the parent Form context (react-hook-form)
+ *
+ * Developers rebuild Field on every project. VhyxUI ships it first class.
+ *
+ * @example
+ * <Field name="email" label="Email" hint="We'll never share it" required>
+ *   <Input type="email" />
+ * </Field>
+ */
+export declare function Field({ name, label, hint, error, required, optional, layout, children, className, ...htmlProps }: FieldProps): default_2.ReactElement;
+
+export declare namespace Field {
+    var displayName: string;
+}
+
+/** Props for the Field component — the label/input/hint/error assembly layer. */
+export declare interface FieldProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Field name — used to read validation errors from the parent Form context
+     * when react-hook-form is wired up.
+     */
+    name: string;
+    /** Label rendered above (or beside) the input. */
+    label?: default_2.ReactNode;
+    /** Helper text rendered below the input. Connected via aria-describedby. */
+    hint?: default_2.ReactNode;
+    /**
+     * Error message. When set, the child input receives aria-invalid and
+     * data-error attributes and the error text is announced as a live region.
+     * If absent, Field reads the error from the parent Form context automatically.
+     */
+    error?: string;
+    /** When true, renders a required indicator (*) next to the label. */
+    required?: boolean;
+    /** When true, renders an optional indicator next to the label. */
+    optional?: boolean;
+    /** Field layout. Overrides the parent Form layout when set. @default 'vertical' */
+    layout?: 'vertical' | 'horizontal';
+    /** The single interactive child element (Input, Textarea, Select, etc.). */
+    children: default_2.ReactNode;
+}
+
+/** Minimal field validation state used by Field to read error messages. */
+declare type FieldValidationState = {
+    error?: {
+        message?: string;
+    };
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+};
+
+export declare const Form: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<FormProps> & default_2.RefAttributes<HTMLFormElement>>;
+
+/** Value provided by the Form context to all descendant Fields. */
+export declare interface FormContextValue {
+    /** react-hook-form form state, available when a form prop is provided. */
+    formState?: FormState<FieldValues>;
+    /** react-hook-form register function, available when a form prop is provided. */
+    register?: UseFormRegister<FieldValues>;
+    /** Per-field state accessor from react-hook-form, available when a form prop is provided. */
+    getFieldState?: (name: string) => FieldValidationState;
+    /** When true, all form controls in this form are disabled. */
+    disabled: boolean;
+    /** Size applied to all controls in this form. */
+    size: 'sm' | 'md' | 'lg';
+    /** Layout direction of fields in this form. */
+    layout: 'vertical' | 'horizontal' | 'inline';
+}
+
+/** Props for the Form component. */
+export declare interface FormProps extends default_2.FormHTMLAttributes<HTMLFormElement> {
+    /**
+     * react-hook-form return value from useForm().
+     * When provided, Field components automatically read validation errors,
+     * and form submission is handled via form.handleSubmit(onSubmit).
+     */
+    form?: UseFormReturn<FieldValues>;
+    /** Field layout within this form. @default 'vertical' */
+    layout?: 'vertical' | 'horizontal' | 'inline';
+    /** Size applied to all controls in this form. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * When true, all form controls are disabled.
+     * Propagated to Field children via context.
+     */
+    disabled?: boolean;
+    /**
+     * Called with validated form data on submission.
+     * When form prop is provided, this is called by react-hook-form after validation.
+     * When form prop is absent, called on native form submit with empty FieldValues.
+     */
+    onSubmit?: (data: FieldValues) => void | Promise<void>;
+}
+
+export declare const Input: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<InputProps> & default_2.RefAttributes<HTMLInputElement>>;
+
+/** Props for the Input component. */
+export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    /** Size of the input, maps to --vhyx-size-* height tokens. @default 'md' */
+    size?: InputSize;
+    /** Optional icon element rendered inside the input. */
+    icon?: default_2.ReactNode;
+    /** Side the icon appears on. @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** Content rendered after the input (inside the wrapper, to the right). */
+    suffix?: default_2.ReactNode;
+    /** Content rendered before the input (inside the wrapper, to the left). */
+    prefix?: default_2.ReactNode;
+    /** When true, always shows a clear button regardless of type. */
+    clearable?: boolean;
+    /** Called when the clear button is clicked. */
+    onClear?: () => void;
+    /** When true, applies the error visual state and sets aria-invalid. */
+    error?: boolean;
+    /** VhyxSeal contract override — merged with the default input contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Input component. */
+export declare type InputSize = 'sm' | 'md' | 'lg';
+
+export declare const Pagination: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<PaginationProps> & default_2.RefAttributes<HTMLElement>>;
+
+/** Props for the Pagination component. */
+export declare interface PaginationProps extends default_2.HTMLAttributes<HTMLElement> {
+    /** Current page (1-indexed). */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Called when the user activates a page button. */
+    onPageChange: (page: number) => void;
+    /**
+     * Number of sibling pages shown on each side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /** When true, renders First and Last buttons. @default false */
+    showFirstLast?: boolean;
+    /** When true, renders Previous and Next buttons. @default true */
+    showPrevNext?: boolean;
+    /** Size of the pagination buttons. @default 'md' */
+    size?: PaginationSize;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens for Pagination. */
+export declare type PaginationSize = 'sm' | 'md' | 'lg';
+
+export declare const Popover: default_2.ComponentType<PopoverProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Trigger: default_2.ForwardRefExoticComponent<PopoverTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+    Close: default_2.ForwardRefExoticComponent<PopoverCloseProps & default_2.RefAttributes<HTMLButtonElement>>;
+};
+
+export declare type PopoverAlign = 'start' | 'center' | 'end';
+
+/** Optional decorative arrow pointing toward the trigger. */
+declare function PopoverArrow({ className, ...rest }: PopoverArrowProps): default_2.ReactElement;
+
+declare namespace PopoverArrow {
+    var displayName: string;
+}
+
+export declare interface PopoverArrowProps extends default_2.SVGAttributes<SVGSVGElement> {
+}
+
+export declare interface PopoverCloseProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: default_2.ReactNode;
+    /**
+     * When true, renders as the child element via Slot instead of <button>.
+     * Use to avoid nested interactive elements when composing with Button.
+     */
+    asChild?: boolean;
+}
+
+/**
+ * The floating panel. Rendered in a portal.
+ * Non-modal (aria-modal="false") — focus is NOT trapped.
+ */
+declare function PopoverContent({ children, className, side, align, ...rest }: PopoverContentProps): default_2.ReactPortal | null;
+
+declare namespace PopoverContent {
+    var displayName: string;
+}
+
+export declare interface PopoverContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Side to position the popover relative to its trigger. @default 'bottom' */
+    side?: PopoverSide;
+    /** Alignment along the cross-axis. @default 'center' */
+    align?: PopoverAlign;
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Popover compound component. */
+export declare interface PopoverProps {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Default open state for uncontrolled mode. @default false */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+    /** Popover sub-components as children. */
+    children: default_2.ReactNode;
+}
+
+export declare type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+
+export declare interface PopoverTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** When true, renders as the child element via Slot instead of <button>. */
+    asChild?: boolean;
+    children?: default_2.ReactNode;
+}
+
+export declare const Progress: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProgressProps> & default_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the Progress component. */
+export declare interface ProgressProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Current progress value (0 to max). */
+    value?: number;
+    /** Maximum value. @default 100 */
+    max?: number;
+    /**
+     * When true, shows an indeterminate animation — use when progress is unknown.
+     * Omits aria-valuenow when set.
+     */
+    indeterminate?: boolean;
+    /** Size (height) of the progress bar. @default 'md' */
+    size?: ProgressSize;
+    /** Color variant of the progress bar fill. @default 'default' */
+    variant?: ProgressVariant;
+    /** When true, renders a percentage label above the bar. */
+    showLabel?: boolean;
+    /** Custom label text. Overrides the computed percentage when provided. */
+    label?: string;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Progress component. */
+export declare type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/** Color variant of the progress bar fill. */
+export declare type ProgressVariant = 'default' | 'success' | 'warning' | 'danger';
+
+export declare const RadioGroup: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<RadioGroupProps> & default_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the RadioGroup component. */
+export declare interface RadioGroupProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Controlled selected value. */
+    value?: string;
+    /** Default selected value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** When true, all items in the group are disabled. */
+    disabled?: boolean;
+    /** Layout direction of the radio items. @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size applied to all radio items. @default 'md' */
+    size?: RadioGroupSize;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the RadioGroup. */
+export declare type RadioGroupSize = 'sm' | 'md' | 'lg';
+
+/**
+ * RadioItem — a single option within a RadioGroup.
+ *
+ * Renders as `<button role="radio">`. Arrow keys navigate between items.
+ * Tab exits the group entirely. Only the selected or first item is tabbable.
+ *
+ * Must be used inside a RadioGroup.
+ */
+export declare const RadioItem: default_2.ForwardRefExoticComponent<RadioItemProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the RadioItem component. */
+export declare interface RadioItemProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** The value this item represents in the RadioGroup. */
+    value: string;
+    /** When true, this item cannot be selected. */
+    disabled?: boolean;
+    /** Label content rendered alongside the radio indicator. */
+    children?: default_2.ReactNode;
+}
+
+export declare const Select: default_2.ComponentType<SelectProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Trigger: default_2.ForwardRefExoticComponent<SelectTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Content: typeof SelectContent;
+    Item: default_2.ForwardRefExoticComponent<SelectItemProps & default_2.RefAttributes<HTMLDivElement>>;
+    Group: typeof SelectGroup;
+    Label: typeof SelectLabel;
+    Separator: typeof SelectSeparator;
+};
+
+/**
+ * Portal-rendered listbox. Deferred to client-only via `mounted` state so
+ * SSR and client initial renders both produce null — eliminating the
+ * hydration mismatch that occurred when SSR returned null but the client
+ * immediately rendered the portal with differing data-state / position values.
+ *
+ * SelectItem labels register on their own mount effects after this content
+ * mounts client-side, so the trigger label display is updated via state.
+ */
+declare function SelectContent({ children, className, ...rest }: SelectContentProps): default_2.ReactPortal | null;
+
+declare namespace SelectContent {
+    var displayName: string;
+}
+
+export declare interface SelectContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+declare function SelectGroup({ children, className, ...rest }: SelectGroupProps): default_2.ReactElement;
+
+declare namespace SelectGroup {
+    var displayName: string;
+}
+
+export declare interface SelectGroupProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+export declare interface SelectItemProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** The value this item represents. */
+    value: string;
+    /** When true, this item cannot be selected. */
+    disabled?: boolean;
+    children: default_2.ReactNode;
+}
+
+declare function SelectLabel({ children, className, ...rest }: SelectLabelProps): default_2.ReactElement;
+
+declare namespace SelectLabel {
+    var displayName: string;
+}
+
+export declare interface SelectLabelProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Select compound component. */
+export declare interface SelectProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Controlled selected value. */
+    value?: string;
+    /** Default selected value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when a new value is selected. */
+    onValueChange?: (value: string) => void;
+    /** When true, the trigger is disabled. */
+    disabled?: boolean;
+    /** Size applied to all Select sub-components. @default 'md' */
+    size?: SelectSize;
+    /** Placeholder text shown when no value is selected. */
+    placeholder?: string;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+declare function SelectSeparator({ className, ...rest }: SelectSeparatorProps): default_2.ReactElement;
+
+declare namespace SelectSeparator {
+    var displayName: string;
+}
+
+export declare interface SelectSeparatorProps extends default_2.HTMLAttributes<HTMLHRElement> {
+}
+
+/** Size tokens for Select. */
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+export declare interface SelectTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Optional icon rendered on the right. Defaults to a chevron SVG. */
+    icon?: default_2.ReactNode;
+    /** When true, renders as the child element via Slot instead of <button>. */
+    asChild?: boolean;
+}
+
+export declare const Separator: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<SeparatorProps> & default_2.RefAttributes<HTMLElement>>;
+
+/** Props for the Separator component. */
+export declare interface SeparatorProps extends default_2.HTMLAttributes<HTMLElement> {
+    /** Layout direction of the separator line. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * When true (default), the separator is purely visual — rendered as aria-hidden.
+     * When false, renders with role="separator" so screen readers announce it.
+     */
+    decorative?: boolean;
+    /**
+     * Optional text label centered on a horizontal separator.
+     * Not supported on vertical separators.
+     */
+    label?: string;
+}
+
+export declare const Spinner: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<SpinnerProps> & default_2.RefAttributes<SVGSVGElement>>;
+
+/** Props for the Spinner component. */
+export declare interface SpinnerProps extends default_2.SVGAttributes<SVGElement> {
+    /** Size of the spinner. @default 'md' */
+    size?: SpinnerSize;
+    /** Color variant of the spinner stroke. @default 'default' */
+    variant?: SpinnerVariant;
+    /**
+     * Screen reader label — always rendered as visually-hidden text.
+     * @default 'Loading'
+     */
+    label?: string;
+}
+
+/** Size tokens available on the Spinner component. */
+export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Color variant of the spinner stroke. */
+export declare type SpinnerVariant = 'default' | 'accent' | 'white';
+
+export declare const Switch: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<SwitchProps> & default_2.RefAttributes<HTMLButtonElement>>;
+
+/** Props for the Switch component. */
+export declare interface SwitchProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Default checked state for uncontrolled mode. @default false */
+    defaultChecked?: boolean;
+    /** Called when the switch is toggled. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Size of the switch. @default 'md' */
+    size?: SwitchSize;
+    /**
+     * When true, renders as the child element instead of <button role="switch">.
+     * ARIA attributes and handlers are merged onto the child via Slot.
+     */
+    asChild?: boolean;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens available on the Switch component. */
+export declare type SwitchSize = 'sm' | 'md' | 'lg';
+
+export declare const Tabs: default_2.ComponentType<TabsProps & default_2.RefAttributes<HTMLDivElement>> & {
+    List: default_2.ForwardRefExoticComponent<TabsListProps & default_2.RefAttributes<HTMLDivElement>>;
+    Trigger: default_2.ForwardRefExoticComponent<TabsTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Content: typeof TabsContent;
+};
+
+/** The content panel for a tab. Rendered only when its value is active. */
+declare function TabsContent({ value, children, className, ...rest }: TabsContentProps): default_2.ReactElement | null;
+
+declare namespace TabsContent {
+    var displayName: string;
+}
+
+export declare interface TabsContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** The value that activates this panel. */
+    value: string;
+    children?: default_2.ReactNode;
+}
+
+export declare interface TabsListProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children?: default_2.ReactNode;
+}
+
+/** Root props for the Tabs compound component. */
+export declare interface TabsProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    /** Controlled active tab value. */
+    value?: string;
+    /** Default active tab value for uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when the active tab changes. */
+    onValueChange?: (value: string) => void;
+    /** Layout direction of the tab list. @default 'horizontal' */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant of the tab list. @default 'default' */
+    variant?: TabsVariant;
+    /** Size of the tabs. @default 'md' */
+    size?: TabsSize;
+    /** VhyxSeal contract override. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Size tokens for Tabs. */
+export declare type TabsSize = 'sm' | 'md' | 'lg';
+
+export declare interface TabsTriggerProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** The value this trigger activates. */
+    value: string;
+    /** When true, renders as the child element via Slot instead of <button>. */
+    asChild?: boolean;
+    children?: default_2.ReactNode;
+}
+
+/** Variant visual styles for Tabs. */
+export declare type TabsVariant = 'default' | 'pills' | 'underline' | 'enclosed';
+
+export declare const Textarea: default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<TextareaProps> & default_2.RefAttributes<HTMLTextAreaElement>>;
+
+/** Props for the Textarea component. */
+export declare interface TextareaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Size of the textarea. @default 'md' */
+    size?: TextareaSize;
+    /**
+     * Resize behaviour.
+     * 'auto' makes the textarea grow with content up to maxRows.
+     * @default 'vertical'
+     */
+    resize?: TextareaResize;
+    /** Minimum number of visible rows. @default 3 */
+    minRows?: number;
+    /** Maximum number of rows before scroll activates. Applies when resize='auto'. */
+    maxRows?: number;
+    /** When true, renders a character count below the textarea. Requires maxLength. */
+    showCount?: boolean;
+    /** When true, applies error visual state and sets aria-invalid. */
+    error?: boolean;
+    /** VhyxSeal contract override — merged with the default textarea contract. */
+    contract?: Partial<ComponentContract>;
+}
+
+/** Resize behaviour for the textarea. */
+export declare type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both' | 'auto';
+
+/** Size tokens available on the Textarea component. */
+export declare type TextareaSize = 'sm' | 'md' | 'lg';
+
+export declare const Toast: default_2.ComponentType<ToastProviderProps> & {
+    displayName: string;
+};
+
+/** The VhyxUI imperative toast API. */
+export declare const toast: typeof toastFn;
+
+/**
+ * Shows a toast notification.
+ *
+ * @returns The id of the created toast (use with toast.dismiss(id) to remove early).
+ *
+ * @example
+ * toast('File saved')
+ * toast.success('Upload complete')
+ * toast.danger('Connection lost')
+ * toast.warning('Storage nearly full')
+ * toast.info('Update available', { action: { label: 'Install', onClick: install } })
+ */
+declare function toastFn(message: string, options?: ToastOptions): string;
+
+declare namespace toastFn {
+    var success: (message: string, options?: ToastOptions) => string;
+    var danger: (message: string, options?: ToastOptions) => string;
+    var warning: (message: string, options?: ToastOptions) => string;
+    var info: (message: string, options?: ToastOptions) => string;
+    var dismiss: (id?: string) => void;
+}
+
+/** A single toast item held in the store. */
+export declare interface ToastItem extends ToastOptions {
+    /** Unique identifier auto-generated on creation. */
+    id: string;
+    /** Primary message text. */
+    message: string;
+    /** Semantic variant controlling colour and icon. */
+    variant: ToastVariant;
+}
+
+/** Options accepted by toast() calls. */
+export declare interface ToastOptions {
+    /** Supplementary description rendered below the message. */
+    description?: string;
+    /**
+     * Duration in milliseconds before the toast auto-dismisses.
+     * Pass Infinity to prevent auto-dismiss.
+     */
+    duration?: number;
+    /** Optional action button rendered inside the toast. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** When true, renders a Dismiss button. @default true */
+    dismissible?: boolean;
+}
+
+/** Position of the toast region on screen. */
+export declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+/**
+ * ToastProvider — subscribes to the global toast store and renders active toasts.
+ * Place inside VhyxUIProvider. Developers do not need to add this directly.
+ */
+export declare function ToastProvider({ position, maxToasts, defaultDuration, children, }: ToastProviderProps): default_2.ReactElement;
+
+/** Props for the ToastProvider. */
+export declare interface ToastProviderProps {
+    /** Position of the toast region. @default 'bottom-right' */
+    position?: ToastPosition;
+    /** Maximum number of simultaneous toasts. @default 5 */
+    maxToasts?: number;
+    /** Default auto-dismiss duration in ms. @default 5000 */
+    defaultDuration?: number;
+    /** Application children. */
+    children?: default_2.ReactNode;
+}
+
+/**
+ * Toast store — zero React dependency.
+ *
+ * Singleton subscribe/notify pattern. The ToastProvider subscribes and
+ * re-renders when toasts change. toast() calls push items to this store.
+ */
+/** Semantic variants available on a toast. */
+export declare type ToastVariant = 'default' | 'success' | 'danger' | 'warning' | 'info';
+
+export declare const Tooltip: default_2.ComponentType<TooltipProps>;
+
+/** Props for the Tooltip component. */
+export declare interface TooltipProps {
+    /** The tooltip content (typically a short text label). */
+    content: default_2.ReactNode;
+    /** Side to show the tooltip relative to the trigger. @default 'top' */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment along the cross-axis. @default 'center' */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Delay in ms before the tooltip appears on hover.
+     * @default 400
+     */
+    delayDuration?: number;
+    /**
+     * How long the tooltip remains visible after mouse leaves one trigger
+     * before showing on the next trigger without the full delay.
+     * @default 300
+     */
+    skipDelayDuration?: number;
+    /**
+     * The single interactive child element. The tooltip is triggered by this element.
+     * Must be a React element that can receive ref, onMouseEnter, onMouseLeave,
+     * onFocus, onBlur, and aria-describedby props.
+     */
+    children: default_2.ReactElement;
+}
+
+/**
+ * Returns the current Form context value.
+ * Returns null when used outside a Form — Field and other consumers handle this gracefully.
+ */
+export declare function useFormContext(): FormContextValue | null;
+
+/**
+ * VhyxUIProvider — root provider for VhyxUI.
+ *
+ * Place once at the top of your application tree. Provides:
+ * - SealProvider (VhyxSeal contract registry for agent API access)
+ * - A visually hidden skip link as the first focusable element on every page.
+ *   Becomes visible on keyboard focus, linking to `#vhyx-main`.
+ * - The Toast notification region (imperative API via `toast()`).
+ *
+ * @example
+ * <VhyxUIProvider>
+ *   <main id="vhyx-main">
+ *     <App />
+ *   </main>
+ * </VhyxUIProvider>
+ */
+export declare function VhyxUIProvider({ children, toastPosition, maxToasts, defaultDuration, }: VhyxUIProviderProps): default_2.ReactElement;
+
+export declare namespace VhyxUIProvider {
+    var displayName: string;
+}
+
+/** Props for VhyxUIProvider. */
+export declare interface VhyxUIProviderProps {
+    /** All application content. */
+    children: default_2.ReactNode;
+    /**
+     * Position of the toast notification region.
+     * Passed through to ToastProvider.
+     * @default 'bottom-right'
+     */
+    toastPosition?: ToastPosition;
+    /**
+     * Maximum number of toasts shown simultaneously.
+     * @default 5
+     */
+    maxToasts?: number;
+    /**
+     * Default duration in milliseconds before a toast auto-dismisses.
+     * @default 4000
+     */
+    defaultDuration?: number;
+}
+
+export { }