@reshape-biotech/design-system 0.0.43 → 0.0.45

package/dist/components/drawer/DrawerLabel.svelte

@@ -14,47 +14,49 @@
 
 <style>
 	label {
-		display: flex;
 
-		width: 100%;
+    display: flex;
 
-		cursor: pointer;
+    width: 100%;
 
-		align-items: center;
+    cursor: pointer;
 
-		gap: 0.25rem;
+    align-items: center;
 
-		border-radius: 0.5rem;
+    gap: 0.25rem;
 
-		border-width: 1px;
+    border-radius: 0.5rem;
 
-		border-color: #12192a1a;
+    border-width: 1px;
 
-		--tw-bg-opacity: 1;
+    border-color: #12192A1A;
 
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
 
-		padding: 0.75rem;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-		--tw-text-opacity: 1;
+    padding: 0.75rem;
 
-		color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+    --tw-text-opacity: 1;
 
-		--tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
 
-		--tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
+    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
 
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-			var(--tw-shadow);
-	}
+    --tw-shadow-colored: 0px 1px 4px 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)
+}
 
 	label:not(:focus-within):hover {
-		border-color: #5750ee40;
-	}
+
+    border-color: #5750ee40
+}
 
 	label:focus-within {
-		--tw-border-opacity: 1;
 
-		border-color: rgb(87 80 238 / var(--tw-border-opacity, 1));
-	}
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
 </style>

package/dist/components/drawer/DrawerLabel.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	id: string;
-	classes?: string;
-	children: Snippet;
+    id: string;
+    classes?: string;
+    children: Snippet;
 }
-declare const DrawerLabel: import('svelte').Component<Props, {}, ''>;
+declare const DrawerLabel: import("svelte").Component<Props, {}, "">;
 type DrawerLabel = ReturnType<typeof DrawerLabel>;
 export default DrawerLabel;

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

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

@@ -4,29 +4,23 @@ import DropdownMenu from './components/DropdownMenu.svelte';
 import DropdownTrigger from './components/DropdownTrigger.svelte';
 import OutlinedButton from './components/OutlinedButton.svelte';
 interface Props {
-	side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
-	open?: boolean;
-	alignEnd?: boolean;
-	openOnHover?: boolean;
-	closeOnItemClick?: boolean;
-	class?: string;
-	trigger?: Snippet<
-		[
-			{
-				Trigger: typeof DropdownTrigger;
-				OutlinedButton: typeof OutlinedButton;
-			}
-		]
-	>;
-	content?: Snippet<
-		[
-			{
-				DropdownContent: typeof DropdownContent;
-				DropdownMenu: typeof DropdownMenu;
-			}
-		]
-	>;
+    side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
+    open?: boolean;
+    alignEnd?: boolean;
+    openOnHover?: boolean;
+    closeOnItemClick?: boolean;
+    class?: string;
+    trigger?: Snippet<[{
+        Trigger: typeof DropdownTrigger;
+        OutlinedButton: typeof OutlinedButton;
+    }]>;
+    content?: Snippet<[
+        {
+            DropdownContent: typeof DropdownContent;
+            DropdownMenu: typeof DropdownMenu;
+        }
+    ]>;
 }
-declare const Dropdown: import('svelte').Component<Props, {}, 'open'>;
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

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

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

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

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 type Variant = 'primary' | 'secondary';
 interface Props {
-	class?: string;
-	variant?: Variant;
-	children?: Snippet;
+    class?: string;
+    variant?: Variant;
+    children?: Snippet;
 }
-declare const DropdownContent: import('svelte').Component<Props, {}, ''>;
+declare const DropdownContent: import("svelte").Component<Props, {}, "">;
 type DropdownContent = ReturnType<typeof DropdownContent>;
 export default DropdownContent;

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

@@ -18,6 +18,6 @@
 
 <style>
 	:global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
-		background-color: #12192a1a;
-	}
+    background-color: #12192A1A
+}
 </style>

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

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

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

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
 interface Props {
-	size?: 'sm' | 'md' | 'lg';
-	class?: string;
-	variant?: Color;
-	children?: Snippet;
-	noPadding?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
 }
-declare const DropdownTrigger: import('svelte').Component<Props, {}, ''>;
+declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
 type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
 export default DropdownTrigger;

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

@@ -9,51 +9,53 @@
 	let { class: className = '', children }: Props = $props();
 </script>
 
-<button class={`${className}`}>{@render children()}</button>
+<div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
 
 <style>
-	button {
-		display: flex;
+	div {
 
-		width: 100%;
+    display: flex;
 
-		cursor: pointer;
+    width: 100%;
 
-		align-items: center;
+    cursor: pointer;
 
-		gap: 0.25rem;
+    align-items: center;
 
-		border-radius: 0.5rem;
+    gap: 0.25rem;
 
-		border-width: 1px;
+    border-radius: 0.5rem;
 
-		border-color: #12192a1a;
+    border-width: 1px;
 
-		--tw-bg-opacity: 1;
+    border-color: #12192A1A;
 
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
 
-		padding: 0.75rem;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 
-		--tw-text-opacity: 1;
+    padding: 0.75rem;
 
-		color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+    --tw-text-opacity: 1;
 
-		--tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
 
-		--tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
+    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
 
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-			var(--tw-shadow);
-	}
+    --tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
 
-	button:not(:focus-within):hover {
-		border-color: #5750ee40;
-	}
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
 
-	button:focus-within {
-		--tw-border-opacity: 1;
+	div:not(:focus-within):hover {
 
-		border-color: rgb(87 80 238 / var(--tw-border-opacity, 1));
-	}
+    border-color: #5750ee40
+}
+
+	div:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
 </style>

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

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

package/dist/components/icon-button/IconButton.stories.svelte

@@ -10,35 +10,65 @@
 	});
 </script>
 
-<Story name="Primary">
-	<IconButton color="primary">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Danger">
-	<IconButton color="danger">
-		<Plus />
-	</IconButton>
-</Story>
-<Story name="Transparent">
-	<IconButton color="transparent">
-		<Plus />
-	</IconButton>
+<Story name="Base">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="primary">
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary">
+			<Plus />
+		</IconButton>
+		<IconButton variant="danger">
+			<Plus />
+		</IconButton>
+		<IconButton variant="transparent">
+			<Plus />
+		</IconButton>
+	</div>
 </Story>
-<Story name="Secondary">
-	<IconButton color="secondary">
-		<Plus />
-	</IconButton>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="secondary" size="xs">
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary" size="sm">
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary" size="md">
+			<Plus />
+		</IconButton>
+	</div>
 </Story>
-<Story name="Medium">
-	<IconButton color="secondary" size="md">
-		<Plus />
-	</IconButton>
+<Story name="Not rounded base">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="primary" rounded={false}>
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary" rounded={false}>
+			<Plus />
+		</IconButton>
+		<IconButton variant="danger" rounded={false}>
+			<Plus />
+		</IconButton>
+		<IconButton variant="transparent" rounded={false}>
+			<Plus />
+		</IconButton>
+	</div>
 </Story>
-<Story name="Extra Small">
-	<IconButton color="secondary" size="xs">
-		<Plus />
-	</IconButton>
+
+<Story name="Not rounded sizes">
+	<div class="flex flex-col gap-2">
+		<IconButton variant="secondary" size="xs" rounded={false}>
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary" size="sm" rounded={false}>
+			<Plus />
+		</IconButton>
+		<IconButton variant="secondary" size="md" rounded={false}>
+			<Plus />
+		</IconButton>
+	</div>
 </Story>
 <Story name="Disabled">
 	<IconButton disabled>

package/dist/components/icon-button/IconButton.stories.svelte.d.ts

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