@andrilla/mado-ui 1.0.0

package/dist/components/button.d.ts

@@ -0,0 +1,83 @@
+import type { ElementType, JSX } from 'react';
+import type { AnyElementProps, ColorTheme, OneOf } from '../types';
+type LinkOrOther<TTag extends ElementType = typeof HeadlessButton> = OneOf<[
+    AnyElementProps<TTag>,
+    AnyElementProps<typeof Anchor>
+]>;
+export type ButtonPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ButtonBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export type ButtonProps<TTag extends ElementType = typeof HeadlessButton> = 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;
+};
+export 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<PropertyKey, never> ? keyof T['theme'] : never;
+export type ExtendedButtonProps<TExtendedConfig extends ExtendedButtonConfig, TTag extends ElementType = typeof HeadlessButton> = Omit<ButtonProps<TTag>, 'theme' | 'customTheme'> & {
+    theme?: ButtonProps<TTag>['theme'] | ExtendedThemeNames<TExtendedConfig>;
+    customTheme?: ButtonProps<TTag>['customTheme'];
+};
+import { Anchor } 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 declare function Button<TTag extends ElementType = typeof HeadlessButton>({ className, customTheme, gradient, padding, rounded, theme, ...props }: ButtonProps<TTag>): 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'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export declare function createButton<TExtendedConfig extends ExtendedButtonConfig>(config: TExtendedConfig): <TTag extends ElementType = typeof HeadlessButton>({ theme, className, customTheme, gradient, padding, rounded, as, ...props }: ExtendedButtonProps<TExtendedConfig, TTag>) => JSX.Element;
+export {};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,22 @@
+export type CheckboxProps = Omit<HeadlessCheckboxProps, 'children'> & {
+    checkmark?: ReactNode;
+    children: ReactNode;
+    description?: DescriptionProps['children'];
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated use `description` prop instead */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+    };
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+    };
+    inputContainerProps?: ComponentPropsWithRef<'div'>;
+    required?: boolean;
+};
+import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
+import { type CheckboxProps as HeadlessCheckboxProps, type DescriptionProps, type FieldProps, type LabelProps } from '@headlessui/react';
+export declare function Checkbox({ checkmark, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, labelProps: { className: labelClassName, ...labelProps }, inputContainerProps: { className: inputContainerClassName, ...inputContainerProps }, onChange, required, value, ...props }: CheckboxProps): JSX.Element;

package/dist/components/details.d.ts

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

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

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

package/dist/components/fieldset.d.ts

@@ -0,0 +1,18 @@
+import type { OneOf } from '../types';
+import type { JSX } from 'react';
+type NameOrLegend = OneOf<[
+    {
+        legend: string;
+        legendProps?: Omit<LegendProps, 'children'> & {
+            /** @deprecated Use the `legend` prop instead. */
+            children?: never;
+        };
+    },
+    {
+        name: string;
+    }
+]>;
+export type FieldsetProps = Omit<HeadlessFieldsetProps, 'name'> & NameOrLegend;
+import { type FieldsetProps as HeadlessFieldsetProps, type LegendProps } from '@headlessui/react';
+export declare function Fieldset({ children, className, legend, legendProps, name, ...props }: FieldsetProps): JSX.Element;
+export {};

package/dist/components/form.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef, JSX } from 'react';
+export type FormProps = ComponentPropsWithRef<'form'>;
+export declare function Form({ children, className, ...props }: FormProps): JSX.Element;

package/dist/components/ghost.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentPropsWithRef, JSX } from 'react';
+export type GhostProps = ComponentPropsWithRef<'div'>;
+export declare function Ghost({ children, className, ...props }: GhostProps): JSX.Element;

package/dist/components/heading.d.ts

@@ -0,0 +1,19 @@
+export type HeadingProps = ComponentPropsWithRef<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> & {
+    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>;
+};
+import { type ComponentPropsWithRef, type JSX, type RefObject } from 'react';
+/**
+ * # 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.
+ */
+export declare function Heading({ as, children, customize, className, id, ref, ...props }: HeadingProps): JSX.Element;

package/dist/components/human-verification.d.ts

@@ -0,0 +1,14 @@
+import type { OneOf } from '../types';
+type HumanVerificationProps = {
+    children?: string;
+    className?: string;
+};
+import { type JSX } from 'react';
+export declare function validateHuman(token: string): OneOf<[{
+    success: true;
+}, {
+    error: string;
+}]>;
+export declare function generateHumanValidationToken(): string;
+export declare function HumanVerification({ children, className, }: HumanVerificationProps): JSX.Element;
+export {};

package/dist/components/iframe.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithRef, JSX } from 'react';
+export 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';
+export type IFrameReferrerPolicyAttribute = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+export 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';
+export 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.
+ */
+export declare function IFrame({ allow, className, referrerPolicy, sandbox, ...props }: IFrameProps): JSX.Element;

package/dist/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from './button';
+export * from './checkbox';
+export * from './details';
+export * from './drop-down';
+export * from './fieldset';
+export * from './form';
+export * from './ghost';
+export * from './heading';
+export * from './human-verification';
+export * from './iframe';
+export * from './input';
+export * from './link';
+export * from './modal';
+export * from './select';
+export * from './submit-button';
+export * from './textarea';
+export * from './time';
+export * from './tooltip';

package/dist/components/input.d.ts

@@ -0,0 +1,35 @@
+import type { JSX, ReactNode } from 'react';
+export type InputProps = HeadlessInputProps & {
+    /** Ideal for tooltips. Wrapped within the same div that wraps the input. */
+    children?: ReactNode;
+    description?: DescriptionProps['children'];
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated use `description` prop instead */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+    };
+    label?: LabelProps['children'];
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated use `label` prop instead */
+        children?: never;
+    };
+};
+import { type DescriptionProps, type FieldProps, type InputProps as HeadlessInputProps, type LabelProps } from '@headlessui/react';
+/**
+ * # Input
+ *
+ * A layer on top of Headless UI's Input component with built in validation styles, required by default, plus wrapped in a Field component with a customizable label and description.
+ *
+ * @prop label - The label for the select component.
+ * @prop description - The description for the select component.
+ * @prop placeholder - The placeholder for the select component.
+ * @prop required - (default: true) Whether the select component is required.
+ * @prop invalid - Whether the select component is invalid.
+ * @prop fieldProps - The props to be passed to the parent field component.
+ * @prop labelProps - The props to be passed to the label component.
+ * @prop descriptionProps - The props to be passed to the description component.
+ */
+export declare function Input({ children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, label, labelProps: { className: labelClassName, ...labelProps }, required, ...props }: InputProps): JSX.Element;

package/dist/components/link.d.ts

@@ -0,0 +1,116 @@
+import type { AnyElementProps, ColorTheme, OneOf } from '../types';
+import type { ElementType, JSX } from 'react';
+export type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag> & {
+    disabled?: boolean;
+};
+export declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps<TTag>): 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;
+    }
+]>;
+export 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
+]>>;
+export declare function getLinkClasses({ customTheme, theme, type, }: Pick<LinkProps, 'customTheme' | 'theme' | 'type'>): string;
+/**
+ * # 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>
+ */
+export declare function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, theme, type, ...props }: LinkProps<TTag>): JSX.Element;
+export 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<T extends ExtendedLinkConfig> = T['theme'] extends Record<string, unknown> ? keyof T['theme'] : never;
+export type ExtendedLinkProps<TExtendedConfig extends ExtendedLinkConfig, TTag extends ElementType = typeof Anchor> = Omit<LinkProps<TTag>, 'theme' | 'customTheme'> & {
+    theme?: LinkProps<TTag>['theme'] | ExtendedThemeNames<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'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+export declare function createLink<TExtendedConfig extends ExtendedLinkConfig>(config: TExtendedConfig): <TTag extends ElementType = typeof Anchor>({ theme, className, customTheme, type, as, ...props }: ExtendedLinkProps<TExtendedConfig, TTag>) => JSX.Element;
+export {};

package/dist/components/modal.d.ts

@@ -0,0 +1,18 @@
+import type { AnyElementProps } from '../types';
+export type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode | (({ openModal, closeModal, }: {
+        openModal: () => void;
+        closeModal: () => void;
+    }) => ReactNode);
+    dragToClose?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    place?: 'center' | 'bottom';
+};
+import { type ElementType, type HTMLAttributes, type JSX, type ReactNode } from 'react';
+import { Button as HeadlessButton, type DialogTitleProps } from '@headlessui/react';
+export declare function ModalTrigger<TTag extends ElementType = typeof HeadlessButton>({ as, onClick, ...props }: AnyElementProps<TTag>): JSX.Element;
+export declare function ModalTitle(props: DialogTitleProps): JSX.Element;
+export declare function ModalDialog(props: HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare function ModalClose<T extends ElementType = typeof HeadlessButton>({ as, ...props }: AnyElementProps<T>): JSX.Element;
+export declare function Modal(props: ModalProps): JSX.Element;

package/dist/components/select.d.ts

@@ -0,0 +1,80 @@
+export type SelectProps = Omit<ListboxProps, 'children' | 'defaultValue' | 'multiple' | 'onChange'> & {
+    buttonProps?: Omit<ListboxButtonProps, 'className'> & {
+        /** @deprecated use `className` prop instead */
+        className?: never;
+    };
+    children: ReactNode;
+    className?: ListboxButtonProps['className'];
+    description?: DescriptionProps['children'];
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated use `description` prop instead */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+    };
+    label?: LabelProps['children'];
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated use `label` prop instead */
+        children?: never;
+    };
+    optionsProps?: ListboxOptionsProps;
+    placeholder?: ListboxSelectedOptionProps['placeholder'];
+    required?: boolean;
+    selectedOptionProps?: Omit<ListboxSelectedOptionProps, 'options' | 'placeholder'> & {
+        /** @deprecated use `placeholder` prop instead */
+        placeholder?: never;
+    };
+} & ({
+    defaultValue?: string;
+    multiple?: false | never;
+    onChange?: (selected: string) => void;
+} | {
+    defaultValue?: string[];
+    multiple?: true;
+    onChange?: (selected: string[]) => void;
+});
+export type SelectOptionProps = Omit<ListboxOptionProps, 'className'> & {
+    className?: string;
+    name: string;
+};
+import { type ComponentPropsWithRef, type JSX, type ReactNode } from 'react';
+import { type DescriptionProps, type FieldProps, type LabelProps, type ListboxButtonProps, type ListboxOptionProps, type ListboxOptionsProps, type ListboxProps, type ListboxSelectedOptionProps } from '@headlessui/react';
+/**
+ * ## Select Section Title
+ *
+ * Displays a simple title.
+ */
+export declare function SelectSectionTitle({ className, ...props }: ComponentPropsWithRef<'div'>): JSX.Element;
+/**
+ * ## SelectOption
+ *
+ * @prop children - This is what is displayed in the drop down menu
+ * @prop name - This is displayed in the trigger button
+ * @prop value - This is used for FormData
+ */
+export declare function SelectOption({ children, className, name, ...props }: SelectOptionProps): JSX.Element;
+/**
+ * # Select
+ *
+ * A customizable select component intended to work very similar to HTML's `<select>` element.
+ *
+ * Use the `SelectOption` component to define the options.
+ *
+ * Use the `SelectSectionTitle` component to define titles.
+ *
+ * @prop label - The label for the select component.
+ * @prop description - The description for the select component.
+ * @prop placeholder - The placeholder for the select component.
+ * @prop required - Whether the select component is required.
+ * @prop invalid - Whether the select component is invalid.
+ * @prop multiple - Whether the select component allows multiple selections.
+ * @prop optionsProps - The props to be passed to each SelectOption component.
+ * @prop selectedOptionProps - The props to be passed to the selected option component.
+ * @prop fieldProps - The props to be passed to the parent field component.
+ * @prop labelProps - The props to be passed to the label component.
+ * @prop descriptionProps - The props to be passed to the description component.
+ * @prop anchor - The anchor point for the drop down menu.
+ */
+export declare function Select({ buttonProps, children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, invalid, label, labelProps: { className: labelClassName, ...labelProps }, onChange, optionsProps: { anchor, className: optionsClassName, transition, ...optionsProps }, placeholder, required, selectedOptionProps: { ...selectedOptionProps }, ...props }: SelectProps): JSX.Element;

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

@@ -0,0 +1,49 @@
+import type { JSX, ReactNode } from 'react';
+export 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;
+    formStatus?: 'error' | 'incomplete' | 'loading' | 'readonly' | 'ready' | 'success';
+    /** 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;
+};
+import { type ButtonProps } from './button';
+/**
+ * # Submit Button
+ *
+ * @prop formStatus - (default: 'ready') When you supply a form status, the button has built-in color changes, animations, and user feedback
+ * @prop error - The children to display when `formStatus === 'error'`
+ * @prop incomplete - The children to display when `formStatus === 'incomplete'`
+ * @prop loading - The children to display when `formStatus === 'loading'`
+ * @prop success - The children to display when `formStatus === 'success'`
+ * @prop readonly - The children to display when `formStatus === 'readonly'`
+ */
+export declare function SubmitButton({ children, className, customTheme, error, formStatus, incomplete, loading, readonly, success, type, ...props }: SubmitButtonProps): JSX.Element;

package/dist/components/textarea.d.ts

@@ -0,0 +1,37 @@
+import type { JSX, ReactNode } from 'react';
+export type TextareaProps = HeadlessTextareaProps & {
+    /** Ideal for tooltips. Wrapped within the same div that wraps the input. */
+    children?: ReactNode;
+    description?: DescriptionProps['children'];
+    descriptionProps?: Omit<DescriptionProps, 'children'> & {
+        /** @deprecated use `description` prop instead */
+        children?: never;
+    };
+    fieldProps?: Omit<FieldProps, 'children'> & {
+        /** @deprecated use `children` prop instead */
+        children?: never;
+    };
+    label?: LabelProps['children'];
+    labelProps?: Omit<LabelProps, 'children'> & {
+        /** @deprecated use `label` prop instead */
+        children?: never;
+    };
+    resize?: boolean | 'content' | 'x' | 'y' | ('content' | 'x' | 'y')[];
+};
+import { type DescriptionProps, type FieldProps, type LabelProps, type TextareaProps as HeadlessTextareaProps } from '@headlessui/react';
+/**
+ * # Textarea
+ *
+ * A layer on top of Headless UI's Textarea component with built in validation styles, required by default, plus wrapped in a Field component with a customizable label and description.
+ *
+ * @prop label - The label for the select component.
+ * @prop description - The description for the select component.
+ * @prop placeholder - The placeholder for the select component.
+ * @prop required - (default: true) Whether the select component is required.
+ * @prop invalid - Whether the select component is invalid.
+ * @prop fieldProps - The props to be passed to the parent field component.
+ * @prop labelProps - The props to be passed to the label component.
+ * @prop descriptionProps - The props to be passed to the description component.
+ * @prop resize - Makes adding the various resize CSS properties easier.
+ */
+export declare function Textarea({ children, className, description, descriptionProps: { className: descriptionClassName, ...descriptionProps }, fieldProps: { className: fieldClassName, ...fieldProps }, label, labelProps: { className: labelClassName, ...labelProps }, required, resize, ...props }: TextareaProps): JSX.Element;

package/dist/components/time.d.ts

@@ -0,0 +1,32 @@
+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>;
+};
+import { type HTMLAttributes, type JSX, type RefObject } from 'react';
+/**
+ * # Time
+ *
+ * Display date and time how you want. By default, the date is set to the current date.
+ *
+ * @prop children - Overwrite the generated display.
+ * @prop dateObject - Set the dateTime value with a Date object.
+ * @prop dateTime - Set the dateTime itself.
+ * @prop day - Include the day of the month in the display.
+ * @prop hours - Include the hours in the display.
+ * @prop milliseconds - Include the milliseconds in the display.
+ * @prop minutes - Include the minutes in the display.
+ * @prop month - Include the month in the display.
+ * @prop seconds - Include the seconds in the display.
+ * @prop year - Include the year in the display.
+ */
+export declare function Time({ children, dateObject, dateTime, day, hours, milliseconds, minutes, month, seconds, year, ref, ...props }: TimeProps): JSX.Element;
+export {};