@reshape-biotech/design-system 0.0.52 → 1.1.1

package/dist/components/card/Card.stories.svelte.d.ts

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

package/dist/components/card/Card.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		Header?: Snippet;
+		children: Snippet;
+		headerBorder?: boolean;
+		class?: string;
+	};
+
+	const { Header, children, headerBorder = false, class: additionalClasses = '' }: Props = $props();
+</script>
+
+<div class="rounded-lg border border-static bg-surface shadow-sm {additionalClasses}">
+	{#if Header}
+		<header class="px-6 py-4" class:border-b={headerBorder} class:border-static={headerBorder}>
+			{@render Header()}
+		</header>
+	{/if}
+	{#if children}
+		<div class="p-6">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/components/card/Card.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    Header?: Snippet;
+    children: Snippet;
+    headerBorder?: boolean;
+    class?: string;
+};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

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

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

package/dist/components/card/index.js

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

package/dist/components/checkbox/Checkbox.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import Checkbox from './Checkbox.svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Checkbox,
+		title: 'Design System/Checkbox',
+		tags: ['autodocs']
+	});
+
+	let checked = $state<boolean>(false);
+</script>
+
+<Story name="Default" args={{ checked: false }} />
+
+<Story name="Checked" args={{ checked: true }} />
+
+<Story name="Unchecked" args={{ checked: false }} />
+
+<Story name="Disabled" args={{ checked: true, disabled: true }} />
+
+<Story name="Indeterminate" args={{ checked: false, indeterminate: true }} />

package/dist/components/checkbox/Checkbox.stories.svelte.d.ts

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

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Checkbox, type CheckboxRootProps } from 'bits-ui';
+	import { Icon } from '../icons';
+
+	export type CheckboxProps = CheckboxRootProps;
+
+	let { checked = $bindable(false), onCheckedChange, ...props }: CheckboxProps = $props();
+</script>
+
+<Checkbox.Root bind:checked {onCheckedChange} {...props}>
+	{#snippet children({ checked, indeterminate })}
+		<div
+			class={`flex items-center justify-center rounded border border-static ${checked ? 'bg-dark-accent-inverse-hover' : ''}`}
+		>
+			{#if checked}
+				<Icon iconName="Check" class="text-primary-inverse" />
+			{:else if indeterminate}
+				<Icon iconName="Minus" />
+			{:else}
+				<div class="h-4 w-4"></div>
+			{/if}
+		</div>
+	{/snippet}
+</Checkbox.Root>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox, type CheckboxRootProps } from 'bits-ui';
+export type CheckboxProps = CheckboxRootProps;
+declare const Checkbox: import("svelte").Component<Checkbox.RootProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

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

package/dist/components/checkbox/index.js

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

package/dist/components/collapsible/Collapsible.stories.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Root as CollapsibleRootForMeta } from './index';
 	import * as Collapsible from './index';
 	import Button from '../button/Button.svelte';
 
 	const { Story } = defineMeta({
-		component: Collapsible.Root,
+		component: CollapsibleRootForMeta,
 		title: 'Design System/Collapsible',
 		tags: ['autodocs']
 	});
@@ -12,7 +13,7 @@
 	let open = $state(false);
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<Collapsible.Root class="w-[200px]">
 		<Collapsible.Trigger class="w-full">
 			<h6>Trigger</h6>
@@ -22,7 +23,7 @@
 	</Collapsible.Root>
 </Story>
 
-<Story name="Without Icon">
+<Story name="Without Icon" asChild>
 	<Collapsible.Root class="w-[200px]">
 		<Collapsible.Trigger class="w-full" withIcon={false}>
 			<h6>Trigger</h6>
@@ -32,7 +33,7 @@
 	</Collapsible.Root>
 </Story>
 
-<Story name="Controlled">
+<Story name="Controlled" asChild>
 	<Button onClick={() => (open = !open)}>Outside Trigger</Button>
 	<Collapsible.Root class="w-[200px]" {open}>
 		<Collapsible.Content>Content</Collapsible.Content>

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -10,7 +10,7 @@
 	<div class="container">
 		{@render children()}
 		{#if withIcon}
-			<Icon iconName="CaretDown" class="icon" />
+			<Icon iconName="CaretDown" class="icon z-[-1]" />
 		{/if}
 	</div>
 </Collapsible.Trigger>

package/dist/components/combobox/Combobox.stories.svelte

@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { expect, userEvent, within } from '@storybook/test';
+	import { userEvent, within } from '@storybook/test';
+	import { Root as ComboboxRootForMeta } from './index';
 	import * as Combobox from './index';
 	import { Icon } from '../icons';
 	import IconButton from '../icon-button/IconButton.svelte';
@@ -9,7 +10,7 @@
 	import Button from '../button/Button.svelte';
 
 	const { Story } = defineMeta({
-		component: Combobox.Root,
+		component: ComboboxRootForMeta,
 		title: 'Design System/Combobox',
 		tags: ['autodocs'],
 		parameters: {
@@ -110,7 +111,7 @@
 	let customAnchorCustom = $state<HTMLElement>(null!);
 </script>
 
-<Story name="Multiple Selection">
+<Story name="Multiple Selection" asChild>
 	<Combobox.Root
 		onOpenChange={(o) => {
 			if (!o) searchValue = '';
@@ -179,7 +180,7 @@
 	</Combobox.Root>
 </Story>
 
-<Story name="Single Selection">
+<Story name="Single Selection" asChild>
 	<Combobox.Root
 		onOpenChange={(o) => {
 			if (!o) searchValueSingle = '';
@@ -220,7 +221,7 @@
 	</Combobox.Root>
 </Story>
 
-<Story name="Grouped Items">
+<Story name="Grouped Items" asChild>
 	<Combobox.Root
 		onOpenChange={(o) => {
 			if (!o) searchValueGrouped = '';
@@ -298,6 +299,7 @@
 
 <Story
 	name="Interaction Test"
+	asChild
 	play={async ({ canvasElement }) => {
 		// Get the canvas element
 		const canvas = within(canvasElement);

package/dist/components/combobox/components/combobox-add.svelte

@@ -9,12 +9,13 @@
 </script>
 
 <button {...props}>
-	<Icon iconName="Plus" />
+	<Icon iconName="Plus" class="text-icon-secondary" />
 	{@render children()}
 </button>
 
 <style>
 	button {
+    margin-left: 0.5rem;
     display: flex;
     height: 2.5rem;
     flex-direction: row;

package/dist/components/combobox/components/combobox-content.svelte

@@ -8,12 +8,15 @@
 		class: className,
 		showScroll = true,
 		portalled = true,
+		header,
+		footer,
 		...props
 	}: ComboboxContentProps = $props();
 </script>
 
 {#snippet content()}
 	<Combobox.Content {...props} class={className}>
+		{@render header?.()}
 		{#if showScroll}
 			<Combobox.ScrollUpButton class="flex justify-center">
 				<Icon iconName="CaretUp" />
@@ -27,6 +30,7 @@
 		{:else}
 			{@render children()}
 		{/if}
+		{@render footer?.()}
 	</Combobox.Content>
 {/snippet}
 

package/dist/components/combobox/types.d.ts

@@ -5,6 +5,8 @@ export type ComboboxContentProps = {
     children: Snippet;
     showScroll?: boolean;
     portalled?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
 } & BitsComboboxContentProps;
 export type ComboboxTriggerProps = {
     children: Snippet;

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -49,19 +49,11 @@
 	}
 </script>
 
-<Story name="Default">
-	<div class="p-4">
-		<DatePicker bind:selectedDate />
-	</div>
-</Story>
+<Story name="Default" args={{ selectedDate: undefined }} />
 
-<Story name="With Selected Date">
-	<div class="p-4">
-		<DatePicker selectedDate={DateTime.local(2023, 10, 15)} />
-	</div>
-</Story>
+<Story name="With Selected Date" args={{ selectedDate: DateTime.local(2023, 10, 15) }} />
 
-<Story name="With Date Change Handler">
+<Story name="With Date Change Handler" asChild>
 	<div class="p-4">
 		<div class="mb-4">
 			<DatePicker {selectedDate} onClick={handleDateSelection} />
@@ -74,7 +66,7 @@
 	</div>
 </Story>
 
-<Story name="Month Navigation">
+<Story name="Month Navigation" asChild>
 	<div class="p-4">
 		<DatePicker selectedDate={DateTime.local()} />
 		<div class="mt-4 text-sm text-tertiary">
@@ -85,6 +77,7 @@
 
 <Story
 	name="Interaction Test"
+	asChild
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
@@ -120,7 +113,7 @@
 	</div>
 </Story>
 
-<Story name="Multiple DatePickers">
+<Story name="Multiple DatePickers" asChild>
 	<div class="flex flex-col gap-4 p-4 md:flex-row">
 		<div>
 			<h3 class="mb-2 text-sm font-medium">Start Date</h3>
@@ -133,7 +126,7 @@
 	</div>
 </Story>
 
-<Story name="In Dropdown">
+<Story name="In Dropdown" asChild>
 	<div class="p-4">
 		<Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
 			{#snippet trigger({ Trigger })}
@@ -158,6 +151,7 @@
 
 <Story
 	name="Form Submit Prevention Test"
+	asChild
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 

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

@@ -9,6 +9,4 @@
 	});
 </script>
 
-<Story name="Primary">
-	<Divider />
-</Story>
+<Story name="Primary" />

package/dist/components/divider/Divider.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	interface Props {
 		class?: string;
+		vertical?: boolean;
+		inverse?: boolean;
 	}
 
-	let { class: className = '' }: Props = $props();
+	let { class: className = '', vertical = false, inverse = false }: Props = $props();
 </script>
 
-<div class={`h-0 w-full border-b border-static ${className}`}></div>
+<div
+	class={`${
+		vertical ? 'h-full w-0 border-l' : 'h-0 w-full border-b'
+	} ${inverse ? 'border-static-inverse' : 'border-static'} ${className}`}
+></div>

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

@@ -1,5 +1,7 @@
 interface Props {
     class?: string;
+    vertical?: boolean;
+    inverse?: boolean;
 }
 declare const Divider: import("svelte").Component<Props, {}, "">;
 type Divider = ReturnType<typeof Divider>;

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

@@ -12,7 +12,7 @@
 	let open = $state(false);
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="py-12">
 		<Drawer id="my-drawer" bind:open controlled>
 			{#snippet trigger()}
@@ -29,7 +29,7 @@
 	</div>
 </Story>
 
-<Story name="Open">
+<Story name="Open" asChild>
 	<div class="py-12">
 		<Drawer id="my-drawer" open controlled>
 			{#snippet trigger()}
@@ -46,7 +46,7 @@
 	</div>
 </Story>
 
-<Story name="Open Left">
+<Story name="Open Left" asChild>
 	<div class="py-12">
 		<Drawer id="my-drawer" side="left" bind:open controlled>
 			{#snippet trigger()}

package/dist/components/dropdown/Dropdown.stories.svelte

@@ -9,7 +9,7 @@
 	});
 </script>
 
-<Story name="Primary">
+<Story name="Primary" asChild>
 	<div class="py-12">
 		<Dropdown>
 			{#snippet trigger({ Trigger })}
@@ -31,7 +31,7 @@
 	</div>
 </Story>
 
-<Story name="OutlinedButton">
+<Story name="OutlinedButton" asChild>
 	<div class="py-12">
 		<Dropdown>
 			{#snippet trigger({ OutlinedButton })}
@@ -53,7 +53,7 @@
 	</div>
 </Story>
 
-<Story name="Secondary">
+<Story name="Secondary" asChild>
 	<div class="py-12">
 		<Dropdown>
 			{#snippet trigger({ Trigger })}
@@ -74,7 +74,7 @@
 		</Dropdown>
 	</div>
 </Story>
-<Story name="Transparent">
+<Story name="Transparent" asChild>
 	<div class="py-12">
 		<Dropdown>
 			{#snippet trigger({ Trigger })}
@@ -95,7 +95,7 @@
 		</Dropdown>
 	</div>
 </Story>
-<Story name="Danger">
+<Story name="Danger" asChild>
 	<div class="py-12">
 		<Dropdown>
 			{#snippet trigger({ Trigger })}
@@ -117,7 +117,7 @@
 	</div>
 </Story>
 
-<Story name="Sides">
+<Story name="Sides" asChild>
 	<div class="flex h-screen w-full items-center justify-center">
 		<div class="flex flex-1 justify-between">
 			<Dropdown open side="dropdown-bottom">
@@ -193,7 +193,7 @@
 	</div>
 </Story>
 
-<Story name="End align">
+<Story name="End align" asChild>
 	<div class="py-12">
 		<Dropdown alignEnd open>
 			{#snippet trigger({ Trigger })}
@@ -215,7 +215,7 @@
 	</div>
 </Story>
 
-<Story name="Other content">
+<Story name="Other content" asChild>
 	<div class="py-12">
 		<Dropdown alignEnd open>
 			{#snippet trigger({ Trigger })}

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

@@ -10,7 +10,7 @@
 	});
 </script>
 
-<Story name="Default">
+<Story name="Default" asChild>
 	<div class="w-full bg-surface p-12">
 		<EmptyContent>
 			{#snippet icon()}
@@ -28,7 +28,7 @@
 	</div>
 </Story>
 
-<Story name="With Different Icon">
+<Story name="With Different Icon" asChild>
 	<div class="w-full bg-surface p-12">
 		<EmptyContent>
 			{#snippet icon()}

package/dist/components/graphs/bar-chart/BarChart.stories.svelte

@@ -0,0 +1,81 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { textColor } from '../../../tokens';
+	import BarChart from './BarChart.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Graphs/BarChart',
+		component: BarChart,
+		tags: ['autodocs'],
+		argTypes: {
+			// Define argTypes for props if needed, e.g., for controls
+		}
+	});
+
+	const simpleData = [
+		{ category: 'A', value: 10 },
+		{ category: 'B', value: 20 },
+		{ category: 'C', value: 15 },
+		{ category: 'D', value: 25 },
+		{ category: 'E', value: 30 }
+	];
+
+	const longerLabelsData = [
+		{ longCategoryName: 'Very Long Label One', value: 45 },
+		{ longCategoryName: 'Another Quite Long Label', value: 35 },
+		{ longCategoryName: 'Short', value: 55 },
+		{ longCategoryName: 'Label Four Is Also Lengthy', value: 25 },
+		{ longCategoryName: 'Fifth Label Is Here', value: 65 }
+	];
+
+	const customColorData = [
+		{ category: 'Apple', value: 50 },
+		{ category: 'Banana', value: 70 },
+		{ category: 'Cherry', value: 60 },
+		{ category: 'Date', value: 40 }
+	];
+
+	const customColors = {
+		Apple: '#ff6b6b', // Red
+		Banana: '#feca57', // Yellow
+		Cherry: '#ff9ff3', // Pink
+		Date: '#a4b0be' // Grey
+	};
+</script>
+
+<Story
+	name="Base"
+	args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Count', height: '400px' }}
+/>
+
+<Story
+	name="Custom Y-Axis Name"
+	args={{ data: simpleData, xAxisName: 'category', yAxisName: 'Units Sold', height: '400px' }}
+/>
+
+<Story
+	name="With Custom Colors"
+	args={{
+		data: customColorData,
+		xAxisName: 'category',
+		yAxisName: 'Fruit Amount',
+		colors: customColors,
+		height: '400px'
+	}}
+/>
+
+<Story
+	name="With Rotated Labels"
+	args={{
+		data: longerLabelsData,
+		xAxisName: 'longCategoryName',
+		yAxisName: 'Measurement',
+		rotateXAxisLabels: true,
+		height: '400px'
+	}}
+/>
+
+<Story
+	name="Empty Data"
+	args={{ data: [], xAxisName: 'category', yAxisName: 'Value', height: '400px' }}
+/>

package/dist/components/graphs/bar-chart/BarChart.stories.svelte.d.ts

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