@reshape-biotech/design-system 0.0.47 → 0.0.48

package/dist/components/input/Input.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		label?: string | null;
+		value: string | number;
+		type?: 'text' | 'password' | 'textarea' | 'number';
+		name?: string;
+		required?: boolean;
+		autofocus?: boolean;
+		placeholder?: string;
+		id?: string | undefined;
+		validator?: (a: string | number) => boolean;
+		onBlur?: (e: Event) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
+		prefix?: Snippet<[any]>;
+		suffix?: Snippet;
+		error?: Snippet;
+		input?: HTMLInputElement | HTMLTextAreaElement;
+		maxlength?: number | null;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+		readonly?: boolean;
+	}
+
+	let {
+		label = null,
+		value = $bindable(),
+		type = 'text',
+		required = false,
+		autofocus = false,
+		placeholder = '',
+		id = undefined,
+		name,
+		validator = (_) => {
+			return true;
+		},
+		onBlur = () => {},
+		onkeydown = () => {},
+		prefix,
+		suffix,
+		error,
+		input = $bindable(),
+		maxlength = null,
+		size = 'md',
+		readonly = false
+	}: Props = $props();
+
+	let valid = $state(true);
+
+	const inputId = Math.random().toString(36).substring(7); // used for A11y
+
+	function handleInput(event: Event) {
+		if (readonly) return;
+		const target = event.target as HTMLTextAreaElement | HTMLInputElement;
+		value = target.value;
+
+		if (type === 'textarea') {
+			autoResizeTextarea(target as HTMLTextAreaElement);
+		}
+	}
+	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		// Set a maximum height for the textarea (e.g., 200px)
+		const maxHeight = 200;
+
+		// Reset height to auto to get the correct scrollHeight
+		textarea.style.height = 'auto';
+
+		// If scrollHeight is less than maxHeight, set height to scrollHeight
+		// Otherwise, set height to maxHeight and enable scrolling
+		if (textarea.scrollHeight < maxHeight) {
+			textarea.style.height = `${textarea.scrollHeight}px`;
+			textarea.style.overflowY = 'hidden';
+		} else {
+			textarea.style.height = `${maxHeight}px`;
+			textarea.style.overflowY = 'auto';
+		}
+	}
+
+	function handleBlur(event: Event) {
+		valid = validator(value);
+		onBlur(event);
+	}
+</script>
+
+<div class="w-full">
+	{#if label}
+		<label for={id ?? inputId} class="block px-1 py-2 text-sm text-secondary">{label}</label>
+	{/if}
+	<div
+		class="flex w-full items-center gap-1 rounded-lg border border-input bg-surface shadow-input size-{size}"
+		class:!border-error={!valid}
+	>
+		{#if type === 'textarea'}
+			<textarea
+				id={id ?? inputId}
+				rows="3"
+				class:has-text={value}
+				class:has-placeholder={placeholder}
+				aria-label={label}
+				oninput={handleInput}
+				onblur={handleBlur}
+				{onkeydown}
+				bind:this={input}
+				{value}
+				{required}
+				{autofocus}
+				{placeholder}
+				{maxlength}
+				{name}
+				{readonly}
+			></textarea>
+		{:else}
+			<div class="whitespace-nowrap text-secondary">
+				{@render prefix?.({ valid })}
+			</div>
+			<input
+				id={id ?? inputId}
+				class="inline leading-none"
+				class:has-text={value}
+				class:has-placeholder={placeholder}
+				aria-label={label}
+				{type}
+				{name}
+				{required}
+				oninput={handleInput}
+				onblur={handleBlur}
+				{onkeydown}
+				bind:this={input}
+				{value}
+				{autofocus}
+				{placeholder}
+				{maxlength}
+				{readonly}
+			/>
+			<div class="whitespace-nowrap text-secondary">
+				{@render suffix?.()}
+			</div>
+		{/if}
+	</div>
+	{#if !valid}
+		{@render error?.()}
+	{/if}
+</div>
+
+<style>
+	input,
+	textarea {
+		width: 100%;
+		outline: 2px solid transparent;
+		outline-offset: 2px;
+		/* Remove the resize-none class to allow scrolling */
+		resize: none
+}
+
+	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))
+}
+
+	.size-xs {
+		height: 1.5rem;
+		padding: 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1rem
+}
+
+	.size-sm {
+		height: 2rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
+}
+
+	.size-md {
+		height: 2.5rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
+}
+
+	.size-lg {
+		height: 3rem;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.75rem;
+		padding-bottom: 0.75rem;
+		font-size: 1rem;
+		line-height: 1.5rem
+}
+
+	.size-dynamic {
+		height: auto;
+		padding-left: 0.75rem;
+		padding-right: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.5rem
+}
+</style>

package/dist/components/input/Input.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string | null;
+    value: string | number;
+    type?: 'text' | 'password' | 'textarea' | 'number';
+    name?: string;
+    required?: boolean;
+    autofocus?: boolean;
+    placeholder?: string;
+    id?: string | undefined;
+    validator?: (a: string | number) => boolean;
+    onBlur?: (e: Event) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    prefix?: Snippet<[any]>;
+    suffix?: Snippet;
+    error?: Snippet;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    maxlength?: number | null;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'dynamic';
+    readonly?: boolean;
+}
+declare const Input: import("svelte").Component<Props, {}, "value" | "input">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

@@ -0,0 +1,97 @@
+<script module lang="ts">
+	import List from './List.svelte';
+	import Tag from '../tag/Tag.svelte';
+	import { ArrowUpRight } from 'phosphor-svelte';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: List,
+		title: 'Design System/List',
+		tags: ['autodocs']
+	});
+
+	const items: { name: string; licenses: string; repository: string }[] = [
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' },
+		{ name: 'Formik', licenses: 'MIT', repository: 'somewhere' }
+	];
+</script>
+
+<Story name="Default" args={{}}>
+	<List {items}>
+		{#snippet item(item)}
+			<div class="flex min-h-2 flex-row gap-2">
+				<div class="flex flex-row justify-start gap-2">
+					<div class="max-w-56 truncate font-bold">
+						{item.name}
+					</div>
+					{#if item.licenses}
+						<Tag>
+							{item.licenses}
+						</Tag>
+					{/if}
+				</div>
+				<div class="flex grow flex-row justify-end gap-3">
+					{#if item.repository}
+						<div class="flex flex-row items-center gap-1">
+							<a
+								href={item.repository}
+								class="text-secondary"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Repository
+							</a>
+							<ArrowUpRight />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+	</List>
+</Story>
+
+<Story name="Compact" args={{ variant: 'compact' }}>
+	<List {items} variant="compact">
+		{#snippet item(item)}
+			<div class="flex min-h-2 flex-row gap-2">
+				<div class="flex flex-row justify-start gap-2">
+					<div class="max-w-56 truncate font-bold">
+						{item.name}
+					</div>
+					{#if item.licenses}
+						<Tag>
+							{item.licenses}
+						</Tag>
+					{/if}
+				</div>
+				<div class="flex grow flex-row justify-end gap-3">
+					{#if item.repository}
+						<div class="flex flex-row items-center gap-1">
+							<a
+								href={item.repository}
+								class="text-gray-700"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Repository
+							</a>
+							<ArrowUpRight />
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+	</List>
+</Story>
+
+<Story name="Loading">
+	<List variant="compact" items={[{}, {}, {}]}>
+		{#snippet item({})}
+			<div class="flex h-8 w-full items-center">
+				<div class="skeleton h-6 w-full bg-neutral"></div>
+			</div>
+		{/snippet}
+	</List>
+</Story>

package/dist/components/list/List.stories.svelte.d.ts

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

package/dist/components/list/List.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" generics="T">
+	import type { Overflow } from '../../tailwind';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		item: Snippet<[T]>;
+		overflow?: Overflow;
+		variant?: 'compact' | 'default';
+	};
+	let { items, item, overflow = 'overflow-y-auto', variant = 'default' }: Props = $props();
+</script>
+
+<div class="{`listStyles ${variant === 'compact' ? 'compact' : 'default'} ${overflow} `}}">
+	{#each items as currentItem, i}
+		<div class="item">
+			{@render item(currentItem)}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.listStyles {
+
+    display: flex;
+
+    height: 100%;
+
+    flex-direction: column;
+
+    align-items: flex-start;
+
+    align-self: stretch;
+
+    border-radius: 0.25rem
+}
+
+		.listStyles.default {
+
+    gap: 1rem
+}
+
+		.listStyles.compact {
+
+    gap: 0px;
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+    padding-left: 1rem;
+
+    padding-right: 1rem
+}
+
+		.listStyles.compact :global(> .item:not(:last-child)) {
+
+    border-bottom-width: 1px;
+
+    border-style: solid;
+
+    border-color: #12192a14
+}
+
+		.listStyles :global(.item) {
+
+    align-self: stretch
+}
+</style>

package/dist/components/list/List.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Overflow } from '../../tailwind';
+import type { Snippet } from 'svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        items: T[];
+        item: Snippet<[T]>;
+        overflow?: Overflow;
+        variant?: "compact" | "default";
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T> = InstanceType<typeof List<T>>;
+export default List;

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

@@ -0,0 +1,21 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Logo from './Logo.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Design System/Logo',
+		component: Logo,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Base">
+	<div class="flex flex-col gap-4">
+		<Logo size="xs" />
+		<Logo size="sm" />
+		<Logo size="md" />
+		<Logo size="lg" />
+		<Logo size="xl" />
+	</div>
+</Story>

package/dist/components/logo/Logo.stories.svelte.d.ts

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	type Props = {
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		color?: 'default' | 'white';
+	};
+
+	let { size = 'md', color = 'default' }: Props = $props();
+
+	const colorMap = {
+		default: '#ff7a00',
+		white: '#ffffff'
+	};
+
+	const sizeMap = {
+		xs: 16,
+		sm: 20,
+		md: 24,
+		lg: 32,
+		xl: 40
+	};
+</script>
+
+<svg
+	width={sizeMap[size]}
+	height={sizeMap[size]}
+	viewBox={`0 0 24 24`}
+	fill={colorMap[color]}
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.25 10.5C2.3511 10.5 0 8.1489 0 5.25C0 2.3511 2.3511 0 5.25 0C8.1489 0 10.5 2.3511 10.5 5.25C10.5034 8.1489 8.1523 10.5 5.25 10.5Z"
+	/>
+	<path
+		d="M18.75 10.5C15.8511 10.5 13.5 8.1489 13.5 5.25C13.5 2.3511 15.8511 0 18.75 0C21.6489 0 24 2.3511 24 5.25C24.0034 8.1489 21.6523 10.5 18.75 10.5Z"
+	/>
+	<path
+		d="M0 18.75C0 15.8511 2.3511 13.5 5.25 13.5C8.1489 13.5 10.5 15.8511 10.5 18.75C10.5 21.6489 8.1489 24 5.25 24C2.3511 24 0 21.6489 0 18.75Z"
+	/>
+</svg>

package/dist/components/logo/Logo.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    color?: 'default' | 'white';
+};
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

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

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

package/dist/components/logo/index.js

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

package/dist/components/markdown/Markdown.stories.svelte

@@ -0,0 +1,41 @@
+<script module>
+	import Markdown from './Markdown.svelte';
+
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		component: Markdown,
+		title: 'Design System/Markdown',
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Primary">
+	<Markdown
+		markdown={`# Welcome to My Markdown Story
+
+## Features
+
+- **Bold** and *italic* text
+- Lists (ordered and unordered)
+- [Links](https://example.com)
+- Code blocks
+
+### Example Code
+
+\`\`\`javascript
+function greet(name) {
+  console.log(\`Hello, \${name}!\`);
+}
+greet('Storybook');
+\`\`\`
+
+> This is a blockquote. It's great for highlighting important information.
+
+![Storybook Logo](https://storybook.js.org/images/logos/icon-storybook.svg)
+
+---
+
+Happy storytelling with Markdown!`}
+	/>
+</Story>

package/dist/components/markdown/Markdown.stories.svelte.d.ts

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	interface Props {
+		markdown: string;
+	}
+
+	let { markdown }: Props = $props();
+</script>
+
+<div class="prose text-sm text-tertiary dark:prose-invert">
+	{@html marked.parse(markdown ?? '')}
+</div>

package/dist/components/markdown/Markdown.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    markdown: string;
+}
+declare const Markdown: import("svelte").Component<Props, {}, "">;
+type Markdown = ReturnType<typeof Markdown>;
+export default Markdown;

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';