@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

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

@@ -4,26 +4,35 @@
 <script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import Icon from '@iconify/svelte';
-import { DynamicInput, Menu, MenuItem, 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, popupMaxHeight = '300px', paperProps, popperProps, menuProps, menuItemProps, optionsPlaceholder = 'No Options', } = $props();
+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, 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}`,
+        disabled: option.disabled,
+        label: option.label,
+        meta: option,
+        type: 'button',
+    }));
+    return newOptions;
+}
 let open = $state(false);
 let onInputStart = $state(false);
 const selectedOption = $derived(value);
 let searchTerm = $state(value?.label.trim() || '');
-let options = $state(optionsRaw);
+let options = $state(convertOptionsToDynamicMenuItemOptions(optionsRaw));
 let menuRef = $state(undefined);
-let menuItemIndex = $state(0);
 $effect(() => {
     if (!onInputStart) {
-        options = optionsRaw;
+        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
         return;
     }
     const searchTermSimplified = searchTerm.trim().toLowerCase();
     if (!searchTermSimplified) {
-        options = optionsRaw;
+        options = convertOptionsToDynamicMenuItemOptions(optionsRaw);
         return;
     }
-    options = optionsRaw.filter((item) => item.label.trim().toLowerCase().includes(searchTermSimplified));
+    options = convertOptionsToDynamicMenuItemOptions(optionsRaw).filter((item) => item?.meta?.label.trim().toLowerCase().includes(searchTermSimplified));
 });
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customInputContentTyped = customInputContentInternal;
@@ -33,20 +42,14 @@ let customMenuItemContentTyped = customMenuItemContentInternal;
 let customPopupContentTyped = customPopupContentInternal;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPlaceholderMenuItemContentTyped = customPlaceholderMenuItemContentInternal;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
 function closeMenu() {
     open = false;
-    menuItemIndex = 0;
     ref?.blur();
 }
 function openMenu() {
     open = true;
-    const menuItemIndexNew = options.findIndex((item) => item.value === selectedOption?.value);
-    if (menuItemIndexNew < 0) {
-        menuItemIndex = 0;
-    }
-    else {
-        menuItemIndex = menuItemIndexNew;
-    }
 }
 function onfocusMod(e) {
     openMenu();
@@ -88,7 +91,8 @@ function onclearMod(e) {
         onclear(e);
     }
 }
-function onKeyBoardEnter(selectedItemIndex) {
+function onKeyBoardEnter(e, selectedItemIndex) {
+    e.preventDefault();
     const targetOption = options[selectedItemIndex];
     if (!targetOption) {
         return;
@@ -96,86 +100,35 @@ function onKeyBoardEnter(selectedItemIndex) {
     if (targetOption.disabled) {
         return;
     }
-    onselectMod(targetOption);
+    onselectMod(targetOption.meta);
 }
-function onKeyboardNavigation(e) {
-    let keyHit = undefined;
-    if (!menuRef) {
-        return;
-    }
-    if (!open) {
-        return;
-    }
-    switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowUp':
-        case 'Enter':
-            keyHit = e.key;
-            e.preventDefault();
-            break;
-        default:
-            break;
-    }
-    if (!keyHit) {
-        return;
-    }
-    const listItems = menuRef.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;
-        }
-    }
-    else if (keyHit === 'Enter') {
-        onKeyBoardEnter(newMenuItemIndex);
-        return;
-    }
-    const targetItem = listItems[newMenuItemIndex];
-    targetItem.classList.add('hover');
-    targetItem.focus();
-    targetItem.scrollIntoView({ block: 'nearest' });
-    menuItemIndex = newMenuItemIndex;
-}
-$effect(() => {
-    if (!menuRef) {
-        return;
-    }
-    if (!open) {
-        return;
-    }
-    const targetItem = menuRef.querySelector(':scope > li.dodo-ui-MenuItem.selected');
-    if (targetItem) {
-        targetItem.classList.add('hover');
-        targetItem.focus();
-        targetItem.scrollIntoView({ block: 'nearest' });
-    }
-    window.addEventListener('keydown', onKeyboardNavigation);
-    return () => {
-        window.removeEventListener('keydown', onKeyboardNavigation);
-    };
-});
 </script>
 
+{#snippet selectDropdownArrowIcon()}
+  <UtilityButton {size} title="Dropdown" onclick={onfocusMod}>
+    {#if customDropdownArrowIconTyped}
+      {@render customDropdownArrowIconTyped(open)}
+    {:else if open}
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="28" height="28" />
+    {:else}
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="28" height="28" />
+    {/if}
+  </UtilityButton>
+{/snippet}
+
 <div class={['dodo-ui-Select', className].join(' ')}>
-  <Popper fullWidth {open} {onClickOutside} {...popperProps} {popupMaxHeight} {paperProps}>
+  <Popper
+    fullWidth
+    {open}
+    {onClickOutside}
+    {...popperProps}
+    {popupMaxHeight}
+    {popupPositionX}
+    {popupPositionY}
+    {paperProps}
+    {lockPoistions}
+    {popperHeightForVerticalPosition}
+  >
     <div
       class:outline
       class:disabled
@@ -198,6 +151,12 @@ $effect(() => {
         {before}
         {after}
       >
+        {#if dropdownArrowPosition === 'before'}
+          <div class:before class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
+
         <DynamicInput
           type="text"
           {name}
@@ -211,6 +170,9 @@ $effect(() => {
           {onpaste}
           {oncopy}
           {oncut}
+          {onkeydown}
+          {onkeypress}
+          {onkeyup}
           {placeholder}
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}
@@ -232,43 +194,50 @@ $effect(() => {
             </UtilityButton>
           </div>
         {/if}
+
+        {#if dropdownArrowPosition === 'after'}
+          <div class:after class:open class="DropdownArrow">
+            {@render selectDropdownArrowIcon()}
+          </div>
+        {/if}
       </InputEnclosure>
     </div>
 
     {#snippet popupChildren()}
       {#if customPopupContentTyped}
-        {@render customPopupContentTyped(options, selectedOption)}
+        {@render customPopupContentTyped(optionsRaw, selectedOption, onselectMod)}
       {:else}
-        <Menu bind:ref={menuRef} {...menuProps}>
-          {#if options.length}
-            {#each options as option (option.value)}
-              <MenuItem
-                onclick={() => onselectMod(option)}
-                type="button"
-                disabled={option.disabled}
-                selected={selectedOption?.value === option.value}
-                {...menuItemProps}
-              >
-                {#if customMenuItemContentTyped}
-                  {@render customMenuItemContentTyped(
-                    option,
-                    selectedOption?.value === option.value,
-                  )}
-                {:else}
-                  {option.label}
-                {/if}
-              </MenuItem>
-            {/each}
-          {:else}
-            <MenuItem type="text" disabled={true} {...menuItemProps}>
-              {#if customPlaceholderMenuItemContentTyped}
-                {@render customPlaceholderMenuItemContentTyped()}
-              {:else}
-                {optionsPlaceholder}
-              {/if}
-            </MenuItem>
-          {/if}
-        </Menu>
+        <DynamicMenu
+          bind:ref={menuRef}
+          {menuItemProps}
+          {options}
+          keyboardNavigation
+          onEnter={onKeyBoardEnter}
+          selectedOption={options.find((item) => item.meta?.value === selectedOption?.value)}
+          onclick={(_e, option: DynamicMenuItemOption) => onselectMod(option.meta as SelectOption)}
+          showOptionsPlaceholder
+          {...menuProps}
+        >
+          {#snippet customMenuItemContent(option, selectedOption)}
+            {#if customMenuItemContentTyped}
+              {@render customMenuItemContentTyped(
+                option?.meta as SelectOption,
+                (selectedOption?.meta as SelectOption).value ===
+                  (option?.meta as SelectOption).value,
+              )}
+            {:else}
+              {(option?.meta as SelectOption).label}
+            {/if}
+          {/snippet}
+
+          {#snippet customPlaceholderMenuItemContent()}
+            {#if customPlaceholderMenuItemContentTyped}
+              {@render customPlaceholderMenuItemContentTyped()}
+            {:else}
+              {optionsPlaceholder}
+            {/if}
+          {/snippet}
+        </DynamicMenu>
       {/if}
     {/snippet}
   </Popper>
@@ -277,9 +246,27 @@ $effect(() => {
 <style>.dodo-ui-Select .Select.size--normal .SelectClear.after {
   margin-right: calc(var(--dodo-ui-space-small) * 2);
 }
+.dodo-ui-Select .Select.size--normal .DropdownArrow.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-Select .Select.size--normal .DropdownArrow.before {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
+}
 .dodo-ui-Select .Select.size--small .SelectClear.after {
   margin-right: var(--dodo-ui-space);
 }
+.dodo-ui-Select .Select.size--small .DropdownArrow.after {
+  margin-right: var(--dodo-ui-space);
+}
+.dodo-ui-Select .Select.size--small .DropdownArrow.before {
+  margin-right: var(--dodo-ui-space);
+}
 .dodo-ui-Select .Select.size--large .SelectClear.after {
   margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-Select .Select.size--large .DropdownArrow.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
+}
+.dodo-ui-Select .Select.size--large .DropdownArrow.before {
+  margin-right: calc(var(--dodo-ui-space) * 2);
 }</style>

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

@@ -1,12 +1,13 @@
 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;
     disabled?: boolean;
 };
+export type SelectDropdownArrowPosition = false | 'before' | 'after';
 export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -62,12 +63,18 @@ 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 */
     customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
     /** Custom Popup Content */
-    customPopupContent?: (options: SelectOption[], selectedOption: SelectOption) => Snippet;
+    customPopupContent?: (options: SelectOption[], selectedOption: SelectOption, onselect: (val: SelectOption) => void) => Snippet;
     /** custom Content Formatting for variant button */
     customPlaceholderMenuItemContent?: () => Snippet;
     /** PopperPopup Max height. Use css compatible value */
@@ -80,8 +87,20 @@ export interface SelectProps {
     menuProps?: Partial<MenuProps>;
     /** MenuItem: Menu component props */
     menuItemProps?: Partial<MenuItemProps>;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
 }
-import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps } from '../../../../index.js';
+import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "ref">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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/Customize/Customize.stories.svelte

@@ -0,0 +1,28 @@
+<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>
+
+<!-- Custom Menu Item Content -->
+<Story name="CustomMenuItemContent" asChild>
+  <DynamicMenu options={dynamicMenuItemOptions}>
+    {#snippet customMenuItemContent(option, selectedOption)}
+      {selectedOption?.id === option.id ? '✅' : ''} {option.label} 💯💯💯
+    {/snippet}
+  </DynamicMenu>
+</Story>
+
+<!-- Custom Menu Item Placeholder Content -->
+<Story name="CustomPlaceholderMenuItemContent" asChild>
+  <DynamicMenu options={[]} showOptionsPlaceholder>
+    {#snippet customPlaceholderMenuItemContent()}
+      No dice 💯💯💯
+    {/snippet}
+  </DynamicMenu>
+</Story>

package/dist/stories/components/Layout/Menu/DynamicMenu/Customize/Customize.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 Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

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

@@ -0,0 +1,51 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DynamicMenu, {} from './DynamicMenu.svelte';
+export const storyDynamicMenuArgTypes = {};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: DynamicMenu,
+    tags: ['autodocs'],
+    argTypes: storyDynamicMenuArgTypes,
+});
+export const dynamicMenuItemOptions = [
+    {
+        id: '1',
+        label: 'One',
+    },
+    {
+        id: '2',
+        label: 'Two',
+    },
+    {
+        id: '3',
+        label: 'Three',
+    },
+    {
+        id: '4',
+        label: 'Four',
+    },
+    {
+        id: '5',
+        label: 'Five',
+    },
+    {
+        id: '6',
+        disabled: true,
+        label: 'Five',
+    },
+];
+</script>
+
+<!-- Default DynamicMenu -->
+<Story name="Default" args={{ options: dynamicMenuItemOptions }} />
+
+<!-- Selected Option -->
+<Story
+  name="SelectedOption"
+  args={{ options: dynamicMenuItemOptions, selectedOption: dynamicMenuItemOptions[1] }}
+/>
+
+<Story
+  name="ShowPlaceholder"
+  args={{ options: [], showOptionsPlaceholder: true, optionsPlaceholder: 'No content found.' }}
+/>

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

@@ -0,0 +1,22 @@
+import DynamicMenu, { type DynamicMenuItemOption } from './DynamicMenu.svelte';
+import type { StoryBookArgTypes } from '../../../../../storybook-types.js';
+export declare const storyDynamicMenuArgTypes: StoryBookArgTypes;
+export declare const dynamicMenuItemOptions: DynamicMenuItemOption[];
+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 DynamicMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DynamicMenu = InstanceType<typeof DynamicMenu>;
+export default DynamicMenu;