@dododog/ui 0.14.0 → 0.15.0

package/dist/chunk-N5ZNXNCO.mjs

@@ -0,0 +1,178 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[contenteditable]:not([contenteditable='false'])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function getFocusableElements(panel) {
+  return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+    (element) => !element.closest("[hidden], [aria-hidden='true'], details:not([open])")
+  );
+}
+function isTopMostDialog(panel) {
+  const dialogs = document.querySelectorAll('[role="dialog"][aria-modal="true"]');
+  const topMost = dialogs[dialogs.length - 1];
+  return !topMost || topMost.contains(panel);
+}
+var Modal = React.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    title,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, ref) => {
+    const panelRef = React.useRef(null);
+    const generatedTitleId = React.useId();
+    const titleId = title ? `${generatedTitleId}-title` : void 0;
+    const labelledBy = ariaLabelledBy ?? titleId;
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      return () => {
+        if (trigger && trigger.isConnected) trigger.focus();
+      };
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = getFocusableElements(panel);
+      (focusable[0] ?? panel).focus();
+    }, [isOpen]);
+    React.useEffect(() => {
+      if (!isOpen) return;
+      const handleKeyDown = (event) => {
+        const panel = panelRef.current;
+        if (!panel || !isTopMostDialog(panel)) return;
+        if (event.key === "Escape") {
+          onClose();
+          return;
+        }
+        if (event.key !== "Tab") return;
+        const focusable = getFocusableElements(panel);
+        const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        if (focusable.length === 0) {
+          event.preventDefault();
+          panel.focus();
+          return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (!active || !panel.contains(active)) {
+          event.preventDefault();
+          (event.shiftKey ? last : first).focus();
+          return;
+        }
+        if (event.shiftKey && active === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && active === last) {
+          event.preventDefault();
+          first.focus();
+        }
+      };
+      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: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelledBy,
+        "aria-label": labelledBy ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: panelRef,
+              tabIndex: -1,
+              className: cn(
+                "relative bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto outline-none",
+                className
+              ),
+              children: [
+                title && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 pt-6 pb-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      id: titleId,
+                      className: "text-lg font-heading font-semibold text-primary",
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      className: "text-text-muted hover:text-primary transition-colors",
+                      "aria-label": "Fermer",
+                      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",
+                          children: [
+                            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: cn(title ? "px-6 pb-6" : "p-6"), children })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
+export { Modal };

package/dist/{chunk-DMCMWOBJ.mjs → chunk-PBXH4I5N.mjs}

@@ -32,17 +32,47 @@ var switchThumbVariants = cva(
   }
 );
 var Switch = React.forwardRef(
-  ({ checked = false, onCheckedChange, disabled = false, size, label, description, className, name }, ref) => {
-    const id = React.useId();
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled = false,
+    size,
+    label,
+    description,
+    className,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, ref) => {
+    const generatedId = React.useId();
+    const switchId = id ?? generatedId;
+    const labelId = `${switchId}-label`;
+    const descriptionId = `${switchId}-description`;
+    const labelledBy = [label ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+    const resolvedAriaLabel = labelledBy ? void 0 : ariaLabel ?? name;
+    const describedBy = [description ? descriptionId : null, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+    const hasAccessibleName = Boolean(labelledBy || resolvedAriaLabel);
+    React.useEffect(() => {
+      if (hasAccessibleName) return;
+      if (typeof process === "undefined") return;
+      if (process.env.NODE_ENV === "production") return;
+      console.warn(
+        "[@dododog/ui] Switch sans nom accessible : passer `label`, `aria-labelledby` ou `aria-label`."
+      );
+    }, [hasAccessibleName]);
     const track = /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
-        id,
+        id: switchId,
         type: "button",
         role: "switch",
         "aria-checked": checked,
-        "aria-label": !label ? name : void 0,
+        "aria-labelledby": labelledBy,
+        "aria-label": resolvedAriaLabel,
+        "aria-describedby": describedBy,
         disabled,
         onClick: () => onCheckedChange?.(!checked),
         className: cn(
@@ -69,8 +99,23 @@ var Switch = React.forwardRef(
     if (!label && !description) return track;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3", className), children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-primary cursor-pointer", children: label }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary mt-0.5", children: description })
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            id: labelId,
+            htmlFor: switchId,
+            className: "text-sm font-medium text-primary cursor-pointer",
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: "text-xs text-text-secondary mt-0.5",
+            children: description
+          }
+        )
       ] }),
       track
     ] });

package/dist/{chunk-ERL3WXNY.mjs → chunk-PZZWQ6IG.mjs}

@@ -30,12 +30,12 @@ var DualRangeSlider = React.forwardRef(
     const labelMin = formatLabel ? formatLabel(valueMin, "min") : String(valueMin);
     const labelMax = formatLabel ? formatLabel(valueMax, "max") : String(valueMax);
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative h-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full bg-gray-200" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative h-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-gray-200" }),
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute h-full rounded-full bg-secondary",
+            className: "absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-secondary",
             style: { left: `${leftPercent}%`, right: `${rightPercent}%` }
           }
         ),
@@ -50,7 +50,7 @@ var DualRangeSlider = React.forwardRef(
             onChange: handleMinChange,
             "aria-label": "Minimum",
             className: cn(
-              "absolute w-full h-2 appearance-none bg-transparent pointer-events-none",
+              "absolute inset-0 h-6 w-full appearance-none bg-transparent pointer-events-none",
               // Webkit thumb
               "[&::-webkit-slider-thumb]:pointer-events-auto",
               "[&::-webkit-slider-thumb]:appearance-none",
@@ -82,7 +82,7 @@ var DualRangeSlider = React.forwardRef(
             onChange: handleMaxChange,
             "aria-label": "Maximum",
             className: cn(
-              "absolute w-full h-2 appearance-none bg-transparent pointer-events-none",
+              "absolute inset-0 h-6 w-full appearance-none bg-transparent pointer-events-none",
               "[&::-webkit-slider-thumb]:pointer-events-auto",
               "[&::-webkit-slider-thumb]:appearance-none",
               "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",

package/dist/{chunk-GBWVIY3C.mjs → chunk-UJEIFKSK.mjs}

@@ -2,10 +2,30 @@ import { cn } from './chunk-IMKLN273.mjs';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var Lightbox = React.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.useState(initialIndex);
     const touchStartX = React.useRef(0);
+    const containerRef = React.useRef(null);
+    const setRefs = React.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     React.useEffect(() => {
       if (open) setCurrent(initialIndex);
     }, [open, initialIndex]);
@@ -15,6 +35,28 @@ var Lightbox = React.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";
@@ -23,13 +65,24 @@ var Lightbox = React.forwardRef(
         document.body.style.overflow = "";
       };
     }, [open, images.length, onClose]);
+    React.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__ */ jsxs(
       "div",
       {
-        ref,
+        ref: setRefs,
+        tabIndex: -1,
         className: cn(
           "fixed inset-0 z-50 flex items-center justify-center bg-black/90",
           className
@@ -37,14 +90,14 @@ var Lightbox = React.forwardRef(
         onClick: onClose,
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": "Image viewer",
+        "aria-label": ariaLabel,
         children: [
           /* @__PURE__ */ 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__ */ 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" })
@@ -52,9 +105,12 @@ var Lightbox = React.forwardRef(
             }
           ),
           /* @__PURE__ */ 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__ */ jsxs("span", { "aria-hidden": "true", children: [
+              current + 1,
+              " / ",
+              images.length
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: `Image ${current + 1} sur ${images.length}` })
           ] }),
           /* @__PURE__ */ jsx(
             "div",
@@ -90,7 +146,7 @@ var Lightbox = React.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__ */ 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__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
               }
             ),
@@ -102,33 +158,44 @@ var Lightbox = React.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__ */ 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__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
               }
             )
           ] }),
-          images.length > 1 && /* @__PURE__ */ 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__ */ jsx(
-            "button",
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "div",
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                setCurrent(i);
-              },
-              className: 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__ */ 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__ */ 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: 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__ */ jsx(
+                    "img",
+                    {
+                      src: img.src,
+                      alt: "",
+                      "aria-hidden": "true",
+                      className: "w-full h-full object-cover"
+                    }
+                  )
+                },
+                i
+              ))
+            }
+          )
         ]
       }
     );

package/dist/chunk-WY24TZ4R.mjs

@@ -0,0 +1,94 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Counter = React.forwardRef(
+  ({
+    value,
+    onChange,
+    min = 0,
+    max = 99,
+    label,
+    subtitle,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    decrementLabel,
+    incrementLabel
+  }, ref) => {
+    const generatedId = React.useId();
+    const labelId = `${generatedId}-label`;
+    const canDecrement = value > min;
+    const canIncrement = value < max;
+    const labelledBy = [label ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+    const groupName = label ?? ariaLabel;
+    const resolvedDecrementLabel = decrementLabel ?? (groupName ? `Diminuer ${groupName}` : "Diminuer");
+    const resolvedIncrementLabel = incrementLabel ?? (groupName ? `Augmenter ${groupName}` : "Augmenter");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": labelledBy,
+        "aria-label": labelledBy ? void 0 : ariaLabel,
+        className: cn("flex items-center justify-between", className),
+        children: [
+          (label || subtitle) && /* @__PURE__ */ jsxs("div", { children: [
+            label && /* @__PURE__ */ jsx("span", { id: labelId, className: "text-sm font-medium text-primary", children: label }),
+            subtitle && /* @__PURE__ */ jsx("span", { className: "block text-xs text-text-secondary", children: subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !canDecrement,
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: () => canDecrement && onChange?.(value - 1),
+                className: cn(
+                  "w-8 h-8 rounded-full border flex items-center justify-center transition-colors",
+                  canDecrement ? "border-gray-300 text-primary hover:border-primary hover:bg-primary/5" : "border-gray-200 text-gray-300 cursor-not-allowed"
+                ),
+                "aria-label": resolvedDecrementLabel,
+                children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                className: "w-8 text-center text-sm font-medium text-primary tabular-nums",
+                children: [
+                  groupName && /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${groupName} : ` }),
+                  value
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !canIncrement,
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: () => canIncrement && onChange?.(value + 1),
+                className: cn(
+                  "w-8 h-8 rounded-full border flex items-center justify-center transition-colors",
+                  canIncrement ? "border-gray-300 text-primary hover:border-primary hover:bg-primary/5" : "border-gray-200 text-gray-300 cursor-not-allowed"
+                ),
+                "aria-label": resolvedIncrementLabel,
+                children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+                ] })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Counter.displayName = "Counter";
+
+export { Counter };