@parrot-co/parrot-ui 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
 import React__default from 'react';
 import * as react_aria_components from 'react-aria-components';
-import { TextFieldProps, NumberFieldProps, ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, CheckboxFieldProps, CheckboxGroupProps as CheckboxGroupProps$1, MenuTriggerProps as MenuTriggerProps$1, MenuProps as MenuProps$1, Placement, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, RadioFieldProps, RadioGroupProps as RadioGroupProps$1, CalendarProps as CalendarProps$1, DateValue, RangeCalendarProps as RangeCalendarProps$1, DateFieldProps as DateFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ProgressBarProps, SwitchFieldProps, SliderProps as SliderProps$1, Key, TabsProps as TabsProps$1, Selection, SortDescriptor, ModalOverlayProps, PopoverProps as PopoverProps$1, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, Color as Color$1, ColorAreaProps as ColorAreaProps$1, ColorFieldProps as ColorFieldProps$1, ColorSwatchPickerProps as ColorSwatchPickerProps$1, ColorSliderProps as ColorSliderProps$1 } from 'react-aria-components';
+import { TextFieldProps, NumberFieldProps, ButtonProps as ButtonProps$1, ToggleButtonProps as ToggleButtonProps$1, CheckboxFieldProps, CheckboxGroupProps as CheckboxGroupProps$1, MenuTriggerProps as MenuTriggerProps$1, MenuProps as MenuProps$1, Placement, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, RadioFieldProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, CalendarProps as CalendarProps$1, DateValue, RangeCalendarProps as RangeCalendarProps$1, DateFieldProps as DateFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ProgressBarProps, SwitchFieldProps, SliderProps as SliderProps$1, Key, TabsProps as TabsProps$1, Selection, SortDescriptor, ModalOverlayProps, PopoverProps as PopoverProps$1, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, Color as Color$1, ColorAreaProps as ColorAreaProps$1, ColorFieldProps as ColorFieldProps$1, ColorSwatchPickerProps as ColorSwatchPickerProps$1, ColorSliderProps as ColorSliderProps$1, TooltipProps as TooltipProps$1 } from 'react-aria-components';
 import { OverlayTriggerProps } from 'react-stately';
 
 /**
@@ -70,6 +70,11 @@ type ColorVariant = Variant;
 type InputAppearance = "outline" | "filled" | "filled-outline";
 /** The shared control-size scale (`.prt-size` recipe). */
 type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * The size range every control supports — the valid range for a theme-level
+ * `size` default. `2xs` (and larger opt-ins like `2xl`/`3xl`) stay per-component.
+ */
+type ControlSize = "xs" | "sm" | "md" | "lg" | "xl";
 /** The radius scale (`data-radius` recipe). */
 type Radius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /** @deprecated use `Radius` */
@@ -77,11 +82,6 @@ type BorderRadius = "none" | "sm" | "md" | "lg" | "full";
 type Appearance = "light" | "dark";
 /** @deprecated use `Size` */
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
-type ButtonAppearance = "primary" | "secondary" | "minimal";
-type ButtonAppearanceSchemaType = Partial<Record<ButtonAppearance, {
-    variant: Variant;
-    color: Color;
-}>>;
 type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 
 type ActionStatus = "idle" | "loading" | "success" | "error";
@@ -135,6 +135,45 @@ type NumberInputProps = Omit<NumberFieldProps, "className" | "style" | "children
 };
 declare function NumberInput({ appearance, size, color, classNames, styles, append, prepend, placeholder, showSteppers, error, label, description, incrementIcon, decrementIcon, inputRef, wrapperRef, validationStatus, shape, radius, ...props }: NumberInputProps): React$1.JSX.Element;
 
+type PinInputType = "numeric" | "alphanumeric" | "all";
+type PinInputProps = Omit<FieldComponentProps<"input" | "control" | "group" | "slot">, "prepend" | "append" | "shape"> & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    /** Number of characters. Alias: `maxLength`. Defaults to 6. */
+    length?: number;
+    maxLength?: number;
+    type?: PinInputType;
+    /** Overrides `type`'s value filter. A `^...$` anchored source is expected. */
+    pattern?: RegExp;
+    /** Render each filled slot as a dot instead of the character. */
+    mask?: boolean;
+    /** Placeholder character shown in empty slots. */
+    placeholder?: string;
+    isReadOnly?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+    /** Auto-render mode only: split slots into groups of this size. */
+    groupSize?: number;
+    /** Auto-render mode only: node rendered between groups. */
+    separator?: React$1.ReactNode;
+    children?: React$1.ReactNode;
+};
+declare function PinInput({ value, defaultValue, onChange, onComplete, length, maxLength, type, pattern, mask, placeholder, isReadOnly, autoFocus, name, groupSize, separator, children, inputRef: inputRefProp, classNames, styles, ...fieldProps }: PinInputProps): React$1.JSX.Element;
+interface PinInputGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputGroup({ className, ...props }: PinInputGroupProps): React$1.JSX.Element;
+interface PinInputSlotProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    index: number;
+}
+declare function PinInputSlot({ index, className, ...props }: PinInputSlotProps): React$1.JSX.Element;
+interface PinInputSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    _SILENCE_TS?: boolean;
+}
+declare function PinInputSeparator({ className, children, ...props }: PinInputSeparatorProps): React$1.JSX.Element;
+
 type TextWeight = "light" | "regular" | "medium" | "semi-bold" | "bold" | "heavy" | "inherit";
 type TextColorVariant = "light" | "lighter" | "dark" | "default";
 interface TextProps extends Omit<React$1.ComponentPropsWithRef<"span">, "color"> {
@@ -373,37 +412,21 @@ interface RadioItemProps extends Omit<RadioFieldProps, "className" | "style" | "
 }
 declare function RadioItem({ className, style, classNames, styles, children, ...props }: RadioItemProps): React$1.JSX.Element;
 
-type SingleOrMultipleValue = ID | Array<ID>;
 type SelectionMode = "single" | "multiple";
-interface MockNativeOnChangeEvent {
-    target: {
-        value: SingleOrMultipleValue;
-        name?: string;
-    };
-}
-interface SelectProps<T extends object> extends Pick<ListBoxProps<T>, "items" | "labelKey" | "valueKey" | "sectionKey" | "renderOption" | "renderSectionLabel" | "disabledKeys" | "children">, StyleProps<"wrapper" | "trigger" | "value" | "placeholder" | "label" | "popover"> {
+interface SelectProps<T extends object, M extends SelectionMode = "single"> extends Omit<SelectProps$1<T, M>, "className" | "style" | "children" | "isInvalid" | "selectedKey" | "defaultSelectedKey" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange">, Pick<ListBoxProps<T>, "items" | "labelKey" | "valueKey" | "sectionKey" | "renderOption" | "renderSectionLabel" | "disabledKeys" | "children">, StyleProps<"wrapper" | "trigger" | "value" | "placeholder" | "label" | "popover"> {
     label?: React$1.ReactNode;
     description?: React$1.ReactNode;
     error?: React$1.ReactNode;
-    placeholder?: string;
-    selectionMode?: SelectionMode;
-    value?: SingleOrMultipleValue;
-    defaultValue?: SingleOrMultipleValue;
-    name?: string;
-    isDisabled?: boolean;
-    isRequired?: boolean;
     color?: Color;
     listBoxColor?: Color;
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    radius?: BorderRadius;
+    radius?: Radius;
     appearance?: InputAppearance;
     showSectionSeparator?: boolean;
     showSelectionIndicator?: boolean;
     renderValue?: (value: T) => React$1.ReactNode;
-    onChange?: (event: MockNativeOnChangeEvent) => void;
-    onSelectionChange?: (keys: Array<ID>) => void;
 }
-declare function Select<T extends object>({ label, description, error, placeholder, selectionMode, appearance, renderValue, color, size, radius, listBoxColor, name, value, defaultValue, isDisabled, isRequired, disabledKeys, onChange, onSelectionChange, showSectionSeparator, showSelectionIndicator, items, children, labelKey, valueKey, sectionKey, renderOption, renderSectionLabel, className, classNames, style, styles, }: SelectProps<T>): React$1.JSX.Element;
+declare function Select<T extends object, M extends SelectionMode = "single">({ label, description, error, placeholder, appearance, renderValue, color, size, radius, listBoxColor, showSectionSeparator, showSelectionIndicator, items, children, labelKey, valueKey, sectionKey, renderOption, renderSectionLabel, disabledKeys, className, classNames, style, styles, "aria-label": ariaLabel, ...racProps }: SelectProps<T, M>): React$1.JSX.Element;
 
 interface CalendarProps extends Omit<CalendarProps$1<DateValue>, "className" | "style" | "children" | "visibleDuration"> {
     numberOfMonths?: number;
@@ -599,12 +622,13 @@ interface TableProps<T extends object> extends StyleProps<"wrapper" | "header" |
     selectionMode?: "none" | "single" | "multiple";
     selectedKeys?: Selection;
     onSelectionChange?: (keys: Selection) => void;
+    onRowAction?: (key: string | number) => void;
     sortDescriptor?: SortDescriptor;
     onSortChange?: (descriptor: SortDescriptor) => void;
     renderEmptyState?: () => React$1.ReactNode;
     "aria-label"?: string;
 }
-declare function Table<T extends object>({ columns, data, getRowId, selectionMode, selectedKeys, onSelectionChange, sortDescriptor, onSortChange, renderEmptyState, radius, className, classNames, style, styles, ...props }: TableProps<T>): React$1.JSX.Element;
+declare function Table<T extends object>({ columns, data, getRowId, selectionMode, selectedKeys, onSelectionChange, onRowAction, sortDescriptor, onSortChange, renderEmptyState, radius, className, classNames, style, styles, ...props }: TableProps<T>): React$1.JSX.Element;
 
 interface TimelineProps<T> extends StyleProps<"wrapper" | "item" | "content"> {
     items: Array<T>;
@@ -635,6 +659,58 @@ interface ModalProps extends Omit<ModalOverlayProps, "children" | "className" |
 declare function Modal({ variant, radius, isDismissable, width, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, confirmButtonProps, cancelButtonProps, showCloseButton, hideTitle, onClose, children, className, style, classNames, styles, ...props }: ModalProps): React$1.JSX.Element;
 declare function useModal(props?: OverlayTriggerProps): react_aria_components.OverlayTriggerState;
 
+/**
+ * A modal component registered in the registry receives these three props from
+ * the provider. Extend it in your own modal components:
+ *
+ *   interface EditUserModalProps extends BaseModalProps<User> { userId: string }
+ *
+ * Call `onResolve(result)` to close with a value; `onOpenChange(false)` dismisses
+ * (resolves with `undefined`). Resolve wins once — call `onResolve`, not
+ * `onOpenChange`, when you have a result.
+ */
+interface BaseModalProps<TResult = void> extends Pick<ModalOverlayProps, "isOpen" | "onOpenChange"> {
+    onResolve: (result: TResult) => void;
+}
+type ModalComponent = React$1.ComponentType<any>;
+type ModalDef<C extends ModalComponent = ModalComponent> = {
+    component: C;
+};
+interface ModalRegistry {
+    [key: string]: ModalDef;
+}
+/**
+ * Ambient registry — augment it (like ParrotColorRegistry) so `useModals().open`
+ * is fully typed with no generics at the call site:
+ *
+ *   declare module "@parrot-co/parrot-ui" {
+ *     interface ParrotModalRegistry {
+ *       editUser: { component: typeof EditUserModal };
+ *     }
+ *   }
+ */
+interface ParrotModalRegistry {
+}
+type ModalKey = keyof ParrotModalRegistry & string;
+type ComponentOf<K extends ModalKey> = ParrotModalRegistry[K] extends ModalDef<infer C> ? C : ModalComponent;
+type ModalInputProps<K extends ModalKey> = Omit<React$1.ComponentProps<ComponentOf<K>>, "isOpen" | "onOpenChange" | "onResolve">;
+type ModalResult<K extends ModalKey> = React$1.ComponentProps<ComponentOf<K>> extends {
+    onResolve?: (result: infer TResult) => void;
+} ? TResult : void;
+interface ModalControls {
+    open: <K extends ModalKey>(key: K, props?: ModalInputProps<K>) => Promise<ModalResult<K>>;
+    close: (key: ModalKey) => void;
+    update: <K extends ModalKey>(key: K, props: ModalInputProps<K>) => void;
+    isOpen: (key: ModalKey) => boolean;
+}
+
+interface ModalProviderProps {
+    registry: ModalRegistry;
+    children: React$1.ReactNode;
+}
+declare function ModalProvider({ registry, children }: ModalProviderProps): React$1.JSX.Element;
+declare function useModals(): ModalControls;
+
 type TagFormat = "text" | "email" | "url" | "number";
 interface TagInputProps extends FieldComponentProps<"input"> {
     tags?: Array<string>;
@@ -692,10 +768,9 @@ declare function TagGroupItem({ children, textValue, ...props }: TagGroupItemPro
 
 interface ThemeProviderValue {
     color?: Color;
-    radius?: BorderRadius;
-    appearance?: Appearance;
-    buttonAppearance?: ButtonAppearanceSchemaType;
-    avatarRadiusSize?: BorderRadius;
+    radius?: Radius;
+    size?: ControlSize;
+    colorScheme?: Appearance;
     inputAppearance?: InputAppearance;
 }
 interface ThemeProviderProps extends ThemeProviderValue {
@@ -770,4 +845,127 @@ interface ToggleProps extends ButtonToggleProps, StyleProps<"wrapper"> {
 }
 declare function Toggle({ value, ...props }: ToggleProps): React$1.JSX.Element;
 
-export { Avatar, AvatarGroup, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, DateField, DatePicker, DateRangePicker, FileUploader, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalProps, NumberInput, ListBoxItem as Option, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, Toggle, ToggleButton, ToggleGroup, parseColor, useModal, useTheme };
+type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastOptions {
+    description?: string;
+    action?: ToastAction;
+    cancel?: ToastAction;
+    duration?: number;
+    position?: ToastPosition;
+}
+type CustomToastRender = (props: {
+    close: () => void;
+}) => React$1.ReactNode;
+interface ToastRegionProps {
+    position?: ToastPosition;
+}
+declare function ToastRegion({ position }: ToastRegionProps): React$1.JSX.Element;
+declare function toast(title: string, options?: ToastOptions): string;
+declare namespace toast {
+    var success: (title: string, options?: ToastOptions) => string;
+    var error: (title: string, options?: ToastOptions) => string;
+    var warning: (title: string, options?: ToastOptions) => string;
+    var info: (title: string, options?: ToastOptions) => string;
+    var custom: (render: CustomToastRender, options?: Pick<ToastOptions, "duration" | "position">) => string;
+    var dismiss: (key: string) => void;
+}
+
+interface TooltipProps extends Omit<TooltipProps$1, "className" | "style" | "children">, StyleProps<"tooltip"> {
+    content: React$1.ReactNode;
+    children: React$1.ReactElement;
+    delay?: number;
+    closeDelay?: number;
+    isDisabled?: boolean;
+    showArrow?: boolean;
+}
+declare function Tooltip({ content, children, delay, closeDelay, isDisabled, showArrow, placement, offset, className, classNames, style, styles, ...props }: TooltipProps): React$1.JSX.Element;
+
+interface HoverCardProps extends Omit<PopoverProps$1, "triggerRef" | "children" | "className" | "style" | "isOpen" | "defaultOpen" | "onOpenChange" | "isNonModal">, StyleProps<"popover" | "content"> {
+    children: React$1.ReactElement;
+    content: React$1.ReactNode;
+    openDelay?: number;
+    closeDelay?: number;
+    isDisabled?: boolean;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare function HoverCard({ children, content, openDelay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange, offset, placement, className, classNames, style, styles, ...props }: HoverCardProps): React$1.JSX.Element;
+
+type FieldValidator<T> = (value: unknown, values: T) => string | null;
+interface UseFormOptions<T extends Record<string, unknown>> {
+    fields: T;
+    validators?: Partial<Record<keyof T, FieldValidator<T>>>;
+    optional?: Array<keyof T>;
+    resetKey?: string | number | null;
+}
+type Errors<T> = Record<keyof T, string | null>;
+type Touched<T> = Record<keyof T, boolean>;
+interface UseFormReturn<T extends Record<string, unknown>> {
+    values: T;
+    errors: Errors<T>;
+    touched: Touched<T>;
+    isDirty: boolean;
+    isSubmitting: boolean;
+    setIsSubmitting: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    onChange: (fieldName: keyof T, value: unknown) => void;
+    getFieldProps: (fieldName: keyof T) => {
+        name: string;
+        value: string;
+        onChange: (value: string) => void;
+        error: string | null;
+    };
+    getNumberFieldProps: (fieldName: keyof T) => {
+        name: string;
+        value: number;
+        onChange: (value: number) => void;
+        error: string | null;
+    };
+    getSelectProps: (fieldName: keyof T) => {
+        name: string;
+        value: Key | null;
+        onChange: (value: Key | null) => void;
+        error: string | null;
+    };
+    getCheckboxGroupProps: (fieldName: keyof T) => {
+        name: string;
+        value: string[];
+        onChange: (value: string[]) => void;
+        errorMessage: string | null;
+    };
+    getRadioGroupProps: (fieldName: keyof T) => {
+        name: string;
+        value: string;
+        onChange: (value: string) => void;
+        errorMessage: string | null;
+    };
+    getSwitchProps: (fieldName: keyof T) => {
+        name: string;
+        isSelected: boolean;
+        onChange: (value: boolean) => void;
+    };
+    handleSubmit: (callback: (values: T) => void | Promise<void>) => (e: React$1.FormEvent) => void;
+    isValid: () => boolean;
+    reset: () => void;
+    validateAll: () => Errors<T>;
+    setFieldValues: (newValues: Partial<T>) => void;
+    setFieldError: (fieldName: keyof T, error: string | null) => void;
+}
+declare function useForm<T extends Record<string, unknown>>({ fields: defaultFields, validators, optional, resetKey, }: UseFormOptions<T>): UseFormReturn<T>;
+
+declare function required<T>(message?: string): FieldValidator<T>;
+declare function email<T>(message?: string): FieldValidator<T>;
+declare function minLength<T>(length: number, message?: string): FieldValidator<T>;
+declare function maxLength<T>(length: number, message?: string): FieldValidator<T>;
+declare function min<T>(n: number, message?: string): FieldValidator<T>;
+declare function max<T>(n: number, message?: string): FieldValidator<T>;
+declare function pattern<T>(regex: RegExp, message?: string): FieldValidator<T>;
+declare function matches<T>(fieldName: keyof T & string, message?: string): FieldValidator<T>;
+declare function compose<T>(...fns: Array<FieldValidator<T>>): FieldValidator<T>;
+
+export { Avatar, AvatarGroup, type BaseModalProps, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatchPicker, ComboBox, type CustomToastRender, DateField, DatePicker, DateRangePicker, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, IconButton, Input, ListBox, ListBoxItem, ListBoxSection, Loader, Menu, MenuContent, MenuItem, MenuSection, MenuTrigger, Modal, type ModalControls, type ModalDef, type ModalInputProps, type ModalKey, type ModalProps, ModalProvider, type ModalProviderProps, type ModalRegistry, type ModalResult, NumberInput, ListBoxItem as Option, type ParrotModalRegistry, PinInput, PinInputGroup, type PinInputGroupProps, type PinInputProps, PinInputSeparator, type PinInputSeparatorProps, PinInputSlot, type PinInputSlotProps, type PinInputType, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, RangeCalendar, ListBoxSection as Section, Select, Separator, Slider, Space, Sticker, Switch, Tab, Table, Tabs, Tag, TagGroup, TagGroupItem, TagInput, Text, Textarea, ThemeProvider, TimeField, Timeline, type ToastAction, type ToastOptions, type ToastPosition, ToastRegion, type ToastRegionProps, type ToastVariant, Toggle, ToggleButton, ToggleGroup, Tooltip, type TooltipProps, type UseFormOptions, type UseFormReturn, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };