@dododog/ui 0.1.0

package/README.md

@@ -0,0 +1,126 @@
+# @dododog/ui
+
+React UI component library for [DodoDog](https://dododog.voyage) — the pet-friendly travel platform.
+
+Built with React, TypeScript, Tailwind CSS, and [class-variance-authority](https://cva.style).
+
+## Installation
+
+```bash
+npm install @dododog/ui
+```
+
+## Setup
+
+### Tailwind CSS
+
+Add the DodoDog preset and content path to your `tailwind.config.ts`:
+
+```ts
+import type { Config } from "tailwindcss";
+import dodododgPreset from "@dododog/ui/tailwind-preset";
+
+const config: Config = {
+  presets: [dodododgPreset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@dododog/ui/dist/**/*.{js,mjs}",
+  ],
+};
+
+export default config;
+```
+
+## Usage
+
+```tsx
+import { Button } from "@dododog/ui";
+// or tree-shakeable deep import:
+import { Button } from "@dododog/ui/button";
+
+export default function App() {
+  return <Button variant="primary">Book now</Button>;
+}
+```
+
+## Components
+
+| Component | Import path | Description |
+|-----------|-------------|-------------|
+| Accordion | `@dododog/ui/accordion` | Expandable content sections |
+| Alert | `@dododog/ui/alert` | Informational alert banners |
+| Autocomplete | `@dododog/ui/autocomplete` | Input with suggestions dropdown |
+| Avatar | `@dododog/ui/avatar` | User avatar with fallback |
+| Badge | `@dododog/ui/badge` | Status and label badges |
+| Banner | `@dododog/ui/banner` | Promotional banners |
+| BottomNavBar | `@dododog/ui/bottom-nav-bar` | Mobile bottom navigation |
+| Breadcrumb | `@dododog/ui/breadcrumb` | Navigation breadcrumbs |
+| Button | `@dododog/ui/button` | Primary action button |
+| Card | `@dododog/ui/card` | Content card container |
+| CardList | `@dododog/ui/card-list` | List of cards layout |
+| Carousel | `@dododog/ui/carousel` | Image/content carousel |
+| Checkbox | `@dododog/ui/checkbox` | Checkbox input |
+| Counter | `@dododog/ui/counter` | Numeric counter with +/- |
+| DateRangePicker | `@dododog/ui/date-range-picker` | Date range selection |
+| DetailList | `@dododog/ui/detail-list` | Key-value detail list |
+| Divider | `@dododog/ui/divider` | Horizontal divider |
+| Drawer | `@dododog/ui/drawer` | Slide-out panel |
+| DropdownMenu | `@dododog/ui/dropdown-menu` | Dropdown menu |
+| DualRangeSlider | `@dododog/ui/dual-range-slider` | Range slider with two handles |
+| EmptyState | `@dododog/ui/empty-state` | Empty state placeholder |
+| ErrorBoundary | `@dododog/ui/error-boundary` | React error boundary |
+| FilterAccordion | `@dododog/ui/filter-accordion` | Collapsible filter groups |
+| FilterPill | `@dododog/ui/filter-pill` | Removable filter pill |
+| Footer | `@dododog/ui/footer` | Site footer |
+| GuestPicker | `@dododog/ui/guest-picker` | Guest count selector |
+| Header | `@dododog/ui/header` | Site header |
+| HotelCard | `@dododog/ui/hotel-card` | Hotel listing card |
+| IconBadge | `@dododog/ui/icon-badge` | Badge with icon |
+| ImageGallery | `@dododog/ui/image-gallery` | Image gallery grid |
+| ImageWithFallback | `@dododog/ui/image-with-fallback` | Image with fallback placeholder |
+| Input | `@dododog/ui/input` | Text input field |
+| Lightbox | `@dododog/ui/lightbox` | Fullscreen image viewer |
+| LinkCard | `@dododog/ui/link-card` | Clickable card with link |
+| LoadingOverlay | `@dododog/ui/loading-overlay` | Fullscreen loading overlay |
+| MegaMenu | `@dododog/ui/mega-menu` | Desktop mega menu |
+| MobileMenu | `@dododog/ui/mobile-menu` | Mobile navigation menu |
+| Modal | `@dododog/ui/modal` | Dialog modal |
+| Pagination | `@dododog/ui/pagination` | Page navigation |
+| PriceDisplay | `@dododog/ui/price-display` | Formatted price display |
+| ProgressBar | `@dododog/ui/progress-bar` | Progress indicator bar |
+| RadioGroup | `@dododog/ui/radio-group` | Radio button group |
+| Rating | `@dododog/ui/rating` | Star rating display |
+| SearchBar | `@dododog/ui/search-bar` | Search input bar |
+| SegmentedControl | `@dododog/ui/segmented-control` | Segmented toggle control |
+| Select | `@dododog/ui/select` | Select dropdown |
+| Sidebar | `@dododog/ui/sidebar` | Navigation sidebar |
+| Skeleton | `@dododog/ui/skeleton` | Loading skeleton placeholder |
+| Spinner | `@dododog/ui/spinner` | Loading spinner |
+| StatCard | `@dododog/ui/stat-card` | Statistics display card |
+| StatusBadge | `@dododog/ui/status-badge` | Status indicator badge |
+| Stepper | `@dododog/ui/stepper` | Step-by-step progress |
+| Switch | `@dododog/ui/switch` | Toggle switch |
+| Tabs | `@dododog/ui/tabs` | Tabbed content |
+| Tag | `@dododog/ui/tag` | Content tag |
+| Textarea | `@dododog/ui/textarea` | Multiline text input |
+| Toast | `@dododog/ui/toast` | Toast notifications |
+| Toggle | `@dododog/ui/toggle` | Toggle button |
+| Tooltip | `@dododog/ui/tooltip` | Hover tooltip |
+| VerticalMarquee | `@dododog/ui/vertical-marquee` | Vertical scrolling marquee |
+
+## Utilities
+
+| 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 |
+| Utils | `@dododog/ui/utils` | Utility functions (`cn`, etc.) |
+
+## Requirements
+
+- React >= 18
+- Tailwind CSS >= 3
+
+## License
+
+MIT

package/dist/chunk-2AB5ZHY5.mjs

@@ -0,0 +1,32 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Toggle = React.forwardRef(
+  ({ pressed = false, onPressedChange, disabled = false, children, leftIcon, className }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": pressed,
+        disabled,
+        onClick: () => onPressedChange?.(!pressed),
+        className: cn(
+          "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+          pressed ? "bg-primary text-white shadow-sm" : "bg-gray-100 text-gray-700 hover:bg-gray-200",
+          disabled && "bg-gray-50 text-gray-400 cursor-not-allowed hover:bg-gray-50",
+          className
+        ),
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
+          children
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+export { Toggle };

package/dist/chunk-2ASKBL63.mjs

@@ -0,0 +1,80 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var Stepper = React.forwardRef(
+  ({ steps, currentIndex, processing = false, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": "Progression",
+        className: cn("w-full", className),
+        children: /* @__PURE__ */ jsx("ol", { className: "flex items-center justify-between", children: steps.map((step, index) => {
+          const isCompleted = index < currentIndex;
+          const isCurrent = index === currentIndex;
+          const isUpcoming = index > currentIndex;
+          const isProcessing = isCurrent && processing;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: cn(
+                "flex items-center",
+                index < steps.length - 1 && "flex-1"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all duration-300",
+                        isCompleted && "bg-secondary border-secondary text-white",
+                        isCurrent && !isProcessing && "bg-secondary border-secondary text-white",
+                        isProcessing && "bg-secondary/20 border-secondary text-secondary",
+                        isUpcoming && "bg-white border-gray-300 text-gray-400"
+                      ),
+                      "aria-current": isCurrent ? "step" : void 0,
+                      children: isCompleted ? /* @__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: "M20 6 9 17l-5-5" }) }) : isProcessing ? /* @__PURE__ */ jsxs("svg", { className: "w-5 h-5 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+                        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+                      ] }) : /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: index + 1 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute -bottom-6 text-xs font-medium whitespace-nowrap transition-colors duration-300",
+                        (isCompleted || isCurrent) && "text-secondary",
+                        isUpcoming && "text-gray-400"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: step.label }),
+                        /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: index + 1 })
+                      ]
+                    }
+                  )
+                ] }),
+                index < steps.length - 1 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "flex-1 h-0.5 mx-2 transition-colors duration-500",
+                      isCompleted ? "bg-secondary" : "bg-gray-200"
+                    ),
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            step.id
+          );
+        }) })
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+export { Stepper };

package/dist/chunk-2MJTZ6RR.mjs

@@ -0,0 +1,43 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Tooltip = React.forwardRef(
+  ({ content, children, position = "top", className }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const positionClasses = {
+      top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+      bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+      left: "right-full top-1/2 -translate-y-1/2 mr-2",
+      right: "left-full top-1/2 -translate-y-1/2 ml-2"
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-flex", className),
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        onFocus: () => setIsVisible(true),
+        onBlur: () => setIsVisible(false),
+        children: [
+          children,
+          isVisible && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tooltip",
+              className: cn(
+                "absolute z-50 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg whitespace-nowrap pointer-events-none",
+                positionClasses[position]
+              ),
+              children: content
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip };

package/dist/chunk-2POGTS27.mjs

@@ -0,0 +1,40 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-14 h-14 text-base"
+};
+var Avatar = React.forwardRef(
+  ({ src, alt, initials, size = "md", badge, className }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-flex", className), children: [
+      src ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "Avatar",
+          className: cn(
+            "rounded-full object-cover",
+            sizeClasses[size]
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "rounded-full bg-sand flex items-center justify-center font-medium text-primary",
+            sizeClasses[size]
+          ),
+          "aria-label": alt || initials,
+          children: initials || "?"
+        }
+      ),
+      badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 flex items-center justify-center bg-secondary text-white text-[10px] font-bold rounded-full", children: badge > 99 ? "99+" : badge })
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { Avatar };

package/dist/chunk-333YD5QI.mjs

@@ -0,0 +1,192 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var selectVariants = cva(
+  "w-full border bg-white transition-all text-primary cursor-pointer",
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-2 text-sm rounded-xl",
+        md: "px-4 py-3 text-sm rounded-xl",
+        lg: "px-4 py-3 text-base rounded-xl"
+      },
+      variant: {
+        default: "border-gray-200 focus:border-secondary focus:outline-none focus:ring-1 focus:ring-secondary",
+        error: "border-red-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var Select = React.forwardRef(
+  ({
+    className,
+    size,
+    variant,
+    label,
+    error,
+    required,
+    options,
+    placeholder,
+    value,
+    onChange,
+    disabled = false
+  }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const containerRef = React.useRef(null);
+    const listboxRef = React.useRef(null);
+    const resolvedVariant = error ? "error" : variant ?? "default";
+    const selectedOption = options.find((o) => o.value === value);
+    React.useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    React.useEffect(() => {
+      if (isOpen && highlightedIndex >= 0 && listboxRef.current) {
+        const items = listboxRef.current.children;
+        if (items[highlightedIndex]) {
+          items[highlightedIndex].scrollIntoView({
+            block: "nearest"
+          });
+        }
+      }
+    }, [highlightedIndex, isOpen]);
+    const handleToggle = () => {
+      if (disabled) return;
+      setIsOpen((prev) => !prev);
+      if (!isOpen) {
+        const idx = options.findIndex((o) => o.value === value);
+        setHighlightedIndex(idx >= 0 ? idx : 0);
+      }
+    };
+    const handleSelect = (optionValue) => {
+      onChange?.(optionValue);
+      setIsOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (isOpen && highlightedIndex >= 0) {
+            handleSelect(options[highlightedIndex].value);
+          } else {
+            handleToggle();
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+            const idx = options.findIndex((o) => o.value === value);
+            setHighlightedIndex(idx >= 0 ? idx : 0);
+          } else {
+            setHighlightedIndex(
+              (prev) => prev < options.length - 1 ? prev + 1 : prev
+            );
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+          }
+          break;
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", ref, 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: " *" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "listbox",
+            disabled,
+            onClick: handleToggle,
+            onKeyDown: handleKeyDown,
+            className: cn(
+              selectVariants({ size, variant: resolvedVariant }),
+              "pr-10 text-left",
+              disabled && "opacity-50 cursor-not-allowed",
+              !selectedOption && "text-text-muted",
+              className
+            ),
+            children: selectedOption ? selectedOption.label : placeholder ?? "S\xE9lectionner..."
+          }
+        ),
+        /* @__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",
+            className: cn(
+              "absolute right-3 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none transition-transform",
+              isOpen && "rotate-180"
+            ),
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "ul",
+          {
+            ref: listboxRef,
+            role: "listbox",
+            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__ */ jsx(
+                "li",
+                {
+                  role: "option",
+                  "aria-selected": option.value === value,
+                  onClick: () => handleSelect(option.value),
+                  onMouseEnter: () => setHighlightedIndex(index),
+                  className: cn(
+                    "px-4 py-2.5 text-sm cursor-pointer transition-colors",
+                    option.value === value ? "text-secondary font-medium" : "text-primary",
+                    highlightedIndex === index && "bg-sand-light"
+                  ),
+                  children: option.label
+                },
+                option.value
+              )),
+              options.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-4 py-2.5 text-sm text-text-muted", children: "Aucune option" })
+            ]
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: error })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+export { Select, selectVariants };

package/dist/chunk-36Y7UU32.mjs

@@ -0,0 +1,34 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SegmentedControl = React.forwardRef(
+  ({ options, value, onChange, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex gap-1 bg-gray-100 rounded-full p-1", className),
+        role: "radiogroup",
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value === option.value,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "px-3 py-1.5 text-sm rounded-full transition-all",
+              value === option.value ? "bg-white text-gray-900 shadow-sm font-medium" : "text-gray-600 hover:text-gray-900"
+            ),
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    );
+  }
+);
+SegmentedControl.displayName = "SegmentedControl";
+
+export { SegmentedControl };

package/dist/chunk-3BPC4LNH.js

@@ -0,0 +1,75 @@
+'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 Counter = React__namespace.forwardRef(
+  ({ value, onChange, min = 0, max = 99, label, subtitle, className }, ref) => {
+    const canDecrement = value > min;
+    const canIncrement = value < max;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkADIDI7AJ_js.cn("flex items-center justify-between", className), children: [
+      (label || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-primary", children: label }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-text-secondary", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !canDecrement,
+            onClick: () => canDecrement && onChange?.(value - 1),
+            className: chunkADIDI7AJ_js.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": "Diminuer",
+            children: /* @__PURE__ */ jsxRuntime.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", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-8 text-center text-sm font-medium text-primary tabular-nums", children: value }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !canIncrement,
+            onClick: () => canIncrement && onChange?.(value + 1),
+            className: chunkADIDI7AJ_js.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": "Augmenter",
+            children: /* @__PURE__ */ jsxRuntime.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", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14" })
+            ] })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Counter.displayName = "Counter";
+
+exports.Counter = Counter;