@reshape-biotech/design-system 2.7.52 → 2.7.53

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

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/activity/Activity.figma.js

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=5302-18990
+// source=src/lib/components/activity/Activity.svelte
+// component=Activity
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'job': 'job',
+    'plate': 'plate',
+    'project': 'project',
+    'well': 'well',
+});
+export default {
+    example: figma.code `
+    <Activity
+      activities={[{
+        icon: "${type}",
+        label: "Activity description",
+        timestamp: new Date().toISOString(),
+      }]}
+    />
+  `,
+    imports: ["import Activity from './Activity.svelte'"],
+    id: 'activity',
+};

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

@@ -10,12 +10,6 @@
     component: Activity,
     title: 'Components/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([

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

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/avatar/Avatar.figma.js

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-9326
+// source=src/lib/components/avatar/Avatar.svelte
+// component=Avatar
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'sm': 'sm',
+    'xs': 'sm',
+    'md': 'md',
+    'lg': 'md',
+});
+const showTooltip = instance.getBoolean('showTooltip');
+export default {
+    example: figma.code `<Avatar name="John Doe" size="${size}" ${showTooltip ? '' : 'showTooltip={false}'} />`,
+    imports: ["import Avatar from './Avatar.svelte'"],
+    id: 'avatar',
+};

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

@@ -6,12 +6,6 @@
     component: Avatar,
     title: 'Components/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>
 

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

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/banner/Banner.figma.js

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3351
+// source=src/lib/components/banner/Banner.svelte
+// component=Banner
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const type = instance.getEnum('type', {
+    'neutral': 'neutral',
+    'success': 'success',
+    'info': 'info',
+    'warning': 'warning',
+    'error': 'error',
+    'elevated': 'neutral',
+    'primary': 'info',
+});
+const closable = instance.getBoolean('closable');
+const compact = instance.getBoolean('compact');
+const title = instance.getString('Title');
+export default {
+    example: figma.code `
+    <Banner type="${type}" ${compact ? 'compact' : ''} ${closable ? '' : 'closable={false}'}>
+      {#snippet content()}${title || 'Banner message'}{/snippet}
+    </Banner>
+  `,
+    imports: ["import Banner from './Banner.svelte'"],
+    id: 'banner',
+};

package/dist/components/button/Button.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/button/Button.figma.js

@@ -0,0 +1,51 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3073
+// source=src/lib/components/button/Button.svelte
+// component=Button
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary': 'primary',
+    'secondary': 'secondary',
+    'outline': 'outline',
+    'transparent': 'transparent',
+    'danger': 'danger',
+    'secondary-inverse': 'secondary-inverse',
+    'transparent-inverse': 'transparent-inverse',
+});
+const size = instance.getEnum('size', {
+    'xs': 'xs',
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const rounded = instance.getEnum('rounded', { 'true': true, 'false': false });
+const disabled = instance.getEnum('disabled', { 'true': true, 'false': false });
+const label = instance.findText('label');
+const hasLeftIcon = instance.getBoolean('left icon');
+const leftIcon = hasLeftIcon ? instance.getInstanceSwap('left instance') : null;
+let leftIconSnippet;
+if (leftIcon && leftIcon.type === 'INSTANCE' && leftIcon.hasCodeConnect()) {
+    leftIconSnippet = leftIcon.executeTemplate().example;
+}
+const hasRightIcon = instance.getBoolean('right icon');
+const rightIcon = hasRightIcon ? instance.getInstanceSwap('right instance') : null;
+let rightIconSnippet;
+if (rightIcon && rightIcon.type === 'INSTANCE' && rightIcon.hasCodeConnect()) {
+    rightIconSnippet = rightIcon.executeTemplate().example;
+}
+export default {
+    example: figma.code `
+    <Button
+      variant="${variant}"
+      size="${size}"
+      ${rounded ? 'rounded' : ''}
+      ${disabled ? 'disabled' : ''}
+    >
+      ${leftIconSnippet ? figma.code `${leftIconSnippet}` : ''}
+      ${label ? label.textContent : 'Button'}
+      ${rightIconSnippet ? figma.code `${rightIconSnippet}` : ''}
+    </Button>
+  `,
+    imports: ["import Button from './Button.svelte'"],
+    id: 'button',
+};

package/dist/components/button/Button.stories.svelte

@@ -6,12 +6,6 @@
     component: Button,
     title: 'Components/Button',
     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-3068&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
   });
 
   const variants = [

package/dist/components/checkbox/Checkbox.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/checkbox/Checkbox.figma.js

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=155-6227
+// source=src/lib/components/checkbox/Checkbox.svelte
+// component=Checkbox
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'sm': 'sm',
+    'md': 'md',
+    'lg': 'lg',
+});
+const disabled = instance.getEnum('disabled', {
+    'true': true,
+    'false': false,
+});
+const checked = instance.getEnum('state', {
+    'on': true,
+    'off': false,
+    'indeterminate': false,
+});
+export default {
+    example: figma.code `<Checkbox size="${size}" checked={${checked}} ${disabled ? 'disabled' : ''} />`,
+    imports: ["import Checkbox from './Checkbox.svelte'"],
+    id: 'checkbox',
+};

package/dist/components/checkbox/Checkbox.stories.svelte

@@ -6,17 +6,76 @@
     component: Checkbox,
     title: 'Components/Checkbox',
     tags: ['autodocs'],
+    parameters: {
+      layout: 'fullscreen',
+    },
   });
 
-  let checked = $state<boolean>(false);
+  const sizes = ['sm', 'md', 'lg'] as const;
 </script>
 
-<Story name="Default" args={{ checked: false }} />
-
-<Story name="Checked" args={{ checked: true }} />
-
-<Story name="Unchecked" args={{ checked: false }} />
-
-<Story name="Disabled" args={{ checked: true, disabled: true }} />
-
-<Story name="Indeterminate" args={{ checked: false, indeterminate: true }} />
+<Story name="Overview" asChild>
+  <div class="flex flex-col gap-8 text-sm">
+    <div class="overflow-x-auto">
+      <table class="w-full min-w-[640px] table-fixed border-collapse text-center">
+        <colgroup>
+          <col class="w-24" />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
+          <col />
+        </colgroup>
+        <thead>
+          <tr class="border-b border-static text-left text-label font-medium text-secondary">
+            <th class="bg-base p-4 text-left">Size</th>
+            <th class="p-4 text-center">Off</th>
+            <th class="p-4 text-center">On</th>
+            <th class="p-4 text-center">Indeterminate</th>
+            <th class="p-4 text-center">Disabled off</th>
+            <th class="p-4 text-center">Disabled on</th>
+            <th class="p-4 text-center">Indeterminate disabled</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each sizes as size}
+            <tr class="border-b last:border-none border-static">
+              <td class="bg-base p-4 text-left font-mono text-label text-secondary">{size}</td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} checked={false} />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} checked />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} indeterminate />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} checked={false} disabled />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} checked disabled />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Checkbox {size} indeterminate disabled />
+                </div>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</Story>

package/dist/components/checkbox/Checkbox.svelte

@@ -5,22 +5,46 @@
   import { Icon } from '../icons/index.js';
   import { Checkbox, type CheckboxRootProps } from 'bits-ui';
 
-  export type CheckboxProps = CheckboxRootProps;
+  export type CheckboxProps = CheckboxRootProps & {
+    size?: 'sm' | 'md' | 'lg';
+  };
 
-  let { checked = $bindable(false), onCheckedChange, name, class: className, ...props }: CheckboxProps = $props();
+  let {
+    checked = $bindable(false),
+    onCheckedChange,
+    name,
+    class: className,
+    size = 'sm',
+    disabled = false,
+    ...props
+  }: CheckboxProps = $props();
+
+  const sizeConfig = {
+    sm: { box: 'size-4.5 rounded-sm', iconSize: 14 },
+    md: { box: 'size-5 rounded-sm', iconSize: 16 },
+    lg: { box: 'size-6 rounded-md', iconSize: 16 },
+  };
+
+  const config = $derived(sizeConfig[size]);
 </script>
 
-<Checkbox.Root bind:checked {onCheckedChange} {...props}>
+<Checkbox.Root bind:checked {name} {onCheckedChange} {disabled} {...props}>
   {#snippet children({ checked, indeterminate })}
+    {@const on = Boolean(checked || indeterminate)}
     <div
-      class={twMerge('flex items-center justify-center rounded border border-static', checked && 'bg-dark-accent-inverse-hover', className)}
+      class={twMerge(
+        'flex shrink-0 items-center justify-center transition-colors border border-interactive shadow-input cursor-pointer',
+        config.box,
+        disabled && 'cursor-not-allowed border-transparent bg-neutral-darker shadow-none',
+        !disabled && on && 'bg-accent-inverse hover:bg-accent-inverse-hover',
+        !disabled && !on && 'bg-surface hover:border-hover',
+        className,
+      )}
     >
       {#if checked}
-        <Icon class="text-primary-inverse" icon={Check} />
+        <Icon class={disabled ? 'text-tertiary' : 'text-primary-inverse'} icon={Check} size={config.iconSize}/>
       {:else if indeterminate}
-        <Icon icon={Minus} />
-      {:else}
-        <div class="h-4 w-4"></div>
+        <Icon class={disabled ? 'text-tertiary' : 'text-primary-inverse'} icon={Minus} size={config.iconSize} />
       {/if}
     </div>
   {/snippet}

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -1,5 +1,7 @@
 import { Checkbox, type CheckboxRootProps } from 'bits-ui';
-export type CheckboxProps = CheckboxRootProps;
-declare const Checkbox: import("svelte").Component<Checkbox.RootProps, {}, "checked">;
+export type CheckboxProps = CheckboxRootProps & {
+    size?: 'sm' | 'md' | 'lg';
+};
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/collapsible/Collapsible.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/collapsible/Collapsible.figma.js

@@ -0,0 +1,21 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6534-8043
+// source=src/lib/components/collapsible/index.ts
+// component=Collapsible
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const open = instance.getEnum('open', {
+    'true': true,
+    'false': false,
+});
+export default {
+    example: figma.code `
+    <Collapsible.Root open={${open}}>
+      <Collapsible.Trigger>Section title</Collapsible.Trigger>
+      <Collapsible.Content>
+        Section content goes here
+      </Collapsible.Content>
+    </Collapsible.Root>
+  `,
+    imports: ["import * as Collapsible from './'"],
+    id: 'collapsible',
+};

package/dist/components/combobox/Combobox.stories.svelte

@@ -18,12 +18,6 @@
     component: ComboboxRootForMeta,
     title: 'Components/Combobox',
     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-3294&t=sCuBI8dX6K6NjNR6-0',
-      },
-    },
   });
 
   const fruits = [

package/dist/components/datepicker/DatePicker.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/datepicker/DatePicker.figma.js

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=2103-14621
+// source=src/lib/components/datepicker/DatePicker.svelte
+// component=DatePicker
+import figma from 'figma';
+export default {
+    example: figma.code `
+    <DatePicker
+      bind:selectedDate
+      onClick={(date) => {}}
+    />
+  `,
+    imports: ["import DatePicker from './DatePicker.svelte'"],
+    id: 'datepicker',
+};

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -12,12 +12,6 @@
     component: DatePicker,
     title: 'Components/DatePicker',
     tags: ['autodocs'],
-    parameters: {
-      design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System%3A-V1?node-id=4381-32638&t=Epi2Ul7Cw7sCJpGy-0',
-      },
-    },
   });
 
   const staticDate = DateTime.local(2023, 10, 15);

package/dist/components/divider/Divider.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/divider/Divider.figma.js

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=1264-70819
+// source=src/lib/components/divider/Divider.svelte
+// component=Divider
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const vertical = instance.getBoolean('vertical');
+const inverse = instance.getBoolean('inverse');
+export default {
+    example: figma.code `<Divider ${vertical ? 'vertical' : ''} ${inverse ? 'inverse' : ''} />`,
+    imports: ["import Divider from './Divider.svelte'"],
+    id: 'divider',
+};

package/dist/components/drawer/Drawer.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/drawer/Drawer.figma.js

@@ -0,0 +1,26 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6534-8055
+// source=src/lib/components/drawer/index.ts
+// component=Drawer
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const side = instance.getEnum('side', {
+    'left': 'left',
+    'right': 'right',
+});
+export default {
+    example: figma.code `
+    <Drawer.Root>
+      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Content side="${side}">
+          <Drawer.Header>
+            <Drawer.Title>Drawer title</Drawer.Title>
+          </Drawer.Header>
+          Drawer content goes here
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  `,
+    imports: ["import * as Drawer from './'"],
+    id: 'drawer',
+};

package/dist/components/dropdown/Dropdown.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/dropdown/Dropdown.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=9-3370
+// source=src/lib/components/dropdown/index.ts
+// component=Dropdown
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const hasSearch = instance.getBoolean('Search');
+export default {
+    example: figma.code `
+    <Dropdown.Root>
+      <Dropdown.Trigger>Open</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content>
+          ${hasSearch ? figma.code `<Dropdown.SearchHeader />` : ''}
+          <Dropdown.Item onSelect={() => {}}>Item 1</Dropdown.Item>
+          <Dropdown.Item onSelect={() => {}}>Item 2</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  `,
+    imports: ["import * as Dropdown from './'"],
+    id: 'dropdown',
+};

package/dist/components/empty-content/EmptyContent.figma.d.ts

@@ -0,0 +1,7 @@
+import figma from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/components/empty-content/EmptyContent.figma.js

@@ -0,0 +1,20 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6229-11942
+// source=src/lib/components/empty-content/EmptyContent.svelte
+// component=EmptyContent
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const size = instance.getEnum('size', {
+    'md': 'md',
+    'sm': 'sm',
+});
+export default {
+    example: figma.code `
+    <EmptyContent size="${size}">
+      {#snippet icon()}<Icon icon={Database} size={32} />{/snippet}
+      <h3>No data available</h3>
+      <p>Get started by adding your first item.</p>
+    </EmptyContent>
+  `,
+    imports: ["import EmptyContent from './EmptyContent.svelte'"],
+    id: 'empty-content',
+};

package/dist/components/empty-content/EmptyContent.stories.svelte

@@ -43,3 +43,46 @@
     </EmptyContent>
   </div>
 </Story>
+
+<Story name="Small" asChild>
+  <div class="w-full bg-surface p-12">
+    <EmptyContent size="sm">
+      {#snippet icon()}
+        <Icon color="icon-tertiary" width={32} height={32} weight="light">
+          {#snippet children(props)}
+            <MagnifyingGlass {...props} />
+          {/snippet}
+        </Icon>
+      {/snippet}
+      <h6 class="text-sm font-medium">No results found</h6>
+      <p class="text-center text-xs">Try adjusting your search.</p>
+    </EmptyContent>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex w-full flex-col gap-8 bg-surface p-12">
+    <EmptyContent size="md">
+      {#snippet icon()}
+        <Icon color="icon-tertiary" width={48} height={48} weight="light">
+          {#snippet children(props)}
+            <ClockCountdown {...props} />
+          {/snippet}
+        </Icon>
+      {/snippet}
+      <h6>Medium (default)</h6>
+      <p class="text-center text-sm">Nothing has been logged for this job.</p>
+    </EmptyContent>
+    <EmptyContent size="sm">
+      {#snippet icon()}
+        <Icon color="icon-tertiary" width={32} height={32} weight="light">
+          {#snippet children(props)}
+            <ClockCountdown {...props} />
+          {/snippet}
+        </Icon>
+      {/snippet}
+      <h6 class="text-sm font-medium">Small</h6>
+      <p class="text-center text-xs">Nothing has been logged.</p>
+    </EmptyContent>
+  </div>
+</Story>