@flightlesslabs/dodo-ui 0.6.6 → 0.7.0

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

@@ -0,0 +1,19 @@
+<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

@@ -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/Layout/Separator/Separator.stories.svelte

@@ -0,0 +1,26 @@
+<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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,24 @@
+/// 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/components/DynamicInput/DynamicInput.stories.svelte

@@ -0,0 +1,49 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import DynamicInput, { dynamicInputVariantArray } from './DynamicInput.svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+import { textInputTypeArray } from '../../../components/Form/TextInput/TextInput.svelte';
+import Icon from '@iconify/svelte';
+export const storyDynamicInputArgTypes = {
+    type: {
+        control: { type: 'select' },
+        options: textInputTypeArray,
+    },
+    variant: {
+        control: { type: 'select' },
+        options: dynamicInputVariantArray,
+    },
+    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: DynamicInput,
+    tags: ['autodocs'],
+    argTypes: storyDynamicInputArgTypes,
+    args: { value: 'Hello world!' },
+});
+</script>
+
+<Story name="Default" />
+
+<!-- Clickable button type Variant -->
+<Story name="VariantButton" args={{ variant: 'button' }} />
+
+<!-- Clickable button type Variant with placeholder -->
+<Story
+  name="ButtonWithPlaceholder"
+  args={{ variant: 'button', placeholder: 'Type Something...', value: '' }}
+/>
+
+<Story name="CustomInputContent" asChild>
+  <DynamicInput variant="button" value="Hello world!">
+    {#snippet customInputContent(value)}
+      <div>
+        {`${value}`}
+        <Icon icon="material-symbols:ads-click" width="24" height="24" style="color: #d21313" />
+      </div>
+    {/snippet}
+  </DynamicInput>
+</Story>

package/dist/stories/{components/Form/SimpleSelect/SimpleSelect.stories.svelte.d.ts → developer tools/components/DynamicInput/DynamicInput.stories.svelte.d.ts }

@@ -1,8 +1,6 @@
-import { type SimpleSelectOption } from './SimpleSelect.svelte';
+import DynamicInput from './DynamicInput.svelte';
 import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-import SimpleSelect from './SimpleSelect.svelte';
-export declare const storySimpleSelectArgTypes: StoryBookArgTypes;
-export declare const storySimpleSelectOptions: SimpleSelectOption[];
+export declare const storyDynamicInputArgTypes: 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;
@@ -16,8 +14,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const SimpleSelect: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DynamicInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type SimpleSelect = InstanceType<typeof SimpleSelect>;
-export default SimpleSelect;
+type DynamicInput = InstanceType<typeof DynamicInput>;
+export default DynamicInput;

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

@@ -0,0 +1,92 @@
+<script lang="ts" module>import {} from '../../../../index.js';
+export const dynamicInputVariantArray = ['input', 'button'];
+</script>
+
+<script lang="ts">"use strict";
+let { type = 'text', name, id, class: className = '', disabled = false, onchange, oninput, onblur, onfocus, onpaste, oncopy, oncut, value = $bindable(), placeholder, ref = $bindable(), readonly = false, variant = 'input', size = 'normal', onclick, customInputContent, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customInputContentTyped = customInputContent;
+function onclickMod(e) {
+    if (onfocus) {
+        onfocus(e);
+    }
+    if (onclick) {
+        onclick(e);
+    }
+}
+</script>
+
+{#if variant === 'button'}
+  <button
+    {id}
+    class={[
+      'dodo-ui-DynamicInput',
+      `size--${size}`,
+      `variant--${variant}`,
+      `${!value ? 'placeholder' : ''}`,
+      className,
+    ].join(' ')}
+    bind:this={ref}
+    onclick={onclickMod}
+    {onblur}
+    {disabled}
+  >
+    {#if customInputContentTyped}
+      {@render customInputContentTyped(value)}
+    {:else}
+      {`${value}` || placeholder}
+    {/if}
+  </button>
+{:else}
+  <input
+    class={['dodo-ui-DynamicInput', `size--${size}`, `variant--${variant}`, className].join(' ')}
+    {type}
+    {name}
+    {id}
+    {disabled}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+    {onpaste}
+    {oncopy}
+    {oncut}
+    {placeholder}
+    bind:value
+    bind:this={ref}
+    {readonly}
+  />
+{/if}
+
+<style>.dodo-ui-DynamicInput {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+  margin: 0;
+}
+.dodo-ui-DynamicInput.variant--button {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+.dodo-ui-DynamicInput.variant--button.placeholder {
+  opacity: 0.6;
+}
+.dodo-ui-DynamicInput.size--normal {
+  font-size: 1rem;
+  padding: 0 calc(var(--dodo-ui-space-small) * 2);
+}
+.dodo-ui-DynamicInput.size--small {
+  padding: 0 var(--dodo-ui-space);
+  font-size: 0.9rem;
+}
+.dodo-ui-DynamicInput.size--large {
+  font-size: 1.1rem;
+  padding: 0 calc(var(--dodo-ui-space) * 2);
+}</style>

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

@@ -0,0 +1,60 @@
+import { type ComponentSize, type TextInputType } from '../../../../index.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, MouseEventHandler } from 'svelte/elements';
+export type DynamicInputVariant = 'input' | 'button';
+export declare const dynamicInputVariantArray: DynamicInputVariant[];
+export type DynamicInputClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+};
+export type DynamicInputFocusEvent = FocusEvent & {
+    currentTarget: EventTarget & (HTMLInputElement | HTMLButtonElement);
+};
+export interface DynamicInputProps {
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Input type? */
+    type?: TextInputType;
+    /** Input ref */
+    ref?: HTMLInputElement | HTMLButtonElement;
+    /** Input value */
+    value?: string | number;
+    /** variant */
+    variant?: DynamicInputVariant;
+    /** How round should the border radius be? */
+    placeholder?: string;
+    /** disabled state */
+    disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Icon before button content */
+    before?: Snippet;
+    /** Icon after button content */
+    after?: Snippet;
+    /** Custom css class*/
+    class?: string;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+    /** oninput event handler */
+    oninput?: FormEventHandler<HTMLInputElement>;
+    /** onchange event handler */
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    /** onblur event handler */
+    onblur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onfocus event handler */
+    onfocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    /** onpaste event handler */
+    onpaste?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncopy event handler */
+    oncopy?: ClipboardEventHandler<HTMLInputElement>;
+    /** oncut event handler */
+    oncut?: ClipboardEventHandler<HTMLInputElement>;
+    /** custom Content Formatting for variant button */
+    customInputContent?: (value: string | number) => Snippet;
+}
+declare const DynamicInput: import("svelte").Component<DynamicInputProps, {}, "ref" | "value">;
+type DynamicInput = ReturnType<typeof DynamicInput>;
+export default DynamicInput;

package/dist/stories/{components/Form/SimpleSelect/Size/Size.stories.svelte → developer tools/components/DynamicInput/Size/Size.stories.svelte }

@@ -1,17 +1,14 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SimpleSelect from '../SimpleSelect.svelte';
-  import {
-    storySimpleSelectArgTypes,
-    storySimpleSelectOptions,
-  } from '../SimpleSelect.stories.svelte';
+  import DynamicInput from '../DynamicInput.svelte';
+  import { storyDynamicInputArgTypes } from '../DynamicInput.stories.svelte';
 
   // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
-    component: SimpleSelect,
+    component: DynamicInput,
     tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
+    argTypes: storyDynamicInputArgTypes,
+    args: { value: 'Hello world!' },
   });
 </script>
 

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

@@ -1,5 +1,8 @@
-<script lang="ts">let { size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, before, after, error = false, focused = false, children, ref = $bindable(), } = $props();
 </script>
 
 <div
@@ -21,6 +24,7 @@ export {};
   {#if children}
     {@render children()}
   {/if}
+
   {#if after}
     <span class="content--after">
       {@render after()}

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

@@ -1,7 +1,7 @@
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
-interface InputEnclosureProps {
+export interface InputEnclosureProps {
     /** InputEnclosure contents goes here */
     children?: Snippet;
     /** InputEnclosure ref */

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

@@ -0,0 +1,119 @@
+<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>
+
+<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>
+
+<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

@@ -0,0 +1,21 @@
+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;