zuii 1.4.13 → 1.4.15

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

@@ -1,60 +1,64 @@
 import './core/styles/main.css';/* empty css                      */
 import { Color as t } from "./components/Color/react/index.js";
 import { Button as m } from "./components/Button/react/index.js";
-import { Icon as f } from "./components/Icon/react/index.js";
-import { Group as d } from "./components/Group/react/index.js";
-import { Avatar as l } from "./components/Avatar/react/index.js";
-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 { Icon as f, SizeProvider as a, useSize as d } from "./components/Icon/react/index.js";
+import { Group as n } from "./components/Group/react/index.js";
+import { Avatar as c } from "./components/Avatar/react/index.js";
+import { Badge as A } from "./components/Badge/react/index.js";
+import { Divider as g } from "./components/Divider/react/index.js";
+import { ContextMenu as v } from "./components/Context-menu/react/index.js";
+import { Form as L } from "./components/Form/react/index.js";
+import { Shadow as b } from "./components/Shadow/react/index.js";
 import { Radius as D } from "./components/Radius/react/index.js";
-import { Dropdown as T } from "./components/Dropdown/react/index.js";
+import { Dropdown as w } 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";
 import { Placeholder as F } from "./components/Placeholder/react/index.js";
 import { Tooltip as H } from "./components/Tooltip/react/index.js";
 import { Table as N } from "./components/Table/react/index.js";
-import { Accordion as R } from "./components/Accordion/react/index.js";
-import { Tabs as q } from "./components/Tab/react/index.js";
-import { Alert as z, AlertBase as J, AlertHeading as K, AlertLink as O } from "./components/Alert/react/index.js";
-import { Dashboard as U } from "./components/Dashboard/react/index.js";
-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 { Accordion as j } from "./components/Accordion/react/index.js";
+import { Tabs as y } from "./components/Tab/react/index.js";
+import { Alert as K, AlertBase as O, AlertHeading as Q, AlertLink as U } from "./components/Alert/react/index.js";
+import { Dashboard as W } from "./components/Dashboard/react/index.js";
+import { Nav as Y } from "./components/Nav/react/index.js";
+import { LangSelector as _ } from "./components/Lang-selector/react/index.js";
+import { Auth as oo } from "./components/Auth/react/index.js";
+import { Errorpage as eo } from "./components/Errorpage/react/index.js";
+import { Loader as po } from "./components/Loader/react/index.js";
+import { default as xo } 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 ao } from "react-bootstrap";
 export {
-  R as Accordion,
-  eo as AccordionContext,
-  z as Alert,
-  J as AlertBase,
-  K as AlertHeading,
-  O as AlertLink,
-  _ as Auth,
-  l as Avatar,
-  c as Badge,
+  j as Accordion,
+  xo as AccordionContext,
+  K as Alert,
+  O as AlertBase,
+  Q as AlertHeading,
+  U as AlertLink,
+  oo as Auth,
+  c as Avatar,
+  A as Badge,
   m as Button,
   t as Color,
-  g as ContextMenu,
-  U as Dashboard,
-  u as Divider,
-  T as Dropdown,
-  oo as Errorpage,
-  B as Form,
-  d as Group,
+  v as ContextMenu,
+  W as Dashboard,
+  g as Divider,
+  w as Dropdown,
+  eo as Errorpage,
+  L as Form,
+  n as Group,
   f as Icon,
-  Y as LangSelector,
+  _ as LangSelector,
+  po as Loader,
   M as Logo,
   k as Modal,
-  W as Nav,
+  Y as Nav,
   F as Placeholder,
   D as Radius,
-  v as Shadow,
+  b as Shadow,
+  a as SizeProvider,
   N as Table,
-  q as Tabs,
+  y as Tabs,
   H as Tooltip,
-  po as useAccordionButton
+  ao as useAccordionButton,
+  d as useSize
 };

package/dist/templates/Forms/Forms-elements.tsx

@@ -6,7 +6,9 @@ import { Form } from '../../index';
  * @returns {JSX.Element} La page de démo des forms.
  */
 export const FormsElements = () => {
-	const [value, setValue] = useState<string | string[]>(['1']);
+	const [selectValue, setSelectValue] = useState<string | string[]>('');
+	const [countryValue, setCountryValue] = useState<string | string[]>('');
+	const [multiValue, setMultiValue] = useState<string | string[]>(['1', '2']);
 
 
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -45,7 +47,7 @@ export const FormsElements = () => {
 				<Form.Check id="checkbox2" type="checkbox" label="Enter checkbox checked" name="checkbox" defaultChecked />
 				<Form.Check id="radio1" type="radio" label="Enter radio option 1" name="radio" defaultChecked />
 				<Form.Check id="radio2" type="radio" label="Enter radio option 2" name="radio"  />
-				<Form.Select name="select" value={value} onChange={(value) => setValue(value)} options={[
+				<Form.Select name="select" value={selectValue} onChange={(val) => setSelectValue(val)} options={[
 					{
 						text: 'Option 1',
 						value: '1'
@@ -59,7 +61,20 @@ export const FormsElements = () => {
 						value: '3'
 					}
 				]} />
-				<Form.Select name="selectMultiple[]" value={['1', '2']} multiple={true} options={[
+				<Form.Select
+					name="select-country"
+					variant="country"
+					value={countryValue}
+					onChange={(val) => setCountryValue(val)}
+					options={[
+						{ text: 'France', value: 'FR' },
+						{ text: 'Allemagne', value: 'DE', flag: 'de' },
+						{ text: 'Espagne', value: 'ES', flag: 'es' },
+						{ text: 'Italie', value: 'IT', flag: 'it' },
+						{ text: 'Portugal', value: 'PT', flag: 'pt' }
+					]}
+				/>
+				<Form.Select name="selectMultiple[]" value={multiValue} onChange={(val) => setMultiValue(val)} multiple={true} options={[
 					{
 						text: 'Option 1',
 						value: '1'

package/dist/templates/Forms/Forms.tsx

@@ -18,7 +18,7 @@ export const Forms = () => {
 			<Form.Check type="checkbox" label="Enter checkbox"  />
 			<Form.Check type="radio" label="Enter radio"  />
 			<Form.Control type="select" placeholder="Enter select"  />
-			<Form.Control type="select-multiple" placeholder="Enter select multiple"  />
+			<Form.Control type="select-multiple" placeholder="Enter select multiple"   />
 			{/* <Form.Control
 				floating
 				label="Email address"

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/Placeholders/Placeholders.tsx

@@ -55,6 +55,11 @@ export const Placeholders = () => {
 					<Placeholder button animation="wave" variant="success" />
 					<Placeholder button variant="danger" />
 				</Group>
+
+				<h5 className="mt-4">Inputs</h5>
+				<p className="text-muted small">Pour simuler des champs de saisie.</p>
+				<Placeholder input animation="wave" />
+
 			</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.15",
 	"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
 	"type": "module",
 	"repository": {