@reshape-biotech/design-system 0.0.24 → 0.0.25

package/dist/app.css

@@ -7,17 +7,17 @@
 		font-family: 'MD System Mono';
 		font-style: normal;
 		font-weight: 400;
-		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+		src: url('./fonts/MDSystemMono-Regular.woff2') format('woff2');
 	}
 	@font-face {
 		font-family: 'MD System';
 		font-style: normal;
 		font-weight: 400;
-		src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Regular.woff2') format('woff2');
 	}
 	@font-face {
 		font-family: 'MD System';
-		src: url('/fonts/MDSystem-Medium.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Medium.woff2') format('woff2');
 		font-weight: 500;
 		font-style: normal;
 	}
@@ -25,7 +25,7 @@
 		font-family: 'MD System';
 		font-style: normal;
 		font-weight: 600;
-		src: url('/fonts/MDSystem-Semibold.woff2') format('woff2');
+		src: url('./fonts/MDSystem-Semibold.woff2') format('woff2');
 	}
 	body {
 		background-color: theme('backgroundColor.base');

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/dist/components/banner/Banner.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { X } from 'phosphor-svelte';
 	import type { Snippet } from 'svelte';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import IconButton from '../icon-button/';
 
 	interface Props {
 		type?: 'neutral' | 'success' | 'progress' | 'warning' | 'error';

package/dist/components/banner/index.d.ts

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.svelte';

package/dist/components/banner/index.js

@@ -0,0 +1 @@
+export { default as Banner } from './Banner.svelte';

package/dist/components/button/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
+	import Spinner from '../spinner/Spinner.svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Props {

package/dist/components/button/index.d.ts

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

package/dist/components/button/index.js

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

package/dist/components/datepicker/index.d.ts

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/datepicker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from './DatePicker.svelte';

package/dist/components/divider/index.d.ts

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.svelte';

package/dist/components/divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from './Divider.svelte';

package/dist/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown.svelte';

package/dist/components/dropdown/index.js

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown.svelte';

package/dist/components/icon-button/IconButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
 	import type { Snippet } from 'svelte';
+	import Spinner from '../spinner/';
+
 	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
 	interface Props {
 		color?: 'primary' | 'transparent' | 'secondary' | 'danger';

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

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

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

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

package/dist/components/image/Image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import SkeletonLoader from 'design-system/components/skeleton-loader/index';
+	import SkeletonLoader from '../skeleton-loader/';
 
 	interface Props {
 		src: string;

package/dist/components/image/index.d.ts

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

package/dist/components/image/index.js

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

package/dist/components/input/index.d.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.svelte';

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from './Input.svelte';

package/dist/components/list/index.d.ts

@@ -0,0 +1 @@
+export { default as List } from './List.svelte';

package/dist/components/list/index.js

@@ -0,0 +1 @@
+export { default as List } from './List.svelte';

package/dist/components/markdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Markdown } from './Markdown.svelte';

package/dist/components/markdown/index.js

@@ -0,0 +1 @@
+export { default as Markdown } from './Markdown.svelte';

package/dist/components/modal/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { v4 as uuidv4 } from 'uuid';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
 	import { X } from 'phosphor-svelte';
 
 	type ModalProps = {

package/dist/components/modal/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/dist/components/modal/index.js

@@ -0,0 +1 @@
+export { default as Modal } from './Modal.svelte';

package/dist/components/notification-popup/NotificationPopup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { X } from 'phosphor-svelte';
-	import IconButton from 'design-system/components/icon-button/IconButton.svelte';
+	import IconButton from '../icon-button/';
 	import { fade, fly } from 'svelte/transition';
 	import type { Snippet } from 'svelte';
 

package/dist/components/notification-popup/index.d.ts

@@ -0,0 +1 @@
+export { default as NotificationPopup } from './NotificationPopup.svelte';

package/dist/components/notification-popup/index.js

@@ -0,0 +1 @@
+export { default as NotificationPopup } from './NotificationPopup.svelte';

package/dist/components/pill/index.d.ts

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

package/dist/components/pill/index.js

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

package/dist/components/progress-circle/index.d.ts

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

package/dist/components/progress-circle/index.js

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

package/dist/components/segmented-control-buttons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SegmentedControlButtons } from './SegmentedControlButtons.svelte';
+export { default as ControlButton } from './ControlButton.svelte';

package/dist/components/segmented-control-buttons/index.js

@@ -0,0 +1,2 @@
+export { default as SegmentedControlButtons } from './SegmentedControlButtons.svelte';
+export { default as ControlButton } from './ControlButton.svelte';

package/dist/components/select/Select.svelte

@@ -1,7 +1,7 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot overwrite a zero-length range – use appendLeft or prependRight instead -->
 <!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { backgroundColor, textColor } from 'design-system/tokens';
+	import { backgroundColor, textColor } from '../../tokens';
 	import { CaretDown, X } from 'phosphor-svelte';
 	import { createEventDispatcher } from 'svelte';
 	let className = '';

package/dist/components/select/index.d.ts

@@ -4,3 +4,4 @@ export type ItemProps = {
     description?: string;
     group?: string;
 };
+export { default } from './Select.svelte';

package/dist/components/select/index.js

@@ -1 +1 @@
-export {};
+export { default } from './Select.svelte';

package/dist/components/skeleton-loader/index.d.ts

@@ -1,5 +1,3 @@
 export { default } from './SkeletonLoader.svelte';
-export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
 export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
 export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/skeleton-loader/index.js

@@ -1,5 +1,3 @@
 export { default } from './SkeletonLoader.svelte';
-export { default as HorizontalCardSkeleton } from './HorizontalCardSkeleton.svelte';
 export { default as StatcardSkeleton } from './StatcardSkeleton.svelte';
-export { default as ProjectCardSkeleton } from './ProjectCardSkeleton.svelte';
 export { default as SkeletonImage } from './components/SkeletonImage.svelte';

package/dist/components/slider/index.d.ts

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

package/dist/components/slider/index.js

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

package/dist/components/spinner/index.d.ts

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

package/dist/components/spinner/index.js

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

package/dist/components/stat-card/StatCard.stories.svelte

@@ -19,6 +19,7 @@
 		value="2"
 		unit="%"
 		titleTooltip="Something that explains what this is..."
+		showTitleTooltip={true}
 	/>
 </Story>
 

package/dist/components/stat-card/StatCard.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
 	import { Info } from 'phosphor-svelte';
-	import Spinner from 'design-system/components/spinner/Spinner.svelte';
-	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
-	import { featureFlags } from '../../stores';
+	import Spinner from '../spinner/Spinner.svelte';
+	import Tooltip from '../tooltip/Tooltip.svelte';
 
 	interface Props {
 		title: string;
 		value?: string | number | null;
 		unit?: string | null;
 		titleTooltip?: string;
+		showTitleTooltip?: boolean;
 	}
 
-	let { title, value = null, unit = '', titleTooltip = '' }: Props = $props();
+	let {
+		title,
+		value = null,
+		unit = '',
+		titleTooltip = '',
+		showTitleTooltip = false
+	}: Props = $props();
 	const formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
 </script>
 
@@ -20,7 +26,7 @@
 >
 	<h5 class="flex items-center justify-start gap-1 text-secondary">
 		{title}
-		{#if titleTooltip && $featureFlags.analTooltip}
+		{#if titleTooltip && showTitleTooltip}
 			<Tooltip>
 				{#snippet trigger()}
 					<Info class="icon" size="1rem" weight="bold" />

package/dist/components/stat-card/StatCard.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     value?: string | number | null;
     unit?: string | null;
     titleTooltip?: string;
+    showTitleTooltip?: boolean;
 }
 declare const StatCard: import("svelte").Component<Props, {}, "">;
 type StatCard = ReturnType<typeof StatCard>;

package/dist/components/stat-card/index.d.ts

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

package/dist/components/stat-card/index.js

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

package/dist/components/status-badge/index.d.ts

@@ -0,0 +1 @@
+export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/status-badge/index.js

@@ -0,0 +1 @@
+export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/table/index.d.ts

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from './Table.svelte';

package/dist/components/tabs/components/Tab.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Button from 'design-system/components/button/Button.svelte';
+	import Button from '../../button/';
 	import type { Snippet } from 'svelte';
 	interface Props {
 		active?: boolean;

package/dist/components/tabs/index.d.ts

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

package/dist/components/tabs/index.js

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

package/dist/components/tag/Tag.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import Tooltip from 'design-system/components/tooltip/Tooltip.svelte';
+	import Tooltip from '../tooltip/';
 
 	interface Props {
 		children: Snippet;

package/dist/components/tag/index.d.ts

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { default as Tag } from './Tag.svelte';

package/dist/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1 @@
+export { default as Toast } from './Toast.svelte';

package/dist/components/tooltip/index.d.ts

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

package/dist/components/tooltip/index.js

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

package/dist/fonts/index.d.ts

@@ -0,0 +1,6 @@
+export declare const fonts: {
+    MDSystemMonoRegular: string;
+    MDSystemRegular: string;
+    MDSystemMedium: string;
+    MDSystemSemibold: string;
+};

package/dist/fonts/index.js

@@ -0,0 +1,10 @@
+import MDSystemMonoRegular from './MDSystemMono-Regular.woff2';
+import MDSystemRegular from './MDSystem-Regular.woff2';
+import MDSystemMedium from './MDSystem-Medium.woff2';
+import MDSystemSemibold from './MDSystem-Semibold.woff2';
+export const fonts = {
+    MDSystemMonoRegular,
+    MDSystemRegular,
+    MDSystemMedium,
+    MDSystemSemibold
+};

package/dist/index.d.ts

@@ -1,4 +1,30 @@
-export { default as Avatar } from './components/avatar/Avatar.svelte';
-export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/markdown/';
+export * from './components/modal/';
+export * from './components/notification-popup/';
+export * from './components/pill/';
+export * from './components/progress-circle/';
+export * from './components/segmented-control-buttons/';
+export * from './components/select/';
+export * from './components/skeleton-loader/';
+export * from './components/slider/';
+export * from './components/spinner/';
+export * from './components/stat-card/';
+export * from './components/status-badge/';
+export * from './components/table/';
+export * from './components/tabs/';
+export * from './components/tag/';
+export * from './components/tooltip/';
 export { tokens } from './tokens';
 import './app.css';

package/dist/index.js

@@ -1,5 +1,32 @@
-// Reexport your entry components here
-export { default as Avatar } from './components/avatar/Avatar.svelte';
-export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
+// Components
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/markdown/';
+export * from './components/modal/';
+export * from './components/notification-popup/';
+export * from './components/pill/';
+export * from './components/progress-circle/';
+export * from './components/segmented-control-buttons/';
+export * from './components/select/';
+export * from './components/skeleton-loader/';
+export * from './components/slider/';
+export * from './components/spinner/';
+export * from './components/stat-card/';
+export * from './components/status-badge/';
+export * from './components/table/';
+export * from './components/tabs/';
+export * from './components/tag/';
+export * from './components/tooltip/';
+// Styles and Tokens
 export { tokens } from './tokens';
 import './app.css';

package/dist/types/fonts.d.ts

@@ -0,0 +1,4 @@
+declare module '*.woff2' {
+	const content: string;
+	export default content;
+}

package/package.json

@@ -1,18 +1,13 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.24",
+	"version": "0.0.25",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build --config ./vite.config.ts",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"build": "vite build && npm run package",
+		"package": "svelte-package --input ./src/lib --output ./dist",
+		"check": "svelte-check",
+		"test": "vitest run",
+		"test:watch": "vitest"
 	},
 	"files": [
 		"dist",
@@ -38,12 +33,12 @@
 		"./tailwind-safelist": "./dist/tailwind-safelist.js"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"tailwindcss": "^3.4.9",
-		"daisyui": "^4.10.5"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
+		"@storybook/addon-svelte-csf": "^4.2.0",
+		"@storybook/svelte": "^8.4.7",
 		"@sveltejs/adapter-vercel": "^5.5.0",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/package": "^2.0.0",

package/dist/components/banner/Banner.stories.svelte.d.ts

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

package/dist/components/button/Button.stories.svelte.d.ts

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

package/dist/components/divider/Divider.stories.svelte.d.ts

@@ -1,27 +0,0 @@
-export default Divider;
-type Divider = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Divider: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import Divider from './Divider.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;
-}