@reshape-biotech/design-system 2.4.2 → 2.5.2

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

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Spinner } from '../spinner/';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  type Variant =
+    | 'primary'
+    | 'secondary'
+    | 'transparent'
+    | 'danger'
+    | 'secondary-inverse'
+    | 'transparent-inverse';
+
+  // Combine custom props with standard HTML button attributes,
+  // omitting ones we handle explicitly (like 'class', 'onclick')
+  interface Props extends HTMLButtonAttributes {
+    variant?: Variant;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+  }
+
+  // Destructure only the component's specific props
+  let {
+    variant = 'transparent',
+    type = 'button',
+    loading = false,
+    disabled = false,
+    size = 'sm',
+    children,
+    onclick,
+    tabindex,
+    rounded = true,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  let sizeClass = $derived(`size-${size}`);
+  let variantClass = $derived(`color-${variant}`);
+</script>
+
+{#if disabled || loading}
+  <button
+    onclick={(e) => {
+      e.preventDefault();
+    }}
+    {type}
+    {disabled}
+    class="{sizeClass} {variantClass} disabled {className}"
+    class:rounded
+    {...rest}
+  >
+    {#if loading}
+      <Spinner />
+    {:else}
+      {@render children?.()}
+    {/if}
+  </button>
+{:else}
+  <button
+    {onclick}
+    {type}
+    {disabled}
+    {tabindex}
+    class="{sizeClass} {variantClass} {className}"
+    class:rounded
+    {...rest}
+  >
+    {@render children?.()}
+  </button>
+{/if}
+
+<style>
+  button {
+    display: flex;
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.375rem;
+    transition-duration: 150ms
+}
+  .rounded {
+    border-radius: 9999px
+}
+  .disabled {
+    cursor: not-allowed
+}
+  .disabled:disabled {
+    background-color: #12192a0A;
+    --tw-text-opacity: 1;
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+  .size-xs {
+    width: 1.5rem;
+    height: 1.5rem
+}
+
+  .size-xs :global(svg) {
+    width: 1rem;
+    height: 1rem
+}
+  .size-sm {
+    width: 2rem;
+    height: 2rem
+}
+  .size-sm :global(svg) {
+    width: 1rem;
+    height: 1rem
+}
+  .size-md {
+    width: 2.5rem;
+    height: 2.5rem
+}
+  .size-md :global(svg) {
+    width: 1.25rem;
+    height: 1.25rem
+}
+
+  .size-lg {
+    width: 3rem;
+    height: 3rem
+}
+
+  .size-lg :global(svg) {
+    width: 1.5rem;
+    height: 1.5rem
+}
+
+  .color-primary {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .color-primary:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
+}
+  .color-secondary {
+    background-color: #12192a0A;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+  .color-secondary:hover {
+    background-color: #12192A1A
+}
+  .color-transparent {
+    background-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(89 94 106 / var(--tw-text-opacity, 1))
+}
+  .color-transparent:hover {
+    background-color: #12192a0A;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+  .color-danger {
+    --tw-bg-opacity: 1;
+    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+  .color-danger:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+  .color-secondary-inverse {
+    background-color: #FFFFFF0D;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+  .color-secondary-inverse:hover {
+    background-color: #FFFFFF26
+}
+
+  .color-transparent-inverse {
+    background-color: transparent;
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .color-transparent-inverse:hover {
+    background-color: #FFFFFF26
+}
+
+  .color-transparent-inverse:hover:disabled {
+    background-color: transparent
+}
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
+interface Props extends HTMLButtonAttributes {
+    variant?: Variant;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

package/dist/components/icons/AnalysisIcon.stories.svelte

@@ -0,0 +1,32 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import AnalysisIcon from './AnalysisIcon.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Design System/Icons/AnalysisIcon',
+    component: AnalysisIcon,
+    tags: ['autodocs'],
+  });
+</script>
+
+<Story name="Base" args={{ model: 'pipeline_large_colonies' }} />
+
+<Story name="Sizes" args={{ model: 'pipeline_large_colonies' }}>
+  {#snippet template(args)}
+    <div class="flex flex-col gap-4">
+      <AnalysisIcon model={args.model} size="sm" withBackground />
+      <AnalysisIcon model={args.model} size="md" withBackground />
+      <AnalysisIcon model={args.model} size="lg" withBackground />
+      <AnalysisIcon model={args.model} size="sm" />
+      <AnalysisIcon model={args.model} size="md" />
+      <AnalysisIcon model={args.model} size="lg" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Halo" args={{ model: 'pipeline_halos' }} />
+
+<Story name="Small colonies" args={{ model: 'pipeline_small_colonies' }} />
+
+<Story name="With background" args={{ model: 'pipeline_halos', withBackground: true }} />

package/dist/components/icons/AnalysisIcon.stories.svelte.d.ts

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import Icon from './Icon.svelte';
+  import { Well, Halo } from './custom';
+  import type { IconColor, SupportedAnalysisModelIcons } from '.';
+
+  type Props = {
+    model: SupportedAnalysisModelIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    disabled?: boolean;
+  };
+
+  let { model, withBackground, size = 'md', class: className, disabled = false }: Props = $props();
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 14;
+      case 'lg':
+        return 20;
+      default:
+        return 16;
+    }
+  };
+
+  const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
+    if (disabled) {
+      return 'bg-neutral';
+    }
+
+    switch (analysis) {
+      case 'pipeline_halos':
+        return 'bg-warning';
+      case 'pipeline_large_colonies':
+      case 'pipeline_radial_growth':
+        return 'bg-accent';
+      case 'sgs_enteros':
+        return 'bg-orange';
+      case 'pipeline_small_colonies':
+      case 'pipeline_microbial_colonies':
+        return 'bg-sky';
+      case 'pipeline_insects':
+        return 'bg-orange';
+      case 'pipeline_seed_germination':
+        return 'bg-success';
+      default:
+        return 'bg-neutral';
+    }
+  };
+
+  const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
+    if (disabled) {
+      return 'secondary';
+    }
+
+    switch (analysis) {
+      case 'pipeline_halos':
+        return 'warning';
+      case 'pipeline_large_colonies':
+      case 'pipeline_radial_growth':
+        return 'accent';
+      case 'pipeline_microbial_colonies':
+      case 'pipeline_small_colonies':
+        return 'blue';
+      case 'sgs_enteros':
+        return 'lilac';
+      case 'pipeline_insects':
+        return 'orange';
+      case 'pipeline_seed_germination':
+        return 'success';
+      default:
+        return 'secondary';
+    }
+  };
+</script>
+
+<div
+  class={`${withBackground ? backgroundColor(model) : ''} ${className} size-${size} shrink-0`}
+  class:withBackground
+>
+  {#if model === 'pipeline_halos'}
+    <Halo size={getIconSize().toString()} color={mapAnalysisToColor(model)} />
+  {:else if ['sgs_enteros'].includes(model)}
+    <Icon iconName="RadioButton" color={mapAnalysisToColor(model)} size={getIconSize()} />
+  {:else if model === 'pipeline_large_colonies' || model === 'pipeline_radial_growth'}
+    <Icon iconName="RadioButton" color={mapAnalysisToColor(model)} size={getIconSize()} />
+  {:else if model === 'pipeline_small_colonies'}
+    <Well size={getIconSize().toString()} color={mapAnalysisToColor(model)} />
+  {:else if model === 'pipeline_insects'}
+    <Icon iconName="BugBeetle" color={mapAnalysisToColor(model)} size={getIconSize()} />
+  {:else if model === 'pipeline_seed_germination'}
+    <Icon iconName="Plant" color={mapAnalysisToColor(model)} size={getIconSize()} />
+  {:else}
+    <Icon iconName="LineSegments" color={mapAnalysisToColor(model)} size={getIconSize()} />
+  {/if}
+</div>
+
+<style>
+  .withBackground {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.375rem
+}
+
+    .withBackground.size-sm {
+
+    height: 1.5rem;
+
+    width: 1.5rem
+}
+
+    .withBackground.size-md {
+
+    height: 2rem;
+
+    width: 2rem
+}
+
+    .withBackground.size-lg {
+
+    height: 2.5rem;
+
+    width: 2.5rem
+}
+</style>

package/dist/components/icons/AnalysisIcon.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SupportedAnalysisModelIcons } from '.';
+type Props = {
+    model: SupportedAnalysisModelIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    disabled?: boolean;
+};
+declare const AnalysisIcon: import("svelte").Component<Props, {}, "">;
+type AnalysisIcon = ReturnType<typeof AnalysisIcon>;
+export default AnalysisIcon;

package/dist/components/icons/Icon.stories.svelte

@@ -0,0 +1,127 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Icon, iconMap, type IconName } from './index';
+
+  const { Story } = defineMeta({
+    component: Icon,
+    title: 'Design System/Icons',
+    tags: ['autodocs'],
+    parameters: {
+      design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%5BWIP%5D--Reshape-Design-System%3A-V1.1?node-id=20-30983&t=qQZtfqCN4P2k2UYf-0',
+      },
+    },
+  });
+
+  // Get all icon names from the iconMap
+  const iconNames = Object.keys(iconMap);
+</script>
+
+<Story name="All Icons" asChild>
+  <div class="p-4">
+    <h2 class="mb-6 text-xl font-semibold">Icon Gallery</h2>
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+      {#each iconNames as iconName}
+        <div class="flex flex-col items-center rounded-lg border border-neutral p-4 text-center">
+          <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-neutral">
+            <Icon iconName={iconName as IconName} size={24} />
+          </div>
+          <span class="text-sm">{iconName}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Sizes" asChild>
+  <div class="p-4">
+    <h2 class="mb-6 text-xl font-semibold">Icon Sizes</h2>
+    <div class="flex flex-wrap items-end gap-8">
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={16} />
+        <span class="mt-2 text-xs">16px</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={20} />
+        <span class="mt-2 text-xs">20px</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} />
+        <span class="mt-2 text-xs">24px</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={32} />
+        <span class="mt-2 text-xs">32px</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={48} />
+        <span class="mt-2 text-xs">48px</span>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Weights" asChild>
+  <div class="p-4">
+    <h2 class="mb-6 text-xl font-semibold">Icon Weights</h2>
+    <div class="flex flex-wrap gap-8">
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="thin" />
+        <span class="mt-2 text-xs">Thin</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="light" />
+        <span class="mt-2 text-xs">Light</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="regular" />
+        <span class="mt-2 text-xs">Regular</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="bold" />
+        <span class="mt-2 text-xs">Bold</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="fill" />
+        <span class="mt-2 text-xs">Fill</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} weight="duotone" />
+        <span class="mt-2 text-xs">Duotone</span>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Colors" asChild>
+  <div class="p-4">
+    <h2 class="mb-6 text-xl font-semibold">Icon Colors</h2>
+    <div class="flex flex-wrap gap-8">
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="primary" />
+        <span class="mt-2 text-xs">Primary</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="secondary" />
+        <span class="mt-2 text-xs">Secondary</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="tertiary" />
+        <span class="mt-2 text-xs">Tertiary</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="success" />
+        <span class="mt-2 text-xs">Success</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="warning" />
+        <span class="mt-2 text-xs">Warning</span>
+      </div>
+      <div class="flex flex-col items-center">
+        <Icon iconName="Star" size={24} color="danger" />
+        <span class="mt-2 text-xs">Danger</span>
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/components/icons/Icon.stories.svelte.d.ts

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

package/dist/components/icons/Icon.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { textColor } from '../../tokens';
+  import { renderIcon, type IconProps } from './index';
+
+  let {
+    iconName,
+    color = 'inherit',
+    weight = 'bold',
+    width = 16,
+    height = 16,
+    size,
+    class: className,
+  }: IconProps = $props();
+</script>
+
+<!-- svelte-ignore svelte_component_deprecated -->
+<svelte:component
+  this={renderIcon(iconName ?? 'SealQuestion')}
+  color={color === 'inherit' ? 'currentColor' : textColor[color]}
+  class={`shrink-0 ${className}`}
+  {weight}
+  width={size ? size : width}
+  height={size ? size : height}
+/>

package/dist/components/icons/Icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconProps } from './index';
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/icons/PrincipalIcon.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import type { IconColor, SupportedPrincipalIcons } from '.';
+  import UsersThree from 'phosphor-svelte/lib/UsersThree';
+  import User from 'phosphor-svelte/lib/User';
+  import Buildings from 'phosphor-svelte/lib/Buildings';
+
+  type Props = {
+    principal: SupportedPrincipalIcons;
+    withBackground?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+  };
+
+  let { principal, withBackground, size = 'md', class: className }: Props = $props();
+
+  const mapPrincipalToIcon = (principal: SupportedPrincipalIcons) => {
+    switch (principal) {
+      case 'user':
+        return User;
+      case 'group':
+        return UsersThree;
+      case 'organization':
+        return Buildings;
+      default:
+        return User;
+    }
+  };
+
+  const mapPrincipalToColor = (principal: SupportedPrincipalIcons): IconColor => {
+    switch (principal) {
+      case 'user':
+        return 'icon-accent';
+      case 'group':
+        return 'lime';
+      case 'organization':
+        return 'icon-primary';
+      default:
+        return 'icon-primary';
+    }
+  };
+
+  const backgroundColor = (principal: SupportedPrincipalIcons) => {
+    switch (principal) {
+      case 'user':
+        return 'bg-accent';
+      case 'group':
+        return 'bg-lime';
+      case 'organization':
+        return 'bg-neutral';
+      default:
+        return 'bg-neutral';
+    }
+  };
+</script>
+
+<!-- svelte-ignore svelte_component_deprecated -->
+<div
+  class={`text-${mapPrincipalToColor(principal)} ${withBackground ? backgroundColor(principal) : ''} ${className} size-${size} border border-static`}
+  class:withBackground
+>
+  <svelte:component this={mapPrincipalToIcon(principal)} weight="bold" />
+</div>
+
+<style>
+  .withBackground {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.375rem
+}
+
+    .withBackground.size-sm {
+
+    height: 1.5rem;
+
+    width: 1.5rem
+}
+
+    .withBackground.size-md {
+
+    height: 2rem;
+
+    width: 2rem
+}
+
+    .withBackground.size-lg {
+
+    height: 2.5rem;
+
+    width: 2.5rem
+}
+</style>