next-recomponents 2.0.63 → 2.0.65

package/dist/index.d.mts

@@ -291,6 +291,7 @@ interface TabItemProps {
     label: string;
     children: ReactNode;
     disabled?: boolean;
+    icon?: ReactNode;
 }
 declare function TabItem({ children }: TabItemProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -291,6 +291,7 @@ interface TabItemProps {
     label: string;
     children: ReactNode;
     disabled?: boolean;
+    icon?: ReactNode;
 }
 declare function TabItem({ children }: TabItemProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -39862,7 +39862,7 @@ var import_react23 = __toESM(require("react"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function TabContainer({
   children,
-  labelMaxWidth = 100,
+  labelMaxWidth,
   currentIndex = 0
 }) {
   const [index, setIndex] = (0, import_react23.useState)(0);
@@ -39878,15 +39878,16 @@ function TabContainer({
   (0, import_react23.useEffect)(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-full bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tablist", className: "flex gap-1 border-b border-slate-200", children: labels.map((label, k) => {
-      var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-full bg-white border shadow rounded-lg ", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tablist", className: "flex gap-1 border-b border-slate-200 ", children: labels.map((label, k) => {
+      var _a, _b, _c, _d;
+      const icon = (_b = (_a = items.find((i) => i.props.label == label)) == null ? void 0 : _a.props) == null ? void 0 : _b.icon;
       const active = k === index;
-      const isDisabled = (_b = (_a = items.find((i) => i.props.label == label)) == null ? void 0 : _a.props) == null ? void 0 : _b.disabled;
+      const isDisabled = (_d = (_c = items.find((i) => i.props.label == label)) == null ? void 0 : _c.props) == null ? void 0 : _d.disabled;
       return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
         "button",
         {
-          style: { maxWidth: labelMaxWidth },
+          style: labelMaxWidth ? { maxWidth: labelMaxWidth } : {},
           title: label,
           role: "tab",
           type: "button",
@@ -39901,7 +39902,10 @@ function TabContainer({
             isDisabled ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white" : ""
           ].join(" "),
           children: [
-            label,
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex  items-center gap-2", children: [
+              icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children: icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "truncate", children: label })
+            ] }),
             active && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" })
           ]
         },

package/dist/index.mjs

@@ -39859,7 +39859,7 @@ import React11, { useEffect as useEffect15, useState as useState19 } from "react
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function TabContainer({
   children,
-  labelMaxWidth = 100,
+  labelMaxWidth,
   currentIndex = 0
 }) {
   const [index, setIndex] = useState19(0);
@@ -39875,15 +39875,16 @@ function TabContainer({
   useEffect15(() => {
     setIndex(currentIndex);
   }, [currentIndex]);
-  return /* @__PURE__ */ jsxs27("div", { className: "w-full bg-white", children: [
-    /* @__PURE__ */ jsx35("div", { role: "tablist", className: "flex gap-1 border-b border-slate-200", children: labels.map((label, k) => {
-      var _a, _b;
+  return /* @__PURE__ */ jsxs27("div", { className: "w-full bg-white border shadow rounded-lg ", children: [
+    /* @__PURE__ */ jsx35("div", { role: "tablist", className: "flex gap-1 border-b border-slate-200 ", children: labels.map((label, k) => {
+      var _a, _b, _c, _d;
+      const icon = (_b = (_a = items.find((i) => i.props.label == label)) == null ? void 0 : _a.props) == null ? void 0 : _b.icon;
       const active = k === index;
-      const isDisabled = (_b = (_a = items.find((i) => i.props.label == label)) == null ? void 0 : _a.props) == null ? void 0 : _b.disabled;
+      const isDisabled = (_d = (_c = items.find((i) => i.props.label == label)) == null ? void 0 : _c.props) == null ? void 0 : _d.disabled;
       return /* @__PURE__ */ jsxs27(
         "button",
         {
-          style: { maxWidth: labelMaxWidth },
+          style: labelMaxWidth ? { maxWidth: labelMaxWidth } : {},
           title: label,
           role: "tab",
           type: "button",
@@ -39898,7 +39899,10 @@ function TabContainer({
             isDisabled ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white" : ""
           ].join(" "),
           children: [
-            label,
+            /* @__PURE__ */ jsxs27("div", { className: "flex  items-center gap-2", children: [
+              icon && /* @__PURE__ */ jsx35("div", { children: icon }),
+              /* @__PURE__ */ jsx35("div", { className: "truncate", children: label })
+            ] }),
             active && /* @__PURE__ */ jsx35("span", { className: "absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" })
           ]
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "2.0.63",
+  "version": "2.0.65",
   "description": "description nueva",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/tabs/index.tsx

@@ -8,7 +8,7 @@ interface TabContainerProps {
 
 export default function TabContainer({
   children,
-  labelMaxWidth = 100,
+  labelMaxWidth,
   currentIndex = 0,
 }: TabContainerProps) {
   const [index, setIndex] = useState(0);
@@ -28,15 +28,16 @@ export default function TabContainer({
   }, [currentIndex]);
 
   return (
-    <div className="w-full bg-white">
-      <div role="tablist" className="flex gap-1 border-b border-slate-200">
+    <div className="w-full bg-white border shadow rounded-lg ">
+      <div role="tablist" className="flex gap-1 border-b border-slate-200 ">
         {labels.map((label, k) => {
+          const icon = items.find((i) => i.props.label == label)?.props?.icon;
           const active = k === index;
           const isDisabled = items.find((i) => i.props.label == label)?.props
             ?.disabled;
           return (
             <button
-              style={{ maxWidth: labelMaxWidth }}
+              style={labelMaxWidth ? { maxWidth: labelMaxWidth } : {}}
               key={label + k}
               title={label}
               role="tab"
@@ -56,7 +57,10 @@ export default function TabContainer({
                   : "",
               ].join(" ")}
             >
-              {label}
+              <div className="flex  items-center gap-2">
+                {icon && <div>{icon}</div>}
+                <div className="truncate">{label}</div>
+              </div>
               {active && (
                 <span className="absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" />
               )}
@@ -76,6 +80,7 @@ interface TabItemProps {
   label: string;
   children: ReactNode;
   disabled?: boolean;
+  icon?: ReactNode;
 }
 
 export function TabItem({ children }: TabItemProps) {