update button

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'],
+				options: ['xs', 'sm', 'md', 'lg'],
-				defaultValue: 'Default',
+				defaultValue: 'md',
+			},
+			style: {
+				control: 'select',
+				options: [undefined, 'outline', 'dash', 'soft', 'ghost', 'link'],
 			},
-			variant: { control: 'select', options: ['link', 'outline'] },
 			wide: { control: 'boolean' },
 		},
 	});

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?: ButtonShape;
-		shape?: 'circle' | 'square';
 		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,27 +39,28 @@
 	{...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={style === 'outline'}
-	class:btn-outline={variant === '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?.()}