@flightlesslabs/dodo-ui 0.1.5 → 0.3.0

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/stories/philosophy/Colors/Colors.mdx

@@ -0,0 +1,43 @@
+import { Meta, Story, Source } from '@storybook/blocks';
+import * as ColorsStories from './Colors.stories.svelte';
+import * as OpacityStories from './Opacity.stories.svelte';
+
+<Meta of={ColorsStories} />
+
+# Colors
+
+We are using an extensive color pallet identical to [Tailwind Css](https://tailwindcss.com/docs/colors) Colors. The colors are adjusted for dark and light themes.
+
+## Main Colors
+
+<Story of={ColorsStories.Main} />
+
+Neutral pallet
+
+<Story of={ColorsStories.ColorsNeutral} />
+
+Constant Colors
+
+<Story of={ColorsStories.ColorsConstant} />
+
+## Base Color
+
+<Story of={ColorsStories.ColorsBase} />
+
+Neutral pallet
+
+<Story of={ColorsStories.BaseColorsNeutral} />
+
+## Adjusting opacity
+
+Opacity can be adjusted using css `color-mix` function.
+
+<Source
+  dark
+  language="css"
+  code={`
+color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
+`}
+/>
+
+<Story of={OpacityStories.Main} meta={OpacityStories} />

package/dist/stories/philosophy/Colors/Colors.stories.svelte

@@ -0,0 +1,20 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Colors from './Colors.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Colors,
+    args: {
+        swatchType: 'colors',
+    },
+});
+</script>
+
+<Story name="Main" />
+
+<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
+
+<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
+
+<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
+
+<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />

package/dist/stories/philosophy/Colors/Colors.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Colors from './Colors.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Colors: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Colors = InstanceType<typeof Colors>;
+export default Colors;

package/dist/stories/philosophy/Colors/Colors.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import Swatches from './Swatches/Swatches.svelte';
+import { colorPalette, colorPaletteBase, colorPaletteNeutral } from './utils/color.js';
+const { swatchType } = $props();
+</script>
+
+<div class="Colors">
+  {#if swatchType === 'base-colors'}
+    {#each colorPaletteBase as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'base-colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" />
+    {/each}
+  {:else if swatchType === 'colors'}
+    {#each colorPalette as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} isColorPaletteValues />
+    {/each}
+  {:else if swatchType === 'colors-neutral'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} />
+    {/each}
+  {:else if swatchType === 'colors-constant'}
+    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
+      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-constant-" />
+    {/each}
+  {/if}
+</div>
+
+<style>.Colors {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

package/dist/stories/philosophy/Colors/Colors.svelte.d.ts

@@ -0,0 +1,6 @@
+interface ColorsProps {
+    swatchType?: 'base-colors' | 'base-colors-neutral' | 'colors' | 'colors-neutral' | 'colors-constant';
+}
+declare const Colors: import("svelte").Component<ColorsProps, {}, "">;
+type Colors = ReturnType<typeof Colors>;
+export default Colors;

package/dist/stories/philosophy/Colors/Opacity.stories.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Opacity from './Opacity.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Opacity,
+});
+</script>
+
+<Story name="Main" />

package/dist/stories/philosophy/Colors/Opacity.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Opacity from './Opacity.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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Opacity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Opacity = InstanceType<typeof Opacity>;
+export default Opacity;

package/dist/stories/philosophy/Colors/Opacity.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import Palette from './Swatches/Palette.svelte';
+</script>
+
+<div class="Opacity">
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 20%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 30%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 40%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 50%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 60%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 70%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 90%, transparent)" />
+  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 100%, transparent)" />
+</div>
+
+<style>.Opacity {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

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

package/dist/stories/philosophy/Colors/Swatches/Palette.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">"use strict";
+const { backgroundColor } = $props();
+</script>
+
+<span class="Palette" style={`background-color: ${backgroundColor};`}></span>
+
+<style>.Palette {
+  display: flex;
+  width: 30px;
+  height: 30px;
+  margin-right: 8px;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Palette.svelte.d.ts

@@ -0,0 +1,6 @@
+interface PaletteProps {
+    backgroundColor: string;
+}
+declare const Palette: import("svelte").Component<PaletteProps, {}, "">;
+type Palette = ReturnType<typeof Palette>;
+export default Palette;

package/dist/stories/philosophy/Colors/Swatches/Swatch.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import Palette from './Palette.svelte';
+const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
+</script>
+
+<div class="Swatch">
+  {#if colorPaletteValue}
+    <Palette backgroundColor={`var(${prefix}${colorPalette}-${colorPaletteValue})`} />
+  {:else}
+    <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
+  {/if}
+  <div class="colorPaletteValue">{colorPaletteValue}</div>
+</div>
+
+<style>.Swatch {
+  color: var(--dodo-color-default-900);
+  display: flex;
+  align-items: center;
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Swatch.svelte.d.ts

@@ -0,0 +1,8 @@
+interface SwatchProps {
+    colorPalette: string;
+    colorPaletteValue?: string;
+    prefix?: string;
+}
+declare const Swatch: import("svelte").Component<SwatchProps, {}, "">;
+type Swatch = ReturnType<typeof Swatch>;
+export default Swatch;

package/dist/stories/philosophy/Colors/Swatches/Swatches.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import { colorPaletteValues } from '../utils/color.js';
+import Swatch from './Swatch.svelte';
+const { colorPalette, prefix, isColorPaletteValues = false } = $props();
+</script>
+
+<ul class="Swatches">
+  <b>{colorPalette}</b>
+
+  {#if isColorPaletteValues}
+    {#each colorPaletteValues as colorPaletteValue (colorPaletteValue)}
+      <li>
+        <Swatch {colorPalette} {colorPaletteValue} {prefix} />
+      </li>
+    {/each}
+  {:else}
+    <li>
+      <Swatch {colorPalette} {prefix} />
+    </li>
+  {/if}
+</ul>
+
+<style>.Swatches {
+  color: var(--dodo-color-default-900);
+  margin: 0;
+  padding: 0;
+  width: 100px;
+  margin: 16px 0;
+}
+.Swatches b {
+  text-transform: capitalize;
+  margin-bottom: 16px;
+  display: block;
+  font-weight: 500;
+}
+.Swatches li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}</style>

package/dist/stories/philosophy/Colors/Swatches/Swatches.svelte.d.ts

@@ -0,0 +1,8 @@
+interface SwatchesProps {
+    colorPalette: string;
+    prefix?: string;
+    isColorPaletteValues?: boolean;
+}
+declare const Swatches: import("svelte").Component<SwatchesProps, {}, "">;
+type Swatches = ReturnType<typeof Swatches>;
+export default Swatches;

package/dist/stories/philosophy/Colors/utils/color.d.ts

@@ -0,0 +1,4 @@
+export declare const colorPaletteBase: string[];
+export declare const colorPaletteNeutral: string[];
+export declare const colorPalette: string[];
+export declare const colorPaletteValues: string[];

package/dist/stories/philosophy/Colors/utils/color.js

@@ -0,0 +1,38 @@
+export const colorPaletteBase = [
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+];
+export const colorPaletteNeutral = ['black', 'white'];
+export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'info'];
+export const colorPaletteValues = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+];

package/dist/stories/philosophy/Themes.mdx

@@ -0,0 +1,23 @@
+import { Source } from '@storybook/blocks';
+import darkThemeToggleImage from '../assets/dark-theme-toggle.png';
+
+# Themes
+
+## Dark theme
+
+dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
+
+<Source
+  dark
+  language="html"
+  code={`
+ <body class="dodo-theme--dark">
+ ...
+`}
+/>
+
+## Toggle theme in documentation
+
+Use the moon icon to toogle theme in documentation mode
+
+<img src={darkThemeToggleImage} />

package/dist/styles/_colors.css

@@ -1,9 +1,9 @@
 :root {
-  /* Base colors */
+  /* Neutral colors */
   --dodo-color-black: var(--dodo-color-base-black);
   --dodo-color-white: var(--dodo-color-base-white);
 
-  /* Base colors constants */
+  /* Constants colors */
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 

package/dist/styles/_components.css

@@ -1,10 +1,11 @@
 :root {
-  --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-small: 34px;
-  --dodo-ui-element-height-large: 48px;
+  --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;
 
-  --dodo-ui-element-roundness-base: 7px;
-  --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-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/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -29,7 +29,8 @@
     "!src/lib/**/*.spec.*",
     "!src/lib/stories/*.stories.*",
     "!src/lib/stories/*.mdx",
-    "!src/lib/stories/assets"
+    "!src/lib/stories/assets",
+    "!src/lib/stories/philosophy"
   ],
   "sideEffects": [
     "**/*.css"

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"