@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/activity/Activity.stories.svelte

@@ -1,127 +0,0 @@
-<script module lang="ts">
-  import Button from '../button/Button.svelte';
-  import Activity from './Activity.svelte';
-  import * as Collapsible from '../collapsible/index';
-  import { Icon } from '../icons';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  const { Story } = defineMeta({
-    component: Activity,
-    title: 'Design System/Activity',
-    tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=2248-7688&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
-  });
-
-  let activities = $state([
-    {
-      icon: 'add' as const,
-      label: 'Job created',
-      timestamp: '12 Sep 2025, 9:59',
-      author: 'Ella Roth',
-    },
-    {
-      icon: 'edit' as const,
-      label: 'Sample ID edited',
-      previous_value: 'Sample123',
-      value: 'Sample456',
-      timestamp: '5 Sep 2025, 12:05',
-      author: 'Ella Roth',
-    },
-    {
-      icon: 'success' as const,
-      label: 'Job finished',
-      timestamp: '14 Aug 2025, 13:05',
-    },
-    {
-      icon: 'pause' as const,
-      label: 'Job paused',
-      timestamp: '4 Aug 2025, 13:05',
-      author: 'Bob Vance',
-    },
-    {
-      icon: 'stop' as const,
-      label: 'Some label that just happened to be very long so it will probably wrap in most cases',
-      timestamp: '4 Aug 2025, 13:05',
-      author: 'Michael Scott',
-    },
-    {
-      icon: 'warning' as const,
-      label: 'Job recovered after interruption, some data may be lost',
-      timestamp: '3 Aug 2025, 10:30',
-      author: 'Jim Halpert',
-    },
-    {
-      icon: 'failed' as const,
-      label: 'Job failed',
-      timestamp: '2 Aug 2025, 14:22',
-      author: 'System',
-    },
-  ]);
-
-  const fetchedMoreActivities = () => {
-    const index = Math.floor(Math.random() * (activities.length - 1));
-    activities = [...activities, activities[index]];
-  };
-</script>
-
-<Story name="Collapsible activity" asChild>
-  <Collapsible.Root open>
-    <Collapsible.Trigger class="w-full pb-4">
-      <h6>Activity</h6>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col items-center gap-3">
-      <div class="flex flex-col text-sm">
-        {#each activities as activity}
-          <Activity {activity} />
-        {/each}
-      </div>
-      <Button
-        onClick={fetchedMoreActivities}
-        variant="outline"
-        size="sm"
-        class="icon-secondary w-36 rounded-full"
-      >
-        <Icon iconName="Eye" />
-        <p>Show more</p>
-      </Button>
-    </Collapsible.Content>
-  </Collapsible.Root>
-</Story>
-
-<Story
-  name="Single activity"
-  args={{ activity: { icon: 'delete', label: 'Project deleted', timestamp: '2 Oct, 1980' } }}
-/>
-
-<Story name="Few activities" asChild>
-  <Activity
-    activity={{
-      icon: 'pause',
-      label: 'Project paused',
-      timestamp: '2 Oct, 1999',
-      author: 'Dwight',
-    }}
-  />
-  <Activity
-    activity={{
-      icon: 'add',
-      label: 'Project created',
-      timestamp: '2 Oct, 1999',
-      author: 'Dwight',
-    }}
-  />
-  <Activity
-    activity={{
-      icon: 'add',
-      label: 'Project exploded',
-      timestamp: '2 Oct, 1999',
-      author: 'Dwight',
-    }}
-  />
-</Story>

package/dist/components/activity/Activity.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Activity from './Activity.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;
-}
-declare const Activity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Activity = InstanceType<typeof Activity>;
-export default Activity;

package/dist/components/activity/Activity.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">
-  import { Icon, type IconName, type IconColor, type BackgroundClass } from '../icons';
-  import { DateTime } from 'luxon';
-
-  type ActivityIcon =
-    | 'add'
-    | 'capture'
-    | 'delete'
-    | 'edit'
-    | 'failed'
-    | 'pause'
-    | 'start'
-    | 'stop'
-    | 'warning'
-    | 'success'
-    | 'export-succeeded'
-    | 'export-failed';
-
-  type Activity = {
-    activity_type?: string;
-    icon: ActivityIcon;
-    label: string;
-    timestamp: string;
-    author?: string | null;
-    field?: string | null;
-    previous_value?: string | null;
-    value?: string | null;
-  };
-
-  type Props = {
-    activity: Activity;
-    class?: string;
-  };
-
-  const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
-    add: 'Plus',
-    capture: 'Aperture',
-    delete: 'Trash',
-    edit: 'PencilSimple',
-    failed: 'WarningCircle',
-    pause: 'Pause',
-    start: 'Play',
-    stop: 'Stop',
-    warning: 'Warning',
-    success: 'Check',
-    'export-succeeded': 'DownloadSimple',
-    'export-failed': 'DownloadSimple',
-  };
-
-  const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
-    add: 'icon-secondary',
-    capture: 'icon-secondary',
-    delete: 'icon-danger',
-    edit: 'icon-secondary',
-    failed: 'icon-danger',
-    pause: 'icon-secondary',
-    start: 'icon-secondary',
-    stop: 'icon-secondary',
-    warning: 'icon-warning',
-    success: 'icon-secondary',
-    'export-succeeded': 'icon-secondary',
-    'export-failed': 'icon-danger',
-  };
-
-  const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
-    add: 'bg-neutral',
-    capture: 'bg-neutral',
-    delete: 'bg-neutral',
-    edit: 'bg-neutral',
-    failed: 'bg-danger',
-    pause: 'bg-neutral',
-    start: 'bg-neutral',
-    stop: 'bg-neutral',
-    warning: 'bg-warning',
-    success: 'bg-neutral',
-    'export-succeeded': 'bg-neutral',
-    'export-failed': 'bg-danger',
-  };
-
-  function formatDateTime(timestamp: string): string {
-    try {
-      const dateTime = DateTime.fromISO(timestamp);
-
-      if (dateTime.isValid) {
-        return dateTime.toLocaleString(DateTime.DATETIME_MED, {
-          locale: navigator.language === 'en-US' ? 'en-US' : 'en-GB',
-        });
-      }
-
-      return timestamp;
-    } catch (err) {
-      return timestamp;
-    }
-  }
-
-  let { class: className = '', activity }: Props = $props();
-</script>
-
-<div class={`group flex items-stretch gap-3 ${className}`}>
-  <div class="flex min-h-12 flex-col items-center gap-1.5">
-    <div class="w-0.5 grow bg-neutral group-first:invisible"></div>
-    <div
-      class="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
-        activity.icon
-      ]}"
-    >
-      <Icon iconName={ACTIVITY_ICONS[activity.icon]} color={ACTIVITY_COLOR[activity.icon]} />
-    </div>
-    <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
-  </div>
-  <div class="flex items-center py-4">
-    <div class="text-secondary">
-      <span class="text-primary">{activity.label}</span>
-      {#if activity.previous_value}
-        <span> from <span class="text-primary">{activity.previous_value}</span></span>
-      {/if}
-      {#if activity.value}
-        <span> to <span class="text-primary">{activity.value}</span></span>
-      {/if}
-      <span class="px-0.5">⸱</span>
-      <span>{formatDateTime(activity.timestamp)}</span>
-      {#if activity.author}
-        <span> by <span class="text-primary">{activity.author}</span></span>
-      {/if}
-    </div>
-  </div>
-</div>

package/dist/components/activity/Activity.svelte.d.ts

@@ -1,17 +0,0 @@
-type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
-type Activity = {
-    activity_type?: string;
-    icon: ActivityIcon;
-    label: string;
-    timestamp: string;
-    author?: string | null;
-    field?: string | null;
-    previous_value?: string | null;
-    value?: string | null;
-};
-type Props = {
-    activity: Activity;
-    class?: string;
-};
-declare const Activity: import("svelte").Component<Props, {}, "">;
-export default Activity;

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

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

package/dist/components/activity/index.js

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

package/dist/components/avatar/Avatar.stories.svelte

@@ -1,41 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Avatar from './Avatar.svelte';
-
-  const { Story } = defineMeta({
-    component: Avatar,
-    title: 'Design System/Avatar',
-    tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/VHTMNdy8PAXAMx43edNZGW/%F0%9F%92%A0--Reshape-Design-System%3A-V1?node-id=9-9253&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
-  });
-</script>
-
-<Story name="Default" args={{ name: 'John Doe' }} />
-
-<Story name="Sizes" asChild>
-  <div class="flex gap-2">
-    <Avatar name="John Doe" size="sm" />
-    <Avatar name="John Doe" size="md" />
-  </div>
-</Story>
-
-<Story name="Email" args={{ name: 'john.doe@example.com' }} />
-
-<Story name="Single Name" args={{ name: 'John' }} />
-
-<Story name="No Name" args={{ name: null }} />
-
-<Story name="Without Tooltip" args={{ showTooltip: false }} />
-
-<Story name="Multiple Avatars" asChild>
-  <div class="flex gap-2">
-    <Avatar name="John Doe" />
-    <Avatar name="Jane Smith" />
-    <Avatar name="Alex Johnson" />
-  </div>
-</Story>

package/dist/components/avatar/Avatar.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Avatar from './Avatar.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;
-}
-declare const Avatar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Avatar = InstanceType<typeof Avatar>;
-export default Avatar;

package/dist/components/avatar/Avatar.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-  import Tooltip from '../tooltip/Tooltip.svelte';
-  export interface AvatarProps {
-    name: string | null | undefined;
-    size?: 'sm' | 'md';
-    showTooltip?: boolean;
-  }
-
-  let { name, size = 'md', showTooltip = true }: AvatarProps = $props();
-  const sizes = {
-    sm: 'h-6 w-6 min-w-6 text-xxs font-semibold tracking-wide',
-    md: 'h-8 w-8 min-w-8 text-xs font-semibold tracking-wide',
-  };
-
-  let sizeClassName = $derived(sizes[size]);
-
-  const getInitials = (name: string | null | undefined) => {
-    if (!name) {
-      return '?'; // You can use any default value here
-    }
-    // Check if the name is an email
-    const isEmail = name.includes('@');
-    if (isEmail) {
-      return name.slice(0, 2).toUpperCase();
-    }
-
-    // Split the name by space
-    const splitName = name.split(' ');
-
-    // Check if the name is a single word or already initials
-    if (splitName.length === 1 || (splitName.length === 1 && splitName[0].length <= 2)) {
-      return name.slice(0, 2).toUpperCase();
-    }
-
-    // If the name is multiple words, use the first letter of the first and last word
-    const firstInitial = splitName[0][0];
-    const lastInitial = splitName[splitName.length - 1][0];
-
-    return (firstInitial + lastInitial).toUpperCase();
-  };
-  let initials = $derived(getInitials(name));
-</script>
-
-{#snippet avatar()}
-  <div
-    class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
-  >
-    {initials}
-  </div>
-{/snippet}
-
-{#if showTooltip}
-  <Tooltip>
-    {#snippet trigger()}
-      {@render avatar()}
-    {/snippet}
-    {#snippet content()}
-      <span>{name ? name : 'Unknown'}</span>
-    {/snippet}
-  </Tooltip>
-{:else}
-  {@render avatar()}
-{/if}

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,8 +0,0 @@
-export interface AvatarProps {
-    name: string | null | undefined;
-    size?: 'sm' | 'md';
-    showTooltip?: boolean;
-}
-declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
-type Avatar = ReturnType<typeof Avatar>;
-export default Avatar;

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

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

package/dist/components/avatar/index.js

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

package/dist/components/banner/Banner.stories.svelte

@@ -1,129 +0,0 @@
-<script module lang="ts">
-  import { Icon } from '../icons';
-  import Banner from './Banner.svelte';
-  import Button from '../button/Button.svelte';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  const { Story } = defineMeta({
-    component: Banner,
-    title: 'Design System/Banner',
-    tags: ['autodocs'],
-  });
-
-  let showBanner = $state(true);
-</script>
-
-<Story name="Well finding warning" asChild>
-  <Banner type="warning" closable={false}>
-    {#snippet icon()}
-      <Icon size={20} iconName="Warning" color="warning" weight="bold" />
-    {/snippet}
-    {#snippet content()}
-      Our system couldn't find the wells in some plates. Analysis can't be done. For more help, <a
-        href="https://docs.reshapebiotech.com/reshape-biotech-knowledgebase/general-info/troubleshooting/well-detection"
-        >check our documentation</a
-      >
-      or <a href="mailto:support@reshapebiotech.com">contact us</a>.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="No icon" asChild>
-  <Banner type="success">
-    {#snippet content()}
-      This banner has no icon.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="No toggle" asChild>
-  <Banner type="progress" closable={false}>
-    {#snippet icon()}
-      <Icon size={20} iconName="Info" color="icon-blue" weight="bold" />
-    {/snippet}
-    {#snippet content()}
-      This banner has no toggle.
-    {/snippet}
-  </Banner>
-</Story>
-
-<Story name="Toggle back on" asChild>
-  <div class="h-28">
-    <Button onClick={() => (showBanner = true)} disabled={showBanner}>Toggle banner back on</Button>
-    <br />
-    <br />
-
-    <Banner type="error" bind:show={showBanner}>
-      {#snippet icon()}
-        <Icon size={20} iconName="Info" color="danger" weight="bold" />
-      {/snippet}
-      {#snippet content()}
-        This banner can be toggled off with the "x" to the right and back on with the button above.
-      {/snippet}
-    </Banner>
-  </div>
-</Story>
-
-<Story name="Type variations" asChild>
-  <div class="space-y-4">
-    <div class="space-y-2">
-      <h4>Neutral</h4>
-      <Banner type="neutral">
-        {#snippet icon()}
-          <Icon size={20} iconName="Info" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "neutral" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Success</h4>
-      <Banner type="success">
-        {#snippet icon()}
-          <Icon size={20} iconName="CheckCircle" color="icon-success" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "success" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Progress</h4>
-      <Banner type="progress">
-        {#snippet icon()}
-          <Icon size={20} iconName="Circle" color="icon-blue" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "progress" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Warning</h4>
-      <Banner type="warning">
-        {#snippet icon()}
-          <Icon size={20} iconName="Warning" color="icon-warning" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is a "warning" banner.
-        {/snippet}
-      </Banner>
-    </div>
-
-    <div class="space-y-2">
-      <h4>Error</h4>
-      <Banner type="error">
-        {#snippet icon()}
-          <Icon size={20} iconName="WarningCircle" color="icon-danger" weight="bold" />
-        {/snippet}
-        {#snippet content()}
-          This is an "error" banner.
-        {/snippet}
-      </Banner>
-    </div>
-  </div>
-</Story>

package/dist/components/banner/Banner.stories.svelte.d.ts

@@ -1,19 +0,0 @@
-import Banner from './Banner.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;
-}
-declare const Banner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Banner = InstanceType<typeof Banner>;
-export default Banner;

package/dist/components/banner/Banner.svelte

@@ -1,59 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { IconButton } from '../icon-button/';
-  import Icon from '../icons/Icon.svelte';
-
-  interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    show?: boolean;
-    closable?: boolean;
-    icon?: Snippet;
-    content: Snippet;
-  }
-
-  let {
-    type = 'neutral',
-    show = $bindable(true),
-    closable = true,
-    icon,
-    content,
-  }: Props = $props();
-
-  const color = {
-    neutral: 'neutral',
-    success: 'success',
-    progress: 'blue',
-    warning: 'warning',
-    error: 'danger',
-  }[type];
-</script>
-
-{#if show}
-  <div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
-    <div class="inline-flex w-full items-center justify-start gap-3">
-      {#if icon}
-        <div class="flex size-5 items-center justify-center text-icon-{color} ">
-          {@render icon?.()}
-        </div>
-      {/if}
-      <div class="content w-full text-sm">
-        {@render content?.()}
-      </div>
-    </div>
-    {#if closable}
-      <IconButton size="sm" onclick={() => (show = false)}>
-        <Icon iconName="X" color="icon-secondary" weight="bold" />
-      </IconButton>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .content :global(a) {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
-    text-decoration-line: underline
-}
-</style>

package/dist/components/banner/Banner.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
-    show?: boolean;
-    closable?: boolean;
-    icon?: Snippet;
-    content: Snippet;
-}
-declare const Banner: import("svelte").Component<Props, {}, "show">;
-type Banner = ReturnType<typeof Banner>;
-export default Banner;

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

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

package/dist/components/banner/index.js

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