create-tauri-ui 0.1.3 → 0.1.4

package/templates/sveltekit/src/lib/components/docs/icons/Google.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    fill="currentColor"
+    d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Logo.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  {...$$restProps}
+>
+  <circle cx="12" cy="12" r="10" />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Minimize.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...$$restProps}>
+  <path
+    fill="currentColor"
+    d="M480 480H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h448c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Npm.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/PayPal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg role="img" viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Pnpm.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Radix.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 25 25" fill="none" {...$$restProps}>
+  <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" fill="currentcolor" />
+  <path d="M12 0H4V8H12V0Z" fill="currentcolor" />
+  <path
+    d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
+    fill="currentcolor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/RadixSvelte.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" {...$$restProps}>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.71429 4H14.8572C16.7507 4 18.2857 5.53502 18.2857 7.42857C18.2857 9.32213 16.7507 10.8571 14.8572 10.8571H12.5714V20H11.4286C8.27267 20 5.71429 17.4416 5.71429 14.2857V4ZM10.2857 10.8571H8.00001V14.2857C8.00001 15.7785 8.95408 17.0485 10.2857 17.5192V10.8571ZM8.00001 8.57143H14.8572C15.4883 8.57143 16 8.05975 16 7.42857C16 6.7974 15.4883 6.28571 14.8572 6.28571H8.00001V8.57143Z"
+    fill="currentcolor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Tailwind.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/Yarn.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from 'lucide-svelte';
+
+  type $$Props = IconProps;
+</script>
+
+<svg viewBox="0 0 24 24" {...$$restProps}>
+  <path
+    d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
+    fill="currentColor"
+  />
+</svg>

package/templates/sveltekit/src/lib/components/docs/icons/index.ts

@@ -0,0 +1,78 @@
+import type { Icon as LucideIcon } from 'lucide-svelte';
+import {
+  AlertTriangle,
+  ArrowRight,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  ClipboardCheck,
+  Copy,
+  CreditCard,
+  File,
+  FileText,
+  HelpCircle,
+  Image,
+  Laptop,
+  Loader2,
+  Moon,
+  MoreVertical,
+  Pizza,
+  Plus,
+  Settings,
+  SunMedium,
+  Trash,
+  Twitter,
+  User,
+  X
+} from 'lucide-svelte';
+import Apple from './Apple.svelte';
+import Aria from './Aria.svelte';
+import GitHub from './GitHub.svelte';
+import Google from './Google.svelte';
+import Logo from './Logo.svelte';
+import Npm from './Npm.svelte';
+import PayPal from './PayPal.svelte';
+import Pnpm from './Pnpm.svelte';
+import RadixSvelte from './RadixSvelte.svelte';
+import Tailwind from './Tailwind.svelte';
+import Yarn from './Yarn.svelte';
+
+export type Icon = LucideIcon;
+
+export const Icons = {
+  logo: Logo,
+  close: X,
+  spinner: Loader2,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  trash: Trash,
+  post: FileText,
+  page: File,
+  media: Image,
+  settings: Settings,
+  billing: CreditCard,
+  ellipsis: MoreVertical,
+  add: Plus,
+  warning: AlertTriangle,
+  user: User,
+  arrowRight: ArrowRight,
+  help: HelpCircle,
+  pizza: Pizza,
+  twitter: Twitter,
+  check: Check,
+  copy: Copy,
+  copyDone: ClipboardCheck,
+  sun: SunMedium,
+  moon: Moon,
+  laptop: Laptop,
+  gitHub: GitHub,
+  radix: RadixSvelte,
+  aria: Aria,
+  npm: Npm,
+  yarn: Yarn,
+  pnpm: Pnpm,
+  tailwind: Tailwind,
+  google: Google,
+  apple: Apple,
+  paypal: PayPal
+};

package/templates/sveltekit/src/lib/components/docs/index.ts

@@ -0,0 +1,23 @@
+export { default as Callout } from './Callout.svelte';
+export { default as CodeBlockWrapper } from './CodeBlockWrapper.svelte';
+export { default as ComponentExample } from './ComponentExample.svelte';
+export { default as ComponentSource } from './ComponentSource.svelte';
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as DocsPager } from './DocsPager.svelte';
+export { default as HexToChannels } from './HexToChannels.svelte';
+export { default as ManualInstall } from './ManualInstall.svelte';
+export { default as Metadata } from './Metadata.svelte';
+export { default as SiteFooter } from './SiteFooter.svelte';
+export { default as SiteHeader } from './SiteHeader.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as TableOfContents } from './TableOfContents.svelte';
+export { default as Tree } from './Tree.svelte';
+export { default as TailwindIndicator } from './TailwindIndicator.svelte';
+
+export * from './examples';
+export * from './icons';
+export * from './page-header';
+export * from './nav';
+export * from './examples-nav';
+export * from './dashboard';
+export * from './light-switch';

package/templates/sveltekit/src/lib/components/docs/light-switch/LightSwitch.svelte

@@ -0,0 +1,75 @@
+<!-- 
+Derived from SkeletonUI:  https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte
+ -->
+
+<script lang="ts">
+  import { Moon, Sun } from 'lucide-svelte';
+  import { onMount } from 'svelte';
+  import { buttonVariants } from '$components/ui/button';
+  import { cn } from '$lib/utils';
+  import {
+    getModeOsPrefers,
+    modeCurrent,
+    setModeCurrent,
+    setModeUserPrefers
+  } from './light-switch';
+
+  type OnKeyDownEvent = KeyboardEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  };
+
+  function onToggleHandler(): void {
+    $modeCurrent = !$modeCurrent;
+    setModeUserPrefers($modeCurrent);
+    setModeCurrent($modeCurrent);
+  }
+
+  // A11y Input Handlers
+  function onKeyDown(event: OnKeyDownEvent): void {
+    // Enter/Space triggers selection event
+    if (['Enter', 'Space'].includes(event.code)) {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    // Sync lightswitch with the theme
+    if (!('modeCurrent' in localStorage)) {
+      setModeCurrent(getModeOsPrefers());
+    }
+  });
+</script>
+
+<div
+  on:click={onToggleHandler}
+  on:click
+  on:keydown={onKeyDown}
+  on:keydown
+  on:keyup
+  on:keypress
+  role="switch"
+  aria-label="Light Switch"
+  aria-checked={$modeCurrent}
+  title="Toggle {$modeCurrent === true ? 'Dark' : 'Light'} Mode"
+  tabindex="0"
+>
+  <div
+    class={cn(
+      buttonVariants({
+        size: 'sm',
+        variant: 'ghost'
+      }),
+      'w-9 px-0'
+    )}
+  >
+    {#if $modeCurrent}
+      <Moon class="h-5 w-5" />
+      <span class="sr-only">Dark</span>
+    {:else}
+      <Sun class="h-5 w-5" />
+      <span class="sr-only">Light</span>
+    {/if}
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/light-switch/index.ts

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

package/templates/sveltekit/src/lib/components/docs/light-switch/light-switch.ts

@@ -0,0 +1,87 @@
+// Source: https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts
+
+// Lightswitch Service
+
+import { get } from 'svelte/store';
+// DO NOT replace this ⬇ import, it has to be imported directly
+import { localStorageStore } from './local-storage-store';
+
+// Stores ---
+// TRUE: light, FALSE: dark
+
+/** Store: OS Preference Mode */
+export const modeOsPrefers = localStorageStore<boolean>('modeOsPrefers', false);
+/** Store: User Preference Mode */
+export const modeUserPrefers = localStorageStore<boolean | undefined>('modeUserPrefers', undefined);
+/** Store: Current Mode State */
+export const modeCurrent = localStorageStore<boolean>('modeCurrent', false);
+
+// Get ---
+
+/** Get the OS Preference for light/dark mode */
+export function getModeOsPrefers(): boolean {
+  const prefersLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+  modeOsPrefers.set(prefersLightMode);
+  return prefersLightMode;
+}
+
+/** Get the User for light/dark mode */
+export function getModeUserPrefers(): boolean | undefined {
+  return get(modeUserPrefers);
+}
+
+/** Get the Automatic Preference light/dark mode */
+export function getModeAutoPrefers(): boolean {
+  const os = getModeOsPrefers();
+  const user = getModeUserPrefers();
+  const modeValue = user !== undefined ? user : os;
+  return modeValue;
+}
+
+// Set ---
+
+/** Set the User Preference for light/dark mode */
+export function setModeUserPrefers(value: boolean): void {
+  modeUserPrefers.set(value);
+}
+
+/** Set the the current light/dark mode */
+export function setModeCurrent(value: boolean) {
+  const elemHtmlClasses = document.documentElement.classList;
+  const classDark = `dark`;
+  value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+  modeCurrent.set(value);
+}
+
+// Lightswitch Utility
+
+/** Set the visible light/dark mode on page load. */
+export function setInitialClassState() {
+  const elemHtmlClasses = document.documentElement.classList;
+  // Conditions
+  const condLocalStorageUserPrefs = localStorage.getItem('modeUserPrefers') === 'false';
+  const condLocalStorageUserPrefsExists = !('modeUserPrefers' in localStorage);
+  const condMatchMedia = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  // Add/remove `.dark` class to HTML element
+  if (condLocalStorageUserPrefs || (condLocalStorageUserPrefsExists && condMatchMedia)) {
+    elemHtmlClasses.add('dark');
+  } else {
+    elemHtmlClasses.remove('dark');
+  }
+}
+
+// Auto-Switch Utility
+
+/** Automatically set the visible light/dark, updates on change. */
+export function autoModeWatcher(): void {
+  const mql = window.matchMedia('(prefers-color-scheme: light)');
+  function setMode(value: boolean) {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = `dark`;
+    value === true ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+  }
+  setMode(mql.matches);
+  mql.onchange = () => {
+    setMode(mql.matches);
+  };
+}

package/templates/sveltekit/src/lib/components/docs/light-switch/local-storage-store.ts

@@ -0,0 +1,81 @@
+// Source: https://github.com/joshnuss/svelte-local-storage-store
+// https://github.com/joshnuss/svelte-local-storage-store/blob/master/index.ts
+// Represents version v0.4.0 (2023-01-18)
+import type { Writable } from 'svelte/store';
+import { BROWSER } from 'esm-env';
+import { get, writable as internal } from 'svelte/store';
+
+declare type Updater<T> = (value: T) => T;
+declare type StoreDict<T> = { [key: string]: Writable<T> };
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const stores: StoreDict<any> = {};
+
+interface Serializer<T> {
+  parse(text: string): T;
+  stringify(object: T): string;
+}
+
+type StorageType = 'local' | 'session';
+
+interface Options<T> {
+  serializer?: Serializer<T>;
+  storage?: StorageType;
+}
+
+function getStorage(type: StorageType) {
+  return type === 'local' ? localStorage : sessionStorage;
+}
+
+export function localStorageStore<T>(
+  key: string,
+  initialValue: T,
+  options?: Options<T>
+): Writable<T> {
+  const serializer = options?.serializer ?? JSON;
+  const storageType = options?.storage ?? 'local';
+
+  function updateStorage(key: string, value: T) {
+    if (!BROWSER) return;
+
+    getStorage(storageType).setItem(key, serializer.stringify(value));
+  }
+
+  if (!stores[key]) {
+    const store = internal(initialValue, (set) => {
+      const json = BROWSER ? getStorage(storageType).getItem(key) : null;
+
+      if (json) {
+        set(<T>serializer.parse(json));
+      }
+
+      if (BROWSER) {
+        const handleStorage = (event: StorageEvent) => {
+          if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
+        };
+
+        window.addEventListener('storage', handleStorage);
+
+        return () => window.removeEventListener('storage', handleStorage);
+      }
+    });
+
+    const { subscribe, set } = store;
+
+    stores[key] = {
+      set(value: T) {
+        updateStorage(key, value);
+        set(value);
+      },
+      update(updater: Updater<T>) {
+        const value = updater(get(store));
+
+        updateStorage(key, value);
+        set(value);
+      },
+      subscribe
+    };
+  }
+
+  return stores[key];
+}

package/templates/sveltekit/src/lib/components/docs/mdsvex/a.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let href: HTMLAnchorAttributes['href'] = undefined;
+</script>
+
+<a {href} class={cn('font-medium underline underline-offset-4', className)} {...$$restProps}>
+  <slot />
+</a>

package/templates/sveltekit/src/lib/components/docs/mdsvex/blockquote.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<blockquote class={cn('mt-6 border-l-2 pl-6 italic', className)} {...$$restProps}>
+  <slot />
+</blockquote>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h1.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h1 class={cn('mt-2 scroll-m-20 text-4xl font-bold', className)} {...$$restProps}>
+  <slot />
+</h1>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h2.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h2
+  class={cn(
+    'mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</h2>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h3.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h3 class={cn('mt-8 scroll-m-20 text-xl font-semibold tracking-tight', className)} {...$$restProps}>
+  <slot />
+</h3>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h4.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h4 class={cn('mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...$$restProps}>
+  <slot />
+</h4>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h5.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h5 class={cn('mt-8 scroll-m-20 text-lg font-semibold tracking-tight', className)} {...$$restProps}>
+  <slot />
+</h5>

package/templates/sveltekit/src/lib/components/docs/mdsvex/h6.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h6
+  class={cn('mt-8 scroll-m-20 text-base font-semibold tracking-tight', className)}
+  {...$$restProps}
+>
+  <slot />
+</h6>

package/templates/sveltekit/src/lib/components/docs/mdsvex/hr.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<hr class={cn('my-4 md:my-8', className)} {...$$restProps} />

package/templates/sveltekit/src/lib/components/docs/mdsvex/img.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type { HTMLImgAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let src: HTMLImgAttributes['src'] = undefined;
+  export let alt: HTMLImgAttributes['alt'] = undefined;
+</script>
+
+<img {src} {alt} class={cn('rounded-md', className)} {...$$restProps} />

package/templates/sveltekit/src/lib/components/docs/mdsvex/index.ts

@@ -0,0 +1,19 @@
+export { default as a } from './a.svelte';
+export { default as blockquote } from './blockquote.svelte';
+export { default as h1 } from './h1.svelte';
+export { default as h2 } from './h2.svelte';
+export { default as h3 } from './h3.svelte';
+export { default as h4 } from './h4.svelte';
+export { default as h5 } from './h5.svelte';
+export { default as h6 } from './h6.svelte';
+export { default as hr } from './hr.svelte';
+export { default as img } from './img.svelte';
+export { default as li } from './li.svelte';
+export { default as ol } from './ol.svelte';
+export { default as p } from './p.svelte';
+export { default as pre } from './pre.svelte';
+export { default as table } from './table.svelte';
+export { default as td } from './td.svelte';
+export { default as th } from './th.svelte';
+export { default as tr } from './tr.svelte';
+export { default as ul } from './ul.svelte';

package/templates/sveltekit/src/lib/components/docs/mdsvex/li.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<li class={cn('mt-2', className)} {...$$restProps}>
+  <slot />
+</li>