feat: add list-group components and page

src/lib/accordion/AccordionItem.svelte

@@ -0,0 +1,21 @@
+
+
+<h2>
+    <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-gray-500 border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
+      <span>What are the differences between Flowbite and Tailwind UI?</span>
+      <svg data-accordion-icon class="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5"/>
+      </svg>
+    </button>
+  </h2>
+  <div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
+    <div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
+      <p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
+      <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+      <ul class="ps-5 text-gray-500 list-disc dark:text-gray-400">
+        <li><a href="https://flowbite.com/pro/" class="text-blue-600 dark:text-blue-500 hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://tailwindui.com/" rel="nofollow" class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+      </ul>
+    </div>
+  </div>

src/lib/index.ts

@@ -37,6 +37,9 @@ export { default as Gallery } from './gallery/Gallery.svelte';
 export { default as Indicator } from './indicator/Indicator.svelte';
 // kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
+// list-group
+export { default as Listgroup } from './list-group/Listgroup.svelte'
+export { default as ListgroupItem } from './list-group/ListgroupItem.svelte'
 // navbar
 export { default as Navbar } from './nav/Navbar.svelte';
 export { default as NavUl } from './nav/NavUl.svelte';

src/lib/list-group/Listgroup.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    interface Props{
+        children?: any;
+        items: ListGroupItemType[] | string[];
+        btn?: boolean;
+        rounded?: boolean;
+        border?: boolean;
+        defaultclass?: string;
+    }
+    import { createEventDispatcher, setContext, type ComponentProps } from 'svelte';
+    import { twMerge } from 'tailwind-merge';
+    import type { ListGroupItemType } from '../types';
+    // import Frame from '../utils/Frame.svelte';
+    import ListgroupItem from './ListgroupItem.svelte';
+
+    let { children, items, btn, rounded = true, border= true, defaultclass, ...attributes} = $props<Props>()
+ 
+    const dispatch = createEventDispatcher();
+  
+    const bgColor = 'bg-white dark:bg-gray-800'
+
+    const textColor = 'text-gray-500 dark:text-gray-400'
+
+    const borderColor = 'border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700'
+ 
+    const divClass = twMerge(bgColor, textColor, rounded && 'rounded-lg', border && 'border', borderColor);
+
+    const defaultCls: string = twMerge('divide-y divide-gray-200 dark:divide-gray-600',divClass ,defaultclass);
+    let tag= btn ? 'div' : 'ul'
+    setContext('btn', btn);
+  
+  </script>
+
+  <svelte:element this={tag} {...attributes} class={defaultCls}>
+    {#each items as item, index}
+      {#if typeof item === 'string'}
+        <ListgroupItem {btn} {index} on:click={() => dispatch('click', item)}>{item}</ListgroupItem>
+      {:else}
+        <ListgroupItem {btn} {...item} {index} on:click={() => dispatch('click', item)}>{item}</ListgroupItem>
+      {/if}
+    {:else}
+      {@const item = items[0]}
+      {@render children({item})}
+    {/each}
+  </svelte:element>

src/lib/list-group/ListgroupItem.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    interface Props{
+        children: any;
+        btn?: boolean;
+        current?: boolean;
+        disabled?: boolean;
+        href?: string;
+        currentclass?: string;
+        normalclass?: string;
+        disabledclass?: string;
+        focusclass?: string;
+        hoverclass?: string;
+        liclass?: string;
+    }
+    import { getContext } from 'svelte';
+    import { twMerge } from 'tailwind-merge';
+  
+    let { children, btn, current, disabled, href, currentclass, 
+        normalclass, disabledclass, focusclass, hoverclass, liclass, ...attributes } = $props<Props>(); 
+    btn = getContext('btn');
+    const currentCls: string = twMerge('text-white bg-primary-700 dark:text-white dark:bg-gray-800',currentclass);
+    const disabledCls: string = twMerge('text-gray-900 bg-gray-100 dark:bg-gray-600 dark:text-gray-400', disabledclass);
+    const focusCls: string = twMerge('focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white', focusclass);
+    const hoverCls: string = twMerge('hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white',hoverclass);
+    const liCls: string = twMerge('py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg', liclass);
+  
+    const states = {
+      current: currentCls,
+      normal: normalclass,
+      disabled: disabledCls
+    };
+  
+    let state: 'disabled' | 'current' | 'normal' = disabled ? 'disabled' : current ? 'current' : 'normal';
+  
+    let itemClass: string = twMerge(liCls, states[state], btn && state === 'disabled' && 'cursor-not-allowed', btn && state === 'normal' && hoverCls, btn && state === 'normal' && focusCls);
+  </script>
+
+  {#if !btn}
+    <li class={itemClass}>
+      {@render children()}
+    </li>
+  {:else if href}
+    <a {...attributes} {href} class="block {itemClass}" aria-current={current}>
+        {attributes.name}
+    </a>
+  {:else}
+    <button type="button" {...attributes} class="flex items-center text-left {itemClass}" {disabled} aria-current={current}>
+        {#if attributes.icon}
+        <svelte:component this={attributes.icon} class="w-3 h-3 me-2.5"/>
+        {/if}
+        {attributes.name}
+    </button>
+  {/if}

src/lib/types.ts

@@ -103,3 +103,13 @@ export type BlockQuoteType =
 	| '7xl'
 	| '8xl'
 	| '9xl';
+
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+export interface ListGroupItemType {
+	current?: boolean;
+	disabled?: boolean;
+	href?: string;
+	attrs?: HTMLAnchorAttributes | HTMLButtonAttributes;
+	[propName: string]: any;
+}

src/routes/components/list-group/+page.svelte

@@ -0,0 +1,65 @@
+<script>
+	import { Listgroup } from '$lib';
+    import HighlightCompo from '../../utils/HighlightCompo.svelte';
+	import CodeWrapper from '../../utils/CodeWrapper.svelte';
+	import H1 from '../../utils/H1.svelte';
+	import H2 from '../../utils/H2.svelte';
+	import H3 from '../../utils/H3.svelte';
+	const modules = import.meta.glob('./md/*.md', { as: 'raw', eager: true });
+    let simpleList = ['Profile', 'Settings', 'Messages', 'Download'];
+	let links = [
+		{ name: 'Accordions', href: '/docs/components/accordion', current: true },
+		{ name: 'Alerts', href: '/docs/components/alert' },
+		{ name: 'Badges', href: '/docs/components/badge' },
+		{ name: 'Breadcrumbs', href: '/docs/components/breadcrumb', attrs: {target: '_blank'} }
+	];
+	let buttons = [
+		{ name: 'Profile', mycustomfield: 'data1', current: true },
+		{ name: 'Settings', mycustomfield: 'data2' },
+		{ name: 'Messages', mycustomfield: 'data3' },
+		{ name: 'Download', mycustomfield: 'data4', disabled: true, attrs: {type: 'submit'} }
+	];
+	import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from 'flowbite-svelte-icons';
+	let icons = [
+		{ name: 'Profile', icon: UserCircleSolid },
+		{ name: 'Settings', icon: AdjustmentsHorizontalSolid },
+		{ name: 'Messages', icon: MessagesSolid },
+		{ name: 'Download', icon: DownloadSolid }
+	];
+</script>
+
+<H1>List group</H1>
+
+<H2>Setup</H2>
+
+<HighlightCompo code={modules['./md/setup.md']} />
+
+<H2>Default list group</H2>
+
+<CodeWrapper class='flex justify-center'>
+	<Listgroup items={simpleList} defaultclass="w-48" />
+</CodeWrapper>
+
+<HighlightCompo code={modules['./md/default-list-group.md']} />
+
+<H2>List group with links</H2>
+
+<CodeWrapper class='flex justify-center'>
+	<Listgroup btn items={links} defaultclass="w-48" />
+</CodeWrapper>
+
+<HighlightCompo code={modules['./md/list-group-with-links.md']} />
+
+<H2>List group with buttons</H2>
+<CodeWrapper class='flex justify-center'>
+	<Listgroup btn items={buttons} defaultclass="w-48" onclick={(e) => alert('mycustomfield: ' + e.target.attributes.mycustomfield.value)} />
+</CodeWrapper>
+
+<HighlightCompo code={modules['./md/list-group-with-buttons.md']} />
+
+<H2>List group with icons</H2>
+<CodeWrapper class='flex justify-center'>
+<Listgroup btn items={icons} defaultclass="w-48" onclick={(e)=> console.log(e.target.attributes.name.value)} />
+</CodeWrapper>
+
+<HighlightCompo code={modules['./md/list-group-with-icons.md']} />

src/routes/components/list-group/md/default-list-group.md

@@ -0,0 +1,6 @@
+<script>
+    import { Listgroup } from 'svelte-5-ui-lib';
+    let simpleList = ['Profile', 'Settings', 'Messages', 'Download'];
+</script>
+
+<Listgroup items={simpleList} defaultclass="w-48" />

src/routes/components/list-group/md/list-group-with-buttons.md

@@ -0,0 +1,12 @@
+<script>
+    import { Listgroup } from 'svelte-5-ui-lib';
+    let buttons = [
+		{ name: 'Profile', mycustomfield: 'data1', current: true },
+		{ name: 'Settings', mycustomfield: 'data2' },
+		{ name: 'Messages', mycustomfield: 'data3' },
+		{ name: 'Download', mycustomfield: 'data4', disabled: true, attrs: {type: 'submit'} }
+	];
+</script>
+
+
+<Listgroup btn items={buttons} defaultclass="w-48" onclick={(e) => alert('mycustomfield: ' + e.target.attributes.mycustomfield.value)} />

src/routes/components/list-group/md/list-group-with-icons.md

@@ -0,0 +1,12 @@
+<script>
+    import { Listgroup } from 'svelte-5-ui-lib';
+	import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from 'flowbite-svelte-icons';
+	let icons = [
+		{ name: 'Profile', icon: UserCircleSolid },
+		{ name: 'Settings', icon: AdjustmentsHorizontalSolid },
+		{ name: 'Messages', icon: MessagesSolid },
+		{ name: 'Download', icon: DownloadSolid }
+	];
+</script>
+
+<Listgroup btn items={icons} defaultclass="w-48" onclick={(e)=> console.log(e.target.attributes.name.value)} />

src/routes/components/list-group/md/list-group-with-links.md

@@ -0,0 +1,11 @@
+<script>
+    import { Listgroup } from 'svelte-5-ui-lib';
+    let links = [
+		{ name: 'Accordions', href: '/docs/components/accordion', current: true },
+		{ name: 'Alerts', href: '/docs/components/alert' },
+		{ name: 'Badges', href: '/docs/components/badge' },
+		{ name: 'Breadcrumbs', href: '/docs/components/breadcrumb', attrs: {target: '_blank'} }
+	];
+</script>
+
+<Listgroup btn items={links} defaultclass="w-48" />

src/routes/components/list-group/md/setup.md

@@ -0,0 +1,3 @@
+<script>
+    import { Listgroup } from 'svelte-5-ui-lib';
+</script>