@parrot-co/parrot-ui 1.0.0-beta.2 → 1.0.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +23 -6
- package/dist/index.d.ts +23 -6
- package/dist/index.js +42 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +42 -3
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +4 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import * as react_aria_components from 'react-aria-components';
|
|
4
|
-
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,
|
|
5
|
-
import { OverlayTriggerProps } from 'react-stately';
|
|
4
|
+
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';
|
|
5
|
+
import { SectionProps, ItemProps, OverlayTriggerProps } from 'react-stately';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Open registry of valid `color` values. Consumers extend it via module
|
|
@@ -84,9 +84,14 @@ type Appearance = "light" | "dark";
|
|
|
84
84
|
type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
85
85
|
type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
|
|
86
86
|
|
|
87
|
+
type Maybe<T> = T | null | undefined;
|
|
87
88
|
type ActionStatus = "idle" | "loading" | "success" | "error";
|
|
88
89
|
type Dict<T = unknown> = Record<string, T>;
|
|
89
90
|
type ID = string | number;
|
|
91
|
+
type SectionElement<T> = React.ReactElement<SectionProps<T>>;
|
|
92
|
+
type ItemElement<T> = React.ReactElement<ItemProps<T>>;
|
|
93
|
+
type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
|
|
94
|
+
type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
|
|
90
95
|
type Breakpoints = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
91
96
|
interface StyleProps<S extends string = string> {
|
|
92
97
|
/** 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> {
|
|
|
99
104
|
type ResponsiveProp<T> = T | {
|
|
100
105
|
[K in Breakpoints]?: T;
|
|
101
106
|
};
|
|
107
|
+
interface ColorProps {
|
|
108
|
+
color?: Color;
|
|
109
|
+
variant?: ColorVariant;
|
|
110
|
+
}
|
|
102
111
|
|
|
103
|
-
type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "label" | "input" | "description"> & {
|
|
112
|
+
type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "control" | "label" | "input" | "description"> & {
|
|
104
113
|
children?: React__default.ReactNode;
|
|
105
114
|
replaceDefaultControlWrapper?: boolean;
|
|
106
115
|
};
|
|
@@ -135,6 +144,8 @@ type NumberInputProps = Omit<NumberFieldProps, "className" | "style" | "children
|
|
|
135
144
|
};
|
|
136
145
|
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;
|
|
137
146
|
|
|
147
|
+
declare function PasswordInput({ wrapperRef, ...props }: TextInputProps): React__default.JSX.Element;
|
|
148
|
+
|
|
138
149
|
type PinInputType = "numeric" | "alphanumeric" | "all";
|
|
139
150
|
type PinInputProps = Omit<FieldComponentProps<"input" | "control" | "group" | "slot">, "prepend" | "append" | "shape"> & {
|
|
140
151
|
value?: string;
|
|
@@ -413,7 +424,8 @@ interface RadioItemProps extends Omit<RadioFieldProps, "className" | "style" | "
|
|
|
413
424
|
declare function RadioItem({ className, style, classNames, styles, children, ...props }: RadioItemProps): React$1.JSX.Element;
|
|
414
425
|
|
|
415
426
|
type SelectionMode = "single" | "multiple";
|
|
416
|
-
|
|
427
|
+
type SelectionValue<M extends SelectionMode> = M extends "multiple" ? Key[] : Key | null;
|
|
428
|
+
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"> {
|
|
417
429
|
label?: React$1.ReactNode;
|
|
418
430
|
description?: React$1.ReactNode;
|
|
419
431
|
error?: React$1.ReactNode;
|
|
@@ -425,8 +437,13 @@ interface SelectProps<T extends object, M extends SelectionMode = "single"> exte
|
|
|
425
437
|
showSectionSeparator?: boolean;
|
|
426
438
|
showSelectionIndicator?: boolean;
|
|
427
439
|
renderValue?: (value: T) => React$1.ReactNode;
|
|
440
|
+
/** Selected key(s). `Key[]` when `selectionMode="multiple"`, else `Key | null`. */
|
|
441
|
+
value?: SelectionValue<M>;
|
|
442
|
+
defaultValue?: SelectionValue<M>;
|
|
443
|
+
/** Fires with the selected `Key[]` (multiple) or `Key | null` (single). */
|
|
444
|
+
onChange?: (value: SelectionValue<M>) => void;
|
|
428
445
|
}
|
|
429
|
-
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;
|
|
446
|
+
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;
|
|
430
447
|
|
|
431
448
|
interface CalendarProps extends Omit<CalendarProps$1<DateValue>, "className" | "style" | "children" | "visibleDuration"> {
|
|
432
449
|
numberOfMonths?: number;
|
|
@@ -968,4 +985,4 @@ declare function pattern<T>(regex: RegExp, message?: string): FieldValidator<T>;
|
|
|
968
985
|
declare function matches<T>(fieldName: keyof T & string, message?: string): FieldValidator<T>;
|
|
969
986
|
declare function compose<T>(...fns: Array<FieldValidator<T>>): FieldValidator<T>;
|
|
970
987
|
|
|
971
|
-
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 };
|
|
988
|
+
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
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import * as react_aria_components from 'react-aria-components';
|
|
4
|
-
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,
|
|
5
|
-
import { OverlayTriggerProps } from 'react-stately';
|
|
4
|
+
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';
|
|
5
|
+
import { SectionProps, ItemProps, OverlayTriggerProps } from 'react-stately';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Open registry of valid `color` values. Consumers extend it via module
|
|
@@ -84,9 +84,14 @@ type Appearance = "light" | "dark";
|
|
|
84
84
|
type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
85
85
|
type SizeOption = "none" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
|
|
86
86
|
|
|
87
|
+
type Maybe<T> = T | null | undefined;
|
|
87
88
|
type ActionStatus = "idle" | "loading" | "success" | "error";
|
|
88
89
|
type Dict<T = unknown> = Record<string, T>;
|
|
89
90
|
type ID = string | number;
|
|
91
|
+
type SectionElement<T> = React.ReactElement<SectionProps<T>>;
|
|
92
|
+
type ItemElement<T> = React.ReactElement<ItemProps<T>>;
|
|
93
|
+
type CollectionElement<T> = SectionElement<T> | ItemElement<T>;
|
|
94
|
+
type CollectionChildren<T> = CollectionElement<T> | CollectionElement<T>[] | ((item: T) => CollectionElement<T>);
|
|
90
95
|
type Breakpoints = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
91
96
|
interface StyleProps<S extends string = string> {
|
|
92
97
|
/** 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> {
|
|
|
99
104
|
type ResponsiveProp<T> = T | {
|
|
100
105
|
[K in Breakpoints]?: T;
|
|
101
106
|
};
|
|
107
|
+
interface ColorProps {
|
|
108
|
+
color?: Color;
|
|
109
|
+
variant?: ColorVariant;
|
|
110
|
+
}
|
|
102
111
|
|
|
103
|
-
type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "label" | "input" | "description"> & {
|
|
112
|
+
type FieldProps<S extends string> = InputProps & StyleProps<S | "wrapper" | "control" | "label" | "input" | "description"> & {
|
|
104
113
|
children?: React__default.ReactNode;
|
|
105
114
|
replaceDefaultControlWrapper?: boolean;
|
|
106
115
|
};
|
|
@@ -135,6 +144,8 @@ type NumberInputProps = Omit<NumberFieldProps, "className" | "style" | "children
|
|
|
135
144
|
};
|
|
136
145
|
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;
|
|
137
146
|
|
|
147
|
+
declare function PasswordInput({ wrapperRef, ...props }: TextInputProps): React__default.JSX.Element;
|
|
148
|
+
|
|
138
149
|
type PinInputType = "numeric" | "alphanumeric" | "all";
|
|
139
150
|
type PinInputProps = Omit<FieldComponentProps<"input" | "control" | "group" | "slot">, "prepend" | "append" | "shape"> & {
|
|
140
151
|
value?: string;
|
|
@@ -413,7 +424,8 @@ interface RadioItemProps extends Omit<RadioFieldProps, "className" | "style" | "
|
|
|
413
424
|
declare function RadioItem({ className, style, classNames, styles, children, ...props }: RadioItemProps): React$1.JSX.Element;
|
|
414
425
|
|
|
415
426
|
type SelectionMode = "single" | "multiple";
|
|
416
|
-
|
|
427
|
+
type SelectionValue<M extends SelectionMode> = M extends "multiple" ? Key[] : Key | null;
|
|
428
|
+
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"> {
|
|
417
429
|
label?: React$1.ReactNode;
|
|
418
430
|
description?: React$1.ReactNode;
|
|
419
431
|
error?: React$1.ReactNode;
|
|
@@ -425,8 +437,13 @@ interface SelectProps<T extends object, M extends SelectionMode = "single"> exte
|
|
|
425
437
|
showSectionSeparator?: boolean;
|
|
426
438
|
showSelectionIndicator?: boolean;
|
|
427
439
|
renderValue?: (value: T) => React$1.ReactNode;
|
|
440
|
+
/** Selected key(s). `Key[]` when `selectionMode="multiple"`, else `Key | null`. */
|
|
441
|
+
value?: SelectionValue<M>;
|
|
442
|
+
defaultValue?: SelectionValue<M>;
|
|
443
|
+
/** Fires with the selected `Key[]` (multiple) or `Key | null` (single). */
|
|
444
|
+
onChange?: (value: SelectionValue<M>) => void;
|
|
428
445
|
}
|
|
429
|
-
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;
|
|
446
|
+
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;
|
|
430
447
|
|
|
431
448
|
interface CalendarProps extends Omit<CalendarProps$1<DateValue>, "className" | "style" | "children" | "visibleDuration"> {
|
|
432
449
|
numberOfMonths?: number;
|
|
@@ -968,4 +985,4 @@ declare function pattern<T>(regex: RegExp, message?: string): FieldValidator<T>;
|
|
|
968
985
|
declare function matches<T>(fieldName: keyof T & string, message?: string): FieldValidator<T>;
|
|
969
986
|
declare function compose<T>(...fns: Array<FieldValidator<T>>): FieldValidator<T>;
|
|
970
987
|
|
|
971
|
-
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 };
|
|
988
|
+
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
CHANGED
|
@@ -485,8 +485,10 @@ function Field({
|
|
|
485
485
|
ref: groupRef,
|
|
486
486
|
className: cn(
|
|
487
487
|
"prt-input-control relative inline-flex w-full items-center",
|
|
488
|
-
space.classNames
|
|
488
|
+
space.classNames,
|
|
489
|
+
classNames?.control
|
|
489
490
|
),
|
|
491
|
+
style: styles?.control,
|
|
490
492
|
"data-has-error": !!error,
|
|
491
493
|
"data-appearance": resolvedAppearance,
|
|
492
494
|
"data-disabled": isDisabled
|
|
@@ -933,6 +935,9 @@ function HiChevronRight({ size = "1em", ...props }) {
|
|
|
933
935
|
function HiChevronUp({ size = "1em", ...props }) {
|
|
934
936
|
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" }));
|
|
935
937
|
}
|
|
938
|
+
function HiEye({ size = "1em", ...props }) {
|
|
939
|
+
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" }));
|
|
940
|
+
}
|
|
936
941
|
function HiOutlineCalendar({ size = "1em", ...props }) {
|
|
937
942
|
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" }));
|
|
938
943
|
}
|
|
@@ -963,6 +968,28 @@ function HiSelector({ size = "1em", ...props }) {
|
|
|
963
968
|
function HiX({ size = "1em", ...props }) {
|
|
964
969
|
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" }));
|
|
965
970
|
}
|
|
971
|
+
|
|
972
|
+
// src/components/input/password-input.tsx
|
|
973
|
+
function PasswordInput({ wrapperRef, ...props }) {
|
|
974
|
+
const [showPassword, setShowPassword] = React13__namespace.default.useState(false);
|
|
975
|
+
return /* @__PURE__ */ React13__namespace.default.createElement(
|
|
976
|
+
Input,
|
|
977
|
+
{
|
|
978
|
+
wrapperRef,
|
|
979
|
+
...props,
|
|
980
|
+
type: showPassword ? "text" : "password",
|
|
981
|
+
append: /* @__PURE__ */ React13__namespace.default.createElement(
|
|
982
|
+
IconButton,
|
|
983
|
+
{
|
|
984
|
+
onPress: () => setShowPassword((p) => !p),
|
|
985
|
+
size: "sm",
|
|
986
|
+
variant: "light"
|
|
987
|
+
},
|
|
988
|
+
/* @__PURE__ */ React13__namespace.default.createElement(HiEye, { size: 16 })
|
|
989
|
+
)
|
|
990
|
+
}
|
|
991
|
+
);
|
|
992
|
+
}
|
|
966
993
|
var PATTERNS = {
|
|
967
994
|
numeric: inputOtp.REGEXP_ONLY_DIGITS,
|
|
968
995
|
alphanumeric: inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS,
|
|
@@ -1996,14 +2023,25 @@ function Select({
|
|
|
1996
2023
|
classNames,
|
|
1997
2024
|
style,
|
|
1998
2025
|
styles,
|
|
2026
|
+
value,
|
|
2027
|
+
defaultValue,
|
|
2028
|
+
onChange,
|
|
1999
2029
|
"aria-label": ariaLabel,
|
|
2000
2030
|
...racProps
|
|
2001
2031
|
}) {
|
|
2002
2032
|
const theme = useTheme();
|
|
2003
2033
|
const resolvedColor = color ?? theme?.color;
|
|
2004
|
-
const resolvedSize = size ?? theme?.size ?? "
|
|
2034
|
+
const resolvedSize = size ?? theme?.size ?? "md";
|
|
2005
2035
|
const resolvedAppearance = appearance ?? theme?.inputAppearance ?? "outline";
|
|
2006
2036
|
const isMultiple = racProps.selectionMode === "multiple";
|
|
2037
|
+
const selectionProps = {
|
|
2038
|
+
value,
|
|
2039
|
+
defaultValue,
|
|
2040
|
+
onChange: onChange ? (next) => {
|
|
2041
|
+
if (next && typeof next === "object" && "nativeEvent" in next) return;
|
|
2042
|
+
onChange(next);
|
|
2043
|
+
} : void 0
|
|
2044
|
+
};
|
|
2007
2045
|
function labelOf(item) {
|
|
2008
2046
|
if (item == null) return null;
|
|
2009
2047
|
return item[labelKey];
|
|
@@ -2012,6 +2050,7 @@ function Select({
|
|
|
2012
2050
|
reactAriaComponents.Select,
|
|
2013
2051
|
{
|
|
2014
2052
|
...racProps,
|
|
2053
|
+
...selectionProps,
|
|
2015
2054
|
placeholder,
|
|
2016
2055
|
isInvalid: !!error,
|
|
2017
2056
|
"aria-label": ariaLabel ?? (label == null ? placeholder ?? "Select" : void 0),
|
|
@@ -4846,6 +4885,7 @@ exports.Modal = Modal;
|
|
|
4846
4885
|
exports.ModalProvider = ModalProvider;
|
|
4847
4886
|
exports.NumberInput = NumberInput;
|
|
4848
4887
|
exports.Option = ListBoxItem;
|
|
4888
|
+
exports.PasswordInput = PasswordInput;
|
|
4849
4889
|
exports.PinInput = PinInput;
|
|
4850
4890
|
exports.PinInputGroup = PinInputGroup;
|
|
4851
4891
|
exports.PinInputSeparator = PinInputSeparator;
|