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

package/dist/components/input/Input.d.ts

@@ -0,0 +1,35 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldProps } from '../field/field';
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps & {
+    /** Selects the input's compact, default, or spacious dimensions; numbers preserve the native HTML size attribute. */
+    size?: "sm" | "md" | "lg" | number;
+    /** Optional visible label that floats above the value when focused or filled. */
+    label?: ReactNode;
+    /** Decorative content positioned at the input's inline start. */
+    startIcon?: ReactNode;
+    /** Decorative content positioned at the input's inline end. */
+    endIcon?: ReactNode;
+    /** Explains why a disabled input is unavailable; shown in place of `description` while disabled. */
+    disabledReason?: string;
+};
+/**
+ * A native, single-line input with an optional floating label, help text, and error message.
+ * Connect react-hook-form with `field={register("name")}` and pass `errors.name?.message` to `error`.
+ * @example
+ * ```tsx
+ * import { Input } from '@pravalabs/ui/input';
+ * <Input label="Email" type="email" required description="We never share it." />
+ * ```
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & FieldProps & {
+    /** Selects the input's compact, default, or spacious dimensions; numbers preserve the native HTML size attribute. */
+    size?: "sm" | "md" | "lg" | number;
+    /** Optional visible label that floats above the value when focused or filled. */
+    label?: ReactNode;
+    /** Decorative content positioned at the input's inline start. */
+    startIcon?: ReactNode;
+    /** Decorative content positioned at the input's inline end. */
+    endIcon?: ReactNode;
+    /** Explains why a disabled input is unavailable; shown in place of `description` while disabled. */
+    disabledReason?: string;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/label/Label.d.ts

@@ -0,0 +1,15 @@
+import { LabelHTMLAttributes, ReactNode } from 'react';
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    /** Marks the associated form control as required and presents a readable cue. */
+    required?: boolean;
+    children: ReactNode;
+};
+/**
+ * Names a form control using native label association and readable required text.
+ * @example
+ * ```tsx
+ * import { Label } from '@pravalabs/ui/label';
+ * <Label htmlFor="email" required>Email address</Label>
+ * ```
+ */
+export declare function Label({ required, className, children, ...props }: LabelProps): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { FloatingAlign, FloatingPlacement } from '../../internal/overlay';
+export type PopoverProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
+    /** Focusable element that toggles the popover, such as a Button. */
+    trigger: ReactElement;
+    /** Heading that names the popover. Without one, pass `aria-label`. */
+    title?: ReactNode;
+    /** 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;
+    /** Extra class for the title slot; `className` goes on the floating surface. */
+    classNames?: {
+        title?: string;
+    };
+};
+/**
+ * Floating content anchored to a trigger. Focus moves in on open and back to the trigger on Escape.
+ * A press outside or tabbing away closes it. It doesn't trap focus; use Dialog for that.
+ * @example
+ * ```tsx
+ * import { Popover } from '@pravalabs/ui/popover';
+ *
+ * <Popover trigger={<Button>Share</Button>} title="Share this project">
+ *   <Input label="Link" readOnly value={url} />
+ * </Popover>
+ * ```
+ */
+export declare function Popover({ trigger, title, placement, align, open: openProp, defaultOpen, onOpenChange, classNames, className, children, id: idProp, ...props }: PopoverProps): import("react").JSX.Element;

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

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

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export type ProgressProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Current value; omit for an indeterminate task. */
+    value?: number;
+    /** Start of the progress range. */
+    min?: number;
+    /** End of the progress range; must be greater than `min`. */
+    max?: number;
+    /** Accessible name describing the task being measured. */
+    label: string;
+    /** Shows the label and the percentage (formatted for the provider locale) above the bar. */
+    showValue?: boolean;
+};
+/** Communicates determinate or indeterminate task progress with accessible progressbar semantics. */
+export declare function Progress({ value, min, max, label, showValue, className, style, ...props }: ProgressProps): import("react").JSX.Element;

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

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

package/dist/components/provider/PravaProvider.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+/** Library-owned text. Override any entry through `PravaProvider` `messages`. */
+export type BuiltInMessages = {
+    /** Announced after a required field label. */
+    required: string;
+    /** Announced while a component is busy. */
+    loading: string;
+    /** Close buttons on Dialog and Drawer. */
+    close: string;
+    /** Dismiss buttons on Alert and Toast. */
+    dismiss: string;
+    /** Accessible name of the Toast region. */
+    notifications: string;
+    /** Select search box label and placeholder. */
+    search: string;
+    /** Select list when nothing matches the search. */
+    noResults: string;
+    /** Select chip remove button; `{label}` is the option's text. */
+    removeOption: string;
+    /** Select multi-value summary for screen readers; `{count}` is locale-formatted. */
+    selectedCount: string;
+    /**
+     * Validation messages shown when a native constraint fails, named after `ValidityState`.
+     * `{minLength}`, `{maxLength}`, `{min}`, and `{max}` are replaced with locale-formatted values.
+     */
+    valueMissing: string;
+    /** `valueMissing` for checkboxes, radio groups, and selects. */
+    valueMissingChoice: string;
+    typeMismatchEmail: string;
+    typeMismatchUrl: string;
+    badInput: string;
+    patternMismatch: string;
+    tooShort: string;
+    tooLong: string;
+    rangeUnderflow: string;
+    rangeOverflow: string;
+    stepMismatch: string;
+};
+type PravaConfig = {
+    direction: "ltr" | "rtl";
+    locale: string;
+    messages: BuiltInMessages;
+};
+/** Reads the nearest provider configuration, or the documented defaults outside one. */
+export declare const usePravaConfig: () => PravaConfig;
+export type PravaProviderProps = {
+    /** Text direction for this subtree. Does not change the document's direction. */
+    direction?: "ltr" | "rtl";
+    /** Active locale for built-in messages and formatting; also sets `lang` on the subtree. */
+    locale?: string;
+    /** Overrides for library-owned labels and announcements. */
+    messages?: Partial<BuiltInMessages>;
+    /** Color theme for this subtree. `system` follows the user's OS preference. Omit to inherit. */
+    theme?: "light" | "dark" | "system";
+    children: ReactNode;
+};
+/**
+ * Scopes direction, locale, messages, and theme to its subtree without adding layout.
+ * @example
+ * ```tsx
+ * import { PravaProvider } from '@pravalabs/ui/provider';
+ *
+ * <PravaProvider direction="rtl" locale="ar" theme="system" messages={{ required: 'مطلوب' }}>
+ *   <App />
+ * </PravaProvider>
+ * ```
+ */
+export declare function PravaProvider({ direction, locale, messages, theme, children, }: PravaProviderProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { PravaProvider } from './PravaProvider';
+export type { BuiltInMessages, PravaProviderProps } from './PravaProvider';

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,58 @@
+import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode } from 'react';
+import { FieldProps } from '../field/field';
+export type RadioOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type RadioGroupProps = FieldProps & {
+    /** Group label, rendered as the fieldset legend. */
+    label: ReactNode;
+    options: RadioOption[];
+    /** Shared input name; generated when omitted. */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    /** Native change event from the selected radio (react-hook-form's `register` uses this). */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Called with the newly selected option value. */
+    onValueChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    /** Stacks options (default) or lays them out in a wrapping row. */
+    orientation?: "vertical" | "horizontal";
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * One choice from a set, built from native radios so arrow keys move and select as browsers expect.
+ * Connect it with `field={register("plan")}` or Controller's `field={field}`.
+ * @example
+ * ```tsx
+ * import { RadioGroup } from '@pravalabs/ui/radio-group';
+ * <RadioGroup label="Plan" options={[{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }]} field={register('plan')} />
+ * ```
+ */
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<FieldProps & {
+    /** Group label, rendered as the fieldset legend. */
+    label: ReactNode;
+    options: RadioOption[];
+    /** Shared input name; generated when omitted. */
+    name?: string;
+    value?: string;
+    defaultValue?: string;
+    /** Native change event from the selected radio (react-hook-form's `register` uses this). */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Called with the newly selected option value. */
+    onValueChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+    /** Stacks options (default) or lays them out in a wrapping row. */
+    orientation?: "vertical" | "horizontal";
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+} & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup';

package/dist/components/select/Select.d.ts

@@ -0,0 +1,76 @@
+import { ButtonHTMLAttributes, ChangeEventHandler, FocusEventHandler, FormEventHandler, ReactElement, ReactNode, RefAttributes } from 'react';
+import { FieldBinding, FieldProps } from '../field/field';
+export type SelectOption = {
+    /** Stable value the form submits. Keep it the same in every language. */
+    value: string;
+    /** What people see; pass translated text or a node such as `<Trans>`. */
+    label: ReactNode;
+    /** Text for search and type-ahead when `label` is not a plain string. */
+    searchText?: string;
+    icon?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+};
+export type SelectOptionGroup<T extends SelectOption = SelectOption> = {
+    /** Group heading; pass translated text or a node. */
+    label: ReactNode;
+    options: readonly T[];
+};
+type SelectBase<T extends SelectOption> = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "defaultValue" | "form" | "name" | "onBlur" | "onChange" | "onInvalid" | "type" | "value"> & Omit<FieldProps<HTMLSelectElement>, "field"> & {
+    /** Options and `{ label, options }` groups. Extra fields on an option are kept and typed. */
+    options: readonly (T | SelectOptionGroup<T>)[];
+    /** Visible label above the control. */
+    label?: ReactNode;
+    /** Shown until a choice is made. */
+    placeholder?: ReactNode;
+    size?: "sm" | "md" | "lg";
+    /**
+     * Where the list opens. `auto` picks from the space available. Another side is kept while it
+     * leaves about three rows of room (or fits, beside the field); otherwise `auto` takes over.
+     */
+    placement?: "auto" | "top" | "bottom" | "start" | "end";
+    name?: string;
+    form?: string;
+    required?: boolean;
+    /** Adds a search box that filters the options by label or `searchText`. */
+    searchable?: boolean;
+    /** Replaces the label and description of each row; use it to draw your extra fields. */
+    renderOption?: (option: T, state: {
+        selected: boolean;
+    }) => ReactNode;
+    /** Connects react-hook-form: `field={register("role")}` or Controller's `field={field}`. */
+    field?: FieldBinding<HTMLSelectElement>;
+    /** Change event from the form control underneath; react-hook-form uses this. */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    onBlur?: FocusEventHandler<HTMLSelectElement>;
+    onInvalid?: FormEventHandler<HTMLSelectElement>;
+};
+export type SelectProps<T extends SelectOption = SelectOption> = SelectBase<T> & ({
+    multiple?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, option: T) => void;
+} | {
+    /** Choose several options; they show as removable chips and the value is an array. */
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (values: string[], options: T[]) => void;
+});
+/**
+ * A custom dropdown with an options API, icons, groups, multi-select, and search, backed by a hidden
+ * native select so forms, native validation, and react-hook-form keep working.
+ * @example
+ * ```tsx
+ * import { Select } from '@pravalabs/ui/select';
+ * <Select
+ *   label={t('role')}
+ *   placeholder={t('chooseRole')}
+ *   field={register('role')}
+ *   error={errors.role?.message}
+ *   options={[{ value: 'admin', label: <Trans id="admin">Admin</Trans>, searchText: t('admin'), icon: <Shield /> }]}
+ * />
+ * ```
+ */
+export declare const Select: <T extends SelectOption = SelectOption>(props: SelectProps<T> & RefAttributes<HTMLSelectElement>) => ReactElement | null;
+export {};

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

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectOption, SelectOptionGroup, SelectProps } from './Select';

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export type SeparatorProps = HTMLAttributes<HTMLDivElement> & {
+    /** The direction the separator follows in its layout. */
+    orientation?: "horizontal" | "vertical";
+    /** Expose a semantic separator to assistive technology when it marks a meaningful boundary. */
+    decorative?: boolean;
+};
+/** Separates adjacent content with a quiet, theme-aware rule. */
+export declare function Separator({ orientation, decorative, className, ...props }: SeparatorProps): import("react").JSX.Element;

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

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

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Shape of the reserved content space. Set dimensions with `style` when the content size is known. */
+    shape?: "text" | "rect" | "circle";
+};
+/** Reserves layout space while content is loading; decorative motion stops for reduced-motion users. */
+export declare function Skeleton({ shape, className, style, ...props }: SkeletonProps): import("react").JSX.Element;

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

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

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties, HTMLAttributes } from 'react';
+export type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+    /** Optional status text for assistive technology. */
+    label?: string;
+    /** Indicator diameter. */
+    size?: "sm" | "md" | "lg";
+    /** Loading indicator style. */
+    variant?: "spinner" | "dots" | "bars" | "pulse" | "bounce";
+    /** Semantic color; follows the active light or dark tokens. */
+    tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info";
+    /** CSS color value, including a CSS custom property. Defaults to the primary token. */
+    color?: CSSProperties["color"];
+};
+/** Shows an ongoing process. Pass a label when the loading status needs to be announced. */
+export declare function Spinner({ label, size, variant, tone, color, className, style, ...props }: SpinnerProps): import("react").JSX.Element;

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

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

package/dist/components/stack/Stack.d.ts

@@ -0,0 +1,38 @@
+import { ElementType, HTMLAttributes } from 'react';
+export type StackProps = HTMLAttributes<HTMLElement> & {
+    /** Flow direction; `horizontal` follows the text direction. */
+    orientation?: "vertical" | "horizontal";
+    /** Space between children, in steps of 4px. */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Cross-axis alignment. Defaults to `stretch` when vertical and `center` when horizontal. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis distribution. */
+    justify?: "start" | "center" | "end" | "between";
+    /** Lets children wrap onto new lines when they run out of room. */
+    wrap?: boolean;
+    /** Element to render, such as `ul` or `nav`. */
+    as?: ElementType;
+};
+/**
+ * Arranges children in a row or column with a consistent gap, without wrapping each child.
+ * @example
+ * ```tsx
+ * import { Stack } from '@pravalabs/ui/stack';
+ *
+ * <Stack orientation="horizontal" gap={2} wrap><Button>Save</Button><Button>Cancel</Button></Stack>
+ * ```
+ */
+export declare const Stack: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /** Flow direction; `horizontal` follows the text direction. */
+    orientation?: "vertical" | "horizontal";
+    /** Space between children, in steps of 4px. */
+    gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+    /** Cross-axis alignment. Defaults to `stretch` when vertical and `center` when horizontal. */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis distribution. */
+    justify?: "start" | "center" | "end" | "between";
+    /** Lets children wrap onto new lines when they run out of room. */
+    wrap?: boolean;
+    /** Element to render, such as `ul` or `nav`. */
+    as?: ElementType;
+} & import('react').RefAttributes<HTMLElement>>;

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

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

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { FieldProps } from '../field/field';
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & FieldProps & {
+    /** Visible label; clicking it toggles the switch. */
+    label?: ReactNode;
+};
+/**
+ * An on/off setting that applies immediately: a native checkbox with `role="switch"`, so Space toggles it.
+ * Use Checkbox for choices that are submitted later.
+ * @example
+ * ```tsx
+ * import { Switch } from '@pravalabs/ui/switch';
+ * <Switch label="Dark mode" checked={dark} onChange={(e) => setDark(e.target.checked)} />
+ * ```
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & FieldProps & {
+    /** Visible label; clicking it toggles the switch. */
+    label?: ReactNode;
+} & import('react').RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,69 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type TabsProps = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
+    /** Called with the tab's `value` when it's chosen. */
+    onValueChange?: (value: string) => void;
+    /** `automatic` selects as focus moves. Use `manual` (Enter or Space) when panels are slow to show. */
+    activation?: "automatic" | "manual";
+    /** Layout of the tab list, which also picks the arrow keys: left/right or up/down. */
+    orientation?: "horizontal" | "vertical";
+} & ({
+    /** Selected tab when controlled. */
+    value: string;
+    defaultValue?: undefined;
+} | {
+    value?: undefined;
+    /** Initially selected tab when uncontrolled. */
+    defaultValue: string;
+});
+/**
+ * Switches between related panels. Inactive panels stay mounted and hidden, so they keep their state.
+ * @example
+ * ```tsx
+ * import { Tab, TabList, TabPanel, Tabs } from '@pravalabs/ui/tabs';
+ *
+ * <Tabs defaultValue="general">
+ *   <TabList aria-label="Settings">
+ *     <Tab value="general">General</Tab>
+ *     <Tab value="billing">Billing</Tab>
+ *   </TabList>
+ *   <TabPanel value="general">General settings</TabPanel>
+ *   <TabPanel value="billing">Billing settings</TabPanel>
+ * </Tabs>
+ * ```
+ */
+export declare function Tabs({ value: valueProp, defaultValue, onValueChange, activation, orientation, className, ...props }: TabsProps): import("react").JSX.Element;
+export type TabListProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Holds the Tabs. Name it with `aria-label` or `aria-labelledby`. It scrolls when tabs don't fit.
+ * @example
+ * ```tsx
+ * <TabList aria-label="Settings"><Tab value="general">General</Tab></TabList>
+ * ```
+ */
+export declare function TabList({ className, children, onKeyDown, ...props }: TabListProps): import("react").JSX.Element;
+export type TabProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type"> & {
+    /** Matches the TabPanel it opens. Keep it stable across languages. */
+    value: string;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+};
+/**
+ * One tab. Only the selected tab is in the page's tab order; arrow keys reach the rest.
+ * @example
+ * ```tsx
+ * <Tab value="billing">Billing</Tab>
+ * ```
+ */
+export declare function Tab({ value, icon, className, children, onClick, ...props }: TabProps): import("react").JSX.Element;
+export type TabPanelProps = Omit<HTMLAttributes<HTMLDivElement>, "value"> & {
+    /** Matches the Tab that opens it. */
+    value: string;
+};
+/**
+ * Content for one tab. It's focusable so keyboard users can reach and scroll it.
+ * @example
+ * ```tsx
+ * <TabPanel value="billing">Billing settings</TabPanel>
+ * ```
+ */
+export declare function TabPanel({ value, className, ...props }: TabPanelProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { Tab, TabList, TabPanel, Tabs } from './Tabs';
+export type { TabListProps, TabPanelProps, TabProps, TabsProps } from './Tabs';

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,26 @@
+import { TextareaHTMLAttributes } from 'react';
+import { FieldProps } from '../field/field';
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & FieldProps<HTMLTextAreaElement> & {
+    /** Starting height in lines; the box never gets shorter than this. Defaults to 3. */
+    rows?: number;
+    /** Height limit in lines; past it the text scrolls. Set equal to `rows` for a fixed height. Defaults to 12. */
+    maxRows?: number;
+    /** Opt-in native drag handle. Off by default. */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+};
+/**
+ * A multiline input that grows with its content between `rows` and `maxRows`, with help text and error message.
+ * @example
+ * ```tsx
+ * import { Textarea } from '@pravalabs/ui/textarea';
+ * <Textarea aria-label="Message" rows={2} maxRows={6} field={register('message')} />
+ * ```
+ */
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & FieldProps<HTMLTextAreaElement> & {
+    /** Starting height in lines; the box never gets shorter than this. Defaults to 3. */
+    rows?: number;
+    /** Height limit in lines; past it the text scrolls. Set equal to `rows` for a fixed height. Defaults to 12. */
+    maxRows?: number;
+    /** Opt-in native drag handle. Off by default. */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+} & import('react').RefAttributes<HTMLTextAreaElement>>;

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

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

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AlertProps } from '../alert';
+export type ToastOptions = {
+    /** Reuse an id to update a toast in place, such as "Saving" to "Saved". */
+    id?: string;
+    /** Short summary in bold. */
+    title?: ReactNode;
+    /** Supporting text. */
+    description?: ReactNode;
+    /** Semantic color. `danger` announces at once and stays until dismissed. */
+    tone?: AlertProps["tone"];
+    /** Control for this toast, such as an Undo Button. */
+    action?: ReactNode;
+    /**
+     * Milliseconds on screen, paused while hovered, focused, or in a hidden tab. Defaults to 5000,
+     * 10000 with an `action`, and `Infinity` (stays until dismissed) for `danger`.
+     */
+    duration?: number;
+};
+/**
+ * Shows a toast through the page's `<Toaster />` and returns its id.
+ * @example
+ * ```tsx
+ * import { toast } from '@pravalabs/ui/toast';
+ *
+ * toast({ title: 'Invitation sent', tone: 'success' });
+ * ```
+ */
+export declare function toast(options: ToastOptions): string;
+/**
+ * Dismisses one toast, or every toast when called with no id.
+ * @example
+ * ```tsx
+ * import { dismissToast } from '@pravalabs/ui/toast';
+ *
+ * dismissToast(id);
+ * ```
+ */
+export declare function dismissToast(id?: string): void;
+export type ToasterProps = HTMLAttributes<HTMLDivElement> & {
+    /** Screen corner or edge. `start` and `end` follow the text direction. */
+    placement?: "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end";
+};
+/**
+ * Renders the toasts started with `toast()`. Place one near your app's root, inside `PravaProvider`.
+ * shortcut: a modal Dialog makes everything outside it inert, so toasts show above it but can't
+ * be pressed or announced until it closes. Upgrade by rendering a Toaster inside that Dialog.
+ * @example
+ * ```tsx
+ * import { Toaster } from '@pravalabs/ui/toast';
+ *
+ * <Toaster placement="bottom-end" />
+ * ```
+ */
+export declare function Toaster({ placement, className, ...props }: ToasterProps): import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+export { dismissToast, toast, Toaster } from './Toast';
+export type { ToasterProps, ToastOptions } from './Toast';

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { FloatingPlacement } from '../../internal/overlay';
+export type TooltipProps = Omit<HTMLAttributes<HTMLDivElement>, "content" | "children"> & {
+    /** Short plain text. Don't put links, buttons, or anything essential here. */
+    content: ReactNode;
+    /** The focusable element it describes. */
+    children: ReactElement;
+    /** Milliseconds to wait on hover before showing. Keyboard focus shows it at once. */
+    delay?: number;
+    /** Preferred side. It flips when there's no room; `start` and `end` follow the text direction. */
+    placement?: FloatingPlacement;
+};
+/**
+ * Short supplementary text shown on hover, keyboard focus, or tap, and hidden on Escape.
+ * @example
+ * ```tsx
+ * import { Tooltip } from '@pravalabs/ui/tooltip';
+ *
+ * <Tooltip content="Visible to your whole team"><Button>Publish</Button></Tooltip>
+ * ```
+ */
+export declare function Tooltip({ content, children, delay, placement, className, id: idProp, ...props }: TooltipProps): import("react").JSX.Element;