@flightlesslabs/dodo-ui 0.4.0 → 0.5.0

package/dist/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+interface InputEnclosureProps {
+    /** InputEnclosure contents goes here */
+    children?: Snippet;
+    /** InputEnclosure ref */
+    ref?: HTMLDivElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness | false;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** disabled state */
+    disabled?: boolean;
+    /** is there any associated Error ? */
+    error?: boolean;
+    /** is focused */
+    focused?: boolean;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+}
+declare const InputEnclosure: import("svelte").Component<InputEnclosureProps, {}, "ref">;
+type InputEnclosure = ReturnType<typeof InputEnclosure>;
+export default InputEnclosure;

package/dist/stories/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte

@@ -0,0 +1,20 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from '../InputEnclosure.svelte';
+  import { storyInputEnclosureArgTypes } from '../InputEnclosure.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: InputEnclosure,
+    tags: ['autodocs'],
+    argTypes: storyInputEnclosureArgTypes,
+  });
+</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/developer tools/components/InputEnclosure/Roundness/Roundness.stories.svelte.d.ts

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

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

package/dist/stories/developer tools/components/InputEnclosure/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/InputEnclosure/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,47 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from '../InputEnclosure.svelte';
+  import { storyInputEnclosureArgTypes } from '../InputEnclosure.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: InputEnclosure,
+    tags: ['autodocs'],
+    argTypes: storyInputEnclosureArgTypes,
+  });
+</script>
+
+<!-- InputEnclosure icon in front. -->
+<Story name="Icon Before">
+  <InputEnclosure>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<!-- InputEnclosure icon in front. -->
+<Story name="Icon After">
+  <InputEnclosure>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <InputEnclosure size="small">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <InputEnclosure size="large">
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </InputEnclosure>
+</Story>

package/dist/stories/developer tools/components/InputEnclosure/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",

package/src/lib/index.ts

@@ -5,6 +5,9 @@ export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from '
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
@@ -17,7 +20,6 @@ export type {
 /** Form: TextInput */
 export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 export type {
-  TextInputRoundness,
   TextInputType,
   TextInputFocusEvent,
   TextInputClipboardEvent,
@@ -36,3 +38,10 @@ export { default as FormControl } from '$lib/stories/components/Form/FormControl
 /** Form: Message */
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
 export type { MessageColor } from '$lib/stories/components/Form/Message/Message.svelte';
+
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type {
+  SimpleSelectFocusEvent,
+  SimpleSelectOption,
+} from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';

package/src/lib/stories/components/Form/FormControl/FormControl.svelte

@@ -52,7 +52,7 @@
 <style lang="scss">
   :global(:root) {
     --dodo-ui-FormControl-LabelSection-gap: 8px;
-    --dodo-ui-FormControl-errorMessage-gap: 16px;
+    --dodo-ui-FormControl-errorMessage-gap: 10px;
   }
 
   .dodo-ui-FormControl {

package/src/lib/stories/components/Form/Message/Color/Color.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Default">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Primary" args={{ color: 'primary' }}>
+  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Safe" args={{ color: 'safe' }}>
+  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Danger" args={{ color: 'danger' }}>
+  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Info" args={{ color: 'info' }}>
+  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

package/src/lib/stories/components/Form/Message/Message.stories.svelte

@@ -1,17 +1,24 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Message from './Message.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyMessageArgTypes: StoryBookArgTypes = {
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'small', 'large'],
+    },
+  };
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
     component: Message,
     tags: ['autodocs'],
-    argTypes: {
-      color: {
-        control: { type: 'select' },
-        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
-      },
-    },
+    argTypes: storyMessageArgTypes,
   });
 </script>
 
@@ -26,23 +33,3 @@
 <Story name="Default">
   <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
 </Story>
-
-<Story name="Primary" args={{ color: 'primary' }}>
-  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Safe" args={{ color: 'safe' }}>
-  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Warning" args={{ color: 'warning' }}>
-  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Danger" args={{ color: 'danger' }}>
-  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
-<Story name="Info" args={{ color: 'info' }}>
-  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>

package/src/lib/stories/components/Form/Message/Message.svelte

@@ -3,6 +3,8 @@
 </script>
 
 <script lang="ts">
+  import type { ComponentSize } from '$lib/types.js';
+
   import type { Snippet } from 'svelte';
 
   interface MessageProps {
@@ -12,6 +14,8 @@
     ref?: HTMLDivElement;
     /** What color to use? */
     color?: MessageColor;
+    /** Message size */
+    size?: ComponentSize;
     /** Custom css class*/
     class?: string;
     /** Test: ⚠️ Unsafe Children String. Do Not use*/
@@ -24,10 +28,14 @@
     color = 'default',
     ref = $bindable<HTMLDivElement>(),
     _unsafeChildrenStringForTesting,
+    size = 'normal',
   }: MessageProps = $props();
 </script>
 
-<div class={['dodo-ui-Message', `color--${color}`, className].join(' ')} bind:this={ref}>
+<div
+  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
+  bind:this={ref}
+>
   {#if children}
     {@render children()}
   {:else if _unsafeChildrenStringForTesting}
@@ -37,11 +45,24 @@
 
 <style lang="scss">
   .dodo-ui-Message {
-    font-size: 1rem;
     letter-spacing: 0.3px;
     display: flex;
     font-family: inherit;
 
+    &.size {
+      &--normal {
+        font-size: 1rem;
+      }
+
+      &--small {
+        font-size: 0.9rem;
+      }
+
+      &--large {
+        font-size: 1.1rem;
+      }
+    }
+
     &.color {
       &--default {
         color: var(--dodo-color-default-800);

package/src/lib/stories/components/Form/Message/Size/Size.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

package/src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
   import type {
     ChangeEventHandler,
@@ -14,9 +14,10 @@
     FocusEventHandler,
     FormEventHandler,
   } from 'svelte/elements';
-  import type { TextInputFocusEvent, TextInputRoundness } from '../TextInput/TextInput.svelte';
+  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
   import Icon from '@iconify/svelte';
   import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 
   interface PasswordInputProps {
     /** How large should the button be? */
@@ -30,7 +31,7 @@
     /** Toggle Password Icon */
     customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: TextInputRoundness;
+    roundness?: ComponentRoundness | false;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */
@@ -143,74 +144,41 @@
   class:toggle
   class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-  <input
-    type={passwordToggle && toggle ? 'text' : 'password'}
-    {name}
-    {id}
-    {disabled}
-    {oninput}
-    {onchange}
-    onfocus={onfocusMod}
-    onblur={onblurMod}
-    {onpaste}
-    {oncopy}
-    {oncut}
-    {placeholder}
-    bind:value
-    bind:this={ref}
-    {readonly}
-  />
-
-  {#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>
-  {/if}
-
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
+  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
+    <input
+      type={passwordToggle && toggle ? 'text' : 'password'}
+      {name}
+      {id}
+      {disabled}
+      {oninput}
+      {onchange}
+      onfocus={onfocusMod}
+      onblur={onblurMod}
+      {onpaste}
+      {oncopy}
+      {oncut}
+      {placeholder}
+      bind:value
+      bind:this={ref}
+      {readonly}
+    />
+
+    {#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>
+    {/if}
+  </InputEnclosure>
 </div>
 
 <style lang="scss">
-  :global(:root) {
-    --dodo-ui-PasswordInput-border-color: var(--dodo-color-default-500);
-    --dodo-ui-PasswordInput-focus-border-color: var(--dodo-color-primary-500);
-    --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-500);
-
-    --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-200);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-PasswordInput-border-color: var(--dodo-color-default-600);
-    --dodo-ui-PasswordInput-focus-border-color: var(--dodo-color-primary-600);
-    --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-600);
-
-    --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-500);
-  }
-
   .dodo-ui-PasswordInput {
-    display: flex;
-    overflow: hidden;
-    color: var(--dodo-color-default-800);
-    transition: all 150ms;
-    border: 0;
-
     input {
       flex: 1;
       border: 0;
@@ -222,116 +190,26 @@
       letter-spacing: 0.3px;
     }
 
-    &.outline {
-      border-style: solid;
-      border-width: var(--dodo-ui-element-border-width);
-      border-color: var(--dodo-ui-PasswordInput-border-color);
-    }
-
-    &.focused {
-      border-color: var(--dodo-ui-PasswordInput-focus-border-color);
-    }
-
-    &.error {
-      border-color: var(--dodo-ui-PasswordInput-error-border-color);
-    }
-
-    &.disabled {
-      cursor: initial;
-      background-color: var(--dodo-ui-PasswordInput-disabled-bg);
-      color: var(--dodo-ui-PasswordInput-disabled-color);
-      border-color: var(--dodo-ui-PasswordInput-disabled-bg);
-    }
-
-    .content {
-      &--after,
-      &--before {
-        &:empty {
-          display: none;
-        }
-      }
-
-      &--after,
-      &--before {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-    }
-
     &.size {
       &--normal {
-        height: var(--dodo-ui-element-height-normal);
         input {
           font-size: 1rem;
           padding: 0 12px;
         }
-
-        .content {
-          &--before {
-            margin-left: 12px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 12px;
-            margin-left: -4px;
-          }
-        }
       }
 
       &--small {
-        height: var(--dodo-ui-element-height-small);
         input {
           padding: 0 8px;
           font-size: 0.9rem;
         }
-
-        .content {
-          &--before {
-            margin-left: 8px;
-            margin-right: -2px;
-          }
-
-          &--after {
-            margin-right: 8px;
-            margin-left: -2px;
-          }
-        }
       }
 
       &--large {
-        height: var(--dodo-ui-element-height-large);
         input {
           font-size: 1.1rem;
           padding: 0 14px;
         }
-
-        .content {
-          &--before {
-            margin-left: 14px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 14px;
-            margin-left: -4px;
-          }
-        }
-      }
-    }
-
-    &.roundness {
-      &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1x);
-      }
-
-      &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2x);
-      }
-
-      &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3x);
       }
     }
   }