@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/components/table/Table.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Td from './components/Td.svelte';
+	import Th from './components/Th.svelte';
+	import Tr from './components/Tr.svelte';
+	import THead from './components/THead.svelte';
+	import TBody from './components/TBody.svelte';
+
+	interface Props {
+		tableLayout?: 'fixed' | 'auto';
+		children?: Snippet<
+			[
+				{
+					THead: typeof THead;
+					TBody: typeof TBody;
+					Tr: typeof Tr;
+					Th: typeof Th;
+					Td: typeof Td;
+				}
+			]
+		>;
+	}
+
+	let { tableLayout = 'fixed', children }: Props = $props();
+	const C = {
+		THead: THead,
+		TBody: TBody,
+		Tr: Tr,
+		Th: Th,
+		Td: Td
+	};
+</script>
+
+<div class="w-full rounded-lg border border-static bg-surface px-5 py-2 shadow-container">
+	<table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
+		{@render children?.({ THead: THead, TBody: TBody, Tr: Tr, Th: Th, Td: Td })}
+	</table>
+</div>
+
+<style>
+	:global(tr) {
+    border-bottom-width: 1px
+}
+:global(tr):last-child {
+    border-bottom-width: 0px
+}
+</style>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import Td from './components/Td.svelte';
+import Th from './components/Th.svelte';
+import Tr from './components/Tr.svelte';
+import THead from './components/THead.svelte';
+import TBody from './components/TBody.svelte';
+interface Props {
+    tableLayout?: 'fixed' | 'auto';
+    children?: Snippet<[
+        {
+            THead: typeof THead;
+            TBody: typeof TBody;
+            Tr: typeof Tr;
+            Th: typeof Th;
+            Td: typeof Td;
+        }
+    ]>;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/table/components/TBody.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>
+
+<tbody class={`${className}`}>
+	{@render children?.()}
+</tbody>

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

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

package/dist/components/table/components/THead.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>
+
+<thead class={`${className}`}>
+	{@render children?.()}
+</thead>

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

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

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-medium text-tertiary ${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,28 @@
+<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({ Tabs, Tab, Content })}
+			<Tabs>
+				<Tab active={activeTab === 'tab-1'} onClick={() => (activeTab = 'tab-1')}>Tab 1</Tab>
+				<Tab active={activeTab === 'tab-2'} onClick={() => (activeTab = 'tab-2')}>Tab 2</Tab>
+				<Tab active={activeTab === 'tab-3'} onClick={() => (activeTab = 'tab-3')}>Tab 3</Tab>
+			</Tabs>
+
+			<Content show={activeTab === 'tab-1'}>Showing tab 1 content</Content>
+			<Content show={activeTab === 'tab-2'}>Showing tab 2 content</Content>
+			<Content show={activeTab === 'tab-3'}>Showing tab 3 content</Content>
+		{/snippet}
+	</Tabs>
+</Story>

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

@@ -0,0 +1,27 @@
+export default Tabs;
+type Tabs = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Tabs from './Tabs.svelte';
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/tabs/Tabs.svelte

@@ -0,0 +1,13 @@
+<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<[{ Tabs: typeof Tabs; Tab: typeof Tab; Content: typeof Content }]>;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+{@render children?.({ Tabs, Tab, Content })}

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

@@ -0,0 +1,14 @@
+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<[{
+        Tabs: typeof Tabs;
+        Tab: typeof Tab;
+        Content: typeof Content;
+    }]>;
+}
+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 as Tabs } from './Tabs.svelte';

package/dist/components/tabs/index.js

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

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

@@ -0,0 +1,51 @@
+<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.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tag from './Tag.svelte';
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Tag: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tag = InstanceType<typeof Tag>;
+export default Tag;

package/dist/components/tag/Tag.svelte

@@ -0,0 +1,102 @@
+<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 p-1.5',
+		md: 'h-7 text-sm p-2'
+	};
+	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
+}
+
+	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,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    variant?: 'default' | 'outline' | 'transparent';
+    size?: 'sm' | 'md';
+    tooltip?: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+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/toggle/Toggle.stories.svelte

@@ -0,0 +1,15 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Toggle from './Toggle.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Toggle',
+		component: Toggle,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<Toggle id="toggle-1" />
+</Story>

package/dist/components/toggle/Toggle.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Toggle;
+type Toggle = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Toggle from './Toggle.svelte';
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}