mado-ui 0.3.2 → 0.4.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { extendTailwindMerge, twJoin } from 'tailwind-merge';
 import * as React from 'react';
-import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, Suspense, useLayoutEffect, useState, useEffect, useCallback, cloneElement, useId } from 'react';
-import { Button as Button$1, Disclosure, DisclosurePanel, DisclosureButton, Menu, MenuButton, MenuItem, MenuItems, MenuSection, MenuHeading, MenuSeparator, Fieldset as Fieldset$1, Legend, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import { Children, isValidElement, Fragment, createContext, useContext, useSyncExternalStore, useRef, useCallback, useEffect, Suspense, useId, useLayoutEffect, cloneElement, useState } from 'react';
+import { Button as Button$1, DisclosureButton, DisclosurePanel, Disclosure, MenuButton, MenuItem, MenuItems, MenuSection, MenuHeading, MenuSeparator, Menu, Fieldset as Fieldset$1, Legend, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, DialogTitle, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
@@ -188,6 +188,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
@@ -213,6 +216,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
@@ -225,6 +252,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 = Children.toArray(children);
@@ -273,25 +339,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
@@ -915,7 +1053,7 @@ function DropDownItems({ anchor, children, className, containerClassName, style,
 }
 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, {}), 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, {})] })) }));
+    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 text-current/80', 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) }));
@@ -975,12 +1113,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 jsx(Provider$1, { children: children });
+    return jsx(Provider$2, { children: children });
 }
 function useFormContext() {
-    return useStore$1(store => store);
+    const [formContext, setFormContext] = useStore$2(store => store);
+    const registerField = useCallback((field) => {
+        setFormContext?.(prevContext => {
+            const otherFields = (prevContext || []).filter(otherField => otherField.id !== field.id);
+            return [...otherFields, field];
+        });
+    }, []);
+    const removeField = useCallback((fieldID) => {
+        setFormContext?.(prevContext => (prevContext || []).filter(field => field.id !== fieldID));
+    }, []);
+    const updateField = 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 jsx(Provider$1, { initialValue: initialValue, children: children });
+}
+function useFieldsetContext() {
+    const [fieldsetContext, setFieldsetContext] = useStore$1(store => store), [, formContextFunctions] = useFormContext();
+    const registerField = 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 = useCallback((fieldID) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.filter(field => field.id !== fieldID),
+            };
+        });
+    }, []);
+    const updateField = useCallback((fieldID, updates) => {
+        setFieldsetContext?.(prev => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                fieldList: prev.fieldList.map(field => (field.id === fieldID ? { ...field, ...updates } : field)),
+            };
+        });
+    }, []);
+    const createFormContextEntry = 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,
+        });
+    }, []);
+    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';
@@ -992,9 +1224,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 = useId();
+    const fieldsetId = toLowerCase(legend || name, [' ', '_']) + '§' + uniqueID;
     const { className: legendClassName, ...restLegendProps } = legendProps || {};
-    return (jsx(Fieldset$1, { ...props, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxs(Fragment$1, { children: [jsx(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 (jsx(FieldsetContextProvider, { initialValue: {
+            decorative,
+            fieldList: [],
+            id: fieldsetId,
+            join,
+            name,
+        }, children: jsx(Fieldset$1, { ...props, name: name, className: bag => twMerge('contents', typeof className === 'function' ? className(bag) : className), children: bag => (jsxs(Fragment$1, { children: [legend && (jsx(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] })) }) }));
 }
 
 /**
@@ -3186,15 +3427,17 @@ function ArrowSvg({ className, ...props }) {
     return (jsxs("svg", { viewBox: '0 0 20 10', className: twMerge('h-2.5 w-5 fill-none', className), ...props, children: [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' }), 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' }), 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] = 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] = useState(undefined);
+    if (type === 'password' && !placeholder)
+        placeholder = '••••••••' + (required && !label ? '*' : '');
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
     const uniqueID = 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':
@@ -3212,26 +3455,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);
     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)
@@ -3247,15 +3491,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(' '));
@@ -3267,19 +3582,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 => {
@@ -3290,32 +3601,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
@@ -3335,7 +3635,7 @@ 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 && (jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(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 && (jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
@@ -3394,34 +3694,37 @@ function SubmitButton({ children, className, customTheme, error, incomplete, loa
 }
 
 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] = useState(undefined);
+    const [formContext, formContextFunctions] = useFormContext();
+    const [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext();
+    const [errorMessage, setErrorMessage] = useState(undefined);
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
-    const uniqueID = 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 = useId();
+    const fieldContextID = toLowerCase(name, [' ', '_']) + '§' + uniqueID;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
     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)
@@ -3432,6 +3735,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(' '));
@@ -3442,22 +3749,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'))
         : {};
@@ -3475,23 +3801,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 && (jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(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 && (jsxs(Tooltip, { anchor: 'top-end', arrow: true, portal: true, children: [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: jsx(ExclamationmarkOctagon, { className: 'absolute top-1/2 left-1/2 size-full -translate-x-1/2 -translate-y-1/2 scale-70' }) }), jsx(TooltipPanel, { children: errorMessage })] }))] }), description && (jsx(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 = 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 = useCallback(() => {
+        if (!formContext)
+            return false;
+        return formContext.every(field => checkField(field));
+    }, [formContext, checkField]);
     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();
@@ -3564,9 +3901,16 @@ function ModalTrigger({ as, ...props }) {
     const Element = as || Button$1;
     return jsx(Element, { ...props });
 }
+function ModalTitle(props) {
+    return jsx(DialogTitle, { ...props });
+}
 function ModalDialog(props) {
     return jsx("div", { ...props });
 }
+function ModalClose({ as, ...props }) {
+    const Element = as || Button$1;
+    return jsx(Element, { ...props });
+}
 function Modal({ children, className, onClose, onOpen, place = 'bottom' }) {
     const [bodyElement, setBodyElement] = useState(null);
     useEffect(() => {
@@ -3732,5 +4076,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, createButton, createLink };
+export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, createButton, createLink };
 //# sourceMappingURL=index.esm.js.map