@reshape-biotech/design-system 0.0.52 → 0.0.54

package/dist/components/activity/Activity.svelte

@@ -2,7 +2,16 @@
 	import { Icon, type IconName } from '../icons';
 	import { DateTime } from 'luxon';
 
-	type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+	type ActivityIcon =
+		| 'add'
+		| 'capture'
+		| 'delete'
+		| 'edit'
+		| 'failed'
+		| 'pause'
+		| 'start'
+		| 'stop'
+		| 'success';
 
 	type Activity = {
 		activity_type?: string;
@@ -22,13 +31,14 @@
 
 	const ACTIVITY_ICONS: Record<ActivityIcon, IconName> = {
 		add: 'Plus',
+		capture: 'Aperture',
+		delete: 'Trash',
 		edit: 'Pencil',
-		success: 'CheckFat',
-		start: 'Play',
+		failed: 'WarningCircle',
 		pause: 'Pause',
+		start: 'Play',
 		stop: 'Stop',
-		delete: 'Trash',
-		failed: 'WarningCircle'
+		success: 'CheckFat'
 	};
 
 	function formatDateTime(timestamp: string): string {

package/dist/components/activity/Activity.svelte.d.ts

@@ -1,4 +1,4 @@
-type ActivityIcon = 'add' | 'edit' | 'success' | 'start' | 'pause' | 'stop' | 'delete' | 'failed';
+type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'success';
 type Activity = {
     activity_type?: string;
     icon: ActivityIcon;

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

@@ -0,0 +1,30 @@
+<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">
+	<div class="p-4">
+		<Checkbox bind:checked />
+	</div>
+</Story>
+
+<Story name="Checked">
+	<div class="p-4">
+		<Checkbox checked={true} />
+	</div>
+</Story>
+
+<Story name="Unchecked">
+	<div class="p-4">
+		<Checkbox checked={false} />
+	</div>
+</Story>

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 } from 'bits-ui';
+	import { Icon } from '../icons';
+
+	type Props = {
+		checked: boolean;
+	};
+
+	let { checked = $bindable(false) }: Props = $props();
+</script>
+
+<Checkbox.Root bind:checked>
+	{#snippet children({ checked })}
+		<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}
+				<div class="h-4 w-4"></div>
+			{/if}
+		</div>
+	{/snippet}
+</Checkbox.Root>

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

@@ -0,0 +1,7 @@
+import { Checkbox } from 'bits-ui';
+type Props = {
+    checked: boolean;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "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/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/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/icons/index.d.ts

@@ -2,7 +2,7 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'Calendar' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'RadioButton' | 'SealQuestion' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'Calendar' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'RadioButton' | 'SealQuestion' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type IconColor = keyof typeof textColor;

package/dist/components/icons/index.js

@@ -1,3 +1,4 @@
+import Aperture from 'phosphor-svelte/lib/Aperture';
 import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
 import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
 import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
@@ -96,6 +97,7 @@ import WarningCircle from 'phosphor-svelte/lib/WarningCircle';
 import WifiSlash from 'phosphor-svelte/lib/WifiSlash';
 import X from 'phosphor-svelte/lib/X';
 export const iconMap = {
+    Aperture,
     ArrowFatLineRight,
     ArrowRight,
     ArrowUpRight,

package/dist/components/tag/Tag.stories.svelte

@@ -8,6 +8,21 @@
 		title: 'Design System/Tag',
 		tags: ['autodocs']
 	});
+
+	const variants = [
+		'default',
+		'transparent',
+		'default-inverse',
+		'orange',
+		'sky',
+		'pink',
+		'lime',
+		'lilac',
+		'pear',
+		'blue',
+		'accent',
+		'warning'
+	];
 </script>
 
 <Story name="Default">
@@ -49,3 +64,19 @@
 		<Tag variant="transparent" onclick={() => {}}>Transparent</Tag>
 	</div>
 </Story>
+
+<Story name="Variants">
+	{#each variants as variant}
+		<div class="w-fit">
+			<Tag variant={variant as any}>{variant}</Tag>
+		</div>
+	{/each}
+</Story>
+
+<Story name="Button variants">
+	{#each variants as variant}
+		<div class="w-fit">
+			<Tag variant={variant as any} onclick={() => {}}>Click me</Tag>
+		</div>
+	{/each}
+</Story>

package/dist/components/tag/Tag.svelte

@@ -4,7 +4,20 @@
 
 	interface Props {
 		children: Snippet;
-		variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
+		variant?:
+			| 'default'
+			| 'outline'
+			| 'transparent'
+			| 'default-inverse'
+			| 'orange'
+			| 'sky'
+			| 'pink'
+			| 'lime'
+			| 'lilac'
+			| 'pear'
+			| 'blue'
+			| 'accent'
+			| 'warning';
 		size?: 'sm' | 'md';
 		tooltip?: string;
 		onclick?: (event: MouseEvent) => void;
@@ -30,14 +43,32 @@
 		default: 'bg-neutral text-primary',
 		outline: 'bg-transparent text-secondary border',
 		transparent: 'bg-transparent text-secondary',
-		'default-inverse': 'bg-base-inverse text-secondary-inverse'
+		'default-inverse': 'bg-base-inverse text-secondary-inverse',
+		orange: 'bg-orange text-orange',
+		sky: 'bg-sky text-sky',
+		pink: 'bg-pink text-pink',
+		lime: 'bg-lime text-lime',
+		lilac: 'bg-lilac text-lilac',
+		pear: 'bg-pear text-pear',
+		blue: 'bg-blue text-blue',
+		accent: 'bg-accent text-accent',
+		warning: 'bg-warning text-warning'
 	};
 
 	const buttonClassVariants = {
 		default: 'hover:bg-neutral-hover',
 		outline: 'hover:bg-neutral hover:text-primary',
 		transparent: 'hover:bg-neutral hover:text-primary',
-		'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse'
+		'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse',
+		orange: 'hover:bg-orange-hover hover:text-orange-hover',
+		sky: 'hover:bg-sky-hover hover:text-sky-hover',
+		pink: 'hover:bg-pink-hover hover:text-pink-hover',
+		lime: 'hover:bg-lime-hover hover:text-lime-hover',
+		lilac: 'hover:bg-lilac-hover hover:text-lilac-hover',
+		pear: 'hover:bg-pear-hover hover:text-pear-hover',
+		blue: 'hover:bg-blue-hover hover:text-blue-hover',
+		accent: 'hover:bg-accent-hover hover:text-accent-hover',
+		warning: 'hover:bg-warning-hover hover:text-warning-hover'
 	};
 
 	let variantClassName = $derived(variants[variant]);

package/dist/components/tag/Tag.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
-    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
+    variant?: 'default' | 'outline' | 'transparent' | 'default-inverse' | 'orange' | 'sky' | 'pink' | 'lime' | 'lilac' | 'pear' | 'blue' | 'accent' | 'warning';
     size?: 'sm' | 'md';
     tooltip?: string;
     onclick?: (event: MouseEvent) => void;

package/dist/components/toggle-icon-button/ToggleIconButton.stories.svelte

@@ -0,0 +1,173 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ToggleIconButton from './ToggleIconButton.svelte';
+	import { Icon } from '../icons';
+
+	const { Story } = defineMeta({
+		component: ToggleIconButton,
+		title: 'Design System/ToggleIconButton',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="States">
+	<div class="flex flex-col gap-4">
+		<div class="bg-neutral-dark flex gap-4 p-4">
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-sm">Normal</p>
+				<ToggleIconButton variant="primary-inverse">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-sm">Active</p>
+				<ToggleIconButton variant="primary-inverse" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Variants">
+	<div class="flex flex-col gap-4">
+		<div class="flex gap-8">
+			<div class="flex flex-col gap-2">
+				<p class="text-sm">Primary Inverse</p>
+				<div class="flex gap-4">
+					<ToggleIconButton variant="primary-inverse">
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+					<ToggleIconButton variant="primary-inverse" isActive={true}>
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+				</div>
+			</div>
+		</div>
+		<div class="flex gap-8">
+			<div class="flex flex-col gap-2">
+				<p class="text-sm">Secondary</p>
+				<div class="flex gap-4">
+					<ToggleIconButton variant="secondary">
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+					<ToggleIconButton variant="secondary" isActive={true}>
+						<Icon iconName="DownloadSimple" />
+					</ToggleIconButton>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Sizes">
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">XS</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="xs">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="xs" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">SM</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="sm">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="sm" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">MD</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="md">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="md" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">LG</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" size="lg">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" size="lg" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Rounded vs Square">
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Rounded</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" rounded>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" rounded isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Square</p>
+			<div class="flex gap-4">
+				<ToggleIconButton variant="primary-inverse" rounded={false}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+				<ToggleIconButton variant="primary-inverse" rounded={false} isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Primary Inverse Example">
+	<div class="bg-neutral-dark p-8">
+		<div class="flex gap-8">
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-neutral-light text-sm">Normal</p>
+				<ToggleIconButton variant="primary-inverse">
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+			<div class="flex flex-col items-center gap-2">
+				<p class="text-neutral-light text-sm">Active</p>
+				<ToggleIconButton variant="primary-inverse" isActive={true}>
+					<Icon iconName="DownloadSimple" />
+				</ToggleIconButton>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Disabled and Loading">
+	<div class="flex gap-8">
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Disabled</p>
+			<ToggleIconButton disabled>
+				<Icon iconName="DownloadSimple" />
+			</ToggleIconButton>
+		</div>
+		<div class="flex flex-col items-center gap-2">
+			<p class="text-sm">Loading</p>
+			<ToggleIconButton loading>
+				<Icon iconName="DownloadSimple" />
+			</ToggleIconButton>
+		</div>
+	</div>
+</Story>

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

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

package/dist/components/toggle-icon-button/ToggleIconButton.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Spinner } from '../spinner/';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	type Variant = 'primary-inverse' | 'secondary';
+	interface Props {
+		variant?: Variant;
+		loading?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		children?: Snippet;
+		rounded?: boolean;
+		isActive?: boolean;
+	}
+
+	type ToggleIconButtonProps = Props & HTMLButtonAttributes;
+
+	let {
+		variant = 'secondary',
+		type = 'button',
+		loading = false,
+		disabled = false,
+		size = 'sm',
+		children,
+		onclick,
+		rounded = false,
+		isActive = $bindable(false),
+		...rest
+	}: ToggleIconButtonProps = $props();
+
+	// Size class mappings
+	const sizeClasses = {
+		xs: 'h-6 w-6',
+		sm: 'h-8 w-8',
+		md: 'h-10 w-10',
+		lg: 'h-12 w-12'
+	};
+
+	// SVG size class mappings - used for styling the container that will affect child SVGs
+	const svgContainerClasses = {
+		xs: 'has-[svg]:children:h-4 has-[svg]:children:w-4',
+		sm: 'has-[svg]:children:h-4 has-[svg]:children:w-4',
+		md: 'has-[svg]:children:h-5 has-[svg]:children:w-5',
+		lg: 'has-[svg]:children:h-6 has-[svg]:children:w-6'
+	};
+
+	// Active state padding classes that scale with button size
+	const activePaddingClasses = {
+		xs: 'p-0.5',
+		sm: 'p-1',
+		md: 'p-1.5',
+		lg: 'p-2'
+	};
+
+	// Active state size classes for the inner container
+	const activeInnerSizeClasses = {
+		xs: 'h-4 w-4',
+		sm: 'h-6 w-6',
+		md: 'h-7 w-7',
+		lg: 'h-8 w-8'
+	};
+
+	// Variant class mappings
+	const variantClasses = {
+		'primary-inverse': 'bg-base-inverse text-icon-primary-inverse border border-interactive',
+		secondary: 'bg-neutral text-icon-primary hover:bg-neutral-hover'
+	};
+
+	// Active variant class mappings
+	const activeVariantClasses = {
+		'primary-inverse': 'bg-accent-inverse text-icon-primary-inverse',
+		secondary: 'bg-neutral-hover text-icon-primary'
+	};
+
+	let buttonSizeClass = $derived(sizeClasses[size]);
+	let buttonSvgContainerClass = $derived(svgContainerClasses[size]);
+	let buttonVariantClass = $derived(variantClasses[variant]);
+	let buttonActiveVariantClass = $derived(activeVariantClasses[variant]);
+	let activePaddingClass = $derived(activePaddingClasses[size]);
+	let activeInnerSizeClass = $derived(activeInnerSizeClasses[size]);
+</script>
+
+{#snippet content()}
+	{#if loading}
+		<Spinner />
+	{:else}
+		{@render children?.()}
+	{/if}
+{/snippet}
+
+<button
+	onclick={(e) => {
+		e.preventDefault();
+		if (disabled || loading) return;
+		onclick?.(e);
+	}}
+	{type}
+	{disabled}
+	{...rest}
+	class="flex cursor-pointer items-center justify-center duration-150 {buttonSizeClass} {buttonVariantClass} {buttonSvgContainerClass}"
+	class:rounded-full={rounded}
+	class:rounded-md={!rounded}
+	class:cursor-default={disabled}
+	class:disabled:bg-neutral={disabled}
+	class:disabled:text-tertiary={disabled}
+>
+	{#if isActive}
+		<div
+			class="{buttonActiveVariantClass} flex items-center justify-center {activePaddingClass} {activeInnerSizeClass}"
+			class:rounded-full={rounded}
+			class:rounded-sm={!rounded}
+		>
+			{@render content()}
+		</div>
+	{:else}
+		{@render content?.()}
+	{/if}
+</button>

package/dist/components/toggle-icon-button/ToggleIconButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Variant = 'primary-inverse' | 'secondary';
+interface Props {
+    variant?: Variant;
+    loading?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: Snippet;
+    rounded?: boolean;
+    isActive?: boolean;
+}
+type ToggleIconButtonProps = Props & HTMLButtonAttributes;
+declare const ToggleIconButton: import("svelte").Component<ToggleIconButtonProps, {}, "isActive">;
+type ToggleIconButton = ReturnType<typeof ToggleIconButton>;
+export default ToggleIconButton;

package/dist/components/toggle-icon-button/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleIconButton from './ToggleIconButton.svelte';
+export { ToggleIconButton };
+export default ToggleIconButton;

package/dist/components/toggle-icon-button/index.js

@@ -0,0 +1,3 @@
+import ToggleIconButton from './ToggleIconButton.svelte';
+export { ToggleIconButton };
+export default ToggleIconButton;

package/dist/index.d.ts

@@ -32,7 +32,9 @@ export * from './components/status-badge/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
+export * from './components/toggle-icon-button/';
 export * from './components/tooltip/';
 export * from './components/toggle/';
+export * from './components/checkbox/';
 export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -33,8 +33,10 @@ export * from './components/status-badge/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';
+export * from './components/toggle-icon-button/';
 export * from './components/tooltip/';
 export * from './components/toggle/';
+export * from './components/checkbox/';
 // Styles and Tokens
 export { tokens } from './tokens';
 import './app.css';

package/dist/tailwind-safelist.js

@@ -126,6 +126,7 @@ export const display = [
 	'justify-center',
 	'flex-row',
 	'flex-col',
+	'px-0.5',
 	'px-2',
 	'py-1'
 ];
@@ -163,6 +164,7 @@ export const flexLayout = [
 	'text-center',
 	'text-base',
 	'gap-1',
+	'gap-1.5',
 	'gap-2',
 	'gap-3',
 	'gap-4',

package/package.json

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