flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/utils/CompoAttributesViewer.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import TableProp from './TableProp.svelte';
+  import TableDefaultRow from './TableDefaultRow.svelte';
+
+  import { onMount } from 'svelte';
+
+  
+  export let components;
+  let compoData = [];
+
+  // Split the components into an array
+  const componentArray = components.split(', ');
+
+  async function processComponents() {
+    const importPromises = componentArray.map(async (component) => {
+      const module = await import(`../component-data/${component}.json`);
+      return { data: module };
+    });
+
+    try {
+      compoData = await Promise.all(importPromises);
+    } catch (error) {
+      console.error('Error:', error);
+      throw error;
+    }
+  }
+
+  onMount(() => {
+    processComponents()
+      .catch(error => {
+        console.error('Error outside of processComponents:', error);
+      });
+  });
+ 
+</script>
+
+{#if compoData}
+<h3>Props, events, and slots</h3>
+{#each compoData as compo}
+
+<h4>{compo.data.default.name}</h4>
+
+{#if compo.data.default.props.length > 0}
+<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Props</h5>
+  <ul class="w-full">
+    <TableProp>
+    <TableDefaultRow items={compo.data.default.props} rowState='hover' />
+    </TableProp>
+  </ul>
+{/if}
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+
+{#if compo.data.default.events.length > 0}
+<div>
+<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Events</h5>
+  <ul>
+    <TableProp category="slots">
+    <TableDefaultRow items={compo.data.default.events} rowState='hover' />
+    </TableProp>
+  </ul>
+</div>
+{/if}
+
+{#if compo.data.default.slots.length > 0}
+<div>
+<h5 class="mt-8 mb-4 text-md font-bold text-gray-900 dark:text-white">Slots</h5>
+  <ul class="w-full">
+    <TableProp category="slots">
+    <TableDefaultRow items={compo.data.default.slots} rowState='hover' />
+    </TableProp>
+  </ul>
+</div>
+{/if}
+
+</div>
+{/each}
+{/if}

package/src/routes/utils/CompoCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Card from '$lib/cards/Card.svelte';
+
+  export let name: string;
+  export let dir: string;
+  export let path: string;
+  export let thumnailSize: string;
+
+  path = path.toLowerCase();
+  dir = dir.toLowerCase();
+</script>
+
+<Card href="/docs/{dir}{path}/" padding="none" {...$$restProps} class="!max-w-none shadow-none hover:shadow-lg dark:hover:bg-gray-900 dark:hover:shadow-lg-light">
+  <div class="bg-gray-50 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
+    <span class="text-base font-medium text-gray-900 dark:text-white">{name}</span>
+    <span class="text-gray-500 dark:text-gray-400">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="w-5 h-5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+      </svg>
+    </span>
+  </div>
+  <div class="flex justify-center items-center h-52">
+    <div class="relative dark:hidden h-5/6 {thumnailSize ? thumnailSize : 'w-56'}">
+      <span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
+        <img alt={name} src="/images/{dir}{path}.svg" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" sizes="100vw" srcset="/images/{dir}{path}.svg 640w, /images/{dir}{path}.svg 750w, /images/{dir}{path}.svg 828w, /images/{dir}{path}.svg 1080w, /images/{dir}{path}.svg 1200w, /images/{dir}{path}.svg 1920w, /images/{dir}{path}.svg 2048w, /images/{dir}{path}.svg 3840w" />
+        <noscript />
+      </span>
+    </div>
+    <div class="hidden relative dark:block h-5/6 {thumnailSize ? thumnailSize : 'w-56'}">
+      <span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
+        <img alt={name} src="/images/{dir}{path}-dark.svg" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" />
+        <noscript />
+      </span>
+    </div>
+  </div>
+</Card>

package/src/routes/utils/CompoDescription.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  export let pClass: string = 'text-lg text-gray-600 dark:text-gray-400';
+</script>
+
+<p class={pClass}>
+  <slot />
+</p>

package/src/routes/utils/CopyCliboardInput.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Input from '$lib/forms/Input.svelte';
+  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import Check from './icons/Check.svelte';
+  import Clipboard from './icons/Clipboard.svelte';
+
+  const show = ({ detail }: { detail: boolean }) => detail || set_tooltip(false);
+  const text_copied = 'Copied!';
+  const text_not_copied = 'Copy to clipboard';
+
+  let placeholder: string = 'pnpm i flowbite-svelte';
+  let tooltip_text: string = text_not_copied;
+  let open: boolean | undefined = undefined;
+
+  function set_tooltip(copied: boolean) {
+    tooltip_text = copied ? text_copied : text_not_copied;
+    open = copied || undefined;
+  }
+
+  const copyToClipboard = async (e: MouseEvent) => {
+    if (tooltip_text === text_copied) return;
+
+    const REG_HEX = /&#x([a-fA-F0-9]+);/g;
+    const decodedText = placeholder.replace(REG_HEX, function (_match, group1) {
+      const num = parseInt(group1, 16);
+      return String.fromCharCode(num);
+    });
+
+    open = false; // must be before `await`
+    await window.navigator.clipboard.writeText(decodedText);
+
+    // (e?.target as HTMLButtonElement)?.blur();
+    set_tooltip(true);
+  };
+</script>
+
+<Input size="lg" {placeholder} readonly class="text-sm py-2.5 focus:ring-primary-600 focus:border-primary-600 md:min-w-[255px] {$$props.class ?? ''}">
+  <div slot="right" class="flex items-center pl-32">
+    <button on:click={copyToClipboard} class="hover:text-primary-700 py-2 px-1">
+      {#if tooltip_text == text_not_copied}<Clipboard />{:else}<Check />{/if}
+    </button>
+
+    <Tooltip bind:open on:show={show}>{tooltip_text}</Tooltip>
+  </div>
+</Input>

package/src/routes/utils/DocBadge.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Badge from '$lib/badges/Badge.svelte';
+</script>
+
+<Badge color="none" {...$$props} class="bg-primary-100 text-primary-700 dark:bg-gray-700 dark:text-primary-700 border-primary-700 dark:border-primary-700 {$$props.class}">
+  <slot />
+</Badge>

package/src/routes/utils/DocBadgeList.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import DocBadge from './DocBadge.svelte';
+  export let items: string[] = [];
+</script>
+
+<div class="flex flex-wrap gap-2">
+  {#each items as item}
+    <DocBadge large>{item}</DocBadge>
+  {/each}
+</div>

package/src/routes/utils/ExampleDarkMode.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let dark: boolean;
+</script>
+
+<button on:click type="button" class="flex items-center p-2 mr-2 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-lg toggle-dark-state-example hover:bg-gray-100 hover:text-primary-700 dark:hover:text-primary-600 focus:z-10 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 dark:bg-gray-800 focus:outline-none dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+  {#if dark}
+    <svg aria-hidden="true" data-toggle-icon="sun" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd" />
+    </svg>
+  {:else}
+    <svg aria-hidden="true" data-toggle-icon="moon" class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  {/if}
+  <span class="sr-only">Toggle dark/light mode</span>
+</button>

package/src/routes/utils/ExampleWrapper.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { twJoin } from 'tailwind-merge';
+  import Button from '$lib/buttons/Button.svelte';
+  import ExampleDarkMode from './ExampleDarkMode.svelte';
+  import GitHub from './icons/GitHub.svelte';
+  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import { page } from '$app/stores';
+  import type { PageData } from '../$types';
+  import { identity } from 'svelte/internal';
+  export let divClass = 'w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-2 sm:p-6';
+
+  // the source of the example, if you want it
+  export let src: any = undefined;
+
+  // all meta tags of the code block
+  export let meta: any = undefined;
+
+  let browserSupport: boolean = false;
+  let code: HTMLElement;
+
+  let data: PageData = $page.data;
+
+  // https://github.com/themesberg/flowbite-svelte/blob/main/src/routes/docs/components/accordion.md#always-open
+  const gitHub = new URL('https://github.com/themesberg/flowbite-svelte/blob/main/src/routes/');
+
+  let path: URL;
+
+  // suppress vite-plugin-svelte warning about unused props
+  $: src, meta;
+
+  let showExpandButton: boolean = false;
+  let expand: boolean = false;
+  let dark: boolean = false;
+
+  function init(node: HTMLElement) {
+    browserSupport = !!window?.navigator?.clipboard;
+  }
+
+  let node: HTMLElement;
+  $: {
+    if (node) {
+      // find closes previous section anchor
+      const section = [...document.querySelectorAll('#mainContent > :where(h2, h3) > [id]')]
+        .map((x: Element) => ({ id: x.id, top: x.parentElement?.offsetTop ?? Infinity }))
+        .filter((x) => x.top < node.offsetTop)
+        .slice(-1)
+        .shift();
+
+      if (section) {
+        const pathname = new URL(node.baseURI).pathname;
+        path = new URL(pathname.slice(1) + '.md', gitHub);
+        path.hash = section.id.replaceAll('_', '-').replaceAll('/', '').toLowerCase();
+      }
+    }
+  }
+
+  const copyToClipboard = async (e: MouseEvent) => {
+    const REG_HEX = /&#x([a-fA-F0-9]+);/g;
+    const decodedText = code.innerText.replace(REG_HEX, function (_match, group1) {
+      const num = parseInt(group1, 16);
+      return String.fromCharCode(num);
+    });
+
+    await window.navigator.clipboard.writeText(decodedText);
+
+    const button: HTMLButtonElement | null = e?.target as HTMLButtonElement;
+    button?.blur();
+
+    const lastChild = button?.lastChild;
+    if (lastChild) {
+      lastChild.textContent = 'Copied';
+      setTimeout(() => (lastChild.textContent = 'Copy'), 3000);
+    }
+  };
+
+  function checkOverflow(el: HTMLElement) {
+    const isOverflowingY = el.clientHeight < el.scrollHeight;
+    showExpandButton = isOverflowingY;
+    el.firstElementChild?.classList.add('-mb-8');
+  }
+
+  let copy_text = 'Copy';
+</script>
+
+<div class="mt-8 code-example" bind:this={node} use:init>
+  {#if !meta.hideOutput}
+    <div class="w-full p-4 border border-gray-200 bg-gray-50 rounded-t-xl dark:border-gray-600 dark:bg-gray-700">
+      <div class="grid grid-cols-2">
+        {#if path}
+          <Button size="xs" color="alternative" class="dark:!bg-gray-900 w-fit hover:text-primary-600 gap-2" href={'' + path} target="_blank" rel="noreferrer">
+            <GitHub size="sm" />Edit on GitHub
+          </Button>
+          <div class="ml-auto">
+            <ExampleDarkMode on:click={() => (dark = !dark)} {dark} />
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <div class="code-preview-wrapper">
+      <div class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600" class:dark>
+        <div class="w-full code-responsive-wrapper">
+          <div class={twJoin(divClass, meta.class)}>
+            <slot name="example" />
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <div class="code-syntax-wrapper">
+    <div class="relative border-gray-200 border-y border-x code-syntax dark:border-gray-600">
+      <div class="grid w-full grid-cols-2 border-b border-gray-200 bg-gray-50 rounded-t-md dark:bg-gray-700 dark:border-gray-600">
+        <ul class="flex text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+          <li>
+            <span class="inline-block w-full p-2 px-3 text-gray-800 bg-gray-100 border-r border-gray-200 dark:text-white dark:bg-gray-800 dark:border-gray-600"> Svelte </span>
+          </li>
+        </ul>
+        <div class="flex justify-end">
+          {#if browserSupport}
+            <button on:click={(e) => copyToClipboard(e)} type="button" class="flex items-center px-3 py-2 text-xs font-medium text-gray-600 bg-gray-100 border-l border-gray-200 dark:border-gray-600 dark:text-gray-400 dark:bg-gray-800 hover:text-primary-700 dark:hover:text-white copy-to-clipboard-button">
+              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+              {copy_text}
+            </button>
+            <Tooltip placement="bottom-end">Copy to clipboard.</Tooltip>
+          {/if}
+        </div>
+      </div>
+      <div class="relative">
+        <div class="overflow-hidden" class:max-h-72={!expand} tabindex="-1" use:checkOverflow>
+          <div class="highlight">
+            <pre bind:this={code} class="language-svelte !-mt-2 !rounded-none"><slot name="code" /></pre>
+          </div>
+        </div>
+        {#if showExpandButton && !expand}
+          <button on:click={() => (expand = !expand)} data-expand-code="" type="button" class="absolute bottom-0 left-0 py-2.5 px-5 w-full text-sm font-medium text-gray-900 bg-gray-100 border-t border-gray-200 hover:bg-gray-100 hover:text-primary-700 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"> Expand code </button>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>

package/src/routes/utils/Footer.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import Footer from '$lib/footer/Footer.svelte';
+  import FooterBrand from '$lib/footer/FooterBrand.svelte';
+  import FooterCopyright from '$lib/footer/FooterCopyright.svelte';
+  import FooterIcon from '$lib/footer/FooterIcon.svelte';
+  import FooterLink from '$lib/footer/FooterLink.svelte';
+  import FooterLinkGroup from '$lib/footer/FooterLinkGroup.svelte';
+  let logo = '/images/flowbite-svelte-icon-logo.svg';
+
+  let isHomePage: boolean;
+  $: isHomePage = $page.route.id === '/';
+
+  const footer_links = {
+    Resources: {
+      GitHub: 'https://github.com/themesberg/flowbite-svelte',
+      Flowbite: 'https://flowbite.com/',
+      'Tailwind CSS': 'https://tailwindcss.com/',
+      'Figma Design': 'https://flowbite.com/figma/'
+    },
+    'Help and Support': {
+      'Discord Community': 'https://discord.gg/4eeurUVvTy',
+      'GitHub Discussions': 'https://github.com/themesberg/flowbite-svelte/discussions'
+    },
+    Legal: {
+      License: 'https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE',
+      'Brand usage': 'https://flowbite.com/brand/'
+    }
+  };
+</script>
+
+<Footer footerType="custom" customClass="bg-white dark:bg-gray-900">
+  <div class="flex flex-col py-6 lg:py-12 mx-auto max-w-8xl">
+    <div class="flex flex-col lg:flex-row items-start md:justify-between gap-8 {isHomePage ? 'px-4 lg:px-20' : ''}">
+      <div class="w-full max-w-sm">
+        <FooterBrand href="https://flowbite-svelte.com" src={logo} alt="Flowbite Svelte Logo" name="Flowbite Svelte" class="text-gray-900 dark:text-white" />
+        <p class="max-w-sm mb-3 text-gray-600 dark:text-gray-400 mt-4">Flowbite Svelte is an open-source UI component library built with Svelte components and Tailwind CSS that can help you build websites faster.</p>
+        <p class="max-w-sm mb-3 text-gray-600 dark:text-gray-400">
+          Code licensed
+          <a href="https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE" class="text-primary-600 hover:underline"> MIT </a>
+          , docs
+          <a href="https://creativecommons.org/licenses/by/3.0/" class="text-primary-600 hover:underline"> CC BY 3.0 </a>
+          .
+        </p>
+      </div>
+      <div class="flex flex-col md:flex-row items-start {isHomePage ? 'gap-4 md:gap-16 lg:justify-end' : 'gap-8'}  w-full">
+        {#each Object.entries(footer_links) as [column, links]}
+          <div>
+            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{column}</h2>
+            <FooterLinkGroup>
+              {#each Object.entries(links) as [name, href]}
+                <FooterLink liClass="mb-4" {href}>{name}</FooterLink>
+              {/each}
+            </FooterLinkGroup>
+          </div>
+        {/each}
+      </div>
+    </div>
+    <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
+    <div class="flex items-center justify-center px-4 text-center">
+      <FooterCopyright href="/" by="Flowbite™" copyrightMessage="is a registered trademark. All Rights Reserved." />
+    </div>
+  </div>
+</Footer>

package/src/routes/utils/GitHubSource.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let pClass = 'text-gray-700 dark:text-white mb-1';
+  export let href = '';
+</script>
+
+<p class={pClass}>
+  <svg class="w-5 h-5 inline" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+  </svg>
+  <a href="https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/{href}" target="_blank" rel="noreferrer" class="hover:underline hover:text-primary-500">
+    <slot />: View Source Code
+  </a>
+</p>

package/src/routes/utils/GitHubSourceList.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let pClass = 'text-gray-500 dark:text-gray-400 mb-1';
+  export let libFiles = {};
+  const paths = Object.keys(libFiles);
+
+  export let dClass = 'rounded-xl w-full my-4 mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-2 sm:p-6';
+</script>
+
+<div class={dClass}>
+  {#each paths as path}
+    <p class={pClass}>
+      <svg class="w-5 h-5 inline" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+        <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
+      </svg>
+      <a href="https://github.com/themesberg/flowbite-svelte/blob/main/src/lib{((rootDir) => path.split(rootDir)[1])(path.split('/').slice(0, -2).join('/'))}" target="_blank" rel="noreferrer" class="hover:underline hover:text-primary-500">
+        <slot />
+        {path.split('/').pop()?.split('.').shift()}: View Source Code
+      </a>
+    </p>
+  {/each}
+</div>

package/src/routes/utils/MetaTag.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { MetaTags } from 'svelte-meta-tags';
+  export let breadcrumb_title: string = '';
+  export let description: string = '';
+  export let title: string = '';
+  // title = title.replaceAll(' ', '-');
+  let imgsrc = `https://open-graph-vercel.vercel.app/api/flowbite-svelte?title=${encodeURIComponent(breadcrumb_title)}`;
+  export let dir: string = '';
+  let dirstring = dir.toLowerCase();
+  let breadcrumb = breadcrumb_title.toLowerCase().replaceAll(' ', '-');
+</script>
+
+<MetaTags
+  title={breadcrumb_title}
+  titleTemplate="%s - Flowbite"
+  {description}
+  facebook={{
+    appId: '453670756870545'
+  }}
+  openGraph={{
+    type: 'website',
+    url: `https://flowbite-svelte.com/${dirstring}/${breadcrumb}`,
+    title: `${title}`,
+    description: `${description}`,
+    images: [
+      {
+        url: imgsrc,
+        width: 1200,
+        height: 630,
+        alt: `${title}`
+      }
+    ],
+    site_name: 'Flowbite Svelte'
+  }}
+  twitter={{
+    handle: '@shinokada',
+    cardType: 'summary_large_image',
+    title: `${title}`,
+    description: `${description}`,
+    image: imgsrc,
+    imageAlt: `${title}`
+  }} />

package/src/routes/utils/Newsletter.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { browser } from '$app/environment';
+  import ButtonGroup from '$lib/buttongroups/ButtonGroup.svelte';
+  import Button from '$lib/buttons/Button.svelte';
+  import Input from '$lib/forms/Input.svelte';
+  import Mail from '../utils/icons/Mail.svelte';
+  import data from './data.json';
+</script>
+
+<aside class="flex flex-col justify-center items-start p-4 sm:p-8 mb-8 gap-4 border shadow-lg rounded-lg dark:bg-gray-800 dark:border-gray-700">
+  <div class="flex flex-col items-center gap-5">
+    <div class="flex flex-col items-start gap-4">
+      <h4 class="tracking-tight leading-none text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Get more updates</h4>
+      <p class="max-w-2xl">Stay up to date with the roadmap progress, announcements and exclusive discounts feel free to sign up with your email.</p>
+    </div>
+    <div class="flex flex-col items-start justify-center self-stretch">
+      <!-- ConvertKit form -->
+      {#if browser}
+        <script src="https://f.convertkit.com/ckjs/ck.5.js"></script>
+      {/if}
+      <form action="https://app.convertkit.com/forms/4692392/subscriptions" class="seva-form formkit-form self-stretch" method="post" data-sv-form="4692392" data-uid="344e3b5c48" data-format="inline" data-version="5" data-options={JSON.stringify(data)}>
+        <div data-style="clean" class="flex items-end mb-3">
+          <ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert" />
+          <div data-element="fields" data-stacked="false" class="flex items-center w-full max-w-md seva-fields formkit-fields">
+            <label for="member_email" class="sr-only">Email address</label>
+            <div class="relative formkit-field">
+              <Mail class="absolute top-1/2 -translate-y-1/2 left-4" />
+            </div>
+            <ButtonGroup>
+              <Input size="lg" id="member_email" class="formkit-input text-gray-900 pl-12 sm:!w-96 focus:ring-primary-600 focus:border-primary-600" name="email_address" aria-label="Email Address" placeholder="Your email address..." required type="email" />
+              <Button type="submit" color="primary" size="xl" class="self-stretch formkit-submit" data-element="submit">
+                <div class="formkit-spinner">
+                  <div />
+                  <div />
+                  <div />
+                </div>
+                Subscribe
+              </Button>
+            </ButtonGroup>
+          </div>
+        </div>
+      </form>
+      <!-- ConvertKit form end -->
+      <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
+        By subscribing, you agree with ConvertKit's <a rel="nofollow" href="https://convertkit.com/terms" class="text-primary-700 hover:underline dark:text-primary-600"> Terms of Service </a>
+        and
+        <a rel="nofollow" class="text-primary-700 hover:underline dark:text-primary-600" href="https://convertkit.com/privacy"> Privacy Policy </a>
+        .
+      </div>
+    </div>
+  </div>
+</aside>

package/src/routes/utils/PageHeadSection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Heading } from '$lib';
+  import CompoDescription from './CompoDescription.svelte';
+
+  export let dir: string;
+  export let breadcrumb_title: string;
+  export let title: string;
+  export let description: string;
+
+  dir;
+  breadcrumb_title;
+</script>
+
+<div class="pb-8">
+  <Heading class="inline-block mb-2 font-extrabold tracking-tight text-gray-900 dark:text-white" tag="h1" customSize="text-3xl">
+    {title}
+  </Heading>
+
+  <CompoDescription>{description}</CompoDescription>
+</div>

package/src/routes/utils/Paging.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import PaginationItem from '$lib/paginations/PaginationItem.svelte';
+  import { identity } from 'svelte/internal';
+  import ArrowLeft from './icons/ArrowLeft.svelte';
+  import ArrowRight from './icons/ArrowRight.svelte';
+
+  const {
+    data,
+    url,
+    params: { slug }
+  } = $page;
+
+  const components = Object.values(data.posts)
+    .flatMap(identity)
+    // .filter((x) => x.meta.dir === data.dir)
+    .filter((x) => x.meta && x.meta.dir === data.dir)
+    .map(({ path, meta }) => ({ path, name: meta.component_title }));
+
+  const index = components.findIndex((x) => x.path === '/' + slug);
+
+  function sibling(next: boolean) {
+    const i = next ? index + 1 : index - 1,
+      { path, name } = components[i],
+      href = '' + new URL(path.slice(1), url);
+
+    return { href, name };
+  }
+</script>
+
+<div class="flex flex-col items-start gap-4 py-4">
+  {#if index >= 0}
+    <div class="flex flex-row justify-between gap-2.5 self-stretch">
+      {#if index > 0}
+        {@const { name, href } = sibling(false)}
+        <PaginationItem {href} class="flex items-center gap-2.5  hover:text-primary-700  dark:hover:text-primary-700">
+          <ArrowLeft />
+          {name}
+        </PaginationItem>
+      {:else}
+        <div />
+      {/if}
+      <div class="hidden sm:block">
+        <slot />
+      </div>
+      {#if index < components.length - 1}
+        {@const { name, href } = sibling(true)}
+        <PaginationItem {href} class="flex items-center gap-2.5 hover:text-primary-700 dark: dark:hover:text-primary-700">
+          {name}
+          <ArrowRight />
+        </PaginationItem>
+      {:else}
+        <div />
+      {/if}
+    </div>
+  {/if}
+  <div class="sm:hidden">
+    <slot />
+  </div>
+</div>