mado-ui 0.5.3 → 0.5.5

package/dist/index.esm.js

@@ -2,7 +2,7 @@ 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, useCallback, useEffect, Suspense, useState, useId, useLayoutEffect, cloneElement } 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 { Button as Button$1, DisclosureButton, DisclosurePanel, Disclosure, MenuButton, MenuItem, MenuItems, MenuSection, MenuHeading, MenuSeparator, Menu, Fieldset as Fieldset$1, Legend, Input as Input$1, Transition, Field, Label, Description, Listbox, ListboxButton, ListboxSelectedOption, ListboxOptions, Textarea as Textarea$1, DialogTitle, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
 
@@ -119,7 +119,7 @@ getMonthName();
 /** The name of the current day of the week */
 getWeekdayName();
 /**
- * ### Get Date
+ * # Get Date
  * - Returns the date with two digits
  * @param {number|Date} date The date to get date
  * @returns {string} The date with two digits
@@ -133,7 +133,7 @@ function getDate(date = d) {
     return formattedDate;
 }
 /**
- * ### Get Hours
+ * # Get Hours
  * - Returns the hours with two digits
  * @param {number|Date} hours The date to get hours
  * @returns {string} The hours with two digits
@@ -147,7 +147,7 @@ function getHours(hours = d) {
     return formattedHours;
 }
 /**
- * ### Get Milliseconds
+ * # Get Milliseconds
  * - Returns the milliseconds with two digits
  * @param {number|Date} milliseconds The date to get milliseconds
  * @returns {string} The milliseconds with two digits
@@ -161,7 +161,7 @@ function getMilliseconds(milliseconds = d) {
     return formattedMilliseconds;
 }
 /**
- * ### Get Minutes
+ * # Get Minutes
  * - Returns the minutes with two digits
  * @param {number|Date} minutes The date to get minutes
  * @returns {string} The minutes with two digits
@@ -175,7 +175,7 @@ function getMinutes(minutes = d) {
     return formattedMinutes;
 }
 /**
- * ### Get Month
+ * # Get Month
  * - Returns the month with two digits
  * @param {number|Date} month The date to get month
  * @returns {string} The month with two digits
@@ -192,7 +192,7 @@ function getMonthIndexFromName(name) {
     return monthNamesList.findIndex(monthName => monthName === name);
 }
 /**
- * ### Get Month Name
+ * # Get Month Name
  * - Returns the name of the specified month
  * @param {Date} date A Date object representing the month to get the name of the month from. (Preset to the current date)
  * @returns {MonthName} The name of the specified month
@@ -203,7 +203,7 @@ function getMonthName(date = d) {
     return monthNamesList[date.getMonth()];
 }
 /**
- * ### Get Seconds
+ * # Get Seconds
  * - Returns the seconds with two digits
  * @param {number|Date} seconds The date to get seconds
  * @returns {string} The seconds with two digits
@@ -217,7 +217,7 @@ function getSeconds(seconds = d) {
     return formattedSeconds;
 }
 /**
- * ### Get User Readable Date
+ * # 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()`)
@@ -241,7 +241,7 @@ function getUserReadableDate(date = d) {
     return fullDateString;
 }
 /**
- * ### Get Weekday Name
+ * # Get Weekday Name
  * - Returns the weekday name of the specified day
  * @param {number | Date} weekday A Date object or number representing the day to get the weekday name from. (Preset to the current date)
  * @returns {WeekdayName} The name of the specified weekday
@@ -253,7 +253,7 @@ function getWeekdayName(weekday = d) {
     return weekdayNamesList[weekday.getDay()];
 }
 /**
- * ### To Full Date String
+ * # 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.
@@ -375,13 +375,14 @@ function isPhoneNumber(tel) {
  * @returns {string} string formatted
  */
 function formatPhoneNumber(phoneNumber, options) {
-    const format = options?.format || 'standard';
-    if (format !== 'none')
-        phoneNumber = phoneNumber.replace(/\D/g, '').slice(-10);
+    const format = options?.format || "standard";
+    if (format !== "none") {
+        phoneNumber = phoneNumber.replace(/\D/g, "").slice(-10);
+    }
     switch (format) {
-        case 'dot':
+        case "dot":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char}.`;
@@ -389,11 +390,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}.`;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'hyphenated':
+        case "hyphenated":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char}-`;
@@ -401,11 +402,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}-`;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'space':
+        case "space":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 2)
                     return `${char} `;
@@ -413,11 +414,11 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char} `;
                 return char;
             })
-                .join('');
+                .join("");
             break;
-        case 'standard':
+        case "standard":
             phoneNumber = phoneNumber
-                .split('')
+                .split("")
                 .map((char, index) => {
                 if (index === 0)
                     return `(${char}`;
@@ -427,9 +428,10 @@ function formatPhoneNumber(phoneNumber, options) {
                     return `${char}-`;
                 return char;
             })
-                .join('');
+                .join("");
     }
-    return `${options?.countryCode ? `+${options?.countryCode} ` : ''}` + phoneNumber;
+    return `${options?.countryCode ? `+${options?.countryCode} ` : ""}` +
+        phoneNumber;
 }
 /**
  * # To Lower Case
@@ -441,7 +443,7 @@ function formatPhoneNumber(phoneNumber, options) {
  * @returns The lowercase version of the input string, with the replacements, if provided.
  */
 function toLowerCase(str, [delimiter, joiner]) {
-    return str.toLowerCase().replaceAll(delimiter || ' ', joiner || ' ');
+    return str.toLowerCase().replaceAll(delimiter || " ", joiner || " ");
 }
 
 function twSort(className) {
@@ -2288,7 +2290,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
@@ -2310,7 +2312,7 @@ const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspect
 const containValues = ['paint', 'layout', 'strict', 'content'];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
@@ -2336,7 +2338,7 @@ const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#documen
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -2398,7 +2400,7 @@ function getFrameElement(win) {
 }
 
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
@@ -2503,7 +2505,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -2534,14 +2536,9 @@ function getWindowScrollBarX(element, rect) {
   return rect.left + leftScroll;
 }
 
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
-  // RTL <body> scrollbar.
-  getWindowScrollBarX(documentElement, htmlRect));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -2580,7 +2577,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -2603,7 +2600,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === 'rtl') {
+  if (getComputedStyle$1(body).direction === 'rtl') {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -2614,6 +2611,10 @@ function getDocumentRect(element) {
   };
 }
 
+// Safety check: ensure the scrollbar space is reasonable in case this
+// calculation is affected by unusual styles.
+// Most scrollbars leave 15-18px of space.
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -2631,6 +2632,24 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
+  // visual width of the <html> but this is not considered in the size
+  // of `html.clientWidth`.
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    // If the <body> scrollbar is on the left, the width needs to be extended
+    // by the scrollbar amount so there isn't extra space on the right.
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -2681,7 +2700,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
 }
 
 // A "clipping ancestor" is an `overflow` element with the characteristic of
@@ -2694,12 +2713,12 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === 'fixed';
+  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
   let currentNode = elementIsFixed ? getParentNode(element) : element;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
@@ -2800,11 +2819,11 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
 }
 
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === 'static';
+  return getComputedStyle$1(element).position === 'static';
 }
 
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
   }
   if (polyfill) {
@@ -2865,7 +2884,7 @@ const getElementRects = async function (data) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -3618,43 +3637,302 @@ function ArrowSvg({ className, ...props }) {
 }
 
 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);
+function TextInput({ className, fieldContextID, handleBlur, handleChange, options, placeholder, type, ...props }) {
+    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
     if (type === 'password' && !placeholder)
-        placeholder = '••••••••' + (required && !label ? '*' : '');
+        placeholder = '••••••••';
+    const FORMAT_FUNCTIONS = {
+        email: (value) => value.toLowerCase(),
+        tel: (value) => formatPhoneNumber(value, options),
+    };
+    const VALIDATION_HANDLERS = {
+        email: ({ multiple, value }) => {
+            if (multiple) {
+                const emailList = value.split(',').map(item => item.trim()), notEmailList = [];
+                emailList.forEach(item => {
+                    if (!isEmail(item))
+                        notEmailList.push(item);
+                });
+                if (notEmailList.length > 0) {
+                    const multipleInvalid = notEmailList.length > 1;
+                    return `${multipleInvalid ? 'These email addresses are' : 'This email address is'} invalid: ${notEmailList.join(', ')}`;
+                }
+                return;
+            }
+            if (!isEmail(value))
+                return 'This is not a valid email address.';
+        },
+        password: ({ value }) => {
+            const errorMessageList = [];
+            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 !== value)
+                                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 !== value)
+                                errorMessageList.push('Passwords must match.');
+                        }
+                    }
+                }
+                if (requireLowercaseCharacter && !/[a-z]/g.test(value))
+                    errorMessageList.push('You must include a lowercase character.');
+                if (requireNumber && !/[0-9]/g.test(value))
+                    errorMessageList.push('You must include a number.');
+                if (requireSpecialCharacter && !specialCharacterRegex.test(value))
+                    errorMessageList.push('You must include a special character.');
+                if (requireUppercaseCharacter && !/[A-Z]/g.test(value))
+                    errorMessageList.push('You must include an uppercase character.');
+            }
+            return errorMessageList.length > 0 ? errorMessageList.join(' ') : undefined;
+        },
+        tel: ({ value }) => {
+            if (!isPhoneNumber(value))
+                return 'This is not a valid phone number.';
+        },
+    };
+    const onChange = e => {
+        const validation = type ? VALIDATION_HANDLERS[type] : undefined;
+        handleChange({ e, validation });
+    };
+    const onBlur = e => {
+        const format = type ? FORMAT_FUNCTIONS[type] : undefined, validation = type ? VALIDATION_HANDLERS[type] : undefined;
+        handleBlur({ e, format, validation });
+    };
+    return (jsx(Input$1, { ...props, className: bag => twMerge(
+        // Base styles
+        'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+        // Pseudo styles
+        'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+        // 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), onBlur: onBlur, onChange: onChange, placeholder: placeholder, type: type, value: fieldContext?.value || '' }));
+}
+
+function DateTimeInput({ className, fieldContextID, handleBlur, handleChange, ref, theme, type, ui, ...props }) {
+    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
+    if (!ui)
+        switch (type) {
+            case 'date':
+                ui = {
+                    desktop: ['calendar', 'dropdown'],
+                    mobile: ['calendar', 'rotary'],
+                };
+                break;
+            case 'datetime':
+                ui = {
+                    date: {
+                        desktop: ['calendar', 'dropdown'],
+                        mobile: ['calendar', 'rotary'],
+                    },
+                    time: {
+                        desktop: ['clock', 'dropdown'],
+                        mobile: ['rotary', 'clock'],
+                    },
+                };
+                break;
+            case 'time':
+                ui = {
+                    desktop: ['clock', 'dropdown'],
+                    mobile: ['rotary', 'clock'],
+                };
+                break;
+        }
+    const validation = ({ max, min, value }) => {
+        const valueAsTime = new Date(value).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())
+                return `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())
+                return `Value cannot be higher than ${getUserReadableDate(max)}.`;
+        }
+    };
+    const onChange = e => {
+        handleChange({ e, validation });
+    };
+    const onBlur = e => {
+        handleBlur({ e, validation });
+    };
+    const [selectorIsOpen, setSelectorIsOpen] = useState(false);
+    const toggleSelectorOpen = () => setSelectorIsOpen(previous => !previous);
+    const { refs, floatingStyles, isPositioned, placement, middlewareData } = useFloating({
+        middleware: [
+            offset(8),
+            flip({ padding: 20 }),
+            shift({ padding: 20 }),
+            size({
+                apply({ availableHeight, availableWidth, elements }) {
+                    const height = `${Math.max(0, availableHeight) / 16}rem`, width = `${Math.min(418, availableWidth) / 16}rem`;
+                    elements.floating.style.maxHeight = height;
+                    elements.floating.style.maxWidth = width;
+                },
+            }),
+        ],
+        placement: 'top-start',
+        strategy: 'fixed',
+        whileElementsMounted: autoUpdate,
+        open: selectorIsOpen,
+    });
+    const reversedAnchor = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+        'top-start': 'bottom left',
+        'top-end': 'bottom right',
+        'right-start': 'top left',
+        'right-end': 'bottom left',
+        'bottom-start': 'top left',
+        'bottom-end': 'top right',
+        'left-start': 'top right',
+        'left-end': 'bottom right',
+    }[placement];
+    return (jsxs(Fragment$1, { children: [jsx(Input$1, { ...props, className: bag => twMerge(
+                // Base styles
+                'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+                // Pseudo styles
+                'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+                // 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), onBlur: onBlur, onChange: onChange, onClick: toggleSelectorOpen, ref: node => {
+                    refs.setReference(node);
+                    return ref;
+                }, type: 'text', value: fieldContext?.value || '' }), jsx(Transition, { as: 'div', className: 'absolute rounded-xl bg-neutral-100 p-4 transition-opacity duration-500 ease-exponential data-closed:opacity-0 data-open:opacity-100', ref: refs.setFloating, show: selectorIsOpen, style: {
+                    ...floatingStyles,
+                    transformOrigin: reversedAnchor,
+                }, transition: true })] }));
+}
+
+function NumberInput({ className, fieldContextID, handleBlur, handleChange, options, placeholder, type, ...props }) {
+    const [formContext] = useFormContext(), [fieldsetContext] = useFieldsetContext();
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
+    const validation = ({ max, min, value }) => {
+        const valueAsNumber = Number(value);
+        if (isNaN(valueAsNumber))
+            return 'This is not a valid number.';
+        if (typeof max === 'number' && valueAsNumber > max)
+            return `Value cannot be higher than ${max}.`;
+        if (typeof min === 'number' && valueAsNumber < min)
+            return `Value cannot be lower than ${min}.`;
+    };
+    const onChange = e => {
+        handleChange({ e, validation });
+    };
+    const onBlur = e => {
+        handleBlur({ e, validation });
+    };
+    return (jsx(Input$1, { ...props, className: bag => twMerge(
+        // Base styles
+        'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
+        // Pseudo styles
+        'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
+        // 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), onBlur: onBlur, onChange: onChange, placeholder: placeholder, type: type, value: fieldContext?.value || '' }));
+}
+
+const INPUT_COMPONENTS = {
+    button: TextInput,
+    checkbox: TextInput,
+    color: TextInput,
+    date: DateTimeInput,
+    datetime: DateTimeInput,
+    'datetime-local': DateTimeInput,
+    email: TextInput,
+    file: TextInput,
+    hidden: TextInput,
+    image: TextInput,
+    list: TextInput,
+    month: DateTimeInput,
+    number: NumberInput,
+    password: TextInput,
+    radio: TextInput,
+    range: TextInput,
+    reset: TextInput,
+    search: TextInput,
+    submit: TextInput,
+    tel: TextInput,
+    text: TextInput,
+    time: DateTimeInput,
+    url: TextInput,
+    week: DateTimeInput,
+    year: DateTimeInput,
+};
+function Input({ as, checked, className, defaultValue, description, descriptionProps, disabled, fieldProps, invalid = true, label, labelProps, max, min, name, onBlur, onChange, options, placeholder, ref, required = true, type = 'text', value, ...props }) {
+    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext(), [errorMessage, setErrorMessage] = useState(undefined);
     if (placeholder === '*')
         placeholder = name + (required && !label ? '*' : '');
     if (label === '*')
         label = name;
     const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    const [internalController, setInternalController] = useState(undefined), isControlledByForm = formContext !== undefined, isControlledExternally = typeof value !== 'undefined';
     const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
-    const getFieldContextType = () => {
-        switch (type) {
-            case 'email':
-                return 'email';
-            case 'file':
-                return 'file';
-            case 'number':
-                return 'number';
-            case 'tel':
-                return 'tel';
-            case 'url':
-                return 'url';
-            default:
-                return 'string';
-        }
-    };
-    const fieldContextType = getFieldContextType();
-    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
+    const fieldContextType = type === 'email'
+        ? 'email'
+        : type === 'file'
+            ? 'file'
+            : type === 'number'
+                ? 'number'
+                : type === 'tel'
+                    ? 'tel'
+                    : type === 'url'
+                        ? 'url'
+                        : 'string';
+    const fieldContext = isControlledByForm
+        ? (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID)
+        : internalController;
     useEffect(() => {
         const initialFieldContext = defineField({
-            type: fieldContextType,
             id: fieldContextID,
             invalid,
             name,
             required,
+            type: fieldContextType,
             value: value ? `${value}` : defaultValue ? `${defaultValue}` : '',
         });
+        if (!isControlledByForm) {
+            setInternalController(initialFieldContext);
+            return;
+        }
         if (isInFieldset) {
             fieldsetContextFunctions.registerField(initialFieldContext);
             return () => {
@@ -3666,7 +3944,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             formContextFunctions.removeField(initialFieldContext.id);
         };
     }, [isInFieldset]);
-    const validateField = (validValue) => {
+    const validateField = (validValue, validation) => {
         const noValue = !validValue || validValue === '';
         if (!required && noValue)
             return true;
@@ -3676,137 +3954,166 @@ function Input({ checked, className, defaultValue, description, descriptionProps
             setErrorMessage(errorMessageList.join(' '));
             return false;
         }
-        switch (type) {
-            case 'email':
-                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':
-                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 (typeof validation !== 'undefined') {
+            const validationResult = validation({
+                max,
+                min,
+                maxLength: props.maxLength,
+                minLength: props.minLength,
+                multiple: props.multiple,
+                step: props.step,
+                value: validValue,
+            });
+            if (typeof validationResult === 'string')
+                errorMessageList.push(validationResult);
+        }
         if (errorMessageList.length === 0)
             return true;
         setErrorMessage(errorMessageList.join(' '));
         return false;
     };
-    const handleChange = e => {
+    const handleChange = ({ e, validation }) => {
         if (disabled) {
             e.preventDefault();
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        if (isInFieldset) {
-            fieldsetContextFunctions.updateField(fieldContextID, {
-                value: newValue,
-                invalid: validateField(newValue) === false,
-            });
+        const isInvalid = validateField(newValue, validation) === false;
+        const processedValue = isControlledExternally ? `${value}` : newValue;
+        const updatedFieldValues = {
+            invalid: isInvalid,
+            value: processedValue,
+        };
+        if (isControlledByForm) {
+            if (isInFieldset) {
+                fieldsetContextFunctions.updateField(fieldContextID, updatedFieldValues);
+            }
+            else {
+                formContextFunctions.updateField(fieldContextID, updatedFieldValues);
+            }
         }
         else {
-            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: validateField(newValue) === false });
+            setInternalController(previous => ({
+                ...previous,
+                ...updatedFieldValues,
+            }));
         }
         onChange?.(e);
     };
-    const handleBlur = e => {
+    const handleBlur = ({ e, format, validation }) => {
         if (disabled) {
             e.preventDefault();
             return;
         }
         const { currentTarget } = e, { value: newValue } = currentTarget;
-        if (required)
-            validateField(newValue);
-        let processedValue = newValue;
-        switch (type) {
-            case 'email':
-                processedValue = newValue.toLowerCase();
-                break;
-            case 'tel':
-                processedValue = formatPhoneNumber(newValue, options);
-                break;
+        const controlledValue = isControlledExternally ? `${value}` : newValue, processedValue = format?.(controlledValue) || controlledValue;
+        const isInvalid = validateField(processedValue, validation) === false;
+        const updatedFieldValues = {
+            invalid: isInvalid,
+            value: processedValue,
+        };
+        if (isControlledByForm) {
+            if (isInFieldset) {
+                fieldsetContextFunctions.updateField(fieldContextID, updatedFieldValues);
+            }
+            else {
+                formContextFunctions.updateField(fieldContextID, updatedFieldValues);
+            }
+        }
+        else {
+            setInternalController(previous => ({
+                ...previous,
+                ...updatedFieldValues,
+            }));
         }
+        onBlur?.(e);
+    };
+    const cleanFieldProps = fieldProps
+        ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
+        : {};
+    const cleanLabalProps = labelProps
+        ? Object.fromEntries(Object.entries(labelProps).filter(([key]) => key !== 'className'))
+        : {};
+    const cleanDescriptionProps = descriptionProps
+        ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
+        : {};
+    const InputComponent = INPUT_COMPONENTS[type];
+    return (jsxs(Field, { ...cleanFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...cleanLabalProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxs("div", { children: [jsx(InputComponent, { ...props, fieldContextID: fieldContextID, handleBlur: handleBlur, handleChange: handleChange, invalid: invalid, options: options, placeholder: placeholder, required: required, type: type }), 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, { ...cleanDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
+                    ? descriptionProps?.className(bag)
+                    : descriptionProps?.className), children: description }))] }));
+}
+
+function extractStringValue(value) {
+    if (Array.isArray(value))
+        return value.join(', ');
+    if (typeof value === 'string')
+        return value;
+    return value.value;
+}
+function Select({ defaultValue, description, descriptionProps, disabled, fieldProps, invalid, label, labelProps, multiple, name, onChange, optionList, required, value, ...props }) {
+    const [formContext, formContextFunctions] = useFormContext(), [fieldsetContext, fieldsetContextFunctions] = useFieldsetContext();
+    if (label === '*')
+        label = name;
+    const uniqueID = useId(), fieldContextID = toLowerCase(name, [, '_']) + '§' + uniqueID;
+    const isInFieldset = fieldsetContext && !fieldsetContext.decorative;
+    const fieldContext = (isInFieldset ? fieldsetContext.fieldList : formContext)?.find(({ id: fieldID }) => fieldID === fieldContextID);
+    useEffect(() => {
+        const initialFieldContext = multiple
+            ? defineField({
+                type: 'array',
+                of: value
+                    ? value.map(item => ({
+                        type: 'string',
+                        value: typeof item === 'string' ? item : item.value,
+                    }))
+                    : defaultValue
+                        ? defaultValue.map(item => ({
+                            type: 'string',
+                            value: typeof item === 'string' ? item : item.value,
+                        }))
+                        : [],
+                id: fieldContextID,
+                invalid,
+                name,
+                required,
+            })
+            : defineField({
+                type: 'string',
+                id: fieldContextID,
+                invalid,
+                name,
+                required,
+                value: value ? extractStringValue(value) : defaultValue ? extractStringValue(defaultValue) : '',
+            });
         if (isInFieldset) {
-            fieldsetContextFunctions.updateField(fieldContextID, { value: processedValue });
+            fieldsetContextFunctions.registerField(initialFieldContext);
+            return () => {
+                fieldsetContextFunctions.removeField(initialFieldContext.id);
+            };
+        }
+        formContextFunctions.registerField(initialFieldContext);
+        return () => {
+            formContextFunctions.removeField(initialFieldContext.id);
+        };
+    }, [isInFieldset]);
+    const handleChange = (newValue) => {
+        if (disabled)
+            return;
+        const isInvalid = newValue === '' || !newValue;
+        if (isInFieldset) {
+            fieldsetContextFunctions.updateField(fieldContextID, {
+                invalid: isInvalid,
+                value: newValue,
+            });
         }
         else {
-            formContextFunctions.updateField(fieldContextID, { value: processedValue });
+            formContextFunctions.updateField(fieldContextID, { value: newValue, invalid: isInvalid });
         }
-        onBlur?.(e);
+        onChange?.(newValue);
     };
     const restFieldProps = fieldProps
         ? Object.fromEntries(Object.entries(fieldProps).filter(([key]) => key !== 'className'))
@@ -3817,15 +4124,7 @@ function Input({ checked, className, defaultValue, description, descriptionProps
     const restDescriptionProps = descriptionProps
         ? Object.fromEntries(Object.entries(descriptionProps).filter(([key]) => key !== 'className'))
         : {};
-    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxs("div", { children: [jsx(Input$1, { ...props, className: bag => twMerge(
-                        // Base styles
-                        'w-full rounded-xl border-1 border-neutral-500/50 bg-neutral-100 py-1 pl-2 text-neutral-950 outline-offset-1 outline-ui-sky-blue/95 transition-[background-color] duration-300 ease-exponential dark:bg-neutral-700 dark:text-neutral-50', 
-                        // Pseudo styles
-                        'focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800', 
-                        // 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'
+    return (jsxs(Field, { ...restFieldProps, className: bag => twMerge('grid gap-1', typeof fieldProps?.className === 'function' ? fieldProps?.className(bag) : fieldProps?.className), disabled: disabled, children: [label && (jsx(Label, { ...restLabelProps, className: bag => twMerge('text-sm font-medium', required ? 'after:text-ui-red after:content-["_*"]' : '', typeof labelProps?.className === 'function' ? labelProps?.className(bag) : labelProps?.className), children: label })), jsxs(Listbox, { ...props, onChange: handleChange, value: fieldContext.value, children: [jsx(ListboxButton, { children: jsx(ListboxSelectedOption, { options: optionList, placeholder: `Select ${multiple ? 'Any' : 'One'}` }) }), jsx(ListboxOptions, {})] }), description && (jsx(Description, { ...restDescriptionProps, className: bag => twMerge('text-xs', typeof descriptionProps?.className === 'function'
                     ? descriptionProps?.className(bag)
                     : descriptionProps?.className), children: description }))] }));
 }
@@ -4656,5 +4955,5 @@ function Video({ autoPlay, className, controls = true, poster, ref, srcSet, titl
                                         }, className: 'bg-neutral-900/50 px-1.5 py-1.5 text-neutral-50 backdrop-blur-xs backdrop-brightness-110', children: jsxs(DropDownItem, { as: 'button', className: 'flex items-center gap-2 rounded-lg px-1.5 py-0.5 text-sm drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,background-color,color] duration-300 ease-exponential active:scale-95 data-active:bg-neutral-50/90 data-active:text-neutral-950 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: captureCurrentFrame, children: [jsx(PhotoBadgeArrowDownFill, { className: 'size-5' }), "Capture Current Frame"] }) })] }), jsxs("button", { className: 'grid size-6 rounded-xs transition-transform duration-300 ease-exponential active:scale-95 pointer-fine:hover:scale-105 pointer-fine:active:scale-95', onClick: toggleFullscreen, title: `${isFullscreen ? 'Exit' : 'Enter'} Fullscreen`, children: [jsx(ArrowUpForwardAndArrowDownBackwardRectangle, { className: 'col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-0 opacity-0 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-80 group-data-fullscreen/video:opacity-100' }), jsx(ArrowDownBackwardAndArrowUpForwardRectangle, { className: '-right-0.5 col-start-0 col-end-1 row-start-0 row-end-1 size-full scale-80 drop-shadow-[0_.125rem_1rem] drop-shadow-neutral-950/75 transition-[scale,opacity] duration-500 ease-exponential group-data-fullscreen/video:scale-0 group-data-fullscreen/video:opacity-0' })] })] }), jsx("div", { "aria-hidden": 'true', className: 'absolute inset-0 -z-10 text-[1px] text-transparent', onClick: togglePlay, onMouseMove: handleMouseMoveControls, onMouseLeave: clearMouseMoveControlsTimeout, children: isPlaying ? 'Pause' : 'Play' })] }))] }));
 }
 
-export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink };
+export { Anchor, Button, Details, DetailsBody, DetailsSummary, DropDown, DropDownButton, DropDownItem, DropDownItems, DropDownSection, DropDownSeparator, Fieldset, Form, Ghost, Heading, IFrame, Input, Link, Modal, ModalClose, ModalDialog, ModalTitle, ModalTrigger, Select, SubmitButton, Textarea, Time, Tooltip, TooltipPanel, TooltipTrigger, Video, createButton, createLink };
 //# sourceMappingURL=index.esm.js.map