@reshape-biotech/design-system 1.2.5 → 1.2.7

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,126 @@
 <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>
+  <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">
+    <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">
+    <Tooltip 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>
+  <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>
 
 <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="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>
 </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>
+  <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>

package/dist/components/tooltip/Tooltip.svelte

@@ -1,41 +1,41 @@
 <script lang="ts">
-	import Tooltip from 'flowbite-svelte/Tooltip.svelte';
-	import type { Snippet } from 'svelte';
+  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;
-	}
+  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 {
+    class: className = '',
+    forceOpen = false,
+    showArrow = true,
+    placement = 'top',
+    trigger,
+    content,
+  }: Props = $props();
 
-	let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
+  let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
 </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`}
+  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?.()}
+  {@render content?.()}
 </Tooltip>
 
 <style>
-	/* Hack to get the arrow styling to work */
-	:global(.tooltip.with-arrow > :last-child) {
+  /* Hack to get the arrow styling to work */
+  :global(.tooltip.with-arrow > :last-child) {
     pointer-events: none;
     position: absolute;
     display: block;

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

@@ -21,6 +21,7 @@ export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
+export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/notifications/';
 export * from './components/pill/';
@@ -47,4 +48,6 @@ export * from './components/checkbox/';
 export * from './components/sjsf-wrappers/';
 export { tokens } from './tokens';
 export { notifications } from './notifications';
-import './app.css';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
+export * as TokensColors from './tokens/colors';
+export * as TokensTypography from './tokens/typography';

package/dist/index.js

@@ -22,6 +22,7 @@ export * from './components/logo/';
 export * from './components/markdown/';
 export * from './components/modal/';
 export * from './components/manual-cfu-counter/';
+export * from './components/multi-cfu-counter/';
 export * from './components/notification-popup/';
 export * from './components/notifications/';
 export * from './components/pill/';
@@ -49,4 +50,7 @@ export * from './components/sjsf-wrappers/';
 // Styles and Tokens
 export { tokens } from './tokens';
 export { notifications } from './notifications';
-import './app.css';
+export { colors, borderColor, textColor, backgroundColor, boxShadow, outlineColor } from './tokens';
+// Export tokens modules for granular imports
+export * as TokensColors from './tokens/colors';
+export * as TokensTypography from './tokens/typography';

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 = () => {

package/dist/styles.d.ts

@@ -0,0 +1 @@
+import './app.css';

package/dist/styles.js

@@ -0,0 +1,4 @@
+// Optional CSS imports - import this file if you need the design system styles
+import './app.css';
+// Re-export is not needed for CSS files
+// CSS files don't have named exports to re-export