@reshape-biotech/design-system 2.4.0 → 2.4.2

package/dist/components/stepper/Stepper.stories.svelte

@@ -1,243 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import * as Stepper from './index';
-  import StepperComponent from './components/stepper-root.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Design System/Stepper',
-    component: StepperComponent,
-    tags: ['autodocs'],
-    argTypes: {
-      class: { control: 'text', description: 'Additional CSS classes' },
-      currentStep: { control: 'text', description: 'The currently active step identifier' },
-    },
-  });
-</script>
-
-<Story name="Controlled by Root">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
-      <div class="max-w-sm">
-        <Stepper.Root currentStep="2">
-          <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-          <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-          <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-          <Stepper.Step stepNumber="4">Review</Stepper.Step>
-        </Stepper.Root>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Non-Numeric Steps">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
-      <div class="max-w-sm">
-        <Stepper.Root currentStep="B">
-          <Stepper.Step stepNumber="A">Configure</Stepper.Step>
-          <Stepper.Step stepNumber="B">Process</Stepper.Step>
-          <Stepper.Step stepNumber="C">Complete</Stepper.Step>
-        </Stepper.Root>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="All States (Individually set)">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
-      <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
-          <div class="max-w-sm">
-            <Stepper.Root>
-              <Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
-          <div class="max-w-sm">
-            <Stepper.Root>
-              <Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
-          <div class="max-w-sm">
-            <Stepper.Root>
-              <Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Progress Examples">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Progress States</h3>
-      <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="1">
-              <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-              <Stepper.Step stepNumber="4">Review</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="3">
-              <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-              <Stepper.Step stepNumber="4">Review</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="4">
-              <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-              <Stepper.Step stepNumber="4">Review</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
-          <div class="max-w-sm">
-            <!-- To show all as complete, set currentStep to a non-existent step after the last one -->
-            <Stepper.Root currentStep="5">
-              <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-              <Stepper.Step stepNumber="4">Review</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Different Step Counts">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
-      <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="1">
-              <Stepper.Step stepNumber="1">Setup</Stepper.Step>
-              <Stepper.Step stepNumber="2">Review</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="2">
-              <Stepper.Step stepNumber="1">Configure</Stepper.Step>
-              <Stepper.Step stepNumber="2">Process</Stepper.Step>
-              <Stepper.Step stepNumber="3">Complete</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="3">
-              <Stepper.Step stepNumber="1">Initialize</Stepper.Step>
-              <Stepper.Step stepNumber="2">Configure</Stepper.Step>
-              <Stepper.Step stepNumber="3">Process</Stepper.Step>
-              <Stepper.Step stepNumber="4">Validate</Stepper.Step>
-              <Stepper.Step stepNumber="5">Complete</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
-          <div class="max-w-sm">
-            <Stepper.Root currentStep="1">
-              <Stepper.Step stepNumber="1">Single action step</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Custom Styling">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
-      <div class="max-w-sm">
-        <Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
-          <Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
-          <Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
-          <Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
-        </Stepper.Root>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Responsive Behavior">
-  <div class="space-y-8 p-4">
-    <div>
-      <h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
-      <div class="space-y-6">
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
-          <div class="w-56">
-            <Stepper.Root currentStep="2">
-              <Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
-          <div class="w-40">
-            <Stepper.Root currentStep="2">
-              <Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
-              <Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
-              <Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
-            </Stepper.Root>
-          </div>
-        </div>
-        <div>
-          <h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
-          <div class="w-30">
-            <Stepper.Root currentStep="2">
-              <Stepper.Step stepNumber="1"
-                >Configure experiment parameters and settings</Stepper.Step
-              >
-              <Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
-              <Stepper.Step stepNumber="3"
-                >Approve all plate maps and final configurations</Stepper.Step
-              >
-            </Stepper.Root>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>

package/dist/components/stepper/Stepper.stories.svelte.d.ts

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

package/dist/components/stepper/components/stepper-root.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { setContext } from 'svelte';
-
-  interface Props {
-    children: Snippet;
-    class?: string;
-    currentStep?: string;
-  }
-
-  let { children, class: className = '', currentStep }: Props = $props();
-
-  const stepperContext = $state({
-    get currentStep() {
-      return currentStep;
-    },
-  });
-
-  setContext('STEPPER_CONTEXT', stepperContext);
-</script>
-
-<div class="flex w-full flex-col gap-3 {className}" role="progressbar">
-  {@render children()}
-</div>

package/dist/components/stepper/components/stepper-root.svelte.d.ts

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

package/dist/components/stepper/components/stepper-step.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { getContext } from 'svelte';
-  import { Icon } from '../../icons/';
-  import type { StepState } from '../';
-
-  interface Props {
-    children: Snippet;
-    state?: StepState;
-    stepNumber: string;
-    class?: string;
-  }
-
-  let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
-  const id = $props.id();
-
-  type StepperContext = {
-    currentStep: string;
-  };
-
-  const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
-
-  const currentState = $derived.by(() => {
-    if (context && context.currentStep !== undefined) {
-      if (context.currentStep > stepNumber) {
-        return 'completed';
-      } else if (context.currentStep === stepNumber) {
-        return 'active';
-      } else {
-        return 'future';
-      }
-    }
-    return stateProp ?? 'future';
-  });
-
-  const stateVariants = {
-    completed: {
-      container: 'bg-transparent text-primary-inverse',
-      iconContainer: 'bg-primary ',
-      iconColor: 'text-surface',
-      labelColor: 'text-primary',
-      showIcon: true,
-    },
-    active: {
-      container: 'bg-accent text-primary-inverse',
-      iconContainer: 'bg-primary ',
-      iconColor: 'text-surface',
-      labelColor: 'text-primary',
-      showIcon: false,
-    },
-    future: {
-      container: 'bg-transparent',
-      iconContainer: 'bg-transparent border border-interactive',
-      iconColor: 'text-secondary',
-      labelColor: 'text-secondary',
-      showIcon: false,
-    },
-  };
-
-  const variant = $derived(stateVariants[currentState]);
-</script>
-
-<div
-  {id}
-  class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
-  role="progressbar"
-  aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
-  aria-valuemin="0"
-  aria-valuemax="100"
-  aria-label="Step {stepNumber}"
->
-  <div
-    class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
-    aria-hidden="true"
-  >
-    {#if variant.showIcon}
-      <Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
-    {:else}
-      <span class="text-xs font-medium leading-none {variant.iconColor}">
-        {stepNumber}
-      </span>
-    {/if}
-  </div>
-
-  <span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
-    {@render children()}
-  </span>
-</div>
-
-<style>
-  div[role='progressbar']:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    width: 1px;
-    background-color: #12192a0A;
-    left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
-    top: 2.25rem;
-    height: 2.25rem;
-  }
-</style>

package/dist/components/stepper/components/stepper-step.svelte.d.ts

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

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

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-export { default as Root } from './components/stepper-root.svelte';
-export { default as Step } from './components/stepper-step.svelte';
-export type StepState = 'completed' | 'active' | 'future';
-export interface StepperRootProps {
-    children: Snippet;
-    class?: string;
-    currentStep?: string;
-}
-export interface StepperStepProps {
-    children: Snippet;
-    state?: StepState;
-    stepNumber: string;
-    class?: string;
-}

package/dist/components/stepper/index.js

@@ -1,2 +0,0 @@
-export { default as Root } from './components/stepper-root.svelte';
-export { default as Step } from './components/stepper-step.svelte';

package/dist/components/table/Table.stories.svelte

@@ -1,94 +0,0 @@
-<script module lang="ts">
-  import Table from './Table.svelte';
-
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  const { Story } = defineMeta({
-    component: Table,
-    title: 'Design System/Table',
-    tags: ['autodocs'],
-  });
-  import IconButton from '../icon-button/IconButton.svelte';
-  import { Icon } from '../icons';
-
-  export const users = [
-    {
-      name: 'John Doe',
-      age: 25,
-      role: 'admin',
-    },
-    {
-      name: 'Jane Smith',
-      age: 32,
-      role: 'member',
-    },
-    {
-      name: 'Michael Johnson',
-      age: 41,
-      role: 'deactivated',
-    },
-    {
-      name: 'Emily Brown',
-      age: 28,
-      role: 'member',
-    },
-    {
-      name: 'David Lee',
-      age: 37,
-      role: 'admin',
-    },
-    {
-      name: 'Sarah Wilson',
-      age: 29,
-      role: 'member',
-    },
-    {
-      name: 'Robert Taylor',
-      age: 45,
-      role: 'deactivated',
-    },
-    {
-      name: 'Lisa Anderson',
-      age: 33,
-      role: 'member',
-    },
-    {
-      name: 'James Martinez',
-      age: 39,
-      role: 'admin',
-    },
-    {
-      name: 'Jennifer Garcia',
-      age: 31,
-      role: 'deactivated',
-    },
-  ];
-</script>
-
-<Story name="Base" asChild>
-  <Table>
-    {#snippet children({ THead, TBody, Tr, Th, Td })}
-      <THead>
-        <Tr>
-          <Th>Name</Th>
-          <Th>Age</Th>
-          <Th class="w-[100px]">Role</Th>
-          <Th class="w-6"></Th>
-        </Tr>
-      </THead>
-      <TBody>
-        {#each users as user}
-          <Tr disabled={user.role === 'deactivated'}>
-            <Td>{user.name}</Td>
-            <Td>{user.age}</Td>
-            <Td>{user.role}</Td>
-            <Td>
-              <IconButton disabled={user.role === 'deactivated'}>
-                <Icon iconName="Phone" />
-              </IconButton>
-            </Td>
-          </Tr>
-        {/each}
-      </TBody>
-    {/snippet}
-  </Table>
-</Story>

package/dist/components/table/Table.stories.svelte.d.ts

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

package/dist/components/table/Table.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Td from './components/Td.svelte';
-  import Th from './components/Th.svelte';
-  import Tr from './components/Tr.svelte';
-  import THead from './components/THead.svelte';
-  import TBody from './components/TBody.svelte';
-
-  interface Props {
-    tableLayout?: 'fixed' | 'auto';
-    children?: Snippet<
-      [
-        {
-          THead: typeof THead;
-          TBody: typeof TBody;
-          Tr: typeof Tr;
-          Th: typeof Th;
-          Td: typeof Td;
-        },
-      ]
-    >;
-  }
-
-  let { tableLayout = 'fixed', children }: Props = $props();
-  const C = {
-    THead: THead,
-    TBody: TBody,
-    Tr: Tr,
-    Th: Th,
-    Td: Td,
-  };
-</script>
-
-<div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
-  <table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
-    {@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
-  </table>
-</div>
-
-<style>
-  :global(tr) {
-    border-bottom-width: 1px
-}
-:global(tr):last-child {
-    border-bottom-width: 0px
-}
-</style>

package/dist/components/table/Table.svelte.d.ts

@@ -1,21 +0,0 @@
-import type { Snippet } from 'svelte';
-import Td from './components/Td.svelte';
-import Th from './components/Th.svelte';
-import Tr from './components/Tr.svelte';
-import THead from './components/THead.svelte';
-import TBody from './components/TBody.svelte';
-interface Props {
-    tableLayout?: 'fixed' | 'auto';
-    children?: Snippet<[
-        {
-            THead: typeof THead;
-            TBody: typeof TBody;
-            Tr: typeof Tr;
-            Th: typeof Th;
-            Td: typeof Td;
-        }
-    ]>;
-}
-declare const Table: import("svelte").Component<Props, {}, "">;
-type Table = ReturnType<typeof Table>;
-export default Table;

package/dist/components/table/components/TBody.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    class?: string;
-    children?: Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<tbody class={`${className}`}>
-  {@render children?.()}
-</tbody>

package/dist/components/table/components/TBody.svelte.d.ts

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

package/dist/components/table/components/THead.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    class?: string;
-    children?: Snippet;
-  }
-
-  let { class: className = '', children }: Props = $props();
-</script>
-
-<thead class={`${className}`}>
-  {@render children?.()}
-</thead>

package/dist/components/table/components/THead.svelte.d.ts

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