@webamoki/web-svelte 0.2.0 → 0.3.1

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;

package/dist/components/ui/choice/Choice.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+	export interface ChoiceProps<V, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, K> {
+		value?: V;
+		onChange?: (value: V) => void;
+	}
+</script>
+
+<script lang="ts" generics="V, K extends string | number | symbol">
+	import ChoiceInternal, {
+		type ChoiceInternalProps as ChoiceInternalProps
+	} from './ChoiceInternal.svelte';
+
+	let { value = $bindable(undefined), onChange, ...props }: ChoiceProps<V, K> = $props();
+
+	function handleItemClick(item: V) {
+		value = item;
+		// Trigger event
+		onChange?.(item);
+	}
+
+	function isActive(item: V) {
+		return value === item;
+	}
+</script>
+
+<ChoiceInternal {handleItemClick} {isActive} {...props} />

package/dist/components/ui/choice/Choice.svelte.d.ts

@@ -0,0 +1,29 @@
+export interface ChoiceProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+    value?: V;
+    onChange?: (value: V) => void;
+}
+import { type ChoiceInternalProps as ChoiceInternalProps } from './ChoiceInternal.svelte';
+declare function $$render<V, K extends string | number | symbol>(): {
+    props: ChoiceProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, K>>['props'];
+    events(): ReturnType<typeof $$render<V, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K>['exports']>;
+    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Choice: $$IsomorphicComponent;
+type Choice<V, K extends string | number | symbol> = InstanceType<typeof Choice<V, K>>;
+export default Choice;

package/dist/components/ui/choice/ChoiceInternal.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+	export interface ChoiceInternalProps<T, K extends string | number | symbol>
+		extends Partial<FormAttrs> {
+		items: readonly T[];
+		getKey: (item: T) => K;
+		getLabel: (item: T) => string;
+		vertical?: boolean;
+	}
+</script>
+
+<script lang="ts" generics="T, K extends string | number | symbol">
+	import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+	import { cn } from '../../../shadcn/utils.js';
+
+	interface Props extends ChoiceInternalProps<T, K> {
+		handleItemClick: (item: T) => void;
+		isActive: (item: T) => boolean;
+	}
+
+	let {
+		items = [],
+		getKey,
+		getLabel,
+		vertical,
+		handleItemClick,
+		isActive,
+		disabled,
+		readonly,
+		'aria-invalid': ariaInvalid,
+		...control
+	}: Props = $props();
+</script>
+
+<div
+	{...control}
+	class={cn(
+		'w-fit rounded-lg border border-border bg-muted p-1 text-sm leading-[0.01em] font-semibold shadow-inner',
+		'grid gap-1',
+		vertical ? 'grid-flow-row auto-rows-fr' : 'auto-cols-fr grid-flow-col',
+		disabled || readonly ? 'pointer-events-none' : 'cursor-pointer',
+		disabled && 'opacity-50',
+		ariaInvalid && 'border-destructive'
+	)}
+>
+	{#each items as item (getKey(item))}
+		<button
+			type="button"
+			onclick={() => {
+				if (disabled || readonly) return;
+				handleItemClick(item);
+			}}
+			data-state={isActive(item) ? 'active' : 'inactive'}
+			class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+			>{getLabel(item)}
+		</button>
+	{/each}
+</div>

package/dist/components/ui/choice/ChoiceInternal.svelte.d.ts

@@ -0,0 +1,34 @@
+export interface ChoiceInternalProps<T, K extends string | number | symbol> extends Partial<FormAttrs> {
+    items: readonly T[];
+    getKey: (item: T) => K;
+    getLabel: (item: T) => string;
+    vertical?: boolean;
+}
+import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+declare function $$render<T, K extends string | number | symbol>(): {
+    props: ChoiceInternalProps<T, K> & {
+        handleItemClick: (item: T) => void;
+        isActive: (item: T) => boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<T, K>>['props'];
+    events(): ReturnType<typeof $$render<T, K>>['events'];
+    slots(): ReturnType<typeof $$render<T, K>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, K>['props']>, ReturnType<__sveltets_Render<T, K>['events']>, ReturnType<__sveltets_Render<T, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, K>['exports']>;
+    <T, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<T, K>['props']> & {}): ReturnType<__sveltets_Render<T, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ChoiceInternal: $$IsomorphicComponent;
+type ChoiceInternal<T, K extends string | number | symbol> = InstanceType<typeof ChoiceInternal<T, K>>;
+export default ChoiceInternal;

package/dist/components/ui/choice/ChoiceMulti.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	export interface ChoiceMultiProps<V, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, K> {
+		value: V[];
+		onAdd?: (value: V) => void;
+		onRemove?: (value: V) => void;
+	}
+</script>
+
+<script lang="ts" generics="V, K extends string | number | symbol">
+	import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+	import * as sorted from 'sorted-array-functions';
+
+	let {
+		value = $bindable([]),
+		onAdd,
+		onRemove,
+		items,
+		...props
+	}: ChoiceMultiProps<V, K> = $props();
+
+	const valueIndex = new Map<V, number>(items.map((item, index) => [item, index] as const));
+
+	function compareItems(a: V, b: V) {
+		const index1 = valueIndex.get(a);
+		if (index1 === undefined) return 1;
+		const index2 = valueIndex.get(b);
+		if (index2 === undefined) return -1;
+
+		return Math.sign(index1 - index2) as -1 | 0 | 1;
+	}
+
+	function contains(item: V) {
+		// Sorted contains function
+		return sorted.has(value, item, compareItems);
+	}
+
+	function handleItemClick(item: V) {
+		// Toggle add or remove
+		if (!contains(item)) {
+			sorted.add(value, item, compareItems);
+			// Trigger event
+			onAdd?.(item);
+		} else {
+			sorted.remove(value, item, compareItems);
+			// Trigger event
+			onRemove?.(item);
+		}
+
+		// Re-assign value to trigger state update
+		value = value;
+	}
+</script>
+
+<ChoiceInternal {handleItemClick} isActive={contains} {items} {...props} />

package/dist/components/ui/choice/ChoiceMulti.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface ChoiceMultiProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+    value: V[];
+    onAdd?: (value: V) => void;
+    onRemove?: (value: V) => void;
+}
+import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+declare function $$render<V, K extends string | number | symbol>(): {
+    props: ChoiceMultiProps<V, K>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<V, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, K>>['props'];
+    events(): ReturnType<typeof $$render<V, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, K>['exports']>;
+    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ChoiceMulti: $$IsomorphicComponent;
+type ChoiceMulti<V, K extends string | number | symbol> = InstanceType<typeof ChoiceMulti<V, K>>;
+export default ChoiceMulti;

package/dist/components/ui/choice/WeekdayChoice.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	export interface WeekdayChoiceProps {
+		value?: Day;
+		onChange?: (value: Day) => void;
+		vertical?: boolean;
+		longLabels?: boolean;
+		letterLabels?: boolean;
+		disabled?: boolean | null;
+		readonly?: boolean | null;
+	}
+</script>
+
+<script lang="ts">
+	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+	import { identity } from 'ramda';
+
+	import Choice from './Choice.svelte';
+
+	let { value = $bindable(undefined), ...props }: WeekdayChoiceProps = $props();
+
+	let getLabel = $derived.by(() => {
+		if (props.longLabels) return identity;
+		if (props.letterLabels) return formatDayLetter;
+		return formatDayShort;
+	});
+</script>
+
+<Choice items={Days} bind:value {getLabel} getKey={identity} {...props} />

package/dist/components/ui/choice/WeekdayChoice.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface WeekdayChoiceProps {
+    value?: Day;
+    onChange?: (value: Day) => void;
+    vertical?: boolean;
+    longLabels?: boolean;
+    letterLabels?: boolean;
+    disabled?: boolean | null;
+    readonly?: boolean | null;
+}
+import { type Day } from '../../../utils/index.js';
+declare const WeekdayChoice: import("svelte").Component<WeekdayChoiceProps, {}, "value">;
+type WeekdayChoice = ReturnType<typeof WeekdayChoice>;
+export default WeekdayChoice;

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" module>
+	import { identity } from 'ramda';
+
+	export interface WeekdayChoiceMultiProps {
+		value: Day[];
+		onAdd?: (value: Day) => void;
+		onRemove?: (value: Day) => void;
+		vertical?: boolean;
+		longLabels?: boolean;
+		letterLabels?: boolean;
+		disabled?: boolean | null;
+		readonly?: boolean | null;
+	}
+</script>
+
+<script lang="ts">
+	import ChoiceMulti from './ChoiceMulti.svelte';
+	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+
+	let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
+
+	let getLabel = $derived.by(() => {
+		if (props.longLabels) return identity;
+		if (props.letterLabels) return formatDayLetter;
+		return formatDayShort;
+	});
+</script>
+
+<ChoiceMulti items={Days} bind:value {getLabel} getKey={identity} {...props} />

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface WeekdayChoiceMultiProps {
+    value: Day[];
+    onAdd?: (value: Day) => void;
+    onRemove?: (value: Day) => void;
+    vertical?: boolean;
+    longLabels?: boolean;
+    letterLabels?: boolean;
+    disabled?: boolean | null;
+    readonly?: boolean | null;
+}
+import { type Day } from '../../../utils/index.js';
+declare const WeekdayChoiceMulti: import("svelte").Component<WeekdayChoiceMultiProps, {}, "value">;
+type WeekdayChoiceMulti = ReturnType<typeof WeekdayChoiceMulti>;
+export default WeekdayChoiceMulti;

package/dist/highlight.d.ts

@@ -0,0 +1 @@
+export declare function highlight(code: string, lang?: string, theme?: string): Promise<string>;

package/dist/highlight.js

@@ -0,0 +1,9 @@
+import { bundledLanguages, bundledThemes, createHighlighter } from 'shiki';
+const highlighterPromise = createHighlighter({
+    themes: Object.keys(bundledThemes), // all bundled themes
+    langs: Object.keys(bundledLanguages) // all bundled languages
+});
+export async function highlight(code, lang = 'svelte', theme = 'nord') {
+    const highlighter = await highlighterPromise;
+    return highlighter.codeToHtml(code, { lang, theme });
+}

package/dist/utils/datetime/index.d.ts

@@ -1,6 +1,7 @@
 import { CalendarDate, Time, ZonedDateTime, type DateDuration } from '@internationalized/date';
 export declare const Days: readonly ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
 export type Day = (typeof Days)[number];
+export declare const Day: import("arktype/internal/methods/string.ts").StringType<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", {}>;
 /**
  * Gets the day of the week for a given date.
  * @param date - The date to get the day of the week for.
@@ -59,7 +60,7 @@ export declare function getLastDatesOfDay(dayOfWeek: Day, count: number, startDa
  */
 export declare function getLastMonths(count: number, startDate: CalendarDate): CalendarDate[];
 /**
- * Checks if two time ranges overlap
+ * Checks if two time ranges overlap, boundaries are not considered overlapping.
  * @param start1 - The start time of the first range.
  * @param end1 - The end time of the first range.
  * @param start2 - The start time of the second range.
@@ -88,6 +89,13 @@ export declare function dateDiffWeeks(date1: CalendarDate, date2: CalendarDate):
  * @returns Formatted string of the day of the week.
  */
 export declare function formatDayShort(day: Day): string;
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "M"
+ * @returns Formatted letter of the day of the week.
+ */
+export declare function formatDayLetter(day: Day): string;
 /**
  * @param date The CalendarDate object to format.
  * @returns string of date in shortened format

package/dist/utils/datetime/index.js

@@ -1,4 +1,5 @@
 import { CalendarDate, DateFormatter, getDayOfWeek, getLocalTimeZone, startOfMonth, Time, toCalendarDate, today, toTime, ZonedDateTime } from '@internationalized/date';
+import { type } from 'arktype';
 import { map, range } from 'ramda';
 const DEFAULT_TIME_ZONE = 'Europe/London';
 const DEFAULT_LOCALE = 'en-GB';
@@ -12,6 +13,7 @@ export const Days = [
     'Saturday',
     'Sunday'
 ];
+export const Day = type.enumerated(...Days);
 const DayIndex = Object.fromEntries(Days.map((day, index) => [day, index]));
 /** Gets the day index of the date */
 function getDayIndex(date) {
@@ -130,7 +132,7 @@ export function getLastMonths(count, startDate) {
 }
 /* Intervals */
 /**
- * Checks if two time ranges overlap
+ * Checks if two time ranges overlap, boundaries are not considered overlapping.
  * @param start1 - The start time of the first range.
  * @param end1 - The end time of the first range.
  * @param start2 - The start time of the second range.
@@ -176,6 +178,16 @@ export function formatDayShort(day) {
     // Use the first three letters of the day
     return day.slice(0, 3);
 }
+/**
+ * Formats a day of the week.
+ * @param day - The day of the week to format.
+ * @example "Monday" -> "M"
+ * @returns Formatted letter of the day of the week.
+ */
+export function formatDayLetter(day) {
+    // Use the first letters of the day
+    return day.slice(0, 1);
+}
 /* Calendar Dates */
 const FullDateFormatter = new DateFormatter(DEFAULT_LOCALE, {
     day: 'numeric',

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.0",
+  "version": "0.3.1",
   "license": "MIT",
   "files": [
     "dist",
@@ -50,6 +50,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^22",
     "@types/ramda": "^0.31.1",
+    "@types/sorted-array-functions": "^1.3.3",
     "arktype": "^2.1.22",
     "clsx": "^2.1.1",
     "eslint": "^9.22.0",
@@ -60,6 +61,7 @@
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.2",
+    "shiki": "^3.13.0",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "sveltekit-superforms": "^2.27.1",
@@ -77,7 +79,8 @@
   ],
   "dependencies": {
     "formsnap": "^2.0.1",
-    "ramda": "^0.31.3"
+    "ramda": "^0.31.3",
+    "sorted-array-functions": "^1.3.0"
   },
   "scripts": {
     "dev": "vite dev",