@reshape-biotech/design-system 0.0.47 → 0.0.48

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

@@ -0,0 +1,19 @@
+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/button/Button.svelte

@@ -0,0 +1,263 @@
+<script lang="ts">
+	import Spinner from '../spinner/Spinner.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Variant =
+		| 'primary'
+		| 'secondary'
+		| 'transparent'
+		| 'danger'
+		| 'outline'
+		| 'secondary-inverse';
+
+	interface Props {
+		class?: string;
+		onClick?: (event?: MouseEvent) => void;
+		type?: 'button' | 'submit' | 'reset' | null | undefined;
+		loading?: boolean;
+		disabled?: boolean;
+		accessibilityLabel?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		id?: string | undefined;
+		tabindex?: number | undefined;
+		variant?: Variant;
+		children?: Snippet;
+		dataTestId?: string;
+		rounded?: boolean;
+	}
+
+	let {
+		class: className = '',
+		onClick = () => {},
+		type = 'button',
+		loading = false,
+		disabled = false,
+		accessibilityLabel = '',
+		size = 'lg',
+		id = undefined,
+		tabindex = undefined,
+		variant = 'primary',
+		children,
+		dataTestId = undefined,
+		rounded = false
+	}: Props = $props();
+
+	let variantClass = $derived(`btn-${variant}`);
+	let sizeClass = $derived(`btn-size-${size}`);
+</script>
+
+<button
+	aria-label={accessibilityLabel}
+	onclick={(e) => {
+		if (!loading) {
+			onClick(e);
+		} else {
+			e.preventDefault();
+		}
+	}}
+	{type}
+	{disabled}
+	{id}
+	{tabindex}
+	class:cursor-wait={loading}
+	class="button {variantClass} {sizeClass} {className}"
+	data-testid={dataTestId}
+	class:rounded
+>
+	{#if loading}
+		<Spinner />
+	{:else}
+		{@render children?.()}
+	{/if}
+</button>
+
+<style>
+	.button {
+
+    display: inline-flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    gap: 0.5rem;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    text-wrap: nowrap;
+
+    border-radius: 0.5rem;
+
+    font-size: 0.875rem;
+
+    font-weight: 500;
+
+    line-height: 1.5rem;
+
+    transition-duration: 150ms
+}
+
+.button:disabled {
+
+    background-color: #12192a0d;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(136 140 148 / var(--tw-text-opacity, 1))
+}
+
+	.rounded {
+
+    border-radius: 9999px
+}
+
+	/* Size variants */
+	.btn-size-xs {
+
+    height: 1.75rem;
+
+    padding: 0.5rem
+}
+	.btn-size-sm {
+
+    height: 2rem;
+
+    padding-left: 0.75rem;
+
+    padding-right: 0.75rem;
+
+    padding-top: 0.5rem;
+
+    padding-bottom: 0.5rem
+}
+	.btn-size-md {
+
+    height: 2.5rem;
+
+    padding-left: 1rem;
+
+    padding-right: 1rem;
+
+    padding-top: 0.75rem;
+
+    padding-bottom: 0.75rem
+}
+	.btn-size-lg {
+
+    height: 3rem;
+
+    padding-left: 1.5rem;
+
+    padding-right: 1.5rem;
+
+    padding-top: 1rem;
+
+    padding-bottom: 1rem;
+
+    font-size: 1rem;
+
+    line-height: 1.5rem
+}
+
+	/* Button variants */
+	.btn-primary {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.btn-primary:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
+}
+	.btn-secondary {
+
+    background-color: #12192a0d;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.btn-secondary:hover {
+
+    background-color: #12192A1A
+}
+	.btn-secondary:active {
+
+    background-color: #12192a0d
+}
+	.btn-transparent {
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.btn-transparent:hover {
+
+    background-color: #12192a0d
+}
+	.btn-danger {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.btn-danger:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
+}
+	.btn-outline {
+
+    border-width: 1px;
+
+    border-color: #12192A26;
+
+    background-color: transparent;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(18 25 42 / var(--tw-text-opacity, 1))
+}
+	.btn-outline:hover {
+
+    background-color: #12192A1A
+}
+	.btn-outline:disabled {
+
+    border-style: none
+}
+	.btn-secondary-inverse {
+
+    background-color: #FFFFFF0D;
+
+    --tw-text-opacity: 1;
+
+    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
+}
+	.btn-secondary-inverse:hover {
+
+    background-color: #FFFFFF26
+}
+	.btn-secondary-inverse:active {
+
+    background-color: #FFFFFF0D
+}
+</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'outline' | 'secondary-inverse';
+interface Props {
+    class?: string;
+    onClick?: (event?: MouseEvent) => void;
+    type?: 'button' | 'submit' | 'reset' | null | undefined;
+    loading?: boolean;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    id?: string | undefined;
+    tabindex?: number | undefined;
+    variant?: Variant;
+    children?: Snippet;
+    dataTestId?: string;
+    rounded?: boolean;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

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

package/dist/components/button/index.js

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

package/dist/components/collapsible/Collapsible.stories.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Collapsible from './index';
+	import Button from '../button/Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Collapsible.Root,
+		title: 'Design System/Collapsible',
+		tags: ['autodocs']
+	});
+
+	let open = $state(false);
+</script>
+
+<Story name="Base">
+	<Collapsible.Root class="w-[200px]">
+		<Collapsible.Trigger class="w-full">
+			<h6>Trigger</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Without Icon">
+	<Collapsible.Root class="w-[200px]">
+		<Collapsible.Trigger class="w-full" withIcon={false}>
+			<h6>Trigger</h6>
+		</Collapsible.Trigger>
+
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>
+
+<Story name="Controlled">
+	<Button onClick={() => (open = !open)}>Outside Trigger</Button>
+	<Collapsible.Root class="w-[200px]" {open}>
+		<Collapsible.Content>Content</Collapsible.Content>
+	</Collapsible.Root>
+</Story>

package/dist/components/collapsible/Collapsible.stories.svelte.d.ts

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

package/dist/components/collapsible/components/collapsible-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Collapsible, type WithoutChildrenOrChild } from 'bits-ui';
+	import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import type { CollapsibleContentProps } from '../types';
+
+	let {
+		ref = $bindable(null),
+		duration = 200,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<CollapsibleContentProps> & {
+		duration?: number;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Collapsible.Content forceMount bind:ref {...restProps}>
+	{#snippet child({ props, open })}
+		{#if open}
+			<div {...props} transition:slide={{ duration }}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</Collapsible.Content>

package/dist/components/collapsible/components/collapsible-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type WithoutChildrenOrChild } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { CollapsibleContentProps } from '../types';
+type $$ComponentProps = WithoutChildrenOrChild<CollapsibleContentProps> & {
+    duration?: number;
+    children?: Snippet;
+};
+declare const CollapsibleContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { CaretDown } from 'phosphor-svelte';
+	import type { CollapsibleTriggerProps } from '../types';
+
+	let { children, withIcon = true, ...props }: CollapsibleTriggerProps = $props();
+</script>
+
+<Collapsible.Trigger {...props} class="transition-all {props.class}">
+	<div class="container">
+		{@render children()}
+		{#if withIcon}
+			<CaretDown class="icon" />
+		{/if}
+	</div>
+</Collapsible.Trigger>
+
+<style>
+	:global([data-state='open']) :global(.icon) {
+
+    --tw-rotate: 180deg;
+
+    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))
+}
+
+	.container {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    gap: 0.5rem
+}
+</style>

package/dist/components/collapsible/components/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleTriggerProps } from '../types';
+declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

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

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+export declare const Root: import("svelte").Component<Collapsible.RootProps, {}, "open" | "ref">;
+export { default as Trigger } from './components/collapsible-trigger.svelte';
+export { default as Content } from './components/collapsible-content.svelte';
+export type { CollapsibleTriggerProps, CollapsibleContentProps } from './types';

package/dist/components/collapsible/index.js

@@ -0,0 +1,4 @@
+import { Collapsible } from 'bits-ui';
+export const Root = Collapsible.Root;
+export { default as Trigger } from './components/collapsible-trigger.svelte';
+export { default as Content } from './components/collapsible-content.svelte';

package/dist/components/collapsible/types.d.ts

@@ -0,0 +1,9 @@
+import { type CollapsibleContentProps as BitsCollapsibleContentProps, type CollapsibleTriggerProps as BitsCollapsibleTriggerProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+export type CollapsibleTriggerProps = {
+    children: Snippet;
+    withIcon?: boolean;
+} & BitsCollapsibleTriggerProps;
+export type CollapsibleContentProps = {
+    children: Snippet;
+} & BitsCollapsibleContentProps;

package/dist/components/collapsible/types.js

@@ -0,0 +1 @@
+import {} from 'bits-ui';

package/dist/components/combobox/Combobox.stories.svelte

@@ -0,0 +1,119 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Combobox from './index';
+	import { Plus } from 'phosphor-svelte';
+	import IconButton from '../icon-button/IconButton.svelte';
+	import Divider from '../divider/Divider.svelte';
+	import Tag from '../tag/Tag.svelte';
+
+	const { Story } = defineMeta({
+		component: Combobox.Root,
+		title: 'Design System/Combobox',
+		tags: ['autodocs']
+	});
+
+	const fruits = [
+		{ value: 'mango', label: 'Mango' },
+		{ value: 'watermelon', label: 'Watermelon' },
+		{ value: 'apple', label: 'Apple' },
+		{ value: 'pineapple', label: 'Pineapple' },
+		{ value: 'orange', label: 'Orange' },
+		{ value: 'grape', label: 'Grape' },
+		{ value: 'strawberry', label: 'Strawberry' },
+		{ value: 'banana', label: 'Banana' },
+		{ value: 'kiwi', label: 'Kiwi' },
+		{ value: 'peach', label: 'Peach' },
+		{ value: 'cherry', label: 'Cherry' },
+		{ value: 'blueberry', label: 'Blueberry' },
+		{ value: 'raspberry', label: 'Raspberry' },
+		{ value: 'blackberry', label: 'Blackberry' },
+		{ value: 'plum', label: 'Plum' },
+		{ value: 'apricot', label: 'Apricot' },
+		{ value: 'pear', label: 'Pear' },
+		{ value: 'grapefruit', label: 'Grapefruit' }
+	];
+
+	let searchValue = $state('');
+
+	let selected = $state<string[]>([]);
+
+	const filteredFruits = $derived(
+		searchValue === ''
+			? fruits
+			: fruits.filter((fruit) => fruit.label.toLowerCase().includes(searchValue.toLowerCase()))
+	);
+	const exactMatch = $derived(
+		filteredFruits.find((fruit) => fruit.value.toLowerCase() === searchValue.toLowerCase())
+	);
+	let customAnchor = $state<HTMLElement>(null!);
+</script>
+
+<Story name="Base">
+	<Combobox.Root
+		onOpenChange={(o) => {
+			if (!o) searchValue = '';
+		}}
+		type="multiple"
+		name="favoriteFruit"
+		items={filteredFruits}
+		bind:value={selected}
+	>
+		<div class="flex gap-2">
+			{#each selected as fruit}
+				<Tag>
+					{fruit}
+				</Tag>
+			{/each}
+		</div>
+		<Combobox.Trigger>
+			<div bind:this={customAnchor}>
+				<IconButton rounded={false}>
+					<Plus size={16} />
+				</IconButton>
+			</div>
+		</Combobox.Trigger>
+		<Combobox.Content {customAnchor} class="flex flex-col justify-between">
+			<div>
+				<Combobox.Input
+					placeholder="Search a fruit"
+					oninput={(e: Event) => (searchValue = (e.target as HTMLInputElement).value)}
+					autofocus
+				/>
+				<Divider />
+			</div>
+			<div class="flex flex-grow flex-col">
+				{#if filteredFruits.length > 0}
+					<Combobox.Group>
+						<Combobox.GroupHeading>Fruits</Combobox.GroupHeading>
+						{#each filteredFruits as fruit (fruit.value)}
+							<Combobox.Item value={fruit.value} label={fruit.label}>
+								{#snippet children({ selected })}
+									{fruit.label}
+									{#if selected}
+										<Combobox.Indicator />
+									{/if}
+								{/snippet}
+							</Combobox.Item>
+						{:else}
+							<span class="block px-5 py-2 text-sm text-muted-foreground"> No results found </span>
+						{/each}
+					</Combobox.Group>
+				{/if}
+			</div>
+			{#if !exactMatch && searchValue !== ''}
+				<Divider />
+
+				<Combobox.Add
+					class=""
+					onclick={() => {
+						selected.push(searchValue);
+						fruits.push({ value: searchValue, label: searchValue });
+						searchValue = '';
+					}}
+				>
+					<p>Add new fruit</p>
+				</Combobox.Add>
+			{/if}
+		</Combobox.Content>
+	</Combobox.Root>
+</Story>

package/dist/components/combobox/Combobox.stories.svelte.d.ts

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

package/dist/components/combobox/components/combobox-add.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Plus } from 'phosphor-svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	type Props = { children: Snippet } & HTMLButtonAttributes;
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<button {...props}>
+	<Plus />
+	{@render children()}
+</button>
+
+<style>
+	button {
+    display: flex;
+    height: 2.5rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+</style>

package/dist/components/combobox/components/combobox-add.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = {
+    children: Snippet;
+} & HTMLButtonAttributes;
+declare const ComboboxAdd: import("svelte").Component<Props, {}, "">;
+type ComboboxAdd = ReturnType<typeof ComboboxAdd>;
+export default ComboboxAdd;