flowbite-svelte 0.36.4 → 0.37.1

package/dist/sidebars/SidebarDropdownWrapper.svelte.d.ts

@@ -24,6 +24,46 @@ declare const __propDef: {
 export type SidebarDropdownWrapperProps = typeof __propDef.props;
 export type SidebarDropdownWrapperEvents = typeof __propDef.events;
 export type SidebarDropdownWrapperSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop btnClass: string = 'flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+ * @prop label: string = '';
+ * @prop spanClass: string = 'flex-1 ml-3 text-left whitespace-nowrap';
+ * @prop ulClass: string = 'py-2 space-y-2';
+ * @prop transitionType: TransitionTypes = 'slide';
+ * @prop transitionParams: TransitionParamTypes = {};
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ *   $: containPath = ()=>{
+ *     // add your logic here
+ *     true
+ *   }
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+ *       <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+ *         <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+ *         <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+ *       </SidebarDropdownWrapper>
+ *       <SidebarDropdownWrapper label="Items">
+ *         <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+ *         <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+ *       </SidebarDropdownWrapper>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class SidebarDropdownWrapper extends SvelteComponentTyped<SidebarDropdownWrapperProps, SidebarDropdownWrapperEvents, SidebarDropdownWrapperSlots> {
 }
 export {};

package/dist/sidebars/SidebarDropdownWrapper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarDropdownWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarDropdownWrapper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA+DtE,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}
+{"version":3,"file":"SidebarDropdownWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarDropdownWrapper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAiEtE,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjE,MAAM,MAAM,4BAA4B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnE,MAAM,MAAM,2BAA2B,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,oBAAoB,CAAC,2BAA2B,EAAE,4BAA4B,EAAE,2BAA2B,CAAC;CAC/J"}

package/dist/sidebars/SidebarGroup.svelte

@@ -8,5 +8,46 @@ if (border) {
 </script>
 
 <ul {...$$restProps} class={classNames(ulClass, $$props.class)}>
-	<slot />
+  <slot />
 </ul>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop ulClass: string = 'space-y-2';
+  @prop borderClass: string = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
+  @prop border: boolean = false;
+
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+    $: containPath = ()=>{
+      // add your logic here
+      true
+    }
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+        <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+          <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+          <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+        </SidebarDropdownWrapper>
+        <SidebarDropdownWrapper label="Items">
+          <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+          <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+        </SidebarDropdownWrapper>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->

package/dist/sidebars/SidebarGroup.svelte.d.ts

@@ -16,6 +16,44 @@ declare const __propDef: {
 export type SidebarGroupProps = typeof __propDef.props;
 export type SidebarGroupEvents = typeof __propDef.events;
 export type SidebarGroupSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop ulClass: string = 'space-y-2';
+ * @prop borderClass: string = 'pt-4 mt-4 border-t border-gray-200 dark:border-gray-700';
+ * @prop border: boolean = false;
+ *
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper, SidebarDropdownWrapper, SidebarDropdownItem } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ *   $: containPath = ()=>{
+ *     // add your logic here
+ *     true
+ *   }
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard" active={activeUrl === '/dashboard'} />
+ *       <SidebarDropdownWrapper label="E-commerce" isOpen={containPath}>
+ *         <SidebarDropdownItem label="Products" href='/components/products' active={activeUrl === '/components/products'} />
+ *         <SidebarDropdownItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}/>
+ *       </SidebarDropdownWrapper>
+ *       <SidebarDropdownWrapper label="Items">
+ *         <SidebarDropdownItem label="Item 1" href='/components/item1' active={activeUrl === '/components/item'} />
+ *         <SidebarDropdownItem label="Item 2" href='/components/item2' active={activeUrl === '/components/billing'} />
+ *       </SidebarDropdownWrapper>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class SidebarGroup extends SvelteComponentTyped<SidebarGroupProps, SidebarGroupEvents, SidebarGroupSlots> {
 }
 export {};

package/dist/sidebars/SidebarGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"SidebarGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarGroup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/sidebars/SidebarItem.svelte

@@ -28,3 +28,76 @@ export let active = false;
     {/if}
   </a>
 </li>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop aClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  @prop href: string = '';
+  @prop label: string = '';
+  @prop spanClass: string = 'ml-3';
+  @prop activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  @prop active: boolean = false; 
+
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard">
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Kanban" {spanClass}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+              >Pro</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Inbox" {spanClass}>
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+              >3</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign In">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign Up">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->

package/dist/sidebars/SidebarItem.svelte.d.ts

@@ -30,6 +30,76 @@ declare const __propDef: {
 export type SidebarItemProps = typeof __propDef.props;
 export type SidebarItemEvents = typeof __propDef.events;
 export type SidebarItemSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop aClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+ * @prop href: string = '';
+ * @prop label: string = '';
+ * @prop spanClass: string = 'ml-3';
+ * @prop activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+ * @prop active: boolean = false;
+ *
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard">
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Kanban" {spanClass}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+ *             >Pro</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Inbox" {spanClass}>
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+ *             >3</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign In">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign Up">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class SidebarItem extends SvelteComponentTyped<SidebarItemProps, SidebarItemEvents, SidebarItemSlots> {
 }
 export {};

package/dist/sidebars/SidebarItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"SidebarItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/sidebars/SidebarWrapper.svelte

@@ -3,5 +3,72 @@ export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)}>
-	<slot />
+  <slot />
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+  ## Props
+  @prop divClass: string = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+  ## Example
+  ```
+  <script>
+    import { page } from '$app/stores';
+    import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+    let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+    $: activeUrl = $page.url.pathname
+  </script>
+
+  <Sidebar>
+    <SidebarWrapper>
+      <SidebarGroup>
+        <SidebarItem label="Dashboard">
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Kanban" {spanClass}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+              >Pro</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Inbox" {spanClass}>
+        <svelte:fragment slot="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+          </svelte:fragment>
+          <svelte:fragment slot="subtext">
+            <span
+              class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+              >3</span
+            >
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign In">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+        <SidebarItem label="Sign Up">
+          <svelte:fragment slot="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+          </svelte:fragment>
+        </SidebarItem>
+      </SidebarGroup>
+    </SidebarWrapper>
+  </Sidebar>
+  ```
+  
+-->

package/dist/sidebars/SidebarWrapper.svelte.d.ts

@@ -14,6 +14,70 @@ declare const __propDef: {
 export type SidebarWrapperProps = typeof __propDef.props;
 export type SidebarWrapperEvents = typeof __propDef.events;
 export type SidebarWrapperSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Sidebar](https://flowbite-svelte.com/docs/components/sidebar)
+ * ## Props
+ * @prop divClass: string = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
+ * ## Example
+ * ```
+ * <script>
+ *   import { page } from '$app/stores';
+ *   import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+ *   let spanClass = 'flex-1 ml-3 whitespace-nowrap';
+ *   $: activeUrl = $page.url.pathname
+ * </script>
+ *
+ * <Sidebar>
+ *   <SidebarWrapper>
+ *     <SidebarGroup>
+ *       <SidebarItem label="Dashboard">
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z" /><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Kanban" {spanClass}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300"
+ *             >Pro</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Inbox" {spanClass}>
+ *       <svelte:fragment slot="icon">
+ *         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" /></svg>
+ *         </svelte:fragment>
+ *         <svelte:fragment slot="subtext">
+ *           <span
+ *             class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-blue-600 bg-blue-200 rounded-full dark:bg-blue-900 dark:text-blue-200"
+ *             >3</span
+ *           >
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sidebar" href='/docs/components/sidebar' active={activeUrl === '/docs/components/sidebar'}>
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign In">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *       <SidebarItem label="Sign Up">
+ *         <svelte:fragment slot="icon">
+ *           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" /></svg>
+ *         </svelte:fragment>
+ *       </SidebarItem>
+ *     </SidebarGroup>
+ *   </SidebarWrapper>
+ * </Sidebar>
+ * ```
+ */
 export default class SidebarWrapper extends SvelteComponentTyped<SidebarWrapperProps, SidebarWrapperEvents, SidebarWrapperSlots> {
 }
 export {};

package/dist/sidebars/SidebarWrapper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarWrapper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"SidebarWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/sidebars/SidebarWrapper.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/skeleton/CardPlaceholder.svelte

@@ -12,41 +12,59 @@ $: outDivclass = classNames(sizes[size], divClass, $$props.class);
 </script>
 
 <div role="status" class={outDivclass}>
-	<div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
-		<svg
-			width=48
-			height=48
-			class="text-gray-200 dark:text-gray-600"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-			fill="currentColor"
-			viewBox="0 0 640 512"
-			><path
-				d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"
-			/></svg
-		>
-	</div>
-	<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
-	<div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-	<div class="flex items-center mt-4 space-x-3">
-		<svg
-			class="w-14 h-14 text-gray-200 dark:text-gray-700"
-			aria-hidden="true"
-			fill="currentColor"
-			viewBox="0 0 20 20"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				fill-rule="evenodd"
-				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-				clip-rule="evenodd"
-			/></svg
-		>
-		<div>
-			<div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2" />
-			<div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
-		</div>
-	</div>
-	<span class="sr-only">Loading...</span>
+  <div class="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded dark:bg-gray-700">
+    <svg
+      width="48"
+      height="48"
+      class="text-gray-200 dark:text-gray-600"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox="0 0 640 512"
+      ><path
+        d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" /></svg>
+  </div>
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4" />
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5" />
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+  <div class="flex items-center mt-4 space-x-3">
+    <svg
+      class="w-14 h-14 text-gray-200 dark:text-gray-700"
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        fill-rule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+        clip-rule="evenodd" /></svg>
+    <div>
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2" />
+      <div class="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+    </div>
+  </div>
+  <span class="sr-only">Loading...</span>
 </div>
+
+<!--
+  @component
+  ## Features
+  [Go to Skeleton Card Placeholder](https://flowbite-svelte.com/docs/components/skeleton#Card_placeholder)
+  ## Props
+  @prop divClass: string =
+    'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+  @prop size: keyof Sizes = 'sm';
+  ## Example
+  ```
+  <script>
+    import { CardPlaceholder } from 'flowbite-svelte'
+  </script>
+
+  <CardPlaceholder />
+  <CardPlaceholder size='md' class='mt-8'/>
+  <CardPlaceholder size='lg' class='mt-8'/>
+  <CardPlaceholder size='xl' class='mt-8'/>
+  <CardPlaceholder size='xxl' class='mt-8'/>
+  ```
+-->

package/dist/skeleton/CardPlaceholder.svelte.d.ts

@@ -13,6 +13,26 @@ declare const __propDef: {
 export type CardPlaceholderProps = typeof __propDef.props;
 export type CardPlaceholderEvents = typeof __propDef.events;
 export type CardPlaceholderSlots = typeof __propDef.slots;
+/**
+ * ## Features
+ * [Go to Skeleton Card Placeholder](https://flowbite-svelte.com/docs/components/skeleton#Card_placeholder)
+ * ## Props
+ * @prop divClass: string =
+ *   'p-4 rounded border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700';
+ * @prop size: keyof Sizes = 'sm';
+ * ## Example
+ * ```
+ * <script>
+ *   import { CardPlaceholder } from 'flowbite-svelte'
+ * </script>
+ *
+ * <CardPlaceholder />
+ * <CardPlaceholder size='md' class='mt-8'/>
+ * <CardPlaceholder size='lg' class='mt-8'/>
+ * <CardPlaceholder size='xl' class='mt-8'/>
+ * <CardPlaceholder size='xxl' class='mt-8'/>
+ * ```
+ */
 export default class CardPlaceholder extends SvelteComponentTyped<CardPlaceholderProps, CardPlaceholderEvents, CardPlaceholderSlots> {
 }
 export {};

package/dist/skeleton/CardPlaceholder.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/CardPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4CD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"CardPlaceholder.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/skeleton/CardPlaceholder.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8CD,QAAA,MAAM,SAAS;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}