@flightlesslabs/dodo-ui 0.11.0 → 0.12.0

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/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/components/Popper/Popper.svelte

@@ -20,6 +20,8 @@
     open?: boolean;
     /** Full width Popper? */
     fullWidth?: boolean;
+    /** override Full width for Popup? */
+    popupFullWidth?: boolean;
     /** PopperPopup ref */
     popupRef?: HTMLDivElement;
     /** PopperPopup contents goes here */
@@ -73,24 +75,26 @@
     popperHeightForVerticalPosition,
     lockPoistions,
     fullWidth = false,
+    popupFullWidth: popupFullWidthRaw,
   }: PopperProps = $props();
 
+  const popupFullWidth = $derived(popupFullWidthRaw !== undefined ? popupFullWidthRaw : fullWidth);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customPopupTyped = customPopup as any;
 
-  let popperContainerRef = $state<HTMLDivElement>();
   let popperLocation = $state<DOMRect>();
 
   function capturePopperLocation() {
-    if (!popperContainerRef) {
+    if (!ref) {
       return;
     }
 
-    popperLocation = popperContainerRef.getBoundingClientRect();
+    popperLocation = ref.getBoundingClientRect();
   }
 
   $effect(() => {
-    if (!popperContainerRef) {
+    if (!ref) {
       return;
     }
 
@@ -111,11 +115,9 @@
   {id}
   use:clickOutside={onClickOutside}
 >
-  <div class="PopperContainer" bind:this={popperContainerRef}>
-    {#if children}
-      {@render children()}
-    {/if}
-  </div>
+  {#if children}
+    {@render children()}
+  {/if}
 
   {#if customPopupTyped}
     {@render customPopupTyped(popperLocation)}
@@ -131,6 +133,7 @@
       {popupOffsetY}
       {popperHeightForVerticalPosition}
       {lockPoistions}
+      fullWidth={popupFullWidth}
       class={popupClass}
     >
       {#if popupChildren}
@@ -149,11 +152,7 @@
     &.fullWidth {
       display: flex;
       width: 100%;
-
-      .PopperContainer {
-        display: block;
-        width: 100%;
-      }
+      flex-direction: column;
     }
   }
 </style>