@reshape-biotech/design-system 0.0.45 → 0.0.47

package/dist/components/list/List.stories.svelte

@@ -1,97 +0,0 @@
-<script module lang="ts">
-	import List from './List.svelte';
-	import Tag from '../tag/Tag.svelte';
-	import { ArrowUpRight } from 'phosphor-svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: List,
-		title: 'Design System/List',
-		tags: ['autodocs']
-	});
-
-	const items: { name: string; licenses: string; repository: string }[] = [
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
-		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' }
-	];
-</script>
-
-<Story name="Default" args={{}}>
-	<List {items}>
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-secondary"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<ArrowUpRight />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
-</Story>
-
-<Story name="Compact" args={{ variant: 'compact' }}>
-	<List {items} variant="compact">
-		{#snippet item(item)}
-			<div class="flex min-h-2 flex-row gap-2">
-				<div class="flex flex-row justify-start gap-2">
-					<div class="max-w-56 truncate font-bold">
-						{item.name}
-					</div>
-					{#if item.licenses}
-						<Tag>
-							{item.licenses}
-						</Tag>
-					{/if}
-				</div>
-				<div class="flex grow flex-row justify-end gap-3">
-					{#if item.repository}
-						<div class="flex flex-row items-center gap-1">
-							<a
-								href={item.repository}
-								class="text-gray-700"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								Repository
-							</a>
-							<ArrowUpRight />
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/snippet}
-	</List>
-</Story>
-
-<Story name="Loading">
-	<List variant="compact" items={[{}, {}, {}]}>
-		{#snippet item({})}
-			<div class="flex h-8 w-full items-center">
-				<div class="skeleton h-6 w-full bg-neutral"></div>
-			</div>
-		{/snippet}
-	</List>
-</Story>

package/dist/components/list/List.stories.svelte.d.ts

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

package/dist/components/list/List.svelte

@@ -1,75 +0,0 @@
-<script lang="ts" generics="T">
-	import type { Overflow } from '../../tailwind';
-	import type { Snippet } from 'svelte';
-
-	type Props = {
-		items: T[];
-		item: Snippet<[T]>;
-		overflow?: Overflow;
-		variant?: 'compact' | 'default';
-	};
-	let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
-</script>
-
-<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
-	{#each items as currentItem, i}
-		<div class="item">
-			{@render item(currentItem)}
-		</div>
-	{/each}
-</div>
-
-<style>
-	.listStyles {
-
-    display: flex;
-
-    height: 100%;
-
-    flex-direction: column;
-
-    align-items: flex-start;
-
-    align-self: stretch;
-
-    border-radius: 0.25rem
-}
-
-		.listStyles.default {
-
-    gap: 0.5rem
-}
-
-		.listStyles.compact {
-
-    gap: 0px;
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-
-    padding-bottom: 0.5rem;
-
-    padding-left: 1.5rem;
-
-    padding-right: 1.5rem;
-
-    padding-top: 0.5rem
-}
-
-		.listStyles.compact :global(> .item:not(:last-child)) {
-
-    border-bottom-width: 1px;
-
-    border-style: solid;
-
-    --tw-border-opacity: 1;
-
-    border-color: var(--fallback-n,oklch(var(--n)/var(--tw-border-opacity, 1)))
-}
-
-		.listStyles :global(.item) {
-
-    align-self: stretch
-}
-</style>

package/dist/components/list/List.svelte.d.ts

@@ -1,24 +0,0 @@
-import type { Overflow } from '../../tailwind';
-import type { Snippet } from 'svelte';
-declare class __sveltets_Render<T> {
-    props(): {
-        items: T[];
-        item: Snippet<[T]>;
-        overflow?: Overflow;
-        variant?: "compact" | "default";
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const List: $$IsomorphicComponent;
-type List<T> = InstanceType<typeof List<T>>;
-export default List;

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

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

package/dist/components/list/index.js

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

package/dist/components/logo/Logo.stories.svelte

@@ -1,21 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Logo from './Logo.svelte';
-
-	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-	const { Story } = defineMeta({
-		title: 'Design System/Logo',
-		component: Logo,
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Base">
-	<div class="flex flex-col gap-4">
-		<Logo size="xs" />
-		<Logo size="sm" />
-		<Logo size="md" />
-		<Logo size="lg" />
-		<Logo size="xl" />
-	</div>
-</Story>

package/dist/components/logo/Logo.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Logo;
-type Logo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Logo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Logo from './Logo.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/logo/Logo.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	type Props = {
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-	};
-
-	let { size = 'md' }: Props = $props();
-
-	const sizeMap = {
-		xs: 16,
-		sm: 20,
-		md: 24,
-		lg: 32,
-		xl: 40
-	};
-</script>
-
-<svg
-	width={sizeMap[size]}
-	height={sizeMap[size]}
-	viewBox={`0 0 24 24`}
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
-		fill="#FF7A00"
-	/>
-	<path
-		d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
-		fill="#FF7A00"
-	/>
-	<path
-		d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
-		fill="#FF7A00"
-	/>
-</svg>

package/dist/components/logo/Logo.svelte.d.ts

@@ -1,6 +0,0 @@
-type Props = {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-declare const Logo: import("svelte").Component<Props, {}, "">;
-type Logo = ReturnType<typeof Logo>;
-export default Logo;

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

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

package/dist/components/logo/index.js

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

package/dist/components/markdown/Markdown.stories.svelte

@@ -1,41 +0,0 @@
-<script module>
-	import Markdown from './Markdown.svelte';
-
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Markdown,
-		title: 'Design System/Markdown',
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Primary">
-	<Markdown
-		markdown={`# Welcome to My Markdown Story
-
-## Features
-
-- **Bold** and *italic* text
-- Lists (ordered and unordered)
-- [Links](https://example.com)
-- Code blocks
-
-### Example Code
-
-\`\`\`javascript
-function greet(name) {
-  console.log(\`Hello, \${name}!\`);
-}
-greet('Storybook');
-\`\`\`
-
-> This is a blockquote. It's great for highlighting important information.
-
-![Storybook Logo](https://storybook.js.org/images/logos/icon-storybook.svg)
-
----
-
-Happy storytelling with Markdown!`}
-	/>
-</Story>

package/dist/components/markdown/Markdown.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Markdown;
-type Markdown = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Markdown: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Markdown from './Markdown.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/markdown/Markdown.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { marked } from 'marked';
-	interface Props {
-		markdown: string;
-	}
-
-	let { markdown }: Props = $props();
-</script>
-
-<div class="prose text-sm text-tertiary dark:prose-invert">
-	{@html marked.parse(markdown ?? '')}
-</div>

package/dist/components/markdown/Markdown.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    markdown: string;
-}
-declare const Markdown: import("svelte").Component<Props, {}, "">;
-type Markdown = ReturnType<typeof Markdown>;
-export default Markdown;

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

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

package/dist/components/markdown/index.js

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

package/dist/components/modal/Modal.stories.svelte

@@ -1,39 +0,0 @@
-<script module lang="ts">
-	import Button from '../button/Button.svelte';
-	import Modal from '../modal/Modal.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Modal,
-		title: 'Design System/Modal',
-		tags: ['autodocs']
-	});
-
-	let defaultOpen = $state(true);
-</script>
-
-<Story name="Default">
-	<Modal>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
-</Story>
-
-<Story name="Default open">
-	<Modal {defaultOpen} onclose={() => (defaultOpen = false)}>
-		{#snippet Trigger({ openModal })}
-			<Button onClick={openModal}>Open Modal</Button>
-		{/snippet}
-		{#snippet Content()}
-			<div>
-				<p>Modal Content</p>
-			</div>
-		{/snippet}
-	</Modal>
-</Story>

package/dist/components/modal/Modal.stories.svelte.d.ts

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

package/dist/components/modal/Modal.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { v4 as uuidv4 } from 'uuid';
-	import IconButton from '../icon-button/IconButton.svelte';
-	import { X } from 'phosphor-svelte';
-
-	type ModalProps = {
-		Trigger?: Snippet<[{ openModal: () => void; closeModal: () => void }]>;
-		Content: Snippet;
-		onclose?: () => void;
-		defaultOpen?: boolean;
-		id?: string;
-		withClose?: boolean;
-		closeOnClickOutside?: boolean;
-		class?: string;
-	};
-	let {
-		Trigger,
-		Content,
-		onclose,
-		defaultOpen = false,
-		id = 'modal-' + uuidv4(),
-		withClose = true,
-		closeOnClickOutside = true,
-		class: modalClass
-	}: ModalProps = $props();
-
-	const modalOpen = $state(defaultOpen);
-	const openModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.showModal();
-	};
-
-	const closeModal = () => {
-		const dialog = document.getElementById(id) as HTMLDialogElement | null;
-		dialog?.close();
-		onclose?.();
-	};
-</script>
-
-{#if Trigger}
-	{@render Trigger({ openModal, closeModal })}
-{/if}
-<dialog {id} class="modal w-full max-w-full" class:modal-open={modalOpen}>
-	<div class="modal-box {modalClass}">
-		{#if withClose}
-			<div class="close-button">
-				<IconButton onclick={closeModal} size="md" variant="secondary">
-					<X />
-				</IconButton>
-			</div>
-		{/if}
-		{@render Content()}
-	</div>
-	{#if closeOnClickOutside}
-		<form method="dialog" class="modal-backdrop">
-			<button onclick={closeModal}>close</button>
-		</form>
-	{/if}
-</dialog>
-
-<style>
-	.modal-box {
-    position: relative;
-    max-width: 100%;
-    border-radius: 0.75rem;
-    --tw-bg-opacity: 1;
-    background-color: rgb(243 250 252 / var(--tw-bg-opacity, 1))
-}
-	.close-button {
-    position: absolute;
-    right: 0px;
-    top: 0px;
-    padding: 1.5rem
-}
-</style>

package/dist/components/modal/Modal.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-type ModalProps = {
-    Trigger?: Snippet<[{
-        openModal: () => void;
-        closeModal: () => void;
-    }]>;
-    Content: Snippet;
-    onclose?: () => void;
-    defaultOpen?: boolean;
-    id?: string;
-    withClose?: boolean;
-    closeOnClickOutside?: boolean;
-    class?: string;
-};
-declare const Modal: import("svelte").Component<ModalProps, {}, "">;
-type Modal = ReturnType<typeof Modal>;
-export default Modal;

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

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

package/dist/components/modal/index.js

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

package/dist/components/notification-popup/NotificationPopup.stories.svelte

@@ -1,27 +0,0 @@
-<script module>
-	import NotificationPopup from './NotificationPopup.svelte';
-	import { Sparkle } from 'phosphor-svelte';
-
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: NotificationPopup,
-		title: 'Design System/NotificationPopup',
-		tags: ['autodocs']
-	});
-
-	let visible = true;
-
-	function handleClick() {
-		visible = !visible;
-	}
-</script>
-
-<Story name="Primary">
-	<NotificationPopup onClose={handleClick} title="See what's new" {visible}>
-		<a href="_blank" color="transparent" class="flex items-center gap-1 font-sans">
-			<Sparkle />
-			<p>Product updates</p>
-		</a>
-	</NotificationPopup>
-</Story>

package/dist/components/notification-popup/NotificationPopup.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default NotificationPopup;
-type NotificationPopup = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const NotificationPopup: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import NotificationPopup from './NotificationPopup.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/notification-popup/NotificationPopup.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { X } from 'phosphor-svelte';
-	import { IconButton } from '../icon-button/';
-	import { fade, fly } from 'svelte/transition';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		onClose: () => void;
-		title: string;
-		visible: boolean;
-		id?: string | undefined;
-		children?: Snippet;
-	}
-
-	let { onClose, title, visible, id = undefined, children }: Props = $props();
-</script>
-
-{#if visible}
-	<div
-		{id}
-		class="flex w-[184px] justify-between rounded-lg bg-surface p-3 shadow-2xl"
-		in:fly={{ y: 100, duration: 1000 }}
-		out:fade
-	>
-		<div class="flex flex-col gap-2">
-			<h6 class="flex h-6 items-center">{title}</h6>
-			{@render children?.()}
-		</div>
-		<IconButton size="xs" onclick={onClose}><X /></IconButton>
-	</div>
-{/if}