@reshape-biotech/design-system 2.7.35 → 2.7.37

package/dist/components/icons/AnalysisIcon.svelte

@@ -60,21 +60,21 @@
 
     switch (analysis) {
       case 'pipeline_halos':
-        return 'warning';
+        return 'icon-warning';
       case 'pipeline_large_colonies':
       case 'pipeline_radial_growth':
-        return 'accent';
+        return 'icon-accent';
       case 'pipeline_microbial_colonies':
       case 'pipeline_small_colonies':
-        return 'blue';
+        return 'icon-blue';
       case 'sgs_enteros':
-        return 'lilac';
+        return 'icon-lilac';
       case 'pipeline_insects':
-        return 'orange';
+        return 'icon-orange';
       case 'pipeline_seed_germination':
-        return 'success';
+        return 'icon-success';
       default:
-        return 'secondary';
+        return 'icon-secondary';
     }
   };
 </script>

package/dist/components/input/Input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
   import X from 'phosphor-svelte/lib/X';
   import { Icon } from '../icons/index.js';
   import type { Snippet } from 'svelte';
@@ -91,7 +92,7 @@
 
   <div class="flex-1">
     <div
-      class="flex w-full items-center gap-1 size-{size} transition-colors"
+      class={twMerge('flex w-full items-center gap-1 transition-colors', `size-${size}`, className)}
       class:!border-error={!valid}
       class:primary={variant === 'primary'}
       class:secondary={variant === 'secondary'}

package/dist/components/label/Label.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
   interface Props {
     forId: string;
     text: string;
@@ -9,7 +11,7 @@
   const { forId, text, required = false, class: className }: Props = $props();
 </script>
 
-<label for={forId} class="block text-sm text-secondary {className ?? ''}">
+<label for={forId} class={twMerge('block text-sm text-secondary', className)}>
   {text}
   {#if required}
     <span class="ml-0.5 text-danger">*</span>

package/dist/components/list/List.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="T">
   import type { Overflow } from '../../tailwind';
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Props = {
     items: T[];
@@ -11,7 +12,9 @@
   let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
 </script>
 
-<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+<div
+  class={twMerge('listStyles', variant === 'compact' ? 'compact' : 'default', overflow)}
+>
   {#each items as currentItem, i}
     <div class="item">
       {@render item(currentItem)}

package/dist/components/markdown/Markdown.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { marked } from 'marked';
+  import { twMerge } from 'tailwind-merge';
   interface Props {
     markdown: string;
     variant?: 'light' | 'dark';
@@ -8,6 +9,6 @@
   let { markdown, variant = 'light' }: Props = $props();
 </script>
 
-<div class="prose prose-slate text-sm {variant === 'dark' ? 'dark:prose-invert' : ''}">
+<div class={twMerge('prose prose-slate text-sm', variant === 'dark' && 'dark:prose-invert')}>
   {@html marked.parse(markdown ?? '')}
 </div>

package/dist/components/modal/Modal.stories.svelte

@@ -121,6 +121,9 @@
           </Icon>
         {/snippet}
         Sticky Header
+        {#snippet rightSlot()}
+          <Button variant="outline" size="sm">Action</Button>
+        {/snippet}
       </Modal.Title>
       <Modal.ScrollContent>
         <h4 class="font-semibold">Information</h4>

package/dist/components/modal/components/modal-title.svelte

@@ -3,7 +3,7 @@
   import type { ModalTitleProps } from '../types';
   import { twMerge } from 'tailwind-merge';
 
-  let { children, class: className = '', icon, sticky = false, ...restProps }: ModalTitleProps = $props();
+  let { children, class: className = '', icon, sticky = false, rightSlot, ...restProps }: ModalTitleProps = $props();
 
   const baseClasses = $derived(sticky 
     ? 'text-base font-semibold tracking-tight text-primary'
@@ -14,7 +14,7 @@
 {#if sticky}
   <div class="sticky top-0 z-10 w-full h-12 shrink-0 bg-surface border-b border-static">
     <div class="flex h-12 items-center justify-between overflow-hidden px-4 py-2 w-full">
-      <div class="flex gap-2 items-center relative shrink-0">
+      <div class="flex flex-1 gap-2 items-center relative shrink-0">
         {#if icon}
           <div class="relative shrink-0 text-icon-secondary">
             {@render icon()}
@@ -24,6 +24,11 @@
           {@render children()}
         </Dialog.Title>
       </div>
+      {#if rightSlot}
+        <div class="flex-shrink-0 mr-8">
+          {@render rightSlot()}
+        </div>
+      {/if}
     </div>
   </div>
 {:else}

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

@@ -19,6 +19,7 @@ export type ModalTitleProps = {
     class?: string;
     icon?: Snippet;
     sticky?: boolean;
+    rightSlot?: Snippet;
 } & BitsDialogTitleProps;
 export type ModalDescriptionProps = {
     children: Snippet;

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type Color = 'primary' | 'secondary';
 
@@ -32,7 +33,12 @@
 <div class="join-item flex h-full flex-1">
   <button
     {onclick}
-    class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+    class={twMerge(
+      'control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4',
+      colors[color],
+      color,
+      className
+    )}
     class:active
     type="button"
     {disabled}

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
   import ControlButton from './ControlButton.svelte';
 
   interface Props {
@@ -16,6 +17,6 @@
   };
 </script>
 
-<div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
+<div class={twMerge('join flex gap-1 rounded-lg bg-neutral p-1', sizes[size], size, className)}>
   {@render children?.({ ControlButton })}
 </div>

package/dist/components/select/Select.stories.svelte

@@ -2,6 +2,11 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import * as Select from './index';
   import { Icon } from '../icons';
+  import Hash from 'phosphor-svelte/lib/Hash';
+  import Ruler from 'phosphor-svelte/lib/Ruler';
+  import Timer from 'phosphor-svelte/lib/Timer';
+  import ChartLine from 'phosphor-svelte/lib/ChartLine';
+  import Database from 'phosphor-svelte/lib/Database';
 
   const { Story } = defineMeta({
     title: 'Design System/Select(New)',
@@ -33,6 +38,8 @@
   let selectedValueMultiple = $state<string[]>([]);
   let selectedValueSinglePreselected = $state<string | undefined>('vegetables');
   let selectedValueMultiplePreselected = $state<string[]>(['fruits', 'grains']);
+  let selectedValueSm = $state<string | undefined>(undefined);
+  let selectedValueMd = $state<string | undefined>(undefined);
 
   const customIconItems = [
     { value: 'insect_count', label: 'Insect count', iconName: 'Hash' },
@@ -42,6 +49,15 @@
   ];
   let selectedCustomItems = $state<string[]>(['insect_count', 'leaf_area']);
 
+  const itemsWithIcons = [
+    { value: 'analytics', label: 'Analytics', icon: Hash },
+    { value: 'measurements', label: 'Measurements', icon: Ruler },
+    { value: 'tracking', label: 'Time Tracking', icon: Timer },
+    { value: 'charts', label: 'Charts', icon: ChartLine },
+    { value: 'database', label: 'Database', icon: Database },
+  ];
+  let selectedValueWithIcons = $state<string | undefined>(undefined);
+
   const handleRemoveCustomItem = (itemValue: string) => {
     selectedCustomItems = selectedCustomItems.filter((v) => v !== itemValue);
   };
@@ -100,6 +116,55 @@
   let selectedCountry = $state<string | undefined>(undefined);
 </script>
 
+<Story name="Size Variants" asChild>
+  <div class="p-4">
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <p class="text-sm font-medium text-secondary">Small (sm)</p>
+        <Select.Root bind:value={selectedValueSm} items={foodGroups} type="single">
+          <Select.Trigger
+            class="w-[250px]"
+            size="sm"
+            placeholder={'Select a food group'}
+            displayValue={foodGroups.find((f) => f.value === selectedValueSm)?.label}
+          />
+          <Select.Portal>
+            <Select.Content>
+              {#each foodGroups as item (item.value)}
+                <Select.Item value={item.value} label={item.label} />
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <div class="text-xs text-tertiary">
+          Selected: {selectedValueSm ?? 'Nothing'}
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <p class="text-sm font-medium text-secondary">Medium (md) - Default</p>
+        <Select.Root bind:value={selectedValueMd} items={foodGroups} type="single">
+          <Select.Trigger
+            class="w-[250px]"
+            size="md"
+            placeholder={'Select a food group'}
+            displayValue={foodGroups.find((f) => f.value === selectedValueMd)?.label}
+          />
+          <Select.Portal>
+            <Select.Content>
+              {#each foodGroups as item (item.value)}
+                <Select.Item value={item.value} label={item.label} />
+              {/each}
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <div class="text-xs text-tertiary">
+          Selected: {selectedValueMd ?? 'Nothing'}
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
 <Story name="Default (Single Select)" asChild>
   <div class="p-4">
     <Select.Root bind:value={selectedValueSingle} items={foodGroups} type="single" open>
@@ -232,23 +297,33 @@
   </div>
 </Story>
 
-<Story name="Multiple Select with Custom Icons and Dismissible Tags" asChild>
+<Story name="With Icons (Single Select)" asChild>
   <div class="p-4">
-    <Select.Root bind:value={selectedCustomItems} items={customIconItems} type="multiple">
-      <Select.MultiSelectTrigger
-        class="w-[350px]"
-        selectedValues={selectedCustomItems}
-        items={customIconItems}
-        placeholder="Select metrics..."
-        onRemoveItem={handleRemoveCustomItem}
-      />
+    <Select.Root bind:value={selectedValueWithIcons} items={itemsWithIcons} type="single">
+      <Select.Trigger class="w-[250px]" placeholder={'Select an option'}>
+        {#snippet children()}
+          {#if selectedValueWithIcons}
+            {@const selectedItem = itemsWithIcons.find((item) => item.value === selectedValueWithIcons)}
+            {#if selectedItem}
+              <div class="flex items-center gap-2 pl-1">
+                <Icon icon={selectedItem.icon} color="secondary" />
+                <span>{selectedItem.label}</span>
+              </div>
+            {:else}
+              <span class="text-tertiary pl-1">Select an option</span>
+            {/if}
+          {:else}
+            <span class="text-tertiary pl-1">Select an option</span>
+          {/if}
+        {/snippet}
+      </Select.Trigger>
       <Select.Portal>
         <Select.Content>
-          {#each customIconItems as item (item.value)}
+          {#each itemsWithIcons as item (item.value)}
             <Select.Item value={item.value} label={item.label}>
               {#snippet children()}
                 <div class="flex items-center gap-2">
-                  <Icon icon={item.iconName as any} class="h-4 w-4" />
+                  <Icon icon={item.icon} color="secondary" />
                   <span>{item.label}</span>
                 </div>
               {/snippet}
@@ -257,13 +332,13 @@
         </Select.Content>
       </Select.Portal>
     </Select.Root>
-    <div class="mt-2 rounded bg-neutral p-2 text-sm">
-      Selected Values: {selectedCustomItems.join(', ') || 'Nothing'}
+    <div class="mt-2 rounded bg-gray-100 p-2 text-sm">
+      Selected: {selectedValueWithIcons ?? 'Nothing'}
     </div>
   </div>
 </Story>
 
-<Story name="Long List with Scrolling (80vh max-height)" asChild>
+<Story name="Long List with Scrolling" asChild>
   <div class="p-4">
     <Select.Root bind:value={selectedCountry} items={countries} type="single">
       <Select.Trigger

package/dist/components/select/components/MultiSelectTrigger.svelte

@@ -3,6 +3,7 @@
   import Icon from '../../icons/Icon.svelte';
   import * as Select from '../index';
   import IconButton from '../../icon-button/IconButton.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   type ItemType = {
     value: string;
@@ -30,8 +31,10 @@
 </script>
 
 <Select.Trigger
-  class={'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75' +
-    (className || '')}
+  class={twMerge(
+    'flex h-fit min-h-10 w-full items-center justify-between rounded-lg border border-input bg-surface py-1 text-sm placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75',
+    className
+  )}
   {...restProps}
 >
   {#if selectedValues.length === 0}

package/dist/components/select/components/SelectContent.svelte

@@ -21,7 +21,7 @@
   {...restProps}
   {sideOffset}
   class={twMerge(
-    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] max-h-[80vh] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
+    'relative z-50 w-[var(--bits-select-anchor-width)] min-w-[8rem] max-h-[min(calc(var(--bits-select-content-available-height)-40px),800px)] overflow-hidden rounded-lg bg-surface text-primary shadow-menu',
     className
   )}
 >

package/dist/components/select/components/SelectGroupHeading.svelte

@@ -11,7 +11,7 @@
 
   let { class: className = '', children, ...restProps }: Props = $props();
 
-  const baseClasses = 'py-1.5 pl-2 pr-2 text-sm font-semibold text-muted-foreground';
+  const baseClasses = 'py-1.5 pl-2 pr-2 text-label font-medium text-tertiary';
 </script>
 
 <SelectPrimitive.GroupHeading {...restProps} class="{baseClasses} {className}">

package/dist/components/select/components/SelectItem.svelte

@@ -2,6 +2,7 @@
   import Check from 'phosphor-svelte/lib/Check';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { ItemProps, ItemSlotProps } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -14,14 +15,14 @@
   let { class: className = '', children, ...restProps }: Props = $props();
 
   const baseClasses = `
-        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-md p-3 text-sm outline-none
+        relative flex w-full h-auto min-h-10 gap-2 cursor-default select-none items-center justify-between rounded-md px-3 py-2 text-sm outline-none cursor-pointer
         focus:bg-neutral focus:text-accent-foreground
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
         data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
     `;
 </script>
 
-<SelectPrimitive.Item {...restProps} class={baseClasses + ' ' + className}>
+<SelectPrimitive.Item {...restProps} class={twMerge(baseClasses, className)}>
   {#snippet children(params: ItemSlotProps)}
     {#if children}
       {@render children(params)}

package/dist/components/select/components/SelectTrigger.svelte

@@ -2,6 +2,7 @@
   import CaretDown from 'phosphor-svelte/lib/CaretDown';
   import { Icon } from '../../icons/index.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import { twMerge } from 'tailwind-merge';
   import type { TriggerProps, IconSnippet } from '../types';
 
   import type { Snippet } from 'svelte';
@@ -12,6 +13,7 @@
     class?: string;
     placeholder?: string;
     displayValue?: string;
+    size?: 'sm' | 'md';
   }
 
   let {
@@ -20,25 +22,32 @@
     children,
     placeholder = 'Select an option',
     displayValue = undefined,
+    size = 'md',
     ...restProps
   }: Props = $props();
 
-  const baseClasses =
-    'flex h-10 w-full items-center justify-between !rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent focus:ring-0 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75 transition-colors shadow-input';
+  const sizeClasses = {
+    sm: 'h-8 p-1',
+    md: 'h-10 p-1.5',
+  };
+
+  const baseClasses = $derived(
+    `flex w-full items-center justify-between !rounded-lg border border-input bg-surface text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent focus:ring-0 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-neutral disabled:opacity-75 transition-colors shadow-input ${sizeClasses[size]}`
+  );
 </script>
 
 <SelectPrimitive.Trigger
   {...restProps}
-  class={baseClasses + ' ' + className}
+  class={twMerge(baseClasses, className)}
   aria-label={placeholder}
 >
   <div class="flex-1 truncate text-left">
     {#if children}
       {@render children()}
     {:else if displayValue !== undefined}
-      {displayValue}
+      <span class="pl-1">{displayValue}</span>
     {:else}
-      <span class="text-tertiary">{placeholder}</span>
+      <span class="text-tertiary pl-1">{placeholder}</span>
     {/if}
   </div>
   {#if TriggerIcon}

package/dist/components/select/components/SelectTrigger.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props extends TriggerProps {
     class?: string;
     placeholder?: string;
     displayValue?: string;
+    size?: 'sm' | 'md';
 }
 declare const SelectTrigger: import("svelte").Component<Props, {}, "">;
 type SelectTrigger = ReturnType<typeof SelectTrigger>;

package/dist/components/skeleton-loader/SkeletonLoader.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import Skeleton from './components/Skeleton.svelte';
   import SkeletonImage from './components/SkeletonImage.svelte';
+  import { twMerge } from 'tailwind-merge';
 
   interface Props {
     class?: string;
@@ -12,6 +13,10 @@
   let { class: className = '', dataTestId = '', children }: Props = $props();
 </script>
 
-<div role="status" class={`h-full w-full animate-pulse ${className}`} data-testid={dataTestId}>
+<div
+  role="status"
+  class={twMerge('h-full w-full animate-pulse', className)}
+  data-testid={dataTestId}
+>
   {@render children?.({ Skeleton, SkeletonImage })}
 </div>

package/dist/components/slider/Slider.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import CaretUpDown from 'phosphor-svelte/lib/CaretUpDown';
   import { Icon } from '../icons/index.js';
+  import { twMerge } from 'tailwind-merge';
 
   let className = '';
   export { className as class };
@@ -31,10 +32,12 @@
   }
 </script>
 
-<div class={`relative flex h-10 items-center ${className} ${disabled ? 'opacity-40' : ''}`}>
+<div
+  class={twMerge('relative flex h-10 items-center', disabled && 'opacity-40', className)}
+>
   <div class="track-overlay"></div>
   <div
-    class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
+    class={twMerge('pointer-events-none absolute h-2.5 rounded-full', bufferColorClass)}
     style="
       width: {calculatePosition(buffer - bufferMin)} + 1rem);
       left: {calculatePosition(bufferMin)}
@@ -42,7 +45,7 @@
   ></div>
   {#if showFilled}
     <div
-      class="absolute h-2.5 rounded-full {filledColorClass}"
+      class={twMerge('absolute h-2.5 rounded-full', filledColorClass)}
       style="width: {calculatePosition(value)} + 1rem);left: 0;"
     ></div>
   {/if}