@flightlesslabs/dodo-ui 0.17.2 → 0.19.0

package/dist/stories/components/Form/Search/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,47 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Search from '../Search.svelte';
+  import { storySearchArgTypes } from '../Search.stories.svelte';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Search,
+    tags: ['autodocs'],
+    argTypes: storySearchArgTypes,
+  });
+</script>
+
+<!-- Search icon in front. -->
+<Story name="Icon Before" asChild>
+  <Search>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </Search>
+</Story>
+
+<!-- Search icon in front. -->
+<Story name="Icon After" asChild>
+  <Search>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </Search>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }} asChild>
+  <Search size="small">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </Search>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }} asChild>
+  <Search size="large">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </Search>
+</Story>

package/dist/stories/components/Form/Search/WithIcon/WithIcon.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default WithIcon;
+type WithIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const WithIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

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

@@ -176,6 +176,7 @@ function onKeyBoardEnter(e, selectedItemIndex) {
           value={searchable ? searchTerm : selectedOption?.label}
           {readonly}
           variant={searchable ? 'input' : 'button'}
+          {size}
         >
           {#snippet customInputContent()}
             {#if customInputContentTyped}

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

@@ -7,7 +7,6 @@ export type SelectOption = {
     label: string;
     disabled?: boolean;
 };
-export type SelectDropdownArrowPosition = false | 'before' | 'after';
 export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -71,11 +70,11 @@ export interface SelectProps {
     onkeyup?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
     /** custom Content Formatting for variant button */
     customInputContent?: (val: SelectOption) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Menu Item Content */
     customMenuItemContent?: (val: SelectOption, selected: boolean) => Snippet;
     /** Custom Popup Content */
     customPopupContent?: (options: SelectOption[], selectedOption: SelectOption, onselect: (val: SelectOption) => void) => Snippet;
-    /** custom Content Formatting for variant button */
+    /** custom Placeholder MenuItem Content */
     customPlaceholderMenuItemContent?: () => Snippet;
     /** PopperPopup Max height. Use css compatible value */
     popupMaxHeight?: string;
@@ -90,7 +89,7 @@ export interface SelectProps {
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    dropdownArrowPosition?: IconPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -103,6 +102,7 @@ export interface SelectProps {
     open?: boolean;
 }
 import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
+import type { IconPosition } from '../../../../types/special.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

@@ -39,6 +39,7 @@ function onblurMod(e) {
       {name}
       {id}
       {disabled}
+      {size}
       bind:ref
       bind:focused
       {oninput}

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte

@@ -0,0 +1,52 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from './Accordian.svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyAccordianArgTypes = {
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+</script>
+
+<Story name="Default" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Open by Default" asChild>
+  <Accordian defaultOpen={true}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Full Width Summary" asChild>
+  <Accordian fullWidthSummary>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte.d.ts

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

package/dist/stories/components/Layout/Accordian/Accordian.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>import Icon from '@iconify/svelte';
+import { onMount } from 'svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), ontoggle, open = $bindable(), defaultOpen, summary, children, size = 'normal', fullWidthSummary = false, customDropdownArrowIcon: customDropdownArrowIconInternal, dropdownArrowPosition = 'before', } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
+let isUserInteraction = $state(false);
+function ontoggleMod(e) {
+    if (isUserInteraction) {
+        if (ontoggle) {
+            ontoggle(e);
+        }
+    }
+    isUserInteraction = false;
+}
+function onsummaryclick() {
+    isUserInteraction = true;
+}
+onMount(() => {
+    if (open === true) {
+        ref.open = true;
+    }
+    else if (open === false) {
+        ref.open = false;
+    }
+    else if (defaultOpen === true) {
+        ref.open = true;
+    }
+    else if (defaultOpen === false) {
+        ref.open = false;
+    }
+});
+</script>
+
+{#snippet dropdownArrowIcon()}
+  {#if customDropdownArrowIconTyped}
+    {@render customDropdownArrowIconTyped(open)}
+  {:else}
+    <div class="IconOpen">
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
+    </div>
+    <div class="IconClose">
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  class:fullWidthSummary
+  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
+  bind:this={ref}
+  {open}
+  ontoggle={ontoggleMod}
+>
+  {#if summary}
+    <summary onclick={onsummaryclick}>
+      {#if dropdownArrowPosition === 'before'}
+        <div class:open class="DropdownArrow before">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+      {@render summary()}
+      {#if dropdownArrowPosition === 'after'}
+        <div class:open class="DropdownArrow after">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+    </summary>
+  {/if}
+
+  {#if children}
+    <div class="AccordianContent">
+      {@render children()}
+    </div>
+  {/if}
+</details>
+
+<style>.dodo-ui-Accordian {
+  color: var(--dodo-color-neutral-900);
+  width: 100%;
+}
+.dodo-ui-Accordian summary {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+}
+.dodo-ui-Accordian.fullWidthSummary summary {
+  display: flex;
+  width: 100%;
+}
+.dodo-ui-Accordian[open] .IconOpen {
+  display: flex;
+}
+.dodo-ui-Accordian[open] .IconClose {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconOpen {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconClose {
+  display: flex;
+}
+.dodo-ui-Accordian.size--normal summary {
+  font-size: 1rem;
+  min-height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-Accordian.size--small summary {
+  font-size: 0.9rem;
+  min-height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-Accordian.size--large summary {
+  font-size: 1.1rem;
+  min-height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-Accordian .AccordianContent {
+  margin-top: var(--dodo-ui-space);
+}</style>

package/dist/stories/components/Layout/Accordian/Accordian.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { IconPosition } from '../../../../types/special.js';
+import { type Snippet } from 'svelte';
+import type { EventHandler } from 'svelte/elements';
+export type AccordianToggleEvent = Event & {
+    currentTarget: EventTarget & HTMLDetailsElement;
+};
+export interface AccordianProps {
+    /** Contents goes here */
+    children?: Snippet;
+    /** Accordian summary */
+    summary?: Snippet;
+    /** summary full width */
+    fullWidthSummary?: boolean;
+    /** Accordian ref */
+    ref?: HTMLDetailsElement;
+    /** Custom css class */
+    class?: string;
+    /** The toggle event handler */
+    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
+    /**  Open state, for dynmaic Accordians */
+    open?: boolean;
+    /** default Open, for static Accordians */
+    defaultOpen?: boolean;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: IconPosition;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+}
+declare const Accordian: import("svelte").Component<AccordianProps, {}, "ref" | "open">;
+type Accordian = ReturnType<typeof Accordian>;
+export default Accordian;

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from '../Accordian.svelte';
+import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+import Icon from '@iconify/svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(true);
+</script>
+
+<Story name="DropdownArrowPositionBefore" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="DropdownArrowPositionAfter" asChild>
+  <Accordian dropdownArrowPosition="after">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="HideDropdownArrow" asChild>
+  <Accordian dropdownArrowPosition={false}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Accordian {open} ontoggle={() => (open = !open)}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+
+    {#snippet customDropdownArrowIcon(open)}
+      {#if open}
+        <Icon icon="mingcute:up-fill" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:down-fill" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/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/Accordian/Events/Events.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+import Accordian, {} from '../Accordian.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(false);
+</script>
+
+<Story name="Toggle" asChild>
+  <Accordian
+    {open}
+    ontoggle={(e: AccordianToggleEvent) => {
+      open = !open;
+
+      console.log('Input Event', e);
+    }}
+  >
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/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/Accordian/Size/Size.stories.svelte

@@ -0,0 +1,48 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordian from '../Accordian.svelte';
+  import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+  });
+</script>
+
+<Story name="Normal" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Small" asChild>
+  <Accordian size="small">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Larger" asChild>
+  <Accordian size="large">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/stories/developer tools/components/UtilityIcon/Size/Size.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import UtilityIcon from '../UtilityIcon.svelte';
+  import { storyUtilityIconArgTypes } from '../UtilityIcon.stories.svelte';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: UtilityIcon,
+    tags: ['autodocs'],
+    argTypes: storyUtilityIconArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>

package/dist/stories/developer tools/components/UtilityIcon/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

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

@@ -0,0 +1,26 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import UtilityIcon from './UtilityIcon.svelte';
+import Icon from '@iconify/svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyUtilityIconArgTypes = {
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: UtilityIcon,
+    tags: ['autodocs'],
+    argTypes: storyUtilityIconArgTypes,
+});
+</script>
+
+<!-- Button with default style -->
+<Story name="Default">
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <Icon icon="mdi:eye" width="24" height="24" />
+</Story>