@flightlesslabs/dodo-ui 0.11.1 → 0.12.1

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

@@ -0,0 +1,476 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ChangeEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { Snippet } from 'svelte';
+
+  export interface RangeSliderProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** What color to use? */
+    color?: ComponentColor;
+    /** RangeSlider ref */
+    ref?: HTMLInputElement;
+    /** How round should the border radius be? */
+    roundness?: ComponentRoundness;
+    /** How round should the thumb border radius be? */
+    thumbRoundness?: ComponentRoundness;
+    /** RangeSlider value */
+    value: number;
+    /** disabled state */
+    disabled?: boolean;
+    /** Id */
+    id?: string;
+    /** name */
+    name?: 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>;
+    /** Min Value */
+    min?: number;
+    /** Max Value */
+    max?: number;
+    /** Value Increment step */
+    step?: number;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    color = 'primary',
+    size = 'normal',
+    roundness = 1,
+    thumbRoundness = 'full',
+    class: className = '',
+    ref = $bindable<HTMLInputElement>(),
+    value = $bindable<number>(),
+    disabled = false,
+    id,
+    min = 0,
+    max = 100,
+    step = 0,
+    name,
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    before,
+    after,
+  }: RangeSliderProps = $props();
+
+  const percentageValue = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div
+  class:disabled
+  class={[
+    'dodo-ui-RangeSlider',
+    `size--${size}`,
+    `roundness--${roundness}`,
+    `thumbRoundness--${thumbRoundness}`,
+    `color--${color}`,
+    className,
+  ].join(' ')}
+  style={`--dodo-ui-RangeSlider-value-percent: ${percentageValue};`}
+>
+  {#if before}
+    <span class="content--before">
+      {@render before()}
+    </span>
+  {/if}
+
+  <input
+    type="range"
+    class="NativeRangeSlider"
+    {min}
+    {max}
+    {step}
+    {oninput}
+    {onchange}
+    {onblur}
+    {onfocus}
+    {id}
+    {name}
+    {disabled}
+    bind:this={ref}
+    bind:value
+  />
+
+  {#if after}
+    <span class="content--after">
+      {@render after()}
+    </span>
+  {/if}
+</div>
+
+<style lang="scss">
+  @use 'utils/scss/mixins.scss' as *;
+
+  :global(:root) {
+    --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-200);
+    --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-300);
+    --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-300);
+
+    @include generate-dodo-ui-range-slider-colors(neutral);
+    @include generate-dodo-ui-range-slider-colors(primary);
+    @include generate-dodo-ui-range-slider-colors(secondary);
+    @include generate-dodo-ui-range-slider-colors(safe);
+    @include generate-dodo-ui-range-slider-colors(warning);
+    @include generate-dodo-ui-range-slider-colors(danger);
+  }
+
+  :global(.dodo-theme--dark) {
+    --dodo-ui-RangeSlider-track-bg: var(--dodo-color-neutral-400);
+    --dodo-ui-RangeSlider-track-filled-disabled-bg: var(--dodo-color-neutral-500);
+    --dodo-ui-RangeSlider-thumb-disabled-bg: var(--dodo-color-neutral-500);
+
+    @include generate-dodo-ui-range-slider-colors-dark(neutral);
+    @include generate-dodo-ui-range-slider-colors-dark(primary);
+    @include generate-dodo-ui-range-slider-colors-dark(secondary);
+    @include generate-dodo-ui-range-slider-colors-dark(safe);
+    @include generate-dodo-ui-range-slider-colors-dark(warning);
+    @include generate-dodo-ui-range-slider-colors-dark(danger);
+  }
+
+  .dodo-ui-RangeSlider {
+    display: flex;
+
+    .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;
+
+      &:focus {
+        outline: none;
+      }
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none; /* Override default look */
+        appearance: none;
+        border: 0;
+        transition: all 150ms;
+      }
+
+      &::-moz-range-thumb {
+        border: 0;
+        transition: all 150ms;
+      }
+    }
+
+    .content {
+      &--before {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &--after {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    &.size {
+      &--normal {
+        height: var(--dodo-ui-element-height-normal);
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            height: var(--dodo-ui-track-element-height-normal);
+          }
+
+          &::-moz-range-track {
+            height: var(--dodo-ui-track-element-height-normal);
+          }
+
+          &::-moz-range-progress {
+            height: var(--dodo-ui-track-element-height-normal);
+          }
+
+          // Thumb
+          &::-webkit-slider-thumb {
+            margin-top: -0.5em;
+            height: calc(var(--dodo-ui-element-height-normal) / 2);
+            width: calc(var(--dodo-ui-element-height-normal) / 2);
+          }
+
+          &::-moz-range-thumb {
+            height: calc(var(--dodo-ui-element-height-normal) / 2);
+            width: calc(var(--dodo-ui-element-height-normal) / 2);
+          }
+        }
+
+        .content {
+          &--before {
+            margin-right: 12px;
+          }
+
+          &--after {
+            margin-left: 12px;
+          }
+        }
+      }
+
+      &--small {
+        height: var(--dodo-ui-element-height-small);
+
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            height: var(--dodo-ui-track-element-height-small);
+          }
+
+          &::-moz-range-track {
+            height: var(--dodo-ui-track-element-height-small);
+          }
+
+          &::-moz-range-progress {
+            height: var(--dodo-ui-track-element-height-small);
+          }
+
+          // Thumb
+          &::-webkit-slider-thumb {
+            margin-top: -0.45em;
+            height: calc(var(--dodo-ui-element-height-small) / 2);
+            width: calc(var(--dodo-ui-element-height-small) / 2);
+          }
+
+          &::-moz-range-thumb {
+            height: calc(var(--dodo-ui-element-height-small) / 2);
+            width: calc(var(--dodo-ui-element-height-small) / 2);
+          }
+        }
+
+        .content {
+          &--before {
+            margin-right: 8px;
+          }
+
+          &--after {
+            margin-left: 8px;
+          }
+        }
+      }
+
+      &--large {
+        height: var(--dodo-ui-element-height-large);
+
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            height: var(--dodo-ui-track-element-height-large);
+          }
+
+          &::-moz-range-track {
+            height: var(--dodo-ui-track-element-height-large);
+          }
+
+          &::-moz-range-progress {
+            height: var(--dodo-ui-track-element-height-large);
+          }
+
+          // Thumb
+          &::-webkit-slider-thumb {
+            margin-top: -0.6em;
+            height: calc(var(--dodo-ui-element-height-large) / 2);
+            width: calc(var(--dodo-ui-element-height-large) / 2);
+          }
+
+          &::-moz-range-thumb {
+            height: calc(var(--dodo-ui-element-height-large) / 2);
+            width: calc(var(--dodo-ui-element-height-large) / 2);
+          }
+        }
+
+        .content {
+          &--before {
+            margin-right: 14px;
+          }
+
+          &--after {
+            margin-left: 14px;
+          }
+        }
+      }
+    }
+
+    &.color {
+      @include generate-dodo-ui-range-slider-color(neutral);
+      @include generate-dodo-ui-range-slider-color(primary);
+      @include generate-dodo-ui-range-slider-color(secondary);
+      @include generate-dodo-ui-range-slider-color(safe);
+      @include generate-dodo-ui-range-slider-color(warning);
+      @include generate-dodo-ui-range-slider-color(danger);
+    }
+
+    &.roundness {
+      &--1 {
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            border-radius: var(--dodo-ui-element-roundness-1);
+          }
+
+          &::-moz-range-track {
+            border-radius: var(--dodo-ui-element-roundness-1);
+          }
+
+          &::-moz-range-progress {
+            border-radius: var(--dodo-ui-element-roundness-1);
+          }
+        }
+      }
+
+      &--2 {
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            border-radius: var(--dodo-ui-element-roundness-2);
+          }
+
+          &::-moz-range-track {
+            border-radius: var(--dodo-ui-element-roundness-2);
+          }
+
+          &::-moz-range-progress {
+            border-radius: var(--dodo-ui-element-roundness-2);
+          }
+        }
+      }
+
+      &--3 {
+        .NativeRangeSlider {
+          &::-webkit-slider-runnable-track {
+            border-radius: var(--dodo-ui-element-roundness-3);
+          }
+
+          &::-moz-range-track {
+            border-radius: var(--dodo-ui-element-roundness-3);
+          }
+
+          &::-moz-range-progress {
+            border-radius: var(--dodo-ui-element-roundness-3);
+          }
+        }
+      }
+    }
+
+    &.thumbRoundness {
+      &--1 {
+        .NativeRangeSlider {
+          // Thumb
+          &::-webkit-slider-thumb {
+            border-radius: var(--dodo-ui-element-roundness-1);
+          }
+
+          &::-moz-range-thumb {
+            border-radius: var(--dodo-ui-element-roundness-1);
+          }
+        }
+      }
+
+      &--2 {
+        .NativeRangeSlider {
+          // Thumb
+          &::-webkit-slider-thumb {
+            border-radius: var(--dodo-ui-element-roundness-2);
+          }
+
+          &::-moz-range-thumb {
+            border-radius: var(--dodo-ui-element-roundness-2);
+          }
+        }
+      }
+
+      &--3 {
+        .NativeRangeSlider {
+          // Thumb
+          &::-webkit-slider-thumb {
+            border-radius: var(--dodo-ui-element-roundness-3);
+          }
+
+          &::-moz-range-thumb {
+            border-radius: var(--dodo-ui-element-roundness-3);
+          }
+        }
+      }
+
+      &--full {
+        .NativeRangeSlider {
+          // Thumb
+          &::-webkit-slider-thumb {
+            border-radius: 50%;
+          }
+
+          // Thumb
+          &::-moz-range-thumb {
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    .NativeRangeSlider {
+      &[disabled] {
+        cursor: initial;
+
+        &::-webkit-slider-runnable-track {
+          background: linear-gradient(
+            to right,
+            var(--dodo-ui-RangeSlider-track-filled-disabled-bg) 0%,
+            var(--dodo-ui-RangeSlider-track-filled-disabled-bg)
+              calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
+            var(--dodo-ui-RangeSlider-track-bg)
+              calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
+            var(--dodo-ui-RangeSlider-track-bg) 100%
+          );
+        }
+
+        &::-moz-range-progress {
+          background: var(--dodo-ui-RangeSlider-track-filled-disabled-bg);
+        }
+
+        &::-webkit-slider-thumb {
+          background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+
+          &:hover {
+            background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+          }
+
+          &:focus-visible {
+            background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+          }
+
+          &:active {
+            background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+          }
+        }
+
+        &::-moz-range-thumb {
+          background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+
+          &:active {
+            background: var(--dodo-ui-RangeSlider-thumb-disabled-bg);
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RangeSlider from '../RangeSlider.svelte';
+  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: RangeSlider,
+    tags: ['autodocs'],
+    argTypes: storyRangeSliderArgTypes,
+  });
+</script>
+
+<Story name="Roundness 1" />
+
+<Story name="Roundness 2" args={{ roundness: 2 }} />
+
+<Story name="Roundness 3" args={{ roundness: 3 }} />
+
+<Story name="Roundness 0" args={{ roundness: 0 }} />
+
+<Story name="Thumb Roundness Full" />
+
+<Story name="Thumb Roundness 0" args={{ thumbRoundness: 0 }} />
+
+<Story name="Thumb Roundness 1" args={{ thumbRoundness: 1 }} />
+
+<Story name="Thumb Roundness 2" args={{ thumbRoundness: 2 }} />
+
+<Story name="Thumb Roundness 3" args={{ thumbRoundness: 3 }} />

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

@@ -0,0 +1,16 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RangeSlider from '../RangeSlider.svelte';
+  import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: RangeSlider,
+    tags: ['autodocs'],
+    argTypes: storyRangeSliderArgTypes,
+  });
+</script>
+
+<Story name="Normal" />
+<Story name="Small" args={{ size: 'small' }} />
+<Story name="Large" args={{ size: 'large' }} />

package/src/lib/stories/components/Form/RangeSlider/WithIcon/WithIcon.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RangeSlider from '../RangeSlider.svelte';
+  import { storyRangeSliderArgTypes } from '../RangeSlider.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: RangeSlider,
+    tags: ['autodocs'],
+    argTypes: storyRangeSliderArgTypes,
+  });
+
+  let value = $state<number>(30);
+</script>
+
+<!-- RangeSlider icon in front. -->
+<Story name="Icon Before" asChild>
+  <RangeSlider {value}>
+    {#snippet before()}
+      <Icon icon="material-symbols:content-copy" />
+    {/snippet}
+  </RangeSlider>
+</Story>
+
+<!-- RangeSlider icon in front. -->
+<Story name="Icon After" asChild>
+  <RangeSlider {value}>
+    {#snippet after()}
+      <Icon icon="material-symbols:download-2" />
+    {/snippet}
+  </RangeSlider>
+</Story>

package/src/lib/stories/components/Form/RangeSlider/utils/scss/mixins.scss

@@ -0,0 +1,91 @@
+/// Mixin: generate-dodo-ui-range-slider-colors
+/// Generates CSS custom properties for Dodo UI range-slider styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-range-slider-colors($color-name) {
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
+
+  --dodo-ui-RangeSlider-track-filled-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+}
+
+/// Mixin: generate-dodo-ui-range-slider-colors
+/// Generates CSS custom properties for Dodo UI range-slider styles (text & solid)
+/// across different interaction states (default, hover, active).
+/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
+@mixin generate-dodo-ui-range-slider-colors-dark($color-name) {
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-400);
+  --dodo-ui-RangeSlider-thumb-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
+
+  --dodo-ui-RangeSlider-track-filled-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
+}
+
+/// Mixin: generate-dodo-ui-range-slider-color
+/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
+/// @param {String} $theme - e.g., default, safe, danger, etc.
+@mixin generate-dodo-ui-range-slider-color($theme) {
+  &--#{$theme} {
+    .NativeRangeSlider {
+      &::-webkit-slider-runnable-track {
+        background-color: var(--dodo-ui-RangeSlider-track-#{$theme}-bg);
+      }
+
+      &::-moz-range-track {
+        background-color: var(--dodo-ui-RangeSlider-track-#{$theme}-bg);
+      }
+
+      &:focus-visible {
+        &::-webkit-slider-thumb {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
+        }
+
+        &::-moz-range-thumb {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
+        }
+      }
+
+      &::-webkit-slider-runnable-track {
+        background: linear-gradient(
+          to right,
+          var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg) 0%,
+          var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg)
+            calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
+          var(--dodo-ui-RangeSlider-track-bg)
+            calc(var(--dodo-ui-RangeSlider-value-percent, 50%) * 1%),
+          var(--dodo-ui-RangeSlider-track-bg) 100%
+        );
+      }
+
+      &::-moz-range-progress {
+        background: var(--dodo-ui-RangeSlider-track-filled-#{$theme}-bg);
+      }
+
+      // Thumb
+      &::-webkit-slider-thumb {
+        background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-bg);
+
+        &:hover {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
+        }
+      }
+
+      &::-moz-range-thumb {
+        background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-bg);
+
+        &:hover {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-hover-bg);
+        }
+
+        &:active {
+          background: var(--dodo-ui-RangeSlider-thumb-#{$theme}-active-bg);
+        }
+      }
+    }
+  }
+}

package/src/lib/stories/developer tools/directives/drag/drag.ts

@@ -0,0 +1,47 @@
+export function drag(node: HTMLElement) {
+  let dragging = false;
+
+  function getX(e: MouseEvent | TouchEvent): number {
+    return 'touches' in e ? e.touches[0].clientX : e.clientX;
+  }
+
+  function handleStart(e: MouseEvent | TouchEvent) {
+    dragging = true;
+    const x = getX(e);
+    node.dispatchEvent(new CustomEvent('dragstart', { detail: { x } }));
+
+    window.addEventListener('mousemove', handleMove);
+    window.addEventListener('mouseup', handleEnd);
+    window.addEventListener('touchmove', handleMove);
+    window.addEventListener('touchend', handleEnd);
+  }
+
+  function handleMove(e: MouseEvent | TouchEvent) {
+    if (!dragging) return;
+    const x = getX(e);
+
+    node.dispatchEvent(new CustomEvent('dragging', { detail: { x } }));
+  }
+
+  function handleEnd(e: MouseEvent | TouchEvent) {
+    if (!dragging) return;
+    dragging = false;
+    const x = getX(e);
+    node.dispatchEvent(new CustomEvent('dragend', { detail: { x } }));
+
+    window.removeEventListener('mousemove', handleMove);
+    window.removeEventListener('mouseup', handleEnd);
+    window.removeEventListener('touchmove', handleMove);
+    window.removeEventListener('touchend', handleEnd);
+  }
+
+  node.addEventListener('mousedown', handleStart);
+  node.addEventListener('touchstart', handleStart, { passive: true });
+
+  return {
+    destroy() {
+      node.removeEventListener('mousedown', handleStart);
+      node.removeEventListener('touchstart', handleStart);
+    },
+  };
+}

package/src/lib/styles/_components.css

@@ -4,6 +4,11 @@
   --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-large: 50px;
 
+  /* Size Thin elements */
+  --dodo-ui-track-element-height-small: 6px;
+  --dodo-ui-track-element-height-normal: 8px;
+  --dodo-ui-track-element-height-large: 10px;
+
   /* Roundness */
   --dodo-ui-element-roundness-1: 0.4375em;
   --dodo-ui-element-roundness-2: 0.8125em;