@flightlesslabs/dodo-ui 0.12.0 → 0.13.0

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

@@ -24,22 +24,24 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
     </span>
   {/if}
 
-  <input
-    type="range"
-    class="NativeRangeSlider"
-    {min}
-    {max}
-    {step}
-    {oninput}
-    {onchange}
-    {onblur}
-    {onfocus}
-    {id}
-    {name}
-    {disabled}
-    bind:this={ref}
-    bind:value
-  />
+  <div class="RangeSliderContainer">
+    <input
+      type="range"
+      class="NativeRangeSlider"
+      {min}
+      {max}
+      {step}
+      {oninput}
+      {onchange}
+      {onblur}
+      {onfocus}
+      {id}
+      {name}
+      {disabled}
+      bind:this={ref}
+      bind:value
+    />
+  </div>
 
   {#if after}
     <span class="content--after">
@@ -111,19 +113,21 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
 .dodo-ui-RangeSlider {
   display: flex;
 }
+.dodo-ui-RangeSlider .RangeSliderContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 .dodo-ui-RangeSlider .NativeRangeSlider {
-  height: 100%;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   cursor: pointer;
-  width: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: flex;
   align-items: center;
-  flex: 1;
 }
 .dodo-ui-RangeSlider .NativeRangeSlider:focus {
   outline: none;
@@ -149,6 +153,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
   justify-content: center;
 }
 .dodo-ui-RangeSlider.size--normal {
+  min-height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-RangeSlider.size--normal .NativeRangeSlider {
   height: var(--dodo-ui-element-height-normal);
 }
 .dodo-ui-RangeSlider.size--normal .NativeRangeSlider::-webkit-slider-runnable-track {
@@ -176,6 +183,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
   margin-left: 12px;
 }
 .dodo-ui-RangeSlider.size--small {
+  min-height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-RangeSlider.size--small .NativeRangeSlider {
   height: var(--dodo-ui-element-height-small);
 }
 .dodo-ui-RangeSlider.size--small .NativeRangeSlider::-webkit-slider-runnable-track {
@@ -203,6 +213,9 @@ const percentageValue = $derived(((value - min) / (max - min)) * 100);
   margin-left: 8px;
 }
 .dodo-ui-RangeSlider.size--large {
+  min-height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-RangeSlider.size--large .NativeRangeSlider {
   height: var(--dodo-ui-element-height-large);
 }
 .dodo-ui-RangeSlider.size--large .NativeRangeSlider::-webkit-slider-runnable-track {

package/package.json

@@ -1,19 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.12.0",
-  "scripts": {
-    "build": "vite build && pnpm run prepack",
-    "preview": "vite preview",
-    "prepare": "svelte-kit sync || echo ''",
-    "prepack": "svelte-kit sync && svelte-package && publint",
-    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "format": "prettier --write .",
-    "lint": "prettier --check . && eslint .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
-    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
-    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
-  },
+  "version": "0.13.0",
   "homepage": "https://flightlesslabs.github.io/dodo-ui",
   "repository": {
     "type": "git",
@@ -49,48 +36,59 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.0.0",
-    "@eslint/compat": "^1.3.0",
-    "@eslint/js": "^9.29.0",
-    "@storybook/addon-svelte-csf": "5.0.3",
-    "@storybook/svelte": "^9.0.10",
-    "@storybook/sveltekit": "^9.0.10",
+    "@chromatic-com/storybook": "4.0.1",
+    "@eslint/compat": "^1.3.1",
+    "@eslint/js": "^9.32.0",
+    "@storybook/addon-docs": "^9.0.18",
+    "@storybook/addon-svelte-csf": "5.0.7",
+    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/sveltekit": "^9.0.18",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.5",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@vitest/browser": "^3.2.3",
-    "@vitest/coverage-v8": "^3.2.3",
-    "@vueless/storybook-dark-mode": "^9.0.5",
-    "eslint": "^9.29.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.2",
-    "globals": "^16.2.0",
-    "playwright": "^1.53.0",
-    "prettier": "^3.5.3",
+    "@sveltejs/kit": "^2.26.1",
+    "@sveltejs/package": "^2.4.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vueless/storybook-dark-mode": "^9.0.6",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "9.0.18",
+    "eslint-plugin-svelte": "^3.11.0",
+    "globals": "^16.3.0",
+    "playwright": "^1.54.1",
+    "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
     "sass": "^1.89.2",
-    "storybook": "^9.0.10",
-    "svelte": "^5.34.3",
-    "svelte-check": "^4.2.1",
+    "storybook": "^9.0.18",
+    "svelte": "^5.37.0",
+    "svelte-check": "^4.3.0",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.0",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.3"
+    "typescript-eslint": "^8.38.0",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4"
   },
   "keywords": [
     "svelte"
   ],
   "volta": {
     "node": "22.15.1",
-    "pnpm": "10.11.0"
+    "pnpm": "10.12.1"
   },
   "dependencies": {
-    "@iconify/svelte": "^5.0.0",
-    "@storybook/addon-docs": "^9.0.10",
-    "@storybook/addon-vitest": "^9.0.10",
+    "@iconify/svelte": "^5.0.1",
     "dayjs": "^1.11.13"
+  },
+  "scripts": {
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format"
   }
-}
+}

package/src/lib/stories/Home.mdx

@@ -0,0 +1,59 @@
+import { Source } from '@storybook/addon-docs/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. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+
+<Source
+  dark
+  language="js"
+  code={`
+import { Button } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+## Explore more
+
+- [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button, { buttonTypeArray } from './Button.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+  import { componentRoundnessArray } from '$lib/types/roundness.js';
+  import { componentColorArray } from '$lib/types/colors.js';
+  import { componentWeightArray } from '$lib/types/weight.js';
+  import { componentSizeArray } from '$lib/types/size.js';
+
+  export const storyButtonArgTypes: StoryBookArgTypes = {
+    type: {
+      control: { type: 'select' },
+      options: buttonTypeArray,
+    },
+    color: {
+      control: { type: 'select' },
+      options: componentColorArray,
+    },
+    variant: {
+      control: { type: 'select' },
+      options: componentWeightArray,
+    },
+    roundness: {
+      control: { type: 'select' },
+      options: componentRoundnessArray,
+    },
+    size: {
+      control: { type: 'select' },
+      options: componentSizeArray,
+    },
+  };
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: storyButtonArgTypes,
+  });
+</script>
+
+<!-- Button with default style -->
+<Story name="Primary">Click me!</Story>
+
+<!-- Button with border around it -->
+<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+
+<!-- Form submit button -->
+<Story name="Sumbit Button" args={{ type: 'submit' }}>Submit Form</Story>
+
+<!-- Form submit button -->
+<Story name="Full width Button" args={{ fullWidth: true }}>Click me!</Story>
+
+<!-- Anchor Link styled like a Button -->
+<Story
+  name="Link Button"
+  args={{ href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
+>
+  Link
+</Story>

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

@@ -0,0 +1,43 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</script>
+
+<Story name="Primary">Click me!</Story>
+<Story name="Secondary" args={{ color: 'secondary' }}>Click me!</Story>
+<Story name="Neutral" args={{ color: 'neutral' }}>Click me!</Story>
+<Story name="Safe" args={{ color: 'safe' }}>Click me!</Story>
+<Story name="Warning" args={{ color: 'warning' }}>Click me!</Story>
+<Story name="Danger" args={{ color: 'danger' }}>Click me!</Story>
+
+<Story name="Primary Text" args={{ color: 'primary', variant: 'text' }}>Click me!</Story>
+<Story name="Secondary Text" args={{ color: 'secondary', variant: 'text' }}>Click me!</Story>
+<Story name="Neutral Text" args={{ color: 'neutral', variant: 'text' }}>Click me!</Story>
+<Story name="Safe Text" args={{ color: 'safe', variant: 'text' }}>Click me!</Story>
+<Story name="Warning Text" args={{ color: 'warning', variant: 'text' }}>Click me!</Story>
+<Story name="Danger Text" args={{ color: 'danger', variant: 'text' }}>Click me!</Story>
+
+<Story name="Primary Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
+<Story name="Secondary Outline" args={{ color: 'secondary', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Neutral Outline" args={{ color: 'neutral', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Safe Outline" args={{ color: 'safe', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Warning Outline" args={{ color: 'warning', variant: 'text', outline: true }}>
+  Click me!
+</Story>
+<Story name="Danger Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
+  Click me!
+</Story>

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

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</script>
+
+<Story
+  name="Click"
+  args={{
+    onclick: (e: Event) => {
+      const target = e.target as HTMLButtonElement;
+
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
+    },
+  }}
+  asChild
+>
+  <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

@@ -0,0 +1,43 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</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 }}>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
+</Story>
+
+<!-- Circualr Icon button. -->
+<Story name="Icon Button Circular" args={{ compact: true, roundness: 'full' }}>
+  <Icon icon="material-symbols:app-badging" width="18" height="18" />
+</Story>
+
+<!-- Button with an icon in front. -->
+<Story name="Icon Before" asChild>
+  <Button>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+    Copy
+  </Button>
+</Story>
+
+<!-- Button with an icon in front. -->
+<Story name="Icon After" asChild>
+  <Button>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+    Download
+  </Button>
+</Story>

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

@@ -0,0 +1,23 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</script>
+
+<Story name="Roundness 1">Click me!</Story>
+
+<Story name="Roundness 2" args={{ roundness: 2 }}>Click me!</Story>
+
+<Story name="Roundness 3" args={{ roundness: 3 }}>Click me!</Story>
+
+<Story name="Roundness 0" args={{ roundness: 0 }}>Click me!</Story>
+
+<!-- Button with 50% roundness usefull for icon (Compact) buttons -->
+<Story name="Roundness Full" args={{ roundness: 'full', compact: true }}>C</Story>

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

@@ -0,0 +1,16 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</script>
+
+<Story name="Normal">Click me!</Story>
+<Story name="Small" args={{ size: 'small' }}>Click me!</Story>
+<Story name="Large" args={{ size: 'large' }}>Click me!</Story>

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

@@ -0,0 +1,18 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  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,
+  });
+</script>
+
+<Story name="Solid">Click me!</Story>
+
+<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
+
+<Story name="Text Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>

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

@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+  import DatePicker from '../DatePicker.svelte';
+  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Primary" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="Secondary" asChild>
+  <DatePicker {value} color="secondary" />
+</Story>
+
+<Story name="Neutral" asChild>
+  <DatePicker {value} color="neutral" />
+</Story>
+
+<Story name="Safe" asChild>
+  <DatePicker {value} color="safe" />
+</Story>
+
+<Story name="Warning" asChild>
+  <DatePicker {value} color="warning" />
+</Story>
+
+<Story name="Danger" asChild>
+  <DatePicker {value} color="danger" />
+</Story>

package/src/lib/stories/components/Form/DatePicker/Controls/Controls.stories.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DatePicker from '../DatePicker.svelte';
+  import { storyDatePickerArgTypes } from '../DatePicker.stories.svelte';
+  import getMoment from '$lib/stories/developer tools/helpers/Time/getMoment/getMoment.js';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: DatePicker,
+    tags: ['autodocs'],
+    argTypes: storyDatePickerArgTypes,
+    args: {
+      value: getMoment().toDate(),
+    },
+    parameters: {
+      docs: {
+        story: {
+          height: '400px',
+          inline: false,
+        },
+      },
+    },
+  });
+
+  let value = $state(getMoment().toDate());
+</script>
+
+<Story name="Normal" asChild>
+  <DatePicker {value} />
+</Story>
+
+<Story name="HideCalendarMonthSelector" asChild>
+  <DatePicker {value} showCalendarMonthSelector={false} />
+</Story>
+
+<Story name="HideCalendarYearSelector" asChild>
+  <DatePicker {value} showCalendarYearSelector={false} />
+</Story>
+
+<Story name="HideCalendarNavigator" asChild>
+  <DatePicker {value} showCalendarNavigator={false} />
+</Story>
+
+<Story name="HideControlsMonthList" asChild>
+  <DatePicker {value} showControlsMonthList={false} />
+</Story>
+
+<Story name="HideControlsYearList" asChild>
+  <DatePicker {value} showControlsYearList={false} />
+</Story>
+
+<Story name="DisabledNavigationPrev" asChild>
+  <DatePicker {value} disabledCalendarNavigationPrev />
+</Story>
+
+<Story name="DisabledNavigationNext" asChild>
+  <DatePicker {value} disabledCalendarNavigationNext />
+</Story>