@flightlesslabs/dodo-ui 0.2.0 → 0.3.0

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss

@@ -3,15 +3,15 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors($color-name) {
-  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
+  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
 
-  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
 
-  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
+  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
 }
 
 /// Mixin: generate-dodo-ui-button-colors
@@ -19,15 +19,15 @@
 /// across different interaction states (default, hover, active).
 /// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
 @mixin generate-dodo-ui-button-colors-dark($color-name) {
-  --dodo-ui-button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
 
-  --dodo-ui-button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
-  --dodo-ui-button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-50);
+  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
 
-  --dodo-ui-button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
+  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
+  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
+  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-100);
 }
 
 /// Mixin: generate-dodo-ui-button-color
@@ -38,31 +38,31 @@
     &.variant {
       &--text {
         color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-button-text-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-text-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-text-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
         }
 
         &.outline {
-          border-color: var(--dodo-ui-button-outline-#{$theme});
+          border-color: var(--dodo-ui-Button-outline-#{$theme});
         }
       }
 
       &--solid {
         color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-button-solid-#{$theme}-bg);
+        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
 
         &:hover {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-hover-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
         }
 
         &:active {
-          background-color: var(--dodo-ui-button-solid-#{$theme}-active-bg);
+          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
         }
       }
     }

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

@@ -0,0 +1,174 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { storyPasswordInputArgTypes } from '../PasswordInput.stories.svelte';
+  import PasswordInput, { type PasswordInputToggleEvent } from '../PasswordInput.svelte';
+  import type {
+    TextInputFocusEvent,
+    TextInputClipboardEvent,
+  } from '../../TextInput/TextInput.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+  });
+</script>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+>
+  <PasswordInput
+    oninput={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    }}
+  />
+</Story>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onChange Event', target.value);
+    },
+  }}
+>
+  <PasswordInput
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onchange Event', target.value);
+    }}
+  />
+</Story>
+
+<!-- `e: PasswordInputToggleEvent` -->
+<Story
+  name="Toggle"
+  args={{
+    ontoggle: (e: PasswordInputToggleEvent) => {
+      const target = e.event.target as HTMLButtonElement;
+
+      console.log('ontoggle Event', e, target);
+    },
+  }}
+>
+  <PasswordInput
+    ontoggle={(e: PasswordInputToggleEvent) => {
+      const target = e.event.target as HTMLButtonElement;
+
+      console.log('ontoggle Event', e, target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onfocus={(e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Blur"
+  args={{
+    onblur: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onblur={(e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onblur Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Copy"
+  args={{
+    oncopy: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    oncopy={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncopy Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Cut"
+  args={{
+    oncut: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    oncut={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('oncut Event', target);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputClipboardEvent` -->
+<Story
+  name="Paste"
+  args={{
+    onpaste: (e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    },
+  }}
+>
+  <PasswordInput
+    onpaste={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    }}
+  />
+</Story>

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

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PasswordInput from './PasswordInput.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyPasswordInputArgTypes: StoryBookArgTypes = {
+    roundness: {
+      control: { type: 'select' },
+      options: [false, '1x', '2x', '3x'],
+    },
+    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: PasswordInput,
+    tags: ['autodocs'],
+    argTypes: storyPasswordInputArgTypes,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<!-- PasswordInput 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 }} />
+
+<!-- Disable password toggle -->
+<Story name="No toggle" args={{ passwordToggle: false }} />
+
+<!-- Show Password by default -->
+<Story name="Show Password" args={{ defaultPasswordToggleState: true }} />

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

@@ -0,0 +1,361 @@
+<script lang="ts" module>
+  export type PasswordInputToggleEvent = {
+    event: Event;
+    toggle: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import type { ComponentSize } from '$lib/types.js';
+  import type { Snippet } from 'svelte';
+  import type {
+    ChangeEventHandler,
+    ClipboardEventHandler,
+    FocusEventHandler,
+    FormEventHandler,
+  } from 'svelte/elements';
+  import type { TextInputFocusEvent, TextInputRoundness } from '../TextInput/TextInput.svelte';
+  import Icon from '@iconify/svelte';
+
+  interface PasswordInputProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Toggle Password */
+    passwordToggle?: boolean;
+    /** Default Password Toggle State */
+    defaultPasswordToggleState?: boolean;
+    /** Toggle Password Icon */
+    passwordToggleIcon?: Snippet;
+    /** How round should the border radius be? */
+    roundness?: TextInputRoundness;
+    /** Add a border around the button. Default True */
+    outline?: boolean;
+    /** Input value */
+    value?: string;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** Button 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;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** ontoggle event handler */
+    ontoggle?: (e: PasswordInputToggleEvent) => void;
+  }
+
+  let {
+    size = 'normal',
+    roundness = '1x',
+    outline = true,
+    name,
+    id,
+    class: className = '',
+    disabled = false,
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onpaste,
+    oncopy,
+    oncut,
+    before,
+    after,
+    passwordToggleIcon,
+    error = false,
+    passwordToggle = true,
+    defaultPasswordToggleState = false,
+    value = $bindable<string>(),
+    placeholder,
+    ontoggle,
+  }: PasswordInputProps = $props();
+
+  let focused: boolean = $state(false);
+  let toggle: boolean = $state(defaultPasswordToggleState);
+
+  function onfocusMod(e: TextInputFocusEvent) {
+    focused = true;
+
+    if (onfocus) {
+      onfocus(e);
+    }
+  }
+
+  function onblurMod(e: TextInputFocusEvent) {
+    focused = false;
+
+    if (onblur) {
+      onblur(e);
+    }
+  }
+
+  function ontoggleMod(e: Event) {
+    toggle = !toggle;
+
+    const customEvent: PasswordInputToggleEvent = {
+      event: e,
+      toggle,
+    };
+
+    if (ontoggle) {
+      ontoggle(customEvent);
+    }
+  }
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  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
+  />
+
+  {#if passwordToggle && !disabled}
+    <button class="passwordToggle" title="Toggle password" onclick={ontoggleMod} class:toggle>
+      {#if passwordToggleIcon}
+        {@render passwordToggleIcon()}
+      {:else if toggle}
+        <Icon icon="mdi:eye-off" width="24" height="24" />
+      {:else}
+        <Icon icon="mdi:eye" width="24" height="24" />
+      {/if}
+    </button>
+  {/if}
+
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</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);
+
+    --dodo-ui-PasswordInput-ToggleButton-hover: var(--dodo-color-primary-700);
+  }
+
+  :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-ToggleButton-hover: var(--dodo-color-primary-600);
+  }
+
+  .dodo-ui-PasswordInput {
+    display: flex;
+    overflow: hidden;
+    color: var(--dodo-color-default-800);
+    transition: all 150ms;
+    border: 0;
+
+    input {
+      flex: 1;
+      border: 0;
+      outline: 0;
+      height: 100%;
+      background-color: transparent;
+      font-family: inherit;
+      color: inherit;
+      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;
+          }
+        }
+
+        .passwordToggle {
+          width: var(--dodo-ui-element-height-normal);
+        }
+      }
+
+      &--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;
+          }
+        }
+
+        .passwordToggle {
+          width: var(--dodo-ui-element-height-small);
+        }
+      }
+
+      &--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;
+          }
+        }
+
+        .passwordToggle {
+          width: var(--dodo-ui-element-height-large);
+        }
+      }
+    }
+
+    &.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);
+      }
+    }
+
+    .passwordToggle {
+      background-color: transparent;
+      outline: 0;
+      border: 0;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      cursor: pointer;
+      padding: 0;
+      margin-right: 4px;
+      color: var(--dodo-color-default-700);
+      transition: all 150ms;
+
+      &:hover {
+        color: var(--dodo-ui-PasswordInput-ToggleButton-hover);
+      }
+    }
+  }
+</style>

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

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

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