@reshape-biotech/design-system 2.4.2 → 2.5.1

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

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

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

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

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

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

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

package/dist/components/dropdown/components/DropdownMenu.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<ul
+  tabIndex="0"
+  class={`menu dropdown-content menu-md z-[1] rounded-lg bg-surface p-1 shadow-menu ${className}`}
+>
+  {@render children?.()}
+</ul>
+
+<style>
+  :global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
+    background-color: #12192A1A
+}
+</style>

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

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

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
+    iconButton?: boolean;
+  }
+  let {
+    size = 'md',
+    class: className = '',
+    variant = 'primary',
+    children,
+    noPadding = false,
+    iconButton = false,
+  }: Props = $props();
+
+  type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+
+  const sizes = $derived({
+    sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
+    md: 'h-10 px-5 py-3',
+    lg: 'h-12 px-6 py-4',
+  });
+
+  const colors: Record<Color, string> = {
+    primary:
+      'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
+    secondary:
+      'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
+    transparent:
+      'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
+    danger:
+      'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary',
+  };
+</script>
+
+<div
+  role="button"
+  tabindex="0"
+  class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
+    iconButton?: boolean;
+}
+declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
+type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
+export default DropdownTrigger;

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
+
+<style>
+  div {
+
+    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)
+}
+
+  div:not(:focus-within):hover {
+
+    border-color: #5750ee40
+}
+
+  div:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
+</style>

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

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

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

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

package/dist/components/dropdown/index.js

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

package/dist/components/empty-content/EmptyContent.stories.svelte

@@ -0,0 +1,47 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import EmptyContent from './EmptyContent.svelte';
+  import { Icon } from '../../components/icons';
+
+  const { Story } = defineMeta({
+    component: EmptyContent,
+    title: 'Design System/EmptyContent',
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Default" asChild>
+  <div class="w-full bg-surface p-12">
+    <EmptyContent>
+      {#snippet icon()}
+        <Icon
+          iconName="ClockCountdown"
+          color="icon-tertiary"
+          width={48}
+          height={48}
+          weight="light"
+        />
+      {/snippet}
+      <h6>No activity</h6>
+      <p class="text-center text-sm">Nothing has been logged for this job.</p>
+    </EmptyContent>
+  </div>
+</Story>
+
+<Story name="With Different Icon" asChild>
+  <div class="w-full bg-surface p-12">
+    <EmptyContent>
+      {#snippet icon()}
+        <Icon
+          iconName="MagnifyingGlass"
+          color="icon-tertiary"
+          width={48}
+          height={48}
+          weight="light"
+        />
+      {/snippet}
+      <h6>No results found</h6>
+      <p class="text-center text-sm">Try adjusting your search or filters.</p>
+    </EmptyContent>
+  </div>
+</Story>

package/dist/components/empty-content/EmptyContent.stories.svelte.d.ts

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    icon: Snippet;
+    children: Snippet;
+  };
+
+  const { icon, children }: Props = $props();
+</script>
+
+<div class="flex w-full justify-center">
+  <div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
+    {@render icon()}
+    <div class="flex w-full flex-col items-center justify-center gap-2">
+      {@render children()}
+    </div>
+  </div>
+</div>

package/dist/components/empty-content/EmptyContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    icon: Snippet;
+    children: Snippet;
+};
+declare const EmptyContent: import("svelte").Component<Props, {}, "">;
+type EmptyContent = ReturnType<typeof EmptyContent>;
+export default EmptyContent;

package/dist/components/empty-content/index.d.ts

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

package/dist/components/empty-content/index.js

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