@reshape-biotech/design-system 0.0.37 → 0.0.39

package/README.md

@@ -19,7 +19,7 @@ This package contains the core design system for Reshape Biotech frontend projec
 
 1. **Component Library**
 
-   - A collection of shared, reusable React components
+   - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 

package/dist/components/button/Button.svelte

@@ -40,24 +40,8 @@
 		| 'outline'
 		| 'secondary-inverse';
 
-	const Variants: Record<Variant, string> = {
-		primary: 'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover ',
-		secondary: 'bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral',
-		transparent: 'bg-transparent text-primary hover:bg-neutral active:red',
-		danger: 'bg-danger-inverse text-primary-inverse hover:bg-danger-inverse-hover ',
-		outline:
-			'bg-transparent text-primary border border-interactive hover:bg-neutral-hover disabled:border-none',
-		'secondary-inverse':
-			'bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse'
-	};
-
-	const sizes = {
-		sm: 'h-8 px-3 py-2',
-		md: 'h-10 px-5 py-3',
-		lg: 'h-12 px-6 py-4'
-	};
-	let sizeClassName = $derived(sizes[size]);
-	let colorClassName = $derived(Variants[variant]);
+	let variantClass = $derived(`btn-${variant}`);
+	let sizeClass = $derived(`btn-size-${size}`);
 </script>
 
 <button
@@ -74,7 +58,7 @@
 	{id}
 	{tabindex}
 	class:cursor-wait={loading}
-	class="inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 duration-150 disabled:bg-neutral disabled:text-tertiary {colorClassName} {sizeClassName} {className}"
+	class="button {variantClass} {sizeClass} {className}"
 	data-testid={dataTestId}
 >
 	{#if loading}
@@ -83,3 +67,110 @@
 		{@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/drawer/Drawer.stories.svelte

@@ -1,6 +1,7 @@
 <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,
@@ -8,18 +9,14 @@
 		tags: ['autodocs']
 	});
 
-	let open = false;
+	let open = $state(false);
 </script>
 
 <Story name="Base">
 	<div class="py-12">
-		<Drawer id="my-drawer">
-			{#snippet trigger({ DrawerLabel })}
-				<div>
-					<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
-						>Open Drawer
-					</DrawerLabel>
-				</div>
+		<Drawer id="my-drawer" bind:open controlled>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
 			{/snippet}
 			{#snippet content()}
 				<div>
@@ -35,10 +32,8 @@
 <Story name="Open">
 	<div class="py-12">
 		<Drawer id="my-drawer" open controlled>
-			{#snippet trigger({ DrawerLabel })}
-				<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
-					>Open Drawer
-				</DrawerLabel>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
 			{/snippet}
 			{#snippet content()}
 				<div>
@@ -53,11 +48,9 @@
 
 <Story name="Open Left">
 	<div class="py-12">
-		<Drawer id="my-drawer" side="left">
-			{#snippet trigger({ DrawerLabel })}
-				<DrawerLabel id="my-drawer" classes="btn btn-primary rounded-full "
-					>Open Drawer
-				</DrawerLabel>
+		<Drawer id="my-drawer" side="left" bind:open controlled>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
 			{/snippet}
 			{#snippet content()}
 				<div>

package/dist/components/drawer/Drawer.svelte

@@ -8,7 +8,7 @@
 		// Open only works when controlled is true
 		open?: boolean;
 		side?: 'left' | 'right';
-		trigger?: Snippet<[{ DrawerLabel: typeof DrawerLabel }]>;
+		trigger?: Snippet;
 		content: Snippet;
 	}
 
@@ -30,7 +30,7 @@
 	{/if}
 
 	<div class="drawer-content">
-		{@render trigger?.({ DrawerLabel })}
+		{@render trigger?.()}
 	</div>
 	<div class="drawer-side" inert={controlled ? !open : false}>
 		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>

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

@@ -1,13 +1,10 @@
 import type { Snippet } from 'svelte';
-import DrawerLabel from './DrawerLabel.svelte';
 interface Props {
     id: string;
     controlled?: boolean;
     open?: boolean;
     side?: 'left' | 'right';
-    trigger?: Snippet<[{
-        DrawerLabel: typeof DrawerLabel;
-    }]>;
+    trigger?: Snippet;
     content: Snippet;
 }
 declare const Drawer: import("svelte").Component<Props, {}, "open">;

package/dist/components/drawer/DrawerLabel.svelte

@@ -4,10 +4,59 @@
 	interface Props {
 		id: string;
 		classes?: string;
-		children?: Snippet;
+		children: Snippet;
 	}
 
 	let { id, classes = '', children }: Props = $props();
 </script>
 
-<label for={id} class={`${classes} drawer-button`}>{@render children?.()}</label>
+<label for={id} class={`${classes}`}>{@render children()}</label>
+
+<style>
+	label {
+
+    display: flex;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    gap: 0.25rem;
+
+    border-radius: 0.5rem;
+
+    border-width: 1px;
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 0.75rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+
+    --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
+}
+
+	label:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
+</style>

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

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

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

@@ -31,6 +31,28 @@
 	</div>
 </Story>
 
+<Story name="OutlinedButton">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ OutlinedButton })}
+				<OutlinedButton>Dropdown</OutlinedButton>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
 <Story name="Secondary">
 	<div class="py-12">
 		<Dropdown>

package/dist/components/dropdown/Dropdown.svelte

@@ -3,6 +3,7 @@
 	import DropdownContent from './components/DropdownContent.svelte';
 	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';
@@ -11,7 +12,7 @@
 		openOnHover?: boolean;
 		closeOnItemClick?: boolean;
 		class?: string;
-		trigger?: Snippet<[{ Trigger: typeof DropdownTrigger }]>;
+		trigger?: Snippet<[{ Trigger: typeof DropdownTrigger; OutlinedButton: typeof OutlinedButton }]>;
 		content?: Snippet<
 			[{ DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu }]
 		>;
@@ -55,7 +56,7 @@
 	class:dropdown-open={open}
 	class:dropdown-hover={openOnHover}
 >
-	{@render trigger?.({ Trigger: DropdownTrigger })}
+	{@render trigger?.({ Trigger: DropdownTrigger, OutlinedButton: OutlinedButton })}
 	<div
 		class="dropdown-content z-10 w-full"
 		role="menu"

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

@@ -2,6 +2,7 @@ import type { Snippet } from 'svelte';
 import DropdownContent from './components/DropdownContent.svelte';
 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;
@@ -11,6 +12,7 @@ interface Props {
     class?: string;
     trigger?: Snippet<[{
         Trigger: typeof DropdownTrigger;
+        OutlinedButton: typeof OutlinedButton;
     }]>;
     content?: Snippet<[
         {

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		classes?: string;
+		children: Snippet;
+	}
+
+	let { classes = '', children }: Props = $props();
+</script>
+
+<button class={`${classes}`}>{@render children()}</button>
+
+<style>
+	button {
+
+    display: flex;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    gap: 0.25rem;
+
+    border-radius: 0.5rem;
+
+    border-width: 1px;
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 0.75rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
+
+    --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)
+}
+
+	button:not(:focus-within):hover {
+
+    border-color: #5750ee40
+}
+
+	button: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

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

package/dist/components/input/Input.svelte

@@ -67,9 +67,8 @@
 		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
 	{/if}
 	<div
-		class="flex w-full items-center gap-1 rounded-lg border border-transparent bg-surface p-3"
+		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface p-3 shadow-input"
 		class:!border-error={!valid}
-		class:focus-within:border-focus={valid}
 	>
 		{#if type === 'textarea'}
 			<textarea
@@ -122,10 +121,27 @@
 <style>
 	input,
 	textarea {
+
     width: 100%;
+
     resize: none;
+
     overflow: hidden;
+
     outline: 2px solid transparent;
+
     outline-offset: 2px
 }
+
+	div:not(:focus-within):hover {
+
+    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/logo/Logo.stories.svelte

@@ -0,0 +1,21 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logo from './Logo.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Logo',
+		component: Logo,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<div class="flex flex-col gap-4">
+		<Logo size="xs" />
+		<Logo size="sm" />
+		<Logo size="md" />
+		<Logo size="lg" />
+		<Logo size="xl" />
+	</div>
+</Story>

package/dist/components/logo/Logo.stories.svelte.d.ts

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	type Props = {
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	};
+
+	let { size = 'md' }: Props = $props();
+
+	const sizeMap = {
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 32,
+		xl: 40
+	};
+</script>
+
+<svg
+	width={sizeMap[size]}
+	height={sizeMap[size]}
+	viewBox={`0 0 24 24`}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
+		fill="#FF7A00"
+	/>
+	<path
+		d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
+		fill="#FF7A00"
+	/>
+	<path
+		d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
+		fill="#FF7A00"
+	/>
+</svg>

package/dist/components/logo/Logo.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/components/select/Select.svelte

@@ -1,7 +1,7 @@
 <!-- @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, textColor } from '../../tokens';
+	import { backgroundColor, borderColor, textColor } from '../../tokens';
 	import { CaretDown, X } from 'phosphor-svelte';
 	import { createEventDispatcher } from 'svelte';
 	let className = '';
@@ -71,9 +71,10 @@
 	--item-is-active-bg={backgroundColor['accent']}
 	--item-is-active-color={textColor['primary']}
 	--item-hover-bg={backgroundColor['neutral']}
-	--border="0"
-	--border-hover="0"
-	--border-focused="0"
+	--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" />

package/dist/components/toggle/Toggle.stories.svelte

@@ -0,0 +1,15 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Toggle from './Toggle.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Toggle',
+		component: Toggle,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<Toggle id="toggle-1" />
+</Story>

package/dist/components/toggle/Toggle.stories.svelte.d.ts

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		value?: boolean;
+		onclick?: (event?: MouseEvent) => void;
+		id: string;
+	}
+
+	let { value = $bindable(false), onclick, id }: Props = $props();
+</script>
+
+<label class="switch">
+	<input type="checkbox" bind:checked={value} {onclick} {id} />
+	<span class="slider round"></span>
+</label>
+
+<style>
+	/* The switch - the box around the slider */
+	.switch {
+		position: relative;
+		display: inline-block;
+		height: 1.25rem;
+		width: 2.25rem;
+}
+
+	/* Hide default HTML checkbox */
+	.switch input {
+		height: 0px;
+		width: 0px;
+		opacity: 0;
+}
+
+	/* The slider */
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transition: 0.1s;
+		background-color: #12192A26;
+	}
+
+	.slider:before {
+		content: '';
+		left: 2px;
+		bottom: 2px;
+		transition: 0.1s;
+		position: absolute;
+		height: 1rem;
+		width: 1rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+	}
+
+	input:checked + .slider {
+		--tw-bg-opacity: 1;
+		background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+}
+
+	input:checked + .slider:before {
+		transform: translateX(16px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+		border-radius: var(--rounded-badge, 1.9rem);
+}
+
+	.slider.round:before {
+		border-radius: 9999px;
+}
+</style>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Toggle: import("svelte").Component<{
+    value?: boolean;
+    onclick?: (event?: MouseEvent) => void;
+    id: string;
+}, {}, "value">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -2,7 +2,6 @@
 	import Tooltip from './Tooltip.svelte';
 
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-
 	const { Story } = defineMeta({
 		component: Tooltip,
 		title: 'Design System/Tooltip',

package/dist/tailwind-safelist.js

@@ -74,6 +74,7 @@ export const borders = [
 	'border-hover',
 	'border-focus',
 	'border-danger',
+	'border-input',
 	'border-transparent'
 ];
 
@@ -85,6 +86,7 @@ export const shadows = [
 	'shadow-calendar',
 	'shadow-container',
 	'shadow-panel',
+	'shadow-input',
 	'shadow-outline',
 	'shadow-focus'
 ];

package/dist/tailwind.preset.d.ts

@@ -238,6 +238,7 @@ declare const config: {
                 'dark-focus': string;
                 'dark-danger': string;
                 static: string;
+                input: string;
                 interactive: string;
                 hover: string;
                 focus: string;
@@ -277,6 +278,7 @@ declare const config: {
                 danger: string;
             };
             boxShadow: {
+                input: string;
                 field: string;
                 nav: string;
                 calendar: string;

package/dist/tokens.d.ts

@@ -163,6 +163,7 @@ export declare const borderColor: {
     'dark-focus': string;
     'dark-danger': string;
     static: string;
+    input: string;
     interactive: string;
     hover: string;
     focus: string;
@@ -272,6 +273,7 @@ export declare const backgroundColor: {
     'sky-inverse-hover': string;
 };
 export declare const boxShadow: {
+    input: string;
     field: string;
     nav: string;
     calendar: string;
@@ -446,6 +448,7 @@ export declare const tokens: {
         'dark-focus': string;
         'dark-danger': string;
         static: string;
+        input: string;
         interactive: string;
         hover: string;
         focus: string;
@@ -555,6 +558,7 @@ export declare const tokens: {
         'sky-inverse-hover': string;
     };
     boxShadow: {
+        input: string;
         field: string;
         nav: string;
         calendar: string;

package/dist/tokens.js

@@ -122,6 +122,7 @@ const lightIconColor = {
 };
 const lightBorderColor = {
     static: colors.base.midnight[5],
+    input: colors.base.midnight[10],
     interactive: colors.base.midnight[15],
     hover: colors.periwinkle[5][25],
     focus: colors.periwinkle[5].default,
@@ -248,6 +249,7 @@ export const backgroundColor = {
     ...darkBackgroundColor
 };
 export const boxShadow = {
+    input: `0px 1px 4px 0px ${colors.shadow[4]}`,
     field: `0px 8px 12px 0px ${colors.shadow[4]}`,
     nav: `0px 0px 24px 0px ${colors.shadow[12]}`,
     calendar: `0px 16px 24px 0px ${colors.shadow[16]}`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.37",
+	"version": "0.0.39",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",