@webamoki/web-svelte 0.8.0 → 1.0.0

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

@@ -1,72 +1,74 @@
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import IconInputWrapper from '../IconInputWrapper.svelte';
-	import { Input } from '../../../shadcn/components/ui/input/index.js';
-	import { cn } from '../../../shadcn/utils.js';
-	import { Time } from '@internationalized/date';
-	import type { Component } from 'svelte';
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
+  import type { Component } from 'svelte';
+  import type { FormPath } from 'sveltekit-superforms';
 
-	interface Props extends FieldWrapperProps<T, U, M> {
-		value?: Time;
-		class?: string;
-		step?: HTMLInputElement['step'];
-		placeholder?: string;
-		icon?: Component;
-	}
-	let {
-		value = $bindable(),
-		class: className,
-		step,
-		placeholder,
-		icon,
-		...fieldProps
-	}: Props = $props();
-	// Getter: format Time as string depending on step
-	function get(): string {
-		if (!value) return '00:00:00';
-		const hh = String(value.hour).padStart(2, '0');
-		const mm = String(value.minute).padStart(2, '0');
+  import IconInputWrapper from '../IconInputWrapper.svelte';
+  import { Input } from '../../../shadcn/components/ui/input/index.js';
+  import { cn } from '../../../shadcn/utils.js';
+  import { Time } from '@internationalized/date';
 
-		// If step < 60, include seconds
-		if (!step || Number(step) < 60) {
-			const ss = String(value.second).padStart(2, '0');
-			return `${hh}:${mm}:${ss}`;
-		}
+  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-		return `${hh}:${mm}`;
-	}
+  interface Props extends FieldWrapperProps<T, U, M> {
+    class?: string;
+    icon?: Component;
+    placeholder?: string;
+    step?: HTMLInputElement['step'];
+    value?: Time;
+  }
+  let {
+    class: className,
+    icon,
+    placeholder,
+    step,
+    value = $bindable(),
+    ...fieldProps
+  }: Props = $props();
+  // Getter: format Time as string depending on step
+  function get(): string {
+    if (!value) return '00:00:00';
+    const hh = String(value.hour).padStart(2, '0');
+    const mm = String(value.minute).padStart(2, '0');
 
-	// Setter: parse string into Time depending on step
-	function set(raw: string) {
-		if (!raw) {
-			value = undefined;
-			return;
-		}
-		const parts = raw.split(':').map(Number);
-		if (parts.length === 2) {
-			const [hh, mm] = parts;
-			value = new Time(hh, mm);
-		} else if (parts.length === 3) {
-			const [hh, mm, ss] = parts;
-			value = new Time(hh, mm, ss);
-		}
-	}
+    // If step < 60, include seconds
+    if (!step || Number(step) < 60) {
+      const ss = String(value.second).padStart(2, '0');
+      return `${hh}:${mm}:${ss}`;
+    }
+
+    return `${hh}:${mm}`;
+  }
+
+  // Setter: parse string into Time depending on step
+  function set(raw: string) {
+    if (!raw) {
+      value = undefined;
+      return;
+    }
+    const parts = raw.split(':').map(Number);
+    if (parts.length === 2) {
+      const [hh, mm] = parts;
+      value = new Time(hh, mm);
+    } else if (parts.length === 3) {
+      const [hh, mm, ss] = parts;
+      value = new Time(hh, mm, ss);
+    }
+  }
 </script>
 
 <FieldWrapper {...fieldProps}>
-	{#snippet formElem(props)}
-		<IconInputWrapper {icon}>
-			{#snippet children({ class: iconClass })}
-				<Input
-					type="time"
-					bind:value={get, set}
-					class={cn(iconClass, className)}
-					{placeholder}
-					{step}
-					{...props}
-				/>
-			{/snippet}
-		</IconInputWrapper>
-	{/snippet}
+  {#snippet formElem(props)}
+    <IconInputWrapper {icon}>
+      {#snippet children({ class: iconClass })}
+        <Input
+          class={cn(iconClass, className)}
+          {placeholder}
+          {step}
+          type="time"
+          bind:value={get, set}
+          {...props}
+        />
+      {/snippet}
+    </IconInputWrapper>
+  {/snippet}
 </FieldWrapper>

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

@@ -1,34 +1,43 @@
-import { Time } from '@internationalized/date';
-import type { Component } from 'svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default TimeField;
+type TimeField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const TimeField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    icon?: Component<any, any, string> | undefined;
+    placeholder?: string | undefined;
+    step?: string | undefined;
+    value?: Time | undefined;
+};
+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 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(): {};
+}
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
-        value?: Time;
         class?: string;
-        step?: HTMLInputElement["step"];
-        placeholder?: string;
         icon?: Component;
+        placeholder?: string;
+        step?: HTMLInputElement["step"];
+        value?: Time;
     };
     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 TimeField: $$IsomorphicComponent;
-type TimeField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof TimeField<T, U, M>>;
-export default TimeField;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { Component } from 'svelte';
+import { Time } from '@internationalized/date';

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

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

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

@@ -1,29 +1,34 @@
-import { type WeekdayChoiceProps } from '../../ui/choice/WeekdayChoice.svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default WeekdayChoiceField;
+type WeekdayChoiceField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const WeekdayChoiceField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceProps & {
+    class?: string | undefined;
+};
+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 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(): {};
+}
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: {
+    props: FieldWrapperProps<T, U, M> & WeekdayChoiceProps & {
         class?: string;
-    } & 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;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { WeekdayChoiceProps } from '../../ui/choice/WeekdayChoice.svelte';

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

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

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

@@ -1,29 +1,34 @@
-import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default WeekdayChoiceMultiField;
+type WeekdayChoiceMultiField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const WeekdayChoiceMultiField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps & {
+    class?: string | undefined;
+};
+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 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(): {};
+}
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: {
+    props: FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps & {
         class?: string;
-    } & 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;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';

package/dist/components/showcase/CodeBlock.svelte

@@ -1,52 +1,52 @@
 <script lang="ts">
-	import { highlight } from '../../highlight.js';
-	import { onMount } from 'svelte';
+  import { highlight } from '../../highlight.js';
+  import { onMount } from 'svelte';
 
-	export let language: string = 'svelte';
-	export let theme: string = 'nord';
+  export let language: string = 'svelte';
+  export let theme: string = 'nord';
 
-	let highlightedCode = '';
-	let codeBlock: HTMLDivElement;
+  let highlightedCode = '';
+  let codeBlock: HTMLDivElement;
 
-	onMount(async () => {
-		const code = codeBlock.textContent || '';
-		const lines = code.split('\n');
-		const firstLine = lines.find((line) => line.trim() !== '');
+  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();
-		}
+    // 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';
+    // 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);
-	});
+    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 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} style="display: none;" class="overflow-x-auto text-sm">
+    <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/Container.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let title: string;
-	export let description: string;
-	let id = title.toLowerCase().replace(/\s+/g, '-');
+  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>
+  <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" />
+  <slot name="preview" />
+  <slot name="code" />
 </section>

package/dist/components/showcase/Preview.svelte

@@ -1,6 +1,6 @@
 <div class="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 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/Sidebar.svelte

@@ -1,6 +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>
+  <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/SidebarLink.svelte

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