@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/components/toggle/Toggle.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		value?: boolean;
+		onclick?: (event?: MouseEvent) => void;
+		id: string;
+	}
+
+	let { value = $bindable(false), onclick, id }: Props = $props();
+</script>
+
+<label class="switch">
+	<input type="checkbox" bind:checked={value} {onclick} {id} />
+	<span class="slider round"></span>
+</label>
+
+<style>
+	/* The switch - the box around the slider */
+	.switch {
+		position: relative;
+		display: inline-block;
+		height: 1.25rem;
+		width: 2.25rem;
+}
+
+	/* Hide default HTML checkbox */
+	.switch input {
+		height: 0px;
+		width: 0px;
+		opacity: 0;
+}
+
+	/* The slider */
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		transition: 0.1s;
+		background-color: #12192A26;
+	}
+
+	.slider:before {
+		content: '';
+		left: 2px;
+		bottom: 2px;
+		transition: 0.1s;
+		position: absolute;
+		height: 1rem;
+		width: 1rem;
+		--tw-bg-opacity: 1;
+		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+	}
+
+	input:checked + .slider {
+		--tw-bg-opacity: 1;
+		background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+}
+
+	input:checked + .slider:before {
+		transform: translateX(16px);
+	}
+
+	/* Rounded sliders */
+	.slider.round {
+		border-radius: var(--rounded-badge, 1.9rem);
+}
+
+	.slider.round:before {
+		border-radius: 9999px;
+}
+</style>

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value?: boolean;
+    onclick?: (event?: MouseEvent) => void;
+    id: string;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "value">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

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

package/dist/components/toggle/index.js

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

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -0,0 +1,126 @@
+<script module>
+	import Tooltip from './Tooltip.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	const { Story } = defineMeta({
+		component: Tooltip,
+		title: 'Design System/Tooltip',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<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">
+	<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">
+	<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">
+	<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">
+	<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">
+	<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.stories.svelte.d.ts

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

package/dist/components/tooltip/Tooltip.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Tooltip } from 'flowbite-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' : ''}`);
+</script>
+
+{@render trigger?.()}
+<Tooltip
+	open={forceOpen}
+	arrow={showArrow}
+	{placement}
+	class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 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>

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

@@ -0,0 +1,13 @@
+import { Tooltip } from 'flowbite-svelte';
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    forceOpen?: boolean;
+    showArrow?: boolean;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    trigger?: Snippet;
+    content?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

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

package/dist/components/tooltip/index.js

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

package/dist/fonts/index.d.ts

@@ -0,0 +1,4 @@
+export declare const fonts: {
+    MDSystemMonoRegular: string;
+    afAnotherSans: string;
+};

package/dist/fonts/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export * from './components/activity/';
+export * from './components/avatar/';
+export * from './components/banner/';
+export * from './components/button/';
+export * as Collapsible from './components/collapsible/';
+export * as Combobox from './components/combobox/';
+export * from './components/graphs/';
+export * from './components/datepicker/';
+export * from './components/divider/';
+export * from './components/drawer/';
+export * from './components/drawer/';
+export * from './components/dropdown/';
+export * from './components/icons/';
+export * from './components/icon-button/';
+export * from './components/image';
+export * from './components/input/';
+export * from './components/list/';
+export * from './components/logo/';
+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 * from './components/toggle/';
+export { tokens } from './tokens';
+import './app.css';