@reshape-biotech/design-system 2.1.0 → 2.2.1

package/dist/components/button/Button.svelte

@@ -8,13 +8,14 @@
     | 'secondary-inverse'
     | 'transparent-inverse';
   export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 </script>
 
 <script lang="ts">
   import Spinner from '../spinner/Spinner.svelte';
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  interface Props extends HTMLButtonAttributes {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
@@ -44,6 +45,7 @@
     children,
     dataTestId = undefined,
     rounded = false,
+    ...rest
   }: Props = $props();
 
   let variantClass = $derived(`btn-${variant}`);
@@ -68,6 +70,7 @@
   data-testid={dataTestId}
   class:rounded
   class:disabled
+  {...rest}
 >
   {#if loading}
     <Spinner />
@@ -225,9 +228,7 @@
 
     background-color: transparent;
 
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+    color: inherit
 }
   .btn-transparent:hover {
 

package/dist/components/button/Button.svelte.d.ts

@@ -1,7 +1,8 @@
 export type ButtonVariant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse' | 'transparent-inverse';
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-interface Props {
+interface Props extends HTMLButtonAttributes {
     class?: string;
     onClick?: (event?: MouseEvent) => void;
     type?: 'button' | 'submit' | 'reset' | null | undefined;

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

@@ -2,6 +2,7 @@
   import { Combobox } from 'bits-ui';
   import type { ComboboxContentProps } from '../types';
   import { Icon } from '../../icons';
+  import { fade } from 'svelte/transition';
 
   let {
     children,
@@ -10,27 +11,41 @@
     portalled = true,
     header,
     footer,
+    paddedContent = true,
+    fadeDuration = 0,
     ...props
   }: ComboboxContentProps = $props();
 </script>
 
 {#snippet content()}
-  <Combobox.Content {...props} class={className}>
-    {@render header?.()}
-    {#if showScroll}
-      <Combobox.ScrollUpButton class="flex justify-center">
-        <Icon iconName="CaretUp" />
-      </Combobox.ScrollUpButton>
-      <Combobox.Viewport class="p-1">
-        {@render children()}
-      </Combobox.Viewport>
-      <Combobox.ScrollDownButton class="flex justify-center">
-        <Icon iconName="CaretDown" />
-      </Combobox.ScrollDownButton>
-    {:else}
-      {@render children()}
-    {/if}
-    {@render footer?.()}
+  <Combobox.Content {...props} class={className} forceMount>
+    {#snippet child({ wrapperProps, props, open })}
+      {#snippet content()}
+        {@render header?.()}
+        {#if showScroll}
+          <Combobox.ScrollUpButton class="flex justify-center">
+            <Icon iconName="CaretUp" />
+          </Combobox.ScrollUpButton>
+          <Combobox.Viewport class={paddedContent ? 'p-1' : ''}>
+            {@render children()}
+          </Combobox.Viewport>
+          <Combobox.ScrollDownButton class="flex justify-center">
+            <Icon iconName="CaretDown" />
+          </Combobox.ScrollDownButton>
+        {:else}
+          {@render children()}
+        {/if}
+        {@render footer?.()}
+      {/snippet}
+
+      {#if open}
+        <div {...wrapperProps}>
+          <div {...props} transition:fade={{ duration: fadeDuration }}>
+            {@render content()}
+          </div>
+        </div>
+      {/if}
+    {/snippet}
   </Combobox.Content>
 {/snippet}
 
@@ -45,19 +60,19 @@
 <style>
   :global([data-combobox-content]) {
 
+    z-index: 1;
+
     width: 100%;
 
     border-radius: 0.75rem;
 
-    border-width: 1px;
-
     --tw-bg-opacity: 1;
 
     background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
 
-    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 

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

@@ -7,6 +7,8 @@ export type ComboboxContentProps = {
     portalled?: boolean;
     header?: Snippet;
     footer?: Snippet;
+    paddedContent?: boolean;
+    fadeDuration?: number;
 } & BitsComboboxContentProps;
 export type ComboboxTriggerProps = {
     children: Snippet;

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';

package/dist/components/icon-button/IconButton.svelte

@@ -75,6 +75,7 @@
 <style>
   button {
     display: flex;
+    flex-shrink: 0;
     cursor: pointer;
     align-items: center;
     justify-content: center;
@@ -94,39 +95,39 @@
 }
 
   .size-xs {
-    height: 1.5rem;
-    width: 1.5rem
+    width: 1.5rem;
+    height: 1.5rem
 }
 
   .size-xs :global(svg) {
-    height: 1rem;
-    width: 1rem
+    width: 1rem;
+    height: 1rem
 }
   .size-sm {
-    height: 2rem;
-    width: 2rem
+    width: 2rem;
+    height: 2rem
 }
   .size-sm :global(svg) {
-    height: 1rem;
-    width: 1rem
+    width: 1rem;
+    height: 1rem
 }
   .size-md {
-    height: 2.5rem;
-    width: 2.5rem
+    width: 2.5rem;
+    height: 2.5rem
 }
   .size-md :global(svg) {
-    height: 1.25rem;
-    width: 1.25rem
+    width: 1.25rem;
+    height: 1.25rem
 }
 
   .size-lg {
-    height: 3rem;
-    width: 3rem
+    width: 3rem;
+    height: 3rem
 }
 
   .size-lg :global(svg) {
-    height: 1.5rem;
-    width: 1.5rem
+    width: 1.5rem;
+    height: 1.5rem
 }
 
   .color-primary {

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

@@ -9,6 +9,11 @@ export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';
+export interface IconComponentProps {
+    size?: number | string;
+    color?: string;
+    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+}
 export { default as Icon } from './Icon.svelte';
 export type IconProps = {
     iconName: IconName;

package/dist/components/icons/index.js

@@ -60,7 +60,6 @@ import House from 'phosphor-svelte/lib/House';
 import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
-import Link from 'phosphor-svelte/lib/Link';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
@@ -102,6 +101,7 @@ import Stop from 'phosphor-svelte/lib/Stop';
 import StopCircle from 'phosphor-svelte/lib/StopCircle';
 import Sun from 'phosphor-svelte/lib/Sun';
 import Table from 'phosphor-svelte/lib/Table';
+import Link from 'phosphor-svelte/lib/Link';
 import Tag from 'phosphor-svelte/lib/Tag';
 import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';

package/dist/components/input/Input.svelte

@@ -7,13 +7,13 @@
   interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    transparent?: boolean;
     clearable?: boolean;
     onclear?: () => void;
     class?: string;
@@ -23,6 +23,7 @@
 
   let {
     label = null,
+    variant = 'default',
     value = $bindable(),
     type = 'text',
     validator = (_) => {
@@ -33,7 +34,6 @@
     error,
     input = $bindable(),
     size = 'md',
-    transparent = false,
     clearable = false,
     onclear = () => {},
     class: className,
@@ -75,9 +75,10 @@
 
   <div
     class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
-    class:border-transparent={transparent}
-    class:shadow-input={!transparent}
+    class:border-transparent={variant === 'transparent'}
+    class:shadow-input={!(variant === 'transparent')}
     class:!border-error={!valid}
+    class:borderless={variant === 'borderless'}
   >
     <div class="whitespace-nowrap text-secondary">
       {@render prefix?.({ valid })}
@@ -102,6 +103,7 @@
     {#if clearable && value}
       <IconButton
         variant="transparent"
+        rounded={false}
         size="xs"
         onclick={() => {
           value = '';
@@ -124,6 +126,8 @@
 
     resize: none;
 
+    padding: 0.25rem;
+
     outline: 2px solid transparent;
 
     outline-offset: 2px
@@ -141,11 +145,37 @@
     border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
 }
 
+  .borderless {
+
+    border-style: none;
+
+    --tw-shadow: 0 0 #0000;
+
+    --tw-shadow-colored: 0 0 #0000;
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+  .borderless input {
+
+    border-style: none;
+
+    outline: 2px solid transparent;
+
+    outline-offset: 2px;
+
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+
   .size-xs {
 
     height: 1.5rem;
 
-    padding: 0.5rem;
+    padding: 0.25rem;
 
     font-size: 0.75rem;
 
@@ -156,35 +186,23 @@
 
     height: 2rem;
 
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding: 0.25rem
 }
 
   .size-md {
 
     height: 2.5rem;
 
-    padding-left: 0.75rem;
-
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding: 0.5rem
 }
 
   .size-lg {
 
     height: 3rem;
 
-    padding-left: 0.75rem;
+    padding-left: 0.5rem;
 
-    padding-right: 0.75rem;
+    padding-right: 0.5rem;
 
     padding-top: 0.75rem;
 

package/dist/components/input/Input.svelte.d.ts

@@ -3,13 +3,13 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 interface InputProps extends Omit<HTMLInputAttributes, 'size' | 'prefix' | 'suffix'> {
     label?: string | null;
     id?: string | undefined;
+    variant?: 'default' | 'transparent' | 'borderless';
     validator?: (a: string | number) => boolean;
     prefix?: Snippet<[any]>;
     suffix?: Snippet;
     error?: Snippet;
     input?: HTMLInputElement;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
-    transparent?: boolean;
     clearable?: boolean;
     onclear?: () => void;
     class?: string;

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

@@ -29,27 +29,7 @@
   {/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 />
+{#snippet content()}
   <Dialog.Content forceMount {...restProps}>
     {#snippet child({ props, open })}
       {#if open}
@@ -65,4 +45,14 @@
       {/if}
     {/snippet}
   </Dialog.Content>
+{/snippet}
+
+{#if withPortal}
+  <Dialog.Portal>
+    <Overlay />
+    {@render content()}
+  </Dialog.Portal>
+{:else}
+  <Overlay />
+  {@render content()}
 {/if}

package/dist/index.d.ts

@@ -8,8 +8,7 @@ export * as Combobox from './components/combobox/';
 export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
-export * from './components/drawer/';
-export * from './components/drawer/';
+export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';

package/dist/index.js

@@ -9,8 +9,7 @@ export * as Combobox from './components/combobox/';
 export * from './components/graphs';
 export * from './components/datepicker/';
 export * from './components/divider/';
-export * from './components/drawer/';
-export * from './components/drawer/';
+export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';

package/package.json

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

package/dist/components/drawer/Drawer.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import DrawerLabel from './DrawerLabel.svelte';
-
-  interface Props {
-    id: string;
-    controlled?: boolean;
-    // Open only works when controlled is true
-    open?: boolean;
-    side?: 'left' | 'right';
-    trigger?: Snippet;
-    content: Snippet;
-  }
-
-  let {
-    id,
-    controlled = false,
-    open = $bindable(false),
-    side = 'right',
-    trigger,
-    content,
-  }: Props = $props();
-</script>
-
-<div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
-  {#if controlled}
-    <input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
-  {:else}
-    <input {id} type="checkbox" class="drawer-toggle" />
-  {/if}
-
-  <div class="drawer-content">
-    {@render trigger?.()}
-  </div>
-  <div class="drawer-side" inert={controlled ? !open : false}>
-    <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="h-screen bg-surface sm:w-[460px]">
-      {@render content()}
-    </div>
-  </div>
-</div>

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    id: string;
-    controlled?: boolean;
-    open?: boolean;
-    side?: 'left' | 'right';
-    trigger?: Snippet;
-    content: Snippet;
-}
-declare const Drawer: import("svelte").Component<Props, {}, "open">;
-type Drawer = ReturnType<typeof Drawer>;
-export default Drawer;

package/dist/components/drawer/DrawerLabel.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    id: string;
-    classes?: string;
-    children: Snippet;
-  }
-
-  let { id, classes = '', children }: Props = $props();
-</script>
-
-<label for={id} class={`${classes}`}>{@render children()}</label>
-
-<style>
-  label {
-
-    display: flex;
-
-    width: 100%;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    gap: 0.25rem;
-
-    border-radius: 0.5rem;
-
-    border-width: 1px;
-
-    border-color: #12192A1A;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding: 0.75rem;
-
-    --tw-text-opacity: 1;
-
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-
-    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
-
-    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
-
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
-}
-
-  label:not(:focus-within):hover {
-
-    border-color: #5750ee40
-}
-
-  label:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-</style>

package/dist/components/drawer/DrawerLabel.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    id: string;
-    classes?: string;
-    children: Snippet;
-}
-declare const DrawerLabel: import("svelte").Component<Props, {}, "">;
-type DrawerLabel = ReturnType<typeof DrawerLabel>;
-export default DrawerLabel;