@flightlesslabs/dodo-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,166 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, } = $props();
+let focused = $state(false);
+function onfocusMod(e) {
+    focused = true;
+    if (onfocus) {
+        onfocus(e);
+    }
+}
+function onblurMod(e) {
+    focused = false;
+    if (onblur) {
+        onblur(e);
+    }
+}
+export {};
+</script>
+
+<div
+  class:outline
+  class:disabled
+  class:error
+  class:focused
+  class={['dodo-ui-TextInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
+>
+  {#if before}
+    <span class="content--before">
+      {@render before()}
+    </span>
+  {/if}
+  <input
+    {type}
+    {name}
+    {id}
+    {disabled}
+    {oninput}
+    {onchange}
+    onfocus={onfocusMod}
+    onblur={onblurMod}
+    {onpaste}
+    {oncopy}
+    {oncut}
+    {placeholder}
+    bind:value
+  />
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</div>
+
+<style>:global(:root) {
+  --dodo-ui-TextInput-border-color: var(--dodo-color-default-500);
+  --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-400);
+  --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-200);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-TextInput-border-color: var(--dodo-color-default-600);
+  --dodo-ui-TextInput-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-TextInput-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-TextInput-disabled-bg: var(--dodo-color-default-100);
+  --dodo-ui-TextInput-disabled-color: var(--dodo-color-default-500);
+}
+
+.dodo-ui-TextInput {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-default-800);
+  transition: all 150ms;
+  border: 0;
+}
+.dodo-ui-TextInput input {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+}
+.dodo-ui-TextInput.outline {
+  border-style: solid;
+  border-width: var(--dodo-ui-element-border-width);
+  border-color: var(--dodo-ui-TextInput-border-color);
+}
+.dodo-ui-TextInput.focused {
+  border-color: var(--dodo-ui-TextInput-focus-border-color);
+}
+.dodo-ui-TextInput.error {
+  border-color: var(--dodo-ui-TextInput-error-border-color);
+}
+.dodo-ui-TextInput.disabled {
+  cursor: initial;
+  background-color: var(--dodo-ui-TextInput-disabled-bg);
+  color: var(--dodo-ui-TextInput-disabled-color);
+  border-color: var(--dodo-ui-TextInput-disabled-bg);
+}
+.dodo-ui-TextInput .content--after:empty, .dodo-ui-TextInput .content--before:empty {
+  display: none;
+}
+.dodo-ui-TextInput .content--after, .dodo-ui-TextInput .content--before {
+  display: inline-flex;
+  height: 100%;
+  align-items: center;
+}
+.dodo-ui-TextInput.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-TextInput.size--normal input {
+  font-size: 1rem;
+  padding: 0 12px;
+}
+.dodo-ui-TextInput.size--normal .content--before {
+  margin-left: 12px;
+  margin-right: -4px;
+}
+.dodo-ui-TextInput.size--normal .content--after {
+  margin-right: 12px;
+  margin-left: -4px;
+}
+.dodo-ui-TextInput.size--small {
+  height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-TextInput.size--small input {
+  padding: 0 8px;
+  font-size: 0.9rem;
+}
+.dodo-ui-TextInput.size--small .content--before {
+  margin-left: 8px;
+  margin-right: -2px;
+}
+.dodo-ui-TextInput.size--small .content--after {
+  margin-right: 8px;
+  margin-left: -2px;
+}
+.dodo-ui-TextInput.size--large {
+  height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-TextInput.size--large input {
+  font-size: 1.1rem;
+  padding: 0 14px;
+}
+.dodo-ui-TextInput.size--large .content--before {
+  margin-left: 14px;
+  margin-right: -4px;
+}
+.dodo-ui-TextInput.size--large .content--after {
+  margin-right: 14px;
+  margin-left: -4px;
+}
+.dodo-ui-TextInput.roundness--1x {
+  border-radius: var(--dodo-ui-element-roundness-1x);
+}
+.dodo-ui-TextInput.roundness--2x {
+  border-radius: var(--dodo-ui-element-roundness-2x);
+}
+.dodo-ui-TextInput.roundness--3x {
+  border-radius: var(--dodo-ui-element-roundness-3x);
+}</style>

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

@@ -0,0 +1,56 @@
+export type TextInputRoundness = ComponentRoundness | false;
+export type TextInputType = 'text' | 'tel' | 'email' | 'password' | 'url' | 'number';
+export type TextInputFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+};
+export type TextInputClipboardEvent = ClipboardEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+};
+import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+interface TextInputProps {
+    /** Input type? */
+    type?: TextInputType;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** 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>;
+}
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

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

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

package/dist/stories/components/Form/TextInput/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/styles/_components.css

@@ -1,10 +1,11 @@
 :root {
-  --dodo-ui-element-height-normal: 2.5rem;
-  --dodo-ui-element-height-small: 2.125rem;
-  --dodo-ui-element-height-large: 3rem;
+  --dodo-ui-element-height-small: 34px;
+  --dodo-ui-element-height-normal: 40px;
+  --dodo-ui-element-height-large: 50px;
 
-  --dodo-ui-element-roundness-base: 0.438rem;
-  --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-base);
-  --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-base) * 2);
-  --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-base) * 4);
+  --dodo-ui-element-roundness-1x: 7px;
+  --dodo-ui-element-roundness-2x: 13px;
+  --dodo-ui-element-roundness-3x: 31px;
+
+  --dodo-ui-element-border-width: 1px;
 }

package/dist/styles/_minimal-reset.css

@@ -0,0 +1,3 @@
+* {
+  box-sizing: border-box;
+}

package/dist/styles/global.css

@@ -1,3 +1,4 @@
+@import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';

package/package.json

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

package/src/lib/index.ts

@@ -10,3 +10,16 @@ export type {
   ButtonLinkTarget,
   ButtonLinkReferrerpolicy,
 } from '$lib/stories/components/Form/Button/Button.svelte';
+
+/** Form: TextInput */
+export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
+export type {
+  TextInputRoundness,
+  TextInputType,
+  TextInputFocusEvent,
+  TextInputClipboardEvent,
+} from '$lib/stories/components/Form/TextInput/TextInput.svelte';
+
+/** Form: PasswordInput */
+export { default as PasswordInput } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type { PasswordInputToggleEvent } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';

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

@@ -19,7 +19,7 @@
     },
     roundness: {
       control: { type: 'select' },
-      options: [false, 1, 2, 3, 'full'],
+      options: [false, '1x', '2x', '3x', 'full'],
     },
     size: {
       control: { type: 'select' },
@@ -54,20 +54,25 @@
   <Button>Click me!</Button>
 </Story>
 
-<Story name="Disabled" args={{ disabled: true }}>
-  <Button disabled>Click me!</Button>
-</Story>
-
 <!-- Button with border around it -->
 <Story name="Outline" args={{ outline: true }}>
   <Button outline>Click me!</Button>
 </Story>
 
+<Story name="Disabled" args={{ disabled: true }}>
+  <Button disabled>Click me!</Button>
+</Story>
+
 <!-- Form submit button -->
 <Story name="Sumbit Button" args={{ type: 'submit' }}>
   <Button type="submit">Submit Form</Button>
 </Story>
 
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>
+  <Button fullWidth>Click me!</Button>
+</Story>
+
 <!-- Anchor Link styled like a Button -->
 <Story
   name="Link Button"

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

@@ -15,6 +15,7 @@
 <script lang="ts">
   import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '$lib/types.js';
   import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
 
   interface ButtonProps {
     /** Button contents goes here*/
@@ -23,6 +24,8 @@
     type?: 'button' | 'submit';
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Full width button? */
+    fullWidth?: boolean;
     /** What color to use? */
     color?: ButtonColor;
     /** How round should the border radius be? */
@@ -48,7 +51,7 @@
     /** Custom css class*/
     class?: string;
     /** The onclick event handler */
-    onclick?: (e: MouseEvent) => void;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
     /** Turn Button into link */
     href?: string;
     /** Link button: download  */
@@ -81,6 +84,7 @@
     variant = 'text',
     outline = false,
     compact = false,
+    fullWidth = false,
     name,
     id,
     title,
@@ -104,7 +108,7 @@
 
 {#snippet buttonContent()}
   {#if before}
-    <span class="button-content--before">
+    <span class="content--before">
       {@render before()}
     </span>
   {/if}
@@ -116,7 +120,7 @@
   {/if}
 
   {#if after}
-    <span class="button-content--after">
+    <span class="content--after">
       {@render after()}
     </span>
   {/if}
@@ -138,8 +142,9 @@
     class:outline
     class:compact
     class:disabled
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -153,8 +158,9 @@
   <button
     class:outline
     class:compact
+    class:fullWidth
     class={[
-      'dodo-ui-button',
+      'dodo-ui-Button',
       `size--${size}`,
       `color--${color}`,
       `variant--${variant}`,
@@ -176,8 +182,8 @@
   @use 'utils/scss/mixins.scss' as *;
 
   :global(:root) {
-    --dodo-ui-button-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-button-disabled-bg: var(--dodo-color-default-200);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-default-400);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-200);
 
     @include generate-dodo-ui-button-colors(default);
     @include generate-dodo-ui-button-colors(primary);
@@ -188,8 +194,8 @@
   }
 
   :global(.dodo-theme--dark) {
-    --dodo-ui-button-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-button-disabled-color: var(--dodo-color-default-500);
+    --dodo-ui-Button-disabled-bg: var(--dodo-color-default-100);
+    --dodo-ui-Button-disabled-color: var(--dodo-color-default-500);
 
     @include generate-dodo-ui-button-colors-dark(default);
     @include generate-dodo-ui-button-colors-dark(primary);
@@ -199,7 +205,7 @@
     @include generate-dodo-ui-button-colors-dark(info);
   }
 
-  .dodo-ui-button {
+  .dodo-ui-Button {
     cursor: pointer;
     outline: none;
     transition: all 150ms;
@@ -209,9 +215,9 @@
     justify-content: center;
     align-items: center;
     font-family: inherit;
-    font-weight: 500;
     background-color: transparent;
-    border: 1px solid;
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
     border-color: transparent;
     outline: 0;
     color: inherit;
@@ -242,15 +248,15 @@
 
     &.roundness {
       &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1);
+        border-radius: var(--dodo-ui-element-roundness-1x);
       }
 
       &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2);
+        border-radius: var(--dodo-ui-element-roundness-2x);
       }
 
       &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3);
+        border-radius: var(--dodo-ui-element-roundness-3x);
       }
 
       &--full {
@@ -273,17 +279,17 @@
       &.variant {
         &--text,
         &--solid {
-          background-color: var(--dodo-ui-button-disabled-bg);
-          color: var(--dodo-ui-button-disabled-color);
+          background-color: var(--dodo-ui-Button-disabled-bg);
+          color: var(--dodo-ui-Button-disabled-color);
 
           &:hover {
-            background-color: var(--dodo-ui-button-disabled-bg);
-            color: var(--dodo-ui-button-disabled-color);
+            background-color: var(--dodo-ui-Button-disabled-bg);
+            color: var(--dodo-ui-Button-disabled-color);
           }
 
           &:active {
-            background-color: var(--dodo-ui-button-disabled-bg);
-            color: var(--dodo-ui-button-disabled-color);
+            background-color: var(--dodo-ui-Button-disabled-bg);
+            color: var(--dodo-ui-Button-disabled-color);
           }
 
           &.outline {
@@ -316,7 +322,11 @@
       }
     }
 
-    .button-content {
+    &.fullWidth {
+      width: 100%;
+    }
+
+    .content {
       &--after,
       &--before {
         display: inline-flex;

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

@@ -0,0 +1,42 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
+  import Button from '../Button.svelte';
+  import { storyButtonArgTypes } from '../Button.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story
+  name="Click"
+  args={{
+    outline: false,
+    disabled: false,
+    compact: false,
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+>
+  <Button
+    onclick={(e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    }}
+  >
+    Click me!
+  </Button>
+</Story>