@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/components/drawer/Drawer.stories.svelte

@@ -0,0 +1,64 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Drawer from './Drawer.svelte';
+	import Button from '../button/Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Drawer,
+		title: 'Design System/Drawer',
+		tags: ['autodocs']
+	});
+
+	let open = $state(false);
+</script>
+
+<Story name="Base">
+	<div class="py-12">
+		<Drawer id="my-drawer" bind:open controlled>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>
+
+<Story name="Open">
+	<div class="py-12">
+		<Drawer id="my-drawer" open controlled>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>
+
+<Story name="Open Left">
+	<div class="py-12">
+		<Drawer id="my-drawer" side="left" bind:open controlled>
+			{#snippet trigger()}
+				<Button onClick={() => (open = true)}>Open Drawer</Button>
+			{/snippet}
+			{#snippet content()}
+				<div>
+					<div>
+						<p>Drawer content here</p>
+					</div>
+				</div>
+			{/snippet}
+		</Drawer>
+	</div>
+</Story>

package/dist/components/drawer/Drawer.stories.svelte.d.ts

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DrawerLabel from './DrawerLabel.svelte';
+
+	interface Props {
+		id: string;
+		controlled?: boolean;
+		// Open only works when controlled is true
+		open?: boolean;
+		side?: 'left' | 'right';
+		trigger?: Snippet;
+		content: Snippet;
+	}
+
+	let {
+		id,
+		controlled = false,
+		open = $bindable(false),
+		side = 'right',
+		trigger,
+		content
+	}: Props = $props();
+</script>
+
+<div class={`drawer-auto-gutter drawer`} class:drawer-end={side === 'right'}>
+	{#if controlled}
+		<input {id} type="checkbox" class="drawer-toggle" bind:checked={open} />
+	{:else}
+		<input {id} type="checkbox" class="drawer-toggle" />
+	{/if}
+
+	<div class="drawer-content">
+		{@render trigger?.()}
+	</div>
+	<div class="drawer-side" inert={controlled ? !open : false}>
+		<label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
+		<div class="h-screen bg-surface sm:w-[460px]">
+			{@render content()}
+		</div>
+	</div>
+</div>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id: string;
+    controlled?: boolean;
+    open?: boolean;
+    side?: 'left' | 'right';
+    trigger?: Snippet;
+    content: Snippet;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/drawer/DrawerLabel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id: string;
+		classes?: string;
+		children: Snippet;
+	}
+
+	let { id, classes = '', children }: Props = $props();
+</script>
+
+<label for={id} class={`${classes}`}>{@render children()}</label>
+
+<style>
+	label {
+
+    display: flex;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    gap: 0.25rem;
+
+    border-radius: 0.5rem;
+
+    border-width: 1px;
+
+    border-color: #12192A1A;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding: 0.75rem;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1));
+
+    --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
+
+    --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
+
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+
+	label:not(:focus-within):hover {
+
+    border-color: #5750ee40
+}
+
+	label:focus-within {
+
+    --tw-border-opacity: 1;
+
+    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
+}
+</style>

package/dist/components/drawer/DrawerLabel.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id: string;
+    classes?: string;
+    children: Snippet;
+}
+declare const DrawerLabel: import("svelte").Component<Props, {}, "">;
+type DrawerLabel = ReturnType<typeof DrawerLabel>;
+export default DrawerLabel;

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/Dropdown.stories.svelte

@@ -0,0 +1,236 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Dropdown from './Dropdown.svelte';
+
+	const { Story } = defineMeta({
+		component: Dropdown,
+		title: 'Design System/Dropdown',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="OutlinedButton">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ OutlinedButton })}
+				<OutlinedButton>Dropdown</OutlinedButton>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Secondary">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="secondary">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+<Story name="Transparent">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="transparent">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+<Story name="Danger">
+	<div class="py-12">
+		<Dropdown>
+			{#snippet trigger({ Trigger })}
+				<Trigger variant="danger">Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu class="w-full">
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Sides">
+	<div class="flex h-screen w-full items-center justify-center">
+		<div class="flex flex-1 justify-between">
+			<Dropdown open side="dropdown-bottom">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Bottom</Trigger>
+				{/snippet}
+
+				{#snippet content({ DropdownMenu })}
+					<div>
+						<DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-top">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Top</Trigger>
+				{/snippet}
+				{#snippet content({ DropdownMenu })}
+					<div>
+						<DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-right">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Right</Trigger>
+				{/snippet}
+				{#snippet content({ DropdownMenu })}
+					<div>
+						<DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+			<Dropdown open side="dropdown-left">
+				{#snippet trigger({ Trigger })}
+					<Trigger>Left</Trigger>
+				{/snippet}
+				{#snippet content({ DropdownMenu })}
+					<div>
+						<DropdownMenu class="w-[120px]">
+							<li>
+								<p>1st item</p>
+							</li>
+							<li>
+								<p>2nd item</p>
+							</li>
+						</DropdownMenu>
+					</div>
+				{/snippet}
+			</Dropdown>
+		</div>
+	</div>
+</Story>
+
+<Story name="End align">
+	<div class="py-12">
+		<Dropdown alignEnd open>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownMenu })}
+				<div>
+					<DropdownMenu>
+						<li>
+							<p>1st item</p>
+						</li>
+						<li>
+							<p>2nd item</p>
+						</li>
+					</DropdownMenu>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>
+
+<Story name="Other content">
+	<div class="py-12">
+		<Dropdown alignEnd open>
+			{#snippet trigger({ Trigger })}
+				<Trigger>Dropdown</Trigger>
+			{/snippet}
+			{#snippet content({ DropdownContent })}
+				<div>
+					<DropdownContent>
+						<div>
+							<p>This is a dropdown with other content</p>
+							<p>It doesn't have to be list items</p>
+						</div>
+					</DropdownContent>
+				</div>
+			{/snippet}
+		</Dropdown>
+	</div>
+</Story>

package/dist/components/dropdown/Dropdown.stories.svelte.d.ts

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

@@ -0,0 +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';
+
+	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 C = {};
+
+	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 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}
+>
+	{@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/Dropdown.svelte.d.ts

@@ -0,0 +1,26 @@
+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;
+        }
+    ]>;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Variant = 'primary' | 'secondary';
+
+	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'
+	};
+
+	let { class: className = '', variant = 'primary', children }: Props = $props();
+
+	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"
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary';
+interface Props {
+    class?: string;
+    variant?: Variant;
+    children?: Snippet;
+}
+declare const DropdownContent: import("svelte").Component<Props, {}, "">;
+type DropdownContent = ReturnType<typeof DropdownContent>;
+export default DropdownContent;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		children?: Snippet;
+	}
+
+	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}`}
+>
+	{@render children?.()}
+</ul>
+
+<style>
+	:global(.menu li > *:not(ul):not(.menu-title):not(details):active) {
+    background-color: #12192A1A
+}
+</style>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const DropdownMenu: import("svelte").Component<Props, {}, "">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;