add XL

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

@@ -56,6 +56,7 @@
 	class:btn-sm={size === 'sm'}
 	class:btn-md={size === 'md'}
 	class:btn-lg={size === 'lg'}
+	class:btn-xl={size === 'xl'}
 	class:btn-outline={style === 'outline'}
 	class:btn-dash={style === 'dash'}
 	class:btn-soft={style === 'soft'}

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

@@ -40,7 +40,7 @@
 			},
 			size: {
 				control: 'radio',
-				options: ['xs', 'sm', 'md', 'lg'],
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
 			},
 		},
 	});
@@ -60,6 +60,29 @@
 
 <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' })}

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

@@ -46,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,
 			})
 		)}
@@ -64,8 +65,9 @@
 			<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}

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

@@ -23,7 +23,7 @@
 			},
 			size: {
 				control: 'radio',
-				options: ['xs', 'sm', 'md', 'lg'],
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
 			},
 			style: {
 				control: 'radio',

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

@@ -9,7 +9,7 @@
 	type Props = {
 		children: Snippet;
 		color?: DaisyColor;
-		size?: DaisySize | 'xl';
+		size?: DaisySize;
 		style?: BadgeStyle;
 	};
 

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/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-sizes.ts

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