@reshape-biotech/design-system 1.2.6 → 2.0.0

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

@@ -1,117 +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;
-	}
+  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;
+  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();
+  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'
-	};
+  // 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'
-	};
+  // 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 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'
-	};
+  // 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'
-	};
+  // 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'
-	};
+  // 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]);
+  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}
+  {#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}
+  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}
+  {#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/tooltip/Tooltip.stories.svelte

@@ -1,126 +1,100 @@
 <script module>
-	import Tooltip from './Tooltip.svelte';
+  import Tooltip from './Tooltip.svelte';
 
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	const { Story } = defineMeta({
-		component: Tooltip,
-		title: 'Design System/Tooltip',
-		tags: ['autodocs']
-	});
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    component: Tooltip,
+    title: 'Design System/Tooltip',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Base" asChild>
-	<div class="flex justify-center">
-		<Tooltip>
-			{#snippet trigger()}
-				<button>Hover me</button>
-			{/snippet}
-			{#snippet content()}
-				<span>Hello World</span>
-			{/snippet}
-		</Tooltip>
-	</div>
-</Story>
-
-<Story name="Force Open" asChild>
-	<div class="flex justify-center">
-		<Tooltip forceOpen={true}>
-			{#snippet trigger()}
-				<button>Hover me</button>
-			{/snippet}
-			{#snippet content()}
-				<span>Hello World</span>
-			{/snippet}
-		</Tooltip>
-	</div>
+  <div class="flex justify-center py-12">
+    <Tooltip forceOpen={true}>
+      {#snippet trigger()}
+        <button>Hover me</button>
+      {/snippet}
+      {#snippet content()}
+        <span>Hello World</span>
+      {/snippet}
+    </Tooltip>
+  </div>
 </Story>
 
 <Story name="No Arrow" asChild>
-	<div class="flex justify-center">
-		<Tooltip showArrow={false}>
-			{#snippet trigger()}
-				<button>This one has no arrow</button>
-			{/snippet}
-			{#snippet content()}
-				<span>Wow, no arrow</span>
-			{/snippet}
-		</Tooltip>
-	</div>
+  <div class="flex justify-center py-12">
+    <Tooltip forceOpen={true} showArrow={false}>
+      {#snippet trigger()}
+        <button>This one has no arrow</button>
+      {/snippet}
+      {#snippet content()}
+        <span>Wow, no arrow</span>
+      {/snippet}
+    </Tooltip>
+  </div>
 </Story>
 
 <Story name="Different Placements" asChild>
-	<div class="flex justify-center gap-4 py-8">
-		<div>
-			<Tooltip placement="top">
-				{#snippet trigger()}
-					<button>Top</button>
-				{/snippet}
-				{#snippet content()}
-					<span>Tooltip on top</span>
-				{/snippet}
-			</Tooltip>
-		</div>
-		<div>
-			<Tooltip placement="right">
-				{#snippet trigger()}
-					<button>Right</button>
-				{/snippet}
-				{#snippet content()}
-					<span>Tooltip on right</span>
-				{/snippet}
-			</Tooltip>
-		</div>
-		<div>
-			<Tooltip placement="bottom">
-				{#snippet trigger()}
-					<button>Bottom</button>
-				{/snippet}
-				{#snippet content()}
-					<span>Tooltip on bottom</span>
-				{/snippet}
-			</Tooltip>
-		</div>
-		<div>
-			<Tooltip placement="left">
-				{#snippet trigger()}
-					<button>Left</button>
-				{/snippet}
-				{#snippet content()}
-					<span>Tooltip on left</span>
-				{/snippet}
-			</Tooltip>
-		</div>
-	</div>
-</Story>
+  <div class="grid grid-cols-3 place-items-center gap-16 px-16 py-24">
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="top">
+        {#snippet trigger()}
+          <button>Top</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on top</span>
+        {/snippet}
+      </Tooltip>
+    </div>
 
-<Story name="Custom Content" asChild>
-	<div class="flex h-28 items-end justify-center">
-		<Tooltip>
-			{#snippet trigger()}
-				<button>Hover me</button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<h3>Custom Heading</h3>
-					<p>This is some custom content inside the tooltip.</p>
-				</div>
-			{/snippet}
-		</Tooltip>
-	</div>
+    <div class="col-start-1">
+      <Tooltip forceOpen={true} placement="left">
+        {#snippet trigger()}
+          <button>Left</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on left</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+
+    <div class="col-start-3">
+      <Tooltip forceOpen={true} placement="right">
+        {#snippet trigger()}
+          <button>Right</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on right</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+
+    <div class="col-start-2">
+      <Tooltip forceOpen={true} placement="bottom">
+        {#snippet trigger()}
+          <button>Bottom</button>
+        {/snippet}
+        {#snippet content()}
+          <span>Tooltip on bottom</span>
+        {/snippet}
+      </Tooltip>
+    </div>
+  </div>
 </Story>
 
-<Story name="Custom Content Forced Open" asChild>
-	<div class="flex h-28 items-end justify-center">
-		<Tooltip forceOpen={true}>
-			{#snippet trigger()}
-				<button>Hover me</button>
-			{/snippet}
-			{#snippet content()}
-				<div>
-					<h3>Custom Heading</h3>
-					<p>This is some custom content inside the tooltip.</p>
-				</div>
-			{/snippet}
-		</Tooltip>
-	</div>
+<Story name="Custom Content" asChild>
+  <div class="flex h-28 items-end justify-center py-16">
+    <Tooltip forceOpen={true}>
+      {#snippet trigger()}
+        <button>Hover me</button>
+      {/snippet}
+      {#snippet content()}
+        <div>
+          <h3>Custom Heading</h3>
+          <p>This is some custom content inside the tooltip.</p>
+        </div>
+      {/snippet}
+    </Tooltip>
+  </div>
 </Story>

package/dist/components/tooltip/Tooltip.svelte

@@ -1,49 +1,60 @@
 <script lang="ts">
-	import Tooltip from 'flowbite-svelte/Tooltip.svelte';
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		forceOpen?: boolean;
-		showArrow?: boolean;
-		placement?: 'top' | 'right' | 'bottom' | 'left';
-		trigger?: Snippet;
-		content?: Snippet;
-	}
-
-	let {
-		class: className = '',
-		forceOpen = false,
-		showArrow = true,
-		placement = 'top',
-		trigger,
-		content
-	}: Props = $props();
-
-	let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
+  import { Tooltip } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { backgroundColor } from '../../tokens';
+
+  interface Props {
+    class?: string;
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    trigger?: Snippet;
+    content?: Snippet;
+  }
+
+  let {
+    class: className = '',
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    trigger,
+    content,
+  }: Props = $props();
+
+  const sideMap = {
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+  } as const;
+
+  let side = $derived(sideMap[placement]);
+
+  const arrowColor = backgroundColor['base-inverse'];
 </script>
 
-{@render trigger?.()}
-<Tooltip
-	open={forceOpen}
-	arrow={showArrow}
-	{placement}
-	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>
-
-<style>
-	/* Hack to get the arrow styling to work */
-	:global(.tooltip.with-arrow > :last-child) {
-    pointer-events: none;
-    position: absolute;
-    display: block;
-    height: 0.5rem;
-    width: 0.5rem;
-    --tw-rotate: 45deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-    border-color: inherit;
-    background-color: inherit
-}
-</style>
+<Tooltip.Provider>
+  <Tooltip.Root open={forceOpen} delayDuration={400}>
+    <Tooltip.Trigger>
+      {#if trigger}
+        {@render trigger()}
+      {/if}
+    </Tooltip.Trigger>
+
+    <Tooltip.Portal>
+      <Tooltip.Content
+        {side}
+        sideOffset={8}
+        class={`${className} z-50 max-w-xs text-wrap rounded bg-base-inverse px-2 py-1 text-left text-sm font-normal text-primary-inverse shadow-menu`}
+      >
+        {#if content}
+          {@render content()}
+        {/if}
+
+        {#if showArrow}
+          <Tooltip.Arrow style="color: {arrowColor}" />
+        {/if}
+      </Tooltip.Content>
+    </Tooltip.Portal>
+  </Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -1,4 +1,4 @@
-import Tooltip from 'flowbite-svelte/Tooltip.svelte';
+import { Tooltip } from 'bits-ui';
 import type { Snippet } from 'svelte';
 interface Props {
     class?: string;

package/dist/components/tooltip/TooltipTest.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Tooltip from './Tooltip.svelte';
+
+  interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+  }
+
+  let {
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    class: className = '',
+    triggerText,
+    contentText,
+  }: Props = $props();
+</script>
+
+<Tooltip {forceOpen} {showArrow} {placement} class={className}>
+  {#snippet trigger()}
+    <button>{triggerText}</button>
+  {/snippet}
+
+  {#snippet content()}
+    {contentText}
+  {/snippet}
+</Tooltip>

package/dist/components/tooltip/TooltipTest.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    triggerText: string;
+    contentText: string;
+}
+declare const TooltipTest: import("svelte").Component<Props, {}, "">;
+type TooltipTest = ReturnType<typeof TooltipTest>;
+export default TooltipTest;

package/dist/fonts/index.js

@@ -2,5 +2,5 @@ import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
 import afAnotherSans from './afAnotherSans.woff2';
 export const fonts = {
     MDSystemMonoRegular,
-    afAnotherSans
+    afAnotherSans,
 };

package/dist/index.d.ts

@@ -29,7 +29,6 @@ export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
-export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';

package/dist/index.js

@@ -30,7 +30,6 @@ export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
-export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';

package/dist/notifications.d.ts

@@ -9,10 +9,7 @@ export interface Notification {
     dismissable: boolean;
 }
 export declare const notifications: {
-    subscribe: {
-        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
-        (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: (() => void) | undefined): import("svelte/store").Unsubscriber;
-    };
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Notification[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     dismiss: (id: string) => void;
     default: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;
     danger: (message: string, icon?: IconName, dismissable?: boolean, timeout?: number) => void;

package/dist/notifications.js

@@ -18,7 +18,7 @@ const createNotificationStore = () => {
         danger: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'danger', icon, dismissable, timeout),
         warning: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'warning', icon, dismissable, timeout),
         info: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'info', icon, dismissable, timeout),
-        success: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'success', icon, dismissable, timeout)
+        success: (message, icon, dismissable = false, timeout = TIMEOUT) => send(message, 'success', icon, dismissable, timeout),
     };
 };
 const id = () => {