@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/divider/Divider.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Divider;
-type Divider = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Divider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Divider from './Divider.svelte';
-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/components/divider/Divider.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  interface Props {
-    class?: string;
-    vertical?: boolean;
-    inverse?: boolean;
-  }
-
-  let { class: className = '', vertical = false, inverse = false }: Props = $props();
-</script>
-
-<div
-  class={`${
-    vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
-  } ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
-></div>

package/dist/components/divider/Divider.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    class?: string;
-    vertical?: boolean;
-    inverse?: boolean;
-}
-declare const Divider: import("svelte").Component<Props, {}, "">;
-type Divider = ReturnType<typeof Divider>;
-export default Divider;

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

@@ -1 +0,0 @@
-export { default as Divider } from './Divider.svelte';

package/dist/components/divider/index.js

@@ -1 +0,0 @@
-export { default as Divider } from './Divider.svelte';

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

@@ -1,231 +0,0 @@
-<script context="module">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Button from '../button/Button.svelte';
-  import * as Drawer from './';
-  import { Root } from './';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Drawer',
-    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',
-      },
-    },
-  });
-  const defaultArgs = {
-    side: 'right',
-    width: '460px',
-    withOverlay: false,
-    withClose: true,
-    closeOnOutsideClick: false,
-  };
-</script>
-
-<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>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Close</span>
-          </Drawer.Close>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<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>
-
-        <Drawer.Bottom>
-          <Drawer.Close>
-            <span>Cancel</span>
-          </Drawer.Close>
-          <Button variant="primary">Submit</Button>
-        </Drawer.Bottom>
-      </div>
-    </Drawer.Content>
-  </Drawer.Root>
-</Story>
-
-<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>
-
-        <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

@@ -1,27 +0,0 @@
-export default Drawer;
-type Drawer = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Drawer: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +0,0 @@
-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,12 +0,0 @@
-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,15 +0,0 @@
-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

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

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