zuii 1.4.15 → 1.4.16

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

@@ -1,6 +1,6 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import { tokens as l } from "../../../core/styles/tokens.js";
-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 '../../Button/style/index.css';import '../style/index.css';import '../../../core/styles/main.css';/* empty 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 '../../Button/style/index.css';import '../style/index.css';import '../../../core/styles/main.css';/* empty css                             */
 /* empty css                  */
 import "react-bootstrap";
 /* empty css                            */
@@ -32,7 +32,8 @@ import "../../Auth/react/index.js";
 import "react-router-dom";
 /* empty css                               */
 /* empty css                            */
-const L = ({ name: r }) => {
+/* empty css                          */
+const M = ({ name: r }) => {
   const p = l.brands[r];
   return /* @__PURE__ */ i(t, { children: [
     /* @__PURE__ */ o("div", { className: `color bg-${r} p-4`, children: /* @__PURE__ */ i(t, { vertical: !0, center: !0, children: [
@@ -56,5 +57,5 @@ const L = ({ name: r }) => {
   ] });
 };
 export {
-  L as Color
+  M as Color
 };

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

@@ -1,6 +1,6 @@
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { useNavigate as e } from "react-router-dom";
-import '../../Loader/style/index.css';import '../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 '../../Color/style/index.css';import '../../../core/styles/main.css';/* empty css                             */
+import '../../Grid/style/index.css';import '../../Loader/style/index.css';import '../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 '../../Color/style/index.css';import '../../../core/styles/main.css';/* empty css                             */
 /* empty css                           */
 import { Button as p } from "../../Button/react/index.js";
 import { Icon as a } from "../../Icon/react/index.js";
@@ -31,7 +31,8 @@ import "choices.js";
 import "../../Auth/react/index.js";
 /* empty css                  */
 /* empty css                            */
-const J = ({ code: t = 404 }) => {
+/* empty css                          */
+const K = ({ code: t = 404 }) => {
   const m = e();
   return /* @__PURE__ */ r("main", { className: "error-page", children: /* @__PURE__ */ r("div", { className: "error-page__container ", children: /* @__PURE__ */ i("div", { className: "container", children: [
     /* @__PURE__ */ i(o, { className: "text-secondary mb-4", children: [
@@ -47,5 +48,5 @@ const J = ({ code: t = 404 }) => {
   ] }) }) });
 };
 export {
-  J as Errorpage
+  K as Errorpage
 };

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

@@ -0,0 +1,96 @@
+import { ReactNode, HTMLAttributes } from 'react';
+/**
+ * Liste des gaps autorisés.
+ */
+type GapSize = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 64;
+/**
+ * Nombre de colonnes de la grille (1-24).
+ */
+type GridSpan = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+/**
+ * Propriétés du composant Grid.
+ */
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Les éléments à afficher dans la grille.
+     */
+    children: ReactNode;
+    /**
+     * Espacement global.
+     */
+    gap?: GapSize;
+    /**
+     * Espacement horizontal (X).
+     */
+    gapX?: GapSize;
+    /**
+     * Espacement vertical (Y).
+     */
+    gapY?: GapSize;
+    /**
+     * Gaps responsives.
+     */
+    smGap?: GapSize;
+    smGapX?: GapSize;
+    smGapY?: GapSize;
+    mdGap?: GapSize;
+    mdGapX?: GapSize;
+    mdGapY?: GapSize;
+    lgGap?: GapSize;
+    lgGapX?: GapSize;
+    lgGapY?: GapSize;
+    xlGap?: GapSize;
+    xlGapX?: GapSize;
+    xlGapY?: GapSize;
+}
+/**
+ * Composant Grid utilisant CSS Grid avec 24 colonnes.
+ *
+ * @param {GridProps} props - Les propriétés du composant.
+ * @returns {JSX.Element} Le rendu du composant.
+ */
+export declare const Grid: ({ children, gap, gapX, gapY, smGap, smGapX, smGapY, mdGap, mdGapX, mdGapY, lgGap, lgGapX, lgGapY, xlGap, xlGapX, xlGapY, className, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Propriétés du composant GridItem.
+ */
+interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Contenu de l'item.
+     */
+    children?: ReactNode;
+    /**
+     * Nombre de colonnes occupées par défaut (1-24).
+     */
+    span?: GridSpan;
+    /**
+     * Nombre de colonnes occupées sur petit écran (sm).
+     */
+    sm?: GridSpan;
+    /**
+     * Nombre de colonnes occupées sur écran moyen (md).
+     */
+    md?: GridSpan;
+    /**
+     * Nombre de colonnes occupées sur grand écran (lg).
+     */
+    lg?: GridSpan;
+    /**
+     * Nombre de colonnes occupées sur très grand écran (xl).
+     */
+    xl?: GridSpan;
+}
+/**
+ * Composant GridItem permettant de gérer le positionnement dans la grille.
+ *
+ * @param {GridItemProps} props - Les propriétés de l'item.
+ * @returns {JSX.Element} Le rendu de l'item.
+ */
+export declare const GridItem: ({ children, span, sm, md, lg, xl, className, ...props }: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Composant Spacer permettant de générer un espace vide contrôlé par le système de grille.
+ *
+ * @param {GridItemProps} props - Les propriétés de l'espaceur.
+ * @returns {JSX.Element} Le rendu de l'espaceur.
+ */
+export declare const GridSpacer: (props: GridItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+import { jsx as g } from "react/jsx-runtime";
+import '../style/index.css';/* empty css                  */
+const _ = ({
+  children: d,
+  gap: p = 2,
+  gapX: u,
+  gapY: f,
+  smGap: h,
+  smGapX: v,
+  smGapY: r,
+  mdGap: t,
+  mdGapX: o,
+  mdGapY: $,
+  lgGap: e,
+  lgGapX: n,
+  lgGapY: c,
+  xlGap: a,
+  xlGapX: m,
+  xlGapY: x,
+  className: l = "",
+  ...y
+}) => {
+  const s = "grid", i = [s];
+  return p !== void 0 && i.push(`${s}--gap-${p}`), u !== void 0 && i.push(`${s}--gap-x-${u}`), f !== void 0 && i.push(`${s}--gap-y-${f}`), h !== void 0 && i.push(`${s}--gap-sm-${h}`), v !== void 0 && i.push(`${s}--gap-x-sm-${v}`), r !== void 0 && i.push(`${s}--gap-y-sm-${r}`), t !== void 0 && i.push(`${s}--gap-md-${t}`), o !== void 0 && i.push(`${s}--gap-x-md-${o}`), $ !== void 0 && i.push(`${s}--gap-y-md-${$}`), e !== void 0 && i.push(`${s}--gap-lg-${e}`), n !== void 0 && i.push(`${s}--gap-x-lg-${n}`), c !== void 0 && i.push(`${s}--gap-y-lg-${c}`), a !== void 0 && i.push(`${s}--gap-xl-${a}`), m !== void 0 && i.push(`${s}--gap-x-xl-${m}`), x !== void 0 && i.push(`${s}--gap-y-xl-${x}`), l && i.push(l), /* @__PURE__ */ g("div", { className: "grid-container", children: /* @__PURE__ */ g(
+    "div",
+    {
+      className: i.join(" ").trim(),
+      ...y,
+      children: d
+    }
+  ) });
+}, j = ({
+  children: d,
+  span: p = 24,
+  sm: u,
+  md: f,
+  lg: h,
+  xl: v,
+  className: r = "",
+  ...t
+}) => {
+  const o = "grid__item", $ = [o];
+  return p !== void 0 && $.push(`${o}--${p}`), u !== void 0 && $.push(`${o}--sm-${u}`), f !== void 0 && $.push(`${o}--md-${f}`), h !== void 0 && $.push(`${o}--lg-${h}`), v !== void 0 && $.push(`${o}--xl-${v}`), r && $.push(r), /* @__PURE__ */ g(
+    "div",
+    {
+      className: $.join(" ").trim(),
+      ...t,
+      children: d
+    }
+  );
+}, I = (d) => /* @__PURE__ */ g(j, { ...d });
+export {
+  _ as Grid,
+  j as GridItem,
+  I as GridSpacer
+};

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

@@ -0,0 +1 @@
+@charset "UTF-8";@layer components{.grid-container{container-type:inline-size;width:100%}.grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));width:100%;box-sizing:border-box}.grid__item{min-width:0;box-sizing:border-box;display:block}.grid__item--0{display:none}.grid__item--1{display:block;grid-column:span 1}.grid__item--2{display:block;grid-column:span 2}.grid__item--3{display:block;grid-column:span 3}.grid__item--4{display:block;grid-column:span 4}.grid__item--5{display:block;grid-column:span 5}.grid__item--6{display:block;grid-column:span 6}.grid__item--7{display:block;grid-column:span 7}.grid__item--8{display:block;grid-column:span 8}.grid__item--9{display:block;grid-column:span 9}.grid__item--10{display:block;grid-column:span 10}.grid__item--11{display:block;grid-column:span 11}.grid__item--12{display:block;grid-column:span 12}.grid__item--13{display:block;grid-column:span 13}.grid__item--14{display:block;grid-column:span 14}.grid__item--15{display:block;grid-column:span 15}.grid__item--16{display:block;grid-column:span 16}.grid__item--17{display:block;grid-column:span 17}.grid__item--18{display:block;grid-column:span 18}.grid__item--19{display:block;grid-column:span 19}.grid__item--20{display:block;grid-column:span 20}.grid__item--21{display:block;grid-column:span 21}.grid__item--22{display:block;grid-column:span 22}.grid__item--23{display:block;grid-column:span 23}.grid__item--24{display:block;grid-column:span 24}.grid--gap-0{gap:var(--size-0)}.grid--gap-x-0{column-gap:var(--size-0)}.grid--gap-y-0{row-gap:var(--size-0)}.grid--gap-1{gap:var(--size-1)}.grid--gap-x-1{column-gap:var(--size-1)}.grid--gap-y-1{row-gap:var(--size-1)}.grid--gap-2{gap:var(--size-2)}.grid--gap-x-2{column-gap:var(--size-2)}.grid--gap-y-2{row-gap:var(--size-2)}.grid--gap-3{gap:var(--size-3)}.grid--gap-x-3{column-gap:var(--size-3)}.grid--gap-y-3{row-gap:var(--size-3)}.grid--gap-4{gap:var(--size-4)}.grid--gap-x-4{column-gap:var(--size-4)}.grid--gap-y-4{row-gap:var(--size-4)}.grid--gap-5{gap:var(--size-5)}.grid--gap-x-5{column-gap:var(--size-5)}.grid--gap-y-5{row-gap:var(--size-5)}.grid--gap-6{gap:var(--size-6)}.grid--gap-x-6{column-gap:var(--size-6)}.grid--gap-y-6{row-gap:var(--size-6)}.grid--gap-8{gap:var(--size-8)}.grid--gap-x-8{column-gap:var(--size-8)}.grid--gap-y-8{row-gap:var(--size-8)}.grid--gap-10{gap:var(--size-10)}.grid--gap-x-10{column-gap:var(--size-10)}.grid--gap-y-10{row-gap:var(--size-10)}.grid--gap-12{gap:var(--size-12)}.grid--gap-x-12{column-gap:var(--size-12)}.grid--gap-y-12{row-gap:var(--size-12)}.grid--gap-16{gap:var(--size-16)}.grid--gap-x-16{column-gap:var(--size-16)}.grid--gap-y-16{row-gap:var(--size-16)}.grid--gap-20{gap:var(--size-20)}.grid--gap-x-20{column-gap:var(--size-20)}.grid--gap-y-20{row-gap:var(--size-20)}.grid--gap-24{gap:var(--size-24)}.grid--gap-x-24{column-gap:var(--size-24)}.grid--gap-y-24{row-gap:var(--size-24)}.grid--gap-32{gap:var(--size-32)}.grid--gap-x-32{column-gap:var(--size-32)}.grid--gap-y-32{row-gap:var(--size-32)}.grid--gap-40{gap:var(--size-40)}.grid--gap-x-40{column-gap:var(--size-40)}.grid--gap-y-40{row-gap:var(--size-40)}.grid--gap-48{gap:var(--size-48)}.grid--gap-x-48{column-gap:var(--size-48)}.grid--gap-y-48{row-gap:var(--size-48)}.grid--gap-64{gap:var(--size-64)}.grid--gap-x-64{column-gap:var(--size-64)}.grid--gap-y-64{row-gap:var(--size-64)}@container (min-width: 640px){.grid__item--sm-0{display:none}.grid__item--sm-1{display:block;grid-column:span 1}.grid__item--sm-2{display:block;grid-column:span 2}.grid__item--sm-3{display:block;grid-column:span 3}.grid__item--sm-4{display:block;grid-column:span 4}.grid__item--sm-5{display:block;grid-column:span 5}.grid__item--sm-6{display:block;grid-column:span 6}.grid__item--sm-7{display:block;grid-column:span 7}.grid__item--sm-8{display:block;grid-column:span 8}.grid__item--sm-9{display:block;grid-column:span 9}.grid__item--sm-10{display:block;grid-column:span 10}.grid__item--sm-11{display:block;grid-column:span 11}.grid__item--sm-12{display:block;grid-column:span 12}.grid__item--sm-13{display:block;grid-column:span 13}.grid__item--sm-14{display:block;grid-column:span 14}.grid__item--sm-15{display:block;grid-column:span 15}.grid__item--sm-16{display:block;grid-column:span 16}.grid__item--sm-17{display:block;grid-column:span 17}.grid__item--sm-18{display:block;grid-column:span 18}.grid__item--sm-19{display:block;grid-column:span 19}.grid__item--sm-20{display:block;grid-column:span 20}.grid__item--sm-21{display:block;grid-column:span 21}.grid__item--sm-22{display:block;grid-column:span 22}.grid__item--sm-23{display:block;grid-column:span 23}.grid__item--sm-24{display:block;grid-column:span 24}.grid--gap-sm-0{gap:var(--size-0)}.grid--gap-x-sm-0{column-gap:var(--size-0)}.grid--gap-y-sm-0{row-gap:var(--size-0)}.grid--gap-sm-1{gap:var(--size-1)}.grid--gap-x-sm-1{column-gap:var(--size-1)}.grid--gap-y-sm-1{row-gap:var(--size-1)}.grid--gap-sm-2{gap:var(--size-2)}.grid--gap-x-sm-2{column-gap:var(--size-2)}.grid--gap-y-sm-2{row-gap:var(--size-2)}.grid--gap-sm-3{gap:var(--size-3)}.grid--gap-x-sm-3{column-gap:var(--size-3)}.grid--gap-y-sm-3{row-gap:var(--size-3)}.grid--gap-sm-4{gap:var(--size-4)}.grid--gap-x-sm-4{column-gap:var(--size-4)}.grid--gap-y-sm-4{row-gap:var(--size-4)}.grid--gap-sm-5{gap:var(--size-5)}.grid--gap-x-sm-5{column-gap:var(--size-5)}.grid--gap-y-sm-5{row-gap:var(--size-5)}.grid--gap-sm-6{gap:var(--size-6)}.grid--gap-x-sm-6{column-gap:var(--size-6)}.grid--gap-y-sm-6{row-gap:var(--size-6)}.grid--gap-sm-8{gap:var(--size-8)}.grid--gap-x-sm-8{column-gap:var(--size-8)}.grid--gap-y-sm-8{row-gap:var(--size-8)}.grid--gap-sm-10{gap:var(--size-10)}.grid--gap-x-sm-10{column-gap:var(--size-10)}.grid--gap-y-sm-10{row-gap:var(--size-10)}.grid--gap-sm-12{gap:var(--size-12)}.grid--gap-x-sm-12{column-gap:var(--size-12)}.grid--gap-y-sm-12{row-gap:var(--size-12)}.grid--gap-sm-16{gap:var(--size-16)}.grid--gap-x-sm-16{column-gap:var(--size-16)}.grid--gap-y-sm-16{row-gap:var(--size-16)}.grid--gap-sm-20{gap:var(--size-20)}.grid--gap-x-sm-20{column-gap:var(--size-20)}.grid--gap-y-sm-20{row-gap:var(--size-20)}.grid--gap-sm-24{gap:var(--size-24)}.grid--gap-x-sm-24{column-gap:var(--size-24)}.grid--gap-y-sm-24{row-gap:var(--size-24)}.grid--gap-sm-32{gap:var(--size-32)}.grid--gap-x-sm-32{column-gap:var(--size-32)}.grid--gap-y-sm-32{row-gap:var(--size-32)}.grid--gap-sm-40{gap:var(--size-40)}.grid--gap-x-sm-40{column-gap:var(--size-40)}.grid--gap-y-sm-40{row-gap:var(--size-40)}.grid--gap-sm-48{gap:var(--size-48)}.grid--gap-x-sm-48{column-gap:var(--size-48)}.grid--gap-y-sm-48{row-gap:var(--size-48)}.grid--gap-sm-64{gap:var(--size-64)}.grid--gap-x-sm-64{column-gap:var(--size-64)}.grid--gap-y-sm-64{row-gap:var(--size-64)}}@container (min-width: 768px){.grid__item--md-0{display:none}.grid__item--md-1{display:block;grid-column:span 1}.grid__item--md-2{display:block;grid-column:span 2}.grid__item--md-3{display:block;grid-column:span 3}.grid__item--md-4{display:block;grid-column:span 4}.grid__item--md-5{display:block;grid-column:span 5}.grid__item--md-6{display:block;grid-column:span 6}.grid__item--md-7{display:block;grid-column:span 7}.grid__item--md-8{display:block;grid-column:span 8}.grid__item--md-9{display:block;grid-column:span 9}.grid__item--md-10{display:block;grid-column:span 10}.grid__item--md-11{display:block;grid-column:span 11}.grid__item--md-12{display:block;grid-column:span 12}.grid__item--md-13{display:block;grid-column:span 13}.grid__item--md-14{display:block;grid-column:span 14}.grid__item--md-15{display:block;grid-column:span 15}.grid__item--md-16{display:block;grid-column:span 16}.grid__item--md-17{display:block;grid-column:span 17}.grid__item--md-18{display:block;grid-column:span 18}.grid__item--md-19{display:block;grid-column:span 19}.grid__item--md-20{display:block;grid-column:span 20}.grid__item--md-21{display:block;grid-column:span 21}.grid__item--md-22{display:block;grid-column:span 22}.grid__item--md-23{display:block;grid-column:span 23}.grid__item--md-24{display:block;grid-column:span 24}.grid--gap-md-0{gap:var(--size-0)}.grid--gap-x-md-0{column-gap:var(--size-0)}.grid--gap-y-md-0{row-gap:var(--size-0)}.grid--gap-md-1{gap:var(--size-1)}.grid--gap-x-md-1{column-gap:var(--size-1)}.grid--gap-y-md-1{row-gap:var(--size-1)}.grid--gap-md-2{gap:var(--size-2)}.grid--gap-x-md-2{column-gap:var(--size-2)}.grid--gap-y-md-2{row-gap:var(--size-2)}.grid--gap-md-3{gap:var(--size-3)}.grid--gap-x-md-3{column-gap:var(--size-3)}.grid--gap-y-md-3{row-gap:var(--size-3)}.grid--gap-md-4{gap:var(--size-4)}.grid--gap-x-md-4{column-gap:var(--size-4)}.grid--gap-y-md-4{row-gap:var(--size-4)}.grid--gap-md-5{gap:var(--size-5)}.grid--gap-x-md-5{column-gap:var(--size-5)}.grid--gap-y-md-5{row-gap:var(--size-5)}.grid--gap-md-6{gap:var(--size-6)}.grid--gap-x-md-6{column-gap:var(--size-6)}.grid--gap-y-md-6{row-gap:var(--size-6)}.grid--gap-md-8{gap:var(--size-8)}.grid--gap-x-md-8{column-gap:var(--size-8)}.grid--gap-y-md-8{row-gap:var(--size-8)}.grid--gap-md-10{gap:var(--size-10)}.grid--gap-x-md-10{column-gap:var(--size-10)}.grid--gap-y-md-10{row-gap:var(--size-10)}.grid--gap-md-12{gap:var(--size-12)}.grid--gap-x-md-12{column-gap:var(--size-12)}.grid--gap-y-md-12{row-gap:var(--size-12)}.grid--gap-md-16{gap:var(--size-16)}.grid--gap-x-md-16{column-gap:var(--size-16)}.grid--gap-y-md-16{row-gap:var(--size-16)}.grid--gap-md-20{gap:var(--size-20)}.grid--gap-x-md-20{column-gap:var(--size-20)}.grid--gap-y-md-20{row-gap:var(--size-20)}.grid--gap-md-24{gap:var(--size-24)}.grid--gap-x-md-24{column-gap:var(--size-24)}.grid--gap-y-md-24{row-gap:var(--size-24)}.grid--gap-md-32{gap:var(--size-32)}.grid--gap-x-md-32{column-gap:var(--size-32)}.grid--gap-y-md-32{row-gap:var(--size-32)}.grid--gap-md-40{gap:var(--size-40)}.grid--gap-x-md-40{column-gap:var(--size-40)}.grid--gap-y-md-40{row-gap:var(--size-40)}.grid--gap-md-48{gap:var(--size-48)}.grid--gap-x-md-48{column-gap:var(--size-48)}.grid--gap-y-md-48{row-gap:var(--size-48)}.grid--gap-md-64{gap:var(--size-64)}.grid--gap-x-md-64{column-gap:var(--size-64)}.grid--gap-y-md-64{row-gap:var(--size-64)}}@container (min-width: 1024px){.grid__item--lg-0{display:none}.grid__item--lg-1{display:block;grid-column:span 1}.grid__item--lg-2{display:block;grid-column:span 2}.grid__item--lg-3{display:block;grid-column:span 3}.grid__item--lg-4{display:block;grid-column:span 4}.grid__item--lg-5{display:block;grid-column:span 5}.grid__item--lg-6{display:block;grid-column:span 6}.grid__item--lg-7{display:block;grid-column:span 7}.grid__item--lg-8{display:block;grid-column:span 8}.grid__item--lg-9{display:block;grid-column:span 9}.grid__item--lg-10{display:block;grid-column:span 10}.grid__item--lg-11{display:block;grid-column:span 11}.grid__item--lg-12{display:block;grid-column:span 12}.grid__item--lg-13{display:block;grid-column:span 13}.grid__item--lg-14{display:block;grid-column:span 14}.grid__item--lg-15{display:block;grid-column:span 15}.grid__item--lg-16{display:block;grid-column:span 16}.grid__item--lg-17{display:block;grid-column:span 17}.grid__item--lg-18{display:block;grid-column:span 18}.grid__item--lg-19{display:block;grid-column:span 19}.grid__item--lg-20{display:block;grid-column:span 20}.grid__item--lg-21{display:block;grid-column:span 21}.grid__item--lg-22{display:block;grid-column:span 22}.grid__item--lg-23{display:block;grid-column:span 23}.grid__item--lg-24{display:block;grid-column:span 24}.grid--gap-lg-0{gap:var(--size-0)}.grid--gap-x-lg-0{column-gap:var(--size-0)}.grid--gap-y-lg-0{row-gap:var(--size-0)}.grid--gap-lg-1{gap:var(--size-1)}.grid--gap-x-lg-1{column-gap:var(--size-1)}.grid--gap-y-lg-1{row-gap:var(--size-1)}.grid--gap-lg-2{gap:var(--size-2)}.grid--gap-x-lg-2{column-gap:var(--size-2)}.grid--gap-y-lg-2{row-gap:var(--size-2)}.grid--gap-lg-3{gap:var(--size-3)}.grid--gap-x-lg-3{column-gap:var(--size-3)}.grid--gap-y-lg-3{row-gap:var(--size-3)}.grid--gap-lg-4{gap:var(--size-4)}.grid--gap-x-lg-4{column-gap:var(--size-4)}.grid--gap-y-lg-4{row-gap:var(--size-4)}.grid--gap-lg-5{gap:var(--size-5)}.grid--gap-x-lg-5{column-gap:var(--size-5)}.grid--gap-y-lg-5{row-gap:var(--size-5)}.grid--gap-lg-6{gap:var(--size-6)}.grid--gap-x-lg-6{column-gap:var(--size-6)}.grid--gap-y-lg-6{row-gap:var(--size-6)}.grid--gap-lg-8{gap:var(--size-8)}.grid--gap-x-lg-8{column-gap:var(--size-8)}.grid--gap-y-lg-8{row-gap:var(--size-8)}.grid--gap-lg-10{gap:var(--size-10)}.grid--gap-x-lg-10{column-gap:var(--size-10)}.grid--gap-y-lg-10{row-gap:var(--size-10)}.grid--gap-lg-12{gap:var(--size-12)}.grid--gap-x-lg-12{column-gap:var(--size-12)}.grid--gap-y-lg-12{row-gap:var(--size-12)}.grid--gap-lg-16{gap:var(--size-16)}.grid--gap-x-lg-16{column-gap:var(--size-16)}.grid--gap-y-lg-16{row-gap:var(--size-16)}.grid--gap-lg-20{gap:var(--size-20)}.grid--gap-x-lg-20{column-gap:var(--size-20)}.grid--gap-y-lg-20{row-gap:var(--size-20)}.grid--gap-lg-24{gap:var(--size-24)}.grid--gap-x-lg-24{column-gap:var(--size-24)}.grid--gap-y-lg-24{row-gap:var(--size-24)}.grid--gap-lg-32{gap:var(--size-32)}.grid--gap-x-lg-32{column-gap:var(--size-32)}.grid--gap-y-lg-32{row-gap:var(--size-32)}.grid--gap-lg-40{gap:var(--size-40)}.grid--gap-x-lg-40{column-gap:var(--size-40)}.grid--gap-y-lg-40{row-gap:var(--size-40)}.grid--gap-lg-48{gap:var(--size-48)}.grid--gap-x-lg-48{column-gap:var(--size-48)}.grid--gap-y-lg-48{row-gap:var(--size-48)}.grid--gap-lg-64{gap:var(--size-64)}.grid--gap-x-lg-64{column-gap:var(--size-64)}.grid--gap-y-lg-64{row-gap:var(--size-64)}}@container (min-width: 1280px){.grid__item--xl-0{display:none}.grid__item--xl-1{display:block;grid-column:span 1}.grid__item--xl-2{display:block;grid-column:span 2}.grid__item--xl-3{display:block;grid-column:span 3}.grid__item--xl-4{display:block;grid-column:span 4}.grid__item--xl-5{display:block;grid-column:span 5}.grid__item--xl-6{display:block;grid-column:span 6}.grid__item--xl-7{display:block;grid-column:span 7}.grid__item--xl-8{display:block;grid-column:span 8}.grid__item--xl-9{display:block;grid-column:span 9}.grid__item--xl-10{display:block;grid-column:span 10}.grid__item--xl-11{display:block;grid-column:span 11}.grid__item--xl-12{display:block;grid-column:span 12}.grid__item--xl-13{display:block;grid-column:span 13}.grid__item--xl-14{display:block;grid-column:span 14}.grid__item--xl-15{display:block;grid-column:span 15}.grid__item--xl-16{display:block;grid-column:span 16}.grid__item--xl-17{display:block;grid-column:span 17}.grid__item--xl-18{display:block;grid-column:span 18}.grid__item--xl-19{display:block;grid-column:span 19}.grid__item--xl-20{display:block;grid-column:span 20}.grid__item--xl-21{display:block;grid-column:span 21}.grid__item--xl-22{display:block;grid-column:span 22}.grid__item--xl-23{display:block;grid-column:span 23}.grid__item--xl-24{display:block;grid-column:span 24}.grid--gap-xl-0{gap:var(--size-0)}.grid--gap-x-xl-0{column-gap:var(--size-0)}.grid--gap-y-xl-0{row-gap:var(--size-0)}.grid--gap-xl-1{gap:var(--size-1)}.grid--gap-x-xl-1{column-gap:var(--size-1)}.grid--gap-y-xl-1{row-gap:var(--size-1)}.grid--gap-xl-2{gap:var(--size-2)}.grid--gap-x-xl-2{column-gap:var(--size-2)}.grid--gap-y-xl-2{row-gap:var(--size-2)}.grid--gap-xl-3{gap:var(--size-3)}.grid--gap-x-xl-3{column-gap:var(--size-3)}.grid--gap-y-xl-3{row-gap:var(--size-3)}.grid--gap-xl-4{gap:var(--size-4)}.grid--gap-x-xl-4{column-gap:var(--size-4)}.grid--gap-y-xl-4{row-gap:var(--size-4)}.grid--gap-xl-5{gap:var(--size-5)}.grid--gap-x-xl-5{column-gap:var(--size-5)}.grid--gap-y-xl-5{row-gap:var(--size-5)}.grid--gap-xl-6{gap:var(--size-6)}.grid--gap-x-xl-6{column-gap:var(--size-6)}.grid--gap-y-xl-6{row-gap:var(--size-6)}.grid--gap-xl-8{gap:var(--size-8)}.grid--gap-x-xl-8{column-gap:var(--size-8)}.grid--gap-y-xl-8{row-gap:var(--size-8)}.grid--gap-xl-10{gap:var(--size-10)}.grid--gap-x-xl-10{column-gap:var(--size-10)}.grid--gap-y-xl-10{row-gap:var(--size-10)}.grid--gap-xl-12{gap:var(--size-12)}.grid--gap-x-xl-12{column-gap:var(--size-12)}.grid--gap-y-xl-12{row-gap:var(--size-12)}.grid--gap-xl-16{gap:var(--size-16)}.grid--gap-x-xl-16{column-gap:var(--size-16)}.grid--gap-y-xl-16{row-gap:var(--size-16)}.grid--gap-xl-20{gap:var(--size-20)}.grid--gap-x-xl-20{column-gap:var(--size-20)}.grid--gap-y-xl-20{row-gap:var(--size-20)}.grid--gap-xl-24{gap:var(--size-24)}.grid--gap-x-xl-24{column-gap:var(--size-24)}.grid--gap-y-xl-24{row-gap:var(--size-24)}.grid--gap-xl-32{gap:var(--size-32)}.grid--gap-x-xl-32{column-gap:var(--size-32)}.grid--gap-y-xl-32{row-gap:var(--size-32)}.grid--gap-xl-40{gap:var(--size-40)}.grid--gap-x-xl-40{column-gap:var(--size-40)}.grid--gap-y-xl-40{row-gap:var(--size-40)}.grid--gap-xl-48{gap:var(--size-48)}.grid--gap-x-xl-48{column-gap:var(--size-48)}.grid--gap-y-xl-48{row-gap:var(--size-48)}.grid--gap-xl-64{gap:var(--size-64)}.grid--gap-x-xl-64{column-gap:var(--size-64)}.grid--gap-y-xl-64{row-gap:var(--size-64)}}}

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 '../../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 '../../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";
@@ -31,6 +31,7 @@ import "../../Auth/react/index.js";
 import { Link as N } from "react-router-dom";
 /* empty css                               */
 /* empty css                            */
+/* empty css                          */
 import { initNav as g } from "../js/nav.js";
 const h = ({
   children: s,

package/dist/index.d.ts

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

package/dist/index.js

@@ -6,15 +6,15 @@ 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 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 { 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 { 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";
 import { Accordion as j } from "./components/Accordion/react/index.js";
 import { Tabs as y } from "./components/Tab/react/index.js";
@@ -25,11 +25,12 @@ 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";
+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";
 export {
   j as Accordion,
-  xo as AccordionContext,
+  no as AccordionContext,
   K as Alert,
   O as AlertBase,
   Q as AlertHeading,
@@ -39,26 +40,29 @@ export {
   A as Badge,
   m as Button,
   t as Color,
-  v as ContextMenu,
+  h as ContextMenu,
   W as Dashboard,
   g as Divider,
-  w as Dropdown,
+  T as Dropdown,
   eo as Errorpage,
-  L as Form,
+  B as Form,
+  xo as Grid,
+  fo as GridItem,
+  ao as GridSpacer,
   n as Group,
   f as Icon,
   _ as LangSelector,
   po as Loader,
-  M as Logo,
-  k as Modal,
+  z as Logo,
+  M as Modal,
   Y as Nav,
-  F as Placeholder,
-  D as Radius,
-  b as Shadow,
+  k as Placeholder,
+  C as Radius,
+  L as Shadow,
   a as SizeProvider,
   N as Table,
   y as Tabs,
-  H as Tooltip,
-  ao as useAccordionButton,
+  F as Tooltip,
+  co as useAccordionButton,
   d as useSize
 };

package/dist/templates/Grids/Grids.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Template de démonstration pour le composant Grid.
+ *
+ * @returns {JSX.Element} Le rendu du template.
+ */
+export declare const Grids: () => import("react/jsx-runtime").JSX.Element;

package/dist/templates/Grids/Grids.tsx

@@ -0,0 +1,184 @@
+import { ReactNode } from 'react';
+import { Grid, GridItem, GridSpacer } from '../../index';
+
+/**
+ * Sous-composant pour l'affichage des cellules de démonstration.
+ */
+const DemoItem = ({ children, label, color = 'var(--primary-light)' }: { children: ReactNode, label?: ReactNode, color?: string }) => (
+	<div style={{
+		backgroundColor: color,
+		padding: '1rem',
+		boxSizing: 'border-box',
+		width: '100%',
+		minHeight: '4rem',
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center'
+	}}>
+		{children}
+		{label && <small className="text-muted" style={{ marginTop: '0.25rem' }}>{label}</small>}
+	</div>
+);
+
+/**
+ * Template de démonstration pour le composant Grid.
+ *
+ * @returns {JSX.Element} Le rendu du template.
+ */
+export const Grids = () => {
+	return (
+		<div className="Grids-demo">
+			<section className="mb-5">
+				<header className="mb-4">
+					<h3>Grids</h3>
+					<p className="text-muted">
+						Le composant <code>Grid</code> utilise <code>display: grid</code> avec 24 colonnes par défaut.
+						Utilisez <code>GridItem</code> pour gérer les colonnes occupées et la réactivité basée sur les <b>Container Queries</b>.
+					</p>
+				</header>
+
+				<article className="mb-5">
+					<h5 className="mb-3">Exemple 1 : Spans Responsives</h5>
+					<p className="text-muted small mb-4">
+						Redimensionnez la fenêtre pour voir le comportement :<br/>
+						- Item 1 : 24 cols {"->"} 12 cols (sm) {"->"} 8 cols (md) {"->"} 6 cols (lg)<br/>
+						- Item 2 : 24 cols {"->"} 12 cols (sm) {"->"} 16 cols (md) {"->"} 18 cols (lg)
+					</p>
+
+					<Grid className="mb-4">
+						<GridItem sm={12} md={8} lg={6}>
+							<DemoItem label="sm={12} md={8} lg={6}">Item 1</DemoItem>
+						</GridItem>
+						<GridItem sm={12} md={16} lg={18}>
+							<DemoItem label="sm={12} md={16} lg={18}">Item 2</DemoItem>
+						</GridItem>
+					</Grid>
+				</article>
+
+				<article className="mb-5">
+					<h5 className="mb-3">Exemple 2 : Tailles Fixes & Colonnes Égales</h5>
+					<Grid className="mb-4">
+						<GridItem span={12}>
+							<DemoItem>12 / 24</DemoItem>
+						</GridItem>
+						<GridItem span={12}>
+							<DemoItem>12 / 24</DemoItem>
+						</GridItem>
+					</Grid>
+
+					<Grid gap={4}>
+						{[1, 2, 3, 4].map(i => (
+							<GridItem key={i} span={6}>
+								<DemoItem>6 / 24</DemoItem>
+							</GridItem>
+						))}
+					</Grid>
+				</article>
+
+				<article className="mb-5">
+					<h5 className="mb-3">🔥 Démo : Container Queries</h5>
+					<p className="text-muted small mb-4">
+						Chaque grille ci-dessous utilise le <b>même code</b> mais s'adapte à la largeur de son <b>propre conteneur parent</b>.
+					</p>
+
+					<div className="d-flex flex-column gap-5">
+						<div>
+							<h6 className="small font-weight-bold">1. Conteneur plein (100%)</h6>
+							<Grid style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+								{[1, 2, 3, 4].map(i => (
+									<GridItem key={i} md={12} lg={6}>
+										<DemoItem>Item {i}</DemoItem>
+									</GridItem>
+								))}
+							</Grid>
+						</div>
+
+						<div style={{ maxWidth: '600px' }}>
+							<h6 className="small font-weight-bold">2. Conteneur restreint (600px)</h6>
+							<Grid style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+								{[1, 2, 3, 4].map(i => (
+									<GridItem key={i} md={12} lg={6}>
+										<DemoItem>Item {i}</DemoItem>
+									</GridItem>
+								))}
+							</Grid>
+						</div>
+
+						<div style={{ maxWidth: '300px' }}>
+							<h6 className="small font-weight-bold">3. Conteneur très étroit (300px)</h6>
+							<Grid gap={2} style={{ border: '1px dashed #ccc', padding: '1rem' }}>
+								{[1, 2, 3, 4].map(i => (
+									<GridItem key={i} md={12} lg={6}>
+										<DemoItem>Item {i}</DemoItem>
+									</GridItem>
+								))}
+							</Grid>
+						</div>
+					</div>
+				</article>
+
+				<article className="mb-5">
+					<h5 className="mb-3">⛓️ Démo : Gaps Responsives</h5>
+					<p className="text-muted small mb-4">
+						Les espacements (gaps) s'adaptent aussi au conteneur (Défaut: 1, sm: 4, md: 8, lg: 12).
+					</p>
+					<Grid gap={1} smGap={4} mdGap={8} lgGap={12} style={{ border: '1px solid #eee', padding: '1rem' }}>
+						{[1, 2, 3, 4, 5, 6].map(i => (
+							<GridItem key={i} span={8} md={4}>
+								<DemoItem color="var(--secondary-light)">Gap Test</DemoItem>
+							</GridItem>
+						))}
+					</Grid>
+				</article>
+
+				<article className="mb-5">
+					<h5 className="mb-3">↔️ Démo : Gaps X et Y séparés</h5>
+					<Grid gapY={2} mdGapX={2}>
+						{[1, 2, 3, 4, 5, 6].map(i => (
+							<GridItem key={i} md={12} lg={6}>
+								<DemoItem color="var(--success-light)">X: 12 / Y: 2</DemoItem>
+							</GridItem>
+						))}
+					</Grid>
+				</article>
+
+				<article className="mb-5">
+					<h5 className="mb-3">🌌 Démo : Spacer & Masquage (span=0)</h5>
+					<p className="text-muted small mb-4">
+						Le composant <code>GridSpacer</code> permet de créer des espaces vides.
+						Utilisez <code>span={'{0}'}</code> pour masquer un élément sur certains breakpoints.
+					</p>
+
+					<h6>Spacer réactif</h6>
+					<Grid className="mb-4">
+						<GridItem md={6}>
+							<DemoItem color="var(--accent-light)">Bloc Gauche</DemoItem>
+						</GridItem>
+						{/* Espace de 12 colonnes, caché sur sm (0) */}
+						<GridSpacer md={12} sm={0} />
+						<GridItem md={6}>
+							<DemoItem color="var(--accent-light)">Bloc Droite</DemoItem>
+						</GridItem>
+					</Grid>
+
+					<h6>Masquage sélectif</h6>
+					<Grid>
+						<GridItem span={12} md={24}>
+							<DemoItem>Visible partout</DemoItem>
+						</GridItem>
+						<GridItem span={0} md={12}>
+							<DemoItem color="var(--warning-light)">Caché sur mobile, visible sur MD</DemoItem>
+						</GridItem>
+						<GridItem span={12} md={0}>
+							<DemoItem color="var(--danger-light)">Visible sur mobile, caché sur MD</DemoItem>
+						</GridItem>
+					</Grid>
+				</article>
+			</section>
+		</div>
+	);
+};
+
+
+
+

package/dist/templates/index.d.ts

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

package/dist/templates/index.ts

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

package/package.json

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