@reshape-biotech/design-system 2.7.25 → 2.7.27

package/dist/components/activity/Activity.svelte

@@ -56,15 +56,15 @@
 
 <div class={`group flex items-stretch gap-3 ${className}`}>
   <div class="flex min-h-12 flex-col items-center gap-1.5">
-    <div class="w-0.5 grow bg-neutral group-first:invisible"></div>
+    <div class="bg-neutral w-0.5 grow group-first:invisible"></div>
     <div
-      class="flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 text-secondary {ACTIVITY_BACKGROUND[
+      class="text-secondary flex h-5 w-5 shrink-0 items-center justify-center rounded p-0.5 {ACTIVITY_BACKGROUND[
         activity.icon
       ]}"
     >
       <ActivityIcon icon={activity.icon} />
     </div>
-    <div class="w-0.5 grow bg-neutral group-last:invisible"></div>
+    <div class="bg-neutral w-0.5 grow group-last:invisible"></div>
   </div>
   <div class="flex items-center py-4">
     <div class="text-secondary">

package/dist/components/avatar/Avatar.svelte

@@ -43,7 +43,7 @@
 
 {#snippet avatar()}
   <div
-    class="{sizeClassName} flex items-center justify-center rounded-full border border-static bg-accent text-accent"
+    class="{sizeClassName} border-static bg-accent text-accent flex items-center justify-center rounded-full border"
   >
     {initials}
   </div>

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -19,10 +19,10 @@
       <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
       <Dropdown.Portal>
         <Dropdown.Content>
-          <Dropdown.Item>
+          <Dropdown.Item onSelect={() => console.log('Clicked: 1st item')}>
             <p>1st item</p>
           </Dropdown.Item>
-          <Dropdown.Item>
+          <Dropdown.Item onSelect={() => console.log('Clicked: 2nd item')}>
             <p>2nd item</p>
           </Dropdown.Item>
         </Dropdown.Content>
@@ -259,7 +259,7 @@
   <div class="py-12">
     <Dropdown.Root open>
       <Dropdown.Trigger>
-        {#snippet customChild({ props })}
+        {#snippet child({ props }: { props: Record<string, any> })}
           <button
             {...props}
             class="flex items-center gap-2 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-white hover:from-purple-600 hover:to-pink-600"
@@ -271,10 +271,10 @@
       </Dropdown.Trigger>
       <Dropdown.Portal>
         <Dropdown.Content>
-          <Dropdown.Item>
+          <Dropdown.Item onSelect={() => console.log('Clicked: 1st item (custom trigger)')}>
             <p>1st item</p>
           </Dropdown.Item>
-          <Dropdown.Item>
+          <Dropdown.Item onSelect={() => console.log('Clicked: 2nd item (custom trigger)')}>
             <p>2nd item</p>
           </Dropdown.Item>
         </Dropdown.Content>
@@ -283,6 +283,186 @@
   </div>
 </Story>
 
+<Story name="Submenu (Right)">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Menu with Submenu</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content matchTriggerWidth>
+          <Dropdown.Item onSelect={() => console.log('Clicked: First item')}>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub open>
+            <Dropdown.SubTrigger side="right">
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent side="right">
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 1')}>
+                <p>Sub item 1</p>
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 2')}>
+                <p>Sub item 2</p>
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 3')}>
+                <p>Sub item 3</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item onSelect={() => console.log('Clicked: Last item')}>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
+<Story name="Submenu (Left)">
+  <div class="flex min-h-[300px] items-center justify-end py-12 pr-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Menu with Left Submenu</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content>
+          <Dropdown.Item onSelect={() => console.log('Clicked: First item (left menu)')}>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub open>
+            <Dropdown.SubTrigger side="left">
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent side="left">
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 1 (left submenu)')}>
+                <p>Sub item 1</p>
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 2 (left submenu)')}>
+                <p>Sub item 2</p>
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => console.log('Clicked: Sub item 3 (left submenu)')}>
+                <p>Sub item 3</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item onSelect={() => console.log('Clicked: Last item (left menu)')}>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
+<Story name="Nested Submenus">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Nested Menu</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content>
+          <Dropdown.Item>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>
+              <p>Settings</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>
+                <p>Profile</p>
+              </Dropdown.Item>
+              <Dropdown.Sub>
+                <Dropdown.SubTrigger>
+                  <p>Preferences</p>
+                </Dropdown.SubTrigger>
+                <Dropdown.SubContent>
+                  <Dropdown.Item>
+                    <p>Theme</p>
+                  </Dropdown.Item>
+                  <Dropdown.Item>
+                    <p>Language</p>
+                  </Dropdown.Item>
+                  <Dropdown.Item>
+                    <p>Notifications</p>
+                  </Dropdown.Item>
+                </Dropdown.SubContent>
+              </Dropdown.Sub>
+              <Dropdown.Item>
+                <p>Security</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <p>Help</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
+<Story name="Submenu with Secondary Variant">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger variant="secondary">Styled Submenu</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content variant="secondary">
+          <Dropdown.Item>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent variant="secondary">
+              <Dropdown.Item>
+                <p>Sub item 1</p>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <p>Sub item 2</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
+<Story name="Submenu without Chevron">
+  <div class="py-12">
+    <Dropdown.Root open>
+      <Dropdown.Trigger>Menu without Chevron</Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.Content>
+          <Dropdown.Item>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub open>
+            <Dropdown.SubTrigger hideChevron>
+              <p>More options (no chevron)</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>
+                <p>Sub item 1</p>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <p>Sub item 2</p>
+              </Dropdown.Item>
+              <Dropdown.Item>
+                <p>Sub item 3</p>
+              </Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
 <Story
   name="Interaction Test"
   asChild
@@ -316,21 +496,21 @@
       <Dropdown.Portal>
         <Dropdown.Content>
           <Dropdown.Item
-            onclick={() => {
+            onSelect={() => {
               selectedOption = 'Option 1';
             }}
           >
             <p>Option 1</p>
           </Dropdown.Item>
           <Dropdown.Item
-            onclick={() => {
+            onSelect={() => {
               selectedOption = 'Option 2';
             }}
           >
             <p>Option 2</p>
           </Dropdown.Item>
           <Dropdown.Item
-            onclick={() => {
+            onSelect={() => {
               selectedOption = 'Option 3';
             }}
           >

package/dist/components/dropdown/components/dropdown-item.svelte

@@ -2,12 +2,20 @@
   import { DropdownMenu } from 'bits-ui';
   import type { DropdownItemProps } from '../types';
 
-  let { children, class: className = '', ...restProps }: DropdownItemProps = $props();
+  let { children, child: userChild, class: className = '', onSelect, ...restProps }: DropdownItemProps = $props();
 </script>
 
-<DropdownMenu.Item
-  class="cursor-pointer rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 {className}"
-  {...restProps}
->
-  {@render children()}
+<DropdownMenu.Item onSelect={onSelect} {...restProps}>
+  {#snippet child({ props }: { props: Record<string, any> })}
+    {#if userChild}
+      {@render userChild({ props })}
+    {:else}
+      <div
+        {...props}
+        class="h-8 cursor-pointer rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+      >
+        {@render children?.()}
+      </div>
+    {/if}
+  {/snippet}
 </DropdownMenu.Item>

package/dist/components/dropdown/components/dropdown-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import type { DropdownSubContentProps } from '../types';
+
+  let { children, class: className = '', variant = 'primary', ...restProps }: DropdownSubContentProps = $props();
+
+  const variantClasses: Record<string, string> = {
+    primary: 'bg-surface text-primary',
+    secondary: 'bg-base-inverse text-primary-inverse',
+  };
+
+  let variantClass = $derived(variantClasses[variant]);
+</script>
+
+<DropdownMenu.SubContent
+  class="z-10 rounded-md p-1 shadow-menu {variantClass} {className}"
+  {...restProps}
+>
+  {@render children()}
+</DropdownMenu.SubContent>

package/dist/components/dropdown/components/dropdown-sub-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownSubContentProps } from '../types';
+declare const DropdownSubContent: import("svelte").Component<DropdownSubContentProps, {}, "">;
+type DropdownSubContent = ReturnType<typeof DropdownSubContent>;
+export default DropdownSubContent;

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import CaretRight from 'phosphor-svelte/lib/CaretRight';
+  import CaretLeft from 'phosphor-svelte/lib/CaretLeft';
+  import { Icon } from '../../icons/index.js';
+  import type { DropdownSubTriggerProps } from '../types';
+
+  let { children, child: userChild, class: className = '', side = 'right', hideChevron = false, ...restProps }: DropdownSubTriggerProps = $props();
+
+  let chevronIcon = $derived(side === 'left' ? CaretLeft : CaretRight);
+</script>
+
+<DropdownMenu.SubTrigger {...restProps}>
+  {#snippet child({ props }: { props: Record<string, any> })}
+    {#if userChild}
+      {@render userChild({ props })}
+    {:else}
+      <div
+        {...props}
+        class="flex h-8 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors hover:bg-neutral-hover focus:bg-neutral-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_a]:no-underline {className}"
+      >
+        {#if !hideChevron && side === 'left'}
+          <Icon color="tertiary" icon={chevronIcon} size={16} />
+        {/if}
+        {@render children?.()}
+        {#if !hideChevron && side === 'right'}
+          <Icon color="tertiary" icon={chevronIcon} size={16} />
+        {/if}
+      </div>
+    {/if}
+  {/snippet}
+</DropdownMenu.SubTrigger>

package/dist/components/dropdown/components/dropdown-sub-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DropdownSubTriggerProps } from '../types';
+declare const DropdownSubTrigger: import("svelte").Component<DropdownSubTriggerProps, {}, "">;
+type DropdownSubTrigger = ReturnType<typeof DropdownSubTrigger>;
+export default DropdownSubTrigger;

package/dist/components/dropdown/components/dropdown-trigger.svelte

@@ -5,7 +5,7 @@
 
   let {
     children,
-    customChild,
+    child: userChild,
     class: className = '',
     variant = 'primary',
     size = 'md',
@@ -15,8 +15,8 @@
 
 <DropdownMenu.Trigger {...restProps}>
   {#snippet child({ props }: { props: Record<string, any> })}
-    {#if customChild}
-      {@render customChild({ props })}
+    {#if userChild}
+      {@render userChild({ props })}
     {:else}
       <Button {...props} {variant} {size} class={className}>
         {@render children?.()}

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

@@ -3,6 +3,8 @@ import Content from './components/dropdown-content.svelte';
 import Item from './components/dropdown-item.svelte';
 import Trigger from './components/dropdown-trigger.svelte';
 import FieldTrigger from './components/dropdown-field-trigger.svelte';
+import SubTrigger from './components/dropdown-sub-trigger.svelte';
+import SubContent from './components/dropdown-sub-content.svelte';
 export declare const Root: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
@@ -15,13 +17,13 @@ export declare const Root: import("svelte").Component<{
 export declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export declare const Group: import("svelte").Component<DropdownMenu.GroupProps, {}, "ref">;
 export declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPropsWithoutHTML, {}, "open">;
-export declare const SubTrigger: import("svelte").Component<DropdownMenu.SubTriggerProps, {}, "ref">;
-export declare const SubContent: import("svelte").Component<DropdownMenu.SubContentProps, {}, "ref">;
 export declare const RadioGroup: import("svelte").Component<DropdownMenu.RadioGroupProps, {}, "value" | "ref">;
 export declare const RadioItem: import("svelte").Component<DropdownMenu.RadioItemProps, {}, "ref">;
 export declare const CheckboxItem: import("svelte").Component<DropdownMenu.CheckboxItemProps, {}, "ref" | "checked" | "indeterminate">;
 export declare const Separator: import("svelte").Component<DropdownMenu.SeparatorProps, {}, "ref">;
 export declare const Arrow: import("svelte").Component<import("bits-ui/dist/bits/utilities/arrow").ArrowProps, {}, "ref">;
 export declare const RawContent: import("svelte").Component<DropdownMenu.ContentProps, {}, "ref">;
-export { Content, Item, Trigger, FieldTrigger };
+export declare const RawSubTrigger: import("svelte").Component<DropdownMenu.SubTriggerProps, {}, "ref">;
+export declare const RawSubContent: import("svelte").Component<DropdownMenu.SubContentProps, {}, "ref">;
+export { Content, Item, Trigger, FieldTrigger, SubTrigger, SubContent };
 export * from './types';

package/dist/components/dropdown/index.js

@@ -4,20 +4,22 @@ import Content from './components/dropdown-content.svelte';
 import Item from './components/dropdown-item.svelte';
 import Trigger from './components/dropdown-trigger.svelte';
 import FieldTrigger from './components/dropdown-field-trigger.svelte';
+import SubTrigger from './components/dropdown-sub-trigger.svelte';
+import SubContent from './components/dropdown-sub-content.svelte';
 // Re-export DropdownMenu primitives
 export const Root = DropdownMenu.Root;
 export const Portal = DropdownMenu.Portal;
 export const Group = DropdownMenu.Group;
 export const Sub = DropdownMenu.Sub;
-export const SubTrigger = DropdownMenu.SubTrigger;
-export const SubContent = DropdownMenu.SubContent;
 export const RadioGroup = DropdownMenu.RadioGroup;
 export const RadioItem = DropdownMenu.RadioItem;
 export const CheckboxItem = DropdownMenu.CheckboxItem;
 export const Separator = DropdownMenu.Separator;
 export const Arrow = DropdownMenu.Arrow;
-// Export raw Content for components that already have their own styling (e.g., DatePicker)
+// Export raw components for advanced use cases
 export const RawContent = DropdownMenu.Content;
-// Export custom components
-export { Content, Item, Trigger, FieldTrigger };
+export const RawSubTrigger = DropdownMenu.SubTrigger;
+export const RawSubContent = DropdownMenu.SubContent;
+// Export custom styled components
+export { Content, Item, Trigger, FieldTrigger, SubTrigger, SubContent };
 export * from './types';

package/dist/components/dropdown/types.d.ts

@@ -1,10 +1,11 @@
-import { type DropdownMenuContentProps as BitsDropdownMenuContentProps, type DropdownMenuItemProps as BitsDropdownMenuItemProps, type DropdownMenuTriggerProps as BitsDropdownMenuTriggerProps } from 'bits-ui';
+import { type DropdownMenuContentProps as BitsDropdownMenuContentProps, type DropdownMenuItemProps as BitsDropdownMenuItemProps, type DropdownMenuTriggerProps as BitsDropdownMenuTriggerProps, type DropdownMenuSubTriggerProps as BitsDropdownMenuSubTriggerProps, type DropdownMenuSubContentProps as BitsDropdownMenuSubContentProps } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { ButtonVariant, ButtonSize } from '../button/Button.svelte';
 export type DropdownContentVariant = 'primary' | 'secondary';
+export type DropdownSubMenuSide = 'left' | 'right';
 export type DropdownTriggerProps = {
     children?: Snippet;
-    customChild?: Snippet<[{
+    child?: Snippet<[{
         props: Record<string, any>;
     }]>;
     class?: string;
@@ -22,6 +23,23 @@ export type DropdownContentProps = {
     matchTriggerWidth?: boolean;
 } & BitsDropdownMenuContentProps;
 export type DropdownItemProps = {
-    children: Snippet;
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, any>;
+    }]>;
     class?: string;
 } & BitsDropdownMenuItemProps;
+export type DropdownSubTriggerProps = {
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, any>;
+    }]>;
+    class?: string;
+    side?: DropdownSubMenuSide;
+    hideChevron?: boolean;
+} & BitsDropdownMenuSubTriggerProps;
+export type DropdownSubContentProps = {
+    children: Snippet;
+    class?: string;
+    variant?: DropdownContentVariant;
+} & BitsDropdownMenuSubContentProps;

package/dist/components/status-badge/StatusBadge.svelte

@@ -41,7 +41,12 @@
 
 <style>
   .badge {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
     gap: 0.5rem;
+    border-radius: 9999px;
     border-style: none;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))

package/dist/echarts-config.js

@@ -3,7 +3,7 @@
 // Core components (required)
 import * as echarts from 'echarts/core';
 // Charts we use
-import { CandlestickChart, LineChart } from 'echarts/charts';
+import { BoxplotChart, CandlestickChart, LineChart } from 'echarts/charts';
 import { BarChart } from 'echarts/charts';
 import { ScatterChart } from 'echarts/charts';
 import { CustomChart } from 'echarts/charts';
@@ -19,6 +19,7 @@ echarts.use([
     ScatterChart,
     CustomChart,
     CandlestickChart,
+    BoxplotChart,
     // Components
     TooltipComponent,
     GridComponent,

package/package.json

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