@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

package/dist/stories/components/Layout/Paper/Paper.svelte

@@ -1,250 +0,0 @@
-<script lang="ts" module>import { componentColorPriorityArray, componentColorSeverityArray, } from '../../../../types/colors.js';
-export const paperColorArray = [
-    'default',
-    ...componentColorPriorityArray,
-    ...componentColorSeverityArray,
-];
-</script>
-
-<script lang="ts">let { children, roundness = 1, shadow = 0, id, class: className = '', width, height, ref = $bindable(), color = 'default', variant = 'text', customBackgroundColor, customBorderColor, outline = false, } = $props();
-export {};
-</script>
-
-<div
-  class:outline
-  class={[
-    'dodo-ui-Paper',
-    `roundness--${roundness}`,
-    `color--${color}`,
-    `variant--${variant}`,
-    `shadow--${shadow}`,
-    `${shadow ? `shadow--${shadow} dodo-shadow-${shadow}` : `shadow--${shadow}`}`,
-    className,
-  ].join(' ')}
-  {id}
-  bind:this={ref}
-  style={`${width ? `width:${width};` : ''}
-  ${height ? `height:${height};` : ''}
-  ${customBackgroundColor ? `background-color:${customBackgroundColor};` : ''}
-  ${customBorderColor ? `border-color:${customBorderColor};` : ''}
-  `}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style>:global(:root) {
-  --dodo-ui-Paper-default-bg: var(--dodo-color-white);
-  --dodo-ui-Paper-default-bg-shadow-1: var(--dodo-color-white);
-  --dodo-ui-Paper-default-bg-shadow-2: var(--dodo-color-white);
-  --dodo-ui-Paper-default-bg-shadow-3: var(--dodo-color-white);
-  --dodo-ui-Paper-default-bg-shadow-4: var(--dodo-color-white);
-  --dodo-ui-Paper-default-bg-shadow-5: var(--dodo-color-white);
-  --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-300);
-  --dodo-ui-Paper-outline-neutral: var(--dodo-color-neutral-400);
-  --dodo-ui-Paper-text-neutral-bg: var(--dodo-color-neutral-100);
-  --dodo-ui-Paper-solid-neutral-bg: var(--dodo-color-neutral-500);
-  --dodo-ui-Paper-outline-primary: var(--dodo-color-primary-400);
-  --dodo-ui-Paper-text-primary-bg: var(--dodo-color-primary-100);
-  --dodo-ui-Paper-solid-primary-bg: var(--dodo-color-primary-500);
-  --dodo-ui-Paper-outline-secondary: var(--dodo-color-secondary-400);
-  --dodo-ui-Paper-text-secondary-bg: var(--dodo-color-secondary-100);
-  --dodo-ui-Paper-solid-secondary-bg: var(--dodo-color-secondary-500);
-  --dodo-ui-Paper-outline-safe: var(--dodo-color-safe-400);
-  --dodo-ui-Paper-text-safe-bg: var(--dodo-color-safe-100);
-  --dodo-ui-Paper-solid-safe-bg: var(--dodo-color-safe-500);
-  --dodo-ui-Paper-outline-warning: var(--dodo-color-warning-400);
-  --dodo-ui-Paper-text-warning-bg: var(--dodo-color-warning-100);
-  --dodo-ui-Paper-solid-warning-bg: var(--dodo-color-warning-500);
-  --dodo-ui-Paper-outline-danger: var(--dodo-color-danger-400);
-  --dodo-ui-Paper-text-danger-bg: var(--dodo-color-danger-100);
-  --dodo-ui-Paper-solid-danger-bg: var(--dodo-color-danger-500);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-Paper-default-bg-mixer: #999999fd;
-  --dodo-ui-Paper-default-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 98%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-default-bg-shadow-1: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 95%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-default-bg-shadow-2: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 90%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-default-bg-shadow-3: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 85%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-default-bg-shadow-4: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 80%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-default-bg-shadow-5: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 75%,
-    var(--dodo-ui-Paper-default-bg-mixer)
-  );
-  --dodo-ui-Paper-outline-default: var(--dodo-color-neutral-200);
-  --dodo-ui-Paper-outline-neutral: var(--dodo-color-neutral-300);
-  --dodo-ui-Paper-text-neutral-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-neutral-bg: var(--dodo-color-neutral-300);
-  --dodo-ui-Paper-outline-primary: var(--dodo-color-primary-300);
-  --dodo-ui-Paper-text-primary-bg: color-mix(
-    in oklab,
-    var(--dodo-color-primary-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-primary-bg: var(--dodo-color-primary-300);
-  --dodo-ui-Paper-outline-secondary: var(--dodo-color-secondary-300);
-  --dodo-ui-Paper-text-secondary-bg: color-mix(
-    in oklab,
-    var(--dodo-color-secondary-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-secondary-bg: var(--dodo-color-secondary-300);
-  --dodo-ui-Paper-outline-safe: var(--dodo-color-safe-300);
-  --dodo-ui-Paper-text-safe-bg: color-mix(
-    in oklab,
-    var(--dodo-color-safe-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-safe-bg: var(--dodo-color-safe-300);
-  --dodo-ui-Paper-outline-warning: var(--dodo-color-warning-300);
-  --dodo-ui-Paper-text-warning-bg: color-mix(
-    in oklab,
-    var(--dodo-color-warning-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-warning-bg: var(--dodo-color-warning-300);
-  --dodo-ui-Paper-outline-danger: var(--dodo-color-danger-300);
-  --dodo-ui-Paper-text-danger-bg: color-mix(
-    in oklab,
-    var(--dodo-color-danger-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-danger-bg: var(--dodo-color-danger-300);
-}
-
-.dodo-ui-Paper {
-  outline: none;
-  transition: all 150ms;
-  font-family: inherit;
-  color: inherit;
-  border-style: solid;
-  border-width: var(--dodo-ui-element-border-width);
-  border-color: transparent;
-  overflow: hidden;
-}
-.dodo-ui-Paper.roundness--1 {
-  border-radius: var(--dodo-ui-element-roundness-1);
-}
-.dodo-ui-Paper.roundness--2 {
-  border-radius: var(--dodo-ui-element-roundness-2);
-}
-.dodo-ui-Paper.roundness--3 {
-  border-radius: var(--dodo-ui-element-roundness-3);
-}
-.dodo-ui-Paper.roundness--full {
-  border-radius: 50%;
-}
-.dodo-ui-Paper.color--default {
-  background-color: var(--dodo-ui-Paper-default-bg);
-}
-.dodo-ui-Paper.color--default.outline {
-  border-color: var(--dodo-ui-Paper-outline-default);
-}
-.dodo-ui-Paper.color--neutral.variant--text {
-  color: var(--dodo-color-neutral-800);
-  background-color: var(--dodo-ui-Paper-text-neutral-bg);
-}
-.dodo-ui-Paper.color--neutral.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-neutral);
-}
-.dodo-ui-Paper.color--neutral.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-neutral-bg);
-}
-.dodo-ui-Paper.color--primary.variant--text {
-  color: var(--dodo-color-primary-800);
-  background-color: var(--dodo-ui-Paper-text-primary-bg);
-}
-.dodo-ui-Paper.color--primary.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-primary);
-}
-.dodo-ui-Paper.color--primary.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-primary-bg);
-}
-.dodo-ui-Paper.color--secondary.variant--text {
-  color: var(--dodo-color-secondary-800);
-  background-color: var(--dodo-ui-Paper-text-secondary-bg);
-}
-.dodo-ui-Paper.color--secondary.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-secondary);
-}
-.dodo-ui-Paper.color--secondary.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-secondary-bg);
-}
-.dodo-ui-Paper.color--safe.variant--text {
-  color: var(--dodo-color-safe-800);
-  background-color: var(--dodo-ui-Paper-text-safe-bg);
-}
-.dodo-ui-Paper.color--safe.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-safe);
-}
-.dodo-ui-Paper.color--safe.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-safe-bg);
-}
-.dodo-ui-Paper.color--warning.variant--text {
-  color: var(--dodo-color-warning-800);
-  background-color: var(--dodo-ui-Paper-text-warning-bg);
-}
-.dodo-ui-Paper.color--warning.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-warning);
-}
-.dodo-ui-Paper.color--warning.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-warning-bg);
-}
-.dodo-ui-Paper.color--danger.variant--text {
-  color: var(--dodo-color-danger-800);
-  background-color: var(--dodo-ui-Paper-text-danger-bg);
-}
-.dodo-ui-Paper.color--danger.variant--text.outline {
-  border-color: var(--dodo-ui-Paper-outline-danger);
-}
-.dodo-ui-Paper.color--danger.variant--solid {
-  color: var(--dodo-color-constant-white);
-  background-color: var(--dodo-ui-Paper-solid-danger-bg);
-}
-.dodo-ui-Paper.color--default.shadow--1 {
-  background-color: var(--dodo-ui-Paper-default-bg-shadow-1);
-}
-.dodo-ui-Paper.color--default.shadow--2 {
-  background-color: var(--dodo-ui-Paper-default-bg-shadow-2);
-}
-.dodo-ui-Paper.color--default.shadow--3 {
-  background-color: var(--dodo-ui-Paper-default-bg-shadow-3);
-}
-.dodo-ui-Paper.color--default.shadow--4 {
-  background-color: var(--dodo-ui-Paper-default-bg-shadow-4);
-}
-.dodo-ui-Paper.color--default.shadow--5 {
-  background-color: var(--dodo-ui-Paper-default-bg-shadow-5);
-}</style>

package/dist/stories/components/Layout/Paper/Paper.svelte.d.ts

@@ -1,38 +0,0 @@
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { ComponentShadow } from '../../../../types/shadow.js';
-import type { ComponentWeight } from '../../../../types/weight.js';
-import { type ComponentColor } from '../../../../types/colors.js';
-export type PaperColor = 'default' | ComponentColor;
-export declare const paperColorArray: PaperColor[];
-export interface PaperProps {
-    /** Paper contents goes here */
-    children?: Snippet;
-    /** Paper ref */
-    ref?: HTMLDivElement;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Shadow elevation */
-    shadow?: ComponentShadow;
-    /** Custom css class */
-    class?: string;
-    /** Paper Width */
-    width?: string;
-    /** Paper Height */
-    height?: string;
-    /** Id */
-    id?: string;
-    /** Add a border around  paper */
-    outline?: boolean;
-    /** What color to use? */
-    color?: PaperColor;
-    /** How should paper appear? */
-    variant?: ComponentWeight;
-    /** Custom background color. Use CSS compatible value */
-    customBackgroundColor?: string;
-    /** Custom border color. Use CSS compatible value */
-    customBorderColor?: string;
-}
-import type { Snippet } from 'svelte';
-declare const Paper: import("svelte").Component<PaperProps, {}, "ref">;
-type Paper = ReturnType<typeof Paper>;
-export default Paper;

package/dist/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte

@@ -1,25 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Paper from '../Paper.svelte';
-  import { storyPaperArgTypes } from '../Paper.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Paper,
-    tags: ['autodocs'],
-    argTypes: storyPaperArgTypes,
-  });
-</script>
-
-<Story name="Roundness 1" args={{ height: '100px', color: 'primary' }}></Story>
-
-<Story name="Roundness 2" args={{ roundness: 2, height: '100px', color: 'primary' }}></Story>
-
-<Story name="Roundness 3" args={{ roundness: 3, height: '100px', color: 'primary' }}></Story>
-
-<Story name="Roundness 0" args={{ roundness: 0, height: '100px', color: 'primary' }}></Story>
-
-<Story
-  name="Roundness Full"
-  args={{ roundness: 'full', height: '100px', width: '100%', color: 'primary' }}
-></Story>

package/dist/stories/components/Layout/Paper/Roundness/Roundness.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-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/Layout/Paper/Shadow/Shadow.stories.svelte

@@ -1,24 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Paper from '../Paper.svelte';
-  import { storyPaperArgTypes } from '../Paper.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Paper,
-    tags: ['autodocs'],
-    argTypes: storyPaperArgTypes,
-  });
-</script>
-
-<Story name="Shadow 0" args={{ height: '100px' }}>Hola!</Story>
-
-<Story name="Shadow 1" args={{ shadow: 1, height: '100px' }}>Hola!</Story>
-
-<Story name="Shadow 2" args={{ shadow: 2, height: '100px' }}>Hola!</Story>
-
-<Story name="Shadow 3" args={{ shadow: 3, height: '100px' }}>Hola!</Story>
-
-<Story name="Shadow 4" args={{ shadow: 4, height: '100px' }}>Hola!</Story>
-
-<Story name="Shadow 5" args={{ shadow: 5, height: '100px' }}>Hola!</Story>

package/dist/stories/components/Layout/Paper/Shadow/Shadow.stories.svelte.d.ts

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

@@ -1,46 +0,0 @@
-/// Mixin: generate-dodo-ui-paper-colors
-/// Generates CSS custom properties for Dodo UI paper 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-paper-colors($color-name) {
-  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-Paper-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-}
-
-/// Mixin: generate-dodo-ui-paper-colors
-/// Generates CSS custom properties for Dodo UI paper 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-paper-colors-dark($color-name) {
-  --dodo-ui-Paper-outline-#{$color-name}: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Paper-text-#{$color-name}-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 80%,
-    #00000080
-  );
-  --dodo-ui-Paper-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-300);
-}
-
-/// Mixin: generate-dodo-ui-paper-color
-/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-paper-color($theme) {
-  &--#{$theme} {
-    &.variant {
-      &--text {
-        color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-Paper-text-#{$theme}-bg);
-
-        &.outline {
-          border-color: var(--dodo-ui-Paper-outline-#{$theme});
-        }
-      }
-
-      &--solid {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-Paper-solid-#{$theme}-bg);
-      }
-    }
-  }
-}

package/dist/stories/components/Layout/Separator/Color/Color.stories.svelte

@@ -1,19 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storySeparatorArgTypes } from '../Separator.stories.svelte';
-  import Separator from '../Separator.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: Separator,
-    tags: ['autodocs'],
-    argTypes: storySeparatorArgTypes,
-  });
-</script>
-
-<Story name="Neutral">Hola!</Story>
-<Story name="Primary" args={{ color: 'primary' }}>Hola!</Story>
-<Story name="Secondary" args={{ color: 'secondary' }}>Hola!</Story>
-<Story name="Safe" args={{ color: 'safe' }}>Hola!</Story>
-<Story name="Warning" args={{ color: 'warning' }}>Hola!</Story>
-<Story name="Danger" args={{ color: 'danger' }}>Hola!</Story>

package/dist/stories/components/Layout/Separator/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/Layout/Separator/Separator.stories.svelte

@@ -1,26 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Separator, { separatorOrientationArray } from './Separator.svelte';
-import { componentColorArray } from '../../../../types/colors.js';
-export const storySeparatorArgTypes = {
-    color: {
-        control: { type: 'select' },
-        options: componentColorArray,
-    },
-    orientation: {
-        control: { type: 'select' },
-        options: separatorOrientationArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Separator,
-    tags: ['autodocs'],
-    argTypes: storySeparatorArgTypes,
-});
-</script>
-
-<Story name="Default" />
-
-<Story name="FixedWidth" args={{ width: '200px' }} />
-
-<Story name="VerticalOrientation" args={{ orientation: 'vertical', height: '200px' }} />

package/dist/stories/components/Layout/Separator/Separator.stories.svelte.d.ts

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

package/dist/stories/components/Layout/Separator/Separator.svelte

@@ -1,66 +0,0 @@
-<script lang="ts" module>export const separatorOrientationArray = ['horizontal', 'vertical'];
-</script>
-
-<script lang="ts">"use strict";
-let { id, class: className = '', orientation = 'horizontal', color = 'neutral', ref = $bindable(), width, height, } = $props();
-</script>
-
-<div
-  class={['dodo-ui-Separator', `color--${color}`, `orientation--${orientation}`, className].join(
-    ' ',
-  )}
-  {id}
-  style={`${width ? `width:${width};` : ''}
-  ${height ? `height:${height};` : ''}
-  `}
-  bind:this={ref}
-></div>
-
-<style>:global(:root) {
-  --dodo-ui-Separator-color-neutral: var(--dodo-color-neutral-300);
-  --dodo-ui-Separator-color-primary: var(--dodo-color-primary-300);
-  --dodo-ui-Separator-color-secondary: var(--dodo-color-secondary-300);
-  --dodo-ui-Separator-color-safe: var(--dodo-color-safe-300);
-  --dodo-ui-Separator-color-warning: var(--dodo-color-warning-300);
-  --dodo-ui-Separator-color-danger: var(--dodo-color-danger-300);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-Separator-color-neutral: var(--dodo-color-neutral-300);
-  --dodo-ui-Separator-color-primary: var(--dodo-color-primary-300);
-  --dodo-ui-Separator-color-secondary: var(--dodo-color-secondary-300);
-  --dodo-ui-Separator-color-safe: var(--dodo-color-safe-300);
-  --dodo-ui-Separator-color-warning: var(--dodo-color-warning-300);
-  --dodo-ui-Separator-color-danger: var(--dodo-color-danger-300);
-}
-
-.dodo-ui-Separator.color--neutral {
-  background-color: var(--dodo-ui-Separator-color-neutral);
-}
-.dodo-ui-Separator.color--primary {
-  background-color: var(--dodo-ui-Separator-color-primary);
-}
-.dodo-ui-Separator.color--secondary {
-  background-color: var(--dodo-ui-Separator-color-secondary);
-}
-.dodo-ui-Separator.color--safe {
-  background-color: var(--dodo-ui-Separator-color-safe);
-}
-.dodo-ui-Separator.color--warning {
-  background-color: var(--dodo-ui-Separator-color-warning);
-}
-.dodo-ui-Separator.color--danger {
-  background-color: var(--dodo-ui-Separator-color-danger);
-}
-.dodo-ui-Separator.orientation--horizontal {
-  display: flex;
-  height: var(--dodo-ui-element-border-width);
-  width: 100%;
-  margin: calc(var(--dodo-ui-space) * 1) 0;
-}
-.dodo-ui-Separator.orientation--vertical {
-  display: inline-flex;
-  height: 100%;
-  width: var(--dodo-ui-element-border-width);
-  margin: 0 calc(var(--dodo-ui-space) * 1);
-}</style>

package/dist/stories/components/Layout/Separator/Separator.svelte.d.ts

@@ -1,22 +0,0 @@
-import type { ComponentColor } from '../../../../types/colors.js';
-export type SeparatorOrientation = 'horizontal' | 'vertical';
-export declare const separatorOrientationArray: SeparatorOrientation[];
-export interface SeparatorProps {
-    /** Separator ref */
-    ref?: HTMLDivElement;
-    /** Custom css class */
-    class?: string;
-    /** Id */
-    id?: string;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** Separator Width */
-    width?: string;
-    /** Separator Height */
-    height?: string;
-    /** Separator orientation,  'horizontal', 'vertical'*/
-    orientation?: SeparatorOrientation;
-}
-declare const Separator: import("svelte").Component<SeparatorProps, {}, "ref">;
-type Separator = ReturnType<typeof Separator>;
-export default Separator;

package/dist/stories/components/Layout/Separator/utils/scss/mixins.scss

@@ -1,24 +0,0 @@
-/// Mixin: generate-dodo-ui-button-colors
-/// Generates CSS custom properties for Dodo UI button 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-separator-colors($color-name) {
-  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
-}
-
-/// Mixin: generate-dodo-ui-button-colors
-/// Generates CSS custom properties for Dodo UI button 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-separator-colors-dark($color-name) {
-  --dodo-ui-Separator-color-#{$color-name}: var(--dodo-color-#{$color-name}-300);
-}
-
-/// Mixin: generate-dodo-ui-button-color
-/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-separator-color($theme) {
-  &--#{$theme} {
-    background-color: var(--dodo-ui-Separator-color-#{$theme});
-  }
-}

package/dist/stories/developer tools/Intro.mdx

@@ -1,10 +0,0 @@
-# Developer Tools
-
-A set of components and tools used internally in dodo-ui.
-
-## Explore More
-
-- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
-- [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)
-- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
-- [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)