@flightlesslabs/dodo-ui 0.14.0 → 0.15.0

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

@@ -0,0 +1,35 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Checkbox from '../Checkbox.svelte';
+import { storyCheckboxArgTypes } from '../Checkbox.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Checkbox,
+    tags: ['autodocs'],
+    argTypes: storyCheckboxArgTypes,
+});
+let checked = $state(false);
+</script>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      alert('onchange Clicked');
+      console.log('Checkbox Clicked', target);
+    },
+    checked,
+  }}
+  asChild
+>
+  <Checkbox
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      alert('onchange Clicked');
+      console.log('onchange Clicked', target);
+    }}
+    {checked}
+  />
+</Story>

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

@@ -0,0 +1,18 @@
+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/Checkbox/Roundness/Roundness.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Checkbox from '../Checkbox.svelte';
+  import { storyCheckboxArgTypes } from '../Checkbox.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Checkbox,
+    tags: ['autodocs'],
+    argTypes: storyCheckboxArgTypes,
+  });
+</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="Roundness full" args={{ roundness: 'full' }} />

package/dist/stories/components/Form/Checkbox/Roundness/Roundness.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Roundness;
+type Roundness = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Roundness: $$__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/Checkbox/Size/Size.stories.svelte

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

package/dist/stories/components/Form/Checkbox/Size/Size.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__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/Checkbox/utils/scss/mixins.scss

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

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

@@ -0,0 +1,19 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Radio from '../Radio.svelte';
+  import { storyRadioArgTypes } from '../Radio.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: storyRadioArgTypes,
+  });
+</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/Radio/Color/Color.stories.svelte.d.ts

@@ -0,0 +1,26 @@
+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/Radio/Events/Events.stories.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Radio from '../Radio.svelte';
+import { storyRadioArgTypes } from '../Radio.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: storyRadioArgTypes,
+});
+</script>
+
+<Story
+  name="Change"
+  args={{
+    onchange: (e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      alert('onchange Clicked');
+      console.log('Radio Clicked', target);
+    },
+  }}
+  asChild
+>
+  <Radio
+    onchange={(e: Event) => {
+      const target = e.target as HTMLInputElement;
+
+      alert('onchange Clicked');
+      console.log('onchange Clicked', target);
+    }}
+  />
+</Story>

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

@@ -0,0 +1,18 @@
+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/Radio/Radio.stories.svelte

@@ -0,0 +1,39 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Radio from './Radio.svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentColorArray } from '../../../../types/colors.js';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyRadioArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: componentColorArray,
+    },
+    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: Radio,
+    tags: ['autodocs'],
+    argTypes: storyRadioArgTypes,
+    args: {
+        value: 'Car1',
+        name: 'radios',
+    },
+});
+</script>
+
+<!-- Radio with default style -->
+<Story name="Primary" />
+
+<Story name="WithText">This is Radio</Story>
+
+<Story name="Selected" args={{ selectedValue: 'Car1' }} />
+
+<Story name="Disabled" args={{ disabled: true }} />

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

@@ -0,0 +1,21 @@
+import Radio from './Radio.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyRadioArgTypes: 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 Radio: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Radio = InstanceType<typeof Radio>;
+export default Radio;