@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.svelte

@@ -1,164 +0,0 @@
-<script lang="ts" module>import {} from 'svelte';
-export const menuItemTypeArray = ['text', 'button', 'link'];
-</script>
-
-<script lang="ts">import { getContext } from 'svelte';
-let { children, id, class: className = '', type = 'text', href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, disabled = false, selected = false, separator: separatorInternal, onclick, size: sizeInternal, ref = $bindable(), } = $props();
-const hover = false;
-const sizeMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (getContext('MenuItemSize') ? getContext('MenuItemSize')() : undefined);
-const size = sizeMenu || sizeInternal || 'normal';
-const separatorMenu = // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (getContext('MenuItemSeparator') ? getContext('MenuItemSeparator')() : undefined);
-const separator = separatorMenu !== undefined ? separatorMenu : separatorInternal || false;
-</script>
-
-{#snippet menuItemContent()}
-  {#if children}
-    {@render children()}
-  {/if}
-{/snippet}
-
-<li
-  class:disabled
-  class:separator
-  class:selected
-  class:hover
-  class={['dodo-ui-MenuItem', `size--${size}`, className].join(' ')}
-  {id}
-  bind:this={ref}
->
-  {#if type === 'link'}
-    <a
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-      {href}
-      {download}
-      {hreflang}
-      {media}
-      {ping}
-      {rel}
-      {target}
-      type={anchorMediaType}
-      {referrerpolicy}
-    >
-      {@render menuItemContent()}
-    </a>
-  {:else if type === 'button'}
-    <button
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-      {onclick}
-      {disabled}
-    >
-      {@render menuItemContent()}
-    </button>
-  {:else}
-    <div
-      class:disabled
-      class:selected
-      class={['MenuItem-type', `MenuItem-type--${type}`, `size--${size}`].join(' ')}
-    >
-      {@render menuItemContent()}
-    </div>
-  {/if}
-</li>
-
-<style>:global(:root) {
-  --dodo-ui-MenuItem-selected-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-800) 4%,
-    transparent
-  );
-  --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
-  --dodo-ui-MenuItem-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-800) 11%,
-    transparent
-  );
-  --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
-  --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-400);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-MenuItem-selected-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-800) 4%,
-    transparent
-  );
-  --dodo-ui-MenuItem-hover-bg: color-mix(in oklab, var(--dodo-color-neutral-800) 8%, transparent);
-  --dodo-ui-MenuItem-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-neutral-800) 15%,
-    transparent
-  );
-  --dodo-ui-MenuItem-separator-color: var(--dodo-color-neutral-300);
-  --dodo-ui-MenuItem-disabled-color: var(--dodo-color-neutral-500);
-}
-
-.dodo-ui-MenuItem {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  user-select: none;
-}
-.dodo-ui-MenuItem.separator {
-  border-bottom: 1px solid var(--dodo-ui-MenuItem-separator-color);
-}
-.dodo-ui-MenuItem .MenuItem-type {
-  cursor: pointer;
-  transition: all 70ms;
-  text-decoration: none;
-  margin: 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  border: 0;
-  outline: 0;
-  background-color: transparent;
-  color: inherit;
-  font-family: inherit;
-  width: 100%;
-}
-.dodo-ui-MenuItem .MenuItem-type.selected {
-  background-color: var(--dodo-ui-MenuItem-selected-bg);
-}
-.dodo-ui-MenuItem .MenuItem-type:hover {
-  background-color: var(--dodo-ui-MenuItem-hover-bg);
-}
-.dodo-ui-MenuItem .MenuItem-type:active {
-  background-color: var(--dodo-ui-MenuItem-active-bg);
-}
-.dodo-ui-MenuItem .MenuItem-type.size--normal {
-  min-height: var(--dodo-ui-element-height-normal);
-  font-size: 1rem;
-  padding: 0 calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-MenuItem .MenuItem-type.size--small {
-  min-height: var(--dodo-ui-element-height-small);
-  padding: 0 var(--dodo-ui-space);
-  font-size: 0.9rem;
-}
-.dodo-ui-MenuItem .MenuItem-type.size--large {
-  min-height: var(--dodo-ui-element-height-large);
-  font-size: 1.1rem;
-  padding: 0 calc(var(--dodo-ui-space) * 2);
-}
-.dodo-ui-MenuItem .MenuItem-type.disabled {
-  cursor: initial;
-  background-color: transparent;
-  color: var(--dodo-ui-MenuItem-disabled-color);
-}
-.dodo-ui-MenuItem .MenuItem-type.disabled:hover {
-  background-color: transparent;
-  color: var(--dodo-ui-MenuItem-disabled-color);
-}
-.dodo-ui-MenuItem .MenuItem-type.disabled:active {
-  background-color: transparent;
-  color: var(--dodo-ui-MenuItem-disabled-color);
-}
-.dodo-ui-MenuItem.hover .MenuItem-type {
-  background-color: var(--dodo-ui-MenuItem-hover-bg);
-}</style>

package/dist/stories/components/Layout/Menu/MenuItem/MenuItem.svelte.d.ts

@@ -1,49 +0,0 @@
-import type { ButtonLinkReferrerpolicy, ButtonLinkTarget } from '../../../Form/Button/Button.svelte';
-import { type Snippet } from 'svelte';
-import type { MouseEventHandler } from 'svelte/elements';
-export type MenuItemType = 'text' | 'button' | 'link';
-export declare const menuItemTypeArray: MenuItemType[];
-export interface MenuItemProps {
-    /** MenuItem contents goes here */
-    children?: Snippet;
-    /** MenuItem ref */
-    ref?: HTMLLIElement;
-    /** Custom css class */
-    class?: string;
-    /** Id */
-    id?: string;
-    /** Menu Item type */
-    type?: MenuItemType;
-    /** selected */
-    selected?: boolean;
-    /** Separator */
-    separator?: boolean;
-    /** How large should the Menu Items be? */
-    size?: ComponentSize;
-    /** The onclick event handler */
-    onclick?: MouseEventHandler<HTMLButtonElement>;
-    /**  disabled state */
-    disabled?: boolean;
-    /** link href */
-    href?: string;
-    /** Link button: download  */
-    download?: any;
-    /** Link button: hreflang  */
-    hreflang?: string | undefined | null;
-    /** Link button: media  */
-    media?: string | undefined | null;
-    /** Link button: ping  */
-    ping?: string | undefined | null;
-    /** Link button: rel  */
-    rel?: string | undefined | null;
-    /** Link button: target  */
-    target?: ButtonLinkTarget;
-    /** Link button: Type  */
-    anchorMediaType?: string | undefined | null;
-    /** Link button: referrerpolicy  */
-    referrerpolicy?: ButtonLinkReferrerpolicy;
-}
-import type { ComponentSize } from '../../../../../types/size.js';
-declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "ref">;
-type MenuItem = ReturnType<typeof MenuItem>;
-export default MenuItem;

package/dist/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte

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

package/dist/stories/components/Layout/Menu/MenuItem/Size/Size.stories.svelte.d.ts

@@ -1,26 +0,0 @@
-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/Layout/Menu/MenuItem/Type/Type.stories.svelte

@@ -1,21 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import MenuItem from '../MenuItem.svelte';
-  import { storyMenuItemArgTypes } from '../MenuItem.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: MenuItem,
-    tags: ['autodocs'],
-    argTypes: storyMenuItemArgTypes,
-  });
-</script>
-
-<Story name="Text">Menu Item</Story>
-<Story
-  name="Link"
-  args={{ type: 'link', href: 'https://www.w3schools.com/tags/tag_a.asp', target: '_blank' }}
->
-  Menu Item
-</Story>
-<Story name="Button" args={{ type: 'button', onclick: () => {} }}>Menu Item</Story>

package/dist/stories/components/Layout/Menu/MenuItem/Type/Type.stories.svelte.d.ts

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

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

package/dist/stories/components/Layout/Menu/Size/Size.stories.svelte.d.ts

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

@@ -1,63 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { storyPaperArgTypes } from '../Paper.stories.svelte';
-  import Paper from '../Paper.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="Default" args={{ height: '100px' }}>Hola!</Story>
-
-<Story name="Primary" args={{ color: 'primary', height: '100px' }}>Hola!</Story>
-<Story name="Secondary" args={{ color: 'secondary', height: '100px' }}>Hola!</Story>
-<Story name="Neutral" args={{ color: 'neutral', height: '100px' }}>Hola!</Story>
-<Story name="Safe" args={{ color: 'safe', height: '100px' }}>Hola!</Story>
-<Story name="Warning" args={{ color: 'warning', height: '100px' }}>Hola!</Story>
-<Story name="Danger" args={{ color: 'danger', height: '100px' }}>Hola!</Story>
-
-<Story name="Default Outline" args={{ outline: true, height: '100px' }}>Hola!</Story>
-<Story name="Primary Outline" args={{ color: 'primary', outline: true, height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Secondary Outline" args={{ color: 'secondary', outline: true, height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Neutral Outline" args={{ color: 'neutral', outline: true, height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Safe Outline" args={{ color: 'safe', outline: true, height: '100px' }}>Hola!</Story>
-<Story name="Warning Outline" args={{ color: 'warning', outline: true, height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Danger Outline" args={{ color: 'danger', outline: true, height: '100px' }}>Hola!</Story
->
-
-<Story name="Primary Solid" args={{ color: 'primary', variant: 'solid', height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Secondary Solid" args={{ color: 'secondary', variant: 'solid', height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Neutral Solid" args={{ color: 'neutral', variant: 'solid', height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Safe Solid" args={{ color: 'safe', variant: 'solid', height: '100px' }}>Hola!</Story>
-<Story name="Warning Solid" args={{ color: 'warning', variant: 'solid', height: '100px' }}>
-  Hola!
-</Story>
-<Story name="Danger Solid" args={{ color: 'danger', variant: 'solid', height: '100px' }}>
-  Hola!
-</Story>
-
-<!-- Paper with Custom Background and Border colors -->
-<Story
-  name="Custom Color"
-  args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}
->
-  Hola!
-</Story>

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

@@ -1,46 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Paper, { paperColorArray } from './Paper.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentShadowArray } from '../../../../types/shadow.js';
-import { componentWeightArray } from '../../../../types/weight.js';
-export const storyPaperArgTypes = {
-    color: {
-        control: { type: 'select' },
-        options: paperColorArray,
-    },
-    variant: {
-        control: { type: 'select' },
-        options: componentWeightArray,
-    },
-    roundness: {
-        control: { type: 'select' },
-        options: componentRoundnessArray,
-    },
-    shadow: {
-        control: { type: 'select' },
-        options: componentShadowArray,
-    },
-};
-// 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>
-
-<!-- Paper with default style -->
-<Story name="Default">Hola!</Story>
-
-<!-- Paper with width and height -->
-<Story name="WidthAndHeight" args={{ width: '200px', height: '200px', color: 'primary' }}>
-  Hola!
-</Story>
-
-<!-- Paper with Custom Background and Border colors -->
-<Story
-  name="Custom Color"
-  args={{ height: '100px', customBackgroundColor: '#ffdfad', customBorderColor: '#fbc674' }}
->
-  Hola!
-</Story>

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

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