@dododog/ui 0.14.0 → 0.15.0

package/README.md

@@ -1,6 +1,6 @@
 # @dododog/ui
 
-React UI component library for [DodoDog](https://dododog.voyage) — the pet-friendly travel platform.
+React UI component library for [ToutouTrip](https://toutoutrip.com) — the pet-friendly travel platform.
 
 Built with React, TypeScript, Tailwind CSS, and [class-variance-authority](https://cva.style).
 
@@ -14,7 +14,7 @@ npm install @dododog/ui
 
 ### Tailwind CSS
 
-Add the DodoDog preset and content path to your `tailwind.config.ts`:
+Add the ToutouTrip preset and content path to your `tailwind.config.ts`:
 
 ```ts
 import type { Config } from "tailwindcss";
@@ -113,7 +113,7 @@ export default function App() {
 | Export | Import path | Description |
 |--------|-------------|-------------|
 | Tokens | `@dododog/ui/tokens` | Design tokens (colors, spacing, etc.) |
-| Tailwind Preset | `@dododog/ui/tailwind-preset` | Tailwind CSS preset with DodoDog theme |
+| Tailwind Preset | `@dododog/ui/tailwind-preset` | Tailwind CSS preset with ToutouTrip theme |
 | Utils | `@dododog/ui/utils` | Utility functions (`cn`, etc.) |
 
 ## Requirements

package/dist/{chunk-SZ3SV4SJ.mjs → chunk-4DHZ6MIL.mjs}

@@ -106,7 +106,7 @@ var Footer = React.forwardRef(
           bottomExtra
         ] }),
         tagline && /* @__PURE__ */ jsx("div", { className: "text-sm text-white/60", children: tagline }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: copyright || `\xA9 ${year} DodoDog. Tous droits r\xE9serv\xE9s.` })
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: copyright || `\xA9 ${year} ToutouTrip. Tous droits r\xE9serv\xE9s.` })
       ] }) }) })
     ] });
   }

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-77WKG2D7.js → chunk-5UNG2O64.js}

@@ -46,31 +46,61 @@ var inputVariants = classVarianceAuthority.cva(
   }
 );
 var Input = React__namespace.forwardRef(
-  ({ className, size, variant, label, error, required, leftIcon, rightIcon, ...props }, ref) => {
+  ({
+    className,
+    size,
+    variant,
+    label,
+    error,
+    required,
+    leftIcon,
+    rightIcon,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const inputId = id ?? generatedId;
+    const errorId = `${inputId}-error`;
     const resolvedVariant = error ? "error" : variant ?? "default";
+    const describedBy = [ariaDescribedBy, error ? errorId : null].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-primary mb-1.5", children: [
-        label,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-secondary", children: " *" })
-      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block text-sm font-medium text-primary mb-1.5",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-secondary", "aria-hidden": "true", children: " *" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-muted", children: leftIcon }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
+            ...props,
             ref,
+            id: inputId,
+            required,
+            "aria-required": ariaRequired ?? (required ? true : void 0),
+            "aria-invalid": ariaInvalid ?? (error ? true : void 0),
+            "aria-describedby": describedBy,
             className: chunkADIDI7AJ_js.cn(
               inputVariants({ size, variant: resolvedVariant }),
               leftIcon && "pl-10",
               rightIcon && "pr-10",
               className
-            ),
-            ...props
+            )
           }
         ),
         rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-text-muted", children: rightIcon })
       ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "mt-1 text-sm text-red-500", children: error })
     ] });
   }
 );

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
+              ))
+            }
+          )
         ]
       }
     );