@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/src/lib/styles/_colors.css

@@ -8,17 +8,17 @@
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
   /* Default color */
-  --dodo-color-default-50: var(--dodo-color-base-gray-50);
-  --dodo-color-default-100: var(--dodo-color-base-gray-100);
-  --dodo-color-default-200: var(--dodo-color-base-gray-200);
-  --dodo-color-default-300: var(--dodo-color-base-gray-300);
-  --dodo-color-default-400: var(--dodo-color-base-gray-400);
-  --dodo-color-default-500: var(--dodo-color-base-gray-500);
-  --dodo-color-default-600: var(--dodo-color-base-gray-600);
-  --dodo-color-default-700: var(--dodo-color-base-gray-700);
-  --dodo-color-default-800: var(--dodo-color-base-gray-800);
-  --dodo-color-default-900: var(--dodo-color-base-gray-900);
-  --dodo-color-default-950: var(--dodo-color-base-gray-950);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-950);
 
   /* Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-50);
@@ -34,17 +34,17 @@
   --dodo-color-primary-950: var(--dodo-color-base-violet-950);
 
   /* Secondary color */
-  --dodo-color-secondary-50: var(--dodo-color-base-cyan-50);
-  --dodo-color-secondary-100: var(--dodo-color-base-cyan-100);
-  --dodo-color-secondary-200: var(--dodo-color-base-cyan-200);
-  --dodo-color-secondary-300: var(--dodo-color-base-cyan-300);
-  --dodo-color-secondary-400: var(--dodo-color-base-cyan-400);
-  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-secondary-600: var(--dodo-color-base-cyan-600);
-  --dodo-color-secondary-700: var(--dodo-color-base-cyan-700);
-  --dodo-color-secondary-800: var(--dodo-color-base-cyan-800);
-  --dodo-color-secondary-900: var(--dodo-color-base-cyan-900);
-  --dodo-color-secondary-950: var(--dodo-color-base-cyan-950);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-50);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-950);
 
   /* Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
@@ -92,17 +92,17 @@
   --dodo-color-white: var(--dodo-color-base-black);
 
   /* Dark: Default color */
-  --dodo-color-default-50: var(--dodo-color-base-gray-950);
-  --dodo-color-default-100: var(--dodo-color-base-gray-900);
-  --dodo-color-default-200: var(--dodo-color-base-gray-800);
-  --dodo-color-default-300: var(--dodo-color-base-gray-700);
-  --dodo-color-default-400: var(--dodo-color-base-gray-600);
-  --dodo-color-default-500: var(--dodo-color-base-gray-500);
-  --dodo-color-default-600: var(--dodo-color-base-gray-400);
-  --dodo-color-default-700: var(--dodo-color-base-gray-300);
-  --dodo-color-default-800: var(--dodo-color-base-gray-200);
-  --dodo-color-default-900: var(--dodo-color-base-gray-100);
-  --dodo-color-default-950: var(--dodo-color-base-gray-50);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-950);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-50);
 
   /* Dark: Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-950);
@@ -118,17 +118,17 @@
   --dodo-color-primary-950: var(--dodo-color-base-violet-50);
 
   /* Dark: Secondary color */
-  --dodo-color-secondary-50: var(--dodo-color-base-cyan-950);
-  --dodo-color-secondary-100: var(--dodo-color-base-cyan-900);
-  --dodo-color-secondary-200: var(--dodo-color-base-cyan-800);
-  --dodo-color-secondary-300: var(--dodo-color-base-cyan-700);
-  --dodo-color-secondary-400: var(--dodo-color-base-cyan-600);
-  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-secondary-600: var(--dodo-color-base-cyan-400);
-  --dodo-color-secondary-700: var(--dodo-color-base-cyan-300);
-  --dodo-color-secondary-800: var(--dodo-color-base-cyan-200);
-  --dodo-color-secondary-900: var(--dodo-color-base-cyan-100);
-  --dodo-color-secondary-950: var(--dodo-color-base-cyan-50);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-950);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-50);
 
   /* Dark: Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-950);

package/src/lib/styles/_components.css

@@ -1,11 +1,14 @@
 :root {
+  /* Size */
   --dodo-ui-element-height-small: 34px;
   --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-large: 50px;
 
-  --dodo-ui-element-roundness-1x: 7px;
-  --dodo-ui-element-roundness-2x: 13px;
-  --dodo-ui-element-roundness-3x: 31px;
+  /* Roundness */
+  --dodo-ui-element-roundness-1: 7px;
+  --dodo-ui-element-roundness-2: 13px;
+  --dodo-ui-element-roundness-3: 31px;
 
+  /* Border */
   --dodo-ui-element-border-width: 1px;
 }

package/src/lib/styles/_shadow.css

@@ -1,39 +1,32 @@
 :root {
-  --dodo-shadow-color: #0000000d;
+  --dodo-shadow-color: rgba(0, 0, 0, 0.11);
 }
 
-.dodo-shadow-1x {
-  --dodo-shadow: 0 1px var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
-}
-
-.dodo-shadow-2x {
-  --dodo-shadow: 0 1px 2px 0 var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
+.dodo-theme--dark {
+  --dodo-shadow-color: rgba(0, 0, 0, 0.09);
 }
 
-.dodo-shadow-3x {
-  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+.dodo-shadow-1 {
+  --dodo-shadow: 0 1px 3px var(--dodo-shadow-color), 0 1px 2px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-4x {
-  --dodo-shadow: 0 4px 6px -1px var(--dodo-shadow-color), 0 2px 4px -2px var(--dodo-shadow-color);
+.dodo-shadow-2 {
+  --dodo-shadow: 0 3px 6px var(--dodo-shadow-color), 0 3px 6px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-5x {
-  --dodo-shadow: 0 10px 15px -3px var(--dodo-shadow-color), 0 4px 6px -4px var(--dodo-shadow-color);
+.dodo-shadow-3 {
+  --dodo-shadow: 0 6px 10px var(--dodo-shadow-color), 0 5px 17px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-6x {
-  --dodo-shadow:
-    0 20px 25px -5px var(--dodo-shadow-color), 0 8px 10px -6px var(--dodo-shadow-color);
+.dodo-shadow-4 {
+  --dodo-shadow: 0 10px 18px var(--dodo-shadow-color), 0 6px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-7x {
-  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+.dodo-shadow-5 {
+  --dodo-shadow: 0 14px 28px var(--dodo-shadow-color), 0 10px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }

package/src/lib/styles/_space.css

@@ -0,0 +1,7 @@
+:root {
+  /* Space */
+  /* Example: calc(var(--dodo-ui-space) * 2), calc(var(--dodo-ui-space) / 2) */
+  --dodo-ui-space-small: 6px;
+  --dodo-ui-space: 8px;
+  --dodo-ui-space-large: 10px;
+}

package/src/lib/styles/_z-index.css

@@ -0,0 +1,9 @@
+:root {
+  /* zIndex */
+  --dodo-ui-z-index-0: 0;
+  --dodo-ui-z-index-1: 1;
+  --dodo-ui-z-index-2: 100;
+  --dodo-ui-z-index-3: 1000;
+  --dodo-ui-z-index-4: 5000;
+  --dodo-ui-z-index-5: 5001;
+}

package/src/lib/styles/global.css

@@ -1,6 +1,8 @@
 @import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
+@import '_space.css';
+@import '_z-index.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/src/lib/types/colors.ts

@@ -0,0 +1,16 @@
+/** Component Color*/
+export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
+export const componentColorPriorityArray: ComponentColorPriority[] = [
+  'primary',
+  'secondary',
+  'neutral',
+];
+
+export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
+export const componentColorSeverityArray: ComponentColorSeverity[] = ['safe', 'warning', 'danger'];
+
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+export const componentColorArray: ComponentColor[] = [
+  ...componentColorPriorityArray,
+  ...componentColorSeverityArray,
+];

package/src/lib/types/position.ts

@@ -0,0 +1,5 @@
+export type PositionY = 'top' | 'middle' | 'bottom';
+export type PositionX = 'left' | 'center' | 'right';
+
+export const positionYArray: PositionY[] = ['top', 'bottom'];
+export const positionXArray: PositionX[] = ['left', 'center', 'right'];

package/src/lib/types/roundness.ts

@@ -0,0 +1,3 @@
+/** Component Roundness */
+export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
+export const componentRoundnessArray: ComponentRoundness[] = [0, 1, 2, 3, 'full'];

package/src/lib/types/shadow.ts

@@ -0,0 +1,3 @@
+/** Component Shadow */
+export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
+export const componentShadowArray: ComponentShadow[] = [0, 1, 2, 3, 4, 5];

package/src/lib/types/size.ts

@@ -0,0 +1,3 @@
+/** Component Size */
+export type ComponentSize = 'normal' | 'small' | 'large';
+export const componentSizeArray: ComponentSize[] = ['normal', 'small', 'large'];

package/src/lib/types/weight.ts

@@ -0,0 +1,3 @@
+/** Component Weight */
+export type ComponentWeight = 'solid' | 'text';
+export const componentWeightArray: ComponentWeight[] = ['solid', 'text'];

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

@@ -1,74 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import {} from '../SimpleSelect.svelte';
-import SimpleSelect from '../SimpleSelect.svelte';
-import { storySimpleSelectArgTypes, storySimpleSelectOptions, } from '../SimpleSelect.stories.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-});
-</script>
-
-<Story
-  name="Change"
-  args={{
-    onchange: (e: Event) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onChange Event', target.value);
-    },
-  }}
->
-  <SimpleSelect
-    onchange={(e: Event) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onchange Event', target.value);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>
-
-<!-- `e: SimpleSelectFocusEvent` -->
-<Story
-  name="Focus"
-  args={{
-    onfocus: (e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
->
-  <SimpleSelect
-    onfocus={(e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onfocus Event', target);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>
-
-<!-- `e: SimpleSelectFocusEvent` -->
-<Story
-  name="Blur"
-  args={{
-    onblur: (e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onblur Event', target);
-    },
-  }}
->
-  <SimpleSelect
-    onblur={(e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onblur Event', target);
-    }}
-    options={storySimpleSelectOptions}
-  />
-</Story>

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

@@ -1,24 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SimpleSelect from '../SimpleSelect.svelte';
-  import {
-    storySimpleSelectArgTypes,
-    storySimpleSelectOptions,
-  } from '../SimpleSelect.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-  });
-</script>
-
-<Story name="Roundness 1x" />
-
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
-
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
-
-<Story name="Roundness False" args={{ roundness: false }} />

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

@@ -1,59 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import {} from './SimpleSelect.svelte';
-import SimpleSelect from './SimpleSelect.svelte';
-export const storySimpleSelectArgTypes = {
-    type: {
-        control: { type: 'select' },
-        options: ['text', 'tel', 'email', 'password', 'url', 'number'],
-    },
-    roundness: {
-        control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
-    },
-    size: {
-        control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
-    },
-};
-export const storySimpleSelectOptions = [
-    {
-        value: 'volvo',
-        label: 'Volvo',
-    },
-    {
-        value: 'saab',
-        label: 'Saab',
-    },
-    {
-        value: 'mercedes',
-        label: 'Mercedes',
-    },
-    {
-        value: 'audi',
-        label: 'Audi',
-    },
-    {
-        value: 'opel',
-        label: 'Opel',
-        disabled: true,
-    },
-];
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-});
-</script>
-
-<!-- SimpleSelect with default style -->
-<Story name="Default" />
-
-<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
-
-<Story name="No Outline" args={{ outline: false }} />
-
-<Story name="Error" args={{ error: true }} />
-
-<Story name="Disabled" args={{ disabled: true }} />

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

@@ -1,69 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, onchange, onblur, onfocus, before, after, error = false, value, placeholder, ref = $bindable(), options, } = $props();
-let focused = $state(false);
-function onfocusMod(e) {
-    focused = true;
-    if (onfocus) {
-        onfocus(e);
-    }
-}
-function onblurMod(e) {
-    focused = false;
-    if (onblur) {
-        onblur(e);
-    }
-}
-</script>
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class={['dodo-ui-SimpleSelect', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
->
-  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <select
-      {name}
-      {id}
-      {disabled}
-      {onchange}
-      onfocus={onfocusMod}
-      onblur={onblurMod}
-      {placeholder}
-      bind:this={ref}
-    >
-      {#each options as option (option.value)}
-        <option value={option.value} disabled={option.disabled} selected={value === option.value}>
-          {option.label}
-        </option>
-      {/each}
-    </select>
-  </InputEnclosure>
-</div>
-
-<style>.dodo-ui-SimpleSelect select {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-}
-.dodo-ui-SimpleSelect.size--normal select {
-  font-size: 1rem;
-  padding: 0 12px;
-}
-.dodo-ui-SimpleSelect.size--small select {
-  padding: 0 8px;
-  font-size: 0.9rem;
-}
-.dodo-ui-SimpleSelect.size--large select {
-  font-size: 1.1rem;
-  padding: 0 14px;
-}</style>

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

@@ -1,50 +0,0 @@
-export type SimpleSelectFocusEvent = FocusEvent & {
-    currentTarget: EventTarget & HTMLSelectElement;
-};
-export type SimpleSelectOption = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, FocusEventHandler } from 'svelte/elements';
-interface SimpleSelectProps {
-    /** Select ref */
-    ref?: HTMLSelectElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
-    /** How round should the border radius be? */
-    options: SimpleSelectOption[];
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Select value */
-    value?: string;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLSelectElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLSelectElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLSelectElement>;
-}
-declare const SimpleSelect: import("svelte").Component<SimpleSelectProps, {}, "ref">;
-type SimpleSelect = ReturnType<typeof SimpleSelect>;
-export default SimpleSelect;

package/dist/stories/components/Form/SimpleSelect/Size/Size.stories.svelte

@@ -1,20 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SimpleSelect from '../SimpleSelect.svelte';
-  import {
-    storySimpleSelectArgTypes,
-    storySimpleSelectOptions,
-  } from '../SimpleSelect.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-  });
-</script>
-
-<Story name="Normal" />
-<Story name="Small" args={{ size: 'small' }} />
-<Story name="Large" args={{ size: 'large' }} />

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

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

package/dist/types.d.ts

@@ -1,5 +0,0 @@
-/** Component Size */
-export type ComponentSize = 'normal' | 'small' | 'large';
-/** Component Roundness */
-export type ComponentRoundness = '1x' | '2x' | '3x';
-export type ComponentRoundnessFull = 'full';

package/dist/types.js

@@ -1 +0,0 @@
-export {};