zuii 1.4.16 → 1.4.18

package/dist/components/Menu/react/index.js

@@ -0,0 +1,44 @@
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useRef as o, useEffect as c } from "react";
+import { initMenu as u } from "../js/menu.js";
+import '../style/index.css';/* empty css                  */
+const l = ({
+  children: s,
+  className: r = "",
+  breakpoint: m = 768
+}) => {
+  const t = o(null), e = "menu", i = `${e} ${r}`.trim();
+  return c(() => t.current ? u(t.current) : void 0, []), /* @__PURE__ */ n(
+    "div",
+    {
+      ref: t,
+      className: i,
+      style: { "--menu-breakpoint": `${m}px` },
+      children: [
+        /* @__PURE__ */ n("div", { className: `${e}__container`, children: [
+          s,
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: `${e}__toggle`,
+              "aria-label": "Ouvrir le menu",
+              "aria-expanded": !1,
+              type: "button",
+              children: [
+                /* @__PURE__ */ a("span", { className: `${e}__toggle-bar` }),
+                /* @__PURE__ */ a("span", { className: `${e}__toggle-bar` }),
+                /* @__PURE__ */ a("span", { className: `${e}__toggle-bar` })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: `${e}__mobile-nav`, children: s })
+      ]
+    }
+  );
+};
+l.Left = ({ children: s, className: r = "" }) => /* @__PURE__ */ a("div", { className: `menu__left ${r}`.trim(), children: s });
+l.Right = ({ children: s, className: r = "" }) => /* @__PURE__ */ a("div", { className: `menu__right ${r}`.trim(), children: s });
+export {
+  l as Menu
+};

package/dist/components/Menu/style/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";@layer components{.menu{--menu-breakpoint: 768px;position:relative;background:var(--primary)}.menu__container{padding:1rem;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.menu__left,.menu__right{display:flex;align-items:center;gap:1rem}.menu__nav-list{margin:0;padding:0;list-style:none}.menu__nav-items{display:flex;gap:1rem}.menu__actions{display:flex;gap:1rem;align-items:center}.menu__toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:36px;height:36px;padding:6px;border:none;border-radius:var(--border-radius-sm, .375rem);background:transparent;cursor:pointer;z-index:1002;transition:background-color .2s}.menu__toggle:hover,.menu__toggle:focus-visible{background-color:#ffffff26;outline:none}.menu__toggle-bar{display:block;width:22px;height:2px;background-color:var(--primary-contrast, #fff);border-radius:2px;transition:transform .3s ease,opacity .3s ease}.menu__toggle--open .menu__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu__toggle--open .menu__toggle-bar:nth-child(2){opacity:0}.menu__toggle--open .menu__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.menu__overlay{display:none;position:fixed;inset:0;background-color:#00000080;z-index:999;animation:menu-overlay-in .3s ease}@keyframes menu-overlay-in{0%{opacity:0}to{opacity:1}}.menu__mobile-nav{display:none;position:fixed;top:0;right:0;width:min(320px,80vw);height:100dvh;background-color:var(--primary);z-index:1001;padding:5rem 1.5rem 2rem;flex-direction:column;gap:2rem;overflow-y:auto;transform:translate(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--box-shadow-xl, -4px 0 25px rgba(0, 0, 0, .15))}.menu__mobile-nav .menu__left,.menu__mobile-nav .menu__right,.menu__mobile-nav .menu__center{flex-direction:column;align-items:flex-start}.menu__mobile-nav .menu__nav-items{flex-direction:column}.menu__mobile-nav--open{display:flex;transform:translate(0)}@media(max-width:768px){.menu__container>.menu__center,.menu__container>.menu__right{display:none}.menu__toggle{display:flex}.menu__overlay{display:block}.menu__mobile-nav{display:flex;transform:translate(100%)}.menu__mobile-nav--open{transform:translate(0)}}}

package/dist/components/Nav/react/index.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as _, Fragment as v } from "react/jsx-runtime";
 import { useEffect as u } from "react";
-import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Group/style/index.css';import '../../Color/style/index.css';import '../../../core/styles/main.css';import '../style/index.css';/* empty css                  */
+import '../../Slider/style/index.css';import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../../Errorpage/style/index.css';import '../../Lang-selector/style/index.css';import '../../../node_modules/.pnpm/flag-icons@7.5.0/node_modules/flag-icons/css/flag-icons.min.css';import '../../Placeholder/style/index.css';import '../../Logo/style/index.css';import '../../Radius/style/index.css';import '../../Shadow/style/index.css';import '../../Context-menu/style/index.css';import '../../Divider/style/index.css';import '../../Badge/style/index.css';import '../../Avatar/style/index.css';import '../../Group/style/index.css';import '../../Color/style/index.css';import '../../../core/styles/main.css';import '../style/index.css';/* empty css                  */
 /* empty css                             */
 /* empty css                           */
 import { Button as $ } from "../../Button/react/index.js";
@@ -32,6 +32,10 @@ import { Link as N } from "react-router-dom";
 /* empty css                               */
 /* empty css                            */
 /* empty css                          */
+import "../../Menu/react/index.js";
+import "@splidejs/react-splide";
+/* empty css                            */
+import "../../Card/react/index.js";
 import { initNav as g } from "../js/nav.js";
 const h = ({
   children: s,

package/dist/components/Placeholder/style/index.css

@@ -1 +1 @@
-@layer layout{.form__input,.placeholder--input{--form-placeholder-color: color-mix(in srgb, var(--body-color), transparent 70%)}.form__input:not(:has(.choices)),.placeholder--input:not(:has(.choices)){padding:var(--spacing-xs) var(--spacing-sm)}.choices__inner{padding:var(--spacing-xs) var(--spacing-sm)}.form__input,.placeholder--input{background-color:var(--white);border-radius:var(--radius-base);border:var(--border-width) solid var(--border-color);margin:var(--spacing-sm) 0;display:flex;gap:var(--spacing-xs);transition:all .2s cubic-bezier(.455,.03,.515,.955);flex:1}.form__input[type=checkbox],[type=checkbox].placeholder--input,.form__input[type=radio],[type=radio].placeholder--input{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);vertical-align:middle;margin-top:-2px}.form__input[type=checkbox]:after,[type=checkbox].placeholder--input:after,.form__input[type=radio]:after,[type=radio].placeholder--input:after{content:"";position:absolute;top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--white);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}.form__input[type=checkbox]:checked,[type=checkbox].placeholder--input:checked,.form__input[type=radio]:checked,[type=radio].placeholder--input:checked{background-color:var(--primary);border-color:var(--primary)}.form__input[type=checkbox]:checked:after,[type=checkbox].placeholder--input:checked:after,.form__input[type=radio]:checked:after,[type=radio].placeholder--input:checked:after{transform:translate(-50%,-50%) scale(1)}.form__input[type=checkbox]:focus,[type=checkbox].placeholder--input:focus,.form__input[type=radio]:focus,[type=radio].placeholder--input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 80%);border-color:var(--primary)}.form__input[type=checkbox]:hover:not(:checked):not(:disabled),[type=checkbox].placeholder--input:hover:not(:checked):not(:disabled),.form__input[type=radio]:hover:not(:checked):not(:disabled),[type=radio].placeholder--input:hover:not(:checked):not(:disabled){border-color:var(--primary);background-color:color-mix(in srgb,var(--primary),transparent 95%)}.form__input[type=checkbox]:disabled,[type=checkbox].placeholder--input:disabled,.form__input[type=radio]:disabled,[type=radio].placeholder--input:disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:not-allowed;opacity:.7}.form__input[type=radio],[type=radio].placeholder--input{border-radius:var(--radius-pill)}.form__input[type=radio]:after,[type=radio].placeholder--input:after{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-pill);width:.5rem;height:.5rem}.form__input .form-control:not([type=checkbox]):not([type=radio]),.placeholder--input .form-control:not([type=checkbox]):not([type=radio]){padding:0;background-color:transparent;border-radius:var(--radius-none);border:none;line-height:1.3}.form__input .form-control:not([type=checkbox]):not([type=radio]):focus,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus{border:none;box-shadow:none}.form__input:has(.form-control:focus),.placeholder--input:has(.form-control:focus){border-color:var(--accent)}.group--vertical .form__input,.group--vertical .placeholder--input{width:100%}input[type=checkbox],input[type=radio]{--border-color: var(--primary)}.form__input:has(.form-control:disabled),.placeholder--input:has(.form-control:disabled){border-color:var(--gray-200);background-color:var(--gray-100)}.form__input:has(.form-control:disabled) .form-control,.placeholder--input:has(.form-control:disabled) .form-control,.form__input:has(.form-control:disabled) .form-control::placeholder,.placeholder--input:has(.form-control:disabled) .form-control::placeholder,.form__input:has(.form-control:disabled) .icon,.placeholder--input:has(.form-control:disabled) .icon{color:var(--form-placeholder-color)}input::placeholder{color:var(--form-placeholder-color)}.placeholder,.placeholder__item{width:100%}.placeholder--filled{width:auto}.placeholder--image{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background-color:var(--primary, #f1f5f9);border:var(--border-width, 1px) solid var(--border-color, #94a3b8);position:relative;overflow:hidden}.placeholder--image:after{content:"";width:40%;height:40%;background-color:var(--gray-200, #94a3b8);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.placeholder--input{height:1.93rem;background:color-mix(in srgb,currentcolor,transparent 70%)}.placeholder-glow.placeholder,.placeholder-glow.placeholder__item,.placeholder-glow .placeholder,.placeholder-glow .placeholder__item{animation:placeholder-glow 2s ease-in-out infinite}.placeholder-wave.placeholder,.placeholder-wave.placeholder__item,.placeholder-wave .placeholder,.placeholder-wave .placeholder__item{-webkit-mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-glow{0%,to{opacity:.6}50%{opacity:.3}}@keyframes placeholder-wave{to{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.25em}[variant=primary]{background-color:var(--primary, #296782)!important;opacity:.5}[variant=secondary]{background-color:var(--secondary, #49B4E8)!important;opacity:.5}[variant=accent]{background-color:var(--accent, #49B4E8)!important;opacity:.5}[variant=tertiary]{background-color:var(--tertiary, #f5524d)!important;opacity:.5}[variant=success]{background-color:var(--success, #73D3B6)!important;opacity:.5}[variant=danger]{background-color:var(--danger, #EA5F5F)!important;opacity:.5}[variant=warning]{background-color:var(--warning, #F5D762)!important;opacity:.5}[variant=info]{background-color:var(--info, #73B6D3)!important;opacity:.5}[variant=light]{background-color:var(--light, #FFFFFF)!important;opacity:.5}[variant=dark]{background-color:var(--dark, #000000)!important;opacity:.5}}
+@layer layout{.form__input,.placeholder--input{--form-placeholder-color: color-mix(in srgb, var(--body-color), transparent 70%);--form-border: var(--border-width) solid var(--border-color)}.form__input:not(:has(.choices)),.placeholder--input:not(:has(.choices)){padding:var(--spacing-xs) var(--spacing-sm)}.choices__inner{padding:var(--spacing-xs) var(--spacing-sm)}.form__input,.placeholder--input{background-color:var(--white);border-radius:var(--radius-base);border:var(--form-border);margin:var(--spacing-sm) 0;display:flex;gap:var(--spacing-xs);transition:all .2s cubic-bezier(.455,.03,.515,.955);flex:1}.form__input[type=checkbox],[type=checkbox].placeholder--input,.form__input[type=radio],[type=radio].placeholder--input{appearance:none;width:1.25rem;height:1.25rem;background-color:var(--white);border:2px solid var(--color-gray-300);border-radius:var(--radius-sm);cursor:pointer;position:relative;transition:all .2s cubic-bezier(.4,0,.2,1);vertical-align:middle;margin-top:-2px}.form__input[type=checkbox]:after,[type=checkbox].placeholder--input:after,.form__input[type=radio]:after,[type=radio].placeholder--input:after{content:"";position:absolute;top:50%;left:50%;width:.75rem;height:.75rem;background-color:var(--white);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transform:translate(-50%,-50%) scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1)}.form__input[type=checkbox]:checked,[type=checkbox].placeholder--input:checked,.form__input[type=radio]:checked,[type=radio].placeholder--input:checked{background-color:var(--primary);border-color:var(--primary)}.form__input[type=checkbox]:checked:after,[type=checkbox].placeholder--input:checked:after,.form__input[type=radio]:checked:after,[type=radio].placeholder--input:checked:after{transform:translate(-50%,-50%) scale(1)}.form__input[type=checkbox]:focus,[type=checkbox].placeholder--input:focus,.form__input[type=radio]:focus,[type=radio].placeholder--input:focus{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 80%);border-color:var(--primary)}.form__input[type=checkbox]:hover:not(:checked):not(:disabled),[type=checkbox].placeholder--input:hover:not(:checked):not(:disabled),.form__input[type=radio]:hover:not(:checked):not(:disabled),[type=radio].placeholder--input:hover:not(:checked):not(:disabled){border-color:var(--primary);background-color:color-mix(in srgb,var(--primary),transparent 95%)}.form__input[type=checkbox]:disabled,[type=checkbox].placeholder--input:disabled,.form__input[type=radio]:disabled,[type=radio].placeholder--input:disabled{background-color:var(--color-gray-100);border-color:var(--color-gray-200);cursor:not-allowed;opacity:.7}.form__input[type=radio],[type=radio].placeholder--input{border-radius:var(--radius-pill)}.form__input[type=radio]:after,[type=radio].placeholder--input:after{-webkit-mask-image:none;mask-image:none;border-radius:var(--radius-pill);width:.5rem;height:.5rem}.form__input .form-control:not([type=checkbox]):not([type=radio]),.placeholder--input .form-control:not([type=checkbox]):not([type=radio]){padding:0;background-color:transparent;border-radius:var(--radius-none);border:none;line-height:1.3}.form__input .form-control:not([type=checkbox]):not([type=radio]):focus,.placeholder--input .form-control:not([type=checkbox]):not([type=radio]):focus{border:none;box-shadow:none}.form__input:has(.form-control:focus),.placeholder--input:has(.form-control:focus){border-color:var(--accent)}.group--vertical .form__input,.group--vertical .placeholder--input{width:100%}input[type=checkbox],input[type=radio]{--border-color: var(--primary)}.form__input:has(.form-control:disabled),.placeholder--input:has(.form-control:disabled){border-color:var(--gray-200);background-color:var(--gray-100)}.form__input:has(.form-control:disabled) .form-control,.placeholder--input:has(.form-control:disabled) .form-control,.form__input:has(.form-control:disabled) .form-control::placeholder,.placeholder--input:has(.form-control:disabled) .form-control::placeholder,.form__input:has(.form-control:disabled) .icon,.placeholder--input:has(.form-control:disabled) .icon{color:var(--form-placeholder-color)}input::placeholder{color:var(--form-placeholder-color)}.placeholder,.placeholder__item{width:100%}.placeholder--filled{width:auto}.placeholder--image{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background-color:var(--primary, #f1f5f9);border:var(--border-width, 1px) solid var(--border-color, #94a3b8);position:relative;overflow:hidden}.placeholder--image:after{content:"";width:40%;height:40%;background-color:var(--gray-200, #94a3b8);-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.placeholder--input{height:1.93rem;background:color-mix(in srgb,currentcolor,transparent 70%)}.placeholder-glow.placeholder,.placeholder-glow.placeholder__item,.placeholder-glow .placeholder,.placeholder-glow .placeholder__item{animation:placeholder-glow 2s ease-in-out infinite}.placeholder-wave.placeholder,.placeholder-wave.placeholder__item,.placeholder-wave .placeholder,.placeholder-wave .placeholder__item{-webkit-mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);mask-image:linear-gradient(130deg,#000 40%,#00000080,#000 60%);-webkit-mask-size:200% 100%;mask-size:200% 100%;animation:placeholder-wave 2s linear infinite}@keyframes placeholder-glow{0%,to{opacity:.6}50%{opacity:.3}}@keyframes placeholder-wave{to{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.placeholder-xs{min-height:.6em}.placeholder-sm{min-height:.8em}.placeholder-lg{min-height:1.25em}[variant=primary]{background-color:var(--primary, #296782)!important;opacity:.5}[variant=secondary]{background-color:var(--secondary, #49B4E8)!important;opacity:.5}[variant=accent]{background-color:var(--accent, #49B4E8)!important;opacity:.5}[variant=tertiary]{background-color:var(--tertiary, #f5524d)!important;opacity:.5}[variant=success]{background-color:var(--success, #73D3B6)!important;opacity:.5}[variant=danger]{background-color:var(--danger, #EA5F5F)!important;opacity:.5}[variant=warning]{background-color:var(--warning, #F5D762)!important;opacity:.5}[variant=info]{background-color:var(--info, #73B6D3)!important;opacity:.5}[variant=light]{background-color:var(--light, #FFFFFF)!important;opacity:.5}[variant=dark]{background-color:var(--dark, #000000)!important;opacity:.5}}

package/dist/components/Slider/js/slider.d.ts

@@ -0,0 +1,11 @@
+import { SplideProps } from '@splidejs/react-splide';
+/**
+ * Prépare et fusionne les options personnalisées de Splide avec les classes CSS métiers.
+ *
+ * @param {string} bemClass - La classe de base BEM du slider.
+ * @param {SplideProps['options']} options - Les options initiales fournies au slider.
+ * @param {string} arrowClass - Les classes personnalisées pour les flèches.
+ * @param {string} paginationClass - Les classes personnalisées pour la pagination.
+ * @returns {SplideProps['options']} Les options complètes incluant les classes.
+ */
+export declare const getSliderOptions: (bemClass: string, options?: SplideProps["options"], arrowClass?: string, paginationClass?: string) => SplideProps["options"];

package/dist/components/Slider/js/slider.js

@@ -0,0 +1,14 @@
+const n = (r, s, a = "", i = "") => {
+  const t = {
+    ...s?.classes,
+    arrow: `splide__arrow ${r}__arrow ${a}`.trim(),
+    pagination: `splide__pagination ${r}__pagination ${i}`.trim()
+  };
+  return {
+    ...s,
+    classes: t
+  };
+};
+export {
+  n as getSliderOptions
+};

package/dist/components/Slider/react/index.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+import { SplideProps } from '@splidejs/react-splide';
+export interface SliderItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Le contenu de la slide.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Composant SliderItem (Slide).
+ *
+ * @param {SliderItemProps} props - Les propriétés de la slide.
+ * @returns {JSX.Element} La slide rendue.
+ */
+export declare const SliderItem: ({ children, className, ...props }: SliderItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface SliderProps extends Omit<SplideProps, 'children'> {
+    /**
+     * Les slides ou contenu à afficher dans le slider.
+     */
+    children: React.ReactNode;
+    /**
+     * Options de configuration pour Splide.
+     */
+    options?: SplideProps['options'];
+    /**
+     * Classe CSS additionnelle pour les boutons de navigation (flèches).
+     */
+    arrowClass?: string;
+    /**
+     * Classe CSS additionnelle pour le conteneur de pagination.
+     */
+    paginationClass?: string;
+}
+/**
+ * Composant Slider basé sur Splide.js.
+ *
+ * @param {SliderProps} props - Les propriétés du Slider.
+ * @returns {JSX.Element} Le slider rendu.
+ */
+export declare const Slider: ({ children, options, className, arrowClass, paginationClass, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/react/index.js

@@ -0,0 +1,27 @@
+import { jsx as m } from "react/jsx-runtime";
+import { Splide as p, SplideSlide as d } from "@splidejs/react-splide";
+import '../style/index.css';/* empty css                  */
+import { getSliderOptions as a } from "../js/slider.js";
+const f = ({ children: e, className: s = "", ...r }) => /* @__PURE__ */ m(d, { className: `slider__item ${s}`.trim(), ...r, children: e }), C = ({
+  children: e,
+  options: s,
+  className: r = "",
+  arrowClass: t = "",
+  paginationClass: o = "",
+  ...l
+}) => {
+  const i = "slider", n = a(i, s, t, o);
+  return /* @__PURE__ */ m(
+    p,
+    {
+      options: n,
+      className: `${i} ${r}`.trim(),
+      ...l,
+      children: e
+    }
+  );
+};
+export {
+  C as Slider,
+  f as SliderItem
+};

package/dist/components/Slider/style/index.css

@@ -0,0 +1 @@
+@layer components{.slider{--slider-color: var(--primary);--slider-pagination-bottom: 2rem;--slider-pagination-size: 1rem;--slider-pagination-active-size: 1.5rem;--slider-pagination-gap: .5rem;--slider-pagination-active-gap: .5rem;--slider-pagination-background: var(--gray-500);--slider-pagination-active-background: var(--slider-color);--slider-pagination-border-radius: var(--radius-base);position:relative;width:100%;margin-bottom:var(--slider-pagination-bottom)}.slider__item{display:flex;flex-direction:column;justify-content:center;align-items:center}.slider .splide__arrow{background:transparent}.slider .slider__pagination{bottom:calc(var(--slider-pagination-bottom) * -1)}.slider .splide__pagination__page{background:var(--slider-pagination-background);border-radius:var(--slider-pagination-border-radius)}.slider .splide__pagination__page.is-active{background:var(--slider-pagination-active-background)}.slider .slider__arrow svg{fill:var(--slider-color)}}

package/dist/components/Tab/react/index.js

@@ -1,72 +1,78 @@
-import { jsx as t, jsxs as I } from "react/jsx-runtime";
-import { useState as L } from "react";
-import { TabContainer as K, TabContent as u, TabPane as _, Tabs as q, Tab as N, Nav as w } from "react-bootstrap";
+import { jsx as t, jsxs as L } from "react/jsx-runtime";
+import i, { useState as R } from "react";
+import { TabContainer as N, TabContent as T, TabPane as g, Tabs as V, Tab as x, Nav as q } from "react-bootstrap";
 import '../style/index.css';/* empty css                  */
-import { Group as C } from "../../Group/react/index.js";
-import { Button as z } from "../../Button/react/index.js";
-const c = ({
+import { Group as _ } from "../../Group/react/index.js";
+import { Button as w } from "../../Button/react/index.js";
+const s = ({
   items: n = [],
-  children: T,
-  className: l = "",
+  children: P,
+  className: $ = "",
   vertical: d = !1,
   variant: v = "",
-  border: g = !1,
-  color: $ = "primary",
-  defaultActiveKey: x,
-  activeKey: b,
+  border: S = !1,
+  color: b = "primary",
+  defaultActiveKey: j,
+  activeKey: m,
   onSelect: h,
-  contentClassName: P = "tabs__content",
-  ...m
+  contentClassName: p = "tabs__content",
+  ...f
 }) => {
-  const [S, j] = L(x || (n.length > 0 ? n[0].eventKey : void 0)), o = b !== void 0 ? b : S, s = (e, r) => {
-    e && j(e), h && h(e, r);
-  }, a = "tabs", p = d ? `${a}--vertical` : "", y = v ? `${a}--${v}` : "", A = g ? `${a}--border` : "", f = `${a}--${$}`;
+  const [A, B] = R(j || (n.length > 0 ? n[0].eventKey : void 0)), o = m !== void 0 ? m : A, c = (e, r) => {
+    e && B(e), h && h(e, r);
+  }, a = "tabs", C = d ? `${a}--vertical` : "", u = v ? `${a}--${v}` : "", E = S ? `${a}--border` : "", y = `${a}--${b}`, K = `${a}__item btn btn-${b}`;
   return n.length > 0 && d ? /* @__PURE__ */ t(
-    K,
+    N,
     {
-      ...m,
+      ...f,
       activeKey: o,
-      onSelect: s,
-      children: /* @__PURE__ */ I(C, { className: `${a} ${p} ${y} ${f} ${l}`.trim(), children: [
-        /* @__PURE__ */ t(C, { vertical: !0, className: "tabs__nav", children: n.map((e, r) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-          z,
+      onSelect: c,
+      children: /* @__PURE__ */ L(_, { className: `${a} ${C} ${u} ${y} ${$}`.trim(), children: [
+        /* @__PURE__ */ t(_, { vertical: !0, className: "tabs__nav", children: n.map((e, r) => /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+          w,
           {
             variant: "transparent",
-            onClick: (i) => s(e.eventKey, i),
+            onClick: (l) => c(e.eventKey, l),
             active: o === e.eventKey,
             children: e.header
           }
         ) }, r)) }),
-        /* @__PURE__ */ t(u, { className: P, children: n.map((e, r) => /* @__PURE__ */ t(_, { eventKey: e.eventKey, children: e.body }, r)) })
+        /* @__PURE__ */ t(T, { className: p, children: n.map((e, r) => /* @__PURE__ */ t(g, { eventKey: e.eventKey, children: e.body }, r)) })
       ] })
     }
-  ) : /* @__PURE__ */ t("div", { className: `${a} ${p} ${y} ${A} ${f} ${l}`.trim(), children: /* @__PURE__ */ t(
-    q,
+  ) : /* @__PURE__ */ t("div", { className: `${a} ${C} ${u} ${E} ${y} ${$}`.trim(), children: /* @__PURE__ */ t(
+    V,
     {
       activeKey: o,
-      onSelect: s,
-      ...m,
+      onSelect: c,
+      contentClassName: p,
+      ...f,
       children: n.length > 0 ? n.map((e, r) => {
-        const { header: i, body: B, ...G } = e;
+        const { header: l, body: G, ...I } = e;
         return /* @__PURE__ */ t(
-          N,
+          x,
           {
-            title: i,
-            ...G,
-            tabClassName: `${a}__item btn btn-${$}`,
-            children: /* @__PURE__ */ t("div", { className: `${a}__content`, children: B })
+            title: l,
+            ...I,
+            tabClassName: K,
+            children: /* @__PURE__ */ t("div", { className: `${a}__content`, children: G })
           },
           r
         );
-      }) : T
+      }) : (
+        // Mode composé : injecter tabClassName sur chaque Tabs.Item enfant
+        i.Children.map(P, (e) => i.isValidElement(e) ? i.cloneElement(e, {
+          tabClassName: `${K} ${e.props.tabClassName || ""}`.trim()
+        }) : e)
+      )
     }
   ) });
 };
-c.Item = N;
-c.Container = K;
-c.Content = u;
-c.Pane = _;
-c.Nav = w;
+s.Item = x;
+s.Container = N;
+s.Content = T;
+s.Pane = g;
+s.Nav = q;
 export {
-  c as Tabs
+  s as Tabs
 };

package/dist/components/Tab/style/index.css

@@ -1 +1 @@
-@layer components{.tabs{--nav-tabs-link-active-color: var(--secondary);--tab-tinte: var(--white) 90%}.tabs .nav-tabs{--nav-tabs-border-radius: var(--radius-none, 0);--nav-tabs-border-width: 0;--nav-link-color: currentColor;--nav-link-hover-color: var(--body-color)}.tabs .nav{background:var(--tab-bg-color);align-items:stretch}.tabs__content{background:var(--tab-bg-color-content);padding:var(--spacing-lg) var(--spacing-lg);height:inherit}.tabs .nav-item{display:flex}.tabs .tabs__item{border-radius:var(--nav-tabs-border-radius);height:100%;justify-content:center;align-items:center}.tabs .tabs__item.btn:not(.active){background:transparent}.tabs .tabs__item.btn:not(.active):not(:disabled){color:var(--body-color)}.tabs .tab-content>*{height:100%}.tabs--primary{--tab-bg-color: color-mix(in srgb, var(--primary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--primary), var(--white) 92%)}.tabs--secondary{--tab-bg-color: color-mix(in srgb, var(--secondary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--secondary), var(--white) 92%)}.tabs--accent{--tab-bg-color: color-mix(in srgb, var(--accent), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--accent), var(--white) 92%)}.tabs--tertiary{--tab-bg-color: color-mix(in srgb, var(--tertiary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--tertiary), var(--white) 92%)}.tabs--success{--tab-bg-color: color-mix(in srgb, var(--success), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--success), var(--white) 92%)}.tabs--danger{--tab-bg-color: color-mix(in srgb, var(--danger), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--danger), var(--white) 92%)}.tabs--warning{--tab-bg-color: color-mix(in srgb, var(--warning), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--warning), var(--white) 92%)}.tabs--info{--tab-bg-color: color-mix(in srgb, var(--info), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--info), var(--white) 92%)}.tabs--light{--tab-bg-color: color-mix(in srgb, var(--light), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--light), var(--white) 92%)}.tabs--dark{--tab-bg-color: color-mix(in srgb, var(--dark), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--dark), var(--white) 92%)}.tabs--pills{--tab-bg-color: transparent;--tab-tinte: var(--white) 50%}.tabs--pills .tabs__item{--nav-link-padding-y: .3rem;--nav-link-padding-x: .75rem;border-radius:var(--radius-lg)}.tabs--pills .tab-content{margin-top:.8rem}.tabs--border .tabs__item.active{border-width:1px;border-color:var(--btn-border-color);background:transparent;color:color-mix(in srgb,var(--btn-border-color),var(--dark) 20%)}.tabs--underline{--tab-bg-color: transparent}.tabs--underline .tabs__item{border:none;background:transparent;border-bottom:3px solid color-mix(in srgb,var(--body-color),transparent 90%)}.tabs--underline .tabs__item.active{color:color-mix(in srgb,var(--btn-border-color),var(--dark) 30%);border-bottom:3px solid var(--btn-border-color)}.tabs--underline .tabs__item:hover:not(.active),.tabs--underline .tabs__item:focus:not(.active){border-bottom:3px solid color-mix(in srgb,var(--btn-border-color),var(--dark) 10%)}.tabs--underline .tabs__item:hover,.tabs--underline .tabs__item:focus{box-shadow:none}.tabs--vertical{--tab-bg-color: transparent;width:100%}.tabs--vertical .tab-content{flex:1}.tabs--vertical .tabs__nav{padding:1.5rem}}
+@layer components{.tabs{--nav-tabs-link-active-color: var(--secondary);--tab-tinte: var(--white) 90%}.tabs .nav-tabs{--nav-tabs-border-radius: var(--radius-none, 0);--nav-tabs-border-width: 0;--nav-link-color: currentColor;--nav-link-hover-color: var(--body-color)}.tabs .nav{background:var(--tab-bg-color);align-items:stretch}.tabs__content,.tabs .tab-content{background:var(--tab-bg-color-content);padding:var(--spacing-lg) var(--spacing-lg);height:inherit}.tabs .nav-item{display:flex}.tabs .tabs__item{border-radius:var(--nav-tabs-border-radius);height:100%;justify-content:center;align-items:center}.tabs .tabs__item.btn:not(.active){background:transparent}.tabs .tabs__item.btn:not(.active):not(:disabled){color:var(--body-color)}.tabs .tab-content>*{height:100%}.tabs--primary{--tab-bg-color: color-mix(in srgb, var(--primary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--primary), transparent 85%)}.tabs--secondary{--tab-bg-color: color-mix(in srgb, var(--secondary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--secondary), transparent 85%)}.tabs--accent{--tab-bg-color: color-mix(in srgb, var(--accent), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--accent), transparent 85%)}.tabs--tertiary{--tab-bg-color: color-mix(in srgb, var(--tertiary), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--tertiary), transparent 85%)}.tabs--success{--tab-bg-color: color-mix(in srgb, var(--success), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--success), transparent 85%)}.tabs--danger{--tab-bg-color: color-mix(in srgb, var(--danger), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--danger), transparent 85%)}.tabs--warning{--tab-bg-color: color-mix(in srgb, var(--warning), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--warning), transparent 85%)}.tabs--info{--tab-bg-color: color-mix(in srgb, var(--info), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--info), transparent 85%)}.tabs--light{--tab-bg-color: color-mix(in srgb, var(--light), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--light), transparent 85%)}.tabs--dark{--tab-bg-color: color-mix(in srgb, var(--dark), var(--tab-tinte));--tab-bg-color-content: color-mix(in srgb, var(--dark), transparent 85%)}.tabs--pills{--tab-bg-color: transparent;--tab-tinte: var(--white) 50%}.tabs--pills .tabs__item{--nav-link-padding-y: .3rem;--nav-link-padding-x: .75rem;border-radius:var(--radius-lg)}.tabs--pills .tab-content{margin-top:.8rem}.tabs--border .tabs__item.active{border-width:1px;border-color:var(--btn-border-color);background:transparent;color:color-mix(in srgb,var(--btn-border-color),var(--dark) 20%)}.tabs--underline{--tab-bg-color: transparent}.tabs--underline .tabs__item{border:none;background:transparent;border-bottom:3px solid color-mix(in srgb,var(--body-color),transparent 90%)}.tabs--underline .tabs__item.active{color:color-mix(in srgb,var(--btn-border-color),var(--dark) 30%);border-bottom:3px solid var(--btn-border-color)}.tabs--underline .tabs__item:hover:not(.active),.tabs--underline .tabs__item:focus:not(.active){border-bottom:3px solid color-mix(in srgb,var(--btn-border-color),var(--dark) 10%)}.tabs--underline .tabs__item:hover,.tabs--underline .tabs__item:focus{box-shadow:none}.tabs--vertical{--tab-bg-color: transparent;width:100%}.tabs--vertical .tab-content{flex:1}.tabs--vertical .tabs__nav{padding:1.5rem}}

package/dist/index.d.ts

@@ -25,3 +25,6 @@ export * from './components/Auth/react';
 export * from './components/Errorpage/react';
 export * from './components/Loader/react';
 export * from './components/Grid/react';
+export * from './components/Menu/react';
+export * from './components/Slider/react';
+export * from './components/Card/react';

package/dist/index.js

@@ -2,17 +2,17 @@ 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, SizeProvider as a, useSize as d } from "./components/Icon/react/index.js";
-import { Group as n } from "./components/Group/react/index.js";
+import { Group as l } 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 { Divider as S } from "./components/Divider/react/index.js";
 import { ContextMenu as h } from "./components/Context-menu/react/index.js";
 import { Form as B } from "./components/Form/react/index.js";
-import { Shadow as L } 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 z } from "./components/Logo/react/index.js";
-import { Modal as M } from "./components/Modal/react/index.js";
+import { Shadow as G } from "./components/Shadow/react/index.js";
+import { Radius as b } from "./components/Radius/react/index.js";
+import { Dropdown as I } from "./components/Dropdown/react/index.js";
+import { Logo as T } from "./components/Logo/react/index.js";
+import { Modal as z } from "./components/Modal/react/index.js";
 import { Placeholder as k } from "./components/Placeholder/react/index.js";
 import { Tooltip as F } from "./components/Tooltip/react/index.js";
 import { Table as N } from "./components/Table/react/index.js";
@@ -26,11 +26,14 @@ 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 { Grid as xo, GridItem as fo, GridSpacer as ao } from "./components/Grid/react/index.js";
-import { default as no } 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 co } from "react-bootstrap";
+import { Menu as lo } from "./components/Menu/react/index.js";
+import { Slider as co, SliderItem as uo } from "./components/Slider/react/index.js";
+import { Card as so } from "./components/Card/react/index.js";
+import { default as go } 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 vo } from "react-bootstrap";
 export {
   j as Accordion,
-  no as AccordionContext,
+  go as AccordionContext,
   K as Alert,
   O as AlertBase,
   Q as AlertHeading,
@@ -39,30 +42,34 @@ export {
   c as Avatar,
   A as Badge,
   m as Button,
+  so as Card,
   t as Color,
   h as ContextMenu,
   W as Dashboard,
-  g as Divider,
-  T as Dropdown,
+  S as Divider,
+  I as Dropdown,
   eo as Errorpage,
   B as Form,
   xo as Grid,
   fo as GridItem,
   ao as GridSpacer,
-  n as Group,
+  l as Group,
   f as Icon,
   _ as LangSelector,
   po as Loader,
-  z as Logo,
-  M as Modal,
+  T as Logo,
+  lo as Menu,
+  z as Modal,
   Y as Nav,
   k as Placeholder,
-  C as Radius,
-  L as Shadow,
+  b as Radius,
+  G as Shadow,
   a as SizeProvider,
+  co as Slider,
+  uo as SliderItem,
   N as Table,
   y as Tabs,
   F as Tooltip,
-  co as useAccordionButton,
+  vo as useAccordionButton,
   d as useSize
 };

package/dist/node_modules/.pnpm/flatpickr@4.6.13/node_modules/flatpickr/dist/l10n/fr.js

@@ -0,0 +1,71 @@
+import { __module as e } from "../../../../../../../_virtual/fr2.js";
+var l = e.exports, a;
+function m() {
+  return a ? e.exports : (a = 1, (function(d, t) {
+    (function(r, n) {
+      n(t);
+    })(l, (function(r) {
+      var n = typeof window < "u" && window.flatpickr !== void 0 ? window.flatpickr : {
+        l10ns: {}
+      }, i = {
+        firstDayOfWeek: 1,
+        weekdays: {
+          shorthand: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"],
+          longhand: [
+            "dimanche",
+            "lundi",
+            "mardi",
+            "mercredi",
+            "jeudi",
+            "vendredi",
+            "samedi"
+          ]
+        },
+        months: {
+          shorthand: [
+            "janv",
+            "févr",
+            "mars",
+            "avr",
+            "mai",
+            "juin",
+            "juil",
+            "août",
+            "sept",
+            "oct",
+            "nov",
+            "déc"
+          ],
+          longhand: [
+            "janvier",
+            "février",
+            "mars",
+            "avril",
+            "mai",
+            "juin",
+            "juillet",
+            "août",
+            "septembre",
+            "octobre",
+            "novembre",
+            "décembre"
+          ]
+        },
+        ordinal: function(u) {
+          return u > 1 ? "" : "er";
+        },
+        rangeSeparator: " au ",
+        weekAbbreviation: "Sem",
+        scrollTitle: "Défiler pour augmenter la valeur",
+        toggleTitle: "Cliquer pour basculer",
+        time_24hr: !0
+      };
+      n.l10ns.fr = i;
+      var o = n.l10ns;
+      r.French = i, r.default = o, Object.defineProperty(r, "__esModule", { value: !0 });
+    }));
+  })(e, e.exports), e.exports);
+}
+export {
+  m as __require
+};

package/dist/templates/Cards/Cards.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Template de démonstration pour le composant Card.
+ */
+export declare const Cards: () => import("react/jsx-runtime").JSX.Element;

package/dist/templates/Cards/Cards.tsx

@@ -0,0 +1,55 @@
+import { Card, Button } from '../../index';
+
+/**
+ * Template de démonstration pour le composant Card.
+ */
+export const Cards = () => {
+	return (
+		<div className="Cards-demo">
+			<section className="mb-5">
+				<h3>Cards</h3>
+				<p className="text-muted mb-4">Le composant <code>Card</code> est basé sur React Bootstrap tout en utilisant les classes BEM de zuii.</p>
+
+				<h5 className='mt-4'>Basique</h5>
+				<p className="text-muted mb-4">Un exemple de carte simple avec un titre, du texte et un bouton.</p>
+				<Card>
+					<Card.Img variant="top" src="https://placehold.co/286x180" alt="Placeholder d'image" />
+					<Card.Body>
+						<Card.Title>Titre de la carte</Card.Title>
+						<Card.Text>
+							Un exemple rapide de texte pour construire le titre de la carte et constituer la majeure partie du contenu.
+						</Card.Text>
+						<Button variant="primary">Go somewhere</Button>
+					</Card.Body>
+				</Card>
+
+				<h5 className='mt-5'>En-tête et Pied de page</h5>
+				<p className="text-muted mb-4">Cartes contenant un `Card.Header` et un `Card.Footer`.</p>
+				<Card>
+					<Card.Header>Featured</Card.Header>
+					<Card.Body>
+						<Card.Title>Titre spécial</Card.Title>
+						<Card.Text>
+							Avec du texte supplémentaire à l'intérieur pour montrer l'utilisation du header.
+						</Card.Text>
+						<Button variant="primary">Action</Button>
+					</Card.Body>
+					<Card.Footer className="text-muted">Il y a 2 jours</Card.Footer>
+				</Card>
+
+				<h5 className='mt-5'>Superposition d'image</h5>
+				<p className="text-muted mb-4">Transformer une image en arrière-plan d'une carte et écrire par-dessus.</p>
+				<Card className="bg-dark text-white">
+					<Card.Img src="https://placehold.co/800x200/333/fff" alt="Card image" />
+					<Card.ImgOverlay>
+						<Card.Title>Superposition</Card.Title>
+						<Card.Text>
+							Ceci est une carte plus large avec un texte de support en dessous comme introduction naturelle à un contenu supplémentaire. Ce contenu est un peu plus long.
+						</Card.Text>
+						<Card.Text>Dernière mise à jour : 3 minutes.</Card.Text>
+					</Card.ImgOverlay>
+				</Card>
+			</section>
+		</div>
+	);
+};

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

@@ -28,8 +28,8 @@ export const FormsElements = () => {
 				<Form.Control id="search" type="search" placeholder="Enter search" name="search" icon="icon-search" />
 				<Form.Control id="email" type="email" placeholder="Enter email" name="email" icon="icon-at-sign" />
 				<Form.Control id="number" type="number" placeholder="Enter number" name="number" icon="icon-number" />
-				{/* <Form.File id="file-simple" label="Upload simple" name="file_simple" /> */}
-				{/* <Form.File
+				{/* <Form.File id="file-simple" label="Upload simple" name="file_simple" />
+				<Form.File
 					id="simple-upload"
 					name="simple-upload"
 					maxNumberOfFiles={1}
@@ -41,16 +41,18 @@ export const FormsElements = () => {
 					maxNumberOfFiles={5}
 					maxFileSize={5 * 1024 * 1024}
 					onComplete={(result: any) => console.log("Fichiers téléchargés :", result)}
-				/> */}
-				{/* <Form.File id="file-multiple" label="Upload multiple" name="file_multiple" multiple={true} maxFiles={5} /> */}
+				/>
+				 <Form.File id="file-multiple" label="Upload multiple" name="file_multiple" multiple={true} maxFiles={5} /> */}
 				<Form.Check id="checkbox1" type="checkbox" label="Enter checkbox" name="checkbox" />
 				<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={selectValue} onChange={(val) => setSelectValue(val)} options={[]}></Form.Select>
 				<Form.Select name="select" value={selectValue} onChange={(val) => setSelectValue(val)} options={[
 					{
 						text: 'Option 1',
 						value: '1'
+
 					},
 					{
 						text: 'Option 2',
@@ -88,6 +90,9 @@ export const FormsElements = () => {
 						value: '3'
 					}
 				]} />
+				<Form.Date />
+				<Form.Color />
+
 				<Form.Control type="submit" value="Submit" />
 			</form>