@reshape-biotech/design-system 2.4.0 → 2.4.2

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

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -1,236 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Dropdown from './Dropdown.svelte';
-
-  const { Story } = defineMeta({
-    component: Dropdown,
-    title: 'Design System/Dropdown',
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story name="Primary" asChild>
-  <div class="py-12">
-    <Dropdown>
-      {#snippet trigger({ Trigger })}
-        <Trigger>Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu class="w-full">
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-
-<Story name="OutlinedButton" asChild>
-  <div class="py-12">
-    <Dropdown>
-      {#snippet trigger({ OutlinedButton })}
-        <OutlinedButton>Dropdown</OutlinedButton>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu class="w-full">
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-
-<Story name="Secondary" asChild>
-  <div class="py-12">
-    <Dropdown>
-      {#snippet trigger({ Trigger })}
-        <Trigger variant="secondary">Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu class="w-full">
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-<Story name="Transparent" asChild>
-  <div class="py-12">
-    <Dropdown>
-      {#snippet trigger({ Trigger })}
-        <Trigger variant="transparent">Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu class="w-full">
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-<Story name="Danger" asChild>
-  <div class="py-12">
-    <Dropdown>
-      {#snippet trigger({ Trigger })}
-        <Trigger variant="danger">Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu class="w-full">
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-
-<Story name="Sides" asChild>
-  <div class="flex h-screen w-full items-center justify-center">
-    <div class="flex flex-1 justify-between">
-      <Dropdown open side="dropdown-bottom">
-        {#snippet trigger({ Trigger })}
-          <Trigger>Bottom</Trigger>
-        {/snippet}
-
-        {#snippet content({ DropdownMenu })}
-          <div>
-            <DropdownMenu class="w-[120px]">
-              <li>
-                <p>1st item</p>
-              </li>
-              <li>
-                <p>2nd item</p>
-              </li>
-            </DropdownMenu>
-          </div>
-        {/snippet}
-      </Dropdown>
-      <Dropdown open side="dropdown-top">
-        {#snippet trigger({ Trigger })}
-          <Trigger>Top</Trigger>
-        {/snippet}
-        {#snippet content({ DropdownMenu })}
-          <div>
-            <DropdownMenu class="w-[120px]">
-              <li>
-                <p>1st item</p>
-              </li>
-              <li>
-                <p>2nd item</p>
-              </li>
-            </DropdownMenu>
-          </div>
-        {/snippet}
-      </Dropdown>
-      <Dropdown open side="dropdown-right">
-        {#snippet trigger({ Trigger })}
-          <Trigger>Right</Trigger>
-        {/snippet}
-        {#snippet content({ DropdownMenu })}
-          <div>
-            <DropdownMenu class="w-[120px]">
-              <li>
-                <p>1st item</p>
-              </li>
-              <li>
-                <p>2nd item</p>
-              </li>
-            </DropdownMenu>
-          </div>
-        {/snippet}
-      </Dropdown>
-      <Dropdown open side="dropdown-left">
-        {#snippet trigger({ Trigger })}
-          <Trigger>Left</Trigger>
-        {/snippet}
-        {#snippet content({ DropdownMenu })}
-          <div>
-            <DropdownMenu class="w-[120px]">
-              <li>
-                <p>1st item</p>
-              </li>
-              <li>
-                <p>2nd item</p>
-              </li>
-            </DropdownMenu>
-          </div>
-        {/snippet}
-      </Dropdown>
-    </div>
-  </div>
-</Story>
-
-<Story name="End align" asChild>
-  <div class="py-12">
-    <Dropdown alignEnd open>
-      {#snippet trigger({ Trigger })}
-        <Trigger>Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownMenu })}
-        <div>
-          <DropdownMenu>
-            <li>
-              <p>1st item</p>
-            </li>
-            <li>
-              <p>2nd item</p>
-            </li>
-          </DropdownMenu>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>
-
-<Story name="Other content" asChild>
-  <div class="py-12">
-    <Dropdown alignEnd open>
-      {#snippet trigger({ Trigger })}
-        <Trigger>Dropdown</Trigger>
-      {/snippet}
-      {#snippet content({ DropdownContent })}
-        <div>
-          <DropdownContent>
-            <div>
-              <p>This is a dropdown with other content</p>
-              <p>It doesn't have to be list items</p>
-            </div>
-          </DropdownContent>
-        </div>
-      {/snippet}
-    </Dropdown>
-  </div>
-</Story>

package/dist/components/dropdown/Dropdown.stories.svelte.d.ts

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

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import DropdownContent from './components/DropdownContent.svelte';
-  import DropdownMenu from './components/DropdownMenu.svelte';
-  import DropdownTrigger from './components/DropdownTrigger.svelte';
-  import OutlinedButton from './components/OutlinedButton.svelte';
-
-  interface Props {
-    side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
-    open?: boolean;
-    alignEnd?: boolean;
-    openOnHover?: boolean;
-    closeOnItemClick?: boolean;
-    class?: string;
-    trigger?: Snippet<[{ Trigger: typeof DropdownTrigger; OutlinedButton: typeof OutlinedButton }]>;
-    content?: Snippet<
-      [{ DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu }]
-    >;
-  }
-
-  let {
-    side = 'dropdown-bottom',
-    open = $bindable(false),
-    alignEnd = false,
-    openOnHover = false,
-    closeOnItemClick = false,
-    class: className = '',
-    trigger,
-    content,
-  }: Props = $props();
-
-  let C = {};
-
-  const closeDropdown = () => {
-    open = false;
-    // https://medium.com/@malikhamzav/how-to-close-daisyui-dropdown-on-click-ea65c5749410
-    document.activeElement instanceof HTMLElement && document.activeElement.blur();
-  };
-
-  function handleItemClick() {
-    if (closeOnItemClick) {
-      closeDropdown();
-    }
-  }
-
-  function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
-      closeDropdown();
-    }
-  }
-</script>
-
-<div
-  class="dropdown {side} {className}"
-  class:dropdown-end={alignEnd}
-  class:dropdown-open={open}
-  class:dropdown-hover={openOnHover}
->
-  {@render trigger?.({ Trigger: DropdownTrigger, OutlinedButton: OutlinedButton })}
-  <div
-    class="dropdown-content z-10 w-full"
-    role="menu"
-    tabindex="-1"
-    onkeydown={handleKeyDown}
-    onclick={handleItemClick}
-  >
-    {@render content?.({ DropdownMenu, DropdownContent })}
-  </div>
-</div>

package/dist/components/dropdown/Dropdown.svelte.d.ts

@@ -1,26 +0,0 @@
-import type { Snippet } from 'svelte';
-import DropdownContent from './components/DropdownContent.svelte';
-import DropdownMenu from './components/DropdownMenu.svelte';
-import DropdownTrigger from './components/DropdownTrigger.svelte';
-import OutlinedButton from './components/OutlinedButton.svelte';
-interface Props {
-    side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
-    open?: boolean;
-    alignEnd?: boolean;
-    openOnHover?: boolean;
-    closeOnItemClick?: boolean;
-    class?: string;
-    trigger?: Snippet<[{
-        Trigger: typeof DropdownTrigger;
-        OutlinedButton: typeof OutlinedButton;
-    }]>;
-    content?: Snippet<[
-        {
-            DropdownContent: typeof DropdownContent;
-            DropdownMenu: typeof DropdownMenu;
-        }
-    ]>;
-}
-declare const Dropdown: import("svelte").Component<Props, {}, "open">;
-type Dropdown = ReturnType<typeof Dropdown>;
-export default Dropdown;

package/dist/components/dropdown/components/DropdownContent.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type Variant = 'primary' | 'secondary';
-
-  interface Props {
-    class?: string;
-    variant?: Variant;
-    children?: Snippet;
-  }
-
-  const Variants: Record<Variant, string> = {
-    primary: 'bg-surface text-primary',
-    secondary: 'bg-base-inverse text-primary-inverse',
-  };
-
-  let { class: className = '', variant = 'primary', children }: Props = $props();
-
-  let variantClass = $derived(Variants[variant]);
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<!-- DaisyUI have a bug wit safari dropdown. Requires tabindex=0-->
-<div
-  class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
-  tabindex="0"
->
-  {@render children?.()}
-</div>

package/dist/components/dropdown/components/DropdownContent.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { Snippet } from 'svelte';
-type Variant = 'primary' | 'secondary';
-interface Props {
-    class?: string;
-    variant?: Variant;
-    children?: Snippet;
-}
-declare const DropdownContent: import("svelte").Component<Props, {}, "">;
-type DropdownContent = ReturnType<typeof DropdownContent>;
-export default DropdownContent;