zuii 1.4.13 → 1.4.14

package/dist/index.d.ts

@@ -23,3 +23,4 @@ export * from './components/Nav/react';
 export * from './components/Lang-selector/react';
 export * from './components/Auth/react';
 export * from './components/Errorpage/react';
+export * from './components/Loader/react';

package/dist/index.js

@@ -8,8 +8,8 @@ import { Badge as c } from "./components/Badge/react/index.js";
 import { Divider as u } from "./components/Divider/react/index.js";
 import { ContextMenu as g } from "./components/Context-menu/react/index.js";
 import { Form as B } from "./components/Form/react/index.js";
-import { Shadow as v } from "./components/Shadow/react/index.js";
-import { Radius as D } from "./components/Radius/react/index.js";
+import { Shadow as b } from "./components/Shadow/react/index.js";
+import { Radius as C } from "./components/Radius/react/index.js";
 import { Dropdown as T } from "./components/Dropdown/react/index.js";
 import { Logo as M } from "./components/Logo/react/index.js";
 import { Modal as k } from "./components/Modal/react/index.js";
@@ -24,11 +24,12 @@ import { Nav as W } from "./components/Nav/react/index.js";
 import { LangSelector as Y } from "./components/Lang-selector/react/index.js";
 import { Auth as _ } from "./components/Auth/react/index.js";
 import { Errorpage as oo } from "./components/Errorpage/react/index.js";
-import { default as eo } from "./node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/AccordionContext.js";
-import { useAccordionButton as po } from "react-bootstrap";
+import { Loader as eo } from "./components/Loader/react/index.js";
+import { default as po } from "./node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/AccordionContext.js";
+import { useAccordionButton as xo } from "react-bootstrap";
 export {
   R as Accordion,
-  eo as AccordionContext,
+  po as AccordionContext,
   z as Alert,
   J as AlertBase,
   K as AlertHeading,
@@ -47,14 +48,15 @@ export {
   d as Group,
   f as Icon,
   Y as LangSelector,
+  eo as Loader,
   M as Logo,
   k as Modal,
   W as Nav,
   F as Placeholder,
-  D as Radius,
-  v as Shadow,
+  C as Radius,
+  b as Shadow,
   N as Table,
   q as Tabs,
   H as Tooltip,
-  po as useAccordionButton
+  xo as useAccordionButton
 };

package/dist/templates/Lang-selector/LangSelectors.tsx

@@ -42,7 +42,7 @@ export const LangSelectors = () => {
 			</section>
 
 			<section className="mt-4">
-				<h2>Sélecteur de Langue (Sans Label)</h2>
+				<h2>Sélecteur (Sans Label)</h2>
 				<p>
 					Variante affichant uniquement les drapeaux.
 				</p>
@@ -54,6 +54,34 @@ export const LangSelectors = () => {
 				/>
 			</section>
 
+			<section className="mt-4">
+				<h2>Sélecteur avec Recherche</h2>
+				<p>
+					Option <code>search={"{true}"}</code> activée.
+				</p>
+
+				<LangSelector
+					options={languages.map(l => ({ value: l.code, label: l.label, flag: l.flag }))}
+					defaultValue={lang}
+					onChange={setLang}
+					search={true}
+				/>
+			</section>
+
+			<section className="mt-4">
+				<h2>Sélecteur sans valeur par défaut</h2>
+				<p>
+					Option <code>hasDefault={"{false}"}</code> avec un placeholder.
+				</p>
+
+				<LangSelector
+					options={languages.map(l => ({ value: l.code, label: l.label, flag: l.flag }))}
+					onChange={(val) => console.log('Nouvelle langue:', val)}
+					hasDefault={false}
+					placeholder="Choisir une langue"
+				/>
+			</section>
+
 
 		</div>
 	);

package/dist/templates/Loaders/Loaders.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Composant de démonstration pour les Loaders.
+ *
+ * @returns {JSX.Element} La page de démo des loaders.
+ */
+export declare const Loaders: () => import("react/jsx-runtime").JSX.Element;

package/dist/templates/Loaders/Loaders.tsx

@@ -0,0 +1,78 @@
+import { Loader, Group } from '../../index';
+
+/**
+ * Composant de démonstration pour les Loaders.
+ *
+ * @returns {JSX.Element} La page de démo des loaders.
+ */
+export const Loaders = () => {
+	return (
+		<div className="flex flex-col gap-8">
+			<section>
+				<h2 className="mb-4 text-xl font-bold">Variantes</h2>
+				<Group center gap="xl" className="py-4">
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '100px' }}>
+						<Loader variant="dots" />
+						<span className="text-xs text-muted mt-2">Dots</span>
+					</div>
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '100px' }}>
+						<Loader variant="spinner" />
+						<span className="text-xs text-muted mt-2">Spinner</span>
+					</div>
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '100px' }}>
+						<Loader variant="pulse" />
+						<span className="text-xs text-muted mt-2">Pulse</span>
+					</div>
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '100px' }}>
+						<Loader variant="quad" />
+						<span className="text-xs text-muted mt-2">Quad</span>
+					</div>
+				</Group>
+			</section>
+
+			<section>
+				<h2 className="mb-4 text-xl font-bold">Tailles</h2>
+				<Group center gap="xl" className="py-4">
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '80px' }}>
+						<Loader size="sm" />
+						<span className="text-xs text-muted">Small</span>
+					</div>
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '80px' }}>
+						<Loader size="md" />
+						<span className="text-xs text-muted">Medium</span>
+					</div>
+					<div className="flex flex-col items-center gap-3" style={{ minWidth: '80px' }}>
+						<Loader size="lg" />
+						<span className="text-xs text-muted">Large</span>
+					</div>
+				</Group>
+			</section>
+
+
+
+			<section>
+				<h2 className="mb-4 text-xl font-bold">Avec Message</h2>
+				<Group center vertical gap="lg">
+					<Loader size="md" message="Chargement des données en cours..." />
+					<Loader size="lg">
+						<div className="text-center">
+							<p className="font-bold text-primary">Veuillez patienter</p>
+							<p className="text-sm">Traitement en cours</p>
+						</div>
+					</Loader>
+				</Group>
+			</section>
+
+			<section>
+				<h2 className="mb-4 text-xl font-bold">Variantes de couleurs</h2>
+				<Group center gap="xl">
+					<Loader color="success" variant="dots" />
+					<Loader color="danger" variant="spinner" />
+					<Loader color="warning" variant="pulse" />
+					<Loader color="info" variant="quad" />
+				</Group>
+			</section>
+
+		</div>
+	);
+};

package/dist/templates/Tables/tables.data.d.ts

@@ -154,7 +154,7 @@ export declare const columnsStatus: ({
     headerName: string;
     field: string;
     headerClass: string;
-    cellClass?: undefined;
+    cellClass: string;
     cellRenderer?: undefined;
     resizable?: undefined;
     width?: undefined;

package/dist/templates/Tables/tables.data.tsx

@@ -102,16 +102,16 @@ export const columnsStatus = [
 	{ headerName: 'N°', field: 'number', headerClass: 'table-number table-cell--center', cellClass: 'table-cell--center', width: 40, maxWidth: 40, minWidth: 40, flex: 0, suppressSizeToFit: true },
 	{ headerName: 'Dossard', field: 'dossard', headerClass: 'table-dossard table-cell--center', cellClass: 'table-cell--center', width: 80, maxWidth: 80, minWidth: 40, flex: 0, suppressSizeToFit: true },
 	{ headerName: 'N° Equi', field: 'numberTeam', headerClass: 'table-numberTeam table-cell--center', cellClass: 'table-cell--center', width: 80, maxWidth: 80, minWidth: 40, flex: 0, suppressSizeToFit: true },
-	{ headerName: 'Rider', field: 'rider', headerClass: 'table-rider table-cell--center' },
-	{ headerName: 'Cheval', field: 'horse', headerClass: 'table-horse table-cell--center' },
-	{ headerName: 'Club', field: 'team', headerClass: 'table-team table-cell--center' },
-	{ headerName: 'Phase 1', field: 'step_1', headerClass: 'table-step_1 table-cell--center', cellClass: 'table-cell--right', valueGetter: (params: any) => params.data.step_1 ? `${params.data.step_1.time}s (${params.data.step_1.pts} pts)` : '' },
-	{ headerName: 'Phase 2', field: 'step_2', headerClass: 'table-step_2 table-cell--center', cellClass: 'table-cell--right', valueGetter: (params: any) => params.data.step_2 ? `${params.data.step_2.time}s (${params.data.step_2.pts} pts)` : '' },
+	{ headerName: 'Rider', field: 'rider', headerClass: 'table-rider table-cell--center', cellClass: 'table-cell--align-center' },
+	{ headerName: 'Cheval', field: 'horse', headerClass: 'table-horse table-cell--center', cellClass: 'table-cell--align-center' },
+	{ headerName: 'Club', field: 'team', headerClass: 'table-team table-cell--center', cellClass: 'table-cell--align-center' },
+	{ headerName: 'Phase 1', field: 'step_1', headerClass: 'table-step_1 table-cell--center', cellClass: 'table-cell--right table-cell--align-center', valueGetter: (params: any) => params.data.step_1 ? `${params.data.step_1.time}s (${params.data.step_1.pts} pts)` : '' },
+	{ headerName: 'Phase 2', field: 'step_2', headerClass: 'table-step_2 table-cell--center', cellClass: 'table-cell--right table-cell--align-center', valueGetter: (params: any) => params.data.step_2 ? `${params.data.step_2.time}s (${params.data.step_2.pts} pts)` : '' },
 	{
 		headerName: 'Total',
 		field: 'total',
 		headerClass: 'table-total table-cell--center',
-		cellClass: 'table-cell--right',
+		cellClass: 'table-cell--right table-cell--align-center',
 		valueGetter: (params: any) => {
 			const s1 = params.data.step_1;
 			const s2 = params.data.step_2;

package/dist/templates/index.d.ts

@@ -23,3 +23,4 @@ export * from './Auths/Auths';
 export * from './Dashboards/Dashboards';
 export * from './Navs/Navs';
 export * from './Errorpages/Errorpages';
+export * from './Loaders/Loaders';

package/dist/templates/index.ts

@@ -23,3 +23,4 @@ export * from './Auths/Auths';
 export * from './Dashboards/Dashboards';
 export * from './Navs/Navs';
 export * from './Errorpages/Errorpages';
+export * from './Loaders/Loaders';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "zuii",
-	"version": "1.4.13",
+	"version": "1.4.14",
 	"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
 	"type": "module",
 	"repository": {