@reshape-biotech/design-system 2.7.25 → 2.7.26

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

@@ -218,9 +218,9 @@
 </Story>
 
 <Story name="Match Trigger Width">
-  <div class="flex gap-8 bg-base p-12">
+  <div class="bg-base flex gap-8 p-12">
     <div>
-      <p class="mb-2 text-sm text-secondary">Without matchTriggerWidth</p>
+      <p class="text-secondary mb-2 text-sm">Without matchTriggerWidth</p>
       <Dropdown.Root open>
         <Dropdown.Trigger class="w-64">Wide Trigger Button</Dropdown.Trigger>
         <Dropdown.Portal>
@@ -237,7 +237,7 @@
     </div>
 
     <div>
-      <p class="mb-2 text-sm text-secondary">With matchTriggerWidth</p>
+      <p class="text-secondary mb-2 text-sm">With matchTriggerWidth</p>
       <Dropdown.Root open>
         <Dropdown.Trigger class="w-64">Wide Trigger Button</Dropdown.Trigger>
         <Dropdown.Portal>
@@ -283,6 +283,162 @@
   </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>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger side="right">
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.Portal>
+              <Dropdown.SubContent side="right">
+                <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.Portal>
+          </Dropdown.Sub>
+          <Dropdown.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>
+            <p>First item</p>
+          </Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger side="left">
+              <p>More options</p>
+            </Dropdown.SubTrigger>
+            <Dropdown.Portal>
+              <Dropdown.SubContent side="left">
+                <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.Portal>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <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.Portal>
+              <Dropdown.SubContent>
+                <Dropdown.Item>
+                  <p>Profile</p>
+                </Dropdown.Item>
+                <Dropdown.Sub>
+                  <Dropdown.SubTrigger>
+                    <p>Preferences</p>
+                  </Dropdown.SubTrigger>
+                  <Dropdown.Portal>
+                    <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.Portal>
+                </Dropdown.Sub>
+                <Dropdown.Item>
+                  <p>Security</p>
+                </Dropdown.Item>
+              </Dropdown.SubContent>
+            </Dropdown.Portal>
+          </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.Portal>
+              <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.Portal>
+          </Dropdown.Sub>
+          <Dropdown.Item>
+            <p>Last item</p>
+          </Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Portal>
+    </Dropdown.Root>
+  </div>
+</Story>
+
 <Story
   name="Interaction Test"
   asChild
@@ -341,7 +497,7 @@
     </Dropdown.Root>
 
     {#if selectedOption}
-      <div class="mt-4 rounded bg-neutral p-2">
+      <div class="bg-neutral mt-4 rounded p-2">
         <p>You selected: <strong>{selectedOption}</strong></p>
       </div>
     {/if}

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,24 @@
+<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, class: className = '', side = 'right', ...restProps }: DropdownSubTriggerProps = $props();
+
+  let chevronIcon = $derived(side === 'left' ? CaretLeft : CaretRight);
+</script>
+
+<DropdownMenu.SubTrigger
+  class="flex 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 {className}"
+  {...restProps}
+>
+  {#if side === 'left'}
+    <Icon color="tertiary" icon={chevronIcon} size={16} />
+  {/if}
+  {@render children()}
+  {#if side === 'right'}
+    <Icon color="tertiary" icon={chevronIcon} size={16} />
+  {/if}
+</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/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,7 +1,8 @@
-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<[{
@@ -25,3 +26,13 @@ export type DropdownItemProps = {
     children: Snippet;
     class?: string;
 } & BitsDropdownMenuItemProps;
+export type DropdownSubTriggerProps = {
+    children: Snippet;
+    class?: string;
+    side?: DropdownSubMenuSide;
+} & BitsDropdownMenuSubTriggerProps;
+export type DropdownSubContentProps = {
+    children: Snippet;
+    class?: string;
+    variant?: DropdownContentVariant;
+} & BitsDropdownMenuSubContentProps;

package/package.json

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