@dododog/ui 0.14.1 → 0.16.0

package/dist/chunk-5KOWMIWK.mjs

@@ -0,0 +1,110 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SIDE_CLASSES = {
+  right: "top-0 bottom-0 right-0 w-full max-w-md",
+  left: "top-0 bottom-0 left-0 w-full max-w-md",
+  bottom: "inset-x-0 bottom-0 w-full max-h-[90dvh] rounded-t-3xl"
+};
+var Drawer = React.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    side = "right",
+    title,
+    labelledById,
+    className,
+    overlayClassName,
+    contentClassName,
+    closeLabel = "Fermer"
+  }, ref) => {
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = prev;
+      };
+    }, [isOpen]);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("fixed inset-0 z-50", overlayClassName),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelledById,
+        "aria-label": labelledById ? void 0 : title,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50 transition-opacity",
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute bg-white shadow-xl flex flex-col overflow-hidden",
+                SIDE_CLASSES[side],
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 px-4 h-16 shrink-0",
+                      title ? "justify-between border-b border-gray-100" : "justify-end"
+                    ),
+                    children: [
+                      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-heading font-semibold text-primary truncate", children: title }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          className: "p-2 hover:bg-gray-100 rounded-full transition-colors shrink-0",
+                          "aria-label": closeLabel,
+                          children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                          ] })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-drawer-content": "",
+                    className: cn("flex-1 overflow-y-auto overscroll-contain", contentClassName),
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+
+export { Drawer };

package/dist/{chunk-MCF3EQTV.js → chunk-73BHQJW6.js}

@@ -73,11 +73,15 @@ Accordion.displayName = "Accordion";
 function AccordionItem({ title, isOpen, onToggle, children }) {
   const contentRef = React__namespace.useRef(null);
   const [height, setHeight] = React__namespace.useState(0);
+  const baseId = React__namespace.useId();
+  const headerId = `${baseId}-header`;
+  const panelId = `${baseId}-panel`;
   React__namespace.useEffect(() => {
     if (contentRef.current) {
       setHeight(isOpen ? contentRef.current.scrollHeight : 0);
     }
   }, [isOpen]);
+  const inertProps = isOpen ? {} : { inert: "" };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -89,8 +93,10 @@ function AccordionItem({ title, isOpen, onToggle, children }) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
+            id: headerId,
             onClick: onToggle,
             "aria-expanded": isOpen,
+            "aria-controls": panelId,
             className: "w-full flex items-center justify-between py-5 px-5 text-left group",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -106,6 +112,7 @@ function AccordionItem({ title, isOpen, onToggle, children }) {
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
+                  "aria-hidden": "true",
                   className: chunkADIDI7AJ_js.cn(
                     "w-7 h-7 rounded-full flex items-center justify-center shrink-0 transition-all duration-300",
                     isOpen ? "bg-secondary text-white" : "bg-gray-100 text-gray-600 group-hover:bg-secondary/10 group-hover:text-secondary"
@@ -122,7 +129,12 @@ function AccordionItem({ title, isOpen, onToggle, children }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            style: { height },
+            id: panelId,
+            role: "region",
+            "aria-labelledby": headerId,
+            "aria-hidden": isOpen ? void 0 : true,
+            ...inertProps,
+            style: { height, visibility: isOpen ? void 0 : "hidden" },
             className: "overflow-hidden transition-all duration-500 ease-out",
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: "pb-5 px-5 pr-12", children })
           }

package/dist/{chunk-U3XWNFHH.js → chunk-A3M3XQ35.js}

@@ -24,10 +24,30 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var Lightbox = React__namespace.forwardRef(
-  ({ images, initialIndex = 0, open, onClose, className }, ref) => {
+  ({
+    images,
+    initialIndex = 0,
+    open,
+    onClose,
+    className,
+    "aria-label": ariaLabel = "Visionneuse d'images"
+  }, ref) => {
     const [current, setCurrent] = React__namespace.useState(initialIndex);
     const touchStartX = React__namespace.useRef(0);
+    const containerRef = React__namespace.useRef(null);
+    const setRefs = React__namespace.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     React__namespace.useEffect(() => {
       if (open) setCurrent(initialIndex);
     }, [open, initialIndex]);
@@ -37,6 +57,28 @@ var Lightbox = React__namespace.forwardRef(
         if (e.key === "Escape") onClose();
         if (e.key === "ArrowLeft") setCurrent((c) => (c - 1 + images.length) % images.length);
         if (e.key === "ArrowRight") setCurrent((c) => (c + 1) % images.length);
+        if (e.key === "Tab") {
+          const node = containerRef.current;
+          if (!node) return;
+          const items = Array.from(
+            node.querySelectorAll(FOCUSABLE_SELECTOR)
+          );
+          if (items.length === 0) {
+            e.preventDefault();
+            return;
+          }
+          const first = items[0];
+          const last = items[items.length - 1];
+          const active = document.activeElement;
+          const inside = active instanceof Node && node.contains(active);
+          if (e.shiftKey && (!inside || active === first)) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && (!inside || active === last)) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
       }
       document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
@@ -45,13 +87,24 @@ var Lightbox = React__namespace.forwardRef(
         document.body.style.overflow = "";
       };
     }, [open, images.length, onClose]);
+    React__namespace.useEffect(() => {
+      if (!open) return;
+      const previouslyFocused = document.activeElement;
+      const node = containerRef.current;
+      const target = node?.querySelector(FOCUSABLE_SELECTOR) ?? node ?? null;
+      target?.focus?.();
+      return () => {
+        previouslyFocused?.focus?.();
+      };
+    }, [open]);
     if (!open || images.length === 0) return null;
     const prev = () => setCurrent((c) => (c - 1 + images.length) % images.length);
     const next = () => setCurrent((c) => (c + 1) % images.length);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        ref,
+        ref: setRefs,
+        tabIndex: -1,
         className: chunkADIDI7AJ_js.cn(
           "fixed inset-0 z-50 flex items-center justify-center bg-black/90",
           className
@@ -59,14 +112,14 @@ var Lightbox = React__namespace.forwardRef(
         onClick: onClose,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": "Image viewer",
+        "aria-label": ariaLabel,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: onClose,
               className: "absolute top-4 right-4 z-10 w-10 h-10 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-              "aria-label": "Close",
+              "aria-label": "Fermer la visionneuse",
               children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
                 /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
@@ -74,9 +127,12 @@ var Lightbox = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 left-4 z-10 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm text-white text-sm", children: [
-            current + 1,
-            " / ",
-            images.length
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", children: [
+              current + 1,
+              " / ",
+              images.length
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: `Image ${current + 1} sur ${images.length}` })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -112,7 +168,7 @@ var Lightbox = React__namespace.forwardRef(
                   prev();
                 },
                 className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-                "aria-label": "Previous image",
+                "aria-label": "Image pr\xE9c\xE9dente",
                 children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" }) })
               }
             ),
@@ -124,33 +180,44 @@ var Lightbox = React__namespace.forwardRef(
                   next();
                 },
                 className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center text-white hover:bg-white/20 transition-colors",
-                "aria-label": "Next image",
+                "aria-label": "Image suivante",
                 children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) })
               }
             )
           ] }),
-          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 max-w-[80vw] overflow-x-auto px-4 py-2", children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          images.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                setCurrent(i);
-              },
-              className: chunkADIDI7AJ_js.cn(
-                "w-16 h-12 rounded-lg overflow-hidden flex-shrink-0 border-2 transition-all",
-                i === current ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-75"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
+              role: "group",
+              "aria-label": "Vignettes des images",
+              className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 max-w-[80vw] overflow-x-auto px-4 py-2",
+              children: images.map((img, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
                 {
-                  src: img.src,
-                  alt: img.alt,
-                  className: "w-full h-full object-cover"
-                }
-              )
-            },
-            i
-          )) })
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setCurrent(i);
+                  },
+                  "aria-label": `Afficher l'image ${i + 1} : ${img.alt}`,
+                  "aria-current": i === current ? "true" : void 0,
+                  className: chunkADIDI7AJ_js.cn(
+                    "w-16 h-12 rounded-lg overflow-hidden flex-shrink-0 border-2 transition-all",
+                    i === current ? "border-white opacity-100" : "border-transparent opacity-50 hover:opacity-75"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: img.src,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "w-full h-full object-cover"
+                    }
+                  )
+                },
+                i
+              ))
+            }
+          )
         ]
       }
     );