@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/dist/stories/components/Form/Radio/utils/scss/mixins.scss

@@ -1,85 +0,0 @@
-/// Mixin: generate-dodo-ui-radio-colors
-/// Generates CSS custom properties for Dodo UI radio 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-radio-colors($color-name) {
-  --dodo-ui-Radio-#{$color-name}-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-Radio-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Radio-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-400);
-
-  --dodo-ui-Radio-#{$color-name}-checked-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-Radio-#{$color-name}-checked-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-Radio-#{$color-name}-checked-active-bg: var(--dodo-color-#{$color-name}-700);
-}
-
-/// Mixin: generate-dodo-ui-radio-colors
-/// Generates CSS custom properties for Dodo UI radio 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-radio-colors-dark($color-name) {
-  --dodo-ui-Radio-#{$color-name}-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 90%,
-    #fff
-  );
-  --dodo-ui-Radio-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 90%,
-    #fff
-  );
-  --dodo-ui-Radio-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-200) 90%,
-    #fff
-  );
-
-  --dodo-ui-Radio-#{$color-name}-checked-bg: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-Radio-#{$color-name}-checked-hover-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Radio-#{$color-name}-checked-active-bg: var(--dodo-color-#{$color-name}-200);
-}
-
-/// Mixin: generate-dodo-ui-radio-color
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-radio-color($theme) {
-  &--#{$theme} {
-    .Radio {
-      background-color: var(--dodo-ui-Radio-#{$theme}-bg);
-    }
-
-    input:checked:not([disabled]) {
-      & + .Radio {
-        .RadioHandle {
-          background-color: var(--dodo-ui-Radio-#{$theme}-checked-bg);
-        }
-      }
-    }
-
-    &:hover {
-      .Radio {
-        background-color: var(--dodo-ui-Radio-#{$theme}-hover-bg);
-      }
-
-      input:checked:not([disabled]) {
-        & + .Radio {
-          .RadioHandle {
-            background-color: var(--dodo-ui-Radio-#{$theme}-checked-hover-bg);
-          }
-        }
-      }
-    }
-
-    &:active {
-      .Radio {
-        background-color: var(--dodo-ui-Radio-#{$theme}-active-bg);
-      }
-
-      input:checked:not([disabled]) {
-        & + .Radio {
-          .RadioHandle {
-            background-color: var(--dodo-ui-Radio-#{$theme}-checked-active-bg);
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,19 +0,0 @@
-<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="Primary" />
-<Story name="Secondary" args={{ color: 'secondary' }} />
-<Story name="Neutral" args={{ color: 'neutral' }} />
-<Story name="Safe" args={{ color: 'safe' }} />
-<Story name="Warning" args={{ color: 'warning' }} />
-<Story name="Danger" args={{ color: 'danger' }} />

package/dist/stories/components/Form/RangeSlider/Color/Color.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Color;
-type Color = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Color: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,59 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { storyRangeSliderArgTypes } from '../RangeSlider.stories.svelte';
-import RangeSlider from '../RangeSlider.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(0);
-</script>
-
-<Story
-  name="Input"
-  args={{
-    value,
-    oninput: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    },
-  }}
-/>
-
-<Story
-  name="Change"
-  args={{
-    value,
-    onchange: (e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onChange Event', target.value);
-    },
-  }}
-/>
-
-<Story
-  name="Focus"
-  args={{
-    value,
-    onfocus: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
-/>
-
-<Story
-  name="Blur"
-  args={{
-    value,
-    onblur: (e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    },
-  }}
-/>

package/dist/stories/components/Form/RangeSlider/Events/Events.stories.svelte.d.ts

@@ -1,18 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Events = InstanceType<typeof Events>;
-export default Events;

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

@@ -1,64 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import RangeSlider from './RangeSlider.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentSizeArray } from '../../../../types/size.js';
-import { componentColorArray } from '../../../../types/colors.js';
-export const storyRangeSliderArgTypes = {
-    color: {
-        control: { type: 'select' },
-        options: componentColorArray,
-    },
-    roundness: {
-        control: { type: 'select' },
-        options: componentRoundnessArray,
-    },
-    thumbRoundness: {
-        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: RangeSlider,
-    tags: ['autodocs'],
-    argTypes: storyRangeSliderArgTypes,
-});
-let value = $state(30);
-</script>
-
-<!-- RangeSlider with default style -->
-<Story
-  name="Default"
-  args={{
-    value,
-  }}
-/>
-
-<Story
-  name="Step"
-  args={{
-    value,
-    step: 10,
-  }}
-/>
-
-<Story
-  name="MinMax"
-  args={{
-    value,
-    min: 0,
-    max: 1500,
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    value: 30,
-    disabled: true,
-  }}
-/>

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

@@ -1,21 +0,0 @@
-import RangeSlider from './RangeSlider.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyRangeSliderArgTypes: StoryBookArgTypes;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RangeSlider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RangeSlider = InstanceType<typeof RangeSlider>;
-export default RangeSlider;