@dododog/ui 0.16.0 → 0.17.0

package/dist/{chunk-R4G5LFPN.js → chunk-2NMA3AXV.js}

@@ -46,26 +46,55 @@ var textareaVariants = classVarianceAuthority.cva(
   }
 );
 var Textarea = React__namespace.forwardRef(
-  ({ className, size, variant, label, error, required, rows = 4, ...props }, ref) => {
+  ({
+    className,
+    size,
+    variant,
+    label,
+    error,
+    required,
+    rows = 4,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...props
+  }, ref) => {
+    const generatedId = React__namespace.useId();
+    const textareaId = id ?? generatedId;
+    const errorId = `${textareaId}-error`;
     const resolvedVariant = error ? "error" : variant ?? "default";
+    const describedBy = [ariaDescribedBy, error ? errorId : null].filter(Boolean).join(" ") || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-primary mb-1.5", children: [
-        label,
-        required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-secondary", children: " *" })
-      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: textareaId,
+          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.jsx(
         "textarea",
         {
+          ...props,
           ref,
+          id: textareaId,
           rows,
+          required,
+          "aria-required": ariaRequired ?? (required ? true : void 0),
+          "aria-invalid": ariaInvalid ?? (error ? true : void 0),
+          "aria-describedby": describedBy,
           className: chunkADIDI7AJ_js.cn(
             textareaVariants({ size, variant: resolvedVariant }),
             className
-          ),
-          ...props
+          )
         }
       ),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/{chunk-Z7CF7EQJ.mjs → chunk-52M2KUC4.mjs}

@@ -24,26 +24,55 @@ var textareaVariants = cva(
   }
 );
 var Textarea = React.forwardRef(
-  ({ className, size, variant, label, error, required, rows = 4, ...props }, ref) => {
+  ({
+    className,
+    size,
+    variant,
+    label,
+    error,
+    required,
+    rows = 4,
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const textareaId = id ?? generatedId;
+    const errorId = `${textareaId}-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: textareaId,
+          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__ */ jsx(
         "textarea",
         {
+          ...props,
           ref,
+          id: textareaId,
           rows,
+          required,
+          "aria-required": ariaRequired ?? (required ? true : void 0),
+          "aria-invalid": ariaInvalid ?? (error ? true : void 0),
+          "aria-describedby": describedBy,
           className: cn(
             textareaVariants({ size, variant: resolvedVariant }),
             className
-          ),
-          ...props
+          )
         }
       ),
-      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-sm text-red-600", children: error })
+      error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "mt-1 text-sm text-red-600", children: error })
     ] });
   }
 );

package/dist/chunk-DUCRCDLI.mjs

@@ -0,0 +1,78 @@
+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,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const optionRefs = React.useRef([]);
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const rovingIndex = selectedIndex === -1 ? 0 : selectedIndex;
+    const handleKeyDown = (event, index) => {
+      const lastIndex = options.length - 1;
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextOption = options[nextIndex];
+      if (!nextOption) return;
+      onChange(nextOption.value);
+      optionRefs.current[nextIndex]?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex gap-1 bg-gray-100 rounded-full p-1", className),
+        role: "radiogroup",
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: options.map((option, index) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": value === option.value,
+            tabIndex: index === rovingIndex ? 0 : -1,
+            ref: (node) => {
+              optionRefs.current[index] = node;
+            },
+            onKeyDown: (event) => handleKeyDown(event, index),
+            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-HH4X2JYO.js → chunk-EKOGDJUT.js}

@@ -37,6 +37,7 @@ var FOCUSABLE_SELECTOR = [
   "[contenteditable]:not([contenteditable='false'])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
+var DEFAULT_Z_INDEX_CLASS = "z-50";
 function getFocusableElements(panel) {
   return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
     (element) => !element.closest("[hidden], [aria-hidden='true'], details:not([open])")
@@ -54,6 +55,11 @@ var Modal = React__namespace.forwardRef(
     children,
     title,
     className,
+    variant = "centered",
+    overlayClassName,
+    zIndexClassName = DEFAULT_Z_INDEX_CLASS,
+    initialFocusRef,
+    returnFocusTo,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
@@ -62,10 +68,20 @@ var Modal = React__namespace.forwardRef(
     const generatedTitleId = React__namespace.useId();
     const titleId = title ? `${generatedTitleId}-title` : void 0;
     const labelledBy = ariaLabelledBy ?? titleId;
+    const isFullBleed = variant === "fullBleed";
+    const initialFocusRefLatest = React__namespace.useRef(initialFocusRef);
+    initialFocusRefLatest.current = initialFocusRef;
+    const returnFocusToLatest = React__namespace.useRef(returnFocusTo);
+    returnFocusToLatest.current = returnFocusTo;
     React__namespace.useEffect(() => {
       if (!isOpen) return;
       const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       return () => {
+        const designated = returnFocusToLatest.current?.current ?? null;
+        if (designated && designated.isConnected) {
+          designated.focus();
+          return;
+        }
         if (trigger && trigger.isConnected) trigger.focus();
       };
     }, [isOpen]);
@@ -73,6 +89,11 @@ var Modal = React__namespace.forwardRef(
       if (!isOpen) return;
       const panel = panelRef.current;
       if (!panel) return;
+      const preferred = initialFocusRefLatest.current?.current ?? null;
+      if (preferred) {
+        preferred.focus();
+        return;
+      }
       const focusable = getFocusableElements(panel);
       (focusable[0] ?? panel).focus();
     }, [isOpen]);
@@ -124,14 +145,21 @@ var Modal = React__namespace.forwardRef(
       "div",
       {
         ref,
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        className: chunkADIDI7AJ_js.cn(
+          "fixed inset-0",
+          zIndexClassName,
+          // La mise en page centree (et sa marge de 16 px) n'existe que dans la
+          // variante `centered` : une surface bord a bord n'en veut pas.
+          !isFullBleed && "flex items-center justify-center p-4",
+          overlayClassName
+        ),
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": labelledBy,
         "aria-label": labelledBy ? void 0 : ariaLabel,
         "aria-describedby": ariaDescribedBy,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !isFullBleed && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: "absolute inset-0 bg-black/50",
@@ -145,7 +173,7 @@ var Modal = React__namespace.forwardRef(
               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 outline-none",
+                isFullBleed ? "relative h-full w-full outline-none" : "relative bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto outline-none",
                 className
               ),
               children: [
@@ -186,7 +214,7 @@ var Modal = React__namespace.forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkADIDI7AJ_js.cn(title ? "px-6 pb-6" : "p-6"), children })
+                isFullBleed ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkADIDI7AJ_js.cn(title ? "px-6 pb-6" : "p-6"), children })
               ]
             }
           )

package/dist/{chunk-QWDKSY6Y.js → chunk-OZ4RJDDZ.js}

@@ -25,19 +25,63 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var SegmentedControl = React__namespace.forwardRef(
-  ({ options, value, onChange, className }, ref) => {
+  ({
+    options,
+    value,
+    onChange,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const optionRefs = React__namespace.useRef([]);
+    const selectedIndex = options.findIndex((option) => option.value === value);
+    const rovingIndex = selectedIndex === -1 ? 0 : selectedIndex;
+    const handleKeyDown = (event, index) => {
+      const lastIndex = options.length - 1;
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextOption = options[nextIndex];
+      if (!nextOption) return;
+      onChange(nextOption.value);
+      optionRefs.current[nextIndex]?.focus();
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         className: chunkADIDI7AJ_js.cn("flex gap-1 bg-gray-100 rounded-full p-1", className),
         role: "radiogroup",
-        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             role: "radio",
             "aria-checked": value === option.value,
+            tabIndex: index === rovingIndex ? 0 : -1,
+            ref: (node) => {
+              optionRefs.current[index] = node;
+            },
+            onKeyDown: (event) => handleKeyDown(event, index),
             onClick: () => onChange(option.value),
             className: chunkADIDI7AJ_js.cn(
               "px-3 py-1.5 text-sm rounded-full transition-all",

package/dist/{chunk-762LQMWP.js → chunk-RAXPJ7VC.js}

@@ -25,17 +25,57 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var Tabs = React__namespace.forwardRef(
-  ({ tabs, defaultTab, value, onChange, className }, ref) => {
+  ({
+    tabs,
+    defaultTab,
+    value,
+    onChange,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
     const [internalValue, setInternalValue] = React__namespace.useState(
       defaultTab || tabs[0]?.key || ""
     );
     const activeKey = value ?? internalValue;
-    const handleChange = (key) => {
-      if (onChange) {
-        onChange(key);
-      } else {
-        setInternalValue(key);
+    const idPrefix = React__namespace.useId();
+    const tabId = (key) => `${idPrefix}-tab-${key}`;
+    const panelId = (key) => `${idPrefix}-panel-${key}`;
+    const tabRefs = React__namespace.useRef([]);
+    const handleChange = React__namespace.useCallback(
+      (key) => {
+        if (onChange) {
+          onChange(key);
+        } else {
+          setInternalValue(key);
+        }
+      },
+      [onChange]
+    );
+    const handleKeyDown = (event, index) => {
+      const lastIndex = tabs.length - 1;
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+        default:
+          return;
       }
+      event.preventDefault();
+      const nextTab = tabs[nextIndex];
+      if (!nextTab) return;
+      handleChange(nextTab.key);
+      tabRefs.current[nextIndex]?.focus();
     };
     const activeTab = tabs.find((t) => t.key === activeKey);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: chunkADIDI7AJ_js.cn("w-full", className), children: [
@@ -43,13 +83,22 @@ var Tabs = React__namespace.forwardRef(
         "div",
         {
           role: "tablist",
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
           className: "flex border-b border-gray-200 gap-1 overflow-x-auto",
-          children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+          children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
+              id: tabId(tab.key),
               role: "tab",
               type: "button",
               "aria-selected": tab.key === activeKey,
+              "aria-controls": panelId(tab.key),
+              tabIndex: tab.key === activeKey ? 0 : -1,
+              ref: (node) => {
+                tabRefs.current[index] = node;
+              },
+              onKeyDown: (event) => handleKeyDown(event, index),
               onClick: () => handleChange(tab.key),
               className: chunkADIDI7AJ_js.cn(
                 "flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px",
@@ -64,7 +113,16 @@ var Tabs = React__namespace.forwardRef(
           ))
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tabpanel", className: "py-4", children: activeTab?.content })
+      activeTab && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "tabpanel",
+          id: panelId(activeTab.key),
+          "aria-labelledby": tabId(activeTab.key),
+          className: "py-4",
+          children: activeTab.content
+        }
+      )
     ] });
   }
 );

package/dist/{chunk-N5ZNXNCO.mjs → chunk-UYOPZZBN.mjs}

@@ -15,6 +15,7 @@ var FOCUSABLE_SELECTOR = [
   "[contenteditable]:not([contenteditable='false'])",
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
+var DEFAULT_Z_INDEX_CLASS = "z-50";
 function getFocusableElements(panel) {
   return Array.from(panel.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
     (element) => !element.closest("[hidden], [aria-hidden='true'], details:not([open])")
@@ -32,6 +33,11 @@ var Modal = React.forwardRef(
     children,
     title,
     className,
+    variant = "centered",
+    overlayClassName,
+    zIndexClassName = DEFAULT_Z_INDEX_CLASS,
+    initialFocusRef,
+    returnFocusTo,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy
@@ -40,10 +46,20 @@ var Modal = React.forwardRef(
     const generatedTitleId = React.useId();
     const titleId = title ? `${generatedTitleId}-title` : void 0;
     const labelledBy = ariaLabelledBy ?? titleId;
+    const isFullBleed = variant === "fullBleed";
+    const initialFocusRefLatest = React.useRef(initialFocusRef);
+    initialFocusRefLatest.current = initialFocusRef;
+    const returnFocusToLatest = React.useRef(returnFocusTo);
+    returnFocusToLatest.current = returnFocusTo;
     React.useEffect(() => {
       if (!isOpen) return;
       const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
       return () => {
+        const designated = returnFocusToLatest.current?.current ?? null;
+        if (designated && designated.isConnected) {
+          designated.focus();
+          return;
+        }
         if (trigger && trigger.isConnected) trigger.focus();
       };
     }, [isOpen]);
@@ -51,6 +67,11 @@ var Modal = React.forwardRef(
       if (!isOpen) return;
       const panel = panelRef.current;
       if (!panel) return;
+      const preferred = initialFocusRefLatest.current?.current ?? null;
+      if (preferred) {
+        preferred.focus();
+        return;
+      }
       const focusable = getFocusableElements(panel);
       (focusable[0] ?? panel).focus();
     }, [isOpen]);
@@ -102,14 +123,21 @@ var Modal = React.forwardRef(
       "div",
       {
         ref,
-        className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+        className: cn(
+          "fixed inset-0",
+          zIndexClassName,
+          // La mise en page centree (et sa marge de 16 px) n'existe que dans la
+          // variante `centered` : une surface bord a bord n'en veut pas.
+          !isFullBleed && "flex items-center justify-center p-4",
+          overlayClassName
+        ),
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": labelledBy,
         "aria-label": labelledBy ? void 0 : ariaLabel,
         "aria-describedby": ariaDescribedBy,
         children: [
-          /* @__PURE__ */ jsx(
+          !isFullBleed && /* @__PURE__ */ jsx(
             "div",
             {
               className: "absolute inset-0 bg-black/50",
@@ -123,7 +151,7 @@ var Modal = React.forwardRef(
               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",
+                isFullBleed ? "relative h-full w-full outline-none" : "relative bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-auto outline-none",
                 className
               ),
               children: [
@@ -164,7 +192,7 @@ var Modal = React.forwardRef(
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: cn(title ? "px-6 pb-6" : "p-6"), children })
+                isFullBleed ? children : /* @__PURE__ */ jsx("div", { className: cn(title ? "px-6 pb-6" : "p-6"), children })
               ]
             }
           )

package/dist/chunk-YGAWCP65.mjs

@@ -0,0 +1,109 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Tabs = React.forwardRef(
+  ({
+    tabs,
+    defaultTab,
+    value,
+    onChange,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(
+      defaultTab || tabs[0]?.key || ""
+    );
+    const activeKey = value ?? internalValue;
+    const idPrefix = React.useId();
+    const tabId = (key) => `${idPrefix}-tab-${key}`;
+    const panelId = (key) => `${idPrefix}-panel-${key}`;
+    const tabRefs = React.useRef([]);
+    const handleChange = React.useCallback(
+      (key) => {
+        if (onChange) {
+          onChange(key);
+        } else {
+          setInternalValue(key);
+        }
+      },
+      [onChange]
+    );
+    const handleKeyDown = (event, index) => {
+      const lastIndex = tabs.length - 1;
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+          nextIndex = index === lastIndex ? 0 : index + 1;
+          break;
+        case "ArrowLeft":
+          nextIndex = index === 0 ? lastIndex : index - 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = lastIndex;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextTab = tabs[nextIndex];
+      if (!nextTab) return;
+      handleChange(nextTab.key);
+      tabRefs.current[nextIndex]?.focus();
+    };
+    const activeTab = tabs.find((t) => t.key === activeKey);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tablist",
+          "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          className: "flex border-b border-gray-200 gap-1 overflow-x-auto",
+          children: tabs.map((tab, index) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: tabId(tab.key),
+              role: "tab",
+              type: "button",
+              "aria-selected": tab.key === activeKey,
+              "aria-controls": panelId(tab.key),
+              tabIndex: tab.key === activeKey ? 0 : -1,
+              ref: (node) => {
+                tabRefs.current[index] = node;
+              },
+              onKeyDown: (event) => handleKeyDown(event, index),
+              onClick: () => handleChange(tab.key),
+              className: cn(
+                "flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors -mb-px",
+                tab.key === activeKey ? "border-secondary text-secondary" : "border-transparent text-text-secondary hover:text-primary hover:border-gray-300"
+              ),
+              children: [
+                tab.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: tab.icon }),
+                tab.label
+              ]
+            },
+            tab.key
+          ))
+        }
+      ),
+      activeTab && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tabpanel",
+          id: panelId(activeTab.key),
+          "aria-labelledby": tabId(activeTab.key),
+          className: "py-4",
+          children: activeTab.content
+        }
+      )
+    ] });
+  }
+);
+Tabs.displayName = "Tabs";
+
+export { Tabs };