update-to-daisui-5.0 (#1)

Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #1

packages/svelte/.gitignore

@@ -1,5 +1,8 @@
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
+# Storybook
+storybook-static
+
 # Output
 .output
 .vercel
@@ -180,4 +183,4 @@ dist
 .idea
 
 # Finder (MacOS) folder config
-.DS_Store
+.DS_Store

packages/svelte/.storybook/preview.css

@@ -1,3 +1,2 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+@plugin "daisyui";

packages/svelte/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlas/svelte",
 	"type": "module",
-	"version": "1.0.4-alpha",
+	"version": "1.0.5-alpha",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -57,17 +57,18 @@
 		"@sveltejs/kit": "^2.15.3",
 		"@sveltejs/package": "^2.3.9",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/postcss": "^4.0.15",
 		"@types/bun": "^1.1.15",
-		"autoprefixer": "^10.4.20",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
+		"lucide-svelte": "^0.483.0",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.5",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"storybook": "^8.5.0",
 		"svelte-check": "^4.0.0",
-		"tailwindcss": "^3.4.9",
+		"tailwindcss": "^4.0.15",
 		"typescript": "^5.8.2",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^6.0.7",
@@ -78,7 +79,7 @@
 		"tailwind-merge": "^2.5.5"
 	},
 	"peerDependencies": {
-		"daisyui": "^4.12.22",
+		"daisyui": "^5.0.6",
 		"svelte": "^5.0.0"
 	},
 	"svelte": "./dist/index.js"

packages/svelte/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
 	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
+		'@tailwindcss/postcss': {},
 	},
 };

packages/svelte/src/lib/components/Actions/Button.stories.svelte

@@ -12,11 +12,11 @@
 		},
 		argTypes: {
 			active: { control: 'boolean' },
-			animation: { control: 'boolean' },
 			block: { control: 'boolean' },
 			color: {
 				control: 'select',
 				options: [
+					undefined,
 					'neutral',
 					'primary',
 					'secondary',
@@ -30,17 +30,19 @@
 			},
 			disabled: { control: 'boolean' },
 			full: { control: 'boolean' },
-			glass: { control: 'boolean' },
 			shape: {
 				control: 'select',
-				options: ['circle', 'square'],
+				options: ['square', 'circle'],
 			},
 			size: {
 				control: 'select',
-				options: ['xs', 'sm', '-', 'lg'],
-				defaultValue: 'Default',
+				options: ['xs', 'sm', 'md', 'lg'],
+				defaultValue: 'md',
+			},
+			style: {
+				control: 'select',
+				options: [undefined, 'outline', 'dash', 'soft', 'ghost', 'link'],
 			},
-			variant: { control: 'select', options: ['link', 'outline'] },
 			wide: { control: 'boolean' },
 		},
 	});
@@ -50,4 +52,4 @@
 	<Button {...props}>Button</Button>
 {/snippet}
 
-<Story name="Default" args={{}} children={template} />
+<Story name="Default" args={{}} children={template} />

packages/svelte/src/lib/components/Actions/Button.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	export type ButtonShape = 'square' | 'circle';
+	export type ButtonStyle = 'outline' | 'dash' | 'soft' | 'ghost' | 'link';
+</script>
+
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
 	import clsx from 'clsx';
@@ -6,30 +11,26 @@
 
 	type Props = {
 		active?: boolean;
-		animation?: boolean;
 		block?: boolean;
 		color?: DaisyColor;
 		full?: boolean;
-		glass?: boolean;
-		shape?: 'circle' | 'square';
+		shape?: ButtonShape;
 		size?: DaisySize;
-		variant?: 'link' | 'outline';
+		style?: ButtonStyle;
 		wide?: boolean;
 	} & SvelteHTMLElements['button'];
 
 	let {
 		active = false,
-		animation = true,
 		block = false,
 		children,
 		class: className,
 		color,
 		full = false,
-		glass = false,
 		shape,
 		size,
+		style,
 		wide = false,
-		variant,
 		...props
 	}: Props = $props();
 </script>
@@ -38,30 +39,32 @@
 	{...props}
 	class={twMerge('btn', clsx(className))}
 	class:btn-active={active}
-	class:no-animation={!animation}
 	class:btn-block={block}
 	class:btn-neutral={color === 'neutral'}
 	class:btn-primary={color === 'primary'}
 	class:btn-secondary={color === 'secondary'}
 	class:btn-accent={color === 'accent'}
-	class:btn-ghost={color === 'ghost'}
 	class:btn-info={color === 'info'}
 	class:btn-success={color === 'success'}
 	class:btn-warning={color === 'warning'}
 	class:btn-error={color === 'error'}
 	class:btn-disabled={props.disabled}
 	class:w-full={full}
-	class:glass
 	class:btn-circle={shape === 'circle'}
 	class:btn-square={shape === 'square'}
 	class:btn-xs={size === 'xs'}
 	class:btn-sm={size === 'sm'}
+	class:btn-md={size === 'md'}
 	class:btn-lg={size === 'lg'}
-	class:btn-link={variant === 'link'}
-	class:btn-outline={variant === 'outline'}
+	class:btn-xl={size === 'xl'}
+	class:btn-outline={style === 'outline'}
+	class:btn-dash={style === 'dash'}
+	class:btn-soft={style === 'soft'}
+	class:btn-ghost={style === 'ghost'}
+	class:btn-link={style === 'link'}
 	class:btn-wide={wide}
 >
 	{@render children?.()}
 </button>
 
-<style></style>
+<style></style>

packages/svelte/src/lib/components/Actions/Dropdown.stories.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Dropdown from './Dropdown.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Dropdown',
+		component: Dropdown,
+		argTypes: {
+			hover: {
+				control: 'boolean',
+			},
+			open: {
+				control: 'boolean',
+			},
+		},
+	});
+</script>
+
+<Story name="Dropdown Menu">
+	<Dropdown>
+		{#snippet title()}
+			Click me!
+		{/snippet}
+		<ul class={'menu bg-base-200 rounded-box w-56'}>
+			<li><a>Item 1</a></li>
+			<li><a>Item 2</a></li>
+			<li><a>Item 3</a></li>
+		</ul>
+	</Dropdown>
+</Story>
+
+<Story name="Dropdown Card">
+	<Dropdown>
+		{#snippet title()}
+			Click me!
+		{/snippet}
+		<div class="card card-sm bg-base-100 z-1 w-64 shadow-md">
+			<div class="card-body">
+				<h2 class="card-title">You needed more info?</h2>
+				<p>This is a card. You can use any element as a dropdown.</p>
+			</div>
+		</div>
+	</Dropdown>
+</Story>

packages/svelte/src/lib/components/Actions/Dropdown.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	export type DropdownAlignment = {
+		vertical?: 'top' | 'bottom';
+		horizontal?: 'left' | 'right';
+		content?: 'start' | 'center' | 'end';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		alignment?: DropdownAlignment;
+		children: Snippet;
+		hover?: boolean;
+		open?: boolean;
+		title: Snippet;
+	};
+
+	let { alignment, children, hover, open, title }: Props = $props();
+</script>
+
+<div
+	class="dropdown"
+	class:dropdown-start={alignment?.content === 'start'}
+	class:dropdown-center={alignment?.content === 'center'}
+	class:dropdown-end={alignment?.content === 'end'}
+	class:dropdown-top={alignment?.vertical === 'top'}
+	class:dropdown-bottom={alignment?.vertical === 'bottom'}
+	class:dropdown-left={alignment?.horizontal === 'left'}
+	class:dropdown-right={alignment?.horizontal === 'right'}
+	class:dropdown-hover={hover}
+	class:dropdown-open={open}
+>
+	<div tabindex="0" role="button" class="btn m-1">{@render title()}</div>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div tabindex="0" class="dropdown-content z-0">
+		{@render children?.()}
+	</div>
+</div>

packages/svelte/src/lib/components/Actions/Modal.stories.svelte

@@ -1,10 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import type { ComponentProps } from 'svelte';
+	import Button from './Button.svelte';
 	import Modal from './Modal.svelte';
-	import ModalBody from './ModalBody.svelte';
-	import ModalActions from './ModalActions.svelte';
-	import Button from '../Button.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Actions/Modal',
@@ -23,14 +21,12 @@
 {#snippet template({ children: _, ...props }: Partial<ComponentProps<typeof Modal>>)}
 	<Button onclick={() => dialog?.showModal()}>Open</Button>
 	<Modal {...props} backdrop bind:dialog>
-		<ModalBody>
-			<h3 class="text-lg font-bold">Hello!</h3>
-			<p class="py-4">Press ESC key or click the button below to close</p>
-			<ModalActions>
-				<Button onclick={() => dialog?.close()}>Close</Button>
-			</ModalActions>
-		</ModalBody>
+		<h3 class="text-lg font-bold">Hello!</h3>
+		<p class="py-4">Press ESC key or click the button below to close</p>
+		{#snippet actions()}
+			<Button onclick={() => dialog?.close()}>Close</Button>
+		{/snippet}
 	</Modal>
 {/snippet}
 
-<Story name="Default" children={template} />
+<Story name="Default" children={template} />

packages/svelte/src/lib/components/Actions/Modal.svelte

@@ -1,21 +1,37 @@
 <script lang="ts">
 	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = SvelteHTMLElements['dialog'] & {
+		actions?: Snippet;
 		backdrop?: boolean;
 		dialog?: HTMLDialogElement;
 	};
 
-	let { backdrop, dialog = $bindable(), children, class: className, ...props }: Props = $props();
+	let {
+		actions,
+		backdrop,
+		dialog = $bindable(),
+		children,
+		class: className,
+		...props
+	}: Props = $props();
 </script>
 
 <dialog {...props} class={twMerge('modal', clsx(className))} bind:this={dialog}>
-	{@render children?.()}
+	<div class="modal-box">
+		{@render children?.()}
+		{#if actions}
+			<div class="modal-action">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
 	{#if backdrop}
 		<form method="dialog" class="modal-backdrop">
 			<button>close</button>
 		</form>
 	{/if}
-</dialog>
+</dialog>

packages/svelte/src/lib/components/Actions/Modal/ModalActions.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = SvelteHTMLElements['div'];
-
-	let { children, class: className, ...props }: Props = $props();
-</script>
-
-<div {...props} class={twMerge('modal-action', clsx(className))}>
-	{@render children?.()}
-</div>

packages/svelte/src/lib/components/Actions/Modal/ModalBody.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import clsx from 'clsx';
-	import type { SvelteHTMLElements } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = SvelteHTMLElements['div'];
-
-	let { children, class: className, ...props }: Props = $props();
-</script>
-
-<div {...props} class={twMerge('modal-box', clsx(className))}>
-	{@render children?.()}
-</div>

packages/svelte/src/lib/components/Actions/Modal/index.ts

@@ -1,3 +0,0 @@
-export { default as Modal } from './Modal.svelte';
-export { default as ModalActions } from './ModalActions.svelte';
-export { default as ModalBody } from './ModalBody.svelte';

packages/svelte/src/lib/components/Actions/Swap.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
+	import Swap from './Swap.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Actions/Swap',
+		component: Swap,
+		argTypes: {
+			style: {
+				control: 'radio',
+				options: [undefined, 'flip', 'rotate'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Swap>>)}
+	<Swap {...props}>
+		{#snippet on()}
+			ON
+		{/snippet}
+		{#snippet off()}
+			OFF
+		{/snippet}
+	</Swap>
+{/snippet}
+
+<Story name="Default" children={template} />

packages/svelte/src/lib/components/Actions/Swap.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" module>
+	export type SwapStyle = 'flip' | 'rotate';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		active?: boolean;
+		indeterminate?: Snippet;
+		on: Snippet;
+		off: Snippet;
+		style?: SwapStyle;
+	};
+
+	let { active, indeterminate, on, off, style }: Props = $props();
+</script>
+
+<label
+	class="swap"
+	class:swap-active={active}
+	class:swap-flip={style === 'flip'}
+	class:swap-rotate={style === 'rotate'}
+>
+	<input type="checkbox" />
+	{#if indeterminate}
+		{@render indeterminate()}
+	{/if}
+	<div class="swap-on fill-current">{@render on()}</div>
+	<div class="swap-off fill-current">{@render off()}</div>
+</label>

packages/svelte/src/lib/components/Actions/index.ts

@@ -1,2 +1,4 @@
 export { default as Button } from './Button.svelte';
-export * from './Modal/';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as Swap } from './Swap.svelte';

packages/svelte/src/lib/components/DataDisplay/Accordion.stories.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Accordion from './Accordion.svelte';
+	import { type ComponentProps } from 'svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Display/Accordion',
+		component: Accordion,
+		argTypes: {
+			close: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+			open: {
+				control: 'boolean',
+				defaultValue: false,
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'arrow', 'plus'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Accordion>>)}
+	<div class="flex flex-col gap-2">
+		<Accordion name={props.name!} style={props.style} initialOpen>
+			{#snippet title()}
+				Option 1
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+		<Accordion name={props.name!} style={props.style}>
+			{#snippet title()}
+				Option 2
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+		<Accordion name={props.name!} style={props.style}>
+			{#snippet title()}
+				Option 3
+			{/snippet}
+			{#snippet content()}
+				Description here!
+			{/snippet}
+		</Accordion>
+	</div>
+{/snippet}
+
+<Story name="Default" children={template} args={{ name: 'accordion-story' }} />

packages/svelte/src/lib/components/DataDisplay/Accordion.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+	export type AccordionStyle = 'arrow' | 'plus';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		close?: boolean;
+		content?: Snippet;
+		initialOpen?: boolean;
+		name: string;
+		open?: boolean;
+		style?: AccordionStyle;
+		title?: Snippet;
+	};
+
+	let { close, content, initialOpen, name, open, style, title }: Props = $props();
+</script>
+
+<div
+	class="bg-base-100 border-base-300 collapse border"
+	class:collapse-arrow={style === 'arrow'}
+	class:collapse-close={close}
+	class:collapse-open={open}
+	class:collapse-plus={style === 'plus'}
+>
+	<input type="radio" {name} checked={initialOpen} />
+	{#if title}
+		<div class="collapse-title font-semibold">{@render title()}</div>
+	{/if}
+	{#if content}
+		<div class="collapse-content text-sm">{@render content()}</div>
+	{/if}
+</div>

packages/svelte/src/lib/components/DataDisplay/Avatar.stories.svelte

@@ -1,6 +1,8 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
 	import Avatar from './Avatar.svelte';
+	import AvatarGroups from './AvatarGroup.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Data display/Avatar',
@@ -14,11 +16,11 @@
 				defaultValue: 'DP',
 			},
 			presence: {
-				control: 'select',
+				control: 'radio',
 				options: [undefined, 'online', 'offline'],
 			},
 			ring: {
-				control: 'select',
+				control: 'radio',
 				options: [
 					undefined,
 					'neutral',
@@ -32,20 +34,59 @@
 				],
 			},
 			shape: {
-				control: 'select',
+				control: 'radio',
 				options: ['square', 'circle'],
+				defaultValue: 'circle',
 			},
 			size: {
-				control: 'select',
-				options: ['xs', 'sm', 'md', 'lg'],
+				control: 'radio',
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
 			},
 		},
 	});
 </script>
 
+{#snippet template(props: Partial<ComponentProps<typeof Avatar>>)}
+	<Avatar {...props} placeholder={props.placeholder || 'PC'} />
+{/snippet}
+
 <Story
 	name="Default"
 	args={{
 		img: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp',
 	}}
+	children={template}
 />
+
+<Story name="Placeholder" args={{ placeholder: 'BP' }} children={template} />
+
+<Story name="Sizes">
+	{@render template({
+		size: 'xs',
+		placeholder: 'XS',
+	})}
+	{@render template({
+		size: 'sm',
+		placeholder: 'SM',
+	})}
+	{@render template({
+		size: 'md',
+		placeholder: 'MD',
+	})}
+	{@render template({
+		size: 'lg',
+		placeholder: 'LG',
+	})}
+	{@render template({
+		size: 'xl',
+		placeholder: 'XL',
+	})}
+</Story>
+
+<Story name="Avatar Group">
+	<AvatarGroups>
+		{@render template({ placeholder: 'BP' })}
+		{@render template({ placeholder: 'MS' })}
+		{@render template({ placeholder: 'DM' })}
+	</AvatarGroups>
+</Story>

packages/svelte/src/lib/components/DataDisplay/Avatar.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	export type AvatarShape = 'circle' | 'square';
+	export type AvatarPresence = 'offline' | 'online';
+</script>
+
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
 	import clsx from 'clsx';
@@ -7,10 +12,10 @@
 	type Props = {
 		img?: string;
 		placeholder: string;
-		presence?: 'online' | 'offline';
-		ring?: Exclude<DaisyColor, 'ghost'>;
-		shape?: 'square' | 'circle';
-		size?: DaisySize | 'md';
+		presence?: AvatarPresence;
+		ring?: DaisyColor;
+		shape?: AvatarShape;
+		size?: DaisySize;
 	} & Omit<SvelteHTMLElements['div'], 'children'>;
 
 	let {
@@ -25,7 +30,13 @@
 	}: Props = $props();
 </script>
 
-<div {...props} class={twMerge('avatar', presence, clsx(className))} class:placeholder>
+<div
+	{...props}
+	class={twMerge('avatar', clsx(className))}
+	class:avatar-online={presence === 'online'}
+	class:avatar-offline={presence === 'offline'}
+	class:avatar-placeholder={placeholder}
+>
 	<div
 		class={twMerge(
 			'rounded-xl',
@@ -35,7 +46,8 @@
 				'w-12': size === 'xs',
 				'w-16': size === 'sm',
 				'w-20': size === 'md',
-				'w-32': size === 'lg',
+				'w-24': size === 'lg',
+				'w-32': size === 'xl',
 				'avatar-ring ring-offset-base-100 ring ring-offset-2': !!ring,
 			})
 		)}
@@ -53,10 +65,11 @@
 			<img src={img} alt={placeholder} />
 		{:else}
 			<span
+				class:text-5xl={size === 'xl'}
 				class:text-3xl={size === 'lg'}
-				class:text-xl={size === 'md'}
+				class:text-2xl={size === 'md'}
 				class:text-xs={size === 'xs'}>{placeholder}</span
 			>
 		{/if}
 	</div>
-</div>
+</div>

packages/svelte/src/lib/components/DataDisplay/AvatarGroup.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children?: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<div class="avatar-group -space-x-6">
+	{@render children?.()}
+</div>

packages/svelte/src/lib/components/DataDisplay/Badge.stories.svelte

@@ -0,0 +1,96 @@
+<script lang="ts" module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { type ComponentProps } from 'svelte';
+	import Badge from './Badge.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Display/Badge',
+		component: Badge,
+		argTypes: {
+			color: {
+				control: 'radio',
+				options: [
+					undefined,
+					'primary',
+					'secondary',
+					'accent',
+					'neutral',
+					'info',
+					'success',
+					'warning',
+					'error',
+				],
+			},
+			size: {
+				control: 'radio',
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'outline', 'dash', 'soft', 'ghost'],
+			},
+		},
+	});
+</script>
+
+{#snippet template(props: Partial<ComponentProps<typeof Badge>>)}
+	<Badge {...props}>Badge</Badge>
+{/snippet}
+
+<Story name="Default" children={template} />
+
+<Story name="Sizes">
+	<Badge size="xs">x-small</Badge>
+	<Badge size="sm">small</Badge>
+	<Badge size="md">medium</Badge>
+	<Badge size="lg">large</Badge>
+	<Badge size="xl">x-large</Badge>
+</Story>
+
+<Story name="Colors">
+	<Badge color="primary">Primary</Badge>
+	<Badge color="secondary">Secondary</Badge>
+	<Badge color="accent">Accent</Badge>
+	<Badge color="neutral">Neutral</Badge>
+	<Badge color="info">Info</Badge>
+	<Badge color="success">Success</Badge>
+	<Badge color="warning">Warning</Badge>
+	<Badge color="error">Error</Badge>
+</Story>
+
+<Story name="Outline">
+	<Badge style="outline" color="primary">Primary</Badge>
+	<Badge style="outline" color="secondary">Secondary</Badge>
+	<Badge style="outline" color="accent">Accent</Badge>
+	<Badge style="outline" color="neutral">Neutral</Badge>
+	<Badge style="outline" color="info">Info</Badge>
+	<Badge style="outline" color="success">Success</Badge>
+	<Badge style="outline" color="warning">Warning</Badge>
+	<Badge style="outline" color="error">Error</Badge>
+</Story>
+
+<Story name="Dash">
+	<Badge style="dash" color="primary">Primary</Badge>
+	<Badge style="dash" color="secondary">Secondary</Badge>
+	<Badge style="dash" color="accent">Accent</Badge>
+	<Badge style="dash" color="neutral">Neutral</Badge>
+	<Badge style="dash" color="info">Info</Badge>
+	<Badge style="dash" color="success">Success</Badge>
+	<Badge style="dash" color="warning">Warning</Badge>
+	<Badge style="dash" color="error">Error</Badge>
+</Story>
+
+<Story name="Soft">
+	<Badge style="soft" color="primary">Primary</Badge>
+	<Badge style="soft" color="secondary">Secondary</Badge>
+	<Badge style="soft" color="accent">Accent</Badge>
+	<Badge style="soft" color="neutral">Neutral</Badge>
+	<Badge style="soft" color="info">Info</Badge>
+	<Badge style="soft" color="success">Success</Badge>
+	<Badge style="soft" color="warning">Warning</Badge>
+	<Badge style="soft" color="error">Error</Badge>
+</Story>
+
+<Story name="Ghost">
+	<Badge style="ghost">Ghost</Badge>
+</Story>

packages/svelte/src/lib/components/DataDisplay/Badge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	export type BadgeStyle = 'outline' | 'dash' | 'soft' | 'ghost';
+</script>
+
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+		color?: DaisyColor;
+		size?: DaisySize;
+		style?: BadgeStyle;
+	};
+
+	let { children, color, size, style }: Props = $props();
+</script>
+
+<span
+	class="badge"
+	class:badge-primary={color === 'primary'}
+	class:badge-secondary={color === 'secondary'}
+	class:badge-accent={color === 'accent'}
+	class:badge-neutral={color === 'neutral'}
+	class:badge-info={color === 'info'}
+	class:badge-success={color === 'success'}
+	class:badge-warning={color === 'warning'}
+	class:badge-error={color === 'error'}
+	class:badge-xs={size === 'xs'}
+	class:badge-sm={size === 'sm'}
+	class:badge-md={size === 'md'}
+	class:badge-lg={size === 'lg'}
+	class:badge-xl={size === 'xl'}
+	class:badge-outline={style === 'outline'}
+	class:badge-dash={style === 'dash'}
+	class:badge-soft={style === 'soft'}
+	class:badge-ghost={style === 'ghost'}
+>
+	{@render children?.()}
+</span>

packages/svelte/src/lib/components/DataDisplay/index.ts

@@ -1 +1,4 @@
+export { default as Accordion } from './Accordion.svelte';
 export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarGroup } from './AvatarGroup.svelte';
+export { default as Badge } from './Badge.svelte';

packages/svelte/src/lib/components/DataInput/InputField.stories.svelte

@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { User } from 'lucide-svelte';
+	import InputField from './InputField.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Data Input/Input Field',
+		component: InputField,
+		argTypes: {
+			block: {
+				control: 'boolean',
+			},
+			color: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
+			},
+			disabled: {
+				control: 'boolean',
+			},
+			start: { control: 'text' },
+			end: { control: 'text' },
+			placeholder: { control: 'text' },
+			size: {
+				control: 'select',
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'ghost'],
+			},
+			type: {
+				control: 'select',
+				options: ['email', 'password', 'search', 'tel', 'text', 'url'],
+			},
+		},
+	});
+</script>
+
+<Story name="Default" args={{ name: 'text' }} />
+
+<Story name="Labels">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" start="Label" />
+		<InputField name="text">
+			{#snippet start()}
+				<User />
+			{/snippet}
+		</InputField>
+		<InputField name="text">
+			{#snippet end()}
+				<User />
+			{/snippet}
+		</InputField>
+	</div>
+</Story>
+
+<Story name="Colors">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" color="primary" placeholder="Primary" />
+		<InputField name="text" color="secondary" placeholder="Secondary" />
+		<InputField name="text" color="accent" placeholder="Accent" />
+		<InputField name="text" color="neutral" placeholder="Neutral" />
+		<InputField name="text" color="info" placeholder="Info" />
+		<InputField name="text" color="success" placeholder="Success" />
+		<InputField name="text" color="warning" placeholder="Warning" />
+		<InputField name="text" color="error" placeholder="Error" />
+	</div>
+</Story>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" size="xs" placeholder="XS" />
+		<InputField name="text" size="sm" placeholder="SM" />
+		<InputField name="text" size="md" placeholder="MD" />
+		<InputField name="text" size="lg" placeholder="LG" />
+		<InputField name="text" size="xl" placeholder="XL" />
+	</div>
+</Story>
+
+<Story name="Disabled" args={{ name: 'text', placeholder: 'Disabled', disabled: true }} />

packages/svelte/src/lib/components/DataInput/InputField.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+	export type InputFieldStyle = 'ghost';
+</script>
+
+<script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import clsx from 'clsx';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
+	import { twMerge } from 'tailwind-merge';
+
+	type Props = {
+		block?: boolean;
+		color?: DaisyColor;
+		error?: string | Snippet;
+		fade?: boolean;
+		start?: string | Snippet;
+		end?: string | Snippet;
+		label?: string | Snippet;
+		size?: DaisySize;
+		style?: InputFieldStyle;
+		type?: Extract<
+			HTMLInputTypeAttribute,
+			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
+		>;
+	} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;
+
+	let {
+		block,
+		class: className,
+		color,
+		start,
+		end,
+		size = 'md',
+		style,
+		...props
+	}: Props = $props();
+</script>
+
+<div
+	class="input flex items-center gap-2 transition-[width] delay-150 duration-300 ease-in-out"
+	class:w-full={block}
+	class:input-primary={color === 'primary'}
+	class:input-secondary={color === 'secondary'}
+	class:input-accent={color === 'accent'}
+	class:input-neutral={color === 'neutral'}
+	class:input-info={color === 'info'}
+	class:input-success={color === 'success'}
+	class:input-warning={color === 'warning'}
+	class:input-error={color === 'error'}
+	class:input-ghost={style === 'ghost'}
+	class:input-xs={size === 'xs'}
+	class:input-sm={size === 'sm'}
+	class:input-md={size === 'md'}
+	class:input-lg={size === 'lg'}
+	class:input-xl={size === 'xl'}
+>
+	{#if typeof start === 'string'}
+		{start}
+	{:else}
+		{@render start?.()}
+	{/if}
+	<input {...props} class={twMerge('grow', clsx(className))} />
+	{#if typeof end === 'string'}
+		{end}
+	{:else}
+		{@render end?.()}
+	{/if}
+</div>

packages/svelte/src/lib/components/DataInput/TextInput.stories.svelte

@@ -1,63 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import TextInput from './TextInput.svelte';
-	import { User } from 'lucide-svelte';
-
-	const { Story } = defineMeta({
-		title: 'Data Input/Text Input',
-		component: TextInput,
-		argTypes: {
-			bordered: {
-				control: 'boolean',
-			},
-			color: {
-				control: 'select',
-				options: [
-					'ghost',
-					'primary',
-					'secondary',
-					'accent',
-					'info',
-					'success',
-					'warning',
-					'error',
-				],
-			},
-			disabled: {
-				control: 'boolean',
-			},
-			error: {
-				control: 'text',
-			},
-			fade: { control: 'boolean' },
-			start: { control: 'text' },
-			end: { control: 'text' },
-			label: { control: 'text' },
-			placeholder: { control: 'text' },
-			size: {
-				control: 'select',
-				options: ['xs', 'sm', '-', 'lg'],
-			},
-			type: {
-				control: 'select',
-				options: ['email', 'password', 'search', 'tel', 'text', 'url'],
-			},
-		},
-	});
-</script>
-
-<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
-<Story name="Icon Start">
-	<TextInput name="text" color="secondary">
-		{#snippet start()}
-			<User />
-		{/snippet}
-	</TextInput>
-</Story>
-<Story name="Icon End">
-	<TextInput name="text" color="secondary">
-		{#snippet end()}
-			<User />
-		{/snippet}
-	</TextInput>
-</Story>

packages/svelte/src/lib/components/DataInput/TextInput.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-	import type { DaisyColor, DaisySize } from '$lib/types';
-	import clsx from 'clsx';
-	import type { Snippet } from 'svelte';
-	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
-	import { fade as fadeTransition } from 'svelte/transition';
-	import { twMerge } from 'tailwind-merge';
-
-	type Props = {
-		bordered?: boolean;
-		color?: Exclude<DaisyColor, 'neutral'>;
-		error?: string | Snippet;
-		fade?: boolean;
-		start?: string | Snippet;
-		end?: string | Snippet;
-		label?: string | Snippet;
-		size?: DaisySize;
-		type?: Extract<
-			HTMLInputTypeAttribute,
-			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
-		>;
-	} & Omit<SvelteHTMLElements['input'], 'type'>;
-
-	let {
-		bordered = false,
-		class: className,
-		color,
-		error,
-		fade,
-		start,
-		end,
-		label,
-		size,
-		...props
-	}: Props = $props();
-</script>
-
-<label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
-	<div class="label">
-		<span
-			class="label-text flex items-center gap-2"
-			class:text-primary={color === 'primary'}
-			class:text-secondary={color === 'secondary'}
-			class:text-accent={color === 'accent'}
-			class:text-info={color === 'info'}
-			class:text-success={color === 'success'}
-			class:text-warning={color === 'warning'}
-			class:text-error={color === 'error' || error}
-		>
-			{#if typeof label === 'string'}
-				{label}
-			{:else if label}
-				{@render label()}
-			{/if}
-		</span>
-		<span class="label-text-alt text-error font-semibold">
-			{#if typeof error === 'string'}
-				{error}
-			{:else if error}
-				{@render error()}
-			{/if}
-		</span>
-	</div>
-	<div
-		class="input flex w-full items-center gap-2"
-		class:input-bordered={bordered}
-		class:input-xs={size === 'xs'}
-		class:input-sm={size === 'sm'}
-		class:input-lg={size === 'lg'}
-		class:input-primary={color === 'primary'}
-		class:input-secondary={color === 'secondary'}
-		class:input-accent={color === 'accent'}
-		class:input-ghost={color === 'ghost'}
-		class:input-info={color === 'info'}
-		class:input-success={color === 'success'}
-		class:input-warning={color === 'warning'}
-		class:input-error={color === 'error' || error}
-	>
-		{#if typeof start === 'string'}
-			{start}
-		{:else}
-			{@render start?.()}
-		{/if}
-		<input {...props} class={twMerge('grow', clsx(className))} />
-		{#if typeof end === 'string'}
-			{end}
-		{:else}
-			{@render end?.()}
-		{/if}
-	</div>
-</label>

packages/svelte/src/lib/components/DataInput/Textarea.stories.svelte

@@ -38,7 +38,7 @@
 			},
 			size: {
 				control: 'select',
-				options: ['xs', 'sm', '-', 'lg'],
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
 			},
 		},
 	});
@@ -48,4 +48,4 @@
 	<Textarea {...props} />
 {/snippet}
 
-<Story name="Default" args={{ label: 'Label' }} children={template} />
+<Story name="Default" args={{ label: 'Label' }} children={template} />

packages/svelte/src/lib/components/DataInput/Textarea.svelte

@@ -11,7 +11,7 @@
 		error?: string | Snippet;
 		label?: string | Snippet;
 		resizable?: boolean | 'yes' | 'no' | 'x' | 'y';
-		size?: DaisySize | 'md';
+		size?: DaisySize;
 	} & SvelteHTMLElements['textarea'];
 	let {
 		bordered,
@@ -57,7 +57,9 @@
 		class:textarea-bordered={bordered}
 		class:textarea-xs={size === 'xs'}
 		class:textarea-sm={size === 'sm'}
+		class:textarea-md={size === 'md'}
 		class:textarea-lg={size === 'lg'}
+		class:textarea-xl={size === 'xl'}
 		class:textarea-ghost={color === 'ghost'}
 		class:textarea-primary={color === 'primary'}
 		class:textarea-secondary={color === 'secondary'}
@@ -71,4 +73,4 @@
 		class:resize-y={resizable === 'y'}
 		class:resize-none={resizable === false || resizable === 'no'}
 	></textarea>
-</label>
+</label>

packages/svelte/src/lib/components/Feedback/Loading.stories.svelte

@@ -20,7 +20,7 @@
 					'error',
 				],
 			},
-			size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+			size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
 			variant: {
 				control: 'select',
 				options: ['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'],
@@ -37,4 +37,4 @@
 	name="Default"
 	args={{ color: 'neutral', size: 'md', variant: 'spinner' }}
 	children={template}
-/>
+/>

packages/svelte/src/lib/components/Feedback/Loading.svelte

@@ -6,7 +6,7 @@
 
 	type Props = {
 		color?: Exclude<DaisyColor, 'ghost'>;
-		size?: DaisySize | 'md';
+		size?: DaisySize;
 		variant?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
 	} & Pick<SvelteHTMLElements['span'], 'class'>;
 	let { class: className, color, size = 'md', variant = 'spinner' }: Props = $props();
@@ -25,10 +25,11 @@
 	class:loading-sm={size === 'sm'}
 	class:loading-md={size === 'md'}
 	class:loading-lg={size === 'lg'}
+	class:loading-xl={size === 'xl'}
 	class:loading-spinner={variant === 'spinner'}
 	class:loading-dots={variant === 'dots'}
 	class:loading-ring={variant === 'ring'}
 	class:loading-ball={variant === 'ball'}
 	class:loading-bars={variant === 'bars'}
 	class:loading-infinity={variant === 'infinity'}
-></span>
+></span>

packages/svelte/src/lib/components/Layout/index.ts

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

packages/svelte/src/lib/components/Navigation/Tabs/Tabs.stories.svelte

@@ -10,7 +10,7 @@
 		argTypes: {
 			size: {
 				control: 'select',
-				options: ['xs', 'sm', 'rg', 'lg'],
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
 			},
 			variant: {
 				control: 'select',
@@ -24,4 +24,4 @@
 	<Tabs tabs={['Tab 1', 'Tab 2']} {...args} />
 {/snippet}
 
-<Story name="Default" args={{}} children={template} />
+<Story name="Default" args={{}} children={template} />

packages/svelte/src/lib/components/Navigation/Tabs/Tabs.svelte

@@ -18,6 +18,7 @@
 	class:tabs-xs={size === 'xs'}
 	class:tabs-sm={size === 'sm'}
 	class:tabs-lg={size === 'lg'}
+	class:tabs-xl={size === 'xl'}
 	class:tabs-bordered={variant === 'bordered'}
 	class:tabs-lifted={variant === 'lifted'}
 	class:tabs-boxed={variant === 'boxed'}
@@ -33,4 +34,4 @@
 			/>
 		{/key}
 	{/each}
-</div>
+</div>

packages/svelte/src/lib/types/daisy-colors.ts

@@ -3,8 +3,7 @@ export type DaisyColor =
 	| 'primary'
 	| 'secondary'
 	| 'accent'
-	| 'ghost'
 	| 'info'
 	| 'success'
 	| 'warning'
-	| 'error';
+	| 'error';

packages/svelte/src/lib/types/daisy-sizes.ts

@@ -1 +1 @@
-export type DaisySize = 'xs' | 'sm' | 'lg';
+export type DaisySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

packages/svelte/tailwind.config.ts

@@ -1,10 +1,5 @@
-import daisyui from 'daisyui';
 import type { Config } from 'tailwindcss';
 
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
-	plugins: [daisyui],
-	daisyui: {
-		logs: false,
-	},
-} satisfies Config;
+} satisfies Config;