@reshape-biotech/design-system 2.0.4 → 2.2.0

package/dist/components/drawer/Drawer.stories.svelte

@@ -1,64 +1,231 @@
-<script module>
+<script context="module">
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Drawer from './Drawer.svelte';
   import Button from '../button/Button.svelte';
+  import * as Drawer from './';
+  import { Root } from './';
 
   const { Story } = defineMeta({
-    component: Drawer,
     title: 'Design System/Drawer',
-    tags: ['autodocs'],
+    component: Root,
+    parameters: {
+      layout: 'fullscreen',
+    },
+    argTypes: {
+      side: {
+        control: 'select',
+        options: ['left', 'right'],
+        description: 'Side from which the drawer slides in',
+      },
+      width: {
+        control: 'text',
+        description: 'Custom width for the drawer',
+      },
+      withOverlay: {
+        control: 'boolean',
+        description: 'Show overlay behind the drawer',
+      },
+      withClose: {
+        control: 'boolean',
+        description: 'Show close button in the drawer',
+      },
+      closeOnOutsideClick: {
+        control: 'boolean',
+        description: 'Close drawer when clicking outside',
+      },
+    },
   });
-
-  let open = $state(false);
+  const defaultArgs = {
+    side: 'right',
+    width: '460px',
+    withOverlay: false,
+    withClose: true,
+    closeOnOutsideClick: false,
+  };
 </script>
 
-<Story name="Base" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" bind:open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
-          </div>
+<Story name="Default" asChild>
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content>
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Drawer Title</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This is the main content of the drawer.</p>
+          <p>
+            The drawer slides in from the {defaultArgs.side} side and provides a focused interface for
+            specific tasks or detailed information.
+          </p>
+          <p>You can customize the width, add an overlay, control the close behavior, and more.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Cancel</span>
+          </Drawer.Close>
+
+          <Button variant="primary">Save</Button>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Left Side">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="secondary">Open Left Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} side="left">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Left Drawer</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer slides in from the left side.</p>
+          <p>It includes an overlay and closes when clicking outside.</p>
+          <ul class="list-inside list-disc space-y-2">
+            <li>Navigation items</li>
+            <li>Settings</li>
+            <li>User profile</li>
+            <li>Help & support</li>
+          </ul>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Close</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>
 
-<Story name="Open" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
+<Story name="With Overlay">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open with Overlay</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} withOverlay side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Drawer with Overlay</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer includes a backdrop overlay.</p>
+          <p>Clicking outside the drawer will close it.</p>
+
+          <div class="space-y-3 rounded-lg border border-gray-200 p-4">
+            <h3 class="font-semibold">Form Example</h3>
+            <input
+              type="text"
+              placeholder="Enter your name"
+              class="w-full rounded border border-gray-300 p-2"
+            />
+            <textarea
+              placeholder="Add a comment..."
+              class="h-24 w-full rounded border border-gray-300 p-2"
+            ></textarea>
           </div>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Cancel</span>
+          </Drawer.Close>
+          <Button variant="primary">Submit</Button>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>
 
-<Story name="Open Left" asChild>
-  <div class="py-12">
-    <Drawer id="my-drawer" side="left" bind:open controlled>
-      {#snippet trigger()}
-        <Button onClick={() => (open = true)}>Open Drawer</Button>
-      {/snippet}
-      {#snippet content()}
-        <div>
-          <div>
-            <p>Drawer content here</p>
+<Story name="Custom Width">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Wide Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} class="!w-[800px]" side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>Wide Drawer (600px)</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer has a custom width of 600px.</p>
+          <p>Perfect for forms, data tables, or detailed content.</p>
+
+          <div class="grid grid-cols-2 gap-4">
+            <div class="rounded-lg border border-static p-4">
+              <h4 class="mb-2 font-semibold">Column 1</h4>
+              <p>Content for the first column.</p>
+            </div>
+            <div class="rounded-lg border border-static p-4">
+              <h4 class="mb-2 font-semibold">Column 2</h4>
+              <p>Content for the second column.</p>
+            </div>
           </div>
         </div>
-      {/snippet}
-    </Drawer>
-  </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Close</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Without Close Button">
+  <Drawer.Root open>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content {...defaultArgs} withClose={false} side="right">
+      <div class="flex h-full flex-col p-5">
+        <Drawer.Title>No Close Button</Drawer.Title>
+
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer doesn't have a close button in the top-right corner.</p>
+          <p>Users must use the bottom buttons to close it.</p>
+          <p>This is useful for critical actions or multi-step processes.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close>
+            <span>Done</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
+</Story>
+
+<Story name="Behavior test" asChild>
+  <Drawer.Root>
+    <Drawer.Trigger>
+      <Button variant="primary">Open Drawer</Button>
+    </Drawer.Trigger>
+
+    <Drawer.Content>
+      <div class="flex h-full flex-col p-5">
+        <div class="mt-6 flex-1 space-y-4">
+          <p>This drawer doesn't have a close button in the top-right corner.</p>
+          <p>Users must use the bottom buttons to close it.</p>
+          <p>This is useful for critical actions or multi-step processes.</p>
+        </div>
+
+        <Drawer.Bottom>
+          <Drawer.Close variant="primary">
+            <span>Done</span>
+          </Drawer.Close>
+        </Drawer.Bottom>
+      </div>
+    </Drawer.Content>
+  </Drawer.Root>
 </Story>

package/dist/components/drawer/Drawer.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Drawer from './Drawer.svelte';
+import * as Drawer from './';
 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/drawer/components/drawer-bottom.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { DrawerBottomProps } from '../types';
+
+  let { children, class: className = '', ...restProps }: DrawerBottomProps = $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/drawer/components/drawer-bottom.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import { fly } from 'svelte/transition';
+  import { Icon } from '../../icons';
+  import type { DrawerContentProps } from '../types';
+  import Overlay from './drawer-overlay.svelte';
+
+  let {
+    children,
+    class: className = '',
+    side = 'right',
+    withClose = true,
+    withPortal = true,
+    withOverlay = false,
+    closeOnOutsideClick = false,
+    'data-testid': dataTestId,
+    ...restProps
+  }: DrawerContentProps = $props();
+
+  const baseClasses = 'fixed top-0 h-screen z-50  w-[460px] flex flex-col bg-surface shadow-lg';
+  const sideClasses = side === 'left' ? 'left-0' : 'right-0';
+  const finalClasses = `${baseClasses} ${sideClasses} ${className}`;
+
+  const getTransitionParams = (side: 'left' | 'right') => ({
+    x: side === 'left' ? -300 : 300,
+    duration: 300,
+  });
+</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}
+
+{#snippet content()}
+  <Dialog.Content
+    forceMount
+    {...restProps}
+    interactOutsideBehavior={closeOnOutsideClick ? 'close' : 'ignore'}
+  >
+    {#snippet child({ props, open })}
+      {#if open}
+        <div
+          {...props}
+          class={finalClasses}
+          data-testid={dataTestId}
+          transition:fly={getTransitionParams(side)}
+        >
+          {@render withCloseButton()}
+          {@render children()}
+        </div>
+      {/if}
+    {/snippet}
+  </Dialog.Content>
+{/snippet}
+
+{#if withPortal}
+  <Dialog.Portal>
+    {#if withOverlay}
+      <Overlay />
+    {/if}
+    {@render content()}
+  </Dialog.Portal>
+{:else}
+  {#if withOverlay}
+    <Overlay />
+  {/if}
+  {@render content()}
+{/if}

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

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

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Dialog, type WithoutChildrenOrChild } from 'bits-ui';
+  import type { DrawerOverlayProps } from '../types';
+  import { fade } from 'svelte/transition';
+
+  let { children, ...restProps }: DrawerOverlayProps = $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/drawer/components/drawer-overlay.svelte.d.ts

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog } from 'bits-ui';
+  import type { DrawerTitleProps } from '../types';
+
+  let { children, class: className = '', icon, ...restProps }: DrawerTitleProps = $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/drawer/components/drawer-title.svelte.d.ts

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

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

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

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

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

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

@@ -1 +1,12 @@
-export { default as Drawer } from './Drawer.svelte';
+import { Dialog } from 'bits-ui';
+import Content from './components/drawer-content.svelte';
+import Overlay from './components/drawer-overlay.svelte';
+import Trigger from './components/drawer-trigger.svelte';
+import Title from './components/drawer-title.svelte';
+import Bottom from './components/drawer-bottom.svelte';
+import Close from './components/drawer-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/drawer/index.js

@@ -1 +1,15 @@
-export { default as Drawer } from './Drawer.svelte';
+import { Dialog } from 'bits-ui';
+// Custom Svelte components
+import Content from './components/drawer-content.svelte';
+import Overlay from './components/drawer-overlay.svelte';
+import Trigger from './components/drawer-trigger.svelte';
+import Title from './components/drawer-title.svelte';
+import Bottom from './components/drawer-bottom.svelte';
+import Close from './components/drawer-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/drawer/types.d.ts

@@ -0,0 +1,36 @@
+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 DrawerSide = 'left' | 'right';
+export type DrawerTriggerProps = {
+    children: Snippet;
+} & BitsDialogTriggerProps;
+export type DrawerOverlayProps = {
+    children?: Snippet;
+} & BitsDialogOverlayProps;
+export type DrawerContentProps = {
+    children: Snippet;
+    class?: string;
+    side?: DrawerSide;
+    withClose?: boolean;
+    withPortal?: boolean;
+    withOverlay?: boolean;
+    closeOnOutsideClick?: boolean;
+} & BitsDialogContentProps;
+export type DrawerTitleProps = {
+    children: Snippet;
+    class?: string;
+    icon?: Snippet;
+} & BitsDialogTitleProps;
+export type DrawerBottomProps = {
+    children: Snippet;
+    class?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export type DrawerCloseProps = {
+    children: Snippet;
+    class?: string;
+    variant?: ButtonVariant;
+    onclick?: (event: MouseEvent) => void;
+    disabled?: boolean;
+} & BitsDialogCloseProps;

package/dist/components/drawer/types.js

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