@reshape-biotech/design-system 2.4.1 → 2.4.2

package/dist/components/slider/Slider.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-  import { Icon } from '../icons';
-
-  let className = '';
-  export { className as class };
-  export let value = 0;
-  export let max: number;
-  export let buffer = 0;
-  export let bufferMin = 0;
-  export let bufferColorClass = 'bg-neutral';
-  export let filledColorClass = 'bg-accent-inverse';
-  export let showFilled = false;
-  export let showSteps = false;
-  export let onMousedown: () => void = () => {};
-  export let onMouseup: () => void = () => {};
-  export let id: string | undefined = undefined;
-  export let disabled = false;
-
-  $: if (value > max) {
-    value = max;
-  } else if (value < 0) {
-    value = 0;
-  }
-
-  $: visualMax = Math.max(max, 1);
-  $: buffer = Math.min(buffer, visualMax);
-
-  function calculatePosition(positionFactor: number): string {
-    return `calc((${positionFactor / visualMax} * (100% - 1rem))`;
-  }
-</script>
-
-<div class={`relative flex h-10 items-center ${className} ${disabled ? 'opacity-40' : ''}`}>
-  <div class="track-overlay"></div>
-  <div
-    class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
-    style="
-      width: {calculatePosition(buffer - bufferMin)} + 1rem);
-      left: {calculatePosition(bufferMin)}
-    "
-  ></div>
-  {#if showFilled}
-    <div
-      class="absolute h-2.5 rounded-full {filledColorClass}"
-      style="width: {calculatePosition(value)} + 1rem);left: 0;"
-    ></div>
-  {/if}
-  {#if showSteps}
-    <div class="h-2.5">
-      {#each Array(visualMax + 1) as _, index}
-        <div
-          class="absolute h-1.5 w-1.5 translate-y-[2px] rounded-full bg-surface ring-1 ring-gray-950/10"
-          style="left: {calculatePosition(index)} + 0.25rem"
-        ></div>
-      {/each}
-    </div>
-  {/if}
-  <input
-    {id}
-    data-testid={id}
-    type="range"
-    max={visualMax}
-    bind:value
-    on:mousedown={onMousedown}
-    on:mouseup={onMouseup}
-    {disabled}
-  />
-  <div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
-    <Icon iconName="CaretUpDown" class="rotate-90" />
-  </div>
-</div>
-
-<style>
-  .track-overlay {
-    pointer-events: none;
-    position: absolute;
-    height: 0.625rem;
-    width: 100%;
-    cursor: pointer;
-    border-radius: 9999px;
-    border-width: 1px;
-    border-color: #12192a14;
-    background-color: #12192a0A;
-}
-
-  .thumb-overlay {
-    transform: translate(-50%, 50%);
-    pointer-events: none;
-    position: absolute;
-    bottom: 1.25rem;
-    display: inline-flex;
-    height: 2rem;
-    width: 2rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    border-width: 1px;
-    border-color: #12192A26;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --tw-shadow-colored: 0 1px 2px 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);
-  }
-
-  input[type='range'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-         appearance: none;
-    position: relative;
-    cursor: pointer;
-    height: 2.5rem;
-    width: 100%;
-    background-color: transparent;
-  }
-
-  input[type='range']::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 0;
-      height: 0;
-    }
-
-  input[type='range']::-moz-range-thumb {
-      width: 0;
-      height: 0;
-      border: none;
-    }
-
-  input[type='range']:disabled {
-      cursor: not-allowed;
-    }
-</style>

package/dist/components/slider/Slider.svelte.d.ts

@@ -1,32 +0,0 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Slider: $$__sveltets_2_IsomorphicComponent<{
-    class?: string;
-    value?: number;
-    max: number;
-    buffer?: number;
-    bufferMin?: number;
-    bufferColorClass?: string;
-    filledColorClass?: string;
-    showFilled?: boolean;
-    showSteps?: boolean;
-    onMousedown?: () => void;
-    onMouseup?: () => void;
-    id?: string | undefined;
-    disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
-export default Slider;

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

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

package/dist/components/slider/index.js

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

package/dist/components/spinner/Spinner.stories.svelte

@@ -1,13 +0,0 @@
-<script lang="ts" module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Spinner from './Spinner.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    title: 'Design System/Spinner',
-    component: Spinner,
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story name="Base" />

package/dist/components/spinner/Spinner.stories.svelte.d.ts

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

package/dist/components/spinner/Spinner.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  interface Props {
-    testID?: string;
-    inverted?: boolean;
-  }
-
-  let { testID = '', inverted = false }: Props = $props();
-</script>
-
-<div data-testid={testID} class="spinner" class:inverted></div>
-
-<style>
-  .spinner {
-    background: conic-gradient(#0000 10%, currentColor);
-    mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
-    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 0);
-    animation: spinner 1s infinite linear;
-    height: 0.75rem;
-    width: 0.75rem;
-    border-radius: 9999px;
-  }
-
-  .spinner.inverted {
-    background: conic-gradient(#0000 10%, white);
-  }
-
-  @keyframes spinner {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-</style>

package/dist/components/spinner/Spinner.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    testID?: string;
-    inverted?: boolean;
-}
-declare const Spinner: import("svelte").Component<Props, {}, "">;
-type Spinner = ReturnType<typeof Spinner>;
-export default Spinner;

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

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

package/dist/components/spinner/index.js

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

package/dist/components/stat-card/StatCard.stories.svelte

@@ -1,40 +0,0 @@
-<script module>
-  import StatCard from './StatCard.svelte';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-
-  const { Story } = defineMeta({
-    component: StatCard,
-    title: 'Design System/StatCard',
-    tags: ['autodocs'],
-  });
-</script>
-
-<Story
-  name="Default"
-  args={{ title: 'Title', value: 'Value', unit: 'unit', titleTooltip: 'Title tooltip' }}
-/>
-
-<Story
-  name="Germination Rate"
-  args={{
-    title: 'Germination Rate',
-    value: '2',
-    unit: '%',
-    titleTooltip: 'Something that explains what this is...',
-    showTitleTooltip: true,
-  }}
-/>
-
-<Story name="Home Page" args={{ title: 'Current jobs', value: '3', unit: 'of 5' }} />
-
-<Story
-  name="Editable"
-  args={{
-    title: 'Germination Rate',
-    value: '2',
-    unit: '%',
-    titleTooltip: 'Something that explains what this is...',
-    showTitleTooltip: true,
-    editable: true,
-  }}
-/>

package/dist/components/stat-card/StatCard.stories.svelte.d.ts

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

@@ -1,146 +0,0 @@
-<script lang="ts">
-  import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
-  import Spinner from '../spinner/Spinner.svelte';
-  import Tooltip from '../tooltip/Tooltip.svelte';
-  import { Input } from '../input';
-  import { tick } from 'svelte';
-
-  interface Props {
-    title: string;
-    value?: string | number | null;
-    unit?: string | null;
-    titleTooltip?: string;
-    showTitleTooltip?: boolean;
-    editable?: boolean;
-    onsubmit?: (value: string | number) => void;
-    inputType?: 'text' | 'number';
-  }
-
-  let {
-    title,
-    value = null,
-    unit = '',
-    titleTooltip = '',
-    showTitleTooltip = false,
-    editable = false,
-    inputType = 'text',
-    onsubmit,
-  }: Props = $props();
-  const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
-  let isEditing = $state(false);
-  let inputValue = $state('');
-  let inputComponent = $state<Input | null>(null);
-
-  function startEditing(event?: MouseEvent) {
-    if (event) {
-      event.stopPropagation();
-    }
-    isEditing = true;
-    inputValue = value !== null ? value.toString() : '';
-  }
-
-  function handleCardClick() {
-    if (editable && !isEditing && value !== null) {
-      startEditing();
-    }
-  }
-
-  function handleInputBlur(event: Event) {
-    const target = event.target as HTMLInputElement;
-    inputValue = target.value;
-    submitValue();
-  }
-
-  function handleInputKeydown(event: KeyboardEvent) {
-    const target = event.target as HTMLInputElement;
-    inputValue = target.value;
-    if (event.key === 'Escape') {
-      isEditing = false;
-    }
-    if (event.key === 'Enter') {
-      submitValue();
-    }
-  }
-
-  function submitValue() {
-    if (inputValue.trim() === '') {
-      isEditing = false;
-      return;
-    }
-
-    // Try to parse as number if possible
-    const numValue = parseFloat(inputValue);
-    const newValue = isNaN(numValue) ? inputValue : numValue;
-
-    if (onsubmit) {
-      onsubmit(newValue);
-    }
-
-    isEditing = false;
-  }
-
-  $effect(() => {
-    if (isEditing && inputComponent) {
-      tick().then(() => {
-        inputComponent?.focus();
-      });
-    }
-  });
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  data-testid="stat-card-body"
-  class="flex w-full flex-shrink-0 flex-grow basis-0 flex-col items-start gap-2 overflow-clip rounded-lg bg-neutral p-4 text-left transition-colors"
-  class:hover:bg-neutral-hover={editable && !isEditing && value !== null}
-  class:cursor-pointer={editable && !isEditing && value !== null}
-  onclick={handleCardClick}
-  onkeydown={editable && !isEditing && value !== null ? handleInputKeydown : undefined}
-  aria-label={editable && !isEditing && value !== null ? `Edit ${title}` : undefined}
->
-  <p class="flex items-center justify-start gap-2 truncate font-medium text-secondary">
-    {title}
-    {#if titleTooltip && showTitleTooltip}
-      <Tooltip>
-        {#snippet trigger()}
-          <Icon iconName="Info" color="icon-tertiary" />
-        {/snippet}
-        {#snippet content()}
-          <span>
-            {titleTooltip}
-          </span>
-        {/snippet}
-      </Tooltip>
-    {/if}
-  </p>
-  <div class="flex h-8 w-full items-center gap-1">
-    {#if value !== null}
-      {#if isEditing}
-        <div class="flex-1">
-          <Input
-            bind:this={inputComponent}
-            type={inputType}
-            value={inputValue}
-            onblur={handleInputBlur}
-            onkeydown={handleInputKeydown}
-          />
-        </div>
-      {:else}
-        <div class="flex flex-1 flex-nowrap items-baseline gap-1">
-          <p class="text-2xl font-medium">{formattedValue}</p>
-          {#if unit}
-            <p class="flex-1 truncate text-2xl font-medium text-tertiary">{unit}</p>
-          {/if}
-        </div>
-        {#if editable}
-          <IconButton onclick={(e) => startEditing(e)}>
-            <Icon iconName="PencilSimple" />
-          </IconButton>
-        {/if}
-      {/if}
-    {:else}
-      <Spinner />
-    {/if}
-  </div>
-</div>

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -1,13 +0,0 @@
-interface Props {
-    title: string;
-    value?: string | number | null;
-    unit?: string | null;
-    titleTooltip?: string;
-    showTitleTooltip?: boolean;
-    editable?: boolean;
-    onsubmit?: (value: string | number) => void;
-    inputType?: 'text' | 'number';
-}
-declare const StatCard: import("svelte").Component<Props, {}, "">;
-type StatCard = ReturnType<typeof StatCard>;
-export default StatCard;

package/dist/components/stat-card/StatCard.test.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/components/stat-card/StatCard.test.js

@@ -1,54 +0,0 @@
-import { render, fireEvent, screen } from '@testing-library/svelte';
-import { tick } from 'svelte';
-import StatCard from './StatCard.svelte';
-import '@testing-library/jest-dom';
-import { describe, it, expect, vi } from 'vitest';
-describe('StatCard', () => {
-    it('should focus the input field when the pencil edit icon is clicked', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Test Stat',
-                value: 'Initial Value',
-                editable: true,
-                onsubmit: vi.fn(),
-            },
-        });
-        const pencilButton = screen.getByRole('button');
-        await fireEvent.click(pencilButton);
-        // Wait for Svelte's reactivity and the $effect with tick() to apply focus
-        await tick();
-        const inputField = screen.getByRole('textbox');
-        expect(inputField).toHaveFocus();
-    });
-    it('should focus the input field when the card body is clicked', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Clickable Stat',
-                value: 'Initial Value',
-                editable: true,
-                onsubmit: vi.fn(),
-            },
-        });
-        const cardBody = screen.getByTestId('stat-card-body');
-        await fireEvent.click(cardBody);
-        await tick(); // Wait for Svelte's reactivity
-        const inputField = screen.getByRole('textbox');
-        expect(inputField).toHaveFocus();
-    });
-    it('should not focus the input field when the card body is clicked, out of editable state', async () => {
-        render(StatCard, {
-            props: {
-                title: 'Clickable Stat',
-                value: 'Initial Value',
-                editable: false,
-                onsubmit: vi.fn(),
-            },
-        });
-        const cardBody = screen.getByTestId('stat-card-body');
-        await fireEvent.click(cardBody);
-        await tick(); // Wait for Svelte's reactivity
-        // When not editable, the input field should not be rendered
-        const inputField = screen.queryByRole('textbox');
-        expect(inputField).toBeNull();
-    });
-});

package/dist/components/stat-card/index.d.ts

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

package/dist/components/stat-card/index.js

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