@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

package/dist/stories/developer tools/components/InputEnclosure/Size/Size.stories.svelte

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

package/dist/stories/developer tools/components/InputEnclosure/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/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte

@@ -1,47 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import InputEnclosure from '../InputEnclosure.svelte';
-  import { storyInputEnclosureArgTypes } from '../InputEnclosure.stories.svelte';
-  import Icon from '@iconify/svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: InputEnclosure,
-    tags: ['autodocs'],
-    argTypes: storyInputEnclosureArgTypes,
-  });
-</script>
-
-<!-- InputEnclosure icon in front. -->
-<Story name="Icon Before" asChild>
-  <InputEnclosure>
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<!-- InputEnclosure icon in front. -->
-<Story name="Icon After" asChild>
-  <InputEnclosure>
-    {#snippet after()}
-      <Icon icon="material-symbols:download-2" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<Story name="Small" args={{ size: 'small' }} asChild>
-  <InputEnclosure size="small">
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>
-
-<Story name="Large" args={{ size: 'large' }} asChild>
-  <InputEnclosure size="large">
-    {#snippet before()}
-      <Icon icon="material-symbols:content-copy" />
-    {/snippet}
-  </InputEnclosure>
-</Story>

package/dist/stories/developer tools/components/InputEnclosure/WithIcon/WithIcon.stories.svelte.d.ts

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

@@ -1,135 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { Menu, MenuItem, Popper } from '../../../../index.js';
-import Button from '../../../components/Form/Button/Button.svelte';
-import { positionXArray, positionYArray } from '../../../../types/position.js';
-export const storyPopperArgTypes = {
-    popupPositionX: {
-        control: { type: 'select' },
-        options: positionXArray,
-    },
-    popupPositionY: {
-        control: { type: 'select' },
-        options: positionYArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Popper,
-    tags: ['autodocs'],
-    argTypes: storyPopperArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '200px',
-                inline: false,
-            },
-        },
-    },
-});
-let open = $state(false);
-</script>
-
-<Story name="Default" args={{ open, onClickOutside: () => (open = false) }} asChild>
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story name="MenuOpen" args={{ open: true }} asChild>
-  <Popper open>
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    open: true,
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <Popper
-    open
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    Hello! how are you doing?
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<!-- Expand the Popper to full width -->
-<Story name="FullWidth" asChild>
-  <Popper {open} fullWidth onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<!-- Expand the Popper to full width but not the popup -->
-<Story name="PopupFullWidthFalse" asChild>
-  <Popper {open} fullWidth popupFullWidth={false} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet popupChildren()}
-      <Menu>
-        <MenuItem>One</MenuItem>
-        <MenuItem>Two</MenuItem>
-        <MenuItem>Three</MenuItem>
-      </Menu>
-    {/snippet}
-  </Popper>
-</Story>
-
-<Story
-  name="CustomPopup"
-  args={{
-    open,
-    onClickOutside: () => (open = false),
-  }}
-  asChild
->
-  <Popper {open} onClickOutside={() => (open = false)}>
-    <Button onclick={() => (open = true)}>Click to see Popup</Button>
-
-    {#snippet customPopup(popperLocation)}
-      {#if open}
-        <Menu>
-          <MenuItem>{popperLocation?.height}</MenuItem>
-          <MenuItem>{popperLocation?.width}</MenuItem>
-        </Menu>
-      {/if}
-    {/snippet}
-  </Popper>
-</Story>

package/dist/stories/developer tools/components/Popper/Popper.stories.svelte.d.ts

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

package/dist/stories/developer tools/components/Popper/Popper.svelte

@@ -1,73 +0,0 @@
-<script lang="ts" module>import PopperPopup from './PopperPopup/PopperPopup.svelte';
-import { clickOutside } from '../../directives/clickOutside/clickOutside.js';
-</script>
-
-<script lang="ts">"use strict";
-let { children, popupChildren, id, class: className = '', ref = $bindable(), open = false, popupRef = $bindable(), paperProps, popupMaxHeight, popupWidth, popupClass, popupPositionX, popupPositionY, popupOffsetX, popupOffsetY, onClickOutside = () => { }, customPopup, popperHeightForVerticalPosition, lockPoistions, fullWidth = false, popupFullWidth: popupFullWidthRaw, } = $props();
-const popupFullWidth = $derived(popupFullWidthRaw !== undefined ? popupFullWidthRaw : fullWidth);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let customPopupTyped = customPopup;
-let popperLocation = $state();
-function capturePopperLocation() {
-    if (!ref) {
-        return;
-    }
-    popperLocation = ref.getBoundingClientRect();
-}
-$effect(() => {
-    if (!ref) {
-        return;
-    }
-    capturePopperLocation();
-    window.addEventListener('resize', capturePopperLocation);
-    return () => {
-        window.removeEventListener('resize', capturePopperLocation);
-    };
-});
-</script>
-
-<div
-  class:fullWidth
-  class={['dodo-ui-Popper', className].join(' ')}
-  bind:this={ref}
-  {id}
-  use:clickOutside={onClickOutside}
->
-  {#if children}
-    {@render children()}
-  {/if}
-
-  {#if customPopupTyped}
-    {@render customPopupTyped(popperLocation)}
-  {:else if open && popperLocation}
-    <PopperPopup
-      {popperLocation}
-      {paperProps}
-      {popupMaxHeight}
-      {popupWidth}
-      {popupPositionX}
-      {popupPositionY}
-      {popupOffsetX}
-      {popupOffsetY}
-      {popperHeightForVerticalPosition}
-      {lockPoistions}
-      fullWidth={popupFullWidth}
-      class={popupClass}
-    >
-      {#if popupChildren}
-        {@render popupChildren()}
-      {/if}
-    </PopperPopup>
-  {/if}
-</div>
-
-<style>.dodo-ui-Popper {
-  position: relative;
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-.dodo-ui-Popper.fullWidth {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}</style>

package/dist/stories/developer tools/components/Popper/Popper.svelte.d.ts

@@ -1,52 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { PaperProps } from '../../../components/Layout/Paper/Paper.svelte';
-import type { PositionX, PositionY } from '../../../../types/position.js';
-export interface PopperProps {
-    /** Popper contents goes here */
-    children?: Snippet;
-    /** Popper ref */
-    ref?: HTMLDivElement;
-    /** Id */
-    id?: string;
-    /** Title (for tooltip) */
-    title?: string;
-    /** Custom css class*/
-    class?: string;
-    /** Open popper */
-    open?: boolean;
-    /** Full width Popper? */
-    fullWidth?: boolean;
-    /** override Full width for Popup? */
-    popupFullWidth?: boolean;
-    /** PopperPopup ref */
-    popupRef?: HTMLDivElement;
-    /** PopperPopup contents goes here */
-    popupChildren?: Snippet;
-    /** PaperProps: Paper component props for PopperPopup */
-    paperProps?: Partial<PaperProps>;
-    /** PopperPopup Max height. Use css compatible value */
-    popupMaxHeight?: string;
-    /** PopperPopup Width. Use css compatible value */
-    popupWidth?: string;
-    /** popup Custom css class*/
-    popupClass?: string;
-    /** Popup stick horizontally  */
-    popupPositionX?: PositionX;
-    /** Popup stick vertically  */
-    popupPositionY?: PositionY;
-    /** vertical offset/gap between Popup and content  */
-    popupOffsetY?: number;
-    /** Horizontal offset/gap between Popup and content  */
-    popupOffsetX?: number;
-    /** Lock positions, disable auto top, bottom position based  */
-    lockPoistions?: boolean;
-    /** Popper Height For Vertical Position, default 300 */
-    popperHeightForVerticalPosition?: number;
-    /** Click Outside event */
-    onClickOutside?: () => void;
-    /** Custom Popup */
-    customPopup?: (popperLocation?: DOMRect) => Snippet;
-}
-declare const Popper: import("svelte").Component<PopperProps, {}, "ref" | "popupRef">;
-type Popper = ReturnType<typeof Popper>;
-export default Popper;

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte

@@ -1,60 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import { Menu, MenuItem, PopperPopup } from '../../../../../index.js';
-import { positionXArray, positionYArray } from '../../../../../types/position.js';
-export const storyPopperPopupArgTypes = {
-    popupPositionX: {
-        control: { type: 'select' },
-        options: positionXArray,
-    },
-    popupPositionY: {
-        control: { type: 'select' },
-        options: positionYArray,
-    },
-};
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: PopperPopup,
-    tags: ['autodocs'],
-    argTypes: storyPopperPopupArgTypes,
-    parameters: {
-        docs: {
-            story: {
-                height: '200px',
-                inline: false,
-            },
-        },
-    },
-});
-</script>
-
-<Story name="Default" asChild>
-  <PopperPopup>
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>
-
-<Story
-  name="CustomPaperProps"
-  args={{
-    paperProps: {
-      color: 'primary',
-    },
-  }}
-  asChild
->
-  <PopperPopup
-    paperProps={{
-      color: 'primary',
-    }}
-  >
-    <Menu>
-      <MenuItem>One</MenuItem>
-      <MenuItem>Two</MenuItem>
-      <MenuItem>Three</MenuItem>
-    </Menu>
-  </PopperPopup>
-</Story>

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte.d.ts

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

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -1,80 +0,0 @@
-<script lang="ts" module>import { Paper } from '../../../../../index.js';
-import { getPopupPosition } from './utils/getPopupPosition.js';
-</script>
-
-<script lang="ts">"use strict";
-let { children, paperProps = {}, class: className = '', popupWidth: width, popupMaxHeight: maxHeight, popupPositionX: positionX = 'left', popupPositionY: positionY = 'bottom', popperLocation, ref = $bindable(), popupOffsetX: offsetX = 0, popupOffsetY: offsetY = 12, popperHeightForVerticalPosition = 100, lockPoistions = false, fullWidth = false, } = $props();
-let popupLocation = $state();
-const fullWidthInPixels = $derived(fullWidth && popperLocation?.width ? `${popperLocation?.width}px` : '');
-const popperWidth = $derived(width || fullWidthInPixels);
-const popupMaxHeight = $derived(maxHeight || '400px');
-let left = $state(null);
-let right = $state(null);
-let top = $state(null);
-let bottom = $state(null);
-function capturePopupLocation() {
-    if (!ref) {
-        return;
-    }
-    popupLocation = ref.getBoundingClientRect();
-}
-$effect(() => {
-    if (!ref) {
-        return;
-    }
-    capturePopupLocation();
-    window.addEventListener('resize', capturePopupLocation);
-    return () => {
-        window.removeEventListener('resize', capturePopupLocation);
-    };
-});
-$effect(() => {
-    const values = getPopupPosition({
-        positionX,
-        positionY,
-        offsetX: offsetX,
-        offsetY: offsetY,
-        popperHeight: popperHeightForVerticalPosition,
-        lockPoistions,
-        popperLocation,
-        popupLocation,
-        fullWidth,
-    });
-    left = values.left;
-    right = values.right;
-    top = values.top;
-    bottom = values.bottom;
-});
-</script>
-
-<div
-  class={[
-    'dodo-ui-PopperPopup',
-    `positionX--${positionX}`,
-    `positionY--${positionY}`,
-    className,
-  ].join(' ')}
-  bind:this={ref}
-  style={`${popperWidth ? `width: ${popperWidth};` : ''}
-  ${left !== null ? `left: ${left}px;` : ''}
-  ${right !== null ? `right: ${right}px;` : ''}
-  ${top !== null ? `top: ${top}px;` : ''}
-  ${bottom !== null ? `bottom: ${bottom}px;` : ''}
-  `}
->
-  <Paper shadow={3} {...paperProps}>
-    <section style={`max-height: ${popupMaxHeight};`}>
-      {#if children}
-        {@render children()}
-      {/if}
-    </section>
-  </Paper>
-</div>
-
-<style>.dodo-ui-PopperPopup {
-  position: fixed;
-  z-index: var(--dodo-ui-z-index-4);
-}
-.dodo-ui-PopperPopup section {
-  overflow: auto;
-}</style>

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte.d.ts

@@ -1,36 +0,0 @@
-import type { PaperProps } from '../../../../components/Layout/Paper/Paper.svelte';
-import type { PositionX, PositionY } from '../../../../../types/position.js';
-import type { Snippet } from 'svelte';
-export interface PopperPopupProps {
-    /** Popup contents goes here*/
-    children?: Snippet;
-    /** Popup ref */
-    ref?: HTMLDivElement;
-    /** PaperProps: Paper component props */
-    paperProps?: Partial<PaperProps>;
-    /** Max height. Use css compatible value */
-    popupMaxHeight?: string;
-    /** popup Width. Use css compatible value */
-    popupWidth?: string;
-    /** Custom css class */
-    class?: string;
-    /** Position of Popper content */
-    popperLocation?: DOMRect;
-    /** Popup stick horizontally  */
-    popupPositionX?: PositionX;
-    /** Popup stick vertically  */
-    popupPositionY?: PositionY;
-    /** vertical offset/gap between Popup and content  */
-    popupOffsetY?: number;
-    /** Horizontal offset/gap between Popup and content  */
-    popupOffsetX?: number;
-    /** Lock positions, disable auto top, bottom position based  */
-    lockPoistions?: boolean;
-    /** Popper Height For Vertical Position, default 300 */
-    popperHeightForVerticalPosition?: number;
-    /** Full width Popper? */
-    fullWidth?: boolean;
-}
-declare const PopperPopup: import("svelte").Component<PopperPopupProps, {}, "ref">;
-type PopperPopup = ReturnType<typeof PopperPopup>;
-export default PopperPopup;

package/dist/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.d.ts

@@ -1,23 +0,0 @@
-import type { PositionX, PositionY } from '../../../../../../types/position.js';
-export interface GetPopupPositionProps {
-    positionX: PositionX;
-    positionY: PositionY;
-    offsetX?: number;
-    offsetY?: number;
-    popperHeight: number;
-    lockPoistions: boolean;
-    popperLocation?: DOMRect;
-    popupLocation?: DOMRect;
-    fullWidth?: boolean;
-}
-export declare function getPopupPosition(props: GetPopupPositionProps): {
-    left: null;
-    right: null;
-    top: null;
-    bottom: null;
-} | {
-    left: number;
-    right: null;
-    top: number | null;
-    bottom: number | null;
-};