@reshape-biotech/design-system 0.0.22 → 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-safelist.d.ts

@@ -0,0 +1,14 @@
+export const textColors: string[];
+export const iconColors: string[];
+export const backgroundColors: string[];
+export const borders: string[];
+export const shadows: string[];
+export const textSizes: string[];
+export const fonts: string[];
+export const badges: string[];
+export const tooltips: string[];
+export const sizes: string[];
+export const display: string[];
+export const rounded: string[];
+export const tables: string[];
+export const safelist: string[];

package/dist/tailwind-safelist.js

@@ -0,0 +1,148 @@
+// Used to safelist classnames so we can add styles dynamic.
+// This should include all the values used in the design system.
+// Read more here: https://daisyui.com/blog/most-common-mistake-when-using-tailwind-css/
+
+export const textColors = [
+	'text-primary',
+	'text-primary-inverse',
+	'text-secondary',
+	'text-secondary-inverse',
+	'text-tertiary',
+	'text-tertiary-inverse',
+	'text-accent',
+	'text-success',
+	'text-warning',
+	'text-danger'
+];
+
+export const iconColors = [
+	'text-icon-primary',
+	'text-icon-primary-inverse',
+	'text-icon-secondary',
+	'text-icon-tertiary',
+	'text-icon-accent',
+	'text-icon-success',
+	'text-icon-warning',
+	'text-icon-danger',
+	'text-icon-blue',
+	'text-icon-orange',
+	'text-icon-sky'
+];
+
+export const backgroundColors = [
+	'bg-surface',
+	'bg-surface-secondary',
+	'bg-base',
+	'bg-base-inverse',
+	'bg-neutral',
+	'bg-neutral-hover',
+	'bg-neutral-darker',
+	'bg-neutral-darker-hover',
+	'bg-neutral-inverse',
+	'bg-neutral-inverse-hover',
+	'bg-accent',
+	'bg-accent-hover',
+	'bg-accent-inverse',
+	'bg-accent-inverse-hover',
+	'bg-success',
+	'bg-success-hover',
+	'bg-success-inverse',
+	'bg-success-inverse-hover',
+	'bg-warning',
+	'bg-warning-hover',
+	'bg-warning-inverse',
+	'bg-warning-inverse-hover',
+	'bg-danger',
+	'bg-danger-hover',
+	'bg-danger-inverse',
+	'bg-danger-inverse-hover',
+	'bg-blue',
+	'bg-blue-hover',
+	'bg-orange',
+	'bg-orange-hover',
+	'bg-orange-inverse',
+	'bg-orange-inverse-hover',
+	'bg-sky',
+	'bg-sky-hover',
+	'bg-sky-inverse',
+	'bg-sky-inverse-hover'
+];
+
+export const borders = [
+	'border-static',
+	'border-interactive',
+	'border-hover',
+	'border-focus',
+	'border-danger'
+];
+
+export const shadows = [
+	'shadow',
+	'shadow-none',
+	'shadow-field',
+	'shadow-nav',
+	'shadow-calendar',
+	'shadow-container',
+	'shadow-panel',
+	'shadow-outline',
+	'shadow-focus'
+];
+
+export const textSizes = [
+	'text-xxs',
+	'text-xs',
+	'text-sm',
+	'text-md',
+	'text-lg',
+	'text-xl',
+	'text-2xl',
+	'text-3xl',
+	'text-4xl'
+];
+
+export const fonts = ['font-medium', 'font-semibold', 'font-bold'];
+
+export const badges = [
+	'badge-neutral',
+	'badge-success',
+	'badge-warning',
+	'badge-progress',
+	'badge-error',
+	'badge-md',
+	'badge-sm'
+];
+
+export const tooltips = ['tooltip-top', 'tooltip-right', 'tooltip-bottom', 'tooltip-left'];
+
+export const sizes = ['h-5', 'w-5', 'min-w-5', 'h-7', 'w-7', 'min-w-7'];
+
+export const display = [
+	'flex',
+	'items-center',
+	'justify-center',
+	'flex-row',
+	'flex-col',
+	'px-2',
+	'py-1'
+];
+
+export const rounded = ['rounded-full', 'rounded'];
+
+export const tables = ['table-fixed', 'table-auto'];
+
+// Export all arrays as a single safelist
+export const safelist = [
+	...textColors,
+	...iconColors,
+	...backgroundColors,
+	...borders,
+	...shadows,
+	...textSizes,
+	...fonts,
+	...badges,
+	...tooltips,
+	...sizes,
+	...display,
+	...rounded,
+	...tables
+];

package/dist/tailwind.preset.d.ts

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