@reshape-biotech/design-system 0.0.23 → 0.0.25

package/dist/components/table/components/Td.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		dataTestId?: string;
+		children?: Snippet;
+	}
+
+	let { dataTestId = '', children }: Props = $props();
+</script>
+
+<td data-testid={dataTestId} class={`text-left text-sm font-normal`}>
+	{@render children?.()}
+</td>

package/dist/components/table/components/Td.svelte.d.ts

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

package/dist/components/table/components/Th.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Width } from '../../../tailwind';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: Width | '';
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<th class={`text-left text-xs font-normal text-secondary ${className}`}>
+	{@render children?.()}
+</th>

package/dist/components/table/components/Th.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Width } from '../../../tailwind';
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: Width | '';
+    children?: Snippet;
+}
+declare const Th: import("svelte").Component<Props, {}, "">;
+type Th = ReturnType<typeof Th>;
+export default Th;

package/dist/components/table/components/Tr.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		disabled?: boolean;
+		children?: Snippet;
+	}
+
+	let { disabled = false, children }: Props = $props();
+</script>
+
+<tr class="my-2 border-static [&.disabled]:text-tertiary" class:disabled>
+	{@render children?.()}
+</tr>
+
+<style>
+	:global(td) {
+    padding-top: 1rem;
+    padding-bottom: 1rem
+}
+:global(td):first-child {
+    padding-left: 0.5rem
+}
+	:global(th) {
+    padding-top: 1rem;
+    padding-bottom: 1rem
+}
+	:global(th):first-child {
+    padding-left: 0.5rem
+}
+</style>

package/dist/components/table/components/Tr.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/tabs/Tabs.stories.svelte

@@ -0,0 +1,30 @@
+<script module>
+	import Tabs from './Tabs.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Tabs,
+		title: 'Design System/Tabs',
+		tags: ['autodocs']
+	});
+
+	let activeTab = 'tab-1';
+</script>
+
+<Story name="Primary">
+	<Tabs>
+		{#snippet children({ C })}
+			<C.Tabs>
+				<C.Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</C.Tab>
+				<C.Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</C.Tab>
+				<C.Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</C.Tab>
+			</C.Tabs>
+
+			<C.Content show={activeTab === 'tab-1'}>Showing tab 1 content</C.Content>
+
+			<C.Content show={activeTab === 'tab-2'}>Showing tab 2 content</C.Content>
+
+			<C.Content show={activeTab === 'tab-3'}>Showing tab 3 content</C.Content>
+		{/snippet}
+	</Tabs>
+</Story>

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Content from './components/Content.svelte';
+	import Tab from './components/Tab.svelte';
+	import Tabs from './components/Tabs.svelte';
+	interface Props {
+		children?: Snippet<[any]>;
+	}
+
+	let { children }: Props = $props();
+
+	const C = { Tabs, Tab, Content };
+</script>
+
+{@render children?.({ C })}

package/dist/components/tabs/Tabs.svelte.d.ts

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

package/dist/components/tabs/components/Content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		show?: boolean;
+		children?: Snippet;
+	}
+
+	let { class: className = '', show = false, children }: Props = $props();
+</script>
+
+<div class:hidden={!show} class={className}>
+	{@render children?.()}
+</div>

package/dist/components/tabs/components/Content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    show?: boolean;
+    children?: Snippet;
+}
+declare const Content: import("svelte").Component<Props, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/tabs/components/Tab.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Button from '../../button/';
+	import type { Snippet } from 'svelte';
+	interface Props {
+		active?: boolean;
+		onClick: () => void;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { active = false, onClick, class: className = '', children }: Props = $props();
+</script>
+
+<Button
+	{onClick}
+	variant="transparent"
+	size="md"
+	class={`tab flex !h-10 gap-2 !rounded-md !px-0 !py-0 ${active ? 'tab-active' : ''} ${className}`}
+>
+	{@render children?.()}
+</Button>

package/dist/components/tabs/components/Tab.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    active?: boolean;
+    onClick: () => void;
+    class?: string;
+    children?: Snippet;
+}
+declare const Tab: import("svelte").Component<Props, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/components/tabs/components/Tabs.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div role="tablist" class={`tabs-boxed tabs h-[48px] gap-1 rounded-lg ${className}`}>
+	{@render children?.()}
+</div>

package/dist/components/tabs/components/Tabs.svelte.d.ts

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

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

@@ -0,0 +1 @@
+export { default } from './Tabs.svelte';

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { default } from './Tabs.svelte';

package/dist/components/tag/Tag.stories.svelte

@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { Folder } from 'phosphor-svelte';
+	import Tag from './Tag.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Tag,
+		title: 'Design System/Tag',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default">
+	<div class="w-fit">
+		<Tag>Default</Tag>
+	</div>
+</Story>
+<Story name="Default small">
+	<div class="w-fit">
+		<Tag variant="default" size="sm">Default</Tag>
+	</div>
+</Story>
+<Story name="Default onclick">
+	<div class="w-fit">
+		<Tag onclick={() => {}}>Default</Tag>
+	</div>
+</Story>
+<Story name="Default icon onclick">
+	<div class="w-fit">
+		<Tag onclick={() => {}}>
+			<Folder />
+			Default
+		</Tag>
+	</div>
+</Story>
+
+<Story name="Transparent">
+	<div class="w-fit">
+		<Tag variant="transparent">Transparent</Tag>
+	</div>
+</Story>
+<Story name="Transparent small">
+	<div class="w-fit">
+		<Tag variant="transparent" size="sm">Transparent</Tag>
+	</div>
+</Story>
+<Story name="Transparent onclick">
+	<div class="w-fit">
+		<Tag variant="transparent" onclick={() => {}}>Transparent</Tag>
+	</div>
+</Story>

package/dist/components/tag/Tag.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Tooltip from '../tooltip/';
+
+	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/tag/index.d.ts

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

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/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

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

@@ -0,0 +1 @@
+export { default } from './Tooltip.svelte';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default } from './Tooltip.svelte';

package/dist/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const fonts: {
+    MDSystemMonoRegular: string;
+    MDSystemRegular: string;
+    MDSystemMedium: string;
+    MDSystemSemibold: string;
+};

package/dist/fonts/index.js

@@ -0,0 +1,10 @@
+import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
+import MDSystemRegular from './MDSystem-Regular.woff2';
+import MDSystemMedium from './MDSystem-Medium.woff2';
+import MDSystemSemibold from './MDSystem-Semibold.woff2';
+export const fonts = {
+    MDSystemMonoRegular,
+    MDSystemRegular,
+    MDSystemMedium,
+    MDSystemSemibold
+};

package/dist/index.d.ts

@@ -1,4 +1,30 @@
-export { default as Avatar } from './components/avatar/Avatar.svelte';
-export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
-export { tokens } from './tokens.js';
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/markdown/';
+export * from './components/modal/';
+export * from './components/notification-popup/';
+export * from './components/pill/';
+export * from './components/progress-circle/';
+export * from './components/segmented-control-buttons/';
+export * from './components/select/';
+export * from './components/skeleton-loader/';
+export * from './components/slider/';
+export * from './components/spinner/';
+export * from './components/stat-card/';
+export * from './components/status-badge/';
+export * from './components/table/';
+export * from './components/tabs/';
+export * from './components/tag/';
+export * from './components/tooltip/';
+export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -1,5 +1,32 @@
-// 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';
+// Components
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/markdown/';
+export * from './components/modal/';
+export * from './components/notification-popup/';
+export * from './components/pill/';
+export * from './components/progress-circle/';
+export * from './components/segmented-control-buttons/';
+export * from './components/select/';
+export * from './components/skeleton-loader/';
+export * from './components/slider/';
+export * from './components/spinner/';
+export * from './components/stat-card/';
+export * from './components/status-badge/';
+export * from './components/table/';
+export * from './components/tabs/';
+export * from './components/tag/';
+export * from './components/tooltip/';
+// Styles and Tokens
+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;
                     };