@reshape-biotech/design-system 0.0.23 → 0.0.24

package/dist/components/tag/Tag.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
+
+	interface Props {
+		children: Snippet;
+		variant?: 'default' | 'outline' | 'transparent';
+		size?: 'sm' | 'md';
+		tooltip?: string;
+		onclick?: (event: MouseEvent) => void;
+		class?: string;
+	}
+
+	let {
+		children,
+		variant = 'default',
+		size = 'md',
+		tooltip,
+		onclick,
+		class: className
+	}: Props = $props();
+
+	const sizes = {
+		sm: 'h-6  text-xs',
+		md: 'h-6  text-sm'
+	};
+	let sizeClassName = $derived(sizes[size]);
+
+	const variants = {
+		default: 'bg-neutral text-primary',
+		outline: 'bg-transparent text-secondary border',
+		transparent: 'bg-transparent text-secondary'
+	};
+
+	const buttonClassVariants = {
+		default: 'hover:bg-neutral-hover',
+		outline: 'hover:bg-neutral hover:text-primary',
+		transparent: 'hover:bg-neutral hover:text-primary'
+	};
+
+	let variantClassName = $derived(variants[variant]);
+	let buttonClassVariant = $derived(buttonClassVariants[variant]);
+</script>
+
+{#snippet renderTag()}
+	{#if onclick}
+		<button
+			class="outer {variantClassName} {sizeClassName} {buttonClassVariant} hover:cursor-pointer {className} "
+			title={tooltip}
+			{onclick}
+		>
+			{@render children()}
+		</button>
+	{:else}
+		<div class="outer {variantClassName} {sizeClassName}  no-underline {className}" title={tooltip}>
+			{@render children()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if tooltip}
+	<Tooltip>
+		{#snippet trigger()}
+			{@render renderTag()}
+		{/snippet}
+		{#snippet content()}
+			{tooltip}
+		{/snippet}
+	</Tooltip>
+{:else}
+	{@render renderTag()}
+{/if}
+
+<style>
+	.outer {
+
+    display: flex;
+
+    align-items: center;
+
+    gap: 0.5rem;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    border-radius: 0.25rem;
+
+    padding: 0.25rem
+}
+
+	svg {
+
+    height: 1rem;
+
+    width: 1rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/tag/Tag.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+declare const Tag: import("svelte").Component<{
+    children: Snippet;
+    variant?: "default" | "outline" | "transparent";
+    size?: "sm" | "md";
+    tooltip?: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+}, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/toast/Toast.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { flip } from 'svelte/animate';
+	import { fly } from 'svelte/transition';
+	import { notifications } from '../../notifications';
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} [themes]
+	 */
+
+	/** @type {Props} */
+	let {
+		themes = {
+			danger: '#E26D69',
+			success: '#84C991',
+			warning: '#f0ad4e',
+			info: '#5bc0de',
+			default: '#aaaaaa'
+		}
+	} = $props();
+</script>
+
+<div class="notifications">
+	{#each $notifications as notification (notification.id)}
+		<div
+			animate:flip
+			class="toast-custom"
+			style="background: {themes[notification.type]};"
+			transition:fly={{ y: 30 }}
+		>
+			<div class="content">{notification.message}</div>
+			{#if notification.icon}<i class={notification.icon}></i>{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.notifications {
+		position: fixed;
+		top: 10px;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		padding: 0;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		pointer-events: none;
+	}
+
+	.toast-custom {
+		flex: 0 0 auto;
+		padding: 0 16px;
+		margin-bottom: 10px;
+		border-radius: 100px;
+	}
+
+	.content {
+		padding: 10px;
+		display: block;
+		color: white;
+		font-weight: 500;
+	}
+</style>

package/dist/components/toast/Toast.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Toast: import("svelte").Component<{
+    themes?: Record<string, any>;
+}, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Avatar } from './components/avatar/Avatar.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
-export { tokens } from './tokens.js';
+export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -1,5 +1,5 @@
 // Reexport your entry components here
 export { default as Avatar } from './components/avatar/Avatar.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
-export { tokens } from './tokens.js';
+export { tokens } from './tokens';
 import './app.css';

package/dist/tailwind.preset.d.ts

@@ -115,6 +115,7 @@ declare const config: {
                     };
                     5: {
                         default: string;
+                        5: string;
                         10: string;
                         25: string;
                     };

package/dist/tokens.d.ts

@@ -1,8 +1,8 @@
-export namespace colors {
-    namespace base {
-        let mist: string;
-        let snow: string;
-        let white: {
+export declare const colors: {
+    base: {
+        mist: string;
+        snow: string;
+        white: {
             default: string;
             5: string;
             10: string;
@@ -12,7 +12,7 @@ export namespace colors {
             70: string;
             90: string;
         };
-        let midnight: {
+        midnight: {
             default: string;
             5: string;
             10: string;
@@ -22,8 +22,8 @@ export namespace colors {
             70: string;
             90: string;
         };
-    }
-    let gray: {
+    };
+    gray: {
         1: string;
         2: string;
         3: string;
@@ -31,7 +31,7 @@ export namespace colors {
         5: string;
         6: string;
     };
-    let periwinkle: {
+    periwinkle: {
         1: string;
         2: string;
         3: {
@@ -51,7 +51,7 @@ export namespace colors {
         };
         6: string;
     };
-    let orange: {
+    orange: {
         1: string;
         2: string;
         3: string;
@@ -67,7 +67,7 @@ export namespace colors {
         };
         6: string;
     };
-    let sky: {
+    sky: {
         1: string;
         2: string;
         3: string;
@@ -83,7 +83,7 @@ export namespace colors {
         };
         6: string;
     };
-    let blue: {
+    blue: {
         1: string;
         2: string;
         3: string;
@@ -99,7 +99,7 @@ export namespace colors {
         };
         6: string;
     };
-    let green: {
+    green: {
         1: string;
         2: string;
         3: string;
@@ -110,12 +110,13 @@ export namespace colors {
         };
         5: {
             default: string;
+            5: string;
             10: string;
             25: string;
         };
         6: string;
     };
-    let yellow: {
+    yellow: {
         1: string;
         2: string;
         3: string;
@@ -131,7 +132,7 @@ export namespace colors {
         };
         6: string;
     };
-    let red: {
+    red: {
         1: string;
         2: string;
         3: string;
@@ -147,15 +148,15 @@ export namespace colors {
         };
         6: string;
     };
-    let shadow: {
+    shadow: {
         2: string;
         4: string;
         8: string;
         12: string;
         16: string;
     };
-}
-export const borderColor: {
+};
+export declare const borderColor: {
     'dark-static': string;
     'dark-interactive': string;
     'dark-hover': string;
@@ -167,7 +168,7 @@ export const borderColor: {
     focus: string;
     danger: string;
 };
-export const textColor: {
+export declare const textColor: {
     'icon-primary': string;
     'icon-secondary': string;
     'icon-tertiary': string;
@@ -200,7 +201,7 @@ export const textColor: {
     warning: string;
     danger: string;
 };
-export const backgroundColor: {
+export declare const backgroundColor: {
     'dark-neutral': string;
     'dark-neutral-hover': string;
     'dark-neutral-darker': string;
@@ -270,19 +271,296 @@ export const backgroundColor: {
     'sky-inverse': string;
     'sky-inverse-hover': string;
 };
-export namespace boxShadow {
-    let field: string;
-    let nav: string;
-    let calendar: string;
-    let container: string;
-    let panel: string;
-    let outline: string;
-    let focus: string;
-}
-export namespace tokens {
-    export { colors };
-    export { borderColor };
-    export { textColor };
-    export { backgroundColor };
-    export { boxShadow };
-}
+export declare const boxShadow: {
+    field: string;
+    nav: string;
+    calendar: string;
+    container: string;
+    panel: string;
+    outline: string;
+    focus: string;
+};
+export declare const tokens: {
+    colors: {
+        base: {
+            mist: string;
+            snow: string;
+            white: {
+                default: string;
+                5: string;
+                10: string;
+                15: string;
+                25: string;
+                50: string;
+                70: string;
+                90: string;
+            };
+            midnight: {
+                default: string;
+                5: string;
+                10: string;
+                15: string;
+                25: string;
+                50: string;
+                70: string;
+                90: string;
+            };
+        };
+        gray: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+        };
+        periwinkle: {
+            1: string;
+            2: string;
+            3: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        orange: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        sky: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        blue: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        green: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                5: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        yellow: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        red: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        shadow: {
+            2: string;
+            4: string;
+            8: string;
+            12: string;
+            16: string;
+        };
+    };
+    borderColor: {
+        'dark-static': string;
+        'dark-interactive': string;
+        'dark-hover': string;
+        'dark-focus': string;
+        'dark-danger': string;
+        static: string;
+        interactive: string;
+        hover: string;
+        focus: string;
+        danger: string;
+    };
+    textColor: {
+        'icon-primary': string;
+        'icon-secondary': string;
+        'icon-tertiary': string;
+        'icon-primary-inverse': string;
+        'icon-accent': string;
+        'icon-success': string;
+        'icon-warning': string;
+        'icon-danger': string;
+        'icon-blue': string;
+        'icon-orange': string;
+        'icon-sky': string;
+        'dark-primary': string;
+        'dark-secondary': string;
+        'dark-tertiary': string;
+        'dark-primary-inverse': string;
+        'dark-secondary-inverse': string;
+        'dark-tertiary-inverse': string;
+        'dark-accent': string;
+        'dark-success': string;
+        'dark-warning': string;
+        'dark-danger': string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        'primary-inverse': string;
+        'secondary-inverse': string;
+        'tertiary-inverse': string;
+        accent: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    backgroundColor: {
+        'dark-neutral': string;
+        'dark-neutral-hover': string;
+        'dark-neutral-darker': string;
+        'dark-neutral-darker-hover': string;
+        'dark-accent': string;
+        'dark-accent-hover': string;
+        'dark-accent-inverse': string;
+        'dark-accent-inverse-hover': string;
+        'dark-success': string;
+        'dark-success-hover': string;
+        'dark-success-inverse': string;
+        'dark-success-inverse-hover': string;
+        'dark-warning': string;
+        'dark-warning-hover': string;
+        'dark-warning-inverse': string;
+        'dark-warning-inverse-hover': string;
+        'dark-danger': string;
+        'dark-danger-hover': string;
+        'dark-danger-inverse': string;
+        'dark-danger-inverse-hover': string;
+        'dark-blue': string;
+        'dark-blue-hover': string;
+        'dark-orange': string;
+        'dark-orange-hover': string;
+        'dark-sky': string;
+        'dark-sky-hover': string;
+        'dark-primary': string;
+        'dark-secondary': string;
+        'dark-base': string;
+        'dark-base-inverse': string;
+        'dark-overlay': string;
+        surface: string;
+        'surface-secondary': string;
+        base: string;
+        'base-inverse': string;
+        overlay: string;
+        neutral: string;
+        'neutral-hover': string;
+        'neutral-darker': string;
+        'neutral-darker-hover': string;
+        'neutral-inverse': string;
+        'neutral-inverse-hover': string;
+        accent: string;
+        'accent-hover': string;
+        'accent-inverse': string;
+        'accent-inverse-hover': string;
+        success: string;
+        'success-hover': string;
+        'success-inverse': string;
+        'success-inverse-hover': string;
+        warning: string;
+        'warning-hover': string;
+        'warning-inverse': string;
+        'warning-inverse-hover': string;
+        danger: string;
+        'danger-hover': string;
+        'danger-inverse': string;
+        'danger-inverse-hover': string;
+        blue: string;
+        'blue-hover': string;
+        orange: string;
+        'orange-hover': string;
+        'orange-inverse': string;
+        'orange-inverse-hover': string;
+        sky: string;
+        'sky-hover': string;
+        'sky-inverse': string;
+        'sky-inverse-hover': string;
+    };
+    boxShadow: {
+        field: string;
+        nav: string;
+        calendar: string;
+        container: string;
+        panel: string;
+        outline: string;
+        focus: string;
+    };
+};