mado-ui 0.3.1 → 0.3.2

package/dist/index.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=index.esm.js.map