@flightlesslabs/dodo-ui 0.6.5 → 0.6.6

package/src/lib/styles/_shadow.css

@@ -1,39 +1,32 @@
 :root {
-  --dodo-shadow-color: #0000000d;
+  --dodo-shadow-color: rgba(0, 0, 0, 0.11);
 }
 
-.dodo-shadow-1x {
-  --dodo-shadow: 0 1px var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
-}
-
-.dodo-shadow-2x {
-  --dodo-shadow: 0 1px 2px 0 var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
+.dodo-theme--dark {
+  --dodo-shadow-color: rgba(0, 0, 0, 0.09);
 }
 
-.dodo-shadow-3x {
-  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+.dodo-shadow-1 {
+  --dodo-shadow: 0 1px 3px var(--dodo-shadow-color), 0 1px 2px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-4x {
-  --dodo-shadow: 0 4px 6px -1px var(--dodo-shadow-color), 0 2px 4px -2px var(--dodo-shadow-color);
+.dodo-shadow-2 {
+  --dodo-shadow: 0 3px 6px var(--dodo-shadow-color), 0 3px 6px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-5x {
-  --dodo-shadow: 0 10px 15px -3px var(--dodo-shadow-color), 0 4px 6px -4px var(--dodo-shadow-color);
+.dodo-shadow-3 {
+  --dodo-shadow: 0 6px 10px var(--dodo-shadow-color), 0 5px 17px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-6x {
-  --dodo-shadow:
-    0 20px 25px -5px var(--dodo-shadow-color), 0 8px 10px -6px var(--dodo-shadow-color);
+.dodo-shadow-4 {
+  --dodo-shadow: 0 10px 18px var(--dodo-shadow-color), 0 6px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-7x {
-  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+.dodo-shadow-5 {
+  --dodo-shadow: 0 14px 28px var(--dodo-shadow-color), 0 10px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }

package/src/lib/styles/_space.css

@@ -0,0 +1,7 @@
+:root {
+  /* Space */
+  /* Example: calc(var(--dodo-ui-space) * 2), calc(var(--dodo-ui-space) / 2) */
+  --dodo-ui-space-small: 6px;
+  --dodo-ui-space: 8px;
+  --dodo-ui-space-large: 10px;
+}

package/src/lib/styles/global.css

@@ -1,6 +1,7 @@
 @import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
+@import '_space.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/src/lib/types/colors.ts

@@ -0,0 +1,16 @@
+/** Component Color*/
+export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
+export const componentColorPriorityArray: ComponentColorPriority[] = [
+  'primary',
+  'secondary',
+  'neutral',
+];
+
+export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
+export const componentColorSeverityArray: ComponentColorSeverity[] = ['safe', 'warning', 'danger'];
+
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+export const componentColorArray: ComponentColor[] = [
+  ...componentColorPriorityArray,
+  ...componentColorSeverityArray,
+];

package/src/lib/types/roundness.ts

@@ -0,0 +1,3 @@
+/** Component Roundness */
+export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
+export const componentRoundnessArray: ComponentRoundness[] = [0, 1, 2, 3, 'full'];

package/src/lib/types/shadow.ts

@@ -0,0 +1,3 @@
+/** Component Shadow */
+export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
+export const componentShadowArray: ComponentShadow[] = [0, 1, 2, 3, 4, 5];

package/src/lib/types/size.ts

@@ -0,0 +1,3 @@
+/** Component Size */
+export type ComponentSize = 'normal' | 'small' | 'large';
+export const componentSizeArray: ComponentSize[] = ['normal', 'small', 'large'];

package/src/lib/types/weight.ts

@@ -0,0 +1,3 @@
+/** Component Weight */
+export type ComponentWeight = 'solid' | 'text';
+export const componentWeightArray: ComponentWeight[] = ['solid', 'text'];

package/dist/types.d.ts

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

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/src/lib/stories/Home.mdx

@@ -1,61 +0,0 @@
-import { Source } from '@storybook/blocks';
-import item from '../../../package.json?raw';
-
-<main style={{ textAlign: 'center' }}>
-
-<img src="dodo-circle-6.png" style={{ width: 200, height: 'auto' }} />
-
-# Dodo UI
-
-<h3 style={{ fontWeight: 500 }}>v{JSON.parse(item)?.version}</h3>
-
-<h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
-
-### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
-
-</main>
-
-<br />
-<br />
-
-## Install
-
-pnpm
-
-<Source
-  dark
-  language="bash"
-  code={`
-pnpm add @flightlesslabs/dodo-ui
-`}
-/>
-
-npm
-
-<Source
-  dark
-  language="bash"
-  code={`
-npm i @flightlesslabs/dodo-ui
-`}
-/>
-
-## Use it!
-
-Lets import [Button](?path=/docs/components-form-button--docs) component
-
-<Source
-  dark
-  language="js"
-  code={`
-import { Button } '@flightlesslabs/dodo-ui';
-`}
-/>
-
-Checkout documentation for [Button](?path=/docs/components-form-button--docs)
-
-## Explore more
-
-- [Themes](?path=/docs/philosophy-themes--docs)
-- [Colors](?path=/docs/philosophy-colors--docs)
-- [Adjust Color Opacity](?path=/docs/philosophy-colors--docs#adjusting-opacity)

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

@@ -1,82 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
-  import Button from './Button.svelte';
-  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
-
-  export const storyButtonArgTypes: StoryBookArgTypes = {
-    type: {
-      control: { type: 'select' },
-      options: ['button', 'submit'],
-    },
-    color: {
-      control: { type: 'select' },
-      options: ['default', 'secondary', 'primary', 'safe', 'warning', 'danger'],
-    },
-    variant: {
-      control: { type: 'select' },
-      options: ['text', 'solid'],
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: [false, '1x', '2x', '3x', 'full'],
-    },
-    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: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
-  });
-</script>
-
-<!-- ⚠️ Test Button: Do not use! -->
-<Story
-  name="Test Button"
-  args={{
-    outline: false,
-    disabled: false,
-    compact: false,
-    _unsafeChildrenStringForTesting: 'Click me!',
-  }}
-/>
-
-<!-- Button with default style -->
-<Story name="Default" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>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"
-  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
->
-  <Button href="https://www.w3schools.com/tags/tag_a.asp" target="_blank">Link</Button>
-</Story>

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

@@ -1,68 +0,0 @@
-<script module>
-  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="Default" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Primary" args={{ color: 'primary' }}><Button color="primary">Click me!</Button></Story>
-<Story name="Secondary" args={{ color: 'secondary' }}>
-  <Button color="secondary">Click me!</Button>
-</Story>
-<Story name="Safe" args={{ color: 'safe' }}><Button color="safe">Click me!</Button></Story>
-<Story name="Warning" args={{ color: 'warning' }}><Button color="warning">Click me!</Button></Story>
-<Story name="Danger" args={{ color: 'danger' }}><Button color="danger">Click me!</Button></Story>
-
-<Story
-  name="Default Solid"
-  args={{ outline: false, disabled: false, compact: false, variant: 'solid' }}
->
-  <Button variant="solid">Click me!</Button>
-</Story>
-<Story name="Primary Solid" args={{ color: 'primary', variant: 'solid' }}>
-  <Button color="primary" variant="solid">Click me!</Button>
-</Story>
-<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid' }}>
-  <Button color="secondary" variant="solid">Click me!</Button>
-</Story>
-<Story name="Safe Solid" args={{ color: 'safe', variant: 'solid' }}>
-  <Button color="safe" variant="solid">Click me!</Button>
-</Story>
-<Story name="Warning Solid" args={{ color: 'warning', variant: 'solid' }}>
-  <Button color="warning" variant="solid">Click me!</Button>
-</Story>
-<Story name="Danger Solid" args={{ color: 'danger', variant: 'solid' }}>
-  <Button color="danger" variant="solid">Click me!</Button>
-</Story>
-
-<Story name="Default Outline" args={{ outline: true, disabled: false, compact: false }}>
-  <Button outline>Click me!</Button>
-</Story>
-<Story name="Primary Outline" args={{ outline: true, color: 'primary' }}>
-  <Button color="primary" outline>Click me!</Button>
-</Story>
-<Story name="Secondary Outline" args={{ outline: true, color: 'secondary' }}>
-  <Button color="secondary" outline>Click me!</Button>
-</Story>
-<Story name="Safe Outline" args={{ outline: true, color: 'safe' }}>
-  <Button color="safe" outline>Click me!</Button>
-</Story>
-<Story name="Warning Outline" args={{ outline: true, color: 'warning' }}>
-  <Button color="warning" outline>Click me!</Button>
-</Story>
-<Story name="Danger Outline" args={{ outline: true, color: 'danger' }}>
-  <Button color="danger" outline>Click me!</Button>
-</Story>

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

@@ -1,42 +0,0 @@
-<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>

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

@@ -1,51 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
-  import Button from '../Button.svelte';
-  import { storyButtonArgTypes } from '../Button.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: Button,
-    tags: ['autodocs'],
-    argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
-  });
-</script>
-
-<!-- Compact button with paddings stripped out and fixed size. We are using this icon library https://iconify.design/docs/icon-components/svelte/ -->
-<Story name="Icon Button" args={{ compact: true }}>
-  <Button compact>
-    <Icon icon="material-symbols:app-badging" width="18" height="18" />
-  </Button>
-</Story>
-
-<!-- Circualr Icon button. -->
-<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
-  <Button roundness="full" compact>
-    <Icon icon="material-symbols:app-badging" width="18" height="18" />
-  </Button>
-</Story>
-
-<!-- Button with an icon in front. -->
-<Story name="Icon Before">
-  <Button>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-    Copy
-  </Button>
-</Story>
-
-<!-- Button with an icon in front. -->
-<Story name="Icon After">
-  <Button>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-    Download
-  </Button>
-</Story>

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

@@ -1,49 +0,0 @@
-<script module>
-  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="Roundness 1x" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-
-<Story
-  name="Roundness 2x"
-  args={{ outline: false, disabled: false, compact: false, roundness: '2x' }}
->
-  <Button roundness="2x">Click me!</Button>
-</Story>
-
-<Story
-  name="Roundness 3x"
-  args={{ outline: false, disabled: false, compact: false, roundness: '3x' }}
->
-  <Button roundness="3x">Click me!</Button>
-</Story>
-
-<Story
-  name="Roundness False"
-  args={{ outline: false, disabled: false, compact: false, roundness: false }}
->
-  <Button roundness={false}>Click me!</Button>
-</Story>
-
-<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
-<Story
-  name="Roundness Full"
-  args={{ outline: false, disabled: false, compact: false, roundness: 'full' }}
->
-  <Button roundness="full">C</Button>
-</Story>

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

@@ -1,22 +0,0 @@
-<script module>
-  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="Normal" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Small" args={{ size: 'small' }}><Button size="small">Click me!</Button></Story>
-<Story name="Large" args={{ size: 'large' }}><Button size="large">Click me!</Button></Story>

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

@@ -1,21 +0,0 @@
-<script module>
-  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="Text" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Solid" args={{ variant: 'solid' }}><Button variant="solid">Click me!</Button></Story>

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

@@ -1,29 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import FormControl from './FormControl.svelte';
-  import TextInput from '../TextInput/TextInput.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: FormControl,
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story name="Default" args={{ label: 'Hello there' }} />
-
-<Story name="Example TextInput" args={{ label: 'Whats your first name?' }}>
-  <FormControl label="Whats your first name?" for="first-name-01">
-    <TextInput placeholder="First name" id="first-name-01" />
-  </FormControl>
-</Story>
-
-<Story name="ErrorMessage" args={{ label: 'Whats your first name?' }}>
-  <FormControl
-    label="Whats your first name?"
-    for="first-name-02"
-    errorMessage="This is an error message"
-  >
-    <TextInput value="John Smith" id="first-name-02" error />
-  </FormControl>
-</Story>

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

@@ -1,23 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Label from './Label.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Label,
-    tags: ['autodocs'],
-  });
-</script>
-
-<!-- ⚠️ Test Label: Do not use! -->
-<Story
-  name="Test Label"
-  args={{
-    _unsafeChildrenStringForTesting: 'This is a form label',
-  }}
-/>
-
-<!-- Label with default style -->
-<Story name="Default">
-  <Label>This is a form label</Label>
-</Story>

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

@@ -1,36 +0,0 @@
-<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="Secondary" args={{ color: 'secondary' }}>
-  <Message color="secondary">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>

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

@@ -1,35 +0,0 @@
-<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', 'secondary', 'safe', 'warning', 'danger'],
-    },
-    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: storyMessageArgTypes,
-  });
-</script>
-
-<!-- ⚠️ Test Message: Do not use! -->
-<Story
-  name="Test Message"
-  args={{
-    _unsafeChildrenStringForTesting: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  }}
-/>
-
-<Story name="Default">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>