mado-ui 0.3.1 → 0.4.0

package/css/index.css

@@ -81,6 +81,7 @@
     --blur-md: 12px;
     --blur-2xl: 40px;
     --blur-3xl: 64px;
+    --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -382,6 +383,9 @@
   .field-sizing-content {
     field-sizing: content;
   }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -451,6 +455,9 @@
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-64 {
+    min-width: calc(var(--spacing) * 64);
+  }
   .min-w-fit {
     min-width: fit-content;
   }
@@ -537,6 +544,9 @@
   .list-disc {
     list-style-type: disc;
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-\[1fr_1rem\] {
     grid-template-columns: 1fr 1rem;
   }
@@ -555,6 +565,9 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-\(--tw-gap\) {
+    gap: var(--tw-gap);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1109,6 +1122,12 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-current\/80 {
+    color: currentcolor;
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, currentcolor 80%, transparent);
+    }
+  }
   .text-neutral-50 {
     color: var(--color-neutral-50);
   }
@@ -1278,18 +1297,18 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[background-size\] {
-    transition-property: background-size;
+  .transition-\[background-size\,background-image\,color\] {
+    transition-property: background-size,background-image,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[background-size_background-image_color\] {
-    transition-property: background-size background-image color;
+  .transition-\[background-size\,color\] {
+    transition-property: background-size,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[background-size_color\] {
-    transition-property: background-size color;
+  .transition-\[background-size\] {
+    transition-property: background-size;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1313,8 +1332,8 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[transform_color\] {
-    transition-property: transform color;
+  .transition-\[transform\,color\] {
+    transition-property: transform,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1354,6 +1373,31 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .gap-1 {
+    --tw-gap: calc(var(--spacing) * 1);
+    --tw-gap-x: var(--tw-gap, calc(var(--spacing) * 1));
+    --tw-gap-y: var(--tw-gap, calc(var(--spacing) * 1));
+  }
+  .gap-2 {
+    --tw-gap: calc(var(--spacing) * 2);
+    --tw-gap-x: var(--tw-gap, calc(var(--spacing) * 2));
+    --tw-gap-y: var(--tw-gap, calc(var(--spacing) * 2));
+  }
+  .gap-3 {
+    --tw-gap: calc(var(--spacing) * 3);
+    --tw-gap-x: var(--tw-gap, calc(var(--spacing) * 3));
+    --tw-gap-y: var(--tw-gap, calc(var(--spacing) * 3));
+  }
+  .gap-4 {
+    --tw-gap: calc(var(--spacing) * 4);
+    --tw-gap-x: var(--tw-gap, calc(var(--spacing) * 4));
+    --tw-gap-y: var(--tw-gap, calc(var(--spacing) * 4));
+  }
+  .gap-8 {
+    --tw-gap: calc(var(--spacing) * 8);
+    --tw-gap-x: var(--tw-gap, calc(var(--spacing) * 8));
+    --tw-gap-y: var(--tw-gap, calc(var(--spacing) * 8));
+  }
   .animation-delay-150 {
     --tw-animation-delay: 150ms;
     animation-delay: var(--tw-animation-delay);
@@ -1376,6 +1420,9 @@
   .\[--theme-color\:var\(--color-cyan-500\)\] {
     --theme-color: var(--color-cyan-500);
   }
+  .\[--theme-color\:var\(--color-primary-500\)\] {
+    --theme-color: var(--color-primary-500);
+  }
   .\[--theme-color\:var\(--color-ui-blue\)\] {
     --theme-color: var(--color-ui-blue);
   }
@@ -1709,6 +1756,14 @@
       color: var(--color-ui-red);
     }
   }
+  .after\:transition-\[transform\,background-color\] {
+    &::after {
+      content: var(--tw-content);
+      transition-property: transform,background-color;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
   .after\:transition-\[transform_background-color\] {
     &::after {
       content: var(--tw-content);
@@ -1752,6 +1807,12 @@
       --theme-color: var(--color-blue-500);
     }
   }
+  .after\:\[--theme-color\:var\(--color-primary-500\)\] {
+    &::after {
+      content: var(--tw-content);
+      --theme-color: var(--color-primary-500);
+    }
+  }
   .after\:\[--theme-color\:var\(--color-ui-blue\)\] {
     &::after {
       content: var(--tw-content);
@@ -2263,12 +2324,6 @@
       line-height: var(--tw-leading, var(--text-5xl--line-height));
     }
   }
-  .sm\:text-xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-xl);
-      line-height: var(--tw-leading, var(--text-xl--line-height));
-    }
-  }
   .sm\:text-\[12rem\] {
     @media (width >= 40rem) {
       font-size: 12rem;

package/dist/components/button.d.ts

@@ -1,43 +1,88 @@
+import { Url, UrlObject } from 'node:url';
 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';
+import { AnyElementProps, ColorTheme, OneOf } from '../types';
+type LinkOrOther<TTag extends ElementType = typeof HeadlessButton> = OneOf<[
+    AnyElementProps<TTag> & {
+        href?: never;
     },
-    {
-        /** 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;
-            }
-        ]>;
+    AnyElementProps<typeof Anchor> & {
+        href?: string | Url | UrlObject;
     }
 ]>;
-type LinkOrOther<TTag extends ElementType> = (AnyElementProps<TTag> & {
-    href?: never;
-}) | (AnchorProps & {
-    href: string;
-});
-export type ButtonProps<TTag extends ElementType> = LinkOrOther<TTag> & ColorTheme & {
+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?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** The size of the border-1 radius. */
-    rounded?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    padding?: ButtonPadding;
+    /** The size of the border radius. */
+    rounded?: ButtonBorderRadius;
 };
-import { AnchorProps } from './link';
+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<string, unknown> ? 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 default function Button<TTag extends ElementType = typeof HeadlessButton>({ className, customTheme, gradient, padding, rounded, theme, ...props }: ButtonProps<TTag>): import("react/jsx-runtime").JSX.Element;
+export declare function Button<TTag extends ElementType = typeof HeadlessButton>({ className, customTheme, gradient, padding, rounded, theme, ...props }: ButtonProps<TTag>): import("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'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+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>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/details.d.ts

@@ -5,14 +5,12 @@ export type DetailsBodyProps<TTag extends ElementType = 'div'> = Omit<Disclosure
 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'> & {
+export type DetailsSummaryProps<TTag extends ElementType = typeof Button<typeof HeadlessButton>> = Omit<DisclosureButtonProps<TTag>, 'as' | 'className' | '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;
+import { Button as HeadlessButton, DisclosureProps, DisclosureButtonProps, DisclosurePanelProps } from '@headlessui/react';
+import { Button } from './button';
+export declare function DetailsSummary<TTag extends ElementType = typeof Button>({ arrow, 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;
+export declare function Details<TTag extends ElementType = 'div'>({ as, className, ...props }: DetailsProps<TTag>): import("react/jsx-runtime").JSX.Element;

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

@@ -7,10 +7,11 @@ export type DropDownButtonProps<TTag extends ElementType = 'button'> = Omit<Menu
 export type DropDownItemProps = MenuItemProps;
 export type DropDownItemsProps = Omit<MenuItemsProps, 'className' | 'transition'> & {
     className?: string;
+    containerClassName?: string;
 };
 export type DropDownProps = MenuProps;
 export type DropDownSectionProps = MenuSectionProps & {
-    label: string;
+    label?: string;
     labelProps?: Omit<MenuHeadingProps, 'children'> & {
         /** @deprecated Use `label` instead. */
         children?: never;
@@ -22,7 +23,7 @@ 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 DropDownItems({ anchor, children, className, containerClassName, 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;
+export declare function DropDown(props: DropDownProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -24,9 +24,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 { Fieldset, FieldsetProps, Input, InputProps, Textarea, TextareaProps, SubmitButton, SubmitButtonProps };
+export declare function Form<T extends ElementType = 'form'>({ controlled, initialStatus, ...props }: FormProps<T>): import("react/jsx-runtime").JSX.Element;
+export * from './fieldset';
+export * from './input';
+export * from './submit-button';
+export * from './textarea';

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

@@ -0,0 +1,36 @@
+import { ColorTheme, OneOf } from '../../../../types';
+export type DateOrTimeSelectorType = 'dropdown' | 'rotary';
+export type DateSelectorType = DateOrTimeSelectorType | 'calendar';
+export type TimeSelectorType = DateOrTimeSelectorType | 'clock';
+export type DateAndTimeSelectorType = DateOrTimeSelectorType | 'clock-and-calendar';
+export type DateTimeInputProps = OneOf<[
+    {
+        type: 'date';
+        /** Using an array, offers multiple, defaulting to the first listed option. */
+        ui?: DateSelectorType | DateSelectorType[] | {
+            desktop: DateSelectorType | DateSelectorType[];
+            mobile: DateSelectorType | DateSelectorType[];
+        };
+    },
+    {
+        type: 'datetime';
+        /** Using an array, offers multiple, defaulting to the first listed option. */
+        ui?: DateAndTimeSelectorType | DateAndTimeSelectorType[] | {
+            desktop: DateAndTimeSelectorType | DateAndTimeSelectorType[];
+            mobile: DateAndTimeSelectorType | DateAndTimeSelectorType[];
+        };
+    },
+    {
+        type: 'time';
+        /** Using an array, offers multiple, defaulting to the first listed option. */
+        ui?: TimeSelectorType | TimeSelectorType[] | {
+            desktop: TimeSelectorType | TimeSelectorType[];
+            mobile: TimeSelectorType | TimeSelectorType[];
+        };
+    }
+]> & {
+    max?: Date;
+    min?: Date;
+    theme?: ColorTheme;
+};
+export declare function DateTimeInput({ theme, type, ui, ...props }: DateTimeInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,54 @@
 import { OneOf } from '../../../types';
-type PasswordOptionList = {
-    matchPreviousInput: boolean;
-    requireLowercaseCharacter: boolean;
-    requireNumber: boolean;
-    requireSpecialCharacter: boolean;
-    requireUppercaseCharacter: boolean;
-};
-type TypeOfPasswordOrNot = OneOf<[
+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';
-        passwordOptions?: Partial<PasswordOptionList>;
+        options?: Partial<PasswordOptions>;
     },
     {
-        type?: Exclude<HTMLInputTypeAttribute, 'password'>;
+        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'>;
     }
 ]>;
-export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPasswordOrNot & {
+export type InputProps = Omit<HeadlessInputProps, 'max' | 'min' | 'name' | 'type'> & InputType & {
     description?: ReactNode;
     descriptionProps?: Omit<DescriptionProps, 'children'> & {
         /** @deprecated Use the `description` prop instead. */
@@ -30,7 +63,40 @@ export type InputProps = Omit<HeadlessInputProps, 'name' | 'type'> & TypeOfPassw
     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';
+};
 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;
+import { DateTimeObject, WeekNumber } from '../../../utils';
+export 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): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-export type SubmitButtonProps = Omit<ButtonProps<'button'> & {
-    href?: never;
-}, 'as' | 'customTheme' | 'href' | 'theme'> & {
+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;
@@ -36,4 +35,4 @@ export type SubmitButtonProps = Omit<ButtonProps<'button'> & {
     theme?: never;
 };
 import { ButtonProps } from '../button';
-export default function SubmitButton({ children, className, customTheme, error, incomplete, loading, success, type, ...props }: SubmitButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare 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

@@ -15,4 +15,4 @@ export type TextareaProps = Omit<HeadlessTextareaProps, 'name'> & {
 };
 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;
+export declare 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/ghost.d.ts

@@ -1,4 +1,4 @@
 import { HTMLAttributes } from 'react';
 type GhostProps = HTMLAttributes<HTMLDivElement>;
-export default function Ghost({ children, className, ...props }: GhostProps): import("react/jsx-runtime").JSX.Element;
+export declare function Ghost({ children, className, ...props }: GhostProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/heading.d.ts

@@ -16,4 +16,4 @@ import { HTMLAttributes, RefObject } from 'react';
  * 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 default function Heading({ as, children, customize, className, id, ref, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function Heading({ as, children, customize, className, id, ref, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/iframe.d.ts

@@ -0,0 +1,15 @@
+export type IFrameAllowAttribute = 'accelerometer' | 'autoplay' | 'camera' | 'encrypted-media' | 'fullscreen' | 'gyroscope' | 'magnetometer' | 'microphone' | 'payment' | 'picture-in-picture' | 'publickey-credentials-get' | 'usb';
+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-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 | IFrameAllowAttribute[] | 'allow-all';
+    referrerPolicy?: IFrameReferrerPolicyAttribute;
+    sandbox?: IFrameSandboxAttribute | IFrameSandboxAttribute[] | 'allow-all';
+    title: string;
+};
+import { ComponentPropsWithRef } from 'react';
+/**
+ * # iFrame
+ * - An `<iframe/>` with preset classes, backup, and required title for SEO.
+ */
+export declare function IFrame({ allow, className, referrerPolicy, sandbox, ...props }: IFrameProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

@@ -1,11 +1,10 @@
-import Button, { ButtonProps } from './button';
-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';
-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, };
+export * from './button';
+export * from './details';
+export * from './drop-down';
+export * from './form';
+export * from './ghost';
+export * from './heading';
+export * from './link';
+export * from './modal';
+export * from './time';
+export * from './tooltip';