mado-ui 0.3.1 → 0.4.0

package/dist/components.js

@@ -208,6 +208,9 @@ function getMonth(month = d) {
         formattedMonth = `0${formattedMonth}`;
     return formattedMonth;
 }
+function getMonthIndexFromName(name) {
+    return monthNamesList.findIndex(monthName => monthName === name);
+}
 /**
  * ### Get Month Name
  * - Returns the name of the specified month
@@ -233,6 +236,30 @@ function getSeconds(seconds = d) {
         formattedSeconds = `0${formattedSeconds}`;
     return formattedSeconds;
 }
+/**
+ * ### Get User Readable Date
+ * - Returns a string of the current date in a user-friendly way
+ * - Includes `'Yesterday'`, '`Today'`, and `'Tomorrow'`
+ * @param date (default: `new Date()`)
+ * @returns {'Today'|'Tomorrow'|'Yesterday'|string} `'weekday, month day, year'` | `'Yesterday'` | `'Today'` | `'Tomorrow'`
+ */
+function getUserReadableDate(date = d) {
+    const dateTime = date.getTime();
+    const today = new Date(), isToday = dateTime === today.getTime();
+    if (isToday)
+        return 'Today';
+    const yesterday = new Date(today.getDate() - 1), isYesterday = dateTime === yesterday.getTime();
+    if (isYesterday)
+        return 'Yesterday';
+    const tomorrow = new Date(today.getDate() + 1), isTomorrow = dateTime === tomorrow.getTime();
+    if (isTomorrow)
+        return 'Tomorrow';
+    const thisYear = today.getFullYear(), isSameYear = date.getFullYear() === thisYear;
+    const fullDateString = toFullDateString(date, {
+        year: !isSameYear,
+    });
+    return fullDateString;
+}
 /**
  * ### Get Weekday Name
  * - Returns the weekday name of the specified day
@@ -245,6 +272,45 @@ function getWeekdayName(weekday = d) {
     // Return the name of the day of the week
     return weekdayNamesList[weekday.getDay()];
 }
+/**
+ * ### To Full Date String
+ * - Returns a formatted string to display the date
+ * @param {Date} date (default: `new Date()`)
+ * @param {ToFullDateStringOptionsProps} options Change how to display the weekday, month name, day of the month, and year.
+ * @returns {string} '`weekday`, `month` `day`, `year`'
+ */
+function toFullDateString(date = d, options) {
+    let weekdayName = getWeekdayName(date), monthName = getMonthName(date), dayOfMonth = date.getDate(), year = date.getFullYear().toString();
+    if (options) {
+        const includesDay = options.day !== false, includesMonth = options.month !== false, includesYear = options.year !== false;
+        {
+            weekdayName = weekdayName.slice(0, 3);
+            if (includesMonth || includesDay || includesYear)
+                weekdayName += ', ';
+        }
+        if (includesMonth) {
+            if (options.month === 'code')
+                monthName = monthName.slice(0, 3);
+            if (includesDay)
+                monthName += ' ';
+        }
+        else {
+            monthName = '';
+        }
+        if (!includesDay)
+            dayOfMonth = '';
+        if (includesYear) {
+            if (options.year === 'code')
+                year = year.slice(-2);
+            if (includesMonth || includesDay)
+                year = ', ' + year;
+        }
+        else {
+            year = '';
+        }
+    }
+    return weekdayName + monthName + dayOfMonth + year;
+}
 
 function findComponentByType(children, componentType) {
     const childrenArray = React.Children.toArray(children);
@@ -293,25 +359,97 @@ function isPhoneNumber(tel) {
 /**
  * # Format Phone Number
  * Converts any string containing at least 10 numbers to a formatted phone number
- * @param {string} string
- * @returns {string} string formatted (000) 000-0000
+ * @param {string} phoneNumber
+ * @param options
+ * @property {string} `countryCode`
+ * @property {'continuous' | 'dot' | 'hyphenated' | 'none' | 'space' | 'standard'} `format`
+ *
+ * Input: a555b555c5555d
+ *
+ * @example
+ * format: 'continuous'
+ * countryCode: '1'
+ * returns: +1 5555555555
+ *
+ * @example
+ * format: 'dot'
+ * returns: 555.555.5555
+ *
+ * @example
+ * format: 'hyphenated'
+ * returns: 555-555-5555
+ *
+ * @example
+ * format: 'none'
+ * countryCode: '1'
+ * returns: +1 a555b555c5555d
+ *
+ * @example
+ * format: 'space'
+ * returns: 555 555 5555
+ *
+ * @example
+ * format: 'standard' (default)
+ * returns: (555) 555-5555
+ *
+ * @returns {string} string formatted
  */
-function formatPhoneNumber(string, countryCode) {
-    return (`${`+${countryCode} ` }` +
-        string
-            .replace(/\D/g, '')
-            .slice(-10)
-            .split('')
-            .map((char, index) => {
-            if (index === 0)
-                return `(${char}`;
-            if (index === 2)
-                return `${char}) `;
-            if (index === 5)
-                return `${char}-`;
-            return char;
-        })
-            .join(''));
+function formatPhoneNumber(phoneNumber, options) {
+    const format = options?.format || 'standard';
+    if (format !== 'none')
+        phoneNumber = phoneNumber.replace(/\D/g, '').slice(-10);
+    switch (format) {
+        case 'dot':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char}.`;
+                if (index === 5)
+                    return `${char}.`;
+                return char;
+            })
+                .join('');
+            break;
+        case 'hyphenated':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char}-`;
+                if (index === 5)
+                    return `${char}-`;
+                return char;
+            })
+                .join('');
+            break;
+        case 'space':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 2)
+                    return `${char} `;
+                if (index === 5)
+                    return `${char} `;
+                return char;
+            })
+                .join('');
+            break;
+        case 'standard':
+            phoneNumber = phoneNumber
+                .split('')
+                .map((char, index) => {
+                if (index === 0)
+                    return `(${char}`;
+                if (index === 2)
+                    return `${char}) `;
+                if (index === 5)
+                    return `${char}-`;
+                return char;
+            })
+                .join('');
+    }
+    return `${options?.countryCode ? `+${options?.countryCode} ` : ''}` + phoneNumber;
 }
 /**
  * # To Lower Case
@@ -366,7 +504,7 @@ const lineLiftClasses = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(fillClasses, 'transition-transform after:bg-(--theme-color)');
@@ -419,7 +557,7 @@ const getFillColorTransitionClasses = (theme = 'blue', customTheme) => {
 };
 // Define theme-specific fill center classes
 const getFillCenterClasses = (theme = 'blue', customTheme) => {
-    let fillCenterColorClasses = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(fillCenterColorClasses, 'after:[--theme-color:var(--color-ui-blue)]');
@@ -478,7 +616,7 @@ const multilineLineCenterClasses = tailwindMerge.twJoin([multilineXClasses, 'bg-
 const multilineLineLiftClasses = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(multilineFillBaseClasses, 'from-(--theme-color) to-(--theme-color) transition-[background-size_color]');
+    let multilineFillColorClasses = tailwindMerge.twJoin(multilineFillBaseClasses, 'from-(--theme-color) to-(--theme-color) transition-[background-size,color]');
     switch (theme) {
         case 'blue':
             multilineFillColorClasses = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
@@ -527,7 +665,7 @@ const getMultilineFillColorClasses = (theme = 'blue', customTheme) => {
     return multilineFillColorClasses;
 };
 const getMultilineFillClasses = (theme = 'blue', customTheme) => {
-    let multilineFillColorClasses = tailwindMerge.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 = tailwindMerge.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 = tailwindMerge.twJoin(multilineFillColorClasses, '[--theme-color:var(--color-ui-blue)]');
@@ -667,6 +805,71 @@ function Link({ as, className, customTheme, theme = 'blue', type, ...props }) {
     const LinkElement = as || Anchor;
     return jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.jsx(Link, { ...linkProps, theme: 'custom', customTheme: resolvedCustomTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+        }
+        return (jsxRuntime.jsx(Link, { ...linkProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
+    };
+}
 
 /**
  * # Button
@@ -752,9 +955,76 @@ function Button({ className, customTheme, gradient = false, padding = 'md', roun
         themeClasses,
         className,
     ]);
-    const ButtonElement = 'as' in props ? props.as : props.href ? Anchor : react.Button;
-    const { as, ...restProps } = 'as' in props ? props : { ...props, as: undefined };
-    return jsxRuntime.jsx(ButtonElement, { ...restProps, className: buttonClasses });
+    if ('href' in props && !props.as && props.href)
+        return jsxRuntime.jsx(react.Button, { ...props, as: Anchor, className: buttonClasses });
+    return jsxRuntime.jsx(react.Button, { ...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 (jsxRuntime.jsx(Button, { ...buttonProps, theme: 'custom', customTheme: customTheme || extendedTheme.customTheme, className: twMerge(configClassName, extendedTheme.className, className) }));
+        }
+        return (jsxRuntime.jsx(Button, { ...buttonProps, theme: finalTheme, className: twMerge(configClassName, className), customTheme: customTheme }));
+    };
 }
 
 function ChevronDown(props) {
@@ -769,10 +1039,8 @@ function xmark(props) {
     return (jsxRuntime.jsx("svg", { viewBox: '0 0 64 64', ...props, children: jsxRuntime.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
-    jsxRuntime.jsx(react.DisclosureButton, { ...props, as: as || (Button), className: twMerge('w-full', className, Boolean(arrow) && 'grid grid-cols-[1fr_1rem] gap-2'), role: 'summary', children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof children === 'function' ? children(bag) : children, arrow &&
+function DetailsSummary({ arrow = true, children, className, ...props }) {
+    return (jsxRuntime.jsx(react.DisclosureButton, { ...props, as: (Button), className: twMerge('w-full', className, Boolean(arrow) && 'grid grid-cols-[1fr_1rem] gap-2'), role: 'summary', children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [typeof children === 'function' ? children(bag) : children, arrow &&
                     (typeof arrow === 'boolean' ? (jsxRuntime.jsx(ChevronDown, { className: 'absolute top-1/2 right-3 block w-4 -translate-y-1/2' })) : (arrow))] })) }));
 }
 function DetailsBody({ children, className, ...props }) {
@@ -789,7 +1057,7 @@ function DropDownButton({ arrow = true, as, children, className, ...props }) {
 function DropDownItem({ as, ...props }) {
     return jsxRuntime.jsx(react.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) {
@@ -801,11 +1069,11 @@ function DropDownItems({ anchor, children, className, style, ...props }) {
         return initialAnchor;
     };
     const anchorProps = getAnchorProps();
-    return (jsxRuntime.jsx(react.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 => (jsxRuntime.jsx("div", { className: 'overflow-y-hidden', children: jsxRuntime.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 (jsxRuntime.jsx(react.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 => (jsxRuntime.jsx("div", { className: 'overflow-y-scroll', children: jsxRuntime.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 (jsxRuntime.jsx(react.MenuSection, { ...props, children: sectionBag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), jsxRuntime.jsx(react.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 && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
+    return (jsxRuntime.jsx(react.MenuSection, { ...props, children: sectionBag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [separatorAbove && jsxRuntime.jsx(DropDownSeparator, {}), label && (jsxRuntime.jsx(react.MenuHeading, { ...restLabelProps, className: headingBag => twMerge('text-[size:larger] font-bold text-current/80', typeof labelClassName === 'function' ? labelClassName(headingBag) : labelClassName), children: label })), typeof children === 'function' ? children(sectionBag) : children, separatorBelow && jsxRuntime.jsx(DropDownSeparator, {})] })) }));
 }
 function DropDownSeparator({ className, ...props }) {
     return (jsxRuntime.jsx(react.MenuSeparator, { ...props, className: bag => twMerge('my-4 block h-px rounded-full bg-neutral-950/20', typeof className === 'function' ? className(bag) : className) }));
@@ -865,12 +1133,106 @@ function createFastContext(defaultInitialState) {
 function defineField(fieldDefinition) {
     return fieldDefinition;
 }
-const { Provider: Provider$1, useStore: useStore$1 } = createFastContext([]);
+function isStringField(field) {
+    return Boolean(field.type !== 'object' && field.type !== 'array');
+}
+const { Provider: Provider$2, useStore: useStore$2 } = createFastContext([]);
 function FormContextProvider({ children }) {
-    return jsxRuntime.jsx(Provider$1, { children: children });
+    return jsxRuntime.jsx(Provider$2, { children: children });
 }
 function useFormContext() {
-    return useStore$1(store => store);
+    const [formContext, setFormContext] = useStore$2(store => store);
+    const registerField = React.useCallback((field) => {
+        setFormContext?.(prevContext => {
+            const otherFields = (prevContext || []).filter(otherField => otherField.id !== field.id);
+            return [...otherFields, field];
+        });
+    }, []);
+    const removeField = React.useCallback((fieldID) => {
+        setFormContext?.(prevContext => (prevContext || []).filter(field => field.id !== fieldID));
+    }, []);
+    const updateField = React.useCallback((fieldID, updates) => {
+        setFormContext?.(prevContext => {
+            const field = prevContext.find(({ id }) => id === fieldID);
+            if (!field)
+                throw new Error(`Field with id "${fieldID}" not found in form context.`);
+            const otherFields = prevContext.filter(({ id }) => id !== fieldID);
+            const updatedField = { ...field, ...updates };
+            return [...otherFields, updatedField];
+        });
+    }, []);
+    return [formContext, { registerField, removeField, updateField }];
+}
+
+const { Provider: Provider$1, useStore: useStore$1 } = createFastContext(undefined);
+function FieldsetContextProvider({ children, initialValue, }) {
+    return jsxRuntime.jsx(Provider$1, { initialValue: initialValue, children: children });
+}
+function useFieldsetContext() {
+    const [fieldsetContext, setFieldsetContext] = useStore$1(store => store), [, formContextFunctions] = useFormContext();
+    const registerField = React.useCallback((field) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            const existingFieldIndex = prev.fieldList.findIndex(existingField => existingField.id === field.id);
+            const newFieldList = existingFieldIndex >= 0
+                ? prev.fieldList.map((existingField, index) => (index === existingFieldIndex ? field : existingField))
+                : [...prev.fieldList, field];
+            return { ...prev, fieldList: newFieldList };
+        });
+    }, []);
+    const removeField = React.useCallback((fieldID) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.filter(field => field.id !== fieldID),
+            };
+        });
+    }, []);
+    const updateField = React.useCallback((fieldID, updates) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.map(field => (field.id === fieldID ? { ...field, ...updates } : field)),
+            };
+        });
+    }, []);
+    const createFormContextEntry = React.useCallback((fieldsetEntry) => {
+        if (fieldsetEntry.join) {
+            const joinedValue = fieldsetEntry.fieldList
+                .filter(field => isStringField(field) && field.value !== '')
+                .map(field => field.value)
+                .join(fieldsetEntry.join);
+            return defineField({
+                type: 'string',
+                id: fieldsetEntry.id,
+                name: fieldsetEntry.name,
+                value: joinedValue,
+                required: fieldsetEntry.fieldList.some(field => field.required),
+                invalid: fieldsetEntry.fieldList.some(field => field.invalid),
+            });
+        }
+        return defineField({
+            type: 'object',
+            id: fieldsetEntry.id,
+            name: fieldsetEntry.name,
+            fields: fieldsetEntry.fieldList,
+        });
+    }, []);
+    React.useEffect(() => {
+        if (!fieldsetContext || fieldsetContext.decorative)
+            return;
+        const formContextEntry = createFormContextEntry(fieldsetContext);
+        formContextFunctions.registerField(formContextEntry);
+        return () => {
+            formContextFunctions.removeField(fieldsetContext.id);
+        };
+    }, [fieldsetContext, formContextFunctions.registerField, formContextFunctions.removeField, createFormContextEntry]);
+    return [fieldsetContext, { registerField, removeField, updateField }];
 }
 
 const DEFAULT_STATUS = 'incomplete';
@@ -882,9 +1244,18 @@ function useFormStatus() {
     return useStore(store => store);
 }
 
-function Fieldset({ children, className, legend, legendProps, ...props }) {
+function Fieldset({ children, className, decorative = false, join, legend, legendProps, name, ...props }) {
+    const uniqueID = React.useId();
+    const fieldsetId = toLowerCase(legend || name, [' ', '_']) + '§' + uniqueID;
     const { className: legendClassName, ...restLegendProps } = legendProps || {};
-    return (jsxRuntime.jsx(react.Fieldset, { ...props, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Legend, { ...restLegendProps, className: twMerge('text-lg font-bold sm:text-xl', typeof legendClassName === 'function' ? legendClassName(bag) : legendClassName), children: legend }), typeof children === 'function' ? children(bag) : children] })) }));
+    name = legend || name;
+    return (jsxRuntime.jsx(FieldsetContextProvider, { initialValue: {
+            decorative,
+            fieldList: [],
+            id: fieldsetId,
+            join,
+            name,
+        }, children: jsxRuntime.jsx(react.Fieldset, { ...props, name: name, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [legend && (jsxRuntime.jsx(react.Legend, { ...restLegendProps, className: twMerge('text-xl font-bold text-current/80', typeof legendClassName === 'function' ? legendClassName(bag) : legendClassName), children: legend })), typeof children === 'function' ? children(bag) : children] })) }) }));
 }
 
 /**
@@ -3076,15 +3447,17 @@ function ArrowSvg({ className, ...props }) {
     return (jsxRuntime.jsxs("svg", { viewBox: '0 0 20 10', className: twMerge('h-2.5 w-5 fill-none', className), ...props, children: [jsxRuntime.jsx("path", { d: 'M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z', className: 'fill-neutral-50 dark:fill-neutral-800' }), jsxRuntime.jsx("path", { d: 'M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z', className: 'fill-neutral-400 dark:fill-none' }), jsxRuntime.jsx("path", { d: 'M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z', className: 'dark:fill-neutral-600' })] }));
 }
 
-function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, name, onBlur, onChange, placeholder, ref, required = true, type, value, ...props }) {
-    const [formContext, setFormContext] = useFormContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+const specialCharacterRegex = new RegExp(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~€‚ƒ„…†‡‰‹‘’“”•–—™›¡¢£¥§©«¬®°±¶º»¿×÷]/);
+function Input({ checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required = true, type, value, ...props }) {
+    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+    if (type === 'password' && !placeholder)
+        placeholder = '••••••••' + (required && !label ? '*' : '');
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
     const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
-        invalid = true;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     const getFieldContextType = () => {
         switch (type) {
             case 'email':
@@ -3102,26 +3475,27 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         }
     };
     const fieldContextType = getFieldContextType();
-    const initialFieldContext = defineField({
-        type: fieldContextType,
-        id: fieldContextID,
-        invalid,
-        name,
-        required,
-        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
-    });
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
     React.useEffect(() => {
-        if (!setFormContext)
-            return;
-        setFormContext(prevContext => {
-            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
-            return [...otherFields, initialFieldContext];
+        const initialFieldContext = defineField({
+            type: fieldContextType,
+            id: fieldContextID,
+            invalid,
+            name,
+            required,
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
         });
+        if (isInFieldset) {
+            fieldsetContextFunctions.registerField(initialFieldContext);
+            return () => {
+                fieldsetContextFunctions.removeField(initialFieldContext.id);
+            };
+        }
+        formContextFunctions.registerField(initialFieldContext);
         return () => {
-            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+            formContextFunctions.removeField(initialFieldContext.id);
         };
-    }, [setFormContext]);
-    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    }, [isInFieldset]);
     const validateField = (validValue) => {
         const noValue = !validValue || validValue === '';
         if (!required && noValue)
@@ -3137,15 +3511,86 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                 if (!isEmail(validValue))
                     errorMessageList.push('This is not a valid email.');
                 break;
+            case 'date':
+                const valueAsTime = new Date().getTime();
+                if (min && !(min instanceof Date) && typeof min !== 'number') {
+                    if (Array.isArray(min)) {
+                        const monthIndex = typeof min[1] === 'number' ? min[1] - 1 : getMonthIndexFromName(min[1]);
+                        min = new Date(min[0], monthIndex, min[2]);
+                    }
+                    else if ('year' in min && 'month' in min && 'day' in min) {
+                        const monthIndex = typeof min.month === 'number' ? min.month - 1 : getMonthIndexFromName(min.month);
+                        min = new Date(min.year, monthIndex, min.day);
+                    }
+                    if (valueAsTime < min.getTime())
+                        errorMessageList.push(`Value cannot be lower than ${getUserReadableDate(min)}.`);
+                }
+                if (max && !(max instanceof Date) && typeof max !== 'number') {
+                    if (Array.isArray(max)) {
+                        const monthIndex = typeof max[1] === 'number' ? max[1] - 1 : getMonthIndexFromName(max[1]);
+                        max = new Date(max[0], monthIndex, max[2]);
+                    }
+                    else if ('year' in max && 'month' in max && 'day' in max) {
+                        const monthIndex = typeof max.month === 'number' ? max.month - 1 : getMonthIndexFromName(max.month);
+                        max = new Date(max.year, monthIndex, max.day);
+                    }
+                    if (valueAsTime > max.getTime())
+                        errorMessageList.push(`Value cannot be higher than ${getUserReadableDate(max)}.`);
+                }
+                break;
             case 'number':
-                if (isNaN(Number(validValue)))
+                const valueAsNumber = Number(validValue);
+                if (isNaN(valueAsNumber))
                     errorMessageList.push('This is not a valid number.');
+                if (typeof max === 'number' && valueAsNumber > max)
+                    errorMessageList.push(`Value cannot be higher than ${max}.`);
+                if (typeof min === 'number' && valueAsNumber < min)
+                    errorMessageList.push(`Value cannot be lower than ${min}.`);
+                break;
+            case 'password':
+                if (options) {
+                    const { matchPreviousInput, requireLowercaseCharacter, requireNumber, requireSpecialCharacter, requireUppercaseCharacter, } = options;
+                    if (matchPreviousInput && formContext && formContext.length >= 2) {
+                        if (isInFieldset && fieldsetContext.fieldList.length > 1) {
+                            const currentInputIndex = fieldsetContext.fieldList.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = fieldsetContext.fieldList.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue)
+                                    errorMessageList.push('Passwords must match.');
+                            }
+                        }
+                        else {
+                            const currentInputIndex = formContext.findIndex(({ id: fieldID }) => fieldID === fieldContext?.id);
+                            if (currentInputIndex > 0) {
+                                const previousInput = formContext.find((_, index) => index === currentInputIndex - 1);
+                                if (previousInput &&
+                                    isStringField(previousInput) &&
+                                    previousInput.value !== validValue)
+                                    errorMessageList.push('Passwords must match.');
+                            }
+                        }
+                    }
+                    if (requireLowercaseCharacter && !/[a-z]/g.test(validValue))
+                        errorMessageList.push('You must include a lowercase character.');
+                    if (requireNumber && !/[0-9]/g.test(validValue))
+                        errorMessageList.push('You must include a number.');
+                    if (requireSpecialCharacter && !specialCharacterRegex.test(validValue))
+                        errorMessageList.push('You must include a special character.');
+                    if (requireUppercaseCharacter && !/[A-Z]/g.test(validValue))
+                        errorMessageList.push('You must include an uppercase character.');
+                }
                 break;
             case 'tel':
                 if (!isPhoneNumber(validValue))
                     errorMessageList.push('This is not a valid phone number.');
                 break;
         }
+        if (props.maxLength && validValue.length > Number(props.maxLength))
+            errorMessageList.push(`This may not have more than ${props.maxLength} characters.`);
+        if (props.minLength && validValue.length < Number(props.minLength))
+            errorMessageList.push(`This must have at least ${props.minLength} characters.`);
         if (errorMessageList.length === 0)
             return true;
         setErrorMessage(errorMessageList.join(' '));
@@ -3157,19 +3602,15 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        setFormContext?.(prevContext => {
-            if (!prevContext)
-                return [];
-            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-            if (!field)
-                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-            const updatedField = { ...field, value: newValue };
-            const invalidField = validateField(newValue) === false;
-            if (invalidField !== field.invalid)
-                updatedField.invalid = invalidField;
-            return [...otherFields, updatedField];
-        });
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: validateField(newValue) === false });
+        }
         onChange?.(e);
     };
     const handleBlur = e => {
@@ -3180,32 +3621,21 @@ function Input({ checked, className, defaultValue, description, descriptionProps
         const { currentTarget } = e, { value: newValue } = currentTarget;
         if (required)
             validateField(newValue);
+        let processedValue = newValue;
         switch (type) {
             case 'email':
-                setFormContext?.(prevContext => {
-                    if (!prevContext)
-                        return [];
-                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-                    if (!field)
-                        throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-                    const updatedField = { ...field, value: newValue.toLowerCase() };
-                    return [...otherFields, updatedField];
-                });
+                processedValue = newValue.toLowerCase();
                 break;
             case 'tel':
-                setFormContext?.(prevContext => {
-                    if (!prevContext)
-                        return [];
-                    const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-                    if (!field)
-                        throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-                    const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-                    const updatedField = { ...field, value: formatPhoneNumber(newValue, '1') };
-                    return [...otherFields, updatedField];
-                });
+                processedValue = formatPhoneNumber(newValue, options);
                 break;
         }
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
         onBlur?.(e);
     };
     const restFieldProps = fieldProps
@@ -3225,12 +3655,12 @@ function Input({ checked, className, defaultValue, description, descriptionProps
                         // user-invalid styles
                         'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
                         // Custom styles
-                        typeof className === 'function' ? className(bag) : className), invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value }), fieldContext.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                        typeof className === 'function' ? className(bag) : className), invalid: invalid, onBlur: handleBlur, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, type: type, value: fieldContext?.value || '' }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : 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) {
@@ -3278,40 +3708,43 @@ function SubmitButton({ children, className, customTheme, error, incomplete, loa
         }
     };
     const dataFormState = getDataFormState();
-    return (jsxRuntime.jsx(Button, { ...props, ...dataFormState, as: 'button', className: twMerge([formStatusButtonClasses, 'w-full text-white data-loading:text-black', className]), customTheme: {
+    return (jsxRuntime.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 }) {
-    const [formContext, setFormContext] = useFormContext(), [errorMessage, setErrorMessage] = React.useState(undefined);
+    const [formContext, formContextFunctions] = useFormContext();
+    const [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext();
+    const [errorMessage, setErrorMessage] = React.useState(undefined);
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
-    const uniqueID = React.useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
-    if (Boolean(formContext?.find(field => field.id === fieldContextID)?.invalid))
-        invalid = true;
-    const initialFieldContext = defineField({
-        type: 'textarea',
-        id: fieldContextID,
-        invalid,
-        name,
-        required,
-        value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
-    });
+    const uniqueID = React.useId();
+    const fieldContextID = toLowerCase(name, [' ', '_']) + '§' + uniqueID;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     React.useEffect(() => {
-        if (!setFormContext)
-            return;
-        setFormContext(prevContext => {
-            const otherFields = (prevContext || []).filter(field => field.id !== initialFieldContext.id);
-            return [...otherFields, initialFieldContext];
+        const initialFieldContext = defineField({
+            type: 'textarea',
+            id: fieldContextID,
+            invalid,
+            name,
+            required,
+            value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
         });
+        if (isInFieldset) {
+            fieldsetContextFunctions.registerField(initialFieldContext);
+            return () => {
+                fieldsetContextFunctions.removeField(initialFieldContext.id);
+            };
+        }
+        formContextFunctions.registerField(initialFieldContext);
         return () => {
-            setFormContext(prevContext => (prevContext || []).filter(field => field.id !== initialFieldContext.id));
+            formContextFunctions.removeField(initialFieldContext.id);
         };
-    }, [setFormContext]);
-    const fieldContext = formContext?.find(({ id: fieldID }) => fieldID === initialFieldContext.id) || initialFieldContext;
+    }, [isInFieldset]);
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
     const validateField = (validValue) => {
         const noValue = !validValue || validValue === '';
         if (!required && noValue)
@@ -3322,6 +3755,10 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
             setErrorMessage(errorMessageList.join(' '));
             return false;
         }
+        if (props.maxLength && validValue.length > Number(props.maxLength))
+            errorMessageList.push(`This may not have more than ${props.maxLength} characters.`);
+        if (props.minLength && validValue.length < Number(props.minLength))
+            errorMessageList.push(`This must have at least ${props.minLength} characters.`);
         if (errorMessageList.length === 0)
             return true;
         setErrorMessage(errorMessageList.join(' '));
@@ -3332,22 +3769,41 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
             e.preventDefault();
             return;
         }
-        const { currentTarget } = e, { value: newValue } = currentTarget;
-        setFormContext?.(prevContext => {
-            if (!prevContext)
-                return [];
-            const field = prevContext.find(({ id: fieldID }) => fieldID === initialFieldContext.id);
-            if (!field)
-                throw new Error(`Field with id "${initialFieldContext.id}" not found in form context.`);
-            const otherFields = prevContext.filter(({ id: fieldID }) => fieldID !== initialFieldContext.id);
-            const updatedField = { ...field, value: newValue };
-            const invalidField = validateField(newValue) === false;
-            if (invalidField !== field.invalid)
-                updatedField.invalid = invalidField;
-            return [...otherFields, updatedField];
-        });
+        const { currentTarget } = e;
+        const { value: newValue } = currentTarget;
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, {
+                value: newValue,
+                invalid: validateField(newValue) === false,
+            });
+        }
         onChange?.(e);
     };
+    const handleBlur = e => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        const { currentTarget } = e;
+        const { value: newValue } = currentTarget;
+        if (required)
+            validateField(newValue);
+        // No special processing needed for textarea like email/phone formatting
+        const processedValue = newValue;
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        else {
+            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+        }
+        onBlur?.(e);
+    };
     const restFieldProps = fieldProps
         ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
         : {};
@@ -3365,23 +3821,34 @@ function Textarea({ className, defaultValue, description, descriptionProps, disa
                         // user-invalid styles
                         'user-invalid:border-ui-red user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-100))] user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:bg-[color-mix(in_oklab,var(--color-ui-red)_20%,var(--color-neutral-800))] dark:user-invalid:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))] user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-100))] user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-100))] user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-100))] dark:user-invalid:pointer-fine:hover:bg-[color-mix(in_oklab,var(--color-ui-red)_10%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklab,var(--color-ui-red)_1%,var(--color-neutral-800))] dark:user-invalid:pointer-fine:active:bg-[color-mix(in_oklab,var(--color-ui-red)_25%,var(--color-neutral-800))]', 
                         // Custom styles
-                        typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value }), fieldContext.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                        typeof className === 'function' ? className(bag) : className), id: fieldContext?.id, invalid: invalid, onChange: handleChange, onBlur: handleBlur, placeholder: placeholder, ref: ref, required: required, value: fieldContext?.value || '' }), fieldContext?.invalid && errorMessage && (jsxRuntime.jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [jsxRuntime.jsx(TooltipTrigger, { as: Button, className: 'absolute top-1.25 right-1.25 z-10 size-6 min-w-0', padding: 'none', rounded: 'md', theme: 'red', children: jsxRuntime.jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsxRuntime.jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsxRuntime.jsx(react.Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
 
-// import { findComponentByType } from '../../utils'
 function FormComponent({ as, children, className, handleSubmit, onError, onSubmit, onSuccess, ...props }) {
     const [formContext] = useFormContext(), [formStatus, setFormStatus] = useFormStatus();
-    // const submitButton = findComponentByType(children, SubmitButton)
+    const checkField = React.useCallback((field) => {
+        if (field.type !== 'array' && field.type !== 'object' && !field.invalid)
+            return true;
+        if (field.type === 'object')
+            return field.fields.every(objectField => checkField(objectField));
+        return false;
+    }, []);
+    const everyFieldIsValid = React.useCallback(() => {
+        if (!formContext)
+            return false;
+        return formContext.every(field => checkField(field));
+    }, [formContext, checkField]);
     React.useEffect(() => {
         if (!formContext)
             return;
-        if (formStatus !== 'incomplete' && formContext.find(({ invalid }) => invalid))
+        if (formStatus !== 'incomplete' &&
+            formContext.find(context => context.type !== 'array' && context.type !== 'object' && context.invalid))
             setFormStatus?.('incomplete');
-        if (formStatus !== 'ready' && formContext.every(({ invalid }) => !invalid))
+        if (formStatus !== 'ready' && everyFieldIsValid())
             setFormStatus?.('ready');
-    }, [formContext]);
+    }, [formContext, everyFieldIsValid]);
     const processSubmit = handleSubmit ||
         (async (e) => {
             e.preventDefault();
@@ -3454,9 +3921,16 @@ function ModalTrigger({ as, ...props }) {
     const Element = as || react.Button;
     return jsxRuntime.jsx(Element, { ...props });
 }
+function ModalTitle(props) {
+    return jsxRuntime.jsx(react.DialogTitle, { ...props });
+}
 function ModalDialog(props) {
     return jsxRuntime.jsx("div", { ...props });
 }
+function ModalClose({ as, ...props }) {
+    const Element = as || react.Button;
+    return jsxRuntime.jsx(Element, { ...props });
+}
 function Modal({ children, className, onClose, onOpen, place = 'bottom' }) {
     const [bodyElement, setBodyElement] = React.useState(null);
     React.useEffect(() => {
@@ -3640,7 +4114,9 @@ exports.Heading = Heading;
 exports.Input = Input;
 exports.Link = Link;
 exports.Modal = Modal;
+exports.ModalClose = ModalClose;
 exports.ModalDialog = ModalDialog;
+exports.ModalTitle = ModalTitle;
 exports.ModalTrigger = ModalTrigger;
 exports.SubmitButton = SubmitButton;
 exports.Textarea = Textarea;
@@ -3648,4 +4124,6 @@ exports.Time = Time;
 exports.Tooltip = Tooltip;
 exports.TooltipPanel = TooltipPanel;
 exports.TooltipTrigger = TooltipTrigger;
+exports.createButton = createButton;
+exports.createLink = createLink;
 //# sourceMappingURL=components.js.map