@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

package/dist/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import Menu from '../Menu.svelte';
+import { MenuItem } from '../../../../../index.js';
+let { id, class: className = '', ref = $bindable(), size, separator, width, height, options, selectedOption, customMenuItemContent, customPlaceholderMenuItemContent, menuItemProps, keyboardNavigation = false, onEnter, onEsc, onclick, showOptionsPlaceholder = false, optionsPlaceholder = 'No options found', } = $props();
+let menuItemIndex = $state(0);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customMenuItemContentTyped = customMenuItemContent;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContent;
+function onKeyboardNavigation(e) {
+    let keyHit = undefined;
+    if (!ref) {
+        return;
+    }
+    switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+            keyHit = e.key;
+            e.preventDefault();
+            break;
+        case 'Enter':
+        case 'Esc':
+            keyHit = e.key;
+            break;
+        default:
+            break;
+    }
+    if (!keyHit) {
+        return;
+    }
+    if (keyHit === 'Enter') {
+        if (onEnter) {
+            onEnter(e, menuItemIndex);
+        }
+        return;
+    }
+    else if (keyHit === 'Escape') {
+        if (onEsc) {
+            onEsc(e, menuItemIndex);
+        }
+        return;
+    }
+    const listItems = ref.querySelectorAll(':scope > li.dodo-ui-MenuItem');
+    if (!listItems.length) {
+        return;
+    }
+    for (let index = 0; index < listItems.length; index++) {
+        const element = listItems[index];
+        element.classList.remove('hover');
+    }
+    let newMenuItemIndex = menuItemIndex;
+    if (keyHit === 'ArrowDown') {
+        if (listItems[newMenuItemIndex + 1]) {
+            newMenuItemIndex = newMenuItemIndex + 1;
+        }
+        else {
+            newMenuItemIndex = 0;
+        }
+    }
+    else if (keyHit === 'ArrowUp') {
+        if (listItems[newMenuItemIndex - 1]) {
+            newMenuItemIndex = newMenuItemIndex - 1;
+        }
+        else {
+            newMenuItemIndex = listItems.length - 1;
+        }
+    }
+    const targetItem = listItems[newMenuItemIndex];
+    targetItem.classList.add('hover');
+    targetItem.focus();
+    targetItem.scrollIntoView({ block: 'nearest' });
+    menuItemIndex = newMenuItemIndex;
+}
+$effect(() => {
+    if (!keyboardNavigation) {
+        return;
+    }
+    const targetItem = ref.querySelector(':scope > li.dodo-ui-MenuItem.selected');
+    if (targetItem) {
+        const selectedIndex = options?.findIndex((option) => option.id === selectedOption?.id);
+        if (selectedIndex !== undefined && selectedIndex >= 0) {
+            menuItemIndex = selectedIndex;
+        }
+        targetItem.focus();
+        targetItem.scrollIntoView({ block: 'nearest' });
+    }
+    window.addEventListener('keydown', onKeyboardNavigation);
+    return () => {
+        window.removeEventListener('keydown', onKeyboardNavigation);
+    };
+});
+</script>
+
+<Menu
+  class={['dodo-ui-DynamicMenu', className].join(' ')}
+  {id}
+  {size}
+  {width}
+  {height}
+  {separator}
+  bind:ref
+>
+  {#if options?.length}
+    {#each options as option (option.id)}
+      <MenuItem
+        {...option}
+        selected={selectedOption?.id === option.id}
+        onclick={(e) => (onclick ? onclick(e, option) : undefined)}
+        {...menuItemProps}
+      >
+        {#if customMenuItemContentTyped}
+          {@render customMenuItemContentTyped(option, selectedOption)}
+        {:else}
+          {option.label || ''}
+        {/if}
+      </MenuItem>
+    {/each}
+  {:else if showOptionsPlaceholder}
+    <MenuItem type="text" disabled={true} {...menuItemProps}>
+      {#if customPlaceholderMenuItemContentTyped}
+        {@render customPlaceholderMenuItemContentTyped()}
+      {:else}
+        {optionsPlaceholder}
+      {/if}
+    </MenuItem>
+  {/if}
+</Menu>

package/dist/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte.d.ts

@@ -0,0 +1,81 @@
+import type { ComponentSize } from '../../../../../types/size.js';
+import type { MenuItemProps, MenuItemType } from '../MenuItem/MenuItem.svelte';
+export type DynamicMenuItemOption<TMeta = unknown> = {
+    id: string;
+    /** label  */
+    label?: string;
+    /** Custom Metadata  */
+    meta?: TMeta;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+};
+export interface DynamicMenuProps {
+    /** Menu ref */
+    ref?: HTMLUListElement;
+    /** Custom css class */
+    class?: string;
+    /** Menu Width */
+    width?: string;
+    /** Menu Height */
+    height?: string;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** Menu Separator */
+    separator?: boolean;
+    /** Id */
+    id?: string;
+    /** Options */
+    options?: DynamicMenuItemOption[];
+    /** Selected Option */
+    selectedOption?: DynamicMenuItemOption;
+    /** Custom Menu Item Content */
+    customMenuItemContent?: (option: DynamicMenuItemOption, selectedOption?: DynamicMenuItemOption) => Snippet;
+    /** Show Placeholder if no options */
+    showOptionsPlaceholder?: boolean;
+    /** placeholder Text if no options */
+    optionsPlaceholder?: string;
+    /** Custom Menu Item Placeholder Content */
+    customPlaceholderMenuItemContent?: () => Snippet;
+    /** MenuItem: Menu component props */
+    menuItemProps?: Partial<MenuItemProps>;
+    /** Enable Keyboard Navigation */
+    keyboardNavigation?: boolean;
+    /** Keyboard Navigation onEnter */
+    onEnter?: (e: KeyboardEvent, menuItemIndex: number) => void;
+    /** Keyboard Navigation onEsc */
+    onEsc?: (e: KeyboardEvent, menuItemIndex: number) => void;
+    /** On menu item click */
+    onclick?: (e: MouseEvent, option: DynamicMenuItemOption) => void;
+}
+import type { MouseEventHandler } from 'svelte/elements';
+import type { ButtonLinkReferrerpolicy, ButtonLinkTarget } from '../../../Form/Button/Button.svelte';
+import type { Snippet } from 'svelte';
+declare const DynamicMenu: import("svelte").Component<DynamicMenuProps, {}, "ref">;
+type DynamicMenu = ReturnType<typeof DynamicMenu>;
+export default DynamicMenu;

package/dist/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte

@@ -0,0 +1,46 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { dynamicMenuItemOptions, storyDynamicMenuArgTypes } from '../DynamicMenu.stories.svelte';
+import DynamicMenu, {} from '../DynamicMenu.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+});
+</script>
+
+<!-- Menu Item onclick -->
+<Story name="onclick" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onclick={(e: MouseEvent, option: DynamicMenuItemOption) => {
+      e.preventDefault();
+      console.log(option);
+    }}
+  />
+</Story>
+
+<!-- KeyboardNavigation Event: onEnter  -->
+<Story name="onEnter" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onEnter={(e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    }}
+  />
+</Story>
+
+<!-- KeyboardNavigation Event: onEsc  -->
+<Story name="onEsc" asChild>
+  <DynamicMenu
+    keyboardNavigation
+    options={dynamicMenuItemOptions}
+    onEsc={(e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    }}
+  />
+</Story>

package/dist/stories/components/Layout/Menu/DynamicMenu/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DynamicMenu from '../DynamicMenu.svelte';
+import { dynamicMenuItemOptions, storyDynamicMenuArgTypes } from '../DynamicMenu.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+});
+</script>
+
+<!-- KeyboardNavigationOn -->
+<Story
+  name="KeyboardNavigationOn"
+  args={{
+    options: dynamicMenuItemOptions,
+    keyboardNavigation: true,
+    onEnter: (e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    },
+    onEsc: (e: KeyboardEvent, menuItemIndex: number) => {
+      e.preventDefault();
+      console.log(menuItemIndex);
+    },
+  }}
+/>

package/dist/stories/components/Layout/Menu/DynamicMenu/KeybaordNavigation/KeybaordNavigation.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const KeybaordNavigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type KeybaordNavigation = InstanceType<typeof KeybaordNavigation>;
+export default KeybaordNavigation;

package/dist/stories/components/Layout/Menu/DynamicMenu/Options/OptionFormat.mdx

@@ -0,0 +1,72 @@
+import { Source } from '@storybook/blocks';
+
+# Option Format
+
+## DynamicMenuItemOption
+
+<Source
+  dark
+  language="ts"
+  code={`
+type DynamicMenuItemOption<TMeta = unknown> = {
+    id: string;
+    /** label  */
+    label?: string;
+    /** Custom Metadata  */
+    meta?: TMeta;
+    /** Menu Item type */
+    type?: MenuItemType;
+    /** Menu Separator */
+    separator?: boolean;
+    /** How large should the Menu Items be? */
+    size?: ComponentSize;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /**  disabled state */
+    disabled?: boolean;
+    /** link href */
+    href?: string;
+    /** Link button: download  */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    download?: any;
+    /** Link button: hreflang  */
+    hreflang?: string | undefined | null;
+    /** Link button: media  */
+    media?: string | undefined | null;
+    /** Link button: ping  */
+    ping?: string | undefined | null;
+    /** Link button: rel  */
+    rel?: string | undefined | null;
+    /** Link button: target  */
+    target?: ButtonLinkTarget;
+    /** Link button: Type  */
+    anchorMediaType?: string | undefined | null;
+    /** Link button: referrerpolicy  */
+    referrerpolicy?: ButtonLinkReferrerpolicy;
+  };
+`}
+/>
+
+## Example values
+
+<Source
+  dark
+  language="ts"
+  code={`
+const options: DynamicMenuItemOption[] = [
+   {
+    id: '1',
+    label: 'One',
+  },
+  {
+    id: '2',
+    label: 'Two',
+  },
+  {
+    id: '3',
+    label: 'Three',
+    disabled: true,
+  },
+];
+`}
+/>

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.svelte.d.ts

@@ -14,7 +14,7 @@ export interface MenuItemProps {
     id?: string;
     /** Menu Item type */
     type?: MenuItemType;
-    /** Menu Item type */
+    /** selected */
     selected?: boolean;
     /** Separator */
     separator?: boolean;

package/dist/stories/developer tools/components/DynamicInput/DynamicInput.svelte

@@ -3,7 +3,7 @@ export const dynamicInputVariantArray = ['input', 'button'];
 </script>
 
 <script lang="ts">"use strict";
-let { type = 'text', name, id, class: className = '', disabled = false, onchange, oninput, onblur, onfocus, onpaste, oncopy, oncut, value = $bindable(), placeholder, ref = $bindable(), readonly = false, variant = 'input', size = 'normal', onclick, customInputContent, } = $props();
+let { type = 'text', name, id, class: className = '', disabled = false, onchange, oninput, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, value = $bindable(), focused = $bindable(), placeholder, ref = $bindable(), readonly = false, variant = 'input', size = 'normal', onclick, customInputContent, } = $props();
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customInputContentTyped = customInputContent;
 function onclickMod(e) {
@@ -14,6 +14,18 @@ function onclickMod(e) {
         onclick(e);
     }
 }
+function onfocusMod(e) {
+    focused = true;
+    if (onfocus) {
+        onfocus(e);
+    }
+}
+function onblurMod(e) {
+    focused = false;
+    if (onblur) {
+        onblur(e);
+    }
+}
 </script>
 
 {#if variant === 'button'}
@@ -28,7 +40,11 @@ function onclickMod(e) {
     ].join(' ')}
     bind:this={ref}
     onclick={onclickMod}
-    {onblur}
+    {onkeydown}
+    {onkeypress}
+    {onkeyup}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
     {disabled}
   >
     {#if customInputContentTyped}
@@ -46,11 +62,14 @@ function onclickMod(e) {
     {disabled}
     {oninput}
     {onchange}
-    {onfocus}
-    {onblur}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
     {onpaste}
     {oncopy}
     {oncut}
+    {onkeydown}
+    {onkeypress}
+    {onkeyup}
     {placeholder}
     bind:value
     bind:this={ref}

package/dist/stories/developer tools/components/DynamicInput/DynamicInput.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentSize, type TextInputType } from '../../../../index.js';
 import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, MouseEventHandler } from 'svelte/elements';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
 export type DynamicInputVariant = 'input' | 'button';
 export declare const dynamicInputVariantArray: DynamicInputVariant[];
 export type DynamicInputClickEvent = MouseEvent & {
@@ -9,6 +9,9 @@ export type DynamicInputClickEvent = MouseEvent & {
 export type DynamicInputFocusEvent = FocusEvent & {
     currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
 };
+export type DynamicInputKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
+};
 export interface DynamicInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -18,6 +21,8 @@ export interface DynamicInputProps {
     ref?: HTMLInputElement | HTMLButtonElement;
     /** Input value */
     value?: string | number;
+    /** is focused, set focused */
+    focused?: boolean;
     /** variant */
     variant?: DynamicInputVariant;
     /** How round should the border radius be? */
@@ -52,9 +57,15 @@ export interface DynamicInputProps {
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (value: string | number) => Snippet;
 }
-declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "ref" | "value">;
+declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "ref" | "focused" | "value">;
 type DynamicInput = ReturnType<typeof DynamicInput>;
 export default DynamicInput;

package/dist/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte

@@ -0,0 +1,115 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
+import DynamicInput, {} from '../DynamicInput.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DynamicInput,
+    tags: ['autodocs'],
+    argTypes: storyDynamicInputArgTypes,
+    args: { value: 'Hello world!' },
+});
+</script>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/developer tools/components/DynamicInput/Events/Events.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Cleans the input string by removing all characters except numeric digits (0-9) and a single decimal point.
+ * Only the first decimal point is retained; all subsequent dots are removed.
+ *
+ * @param {string} input - The input string to be cleaned.
+ * @returns {string} - A string containing only digits and at most one decimal point.
+ *
+ * @example
+ * cleanNumericString("abc123.45.67def"); // returns "123.4567"
+ * cleanNumericString("a1b2c3");          // returns "123"
+ * cleanNumericString("...12.3.4..5");    // returns "12.345"
+ */
+export default function cleanNumericString(input: string): string;

package/dist/stories/developer tools/helpers/Numbers/cleanNumericString/cleanNumericString.js

@@ -0,0 +1,26 @@
+/**
+ * Cleans the input string by removing all characters except numeric digits (0-9) and a single decimal point.
+ * Only the first decimal point is retained; all subsequent dots are removed.
+ *
+ * @param {string} input - The input string to be cleaned.
+ * @returns {string} - A string containing only digits and at most one decimal point.
+ *
+ * @example
+ * cleanNumericString("abc123.45.67def"); // returns "123.4567"
+ * cleanNumericString("a1b2c3");          // returns "123"
+ * cleanNumericString("...12.3.4..5");    // returns "12.345"
+ */
+export default function cleanNumericString(input) {
+    // Remove all characters except digits and dots
+    const filtered = input.replace(/[^0-9.]/g, '');
+    // Split by dot to separate parts
+    const parts = filtered.split('.');
+    if (parts.length === 1) {
+        // No dot present, just digits
+        return parts[0];
+    }
+    else {
+        // Keep only first dot, join the rest parts without dots
+        return parts[0] + '.' + parts.slice(1).join('');
+    }
+}