@pyreweb/fabric 1.2.6

package/src/components/atoms/FIcon/FIcon.vue

@@ -0,0 +1,192 @@
+<template>
+	<span
+		:class="iconClasses"
+		:style="iconStyle"
+		:aria-hidden="ariaHidden"
+		:aria-label="ariaLabel"
+		role="img"
+	>
+		<slot>
+			<svg
+				v-if="iconPath"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				:class="svgClasses"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" :d="iconPath" />
+			</svg>
+			<svg
+				v-else-if="showPlaceholder"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+				:class="svgClasses"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+				/>
+			</svg>
+		</slot>
+	</span>
+</template>
+
+<script>
+const ICON_PATHS = {
+	// Navigation
+	'chevron-up': 'M4.5 15.75l7.5-7.5 7.5 7.5',
+	'chevron-down': 'M19.5 8.25l-7.5 7.5-7.5-7.5',
+	'chevron-left': 'M15.75 19.5L8.25 12l7.5-7.5',
+	'chevron-right': 'M8.25 4.5l7.5 7.5-7.5 7.5',
+	'arrow-up': 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18',
+	'arrow-down': 'M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3',
+	'arrow-left': 'M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18',
+	'arrow-right': 'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3',
+
+	// Actions
+	check: 'M4.5 12.75l6 6 9-13.5',
+	x: 'M6 18L18 6M6 6l12 12',
+	plus: 'M12 4.5v15m7.5-7.5h-15',
+	minus: 'M19.5 12h-15',
+	search:
+		'M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z',
+	menu: 'M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5',
+	close: 'M6 18L18 6M6 6l12 12',
+	refresh:
+		'M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99',
+	edit: 'M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10',
+	trash:
+		'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0',
+	copy: 'M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75',
+
+	// Status
+	info: 'M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z',
+	warning:
+		'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
+	error:
+		'M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z',
+	success: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+	question:
+		'M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z',
+
+	// Common UI
+	user: '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',
+	home: 'M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25',
+	cog: 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z',
+	bell: 'M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0',
+	heart:
+		'M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z',
+	star: 'M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z',
+	eye: 'M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+	'eye-off':
+		'M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88',
+	lock: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
+	unlock:
+		'M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z',
+	mail: 'M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75',
+	calendar:
+		'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5',
+	clock: 'M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z',
+	download:
+		'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3',
+	upload:
+		'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5',
+	link: 'M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244',
+	'external-link':
+		'M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25',
+	folder:
+		'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z',
+	document:
+		'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z'
+};
+
+export default {
+	name: 'FIcon',
+	props: {
+		name: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: String,
+			default: 'md',
+			validator: (value) =>
+				['xs', 'sm', 'md', 'lg', 'xl'].includes(value) ||
+				/^\d+(\.\d+)?(px|rem|em|%|vh|vw)?$/.test(value)
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		decorative: {
+			type: Boolean,
+			default: true
+		},
+		label: {
+			type: String,
+			default: ''
+		}
+	},
+	computed: {
+		iconPath() {
+			return ICON_PATHS[this.name] || null;
+		},
+		showPlaceholder() {
+			return this.name && !this.iconPath;
+		},
+		ariaHidden() {
+			return this.decorative ? 'true' : undefined;
+		},
+		ariaLabel() {
+			return !this.decorative ? this.label || this.name : undefined;
+		},
+		sizeClass() {
+			const sizeMap = {
+				xs: 'w-3 h-3',
+				sm: 'w-4 h-4',
+				md: 'w-5 h-5',
+				lg: 'w-6 h-6',
+				xl: 'w-8 h-8'
+			};
+			return sizeMap[this.size] || '';
+		},
+		isCustomSize() {
+			return !['xs', 'sm', 'md', 'lg', 'xl'].includes(this.size);
+		},
+		iconClasses() {
+			const baseClasses =
+				'inline-flex items-center justify-center flex-shrink-0';
+
+			return [baseClasses, this.sizeClass].filter(Boolean).join(' ');
+		},
+		svgClasses() {
+			return 'w-full h-full';
+		},
+		iconStyle() {
+			const style = {};
+
+			if (this.color) {
+				style.color = this.color;
+			}
+
+			if (this.isCustomSize) {
+				const size = /^\d+(px|rem|em)?$/.test(this.size)
+					? /^\d+$/.test(this.size)
+						? `${this.size}px`
+						: this.size
+					: this.size;
+				style.width = size;
+				style.height = size;
+			}
+
+			return Object.keys(style).length > 0 ? style : undefined;
+		}
+	}
+};
+</script>

package/src/components/atoms/FInput/FInput.stories.js

@@ -0,0 +1,119 @@
+import FInput from './FInput.vue';
+
+export default {
+	title: 'Atoms/FInput',
+	component: FInput,
+	tags: ['autodocs'],
+	argTypes: {
+		value: {
+			control: 'text',
+			description: 'Valeur du champ'
+		},
+		type: {
+			control: { type: 'select' },
+			options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+			description: 'Type du champ'
+		},
+		placeholder: {
+			control: 'text',
+			description: 'Texte de placeholder'
+		},
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large'],
+			description: 'Taille du champ'
+		},
+		disabled: {
+			control: 'boolean',
+			description: 'État désactivé'
+		},
+		readonly: {
+			control: 'boolean',
+			description: 'Lecture seule'
+		},
+		error: {
+			control: 'boolean',
+			description: "État d'erreur"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FInput },
+	props: Object.keys(argTypes),
+	data() {
+		return { inputValue: args.value || '' };
+	},
+	template: '<FInput v-bind="$props" v-model="inputValue" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	placeholder: 'Saisissez du texte...'
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+	value: 'Valeur initiale'
+};
+
+export const Types = () => ({
+	components: { FInput },
+	data() {
+		return {
+			text: '',
+			email: '',
+			password: '',
+			number: ''
+		};
+	},
+	template: `
+		<div class="flex flex-col gap-4">
+			<FInput v-model="text" type="text" placeholder="Texte" />
+			<FInput v-model="email" type="email" placeholder="Email" />
+			<FInput v-model="password" type="password" placeholder="Mot de passe" />
+			<FInput v-model="number" type="number" placeholder="Nombre" />
+		</div>
+	`
+});
+
+export const Sizes = () => ({
+	components: { FInput },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FInput size="small" placeholder="Petit" />
+			<FInput size="medium" placeholder="Moyen" />
+			<FInput size="large" placeholder="Grand" />
+		</div>
+	`
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+	disabled: true,
+	placeholder: 'Champ désactivé'
+};
+
+export const Readonly = Template.bind({});
+Readonly.args = {
+	readonly: true,
+	value: 'Valeur en lecture seule'
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+	error: true,
+	placeholder: 'Champ avec erreur'
+};
+
+export const States = () => ({
+	components: { FInput },
+	template: `
+		<div class="flex flex-col gap-4">
+			<FInput placeholder="Normal" />
+			<FInput placeholder="Désactivé" disabled />
+			<FInput value="Lecture seule" readonly />
+			<FInput placeholder="Erreur" error />
+		</div>
+	`
+});

package/src/components/atoms/FInput/FInput.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FInput from './FInput.vue';
+
+describe('FInput', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FInput);
+		expect(wrapper.find('input').exists()).toBe(true);
+	});
+
+	it('renders with correct type', () => {
+		const types = ['text', 'email', 'password', 'number'];
+		types.forEach((type) => {
+			const wrapper = mount(FInput, {
+				propsData: { type }
+			});
+			expect(wrapper.find('input').attributes('type')).toBe(type);
+		});
+	});
+
+	it('displays placeholder', () => {
+		const wrapper = mount(FInput, {
+			propsData: { placeholder: 'Enter text...' }
+		});
+		expect(wrapper.find('input').attributes('placeholder')).toBe(
+			'Enter text...'
+		);
+	});
+
+	it('displays value', () => {
+		const wrapper = mount(FInput, {
+			propsData: { value: 'Test value' }
+		});
+		expect((wrapper.find('input').element as HTMLInputElement).value).toBe(
+			'Test value'
+		);
+	});
+
+	it('emits input event when typing', async () => {
+		const wrapper = mount(FInput);
+		await wrapper.find('input').setValue('New value');
+		expect(wrapper.emitted('input')).toBeTruthy();
+		expect(wrapper.emitted('input')![0]).toEqual(['New value']);
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['small', 'medium', 'large'] as const;
+		sizes.forEach((size) => {
+			const wrapper = mount(FInput, {
+				propsData: { size }
+			});
+			expect(wrapper.find('input').exists()).toBe(true);
+		});
+	});
+
+	it('applies disabled state', () => {
+		const wrapper = mount(FInput, {
+			propsData: { disabled: true }
+		});
+		expect(wrapper.find('input').attributes('disabled')).toBeDefined();
+		expect(wrapper.find('input').classes()).toContain('cursor-not-allowed');
+	});
+
+	it('applies readonly state', () => {
+		const wrapper = mount(FInput, {
+			propsData: { readonly: true }
+		});
+		expect(wrapper.find('input').attributes('readonly')).toBeDefined();
+	});
+
+	it('applies error styles', () => {
+		const wrapper = mount(FInput, {
+			propsData: { error: true }
+		});
+		expect(wrapper.find('input').classes().join(' ')).toContain(
+			'border-danger'
+		);
+	});
+});

package/src/components/atoms/FInput/FInput.vue

@@ -0,0 +1,88 @@
+<template>
+	<input
+		:class="inputClasses"
+		:type="type"
+		:value="value"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:readonly="readonly"
+		@input="handleInput"
+		@focus="$emit('focus', $event)"
+		@blur="$emit('blur', $event)"
+	/>
+</template>
+
+<script>
+export default {
+	name: 'FInput',
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'text'
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value) => ['small', 'medium', 'large'].includes(value)
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		}
+	},
+	computed: {
+		inputClasses() {
+			const baseClasses =
+				'block w-full font-sans border rounded box-border focus:outline-none focus:ring-2';
+
+			const transitionClasses =
+				'transition-all duration-[var(--transition-duration-base)] ease-[var(--transition-easing-standard)]';
+
+			const sizeClasses = {
+				small: 'py-1.5 px-2.5 text-xs',
+				medium: 'py-2.5 px-3.5 text-sm',
+				large: 'py-3.5 px-4.5 text-base'
+			};
+
+			const stateClasses = this.error
+				? 'border-danger-500 focus:border-danger-500 focus:ring-danger-500/20'
+				: 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500/20';
+
+			const disabledClasses = this.disabled
+				? 'bg-neutral-100 cursor-not-allowed opacity-70'
+				: '';
+
+			return [
+				baseClasses,
+				transitionClasses,
+				sizeClasses[this.size],
+				stateClasses,
+				disabledClasses
+			]
+				.filter(Boolean)
+				.join(' ');
+		}
+	},
+	methods: {
+		handleInput(event) {
+			this.$emit('input', event.target.value);
+		}
+	}
+};
+</script>

package/src/components/atoms/FLoader/FLoader.stories.js

@@ -0,0 +1,109 @@
+import FLoader from './FLoader.vue';
+
+export default {
+	title: 'Atoms/FLoader',
+	component: FLoader,
+	tags: ['autodocs'],
+	argTypes: {
+		size: {
+			control: { type: 'select' },
+			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			description: 'Taille du loader'
+		},
+		color: {
+			control: 'color',
+			description: 'Couleur du loader'
+		},
+		overlay: {
+			control: 'boolean',
+			description: 'Afficher en overlay plein écran'
+		},
+		centered: {
+			control: 'boolean',
+			description: 'Centrer dans le conteneur parent'
+		},
+		label: {
+			control: 'text',
+			description: "Label pour l'accessibilité"
+		}
+	}
+};
+
+const Template = (args, { argTypes }) => ({
+	components: { FLoader },
+	props: Object.keys(argTypes),
+	template: '<FLoader v-bind="$props" />'
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Sizes = () => ({
+	components: { FLoader },
+	template: `
+		<div class="flex items-center gap-6">
+			<div class="text-center">
+				<FLoader size="xs" />
+				<p class="text-xs mt-2">xs</p>
+			</div>
+			<div class="text-center">
+				<FLoader size="sm" />
+				<p class="text-xs mt-2">sm</p>
+			</div>
+			<div class="text-center">
+				<FLoader size="md" />
+				<p class="text-xs mt-2">md</p>
+			</div>
+			<div class="text-center">
+				<FLoader size="lg" />
+				<p class="text-xs mt-2">lg</p>
+			</div>
+			<div class="text-center">
+				<FLoader size="xl" />
+				<p class="text-xs mt-2">xl</p>
+			</div>
+		</div>
+	`
+});
+
+export const Colors = () => ({
+	components: { FLoader },
+	template: `
+		<div class="flex items-center gap-6">
+			<FLoader size="lg" />
+			<FLoader size="lg" color="#ef4444" />
+			<FLoader size="lg" color="#22c55e" />
+			<FLoader size="lg" color="#f59e0b" />
+			<FLoader size="lg" color="#8b5cf6" />
+		</div>
+	`
+});
+
+export const Centered = () => ({
+	components: { FLoader },
+	template: `
+		<div class="relative h-40 border border-dashed border-neutral-300 rounded-lg">
+			<FLoader size="lg" centered />
+		</div>
+	`
+});
+
+export const WithText = () => ({
+	components: { FLoader },
+	template: `
+		<div class="flex items-center gap-2">
+			<FLoader size="sm" />
+			<span class="text-sm text-neutral-600">Chargement en cours...</span>
+		</div>
+	`
+});
+
+export const InButton = () => ({
+	components: { FLoader },
+	template: `
+		<button class="inline-flex items-center gap-2 px-4 py-2 bg-primary-600 text-white rounded-md opacity-75 cursor-wait">
+			<FLoader size="sm" color="white" />
+			<span>Envoi...</span>
+		</button>
+	`
+});

package/src/components/atoms/FLoader/FLoader.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FLoader from './FLoader.vue';
+
+describe('FLoader', () => {
+	it('renders correctly with default props', () => {
+		const wrapper = mount(FLoader);
+		expect(wrapper.find('[role="status"]').exists()).toBe(true);
+	});
+
+	it('renders SVG spinner', () => {
+		const wrapper = mount(FLoader);
+		expect(wrapper.find('svg').exists()).toBe(true);
+		expect(wrapper.find('svg').classes()).toContain('animate-spin');
+	});
+
+	it('applies correct size classes', () => {
+		const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+		sizes.forEach((size) => {
+			const wrapper = mount(FLoader, {
+				propsData: { size }
+			});
+			expect(wrapper.find('svg').exists()).toBe(true);
+		});
+	});
+
+	it('applies custom color', () => {
+		const wrapper = mount(FLoader, {
+			propsData: { color: 'red' }
+		});
+		expect(wrapper.find('svg').attributes('style')).toContain('color: red');
+	});
+
+	it('renders overlay when overlay prop is true', () => {
+		const wrapper = mount(FLoader, {
+			propsData: { overlay: true }
+		});
+		expect(wrapper.classes()).toContain('fixed');
+		expect(wrapper.classes()).toContain('inset-0');
+	});
+
+	it('applies centered class when centered prop is true', () => {
+		const wrapper = mount(FLoader, {
+			propsData: { centered: true }
+		});
+		const container = wrapper.find('[role="status"]');
+		expect(container.classes()).toContain('absolute');
+	});
+
+	it('has correct aria-label', () => {
+		const wrapper = mount(FLoader);
+		expect(wrapper.find('[role="status"]').attributes('aria-label')).toBe(
+			'Chargement en cours'
+		);
+	});
+
+	it('accepts custom aria-label', () => {
+		const wrapper = mount(FLoader, {
+			propsData: { label: 'Loading data...' }
+		});
+		expect(wrapper.find('[role="status"]').attributes('aria-label')).toBe(
+			'Loading data...'
+		);
+	});
+});