@flightlesslabs/dodo-ui 0.6.6 → 0.7.1

package/dist/index.d.ts

@@ -3,28 +3,49 @@ export type { ComponentColorPriority, ComponentColorSeverity, ComponentColor, }
 export type { ComponentRoundness } from './types/roundness.js';
 export type { ComponentSize } from './types/size.js';
 export type { ComponentWeight } from './types/weight.js';
+export type { PositionY, PositionX } from './types/position.js';
+/** developer tools: directives: clickOutside */
+export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+export type { UtilityButtonProps } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+export type { InputEnclosureProps } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+export type { DynamicInputVariant, DynamicInputProps, DynamicInputClickEvent, DynamicInputFocusEvent, } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+/** developer tools: components: Popper */
+export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
+export type { PopperProps } from './stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
+export type { PopperPopupProps } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
-export type { ButtonLinkTarget, ButtonLinkReferrerpolicy, ButtonType, } from './stories/components/Form/Button/Button.svelte';
+export type { ButtonLinkTarget, ButtonLinkReferrerpolicy, ButtonType, ButtonProps, ButtonClickEvent, } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, TextInputInputEvent, TextInputProps, } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type { PasswordInputToggleEvent, PasswordInputProps, } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
 /** Form: Label */
 export { default as Label } from './stories/components/Form/Label/Label.svelte';
+export type { LabelProps } from './stories/components/Form/Label/Label.svelte';
 /** Form: FormControl */
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
+export type { FormControlProps } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
-export type { SimpleSelectFocusEvent, SimpleSelectOption, } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
-export type { PaperColor } from './stories/components/Layout/Paper/Paper.svelte';
+export type { PaperColor, PaperProps } from './stories/components/Layout/Paper/Paper.svelte';
+/** Layout: Separator */
+export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
+export type { SeparatorProps, SeparatorOrientation, } from './stories/components/Layout/Separator/Separator.svelte';
+/** Layout: Menu */
+export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
+export type { MenuProps } from './stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export type { MenuItemType, MenuItemProps, } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

package/dist/index.js

@@ -1,8 +1,15 @@
 import './styles/global.css';
+/** developer tools: directives: clickOutside */
+export { clickOutside } from './stories/developer tools/directives/clickOutside/clickOutside.js';
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from './stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+/** developer tools: components: Popper */
+export { default as Popper } from './stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from './stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
@@ -15,7 +22,10 @@ export { default as Label } from './stories/components/Form/Label/Label.svelte';
 export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
 /** Form: Message */
 export { default as Message } from './stories/components/Form/Message/Message.svelte';
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
 /** Layout: Paper */
 export { default as Paper } from './stories/components/Layout/Paper/Paper.svelte';
+/** Layout: Separator */
+export { default as Separator } from './stories/components/Layout/Separator/Separator.svelte';
+/** Layout: Menu */
+export { default as Menu } from './stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from './stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

package/dist/stories/Home.mdx

@@ -54,6 +54,6 @@ import { Button } '@flightlesslabs/dodo-ui';
 
 ## Explore more
 
-- [Dark Theme ?](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
+- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
 - [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
 - [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -1,8 +1,8 @@
 <script lang="ts" module>export const buttonTypeArray = ['button', 'submit'];
 </script>
 
-<script lang="ts">let { children, type = 'button', size = 'normal', color = 'primary', roundness = 1, variant = 'solid', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, ref = $bindable(), } = $props();
-export {};
+<script lang="ts">"use strict";
+let { children, type = 'button', size = 'normal', color = 'primary', roundness = 1, variant = 'solid', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, ref = $bindable(), } = $props();
 </script>
 
 {#snippet buttonContent()}

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

@@ -1,14 +1,17 @@
-export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
-export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
-export type ButtonType = 'button' | 'submit';
-export declare const buttonTypeArray: ButtonType[];
 import type { ComponentColor } from '../../../../types/colors.js';
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { ComponentSize } from '../../../../types/size.js';
 import type { ComponentWeight } from '../../../../types/weight.js';
 import type { Snippet } from 'svelte';
 import type { MouseEventHandler } from 'svelte/elements';
-interface ButtonProps {
+export type ButtonLinkTarget = '_self' | '_blank' | '_parent' | '_top' | (string & {}) | undefined | null;
+export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
+export type ButtonType = 'button' | 'submit';
+export declare const buttonTypeArray: ButtonType[];
+export type ButtonClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+};
+export interface ButtonProps {
     /** Button contents goes here */
     children?: Snippet;
     /** Button ref */

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

@@ -1,3 +1,6 @@
+<script lang="ts" module>export {};
+</script>
+
 <script lang="ts">import Label from '../Label/Label.svelte';
 import Message from '../Message/Message.svelte';
 let { children, label, class: className = '', for: htmlFor, form, ref = $bindable(), errorMessage, } = $props();

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface FormControlProps {
+export interface FormControlProps {
     /** FormControl contents goes here */
     children?: Snippet;
     /** Label for FormControl */

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

@@ -1,5 +1,8 @@
-<script lang="ts">let { children, class: className = '', for: htmlFor, form, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', for: htmlFor, form, ref = $bindable(), } = $props();
 </script>
 
 <label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface LabelProps {
+export interface LabelProps {
     /** Label contents goes here */
     children?: Snippet;
     /** Label ref */

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

@@ -1,5 +1,8 @@
-<script lang="ts">let { children, class: className = '', color = 'primary', ref = $bindable(), size = 'normal', } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', color = 'primary', ref = $bindable(), size = 'normal', } = $props();
 </script>
 
 <div

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

@@ -1,7 +1,7 @@
 import type { ComponentColor } from '../../../../types/colors.js';
 import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
-interface MessageProps {
+export interface MessageProps {
     /** Message contents goes here */
     children?: Snippet;
     /** Message ref */

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

@@ -4,21 +4,24 @@
 <script lang="ts">import Icon from '@iconify/svelte';
 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 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(e);
+        onfocus(eTyped);
     }
 }
 function onblurMod(e) {
+    const eTyped = e;
     focused = false;
     if (onblur) {
-        onblur(e);
+        onblur(eTyped);
     }
 }
 function ontoggleMod(e) {
@@ -42,11 +45,12 @@ function ontoggleMod(e) {
   class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
   <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <input
+    <DynamicInput
       type={passwordToggle && toggle ? 'text' : 'password'}
       {name}
       {id}
       {disabled}
+      bind:ref
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -56,43 +60,32 @@ function ontoggleMod(e) {
       {oncut}
       {placeholder}
       bind:value
-      bind:this={ref}
       {readonly}
+      variant="input"
     />
 
     {#if passwordToggle && !disabled}
-      <UtilityButton {size} title="Toggle password" class="passwordToggle" onclick={ontoggleMod}>
-        {#if customPasswordToggleIcon}
-          {@render customPasswordToggleIconTyped(toggle)}
-        {:else if toggle}
-          <Icon icon="mdi:eye-off" width="24" height="24" />
-        {:else}
-          <Icon icon="mdi:eye" width="24" height="24" />
-        {/if}
-      </UtilityButton>
+      <div class:after class="passwordToggle">
+        <UtilityButton {size} title="Toggle password" onclick={ontoggleMod}>
+          {#if customPasswordToggleIcon}
+            {@render customPasswordToggleIconTyped(toggle)}
+          {:else if toggle}
+            <Icon icon="mdi:eye-off" width="24" height="24" />
+          {:else}
+            <Icon icon="mdi:eye" width="24" height="24" />
+          {/if}
+        </UtilityButton>
+      </div>
     {/if}
   </InputEnclosure>
 </div>
 
-<style>.dodo-ui-PasswordInput input {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
+<style>.dodo-ui-PasswordInput.size--normal .passwordToggle.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
 }
-.dodo-ui-PasswordInput.size--normal input {
-  font-size: 1rem;
-  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+.dodo-ui-PasswordInput.size--small .passwordToggle.after {
+  margin-right: var(--dodo-ui-space);
 }
-.dodo-ui-PasswordInput.size--small input {
-  padding: 0 var(--dodo-ui-space);
-  font-size: 0.9rem;
-}
-.dodo-ui-PasswordInput.size--large input {
-  font-size: 1.1rem;
-  padding: 0 calc(var(--dodo-ui-space) * 2);
+.dodo-ui-PasswordInput.size--large .passwordToggle.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
 }</style>

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

@@ -1,12 +1,12 @@
+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';
 export type PasswordInputToggleEvent = {
     event: Event;
     toggle: boolean;
 };
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
-import type { ComponentSize } from '../../../../types/size.js';
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-interface PasswordInputProps {
+export interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** Input ref */

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

@@ -0,0 +1,120 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import { Menu } from '../../../../../index.js';
+import MenuItem from '../../../Layout/Menu/MenuItem/MenuItem.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<!-- Format look and feel of input content.  -->
+<Story name="CustomInput" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customInputContent(selectedOption)}
+      {selectedOption.label} 💯💯💯
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Format look and feel of Popper menu item.  -->
+<Story name="CustomMenuItem" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customMenuItemContent(selectedOption, selected)}
+      {selected ? '✅' : ''} {selectedOption.label} 💯
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Format look and feel of Popper menu item Placeholder.  -->
+<Story name="CustomMenuItemPlaceholder" asChild>
+  <Select {options} {value} searchable onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customPlaceholderMenuItemContent()}
+      🤚🤚🤚🤚 Nothing found....
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Format look and feel of Popup.  -->
+<Story name="CustomPopup" asChild>
+  <Select {options} {value}>
+    {#snippet customPopupContent(options, selectedOption)}
+      <Menu size="small" separator>
+        {#each options as option (option.value)}
+          <MenuItem
+            type="button"
+            disabled={option.disabled}
+            selected={selectedOption.value === option.value}
+          >
+            <b>{option.label}</b>
+          </MenuItem>
+        {/each}
+      </Menu>
+    {/snippet}
+  </Select>
+</Story>
+
+<!-- Format look and feel of Popup [Paper](?path=/docs/components-layout-paper--docs) -->
+<Story
+  name="PaperProps"
+  args={{
+    options,
+    value,
+    paperProps: {
+      color: 'danger',
+    },
+  }}
+/>
+
+<!-- Format look and feel of [Popper](?path=/docs/developer-tools-components-popper--docs). We have incrased popupOffsetY in this example.   -->
+<Story
+  name="PopperProps"
+  args={{
+    options,
+    value,
+    popperProps: {
+      popupOffsetY: 40,
+    },
+  }}
+/>
+
+<!-- Format look and feel of Popup [Menu](?path=/docs/components-layout-menu--docs)  -->
+<Story
+  name="MenuProps"
+  args={{
+    options,
+    value,
+    menuProps: {
+      separator: true,
+      size: 'large',
+    },
+  }}
+/>
+
+<!-- Format look and feel of Popup [MenuItem](?path=/docs/components-layout-menu-menuitem--docs)  -->
+<Story
+  name="MenuItemProps"
+  args={{
+    options,
+    value,
+    menuItemProps: {
+      size: 'small',
+      type: 'link',
+      href: 'https://developer.mozilla.org/en-US/',
+      target: '_blank',
+    },
+  }}
+/>

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

@@ -0,0 +1,138 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import Select, {} from '../Select.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story
+  name="SelectEvent"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => {
+      console.log('Select Event', val);
+    },
+  }}
+/>
+
+<Story
+  name="Clear"
+  args={{
+    options,
+    value,
+    onclear: () => {
+      console.log('Clear Event');
+    },
+  }}
+/>
+
+<Story
+  name="Input"
+  args={{
+    options,
+    value,
+    searchable: true,
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Change"
+  args={{
+    options,
+    value,
+    searchable: true,
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+/>
+
+<Story
+  name="Focus"
+  args={{
+    options,
+    value,
+    onfocus: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement | HTMLButtonElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Blur"
+  args={{
+    options,
+    value,
+    onblur: (e: DynamicInputFocusEvent) => {
+      const target = e.target as HTMLInputElement | HTMLButtonElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Copy"
+  args={{
+    options,
+    value,
+    searchable: true,
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Cut"
+  args={{
+    options,
+    value,
+    searchable: true,
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+/>
+
+<Story
+  name="Paste"
+  args={{
+    options,
+    value,
+    searchable: true,
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+/>

package/dist/stories/components/Form/Select/Options/OptionFormat.mdx

@@ -0,0 +1,40 @@
+import { Source } from '@storybook/blocks';
+
+# Option Format
+
+## SelectOption
+
+<Source
+  dark
+  language="ts"
+  code={`
+ type SelectOption = {
+    value: string | number | boolean | null | undefined;
+    label: string;
+    disabled?: boolean;
+  };
+`}
+/>
+
+## Example values
+
+<Source
+  dark
+  language="ts"
+  code={`
+const options: SelectOption[] = [
+  {
+    value: 1,
+    label: 'One',
+  },
+  {
+    value: 2,
+    label: 'Two',
+  },
+  {
+    value: 3,
+    label: 'Three',
+  },
+];
+`}
+/>

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

@@ -0,0 +1,28 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story name="Roundness 1" args={{ options, value }} />
+
+<Story name="Roundness 2" args={{ options, value, roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ options, value, roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ options, value, roundness: 0 }} />