@lego-box/ui-kit 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -401,30 +401,27 @@ Badge.displayName = "Badge";
 // src/components/tabs.tsx
 import * as React10 from "react";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var TabsContext = React10.createContext(null);
 var Tabs = React10.forwardRef(
-  ({ value, onValueChange, children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx10(
-      "div",
-      {
-        ref,
-        className: cn("w-full", className),
-        ...props,
-        children: React10.Children.map(children, (child) => {
-          if (React10.isValidElement(child)) {
-            return React10.cloneElement(child, {
-              selectedValue: value,
-              onValueChange
-            });
-          }
-          return child;
-        })
-      }
+  ({
+    value,
+    onValueChange,
+    children,
+    className,
+    // Explicitly omit component-specific props so they never reach the DOM (fixes React warnings)
+    selectedValue: _selectedValue,
+    ...props
+  }, ref) => {
+    const contextValue = React10.useMemo(
+      () => ({ value, onValueChange }),
+      [value, onValueChange]
     );
+    return /* @__PURE__ */ jsx10(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx10("div", { ref, className: cn("w-full", className), ...props, children }) });
   }
 );
 Tabs.displayName = "Tabs";
 var TabsList = React10.forwardRef(
-  ({ children, className, selectedValue, onValueChange, ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx10(
       "div",
       {
@@ -434,28 +431,26 @@ var TabsList = React10.forwardRef(
           className
         ),
         ...props,
-        children: React10.Children.map(children, (child) => {
-          if (React10.isValidElement(child)) {
-            return React10.cloneElement(child, {
-              selectedValue,
-              onValueChange
-            });
-          }
-          return child;
-        })
+        children
       }
     );
   }
 );
 TabsList.displayName = "TabsList";
 var TabsTrigger = React10.forwardRef(
-  ({ value, children, className, selectedValue, onValueChange, badge, disabled, ...props }, ref) => {
-    const isActive = selectedValue === value;
+  ({ value, children, className, badge, disabled, ...props }, ref) => {
+    const context = React10.useContext(TabsContext);
+    const isActive = context?.value === value;
+    const handleClick = () => {
+      if (!disabled && context?.onValueChange) {
+        context.onValueChange(value);
+      }
+    };
     return /* @__PURE__ */ jsxs5(
       "button",
       {
         ref,
-        onClick: () => !disabled && onValueChange?.(value),
+        onClick: handleClick,
         disabled,
         className: cn(
           "inline-flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200",