@reshape-biotech/design-system 0.0.22 → 0.0.24

package/dist/components/status-badge/StatusBadge.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import StatusBadge from 'design-system/components/status-badge/StatusBadge.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 StatusBadge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type StatusBadge = InstanceType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/status-badge/StatusBadge.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		// we can add dynamic classes because they are safelisted in tailwind-safelist.txt
+		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+		size?: 'md' | 'sm';
+		content?: Snippet;
+		progress?: Snippet;
+		icon?: Snippet;
+		iconOnly?: boolean;
+	}
+
+	let {
+		type = 'neutral',
+		size = 'md',
+		content,
+		progress,
+		icon,
+		iconOnly: propIconOnly = false
+	}: Props = $props();
+
+	let iconOnly = $derived((content === undefined && progress === undefined) || propIconOnly);
+</script>
+
+<div
+	class={`badge badge-${type} badge-${size}`}
+	class:badge-icon-only={iconOnly}
+	data-testid="status-badge"
+>
+	<div class={`icon`}>
+		{@render icon?.()}
+	</div>
+	<div class="gap-2">
+		{@render content?.()}
+		{@render progress?.()}
+	</div>
+</div>
+
+<style>
+	.badge {
+    gap: 0.5rem;
+    border-style: none;
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.badge-md {
+    height: 2rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.75rem
+}
+	.badge-md .icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+
+	.badge-sm {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.5rem
+}
+
+	.badge-sm .icon {
+    width: 1rem;
+    height: 1rem
+}
+	.badge-icon-only {
+    width: 2rem;
+    height: 2rem;
+    gap: 0px;
+    padding: 0px
+}
+
+	.badge-sm.badge-icon-only {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0px
+}
+
+	.badge-neutral {
+    background-color: #12192a0d
+}
+
+	.badge-neutral:hover {
+    background-color: #12192A1A
+}
+
+	.badge-neutral .icon {
+    --tw-text-opacity: 1;
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	.badge-success {
+    background-color: #0aad6e1A
+}
+
+	.badge-success:hover {
+    background-color: #0aad6e40
+}
+
+	.badge-success .icon {
+    --tw-text-opacity: 1;
+    color: rgb(10 173 110 / var(--tw-text-opacity, 1))
+}
+	.badge-progress {
+    background-color: #5750ee1A
+}
+	.badge-progress:hover {
+    background-color: #5750ee40
+}
+	.badge-progress .icon {
+    --tw-text-opacity: 1;
+    color: rgb(71 65 193 / var(--tw-text-opacity, 1))
+}
+	.badge-warning {
+    background-color: #f1b1231A
+}
+	.badge-warning:hover {
+    background-color: #f1b12340
+}
+	.badge-warning .icon {
+    --tw-text-opacity: 1;
+    color: rgb(241 177 35 / var(--tw-text-opacity, 1))
+}
+	.badge-error {
+    background-color: #eb46471A
+}
+	.badge-error:hover {
+    background-color: #eb464740
+}
+	.badge-error .icon {
+    --tw-text-opacity: 1;
+    color: rgb(235 70 71 / var(--tw-text-opacity, 1))
+}
+
+	:global(.badge > div) {
+    display: flex;
+    height: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap
+}
+</style>

package/dist/components/status-badge/StatusBadge.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';
+    size?: 'md' | 'sm';
+    content?: Snippet;
+    progress?: Snippet;
+    icon?: Snippet;
+    iconOnly?: boolean;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;

package/dist/components/table/Table.stories.svelte

@@ -0,0 +1,86 @@
+<script module lang="ts">
+	import Table from './Table.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Table,
+		title: 'Design System/Table',
+		tags: ['autodocs']
+	});
+	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import { Phone } from 'phosphor-svelte';
+
+	export const users = [
+		{
+			name: 'John Doe',
+			age: 25,
+			role: 'admin'
+		},
+		{
+			name: 'Jane Smith',
+			age: 32,
+			role: 'member'
+		},
+		{
+			name: 'Michael Johnson',
+			age: 41,
+			role: 'deactivated'
+		},
+		{
+			name: 'Emily Brown',
+			age: 28,
+			role: 'member'
+		},
+		{
+			name: 'David Lee',
+			age: 37,
+			role: 'admin'
+		},
+		{
+			name: 'Sarah Wilson',
+			age: 29,
+			role: 'member'
+		},
+		{
+			name: 'Robert Taylor',
+			age: 45,
+			role: 'deactivated'
+		},
+		{
+			name: 'Lisa Anderson',
+			age: 33,
+			role: 'member'
+		},
+		{
+			name: 'James Martinez',
+			age: 39,
+			role: 'admin'
+		},
+		{
+			name: 'Jennifer Garcia',
+			age: 31,
+			role: 'deactivated'
+		}
+	];
+</script>
+
+<Story name="Base">
+	<Table>
+		{#snippet children({ C })}
+			<C.Tr>
+				<C.Th>Name</C.Th>
+				<C.Th>Age</C.Th>
+				<C.Th class="w-[100px]">Role</C.Th>
+				<C.Th class="w-6"></C.Th>
+			</C.Tr>
+			{#each users as user}
+				<C.Tr disabled={user.role === 'deactivated'}>
+					<C.Td>{user.name}</C.Td>
+					<C.Td>{user.age}</C.Td>
+					<C.Td>{user.role}</C.Td>
+					<C.Td><IconButton disabled={user.role === 'deactivated'}><Phone /></IconButton></C.Td>
+				</C.Tr>
+			{/each}
+		{/snippet}
+	</Table>
+</Story>

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

@@ -0,0 +1,24 @@
+import Table from './Table.svelte';
+export declare const users: {
+    name: string;
+    age: number;
+    role: string;
+}[];
+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 Table: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Table = InstanceType<typeof Table>;
+export default Table;

package/dist/components/table/Table.svelte

@@ -0,0 +1,33 @@
+<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';
+
+	interface Props {
+		tableLayout?: 'fixed' | 'auto';
+		children?: Snippet<[any]>;
+	}
+
+	let { tableLayout = 'fixed', children }: Props = $props();
+	const C = {
+		Tr: Tr,
+		Th: Th,
+		Td: Td
+	};
+</script>
+
+<div class="w-full rounded-lg bg-surface px-6 pb-1 pt-3">
+	<table class={`w-full table-fixed sm:table-auto xl:table-${tableLayout}`}>
+		{@render children?.({ C })}
+	</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,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    tableLayout?: 'fixed' | 'auto';
+    children?: Snippet<[any]>;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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/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.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,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 'design-system/components/button/Button.svelte';
+	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/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.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;