@dododog/ui 0.14.1 → 0.15.0

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

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 };