@pravalabs/ui 0.0.0-stage → 1.0.0-rc.1

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Semantic color and default icon. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+    /** Short summary shown in bold above the message. */
+    title?: ReactNode;
+    /** Replaces the tone's icon; pass `null` to show none. */
+    icon?: ReactNode;
+    /** Controls for this message, such as a Button. They wrap below the text when space is tight. */
+    action?: ReactNode;
+    /** Shows a dismiss button and is called when it is pressed. Hiding the Alert stays with you. */
+    onDismiss?: () => void;
+};
+/**
+ * Contextual feedback that stays until the page removes it. `role="status"` is polite;
+ * pass `role="alert"` only when the message must interrupt.
+ * @example
+ * ```tsx
+ * import { Alert } from '@pravalabs/ui/alert';
+ *
+ * <Alert tone="warning" title="Storage almost full">Upgrade to keep uploading files.</Alert>
+ * ```
+ */
+export declare const Alert: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Semantic color and default icon. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+    /** Short summary shown in bold above the message. */
+    title?: ReactNode;
+    /** Replaces the tone's icon; pass `null` to show none. */
+    icon?: ReactNode;
+    /** Controls for this message, such as a Button. They wrap below the text when space is tight. */
+    action?: ReactNode;
+    /** Shows a dismiss button and is called when it is pressed. Hiding the Alert stays with you. */
+    onDismiss?: () => void;
+} & import('react').RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AvatarProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Image URL. A failed or missing image displays the fallback. */
+    src?: string;
+    /** Person's first name, used to form initials and an accessible name. */
+    firstName?: string;
+    /** Person's last name, used to form initials and an accessible name. */
+    lastName?: string;
+    /** Text alternative for an entity avatar or custom accessible name. */
+    alt?: string;
+    /** Content shown when the image is missing or fails; defaults to the initials. */
+    fallback?: ReactNode;
+    /** Avatar dimensions. */
+    size?: "sm" | "md" | "lg";
+};
+export declare function Avatar({ src, firstName, lastName, alt, fallback, size, className, onError, ...props }: AvatarProps): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Visible badge text or count. Status meaning must be in this text, not only the tone. */
+    content: ReactNode;
+    /** Element the badge is anchored to. Omit to render a standalone status label. */
+    children?: ReactNode;
+    /** Semantic color. Defaults to `danger` when anchored (counts) and `neutral` when standalone. */
+    tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info";
+    size?: "sm" | "md";
+    /** Corner of the anchored element, in logical directions so it mirrors in RTL. */
+    placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+};
+/**
+ * A compact, non-interactive status or count, either anchored to an element or standalone.
+ * @example
+ * ```tsx
+ * import { Badge } from '@pravalabs/ui/badge';
+ * <Badge content="3"><Button>Inbox</Button></Badge>
+ * <Badge tone="success" content="Active" />
+ * ```
+ */
+export declare function Badge({ tone, size, placement, content, className, children, ...props }: BadgeProps): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,50 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+type ButtonCommonProps = {
+    /** Selects the semantic visual treatment. */
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    /** Selects the button's compact, default, or spacious dimensions. */
+    size?: "sm" | "md" | "lg";
+    /** Shows a spinner and blocks activation while keeping the button focusable. */
+    loading?: boolean;
+    /** Disables the button's press, transition, and loading animations. */
+    disableAnimation?: boolean;
+    /** Adds a decorative icon before the label (left in LTR, right in RTL). */
+    startIcon?: ReactNode;
+    /** Adds a decorative icon after the label (right in LTR, left in RTL). */
+    endIcon?: ReactNode;
+    /** Stretches the button to the width of its container. */
+    fullWidth?: boolean;
+    /** Button label or content. */
+    children?: ReactNode;
+};
+type NativeButtonProps = ButtonCommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    href?: undefined;
+};
+/** Props for the Prava UI Button. Pass `href` to render a link styled as a button. */
+export type ButtonProps = (NativeButtonProps & {
+    /** Selects the native button action. */
+    type?: "button" | "submit" | "reset";
+}) | (NativeButtonProps & {
+    /** Selects icon-only presentation and requires an accessible name. */
+    type: "icon";
+    /** Names the icon-only button for assistive technology. */
+    "aria-label": string;
+}) | (ButtonCommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> & {
+    /** Renders an `<a>` with button styling. */
+    href: string;
+    /** Removes the link from navigation and the tab order. */
+    disabled?: boolean;
+    type?: undefined;
+});
+/**
+ * Renders an accessible action button, or a link styled as one when `href` is set.
+ * @example
+ * ```tsx
+ * import { Button } from '@pravalabs/ui/button';
+ *
+ * <Button startIcon={<PlusIcon />}>New project</Button>
+ * <Button href="/billing" variant="secondary">View billing</Button>
+ * ```
+ */
+export declare function Button(allProps: ButtonProps): import("react").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from 'react';
+/** Native root attributes for a Card. */
+export type CardProps = HTMLAttributes<HTMLDivElement>;
+/** Native header attributes for a Card. */
+export type CardHeaderProps = HTMLAttributes<HTMLElement>;
+/** Native content attributes for a Card. */
+export type CardContentProps = HTMLAttributes<HTMLDivElement>;
+/** Native footer attributes for a Card. */
+export type CardFooterProps = HTMLAttributes<HTMLElement>;
+/**
+ * Groups related content without adding click behavior or heading semantics.
+ * @example
+ * ```tsx
+ * import { Card, CardContent, CardHeader } from '@pravalabs/ui/card';
+ *
+ * <Card><CardHeader><h2>Account</h2></CardHeader><CardContent>Profile details</CardContent></Card>
+ * ```
+ */
+export declare function Card({ className, ...props }: CardProps): import("react").JSX.Element;
+/**
+ * Optional top section for a Card; choose heading levels in the consuming page.
+ * @example
+ * ```tsx
+ * import { Card, CardHeader } from '@pravalabs/ui/card';
+ *
+ * <Card><CardHeader><h2>Settings</h2></CardHeader></Card>
+ * ```
+ */
+export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+/**
+ * Main content section for a Card.
+ * @example
+ * ```tsx
+ * import { Card, CardContent } from '@pravalabs/ui/card';
+ *
+ * <Card><CardContent>Your account details appear here.</CardContent></Card>
+ * ```
+ */
+export declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+/**
+ * Optional bottom section for Card actions or supporting content.
+ * @example
+ * ```tsx
+ * import { Card, CardFooter } from '@pravalabs/ui/card';
+ *
+ * <Card><CardFooter><button type="button">Save</button></CardFooter></Card>
+ * ```
+ */
+export declare function CardFooter({ className, ...props }: CardFooterProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Card, CardContent, CardFooter, CardHeader } from './Card';
+export type { CardContentProps, CardFooterProps, CardHeaderProps, CardProps, } from './Card';

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

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldProps } from '../field/field';
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & FieldProps & {
+    /** Visible label; clicking it toggles the checkbox. */
+    label?: ReactNode;
+    /** Shows the mixed state (for "select all"); exposed natively as `aria-checked="mixed"`. */
+    indeterminate?: boolean;
+};
+/**
+ * A native checkbox with a painted indicator, label, help text, and error message.
+ * `className` and `style` apply to the label row; everything else reaches the native input.
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@pravalabs/ui/checkbox';
+ * <Checkbox label="Email me product updates" field={register('updates')} />
+ * ```
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & FieldProps & {
+    /** Visible label; clicking it toggles the checkbox. */
+    label?: ReactNode;
+    /** Shows the mixed state (for "select all"); exposed natively as `aria-checked="mixed"`. */
+    indeterminate?: boolean;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/container/Container.d.ts

@@ -0,0 +1,22 @@
+import { ElementType, HTMLAttributes } from 'react';
+export type ContainerProps = HTMLAttributes<HTMLElement> & {
+    /** Maximum content width. `fluid` removes the limit but keeps the responsive padding. */
+    size?: "sm" | "md" | "lg" | "xl" | "fluid";
+    /** Element to render, such as `main` or `section`. */
+    as?: ElementType;
+};
+/**
+ * Centers content and keeps a responsive inline gutter. Set `--prava-container-max` for a custom width.
+ * @example
+ * ```tsx
+ * import { Container } from '@pravalabs/ui/container';
+ *
+ * <Container as="main" size="md">Page content</Container>
+ * ```
+ */
+export declare const Container: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** Maximum content width. `fluid` removes the limit but keeps the responsive padding. */
+    size?: "sm" | "md" | "lg" | "xl" | "fluid";
+    /** Element to render, such as `main` or `section`. */
+    as?: ElementType;
+} & import('react').RefAttributes<HTMLElement>>;

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

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

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

@@ -0,0 +1,89 @@
+import { DialogHTMLAttributes, ReactElement, ReactNode } from 'react';
+export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, "open" | "title"> & {
+    /** Heading that names the dialog. */
+    title: ReactNode;
+    /** Supporting text announced with the title. */
+    description?: ReactNode;
+    /** Actions pinned below the scrolling content. */
+    footer?: ReactNode;
+    /** Focusable element that opens the dialog, such as a Button. Omit when you control `open`. */
+    trigger?: ReactElement;
+    /** Open state when controlled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called with the next state when the dialog asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Blocks the page behind it and traps focus. `false` lets people keep working around it. */
+    modal?: boolean;
+    /** Lets Escape and a press outside close it. Turn off when a choice is required. */
+    dismissible?: boolean;
+    /** Removes the close button; give people another way out in `footer`. */
+    hideClose?: boolean;
+    /** Maximum width. It always stays inside the viewport. */
+    size?: "sm" | "md" | "lg";
+    /** Extra classes for inner slots; `className` goes on the dialog root. */
+    classNames?: {
+        header?: string;
+        title?: string;
+        description?: string;
+        body?: string;
+        footer?: string;
+        close?: string;
+    };
+};
+/** Makes its child close the surrounding Dialog or Drawer when pressed. */
+export declare function DialogClose({ children }: {
+    children: ReactElement;
+}): ReactElement<{
+    [x: string]: unknown;
+}, string | import('react').JSXElementConstructor<any>>;
+/**
+ * A native `<dialog>`: the browser provides the top layer, focus containment and focus restoration.
+ * Focus lands on the first focusable child; mark another with `data-autofocus`.
+ * @example
+ * ```tsx
+ * import { Dialog, DialogClose } from '@pravalabs/ui/dialog';
+ *
+ * <Dialog
+ *   trigger={<Button>Delete project</Button>}
+ *   title="Delete this project?"
+ *   footer={<DialogClose><Button variant="outline">Cancel</Button></DialogClose>}
+ * >
+ *   This can't be undone.
+ * </Dialog>
+ * ```
+ */
+export declare const Dialog: import('react').ForwardRefExoticComponent<Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open"> & {
+    /** Heading that names the dialog. */
+    title: ReactNode;
+    /** Supporting text announced with the title. */
+    description?: ReactNode;
+    /** Actions pinned below the scrolling content. */
+    footer?: ReactNode;
+    /** Focusable element that opens the dialog, such as a Button. Omit when you control `open`. */
+    trigger?: ReactElement;
+    /** Open state when controlled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called with the next state when the dialog asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Blocks the page behind it and traps focus. `false` lets people keep working around it. */
+    modal?: boolean;
+    /** Lets Escape and a press outside close it. Turn off when a choice is required. */
+    dismissible?: boolean;
+    /** Removes the close button; give people another way out in `footer`. */
+    hideClose?: boolean;
+    /** Maximum width. It always stays inside the viewport. */
+    size?: "sm" | "md" | "lg";
+    /** Extra classes for inner slots; `className` goes on the dialog root. */
+    classNames?: {
+        header?: string;
+        title?: string;
+        description?: string;
+        body?: string;
+        footer?: string;
+        close?: string;
+    };
+} & import('react').RefAttributes<HTMLDialogElement>>;

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogClose } from './Dialog';
+export type { DialogProps } from './Dialog';

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,46 @@
+import { DialogClose, DialogProps } from '../dialog';
+export type DrawerProps = DialogProps & {
+    /** Edge it slides from. `start` and `end` follow the text direction. */
+    placement?: "start" | "end" | "top" | "bottom";
+};
+/** Makes its child close the surrounding Drawer when pressed. */
+export declare const DrawerClose: typeof DialogClose;
+/**
+ * A Dialog anchored to a screen edge, with the same props, focus, and dismissal rules.
+ * @example
+ * ```tsx
+ * import { Drawer, DrawerClose } from '@pravalabs/ui/drawer';
+ *
+ * <Drawer
+ *   trigger={<Button>Filters</Button>}
+ *   title="Filters"
+ *   footer={<DrawerClose><Button>Apply</Button></DrawerClose>}
+ * >
+ *   Filter fields
+ * </Drawer>
+ * ```
+ */
+export declare const Drawer: import('react').ForwardRefExoticComponent<Omit<import('react').DialogHTMLAttributes<HTMLDialogElement>, "title" | "open"> & {
+    title: import('react').ReactNode;
+    description?: import('react').ReactNode;
+    footer?: import('react').ReactNode;
+    trigger?: import('react').ReactElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    dismissible?: boolean;
+    hideClose?: boolean;
+    size?: "sm" | "md" | "lg";
+    classNames?: {
+        header?: string;
+        title?: string;
+        description?: string;
+        body?: string;
+        footer?: string;
+        close?: string;
+    };
+} & {
+    /** Edge it slides from. `start` and `end` follow the text direction. */
+    placement?: "start" | "end" | "top" | "bottom";
+} & import('react').RefAttributes<HTMLDialogElement>>;

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

@@ -0,0 +1,2 @@
+export { Drawer, DrawerClose } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,59 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { FloatingAlign, FloatingPlacement } from '../../internal/overlay';
+export type DropdownMenuAction = {
+    /** What people see; pass translated text or a node. */
+    label: ReactNode;
+    /** Runs when the item is chosen, after the menu closes and focus returns to the trigger. */
+    onSelect?: () => void;
+    /** Renders the item as a link. */
+    href?: string;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** Stays reachable by keyboard so people can discover it, but can't be chosen. */
+    disabled?: boolean;
+    /** `danger` marks a destructive action. */
+    tone?: "default" | "danger";
+};
+export type DropdownMenuSeparator = {
+    separator: true;
+};
+export type DropdownMenuGroup = {
+    /** Group heading; pass translated text or a node. */
+    label: ReactNode;
+    items: readonly DropdownMenuAction[];
+};
+export type DropdownMenuItem = DropdownMenuAction | DropdownMenuSeparator | DropdownMenuGroup;
+export type DropdownMenuProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Focusable element that opens the menu, such as a Button. */
+    trigger: ReactElement;
+    /** Actions, `{ separator: true }` dividers, and `{ label, items }` groups. */
+    items: readonly DropdownMenuItem[];
+    /** Preferred side. It flips when there's no room; `start` and `end` follow the text direction. */
+    placement?: FloatingPlacement;
+    /** Alignment against the trigger along that side. */
+    align?: FloatingAlign;
+    /** Open state when controlled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Called with the next state when it asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A list of actions opened from a trigger, following the WAI-ARIA menu button pattern.
+ * For choosing a value, use Select.
+ * @example
+ * ```tsx
+ * import { DropdownMenu } from '@pravalabs/ui/dropdown-menu';
+ *
+ * <DropdownMenu
+ *   trigger={<Button variant="outline">Actions</Button>}
+ *   items={[
+ *     { label: 'Rename', onSelect: rename },
+ *     { separator: true },
+ *     { label: 'Delete', tone: 'danger', onSelect: remove },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function DropdownMenu({ trigger, items, placement, align, open: openProp, defaultOpen, onOpenChange, className, id: idProp, ...props }: DropdownMenuProps): import("react").JSX.Element;

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuAction, DropdownMenuGroup, DropdownMenuItem, DropdownMenuProps, DropdownMenuSeparator, } from './DropdownMenu';

package/dist/components/field/field.d.ts

@@ -0,0 +1,87 @@
+import { AriaAttributes, ChangeEvent, FocusEvent, ForwardedRef, FormEvent, InputHTMLAttributes, ReactNode, Ref } from 'react';
+import { BuiltInMessages } from '../provider/PravaProvider';
+export type FieldControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+/**
+ * A form library's connection to a control, typed by shape so Prava has no form-library dependency.
+ * Matches both react-hook-form's `register()` result and `Controller`'s `field`.
+ */
+export type FieldBinding<E extends FieldControl = HTMLInputElement> = {
+    name?: string;
+    value?: unknown;
+    disabled?: boolean;
+    onChange?: (event: ChangeEvent<E>) => unknown;
+    onBlur?: (event: FocusEvent<E>) => unknown;
+    ref?: Ref<E>;
+};
+/** Props every Prava form control shares. */
+export type FieldProps<E extends FieldControl = HTMLInputElement> = {
+    /**
+     * Connects the control to a form library: `field={register("email")}`, or `field={field}` inside
+     * react-hook-form's `Controller`. The control's own props win, and its `onChange`/`onBlur` still run.
+     */
+    field?: FieldBinding<E>;
+    /** Help text shown below the control and linked with `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * Error message shown below the control; marks it invalid and replaces built-in validation text.
+     * Pass `errors.name?.message` from react-hook-form, or `true` to mark invalid without text.
+     */
+    error?: ReactNode;
+    /** Marks the control invalid without a message. */
+    invalid?: boolean;
+};
+export declare const FieldContext: import('react').Context<boolean>;
+export declare const isMessage: (node: ReactNode) => boolean;
+export declare const setRef: <T>(ref: Ref<T> | undefined, value: T | null) => void;
+/** Merges a `field` binding into a control's props and ref. Choice controls map its value to `checked`. */
+export declare function bindField<E extends FieldControl, P extends {
+    field?: FieldBinding<E>;
+    onChange?: (event: ChangeEvent<E>) => void;
+    onBlur?: (event: FocusEvent<E>) => void;
+}>({ field, ...props }: P, forwardedRef: ForwardedRef<E>, valueProp?: "value" | "checked"): Omit<P, "field"> & {
+    ref: Ref<E>;
+};
+/** Replaces `{name}` placeholders in a message; numbers are formatted for the locale. */
+export declare const fillMessage: (template: string, params: Record<string, string | number>, locale: string) => string;
+/**
+ * Calls `onWrite` after code assigns a DOM property directly, which fires no event; react-hook-form's
+ * `reset` and `setValue` do this. React tracks input values with the same instance-level accessor.
+ */
+export declare function onPropertyWrite<E extends object>(el: E, prop: keyof E & string, onWrite: () => void): void;
+/** Maps a failed native constraint to the provider's localized message. */
+export declare function validationMessage(el: FieldControl, messages: BuiltInMessages, locale: string): string | undefined;
+type UseFieldOptions<E extends FieldControl> = Omit<FieldProps<E>, "field"> & {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    onBlur?: (event: FocusEvent<E>) => void;
+    onChange?: (event: ChangeEvent<E>) => void;
+    onInvalid?: (event: FormEvent<E>) => void;
+};
+/**
+ * Shared ids, ARIA, messages, and localized native validation for every form control.
+ * Native messages appear after the user edits and leaves the control, or on submit, and clear
+ * as soon as the value is valid. `<form noValidate>` hands validation to the app (for example react-hook-form).
+ */
+export declare function useField<E extends FieldControl>({ id, description, error, invalid, onBlur, onChange, onInvalid, ...aria }: UseFieldOptions<E>): {
+    id: string;
+    controlProps: {
+        id: string;
+        "aria-invalid": true | undefined;
+        "aria-describedby": string | undefined;
+        onBlur: (event: FocusEvent<E>) => void;
+        onChange: (event: ChangeEvent<E>) => void;
+        onInvalid: (event: FormEvent<E>) => void;
+    };
+    messages: import("react").JSX.Element;
+};
+export type ChoiceProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    kind: "checkbox" | "radio" | "switch";
+    label?: ReactNode;
+};
+/** The shared native input + painted indicator behind Checkbox, Switch, and RadioGroup options. */
+export declare const Choice: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    kind: "checkbox" | "radio" | "switch";
+    label?: ReactNode;
+} & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/form-field/FormField.d.ts

@@ -0,0 +1,41 @@
+import { AriaAttributes, ChangeEventHandler, FocusEventHandler, FormEventHandler, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { FieldControl } from '../field/field';
+type AssociatedControlProps = {
+    id?: string;
+    type?: string;
+    className?: string;
+    "data-size"?: string;
+    required?: boolean;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    "aria-required"?: AriaAttributes["aria-required"];
+    onBlur?: FocusEventHandler<FieldControl>;
+    onChange?: ChangeEventHandler<FieldControl>;
+    onInvalid?: FormEventHandler<FieldControl>;
+};
+export type FormFieldProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Accessible label rendered above the control. */
+    label: ReactNode;
+    /** A single native or Prava form control to associate with this field. Native text inputs, textareas, and selects get Prava's control styling. */
+    control: ReactElement<AssociatedControlProps>;
+    /** Optional explanatory text associated with the control. */
+    description?: ReactNode;
+    /** Validation message associated with the control; replaces built-in validation text. */
+    error?: ReactNode;
+    /** Marks the control required and adds the readable cue to the label. */
+    required?: boolean;
+    /** Stable control ID; generated when omitted. */
+    id?: string;
+};
+/**
+ * Composes a label, any control, help text, and error with stable accessible associations.
+ * Native and Prava controls both get localized validation messages here.
+ * @example
+ * ```tsx
+ * import { FormField } from '@pravalabs/ui/form-field';
+ * import { Input } from '@pravalabs/ui/input';
+ * <FormField label="Email" required error={errors.email?.message} control={<Input type="email" field={register('email')} />} />
+ * ```
+ */
+export declare function FormField({ label, control, description, error, required, id, className, ...props }: FormFieldProps): import("react").JSX.Element;
+export {};

package/dist/components/form-field/index.d.ts

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

package/dist/components/grid/Grid.d.ts

@@ -0,0 +1,36 @@
+import { ElementType, HTMLAttributes } from 'react';
+export type GridProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Most columns to show. Columns still drop when each would be narrower than `minColumnWidth`,
+     * down to one. Omit to fit as many `minColumnWidth` columns as the space allows.
+     */
+    columns?: number;
+    /** Narrowest a column may get, as a CSS length. Defaults to 16rem, or 10rem with `columns`. */
+    minColumnWidth?: string;
+    /** Space between cells, in steps of 4px. */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Element to render, such as `ul` or `section`. */
+    as?: ElementType;
+};
+/**
+ * Responsive CSS grid: fills the width, and collapses to one column on its own when space is narrow.
+ * @example
+ * ```tsx
+ * import { Grid } from '@pravalabs/ui/grid';
+ *
+ * <Grid columns={3} gap={4}><Card /><Card /><Card /></Grid>
+ * ```
+ */
+export declare const Grid: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /**
+     * Most columns to show. Columns still drop when each would be narrower than `minColumnWidth`,
+     * down to one. Omit to fit as many `minColumnWidth` columns as the space allows.
+     */
+    columns?: number;
+    /** Narrowest a column may get, as a CSS length. Defaults to 16rem, or 10rem with `columns`. */
+    minColumnWidth?: string;
+    /** Space between cells, in steps of 4px. */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Element to render, such as `ul` or `section`. */
+    as?: ElementType;
+} & import('react').RefAttributes<HTMLElement>>;

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

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