mado-ui 0.2.0 → 0.2.1

package/dist/index.esm.js

@@ -4,186 +4,6 @@ import { Children, isValidElement, Fragment, createContext, useContext, useSyncE
 import { Button as Button$1, Field, Label, Input as Input$1, Description, Textarea as Textarea$1, Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
 import { createPortal } from 'react-dom';
 
-/**
- * ### Has Class
- * - Returns a boolean based on whether the specified element has the specified class
- * @param {HTMLElement} element Any HTML Element
- * @param {string} className A string of any class to check for
- * @returns {boolean} true if the specified element has the specified class, else false
- */
-function hasClass(element, className) {
-    return element.classList.contains(className);
-}
-/**
- * ### Add Class
- * - Adds the specified classes to the specified elements
- * @param {Element|HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to add to each element
- */
-function addClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        if (hasClass(element, classItem))
-            return;
-        element.classList.add(classItem);
-    }));
-}
-/**
- * ### Remove Class
- * - Removes the specified classes from the specified elements
- * @param {HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to remove from each element
- */
-function removeClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        if (!hasClass(element, classItem))
-            return;
-        element.classList.remove(classItem);
-    }));
-}
-/**
- * ### Toggle Class
- * - Toggles the specified classes on the specified elements
- * @param {HTMLElement|HTMLElement[]|NodeList|string|undefined} elements An HTML Element, an array of HTML Elements, a Node List, a string (as a selector for a querySelector)
- * @param {string|string[]} classList A string or an array of classes to toggle on each element
- */
-function toggleClass(elements, classList) {
-    const elementsType = elements.constructor.name, elementsIsString = typeof elements === 'string', classListType = classList.constructor.name, classListIsString = typeof classList === 'string';
-    let elementList, classListGroup;
-    // & Convert elements to array
-    switch (elementsType) {
-        // Selector
-        case 'String':
-            if (elementsIsString)
-                elementList = Array.from(document.querySelectorAll(elements));
-            break;
-        // Multiple HTML Elements
-        case 'NodeList':
-            if (!elementsIsString)
-                elementList = Array.from(elements);
-            break;
-        // Array of Elements
-        case 'Array':
-            if (!elementsIsString)
-                elementList = elements;
-            break;
-        // Single HTML Element
-        default:
-            if (elementsType.startsWith('HTML') && !elementsIsString)
-                elementList = [elements];
-    }
-    // & Convert classList to array
-    switch (classListType) {
-        case 'String':
-            if (classListIsString)
-                if (classList.split(' ').length >= 2) {
-                    classListGroup = classList.split(' ');
-                }
-                else {
-                    classListGroup = [classList];
-                }
-            break;
-        case 'Array':
-            if (!classListIsString)
-                classListGroup = classList;
-            break;
-    }
-    if (!elementList || elementList.length < 1)
-        throw new Error(`Elements are invalid or undefined. elements: ${elements} → elementList: ${elementList}`);
-    if (!classListGroup || classListGroup.length < 1)
-        throw new Error(`Class List is invalid or undefined. classList: ${classList} → classListGroup: ${classListGroup}`);
-    elementList.forEach((element) => classListGroup.forEach((classItem) => {
-        element.classList.toggle(classItem);
-    }));
-}
-
 const integerList = Array.from({ length: 100 }, (_, i) => `${i + 1}`);
 const twMerge = extendTailwindMerge({
     extend: {
@@ -260,105 +80,13 @@ const twMerge = extendTailwindMerge({
         },
     },
 });
-function extendMadoTailwindMerge(configExtension) {
-    const extend = configExtension.extend || {};
-    const theme = extend.theme || {};
-    const color = 'color' in theme ? theme.color : [];
-    const classGroups = extend.classGroups || {};
-    const themeRest = { ...theme };
-    if ('color' in themeRest)
-        delete themeRest.color;
-    const extendRest = { ...extend };
-    delete extendRest.theme;
-    delete extendRest.classGroups;
-    return extendTailwindMerge({
-        extend: {
-            theme: {
-                color: [
-                    {
-                        ui: [
-                            'red',
-                            'orange',
-                            'yellow',
-                            'green',
-                            'sky-blue',
-                            'blue',
-                            'violet',
-                            'magenta',
-                            'purple',
-                            'brown',
-                            'grey',
-                            'pink',
-                        ],
-                    },
-                    ...color,
-                ],
-                ...themeRest,
-            },
-            classGroups: {
-                animate: [
-                    {
-                        animate: [
-                            'bounce',
-                            'double-spin',
-                            'drop-in',
-                            'flip',
-                            'flip-again',
-                            'grid-rows',
-                            'heartbeat',
-                            'ping',
-                            'pulse',
-                            'slide-up',
-                            'spin',
-                            'wave',
-                        ],
-                    },
-                ],
-                'animation-direction': [
-                    {
-                        'animation-direction': ['normal', 'reverse', 'alternate', 'alternate-reverse'],
-                    },
-                ],
-                'animation-fill': [
-                    {
-                        'animation-fill': ['none', 'forwards', 'backwards', 'both'],
-                    },
-                ],
-                'animation-iteration': [
-                    {
-                        'animation-iteration': [...integerList, 'infinite'],
-                    },
-                ],
-                'animation-state': [
-                    {
-                        'animation-state': ['running', 'paused'],
-                    },
-                ],
-                'grid-cols': [
-                    {
-                        'grid-cols': ['0fr', '1fr'],
-                    },
-                ],
-                'grid-rows': [
-                    {
-                        'grid-rows': ['0fr', '1fr'],
-                    },
-                ],
-                transition: ['transition-rows'],
-                ...classGroups,
-            },
-            ...extendRest,
-        },
-        ...configExtension,
-    });
-}
 
 /** The current date as a Date object */
 const d = new Date();
 /** The current minute of the current hour */
 const minutes = d.getMinutes();
 /** The current year */
-const year = d.getFullYear();
+d.getFullYear();
 /** An array of the names of month in order */
 const monthNamesList = [
     'January',
@@ -385,29 +113,9 @@ const weekdayNamesList = [
     'Saturday',
 ];
 /** The name of the current month */
-const currentMonthName = getMonthName();
+getMonthName();
 /** The name of the current day of the week */
-const currentWeekdayName = getWeekdayName();
-/**
- * ### Days In Month
- * - Returns the number of days in the specified month.
- * @param {Date} date A Date object representing the month to get the number of days for. (Preset to the current date)
- * @returns {number} The number of days in the specified month.
- */
-function daysInMonth(date = d) {
-    const selectedYear = date.getFullYear(), selectedMonth = date.getMonth() + 1;
-    return new Date(selectedYear, selectedMonth, 0).getDate();
-}
-/**
- * ### First of Month
- * - Returns the first day of the specified month.
- * @param {Date} date A Date object representing the month to get the first day for. (Preset to current date)
- * @returns {Date} A Date object of the given month, with the first day.
- */
-function firstOfMonth(date = d) {
-    // Return a new Date object with the first of the month selected
-    return new Date(date.getFullYear(), date.getMonth(), 1);
-}
+getWeekdayName();
 /**
  * ### Get Date
  * - Returns the date with two digits
@@ -436,32 +144,6 @@ function getHours(hours = d) {
         formattedHours = `0${formattedHours}`;
     return formattedHours;
 }
-/**
- * ### Get Hours in 12
- * - Returns the hour based on the specified 24 hour value in a 12 hour format
- * @param {number|Date} hour The hour to be converted to 12 hour format
- * @returns {number} The hour in a 12 hour format
- */
-function getHoursIn12(hour = d) {
-    if (typeof hour !== 'number')
-        hour = hour.getHours();
-    if (hour > 12)
-        return hour - 12;
-    return hour;
-}
-/**
- * ### Get Meridian from Hour
- * - Returns either 'pm' or 'am' based on the specified 24 hour value
- * @param {number|Date} hour The hour to get the meridian from
- * @returns {'am'|'pm'} The meridian for the given hour
- */
-function getMeridianFromHour(hour = d) {
-    if (typeof hour !== 'number')
-        hour = hour.getHours();
-    if (hour >= 12)
-        return 'pm';
-    return 'am';
-}
 /**
  * ### Get Milliseconds
  * - Returns the milliseconds with two digits
@@ -504,9 +186,6 @@ 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
@@ -518,28 +197,6 @@ function getMonthName(date = d) {
         return monthNamesList[date];
     return monthNamesList[date.getMonth()];
 }
-/**
- * ### Get Next Month
- * - Returns the number of the following month from the specified month
- * @param {Date} date The Date object representing the month to get the following month from (Preset to current date)
- * @returns {number} The indexed month of the following month
- */
-function getNextMonth(date = d) {
-    const givenMonth = date.getMonth(); // Get the month from date
-    // Return the indexed month. min 0, max 11
-    return givenMonth === 11 ? 0 : givenMonth + 1;
-}
-/**
- * ### Get Previous Month
- * - Returns the number of the previous month from the specified month
- * @param {Date} date The Date object representing the month to get the previous month from (Preset to current date)
- * @returns {number} The indexed month of the previous month
- */
-function getPreviousMonth(date = d) {
-    const givenMonth = date.getMonth(); // Get the month from date
-    // Return the indexed month. min 0, max 11
-    return givenMonth === 0 ? 11 : givenMonth - 1;
-}
 /**
  * ### Get Seconds
  * - Returns the seconds with two digits
@@ -554,31 +211,6 @@ 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, {
-        weekday: 'code',
-        year: !isSameYear,
-    });
-    return fullDateString;
-}
 /**
  * ### Get Weekday Name
  * - Returns the weekday name of the specified day
@@ -591,80 +223,6 @@ function getWeekdayName(weekday = d) {
     // Return the name of the day of the week
     return weekdayNamesList[weekday.getDay()];
 }
-/**
- * ### Get Years in Range
- * - Returns an array of years in between the specified minimum and maximum years
- * @param {number} minYear The minimum year
- * @param {number} maxYear The maximum year
- * @returns {number[]} Array of years
- */
-function getYearsInRange(minYear = 0, maxYear = year) {
-    const yearList = [];
-    for (let selectedYear = minYear; selectedYear <= maxYear; selectedYear++) {
-        yearList.push(selectedYear);
-    }
-    return yearList;
-}
-/**
- * ### 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 includesWeekday = options.weekday !== false, includesDay = options.day !== false, includesMonth = options.month !== false, includesYear = options.year !== false;
-        if (includesWeekday) {
-            if (options.weekday === 'code')
-                weekdayName = weekdayName.slice(0, 3);
-            if (includesMonth || includesDay || includesYear)
-                weekdayName += ', ';
-        }
-        else {
-            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;
-}
-/**
- * ### Get User Readable Date From Timestampz
- * - Returns a string of the current date in a user-friendly way
- * - Includes `'Yesterday'`, '`Today'`, and `'Tomorrow'`
- * @param string
- * @returns {'Today'|'Tomorrow'|'Yesterday'|string} `'weekday, month day, year'` | `'Yesterday'` | `'Today'` | `'Tomorrow'`
- */
-function getUserReadableDateFromTimestampz(timestampz) {
-    const [date, time] = timestampz.split('T') || [];
-    const [year, month, day] = date?.split('-').map(string => Number(string)) || [];
-    const timezoneIsAheadOfUTC = time?.includes('+');
-    const [hms, _timezone] = timezoneIsAheadOfUTC ? time?.split('+') : time?.split('-') || [];
-    const [hours, minutes, seconds] = hms?.split(':').map(string => Number(string)) || [];
-    // const [timezoneHours, timezoneMinutes] = timezone?.split(':').map(string => Number(string)) || []
-    const dateAndTime = new Date(year, month - 1, day, hours, minutes, seconds), userReadableDateAndTime = getUserReadableDate(dateAndTime);
-    return userReadableDateAndTime;
-}
 
 function findComponentByType(children, componentType) {
     const childrenArray = Children.toArray(children);
@@ -717,7 +275,7 @@ function isPhoneNumber(tel) {
  * @returns {string} string formatted (000) 000-0000
  */
 function formatPhoneNumber(string, countryCode) {
-    return (`${countryCode ? `+${countryCode} ` : ''}` +
+    return (`${`+${countryCode} ` }` +
         string
             .replace(/\D/g, '')
             .slice(-10)
@@ -2175,5 +1733,5 @@ function Time({ children, dateObject, dateTime, day, hours, milliseconds, minute
     return (jsx("time", { dateTime: dateAndTime, ref: ref, ...props, children: dateDisplay }));
 }
 
-export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, Textarea, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, addClass, currentMonthName, currentWeekdayName, daysInMonth, defineField, easeOutExpo, emailRegex, extendMadoTailwindMerge, findComponentByType, firstOfMonth, formatPhoneNumber, getDate, getHours, getHoursIn12, getMeridianFromHour, getMilliseconds, getMinutes, getMonth, getMonthIndexFromName, getMonthName, getNextMonth, getPreviousMonth, getSeconds, getUserReadableDate, getUserReadableDateFromTimestampz, getWeekdayName, getYearsInRange, hasClass, isEmail, isPhoneNumber, monthNamesList, removeClass, telRegex, toFullDateString, toLowerCase, toggleClass, twMerge, twSort, useFormContext, useFormStatus, weekdayNamesList };
+export { Airplane, Anchor, ArrowTriangle2CirclepathCircle, ArrowTriangle2CirclepathCircleFill, BagFill, Banknote, BellFill, BoltCar, BoltFill, BoltRingClosed, BoltTrianglebadgeExclamationmark, BookFill, BookmarkFill, BriefcaseFill, BubbleLeftFill, Building2Fill, Button, Calendar, CameraFill, CarFill, CartFill, ChartBarDocHorizontal, Checkmark, CheckmarkSeal, ChevronCompactDown, ChevronDown, ChevronLeft, ChevronLeftForwardslashChevronRight, ChevronRight, ChevronUpChevronDown, CircleFill, ClockBadgeCheckmark, ClockFill, CloudFill, CubeFill, CurvePointLeft, DialHigh, DocFill, DocOnClipboard, DocOnDoc, DocOnDocFill, DocOnMagnifyingglass as DocTextMagnifyingglass, DollarSign, EllipsisCircle, EllipsisCircleFill, Envelope, EnvelopeFill, ExclamationmarkOctagon, Eye, FigureWaterFitness, FlagFill, FlameFill, Folder, FolderFill, Form, FormContextProvider, FormStatusProvider, Gearshape, GearshapeFill, Ghost, GiftFill, GlobeAmericasFill, HareFill, Heading, House, HouseDeskclock, HouseFill, IPhoneHouse, Input, LightRibbon, LightbulbFill, LightbulbLed, Link, ListBulletClipboardFill, Magnifyingglass, MapPinEllipse, MinusPlusBatteryblock, Modal, ModalDialog, ModalTrigger, Network, NetworkShield, NewspaperFill, Number$1 as Number, PaperplaneFill, Person, PersonCropSquare, PersonFill, PersonFillQuestionmark, Phone, PhoneArrowUpRight, PhoneFill, PlayRectangleFill, Plus, Qrcode, RectanglePortraitAndArrowLeft, RectanglePortraitAndArrowLeftFill, Sensor, Signature, SolarPanel, SquareAndArrowDown, SquareAndArrowDownFill, SquareAndArrowUp, SquareAndArrowUpFill, SquareAndPencil, SquareAndPencilFill, SubmitButton, TextBubble, Textarea, ThreePeople, ThreeRectanglesDesktop, ThreeRectanglesDesktopFill, Time, Trash, TrashFill, Tree, UmbrellaFill, xmark as Xmark, defineField, useFormContext, useFormStatus };
 //# sourceMappingURL=index.esm.js.map