mado-ui 0.5.4 → 0.5.5

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Url, UrlObject } from 'node:url';
-import { ElementType, ComponentPropsWithRef, ReactElement, ReactNode, HTMLInputTypeAttribute, RefObject, FormEvent, FormEventHandler, HTMLAttributes } from 'react';
-import { Button as Button$1, DisclosurePanelProps, DisclosureProps, DisclosureButtonProps, MenuButtonProps, MenuItemProps, MenuItemsProps, MenuProps, MenuSectionProps, MenuHeadingProps, MenuSeparatorProps, FieldsetProps as FieldsetProps$1, LegendProps, InputProps as InputProps$1, DescriptionProps, FieldProps, LabelProps, TextareaProps as TextareaProps$1, DialogTitleProps } from '@headlessui/react';
+import { ElementType, ComponentPropsWithRef, ReactElement, ReactNode, RefObject, FormEvent, FormEventHandler, HTMLAttributes } from 'react';
+import { Button as Button$1, DisclosurePanelProps, DisclosureProps, DisclosureButtonProps, MenuButtonProps, MenuItemProps, MenuItemsProps, MenuProps, MenuSectionProps, MenuHeadingProps, MenuSeparatorProps, FieldsetProps as FieldsetProps$1, LegendProps, InputProps as InputProps$1, DescriptionProps, FieldProps, LabelProps, ListboxProps, ListboxSelectedOptionProps, TextareaProps as TextareaProps$1, DialogTitleProps } from '@headlessui/react';
 import { Placement } from '@floating-ui/react-dom';
 
 type AnyElementProps<TTag extends ElementType, Props extends {
@@ -243,7 +243,7 @@ type DetailsBodyProps<TTag extends ElementType = 'div'> = Omit<DisclosurePanelPr
 type DetailsProps<TTag extends ElementType = 'div'> = Omit<DisclosureProps<TTag>, 'className' | 'role'> & {
     className?: string;
 };
-type DetailsSummaryProps<TTag extends ElementType = typeof Button<typeof HeadlessButton>> = Omit<DisclosureButtonProps<TTag>, 'as' | 'className' | 'role'> & {
+type DetailsSummaryProps<TTag extends ElementType = typeof Button<typeof Button$1>> = Omit<DisclosureButtonProps<TTag>, 'as' | 'className' | 'role'> & {
     arrow?: boolean | ReactNode;
     className?: string;
 };
@@ -284,8 +284,6 @@ declare function DropDown(props: DropDownProps): ReactElement;
 type StringField = {
     type: 'email' | 'file' | 'number' | 'string' | 'tel' | 'textarea' | 'url';
     value: string;
-    required?: boolean;
-    invalid?: boolean;
 };
 type ObjectField = {
     type: 'object';
@@ -293,12 +291,14 @@ type ObjectField = {
 };
 type ArrayField = {
     type: 'array';
-    of: ArrayObjectOrNormalField;
+    of: ArrayObjectOrNormalField[];
 };
 type ArrayObjectOrNormalField = StringField | ArrayField | ObjectField;
-type Field = ArrayObjectOrNormalField & {
+type Field<T extends StringField | ArrayField | ObjectField = ArrayObjectOrNormalField> = T & {
     id: string;
     name: string;
+    required?: boolean;
+    invalid?: boolean;
 };
 type FormContext = Field[];
 
@@ -357,6 +357,8 @@ type SecondNumber = MinuteNumber;
 type WeekNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53;
 
 type DateMinMax = Date | [number, DateTimeObject['month'], DateTimeObject['day']] | Pick<DateTimeObject, 'day' | 'month' | 'year'>;
+type DateOrTimeSelectorType = 'dropdown' | 'rotary';
+type DateSelectorType = DateOrTimeSelectorType | 'calendar';
 type DateTimeMinMax = Date | [
     number,
     DateTimeObject['month'],
@@ -365,61 +367,27 @@ type DateTimeMinMax = Date | [
     DateTimeObject['minute'],
     DateTimeObject['second']
 ] | DateTimeObject;
-type TimeMinMax = [DateTimeObject['hour'], DateTimeObject['minute'], DateTimeObject['second']] | Pick<DateTimeObject, 'hour' | 'minute' | 'second'>;
-type WeekMinMax = [number, WeekNumber];
-type InputType = OneOf<[
-    {
-        type?: 'date';
-        min?: DateMinMax;
-        max?: DateMinMax;
-    },
-    {
-        type?: 'datetime' | 'datetime-local';
-        min?: DateTimeMinMax;
-        max?: DateTimeMinMax;
-    },
-    {
-        type?: 'number';
-        max?: number;
-        min?: number;
-    },
-    {
-        type?: 'password';
-        options?: Partial<PasswordOptions>;
-    },
-    {
-        type?: 'tel';
-        options?: Partial<PhoneOptions>;
-    },
-    {
-        type?: 'time';
-        min?: TimeMinMax;
-        max?: TimeMinMax;
-    },
-    {
-        type?: 'week';
-        min?: WeekMinMax;
-        max?: WeekMinMax;
-    },
-    {
-        type?: Exclude<HTMLInputTypeAttribute, 'date' | 'datetime' | 'datetime-local' | 'number' | 'password' | 'tel' | 'time' | 'week'>;
-    }
-]>;
-type InputProps = Omit<InputProps$1, 'max' | 'min' | 'name' | 'type'> & InputType & {
-    description?: ReactNode;
-    descriptionProps?: Omit<DescriptionProps, 'children'> & {
-        /** @deprecated Use the `description` prop instead. */
-        children?: never;
+type DateTimeUIOption = {
+    date: DateSelectorType | DateSelectorType[] | {
+        desktop: DateSelectorType | DateSelectorType[];
+        mobile: DateSelectorType | DateSelectorType[];
     };
-    fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
-    label?: ReactNode;
-    labelProps?: Omit<LabelProps, 'children'> & {
-        /** @deprecated Use the `label` prop instead. */
-        children?: never;
+    time: TimeSelectorType | TimeSelectorType[] | {
+        desktop: TimeSelectorType | TimeSelectorType[];
+        mobile: TimeSelectorType | TimeSelectorType[];
     };
-    name: string;
-    ref?: RefObject<HTMLInputElement | null>;
 };
+type DateUIOption = DateSelectorType | DateSelectorType[] | {
+    desktop: DateSelectorType | DateSelectorType[];
+    mobile: DateSelectorType | DateSelectorType[];
+};
+type TimeMinMax = Date | [DateTimeObject['hour'], DateTimeObject['minute'], DateTimeObject['second']] | Pick<DateTimeObject, 'hour' | 'minute' | 'second'>;
+type TimeSelectorType = DateOrTimeSelectorType | 'clock';
+type TimeUIOption = TimeSelectorType | TimeSelectorType[] | {
+    desktop: TimeSelectorType | TimeSelectorType[];
+    mobile: TimeSelectorType | TimeSelectorType[];
+};
+
 type PasswordOptions = {
     matchPreviousInput: boolean;
     requireLowercaseCharacter: boolean;
@@ -453,7 +421,138 @@ type PhoneOptions = {
     format: 'continuous' | 'dot' | 'hyphenated' | 'none' | 'space' | 'standard';
 };
 
-declare function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required, type, value, ...props }: InputProps): ReactElement;
+type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'list' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'year';
+type DateTimeTypeProps = {
+    type: 'datetime' | 'datetime-local';
+    min?: DateTimeMinMax;
+    max?: DateTimeMinMax;
+    options?: Partial<{
+        ui: DateTimeUIOption;
+    }>;
+};
+type DateTypeProps = {
+    type: 'date';
+    min?: DateMinMax;
+    max?: DateMinMax;
+    options?: Partial<{
+        ui: DateUIOption;
+    }>;
+};
+type MonthTypeProps = {
+    type: 'month';
+    min?: MonthNumber;
+    max?: MonthNumber;
+    options?: Partial<{
+        ui: DateUIOption;
+    }>;
+};
+type NumberTypeProps = {
+    type: 'number';
+    max?: number;
+    min?: number;
+};
+type PasswordTypeProps = {
+    type: 'password';
+    options?: Partial<PasswordOptions>;
+};
+type PhoneTypeProps = {
+    type: 'tel';
+    options?: Partial<PhoneOptions>;
+};
+type TimeTypeProps = {
+    type: 'time';
+    min?: TimeMinMax;
+    max?: TimeMinMax;
+    options?: {
+        ui: TimeUIOption;
+    };
+};
+type WeekTypeProps = {
+    type: 'week';
+    min?: WeekNumber;
+    max?: WeekNumber;
+    options?: {
+        ui: DateUIOption;
+    };
+};
+type YearTypeProps = {
+    type: 'year';
+    min?: number;
+    max?: number;
+    options?: Partial<{
+        ui: DateUIOption;
+    }>;
+};
+type InputTypeProps = OneOf<[
+    DateTypeProps,
+    DateTimeTypeProps,
+    MonthTypeProps,
+    NumberTypeProps,
+    PasswordTypeProps,
+    PhoneTypeProps,
+    TimeTypeProps,
+    WeekTypeProps,
+    YearTypeProps,
+    {
+        type?: Exclude<InputType, 'date' | 'datetime' | 'datetime-local' | 'month' | 'number' | 'password' | 'tel' | 'time' | 'week' | 'year'>;
+    }
+]>;
+
+type InputProps = Omit<InputProps$1, 'max' | 'min' | 'name' | 'type'> & InputTypeProps & {
+    description?: ReactNode;
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated Use the `description` prop instead. */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
+    label?: ReactNode;
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated Use the `label` prop instead. */
+        children?: never;
+    };
+    name: string;
+    ref?: RefObject<HTMLInputElement | null>;
+};
+
+declare function Input({ as, checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required, type, value, ...props }: InputProps): ReactElement;
+
+type IsolatedValue<T extends ValueOption | ValueOption[]> = {
+    defaultValue?: T;
+} | {
+    value?: T;
+};
+type MultipleOrSingleValue = OneOf<[
+    {
+        multiple: true;
+    } & IsolatedValue<ValueOption[]>,
+    {
+        multiple?: false;
+    } & IsolatedValue<ValueOption>
+]>;
+type SelectProps = Omit<ListboxProps, 'defaultValue' | 'multiple' | 'name' | 'value'> & Pick<FieldProps, 'disabled'> & MultipleOrSingleValue & {
+    description?: ReactNode;
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated Use the `description` prop instead. */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children' | 'disabled'>;
+    label?: ReactNode;
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated Use the `label` prop instead. */
+        children?: never;
+    };
+    name: string;
+    optionList: ListboxSelectedOptionProps['options'];
+    ref?: RefObject<HTMLInputElement | null>;
+    required?: boolean;
+};
+type ValueOption = string | {
+    id: string;
+    render?: ReactNode;
+    value: string;
+};
+
+declare function Select({ defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, multiple, name, onChange, optionList, required, value, ...props }: SelectProps): ReactElement;
 
 type SubmitButtonProps = Omit<ButtonProps, 'as' | 'customTheme' | 'href' | 'theme'> & {
     /** This doesn't do much by default, because we use built-in colors for different form states. You'll have to modify a good bit to make this do anything. */
@@ -661,5 +760,5 @@ type VideoProps = Omit<ComponentPropsWithRef<'video'>, 'controls' | 'controlList
 
 declare function Video({ autoPlay, className, controls, poster, ref, srcSet, title, ...props }: VideoProps): ReactElement;
 
-export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink };
-export type { AnchorProps, ButtonBorderRadius, ButtonPadding, ButtonProps, DetailsBodyProps, DetailsProps, DetailsSummaryProps, DropDownButtonProps, DropDownItemProps, DropDownItemsProps, DropDownProps, DropDownSectionProps, DropDownSeparatorProps, ExtendedButtonConfig, ExtendedButtonProps, ExtendedLinkConfig, ExtendedLinkProps, FieldsetProps, FormProps, FormSubmitArgs, GhostProps, HeadingProps, IFrameAllowAttribute, IFrameProps, IFrameReferrerPolicyAttribute, IFrameSandboxAttribute, InputProps, LinkProps, ModalProps, SubmitButtonProps, TextareaProps, TooltipPanelProps, TooltipProps, TooltipTriggerProps, VideoControl, VideoProps };
+export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Select, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink };
+export type { AnchorProps, ButtonBorderRadius, ButtonPadding, ButtonProps, DetailsBodyProps, DetailsProps, DetailsSummaryProps, DropDownButtonProps, DropDownItemProps, DropDownItemsProps, DropDownProps, DropDownSectionProps, DropDownSeparatorProps, ExtendedButtonConfig, ExtendedButtonProps, ExtendedLinkConfig, ExtendedLinkProps, FieldsetProps, FormProps, FormSubmitArgs, GhostProps, HeadingProps, IFrameAllowAttribute, IFrameProps, IFrameReferrerPolicyAttribute, IFrameSandboxAttribute, InputProps, LinkProps, ModalProps, SelectProps, SubmitButtonProps, TextareaProps, TooltipPanelProps, TooltipProps, TooltipTriggerProps, VideoControl, VideoProps };