@parrot-co/parrot-ui 1.0.0-beta.1 → 1.0.0-beta.3

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 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, 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';
+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, Key, 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, 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 { SectionProps, ItemProps, OverlayTriggerProps } from 'react-stately';
 
 /**
  * Open registry of valid `color` values. Consumers extend it via module
@@ -84,9 +84,14 @@ type Appearance = "light" | "dark";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 
+type Maybe<T> = T | null | undefined;
 type ActionStatus = "idle" | "loading" | "success" | "error";
 type Dict<T = unknown> = Record<string, T>;
 type ID = string | number;
+type SectionElement<T> = React.ReactElement<SectionProps<T>>;
+type ItemElement<T> = React.ReactElement<ItemProps<T>>;
+type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
+type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
 type Breakpoints = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface StyleProps<S extends string = string> {
     /** Use this to add classes to the component. you can also use the `className` prop. But i won't recommend to use both at the same time. */
@@ -99,8 +104,12 @@ interface StyleProps<S extends string = string> {
 type ResponsiveProp<T> = T | {
     [K in Breakpoints]?: T;
 };
+interface ColorProps {
+    color?: Color;
+    variant?: ColorVariant;
+}
 
-type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "label" | "input" | "description"> & {
+type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "control" | "label" | "input" | "description"> & {
     children?: React__default.ReactNode;
     replaceDefaultControlWrapper?: boolean;
 };
@@ -135,6 +144,47 @@ 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;
 
+declare function PasswordInput({ wrapperRef, ...props }: TextInputProps): React__default.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"> {
@@ -374,7 +424,8 @@ interface RadioItemProps extends Omit<RadioFieldProps, "className" | "style" | "
 declare function RadioItem({ className, style, classNames, styles, children, ...props }: RadioItemProps): React$1.JSX.Element;
 
 type SelectionMode = "single" | "multiple";
-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"> {
+type SelectionValue<M extends SelectionMode> = M extends "multiple" ? Key[] : Key | null;
+interface SelectProps<T extends object, M extends SelectionMode = "single"> extends Omit<SelectProps$1<T, M>, "className" | "style" | "children" | "isInvalid" | "selectedKey" | "defaultSelectedKey" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "onChange" | "value" | "defaultValue">, 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;
@@ -386,8 +437,13 @@ interface SelectProps<T extends object, M extends SelectionMode = "single"> exte
     showSectionSeparator?: boolean;
     showSelectionIndicator?: boolean;
     renderValue?: (value: T) => React$1.ReactNode;
+    /** Selected key(s). `Key[]` when `selectionMode="multiple"`, else `Key | null`. */
+    value?: SelectionValue<M>;
+    defaultValue?: SelectionValue<M>;
+    /** Fires with the selected `Key[]` (multiple) or `Key | null` (single). */
+    onChange?: (value: SelectionValue<M>) => void;
 }
-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;
+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, value, defaultValue, onChange, "aria-label": ariaLabel, ...racProps }: SelectProps<T, M>): React$1.JSX.Element;
 
 interface CalendarProps extends Omit<CalendarProps$1<DateValue>, "className" | "style" | "children" | "visibleDuration"> {
     numberOfMonths?: number;
@@ -929,4 +985,4 @@ 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, 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 };
+export { type ActionStatus, type Appearance, Avatar, AvatarGroup, type BaseModalProps, type Breakpoints, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, type CollectionChildren, type CollectionElement, type Color, ColorArea, ColorField, ColorPicker, type ColorProps, ColorSlider, ColorSwatchPicker, type ColorVariant, ComboBox, type ControlSize, type CustomToastRender, DateField, DatePicker, DateRangePicker, type Dict, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, type ID, IconButton, Input, type InputAppearance, type ItemElement, ListBox, ListBoxItem, ListBoxSection, Loader, type Maybe, 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 ParrotColorRegistry, type ParrotModalRegistry, type ParrotVariantRegistry, PasswordInput, PinInput, PinInputGroup, type PinInputGroupProps, type PinInputProps, PinInputSeparator, type PinInputSeparatorProps, PinInputSlot, type PinInputSlotProps, type PinInputType, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, type Radius, RangeCalendar, type ResponsiveProp, ListBoxSection as Section, type SectionElement, Select, Separator, type Size, Slider, Space, Sticker, type StyleProps, 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, type Variant, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 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, 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';
+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, Key, 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, 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 { SectionProps, ItemProps, OverlayTriggerProps } from 'react-stately';
 
 /**
  * Open registry of valid `color` values. Consumers extend it via module
@@ -84,9 +84,14 @@ type Appearance = "light" | "dark";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 
+type Maybe<T> = T | null | undefined;
 type ActionStatus = "idle" | "loading" | "success" | "error";
 type Dict<T = unknown> = Record<string, T>;
 type ID = string | number;
+type SectionElement<T> = React.ReactElement<SectionProps<T>>;
+type ItemElement<T> = React.ReactElement<ItemProps<T>>;
+type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
+type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
 type Breakpoints = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
 interface StyleProps<S extends string = string> {
     /** Use this to add classes to the component. you can also use the `className` prop. But i won't recommend to use both at the same time. */
@@ -99,8 +104,12 @@ interface StyleProps<S extends string = string> {
 type ResponsiveProp<T> = T | {
     [K in Breakpoints]?: T;
 };
+interface ColorProps {
+    color?: Color;
+    variant?: ColorVariant;
+}
 
-type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "label" | "input" | "description"> & {
+type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "control" | "label" | "input" | "description"> & {
     children?: React__default.ReactNode;
     replaceDefaultControlWrapper?: boolean;
 };
@@ -135,6 +144,47 @@ 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;
 
+declare function PasswordInput({ wrapperRef, ...props }: TextInputProps): React__default.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"> {
@@ -374,7 +424,8 @@ interface RadioItemProps extends Omit<RadioFieldProps, "className" | "style" | "
 declare function RadioItem({ className, style, classNames, styles, children, ...props }: RadioItemProps): React$1.JSX.Element;
 
 type SelectionMode = "single" | "multiple";
-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"> {
+type SelectionValue<M extends SelectionMode> = M extends "multiple" ? Key[] : Key | null;
+interface SelectProps<T extends object, M extends SelectionMode = "single"> extends Omit<SelectProps$1<T, M>, "className" | "style" | "children" | "isInvalid" | "selectedKey" | "defaultSelectedKey" | "selectedKeys" | "defaultSelectedKeys" | "onSelectionChange" | "onChange" | "value" | "defaultValue">, 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;
@@ -386,8 +437,13 @@ interface SelectProps<T extends object, M extends SelectionMode = "single"> exte
     showSectionSeparator?: boolean;
     showSelectionIndicator?: boolean;
     renderValue?: (value: T) => React$1.ReactNode;
+    /** Selected key(s). `Key[]` when `selectionMode="multiple"`, else `Key | null`. */
+    value?: SelectionValue<M>;
+    defaultValue?: SelectionValue<M>;
+    /** Fires with the selected `Key[]` (multiple) or `Key | null` (single). */
+    onChange?: (value: SelectionValue<M>) => void;
 }
-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;
+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, value, defaultValue, onChange, "aria-label": ariaLabel, ...racProps }: SelectProps<T, M>): React$1.JSX.Element;
 
 interface CalendarProps extends Omit<CalendarProps$1<DateValue>, "className" | "style" | "children" | "visibleDuration"> {
     numberOfMonths?: number;
@@ -929,4 +985,4 @@ 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, 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 };
+export { type ActionStatus, type Appearance, Avatar, AvatarGroup, type BaseModalProps, type Breakpoints, Button, ButtonGroup, Calendar, Checkbox, CheckboxGroup, CheckboxItem, type CollectionChildren, type CollectionElement, type Color, ColorArea, ColorField, ColorPicker, type ColorProps, ColorSlider, ColorSwatchPicker, type ColorVariant, ComboBox, type ControlSize, type CustomToastRender, DateField, DatePicker, DateRangePicker, type Dict, type FieldValidator, FileUploader, HoverCard, type HoverCardProps, type ID, IconButton, Input, type InputAppearance, type ItemElement, ListBox, ListBoxItem, ListBoxSection, Loader, type Maybe, 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 ParrotColorRegistry, type ParrotModalRegistry, type ParrotVariantRegistry, PasswordInput, PinInput, PinInputGroup, type PinInputGroupProps, type PinInputProps, PinInputSeparator, type PinInputSeparatorProps, PinInputSlot, type PinInputSlotProps, type PinInputType, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioCard, RadioGroup, RadioItem, type Radius, RangeCalendar, type ResponsiveProp, ListBoxSection as Section, type SectionElement, Select, Separator, type Size, Slider, Space, Sticker, type StyleProps, 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, type Variant, compose, email, matches, max, maxLength, min, minLength, parseColor, pattern, required, toast, useForm, useModal, useModals, useTheme };

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var React13 = require('react');
 var reactAriaComponents = require('react-aria-components');
+var inputOtp = require('input-otp');
 var date = require('@internationalized/date');
 var reactStately = require('react-stately');
 var reactDom = require('react-dom');
@@ -484,8 +485,10 @@ function Field({
         ref: groupRef,
         className: cn(
           "prt-input-control relative inline-flex w-full items-center",
-          space.classNames
+          space.classNames,
+          classNames?.control
         ),
+        style: styles?.control,
         "data-has-error": !!error,
         "data-appearance": resolvedAppearance,
         "data-disabled": isDisabled
@@ -932,6 +935,9 @@ function HiChevronRight({ size = "1em", ...props }) {
 function HiChevronUp({ size = "1em", ...props }) {
   return /* @__PURE__ */ React13__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13__namespace.createElement("path", { fillRule: "evenodd", d: "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z", clipRule: "evenodd" }));
 }
+function HiEye({ size = "1em", ...props }) {
+  return /* @__PURE__ */ React13__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13__namespace.createElement("path", { d: "M10 12a2 2 0 100-4 2 2 0 000 4z" }), /* @__PURE__ */ React13__namespace.createElement("path", { fillRule: "evenodd", d: "M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z", clipRule: "evenodd" }));
+}
 function HiOutlineCalendar({ size = "1em", ...props }) {
   return /* @__PURE__ */ React13__namespace.createElement("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13__namespace.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }));
 }
@@ -963,6 +969,198 @@ function HiX({ size = "1em", ...props }) {
   return /* @__PURE__ */ React13__namespace.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", width: size, height: size, ...props }, /* @__PURE__ */ React13__namespace.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }));
 }
 
+// src/components/input/password-input.tsx
+function PasswordInput({ wrapperRef, ...props }) {
+  const [showPassword, setShowPassword] = React13__namespace.default.useState(false);
+  return /* @__PURE__ */ React13__namespace.default.createElement(
+    Input,
+    {
+      wrapperRef,
+      ...props,
+      type: showPassword ? "text" : "password",
+      append: /* @__PURE__ */ React13__namespace.default.createElement(
+        IconButton,
+        {
+          onPress: () => setShowPassword((p) => !p),
+          size: "sm",
+          variant: "light"
+        },
+        /* @__PURE__ */ React13__namespace.default.createElement(HiEye, { size: 16 })
+      )
+    }
+  );
+}
+var PATTERNS = {
+  numeric: inputOtp.REGEXP_ONLY_DIGITS,
+  alphanumeric: inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS,
+  all: void 0
+};
+var INPUT_MODE = {
+  numeric: "numeric",
+  alphanumeric: "text",
+  all: "text"
+};
+var PinInputConfigContext = React13__namespace.createContext(null);
+function usePinInputConfig() {
+  const ctx = React13__namespace.useContext(PinInputConfigContext);
+  if (!ctx) {
+    throw new Error(
+      "PinInput compound components must be rendered inside <PinInput>"
+    );
+  }
+  return ctx;
+}
+function PinInput({
+  value,
+  defaultValue,
+  onChange,
+  onComplete,
+  length,
+  maxLength: maxLength2,
+  type = "numeric",
+  pattern: pattern2,
+  mask = false,
+  placeholder,
+  isReadOnly = false,
+  autoFocus,
+  name,
+  groupSize,
+  separator,
+  children,
+  inputRef: inputRefProp,
+  classNames,
+  styles,
+  ...fieldProps
+}) {
+  const resolvedMax = maxLength2 ?? length ?? 6;
+  const isDisabled = fieldProps.isDisabled ?? false;
+  const isInvalid = !!fieldProps.error;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React13__namespace.useState(defaultValue ?? "");
+  const currentValue = isControlled ? value : internalValue;
+  function handleChange(next) {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  }
+  const config = React13__namespace.useMemo(
+    () => ({ mask, placeholder, isDisabled, isInvalid }),
+    [mask, placeholder, isDisabled, isInvalid]
+  );
+  const fieldError = React13__namespace.useMemo(
+    () => ({
+      isInvalid,
+      validationErrors: [],
+      validationDetails: {}
+    }),
+    [isInvalid]
+  );
+  const content = children ?? renderSlots(resolvedMax, groupSize, separator, classNames?.slot);
+  return /* @__PURE__ */ React13__namespace.createElement(PinInputConfigContext.Provider, { value: config }, /* @__PURE__ */ React13__namespace.createElement(reactAriaComponents.FieldErrorContext.Provider, { value: fieldError }, /* @__PURE__ */ React13__namespace.createElement(
+    Field,
+    {
+      ...fieldProps,
+      classNames,
+      styles,
+      replaceDefaultControlWrapper: true
+    },
+    /* @__PURE__ */ React13__namespace.createElement(
+      "div",
+      {
+        className: cn("prt-pin", classNames?.control),
+        style: styles?.control,
+        "data-disabled": isDisabled || void 0,
+        "data-invalid": isInvalid || void 0
+      },
+      /* @__PURE__ */ React13__namespace.createElement(
+        inputOtp.OTPInput,
+        {
+          ref: inputRefProp,
+          value: currentValue,
+          onChange: handleChange,
+          onComplete,
+          maxLength: resolvedMax,
+          pattern: pattern2?.source ?? PATTERNS[type],
+          inputMode: INPUT_MODE[type],
+          textAlign: "center",
+          autoComplete: "one-time-code",
+          autoCorrect: "off",
+          autoCapitalize: "off",
+          spellCheck: false,
+          autoFocus,
+          disabled: isDisabled,
+          readOnly: isReadOnly,
+          name,
+          "aria-invalid": isInvalid || void 0,
+          containerClassName: "prt-pin-otp",
+          className: cn("prt-pin-input", classNames?.input),
+          style: styles?.input
+        },
+        content
+      )
+    )
+  )));
+}
+function renderSlots(maxLength2, groupSize, separator, slotClassName) {
+  const size = groupSize && groupSize > 0 ? groupSize : maxLength2;
+  const groups = [];
+  for (let i = 0; i < maxLength2; i += size) {
+    groups.push(
+      Array.from({ length: Math.min(size, maxLength2 - i) }, (_, j) => i + j)
+    );
+  }
+  return groups.map((indices, groupIndex) => /* @__PURE__ */ React13__namespace.createElement(React13__namespace.Fragment, { key: groupIndex }, groupIndex > 0 && /* @__PURE__ */ React13__namespace.createElement(PinInputSeparator, null, separator), /* @__PURE__ */ React13__namespace.createElement(PinInputGroup, null, indices.map((index) => /* @__PURE__ */ React13__namespace.createElement(PinInputSlot, { key: index, index, className: slotClassName })))));
+}
+function PinInputGroup({ className, ...props }) {
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      className: cn("prt-pin-group", className),
+      "data-slot": "group",
+      ...props
+    }
+  );
+}
+function PinInputSlot({
+  index,
+  className,
+  ...props
+}) {
+  const { mask, placeholder, isDisabled, isInvalid } = usePinInputConfig();
+  const { slots } = React13__namespace.useContext(inputOtp.OTPInputContext);
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      ...props,
+      className: cn("prt-pin-slot", className),
+      "data-slot": "slot",
+      "data-active": slot?.isActive || void 0,
+      "data-filled": !!char || void 0,
+      "data-disabled": isDisabled || void 0,
+      "data-invalid": isInvalid || void 0
+    },
+    char !== null ? /* @__PURE__ */ React13__namespace.createElement("span", { className: "prt-pin-char" }, mask ? "\u2022" : char) : placeholder ? /* @__PURE__ */ React13__namespace.createElement("span", { className: "prt-pin-placeholder" }, placeholder) : null,
+    slot?.hasFakeCaret && /* @__PURE__ */ React13__namespace.createElement("div", { className: "prt-pin-caret", "aria-hidden": true })
+  );
+}
+function PinInputSeparator({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React13__namespace.createElement(
+    "div",
+    {
+      className: cn("prt-pin-separator", className),
+      "data-slot": "separator",
+      "aria-hidden": true,
+      ...props
+    },
+    children ?? "-"
+  );
+}
+
 // src/utils/theme.ts
 var supportedColors = [
   "red",
@@ -1825,14 +2023,25 @@ function Select({
   classNames,
   style,
   styles,
+  value,
+  defaultValue,
+  onChange,
   "aria-label": ariaLabel,
   ...racProps
 }) {
   const theme = useTheme();
   const resolvedColor = color ?? theme?.color;
-  const resolvedSize = size ?? theme?.size ?? "sm";
+  const resolvedSize = size ?? theme?.size ?? "md";
   const resolvedAppearance = appearance ?? theme?.inputAppearance ?? "outline";
   const isMultiple = racProps.selectionMode === "multiple";
+  const selectionProps = {
+    value,
+    defaultValue,
+    onChange: onChange ? (next) => {
+      if (next && typeof next === "object" && "nativeEvent" in next) return;
+      onChange(next);
+    } : void 0
+  };
   function labelOf(item) {
     if (item == null) return null;
     return item[labelKey];
@@ -1841,6 +2050,7 @@ function Select({
     reactAriaComponents.Select,
     {
       ...racProps,
+      ...selectionProps,
       placeholder,
       isInvalid: !!error,
       "aria-label": ariaLabel ?? (label == null ? placeholder ?? "Select" : void 0),
@@ -4675,6 +4885,11 @@ exports.Modal = Modal;
 exports.ModalProvider = ModalProvider;
 exports.NumberInput = NumberInput;
 exports.Option = ListBoxItem;
+exports.PasswordInput = PasswordInput;
+exports.PinInput = PinInput;
+exports.PinInputGroup = PinInputGroup;
+exports.PinInputSeparator = PinInputSeparator;
+exports.PinInputSlot = PinInputSlot;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;