@flightlesslabs/dodo-ui 0.8.0 → 0.9.0

package/dist/stories/components/Form/PasswordInput/Events/Events.stories.svelte

@@ -31,7 +31,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: PasswordInputToggleEvent` -->
 <Story
   name="Toggle"
   args={{
@@ -43,7 +42,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputFocusEvent` -->
 <Story
   name="Focus"
   args={{
@@ -55,7 +53,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputFocusEvent` -->
 <Story
   name="Blur"
   args={{
@@ -67,7 +64,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Copy"
   args={{
@@ -79,7 +75,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Cut"
   args={{
@@ -91,7 +86,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Paste"
   args={{
@@ -102,3 +96,30 @@ const { Story } = defineMeta({
     },
   }}
 />
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -5,21 +5,19 @@
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
 import { DynamicInput } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 let toggle = $state(passwordToggleState);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPasswordToggleIconTyped = customPasswordToggleIcon;
 function onfocusMod(e) {
     const eTyped = e;
-    focused = true;
     if (onfocus) {
         onfocus(eTyped);
     }
 }
 function onblurMod(e) {
     const eTyped = e;
-    focused = false;
     if (onblur) {
         onblur(eTyped);
     }
@@ -51,6 +49,7 @@ function ontoggleMod(e) {
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -58,6 +57,9 @@ function ontoggleMod(e) {
       {onpaste}
       {oncopy}
       {oncut}
+      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
       {placeholder}
       bind:value
       {readonly}

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentSize } from '../../../../types/size.js';
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
 export type PasswordInputToggleEvent = {
     event: Event;
     toggle: boolean;
@@ -57,6 +57,12 @@ export interface PasswordInputProps {
     oncut?: ClipboardEventHandler<HTMLInputElement>;
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
 }
 declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "ref" | "value" | "passwordToggleState">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/stories/components/Form/Select/Events/Events.stories.svelte

@@ -136,3 +136,30 @@ let value = $state(options[0]);
     },
   }}
 />
+
+<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/components/Form/Select/Select.svelte

@@ -5,7 +5,7 @@
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import Icon from '@iconify/svelte';
 import { DynamicInput, DynamicMenu, Popper, } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, oninput, onselect, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value, placeholder, ref = $bindable(), readonly = false, searchable = false, clearable = false, onclear, options: optionsRaw, customInputContent: customInputContentInternal, customMenuItemContent: customMenuItemContentInternal, customPopupContent: customPopupContentInternal, customPlaceholderMenuItemContent: customPlaceholderMenuItemContentInternal, customDropdownArrowIcon: customDropdownArrowIconInternal, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', dropdownArrowPosition = 'after', popupPositionX, popupPositionY, lockPoistions, popperHeightForVerticalPosition, } = $props();
 function convertOptionsToDynamicMenuItemOptions(options) {
     const newOptions = options.map((option) => ({
         id: `opt-${option.value}`,
@@ -170,6 +170,9 @@ function onKeyBoardEnter(e, selectedItemIndex) {
           {onpaste}
           {oncopy}
           {oncut}
+          {onkeydown}
+          {onkeypress}
+          {onkeyup}
           {placeholder}
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}

package/dist/stories/components/Form/Select/Select.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentSize } from '../../../../types/size.js';
 import type { ComponentRoundness } from '../../../../types/roundness.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 SelectOption = {
     value: string | number | boolean | null | undefined;
     label: string;
@@ -63,6 +63,12 @@ export interface SelectProps {
     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?: (val: SelectOption) => Snippet;
     /** custom Content Formatting for variant button */

package/dist/stories/components/Form/TextInput/Events/Events.stories.svelte

@@ -90,3 +90,30 @@ const { Story } = defineMeta({
     },
   }}
 />
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/components/Form/TextInput/TextInput.svelte

@@ -10,18 +10,16 @@
 
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
 import DynamicInput, {} from '../../../developer tools/components/DynamicInput/DynamicInput.svelte';
-let { type = 'text', size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
+let { type = 'text', size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
     const eTyped = e;
-    focused = true;
     if (onfocus) {
         onfocus(eTyped);
     }
 }
 function onblurMod(e) {
     const eTyped = e;
-    focused = false;
     if (onblur) {
         onblur(eTyped);
     }
@@ -42,6 +40,7 @@ function onblurMod(e) {
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -49,6 +48,9 @@ function onblurMod(e) {
       {onpaste}
       {oncopy}
       {oncut}
+      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
       {placeholder}
       bind:value
       {readonly}

package/dist/stories/components/Form/TextInput/TextInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
 export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
 export declare const textInputTypeArray: TextInputType[];
 export type TextInputFocusEvent = FocusEvent & {
@@ -13,6 +13,9 @@ export type TextInputClipboardEvent = ClipboardEvent & {
 export type TextInputInputEvent = Event & {
     currentTarget: EventTarget & HTMLInputElement;
 };
+export type TextInputKeyboardEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+};
 export interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
@@ -58,6 +61,12 @@ export interface TextInputProps {
     oncopy?: ClipboardEventHandler<HTMLInputElement>;
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
 }
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "ref" | "value">;
 type TextInput = ReturnType<typeof TextInput>;

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

@@ -36,7 +36,7 @@ function onKeyboardNavigation(e) {
         }
         return;
     }
-    else if (keyHit === 'Esc') {
+    else if (keyHit === 'Escape') {
         if (onEsc) {
             onEsc(e, menuItemIndex);
         }

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,8 +40,11 @@ function onclickMod(e) {
     ].join(' ')}
     bind:this={ref}
     onclick={onclickMod}
-    {onfocus}
-    {onblur}
+    {onkeydown}
+    {onkeypress}
+    {onkeyup}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
     {disabled}
   >
     {#if customInputContentTyped}
@@ -47,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('');
+    }
+}

package/dist/stories/developer tools/helpers/Numbers/cleanNumericString/index.mdx

@@ -0,0 +1,20 @@
+import { Source } from '@storybook/blocks';
+
+# cleanNumericString
+
+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.
+
+---
+
+## Basic Usage
+
+<Source
+  dark
+  language="ts"
+  code={`
+import { cleanNumericString } from '@flightlesslabs/dodo-ui';
+
+const result = cleanNumericString("abc123.45.67def"); // result === "123.4567"
+`}
+/>