@flightlesslabs/dodo-ui 0.7.1 → 0.8.0

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

@@ -7,6 +7,7 @@ export type SelectOption = {
     label: string;
     disabled?: boolean;
 };
+export type SelectDropdownArrowPosition = false | 'before' | 'after';
 export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -67,7 +68,7 @@ export interface SelectProps {
     /** 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 +81,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/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;

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 === 'Esc') {
+        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

@@ -28,6 +28,7 @@ function onclickMod(e) {
     ].join(' ')}
     bind:this={ref}
     onclick={onclickMod}
+    {onfocus}
     {onblur}
     {disabled}
   >

package/package.json

@@ -1,19 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.7.1",
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
-  },
+  "version": "0.8.0",
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -29,7 +16,8 @@
     "!src/lib/**/*.spec.*",
     "!src/lib/stories/**/*.stories.*",
     "!src/lib/stories/**/*.mdx",
-    "!src/lib/stories/assets",
+    "!src/lib/stories/assets/**/*.png",
+    "!src/lib/stories/assets/**/*.jpg",
     "!src/lib/stories/philosophy"
   ],
   "sideEffects": [
@@ -69,7 +57,7 @@
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-svelte": "^3.9.0",
-    "globals": "^16.1.0",
+    "globals": "^16.2.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
@@ -77,7 +65,7 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.32.1",
+    "svelte": "^5.33.2",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
@@ -94,5 +82,16 @@
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.0"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

package/src/lib/index.ts

@@ -79,6 +79,14 @@ export type { FormControlProps } from '$lib/stories/components/Form/FormControl/
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
 export type { MessageProps } from '$lib/stories/components/Form/Message/Message.svelte';
 
+/** Form: Select */
+export { default as Select } from '$lib/stories/components/Form/Select/Select.svelte';
+export type {
+  SelectOption,
+  SelectDropdownArrowPosition,
+  SelectProps,
+} from '$lib/stories/components/Form/Select/Select.svelte';
+
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
 export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
@@ -98,3 +106,8 @@ export type {
   MenuItemType,
   MenuItemProps,
 } from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export { default as DynamicMenu } from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';
+export type {
+  DynamicMenuItemOption,
+  DynamicMenuProps,
+} from '$lib/stories/components/Layout/Menu/DynamicMenu/DynamicMenu.svelte';