@reshape-biotech/design-system 2.4.1 → 2.4.2

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

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

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

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

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

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

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

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

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

@@ -1,132 +0,0 @@
-<script lang="ts">
-  import Icon from './Icon.svelte';
-  import Well from './custom/Well.svelte';
-  import Halo from './custom/Halo.svelte';
-  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

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

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

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

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

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

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