next-recomponents 2.0.55 → 2.0.56

package/dist/index.d.mts

@@ -280,4 +280,17 @@ interface TableProps {
 
 declare function TableAdvanced(tableProps: TableProps): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, TableAdvanced, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };
+interface TabContainerProps {
+    children: ReactNode;
+    labelMaxWidth?: number;
+    currentIndex?: number;
+}
+declare function TabContainer({ children, labelMaxWidth, currentIndex, }: TabContainerProps): react_jsx_runtime.JSX.Element;
+interface TabItemProps {
+    label: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabItem({ children }: TabItemProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, TabContainer, TabItem, Table, Table3, TableAdvanced, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.d.ts

@@ -280,4 +280,17 @@ interface TableProps {
 
 declare function TableAdvanced(tableProps: TableProps): react_jsx_runtime.JSX.Element | null;
 
-export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, Table, Table3, TableAdvanced, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };
+interface TabContainerProps {
+    children: ReactNode;
+    labelMaxWidth?: number;
+    currentIndex?: number;
+}
+declare function TabContainer({ children, labelMaxWidth, currentIndex, }: TabContainerProps): react_jsx_runtime.JSX.Element;
+interface TabItemProps {
+    label: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function TabItem({ children }: TabItemProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, DocumentViewer, Form, Input, Modal, MyCalendar, Pre, Select, TabContainer, TabItem, Table, Table3, TableAdvanced, type TableButtonProps, type TableButtonProps as TableEventProps, TextArea, regularExpresions, useDates, useExcel, useFormValues, usePopup, useResources };

package/dist/index.js

@@ -3498,6 +3498,8 @@ __export(index_exports, {
   MyCalendar: () => MyCalendar,
   Pre: () => pre_default,
   Select: () => Select,
+  TabContainer: () => TabContainer,
+  TabItem: () => TabItem,
   Table: () => Table,
   Table3: () => Table3,
   TableAdvanced: () => TableAdvanced,
@@ -39666,6 +39668,64 @@ function TableAdvanced(tableProps) {
   }
   return null;
 }
+
+// src/tabs/index.tsx
+var import_react22 = __toESM(require("react"));
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function TabContainer({
+  children,
+  labelMaxWidth = 100,
+  currentIndex = 0
+}) {
+  const [index, setIndex] = (0, import_react22.useState)(0);
+  const items = import_react22.default.Children.toArray(
+    children
+  );
+  const labels = items.map((c) => c.props.label);
+  const handleKeyDown = (e, k) => {
+    if (e.key === "ArrowRight") setIndex((k + 1) % labels.length);
+    if (e.key === "ArrowLeft")
+      setIndex((k - 1 + labels.length) % labels.length);
+  };
+  (0, import_react22.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;
+      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;
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "button",
+        {
+          style: { maxWidth: labelMaxWidth },
+          title: label,
+          role: "tab",
+          type: "button",
+          "aria-selected": active,
+          tabIndex: active ? 0 : -1,
+          onClick: () => !isDisabled && setIndex(k),
+          onKeyDown: (e) => !isDisabled && handleKeyDown(e, k),
+          className: [
+            "truncate relative px-4 py-2 text-sm font-medium transition-colors duration-150",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-1 rounded-t-md",
+            active ? "text-indigo-600" : "text-slate-500 hover:text-slate-700 hover:bg-gray-200",
+            isDisabled ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white" : ""
+          ].join(" "),
+          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" })
+          ]
+        },
+        label + k
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { role: "tabpanel", className: "p-4 text-sm text-slate-700", children: items[index] })
+  ] });
+}
+function TabItem({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -39678,6 +39738,8 @@ function TableAdvanced(tableProps) {
   MyCalendar,
   Pre,
   Select,
+  TabContainer,
+  TabItem,
   Table,
   Table3,
   TableAdvanced,

package/dist/index.mjs

@@ -39664,6 +39664,64 @@ function TableAdvanced(tableProps) {
   }
   return null;
 }
+
+// src/tabs/index.tsx
+import React11, { useEffect as useEffect14, useState as useState18 } from "react";
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+function TabContainer({
+  children,
+  labelMaxWidth = 100,
+  currentIndex = 0
+}) {
+  const [index, setIndex] = useState18(0);
+  const items = React11.Children.toArray(
+    children
+  );
+  const labels = items.map((c) => c.props.label);
+  const handleKeyDown = (e, k) => {
+    if (e.key === "ArrowRight") setIndex((k + 1) % labels.length);
+    if (e.key === "ArrowLeft")
+      setIndex((k - 1 + labels.length) % labels.length);
+  };
+  useEffect14(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  return /* @__PURE__ */ jsxs26("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;
+      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;
+      return /* @__PURE__ */ jsxs26(
+        "button",
+        {
+          style: { maxWidth: labelMaxWidth },
+          title: label,
+          role: "tab",
+          type: "button",
+          "aria-selected": active,
+          tabIndex: active ? 0 : -1,
+          onClick: () => !isDisabled && setIndex(k),
+          onKeyDown: (e) => !isDisabled && handleKeyDown(e, k),
+          className: [
+            "truncate relative px-4 py-2 text-sm font-medium transition-colors duration-150",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-1 rounded-t-md",
+            active ? "text-indigo-600" : "text-slate-500 hover:text-slate-700 hover:bg-gray-200",
+            isDisabled ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white" : ""
+          ].join(" "),
+          children: [
+            label,
+            active && /* @__PURE__ */ jsx35("span", { className: "absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" })
+          ]
+        },
+        label + k
+      );
+    }) }),
+    /* @__PURE__ */ jsx35("div", { role: "tabpanel", className: "p-4 text-sm text-slate-700", children: items[index] })
+  ] });
+}
+function TabItem({ children }) {
+  return /* @__PURE__ */ jsx35(Fragment3, { children });
+}
 export {
   Alert,
   Button,
@@ -39675,6 +39733,8 @@ export {
   MyCalendar,
   pre_default as Pre,
   Select,
+  TabContainer,
+  TabItem,
   Table,
   Table3,
   TableAdvanced,

package/package.json

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

package/src/index.tsx

@@ -20,3 +20,5 @@ export { default as DocumentViewer } from "./doc-viewer";
 export { default as Table3 } from "./table3";
 export { default as usePopup } from "./pop";
 export { default as TableAdvanced } from "./table-advanced";
+export { default as TabContainer } from "./tabs";
+export { TabItem } from "./tabs";

package/src/tabs/index.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+interface TabContainerProps {
+  children: ReactNode;
+  labelMaxWidth?: number;
+  currentIndex?: number;
+}
+
+export default function TabContainer({
+  children,
+  labelMaxWidth = 100,
+  currentIndex = 0,
+}: TabContainerProps) {
+  const [index, setIndex] = useState(0);
+  const items = React.Children.toArray(
+    children,
+  ) as React.ReactElement<TabItemProps>[];
+  const labels = items.map((c) => c.props.label);
+
+  const handleKeyDown = (e: React.KeyboardEvent, k: number) => {
+    if (e.key === "ArrowRight") setIndex((k + 1) % labels.length);
+    if (e.key === "ArrowLeft")
+      setIndex((k - 1 + labels.length) % labels.length);
+  };
+
+  useEffect(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+
+  return (
+    <div className="w-full bg-white">
+      <div role="tablist" className="flex gap-1 border-b border-slate-200">
+        {labels.map((label, k) => {
+          const active = k === index;
+          const isDisabled = items.find((i) => i.props.label == label)?.props
+            ?.disabled;
+          return (
+            <button
+              style={{ maxWidth: labelMaxWidth }}
+              key={label + k}
+              title={label}
+              role="tab"
+              type="button"
+              aria-selected={active}
+              tabIndex={active ? 0 : -1}
+              onClick={() => !isDisabled && setIndex(k)}
+              onKeyDown={(e) => !isDisabled && handleKeyDown(e, k)}
+              className={[
+                "truncate relative px-4 py-2 text-sm font-medium transition-colors duration-150",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400 focus-visible:ring-offset-1 rounded-t-md",
+                active
+                  ? "text-indigo-600"
+                  : "text-slate-500 hover:text-slate-700 hover:bg-gray-200",
+                isDisabled
+                  ? " text-gray-300 cursor-not-allowed hover:text-gray-300 hover:bg-white"
+                  : "",
+              ].join(" ")}
+            >
+              {label}
+              {active && (
+                <span className="absolute left-0 right-0 -bottom-px h-0.5 bg-indigo-600 rounded-full" />
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <div role="tabpanel" className="p-4 text-sm text-slate-700">
+        {items[index]}
+      </div>
+    </div>
+  );
+}
+
+interface TabItemProps {
+  label: string;
+  children: ReactNode;
+  disabled?: boolean;
+}
+
+export function TabItem({ children }: TabItemProps) {
+  return <>{children}</>;
+}