@reshape-biotech/design-system 2.7.52 → 2.7.53

package/dist/components/toggle/Toggle.stories.svelte

@@ -1,15 +1,67 @@
-<script module>
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Toggle from './Toggle.svelte';
 
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
   const { Story } = defineMeta({
     title: 'Components/Toggle',
     component: Toggle,
     tags: ['autodocs'],
+    parameters: {
+      layout: 'fullscreen',
+    },
   });
+
+  const sizes = ['sm', 'md', 'lg'] as const;
 </script>
 
-<Story name="Base" asChild>
-  <Toggle id="toggle-1" />
+<Story name="Overview" asChild>
+  <div class="flex flex-col gap-8 text-sm">
+    <div class="overflow-x-auto">
+      <table class="w-full min-w-[480px] table-fixed border-collapse text-center">
+        <colgroup>
+          <col class="w-24" />
+          <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">Disabled off</th>
+            <th class="p-4 text-center">Disabled on</th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each sizes as size}
+            <tr class="border-b border-static last:border-none">
+              <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">
+                  <Toggle id={`toggle-${size}-off`} {size} value={false} />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-on`} {size} value={true} />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-disabled-off`} {size} value={false} disabled />
+                </div>
+              </td>
+              <td class="p-4">
+                <div class="flex w-full justify-center">
+                  <Toggle id={`toggle-${size}-disabled-on`} {size} value={true} disabled />
+                </div>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  </div>
 </Story>

package/dist/components/toggle/Toggle.stories.svelte.d.ts

@@ -1,19 +1,6 @@
-export default Toggle;
-type Toggle = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 import Toggle from './Toggle.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> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -25,3 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toggle = InstanceType<typeof Toggle>;
+export default Toggle;

package/dist/components/toggle/Toggle.svelte

@@ -1,69 +1,67 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     value?: boolean;
     onclick?: (event?: MouseEvent) => void;
     id: string;
     'data-testid'?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
   }
 
-  let { value = $bindable(false), onclick, id, 'data-testid': testId }: Props = $props();
-</script>
-
-<label class="switch">
-  <input type="checkbox" bind:checked={value} {onclick} {id} data-testid={testId} />
-  <span class="slider round"></span>
-</label>
-
-<style>
-  @reference "../../app.css";
-  /* The switch - the box around the slider */
-  .switch {
-    @apply relative inline-block h-5 w-9;
-  }
-
-  /* Hide default HTML checkbox */
-  .switch input {
-    @apply h-0 w-0 opacity-0;
-  }
+  let { value = $bindable(false), onclick, id, 'data-testid': testId, size = 'md', disabled = false }: Props = $props();
 
-  /* The slider */
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-    @apply bg-neutral-darker;
-  }
+  const sizeStyles = {
+    sm: {
+      track: 'h-4 w-7',
+      thumb: 'h-3 w-3',
+      thumbChecked: 'peer-checked:translate-x-[12px]',
+    },
+    md: {
+      track: 'h-5 w-8.5',
+      thumb: 'h-4 w-4',
+      thumbChecked: 'peer-checked:translate-x-[14px]',
+    },
+    lg: {
+      track: 'h-6 w-10',
+      thumb: 'h-5 w-5',
+      thumbChecked: 'peer-checked:translate-x-[16px]',
+    },
+  } as const;
 
-  .slider:before {
-    content: '';
-    left: 2px;
-    bottom: 2px;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-    @apply absolute h-4 w-4 bg-surface;
-  }
-
-  input:checked + .slider {
-    @apply bg-accent-inverse;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(16px);
-    -ms-transform: translateX(16px);
-    transform: translateX(16px);
-  }
-
-  /* Rounded sliders */
-  .slider.round {
-    @apply rounded-full;
-  }
+  const sz = $derived(sizeStyles[size]);
+</script>
 
-  .slider.round:before {
-    @apply rounded-full;
-  }
-</style>
+<label
+  class={twMerge(
+    'relative inline-block',
+    sz.track,
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+  )}
+>
+  <input type="checkbox" class="peer sr-only" bind:checked={value} {onclick} {id} data-testid={testId} {disabled} />
+  <span
+    aria-hidden="true"
+    class={twMerge(
+      'pointer-events-none absolute inset-0 rounded-full border transition-colors duration-100 ease-linear',
+      disabled &&
+        !value &&
+        'border-interactive bg-transparent',
+      disabled &&
+        value &&
+        'border-transparent bg-neutral-darker',
+      !disabled &&
+        'border-static bg-neutral-darker peer-checked:border-interactive peer-checked:bg-accent-inverse',
+    )}
+  ></span>
+  <span
+    aria-hidden="true"
+    class={twMerge(
+      'pointer-events-none absolute bottom-0.5 left-0.5 rounded-full bg-surface transition-transform duration-100 ease-linear',
+      disabled ? 'bg-neutral-darker shadow-none' : 'bg-surface shadow-button',
+      sz.thumb,
+      sz.thumbChecked,
+    )}
+  ></span>
+</label>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -3,6 +3,8 @@ interface Props {
     onclick?: (event?: MouseEvent) => void;
     id: string;
     'data-testid'?: string;
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "value">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/components/toggle-icon-button/ToggleIconButton.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/toggle-icon-button/ToggleIconButton.figma.js

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=6564-9274
+// source=src/lib/components/toggle-icon-button/ToggleIconButton.svelte
+// component=ToggleIconButton
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const variant = instance.getEnum('variant', {
+    'primary-inverse': 'primary-inverse',
+    'secondary': 'secondary',
+});
+const isActive = instance.getEnum('isActive', {
+    'true': true,
+    'false': false,
+});
+const disabled = instance.getBoolean('disabled');
+const rounded = instance.getBoolean('rounded');
+const loading = instance.getBoolean('loading');
+export default {
+    example: figma.code `
+    <ToggleIconButton
+      variant="${variant}"
+      isActive={${isActive}}
+      ${disabled ? 'disabled' : ''}
+      ${rounded ? 'rounded' : ''}
+      ${loading ? 'loading' : ''}
+    >
+      <Icon icon={Plus} />
+    </ToggleIconButton>
+  `,
+    imports: ["import ToggleIconButton from './ToggleIconButton.svelte'"],
+    id: 'toggle-icon-button',
+};

package/dist/components/tooltip/Tooltip.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/tooltip/Tooltip.figma.js

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/WkxhG4H2Ybc7STFi1VJIau/%F0%9F%92%A0-Reshape-Design-System--V1?node-id=706-14439
+// source=src/lib/components/tooltip/Tooltip.svelte
+// component=Tooltip
+import figma from 'figma';
+const instance = figma.selectedInstance;
+const placement = instance.getEnum('placement', {
+    'top': 'top',
+    'bottom': 'bottom',
+    'left': 'left',
+    'right': 'right',
+});
+const contentText = instance.getString('Content');
+export default {
+    example: figma.code `
+    <Tooltip placement="${placement}">
+      {#snippet trigger()}<button>Hover me</button>{/snippet}
+      {#snippet content()}${contentText || 'Tooltip text'}{/snippet}
+    </Tooltip>
+  `,
+    imports: ["import Tooltip from './Tooltip.svelte'"],
+    id: 'tooltip',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.52",
+  "version": "2.7.53",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -390,9 +390,11 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.1",
     "@eslint/compat": "^1.2.3",
+    "@figma/code-connect": "^1.4.3",
     "@storybook/addon-a11y": "^10.2.14",
     "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-links": "^10.2.0",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/addon-svelte-csf": "^5.0.11",
     "@storybook/addon-vitest": "^10.2.13",
     "@storybook/svelte": "^10.2.0",