@webamoki/web-svelte 0.1.1 → 0.3.1

package/README.md

@@ -1,58 +1,7 @@
-# Svelte library
+# Setup
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+in the main css file, e.g. `app.css`, add the following line:
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
+```css
+@source "../...path/node_modules/@webamoki/web-svelte/dist/**/*.{js,svelte,ts}";
 ```

package/dist/components/form/FieldWrapper.svelte

@@ -5,6 +5,11 @@
 		label?: string;
 		description?: string;
 	}
+
+	export interface FormAttrs extends ControlAttrs {
+		disabled?: HTMLInputAttributes['disabled'];
+		readonly?: HTMLInputAttributes['readonly'];
+	}
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
@@ -19,6 +24,7 @@
 	import type { Snippet } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import Errors from './Errors.svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		formElem: Snippet<[ControlAttrs]>;

package/dist/components/form/FieldWrapper.svelte.d.ts

@@ -4,9 +4,14 @@ export interface FieldWrapperProps<T extends Record<string, unknown>, U extends
     label?: string;
     description?: string;
 }
+export interface FormAttrs extends ControlAttrs {
+    disabled?: HTMLInputAttributes['disabled'];
+    readonly?: HTMLInputAttributes['readonly'];
+}
 import { type ControlAttrs, type FsSuperForm } from 'formsnap';
 import type { Snippet } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
+import type { HTMLInputAttributes } from 'svelte/elements';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
         formElem: Snippet<[ControlAttrs]>;

package/dist/components/form/fields/ChoiceField.svelte

@@ -0,0 +1,44 @@
+<script
+	lang="ts"
+	generics="V, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+>
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import Choice, { type ChoiceProps } from '../../ui/choice/Choice.svelte';
+
+	type Props = FieldWrapperProps<T, U, M> & ChoiceProps<V, K>;
+
+	let {
+		items,
+		getKey,
+		getLabel,
+		onChange,
+		vertical,
+		value = $bindable(undefined),
+
+		form,
+		name,
+		label,
+		description,
+		disabled,
+		readonly
+	}: Props = $props();
+</script>
+
+<FieldWrapper {form} {name} {label} {description}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-center gap-2">
+			<Choice
+				{items}
+				{getKey}
+				{getLabel}
+				{onChange}
+				{vertical}
+				{disabled}
+				{readonly}
+				bind:value
+				{...props}
+			/>
+		</div>
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/ChoiceField.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+import { type ChoiceProps } from '../../ui/choice/Choice.svelte';
+declare function $$render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & ChoiceProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<V, K, T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<V, K, T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<V, K, T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, K, T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K, T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
+    <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any>['bindings']>;
+}
+declare const ChoiceField: $$IsomorphicComponent;
+type ChoiceField<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceField<V, K, T, U, M>>;
+export default ChoiceField;

package/dist/components/form/fields/ChoiceMultiField.svelte

@@ -0,0 +1,46 @@
+<script
+	lang="ts"
+	generics="V, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+>
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
+	import ChoiceMulti from '../../ui/choice/ChoiceMulti.svelte';
+
+	type Props = FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
+	let {
+		items,
+		getKey,
+		getLabel,
+		onAdd,
+		onRemove,
+		vertical,
+		value = $bindable([]),
+
+		form,
+		name,
+		label,
+		description,
+		disabled,
+		readonly
+	}: Props = $props();
+</script>
+
+<FieldWrapper {form} {name} {label} {description}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-center gap-2">
+			<ChoiceMulti
+				{items}
+				{getKey}
+				{getLabel}
+				{onAdd}
+				{onRemove}
+				{disabled}
+				{readonly}
+				{vertical}
+				{...props}
+				bind:value
+			/>
+		</div>
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/ChoiceMultiField.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
+declare function $$render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<V, K, T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<V, K, T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<V, K, T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, K, T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K, T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
+    <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any>['bindings']>;
+}
+declare const ChoiceMultiField: $$IsomorphicComponent;
+type ChoiceMultiField<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceMultiField<V, K, T, U, M>>;
+export default ChoiceMultiField;

package/dist/components/form/fields/WeekdayChoiceField.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import WeekdayChoice, {
+		type WeekdayChoiceProps
+	} from '../../ui/choice/WeekdayChoice.svelte';
+
+	type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
+
+	let {
+		onChange,
+		vertical,
+		value = $bindable(undefined),
+		letterLabels,
+		longLabels,
+
+		form,
+		name,
+		label,
+		description,
+		disabled,
+		readonly
+	}: Props = $props();
+</script>
+
+<FieldWrapper {form} {name} {label} {description}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-center gap-2">
+			<WeekdayChoice
+				{onChange}
+				{vertical}
+				{disabled}
+				{readonly}
+				{letterLabels}
+				{longLabels}
+				bind:value
+				{...props}
+			/>
+		</div>
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/WeekdayChoiceField.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+import { type WeekdayChoiceProps } from '../../ui/choice/WeekdayChoice.svelte';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const WeekdayChoiceField: $$IsomorphicComponent;
+type WeekdayChoiceField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof WeekdayChoiceField<T, U, M>>;
+export default WeekdayChoiceField;

package/dist/components/form/fields/WeekdayChoiceMultiField.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
+	import WeekdayChoiceMulti from '../../ui/choice/WeekdayChoiceMulti.svelte';
+
+	type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
+	let {
+		onAdd,
+		onRemove,
+		vertical,
+		value = $bindable([]),
+		letterLabels,
+		longLabels,
+
+		form,
+		name,
+		label,
+		description,
+		disabled,
+		readonly
+	}: Props = $props();
+</script>
+
+<FieldWrapper {form} {name} {label} {description}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-center gap-2">
+			<WeekdayChoiceMulti
+				{onAdd}
+				{onRemove}
+				{disabled}
+				{readonly}
+				{vertical}
+				{letterLabels}
+				{longLabels}
+				{...props}
+				bind:value
+			/>
+		</div>
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/WeekdayChoiceMultiField.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const WeekdayChoiceMultiField: $$IsomorphicComponent;
+type WeekdayChoiceMultiField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof WeekdayChoiceMultiField<T, U, M>>;
+export default WeekdayChoiceMultiField;

package/dist/components/index.d.ts

@@ -1,3 +1,9 @@
 import TextField from './form/fields/TextField.svelte';
 import PasswordField from './form/fields/PasswordField.svelte';
-export { TextField, PasswordField };
+import ChoiceField from './form/fields/ChoiceField.svelte';
+import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
+import Choice from './ui/choice/Choice.svelte';
+import ChoiceMulti from './ui/choice/ChoiceMulti.svelte';
+import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
+import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
+export { TextField, PasswordField, ChoiceMultiField, ChoiceField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };

package/dist/components/index.js

@@ -1,3 +1,9 @@
 import TextField from './form/fields/TextField.svelte';
 import PasswordField from './form/fields/PasswordField.svelte';
-export { TextField, PasswordField };
+import ChoiceField from './form/fields/ChoiceField.svelte';
+import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
+import Choice from './ui/choice/Choice.svelte';
+import ChoiceMulti from './ui/choice/ChoiceMulti.svelte';
+import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
+import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
+export { TextField, PasswordField, ChoiceMultiField, ChoiceField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };

package/dist/components/showcase/CodeBlock.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { highlight } from '../../highlight.js';
+	import { onMount } from 'svelte';
+
+	export let language: string = 'svelte';
+	export let theme: string = 'nord';
+
+	let highlightedCode = '';
+	let codeBlock: HTMLDivElement;
+
+	onMount(async () => {
+		const code = codeBlock.textContent || '';
+		const lines = code.split('\n');
+		const firstLine = lines.find((line) => line.trim() !== '');
+
+		// Dedent the code first
+		let dedentedCode = '';
+		if (firstLine) {
+			const leadingSpaces = firstLine.match(/^\s*/)?.[0].length || 0;
+			dedentedCode = lines
+				.map((line) => line.slice(leadingSpaces))
+				.join('\n')
+				.trim();
+		} else {
+			dedentedCode = code.trim();
+		}
+
+		// Add tabs to each line and spacing above/below
+		const spacedCode =
+			'\n' +
+			dedentedCode
+				.split('\n')
+				.map((line) => `\t${line}`)
+				.join('\n') +
+			'\n\n';
+
+		highlightedCode = await highlight(spacedCode, language, theme);
+	});
+</script>
+
+<div class="overflow-hidden rounded-b-xl border bg-gray-900">
+	<div class="border-b border-gray-800 bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200">
+		Code
+	</div>
+	<div bind:this={codeBlock} class="overflow-x-auto text-sm" style="display: none;">
+		<slot />
+	</div>
+	<div class="overflow-x-auto text-sm">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html highlightedCode}
+	</div>
+</div>

package/dist/components/showcase/CodeBlock.svelte.d.ts

@@ -0,0 +1,30 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CodeBlock: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    language?: string;
+    theme?: string;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CodeBlock = InstanceType<typeof CodeBlock>;
+export default CodeBlock;

package/dist/components/showcase/Container.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let title: string;
+	export let description: string;
+	let id = title.toLowerCase().replace(/\s+/g, '-');
+</script>
+
+<section {id} class="mx-auto mb-12 w-full max-w-screen px-4">
+	<h2 class="mb-4 text-2xl font-semibold text-gray-800">{title}</h2>
+	<p class="mb-6 text-gray-600">{description}</p>
+
+	<slot name="preview" />
+	<slot name="code" />
+</section>

package/dist/components/showcase/Container.svelte.d.ts

@@ -0,0 +1,24 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Container: $$__sveltets_2_IsomorphicComponent<{
+    title: string;
+    description: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    preview: {};
+    code: {};
+}, {}, string>;
+type Container = InstanceType<typeof Container>;
+export default Container;

package/dist/components/showcase/Preview.svelte

@@ -0,0 +1,6 @@
+<div class="overflow-hidden rounded-t-xl border bg-white shadow-sm">
+	<div class="border-b bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700">Preview</div>
+	<div class="p-6">
+		<slot />
+	</div>
+</div>

package/dist/components/showcase/Preview.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Preview;
+type Preview = SvelteComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Preview: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+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/showcase/Sidebar.svelte

@@ -0,0 +1,6 @@
+<aside class="sticky top-0 hidden h-screen w-64 overflow-y-auto border-r bg-white p-6 lg:block">
+	<h2 class="mb-4 text-xl font-bold text-gray-900">Components</h2>
+	<nav class="space-y-2">
+		<slot />
+	</nav>
+</aside>

package/dist/components/showcase/Sidebar.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Sidebar;
+type Sidebar = SvelteComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Sidebar: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+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/showcase/SidebarLink.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let title: string;
+
+	let id = title.toLowerCase().replace(/\s+/g, '-');
+</script>
+
+<a href="#{id}" class="block text-gray-600 hover:text-gray-900">{title}</a>

package/dist/components/showcase/SidebarLink.svelte.d.ts

@@ -0,0 +1,20 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SidebarLink: $$__sveltets_2_IsomorphicComponent<{
+    title: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SidebarLink = InstanceType<typeof SidebarLink>;
+export default SidebarLink;