@reshape-biotech/design-system 2.0.3 → 2.1.0

package/dist/components/modal/Modal.stories.svelte

@@ -1,39 +1,247 @@
 <script module lang="ts">
-  import Button from '../button/Button.svelte';
-  import Modal from '../modal/Modal.svelte';
   import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Root as ModalRootForMeta } from './index';
+  import * as Modal from './index';
+  import Button from '../button/Button.svelte';
+  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
-    component: Modal,
+    component: ModalRootForMeta,
     title: 'Design System/Modal',
     tags: ['autodocs'],
+    parameters: {
+      layout: 'centered',
+      docs: {
+        description: {
+          component:
+            'A modal component built with Bits UI Dialog. Features smooth Svelte transitions with scale and fade effects. Supports compound component pattern with Modal.Root, Modal.Trigger, Modal.Content, etc.',
+        },
+      },
+    },
   });
-
-  let defaultOpen = $state(true);
 </script>
 
 <Story name="Default" asChild>
-  <Modal>
-    {#snippet Trigger({ openModal })}
-      <Button onClick={openModal}>Open Modal</Button>
-    {/snippet}
-    {#snippet Content()}
-      <div>
-        <p>Modal Content</p>
+  <Modal.Root>
+    <Modal.Trigger>
+      <Button variant="primary">Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Title>Edit Profile</Modal.Title>
+      <div class="space-y-4">
+        <p class="text-sm text-secondary">
+          Make changes to your profile here. Click save when you're done.
+        </p>
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="name">Name</label>
+          <input id="name" class="w-full rounded border border-input px-3 py-2" value="John Doe" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="username">Username</label>
+          <input
+            id="username"
+            class="w-full rounded border border-input px-3 py-2"
+            value="@johndoe"
+          />
+        </div>
       </div>
-    {/snippet}
-  </Modal>
-</Story>
-
-<Story name="Default open" asChild>
-  <Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
-    {#snippet Trigger({ openModal })}
-      <Button onClick={openModal}>Open Modal</Button>
-    {/snippet}
-    {#snippet Content()}
-      <div>
-        <p>Modal Content</p>
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Cancel</Modal.Close>
+        <Modal.Close variant="primary">Save Changes</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="With Description" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Modal with Description</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Title>Are you absolutely sure?</Modal.Title>
+      <Modal.Description class="text-sm leading-[1.43] tracking-[1.14%] text-secondary">
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </Modal.Description>
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Cancel</Modal.Close>
+        <Modal.Close variant="danger" onclick={() => console.log('something')}
+          >Delete Account</Modal.Close
+        >
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="Alert Modal (Figma Design)" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Alert Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content class="w-[544px] max-w-[544px] p-0">
+      <Modal.Title>
+        {#snippet icon()}
+          <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-danger p-2">
+            <Icon iconName="Warning" class="h-7 w-7 text-danger" />
+          </div>
+        {/snippet}
+        Delete this job?
+      </Modal.Title>
+      <Modal.Description class="text-sm text-secondary">
+        "CFU Air" will be permanently deleted for all users in your organization. This action cannot
+        be undone.
+      </Modal.Description>
+
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Cancel</Modal.Close>
+        <Modal.Close variant="danger">Delete job</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="Custom Button Rendering" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Custom Button Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Title>Custom Button Rendering</Modal.Title>
+      <Modal.Description class="text-sm text-secondary">
+        This modal demonstrates rendering custom buttons within Modal.Close components for proper
+        functionality.
+      </Modal.Description>
+
+      <Modal.Bottom>
+        <Modal.Close variant="secondary" onclick={() => console.log('Custom cancel action')}>
+          Custom Cancel
+        </Modal.Close>
+        <Modal.Close variant="primary" onclick={() => console.log('Custom confirm action')}>
+          Custom Confirm
+        </Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="No Close Button" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Modal (No Close)</Button>
+    </Modal.Trigger>
+    <Modal.Content withClose={false}>
+      <Modal.Title>Alert</Modal.Title>
+      <div class="space-y-4">
+        <p class="text-sm text-secondary">
+          This modal doesn't have a close button. You must use the action buttons below.
+        </p>
+      </div>
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Cancel</Modal.Close>
+        <Modal.Close variant="primary">Continue</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="Custom Styling" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Custom Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content class="min-w-full !bg-accent p-8">
+      <Modal.Title class="text-xl text-primary-inverse">Custom Styled Modal</Modal.Title>
+      <div class="space-y-4 pt-4">
+        <p class="text-sm text-secondary-inverse">
+          This modal has custom styling applied to demonstrate the flexibility of the component.
+        </p>
+        <div class="rounded bg-surface p-4">
+          <h3 class="font-medium">Content Box</h3>
+          <p class="text-sm text-secondary">Some content in a styled box.</p>
+        </div>
+      </div>
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Close</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="API Documentation" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">API Example</Button>
+    </Modal.Trigger>
+    <Modal.Content>
+      <Modal.Title>Modal API Documentation</Modal.Title>
+      <Modal.Description>
+        The Modal component is built with Bits UI Dialog and follows the compound component pattern
+        with simplified usage.
+      </Modal.Description>
+      <div class="space-y-4 pt-4">
+        <div class="space-y-2">
+          <h4 class="font-medium">Available Components:</h4>
+          <ul class="space-y-1 text-sm text-secondary">
+            <li>• <code>Modal.Root</code> - The root modal container</li>
+            <li>• <code>Modal.Trigger</code> - Button to open the modal</li>
+            <li>• <code>Modal.Content</code> - Main modal content (includes Portal & Overlay)</li>
+            <li>• <code>Modal.Title</code> - Modal title (supports optional icon snippet)</li>
+            <li>• <code>Modal.Description</code> - Modal description</li>
+            <li>• <code>Modal.Bottom</code> - Modal footer with consistent styling</li>
+            <li>• <code>Modal.Close</code> - Close button wrapper</li>
+          </ul>
+        </div>
+        <div class="space-y-2">
+          <h4 class="font-medium">Simple Usage:</h4>
+          <pre class="overflow-x-auto rounded bg-surface p-2 text-xs">
+{`import { Modal } from 'design-system';
+
+<Modal.Root>
+  <Modal.Trigger>Open</Modal.Trigger>
+  <Modal.Content>
+    <Modal.Title>Title</Modal.Title>
+    Content here
+  </Modal.Content>
+</Modal.Root>`}
+          </pre>
+        </div>
+      </div>
+      <Modal.Bottom>
+        <Modal.Close variant="primary">Got it</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
+</Story>
+
+<Story name="No Portal" asChild>
+  <Modal.Root open>
+    <Modal.Trigger>
+      <Button variant="primary">Open Modal</Button>
+    </Modal.Trigger>
+    <Modal.Content withPortal={false}>
+      <Modal.Title>Edit Profile</Modal.Title>
+      <div class="space-y-4">
+        <p class="text-sm text-secondary">
+          Make changes to your profile here. Click save when you're done.
+        </p>
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="name">Name</label>
+          <input id="name" class="w-full rounded border border-input px-3 py-2" value="John Doe" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium" for="username">Username</label>
+          <input
+            id="username"
+            class="w-full rounded border border-input px-3 py-2"
+            value="@johndoe"
+          />
+        </div>
       </div>
-    {/snippet}
-  </Modal>
+      <Modal.Bottom>
+        <Modal.Close variant="secondary">Cancel</Modal.Close>
+        <Modal.Close variant="primary">Save Changes</Modal.Close>
+      </Modal.Bottom>
+    </Modal.Content>
+  </Modal.Root>
 </Story>

package/dist/components/modal/Modal.stories.svelte.d.ts

@@ -1,4 +1,4 @@
-import Modal from '../modal/Modal.svelte';
+import * as Modal from './index';
 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;

package/dist/components/modal/components/modal-bottom.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { ModalBottomProps } from '../types';
+
+  let { children, class: className = '', ...restProps }: ModalBottomProps = $props();
+
+  const baseClasses = 'border-t border-static -mx-5';
+  const finalClasses = `${baseClasses} ${className}`;
+</script>
+
+<div class={finalClasses} {...restProps}>
+  <div class="flex justify-end gap-4 px-5 py-4 pb-0">
+    {@render children()}
+  </div>
+</div>

package/dist/components/modal/components/modal-bottom.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalBottomProps } from '../types';
+declare const ModalBottom: import("svelte").Component<ModalBottomProps, {}, "">;
+type ModalBottom = ReturnType<typeof ModalBottom>;
+export default ModalBottom;

package/dist/components/modal/components/modal-close.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import Button from '../../button/Button.svelte';
+  import type { ModalCloseProps } from '../types';
+
+  let {
+    children,
+    variant = 'secondary',
+    disabled = false,
+    class: className = '',
+    ...restProps
+  }: ModalCloseProps = $props();
+</script>
+
+<Dialog.Close class={className} {...restProps} {disabled}>
+  <Button {variant} {disabled} tabindex={-1}>
+    {@render children()}
+  </Button>
+</Dialog.Close>

package/dist/components/modal/components/modal-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalCloseProps } from '../types';
+declare const ModalClose: import("svelte").Component<ModalCloseProps, {}, "">;
+type ModalClose = ReturnType<typeof ModalClose>;
+export default ModalClose;

package/dist/components/modal/components/modal-content.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import { scale } from 'svelte/transition';
+  import { Icon } from '../../icons';
+  import type { ModalContentProps } from '../types';
+  import Overlay from './modal-overlay.svelte';
+
+  let {
+    children,
+    class: className = '',
+    withClose = true,
+    withPortal = true,
+    'data-testid': dataTestId,
+    ...restProps
+  }: ModalContentProps = $props();
+
+  const baseClasses =
+    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 bg-surface p-5 shadow-lg sm:rounded-lg';
+  const finalClasses = `${baseClasses} ${className}`;
+</script>
+
+{#snippet withCloseButton()}
+  {#if withClose}
+    <Dialog.Close
+      class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+    >
+      <Icon iconName="X" />
+    </Dialog.Close>
+  {/if}
+{/snippet}
+
+{#if withPortal}
+  <Dialog.Portal>
+    <Overlay />
+    <Dialog.Content forceMount {...restProps}>
+      {#snippet child({ props, open })}
+        {#if open}
+          <div
+            {...props}
+            class={finalClasses}
+            data-testid={dataTestId}
+            transition:scale={{ duration: 200, start: 0.95 }}
+          >
+            {@render withCloseButton()}
+            {@render children()}
+          </div>
+        {/if}
+      {/snippet}
+    </Dialog.Content>
+  </Dialog.Portal>
+{:else}
+  <Overlay />
+  <Dialog.Content forceMount {...restProps}>
+    {#snippet child({ props, open })}
+      {#if open}
+        <div
+          {...props}
+          class={finalClasses}
+          data-testid={dataTestId}
+          transition:scale={{ duration: 200, start: 0.95 }}
+        >
+          {@render withCloseButton()}
+          {@render children()}
+        </div>
+      {/if}
+    {/snippet}
+  </Dialog.Content>
+{/if}

package/dist/components/modal/components/modal-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalContentProps } from '../types';
+declare const ModalContent: import("svelte").Component<ModalContentProps, {}, "">;
+type ModalContent = ReturnType<typeof ModalContent>;
+export default ModalContent;

package/dist/components/modal/components/modal-overlay.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+  import type { ModalOverlayProps } from '../types';
+  import { fade } from 'svelte/transition';
+
+  let { children, ...restProps }: ModalOverlayProps = $props();
+</script>
+
+<Dialog.Overlay forceMount {...restProps}>
+  {#snippet child({ props, open })}
+    {#if open}
+      <div
+        {...props}
+        class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm"
+        transition:fade={{ duration: 200 }}
+      >
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+    {/if}
+  {/snippet}
+</Dialog.Overlay>

package/dist/components/modal/components/modal-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalOverlayProps } from '../types';
+declare const ModalOverlay: import("svelte").Component<ModalOverlayProps, {}, "">;
+type ModalOverlay = ReturnType<typeof ModalOverlay>;
+export default ModalOverlay;

package/dist/components/modal/components/modal-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { ModalTitleProps } from '../types';
+
+  let { children, class: className = '', icon, ...restProps }: ModalTitleProps = $props();
+
+  const baseClasses = 'text-xl font-semibold tracking-tight text-primary';
+  const finalClasses = `${baseClasses} ${className}`;
+</script>
+
+<div class="space-y-6">
+  {#if icon}
+    <div class="flex justify-start">
+      {@render icon()}
+    </div>
+  {/if}
+  <Dialog.Title class={finalClasses} {...restProps}>
+    {@render children()}
+  </Dialog.Title>
+</div>

package/dist/components/modal/components/modal-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalTitleProps } from '../types';
+declare const ModalTitle: import("svelte").Component<ModalTitleProps, {}, "">;
+type ModalTitle = ReturnType<typeof ModalTitle>;
+export default ModalTitle;

package/dist/components/modal/components/modal-trigger.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { ModalTriggerProps } from '../types';
+
+  let { children, ...restProps }: ModalTriggerProps = $props();
+</script>
+
+<Dialog.Trigger {...restProps}>
+  {@render children()}
+</Dialog.Trigger>

package/dist/components/modal/components/modal-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ModalTriggerProps } from '../types';
+declare const ModalTrigger: import("svelte").Component<ModalTriggerProps, {}, "">;
+type ModalTrigger = ReturnType<typeof ModalTrigger>;
+export default ModalTrigger;

package/dist/components/modal/index.d.ts

@@ -1 +1,12 @@
-export { default as Modal } from './Modal.svelte';
+import { Dialog } from 'bits-ui';
+import Content from './components/modal-content.svelte';
+import Overlay from './components/modal-overlay.svelte';
+import Trigger from './components/modal-trigger.svelte';
+import Title from './components/modal-title.svelte';
+import Bottom from './components/modal-bottom.svelte';
+import Close from './components/modal-close.svelte';
+export declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+export declare const Description: import("svelte").Component<Dialog.DescriptionProps, {}, "ref">;
+export { Content, Overlay, Trigger, Title, Bottom, Close };
+export * from './types';

package/dist/components/modal/index.js

@@ -1 +1,15 @@
-export { default as Modal } from './Modal.svelte';
+import { Dialog } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/modal-content.svelte';
+import Overlay from './components/modal-overlay.svelte';
+import Trigger from './components/modal-trigger.svelte';
+import Title from './components/modal-title.svelte';
+import Bottom from './components/modal-bottom.svelte';
+import Close from './components/modal-close.svelte';
+// Re-export Dialog primitives
+export const Root = Dialog.Root;
+export const Portal = Dialog.Portal;
+export const Description = Dialog.Description;
+// Export custom components
+export { Content, Overlay, Trigger, Title, Bottom, Close };
+export * from './types';

package/dist/components/modal/types.d.ts

@@ -0,0 +1,32 @@
+import { type DialogContentProps as BitsDialogContentProps, type DialogOverlayProps as BitsDialogOverlayProps, type DialogTriggerProps as BitsDialogTriggerProps, type DialogTitleProps as BitsDialogTitleProps, type DialogCloseProps as BitsDialogCloseProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonVariant } from '../button/Button.svelte';
+export type ModalTriggerProps = {
+    children: Snippet;
+} & BitsDialogTriggerProps;
+export type ModalOverlayProps = {
+    children?: Snippet;
+} & BitsDialogOverlayProps;
+export type ModalContentProps = {
+    children: Snippet;
+    class?: string;
+    withClose?: boolean;
+    withPortal?: boolean;
+} & BitsDialogContentProps;
+export type ModalTitleProps = {
+    children: Snippet;
+    class?: string;
+    icon?: Snippet;
+} & BitsDialogTitleProps;
+export type ModalBottomProps = {
+    children: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export type ModalCloseProps = {
+    children: Snippet;
+    class?: string;
+    variant?: ButtonVariant;
+    onclick?: (event: MouseEvent) => void;
+    disabled?: boolean;
+} & BitsDialogCloseProps;

package/dist/components/modal/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export * from './components/input/';
 export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
-export * from './components/modal/';
+export * as Modal from './components/modal/';
 export * from './components/manual-cfu-counter/';
 export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';

package/dist/index.js

@@ -20,7 +20,7 @@ export * from './components/input/';
 export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
-export * from './components/modal/';
+export * as Modal from './components/modal/';
 export * from './components/manual-cfu-counter/';
 export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

package/dist/components/modal/Modal.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { type Snippet } from 'svelte';
-  import { v4 as uuidv4 } from 'uuid';
-  import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
-  import Divider from '../divider/Divider.svelte';
-
-  type ModalProps = {
-    Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
-    Header?: Snippet;
-    Content: Snippet;
-    Footer?: Snippet;
-    onclose?: () => void;
-    defaultOpen?: boolean;
-    id?: string;
-    withClose?: boolean;
-    closeOnClickOutside?: boolean;
-    class?: string;
-    contentClass?: string;
-  };
-  let {
-    Trigger,
-    Header,
-    Content,
-    Footer,
-    onclose,
-    defaultOpen = false,
-    id = 'modal-' + uuidv4(),
-    withClose = true,
-    closeOnClickOutside = true,
-    class: modalClass,
-    contentClass = 'p-4',
-  }: ModalProps = $props();
-
-  const modalOpen = $state(defaultOpen);
-  const openModal = () => {
-    const dialog = document.getElementById(id) as HTMLDialogElement | null;
-    dialog?.showModal();
-  };
-
-  const closeModal = () => {
-    const dialog = document.getElementById(id) as HTMLDialogElement | null;
-    dialog?.close();
-    onclose?.();
-  };
-</script>
-
-{#if Trigger}
-  {@render Trigger({ openModal, closeModal })}
-{/if}
-<dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-  <div class="modal-box relative flex max-w-full flex-col rounded-xl bg-surface p-0 {modalClass}">
-    {#if Header}
-      <div class="flex h-12 items-center px-4">
-        {@render Header()}
-      </div>
-      <Divider />
-    {/if}
-    {#if withClose}
-      <div class="absolute right-0 top-0 z-10 p-2">
-        <IconButton onclick={closeModal} size="md" variant="transparent" rounded={false}>
-          <Icon iconName="X" />
-        </IconButton>
-      </div>
-    {/if}
-    <div class="flex-1 {contentClass}">
-      {@render Content()}
-    </div>
-    {#if Footer}
-      <Divider />
-      <div class="px-4 py-2">
-        {@render Footer()}
-      </div>
-    {/if}
-  </div>
-  {#if closeOnClickOutside}
-    <form method="dialog" class="modal-backdrop">
-      <button onclick={closeModal}>close</button>
-    </form>
-  {/if}
-</dialog>

package/dist/components/modal/Modal.svelte.d.ts

@@ -1,20 +0,0 @@
-import { type Snippet } from 'svelte';
-type ModalProps = {
-    Trigger?: Snippet<[{
-        openModal: () => void;
-        closeModal: () => void;
-    }]>;
-    Header?: Snippet;
-    Content: Snippet;
-    Footer?: Snippet;
-    onclose?: () => void;
-    defaultOpen?: boolean;
-    id?: string;
-    withClose?: boolean;
-    closeOnClickOutside?: boolean;
-    class?: string;
-    contentClass?: string;
-};
-declare const Modal: import("svelte").Component<ModalProps, {}, "">;
-type Modal = ReturnType<typeof Modal>;
-export default Modal;