mado-ui 0.3.1 → 0.3.2

package/css/index.css

@@ -451,6 +451,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;
   }
@@ -1278,18 +1281,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 +1316,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));
   }
@@ -1376,6 +1379,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 +1715,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 +1766,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);

package/dist/components/button.d.ts

@@ -1,3 +1,4 @@
+import { Url, UrlObject } from 'node:url';
 import { ElementType } from 'react';
 import { AnyElementProps, OneOf } from '../types';
 type ColorTheme = OneOf<[
@@ -20,24 +21,88 @@ type ColorTheme = OneOf<[
         ]>;
     }
 ]>;
-type LinkOrOther<TTag extends ElementType> = (AnyElementProps<TTag> & {
-    href?: never;
-}) | (AnchorProps & {
-    href: string;
-});
-export type ButtonProps<TTag extends ElementType> = LinkOrOther<TTag> & ColorTheme & {
+type LinkOrOther<TTag extends ElementType = typeof HeadlessButton> = OneOf<[
+    AnyElementProps<TTag> & {
+        href?: never;
+    },
+    AnyElementProps<typeof Anchor> & {
+        href?: string | Url | UrlObject;
+    }
+]>;
+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;
+};
+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;
+        };
+    };
+};
+export 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 { AnchorProps } from './link';
+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;
+/**
+ * # 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 as HeadlessButton, 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 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;

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;

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;

package/dist/components/index.d.ts

@@ -1,11 +1,11 @@
-import Button, { ButtonProps } from './button';
+import Button, { ButtonProps, createButton, ExtendedButtonConfig, ExtendedButtonProps } 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 Link, { Anchor, AnchorProps, createLink, ExtendedLinkConfig, ExtendedLinkProps, 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 { Anchor, AnchorProps, Button, ButtonProps, createButton, createLink, Details, DetailsBody, DetailsBodyProps, DetailsProps, DetailsSummary, DetailsSummaryProps, DropDown, DropDownButton, DropDownButtonProps, DropDownItem, DropDownItemProps, DropDownItems, DropDownItemsProps, DropDownProps, DropDownSection, DropDownSectionProps, DropDownSeparator, DropDownSeparatorProps, ExtendedButtonConfig, ExtendedButtonProps, ExtendedLinkConfig, ExtendedLinkProps, 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,9 +1,9 @@
 import { AnyElementProps, OneOf } from '../types';
 import { ElementType } from 'react';
-export type AnchorProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProps<TTag> & {
+export type AnchorProps<TTag extends ElementType = 'a'> = AnyElementProps<TTag> & {
     disabled?: boolean;
 };
-export declare function Anchor({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps): import("react/jsx-runtime").JSX.Element;
+export declare function Anchor<TTag extends ElementType = 'a'>({ as, className, disabled, href, onClick, target, rel, ...props }: AnchorProps<TTag>): import("react/jsx-runtime").JSX.Element;
 type ThemeColorOrClasses = OneOf<[
     {
         /**
@@ -28,7 +28,7 @@ type ColorTheme = OneOf<[
         customTheme: ThemeColorOrClasses;
     }
 ]>;
-export type LinkProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProps<TTag, OneOf<[
+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';
     },
@@ -65,5 +65,62 @@ export type LinkProps<TTag extends ElementType<any, 'a'> = 'a'> = AnyElementProp
  * @example
  *   <Link href='/about' type='fill-ltr' theme='red' title='About Us'>Learn more about our company</Link>
  */
-export default function Link({ as, className, customTheme, theme, type, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export default function Link<TTag extends ElementType = typeof Anchor>({ as, className, customTheme, theme, type, ...props }: LinkProps<TTag>): import("react/jsx-runtime").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;
+        };
+    };
+};
+export 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>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components.esm.js

@@ -346,7 +346,7 @@ const lineLiftClasses = twJoin([
     scaleYClasses,
     'after:origin-bottom after:translate-y-1 after:scale-x-75 active:after:translate-y-0 active:after:scale-x-100 pointer-fine:hover:after:translate-y-0 pointer-fine:hover:after:scale-x-100',
 ]);
-const fillClasses = twJoin(baseClasses, 'whitespace-nowrap transition-[transform_color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
+const fillClasses = twJoin(baseClasses, 'whitespace-nowrap transition-[transform,color] after:top-1/2 after:h-[calc(100%+0.05rem)] after:w-[calc(100%+0.25rem)] after:-translate-y-1/2 after:rounded after:ease-exponential active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 // Define theme-specific fill color transition classes
 const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
     let fillColorTransitionClasses = twJoin(fillClasses, 'transition-transform after:bg-(--theme-color)');
@@ -399,7 +399,7 @@ const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
 };
 // Define theme-specific fill center classes
 const getFillCenterClasses = (theme = 'blue', customTheme) => {
-    let fillCenterColorClasses = twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[transform_background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color)');
+    let fillCenterColorClasses = twJoin(fillClasses, 'after:scale-x-50 after:scale-y-[0.25] after:bg-(--theme-color)/0 after:transition-[transform,background-color] active:after:scale-x-100 active:after:scale-y-100 active:after:bg-(--theme-color) pointer-fine:hover:after:scale-x-100 pointer-fine:hover:after:scale-y-100 pointer-fine:hover:after:bg-(--theme-color)');
     switch (theme) {
         case 'blue':
             fillCenterColorClasses = twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-blue)]');
@@ -458,7 +458,7 @@ const multilineLineCenterClasses = twJoin([multilineXClasses, 'bg-[position:50%_
 const multilineLineLiftClasses = twJoin(multilineLineClasses, 'bg-[size:auto_0px] focus-visible:bg-[size:auto_2px] active:bg-[size:auto_2px] pointer-fine:hover:bg-[size:auto_2px]');
 const multilineFillBaseClasses = twJoin(multilineBaseClasses, 'rounded px-0.5 py-0.75 focus-visible:text-zinc-50 active:text-zinc-50 pointer-fine:hover:text-zinc-50');
 const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, 'from-(--theme-color) to-(--theme-color) transition-[background-size_color]');
+    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, 'from-(--theme-color) to-(--theme-color) transition-[background-size,color]');
     switch (theme) {
         case 'blue':
             multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
@@ -507,7 +507,7 @@ const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
     return multilineFillColorClasses;
 };
 const getMultilineFillClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, 'from-(--theme-color)/0 to-(--theme-color)/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size_background-image_color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-[size:100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-[size:100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-[size:100%_100%]');
+    let multilineFillColorClasses = twJoin(multilineFillBaseClasses, 'from-(--theme-color)/0 to-(--theme-color)/0 bg-[size:50%_0px] bg-[position:50%_50%] transition-[background-size,background-image,color] focus-visible:from-(--theme-color) focus-visible:to-(--theme-color) focus-visible:bg-[size:100%_100%] active:from-(--theme-color) active:to-(--theme-color) active:bg-[size:100%_100%] contrast-more:from-(--theme-color)/0 pointer-fine:hover:from-(--theme-color) pointer-fine:hover:to-(--theme-color) pointer-fine:hover:bg-[size:100%_100%]');
     switch (theme) {
         case 'blue':
             multilineFillColorClasses = twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
@@ -647,6 +647,71 @@ function Link({ as, className, customTheme, theme = 'blue', type, ...props }) {
     const LinkElement = as || Anchor;
     return jsx(LinkElement, { ...props, className: twMerge(linkClasses, className) });
 }
+/**
+ * # 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'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+function createLink(config) {
+    return function ExtendedLink({ theme, className, customTheme, type, as, ...props }) {
+        const finalType = type !== undefined ? type : config.type, finalTheme = theme !== undefined ? theme : config.defaultTheme;
+        const configClassName = config.className;
+        const shouldOverrideElement = !Boolean(as) && Boolean(config.as);
+        const linkProps = {
+            ...props,
+            className: undefined,
+            customTheme: undefined,
+            type: finalType,
+        };
+        if (shouldOverrideElement) {
+            linkProps.as = config.as;
+        }
+        else if (as) {
+            linkProps.as = as;
+        }
+        if (finalTheme && typeof finalTheme === 'string' && config.theme && finalTheme in config.theme) {
+            const extendedTheme = config.theme[finalTheme];
+            if (customTheme)
+                return (jsx(Link, { ...linkProps, theme: 'custom', customTheme: customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+            let resolvedCustomTheme;
+            if (extendedTheme.customTheme.themeColor) {
+                const isMultilineType = finalType ? finalType.includes('multiline') : false;
+                resolvedCustomTheme = {
+                    themeColor: isMultilineType
+                        ? extendedTheme.customTheme.themeColor.multilineFill
+                        : extendedTheme.customTheme.themeColor.fill,
+                };
+            }
+            else {
+                resolvedCustomTheme = {
+                    classes: extendedTheme.customTheme.classes,
+                };
+            }
+            return (jsx(Link, { ...linkProps, theme: 'custom', customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+        }
+        return (jsx(Link, { ...linkProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
+    };
+}
 
 /**
  * # Button
@@ -732,9 +797,76 @@ function Button({ className, customTheme, gradient = false, padding = 'md', roun
         themeClasses,
         className,
     ]);
-    const ButtonElement = 'as' in props ? props.as : props.href ? Anchor : Button$1;
-    const { as, ...restProps } = 'as' in props ? props : { ...props, as: undefined };
-    return jsx(ButtonElement, { ...restProps, className: buttonClasses });
+    if ('href' in props && !props.as && props.href)
+        return jsx(Button$1, { ...props, as: Anchor, className: buttonClasses });
+    return jsx(Button$1, { ...props, className: buttonClasses });
+}
+/**
+ * # 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'
+ *     }
+ *   }
+ * })
+ * ```
+ */
+function createButton(config) {
+    return function ExtendedButton({ theme, className, customTheme, gradient, padding, rounded, as, ...props }) {
+        const finalGradient = gradient !== undefined ? gradient : config.gradient, finalPadding = padding !== undefined ? padding : config.padding, finalRounded = rounded !== undefined ? rounded : config.rounded, finalTheme = theme !== undefined ? theme : config.defaultTheme;
+        const configClassName = config.className;
+        const shouldOverrideElement = !Boolean(as) && Boolean(config.as);
+        const getOverrideElement = () => {
+            if (!config.as)
+                return undefined;
+            if (typeof config.as === 'function' || typeof config.as === 'string')
+                return config.as;
+            const hasHref = 'href' in props && props.href;
+            if (hasHref && config.as.link) {
+                return config.as.link;
+            }
+            else if (!hasHref && config.as.default) {
+                return config.as.default;
+            }
+            return undefined;
+        };
+        const buttonProps = {
+            ...props,
+            className: undefined,
+            customTheme: undefined,
+            gradient: finalGradient,
+            padding: finalPadding,
+            rounded: finalRounded,
+        };
+        if (shouldOverrideElement) {
+            const overrideElement = getOverrideElement();
+            if (overrideElement)
+                buttonProps.as = overrideElement;
+        }
+        else if (as)
+            buttonProps.as = as;
+        if (finalTheme && typeof finalTheme === 'string' && config.theme && finalTheme in config.theme) {
+            const extendedTheme = config.theme[finalTheme];
+            return (jsx(Button, { ...buttonProps, theme: 'custom', customTheme: customTheme || extendedTheme.customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+        }
+        return (jsx(Button, { ...buttonProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
+    };
 }
 
 function ChevronDown(props) {
@@ -749,10 +881,8 @@ function xmark(props) {
     return (jsx("svg", { viewBox: '0 0 64 64', ...props, children: jsx("path", { d: 'M1,63c0.7,0.7,1.6,1,2.6,1s1.9-0.3,2.6-1L32,37.1L57.8,63c0.7,0.7,1.5,1,2.5,1c1,0,1.9-0.3,2.6-1c0.7-0.7,1-1.6,1-2.6 c0-1-0.3-1.8-1-2.5L37.1,32L63,6.2c0.7-0.7,1-1.6,1-2.6S63.7,1.7,63,1c-0.7-0.7-1.6-1-2.6-1c-1,0-1.8,0.3-2.5,1L32,26.9L6.2,1 C5.5,0.3,4.6,0,3.6,0C2.6,0,1.7,0.3,1,1C0.3,1.7,0,2.6,0,3.6c0,1,0.3,1.9,1,2.6L26.9,32L1,57.8c-0.7,0.7-1,1.5-1,2.6 C0,61.4,0.3,62.3,1,63z' }) }));
 }
 
-function DetailsSummary({ arrow = true, as, children, className, ...props }) {
-    return (
-    // @ts-expect-error Button has some extra props
-    jsx(DisclosureButton, { ...props, as: as || (Button), className: twMerge('w-full', className, Boolean(arrow) && 'grid grid-cols-[1fr_1rem] gap-2'), role: 'summary', children: bag => (jsxs(Fragment$1, { children: [typeof children === 'function' ? children(bag) : children, arrow &&
+function DetailsSummary({ arrow = true, children, className, ...props }) {
+    return (jsx(DisclosureButton, { ...props, as: (Button), className: twMerge('w-full', className, Boolean(arrow) && 'grid grid-cols-[1fr_1rem] gap-2'), role: 'summary', children: bag => (jsxs(Fragment$1, { children: [typeof children === 'function' ? children(bag) : children, arrow &&
                     (typeof arrow === 'boolean' ? (jsx(ChevronDown, { className: 'absolute top-1/2 right-3 block w-4 -translate-y-1/2' })) : (arrow))] })) }));
 }
 function DetailsBody({ children, className, ...props }) {
@@ -769,7 +899,7 @@ function DropDownButton({ arrow = true, as, children, className, ...props }) {
 function DropDownItem({ as, ...props }) {
     return jsx(MenuItem, { as: as || 'div', ...props });
 }
-function DropDownItems({ anchor, children, className, style, ...props }) {
+function DropDownItems({ anchor, children, className, containerClassName, style, ...props }) {
     const getAnchorProps = () => {
         let initialAnchor = { gap: '1rem', padding: '1rem', to: 'bottom start' };
         if (anchor) {
@@ -781,11 +911,11 @@ function DropDownItems({ anchor, children, className, style, ...props }) {
         return initialAnchor;
     };
     const anchorProps = getAnchorProps();
-    return (jsx(MenuItems, { ...props, anchor: anchorProps, className: 'grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential data-closed:grid-rows-0fr', transition: true, style: { ...style, minWidth: 'var(--button-width)' }, children: bag => (jsx("div", { className: 'overflow-y-hidden', children: jsx("div", { className: twMerge('bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150', className), children: typeof children === 'function' ? children(bag) : children }) })) }));
+    return (jsx(MenuItems, { ...props, anchor: anchorProps, className: twMerge('grid grid-rows-1fr rounded-xl shadow-xl transition-rows duration-500 ease-exponential data-closed:grid-rows-0fr', containerClassName), transition: true, style: { ...style, minWidth: 'var(--button-width)' }, children: bag => (jsx("div", { className: 'overflow-y-scroll', children: jsx("div", { className: twMerge('rounded-xl bg-neutral-50/20 px-6 py-5 backdrop-blur-md backdrop-brightness-150', className), children: typeof children === 'function' ? children(bag) : children }) })) }));
 }
 function DropDownSection({ children, label, labelProps, separatorAbove, separatorBelow, ...props }) {
     const { labelClassName, ...restLabelProps } = { labelClassName: labelProps?.className || '', ...labelProps };
-    return (jsx(MenuSection, { ...props, children: sectionBag => (jsxs(Fragment$1, { children: [separatorAbove && jsx(DropDownSeparator, {}), jsx(MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label }), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsx(DropDownSeparator, {})] })) }));
+    return (jsx(MenuSection, { ...props, children: sectionBag => (jsxs(Fragment$1, { children: [separatorAbove && jsx(DropDownSeparator, {}), label && (jsx(MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label })), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsx(DropDownSeparator, {})] })) }));
 }
 function DropDownSeparator({ className, ...props }) {
     return (jsx(MenuSeparator, { ...props, className: bag => twMerge('my-4 block h-px rounded-full bg-neutral-950/20', typeof className === 'function' ? className(bag) : className) }));
@@ -3210,7 +3340,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                     : descriptionProps?.className), children: description }))] }));
 }
 
-function SubmitButton({ children, className, customTheme, error, incomplete, loading, success, type = 'submit', ...props }) {
+function SubmitButton({ children, className, customTheme, error, incomplete, loading, success, type, ...props }) {
     const [formStatus] = useFormStatus();
     const getFormStatusButtonClasses = () => {
         switch (formStatus) {
@@ -3258,9 +3388,9 @@ function SubmitButton({ children, className, customTheme, error, incomplete, loa
         }
     };
     const dataFormState = getDataFormState();
-    return (jsx(Button, { ...props, ...dataFormState, as: 'button', className: twMerge([formStatusButtonClasses, 'w-full text-white data-loading:text-black', className]), customTheme: {
+    return (jsx(Button, { ...props, ...dataFormState, className: twMerge([formStatusButtonClasses, 'w-full text-white data-loading:text-black', className]), customTheme: {
             themeColor: twMerge('data-error:[--theme-color:var(--color-ui-red)] data-incomplete:[--theme-color:var(--color-ui-grey)] data-loading:[--theme-color:var(--color-ui-yellow)] data-readonly:[--theme-color:var(--color-ui-grey)] data-ready:[--theme-color:var(--color-ui-blue)] data-success:[--theme-color:var(--color-ui-green)]', customTheme?.themeColor),
-        }, theme: 'custom', type: type, children: buttonText }));
+        }, theme: 'custom', type: type || 'submit', children: buttonText }));
 }
 
 function Textarea({ className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, value, ...props }) {
@@ -3602,5 +3732,5 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
     return (jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
 }
 
-export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, Input, Link, Modal, ModalDialog, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger };
+export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, Input, Link, Modal, ModalDialog, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, createButton, createLink };
 //# sourceMappingURL=components.esm.js.map