@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/components/datepicker/DatePicker.svelte

@@ -3,6 +3,7 @@
 
 	import { DateTime, type MonthNumbers } from 'luxon';
 	import { CaretLeft, CaretRight } from 'phosphor-svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
 
 	interface Props {
 		selectedDate: DateTime | undefined;
@@ -93,17 +94,13 @@
 	<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>
+				<IconButton onclick={previousMonth}
+					><CaretLeft class="text-secondary" weight="bold" size="0.75rem" /></IconButton
+				>
+				<h5>{DateTime.local(shownYear, shownMonth).toFormat('MMM yyyy')}</h5>
+				<IconButton onclick={nextMonth}
+					><CaretRight class="text-secondary" weight="bold" size="0.75rem" /></IconButton
+				>
 			</div>
 		</div>
 		<div class="calendar-body">
@@ -164,120 +161,184 @@
 
 <style>
 	.calendar-container {
-		display: flex;
-		width: 312px;
-	}
+
+    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);
+
+    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: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 0.5px rgba(18, 25, 42, 0.08);
+
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 0.5px 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;
-	}
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between
+}
 
 	.month-year .btn-custom {
-		background: none;
-		border: none;
-	}
+
+    border-style: none;
+
+    background-image: none
+}
 
 	.calendar-body {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding-top: 22px;
-		overflow-x: auto;
-	}
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    overflow-x: auto;
+
+    padding-top: 22px
+}
 
 	table {
-		width: 100%;
-		border-spacing: 0;
-		border-collapse: collapse;
-		margin: 0;
-		padding: 0;
-	}
+
+    margin: 0px;
+
+    width: 100%;
+
+    border-collapse: collapse;
+
+    --tw-border-spacing-x: 0px;
+
+    --tw-border-spacing-y: 0px;
+
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+
+    padding: 0px
+}
 
 	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));
+
+    text-align: center;
+
+    font-size: 0.75rem;
+
+    line-height: 1rem;
+
+    font-weight: 500;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	tr {
+
+    height: 2.5rem;
+
+    border-style: none
 }
 
-	td {
-		width: 40px;
-		height: 40px;
-	}
 	table th,
 	table td {
-		box-sizing: border-box;
-		padding: 0;
-		margin: 0;
-	}
+
+    margin: 0px;
+
+    border-style: none;
+
+    padding: 0px
+}
 
 	.date-container {
-		position: relative;
-	}
 
-	.date-container .current-date-indicator {
-		position: absolute;
-		top: 20px;
-		left: 18px;
-	}
+    position: relative
+}
 
 	.date {
-		display: flex;
-		cursor: pointer;
-		align-items: center;
-		justify-content: center;
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-		font-weight: 400;
+
+    display: flex;
+
+    height: 2.5rem;
+
+    width: 2.5rem;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: center;
+
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    transition-duration: 150ms
 }
 
-	.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;
+	.date:hover {
+
+    background-color: #5750ee1A
+}
+
+	.date:focus {
+
+    --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))
 }
 
 	.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;
+
+    --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))
+}
+
+	.selected-date:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1))
+}
+
+	.current-date-indicator {
+
+    position: absolute;
+
+    left: 18px;
+
+    top: 2rem
 }
 
 	.date button {
-		border: none;
-		background: none;
-	}
+
+    border-style: none;
+
+    background-image: none
+}
 </style>

package/dist/components/divider/Divider.svelte

@@ -6,4 +6,4 @@
 	let { class: className = '' }: Props = $props();
 </script>
 
-<div class={`h-[1px] w-full bg-neutral ${className}`}></div>
+<div class={`h-0 w-full border-b border-static ${className}`}></div>

package/dist/components/drawer/Drawer.svelte

@@ -34,7 +34,7 @@
 	</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]">
+		<div class="h-screen bg-surface sm:w-[460px]">
 			{@render content()}
 		</div>
 	</div>

package/dist/components/drawer/DrawerLabel.svelte

@@ -41,9 +41,9 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1));
 
-    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
 
-    --tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

package/dist/components/dropdown/components/DropdownContent.svelte

@@ -21,6 +21,9 @@
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- DaisyUI have a bug wit safari dropdown. Requires tabindex=0-->
-<div class={`z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`} tabindex="0">
+<div
+	class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
+	tabindex="0"
+>
 	{@render children?.()}
 </div>

package/dist/components/dropdown/components/DropdownMenu.svelte

@@ -11,7 +11,7 @@
 
 <ul
 	tabIndex="0"
-	class={`menu dropdown-content menu-md z-[1] rounded-md bg-surface p-1 shadow-2xl ${className}`}
+	class={`menu dropdown-content menu-md z-[1] rounded-lg bg-surface p-1 shadow-menu ${className}`}
 >
 	{@render children?.()}
 </ul>

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -6,19 +6,21 @@
 		variant?: Color;
 		children?: Snippet;
 		noPadding?: boolean;
+		iconButton?: boolean;
 	}
 	let {
 		size = 'md',
 		class: className = '',
 		variant = 'primary',
 		children,
-		noPadding = false
+		noPadding = false,
+		iconButton = false
 	}: Props = $props();
 
 	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
 
 	const sizes = $derived({
-		sm: `h-8 ${noPadding ? 'px-0' : 'px-3'} ${noPadding ? 'py-0' : 'py-2'}`,
+		sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
 		md: 'h-10 px-5 py-3',
 		lg: 'h-12 px-6 py-4'
 	});

package/dist/components/dropdown/components/DropdownTrigger.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     variant?: Color;
     children?: Snippet;
     noPadding?: boolean;
+    iconButton?: boolean;
 }
 declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
 type DropdownTrigger = ReturnType<typeof DropdownTrigger>;

package/dist/components/dropdown/components/OutlinedButton.svelte

@@ -40,9 +40,9 @@
 
     color: rgb(18 25 42 / var(--tw-text-opacity, 1));
 
-    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
 
-    --tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

package/dist/components/empty-content/EmptyContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		icon: Snippet;
+		children: Snippet;
+	};
+
+	const { icon, children }: Props = $props();
+</script>
+
+<div class="flex w-full justify-center">
+	<div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
+		{@render icon()}
+		<div class="flex w-full flex-col items-center justify-center gap-2">
+			{@render children()}
+		</div>
+	</div>
+</div>

package/dist/components/empty-content/EmptyContent.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    icon: Snippet;
+    children: Snippet;
+};
+declare const EmptyContent: import("svelte").Component<Props, {}, "">;
+type EmptyContent = ReturnType<typeof EmptyContent>;
+export default EmptyContent;

package/dist/components/graphs/chart/Chart.stories.svelte

@@ -0,0 +1,128 @@
+<script lang="ts" context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Chart from './Chart.svelte';
+	import { colors } from '../../../tokens';
+
+	const { Story } = defineMeta({
+		component: Chart,
+		title: 'Design System/Graphs/Chart',
+		tags: ['autodocs']
+	});
+</script>
+
+<script lang="ts">
+	const baseOptions = {
+		xAxis: { type: 'value' as const },
+		yAxis: { type: 'value' as const },
+		series: [
+			{
+				type: 'scatter' as const,
+				data: [
+					[10, 8.04],
+					[8.07, 6.95],
+					[13.0, 7.58]
+				]
+			}
+		]
+	};
+
+	const lineOptions = {
+		xAxis: { type: 'category' as const, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
+		yAxis: { type: 'value' as const },
+		series: [
+			{
+				type: 'line' as const,
+				data: [150, 230, 224, 218, 135]
+			}
+		]
+	};
+
+	function handleClick(params: any) {
+		console.log('Clicked:', params);
+	}
+</script>
+
+<!-- Basic Usage -->
+<Story name="Default">
+	<Chart options={baseOptions} />
+</Story>
+
+<!-- Custom Size -->
+<Story name="Custom Size">
+	<Chart options={baseOptions} width="600px" height="400px" />
+</Story>
+
+<!-- Loading State -->
+<Story name="Loading State">
+	<Chart options={baseOptions} loading={true} />
+</Story>
+
+<!-- With Events -->
+<Story name="With Click Events">
+	<Chart
+		options={baseOptions}
+		onitemclick={handleClick}
+		onmouseover={(params) => console.log('Hover:', params)}
+	/>
+</Story>
+
+<!-- Different Chart Types -->
+<Story name="Line Chart">
+	<Chart options={lineOptions} />
+</Story>
+
+<!-- Theme Example -->
+<Story name="Dark Theme">
+	<div style="background: #333; padding: 20px;">
+		<Chart
+			options={{
+				...baseOptions,
+				backgroundColor: '#333',
+				textStyle: { color: '#fff' }
+			}}
+			theme={{
+				textStyle: { color: '#fff' },
+				color: [colors.blue[5].default]
+			}}
+		/>
+	</div>
+</Story>
+
+<!-- Responsive Example -->
+<Story name="Responsive">
+	<div
+		style="resize: both; overflow: auto; min-width: 300px; min-height: 200px; border: 1px solid #ccc;"
+	>
+		<Chart options={baseOptions} autoResize={true} />
+	</div>
+</Story>
+
+<!-- Multiple Series -->
+<Story name="Multiple Series">
+	<Chart
+		options={{
+			...baseOptions,
+			series: [
+				{
+					type: 'scatter' as const,
+					data: [
+						[10, 8.04],
+						[8.07, 6.95],
+						[13.0, 7.58]
+					],
+					name: 'Series 1'
+				},
+				{
+					type: 'scatter' as const,
+					data: [
+						[9, 7.5],
+						[7.5, 6.3],
+						[12.5, 7.0]
+					],
+					name: 'Series 2'
+				}
+			],
+			legend: { data: ['Series 1', 'Series 2'] }
+		}}
+	/>
+</Story>

package/dist/components/graphs/chart/Chart.stories.svelte.d.ts

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