@reshape-biotech/design-system 2.7.2 → 2.7.3

package/dist/components/button/Button.svelte

@@ -100,17 +100,27 @@
 
     border-radius: 0.5rem;
 
+    border-width: 1px;
+
+    border-color: transparent;
+
     font-size: 0.875rem;
 
+    line-height: 1.25rem;
+
     font-weight: 500;
 
-    line-height: 1.5rem;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
     transition-duration: 150ms
 }
 
 .button:disabled {
 
+    border-style: none;
+
     background-color: #12192a0A;
 
     --tw-text-opacity: 1;
@@ -145,7 +155,9 @@
 
     border-radius: 0.375rem;
 
-    padding: 0.5rem
+    padding-left: 0.5rem;
+
+    padding-right: 0.5rem
 }
   .btn-size-sm {
 
@@ -153,11 +165,7 @@
 
     padding-left: 0.75rem;
 
-    padding-right: 0.75rem;
-
-    padding-top: 0.5rem;
-
-    padding-bottom: 0.5rem
+    padding-right: 0.75rem
 }
   .btn-size-md {
 
@@ -165,11 +173,7 @@
 
     padding-left: 1rem;
 
-    padding-right: 1rem;
-
-    padding-top: 0.75rem;
-
-    padding-bottom: 0.75rem
+    padding-right: 1rem
 }
   .btn-size-lg {
 
@@ -179,11 +183,7 @@
 
     padding-left: 1.25rem;
 
-    padding-right: 1.25rem;
-
-    padding-top: 1rem;
-
-    padding-bottom: 1rem
+    padding-right: 1.25rem
 }
   @media (min-width: 1280px) {
 
@@ -198,13 +198,21 @@
   /* Button variants */
   .btn-primary {
 
+    border-color: #12192A1A;
+
     --tw-bg-opacity: 1;
 
     background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
 
     --tw-text-opacity: 1;
 
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 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)
 }
   .btn-primary:hover {
 
@@ -243,13 +251,21 @@
 }
   .btn-danger {
 
+    border-color: #12192A1A;
+
     --tw-bg-opacity: 1;
 
     background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
 
     --tw-text-opacity: 1;
 
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
+
+    --tw-shadow-colored: 0 1px 4px 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)
 }
   .btn-danger:hover {
 
@@ -259,8 +275,6 @@
 }
   .btn-outline {
 
-    border-width: 1px;
-
     border-color: #12192A1A;
 
     --tw-bg-opacity: 1;

package/dist/components/card/CardWrapper.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   type Props = {
     Header?: Snippet;
     children: Snippet;
     Footer?: Snippet;
-    class?: string;
+    class?: ClassValue;
     variant?: 'default' | 'compact';
   };
 
@@ -13,30 +14,38 @@
     Header,
     children,
     Footer,
-    class: additionalClasses = '',
+    class: additionalClasses,
     variant = 'default',
   }: Props = $props();
 </script>
 
-<div class="wrapper {variant} {additionalClasses}">
+<div class={['wrapper', variant, additionalClasses]}>
   {#if Header}
     <header
-      class="flex w-full items-center justify-between {variant === 'default'
-        ? 'min-h-10 px-4'
-        : 'min-h-8 px-3'}"
+      class={[
+        'flex w-full items-center justify-between',
+        {
+          'min-h-10 px-4': variant === 'default',
+          'min-h-8 px-3': variant === 'compact',
+        },
+      ]}
     >
       {@render Header()}
     </header>
   {/if}
   <div
-    class="flex w-full !overflow-hidden [&>*]:w-full {variant === 'default'
-      ? '[&>*]:rounded-xl'
-      : '[&>*]:rounded-[10px]'}"
+    class={[
+      'flex w-full flex-col !overflow-hidden [&>*]:w-full',
+      {
+        'gap-1 [&>*]:rounded-xl': variant === 'default',
+        'gap-0.5 [&>*]:rounded-[10px]': variant === 'compact',
+      },
+    ]}
   >
     {@render children()}
   </div>
   {#if Footer}
-    <footer class="flex min-h-8 w-full items-center {variant === 'default' ? 'px-4' : 'px-3'}">
+    <footer class="flex min-h-8 w-full items-center px-3">
       {@render Footer()}
     </footer>
   {/if}

package/dist/components/card/CardWrapper.svelte.d.ts

@@ -1,9 +1,10 @@
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 type Props = {
     Header?: Snippet;
     children: Snippet;
     Footer?: Snippet;
-    class?: string;
+    class?: ClassValue;
     variant?: 'default' | 'compact';
 };
 declare const CardWrapper: import("svelte").Component<Props, {}, "">;

package/dist/components/tabs/Tabs.stories.svelte

@@ -6,23 +6,155 @@
     component: Tabs,
     title: 'Design System/Tabs',
     tags: ['autodocs'],
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['sm', 'md', 'lg'],
+        description: 'Size of the tabs container',
+      },
+    },
   });
 
   let activeTab = 'tab-1';
+  let activeTabPrimary = 'tab-1';
+  let activeTabSecondary = 'tab-1';
+  let activeTabTransparent = 'tab-1';
+  let activeTabSizes = 'tab-1';
 </script>
 
-<Story name="Primary" asChild>
+<Story name="Primary Variant" asChild>
   <Tabs>
     {#snippet children({ Tabs, Tab, Content })}
-      <Tabs>
-        <Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
-        <Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
-        <Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
+      <Tabs variant="primary">
+        <Tab active={activeTabPrimary === 'tab-1'} onclick={() => (activeTabPrimary = 'tab-1')}
+          >Tab 1</Tab
+        >
+        <Tab active={activeTabPrimary === 'tab-2'} onclick={() => (activeTabPrimary = 'tab-2')}
+          >Tab 2</Tab
+        >
+        <Tab active={activeTabPrimary === 'tab-3'} onclick={() => (activeTabPrimary = 'tab-3')}
+          >Tab 3</Tab
+        >
+      </Tabs>
+
+      <Content show={activeTabPrimary === 'tab-1'}>Showing primary tab 1 content</Content>
+      <Content show={activeTabPrimary === 'tab-2'}>Showing primary tab 2 content</Content>
+      <Content show={activeTabPrimary === 'tab-3'}>Showing primary tab 3 content</Content>
+    {/snippet}
+  </Tabs>
+</Story>
+
+<Story name="Secondary Variant" asChild>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs variant="secondary">
+        <Tab active={activeTabSecondary === 'tab-1'} onclick={() => (activeTabSecondary = 'tab-1')}
+          >Tab 1</Tab
+        >
+        <Tab active={activeTabSecondary === 'tab-2'} onclick={() => (activeTabSecondary = 'tab-2')}
+          >Tab 2</Tab
+        >
+        <Tab active={activeTabSecondary === 'tab-3'} onclick={() => (activeTabSecondary = 'tab-3')}
+          >Tab 3</Tab
+        >
+      </Tabs>
+
+      <Content show={activeTabSecondary === 'tab-1'}>Showing secondary tab 1 content</Content>
+      <Content show={activeTabSecondary === 'tab-2'}>Showing secondary tab 2 content</Content>
+      <Content show={activeTabSecondary === 'tab-3'}>Showing secondary tab 3 content</Content>
+    {/snippet}
+  </Tabs>
+</Story>
+
+<Story name="Transparent Variant" asChild>
+  <Tabs>
+    {#snippet children({ Tabs, Tab, Content })}
+      <Tabs variant="transparent">
+        <Tab
+          active={activeTabTransparent === 'tab-1'}
+          onclick={() => (activeTabTransparent = 'tab-1')}>Tab 1</Tab
+        >
+        <Tab
+          active={activeTabTransparent === 'tab-2'}
+          onclick={() => (activeTabTransparent = 'tab-2')}>Tab 2</Tab
+        >
+        <Tab
+          active={activeTabTransparent === 'tab-3'}
+          onclick={() => (activeTabTransparent = 'tab-3')}>Tab 3</Tab
+        >
       </Tabs>
 
-      <Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
-      <Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
-      <Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
+      <Content show={activeTabTransparent === 'tab-1'}>Showing transparent tab 1 content</Content>
+      <Content show={activeTabTransparent === 'tab-2'}>Showing transparent tab 2 content</Content>
+      <Content show={activeTabTransparent === 'tab-3'}>Showing transparent tab 3 content</Content>
     {/snippet}
   </Tabs>
 </Story>
+
+<Story name="Different Sizes" asChild>
+  <div class="flex flex-col gap-6">
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Small (sm), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="sm">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Small Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Small Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Medium (md), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="md">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Medium Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Medium Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Large (lg), full width</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="lg">
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Large Tab 1</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Large Tab 2</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+
+    <div>
+      <h4 class="mb-2 text-sm font-medium">Large (lg), fit content</h4>
+      <Tabs>
+        {#snippet children({ Tabs, Tab, Content })}
+          <Tabs variant="primary" size="lg" fullWidth={false}>
+            <Tab active={activeTabSizes === 'tab-1'} onclick={() => (activeTabSizes = 'tab-1')}
+              >Included in score</Tab
+            >
+            <Tab active={activeTabSizes === 'tab-2'} onclick={() => (activeTabSizes = 'tab-2')}
+              >Excluded from score</Tab
+            >
+          </Tabs>
+        {/snippet}
+      </Tabs>
+    </div>
+  </div>
+</Story>

package/dist/components/tabs/components/Tab.svelte

@@ -1,21 +1,22 @@
 <script lang="ts">
-  import { Button } from '../../button/';
   import type { Snippet } from 'svelte';
+  import Button from '../../button/Button.svelte';
+
   interface Props {
-    active?: boolean;
-    onClick: () => void;
     class?: string;
+    active?: boolean;
+    onclick?: () => void;
     children?: Snippet;
   }
 
-  let { active = false, onClick, class: className = '', children }: Props = $props();
+  let { class: className = '', active = false, onclick, children }: Props = $props();
 </script>
 
 <Button
-  {onClick}
+  {onclick}
   variant="transparent"
-  size="md"
-  class={`tab flex !h-10 gap-2 !rounded-md !px-0 !py-0 ${active ? 'tab-active' : ''} ${className}`}
+  size="sm"
+  class={`tab !h-full ${className} ${active ? 'active' : ''}`}
 >
   {@render children?.()}
 </Button>

package/dist/components/tabs/components/Tab.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 interface Props {
-    active?: boolean;
-    onClick: () => void;
     class?: string;
+    active?: boolean;
+    onclick?: () => void;
     children?: Snippet;
 }
 declare const Tab: import("svelte").Component<Props, {}, "">;

package/dist/components/tabs/components/Tabs.svelte

@@ -1,14 +1,82 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
+  type Size = 'sm' | 'md' | 'lg';
+  type Variant = 'primary' | 'secondary' | 'transparent';
+
   interface Props {
     class?: string;
-    children?: Snippet;
+    size?: Size;
+    variant?: Variant;
+    fullWidth?: boolean;
+    children?: Snippet<[{ variant: Variant }]>;
   }
 
-  let { class: className = '', children }: Props = $props();
+  let {
+    class: className = '',
+    size = 'lg',
+    variant = 'primary',
+    fullWidth = true,
+    children,
+  }: Props = $props();
+
+  const sizes = {
+    sm: 'h-8 p-0.5 gap-0.5 rounded-lg [&>*]:!rounded-md',
+    md: 'h-10 p-1 gap-1 rounded-[10px] [&>*]:!rounded-md',
+    lg: 'h-12 p-1 gap-1 rounded-xl',
+  };
 </script>
 
-<div role="tablist" class={`tabs-boxed tabs h-[48px] gap-1 rounded-lg ${className}`}>
-  {@render children?.()}
+<div
+  role="tablist"
+  class={`flex  ${sizes[size]} ${variant} ${className} ${fullWidth ? 'w-full [&>*]:flex-1' : 'w-fit [&>*]:flex-none'}`}
+>
+  {@render children?.({ variant })}
 </div>
+
+<style>
+  .primary {
+
+    background-color: #12192a0A
+}
+
+    .primary :global(.tab.active) {
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+
+  .secondary {
+
+    background-color: #12192a0A
+}
+
+  .secondary :global(.tab.active) {
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+
+  .transparent :global(.tab.active) {
+
+    background-color: #12192a0A;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/tabs/components/Tabs.svelte.d.ts

@@ -1,7 +1,14 @@
 import type { Snippet } from 'svelte';
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'primary' | 'secondary' | 'transparent';
 interface Props {
     class?: string;
-    children?: Snippet;
+    size?: Size;
+    variant?: Variant;
+    fullWidth?: boolean;
+    children?: Snippet<[{
+        variant: Variant;
+    }]>;
 }
 declare const Tabs: import("svelte").Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",