next-recomponents 1.6.82 → 1.6.84

package/dist/index.css

@@ -0,0 +1,132 @@
+/* ../../node_modules/react-calendar/dist/Calendar.css */
+.react-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family:
+    "Arial",
+    "Helvetica",
+    sans-serif;
+  line-height: 1.125em;
+}
+.react-calendar--doubleView {
+  width: 700px;
+}
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+  width: 50%;
+  margin: 0.5em;
+}
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #757575;
+}
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+.react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  font: inherit;
+  font-size: 0.833em;
+}
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+  color: #ababab;
+}
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #cdcdcd;
+}
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+.react-calendar__tile--now {
+  background: #ffff76;
+}
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
+}

package/dist/index.d.mts

@@ -163,4 +163,11 @@ declare function useExcel(): {
     export: (data: any[][], fileName?: string) => void;
 };
 
-export { Alert, Button, Container, Form, Input, Modal, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };
+declare function MyCalendar({ enabledDates, onChange, defaultValue, className, }: {
+    enabledDates: Date[];
+    onChange: (e: any) => void;
+    defaultValue?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };

package/dist/index.d.ts

@@ -163,4 +163,11 @@ declare function useExcel(): {
     export: (data: any[][], fileName?: string) => void;
 };
 
-export { Alert, Button, Container, Form, Input, Modal, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };
+declare function MyCalendar({ enabledDates, onChange, defaultValue, className, }: {
+    enabledDates: Date[];
+    onChange: (e: any) => void;
+    defaultValue?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Alert, Button, Container, Form, Input, Modal, MyCalendar, Pre, Select, Table, TextArea, regularExpresions, useDates, useExcel, useResources };

package/dist/index.js

@@ -2974,6 +2974,7 @@ __export(index_exports, {
   Form: () => Form,
   Input: () => Input,
   Modal: () => Modal,
+  MyCalendar: () => MyCalendar,
   Pre: () => pre_default,
   Select: () => Select,
   Table: () => Table,
@@ -11352,7 +11353,12 @@ function FilterMenu({
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-2   w-full  h-[150px]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "div",
             {
-              style: { overflow: "auto" },
+              style: {
+                maxHeight: "100px",
+                overflowY: "auto",
+                contentVisibility: "auto",
+                containIntrinsicSize: "100px"
+              },
               className: "border h-full flex gap-2 flex-col  p-1",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex gap-2 items-center justify-start ", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { children: [
@@ -43382,7 +43388,19 @@ function HTable(_a) {
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function Table(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-gray-200 border rounded shadow p-1", children: Array.isArray(props.data) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HTable, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: "bg-gray-200 border rounded shadow p-1",
+      style: {
+        maxHeight: "500px",
+        overflowY: "auto",
+        contentVisibility: "auto",
+        containIntrinsicSize: "500px"
+      },
+      children: Array.isArray(props.data) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HTable, __spreadValues({}, props)) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" })
+    }
+  );
 }
 
 // src/text-area/index.tsx
@@ -44197,6 +44215,115 @@ function useExcel() {
   }
   return { import: importFile, export: exportFile };
 }
+
+// src/calendar/index.tsx
+var import_react31 = require("react");
+var import_Calendar = require("react-calendar/dist/Calendar.css");
+var import_react_calendar = __toESM(require("react-calendar"));
+
+// src/calendar/calendar.icon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function CalendarIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { d: "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z" })
+    }
+  );
+}
+
+// src/calendar/index.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function MyCalendar({
+  enabledDates,
+  onChange,
+  defaultValue = "",
+  className = ""
+}) {
+  const modalRef = (0, import_react31.useRef)(null);
+  const [date, setDate] = (0, import_react31.useState)(defaultValue);
+  const [selectedDate, setSelectedDate] = (0, import_react31.useState)(/* @__PURE__ */ new Date());
+  const [visible, setVisible] = (0, import_react31.useState)(false);
+  const isDateDisabled = ({ date: date2, view }) => {
+    if (view === "month") {
+      return !enabledDates.some(
+        (enabledDate) => date2.getFullYear() === enabledDate.getFullYear() && date2.getMonth() === enabledDate.getMonth() && date2.getDate() === enabledDate.getDate()
+      );
+    }
+    return false;
+  };
+  function handleChange(e) {
+    var _a, _b;
+    setSelectedDate(e);
+    const date2 = new Date(e);
+    const formattedDate = date2.toISOString().split("T")[0];
+    setDate(formattedDate);
+    onChange(e);
+    (_b = (_a = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
+  }
+  (0, import_react31.useEffect)(() => {
+    setVisible(typeof window != "undefined");
+  }, [typeof window]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        onClick: (e) => {
+          var _a, _b;
+          return (_b = (_a = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a.showModal) == null ? void 0 : _b.call(_a);
+        },
+        className: "cursor-pointer flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "input",
+            {
+              className: [
+                "p-2 w-full rounded border shadow cursor-pointer",
+                className
+              ].join(" "),
+              value: date,
+              onChange: (e) => {
+              },
+              readOnly: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarIcon, {}) })
+        ]
+      }
+    ),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "dialog",
+      {
+        ref: modalRef,
+        onClick: (e) => {
+          var _a;
+          const element = e.target;
+          if ((element == null ? void 0 : element.id) == "my-calendar-modal-item") {
+            (_a = modalRef.current) == null ? void 0 : _a.close();
+          }
+        },
+        id: "my-calendar-modal-item",
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          import_react_calendar.default,
+          {
+            onChange: (e) => {
+              handleChange(e);
+            },
+            value: selectedDate,
+            tileDisabled: isDateDisabled
+          }
+        )
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -44205,6 +44332,7 @@ function useExcel() {
   Form,
   Input,
   Modal,
+  MyCalendar,
   Pre,
   Select,
   Table,

package/dist/index.mjs

@@ -11337,7 +11337,12 @@ function FilterMenu({
           /* @__PURE__ */ jsx10("div", { className: "px-2   w-full  h-[150px]", children: /* @__PURE__ */ jsxs8(
             "div",
             {
-              style: { overflow: "auto" },
+              style: {
+                maxHeight: "100px",
+                overflowY: "auto",
+                contentVisibility: "auto",
+                containIntrinsicSize: "100px"
+              },
               className: "border h-full flex gap-2 flex-col  p-1",
               children: [
                 /* @__PURE__ */ jsx10("div", { className: "flex gap-2 items-center justify-start ", children: /* @__PURE__ */ jsxs8("label", { children: [
@@ -43367,7 +43372,19 @@ function HTable(_a) {
 import { jsx as jsx12 } from "react/jsx-runtime";
 function Table(_a) {
   var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx12("div", { className: "bg-gray-200 border rounded shadow p-1", children: Array.isArray(props.data) ? /* @__PURE__ */ jsx12(HTable, __spreadValues({}, props)) : /* @__PURE__ */ jsx12("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" }) });
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: "bg-gray-200 border rounded shadow p-1",
+      style: {
+        maxHeight: "500px",
+        overflowY: "auto",
+        contentVisibility: "auto",
+        containIntrinsicSize: "500px"
+      },
+      children: Array.isArray(props.data) ? /* @__PURE__ */ jsx12(HTable, __spreadValues({}, props)) : /* @__PURE__ */ jsx12("div", { className: " p-5 border rounded shadow bg-yellw-500", children: "No es un array" })
+    }
+  );
 }
 
 // src/text-area/index.tsx
@@ -44188,6 +44205,115 @@ function useExcel() {
   }
   return { import: importFile, export: exportFile };
 }
+
+// src/calendar/index.tsx
+import { useEffect as useEffect9, useRef as useRef7, useState as useState10 } from "react";
+import "react-calendar/dist/Calendar.css";
+import Calendar from "react-calendar";
+
+// src/calendar/calendar.icon.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function CalendarIcon() {
+  return /* @__PURE__ */ jsx20(
+    "svg",
+    {
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0",
+      viewBox: "0 0 448 512",
+      height: "20px",
+      width: "20px",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx20("path", { d: "M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z" })
+    }
+  );
+}
+
+// src/calendar/index.tsx
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function MyCalendar({
+  enabledDates,
+  onChange,
+  defaultValue = "",
+  className = ""
+}) {
+  const modalRef = useRef7(null);
+  const [date, setDate] = useState10(defaultValue);
+  const [selectedDate, setSelectedDate] = useState10(/* @__PURE__ */ new Date());
+  const [visible, setVisible] = useState10(false);
+  const isDateDisabled = ({ date: date2, view }) => {
+    if (view === "month") {
+      return !enabledDates.some(
+        (enabledDate) => date2.getFullYear() === enabledDate.getFullYear() && date2.getMonth() === enabledDate.getMonth() && date2.getDate() === enabledDate.getDate()
+      );
+    }
+    return false;
+  };
+  function handleChange(e) {
+    var _a, _b;
+    setSelectedDate(e);
+    const date2 = new Date(e);
+    const formattedDate = date2.toISOString().split("T")[0];
+    setDate(formattedDate);
+    onChange(e);
+    (_b = (_a = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a.close) == null ? void 0 : _b.call(_a);
+  }
+  useEffect9(() => {
+    setVisible(typeof window != "undefined");
+  }, [typeof window]);
+  return /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        onClick: (e) => {
+          var _a, _b;
+          return (_b = (_a = modalRef == null ? void 0 : modalRef.current) == null ? void 0 : _a.showModal) == null ? void 0 : _b.call(_a);
+        },
+        className: "cursor-pointer flex items-center justify-center",
+        children: [
+          /* @__PURE__ */ jsx21(
+            "input",
+            {
+              className: [
+                "p-2 w-full rounded border shadow cursor-pointer",
+                className
+              ].join(" "),
+              value: date,
+              onChange: (e) => {
+              },
+              readOnly: true
+            }
+          ),
+          /* @__PURE__ */ jsx21("div", { className: "absolute", style: { right: "10px" }, children: /* @__PURE__ */ jsx21(CalendarIcon, {}) })
+        ]
+      }
+    ),
+    visible && /* @__PURE__ */ jsx21(
+      "dialog",
+      {
+        ref: modalRef,
+        onClick: (e) => {
+          var _a;
+          const element = e.target;
+          if ((element == null ? void 0 : element.id) == "my-calendar-modal-item") {
+            (_a = modalRef.current) == null ? void 0 : _a.close();
+          }
+        },
+        id: "my-calendar-modal-item",
+        children: /* @__PURE__ */ jsx21(
+          Calendar,
+          {
+            onChange: (e) => {
+              handleChange(e);
+            },
+            value: selectedDate,
+            tileDisabled: isDateDisabled
+          }
+        )
+      }
+    )
+  ] });
+}
 export {
   Alert,
   Button,
@@ -44195,6 +44321,7 @@ export {
   Form,
   Input,
   Modal,
+  MyCalendar,
   pre_default as Pre,
   Select,
   Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-recomponents",
-  "version": "1.6.82",
+  "version": "1.6.84",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,6 +21,7 @@
     "axios": "^1.9.0",
     "moment": "^2.30.1",
     "react": "^19.1.0",
+    "react-calendar": "^6.0.0",
     "react-dom": "^19.1.0"
   }
 }

package/src/calendar/calendar.icon.tsx

@@ -0,0 +1,15 @@
+export default function CalendarIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 448 512"
+      height="20px"
+      width="20px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"></path>
+    </svg>
+  );
+}

package/src/calendar/index.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import "react-calendar/dist/Calendar.css";
+import Calendar from "react-calendar";
+import CalendarIcon from "./calendar.icon";
+
+export default function MyCalendar({
+  enabledDates,
+  onChange,
+  defaultValue = "",
+  className = "",
+}: {
+  enabledDates: Date[];
+  onChange: (e: any) => void;
+  defaultValue?: string;
+  className?: string;
+}) {
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const [date, setDate] = useState<any>(defaultValue);
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [visible, setVisible] = useState(false);
+  const isDateDisabled = ({ date, view }: { date: Date; view: any }) => {
+    if (view === "month") {
+      // Solo aplica en la vista mensual
+      return !enabledDates.some(
+        (enabledDate) =>
+          date.getFullYear() === enabledDate.getFullYear() &&
+          date.getMonth() === enabledDate.getMonth() &&
+          date.getDate() === enabledDate.getDate()
+      );
+    }
+    return false;
+  };
+
+  function handleChange(e: any) {
+    setSelectedDate(e);
+    const date = new Date(e);
+    const formattedDate = date.toISOString().split("T")[0];
+    setDate(formattedDate);
+    onChange(e);
+    modalRef?.current?.close?.();
+  }
+
+  useEffect(() => {
+    setVisible(typeof window != "undefined");
+  }, [typeof window]);
+
+  return (
+    <div className="relative">
+      <div
+        onClick={(e) => modalRef?.current?.showModal?.()}
+        className="cursor-pointer flex items-center justify-center"
+      >
+        <input
+          className={[
+            "p-2 w-full rounded border shadow cursor-pointer",
+            className,
+          ].join(" ")}
+          value={date}
+          onChange={(e) => {}}
+          readOnly
+        />
+        <div className="absolute" style={{ right: "10px" }}>
+          <CalendarIcon />
+        </div>
+      </div>
+
+      {visible && (
+        <dialog
+          ref={modalRef}
+          onClick={(e) => {
+            const element = e.target as HTMLElement;
+
+            if (element?.id == "my-calendar-modal-item") {
+              modalRef.current?.close();
+            }
+          }}
+          id="my-calendar-modal-item"
+        >
+          <Calendar
+            onChange={(e) => {
+              handleChange(e);
+            }}
+            value={selectedDate}
+            tileDisabled={isDateDisabled} // Aplica restricciones
+          />
+        </dialog>
+      )}
+    </div>
+  );
+}

package/src/index.tsx

@@ -12,3 +12,4 @@ export { default as Modal } from "./modal";
 export { default as Pre } from "./pre";
 export { default as useDates } from "./use-dates";
 export { default as useExcel } from "./use-excel";
+export { default as MyCalendar } from "./calendar";

package/src/table/filter.menu.tsx

@@ -72,7 +72,12 @@ export default function FilterMenu({
             </div>
             <div className="px-2   w-full  h-[150px]">
               <div
-                style={{ overflow: "auto" }}
+                style={{
+                  maxHeight: "100px",
+                  overflowY: "auto",
+                  contentVisibility: "auto",
+                  containIntrinsicSize: "100px",
+                }}
                 className="border h-full flex gap-2 flex-col  p-1"
               >
                 <div className="flex gap-2 items-center justify-start ">

package/src/table/index.tsx

@@ -20,7 +20,15 @@ export interface TableProps
 
 export default function Table({ ...props }: TableProps) {
   return (
-    <div className="bg-gray-200 border rounded shadow p-1">
+    <div
+      className="bg-gray-200 border rounded shadow p-1"
+      style={{
+        maxHeight: "500px",
+        overflowY: "auto",
+        contentVisibility: "auto",
+        containIntrinsicSize: "500px",
+      }}
+    >
       {Array.isArray(props.data) ? (
         <HTable {...props} />
       ) : (