@reshape-biotech/design-system 0.0.47 → 0.0.48

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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,76 @@
+<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(255 255 255 / 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

@@ -0,0 +1,17 @@
+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

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

package/dist/components/modal/index.js

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

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

@@ -0,0 +1,27 @@
+<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-2">
+			<Sparkle weight="bold" />
+			<p>Product updates</p>
+		</a>
+	</NotificationPopup>
+</Story>

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,33 @@
+<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-[200px] justify-between rounded-lg bg-surface p-3 shadow-menu"
+		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" variant="transparent" rounded={false} onclick={onClose}
+			><X class="text-icon-tertiary" weight="bold" /></IconButton
+		>
+	</div>
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    onClose: () => void;
+    title: string;
+    visible: boolean;
+    id?: string | undefined;
+    children?: Snippet;
+}
+declare const NotificationPopup: import("svelte").Component<Props, {}, "">;
+type NotificationPopup = ReturnType<typeof NotificationPopup>;
+export default NotificationPopup;

package/dist/components/notification-popup/index.d.ts

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

package/dist/components/notification-popup/index.js

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

package/dist/components/pill/Pill.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { X } from 'phosphor-svelte';
+
+	interface Props {
+		class?: string;
+		text: string;
+		type?: 'button' | 'submit';
+		testID?: string;
+		onclick?: () => void;
+	}
+
+	let { class: className = '', text, type = 'button', testID = '', onclick }: Props = $props();
+</script>
+
+<button class="{className} " {onclick} {type} data-testid={testID}>
+	{text}
+	<X class="opacity-50" weight="bold" />
+</button>
+
+<style>
+	button {
+		gap: 0.5rem;
+		border-radius: 9999px;
+		background-color: #5750ee1A;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		--tw-text-opacity: 1;
+		color: rgb(71 65 193 / var(--tw-text-opacity, 1));
+		display: flex;
+		white-space: nowrap;
+		height: 32px;
+
+		align-items: center
+}
+</style>

package/dist/components/pill/Pill.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    class?: string;
+    text: string;
+    type?: 'button' | 'submit';
+    testID?: string;
+    onclick?: () => void;
+}
+declare const Pill: import("svelte").Component<Props, {}, "">;
+type Pill = ReturnType<typeof Pill>;
+export default Pill;

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

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

package/dist/components/pill/index.js

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

package/dist/components/progress-circle/ProgressCircle.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	// Make sure progress is between 0 and 100 and round down to the nearest 10 if over 90
+	$effect(() => {
+		progress =
+			progress > 90
+				? Math.floor(Math.min(100, progress) / 10) * 10
+				: Math.min(100, Math.max(0, progress));
+	});
+
+	type Props = {
+		progress: number;
+		size?: 'md' | 'sm';
+	};
+
+	let { progress = $bindable(), size = 'md' }: Props = $props();
+
+	const viewBox = size === 'md' ? '0 0 20 20' : '0 0 16 16';
+	const center = size === 'md' ? 10 : 8;
+	const radius = size === 'md' ? 7 : 6;
+
+	// Create the circle path
+	const path = `M ${center} ${center - radius} 
+              A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`;
+</script>
+
+<div class="progress-wrapper" class:sm={size === 'sm'} class:md={size === 'md'}>
+	<svg xmlns="http://www.w3.org/2000/svg" {viewBox} fill="none">
+		<!-- Background track -->
+		<path d={path} stroke="currentColor" stroke-opacity="0.25" stroke-width="2" fill="none" />
+		<!-- Progress indicator -->
+		<path
+			d={path}
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			fill="none"
+			style="stroke-dasharray: var(--pathLength);
+             stroke-dashoffset: calc(var(--pathLength) * (1 - {progress / 100}));"
+			pathLength="1"
+		/>
+	</svg>
+</div>
+
+<style>
+	.progress-wrapper {
+
+		position: relative;
+
+		display: inline-block;
+
+		aspect-ratio: 1;
+}
+		.progress-wrapper.md {
+
+		width: 1.25rem;
+
+		height: 1.25rem;
+}
+		.progress-wrapper.sm {
+
+		width: 1rem;
+
+		height: 1rem;
+}
+
+	svg {
+
+		position: absolute;
+
+		inset: 0px;
+		width: 100%;
+		height: 100%;
+		display: block;
+}
+
+	path {
+		--pathLength: 1;
+	}
+</style>

package/dist/components/progress-circle/ProgressCircle.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    progress: number;
+    size?: 'md' | 'sm';
+};
+declare const ProgressCircle: import("svelte").Component<Props, {}, "progress">;
+type ProgressCircle = ReturnType<typeof ProgressCircle>;
+export default ProgressCircle;

package/dist/components/progress-circle/index.d.ts

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

package/dist/components/progress-circle/index.js

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

package/dist/components/segmented-control-buttons/ControlButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Color = 'primary' | 'secondary';
+
+	interface Props {
+		class?: string;
+		color?: Color;
+		disabled?: boolean;
+		active?: boolean;
+		dataTestId?: string;
+		onclick?: () => void;
+		children?: Snippet;
+	}
+
+	let {
+		class: className = '',
+		color = 'primary',
+		disabled = false,
+		active = false,
+		dataTestId,
+		onclick,
+		children
+	}: Props = $props();
+	const colors: Record<Color, string> = {
+		primary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary',
+		secondary: 'bg-transparent text-primary hover:bg-neutral disabled:text-tertiary'
+	};
+</script>
+
+<div class="join-item flex h-full flex-1">
+	<button
+		{onclick}
+		class={`control-button flex flex-1 items-center justify-center gap-2 rounded-md text-sm leading-4 ${colors[color]} ${className} ${color}`}
+		class:active
+		type="button"
+		{disabled}
+		data-testid={dataTestId}
+	>
+		{@render children?.()}
+	</button>
+</div>
+
+<style>
+	.primary.active {
+    --tw-bg-opacity: 1;
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.secondary.active {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+</style>

package/dist/components/segmented-control-buttons/ControlButton.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Color = 'primary' | 'secondary';
+interface Props {
+    class?: string;
+    color?: Color;
+    disabled?: boolean;
+    active?: boolean;
+    dataTestId?: string;
+    onclick?: () => void;
+    children?: Snippet;
+}
+declare const ControlButton: import("svelte").Component<Props, {}, "">;
+type ControlButton = ReturnType<typeof ControlButton>;
+export default ControlButton;

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+	import { Star } from 'phosphor-svelte';
+	import SegmentedControlButtons from './SegmentedControlButtons.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: SegmentedControlButtons,
+		title: 'Design System/SegmentedControlButtons',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<SegmentedControlButtons class="w-[350px]">
+		{#snippet children({ ControlButton })}
+			<ControlButton active><Star /> Low</ControlButton>
+			<ControlButton><Star /> Medium</ControlButton>
+			<ControlButton disabled><Star /> High</ControlButton>
+		{/snippet}
+	</SegmentedControlButtons>
+</Story>
+<Story name="Large">
+	<SegmentedControlButtons size="lg" class="w-[350px]">
+		{#snippet children({ ControlButton })}
+			<ControlButton active><Star /> Low</ControlButton>
+			<ControlButton><Star /> Medium</ControlButton>
+			<ControlButton disabled><Star /> High</ControlButton>
+		{/snippet}
+	</SegmentedControlButtons>
+</Story>
+<Story name="Secondary">
+	<SegmentedControlButtons class="w-[350px]">
+		{#snippet children({ ControlButton })}
+			<ControlButton active color="secondary">
+				<Star /> Low
+			</ControlButton>
+			<ControlButton color="secondary">
+				<Star /> Medium
+			</ControlButton>
+			<ControlButton color="secondary">
+				<Star /> High
+			</ControlButton>
+		{/snippet}
+	</SegmentedControlButtons>
+</Story>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.stories.svelte.d.ts

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

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ControlButton from './ControlButton.svelte';
+
+	interface Props {
+		class?: string;
+		size?: 'md' | 'lg';
+		children?: Snippet<[{ ControlButton: typeof ControlButton }]>;
+	}
+
+	let { class: className = '', size = 'md', children }: Props = $props();
+
+	const sizes = {
+		md: 'h-10 ',
+		lg: 'h-16 [&>*>.control-button]:flex-col'
+	};
+</script>
+
+<div class={`join flex gap-1 rounded-lg bg-neutral p-1 ${sizes[size]} ${size} ${className}`}>
+	{@render children?.({ ControlButton })}
+</div>

package/dist/components/segmented-control-buttons/SegmentedControlButtons.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import ControlButton from './ControlButton.svelte';
+interface Props {
+    class?: string;
+    size?: 'md' | 'lg';
+    children?: Snippet<[{
+        ControlButton: typeof ControlButton;
+    }]>;
+}
+declare const SegmentedControlButtons: import("svelte").Component<Props, {}, "">;
+type SegmentedControlButtons = ReturnType<typeof SegmentedControlButtons>;
+export default SegmentedControlButtons;

package/dist/components/segmented-control-buttons/index.d.ts

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

package/dist/components/segmented-control-buttons/index.js

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