mado-ui 0.4.0 → 0.5.1

package/dist/index.d.ts

@@ -1 +1,665 @@
-export * from './components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Url, UrlObject } from 'node:url';
+import { ElementType, ComponentPropsWithRef, 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 { Placement } from '@floating-ui/react-dom';
+
+type AnyElementProps<TTag extends ElementType, Props extends {
+    [key: string]: unknown;
+} = {}> = AsElement<TTag> & Omit<ComponentPropsWithRef<TTag>, keyof AsElement> & Props;
+type AsElement<TTag extends ElementType = 'div'> = {
+    /** Specify what element should be rendered */
+    as?: TTag;
+};
+type ColorTheme = OneOf<[
+    {
+        /** Color theme. */
+        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow';
+    },
+    {
+        /** Color theme. */
+        theme?: 'custom';
+        customTheme: OneOf<[
+            {
+                /** Example: `'[--theme-color:var(--color-blue-500)]'` */
+                themeColor: string;
+            },
+            {
+                /** This doesn't use any preset color theme classes. */
+                classes: string;
+            }
+        ]>;
+    }
+]>;
+type MergeTypes<TypesArray extends unknown[], Result = object> = TypesArray extends [
+    infer Head,
+    ...infer Remaining
+] ? MergeTypes<Remaining, Result & Head> : Result;
+type OneOf<TypesArray extends unknown[], Result = never, AllProps = MergeTypes<TypesArray>> = TypesArray extends [infer Head, ...infer Remaining] ? OneOf<Remaining, Result | OnlyFirst<Head, AllProps>, AllProps> : Result;
+type OnlyFirst<F, L> = F & {
+    [Key in keyof Omit<L, keyof F>]?: never;
+};
+
+type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag> & {
+    disabled?: boolean;
+};
+declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps<TTag>): react_jsx_runtime.JSX.Element;
+type ThemeColorOrClasses = OneOf<[
+    {
+        /**
+         * - Fill Example: `'after:[--theme-color:var(--color-blue-500)]'`
+         * - Multiline Fill Example: `'[--theme-color:var(--color-blue-500)]'`
+         */
+        themeColor: string;
+    },
+    {
+        /** This doesn't use any preset color theme classes. */
+        classes: string;
+    }
+]>;
+type LinkProps<TTag extends ElementType = typeof Anchor> = AnyElementProps<TTag, OneOf<[
+    {
+        type?: 'center' | 'lift' | 'ltr' | 'multiline' | 'multiline-center' | 'multiline-lift' | 'multiline-ltr' | 'multiline-rtl' | 'multiline-static' | 'normal' | 'rtl' | 'static';
+    },
+    {
+        type?: 'fill' | 'fill-lift' | 'fill-ltr' | 'fill-rtl' | 'multiline-fill' | 'multiline-fill-center' | 'multiline-fill-ltr' | 'multiline-fill-lift' | 'multiline-fill-rtl';
+    } & ColorTheme
+]>>;
+/**
+ * # Link
+ *
+ * - A component for rendering links with various styles and options.
+ * - Utilizes the Next.js `Link` component and provides additional functionality.
+ *
+ * ---
+ *
+ * ## Styles
+ *
+ * This component includes various classes to style the link. The styles are divided into two types:
+ *
+ * - Line styles: These styles add a line underneath the link, and include variations for different positions and orientations.
+ * - Fill styles: These styles add a background color behind the link, and include variations for different positions and orientations.
+ * - Multiline styles: These styles seek to accomplish the same as the line and fill styles, while offering multiline support.
+ *
+ * ---
+ *
+ * ## Examples
+ *
+ * @example
+ *   <Link href='/about' type='ltr' title='About Us'>Learn more about our company</Link>
+ *
+ * @example
+ *   <Link href='/about' type='fill-ltr' title='About Us'>Learn more about our company</Link>
+ *
+ * @example
+ *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
+ */
+declare function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, theme, type, ...props }: LinkProps<TTag>): react_jsx_runtime.JSX.Element;
+type ExtendedLinkConfig = {
+    /** Modifies the default element that is rendered. The `as` prop on the component still overrides the default set here. */
+    as?: ElementType;
+    /** Adds default classes. */
+    className?: string;
+    /** Sets the default theme. */
+    defaultTheme?: ColorTheme['theme'] | string;
+    /** Sets the default for the `type` prop. */
+    type?: LinkProps['type'];
+    /** Add more theme options. */
+    theme?: {
+        [themeName: string]: {
+            /** Custom theme configuration - supports both multiline and regular link theme formats */
+            customTheme: Omit<ThemeColorOrClasses, 'themeColor'> & {
+                themeColor?: {
+                    /** Example: `'after:[--theme-color:var(--color-blue-500)]'` */
+                    fill: string;
+                    /** Example: `'[--theme-color:var(--color-blue-500)]'` */
+                    multilineFill: string;
+                };
+            };
+            /** Additional CSS classes to apply */
+            className?: string;
+        };
+    };
+};
+type ExtendedThemeNames$1<T extends ExtendedLinkConfig> = T['theme'] extends Record<string, unknown> ? keyof T['theme'] : never;
+type ExtendedLinkProps<TExtendedConfig extends ExtendedLinkConfig, TTag extends ElementType = typeof Anchor> = Omit<LinkProps<TTag>, 'theme' | 'customTheme'> & {
+    theme?: LinkProps<TTag>['theme'] | ExtendedThemeNames$1<TExtendedConfig>;
+    customTheme?: LinkProps<TTag>['customTheme'];
+};
+/**
+ * # createLink
+ * Creates an extended Link component with additional theme options.
+ *
+ * @param config - Configuration object defining new themes and defaults
+ * @returns A new Link component with extended theme support
+ *
+ * @example
+ * ```tsx
+ * const MyLink = createLink({
+ *   as: NextLink,
+ *   className: 'font-bold',
+ *   type: 'fill',
+ *   theme: {
+ *     primary: {
+ *       customTheme: {
+ *         fill: 'after:[--theme-color:var(--color-primary-500)]',
+ *         multilineFill: '[--theme-color:var(--color-primary-500)]'
+ *       },
+ *       className: 'text-white'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+declare function createLink<TExtendedConfig extends ExtendedLinkConfig>(config: TExtendedConfig): <TTag extends ElementType = typeof Anchor>({ theme, className, customTheme, type, as, ...props }: ExtendedLinkProps<TExtendedConfig, TTag>) => react_jsx_runtime.JSX.Element;
+
+type LinkOrOther<TTag extends ElementType = typeof Button$1> = OneOf<[
+    AnyElementProps<TTag> & {
+        href?: never;
+    },
+    AnyElementProps<typeof Anchor> & {
+        href?: string | Url | UrlObject;
+    }
+]>;
+type ButtonPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ButtonProps<TTag extends ElementType = typeof Button$1> = LinkOrOther<TTag> & ColorTheme & {
+    /** Customizes the theme color to a sensible gradient. */
+    gradient?: boolean;
+    /** The size of the element based on padding. */
+    padding?: ButtonPadding;
+    /** The size of the border radius. */
+    rounded?: ButtonBorderRadius;
+};
+type ExtendedButtonConfig = {
+    /** Modifies the default(s) for what element is rendered. The `as` prop on the component still overrides the default(s) set here. */
+    as?: ElementType | {
+        /** Modifies the base link element when `href` is present. */
+        link?: ElementType;
+        /** Modifies the base button element. */
+        default?: ElementType;
+    };
+    /** Adds default classes. */
+    className?: string;
+    defaultTheme?: ColorTheme['theme'] | string;
+    /** Sets the default for the `gradient` prop. */
+    gradient?: boolean;
+    /** Sets the default for the `padding` prop. */
+    padding?: ButtonPadding;
+    /** Sets the default for the `rounded` prop. */
+    rounded?: ButtonBorderRadius;
+    /** Add more theme options. */
+    theme?: {
+        [themeName: string]: {
+            /** Custom theme configuration */
+            customTheme: NonNullable<ColorTheme['customTheme']>;
+            /** Additional CSS classes to apply */
+            className?: string;
+        };
+    };
+};
+type ExtendedThemeNames<T extends ExtendedButtonConfig> = T['theme'] extends Record<string, unknown> ? keyof T['theme'] : never;
+type ExtendedButtonProps<TExtendedConfig extends ExtendedButtonConfig, TTag extends ElementType = typeof Button$1> = Omit<ButtonProps<TTag>, 'theme' | 'customTheme'> & {
+    theme?: ButtonProps<TTag>['theme'] | ExtendedThemeNames<TExtendedConfig>;
+    customTheme?: ButtonProps<TTag>['customTheme'];
+};
+
+/**
+ * # Button
+ * - A pre-styled button with utility props for easy customization depending on use case.
+ */
+declare function Button<TTag extends ElementType = typeof Button$1>({ className, customTheme, gradient, padding, rounded, theme, ...props }: ButtonProps<TTag>): react_jsx_runtime.JSX.Element;
+/**
+ * # createButton
+ * Creates an extended Button component with additional theme options.
+ *
+ * @param extendedThemes - Configuration object defining new themes
+ * @returns A new Button component with extended theme support
+ *
+ * @example
+ * ```tsx
+ * const MyButton = createButton({
+ *   as: {
+ *     default: 'div',
+ *     link: NextLink
+ *   },
+ *   className: 'min-w-64',
+ *   padding: 'sm',
+ *   rounded: 'full',
+ *   theme: {
+ *     primary: {
+ *       customTheme: { themeColor: '[--theme-color:var(--color-primary-500)]' },
+ *       className: 'text-white'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+declare function createButton<TExtendedConfig extends ExtendedButtonConfig>(config: TExtendedConfig): <TTag extends ElementType = typeof Button$1>({ theme, className, customTheme, gradient, padding, rounded, as, ...props }: ExtendedButtonProps<TExtendedConfig, TTag>) => react_jsx_runtime.JSX.Element;
+
+type DetailsBodyProps<TTag extends ElementType = 'div'> = Omit<DisclosurePanelProps<TTag>, 'className'> & {
+    className?: string;
+};
+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'> & {
+    arrow?: boolean | ReactNode;
+    className?: string;
+};
+
+declare function DetailsSummary<TTag extends ElementType = typeof Button>({ arrow, children, className, ...props }: DetailsSummaryProps<TTag>): react_jsx_runtime.JSX.Element;
+declare function DetailsBody<TTag extends ElementType = 'div'>({ children, className, ...props }: DetailsBodyProps<TTag>): react_jsx_runtime.JSX.Element;
+declare function Details<TTag extends ElementType = 'div'>({ as, className, ...props }: DetailsProps<TTag>): react_jsx_runtime.JSX.Element;
+
+type DropDownButtonProps<TTag extends ElementType = 'button'> = Omit<MenuButtonProps<TTag>, 'as' | 'className'> & {
+    arrow?: boolean | ReactNode;
+    as?: TTag | ElementType;
+    className?: string;
+};
+type DropDownItemProps<TTag extends ElementType = 'div'> = Omit<MenuItemProps<TTag>, 'as'> & AnyElementProps<TTag>;
+type DropDownItemsProps = Omit<MenuItemsProps, 'className' | 'transition'> & {
+    className?: string;
+    containerClassName?: string;
+};
+type DropDownProps = MenuProps;
+type DropDownSectionProps = MenuSectionProps & {
+    label?: string;
+    labelProps?: Omit<MenuHeadingProps, 'children'> & {
+        /** @deprecated Use `label` instead. */
+        children?: never;
+    };
+    separatorAbove?: boolean;
+    separatorBelow?: boolean;
+};
+type DropDownSeparatorProps<TTag extends ElementType = 'div'> = Omit<MenuSeparatorProps<TTag>, 'as'> & AnyElementProps<TTag>;
+
+declare function DropDownButton<TTag extends ElementType = 'button'>({ arrow, as, children, className, ...props }: DropDownButtonProps<TTag>): react_jsx_runtime.JSX.Element;
+declare function DropDownItem<TTag extends ElementType = 'div'>({ as, ...props }: DropDownItemProps<TTag>): react_jsx_runtime.JSX.Element;
+declare function DropDownItems({ anchor, children, className, containerClassName, style, ...props }: DropDownItemsProps): react_jsx_runtime.JSX.Element;
+declare function DropDownSection({ children, label, labelProps, separatorAbove, separatorBelow, ...props }: DropDownSectionProps): react_jsx_runtime.JSX.Element;
+declare function DropDownSeparator<TTag extends ElementType = 'div'>({ as, className, ...props }: DropDownSeparatorProps<TTag>): react_jsx_runtime.JSX.Element;
+declare function DropDown(props: DropDownProps): react_jsx_runtime.JSX.Element;
+
+type StringField = {
+    type: 'email' | 'file' | 'number' | 'string' | 'tel' | 'textarea' | 'url';
+    value: string;
+    required?: boolean;
+    invalid?: boolean;
+};
+type ObjectField = {
+    type: 'object';
+    fields: Field[];
+};
+type ArrayField = {
+    type: 'array';
+    of: ArrayObjectOrNormalField;
+};
+type ArrayObjectOrNormalField = StringField | ArrayField | ObjectField;
+type Field = ArrayObjectOrNormalField & {
+    id: string;
+    name: string;
+};
+type FormContext = Field[];
+
+type FormStatus = 'error' | 'incomplete' | 'loading' | 'ready' | 'success' | 'readonly';
+
+type NameOrLegend = OneOf<[
+    {
+        legend: string;
+        legendProps?: Omit<LegendProps, 'children'> & {
+            /** @deprecated Use the `legend` prop instead. */
+            children?: never;
+        };
+    },
+    {
+        name: string;
+    }
+]>;
+type FieldsetProps = Omit<FieldsetProps$1, 'name'> & NameOrLegend & {
+    /** When true, the fieldset will only be used for decoration and will not affect the `formContext`. */
+    decorative?: boolean;
+    /**
+     * Joins all values in the fieldset into a single string value.
+     *
+     * @example
+     * ```tsx
+     * <Fieldset legend='Full Name' join=' '>
+     *   <Input name='First Name />
+     *   <Input name='Last Name />
+     * </Fieldset>
+     * ```
+     * `[{ name: 'First Name', value: 'Johnny' }, { name: 'Last Name', value: 'Appleseed' }]`
+     *
+     * ↓
+     *
+     * `[{ name: 'Full Name', value: 'Johnny Appleseed' }]`
+     */
+    join?: string;
+};
+
+declare function Fieldset({ children, className, decorative, join, legend, legendProps, name, ...props }: FieldsetProps): react_jsx_runtime.JSX.Element;
+
+type DayNumber = 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;
+type DateTimeObject = {
+    day: DayNumber;
+    hour: HourNumber;
+    minute: MinuteNumber;
+    month: MonthNumber | MonthName;
+    second: SecondNumber;
+    year: number;
+};
+type HourNumber = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23;
+type MinuteNumber = 0 | 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 | 54 | 55 | 56 | 57 | 58 | 59;
+type MonthName = 'January' | 'February' | 'March' | 'April' | 'May' | 'June' | 'July' | 'August' | 'September' | 'October' | 'November' | 'December';
+type MonthNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+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 DateTimeMinMax = Date | [
+    number,
+    DateTimeObject['month'],
+    DateTimeObject['day'],
+    DateTimeObject['hour'],
+    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;
+    };
+    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>;
+};
+type PasswordOptions = {
+    matchPreviousInput: boolean;
+    requireLowercaseCharacter: boolean;
+    requireNumber: boolean;
+    requireSpecialCharacter: boolean;
+    requireUppercaseCharacter: boolean;
+};
+type PhoneOptions = {
+    countryCode: string;
+    /**
+     * @example
+     * format: 'continuous'
+     * returns: 5555555555
+     *
+     * @example
+     * format: 'dot'
+     * returns: 555.555.5555
+     *
+     * @example
+     * format: 'hyphenated'
+     * returns: 555-555-5555
+     *
+     * @example
+     * format: 'space'
+     * returns: 555 555 5555
+     *
+     * @example
+     * format: 'standard' (default)
+     * returns: (555) 555-5555
+     */
+    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): react_jsx_runtime.JSX.Element;
+
+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. */
+    customTheme?: {
+        /** Example: `'[--theme-color:var(--color-blue-500)]'` */
+        themeColor: string;
+        /**
+         * @deprecated Only `themeColor` is available.
+         *
+         * ~~This doesn't use any preset color theme classes.~~
+         */
+        classes?: never;
+    };
+    /** The message to display when the form status is "error" */
+    error?: ReactNode;
+    /** The message to display when the form status is "incomplete" */
+    incomplete?: ReactNode;
+    /** The message to display when the form status is "loading" */
+    loading?: ReactNode;
+    /** The message to display when the form status is "readonly" */
+    readonly?: ReactNode;
+    /**
+     * @deprecated Use `children` instead.
+     *
+     * ~~The message to display when the form status is "ready"~~
+     */
+    ready?: never;
+    /** The message to display when the form status is "success" */
+    success?: ReactNode;
+    /**
+     * @deprecated Use `customTheme.themeColor` instead.
+     *
+     * ~~Color theme.~~
+     */
+    theme?: never;
+};
+
+declare function SubmitButton({ children, className, customTheme, error, incomplete, loading, success, type, ...props }: SubmitButtonProps): react_jsx_runtime.JSX.Element;
+
+type TextareaProps = Omit<TextareaProps$1, 'name'> & {
+    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<HTMLTextAreaElement | null>;
+};
+
+declare function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onBlur, onChange, placeholder, ref, required, value, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+
+type FormSubmitArgs = {
+    event: FormEvent<HTMLFormElement>;
+    formContext: FormContext;
+};
+type FormProps<T extends ElementType = 'form'> = Omit<AnyElementProps<T, {
+    controlled?: 'auto' | 'manual' | 'none';
+    handleSubmit?: FormEventHandler<HTMLFormElement>;
+    initialStatus?: FormStatus;
+    onError?: (e: FormEvent<HTMLFormElement>, error: string) => void;
+    onSuccess?: (e: FormEvent<HTMLFormElement>) => void;
+}>, 'onSubmit'> & {
+    onSubmit?: ({ event, formContext, }: FormSubmitArgs) => ({
+        error?: string;
+        status?: 'error';
+    } | {
+        status?: 'success';
+    }) | Promise<{
+        error?: string;
+        status?: 'error';
+    } | {
+        status?: 'success';
+    }>;
+};
+
+declare function Form<T extends ElementType = 'form'>({ controlled, initialStatus, ...props }: FormProps<T>): react_jsx_runtime.JSX.Element;
+
+type GhostProps = HTMLAttributes<HTMLDivElement>;
+declare function Ghost({ children, className, ...props }: GhostProps): react_jsx_runtime.JSX.Element;
+
+type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    customize?: Partial<{
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    }>;
+    ref?: RefObject<HTMLHeadingElement | null>;
+};
+
+/**
+ * # Heading
+ * A heading component that renders HTML heading elements (h1-h6) with appropriate styling.
+ * Automatically generates an ID for the heading based on its content if none is provided.
+ */
+declare function Heading({ as, children, customize, className, id, ref, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+
+type IFrameAllowAttribute = 'accelerometer' | 'ambient-light-sensor' | 'attribution-reporting' | 'autoplay' | 'bluetooth' | 'camera' | 'captured-surface-control' | 'compute-pressure' | 'cross-origin-isolated' | 'deferred-fetch' | 'deferred-fetch-minimal' | 'display-capture' | 'encrypted-media' | 'fullscreen' | 'gamepad' | 'geolocation' | 'gyroscope' | 'hid' | 'identity-credentials-get' | 'idle-detection' | 'language-detector' | 'local-fonts' | 'magnetometer' | 'microphone' | 'midi' | 'otp-credentials' | 'payment' | 'picture-in-picture' | 'publickey-credentials-get' | 'screen-wake-lock' | 'serial' | 'speaker-selection' | 'storage-access' | 'translator' | 'summarizer' | 'usb' | 'web-share' | 'window-management' | 'xr-spatial-tracking';
+type IFrameReferrerPolicyAttribute = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+type IFrameSandboxAttribute = 'allow-downloads' | 'allow-forms' | 'allow-modals' | 'allow-orientation-lock' | 'allow-pointer-lock' | 'allow-popups' | 'allow-popups-to-escape-sandbox' | 'allow-presentation' | 'allow-same-origin' | 'allow-scripts' | 'allow-storage-access-by-user-activation' | 'allow-top-navigation' | 'allow-top-navigation-by-user-activation' | 'allow-top-navigation-to-custom-protocols';
+type IFrameProps = Omit<ComponentPropsWithRef<'iframe'>, 'allow' | 'children' | 'referrerPolicy' | 'sandbox' | 'title'> & {
+    allow?: (IFrameAllowAttribute | Record<IFrameAllowAttribute, string[] | boolean>)[] | 'allow-all';
+    referrerPolicy?: IFrameReferrerPolicyAttribute;
+    sandbox?: IFrameSandboxAttribute[];
+    title: string;
+};
+/**
+ * # iFrame
+ * - An `<iframe/>` with preset classes, backup, and required title for SEO.
+ */
+declare function IFrame({ allow, className, referrerPolicy, sandbox, ...props }: IFrameProps): react_jsx_runtime.JSX.Element;
+
+type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | (({ openModal, closeModal }: {
+        openModal: () => void;
+        closeModal: () => void;
+    }) => ReactNode);
+    dragToClose?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    place?: 'center' | 'bottom';
+};
+
+declare function ModalTrigger<T extends ElementType = typeof Button$1>({ as, ...props }: AnyElementProps<T>): react_jsx_runtime.JSX.Element;
+declare function ModalTitle(props: DialogTitleProps): react_jsx_runtime.JSX.Element;
+declare function ModalDialog(props: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function ModalClose<T extends ElementType = typeof Button$1>({ as, ...props }: AnyElementProps<T>): react_jsx_runtime.JSX.Element;
+declare function Modal({ children, className, onClose, onOpen, place }: ModalProps): react_jsx_runtime.JSX.Element;
+
+type TimeProps = HTMLAttributes<HTMLTimeElement> & Partial<{
+    dateObject: Date;
+    dateTime: string;
+    day: boolean;
+    hours: boolean;
+    milliseconds: boolean;
+    minutes: boolean;
+    month: boolean;
+    seconds: boolean;
+    year: boolean;
+}> & {
+    ref?: RefObject<HTMLTimeElement | null>;
+};
+
+declare function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): react_jsx_runtime.JSX.Element;
+
+type TooltipProps = {
+    anchor?: Placement;
+    arrow?: boolean;
+    arrowClassName?: string;
+    children: ReactNode | (({ openTooltip, closeTooltip }: {
+        openTooltip: () => void;
+        closeTooltip: () => void;
+    }) => ReactNode);
+    delay?: number;
+    offset?: number;
+    onClose?: () => void;
+    onOpen?: () => void;
+    portal?: boolean;
+    maxWidth?: number;
+};
+type TooltipTriggerProps<T extends ElementType = 'button'> = AnyElementProps<T> & {
+    asChild?: boolean;
+};
+type TooltipPanelProps<T extends ElementType = 'div'> = AnyElementProps<T>;
+
+declare function TooltipTrigger<T extends ElementType = typeof Button$1>({ as, asChild, children, ...props }: TooltipTriggerProps<T>): react_jsx_runtime.JSX.Element;
+declare function TooltipPanel<T extends ElementType = 'div'>({ as, children, className, style, ...props }: TooltipPanelProps<T>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ anchor, arrow, arrowClassName, children, delay, offset, onClose, onOpen, portal, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+type VideoControl = 'download' | 'fullscreen' | 'playbackrate' | 'pause' | 'remoteplayback' | 'seeking' | 'volume';
+type Source = {
+    src: string;
+    type: 'video/avi' | 'video/flv' | 'video/mkv' | 'video/mov' | 'video/mp4' | 'video/ogg' | 'video/webm';
+};
+type SourceOrSourceGroup = OneOf<[
+    Source,
+    {
+        srcGroup: Source[];
+    }
+]>;
+type VideoProps = Omit<ComponentPropsWithRef<'video'>, 'controls' | 'controlList' | 'poster' | 'src' | 'title'> & {
+    controls?: boolean | VideoControl | VideoControl[];
+    poster?: {
+        primary?: boolean;
+        src: string;
+        type: 'image/apng' | 'image/avif' | 'image/gif' | 'image/jpeg' | 'image/png' | 'image/svg+xml' | 'image/webp';
+        width: number;
+    }[];
+    /** @deprecated Even if you only have on source file, please use srcSet. */
+    src?: never;
+    srcSet: (SourceOrSourceGroup & {
+        width: number;
+    })[];
+    title: string;
+};
+
+declare function Video({ autoPlay, className, controls, poster, ref, srcSet, title, ...props }: VideoProps): react_jsx_runtime.JSX.Element;
+
+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, HeadingProps, IFrameAllowAttribute, IFrameProps, IFrameReferrerPolicyAttribute, IFrameSandboxAttribute, InputProps, LinkProps, ModalProps, SubmitButtonProps, TextareaProps, TooltipPanelProps, TooltipProps, TooltipTriggerProps, VideoControl, VideoProps };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}