@reshape-biotech/design-system 2.7.51 → 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 = [
@@ -27,23 +21,19 @@
 </script>
 
 <Story name="Variants" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
       {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
-        <div class="bg-base-inverse p-4 text-primary-inverse">
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant}>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit">Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded>Button</Button>
         </div>
       {:else}
-        <div>
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant}>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit">Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded>Button</Button>
         </div>
       {/if}
     {/each}
@@ -51,46 +41,52 @@
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each sizes as size}
-      <div>
-        <p>{size}</p>
-        <Button variant="primary" size={size as ButtonSize}>Button</Button>
+      <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+        <p class="text-secondary">{size}</p>
+        <Button variant="primary" size={size as ButtonSize} class="w-fit">Button</Button>
+        <Button variant="primary" size={size as ButtonSize} class="w-fit" rounded>Button</Button>
       </div>
     {/each}
   </div>
 </Story>
 
 <Story name="Disabled" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
       {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
-        <div class="bg-base-inverse p-4 text-primary-inverse">
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant} disabled>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" disabled>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded disabled>Button</Button>
         </div>
       {:else}
-        <div>
-          <p>{variant}</p>
-          <div class="flex gap-4">
-            <Button variant={variant as ButtonVariant} disabled>Button</Button>
-            <Button variant={variant as ButtonVariant} rounded disabled>Button</Button>
-          </div>
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" disabled>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded disabled>Button</Button>
         </div>
       {/if}
     {/each}
   </div>
 </Story>
 <Story name="Loading" asChild>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col">
     {#each variants as variant}
-      <div>
-        <p>{variant}</p>
-        <Button variant={variant as ButtonVariant} loading>Button</Button>
-      </div>
+      {#if variant === 'secondary-inverse' || variant === 'transparent-inverse'}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 bg-surface-inverse px-8 py-6 text-primary-inverse">
+          <p class="text-secondary-inverse">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" loading>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded loading>Button</Button>
+        </div>
+      {:else}
+        <div class="grid grid-cols-3 items-center justify-center gap-4 px-8 py-6">
+          <p class="text-secondary">{variant}</p>
+          <Button variant={variant as ButtonVariant} class="w-fit" loading>Button</Button>
+          <Button variant={variant as ButtonVariant} class="w-fit" rounded loading>Button</Button>
+        </div>
+      {/if}
     {/each}
   </div>
 </Story>

package/dist/components/button/Button.svelte

@@ -22,7 +22,7 @@
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    accessibilityLabel?: string | undefined;
     size?: ButtonSize;
     id?: string | undefined;
     tabindex?: number | undefined;
@@ -34,11 +34,12 @@
 
   let {
     class: className = '',
-    onClick = () => {},
+    onClick,
+    onclick: onclickProp,
     type = 'button',
     loading = false,
     disabled = false,
-    accessibilityLabel = '',
+    accessibilityLabel = undefined,
     size = 'md',
     id = undefined,
     tabindex = undefined,
@@ -57,7 +58,8 @@
   aria-label={accessibilityLabel}
   onclick={(e) => {
     if (!loading && !disabled) {
-      onClick(e);
+      onClick?.(e);
+      onclickProp?.(e);
     } else {
       e.preventDefault();
     }
@@ -70,7 +72,6 @@
   class={twMerge('button', variantClass, sizeClass, className)}
   data-testid={dataTestId}
   class:rounded
-  class:disabled
   {...rest}
 >
   {#if loading}
@@ -83,7 +84,7 @@
 <style>
   @reference "../../app.css";
   .button {
-    @apply inline-flex items-center justify-center gap-2 truncate text-nowrap rounded-lg border border-transparent text-sm font-medium transition-colors disabled:cursor-not-allowed;
+    @apply inline-flex items-center justify-center gap-2 truncate text-nowrap rounded-lg border border-transparent text-sm font-medium transition-colors hover:cursor-pointer disabled:cursor-not-allowed;
   }
 
   .rounded {
@@ -92,23 +93,27 @@
 
   /* Size variants */
   .btn-size-xs {
-    @apply h-7 rounded-md px-2;
+    @apply h-7 rounded-md px-2 text-label;
   }
   .btn-size-sm {
     @apply h-8 px-3;
   }
   .btn-size-md {
-    @apply h-10 px-4;
+    @apply h-9 px-4;
   }
   .btn-size-lg {
-    @apply h-12 rounded-xl px-5 xl:text-base;
+    @apply h-10 px-5;
+  }
+
+    /* Gradient sheen */
+  .btn-primary, .btn-danger {
+    @apply bg-origin-border bg-gradient-to-b from-white/5 to-transparent to-75%  disabled:bg-none;
   }
 
   /* Button variants */
   .btn-primary {
-    @apply border-input bg-accent-inverse text-primary-inverse shadow-input hover:bg-accent-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+    @apply border-input bg-accent-inverse text-primary-inverse shadow-button hover:bg-accent-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
-
   .btn-secondary {
     @apply bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
@@ -116,10 +121,10 @@
     @apply bg-transparent text-inherit hover:bg-neutral disabled:bg-transparent disabled:text-tertiary disabled:hover:bg-transparent;
   }
   .btn-danger {
-    @apply border-input bg-danger-inverse text-primary-inverse shadow-input hover:bg-danger-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
+    @apply border-input bg-danger-inverse text-primary-inverse shadow-button hover:bg-danger-inverse-hover disabled:border-transparent disabled:bg-neutral disabled:text-tertiary disabled:hover:bg-neutral;
   }
   .btn-outline {
-    @apply border-input bg-surface text-primary shadow-input hover:border-input hover:bg-neutral hover:text-primary disabled:border-static disabled:bg-surface disabled:text-tertiary disabled:shadow-none disabled:hover:bg-surface disabled:hover:border-static;
+    @apply border-input bg-surface text-primary shadow-button hover:bg-surface-secondary hover:text-primary disabled:border-static disabled:bg-transparent disabled:text-tertiary disabled:shadow-none;
   }
   .btn-secondary-inverse {
     @apply bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse disabled:border-transparent disabled:bg-neutral-inverse disabled:text-tertiary disabled:hover:bg-neutral-inverse;

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

@@ -8,7 +8,7 @@ interface Props extends HTMLButtonAttributes {
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     loading?: boolean;
     disabled?: boolean;
-    accessibilityLabel?: string;
+    accessibilityLabel?: string | undefined;
     size?: ButtonSize;
     id?: string | undefined;
     tabindex?: number | undefined;

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;