@flightlesslabs/dodo-ui 0.6.1 → 0.6.3

package/README.md

@@ -1,5 +1,7 @@
-![Sonny and Mariel high fiving.](https://flightlesslabs.github.io/dodo-ui/og.png)
+![Dodo logo](https://flightlesslabs.github.io/dodo-ui/og.png)
 
 # Dodo Ui
 
 An open-source, opinionated UI framework for Svelte.
+
+[Github](https://github.com/flightlesslabs/dodo-ui) | [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

package/dist/stories/Home.mdx

@@ -10,6 +10,9 @@ import item from '../../../package.json?raw';
 <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 />
@@ -56,5 +59,3 @@ Checkout documentation for [Button](?path=/docs/components-form-button--docs)
 - [Themes](?path=/docs/philosophy-themes--docs)
 - [Colors](?path=/docs/philosophy-colors--docs)
 - [Adjust Color Opacity](?path=/docs/philosophy-colors--docs#adjusting-opacity)
-- [Github](https://github.com/flightlesslabs/dodo-ui)
-- [NPM](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)

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

@@ -29,5 +29,5 @@ const { swatchType } = $props();
 
 <style>.Colors {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
 }</style>

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

@@ -1,15 +1,37 @@
 <script lang="ts">"use strict";
 const { backgroundColor } = $props();
+function onclick() {
+    navigator.clipboard.writeText(backgroundColor);
+}
 </script>
 
-<span class="Palette" style={`background-color: ${backgroundColor};`}></span>
+<!-- svelte-ignore a11y_consider_explicit_label -->
+<button
+  class="Palette"
+  style={`background-color: ${backgroundColor};`}
+  {onclick}
+  title="Click to copy value!"
+></button>
 
 <style>.Palette {
   display: flex;
-  width: 30px;
-  height: 30px;
-  margin-right: 8px;
+  width: 60px;
+  height: 60px;
   border-radius: 4px;
   border: 1px solid;
   border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+  background: transparent;
+  min-width: initial;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  outline: 0;
+  transition: all 100ms;
+}
+.Palette:hover {
+  border-width: 2px;
+}
+.Palette:active {
+  border-color: color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent);
+  border-width: 2px;
 }</style>

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

@@ -8,6 +8,7 @@ const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
   {:else}
     <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
   {/if}
+
   <div class="colorPaletteValue">{colorPaletteValue}</div>
 </div>
 
@@ -15,4 +16,9 @@ const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
   color: var(--dodo-color-default-900);
   display: flex;
   align-items: center;
+  flex-direction: column;
+  margin: 4px;
+}
+.Swatch .colorPaletteValue {
+  margin-top: 8px;
 }</style>

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

@@ -23,14 +23,18 @@ const { colorPalette, prefix, isColorPaletteValues = false } = $props();
   color: var(--dodo-color-default-900);
   margin: 0;
   padding: 0;
-  width: 100px;
+  width: 150px;
   margin: 16px 0;
+  display: flex;
+  width: 100%;
 }
 .Swatches b {
   text-transform: capitalize;
-  margin-bottom: 16px;
-  display: block;
+  display: flex;
   font-weight: 500;
+  width: 100px;
+  align-items: center;
+  margin-bottom: 30px;
 }
 .Swatches li {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -27,8 +27,8 @@
     "src/lib",
     "!src/lib/**/*.test.*",
     "!src/lib/**/*.spec.*",
-    "!src/lib/stories/*.stories.*",
-    "!src/lib/stories/*.mdx",
+    "!src/lib/stories/**/*.stories.*",
+    "!src/lib/stories/**/*.mdx",
     "!src/lib/stories/assets",
     "!src/lib/stories/philosophy"
   ],
@@ -50,7 +50,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
     "@eslint/compat": "^1.2.8",
-    "@eslint/js": "^9.24.0",
+    "@eslint/js": "^9.25.1",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/addon-svelte-csf": "5.0.0-next.28",
     "@storybook/blocks": "^8.6.12",
@@ -61,36 +61,36 @@
     "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.5",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@vitest/browser": "^3.1.1",
-    "@vitest/coverage-v8": "^3.1.1",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
-    "playwright": "^1.51.1",
+    "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.11",
-    "sass": "^1.86.3",
+    "publint": "^0.3.12",
+    "sass": "^1.87.0",
     "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.25.10",
-    "svelte-check": "^4.1.5",
+    "svelte": "^5.28.2",
+    "svelte-check": "^4.1.6",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.29.1",
-    "vite": "^6.2.5",
-    "vitest": "^3.1.1"
+    "typescript-eslint": "^8.31.0",
+    "vite": "^6.3.3",
+    "vitest": "^3.1.2"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
-    "node": "22.14.0",
-    "pnpm": "10.7.1"
+    "node": "22.15.0",
+    "pnpm": "10.9.0"
   },
   "dependencies": {
     "@iconify/svelte": "^4.2.0"

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>