@reshape-biotech/design-system 2.6.5 → 2.7.0

package/dist/components/toast/Toast.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
   import { type Notification, notifications } from '../../notifications';
-  import Icon from '../icons/Icon.svelte';
-  import { type IconColor } from '../icons';
   import { tokens } from '../../tokens';
   import IconButton from '../icon-button/IconButton.svelte';
+  import Icon from '../icons/Icon.svelte';
+  import type { IconColor } from '../icons';
+  import X from 'phosphor-svelte/lib/X';
+
+  // Default notification icons for each type
+  import Info from 'phosphor-svelte/lib/Info';
+  import CheckCircle from 'phosphor-svelte/lib/CheckCircle';
+  import Warning from 'phosphor-svelte/lib/Warning';
+  import XCircle from 'phosphor-svelte/lib/XCircle';
+  import Bell from 'phosphor-svelte/lib/Bell';
 
   let { notification }: { notification: Notification } = $props();
 
@@ -22,6 +30,18 @@
     info: 'primary-inverse',
     default: 'inherit',
   };
+
+  // Default icons for each notification type
+  const typeIcons: Record<string, any> = {
+    info: Info,
+    success: CheckCircle,
+    warning: Warning,
+    danger: XCircle,
+    default: Bell,
+  };
+
+  // Get the icon component based on notification type
+  let iconComponent = $derived(typeIcons[notification.type] || Bell);
 </script>
 
 <div
@@ -30,11 +50,11 @@
   class:border={notification.type === 'default'}
   class:border-base-200={notification.type === 'default'}
 >
-  {#if notification.icon}
+  {#if iconComponent}
     <Icon
       color={textColor[notification.type]}
-      size={'14'}
-      iconName={notification.icon}
+      size={14}
+      icon={iconComponent}
       class="flex h-6 w-6 items-center justify-center rounded-md {notification.type !== 'default'
         ? 'bg-neutral-inverse-hover'
         : 'bg-neutral'} p-1 {textColor[notification.type]}"
@@ -53,7 +73,7 @@
       <IconButton rounded={false} size="xs" onclick={() => notifications.dismiss(notification.id)}>
         <Icon
           color={textColor[notification.type]}
-          iconName={'X'}
+          icon={X}
           class="rounded-md {textColor[notification.type]}"
         />
       </IconButton>

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -1,7 +1,8 @@
 <script module lang="ts">
+  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
+  import { Icon } from 'design-system';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import ToggleIconButton from './ToggleIconButton.svelte';
-  import { Icon } from '../icons';
 
   const { Story } = defineMeta({
     component: ToggleIconButton,
@@ -16,13 +17,21 @@
       <div class="flex flex-col items-center gap-2">
         <p class="text-sm">Normal</p>
         <ToggleIconButton variant="primary-inverse">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
       <div class="flex flex-col items-center gap-2">
         <p class="text-sm">Active</p>
         <ToggleIconButton variant="primary-inverse" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -36,10 +45,18 @@
         <p class="text-sm">Primary Inverse</p>
         <div class="flex gap-4">
           <ToggleIconButton variant="primary-inverse">
-            <Icon iconName="DownloadSimple" />
+            <Icon>
+              {#snippet children(props)}
+                <DownloadSimple {...props} />
+              {/snippet}
+            </Icon>
           </ToggleIconButton>
           <ToggleIconButton variant="primary-inverse" isActive={true}>
-            <Icon iconName="DownloadSimple" />
+            <Icon>
+              {#snippet children(props)}
+                <DownloadSimple {...props} />
+              {/snippet}
+            </Icon>
           </ToggleIconButton>
         </div>
       </div>
@@ -49,10 +66,18 @@
         <p class="text-sm">Secondary</p>
         <div class="flex gap-4">
           <ToggleIconButton variant="secondary">
-            <Icon iconName="DownloadSimple" />
+            <Icon>
+              {#snippet children(props)}
+                <DownloadSimple {...props} />
+              {/snippet}
+            </Icon>
           </ToggleIconButton>
           <ToggleIconButton variant="secondary" isActive={true}>
-            <Icon iconName="DownloadSimple" />
+            <Icon>
+              {#snippet children(props)}
+                <DownloadSimple {...props} />
+              {/snippet}
+            </Icon>
           </ToggleIconButton>
         </div>
       </div>
@@ -66,10 +91,18 @@
       <p class="text-sm">XS</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" size="xs">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -77,10 +110,18 @@
       <p class="text-sm">SM</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" size="sm">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -88,10 +129,18 @@
       <p class="text-sm">MD</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" size="md">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -99,10 +148,18 @@
       <p class="text-sm">LG</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" size="lg">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -115,10 +172,18 @@
       <p class="text-sm">Rounded</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" rounded>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" rounded isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -126,10 +191,18 @@
       <p class="text-sm">Square</p>
       <div class="flex gap-4">
         <ToggleIconButton variant="primary-inverse" rounded={false}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
         <ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -142,13 +215,21 @@
       <div class="flex flex-col items-center gap-2">
         <p class="text-neutral-light text-sm">Normal</p>
         <ToggleIconButton variant="primary-inverse">
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
       <div class="flex flex-col items-center gap-2">
         <p class="text-neutral-light text-sm">Active</p>
         <ToggleIconButton variant="primary-inverse" isActive={true}>
-          <Icon iconName="DownloadSimple" />
+          <Icon>
+            {#snippet children(props)}
+              <DownloadSimple {...props} />
+            {/snippet}
+          </Icon>
         </ToggleIconButton>
       </div>
     </div>
@@ -160,13 +241,21 @@
     <div class="flex flex-col items-center gap-2">
       <p class="text-sm">Disabled</p>
       <ToggleIconButton disabled>
-        <Icon iconName="DownloadSimple" />
+        <Icon>
+          {#snippet children(props)}
+            <DownloadSimple {...props} />
+          {/snippet}
+        </Icon>
       </ToggleIconButton>
     </div>
     <div class="flex flex-col items-center gap-2">
       <p class="text-sm">Loading</p>
       <ToggleIconButton loading>
-        <Icon iconName="DownloadSimple" />
+        <Icon>
+          {#snippet children(props)}
+            <DownloadSimple {...props} />
+          {/snippet}
+        </Icon>
       </ToggleIconButton>
     </div>
   </div>

package/dist/echarts-config.d.ts

@@ -0,0 +1,5 @@
+import * as echarts from 'echarts/core';
+export default echarts;
+export type { ECharts, EChartsOption, SeriesOption, LineSeriesOption, BarSeriesOption, ECElementEvent, } from 'echarts';
+export type { CallbackDataParams, YAXisOption } from 'echarts/types/dist/shared';
+export declare const init: typeof echarts.init;

package/dist/echarts-config.js

@@ -0,0 +1,33 @@
+// Centralized ECharts modular import configuration
+// This file imports only the ECharts components we actually use to reduce bundle size
+// Core components (required)
+import * as echarts from 'echarts/core';
+// Charts we use
+import { LineChart } from 'echarts/charts';
+import { BarChart } from 'echarts/charts';
+import { ScatterChart } from 'echarts/charts';
+import { CustomChart } from 'echarts/charts';
+// Components we use
+import { TooltipComponent, GridComponent, LegendComponent, MarkLineComponent, } from 'echarts/components';
+// Renderers (we primarily use SVG)
+import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
+// Register only the components we actually use
+echarts.use([
+    // Charts
+    LineChart,
+    BarChart,
+    ScatterChart,
+    CustomChart,
+    // Components
+    TooltipComponent,
+    GridComponent,
+    LegendComponent,
+    MarkLineComponent,
+    // Renderers (both needed - SVG is default, Canvas for large datasets)
+    SVGRenderer,
+    CanvasRenderer,
+]);
+// Export the configured echarts
+export default echarts;
+// Export the init function for convenience
+export const init = echarts.init;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';
+export * from './components/icons/custom/';
 export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';
@@ -49,3 +50,5 @@ export { notifications } from './notifications';
 export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
 export * as TokensColors from './tokens/colors';
 export * as TokensTypography from './tokens/typography';
+export { default as echarts, init } from './echarts-config';
+export type { ECharts, EChartsOption, SeriesOption, LineSeriesOption, BarSeriesOption, ECElementEvent, CallbackDataParams, YAXisOption, } from './echarts-config';

package/dist/index.js

@@ -13,6 +13,7 @@ export * as Drawer from './components/drawer/';
 export * from './components/dropdown/';
 export * from './components/empty-content/';
 export * from './components/icons/';
+export * from './components/icons/custom/';
 export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';
@@ -52,3 +53,5 @@ export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColo
 // Export tokens modules for granular imports
 export * as TokensColors from './tokens/colors';
 export * as TokensTypography from './tokens/typography';
+// Export echarts configuration
+export { default as echarts, init } from './echarts-config';

package/dist/notifications.d.ts

@@ -1,19 +1,18 @@
-import type { IconName } from './../lib/components/icons/index.ts';
 export type NotificationType = 'info' | 'success' | 'warning' | 'danger' | 'default';
 export interface Notification {
     id: string;
     type: NotificationType;
     message: string;
     timeout?: number;
-    icon?: IconName;
+    icon?: string;
     dismissable: boolean;
 }
 export declare const notifications: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     dismiss: (id: string) => void;
-    default: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
-    danger: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
-    warning: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
-    info: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
-    success: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
+    default: (message: string, icon?: string, dismissable?: boolean, timeout?: number) => void;
+    danger: (message: string, icon?: string, dismissable?: boolean, timeout?: number) => void;
+    warning: (message: string, icon?: string, dismissable?: boolean, timeout?: number) => void;
+    info: (message: string, icon?: string, dismissable?: boolean, timeout?: number) => void;
+    success: (message: string, icon?: string, dismissable?: boolean, timeout?: number) => void;
 };

package/dist/notifications.js

@@ -2,7 +2,8 @@ import { writable } from 'svelte/store';
 const TIMEOUT = 3000;
 const createNotificationStore = () => {
     const { subscribe, update } = writable([]);
-    const send = (message, type = 'default', iconName, dismissable = false, timeout = 3000) => {
+    const send = (message, type = 'default', iconName, // @deprecated - parameter kept for backward compatibility
+    dismissable = false, timeout = 3000) => {
         const notification = { id: id(), type, message, timeout, icon: iconName, dismissable };
         update((state) => [...state, notification]);
         setTimeout(() => {

package/package.json

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