@dododog/ui 0.14.0 → 0.15.0

package/dist/{chunk-NBDPT3XQ.js → chunk-HH4X2JYO.js}

@@ -24,13 +24,89 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+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__namespace.forwardRef(
-  ({ isOpen, onClose, children, title, className }, ref) => {
-    const contentRef = React__namespace.useRef(null);
+  ({
+    isOpen,
+    onClose,
+    children,
+    title,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  }, ref) => {
+    const panelRef = React__namespace.useRef(null);
+    const generatedTitleId = React__namespace.useId();
+    const titleId = title ? `${generatedTitleId}-title` : void 0;
+    const labelledBy = ariaLabelledBy ?? titleId;
     React__namespace.useEffect(() => {
       if (!isOpen) return;
-      const handleKeyDown = (e) => {
-        if (e.key === "Escape") onClose();
+      const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      return () => {
+        if (trigger && trigger.isConnected) trigger.focus();
+      };
+    }, [isOpen]);
+    React__namespace.useEffect(() => {
+      if (!isOpen) return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = getFocusableElements(panel);
+      (focusable[0] ?? panel).focus();
+    }, [isOpen]);
+    React__namespace.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);
@@ -43,13 +119,6 @@ var Modal = React__namespace.forwardRef(
         document.body.style.overflow = prev;
       };
     }, [isOpen]);
-    React__namespace.useEffect(() => {
-      if (!isOpen || !contentRef.current) return;
-      const focusable = contentRef.current.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (focusable.length > 0) focusable[0].focus();
-    }, [isOpen]);
     if (!isOpen) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -58,7 +127,9 @@ var Modal = React__namespace.forwardRef(
         className: "fixed inset-0 z-50 flex items-center justify-center p-4",
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": title,
+        "aria-labelledby": labelledBy,
+        "aria-label": labelledBy ? void 0 : ariaLabel,
+        "aria-describedby": ariaDescribedBy,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -71,14 +142,22 @@ var Modal = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              ref: contentRef,
+              ref: panelRef,
+              tabIndex: -1,
               className: chunkADIDI7AJ_js.cn(
-                "relative bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto",
+                "relative bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto outline-none",
                 className
               ),
               children: [
                 title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 pt-6 pb-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-heading font-semibold text-primary", children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      id: titleId,
+                      className: "text-lg font-heading font-semibold text-primary",
+                      children: title
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {

package/dist/{chunk-I4S3R6C6.js → chunk-JUB3NGJR.js}

@@ -54,17 +54,47 @@ var switchThumbVariants = classVarianceAuthority.cva(
   }
 );
 var Switch = React__namespace.forwardRef(
-  ({ checked = false, onCheckedChange, disabled = false, size, label, description, className, name }, ref) => {
-    const id = React__namespace.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__namespace.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__namespace.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__ */ jsxRuntime.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: chunkADIDI7AJ_js.cn(
@@ -91,8 +121,23 @@ var Switch = React__namespace.forwardRef(
     if (!label && !description) return track;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkADIDI7AJ_js.cn("flex items-center justify-between gap-3", className), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "text-sm font-medium text-primary cursor-pointer", children: label }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-text-secondary mt-0.5", children: description })
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            id: labelId,
+            htmlFor: switchId,
+            className: "text-sm font-medium text-primary cursor-pointer",
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: descriptionId,
+            className: "text-xs text-text-secondary mt-0.5",
+            children: description
+          }
+        )
       ] }),
       track
     ] });

package/dist/{chunk-GRG4USTC.mjs → chunk-JWOV5H6G.mjs}

@@ -24,31 +24,61 @@ var inputVariants = cva(
   }
 );
 var Input = React.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.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__ */ jsxs("div", { className: "w-full", children: [
-      label && /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-primary mb-1.5", children: [
-        label,
-        required && /* @__PURE__ */ jsx("span", { className: "text-secondary", children: " *" })
-      ] }),
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block text-sm font-medium text-primary mb-1.5",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-secondary", "aria-hidden": "true", children: " *" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-muted", children: leftIcon }),
         /* @__PURE__ */ 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: cn(
               inputVariants({ size, variant: resolvedVariant }),
               leftIcon && "pl-10",
               rightIcon && "pr-10",
               className
-            ),
-            ...props
+            )
           }
         ),
         rightIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-text-muted", children: rightIcon })
       ] }),
-      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-sm text-red-500", children: error })
     ] });
   }
 );

package/dist/chunk-JWQ2OUEG.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+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__namespace.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    side = "right",
+    title,
+    labelledById,
+    className,
+    overlayClassName,
+    contentClassName,
+    closeLabel = "Fermer"
+  }, ref) => {
+    React__namespace.useEffect(() => {
+      if (!isOpen) return;
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") onClose();
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, onClose]);
+    React__namespace.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: chunkADIDI7AJ_js.cn("fixed inset-0 z-50", overlayClassName),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": labelledById,
+        "aria-label": labelledById ? void 0 : title,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50 transition-opacity",
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkADIDI7AJ_js.cn(
+                "absolute bg-white shadow-xl flex flex-col overflow-hidden",
+                SIDE_CLASSES[side],
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: chunkADIDI7AJ_js.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__ */ jsxRuntime.jsx("h2", { className: "text-lg font-heading font-semibold text-primary truncate", children: title }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onClose,
+                          className: "p-2 hover:bg-gray-100 rounded-full transition-colors shrink-0",
+                          "aria-label": closeLabel,
+                          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" })
+                          ] })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    "data-drawer-content": "",
+                    className: chunkADIDI7AJ_js.cn("flex-1 overflow-y-auto overscroll-contain", contentClassName),
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+
+exports.Drawer = Drawer;

package/dist/{chunk-3R7PT3JG.js → chunk-LJSMPON7.js}

@@ -57,14 +57,27 @@ var Select = React__namespace.forwardRef(
     placeholder,
     value,
     onChange,
-    disabled = false
+    disabled = false,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
   }, ref) => {
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React__namespace.useState(-1);
     const containerRef = React__namespace.useRef(null);
     const listboxRef = React__namespace.useRef(null);
+    const generatedId = React__namespace.useId();
+    const selectId = id ?? generatedId;
+    const labelId = `${selectId}-label`;
+    const listboxId = `${selectId}-listbox`;
+    const errorId = `${selectId}-error`;
+    const optionId = (index) => `${selectId}-option-${index}`;
     const resolvedVariant = error ? "error" : variant ?? "default";
     const selectedOption = options.find((o) => o.value === value);
+    const labelledBy = [label ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+    const describedBy = [ariaDescribedBy, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+    const hasHighlight = isOpen && highlightedIndex >= 0 && highlightedIndex < options.length;
     React__namespace.useEffect(() => {
       const handleClickOutside = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -133,18 +146,34 @@ var Select = React__namespace.forwardRef(
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", ref, 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",
+        {
+          id: labelId,
+          htmlFor: selectId,
+          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", { ref: containerRef, className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
+            id: selectId,
             role: "combobox",
             "aria-expanded": isOpen,
             "aria-haspopup": "listbox",
+            "aria-controls": isOpen ? listboxId : void 0,
+            "aria-activedescendant": hasHighlight ? optionId(highlightedIndex) : void 0,
+            "aria-labelledby": labelledBy,
+            "aria-label": labelledBy ? void 0 : ariaLabel,
+            "aria-required": required ? true : void 0,
+            "aria-invalid": error ? true : void 0,
+            "aria-describedby": describedBy,
             disabled,
             onClick: handleToggle,
             onKeyDown: handleKeyDown,
@@ -170,6 +199,7 @@ var Select = React__namespace.forwardRef(
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
+            "aria-hidden": "true",
             className: chunkADIDI7AJ_js.cn(
               "absolute right-3 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none transition-transform",
               isOpen && "rotate-180"
@@ -181,12 +211,16 @@ var Select = React__namespace.forwardRef(
           "ul",
           {
             ref: listboxRef,
+            id: listboxId,
             role: "listbox",
+            "aria-labelledby": labelledBy,
+            "aria-label": labelledBy ? void 0 : ariaLabel,
             className: "absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-auto py-1",
             children: [
               options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 "li",
                 {
+                  id: optionId(index),
                   role: "option",
                   "aria-selected": option.value === value,
                   onClick: () => handleSelect(option.value),
@@ -205,7 +239,7 @@ var Select = React__namespace.forwardRef(
           }
         )
       ] }),
-      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 })
     ] });
   }
 );