@reshape-biotech/design-system 0.0.44 → 0.0.47

package/dist/components/button/Button.svelte

@@ -1,176 +0,0 @@
-<script lang="ts">
-	import Spinner from '../spinner/Spinner.svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		onClick?: (event?: MouseEvent) => void;
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		loading?: boolean;
-		disabled?: boolean;
-		accessibilityLabel?: string;
-		size?: 'sm' | 'md' | 'lg';
-		id?: string | undefined;
-		tabindex?: number | undefined;
-		variant?: Variant;
-		children?: Snippet;
-		dataTestId?: string;
-	}
-
-	let {
-		class: className = '',
-		onClick = () => {},
-		type = 'button',
-		loading = false,
-		disabled = false,
-		accessibilityLabel = '',
-		size = 'lg',
-		id = undefined,
-		tabindex = undefined,
-		variant = 'primary',
-		children,
-		dataTestId = undefined
-	}: Props = $props();
-
-	type Variant =
-		| 'primary'
-		| 'secondary'
-		| 'transparent'
-		| 'danger'
-		| 'outline'
-		| 'secondary-inverse';
-
-	let variantClass = $derived(`btn-${variant}`);
-	let sizeClass = $derived(`btn-size-${size}`);
-</script>
-
-<button
-	aria-label={accessibilityLabel}
-	onclick={(e) => {
-		if (!loading) {
-			onClick(e);
-		} else {
-			e.preventDefault();
-		}
-	}}
-	{type}
-	{disabled}
-	{id}
-	{tabindex}
-	class:cursor-wait={loading}
-	class="button {variantClass} {sizeClass} {className}"
-	data-testid={dataTestId}
->
-	{#if loading}
-		<Spinner />
-	{:else}
-		{@render children?.()}
-	{/if}
-</button>
-
-<style>
-	.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    border-radius: 9999px;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1.5rem;
-    transition-duration: 150ms
-}
-.button:disabled {
-    background-color: #12192a0d;
-    --tw-text-opacity: 1;
-    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
-}
-
-	/* Size variants */
-	.btn-size-sm {
-    height: 2rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem
-}
-	.btn-size-md {
-    height: 2.5rem;
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem
-}
-	.btn-size-lg {
-    height: 3rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem
-}
-
-	/* Button variants */
-	.btn-primary {
-    --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))
-}
-	.btn-primary:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
-}
-	.btn-secondary {
-    background-color: #12192a0d;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-	.btn-secondary:hover {
-    background-color: #12192A1A
-}
-	.btn-secondary:active {
-    background-color: #12192a0d
-}
-	.btn-transparent {
-    background-color: transparent;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-	.btn-transparent:hover {
-    background-color: #12192a0d
-}
-	.btn-danger {
-    --tw-bg-opacity: 1;
-    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-	.btn-danger:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
-}
-	.btn-outline {
-    border-width: 1px;
-    border-color: #12192A26;
-    background-color: transparent;
-    --tw-text-opacity: 1;
-    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
-}
-	.btn-outline:hover {
-    background-color: #12192A1A
-}
-	.btn-outline:disabled {
-    border-style: none
-}
-	.btn-secondary-inverse {
-    background-color: #FFFFFF0D;
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
-}
-	.btn-secondary-inverse:hover {
-    background-color: #FFFFFF26
-}
-	.btn-secondary-inverse:active {
-    background-color: #FFFFFF0D
-}
-</style>

package/dist/components/button/Button.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
-    class?: string;
-    onClick?: (event?: MouseEvent) => void;
-    type?: "button" | "submit" | "reset" | null | undefined;
-    loading?: boolean;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    size?: "sm" | "md" | "lg";
-    id?: string | undefined;
-    tabindex?: number | undefined;
-    variant?: "primary" | "secondary" | "transparent" | "danger" | "outline" | "secondary-inverse";
-    children?: Snippet;
-    dataTestId?: string;
-}, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

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

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

package/dist/components/button/index.js

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

package/dist/components/datepicker/DatePicker.svelte

@@ -1,283 +0,0 @@
-<script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	import { DateTime, type MonthNumbers } from 'luxon';
-	import { CaretLeft, CaretRight } from 'phosphor-svelte';
-
-	interface Props {
-		selectedDate: DateTime | undefined;
-		onClick?: any;
-	}
-
-	let { selectedDate = $bindable(), onClick = (date: DateTime) => {} }: Props = $props();
-
-	const arrDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-	let today = DateTime.local();
-	const currentDay = today.day;
-	const currentMonth = today.month;
-	const currentYear = today.year;
-	let shownMonth = $state(today.month);
-	let shownYear = $state(today.year);
-	let selectedDay: number | undefined = $state();
-	let selectedMonth: number | undefined = $state();
-	let selectedYear: number | undefined = $state();
-	let rows = $state(initRows());
-
-	run(() => {
-		if (selectedDate) {
-			selectedDay = selectedDate.day;
-			selectedMonth = selectedDate.month;
-			selectedYear = selectedDate.year;
-		}
-	});
-
-	affectedRows();
-
-	function initRows() {
-		return [
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0],
-			[0, 0, 0, 0, 0, 0, 0]
-		];
-	}
-
-	function affectedRows() {
-		rows = initRows();
-		const firstDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).weekday - 1; // 0-based index
-		const lastDayOfCurrentMonth = DateTime.local(shownYear, shownMonth, 1).daysInMonth;
-
-		if (lastDayOfCurrentMonth === undefined) {
-			// Handle invalid date
-			return;
-		}
-
-		let iRow = 0;
-		let iCol = firstDayOfCurrentMonth; // Start at the correct weekday
-		let cpt = 1; // Start from day 1
-
-		for (iRow = 0; iRow < 6; iRow++) {
-			while (iCol < 7 && cpt <= lastDayOfCurrentMonth) {
-				rows[iRow][iCol] = cpt++;
-				iCol++;
-			}
-			iCol = 0; // Reset for the next row
-		}
-	}
-
-	function previousMonth() {
-		let dt = DateTime.local(shownYear, shownMonth).minus({ months: 1 });
-		shownMonth = dt.month as MonthNumbers;
-		shownYear = dt.year;
-		affectedRows();
-	}
-
-	function nextMonth() {
-		let dt = DateTime.local(shownYear, shownMonth).plus({ months: 1 });
-		shownMonth = dt.month as MonthNumbers;
-		shownYear = dt.year;
-		affectedRows();
-	}
-
-	function selectDate(y: number, m: number, d: number) {
-		selectedDate = DateTime.local(y, m, d);
-		onClick(selectedDate);
-	}
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="calendar-container" onclick={(e) => e.stopPropagation()}>
-	<div class="calendar">
-		<div class="calendar-header">
-			<div class="month-year">
-				<button class="btn-custom p-2" onclick={previousMonth} aria-label="calendar backward">
-					<CaretLeft class="text-secondary" weight="bold" size="0.75rem" />
-				</button>
-				<h4>
-					{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}
-				</h4>
-				<div>
-					<button class="btn-custom p-2" onclick={nextMonth} aria-label="calendar forward">
-						<CaretRight class="text-secondary" weight="bold" size="0.75rem" />
-					</button>
-				</div>
-			</div>
-		</div>
-		<div class="calendar-body">
-			<table>
-				<thead>
-					<tr>
-						{#each arrDays as day}
-							<th>
-								<p>{day}</p>
-							</th>
-						{/each}
-					</tr>
-				</thead>
-				<tbody>
-					{#each rows as col}
-						<tr>
-							{#each col as dayOfMonth}
-								<td>
-									{#if dayOfMonth > 0}
-										<div class="date-container">
-											<p
-												class={dayOfMonth === selectedDay &&
-												selectedMonth === shownMonth &&
-												selectedYear === shownYear
-													? 'date selected-date'
-													: 'date'}
-											>
-												<button
-													onclick={() => {
-														selectDate(shownYear, shownMonth, dayOfMonth);
-													}}
-												>
-													{dayOfMonth}
-												</button>
-											</p>
-											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
-												<svg
-													class="current-date-indicator text-accent"
-													xmlns="http://www.w3.org/2000/svg"
-													width="4"
-													height="4"
-													viewBox="0 0 4 4"
-												>
-													<circle cx="2" cy="2" r="2" fill="currentColor" />
-												</svg>
-											{/if}
-										</div>
-									{/if}
-								</td>
-							{/each}
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	</div>
-</div>
-
-<style>
-	.calendar-container {
-		display: flex;
-		width: 312px;
-	}
-
-	.calendar {
-		overflow: hidden;
-		border-radius: 0.5rem;
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-		padding: 1rem;
-		--tw-shadow: 0px 16px 24px 0px rgba(18, 25, 42, 0.16);
-		--tw-shadow-colored: 0px 16px 24px 0px var(--tw-shadow-color);
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-	.month-year {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.month-year .btn-custom {
-		background: none;
-		border: none;
-	}
-
-	.calendar-body {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-top: 22px;
-		overflow-x: auto;
-	}
-
-	table {
-		width: 100%;
-		border-spacing: 0;
-		border-collapse: collapse;
-		margin: 0;
-		padding: 0;
-	}
-
-	table thead th p {
-		text-align: center;
-		font-size: 0.75rem;
-		line-height: 1rem;
-		font-weight: 400;
-		--tw-text-opacity: 1;
-		color: rgb(136 140 148 / var(--tw-text-opacity, 1));
-}
-
-	td {
-		width: 40px;
-		height: 40px;
-	}
-	table th,
-	table td {
-		box-sizing: border-box;
-		padding: 0;
-		margin: 0;
-	}
-
-	.date-container {
-		position: relative;
-	}
-
-	.date-container .current-date-indicator {
-		position: absolute;
-		top: 20px;
-		left: 18px;
-	}
-
-	.date {
-		display: flex;
-		cursor: pointer;
-		align-items: center;
-		justify-content: center;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		font-weight: 400;
-}
-
-	.date :hover,
-		.date :focus {
-		height: 2.5rem;
-		width: 2.5rem;
-		border-radius: 0.5rem;
-		--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));
-			z-index: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-}
-
-	.selected-date {
-		height: 2.5rem;
-		width: 2.5rem;
-		border-radius: 0.5rem;
-		--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));
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-}
-
-	.date button {
-		border: none;
-		background: none;
-	}
-</style>

package/dist/components/datepicker/DatePicker.svelte.d.ts

@@ -1,8 +0,0 @@
-import { DateTime } from 'luxon';
-interface Props {
-    selectedDate: DateTime | undefined;
-    onClick?: any;
-}
-declare const DatePicker: import("svelte").Component<Props, {}, "selectedDate">;
-type DatePicker = ReturnType<typeof DatePicker>;
-export default DatePicker;

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

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

package/dist/components/datepicker/index.js

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

package/dist/components/divider/Divider.stories.svelte

@@ -1,14 +0,0 @@
-<script module>
-	import Divider from './Divider.svelte';
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-
-	const { Story } = defineMeta({
-		component: Divider,
-		title: 'Design System/Divider',
-		tags: ['autodocs']
-	});
-</script>
-
-<Story name="Primary">
-	<Divider />
-</Story>

package/dist/components/divider/Divider.stories.svelte.d.ts

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

@@ -1,9 +0,0 @@
-<script lang="ts">
-	interface Props {
-		class?: string;
-	}
-
-	let { class: className = '' }: Props = $props();
-</script>
-
-<div class={`h-[1px] w-full bg-neutral ${className}`}></div>

package/dist/components/divider/Divider.svelte.d.ts

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

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

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

package/dist/components/divider/index.js

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

package/dist/components/drawer/Drawer.stories.svelte

@@ -1,64 +0,0 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Drawer from './Drawer.svelte';
-	import Button from '../button/Button.svelte';
-
-	const { Story } = defineMeta({
-		component: Drawer,
-		title: 'Design System/Drawer',
-		tags: ['autodocs']
-	});
-
-	let open = $state(false);
-</script>
-
-<Story name="Base">
-	<div class="py-12">
-		<Drawer id="my-drawer" bind:open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
-</Story>
-
-<Story name="Open">
-	<div class="py-12">
-		<Drawer id="my-drawer" open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
-</Story>
-
-<Story name="Open Left">
-	<div class="py-12">
-		<Drawer id="my-drawer" side="left" bind:open controlled>
-			{#snippet trigger()}
-				<Button onClick={() => (open = true)}>Open Drawer</Button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<div>
-						<p>Drawer content here</p>
-					</div>
-				</div>
-			{/snippet}
-		</Drawer>
-	</div>
-</Story>

package/dist/components/drawer/Drawer.stories.svelte.d.ts

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

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import DrawerLabel from './DrawerLabel.svelte';
-
-	interface Props {
-		id: string;
-		controlled?: boolean;
-		// Open only works when controlled is true
-		open?: boolean;
-		side?: 'left' | 'right';
-		trigger?: Snippet;
-		content: Snippet;
-	}
-
-	let {
-		id,
-		controlled = false,
-		open = $bindable(false),
-		side = 'right',
-		trigger,
-		content
-	}: Props = $props();
-</script>
-
-<div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
-	{#if controlled}
-		<input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
-	{:else}
-		<input {id} type="checkbox" class="drawer-toggle" />
-	{/if}
-
-	<div class="drawer-content">
-		{@render trigger?.()}
-	</div>
-	<div class="drawer-side" inert={controlled ? !open : false}>
-		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-		<div class="h-screen bg-base sm:w-[460px]">
-			{@render content()}
-		</div>
-	</div>
-</div>