flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/+layout.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { DarkMode, Navbar, NavBrand, NavHamburger, NavLi, NavUl } from '$lib';
+  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import { onMount, setContext } from 'svelte';
+  import { writable, type Writable } from 'svelte/store';
+  import '../app.css';
+  import DocBadge from './utils/DocBadge.svelte';
+  import Discord from './utils/icons/Discord.svelte';
+  import GitHub from './utils/icons/GitHub.svelte';
+  import YouTube from './utils/icons/YouTube.svelte';
+  import ToolbarLink from './utils/ToolbarLink.svelte';
+  import NavSidebarHamburger from '$lib/navbar/NavSidebarHamburger.svelte';
+  import AlgoliaSearch from './utils/AlgoliaSearch.svelte';
+  import { browser } from '$app/environment';
+
+  let isHomePage: boolean;
+  $: isHomePage = $page.route.id === '/';
+
+  let version = import.meta.env.VITE_APP_VERSION;
+
+  $: activeUrl = $page.url.pathname;
+  let logo = '/images/flowbite-svelte-icon-logo.svg';
+  let divClass = 'w-full ml-auto lg:block lg:w-auto order-1 lg:order-none';
+  let ulClass = 'flex flex-col py-3 my-4 lg:flex-row lg:my-0 text-sm font-medium text-gray-900 dark:text-gray-300 gap-4';
+
+  const drawerHiddenStore: Writable<boolean> = writable<boolean>(true);
+  setContext('drawer', drawerHiddenStore);
+
+  const toggleDrawer = () => {
+    drawerHiddenStore.update((state) => !state);
+  };
+
+  onMount(() => {
+    // Workaround until https://github.com/sveltejs/kit/issues/2664 is fixed
+    if (typeof window !== 'undefined' && window.location.hash) {
+      const deepLinkedElement = document.getElementById(window.location.hash.substring(1));
+
+      if (deepLinkedElement) {
+        window.setTimeout(() => deepLinkedElement.scrollIntoView(), 100);
+      }
+    }
+  });
+</script>
+
+<header class="sticky top-0 z-40 flex-none w-full mx-auto bg-white border-b border-gray-200 dark:border-gray-600 dark:bg-gray-800">
+  <Navbar color="default" fluid navClass="flex items-center justify-between w-full mx-auto py-1.5 px-4 {isHomePage ? 'max-w-8xl lg:px-20 px-4' : ''}" let:hidden let:toggle>
+    <span hidden={$page.route.id === '/'}>
+      <NavSidebarHamburger on:click={toggleDrawer} btnClass="mr-3 m-0 mr-3 lg:hidden" />
+    </span>
+    <NavBrand href="/">
+      <img src={logo} class="mr-3 h-8" alt="Flowbite Svelte Logo" />
+      <span class="self-center whitespace-nowrap text-2xl font-semibold text-gray-900 dark:text-white"> Flowbite Svelte </span>
+    </NavBrand>
+
+    {#if !isHomePage}
+      <AlgoliaSearch />
+    {:else}
+      <div id="home">
+        <AlgoliaSearch />
+      </div>
+    {/if}
+
+    <NavUl {hidden} {divClass} {ulClass} {activeUrl} on:click={() => setTimeout(toggle, 1)} nonActiveClass="md:!pl-3 md:!py-2 lg:!pl-0 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 dark:text-gray-400 lg:dark:text-white lg:dark:hover:text-primary-700 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent" activeClass="md:!pl-3 md:!py-2 lg:!pl-0 text-white bg-primary-700 lg:bg-transparent lg:text-primary-700 lg:dark:text-primary-700 dark:bg-primary-600 lg:dark:bg-transparent cursor-default">
+      <NavLi class="lg:px-2 lg:mb-0" href="/">Home</NavLi>
+      <NavLi class="lg:px-2 lg:mb-0" href="/docs/pages/introduction">Docs</NavLi>
+      <NavLi class="lg:px-2 lg:mb-0" href="/docs/pages/quickstart">Quickstart</NavLi>
+      <NavLi class="lg:px-2 lg:mb-0" href="/docs/components/accordion">Components</NavLi>
+      <NavLi class="lg:px-2 lg:mb-0" href="https://flowbite.com/figma/">Figma</NavLi>
+      <NavLi class="lg:px-2 lg:mb-0" href="https://flowbite-svelte-blocks.vercel.app/">Blocks</NavLi>
+    </NavUl>
+
+    <div class="flex items-center ml-auto">
+      <ToolbarLink class="hidden sm:inline-block dark:hover:text-white hover:text-gray-900" name="View on GitHub" href="https://github.com/themesberg/flowbite-svelte">
+        <GitHub />
+      </ToolbarLink>
+      <ToolbarLink class="hidden xl:inline-block dark:hover:text-white hover:text-gray-900" name="Join community on Discord" href="https://discord.gg/4eeurUVvTy">
+        <Discord />
+      </ToolbarLink>
+      <ToolbarLink class="hidden xl:inline-block dark:hover:text-white hover:text-gray-900" name="Subscribe to YouTube channel" href="https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A">
+        <YouTube />
+      </ToolbarLink>
+      <DarkMode size="lg" class="inline-block dark:hover:text-white hover:text-gray-900" />
+      <Tooltip class="dark:bg-gray-900" placement="bottom-end">Toggle dark mode</Tooltip>
+    </div>
+    <a href="https://www.npmjs.com/package/flowbite-svelte" class="hidden sm:block">
+      <DocBadge large class="ml-2 xl:ml-6 hover:bg-primary-600 hover:text-white dark:hover:bg-primary-800 dark:hover:text-white">
+        v{version}
+      </DocBadge>
+    </a>
+
+    <NavHamburger on:click={toggle} btnClass="ml-3 m-0 lg:hidden {isHomePage ? '' : 'hidden'}" />
+  </Navbar>
+</header>
+
+<div class="lg:flex">
+  <slot />
+</div>

package/src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+const json = (r: Response) => r.json();
+
+/** @type {import('./$types').PageServerLoad} */
+export const load = async ({ fetch }) => {
+  try {
+    const githubAPI = 'https://api.github.com/repos/themesberg/flowbite-svelte';
+    const posts = await fetch('/api/posts').then(json);
+    const github = await fetch(githubAPI).then(json);
+    const contributors = await fetch(githubAPI + '/contributors?per_page=21').then(json);
+    const today = new Date().toISOString().slice(0, 10);
+    const npm = await fetch(`https://api.npmjs.org/downloads/point/2020-01-01:${today}/flowbite-svelte`).then(json);
+    const discord = await fetch('https://discord.com/api/v9/invites/4eeurUVvTy?with_counts=true&with_expiration=true').then(json);
+
+    return { posts, contributors, github, npm, discord };
+  } catch (error) {
+    console.error(`Error in load function for /: ${error}`);
+  }
+};

package/src/routes/+page.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { MetaTags } from 'svelte-meta-tags';
+  import type { PageData } from './$types';
+  import Components from './landing/Components.svelte';
+  import Featured from './landing/Featured.svelte';
+  import Hero from './landing/Hero.svelte';
+  import Footer from './utils/Footer.svelte';
+  import Contributors from './landing/Contributors.svelte';
+  import DesignFigma from './landing/DesignFigma.svelte';
+  import GetStarted from './landing/GetStarted.svelte';
+  import SocialProof from './landing/SocialProof.svelte';
+  import CTA from './landing/CTA.svelte';
+
+  export let data: PageData;
+
+  let title = 'Flowbite Svelte - UI Component Library';
+  let description = 'Flowbite Svelte is an open-source UI component library built with Svelte components, Tailwind CSS utility classes and based on the Flowbite design system and components.';
+  let default_title = 'Svelte UI Components';
+  const image = `https://open-graph-vercel.vercel.app/api/flowbite-svelte?title=${default_title}`;
+</script>
+
+<MetaTags
+  {title}
+  {description}
+  facebook={{ appId: '453670756870545' }}
+  openGraph={{
+    type: 'website',
+    url: `https://flowbite-svelte.com/`,
+    title: `${title}`,
+    description: `${description}`,
+    images: [{ url: image, width: 1200, height: 630, alt: `${title}` }],
+    site_name: 'Flowbite Svelte'
+  }}
+  twitter={{
+    handle: '@shinokada',
+    cardType: 'summary_large_image',
+    title: `${title}`,
+    description: `${description}`,
+    image,
+    imageAlt: `${title} logo`
+  }} />
+
+<main class="flex-auto min-w-0 lg:static lg:max-h-full lg:overflow-visible divide-y dark:divide-gray-700">
+  <Hero />
+  <Featured />
+  <Components {data} />
+  <CTA />
+  <SocialProof />
+  <DesignFigma />
+  <Contributors {data} />
+  <GetStarted />
+  <Footer />
+  
+</main>
+

package/src/routes/api/posts/+server.js

@@ -0,0 +1,7 @@
+import { fetchMarkdownPosts } from '../../utils';
+import { json } from '@sveltejs/kit';
+
+export const GET = async () => {
+  const allPosts = await fetchMarkdownPosts();
+  return json(allPosts);
+};

package/src/routes/component-data/A.json

@@ -0,0 +1,10 @@
+{
+  "name": "A",
+  "slots": [],
+  "events": ["on:click"],
+  "props": [
+    ["href", "string", "'#'"],
+    ["color", "string", "'text-primary-600 dark:text-primary-500'"],
+    ["aClass", "string", "'inline-flex items-center hover:underline'"]
+  ]
+}

package/src/routes/component-data/Accordion.json

@@ -0,0 +1,12 @@
+{
+  "name": "Accordion",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["multiple", "boolean", "false"],
+    ["flush", "boolean", "false"],
+    ["activeClass", "string", "'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800'"],
+    ["inactiveClass", "string", "'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800'"],
+    ["defaultClass", "string", "'text-gray-500 dark:text-gray-400'"]
+  ]
+}

package/src/routes/component-data/AccordionItem.json

@@ -0,0 +1,23 @@
+{
+  "name": "AccordionItem",
+  "slots": ["header", "arrowup", "arrowdown"],
+  "events": ["on:click", "on:multiple"],
+  "props": [
+    ["open", "boolean", "false"],
+    ["activeClass", "string | undefined", "undefined"],
+    ["inactiveClass", "string | undefined", "undefined"],
+    ["defaultClass", "string", "'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700'"],
+    ["transitionType", "TransitionTypes", "'slide'"],
+    ["transitionParams", "TransitionParamTypes", "{}"],
+    ["paddingFlush", "string", "'py-5'"],
+    ["paddingDefault", "string", "'p-5'"],
+    ["textFlushOpen", "string", "'text-gray-900 dark:text-white'"],
+    ["textFlushDefault", "string", "'text-gray-500 dark:text-gray-400'"],
+    ["borderClass", "string", "'border-l border-r group-first:border-t'"],
+    ["borderOpenClass", "string", "'border-l border-r'"],
+    ["borderBottomClass", "string", "'border-b'"],
+    ["borderSharedClass", "string", "'border-gray-200 dark:border-gray-700'"],
+    ["classActive", "string | undefined", "undefined"],
+    ["classInactive", "string | undefined", "undefined"]
+  ]
+}

package/src/routes/component-data/Activity.json

@@ -0,0 +1 @@
+{ "name": "Activity", "slots": [], "events": [], "props": [["olClass", "string", "'relative border-l border-gray-200 dark:border-gray-700'"]] }

package/src/routes/component-data/ActivityItem.json

@@ -0,0 +1,16 @@
+{
+  "name": "ActivityItem",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["activities", "ActivityType[]", ""],
+    ["liClass", "string", "'mb-10 ml-6'"],
+    ["spanClass", "string", "'flex absolute -left-3 justify-center items-center w-6 h-6 bg-blue-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-blue-900'"],
+    ["imgClass", "string", "'rounded-full shadow-lg'"],
+    ["outerDivClass", "string", "'p-4 bg-white rounded-lg border border-gray-200 shadow-sm dark:bg-gray-700 dark:border-gray-600'"],
+    ["innerDivClass", "string", "'justify-between items-center mb-3 sm:flex'"],
+    ["timeClass", "string", "'mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0'"],
+    ["titleClass", "string", "'text-sm font-normal text-gray-500 lex dark:text-gray-300'"],
+    ["textClass", "string", "'p-3 text-xs italic font-normal text-gray-500 bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300'"]
+  ]
+}

package/src/routes/component-data/AdvancedRating.json

@@ -0,0 +1,13 @@
+{
+  "name": "AdvancedRating",
+  "slots": ["rating", "globalText"],
+  "events": [],
+  "props": [
+    ["divClass", "string", "'flex items-center mt-4'"],
+    ["labelClass", "string", "'text-sm font-medium text-gray-600 dark:text-gray-500'"],
+    ["ratingDivClass", "string", "'mx-4 w-2/4 h-5 bg-gray-200 rounded dark:bg-gray-700'"],
+    ["ratingClass", "string", "'h-5 bg-yellow-400 rounded'"],
+    ["rightLabelClass", "string", "'text-sm font-medium text-gray-600 dark:text-gray-500'"],
+    ["unit", "string", "'%'"]
+  ]
+}

package/src/routes/component-data/Alert.json

@@ -0,0 +1,9 @@
+{
+  "name": "Alert",
+  "slots": ["icon", "close-button"],
+  "events": ["on:click", "on:click", "on:change", "on:keydown", "on:keyup", "on:focus", "on:blur", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["dismissable", "boolean", "false"],
+    ["defaultClass", "string", "'p-4 gap-3 text-sm'"]
+  ]
+}

package/src/routes/component-data/Android.json

@@ -0,0 +1,12 @@
+{
+  "name": "Android",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["androidTop", "string", ""],
+    ["androidLeftTop", "string", ""],
+    ["androidLeftMid", "string", ""],
+    ["androidLeftBot", "string", ""],
+    ["androidRight", "string", "@prop export let androidTop: string"]
+  ]
+}

package/src/routes/component-data/ArrowKeyDown.json

@@ -0,0 +1 @@
+{ "name": "ArrowKeyDown", "slots": [], "events": [], "props": [["svgClass", "string", "'w-4 h-4'"]] }

package/src/routes/component-data/ArrowKeyLeft.json

@@ -0,0 +1 @@
+{ "name": "ArrowKeyLeft", "slots": [], "events": [], "props": [["svgClass", "string", "'w-4 h-4'"]] }

package/src/routes/component-data/ArrowKeyRight.json

@@ -0,0 +1 @@
+{ "name": "ArrowKeyRight", "slots": [], "events": [], "props": [["svgClass", "string", "'w-4 h-4'"]] }

package/src/routes/component-data/ArrowKeyUp.json

@@ -0,0 +1 @@
+{ "name": "ArrowKeyUp", "slots": [], "events": [], "props": [["svgClass", "string", "'w-4 h-4'"]] }

package/src/routes/component-data/Avatar.json

@@ -0,0 +1,15 @@
+{
+  "name": "Avatar",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["src", "string", "''"],
+    ["href", "string | undefined", "undefined"],
+    ["rounded", "boolean", "false"],
+    ["border", "boolean", "false"],
+    ["stacked", "boolean", "false"],
+    ["dot", "object | undefined", "undefined"],
+    ["alt", "string", "''"],
+    ["size", "'xs' | 'sm' | 'md' | 'lg' | 'xl'", "'md'"]
+  ]
+}

package/src/routes/component-data/Badge.json

@@ -0,0 +1,10 @@
+{
+  "name": "Badge",
+  "slots": ["close-button"],
+  "events": ["on:click"],
+  "props": [
+    ["color", "'primary' | 'blue' | 'dark' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'pink' | 'none'", "'primary'"],
+    ["large", "boolean", "false"],
+    ["dismissable", "boolean", "false"]
+  ]
+}

package/src/routes/component-data/Banner.json

@@ -0,0 +1,12 @@
+{
+  "name": "Banner",
+  "slots": ["header"],
+  "events": ["on:click", "on:click", "on:change", "on:keydown", "on:keyup", "on:focus", "on:blur", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["position", "'static' | 'fixed' | 'absolute' | 'relative' | 'sticky'", "'sticky'"],
+    ["dismissable", "boolean", "true"],
+    ["bannerType", "'default' | 'bottom' | 'cta' | 'signup' | 'info'", "'default'"],
+    ["divClass", "string", "'z-10 flex justify-between p-4 dark:bg-gray-700 dark:border-gray-600'"],
+    ["innerClass", "string", "'flex'"]
+  ]
+}

package/src/routes/component-data/Blockquote.json

@@ -0,0 +1,15 @@
+{
+  "name": "Blockquote",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["border", "boolean", "false"],
+    ["italic", "boolean", "true"],
+    ["borderClass", "string", "'border-l-4 border-gray-300 dark:border-gray-500'"],
+    ["bgClass", "string", "'bg-gray-50 dark:bg-gray-800'"],
+    ["bg", "boolean", "false"],
+    ["baseClass", "string", "'font-semibold text-gray-900 dark:text-white'"],
+    ["alignment", "'left' | 'center' | 'right'", "'left'"],
+    ["size", "BlockQuoteType", "'lg'"]
+  ]
+}

package/src/routes/component-data/BottomNav.json

@@ -0,0 +1,13 @@
+{
+  "name": "BottomNav",
+  "slots": ["header"],
+  "events": [],
+  "props": [
+    ["activeUrl", "string", "''"],
+    ["position", "'static' | 'fixed' | 'absolute' | 'relative' | 'sticky'", "'fixed'"],
+    ["navType", "'default' | 'border' | 'application' | 'pagination' | 'group' | 'card' | 'meeting' | 'video'", "'default'"],
+    ["outerClass", "string", "'w-full z-50 border-gray-200 dark:bg-gray-700 dark:border-gray-600'"],
+    ["innerClass", "string", "'grid h-full max-w-lg mx-auto'"],
+    ["activeClass", "string", "'text-primary-700 dark:text-primary-700 hover:text-primary-900 dark:hover:text-primary-900'"]
+  ]
+}

package/src/routes/component-data/BottomNavHeader.json

@@ -0,0 +1,9 @@
+{
+  "name": "BottomNavHeader",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["outerClass", "string", "'w-full'"],
+    ["innerClass", "string", "'grid max-w-xs grid-cols-3 gap-1 p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600'"]
+  ]
+}

package/src/routes/component-data/BottomNavHeaderItem.json

@@ -0,0 +1,11 @@
+{
+  "name": "BottomNavHeaderItem",
+  "slots": [],
+  "events": ["on:click", "on:change", "on:keydown", "on:keyup", "on:focus", "on:blur", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["itemName", "string", "''"],
+    ["active", "boolean", "false"],
+    ["defaultClass", "string", "'px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 rounded-lg'"],
+    ["activeClass", "string", "'px-5 py-1.5 text-xs font-medium text-white bg-gray-900 dark:bg-gray-300 dark:text-gray-900 rounded-lg'"]
+  ]
+}

package/src/routes/component-data/BottomNavItem.json

@@ -0,0 +1,12 @@
+{
+  "name": "BottomNavItem",
+  "slots": [],
+  "events": ["on:click", "on:change", "on:keydown", "on:keyup", "on:focus", "on:blur", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["btnName", "string", "''"],
+    ["appBtnPosition", "'left' | 'middle' | 'right'", "'middle'"],
+    ["activeClass", "string | undefined", "undefined"],
+    ["href", "string", "''"],
+    ["exact", "boolean", "true"]
+  ]
+}

package/src/routes/component-data/Breadcrumb.json

@@ -0,0 +1,11 @@
+{
+  "name": "Breadcrumb",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["solid", "boolean", "false"],
+    ["navClass", "string", "'flex'"],
+    ["solidClass", "string", "'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700'"],
+    ["olClass", "string", "'inline-flex items-center space-x-1 md:space-x-3'"]
+  ]
+}

package/src/routes/component-data/BreadcrumbItem.json

@@ -0,0 +1,12 @@
+{
+  "name": "BreadcrumbItem",
+  "slots": ["icon", "icon"],
+  "events": [],
+  "props": [
+    ["home", "boolean", "false"],
+    ["href", "string | undefined", "undefined"],
+    ["linkClass", "string", "'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white'"],
+    ["spanClass", "string", "'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400'"],
+    ["homeClass", "string", "'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white'"]
+  ]
+}

package/src/routes/component-data/Button.json

@@ -0,0 +1,14 @@
+{
+  "name": "Button",
+  "slots": [],
+  "events": ["on:click", "on:change", "on:keydown", "on:keyup", "on:touchstart", "on:touchend", "on:touchcancel", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["pill", "boolean", "false"],
+    ["outline", "boolean", "false"],
+    ["size", "'xs' | 'sm' | 'md' | 'lg' | 'xl'", "group ? 'sm' : 'md'"],
+    ["href", "string | undefined", "undefined"],
+    ["type", "ButtonType", "'button'"],
+    ["color", "ButtonColor", "group ? (outline ? 'dark' : 'alternative') : 'primary'"],
+    ["shadow", "boolean", "false"]
+  ]
+}

package/src/routes/component-data/ButtonGroup.json

@@ -0,0 +1,9 @@
+{
+  "name": "ButtonGroup",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["size", "SizeType", "'md'"],
+    ["divClass", "string", "'inline-flex rounded-lg shadow-sm'"]
+  ]
+}

package/src/routes/component-data/Calender.json

@@ -0,0 +1 @@
+{ "name": "Calender", "slots": [], "events": [], "props": [] }

package/src/routes/component-data/Card.json

@@ -0,0 +1,13 @@
+{
+  "name": "Card",
+  "slots": [],
+  "events": ["on:click", "on:focusin", "on:focusout", "on:mouseenter", "on:mouseleave"],
+  "props": [
+    ["href", "string | null | undefined", "undefined"],
+    ["horizontal", "boolean", "false"],
+    ["reverse", "boolean", "false"],
+    ["img", "string | undefined", "undefined"],
+    ["padding", "'none' | 'sm' | 'md' | 'lg' | 'xl'", "'lg'"],
+    ["size", "SizeType", "'sm'"]
+  ]
+}

package/src/routes/component-data/CardPlaceholder.json

@@ -0,0 +1,9 @@
+{
+  "name": "CardPlaceholder",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["divClass", "string", "'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700'"],
+    ["size", "keyof Sizes", "'sm'"]
+  ]
+}

package/src/routes/component-data/Carousel.json

@@ -0,0 +1,11 @@
+{
+  "name": "Carousel",
+  "slots": [],
+  "events": ["on:mousemove", "on:mouseup", "on:touchmove", "on:touchend", "on:mousedown", "on:touchstart", "on:transition"],
+  "props": [
+    ["images", "HTMLImgAttributes[]", ""],
+    ["index", "number", "0"],
+    ["transition", "TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });", ""],
+    ["duration", "number", "0"]
+  ]
+}

package/src/routes/component-data/Chart.json

@@ -0,0 +1 @@
+{ "name": "Chart", "slots": [], "events": [], "props": [["options", "ApexOptions", "@prop export let options: ApexOptions"]] }

package/src/routes/component-data/Checkbox.json

@@ -0,0 +1,14 @@
+{
+  "name": "Checkbox",
+  "slots": [],
+  "events": ["on:keyup", "on:keydown", "on:keypress", "on:focus", "on:blur", "on:click", "on:mouseover", "on:mouseenter", "on:mouseleave", "on:paste", "on:change", "on:change"],
+  "props": [
+    ["color", "FormColorType", "'primary'"],
+    ["custom", "boolean", "false"],
+    ["inline", "boolean", "false"],
+    ["group", "(string | number)[]", "[]"],
+    ["value", "string | number", "'on'"],
+    ["checked", "boolean | undefined", "undefined"],
+    ["spacing", "string", "'mr-2'"]
+  ]
+}

package/src/routes/component-data/CloseButton.json

@@ -0,0 +1 @@
+{ "name": "CloseButton", "slots": [], "events": ["on:click"], "props": [["name", "string", "'Close'"]] }

package/src/routes/component-data/ControlButton.json

@@ -0,0 +1,9 @@
+{
+  "name": "ControlButton",
+  "slots": [],
+  "events": ["on:click"],
+  "props": [
+    ["forward", "boolean", ""],
+    ["name", "string", "@prop export let forward: boolean"]
+  ]
+}

package/src/routes/component-data/Controls.json

@@ -0,0 +1 @@
+{ "name": "Controls", "slots": [], "events": ["on:click", "on:click"], "props": [] }

package/src/routes/component-data/DarkMode.json

@@ -0,0 +1,9 @@
+{
+  "name": "DarkMode",
+  "slots": ["lightIcon", "darkIcon"],
+  "events": ["on:click"],
+  "props": [
+    ["btnClass", "string", "'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5'"],
+    ["size", "'sm' | 'md' | 'lg'", "'md'"]
+  ]
+}

package/src/routes/component-data/Datepicker.json

@@ -0,0 +1,14 @@
+{
+  "name": "Datepicker",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["range", "boolean", "false"],
+    ["datepickerButtons", "boolean", "false"],
+    ["datepickerFormat", "string", "'mm/dd/yyyy'"],
+    ["datepickerOrientation", "string", "'bottom'"],
+    ["datepickerTitle", "string", "'Flowbite datepicker'"],
+    ["attribute", "string", "''"],
+    ["inputClass", "string", "'bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'"]
+  ]
+}

package/src/routes/component-data/DefaultMockup.json

@@ -0,0 +1,11 @@
+{
+  "name": "DefaultMockup",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["defaultTop", "string", ""],
+    ["defaultLeftTop", "string", ""],
+    ["defaultLeftBot", "string", ""],
+    ["defaultRight", "string", "@prop export let defaultTop: string"]
+  ]
+}

package/src/routes/component-data/DescriptionList.json

@@ -0,0 +1,10 @@
+{
+  "name": "DescriptionList",
+  "slots": [],
+  "events": [],
+  "props": [
+    ["tag", "'dt' | 'dd'", ""],
+    ["dtClass", "string", "'text-gray-500 md:text-lg dark:text-gray-400'"],
+    ["ddClass", "string", "'text-lg font-semibold'"]
+  ]
+}