@reshape-biotech/design-system 0.0.45 → 0.0.47

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

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

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

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

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

package/dist/components/pill/Pill.svelte

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

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

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

package/dist/components/pill/index.js

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

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

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

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

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

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

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

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

@@ -1,59 +0,0 @@
-<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:bg-neutral disabled:text-tertiary',
-		secondary:
-			'bg-transparent text-primary hover:bg-neutral disabled: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

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

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

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

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

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

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

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

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

package/dist/components/select/Select.stories.svelte

@@ -1,113 +0,0 @@
-<script module lang="ts">
-	import Select from './Select.svelte';
-
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Select,
-		title: 'Design System/Select',
-		tags: ['autodocs']
-	});
-
-	const items = [
-		{ value: '1', label: 'One', group: 'Group 1', description: 'Description 1' },
-		{ value: '2', label: 'Two', group: 'Group 1', description: 'Description 2' },
-		{ value: '3', label: 'Three', group: 'Group 2' },
-		{ value: '4', label: 'Four', group: 'Group 2' }
-	];
-	let value: any = $state();
-	let thisChanged = $state(false);
-
-	function handleInput(e: Event) {
-		thisChanged = true;
-	}
-</script>
-
-<Story name="Default">
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
-</Story>
-<Story name="Grouped">
-	<div class="py-12">
-		<Select listOpen {items} withGroup />
-	</div>
-</Story>
-
-<Story name="DefaultValue">
-	<div class="py-12">
-		<Select listOpen {items} withGroup value={{ value: '1', label: 'One', group: 'Group 1' }} />
-	</div>
-</Story>
-
-<Story name="Disabled">
-	<div class="py-12">
-		<Select listOpen {items} disabled />
-	</div>
-</Story>
-<Story name="Searchable">
-	<div class="py-12">
-		<Select listOpen {items} searchable />
-	</div>
-</Story>
-<Story name="Open">
-	<div class="py-12">
-		<Select listOpen {items} />
-	</div>
-</Story>
-<Story name="Error">
-	<div class="py-12">
-		<Select listOpen {items} hasError />
-	</div>
-</Story>
-<Story name="Placeholder">
-	<div class="py-12">
-		<Select listOpen {items} placeholder="Select a value" />
-	</div>
-</Story>
-<Story name="Multiple">
-	<div class="py-12">
-		<Select listOpen {items} multiple bind:value />
-	</div>
-</Story>
-
-<Story name="Bind value input changed">
-	<div class="py-12">
-		<Select listOpen {items} bind:value on:input={handleInput} />
-		{#if thisChanged}
-			<p class="text-secondary">Wow you picked something from the dropdown 💪</p>{/if}
-	</div>
-</Story>
-
-<Story name="Custom Item">
-	<div class="py-12">
-		<Select listOpen {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-item` is an invalid identifier -->
-			<div
-				slot="custom-item"
-				class="flex h-14 w-full items-center overflow-hidden whitespace-nowrap"
-				let:item
-			>
-				<div class="flex flex-col">
-					<p class="text-sm">
-						{item.label}
-					</p>
-					<p class="max-w-20 text-xs text-secondary">
-						{item.description} very very long long loooooong long description
-					</p>
-				</div>
-			</div>
-		</Select>
-	</div>
-</Story>
-
-<Story name="Custom selection label">
-	<div class="py-12">
-		<Select {items} value={{ value: '1', label: 'One', group: 'Group 1' }}>
-			<!-- @migration-task: migrate this slot by hand, `custom-selection` is an invalid identifier -->
-			<div slot="custom-selection" let:selection>
-				<p>💩{selection.label} poopoo💩</p>
-			</div>
-		</Select>
-	</div>
-</Story>

package/dist/components/select/Select.stories.svelte.d.ts

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

package/dist/components/select/Select.svelte

@@ -1,138 +0,0 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot overwrite a zero-length range – use appendLeft or prependRight instead -->
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
-<script lang="ts">
-	import { backgroundColor, borderColor, textColor } from '../../tokens';
-	import { CaretDown, X } from 'phosphor-svelte';
-	import { createEventDispatcher } from 'svelte';
-	let className = '';
-	export { className as class };
-	import SvelteSelect from 'svelte-select';
-	import type { SelectItemProps } from '.';
-
-	// Docs: https://github.com/rob-balfre/svelte-select
-
-	const dispatch = createEventDispatcher();
-
-	export let items: SelectItemProps[] = [];
-	export let id: string | undefined = undefined;
-	export let value: SelectItemProps | SelectItemProps[] | null = null;
-	export let searchable = false;
-	export let listOpen = false;
-	export let placeholder: string | undefined = undefined;
-	export let disabled = false;
-	export let hasError = false;
-	export let withGroup = false;
-	export let multiple = false;
-	export let clearable = true;
-	export let required = false;
-	export let onChange: (value: SelectItemProps | SelectItemProps[]) => void = () => {};
-
-	const groupBy = withGroup ? (item: SelectItemProps) => item.group : undefined;
-</script>
-
-<SvelteSelect
-	{items}
-	{searchable}
-	{placeholder}
-	{disabled}
-	{id}
-	{hasError}
-	{multiple}
-	{clearable}
-	{groupBy}
-	on:select={(e) => dispatch('change', e.detail)}
-	on:input={(e) => dispatch('input', e.detail)}
-	on:change={(e) => {
-		dispatch('change', e.detail);
-		onChange(e.detail);
-	}}
-	class={`select ${className}`}
-	{required}
-	bind:value
-	bind:listOpen
-	showChevron={true}
-	floatingConfig={{
-		placement: 'bottom'
-	}}
-	createGroupHeaderItem={(groupValue) => {
-		return {
-			value: groupValue,
-			label: groupValue
-		};
-	}}
-	--group-title-border-style="1px solid black"
-	--group-item-padding-left="1rem"
-	--item-height="100%"
-	--group-title-color={textColor['secondary']}
-	--group-title-font-size="0.75rem"
-	--group-title-font-weight="400"
-	--group-title-text-transform="none"
-	--placeholder-color={textColor['secondary']}
-	--item-is-active-bg={backgroundColor['accent']}
-	--item-is-active-color={textColor['primary']}
-	--item-hover-bg={backgroundColor['neutral']}
-	--border="1px solid {borderColor['input']}"
-	--border-hover="1px solid {borderColor['hover']}"
-	--border-focused="1px solid {borderColor['focus']}"
-	--border-radius="8px"
->
-	<div slot="chevron-icon" class="">
-		<CaretDown weight="bold" size="1rem" />
-	</div>
-
-	<div slot="selection" let:selection>
-		{#if $$slots['custom-selection']}
-			<slot name="custom-selection" {selection} />
-		{:else}
-			{selection.label}
-		{/if}
-	</div>
-
-	<div slot="clear-icon">
-		<X weight="bold" size="1rem" />
-	</div>
-
-	<div slot="item" let:item let:index class="flex">
-		<div class="relative flex flex-1 justify-between">
-			{#if $$slots['custom-item']}
-				<slot name="custom-item" {item} {index} />
-			{:else}
-				<div class="flex h-full flex-1 items-center text-ellipsis whitespace-nowrap">
-					<p>{item.label}</p>
-				</div>
-			{/if}
-		</div>
-		<slot />
-	</div></SvelteSelect
->
-
-<style>
-	:global(.svelte-select.focused) {
-		outline: 1px solid var(--colors-gray-1) !important;
-	}
-
-	:global(.svelte-select) {
-		box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.02);
-		width: 100%;
-	}
-
-	:global(.svelte-select .item.active) {
-		background-color: #5750ee1A;
-}
-
-	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title) {
-		padding-top: 0.5rem;
-}
-
-	:global(.svelte-select .list-item:not(:first-of-type) > .list-group-title)::before {
-		position: relative;
-		bottom: 0px;
-		left: 0px;
-		clear: both;
-		display: block;
-		border-top-width: 1px;
-		border-color: #12192A26;
-		--tw-content: '';
-		content: var(--tw-content);
-}
-</style>