mado-ui 0.2.3 → 0.3.0

package/dist/components/button.d.ts

@@ -1,21 +1,43 @@
-import { ButtonHTMLAttributes, RefObject } from 'react';
-import { OneOf } from '../types';
-type HtmlButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-    ref?: RefObject<HTMLButtonElement | null>;
-};
-type LinkOrButtonProps<T extends HTMLButtonElement | HTMLAnchorElement | unknown> = [T] extends [HTMLButtonElement] ? HtmlButtonProps : [T] extends [HTMLAnchorElement] ? AnchorProps : OneOf<[AnchorProps, HtmlButtonProps]>;
-export type ButtonProps<T extends HTMLButtonElement | HTMLAnchorElement | unknown> = LinkOrButtonProps<T> & {
+import { ElementType } from 'react';
+import { AnyElementProps, OneOf } from '../types';
+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 LinkOrOther<TTag extends ElementType> = (AnyElementProps<TTag> & {
+    href?: never;
+}) | (AnchorProps & {
+    href: string;
+});
+export type ButtonProps<TTag extends ElementType> = LinkOrOther<TTag> & ColorTheme & {
+    /** Customizes the theme color to a sensible gradient. */
+    gradient?: boolean;
     /** The size of the element based on padding. */
     padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     /** The size of the border-1 radius. */
     rounded?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    /** Color theme. */
-    theme?: 'blue' | 'blue-gradient' | 'brown' | 'brown-gradient' | 'green' | 'green-gradient' | 'grey' | 'grey-gradient' | 'sky-blue' | 'sky-blue-gradient' | 'magenta' | 'magenta-gradient' | 'neutral' | 'neutral-gradient' | 'orange' | 'orange-gradient' | 'pink' | 'pink-gradient' | 'purple' | 'purple-gradient' | 'red' | 'red-gradient' | 'violet' | 'violet-gradient' | 'yellow' | 'yellow-gradient';
 };
 import { AnchorProps } from './link';
+import { Button as HeadlessButton } from '@headlessui/react';
 /**
  * # Button
  * - A pre-styled button with utility props for easy customization depending on use case.
  */
-export default function Button<T extends HTMLButtonElement | HTMLAnchorElement | unknown = unknown>({ className, padding, rounded, theme, ref, ...props }: ButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function Button<TTag extends ElementType = typeof HeadlessButton>({ className, customTheme, gradient, padding, rounded, theme, ...props }: ButtonProps<TTag>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/details.d.ts

@@ -0,0 +1,18 @@
+import { ElementType, ReactNode } from 'react';
+export type DetailsBodyProps<TTag extends ElementType = 'div'> = Omit<DisclosurePanelProps<TTag>, 'className'> & {
+    className?: string;
+};
+export type DetailsProps<TTag extends ElementType = 'div'> = Omit<DisclosureProps<TTag>, 'className' | 'role'> & {
+    className?: string;
+};
+export type DetailsSummaryProps<TTag extends ElementType = typeof Button> = Omit<DisclosureButtonProps<TTag> & {
+    href?: never;
+}, 'className' | 'href' | 'role'> & {
+    arrow?: boolean | ReactNode;
+    className?: string;
+};
+import { DisclosureProps, DisclosureButtonProps, DisclosurePanelProps } from '@headlessui/react';
+import Button from './button';
+export declare function DetailsSummary<TTag extends ElementType = typeof Button<'button'>>({ arrow, as, children, className, ...props }: DetailsSummaryProps<TTag>): import("react/jsx-runtime").JSX.Element;
+export declare function DetailsBody<TTag extends ElementType = 'div'>({ children, className, ...props }: DetailsBodyProps<TTag>): import("react/jsx-runtime").JSX.Element;
+export default function Details<TTag extends ElementType = 'div'>({ as, className, ...props }: DetailsProps<TTag>): import("react/jsx-runtime").JSX.Element;

package/dist/components/drop-down.d.ts

@@ -0,0 +1,28 @@
+import { ElementType, ReactNode } from 'react';
+export type DropDownButtonProps<TTag extends ElementType = 'button'> = Omit<MenuButtonProps<TTag>, 'as' | 'className'> & {
+    arrow?: boolean | ReactNode;
+    as?: TTag | ElementType;
+    className?: string;
+};
+export type DropDownItemProps = MenuItemProps;
+export type DropDownItemsProps = Omit<MenuItemsProps, 'className' | 'transition'> & {
+    className?: string;
+};
+export type DropDownProps = MenuProps;
+export type DropDownSectionProps = MenuSectionProps & {
+    label: string;
+    labelProps?: Omit<MenuHeadingProps, 'children'> & {
+        /** @deprecated Use `label` instead. */
+        children?: never;
+    };
+    separatorAbove?: boolean;
+    separatorBelow?: boolean;
+};
+export type DropDownSeparatorProps = MenuSeparatorProps;
+import { MenuButtonProps, MenuHeadingProps, MenuItemProps, MenuItemsProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from '@headlessui/react';
+export declare function DropDownButton<TTag extends ElementType = 'button'>({ arrow, as, children, className, ...props }: DropDownButtonProps<TTag>): import("react/jsx-runtime").JSX.Element;
+export declare function DropDownItem({ as, ...props }: DropDownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropDownItems({ anchor, children, className, style, ...props }: DropDownItemsProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropDownSection({ children, label, labelProps, separatorAbove, separatorBelow, ...props }: DropDownSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropDownSeparator({ className, ...props }: DropDownSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export default function DropDown(props: DropDownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/fieldset.d.ts

@@ -0,0 +1,9 @@
+export type FieldsetProps = HeadlessFieldsetProps & {
+    legend?: string;
+    legendProps?: Omit<LegendProps, 'children'> & {
+        /** @deprecated Use the `legend` prop instead. */
+        children?: never;
+    };
+};
+import { FieldsetProps as HeadlessFieldsetProps, LegendProps } from '@headlessui/react';
+export default function Fieldset({ children, className, legend, legendProps, ...props }: FieldsetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/index.d.ts

@@ -25,7 +25,8 @@ export type FormProps<T extends ElementType = 'form'> = Omit<AnyElementProps<T,
 };
 import { FormContext, FormStatus } from '../../hooks';
 export default function Form<T extends ElementType = 'form'>({ controlled, initialStatus, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+import Fieldset, { FieldsetProps } from './fieldset';
 import Input, { InputProps } from './input';
 import SubmitButton, { SubmitButtonProps } from './submit-button';
 import Textarea, { TextareaProps } from './textarea';
-export { Input, InputProps, Textarea, TextareaProps, SubmitButton, SubmitButtonProps };
+export { Fieldset, FieldsetProps, Input, InputProps, Textarea, TextareaProps, SubmitButton, SubmitButtonProps };

package/dist/components/form/input/index.d.ts

@@ -1,4 +1,3 @@
-import { HTMLInputTypeAttribute, ReactNode, RefObject } from 'react';
 import { OneOf } from '../../../types';
 type PasswordOptionList = {
     matchPreviousInput: boolean;
@@ -31,6 +30,7 @@ export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPassw
     name: string;
     ref?: RefObject<HTMLInputElement | null>;
 };
+import { HTMLInputTypeAttribute, ReactNode, RefObject } from 'react';
 import { DescriptionProps, FieldProps, InputProps as HeadlessInputProps, LabelProps } from '@headlessui/react';
 export default function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onBlur, onChange, placeholder, ref, required, type, value, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/form/submit-button.d.ts

@@ -1,20 +1,39 @@
 import { ReactNode } from 'react';
-export type SubmitButtonProps = ButtonProps<HTMLButtonElement> & {
+export type SubmitButtonProps = Omit<ButtonProps<'button'> & {
+    href?: never;
+}, 'as' | 'customTheme' | 'href' | 'theme'> & {
+    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;
-    /** @deprecated Use `children` instead.
+    /** 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;
-    /** The message to display when the form status is "readonly" */
-    readonly?: ReactNode;
+    /**
+     * @deprecated Use `customTheme.themeColor` instead.
+     *
+     * ~~Color theme.~~
+     */
+    theme?: never;
 };
 import { ButtonProps } from '../button';
-export default function SubmitButton({ children, className, error, incomplete, loading, success, theme, type, ref, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function SubmitButton({ children, className, customTheme, error, incomplete, loading, success, type, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/textarea.d.ts

@@ -1,4 +1,3 @@
-import { ReactNode, RefObject } from 'react';
 export type TextareaProps = Omit<HeadlessTextareaProps, 'name'> & {
     description?: ReactNode;
     descriptionProps?: Omit<DescriptionProps, 'children'> & {
@@ -14,5 +13,6 @@ export type TextareaProps = Omit<HeadlessTextareaProps, 'name'> & {
     name: string;
     ref?: RefObject<HTMLTextAreaElement | null>;
 };
+import { ReactNode, RefObject } from 'react';
 import { DescriptionProps, FieldProps, TextareaProps as HeadlessTextareaProps, LabelProps } from '@headlessui/react';
 export default function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, name, onBlur, onChange, placeholder, ref, required, value, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1,8 +1,11 @@
 import Button, { ButtonProps } from './button';
-import Form, { FormProps, FormSubmitArgs, Input, InputProps, SubmitButton, SubmitButtonProps, Textarea, TextareaProps } from './form';
+import Details, { DetailsBody, DetailsBodyProps, DetailsProps, DetailsSummary, DetailsSummaryProps } from './details';
+import DropDown, { DropDownButton, DropDownButtonProps, DropDownItem, DropDownItemProps, DropDownItems, DropDownItemsProps, DropDownProps, DropDownSection, DropDownSectionProps, DropDownSeparator, DropDownSeparatorProps } from './drop-down';
+import Form, { Fieldset, FieldsetProps, FormProps, FormSubmitArgs, Input, InputProps, SubmitButton, SubmitButtonProps, Textarea, TextareaProps } from './form';
 import Ghost from './ghost';
 import Heading, { HeadingProps } from './heading';
 import Link, { Anchor, AnchorProps, LinkProps } from './link';
 import Modal, { ModalDialog, ModalProps, ModalTrigger } from './modal';
 import Time from './time';
-export { Anchor, AnchorProps, Button, ButtonProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Textarea, TextareaProps, Time, };
+import Tooltip, { TooltipPanel, TooltipProps, TooltipTrigger } from './tooltip';
+export { Anchor, AnchorProps, Button, ButtonProps, Details, DetailsBody, DetailsBodyProps, DetailsProps, DetailsSummary, DetailsSummaryProps, DropDown, DropDownButton, DropDownButtonProps, DropDownItem, DropDownItemProps, DropDownItems, DropDownItemsProps, DropDownProps, DropDownSection, DropDownSectionProps, DropDownSeparator, DropDownSeparatorProps, Fieldset, FieldsetProps, Form, FormProps, FormSubmitArgs, Ghost, Heading, HeadingProps, Input, InputProps, Link, LinkProps, Modal, ModalDialog, ModalProps, ModalTrigger, SubmitButton, SubmitButtonProps, Textarea, TextareaProps, Time, Tooltip, TooltipPanel, TooltipProps, TooltipTrigger, };

package/dist/components/link.d.ts

@@ -1,18 +1,40 @@
 import { AnyElementProps, OneOf } from '../types';
-import { AnchorHTMLAttributes, ElementType, RefObject } from 'react';
-export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+import { ElementType } from 'react';
+export type AnchorProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProps<TTag> & {
     disabled?: boolean;
-    ref?: RefObject<HTMLAnchorElement | null>;
 };
-export declare function Anchor({ className, disabled, href, onClick, ref, target, rel, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
-export type LinkProps<T extends ElementType = typeof Anchor> = AnyElementProps<T, OneOf<[
+export declare function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps): import("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 ColorTheme = OneOf<[
+    {
+        /** Color theme. */
+        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow';
+    },
+    {
+        /** Color theme. */
+        theme?: 'custom';
+        customTheme: ThemeColorOrClasses;
+    }
+]>;
+export type LinkProps<TTag extends ElementType<any, 'a'> = 'a'> = 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';
-        theme?: 'blue' | 'brown' | 'green' | 'grey' | 'sky-blue' | 'magenta' | 'neutral' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow';
-    }
+    } & ColorTheme
 ]>>;
 /**
  * # Link
@@ -43,4 +65,5 @@ export type LinkProps<T extends ElementType = typeof Anchor> = AnyElementProps<T
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-export default function Link({ as, className, ref, theme, type, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export default function Link({ as, className, customTheme, theme, type, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modal.d.ts

@@ -4,13 +4,12 @@ export type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
         openModal: () => void;
         closeModal: () => void;
     }) => ReactNode);
-    closeButtonRef?: RefObject<HTMLButtonElement | null>;
     dragToClose?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
     place?: 'center' | 'bottom';
 };
-import { ElementType, HTMLAttributes, ReactNode, RefObject } from 'react';
+import { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { Button as HeadlessButton, DialogTitleProps } from '@headlessui/react';
 export declare function ModalTrigger<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function ModalTitle(props: DialogTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,26 @@
+import { AnyElementProps } from '../types';
+export 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;
+};
+export type TooltipTriggerProps<T extends ElementType = 'button'> = AnyElementProps<T> & {
+    asChild?: boolean;
+};
+export type TooltipPanelProps<T extends ElementType = 'div'> = AnyElementProps<T>;
+import { ElementType, ReactNode } from 'react';
+import { Placement } from '@floating-ui/react-dom';
+import { Button as HeadlessButton } from '@headlessui/react';
+export declare function TooltipTrigger<T extends ElementType = typeof HeadlessButton>({ as, asChild, children, ...props }: TooltipTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipPanel<T extends ElementType = 'div'>({ as, children, className, style, ...props }: TooltipPanelProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function Tooltip({ anchor, arrow, arrowClassName, children, delay, offset, onClose, onOpen, portal, }: TooltipProps): import("react/jsx-runtime").JSX.Element;