@reshape-biotech/design-system 0.0.52 → 1.1.1

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/components/tooltip/Tooltip.stories.svelte

@@ -9,7 +9,7 @@
 	});
 </script>
 
-<Story name="Base">
+<Story name="Base" asChild>
 	<div class="flex justify-center">
 		<Tooltip>
 			{#snippet trigger()}
@@ -22,7 +22,7 @@
 	</div>
 </Story>
 
-<Story name="Force Open">
+<Story name="Force Open" asChild>
 	<div class="flex justify-center">
 		<Tooltip forceOpen={true}>
 			{#snippet trigger()}
@@ -35,7 +35,7 @@
 	</div>
 </Story>
 
-<Story name="No Arrow">
+<Story name="No Arrow" asChild>
 	<div class="flex justify-center">
 		<Tooltip showArrow={false}>
 			{#snippet trigger()}
@@ -48,7 +48,7 @@
 	</div>
 </Story>
 
-<Story name="Different Placements">
+<Story name="Different Placements" asChild>
 	<div class="flex justify-center gap-4 py-8">
 		<div>
 			<Tooltip placement="top">
@@ -93,7 +93,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Content">
+<Story name="Custom Content" asChild>
 	<div class="flex h-28 items-end justify-center">
 		<Tooltip>
 			{#snippet trigger()}
@@ -109,7 +109,7 @@
 	</div>
 </Story>
 
-<Story name="Custom Content Forced Open">
+<Story name="Custom Content Forced Open" asChild>
 	<div class="flex h-28 items-end justify-center">
 		<Tooltip forceOpen={true}>
 			{#snippet trigger()}

package/dist/components/tooltip/Tooltip.svelte

@@ -28,7 +28,7 @@
 	open={forceOpen}
 	arrow={showArrow}
 	{placement}
-	class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 text-sm font-normal text-primary-inverse shadow`}
+	class={`${tooltipClass} max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow`}
 >
 	{@render content?.()}
 </Tooltip>

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/activity/';
 export * from './components/avatar/';
+export * from './components/card/';
 export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
@@ -19,9 +20,11 @@ export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
+export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
+export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
 export * from './components/skeleton-loader/';
@@ -32,7 +35,11 @@ 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/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
+export * from './components/checkbox/';
+export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -1,6 +1,7 @@
 // Components
 export * from './components/activity/';
 export * from './components/avatar/';
+export * from './components/card/';
 export * from './components/banner/';
 export * from './components/button/';
 export * as Collapsible from './components/collapsible/';
@@ -20,9 +21,11 @@ export * from './components/list/';
 export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
+export * from './components/manual-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/pill/';
 export * from './components/progress-circle/';
+export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
 export * from './components/skeleton-loader/';
@@ -33,8 +36,12 @@ 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/textarea/index';
 export * from './components/tooltip/';
 export * from './components/toggle/';
+export * from './components/checkbox/';
+export * from './components/sjsf-wrappers/';
 // 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/dist/tailwind.preset.d.ts

@@ -361,6 +361,8 @@ declare const config: {
                 hover: string;
                 focus: string;
                 danger: string;
+                'static-inverse': string;
+                'interactive-inverse': string;
             };
             textColor: {
                 'icon-primary': string;

package/dist/tokens.d.ts

@@ -254,6 +254,8 @@ export declare const borderColor: {
     hover: string;
     focus: string;
     danger: string;
+    'static-inverse': string;
+    'interactive-inverse': string;
 };
 export declare const textColor: {
     'icon-primary': string;
@@ -687,6 +689,8 @@ export declare const tokens: {
         hover: string;
         focus: string;
         danger: string;
+        'static-inverse': string;
+        'interactive-inverse': string;
     };
     textColor: {
         'icon-primary': string;

package/dist/tokens.js

@@ -183,7 +183,9 @@ const lightBorderColor = {
     interactive: colors.base.midnight[15],
     hover: colors.periwinkle[5][25],
     focus: colors.periwinkle[5].default,
-    danger: colors.red[5].default
+    danger: colors.red[5].default,
+    'static-inverse': colors.base.white[10],
+    'interactive-inverse': colors.base.white[15]
 };
 const lightOutlineColor = {
     static: colors.base.midnight[8],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.52",
+	"version": "1.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -50,7 +50,6 @@
 		"@testing-library/svelte": "^5.2.6",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.10.5",
-		"echarts": "^5.6.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^3.0.0",