@reshape-biotech/design-system 2.4.1 → 2.5.1

package/README.md

@@ -22,16 +22,19 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
+
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
+
    - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
 3. **DaisyUI**
+
    - Pre-configured DaisyUI setup
    - Custom theme extensions
    - Shared utility classes

package/dist/app.css

@@ -4,10 +4,10 @@
 
 @layer base {
   @font-face {
-    font-family: 'MD System Mono';
+    font-family: 'Geist Mono';
     font-style: normal;
     font-weight: 400;
-    src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+    src: url('/fonts/GeistMono-VariableFont_wght.ttf') format('ttf');
   }
   @font-face {
     font-family: 'af Another Sans';

package/dist/components/graphs/chart/Chart.svelte

@@ -210,7 +210,11 @@
   });
 </script>
 
-<div bind:this={container} style="width: {width}; height: {height};" class="chart-container">
+<div
+  bind:this={container}
+  style="width: {width}; height: {height};"
+  class="chart-container bg-surface"
+>
   {@render children?.()}
 </div>
 

package/dist/components/graphs/matrix/Matrix.svelte

@@ -93,7 +93,7 @@
   <div class="flex h-full flex-1 flex-row overflow-hidden">
     {#if yAxisName && !hideAxisNames}
       <!-- 26px is the height of the xAxisName -->
-      <div class="mr-2 flex h-[calc(100%-26px)] w-12 items-center self-end border-r">
+      <div class="mr-2 flex h-[calc(100%-26px)] w-10 items-center self-end border-r">
         <div class="-rotate-90 transform whitespace-nowrap text-sm font-normal text-secondary">
           {yAxisName}
         </div>
@@ -110,7 +110,7 @@
       </div>
 
       <div class="flex flex-1">
-        <div class="flex w-20 flex-col">
+        <div class="flex w-24 flex-col">
           {#each displayRowLabels as label}
             <div class="flex flex-1 items-center justify-end pr-2 text-sm text-secondary">
               {label}

package/dist/components/icons/AnalysisIcon.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Icon from './Icon.svelte';
-  import Well from './custom/Well.svelte';
-  import Halo from './custom/Halo.svelte';
+  import { Well, Halo } from './custom';
   import type { IconColor, SupportedAnalysisModelIcons } from '.';
 
   type Props = {

package/dist/components/icons/custom/Halo.svelte

@@ -2,14 +2,15 @@
   import type { IconColor } from '..';
   import { textColor } from '../../../tokens';
 
-  let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
 </script>
 
 <svg
   width={size}
   height={size}
   viewBox="0 0 16 16"
-  fill={textColor[color]}
+  fill={color === 'inherit' ? 'currentColor' : textColor[color]}
   xmlns="http://www.w3.org/2000/svg"
 >
   <path

package/dist/components/icons/custom/Halo.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconColor } from '..';
 type $$ComponentProps = {
     size?: string;
-    color?: IconColor;
+    color?: IconColor | 'inherit';
 };
 declare const Halo: import("svelte").Component<$$ComponentProps, {}, "">;
 type Halo = ReturnType<typeof Halo>;

package/dist/components/icons/custom/LightBottomHighIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M15.5 16V15C15.5 13.3431 14.1569 12 12.5 12C10.8431 12 9.5 13.3431 9.5 15V16"
+    stroke-width="1.5"
+  />
+  <path d="M4.25736 7.17142L8.5 11.4141" stroke-width="1.5" />
+  <path d="M20.7426 7.17142L16.5 11.4141" stroke-width="1.5" />
+  <path d="M1.5 15L7.5 15" stroke-width="1.5" />
+  <path d="M23.5 15L17.5 15" stroke-width="1.5" />
+  <path d="M12.5 3L12.5 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomHighIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomHighIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomHighIcon = ReturnType<typeof LightBottomHighIcon>;
+export default LightBottomHighIcon;

package/dist/components/icons/custom/LightBottomLowIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path d="M15 16V15C15 13.3431 13.6569 12 12 12C10.3431 12 9 13.3431 9 15V16" stroke-width="1.5" />
+  <path d="M6.58579 10L8 11.4142" stroke-width="1.5" />
+  <path d="M17.4142 10L16 11.4142" stroke-width="1.5" />
+  <path d="M5 15L7 15" stroke-width="1.5" />
+  <path d="M19 15L17 15" stroke-width="1.5" />
+  <path d="M12 8L12 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomLowIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomLowIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomLowIcon = ReturnType<typeof LightBottomLowIcon>;
+export default LightBottomLowIcon;

package/dist/components/icons/custom/LightBottomMediumIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M15.5 16V15C15.5 13.3431 14.1569 12 12.5 12C10.8431 12 9.5 13.3431 9.5 15V16"
+    stroke-width="1.5"
+  />
+  <path d="M5.67157 8.58564L8.5 11.4141" stroke-width="1.5" />
+  <path d="M19.3284 8.58564L16.5 11.4141" stroke-width="1.5" />
+  <path d="M3.5 15L7.5 15" stroke-width="1.5" />
+  <path d="M21.5 15L17.5 15" stroke-width="1.5" />
+  <path d="M12.5 6L12.5 10" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightBottomMediumIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightBottomMediumIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightBottomMediumIcon = ReturnType<typeof LightBottomMediumIcon>;
+export default LightBottomMediumIcon;

package/dist/components/icons/custom/LightTopHighIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M20.7426 16.8286L16.5 12.5859" stroke-width="1.5" />
+  <path d="M4.25736 16.8286L8.5 12.5859" stroke-width="1.5" />
+  <path d="M23.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M1.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 21L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopHighIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopHighIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopHighIcon = ReturnType<typeof LightTopHighIcon>;
+export default LightTopHighIcon;

package/dist/components/icons/custom/LightTopLowIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 25 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M17.9142 14.0002L16.5 12.5859" stroke-width="1.5" />
+  <path d="M7.08579 14.0002L8.5 12.5859" stroke-width="1.5" />
+  <path d="M19.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M5.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 16L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopLowIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopLowIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopLowIcon = ReturnType<typeof LightTopLowIcon>;
+export default LightTopLowIcon;

package/dist/components/icons/custom/LightTopMediumIcon.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { IconColor } from '..';
+  import { textColor } from '../../../tokens';
+
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
+</script>
+
+<svg
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke={color === 'inherit' ? 'currentColor' : textColor[color]}
+>
+  <path
+    d="M9.5 8L9.5 9C9.5 10.6569 10.8431 12 12.5 12C14.1569 12 15.5 10.6569 15.5 9L15.5 8"
+    stroke-width="1.5"
+  />
+  <path d="M19.3284 15.4144L16.5 12.5859" stroke-width="1.5" />
+  <path d="M5.67157 15.4144L8.5 12.5859" stroke-width="1.5" />
+  <path d="M21.5 9L17.5 9" stroke-width="1.5" />
+  <path d="M3.5 9L7.5 9" stroke-width="1.5" />
+  <path d="M12.5 18L12.5 14" stroke-width="1.5" />
+</svg>

package/dist/components/icons/custom/LightTopMediumIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconColor } from '..';
+type $$ComponentProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+};
+declare const LightTopMediumIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type LightTopMediumIcon = ReturnType<typeof LightTopMediumIcon>;
+export default LightTopMediumIcon;

package/dist/components/icons/custom/Well.svelte

@@ -2,14 +2,15 @@
   import type { IconColor } from '..';
   import { textColor } from '../../../tokens';
 
-  let { size = '16', color = 'icon-primary' }: { size?: string; color?: IconColor } = $props();
+  let { size = '16', color = 'inherit' }: { size?: string; color?: IconColor | 'inherit' } =
+    $props();
 </script>
 
 <svg
   width={size}
   height={size}
   viewBox="0 0 16 16"
-  fill={textColor[color]}
+  fill={color === 'inherit' ? 'currentColor' : textColor[color]}
   xmlns="http://www.w3.org/2000/svg"
 >
   <path

package/dist/components/icons/custom/Well.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconColor } from '..';
 type $$ComponentProps = {
     size?: string;
-    color?: IconColor;
+    color?: IconColor | 'inherit';
 };
 declare const Well: import("svelte").Component<$$ComponentProps, {}, "">;
 type Well = ReturnType<typeof Well>;

package/dist/components/icons/custom/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Halo } from './Halo.svelte';
+export { default as Well } from './Well.svelte';
+export { default as LightBottomHighIcon } from './LightBottomHighIcon.svelte';
+export { default as LightBottomLowIcon } from './LightBottomLowIcon.svelte';
+export { default as LightBottomMediumIcon } from './LightBottomMediumIcon.svelte';
+export { default as LightTopHighIcon } from './LightTopHighIcon.svelte';
+export { default as LightTopLowIcon } from './LightTopLowIcon.svelte';
+export { default as LightTopMediumIcon } from './LightTopMediumIcon.svelte';
+export type CustomIconName = 'Halo' | 'Well' | 'LightBottomHighIcon' | 'LightBottomLowIcon' | 'LightBottomMediumIcon' | 'LightTopHighIcon' | 'LightTopLowIcon' | 'LightTopMediumIcon';

package/dist/components/icons/custom/index.js

@@ -0,0 +1,8 @@
+export { default as Halo } from './Halo.svelte';
+export { default as Well } from './Well.svelte';
+export { default as LightBottomHighIcon } from './LightBottomHighIcon.svelte';
+export { default as LightBottomLowIcon } from './LightBottomLowIcon.svelte';
+export { default as LightBottomMediumIcon } from './LightBottomMediumIcon.svelte';
+export { default as LightTopHighIcon } from './LightTopHighIcon.svelte';
+export { default as LightTopLowIcon } from './LightTopLowIcon.svelte';
+export { default as LightTopMediumIcon } from './LightTopMediumIcon.svelte';

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

@@ -1,8 +1,11 @@
 import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor, backgroundColor } from './../../tokens';
+export * from './custom';
+import type { CustomIconName } from './custom';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
 export type IconName = 'Aperture' | 'Archive' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'CraneTower' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'EyeSlash' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type AllIconName = IconName | CustomIconName;
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
@@ -19,3 +22,8 @@ export type IconProps = {
     height?: number;
     class?: string;
 };
+export type CustomIconProps = {
+    size?: string;
+    color?: IconColor | 'inherit';
+    class?: string;
+};

package/dist/components/icons/index.js

@@ -113,12 +113,13 @@ import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
 import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
-import User from 'phosphor-svelte/lib/User';
 import Video from 'phosphor-svelte/lib/Video';
 import Warning from 'phosphor-svelte/lib/Warning';
 import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
 import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
+// Custom Icons
+export * from './custom';
 export const iconMap = {
     Aperture,
     Archive,

package/dist/components/legend/Legend.stories.svelte

@@ -0,0 +1,108 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as Legend from './index';
+  import { tokens } from '../../tokens';
+  import { Tooltip } from '../tooltip';
+  import Icon from '../icons/Icon.svelte';
+  import Tag from '../tag/Tag.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Design System/Legend',
+    tags: ['autodocs'],
+  });
+</script>
+
+{#snippet tooltip(
+  name: string,
+  description: string,
+  parameters: { name: string; gte?: number; lte?: number; eq?: string | number }[]
+)}
+  <div class="min-w-42 flex flex-col gap-3 p-3">
+    <div class="flex flex-row items-center gap-2">
+      <Icon iconName="Hash" class="text-secondary-inverse"></Icon>{name}
+    </div>
+    <div class="flex flex-col gap-1">
+      <p class="text-secondary-inverse">Description</p>
+      <p>{description}</p>
+    </div>
+    {#if parameters.length > 0}
+      <div class="flex flex-col gap-1">
+        <p class="text-secondary-inverse">Parameters</p>
+        <div class="flex flex-row flex-wrap gap-2">
+          {#each parameters as parameter}
+            <Tag variant="default-inverse">
+              <Icon iconName="CraneTower"></Icon>
+              <div class="flex grow flex-row gap-1">
+                {parameter.name}
+                {#if parameter.gte && parameter.lte}{parameter.gte} - {parameter.lte}{/if}
+                {#if parameter.gte && parameter.lte === undefined}{'≥'} {parameter.gte}{/if}
+                {#if parameter.lte && parameter.gte === undefined}{'≤'} {parameter.lte}{/if}
+                {#if parameter.eq}{'='} {parameter.eq}{/if}
+              </div>
+            </Tag>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<Story name="Root">
+  <Legend.Root>
+    <div
+      class="flex h-[200px] w-full bg-gradient-to-tr from-green-500 to-green-100 text-primary-inverse"
+    >
+      <code>I'm a child</code>
+    </div>
+
+    {#snippet items()}
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.red[5].default} name="Green large spots" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Green large spots',
+            'Counts yeast really really really super duper well!',
+            [
+              { name: 'Red', gte: 22, lte: 122 },
+              { name: 'Class Name', eq: 'yeast' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.blue[5].default} name="Red hueish spots" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Red hueish spots',
+            'Counts mold really really really super duper well!',
+            [
+              { name: 'Red', gte: 22, lte: 122 },
+              { name: 'Blue', gte: 42 },
+              { name: 'Class Name', eq: 'mold' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+      <Tooltip placement="bottom">
+        {#snippet trigger()}
+          <Legend.Item color={tokens.colors.green[5].default} name="Small halos" />
+        {/snippet}
+        {#snippet content()}
+          {@render tooltip(
+            'Small halos',
+            'Counts bacteria really really really super duper well!',
+            [
+              { name: 'Blue', gte: 42 },
+              { name: 'Green', lte: 142 },
+              { name: 'Class Name', eq: 'bacteria' },
+            ]
+          )}
+        {/snippet}
+      </Tooltip>
+    {/snippet}
+  </Legend.Root>
+</Story>

package/dist/components/{button/Button.test.svelte.d.ts → legend/Legend.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import Button from './Button.svelte';
+import * as Legend from './index';
 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> & {
         $$bindings?: Bindings;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Button: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Legend: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Button = InstanceType<typeof Button>;
-export default Button;
+type Legend = InstanceType<typeof Legend>;
+export default Legend;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    color: string;
+    selected?: boolean;
+    onclick?: ((name: string) => void) | undefined;
+  }
+
+  const { color, name, selected = $bindable(), onclick }: Props = $props();
+</script>
+
+<button
+  onclick={(e) => {
+    e.preventDefault();
+    onclick?.(name);
+  }}
+  class:bg-neutral={selected}
+  class="group flex flex-row items-center gap-2 rounded-lg px-2 py-1 hover:bg-neutral"
+>
+  <div class="flex h-2 w-2 flex-shrink-0 rounded-sm" style="background-color: {color}"></div>
+  <div
+    class="flex max-w-24 select-none truncate text-xs"
+    class:text-secondary={!selected}
+    class:text-primary={selected}
+  >
+    <div class="truncate">{name}</div>
+  </div>
+</button>

package/dist/components/legend/components/legend-item.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    name: string;
+    color: string;
+    selected?: boolean;
+    onclick?: ((name: string) => void) | undefined;
+}
+declare const LegendItem: import("svelte").Component<Props, {}, "selected">;
+type LegendItem = ReturnType<typeof LegendItem>;
+export default LegendItem;

package/dist/components/legend/components/legend-root.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    items?: Snippet;
+  }
+
+  let { children, items }: Props = $props();
+</script>
+
+<div class="inline-flex w-full flex-col items-center rounded-[10px] bg-neutral">
+  <div
+    class="flex w-full px-0.5 pt-0.5 [&>*]:rounded-lg [&>*]:border [&>*]:border-static [&>*]:p-1"
+  >
+    {@render children()}
+  </div>
+
+  <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 overflow-clip py-1">
+    {#if items}
+      {@render items()}
+    {/if}
+  </div>
+</div>

package/dist/components/legend/components/legend-root.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    items?: Snippet;
+}
+declare const LegendRoot: import("svelte").Component<Props, {}, "">;
+type LegendRoot = ReturnType<typeof LegendRoot>;
+export default LegendRoot;

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export { default as Root } from './components/legend-root.svelte';
+export { default as Item } from './components/legend-item.svelte';
+export interface LegendRootProps {
+    children: Snippet;
+    items?: Snippet;
+}
+export interface LegendItemProps {
+    color: string;
+    name: string;
+}

package/dist/components/legend/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/legend-root.svelte';
+export { default as Item } from './components/legend-item.svelte';