@reshape-biotech/design-system 0.0.45 → 0.0.47

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

@@ -1,12 +0,0 @@
-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

@@ -1,62 +0,0 @@
-<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: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
-
-    --tw-shadow-colored: 0px 1px 4px 0px 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

@@ -1,9 +0,0 @@
-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

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

package/dist/components/drawer/index.js

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

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

@@ -1,236 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,69 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-<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={`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

@@ -1,10 +0,0 @@
-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

@@ -1,23 +0,0 @@
-<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-md bg-surface p-1 shadow-2xl ${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

@@ -1,8 +0,0 @@
-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;

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	interface Props {
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		variant?: Color;
-		children?: Snippet;
-		noPadding?: boolean;
-	}
-	let {
-		size = 'md',
-		class: className = '',
-		variant = 'primary',
-		children,
-		noPadding = false
-	}: Props = $props();
-
-	type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
-
-	const sizes = $derived({
-		sm: `h-8 ${noPadding ? 'px-0' : 'px-3'} ${noPadding ? 'py-0' : 'py-2'}`,
-		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'
-	};
-</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}`}
->
-	{@render children?.()}
-</div>

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

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-type Color = 'primary' | 'secondary' | 'transparent' | 'danger';
-interface Props {
-    size?: 'sm' | 'md' | 'lg';
-    class?: string;
-    variant?: Color;
-    children?: Snippet;
-    noPadding?: boolean;
-}
-declare const DropdownTrigger: import("svelte").Component<Props, {}, "">;
-type DropdownTrigger = ReturnType<typeof DropdownTrigger>;
-export default DropdownTrigger;

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

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		children: Snippet;
-	}
-
-	let { class: className = '', children }: Props = $props();
-</script>
-
-<div role="button" tabindex="0" class={`${className}`}>{@render children()}</div>
-
-<style>
-	div {
-
-    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: 0px 1px 4px 0px rgba(18, 25, 42, 0.04);
-
-    --tw-shadow-colored: 0px 1px 4px 0px var(--tw-shadow-color);
-
-    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 {
-
-    border-color: #5750ee40
-}
-
-	div:focus-within {
-
-    --tw-border-opacity: 1;
-
-    border-color: rgb(87 80 238 / var(--tw-border-opacity, 1))
-}
-</style>

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

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

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

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

package/dist/components/dropdown/index.js

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