tera-system-ui 0.0.2 → 0.0.5

package/dist/components/popover-responsive/PopoverResponsive.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
+type PopoverResponsiveVariants = VariantProps<typeof styles>;
+export interface PopoverResponsiveProps extends PopoverResponsiveVariants {
+    children?: any;
+    class?: string;
+}
+export {};

package/dist/components/popover-responsive/PopoverResponsive.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import {type PopoverResponsiveProps} from "./PopoverResponsive";
+    import {Dialog, Popover} from "../..";
+    import {onMount} from "svelte";
+    import {getScreenWidth, SCREEN_BREAK_POINTS} from "../side-navigation/SideNavigation";
+
+    let {
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
+        offset = 3,
+        popoverPadding = 12,
+        focusTriggerAfterClose = true,
+        flip = false,
+        ...props
+    }: PopoverResponsiveProps & {
+        dialogPadding?: string,
+        popoverPadding?: number,
+        offset?: number,
+        open?: boolean,
+        focusTriggerAfterClose?: boolean,
+        flip?: boolean,
+        triggerRef?: HTMLElement,
+    } = $props();
+
+    let openPopover = $state(false)
+    let openDialog = $state(false)
+
+    $effect(() => {
+        open = openPopover || openDialog
+    })
+
+    $effect(() => {
+        toggleOpen(open)
+    })
+
+    function toggleOpen(open?: boolean) {
+        if (getScreenWidth() >= SCREEN_BREAK_POINTS.sm) {
+            if (open === undefined) {
+                openPopover = !(openDialog || openPopover)
+            } else {
+                openPopover = open
+            }
+            openDialog = false
+        } else {
+            if (open === undefined) {
+                openDialog = !(openDialog || openPopover)
+            } else {
+                openDialog = open
+            }
+            openPopover = false
+        }
+
+        console.log('toggleOpen Responsive Popover', open)
+    }
+
+    onMount(() => {
+        triggerRef?.addEventListener('click', () => {
+            toggleOpen()
+        })
+    })
+</script>
+
+
+<Popover bind:open={openPopover}
+         triggerRef={triggerRef}
+         autoTrigger={false}
+         padding={popoverPadding}
+         focusTriggerAfterClose={focusTriggerAfterClose}
+         offset={offset}
+         flip={flip}
+         class={className}
+         {...props}
+>
+    {@render children?.()}
+</Popover>
+
+<Dialog bind:open={openDialog}
+        position="top"
+        padding="none"
+        class={className}
+        triggerRef={triggerRef}
+        focusTriggerAfterClose={focusTriggerAfterClose}
+>
+    {@render children?.()}
+</Dialog>

package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type PopoverResponsiveProps } from "./PopoverResponsive";
+declare const PopoverResponsive: import("svelte").Component<PopoverResponsiveProps & {
+    dialogPadding?: string;
+    popoverPadding?: number;
+    offset?: number;
+    open?: boolean;
+    focusTriggerAfterClose?: boolean;
+    flip?: boolean;
+    triggerRef?: HTMLElement;
+}, {}, "open">;
+export default PopoverResponsive;

package/dist/components/popover-responsive/index.d.ts

@@ -0,0 +1 @@
+export { default as PopoverResponsive } from './PopoverResponsive.svelte';

package/dist/components/popover-responsive/index.js

@@ -0,0 +1 @@
+export { default as PopoverResponsive } from './PopoverResponsive.svelte';

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -5,7 +5,7 @@ export interface SideNavigationProps extends SideNavigationVariants {
     children?: any;
     class?: string;
 }
-export declare const BEAK_POINTS: {
+export declare const SCREEN_BREAK_POINTS: {
     sm: number;
     md: number;
     lg: number;
@@ -14,5 +14,6 @@ export declare const BEAK_POINTS: {
 export declare const mainLayout: () => HTMLElement | null;
 export declare const getSideNavState: () => string | undefined;
 export declare const setSideNavState: (state: any) => void;
+export declare function getScreenWidth(): number;
 export declare function toggleSideNavigation(): void;
 export {};

package/dist/components/side-navigation/SideNavigation.js

@@ -5,7 +5,7 @@ export const styles = tv({
     compoundVariants: [],
     defaultVariants: {},
 });
-export const BEAK_POINTS = {
+export const SCREEN_BREAK_POINTS = {
     sm: 640,
     md: 768,
     lg: 1024,
@@ -16,7 +16,6 @@ export const getSideNavState = () => {
     return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
 };
 export const setSideNavState = (state) => {
-    console.log(mainLayout());
     if (state !== undefined) {
         mainLayout()?.setAttribute('data-side-nav-state', state);
     }
@@ -24,17 +23,20 @@ export const setSideNavState = (state) => {
         mainLayout()?.removeAttribute('data-side-nav-state');
     }
 };
+export function getScreenWidth() {
+    return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
 export function toggleSideNavigation() {
-    let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    let screenWidth = getScreenWidth();
     let currentSideNavState = getSideNavState();
     let state;
-    if (screenWidth < BEAK_POINTS.md) {
+    if (screenWidth < SCREEN_BREAK_POINTS.md) {
         state = currentSideNavState == undefined ? "expand" : undefined;
     }
-    else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+    else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState == undefined ? "expand" : undefined;
     }
-    else if (screenWidth >= BEAK_POINTS.xl) {
+    else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState == undefined ? "compact" : undefined;
     }
     setSideNavState(state);

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
     import {
-        BEAK_POINTS,
+        SCREEN_BREAK_POINTS,
         mainLayout,
         setSideNavState,
         type SideNavigationProps,
         toggleSideNavigation
     } from "./SideNavigation";
-    import {clickOutside} from "./clickOutside"
+    import {clickOutside} from "../../actions/clickOutside"
     import {Button} from "../button";
     import {IconHamburger} from "../icons";
     import {BrandLogo} from "../brand-logo";
@@ -16,6 +16,8 @@
     import IconCalculator from "../icons/IconCalculator.svelte";
     import {LightDarkToggle} from "../light-dark-toggle";
 
+    import {getGlobalContext} from "../tera-ui-context/global-context";
+
     let {children, ...props}: SideNavigationProps = $props();
 
     let temporaryExpand: any = undefined
@@ -23,11 +25,11 @@
 
     function handleClickOutside() {
         let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        if (screenWidth < BEAK_POINTS.md) {
+        if (screenWidth < SCREEN_BREAK_POINTS.md) {
             setSideNavState(undefined)
-        } else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
             setSideNavState(undefined)
-        } else if (screenWidth >= BEAK_POINTS.xl) {
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
 
         }
     }
@@ -42,6 +44,34 @@
         }
     }
 
+    let globalContext = getGlobalContext()
+
+
+
+    function isSelected(href: string) {
+        const pathname = globalContext?.sideNavHref
+        return pathname?.startsWith(href)
+    }
+
+
+
+    const NAV_ITEM = [
+        {
+            href: '/calculator',
+            icon: IconCalculator,
+            title: 'CalcES Scientific Calculator',
+        },
+        {
+            href: '/convert',
+            icon: IconTransform,
+            title: 'Unit Converter',
+        },
+        {
+            href: '/docs/calculator-usages/calces',
+            icon: IconBook,
+            title: 'CalcES Documentation',
+        },
+    ]
 </script>
 
 <nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
@@ -49,7 +79,7 @@
      onclick_outside={handleClickOutside}
 >
     <div class="flex mt-2 gap-1 items-center">
-        <Button variant="ghost" class="ring-0 focus:ring-0"
+        <Button variant="ghost" ring={false}
                 onclick={toggleSideNavigation}
         >
             <IconHamburger/>
@@ -66,24 +96,14 @@
                 handleHover(false)
              }}
     >
-        <SideNavItem href="/calculator" class="selected">
-            {#snippet icon()}
-                <IconCalculator/>
-            {/snippet}
-            CalcES Scientific Calculator
-        </SideNavItem>
-        <SideNavItem href="/convert" class="">
-            {#snippet icon()}
-                <IconTransform/>
-            {/snippet}
-            Unit Converter
-        </SideNavItem>
-        <SideNavItem href="/docs/calculator-usages/calces">
-            {#snippet icon()}
-                <IconBook/>
-            {/snippet}
-            CalcES Documentation
-        </SideNavItem>
+        {#each NAV_ITEM as item}
+            <SideNavItem href={item.href} class={isSelected(item.href) ? 'selected' : ''}>
+                {#snippet icon()}
+                    <item.icon/>
+                {/snippet}
+                {item.title}
+            </SideNavItem>
+        {/each}
     </ul>
     <div>
         <div class="w-[3rem] mb-8 flex justify-center">

package/dist/components/tera-ui-context/TeraUiContext.d.ts

@@ -0,0 +1,11 @@
+import type { AvailableLanguageTag } from "../../i18n/language";
+export type TeraUiContext = {
+    basePath?: string;
+    supportLanguages?: AvailableLanguageTag[];
+    language?: AvailableLanguageTag;
+    sideNavHref?: string;
+};
+export interface TeraUiContextProps extends TeraUiContext {
+    children?: any;
+    class?: string;
+}

package/dist/components/tera-ui-context/TeraUiContext.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {type TeraUiContextProps} from "./TeraUiContext";
+    import {setGlobalContext} from "./global-context";
+
+
+    let {
+        children,
+        supportLanguages = ['en'],
+        language = 'en',
+        ...props
+    }: TeraUiContextProps = $props();
+
+
+    setGlobalContext({
+        supportLanguages,
+        language,
+        ...props
+    })
+</script>
+
+{@render children()}

package/dist/components/tera-ui-context/TeraUiContext.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type TeraUiContextProps } from "./TeraUiContext";
+declare const TeraUiContext: import("svelte").Component<TeraUiContextProps, {}, "">;
+export default TeraUiContext;

package/dist/components/tera-ui-context/global-context.d.ts

@@ -0,0 +1,3 @@
+import type { TeraUiContext } from "./TeraUiContext";
+export declare function setGlobalContext(data: TeraUiContext): void;
+export declare function getGlobalContext(): TeraUiContext;

package/dist/components/tera-ui-context/global-context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from "svelte";
+export function setGlobalContext(data) {
+    setContext('globalContext', data);
+}
+export function getGlobalContext() {
+    let context = getContext('globalContext');
+    if (!context) {
+        console.warn('tera-system-ui', 'Not set global context yet!', 'Using default context data');
+        return {
+            language: 'en',
+            supportLanguages: ['en']
+        };
+    }
+    return context;
+}

package/dist/components/tera-ui-context/index.d.ts

@@ -0,0 +1 @@
+export { default as TeraUiContext } from './TeraUiContext.svelte';

package/dist/components/tera-ui-context/index.js

@@ -0,0 +1 @@
+export { default as TeraUiContext } from './TeraUiContext.svelte';

package/dist/i18n/index.d.ts

@@ -0,0 +1 @@
+export { type AvailableLanguageTag, availableLanguageTags } from './language';

package/dist/i18n/index.js

@@ -0,0 +1 @@
+export { availableLanguageTags } from './language';

package/dist/i18n/language.d.ts

@@ -0,0 +1,2 @@
+export type AvailableLanguageTag = "de" | "en" | "es" | "fr" | "pt" | "vi" | "ru" | "it";
+export declare const availableLanguageTags: AvailableLanguageTag[];

package/dist/i18n/language.js

@@ -0,0 +1,10 @@
+export const availableLanguageTags = [
+    "de",
+    "en",
+    "es",
+    "fr",
+    "pt",
+    "vi",
+    "ru",
+    "it",
+];

package/dist/i18n.d.ts

@@ -0,0 +1 @@
+export declare const i18n: any;

package/dist/i18n.js

@@ -0,0 +1,4 @@
+// file initialized by the Paraglide-SvelteKit CLI - Feel free to edit it
+import { createI18n } from "@inlang/paraglide-sveltekit";
+import * as runtime from "./paraglide/runtime.js";
+export const i18n = createI18n(runtime);

package/dist/index.d.ts

@@ -1 +1,14 @@
-export { toggleSideNavigation } from './components/side-navigation';
+export { BrandLogo } from './components/brand-logo';
+export { Button } from './components/button';
+export { Combobox } from './components/combobox';
+export { Command } from './components/command';
+export { Dialog } from './components/dialog';
+export { Header } from './components/header';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { Input } from './components/input';
+export { LanguagePickerButton } from './components/language-picker-button';
+export { LightDarkToggle } from './components/light-dark-toggle';
+export { Popover } from './components/popover';
+export { PopoverResponsive } from './components/popover-responsive';
+export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { TeraUiContext } from './components/tera-ui-context';

package/dist/index.js

@@ -1,2 +1,14 @@
-export { toggleSideNavigation } from './components/side-navigation';
-// export { default as Button } from './components/button/Button.svelte';
+export { BrandLogo } from './components/brand-logo';
+export { Button } from './components/button';
+export { Combobox } from './components/combobox';
+export { Command } from './components/command';
+export { Dialog } from './components/dialog';
+export { Header } from './components/header';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { Input } from './components/input';
+export { LanguagePickerButton } from './components/language-picker-button';
+export { LightDarkToggle } from './components/light-dark-toggle';
+export { Popover } from './components/popover';
+export { PopoverResponsive } from './components/popover-responsive';
+export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { TeraUiContext } from './components/tera-ui-context';

package/dist/internal/command-score.d.ts

@@ -0,0 +1 @@
+export declare function commandScore(string: string, abbreviation: string): number;

package/dist/internal/command-score.js

@@ -0,0 +1,119 @@
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1, 
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+SCORE_SPACE_WORD_JUMP = 0.9, SCORE_NON_SPACE_WORD_JUMP = 0.8, 
+// Any other match isn't ideal, but we include it for completeness.
+SCORE_CHARACTER_JUMP = 0.17, 
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+SCORE_TRANSPOSITION = 0.1, 
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+PENALTY_SKIPPED = 0.999, 
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+PENALTY_CASE_MISMATCH = 0.9999, 
+// If the word has more characters than the user typed, it should
+// be penalised slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+PENALTY_NOT_COMPLETE = 0.99;
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/, COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g, IS_SPACE_REGEXP = /[\s-]/, COUNT_SPACE_REGEXP = /[\s-]/g;
+function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+    if (abbreviationIndex === abbreviation.length) {
+        if (stringIndex === string.length) {
+            return SCORE_CONTINUE_MATCH;
+        }
+        return PENALTY_NOT_COMPLETE;
+    }
+    const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+    if (memoizedResults[memoizeKey] !== undefined) {
+        return memoizedResults[memoizeKey];
+    }
+    const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+    let index = lowerString.indexOf(abbreviationChar, stringIndex);
+    let highScore = 0;
+    let score, transposedScore, wordBreaks, spaceBreaks;
+    while (index >= 0) {
+        score = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
+        if (score > highScore) {
+            if (index === stringIndex) {
+                score *= SCORE_CONTINUE_MATCH;
+            }
+            else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+                score *= SCORE_NON_SPACE_WORD_JUMP;
+                wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+                if (wordBreaks && stringIndex > 0) {
+                    score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
+                }
+            }
+            else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+                score *= SCORE_SPACE_WORD_JUMP;
+                spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+                if (spaceBreaks && stringIndex > 0) {
+                    score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
+                }
+            }
+            else {
+                score *= SCORE_CHARACTER_JUMP;
+                if (stringIndex > 0) {
+                    score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
+                }
+            }
+            if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+                score *= PENALTY_CASE_MISMATCH;
+            }
+        }
+        if ((score < SCORE_TRANSPOSITION &&
+            lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+            (lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+                lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428
+                lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))) {
+            transposedScore = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
+            if (transposedScore * SCORE_TRANSPOSITION > score) {
+                score = transposedScore * SCORE_TRANSPOSITION;
+            }
+        }
+        if (score > highScore) {
+            highScore = score;
+        }
+        index = lowerString.indexOf(abbreviationChar, index + 1);
+    }
+    memoizedResults[memoizeKey] = highScore;
+    return highScore;
+}
+function formatInput(string) {
+    // convert all valid space characters to space so they match each other
+    return string.toLowerCase().replace(COUNT_SPACE_REGEXP, ' ');
+}
+export function commandScore(string, abbreviation) {
+    /* NOTE:
+     * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase()
+     * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster.
+     */
+    return commandScoreInner(string, abbreviation, formatInput(string), formatInput(abbreviation), 0, 0, {});
+}

package/dist/internal/helpers/callbacks.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A callback function that takes an array of arguments of type `T` and returns `void`.
+ * @template T The types of the arguments that the callback function takes.
+ */
+export type Callback<T extends unknown[] = unknown[]> = (...args: T) => void;
+/**
+ * Executes an array of callback functions with the same arguments.
+ * @template T The types of the arguments that the callback functions take.
+ * @param n array of callback functions to execute.
+ * @returns A new function that executes all of the original callback functions with the same arguments.
+ */
+export declare function executeCallbacks<T extends unknown[]>(...callbacks: Array<Callback<T>>): (...args: T) => void;

package/dist/internal/helpers/callbacks.js

@@ -0,0 +1,15 @@
+/**
+ * Executes an array of callback functions with the same arguments.
+ * @template T The types of the arguments that the callback functions take.
+ * @param n array of callback functions to execute.
+ * @returns A new function that executes all of the original callback functions with the same arguments.
+ */
+export function executeCallbacks(...callbacks) {
+    return (...args) => {
+        for (const callback of callbacks) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}

package/dist/internal/helpers/event.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A type alias for a general event listener function.
+ *
+ * @template E - The type of event to listen for
+ * @param evt - The event object
+ * @returns The return value of the event listener function
+ */
+export type GeneralEventListener<E = Event> = (evt: E) => unknown;
+/**
+ *  Overloaded function signatures for addEventListener
+ */
+export declare function addEventListener<E extends keyof HTMLElementEventMap>(target: Window, event: E, handler: (this: Window, ev: HTMLElementEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
+export declare function addEventListener<E extends keyof HTMLElementEventMap>(target: Document, event: E, handler: (this: Document, ev: HTMLElementEventMap[E]) => unknown, options?: boolean | AddEventListenerOptions): VoidFunction;
+export declare function addEventListener<E extends keyof HTMLElementEventMap>(target: EventTarget, event: E, handler: GeneralEventListener<HTMLElementEventMap[E]>, options?: boolean | AddEventListenerOptions): VoidFunction;

package/dist/internal/helpers/event.js

@@ -0,0 +1,17 @@
+/**
+ * Adds an event listener to the specified target element(s) for the given event(s), and returns a function to remove it.
+ * @param target The target element(s) to add the event listener to.
+ * @param event The event(s) to listen for.
+ * @param handler The function to be called when the event is triggered.
+ * @param options An optional object that specifies characteristics about the event listener.
+ * @returns A function that removes the event listener from the target element(s).
+ */
+export function addEventListener(target, event, handler, options) {
+    const events = Array.isArray(event) ? event : [event];
+    // Add the event listener to each specified event for the target element(s).
+    events.forEach((_event) => target.addEventListener(_event, handler, options));
+    // Return a function that removes the event listener from the target element(s).
+    return () => {
+        events.forEach((_event) => target.removeEventListener(_event, handler, options));
+    };
+}

package/dist/internal/helpers/id.d.ts

@@ -0,0 +1 @@
+export declare function generateId(): string;

package/dist/internal/helpers/id.js

@@ -0,0 +1,4 @@
+import { nanoid } from 'nanoid/non-secure';
+export function generateId() {
+    return nanoid(10);
+}

package/dist/internal/helpers/index.d.ts

@@ -0,0 +1,8 @@
+export * from './is.js';
+export * from './id.js';
+export * from './kbd.js';
+export * from './object.js';
+export * from './store.js';
+export * from './style.js';
+export * from './event.js';
+export * from './callbacks.js';

package/dist/internal/helpers/index.js

@@ -0,0 +1,8 @@
+export * from './is.js';
+export * from './id.js';
+export * from './kbd.js';
+export * from './object.js';
+export * from './store.js';
+export * from './style.js';
+export * from './event.js';
+export * from './callbacks.js';