@reshape-biotech/design-system 1.2.6 → 2.0.0

package/dist/components/dropdown/Dropdown.svelte

@@ -1,69 +1,69 @@
 <script lang="ts">
-	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';
+  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;
-		alignEnd?: boolean;
-		openOnHover?: boolean;
-		closeOnItemClick?: boolean;
-		class?: string;
-		trigger?: Snippet<[{ Trigger: typeof DropdownTrigger; OutlinedButton: typeof OutlinedButton }]>;
-		content?: Snippet<
-			[{ DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu }]
-		>;
-	}
+  interface Props {
+    side?: 'dropdown-top' | 'dropdown-bottom' | 'dropdown-left' | 'dropdown-right';
+    open?: boolean;
+    alignEnd?: boolean;
+    openOnHover?: boolean;
+    closeOnItemClick?: boolean;
+    class?: string;
+    trigger?: Snippet<[{ Trigger: typeof DropdownTrigger; OutlinedButton: typeof OutlinedButton }]>;
+    content?: Snippet<
+      [{ DropdownContent: typeof DropdownContent; DropdownMenu: typeof DropdownMenu }]
+    >;
+  }
 
-	let {
-		side = 'dropdown-bottom',
-		open = $bindable(false),
-		alignEnd = false,
-		openOnHover = false,
-		closeOnItemClick = false,
-		class: className = '',
-		trigger,
-		content
-	}: Props = $props();
+  let {
+    side = 'dropdown-bottom',
+    open = $bindable(false),
+    alignEnd = false,
+    openOnHover = false,
+    closeOnItemClick = false,
+    class: className = '',
+    trigger,
+    content,
+  }: Props = $props();
 
-	let C = {};
+  let C = {};
 
-	const closeDropdown = () => {
-		open = false;
-		// https://medium.com/@malikhamzav/how-to-close-daisyui-dropdown-on-click-ea65c5749410
-		document.activeElement instanceof HTMLElement && document.activeElement.blur();
-	};
+  const closeDropdown = () => {
+    open = false;
+    // https://medium.com/@malikhamzav/how-to-close-daisyui-dropdown-on-click-ea65c5749410
+    document.activeElement instanceof HTMLElement && document.activeElement.blur();
+  };
 
-	function handleItemClick() {
-		if (closeOnItemClick) {
-			closeDropdown();
-		}
-	}
+  function handleItemClick() {
+    if (closeOnItemClick) {
+      closeDropdown();
+    }
+  }
 
-	function handleKeyDown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			closeDropdown();
-		}
-	}
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      closeDropdown();
+    }
+  }
 </script>
 
 <div
-	class="dropdown {side} {className}"
-	class:dropdown-end={alignEnd}
-	class:dropdown-open={open}
-	class:dropdown-hover={openOnHover}
+  class="dropdown {side} {className}"
+  class:dropdown-end={alignEnd}
+  class:dropdown-open={open}
+  class:dropdown-hover={openOnHover}
 >
-	{@render trigger?.({ Trigger: DropdownTrigger, OutlinedButton: OutlinedButton })}
-	<div
-		class="dropdown-content z-10 w-full"
-		role="menu"
-		tabindex="-1"
-		onkeydown={handleKeyDown}
-		onclick={handleItemClick}
-	>
-		{@render content?.({ DropdownMenu, DropdownContent })}
-	</div>
+  {@render trigger?.({ Trigger: DropdownTrigger, OutlinedButton: OutlinedButton })}
+  <div
+    class="dropdown-content z-10 w-full"
+    role="menu"
+    tabindex="-1"
+    onkeydown={handleKeyDown}
+    onclick={handleItemClick}
+  >
+    {@render content?.({ DropdownMenu, DropdownContent })}
+  </div>
 </div>

package/dist/components/dropdown/components/DropdownContent.svelte

@@ -1,29 +1,29 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Variant = 'primary' | 'secondary';
+  type Variant = 'primary' | 'secondary';
 
-	interface Props {
-		class?: string;
-		variant?: Variant;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    variant?: Variant;
+    children?: Snippet;
+  }
 
-	const Variants: Record<Variant, string> = {
-		primary: 'bg-surface text-primary',
-		secondary: 'bg-base-inverse text-primary-inverse'
-	};
+  const Variants: Record<Variant, string> = {
+    primary: 'bg-surface text-primary',
+    secondary: 'bg-base-inverse text-primary-inverse',
+  };
 
-	let { class: className = '', variant = 'primary', children }: Props = $props();
+  let { class: className = '', variant = 'primary', children }: Props = $props();
 
-	let variantClass = $derived(Variants[variant]);
+  let variantClass = $derived(Variants[variant]);
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- DaisyUI have a bug wit safari dropdown. Requires tabindex=0-->
 <div
-	class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
-	tabindex="0"
+  class={`dropdown-content z-[1] mb-2 rounded-md p-1 shadow-2xl ${variantClass} ${className}`}
+  tabindex="0"
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>

package/dist/components/dropdown/components/DropdownMenu.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		children?: Snippet;
-	}
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <ul
-	tabIndex="0"
-	class={`menu dropdown-content menu-md z-[1] rounded-lg bg-surface p-1 shadow-menu ${className}`}
+  tabIndex="0"
+  class={`menu dropdown-content menu-md z-[1] rounded-lg bg-surface p-1 shadow-menu ${className}`}
 >
-	{@render children?.()}
+  {@render children?.()}
 </ul>
 
 <style>
-	:global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
+  :global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
     background-color: #12192A1A
 }
 </style>

package/dist/components/dropdown/components/DropdownTrigger.svelte

@@ -1,46 +1,46 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-	interface Props {
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		variant?: Color;
-		children?: Snippet;
-		noPadding?: boolean;
-		iconButton?: boolean;
-	}
-	let {
-		size = 'md',
-		class: className = '',
-		variant = 'primary',
-		children,
-		noPadding = false,
-		iconButton = false
-	}: Props = $props();
+  import type { Snippet } from 'svelte';
+  interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    variant?: Color;
+    children?: Snippet;
+    noPadding?: boolean;
+    iconButton?: boolean;
+  }
+  let {
+    size = 'md',
+    class: className = '',
+    variant = 'primary',
+    children,
+    noPadding = false,
+    iconButton = false,
+  }: Props = $props();
 
-	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
+  type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
 
-	const sizes = $derived({
-		sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
-		md: 'h-10 px-5 py-3',
-		lg: 'h-12 px-6 py-4'
-	});
+  const sizes = $derived({
+    sm: `h-8 ${noPadding ? 'px-0' : iconButton ? 'px-2' : 'px-3'} ${noPadding ? 'py-0' : iconButton ? 'py-2' : 'py-3'}`,
+    md: 'h-10 px-5 py-3',
+    lg: 'h-12 px-6 py-4',
+  });
 
-	const colors: Record<Color, string> = {
-		primary:
-			'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
-		secondary:
-			'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
-		transparent:
-			'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
-		danger:
-			'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary'
-	};
+  const colors: Record<Color, string> = {
+    primary:
+      'bg-accent-inverse text-primary-inverse hover:bg-accent-inverse-hover disabled:bg-neutral disabled:text-tertiary',
+    secondary:
+      'bg-neutral text-primary hover:bg-neutral-hover disabled:bg-neutral disabled:text-tertiary',
+    transparent:
+      'bg-transparent text-primary hover:bg-neutral disabled:bg-neutral disabled:text-tertiary',
+    danger:
+      'bg-danger text-primary-inverse hover:bg-danger-hover disabled:bg-neutral disabled:text-tertiary',
+  };
 </script>
 
 <div
-	role="button"
-	tabindex="0"
-	class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
+  role="button"
+  tabindex="0"
+  class={`inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 ${colors[variant]} ${sizes[size]} ${className}`}
 >
-	{@render children?.()}
+  {@render children?.()}
 </div>

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

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		class?: string;
-		children: Snippet;
-	}
+  interface Props {
+    class?: string;
+    children: Snippet;
+  }
 
-	let { class: className = '', children }: Props = $props();
+  let { class: className = '', children }: Props = $props();
 </script>
 
 <div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
 
 <style>
-	div {
+  div {
 
     display: flex;
 
@@ -47,12 +47,12 @@
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
-	div:not(:focus-within):hover {
+  div:not(:focus-within):hover {
 
     border-color: #5750ee40
 }
 
-	div:focus-within {
+  div:focus-within {
 
     --tw-border-opacity: 1;
 

package/dist/components/empty-content/EmptyContent.stories.svelte

@@ -1,47 +1,47 @@
 <script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import EmptyContent from './EmptyContent.svelte';
-	import { Icon } from '../../components/icons';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import EmptyContent from './EmptyContent.svelte';
+  import { Icon } from '../../components/icons';
 
-	const { Story } = defineMeta({
-		component: EmptyContent,
-		title: 'Design System/EmptyContent',
-		tags: ['autodocs']
-	});
+  const { Story } = defineMeta({
+    component: EmptyContent,
+    title: 'Design System/EmptyContent',
+    tags: ['autodocs'],
+  });
 </script>
 
 <Story name="Default" asChild>
-	<div class="w-full bg-surface p-12">
-		<EmptyContent>
-			{#snippet icon()}
-				<Icon
-					iconName="ClockCountdown"
-					color="icon-tertiary"
-					width={48}
-					height={48}
-					weight="light"
-				/>
-			{/snippet}
-			<h6>No activity</h6>
-			<p class="text-center text-sm">Nothing has been logged for this job.</p>
-		</EmptyContent>
-	</div>
+  <div class="w-full bg-surface p-12">
+    <EmptyContent>
+      {#snippet icon()}
+        <Icon
+          iconName="ClockCountdown"
+          color="icon-tertiary"
+          width={48}
+          height={48}
+          weight="light"
+        />
+      {/snippet}
+      <h6>No activity</h6>
+      <p class="text-center text-sm">Nothing has been logged for this job.</p>
+    </EmptyContent>
+  </div>
 </Story>
 
 <Story name="With Different Icon" asChild>
-	<div class="w-full bg-surface p-12">
-		<EmptyContent>
-			{#snippet icon()}
-				<Icon
-					iconName="MagnifyingGlass"
-					color="icon-tertiary"
-					width={48}
-					height={48}
-					weight="light"
-				/>
-			{/snippet}
-			<h6>No results found</h6>
-			<p class="text-center text-sm">Try adjusting your search or filters.</p>
-		</EmptyContent>
-	</div>
+  <div class="w-full bg-surface p-12">
+    <EmptyContent>
+      {#snippet icon()}
+        <Icon
+          iconName="MagnifyingGlass"
+          color="icon-tertiary"
+          width={48}
+          height={48}
+          weight="light"
+        />
+      {/snippet}
+      <h6>No results found</h6>
+      <p class="text-center text-sm">Try adjusting your search or filters.</p>
+    </EmptyContent>
+  </div>
 </Story>

package/dist/components/empty-content/EmptyContent.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	type Props = {
-		icon: Snippet;
-		children: Snippet;
-	};
+  type Props = {
+    icon: Snippet;
+    children: Snippet;
+  };
 
-	const { icon, children }: Props = $props();
+  const { icon, children }: Props = $props();
 </script>
 
 <div class="flex w-full justify-center">
-	<div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
-		{@render icon()}
-		<div class="flex w-full flex-col items-center justify-center gap-2">
-			{@render children()}
-		</div>
-	</div>
+  <div class="flex max-w-[180px] flex-col items-center justify-center gap-5 py-5 text-tertiary">
+    {@render icon()}
+    <div class="flex w-full flex-col items-center justify-center gap-2">
+      {@render children()}
+    </div>
+  </div>
 </div>