@flightlesslabs/dodo-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,59 @@
+export type PasswordInputToggleEvent = {
+    event: Event;
+    toggle: boolean;
+};
+import type { ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { TextInputRoundness } from '../TextInput/TextInput.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;
+}
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/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/dist/stories/components/Form/{ExampleButton/ExampleButton.stories.svelte.d.ts → PasswordInput/Roundness/Roundness.stories.svelte.d.ts}

@@ -1,17 +1,16 @@
-export default ExampleButton;
-type ExampleButton = SvelteComponent<{
+export default Roundness;
+type Roundness = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const ExampleButton: $$__sveltets_2_IsomorphicComponent<{
+declare const Roundness: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ExampleButton from './ExampleButton.svelte';
 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;

package/dist/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' }} />

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

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

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

@@ -0,0 +1,148 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import TextInput, {} from '../TextInput.svelte';
+import { storyTextInputArgTypes } from '../TextInput.stories.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>
+
+<Story
+  name="Input"
+  args={{
+    oninput: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('Input Event', target.value);
+    },
+  }}
+>
+  <TextInput
+    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);
+    },
+  }}
+>
+  <TextInput
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onchange Event', target.value);
+    }}
+  />
+</Story>
+
+<!-- `e: TextInputFocusEvent` -->
+<Story
+  name="Focus"
+  args={{
+    onfocus: (e: TextInputFocusEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onfocus Event', target);
+    },
+  }}
+>
+  <TextInput
+    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);
+    },
+  }}
+>
+  <TextInput
+    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);
+    },
+  }}
+>
+  <TextInput
+    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);
+    },
+  }}
+>
+  <TextInput
+    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);
+    },
+  }}
+>
+  <TextInput
+    onpaste={(e: TextInputClipboardEvent) => {
+      const target = e.target as HTMLInputElement;
+
+      console.log('onpaste Event', target);
+    }}
+  />
+</Story>

package/dist/stories/components/Form/TextInput/Events/Events.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 Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

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

@@ -0,0 +1,21 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.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,
+    args: { value: 'Hello world!' },
+  });
+</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/TextInput/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/components/Form/TextInput/Size/Size.stories.svelte

@@ -0,0 +1,17 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import TextInput from '../TextInput.svelte';
+  import { storyTextInputArgTypes } from '../TextInput.stories.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,
+    args: { value: 'Hello world!' },
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

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

@@ -0,0 +1,35 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import TextInput from './TextInput.svelte';
+export const storyTextInputArgTypes = {
+    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'],
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: TextInput,
+    tags: ['autodocs'],
+    argTypes: storyTextInputArgTypes,
+    args: { value: 'Hello world!' },
+});
+</script>
+
+<!-- TextInput 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/TextInput/TextInput.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import TextInput from './TextInput.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyTextInputArgTypes: StoryBookArgTypes;
+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 TextInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextInput = InstanceType<typeof TextInput>;
+export default TextInput;