winduum 0.8.0-next.3 → 0.8.0-next.5

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "winduum",
-  "version": "0.8.0-next.3",
+  "version": "0.8.0-next.5",
   "type": "module",
   "types": "types/index.d.ts",
-  "main": "plugin/tailwind.cjs",
-  "module": "plugin/tailwind.js",
+  "main": "plugin/index.cjs",
+  "module": "plugin/index.js",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
@@ -13,7 +13,8 @@
     "eslint-fix": "eslint 'src/**/*.js' --fix",
     "stylelint": "npx stylelint 'src/**/*.css'",
     "stylelint-fix": "npx stylelint 'src/**/*.css' --fix",
-    "tailwind": "rollup plugin/tailwind.js --file plugin/tailwind.cjs -f cjs --exports named",
+    "plugin": "rollup plugin/index.js --file plugin/index.cjs -f cjs --exports named",
+    "dts": "node dts.js",
     "publish-next": "npm publish --tag next"
   },
   "devDependencies": {
@@ -35,7 +36,9 @@
     "tailwindcss-animate": "^1.0.7",
     "vite": "^5.0.12",
     "vue": "^3.4.15",
-    "slide-element": "^2.3.1"
+    "slide-element": "^2.3.1",
+    "dts-buddy": "^0.4.4",
+    "typescript": "^5.3.3"
   },
   "files": [
     "index.js",
@@ -47,28 +50,49 @@
   ],
   "exports": {
     ".": {
-      "default": "./plugin/tailwind.js",
-      "require": "./plugin/tailwind.cjs",
-      "import": "./plugin/tailwind.js"
+      "default": "./plugin/index.js",
+      "require": "./plugin/index.cjs",
+      "import": "./plugin/index.js",
+      "types": "./plugin/types.d.ts"
     },
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./plugin/*": "./plugin/*",
-    "./base/*": "./src/base/*",
-    "./components/*": "./src/components/*",
-    "./libraries/*": "./src/libraries/*",
-    "./ui/*": "./src/ui/*",
+    "./src/components/compare": {
+      "default": "./src/components/compare/index.js",
+      "types": "./src/components/compare/index.d.ts"
+    },
+    "./src/components/details": {
+      "default": "./src/components/details/index.js",
+      "types": "./src/components/details/index.d.ts"
+    },
     "./src/components/dialog": {
       "default": "./src/components/dialog/index.js",
-      "types": "./types/index.d.ts"
+      "types": "./src/components/dialog/index.d.ts"
     },
     "./src/components/form": {
       "default": "./src/components/form/index.js",
-      "types": "./types/index.d.ts"
+      "types": "./src/components/form/index.d.ts"
+    },
+    "./src/components/toaster": {
+      "default": "./src/components/toaster/index.js",
+      "types": "./src/components/toaster/index.d.ts"
+    },
+    "./src/ui/range": {
+      "default": "./src/ui/range/index.js",
+      "types": "./src/ui/range/index.d.ts"
+    },
+    "./src/utilities/ripple": {
+      "default": "./src/utilities/ripple/index.js",
+      "types": "./src/utilities/ripple/index.d.ts"
+    },
+    "./src/utilities/swap": {
+      "default": "./src/utilities/ripple/index.js",
+      "types": "./src/utilities/ripple/index.d.ts"
     }
   },
   "engines": {
-    "node": ">=18.0.0",
+    "node": ">=20.0.0",
     "npm": ">=9.0.0"
   },
   "repository": {

package/plugin/{tailwind.cjs → index.cjs}

@@ -202,7 +202,7 @@ const tailwindAnimations = (values) => {
 };
 
 /**
- * @type {import('./tailwind').PluginOptions} options.
+ * @type {import('./').PluginOptions} options.
  */
 const defaultConfig = {
     colors: [
@@ -243,7 +243,7 @@ const defaultConfig = {
 };
 
 /**
- * @param {import('./tailwind').PluginOptions} userConfig
+ * @param {import('./').PluginOptions} userConfig
  */
 const createPlugin = (userConfig = {}) => {
     const settings = {

package/plugin/{tailwind.d.ts → index.d.ts}

@@ -1,3 +1,5 @@
+import { Plugin } from "tailwindcss/types/config";
+
 export interface PluginOptions {
     colors?: string[]
     fontFamily?: string[],
@@ -17,3 +19,7 @@ export interface PluginOptions {
         colorMix?: boolean
     }
 }
+
+export const defaultConfig: PluginOptions
+
+export default function createPlugin(userConfig: PluginOptions): Plugin

package/plugin/{tailwind.js → index.js}

@@ -7,7 +7,7 @@ import { accentColor, textColor } from './utilities/color.js'
 import { tailwindAnimations, tailwindColors, tailwindPropertyUtilities, tailwindVariables, tailwindVariablesFont } from './utilities/common.js'
 
 /**
- * @type {import('./tailwind').PluginOptions} options.
+ * @type {import('./').PluginOptions} options.
  */
 export const defaultConfig = {
     colors: [
@@ -48,7 +48,7 @@ export const defaultConfig = {
 }
 
 /**
- * @param {import('./tailwind').PluginOptions} userConfig
+ * @param {import('./').PluginOptions} userConfig
  */
 export const createPlugin = (userConfig = {}) => {
     const settings = {

package/src/common.d.ts

@@ -0,0 +1,2 @@
+export function nextRepaint(): any;
+export function animationsFinished(element: any): Promise<any>;

package/src/components/compare/index.d.ts

@@ -0,0 +1,8 @@
+export interface SetPositionOptions {
+    selector?: string
+    positionProperty?: string
+}
+
+export function setPosition(event: Event, options?: SetPositionOptions): void
+export function setKeyboardStep(event: KeyboardEvent, step?: string): void
+export function setMouseStep(event: MouseEvent, step?: string): void

package/src/components/compare/index.js

@@ -1,6 +1,6 @@
 /**
- * @param {import("./types/index").Position} event
- * @param {import("./types/index").PositionOptions} options
+ * @param {Event} event
+ * @param {import("./").SetPositionOptions} options
  * @returns void
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
@@ -14,27 +14,21 @@ export const setPosition = ({ currentTarget }, options = {}) => {
 }
 
 /**
- * @param {import("./types/index").KeyboardStep} event
- * @param {Number} step
+ * @param {KeyboardEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {string} step
  * @returns void
  */
-export const setKeyboardStep = ({ key, currentTarget }, step = 10) => {
+export const setKeyboardStep = ({ key, currentTarget }, step = '10') => {
     if (key?.toLowerCase() !== 'arrowright' && key?.toLowerCase() !== 'arrowleft') return
 
     currentTarget.step = step
 }
 
 /**
- * @param {import("./types/index").MouseStep} event
- * @param {Number} step
+ * @param {MouseEvent & { currentTarget: HTMLInputElement | EventTarget }} event
+ * @param {string} step
  * @returns void
  */
-export const setMouseStep = ({ currentTarget }, step = 0.1) => {
+export const setMouseStep = ({ currentTarget }, step = '0.1') => {
     currentTarget.step = step
 }
-
-export default {
-    setPosition,
-    setKeyboardStep,
-    setMouseStep
-}

package/src/components/details/index.d.ts

@@ -0,0 +1,9 @@
+export interface DefaultOptions {
+    selector?: string
+    summarySelector?: string
+}
+
+export const defaultOptions: DefaultOptions
+export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>

package/src/components/details/index.js

@@ -1,5 +1,5 @@
 /**
- * @type {import("./types/index").DefaultDetailsOptions}
+ * @type {import("./").DefaultOptions}
  */
 export const defaultOptions = {
     selector: 'details',
@@ -8,7 +8,7 @@ export const defaultOptions = {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const showDetails = async (element, options = {}) => {
@@ -31,7 +31,7 @@ export const showDetails = async (element, options = {}) => {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const closeDetails = async (element, options = {}) => {
@@ -56,7 +56,7 @@ export const closeDetails = async (element, options = {}) => {
 
 /**
  * @param {HTMLInputElement | HTMLElement} element
- * @param {import("./types/index").DefaultDetailsOptions} options
+ * @param {import("./").DefaultOptions} options
  * @returns Promise<void>
  */
 export const toggleDetails = async (element, options = {}) => {
@@ -75,9 +75,3 @@ export const toggleDetails = async (element, options = {}) => {
         await closeDetails(element, options)
     }
 }
-
-export default {
-    showDetails,
-    closeDetails,
-    toggleDetails
-}

package/src/components/dialog/index.d.ts

@@ -0,0 +1,30 @@
+export interface DialogElement extends HTMLDialogElement {
+    _dialogHasEvents: boolean
+}
+
+export interface DefaultOptions {
+    remove?: boolean | null
+    closable?: boolean | null
+    openClass?: string
+    scrollbarWidthProperty?: string
+}
+
+export interface InsertDialogOptions {
+    selector?: string | null
+    class?: string | null
+    append?: boolean | null
+    show?: DefaultOptions
+}
+
+export interface FetchDialogOptions {
+    url: string
+    insert?: InsertDialogOptions
+}
+
+export const defaultOptions: DefaultOptions
+export function dialogSelector(selector: string): HTMLDialogElement
+export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+export function showDialog(element: DialogElement, options?: DefaultOptions): Promise<void>
+export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
+export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>

package/src/components/dialog/index.js

@@ -1,7 +1,7 @@
 import { animationsFinished } from '../../common.js'
 
 /**
- * @type {import("./types/index").DefaultOptions}
+ * @type {import("./").DefaultOptions}
 */
 export const defaultOptions = {
     openClass: 'visible',
@@ -11,22 +11,23 @@ export const defaultOptions = {
 
 /**
  * @param {string} selector.
+ * @return HTMLDialogElement
  */
 export const dialogSelector = selector => document.querySelectorAll(selector)[document.querySelectorAll(selector).length - 1]
 
 /**
  * Dismisses a dialog.
- * @param {HTMLDialogElement} selector - The dialog element to dismiss.
- * @param {import("./types/index").DefaultOptions} options - The options for closing the dialog.
+ * @param {HTMLDialogElement} element - The dialog element to dismiss.
+ * @param {import("./").DefaultOptions} options - The options for closing the dialog.
  * @returns Promise<void>
  */
-export const dismissDialog = async (selector, options = defaultOptions) => {
-    await animationsFinished(selector)
-    selector.inert = true
-    selector.classList.remove(options.openClass)
-    selector.dispatchEvent(new CustomEvent('c-dialog:dismiss'))
+export const dismissDialog = async (element, options = defaultOptions) => {
+    await animationsFinished(element)
+    element.inert = true
+    element.classList.remove(options.openClass)
+    element.dispatchEvent(new CustomEvent('c-dialog:dismiss'))
 
-    options.remove && selector.remove()
+    options.remove && element.remove()
 
     if (!document.querySelector('dialog[open]')) {
         document.documentElement.style.removeProperty(options.scrollbarWidthProperty)
@@ -35,11 +36,11 @@ export const dismissDialog = async (selector, options = defaultOptions) => {
 
 /**
  * Shows a dialog.
- * @param {import("./types/index").DialogElement} selector - The dialog element to show.
- * @param {import("./types/index").DefaultOptions} options - The options for showing the dialog.
+ * @param {HTMLDialogElement | import("./").DialogElement} element - The dialog element to show.
+ * @param {import("./").DefaultOptions} options - The options for showing the dialog.
  * @returns Promise<void>
  */
-export const showDialog = async (selector, options = {}) => {
+export const showDialog = async (element, options = {}) => {
     options = {
         closable: true,
         ...defaultOptions,
@@ -48,54 +49,54 @@ export const showDialog = async (selector, options = {}) => {
 
     document.documentElement.style.setProperty(options.scrollbarWidthProperty, `${window.innerWidth - document.body.clientWidth}px`)
 
-    if (!selector?._dialogHasEvents) {
-        selector.addEventListener('keydown', (e) => {
+    if (!element?._dialogHasEvents) {
+        element.addEventListener('keydown', (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault()
-                options.closable && closeDialog(selector, options)
+                options.closable && closeDialog(element, options)
             }
         })
 
-        selector.addEventListener('click', ({ target }) => {
+        element.addEventListener('click', ({ target }) => {
             if (target.nodeName === 'DIALOG' && options.closable) {
-                closeDialog(selector, options)
+                closeDialog(element, options)
             }
         })
 
-        selector._dialogHasEvents = true
+        element._dialogHasEvents = true
     }
 
-    selector.inert = false
-    selector.classList.add(options.openClass)
+    element.inert = false
+    element.classList.add(options.openClass)
 
     window.HTMLDialogElement
-        ? selector.showModal()
-        : selector.setAttribute('open', '')
+        ? element.showModal()
+        : element.setAttribute('open', '')
 }
 
 /**
  * Closes and dismisses a dialog.
- * @param {HTMLDialogElement} selector - The dialog element to dismiss.
- * @param {import("./types/index").DefaultOptions} options - The options for closing the dialog.
+ * @param {HTMLDialogElement} element - The dialog element to dismiss.
+ * @param {import("./").DefaultOptions} options - The options for closing the dialog.
  * @returns Promise<void>
  */
-export const closeDialog = async (selector, options = {}) => {
+export const closeDialog = async (element, options = {}) => {
     options = {
         ...defaultOptions,
         ...options
     }
 
     window.HTMLDialogElement
-        ? selector.close()
-        : selector.removeAttribute('open')
+        ? element.close()
+        : element.removeAttribute('open')
 
-    await dismissDialog(selector, options)
+    await dismissDialog(element, options)
 }
 
 /**
  * Inserts a dialog into the DOM.
  * @param {string} content - The HTML content to insert into the dialog.
- * @param {import("./types/index").InsertOptions} options - The options for inserting the dialog.
+ * @param {import("./").InsertDialogOptions} options - The options for inserting the dialog.
  * @returns Promise<void>
  */
 export const insertDialog = async (content, options = {}) => {
@@ -109,7 +110,7 @@ export const insertDialog = async (content, options = {}) => {
         ...options
     }
 
-    const dialog = new DOMParser().parseFromString(content, 'text/html').body.firstChild
+    const dialog = new DOMParser().parseFromString(content, 'text/html').body.firstElementChild
     dialog.classList.add(options.class)
 
     if (!dialogSelector(options.selector) || options.append) {
@@ -123,19 +124,10 @@ export const insertDialog = async (content, options = {}) => {
 
 /**
  * Fetches a dialog from a URL and inserts it into the DOM.
- * @param {import("./types/index").FetchOptions} options - The options for fetching and inserting the dialog.
+ * @param {import("./").FetchDialogOptions} options - The options for fetching and inserting the dialog.
  */
 export const fetchDialog = async ({ url, insert = {} }) => {
     await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
         .then(response => response.json())
         .then(async ({ content }) => await insertDialog(content, insert))
 }
-
-export default {
-    defaultOptions,
-    dismissDialog,
-    showDialog,
-    closeDialog,
-    insertDialog,
-    fetchDialog
-}

package/src/components/form/{types/index.d.ts → index.d.ts}

@@ -21,3 +21,6 @@ export interface ValidateFieldOptions {
     invalidIcon?: string
     activeClass?: string
 }
+
+export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
+export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void

package/src/components/form/index.js

@@ -1,6 +1,6 @@
 /**
  * @param {Event | SubmitEvent} event
- * @param {import("./types/index").ValidateFormOptions} options
+ * @param {import("./").ValidateFormOptions} options
  * @returns void
  */
 export const validateForm = (event, options = {}) => {
@@ -28,7 +28,7 @@ export const validateForm = (event, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import("./types/index").ValidateFieldOptions} options
+ * @param {import("./").ValidateFieldOptions} options
  * @returns void
  */
 export const validateField = (element, options = {}) => {
@@ -98,3 +98,8 @@ export const validateField = (element, options = {}) => {
         }
     }
 }
+
+export default {
+    validateForm,
+    validateField
+}

package/src/components/toaster/index.d.ts

@@ -0,0 +1,30 @@
+export interface ShowToastOptions {
+    visibleClass?: string
+    autoHide?: number | null
+    heightProperty?: string
+    close?: CloseToastOptions
+}
+
+export interface CloseToastOptions {
+    hiddenClass?: string
+    heightProperty?: string
+}
+
+export interface InsertToasterOptions {
+    classes?: string
+}
+
+export interface InsertToastOptions {
+    classes?: string
+    title?: string
+    text?: string
+    start?: string
+    end?: string
+    show?: ShowToastOptions
+}
+
+export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
+export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
+export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
+export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>

package/src/components/toaster/index.js

@@ -2,7 +2,7 @@ import { animationsFinished, nextRepaint } from '../../common.js'
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').CloseToastOptions} options
+ * @param {import('./index').CloseToastOptions} options
  * @returns Promise<void>
  */
 export const closeToast = async (element, options = {}) => {
@@ -14,7 +14,7 @@ export const closeToast = async (element, options = {}) => {
 
     const toaster = element.parentElement
 
-    element.style.setProperty(options.toastHeightProperty, `${element.offsetHeight}px`)
+    element.style.setProperty(options.heightProperty, `${element.offsetHeight}px`)
 
     await nextRepaint()
 
@@ -29,7 +29,7 @@ export const closeToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').ShowToastOptions} options
+ * @param {import('./').ShowToastOptions} options
  * @returns Promise<void>
  */
 export const showToast = async (element, options = {}) => {
@@ -56,7 +56,7 @@ export const showToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').InsertToasterOptions} options
+ * @param {import('./').InsertToasterOptions} options
  * @returns Promise<void>
  */
 export const insertToaster = async (element, options = {}) => {
@@ -72,7 +72,7 @@ export const insertToaster = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').InsertToastOptions} options
+ * @param {import('./').InsertToastOptions} options
  * @returns Promise<void>
  */
 export const insertToast = async (element, options = {}) => {
@@ -104,7 +104,7 @@ export const insertToast = async (element, options = {}) => {
 
 /**
  * @param {HTMLElement} element
- * @param {import('./types/index').CloseToastOptions} options
+ * @param {import('./').CloseToastOptions} options
  * @returns Promise<void>
  */
 export const closeToaster = (element, options = {}) => {
@@ -112,11 +112,3 @@ export const closeToaster = (element, options = {}) => {
         closeToast(toast, options)
     )
 }
-
-export default {
-    closeToast,
-    showToast,
-    insertToast,
-    insertToaster,
-    closeToaster
-}

package/src/ui/range/index.d.ts

@@ -0,0 +1,19 @@
+export interface SetTrackPropertyOptions {
+    element: HTMLElement | Element
+    value: string
+    max?: number
+}
+
+export interface SetValueOptions {
+    selector?: string
+    track?: 'start' | 'end'
+}
+
+export interface SetOutputOptions {
+    lang?: string
+    formatOptions?: Intl.NumberFormatOptions
+}
+
+export function setTrackProperty(options: SetTrackPropertyOptions, track: 'start' | 'end'): void
+export function setValue(element: HTMLInputElement, options?: SetValueOptions): void
+export function setOutputValue(element: HTMLInputElement, outputElement: HTMLOutputElement | Element, options?: SetOutputOptions): void

package/src/ui/range/index.js

@@ -1,66 +1,59 @@
 /**
- * @type {import("./types/index").DefaultOptions}
- */
-export const defaultOptions = {
-    selector: '.ui-range',
-    track: 'start'
-}
-
-/**
- * @param {import("./types/index").TrackOptions} options
+ * @param {import("./").SetTrackPropertyOptions} options
  * @param {'start' | 'end'} track
  * @returns void
  */
-export const setTrackProperty = ({ element, value, max }, track = defaultOptions.track) => {
+export const setTrackProperty = ({ element, value, max }, track = 'start') => {
     element.style.setProperty('--ui-range-track-' + track, `${(value / max * 100).toString()}%`)
 }
 
 /**
- * @param {HTMLInputElement} target
- * @param {import("./types/index").DefaultOptions} options
+ * @param {HTMLInputElement} element
+ * @param {import("./").SetValueOptions} options
  * @returns void
  */
-export const setValue = (target, options = {}) => {
+export const setValue = (element, options = {}) => {
     const { selector, track } = {
-        ...defaultOptions,
+        selector: '.ui-range',
+        track: 'start',
         ...options
     }
 
-    const element = target.closest(selector)
+    const parentElement = element.closest(selector)
 
-    if (!element._trackValues) {
-        element._trackValues = {
+    if (!parentElement._trackValues) {
+        parentElement._trackValues = {
             start: 0,
             end: Infinity
         }
     }
 
-    if (Object.keys(element._trackValues).length > 1) {
+    if (Object.keys(parentElement._trackValues).length > 1) {
         if (
-            (track === 'start' && target.value < element._trackValues.end) ||
-            (track === 'end' && element._trackValues.start < target.value)
+            (track === 'start' && element.value < parentElement._trackValues.end) ||
+            (track === 'end' && parentElement._trackValues.start < element.value)
         ) {
-            element._trackValues[track] = Number(target.value)
+            parentElement._trackValues[track] = Number(element.value)
         }
 
-        target.value = element._trackValues[track]
+        element.value = parentElement._trackValues[track]
     }
 
     setTrackProperty({
-        element,
-        value: target.value,
-        max: target.max || 100
+        element: parentElement,
+        value: element.value,
+        max: Number(element.max) || 100
     }, track)
 }
 
 /**
- * @param {HTMLInputElement} target
- * @param {import("./types/index").OutputOptions} options
+ * @param {HTMLInputElement} element
+ * @param {HTMLOutputElement | Element} outputElement
+ * @param {import("./").SetOutputOptions} options
  * @returns void
  */
-export const setOutputValue = (target, options = {}) => {
-    const { element, lang, formatOptions } = {
-        element: null,
+export const setOutputValue = (element, outputElement, options = {}) => {
+    options = {
         lang: document.documentElement.lang,
         formatOptions: {
             style: 'decimal',
@@ -70,12 +63,5 @@ export const setOutputValue = (target, options = {}) => {
         ...options
     }
 
-    element.innerHTML = Number(target.value).toLocaleString(lang, formatOptions)
-}
-
-export default {
-    defaultOptions,
-    setTrackProperty,
-    setValue,
-    setOutputValue
+    outputElement.innerHTML = Number(element.value).toLocaleString(options.lang, options.formatOptions)
 }

package/src/utilities/ripple/index.d.ts

@@ -0,0 +1 @@
+export function showRipple(event: MouseEvent, element: HTMLElement): void

package/src/utilities/ripple/index.js

@@ -1,29 +1,25 @@
 /**
  * Shows a ripple effect.
  * @param {MouseEvent<HTMLElement>} event - The dialog element to dismiss.
- * @param {HTMLElement} selector - The options for closing the dialog.
+ * @param {HTMLElement} element - The options for closing the dialog.
  * @returns void
  */
-export const showRipple = ({ currentTarget, offsetX, offsetY }, selector = currentTarget.querySelector('.ripple')) => {
-    if (!selector) {
+export const showRipple = ({ currentTarget, offsetX, offsetY }, element = currentTarget.querySelector('.ripple')) => {
+    if (!element) {
         currentTarget.insertAdjacentHTML('beforeend', "<div class='ripple'></div>")
-        selector = currentTarget.querySelector('.ripple')
+        element = currentTarget.querySelector('.ripple')
     }
 
-    selector.classList.remove('animation-ripple')
+    element.classList.remove('animation-ripple')
 
-    if (selector.clientWidth === 0 && selector.clientHeight === 0) {
+    if (element.clientWidth === 0 && element.clientHeight === 0) {
         const d = Math.max(currentTarget.offsetWidth, currentTarget.offsetHeight)
 
-        selector.style.width = d + 'px'
-        selector.style.height = d + 'px'
+        element.style.width = d + 'px'
+        element.style.height = d + 'px'
     }
 
-    selector.style.top = offsetY - (selector.clientHeight / 2) + 'px'
-    selector.style.left = offsetX - (selector.clientWidth / 2) + 'px'
-    selector.classList.add('animation-ripple')
-}
-
-export default {
-    showRipple
+    element.style.top = offsetY - (element.clientHeight / 2) + 'px'
+    element.style.left = offsetX - (element.clientWidth / 2) + 'px'
+    element.classList.add('animation-ripple')
 }

package/src/utilities/swap/index.d.ts

@@ -0,0 +1 @@
+export function toggleSwap(element: HTMLElement): void

package/src/utilities/swap/index.js

@@ -10,7 +10,3 @@ export const toggleSwap = (element) => {
     ariaVisible.ariaHidden = 'true'
     ariaHidden.ariaHidden = 'false'
 }
-
-export default {
-    toggleSwap
-}

package/tailwind.config.js

@@ -1,4 +1,4 @@
-import winduum from './plugin/tailwind.js'
+import winduum from './plugin/index.js'
 import containerQueries from '@tailwindcss/container-queries'
 import animate from 'tailwindcss-animate'
 

package/types/index.d.ts

@@ -1,20 +1,176 @@
+declare module 'winduum' {
+	import type { Plugin } from 'tailwindcss/types/config';
+	export interface PluginOptions {
+		colors?: string[]
+		fontFamily?: string[],
+		fontWeight?: string[],
+		ease?: string[],
+		zIndex?: string[],
+		fontSize?: string[],
+		spacing?: string[],
+		borderRadius?: string[],
+		animations?: string[],
+		mask?: string[],
+		screens?: {
+			[key: string]: string
+		},
+		settings?: {
+			rgb?: boolean,
+			colorMix?: boolean
+		}
+	}
+
+	export const defaultConfig: PluginOptions
+
+	export default function createPlugin(userConfig: PluginOptions): Plugin
+}
+
+declare module 'winduum/src/components/compare' {
+	export interface SetPositionOptions {
+		selector?: string
+		positionProperty?: string
+	}
+
+	export function setPosition(event: Event, options?: SetPositionOptions): void
+	export function setKeyboardStep(event: KeyboardEvent, step?: string): void
+	export function setMouseStep(event: MouseEvent, step?: string): void
+}
+
+declare module 'winduum/src/components/details' {
+	export interface DefaultOptions {
+		selector?: string
+		summarySelector?: string
+	}
+
+	export const defaultOptions: DefaultOptions
+	export function showDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+	export function closeDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+	export function toggleDetails(selector: HTMLInputElement | HTMLElement, options?: DefaultOptions): Promise<void>
+}
+
 declare module 'winduum/src/components/dialog' {
-    export const defaultOptions: import('../src/components/dialog/types').DefaultOptions
-    export function dialogSelector(selector: HTMLDialogElement): any;
-    export function dismissDialog(selector: HTMLDialogElement, options?: import('../src/components/dialog/types').DefaultOptions): Promise<void>;
-    export function showDialog(selector: any, options?: import('../src/components/dialog/types').DefaultOptions): Promise<void>;
-    export function closeDialog(selector: HTMLDialogElement, options?: import('../src/components/dialog/types').DefaultOptions): Promise<void>;
-    export function insertDialog(content: string, options?: import('../src/components/dialog/types').InsertOptions): Promise<void>;
-    export function fetchDialog({ url, insert }: import('../src/components/dialog/types').FetchOptions): Promise<void>;
-
-    namespace _default {
-        export { defaultOptions };
-        export { dismissDialog };
-        export { showDialog };
-        export { closeDialog };
-        export { insertDialog };
-        export { fetchDialog };
-    }
-
-    export default _default;
+	export interface DialogElement extends HTMLDialogElement {
+		_dialogHasEvents: boolean
+	}
+
+	export interface DefaultOptions {
+		remove?: boolean | null
+		closable?: boolean | null
+		openClass?: string
+		scrollbarWidthProperty?: string
+	}
+
+	export interface InsertDialogOptions {
+		selector?: string | null
+		class?: string | null
+		append?: boolean | null
+		show?: DefaultOptions
+	}
+
+	export interface FetchDialogOptions {
+		url: string
+		insert?: InsertDialogOptions
+	}
+
+	export const defaultOptions: DefaultOptions
+	export function dialogSelector(selector: string): HTMLDialogElement
+	export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+	export function showDialog(element: DialogElement, options?: DefaultOptions): Promise<void>
+	export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
+	export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
+	export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>
+}
+
+declare module 'winduum/src/components/form' {
+	export interface ValidateFormOptions {
+		validateSelectors?: string
+		validateOptions?: ValidateFieldOptions
+		submitterLoadingClass?: string
+	}
+
+	export interface ValidateFieldOptions {
+		validate?: boolean
+		selector?: string
+		ignoreMatch?: string
+		validitySelector?: string
+		infoParentSelector?: string
+		infoSelector?: string
+		infoContent?: string
+		endParentSelector?: string
+		endSelector?: string
+		endContent?: string
+		validClass?: string
+		validIcon?: string
+		invalidClass?: string
+		invalidIcon?: string
+		activeClass?: string
+	}
+
+	export function validateForm(event: Event | SubmitEvent, options?: ValidateFormOptions): void
+	export function validateField(element: HTMLElement | SubmitEvent, options?: ValidateFieldOptions): void
 }
+
+declare module 'winduum/src/components/toaster' {
+	export interface ShowToastOptions {
+		visibleClass?: string
+		autoHide?: number | null
+		heightProperty?: string
+		close?: CloseToastOptions
+	}
+
+	export interface CloseToastOptions {
+		hiddenClass?: string
+		heightProperty?: string
+	}
+
+	export interface InsertToasterOptions {
+		classes?: string
+	}
+
+	export interface InsertToastOptions {
+		classes?: string
+		title?: string
+		text?: string
+		start?: string
+		end?: string
+		show?: ShowToastOptions
+	}
+
+	export function closeToast(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+	export function showToast(element: HTMLElement, options?: ShowToastOptions): Promise<void>
+	export function insertToaster(element: HTMLElement, options?: InsertToasterOptions): Promise<void>
+	export function insertToast(element: HTMLElement, options?: InsertToastOptions): Promise<void>
+	export function closeToaster(element: HTMLElement, options?: CloseToastOptions): Promise<void>
+}
+
+declare module 'winduum/src/ui/range' {
+	export interface SetTrackPropertyOptions {
+		element: HTMLElement | Element
+		value: string
+		max?: number
+	}
+
+	export interface SetValueOptions {
+		selector?: string
+		track?: 'start' | 'end'
+	}
+
+	export interface SetOutputOptions {
+		lang?: string
+		formatOptions?: Intl.NumberFormatOptions
+	}
+
+	export function setTrackProperty(options: SetTrackPropertyOptions, track: 'start' | 'end'): void
+	export function setValue(element: HTMLInputElement, options?: SetValueOptions): void
+	export function setOutputValue(element: HTMLInputElement, outputElement: HTMLOutputElement | Element, options?: SetOutputOptions): void
+}
+
+declare module 'winduum/src/utilities/ripple' {
+	export function showRipple(event: MouseEvent, element: HTMLElement): void
+}
+
+declare module 'winduum/src/utilities/swap' {
+	export function toggleSwap(element: HTMLElement): void
+}
+
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1,70 @@
+{
+	"version": 3,
+	"file": "index.d.ts",
+	"names": [
+		"PluginOptions",
+		"defaultConfig",
+		"SetPositionOptions",
+		"setPosition",
+		"setKeyboardStep",
+		"setMouseStep",
+		"DefaultOptions",
+		"defaultOptions",
+		"showDetails",
+		"closeDetails",
+		"toggleDetails",
+		"DialogElement",
+		"InsertDialogOptions",
+		"FetchDialogOptions",
+		"dialogSelector",
+		"dismissDialog",
+		"showDialog",
+		"closeDialog",
+		"insertDialog",
+		"fetchDialog",
+		"ValidateFormOptions",
+		"ValidateFieldOptions",
+		"validateForm",
+		"validateField",
+		"ShowToastOptions",
+		"CloseToastOptions",
+		"InsertToasterOptions",
+		"InsertToastOptions",
+		"closeToast",
+		"showToast",
+		"insertToaster",
+		"insertToast",
+		"closeToaster",
+		"SetTrackPropertyOptions",
+		"SetValueOptions",
+		"SetOutputOptions",
+		"setTrackProperty",
+		"setValue",
+		"setOutputValue",
+		"showRipple",
+		"toggleSwap"
+	],
+	"sources": [
+		"../plugin/index.d.ts",
+		"../src/components/compare/index.d.ts",
+		"../src/components/details/index.d.ts",
+		"../src/components/dialog/index.d.ts",
+		"../src/components/form/index.d.ts",
+		"../src/components/toaster/index.d.ts",
+		"../src/ui/range/index.d.ts",
+		"../src/utilities/ripple/index.d.ts",
+		"../src/utilities/swap/index.d.ts"
+	],
+	"sourcesContent": [
+		null,
+		null,
+		null,
+		null,
+		null,
+		null,
+		null,
+		null,
+		null
+	],
+	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;;;;;kBCtBTC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;kBCRZC,aAAaA;;;;kBAIbL,cAAcA;;;;;;;kBAOdM,mBAAmBA;;;;;;;kBAOnBC,kBAAkBA;;;;;cAKtBN,cAAcA;iBACXO,cAAcA;iBACdC,aAAaA;iBACbC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;iBACZC,WAAWA;;;;kBC7BVC,mBAAmBA;;;;;;kBAMnBC,oBAAoBA;;;;;;;;;;;;;;;;;;iBAkBrBC,YAAYA;iBACZC,aAAaA;;;;kBCzBZC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;kBAKjBC,oBAAoBA;;;;kBAIpBC,kBAAkBA;;;;;;;;;iBASnBC,UAAUA;iBACVC,SAASA;iBACTC,aAAaA;iBACbC,WAAWA;iBACXC,YAAYA;;;;kBC7BXC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;iBClBdC,UAAUA;;;;iBCAVC,UAAUA"
+}

package/src/components/compare/types/index.d.ts

@@ -1,17 +0,0 @@
-export interface Position {
-    currentTarget: HTMLInputElement | EventTarget
-}
-
-export interface KeyboardStep {
-    currentTarget: HTMLInputElement | EventTarget
-    key: string
-}
-
-export interface MouseStep {
-    currentTarget: HTMLInputElement | EventTarget
-}
-
-export interface PositionOptions {
-    selector?: string
-    positionProperty?: string
-}

package/src/components/details/types/index.d.ts

@@ -1,4 +0,0 @@
-export interface DefaultDetailsOptions {
-    selector?: string
-    summarySelector?: string
-}

package/src/components/dialog/types/index.d.ts

@@ -1,22 +0,0 @@
-export interface DialogElement extends HTMLDialogElement {
-    _dialogHasEvents: boolean
-}
-
-export interface DefaultOptions {
-    remove?: boolean | null
-    closable?: boolean | null
-    openClass?: string
-    scrollbarWidthProperty?: string
-}
-
-export interface InsertOptions {
-    selector?: string | null
-    class?: string | null
-    append?: boolean | null
-    show?: DefaultOptions
-}
-
-export interface FetchOptions {
-    url: string
-    insert?: InsertOptions
-}

package/src/components/toaster/types/index.d.ts

@@ -1,25 +0,0 @@
-export interface ShowToastOptions {
-    visibleClass?: string
-    autoHide?: number | null
-    heightProperty?: string
-    close?: CloseToastOptions
-}
-
-export interface CloseToastOptions {
-    hiddenClass?: string
-    heightProperty?: string
-}
-
-export interface InsertToasterOptions {
-    classes?: string
-}
-
-export interface InsertToastOptions {
-    classes?: string
-    title?: string
-    text?: string
-    start?: string
-    end?: string
-    show?: ShowToastOptions
-}
-

package/src/ui/range/types/index.d.ts

@@ -1,16 +0,0 @@
-export interface DefaultOptions {
-    selector?: string
-    track?: 'start' | 'end'
-}
-
-export interface OutputOptions {
-    element?: HTMLOutputElement
-    lang?: string
-    formatOptions?: Intl.NumberFormatOptions
-}
-
-export interface TrackOptions {
-    element: HTMLElement | Element
-    value: string
-    max?: number
-}